:root{
--bg:#f5f1e7;--surface:#fffdf8;--surface2:#f0ede4;--text:#17231e;--muted:#6a756e;--line:#d7ddd6;
--green:#0f6b57;--green2:#0a4a3d;--amber:#d99632;--amber2:#f2c778;--mint:#dff1e9;--blue:#8eabb8;
--shadow:0 24px 65px rgba(25,40,33,.11);--shadow2:0 10px 28px rgba(25,40,33,.07)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 7% -2%,rgba(217,150,50,.16),transparent 25%),
radial-gradient(circle at 93% 8%,rgba(15,107,87,.13),transparent 30%),
linear-gradient(180deg,#fbf8f1 0%,var(--bg) 100%);min-height:100vh}
a{color:inherit}.page{width:min(1450px,calc(100% - 28px));margin:auto;padding:22px 0 68px}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand-name{font-weight:900;letter-spacing:-.03em;font-size:1.18rem}.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--green);font-weight:900}
.header-actions{display:flex;align-items:center;gap:8px}.pill,.theme-button{border:1px solid var(--line);background:rgba(255,253,248,.9);border-radius:999px;color:var(--text)}
.pill{padding:9px 12px;text-decoration:none;font-size:.82rem;font-weight:750}.theme-button{width:40px;height:40px;cursor:pointer}
.language-menu{display:flex;gap:3px;border:1px solid var(--line);background:rgba(255,253,248,.9);border-radius:999px;padding:4px}
.language-menu a{text-decoration:none;font-size:.69rem;font-weight:850;padding:5px 6px;border-radius:999px;color:var(--muted)}.language-menu a.active{background:var(--green);color:#fff}
.lab-logo{position:relative;width:46px;height:50px}.flask-neck{position:absolute;left:17px;top:1px;width:13px;height:17px;border:2px solid var(--green);border-bottom:0;border-radius:4px 4px 0 0}
.flask-body{position:absolute;left:6px;top:16px;width:35px;height:32px;border:2px solid var(--green);border-radius:7px 7px 15px 15px;overflow:hidden;transform:skewX(-4deg)}
.flask-liquid{position:absolute;left:-2px;right:-2px;bottom:-2px;height:15px;background:var(--amber)}.flask-body i,.flask-body b{position:absolute;border-radius:50%;background:var(--green);opacity:.5}
.flask-body i{width:5px;height:5px;left:8px;top:7px}.flask-body b{width:4px;height:4px;right:8px;top:12px}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:30px;align-items:center;padding:58px 0 25px}
.hero h1{font-size:clamp(3rem,6.4vw,6.6rem);line-height:.89;letter-spacing:-.075em;margin:0 0 18px;max-width:1000px}
.hero h1 span{color:var(--green)}.hero p{max-width:760px;color:var(--muted);font-size:1.08rem;line-height:1.7;margin:0}
.hero-lab{height:220px;position:relative}.atom-hero{position:absolute;inset:12px 30px 10px 30px}
.atom-core{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;background:var(--amber);box-shadow:0 0 0 12px rgba(217,150,50,.12)}
.orbit{position:absolute;left:50%;top:50%;width:175px;height:82px;border:2px solid rgba(15,107,87,.45);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r));}
.orbit:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--green);right:12px;top:12px}
.orbit.o1{--r:0deg}.orbit.o2{--r:60deg}.orbit.o3{--r:-60deg}

.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0}
.search{position:relative;max-width:340px;width:100%}.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:12px 16px 12px 38px;color:var(--text)}
.search:before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:7px}.legend span{font-size:.72rem;color:var(--muted);border:1px solid var(--line);padding:6px 8px;border-radius:999px;background:var(--surface)}

.pt-wrap{overflow-x:auto;padding:8px 2px 18px;scrollbar-width:thin}
.periodic-table{min-width:1120px;display:grid;grid-template-columns:repeat(18,minmax(54px,1fr));grid-auto-rows:76px;gap:6px}
.element{position:relative;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:7px;background:var(--surface);box-shadow:var(--shadow2);overflow:hidden;transition:.18s ease}
.element:hover{transform:translateY(-3px) scale(1.025);z-index:5;border-color:var(--green);box-shadow:var(--shadow)}
.element .n{font-size:.63rem;color:var(--muted)}.element .s{font-size:1.45rem;line-height:1;font-weight:950;letter-spacing:-.04em;margin-top:5px}.element .nm{font-size:.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.element:before{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--accent,var(--green))}
.cat-nonmetal{--accent:#44a87c}.cat-noble_gas{--accent:#6f9fca}.cat-alkali_metal{--accent:#d58d3a}.cat-alkaline_earth_metal{--accent:#d9b45a}.cat-metalloid{--accent:#6eaa9d}.cat-halogen{--accent:#70a65b}.cat-transition_metal{--accent:#a681b0}.cat-post_transition_metal{--accent:#8399a0}.cat-lanthanide{--accent:#58aeb0}.cat-actinide{--accent:#c27b72}.cat-unknown{--accent:#9ba29e}
.f-block{margin-top:8px}.f-title{font-size:.72rem;color:var(--muted);font-weight:850;margin:8px 0}.f-row{min-width:900px;display:grid;grid-template-columns:repeat(15,minmax(54px,1fr));gap:6px}

.home-section{margin-top:28px}.home-section h2{font-size:1.8rem;letter-spacing:-.04em;margin:0 0 14px}
.element-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.list-card{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:14px;text-decoration:none;display:flex;align-items:center;gap:12px}
.list-symbol{width:42px;height:42px;border-radius:12px;background:var(--mint);display:grid;place-items:center;font-weight:900;color:var(--green)}

.element-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:30px;align-items:center;padding:52px 0 28px}
.element-title{display:flex;align-items:flex-start;gap:20px}.big-tile{width:115px;height:128px;border:1px solid var(--line);border-radius:25px;background:var(--surface);box-shadow:var(--shadow);padding:14px;position:relative;flex:0 0 auto}
.big-tile .n{font-size:.78rem;color:var(--muted)}.big-tile .s{font-size:3.8rem;font-weight:950;letter-spacing:-.08em;line-height:1;margin-top:12px}.big-tile:after{content:"";position:absolute;left:14px;right:14px;bottom:12px;height:5px;border-radius:8px;background:var(--accent,var(--green))}
.title-copy h1{font-size:clamp(3rem,6vw,5.8rem);letter-spacing:-.07em;line-height:.92;margin:4px 0 10px}.title-copy p{color:var(--muted);line-height:1.6;margin:0}
.element-visual{height:280px;background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.element-visual .grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(rgba(15,107,87,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,107,87,.08) 1px,transparent 1px);background-size:24px 24px}
.visual-atom{position:absolute;inset:24px}.visual-atom .core{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent,var(--amber));box-shadow:0 0 0 16px color-mix(in srgb,var(--accent,var(--amber)) 16%,transparent)}
.visual-atom .ring{position:absolute;left:50%;top:50%;width:210px;height:88px;border:2px solid color-mix(in srgb,var(--accent,var(--green)) 55%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r))}
.visual-atom .ring:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:var(--accent,var(--green));right:18px;top:10px}.visual-atom .r1{--r:0deg}.visual-atom .r2{--r:60deg}.visual-atom .r3{--r:-60deg}
.visual-label{position:absolute;left:20px;bottom:16px;font-weight:900;color:var(--green);font-size:1.05rem}

.info-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.info-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}.info-card span{display:block;color:var(--muted);font-size:.75rem;margin-bottom:5px}.info-card strong{font-size:1.1rem}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:24px}.article-card,.side-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow2)}
.article-card h2,.side-card h3{margin:0 0 12px;letter-spacing:-.03em}.article-card p,.side-card p{color:var(--muted);line-height:1.75;margin:0}
.neighbor-links{display:grid;gap:9px;margin-top:12px}.neighbor-links a{padding:11px 12px;border:1px solid var(--line);border-radius:14px;text-decoration:none;display:flex;justify-content:space-between}
.breadcrumbs{font-size:.8rem;color:var(--muted);display:flex;gap:7px;align-items:center;margin-top:14px}.breadcrumbs a{text-decoration:none}
body.dark{--bg:#0e1512;--surface:#17201c;--surface2:#1e2a25;--text:#f3f7f5;--muted:#a8b4ae;--line:#314139;--green:#78e0c4;--green2:#9af2db;--mint:#1d3b32;--amber:#f4bd63;--shadow:0 20px 55px rgba(0,0,0,.18);--shadow2:0 8px 24px rgba(0,0,0,.13);background:radial-gradient(circle at 93% 5%,rgba(120,224,196,.08),transparent 28%),linear-gradient(180deg,#111815,#0d1311)}
body.dark .pill,body.dark .theme-button,body.dark .language-menu{background:#17201c}
body.dark .element:hover{border-color:var(--green)}
@media(max-width:1050px){.hero{grid-template-columns:1fr}.hero-lab{display:none}.element-list{grid-template-columns:repeat(4,1fr)}.element-hero{grid-template-columns:1fr}.element-visual{height:230px}.info-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.page{width:min(100% - 18px,720px)}.header-actions .pill{display:none}.hero{padding-top:38px}.hero h1{font-size:3.3rem}.table-toolbar{align-items:flex-start;flex-direction:column}.legend{display:none}
.pt-wrap{overflow:visible}.periodic-table{min-width:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:8px}.element{grid-column:auto!important;grid-row:auto!important;min-height:82px}.element .s{font-size:1.6rem}.element .nm{font-size:.67rem}.f-block{display:none}
.element-list{grid-template-columns:repeat(2,1fr)}.element-title{flex-direction:column}.big-tile{width:100px;height:112px}.big-tile .s{font-size:3.3rem}.title-copy h1{font-size:3rem}.info-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.language-menu{max-width:200px;overflow-x:auto}.element-visual{height:210px}}
@media(max-width:430px){.periodic-table{grid-template-columns:repeat(3,1fr)}.info-grid{grid-template-columns:1fr 1fr}.element-list{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* SIGNATURE HOME */
.signature-home{width:min(1530px,calc(100% - 24px));margin:auto;padding:16px 0 72px}
.sig-header{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:30}
.sig-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.sig-brand-text strong{display:block;font-size:1.15rem;letter-spacing:-.03em}.sig-brand-text span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:850}
.sig-nav{display:flex;align-items:center;gap:7px}.sig-nav>a{padding:9px 11px;border-radius:999px;text-decoration:none;font-size:.8rem;font-weight:800;color:var(--muted)}
.sig-nav>a:hover{background:var(--mint);color:var(--green)}.sig-langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--surface)}
.sig-langs a{font-size:.67rem;font-weight:900;text-decoration:none;color:var(--muted);padding:5px 6px;border-radius:999px}.sig-langs a.active{background:var(--green);color:white}
.sig-theme{border:1px solid var(--line);background:var(--surface);width:38px;height:38px;border-radius:50%;color:var(--text)}
.sig-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.62fr);gap:28px;align-items:center;padding:58px 0 30px}
.sig-kicker{display:flex;align-items:center;gap:9px;color:var(--green);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.sig-kicker:before{content:"";width:24px;border-top:2px solid var(--amber)}
.sig-hero h1{font-size:clamp(3.35rem,6.8vw,7.2rem);line-height:.86;letter-spacing:-.08em;margin:13px 0 20px;max-width:1000px}
.sig-hero h1 em{font-style:normal;color:var(--green)}.sig-hero p{font-size:1.08rem;line-height:1.7;color:var(--muted);max-width:760px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-actions a{padding:11px 15px;border-radius:999px;text-decoration:none;font-weight:850;font-size:.84rem}.hero-actions .primary{background:var(--green);color:white}.hero-actions .secondary{border:1px solid var(--line);background:var(--surface)}
.hero-science{position:relative;height:270px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--mint) 48%,var(--surface)));border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);overflow:hidden}
.hero-science:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,107,87,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,107,87,.06) 1px,transparent 1px);background-size:25px 25px}
.hero-flask-big{position:absolute;width:125px;height:150px;left:48px;top:55px;border:4px solid var(--green);border-radius:14px 14px 50px 50px;transform:rotate(-8deg);overflow:hidden}.hero-flask-big:before{content:"";position:absolute;width:42px;height:54px;left:37px;top:-43px;border:4px solid var(--green);background:var(--surface)}
.hero-flask-big .liquid{position:absolute;left:-10px;right:-10px;bottom:-5px;height:66px;background:linear-gradient(180deg,var(--amber2),var(--amber));transform:rotate(5deg)}.hero-flask-big i,.hero-flask-big b,.hero-flask-big em{position:absolute;border-radius:50%;background:var(--green)}.hero-flask-big i{width:8px;height:8px;left:28px;top:42px}.hero-flask-big b{width:6px;height:6px;right:24px;top:60px}.hero-flask-big em{width:4px;height:4px;left:60px;top:24px}
.hero-atom{position:absolute;right:24px;top:32px;width:160px;height:160px}.hero-atom .core{position:absolute;left:50%;top:50%;width:33px;height:33px;transform:translate(-50%,-50%);background:var(--green);border-radius:50%;box-shadow:0 0 0 11px color-mix(in srgb,var(--green) 14%,transparent)}.hero-atom .orbit{position:absolute;left:50%;top:50%;width:145px;height:61px;border:2px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotate(var(--r))}.hero-atom .orbit:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--amber);right:15px;top:6px}.hero-atom .o1{--r:0deg}.hero-atom .o2{--r:60deg}.hero-atom .o3{--r:-60deg}
.hero-mini-stat{position:absolute;right:26px;bottom:25px;text-align:right}.hero-mini-stat strong{font-size:2rem;letter-spacing:-.06em}.hero-mini-stat span{display:block;color:var(--muted);font-size:.72rem}
.table-stage{position:relative;margin-top:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);border-radius:30px;padding:16px;box-shadow:var(--shadow)}
.table-topbar{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:12px}.table-title-row{display:flex;gap:12px;align-items:center}.table-title-row h2{font-size:1.45rem;letter-spacing:-.04em;margin:0}.table-title-row span{font-size:.75rem;color:var(--muted)}
.sig-search{position:relative;width:min(360px,100%)}.sig-search:before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}.sig-search input{width:100%;border:1px solid var(--line);background:var(--bg);padding:11px 15px 11px 37px;border-radius:999px;color:var(--text);outline:none}.sig-search input:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.table-scroll{overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin;scroll-snap-type:x proximity}
.sig-table{min-width:1260px;display:grid;grid-template-columns:repeat(18,minmax(58px,1fr));grid-template-rows:repeat(7,82px);gap:6px;position:relative}
.sig-el{position:relative;text-decoration:none;color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));border-radius:15px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 72%);padding:7px 7px 8px;box-shadow:0 5px 14px rgba(20,35,29,.045);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;overflow:hidden}
.sig-el:hover,.sig-el.focused{z-index:15;transform:translateY(-4px) scale(1.055);border-color:var(--accent);box-shadow:0 13px 30px color-mix(in srgb,var(--accent) 20%,transparent)}
.sig-el:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--accent)}.sig-el .top{display:flex;justify-content:space-between;gap:4px;align-items:start}.sig-el .num{font-size:.58rem;color:var(--muted)}.sig-el .phase-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:2px}.sig-el .sym{font-size:1.5rem;font-weight:950;letter-spacing:-.055em;line-height:1;margin:7px 0 5px}.sig-el .name{font-size:.6rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-nonmetal{--accent:#54aa7d}.cat-noble_gas{--accent:#6fa7cc}.cat-alkali_metal{--accent:#d68c3e}.cat-alkaline_earth_metal{--accent:#d4ae56}.cat-metalloid{--accent:#64a69a}.cat-halogen{--accent:#83ad59}.cat-transition_metal{--accent:#9d80ae}.cat-post_transition_metal{--accent:#7f98a0}.cat-lanthanide{--accent:#53aeb1}.cat-actinide{--accent:#c47b72}.cat-unknown{--accent:#9aa39e}
.table-center-card{position:absolute;left:calc((100% / 18) * 2 + 12px);top:6px;width:calc((100% / 18) * 10 - 18px);height:calc(82px * 3 + 12px);border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--green) 12%,transparent),transparent 34%),var(--surface);display:grid;grid-template-columns:1fr 190px;gap:12px;align-items:center;padding:22px 22px 20px;z-index:2;overflow:hidden}
.table-center-card h3{font-size:clamp(1.55rem,2.6vw,2.8rem);letter-spacing:-.055em;line-height:.96;margin:6px 0 9px}.table-center-card p{font-size:.78rem;color:var(--muted);line-height:1.55;margin:0;max-width:500px}
.center-symbol{height:160px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(145deg,var(--mint),var(--surface));display:grid;place-items:center;position:relative}.center-symbol strong{font-size:5.2rem;letter-spacing:-.08em;color:var(--green)}.center-symbol span{position:absolute;top:13px;left:15px;font-size:.72rem;color:var(--muted)}
.center-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.center-meta span{border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:.65rem;color:var(--muted)}
.mobile-hint{display:none;font-size:.72rem;color:var(--muted);margin:4px 2px 10px}.f-strip{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start;margin-top:9px}.f-label{font-size:.71rem;color:var(--muted);font-weight:850;padding:11px 2px}.f-elements{display:grid;grid-template-columns:repeat(15,minmax(58px,1fr));gap:6px;min-width:1050px}.f-scroll{overflow-x:auto;scrollbar-width:thin}.f-elements .sig-el{min-height:74px}
.quick-panel{position:fixed;left:50%;bottom:14px;transform:translate(-50%,120%);width:min(520px,calc(100% - 18px));z-index:60;background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);border-radius:24px;box-shadow:0 25px 75px rgba(0,0,0,.22);padding:14px;transition:transform .2s ease;backdrop-filter:blur(12px)}.quick-panel.open{transform:translate(-50%,0)}.quick-inner{display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center}.quick-tile{height:76px;border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--quick) 18%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--quick) 40%,var(--line));display:grid;place-items:center;font-size:2.4rem;font-weight:950;color:var(--quick)}.quick-copy strong{display:block;font-size:1.1rem}.quick-copy span{font-size:.74rem;color:var(--muted);display:block;margin-top:3px}.quick-open{border:0;border-radius:999px;background:var(--green);color:#fff;padding:9px 11px;font-weight:850;text-decoration:none;font-size:.76rem}.quick-close{position:absolute;right:8px;top:7px;border:0;background:transparent;color:var(--muted);font-size:1rem}
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.editorial-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow2)}.editorial-card h2{font-size:clamp(1.75rem,3.3vw,3rem);line-height:.98;letter-spacing:-.055em;margin:10px 0 14px}.editorial-card p{color:var(--muted);line-height:1.72;margin:0;max-width:700px}.story-year{font-size:5rem;line-height:.8;font-weight:950;letter-spacing:-.08em;color:color-mix(in srgb,var(--green) 15%,transparent);position:absolute;right:20px;top:22px}
.tool-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}.tool-preview a{text-decoration:none;padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--bg);font-size:.78rem;font-weight:850;display:flex;justify-content:space-between}.tool-preview a b{color:var(--green)}
.footer-note{text-align:center;color:var(--muted);font-size:.72rem;margin-top:26px}
body.dark .hero-science,body.dark .table-stage,body.dark .editorial-card,body.dark .sig-langs,body.dark .sig-theme{background:#17201c}
body.dark .sig-el{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 12%,#17201c),#17201c 75%)}
body.dark .table-center-card{background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--green) 10%,transparent),transparent 34%),#17201c}.dark .sig-search input,.dark .tool-preview a{background:#111815}
@media(max-width:980px){.sig-hero{grid-template-columns:1fr}.hero-science{display:none}.section-grid{grid-template-columns:1fr}.sig-nav>a{display:none}.table-center-card{grid-template-columns:1fr 130px}.center-symbol{height:130px}.center-symbol strong{font-size:4rem}}
@media(max-width:700px){
.signature-home{width:min(100% - 14px,700px);padding-top:10px}.sig-brand-text span{display:none}.sig-langs{max-width:180px;overflow-x:auto}.sig-theme{display:none}.sig-hero{padding:38px 4px 20px}.sig-hero h1{font-size:3.55rem}.sig-hero p{font-size:.96rem}
.table-stage{padding:10px;border-radius:22px}.table-topbar{grid-template-columns:1fr}.sig-search{width:100%;max-width:none}.table-title-row span{display:none}.mobile-hint{display:block}.table-scroll{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;scroll-padding-left:10px}
.sig-table{min-width:980px;grid-template-columns:repeat(18,49px);grid-template-rows:repeat(7,66px);gap:5px}.sig-el{border-radius:11px;padding:5px}.sig-el:hover{transform:none}.sig-el .sym{font-size:1.18rem;margin:5px 0 3px}.sig-el .name{font-size:.51rem}.sig-el .num{font-size:.5rem}
.table-center-card{left:108px;top:5px;width:535px;height:208px;border-radius:17px;padding:15px;grid-template-columns:1fr 105px}.table-center-card h3{font-size:1.65rem}.table-center-card p{font-size:.68rem}.center-symbol{height:100px;border-radius:16px}.center-symbol strong{font-size:3.2rem}.center-meta{display:none}
.f-strip{grid-template-columns:1fr}.f-label{padding:6px 0 0}.f-elements{grid-template-columns:repeat(15,49px);min-width:805px;gap:5px}.f-elements .sig-el{min-height:64px}
.section-grid{gap:10px;margin-top:17px}.editorial-card{padding:21px;border-radius:22px}.editorial-card h2{font-size:2rem}.story-year{font-size:3.5rem}.quick-inner{grid-template-columns:62px 1fr auto}.quick-tile{height:62px;font-size:2rem}.quick-panel{bottom:8px;border-radius:20px}}
@media(max-width:420px){.sig-hero h1{font-size:3rem}.sig-langs{max-width:150px}.sig-langs a{padding:5px;font-size:.62rem}.table-center-card{grid-template-columns:1fr}.center-symbol{display:none}.tool-preview{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}


/* ===== Mendeleev V1 refined laboratory mark ===== */
.lab-logo{
  position:relative;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.75),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--mint) 70%,var(--surface)),var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 18%,var(--line));
  box-shadow:0 8px 22px rgba(20,40,32,.08);
  overflow:hidden;
}
.lab-logo .flask-neck{
  position:absolute;
  left:19px;
  top:8px;
  width:10px;
  height:12px;
  border:2px solid var(--green);
  border-bottom:0;
  border-radius:4px 4px 0 0;
}
.lab-logo .flask-body{
  position:absolute;
  left:12px;
  top:18px;
  width:24px;
  height:22px;
  border:2px solid var(--green);
  border-radius:6px 6px 12px 12px;
  overflow:hidden;
  transform:none;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
}
.lab-logo .flask-body:before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:8px;
  height:1px;
  background:color-mix(in srgb,var(--green) 22%,transparent);
}
.lab-logo .flask-liquid{
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height:9px;
  background:linear-gradient(180deg,var(--amber2),var(--amber));
  border-radius:50% 50% 8px 8px / 18% 18% 8px 8px;
}
.lab-logo .flask-body i,
.lab-logo .flask-body b{
  position:absolute;
  border-radius:50%;
  background:var(--green);
  opacity:.7;
}
.lab-logo .flask-body i{width:3px;height:3px;left:6px;top:5px}
.lab-logo .flask-body b{width:2px;height:2px;right:6px;top:7px}
.lab-logo:before,
.lab-logo:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:36px;
  height:15px;
  border:1px solid color-mix(in srgb,var(--green) 28%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(34deg);
  pointer-events:none;
}
.lab-logo:after{transform:translate(-50%,-50%) rotate(-34deg)}



/* ===== Mendeleev historical CSS portrait ===== */
.mendeleev-story{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:26px;
  align-items:center;
}
.mendeleev-copy{position:relative;z-index:2}
.mendeleev-portrait{
  position:relative;
  height:270px;
  min-width:190px;
  align-self:end;
}
.mendeleev-portrait .periodic-ghost{
  position:absolute;
  inset:10px 0 auto 12px;
  display:grid;
  grid-template-columns:repeat(4,34px);
  gap:5px;
  transform:rotate(-4deg);
  opacity:.32;
}
.mendeleev-portrait .periodic-ghost i{
  display:block;
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));
  border-radius:7px;
  background:color-mix(in srgb,var(--mint) 40%,transparent);
}
.mendeleev-portrait .periodic-ghost i:nth-child(2),
.mendeleev-portrait .periodic-ghost i:nth-child(5),
.mendeleev-portrait .periodic-ghost i:nth-child(8){transform:translateY(15px)}
.mendeleev-person{
  position:absolute;
  left:50%;
  bottom:0;
  width:170px;
  height:245px;
  transform:translateX(-50%);
}
.mendeleev-person .coat{
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:98px;
  background:linear-gradient(145deg,#26352f,#17231e);
  border-radius:54px 54px 20px 20px;
  box-shadow:0 18px 34px rgba(20,35,29,.12);
}
.mendeleev-person .coat:before,
.mendeleev-person .coat:after{
  content:"";
  position:absolute;
  top:20px;
  width:64px;
  height:82px;
  background:linear-gradient(145deg,#30423a,#1b2924);
}
.mendeleev-person .coat:before{
  left:13px;
  clip-path:polygon(0 0,100% 48%,55% 100%,0 70%);
}
.mendeleev-person .coat:after{
  right:13px;
  clip-path:polygon(100% 0,0 48%,45% 100%,100% 70%);
}
.mendeleev-person .shirt{
  position:absolute;
  left:66px;
  bottom:70px;
  width:38px;
  height:44px;
  background:#f6f1e8;
  clip-path:polygon(0 0,100% 0,75% 100%,50% 76%,25% 100%);
  z-index:2;
}
.mendeleev-person .head{
  position:absolute;
  left:46px;
  top:44px;
  width:78px;
  height:92px;
  background:linear-gradient(160deg,#d7bfa6,#b99c83);
  border-radius:46% 46% 42% 42% / 42% 42% 58% 58%;
  z-index:4;
  box-shadow:inset -8px -6px 14px rgba(70,49,34,.08);
}
.mendeleev-person .head:before,
.mendeleev-person .head:after{
  content:"";
  position:absolute;
  top:45px;
  width:7px;
  height:4px;
  border-radius:50%;
  background:#344139;
}
.mendeleev-person .head:before{left:21px}
.mendeleev-person .head:after{right:21px}
.mendeleev-person .nose{
  position:absolute;
  left:50%;
  top:86px;
  width:8px;
  height:20px;
  border-right:2px solid rgba(71,51,39,.45);
  border-bottom:2px solid rgba(71,51,39,.32);
  border-radius:0 0 8px 0;
  transform:translateX(-50%);
  z-index:6;
}
.mendeleev-person .hair-left,
.mendeleev-person .hair-right{
  position:absolute;
  top:32px;
  width:63px;
  height:103px;
  background:
    repeating-linear-gradient(82deg,rgba(245,243,235,.96) 0 4px,rgba(180,178,168,.92) 4px 7px);
  border-radius:58% 32% 55% 45%;
  z-index:3;
  filter:drop-shadow(0 6px 4px rgba(30,40,35,.05));
}
.mendeleev-person .hair-left{left:19px;transform:rotate(9deg)}
.mendeleev-person .hair-right{right:19px;transform:scaleX(-1) rotate(9deg)}
.mendeleev-person .crown{
  position:absolute;
  left:48px;
  top:26px;
  width:74px;
  height:50px;
  border-radius:50% 50% 20% 20%;
  background:repeating-linear-gradient(96deg,#d9d8d0 0 4px,#bdbbb1 4px 7px);
  z-index:5;
  clip-path:polygon(0 65%,15% 25%,42% 0,63% 4%,86% 28%,100% 72%,85% 50%,65% 44%,43% 46%,23% 53%);
}
.mendeleev-person .beard{
  position:absolute;
  left:39px;
  top:107px;
  width:92px;
  height:108px;
  background:
    repeating-linear-gradient(83deg,#e4e1d7 0 4px,#bbb9b0 4px 7px);
  clip-path:polygon(8% 0,92% 0,98% 27%,86% 58%,68% 87%,51% 100%,30% 84%,12% 58%,2% 27%);
  border-radius:42% 42% 50% 50%;
  z-index:7;
  filter:drop-shadow(0 8px 6px rgba(30,40,35,.07));
}
.mendeleev-person .beard:before{
  content:"";
  position:absolute;
  left:25px;
  top:2px;
  width:43px;
  height:13px;
  border-top:5px solid #a7a49b;
  border-radius:50%;
}
.mendeleev-signature{
  position:absolute;
  right:5px;
  bottom:4px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:.7rem;
  color:var(--muted);
  transform:rotate(-5deg);
}
body.dark .mendeleev-person .coat{
  background:linear-gradient(145deg,#384a42,#1d2924);
}
body.dark .mendeleev-person .head{
  background:linear-gradient(160deg,#c5aa91,#9f826b);
}
@media(max-width:760px){
  .mendeleev-story{grid-template-columns:1fr 145px;gap:8px}
  .mendeleev-portrait{height:220px;min-width:130px;transform:scale(.85);transform-origin:right bottom}
  .mendeleev-portrait .periodic-ghost{display:none}
}
@media(max-width:520px){
  .mendeleev-story{display:block}
  .mendeleev-portrait{
    height:178px;
    width:135px;
    min-width:0;
    float:right;
    margin:-8px -10px 4px 10px;
    transform:scale(.72);
    transform-origin:right bottom;
  }
}


/* ===== V1.2 refined Mendeleev portrait ===== */
.mendeleev-signature{display:none!important}
.mendeleev-portrait{height:258px;min-width:194px}
.mendeleev-person{width:174px;height:238px}
.mendeleev-person .coat{
  left:18px;right:18px;height:94px;border-radius:58px 58px 18px 18px;
  background:linear-gradient(150deg,#31423b 0%,#1c2924 62%,#16221d 100%);
}
.mendeleev-person .head{
  left:47px;top:43px;width:80px;height:91px;
  background:linear-gradient(155deg,#dec5aa 0%,#c2a287 68%,#b49378 100%);
  border-radius:48% 48% 44% 44% / 44% 44% 56% 56%;
  box-shadow:inset -8px -5px 12px rgba(77,52,34,.08),inset 5px 3px 10px rgba(255,255,255,.16);
}
.mendeleev-person .head:before,
.mendeleev-person .head:after{top:43px;width:8px;height:4px;background:#39433d;box-shadow:0 -6px 0 -2px #66584b}
.mendeleev-person .head:before{left:21px;transform:rotate(-5deg)}
.mendeleev-person .head:after{right:21px;transform:rotate(5deg)}
.mendeleev-person .nose{left:50%;top:84px;width:7px;height:17px;border-right:2px solid rgba(79,55,40,.34);border-bottom:2px solid rgba(79,55,40,.26)}
.mendeleev-person .smile{
  position:absolute;left:73px;top:105px;width:28px;height:11px;
  border-bottom:3px solid #755747;border-radius:0 0 50% 50%;z-index:8;
}
.mendeleev-person .hair-left,
.mendeleev-person .hair-right{
  top:31px;width:64px;height:99px;
  background:
    radial-gradient(ellipse at 28% 22%,#eeeae0 0 14%,transparent 15%),
    radial-gradient(ellipse at 68% 34%,#d7d3c8 0 17%,transparent 18%),
    radial-gradient(ellipse at 42% 62%,#c4c0b6 0 20%,transparent 21%),
    linear-gradient(135deg,#e4e0d6 0%,#b8b4aa 100%);
  border-radius:60% 34% 58% 46%;
  filter:drop-shadow(0 5px 5px rgba(30,40,35,.055));
}
.mendeleev-person .hair-left{left:19px;transform:rotate(8deg)}
.mendeleev-person .hair-right{right:19px;transform:scaleX(-1) rotate(8deg)}
.mendeleev-person .crown{
  left:49px;top:27px;width:76px;height:47px;
  background:linear-gradient(145deg,#e5e1d7,#bdb9af);
  clip-path:polygon(2% 70%,11% 33%,30% 9%,51% 2%,72% 12%,91% 38%,99% 72%,82% 54%,63% 48%,42% 48%,21% 55%);
  border-radius:50%;
}
.mendeleev-person .beard{
  left:38px;top:106px;width:96px;height:108px;
  background:
    radial-gradient(ellipse at 35% 22%,rgba(255,255,255,.32) 0 13%,transparent 14%),
    radial-gradient(ellipse at 65% 34%,rgba(255,255,255,.18) 0 16%,transparent 17%),
    linear-gradient(145deg,#e5e1d7 0%,#c5c0b5 55%,#aaa69d 100%);
  clip-path:polygon(7% 0,93% 0,99% 27%,88% 58%,70% 87%,51% 100%,31% 86%,12% 59%,1% 27%);
  border-radius:44% 44% 51% 51%;
  filter:drop-shadow(0 8px 6px rgba(30,40,35,.07));
}
.mendeleev-person .beard:before{
  content:"";position:absolute;left:23px;top:4px;width:50px;height:13px;
  border-top:5px solid #9d998f;border-radius:50%;
}


/* ===== V1.2 editorial discovery cards ===== */
.discovery-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.discovery-card{
  position:relative;
  min-height:215px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  text-decoration:none;
  color:var(--text);
  background:var(--surface);
  box-shadow:var(--shadow2);
  transition:transform .16s ease,border-color .16s ease;
}
.discovery-card:hover{transform:translateY(-3px);border-color:var(--green)}
.discovery-card .eyebrow{margin-bottom:8px}
.discovery-card h3{font-size:1.18rem;letter-spacing:-.035em;line-height:1.08;margin:0 0 9px;max-width:210px}
.discovery-card p{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0;max-width:230px}
.discovery-card .examples{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;max-width:230px
}
.discovery-card .examples span{
  font-size:.64rem;font-weight:800;padding:5px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
}
.discovery-card .arrow{
  position:absolute;right:15px;bottom:13px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  color:var(--accent);font-weight:900
}
.discovery-card .mini-visual{position:absolute;right:8px;top:8px;width:78px;height:78px;opacity:.9}
.discovery-card.daily{--accent:#3e9e72}
.discovery-card.objects{--accent:#d79432}
.discovery-card.families{--accent:#8463a7}
.discovery-card.converters{--accent:#4d80c7}
.mini-daily:before,.mini-daily:after{content:"";position:absolute}
.mini-daily:before{width:46px;height:60px;border:3px solid var(--accent);border-radius:10px;left:10px;top:8px;transform:rotate(-11deg)}
.mini-daily:after{width:28px;height:22px;border-radius:50% 50% 45% 45%;background:color-mix(in srgb,var(--accent) 25%,transparent);right:0;bottom:7px;border:3px solid var(--accent)}
.mini-objects:before{content:"";position:absolute;left:14px;top:6px;width:48px;height:65px;border:3px solid var(--accent);border-radius:9px;transform:rotate(8deg);box-shadow:inset 0 0 0 10px color-mix(in srgb,var(--accent) 9%,transparent)}
.mini-families:before{content:"";position:absolute;left:23px;top:14px;width:34px;height:34px;background:color-mix(in srgb,var(--accent) 30%,transparent);border:3px solid var(--accent);transform:rotate(45deg);box-shadow:15px 15px 0 -5px color-mix(in srgb,var(--accent) 20%,transparent),-12px 17px 0 -6px color-mix(in srgb,var(--accent) 18%,transparent)}
.mini-converters:before{content:"";position:absolute;left:32px;top:4px;width:14px;height:58px;border:3px solid var(--accent);border-radius:10px}
.mini-converters:after{content:"";position:absolute;left:25px;bottom:4px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,transparent);border:3px solid var(--accent)}
.discovery-intro{margin-top:34px}
.discovery-intro h2{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.045em;margin:0 0 8px}
.discovery-intro p{color:var(--muted);max-width:760px;line-height:1.65;margin:0}
@media(max-width:920px){.discovery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
 .discovery-grid{grid-template-columns:1fr}
 .discovery-card{min-height:185px}
 .discovery-card h3,.discovery-card p{max-width:78%}
}


/* ===== V2 production editorial ===== */
.mendeleev-portrait .periodic-ghost{display:grid!important}
.mendeleev-signature{display:none!important}
.v2-editorial{margin-top:28px}
.v2-story{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow2)}
.v2-story h2{font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:-.045em;margin:0 0 12px}
.v2-story p{font-size:.98rem;line-height:1.76;color:var(--muted);margin:0}
.v2-factline{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.v2-factline div{border:1px solid var(--line);background:var(--bg);border-radius:15px;padding:12px}
.v2-factline span{display:block;color:var(--muted);font-size:.7rem;margin-bottom:4px}.v2-factline strong{font-size:.95rem}
.v2-note{margin-top:14px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--mint) 55%,var(--surface));border:1px solid color-mix(in srgb,var(--green) 18%,var(--line));font-size:.82rem;line-height:1.6;color:var(--muted)}
@media(max-width:700px){.v2-story{padding:19px;border-radius:21px}.v2-factline{grid-template-columns:1fr 1fr}}


/* ===== V2 launch: About / Fl + Mt ===== */
.about-hero{padding:56px 0 24px;max-width:1020px}
.about-hero h1{font-size:clamp(3.2rem,7vw,6.8rem);line-height:.9;letter-spacing:-.075em;margin:10px 0 18px}
.about-hero p{font-size:1.05rem;line-height:1.75;color:var(--muted);max-width:820px}
.creators-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.creator-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow2)}
.creator-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.chem-signature{
 width:92px;height:102px;flex:0 0 92px;position:relative;
 border:1px solid color-mix(in srgb,var(--sig) 45%,var(--line));
 border-radius:20px;padding:10px;
 background:linear-gradient(145deg,color-mix(in srgb,var(--sig) 15%,var(--surface)),var(--surface));
 box-shadow:0 12px 30px color-mix(in srgb,var(--sig) 13%,transparent)
}
.chem-signature .atomic{position:absolute;left:11px;top:9px;font-size:.68rem;color:var(--muted);font-weight:800}
.chem-signature .symbol{display:grid;place-items:center;height:64px;font-size:3.1rem;font-weight:950;letter-spacing:-.08em;color:var(--sig)}
.chem-signature .name{position:absolute;left:10px;right:10px;bottom:9px;font-size:.63rem;color:var(--muted);text-align:center;font-weight:800}
.chem-signature.fl{--sig:#48a47c}.chem-signature.mt{--sig:#8a74ae}
.creator-title h2{margin:0 0 4px;font-size:1.8rem;letter-spacing:-.045em}
.creator-title p{margin:0;color:var(--muted);font-size:.84rem}
.creator-card>p{color:var(--muted);line-height:1.78;margin:0}
.about-section{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px;margin-top:16px;box-shadow:var(--shadow2)}
.about-section h2{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.045em;margin:0 0 12px}
.about-section p{color:var(--muted);line-height:1.78;margin:0 0 12px}
.about-section p:last-child{margin-bottom:0}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.about-value{border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--bg)}
.about-value strong{display:block;margin-bottom:5px}.about-value span{font-size:.78rem;color:var(--muted);line-height:1.5}
.about-quote{padding:45px 18px;text-align:center}
.about-quote strong{font-size:clamp(1.8rem,4vw,3.4rem);letter-spacing:-.05em;line-height:1.05;display:block}
.about-quote em{display:block;color:var(--green);font-size:1.05rem;margin-top:9px;font-style:normal}
.about-quote small{display:block;color:var(--muted);margin-top:14px;font-weight:800}
.legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.legal-item{border-top:1px solid var(--line);padding-top:14px}
.legal-item h3{font-size:.95rem;margin:0 0 6px}.legal-item p{font-size:.82rem;line-height:1.65}
.footer-about-link{color:var(--muted);text-decoration:none;font-weight:800;margin-left:8px}
.footer-about-link:hover{color:var(--green)}
@media(max-width:760px){
 .creators-grid{grid-template-columns:1fr}.about-values{grid-template-columns:1fr}.legal-grid{grid-template-columns:1fr}
 .creator-card{padding:20px;border-radius:22px}.about-section{padding:21px;border-radius:22px}
 .chem-signature{width:78px;height:88px;flex-basis:78px}.chem-signature .symbol{height:54px;font-size:2.6rem}
}

/* ===== V2.1 portrait correction ===== */
.mendeleev-portrait .periodic-ghost{display:grid!important}
.mendeleev-signature{display:none!important}
.mendeleev-person .hair-left,
.mendeleev-person .hair-right{
  background:linear-gradient(145deg,#e8e4da 0%,#cbc7bd 48%,#aaa69d 100%)!important;
}
.mendeleev-person .beard{
  background:linear-gradient(150deg,#e8e4da 0%,#cbc6bb 58%,#aaa69d 100%)!important;
}
.footer-about-link{font-weight:400!important}

/* ===== V2.2 unified converter chrome ===== */
.tools-unified-header{margin-bottom:8px}
.tools-unified-header .brand{min-width:max-content}
.tools-unified-header .language-menu a.active{background:var(--green);color:#fff}
.tools-site-footer{
  margin-top:38px;padding:22px 2px 4px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted)
}
.tools-footer-brand strong{display:block;color:var(--text);font-size:.94rem}
.tools-footer-brand span{display:block;font-size:.72rem;margin-top:3px}
.tools-site-footer nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px}
.tools-site-footer nav a{color:var(--muted);text-decoration:none;font-size:.75rem;font-weight:400}
.tools-site-footer nav a:hover{color:var(--green)}
@media(max-width:820px){
 .tools-unified-header .tools-elements-pill{display:none}
 .tools-site-footer{align-items:flex-start;flex-direction:column}
 .tools-site-footer nav{justify-content:flex-start}
}
@media(max-width:620px){
 .tools-unified-header .tools-home-pill{display:none}
 .tools-unified-header .header-actions{gap:5px}
 .tools-unified-header .language-menu{max-width:190px;overflow-x:auto}
 .tools-site-footer{margin-top:26px;padding-top:18px}
}

.tools-unified-header .lab-logo{width:48px!important;height:48px!important}
.tools-unified-header .brand-name{font-weight:900!important;letter-spacing:-.03em!important;font-size:1.18rem!important}
.tools-unified-header .eyebrow{font-size:.7rem!important;letter-spacing:.14em!important;color:var(--green)!important}

/* ===== V2.2 production converter shared chrome ===== */
.tools-unified-header .brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.tools-unified-header .pill{
  padding:9px 12px;text-decoration:none;font-size:.82rem;font-weight:750;
  border:1px solid var(--line);background:rgba(255,253,248,.9);border-radius:999px;color:var(--text)
}
.tools-unified-header .theme-button{
  width:40px;height:40px;cursor:pointer;border:1px solid var(--line);
  background:rgba(255,253,248,.9);border-radius:999px;color:var(--text)
}
body.dark .tools-unified-header .pill,
body.dark .tools-unified-header .theme-button{background:#17201c}

/* ===== public footer cleanup ===== */
.footer-note,.footer-note a,.tools-site-footer-minimal,.tools-site-footer-minimal a{font-weight:400!important}
.tools-site-footer-minimal{
 display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
 gap:7px!important;color:var(--muted)!important;font-size:.75rem!important
}
.tools-site-footer-minimal a{color:var(--muted);text-decoration:none}
.tools-site-footer-minimal a:hover{color:var(--green)}

/* ===== Editorial element experience ===== */
.element-experience{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:16px;margin-top:20px}
.element-story-card,.element-context-card,.source-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow2)}
.element-story-card h2,.element-context-card h2{font-size:clamp(1.5rem,2.5vw,2.2rem);letter-spacing:-.045em;margin:7px 0 11px}.element-story-card p,.element-context-card p{color:var(--muted);line-height:1.78;margin:0 0 12px}
.element-use-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.element-use-chips span{padding:7px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.72rem;font-weight:750}
.element-memory{margin-top:14px;padding:15px 17px;border-left:3px solid var(--green);border-radius:0 16px 16px 0;background:color-mix(in srgb,var(--mint) 48%,var(--surface));line-height:1.6;color:var(--text)}
.atomic-weight-card{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:13px;padding:12px 14px;border-radius:15px;background:var(--bg);border:1px solid var(--line)}.atomic-weight-card span{font-size:.7rem;color:var(--muted)}.atomic-weight-card strong{font-size:.98rem}
.element-scene{--scene:#4f9c7b;position:relative;min-height:245px;border:1px solid color-mix(in srgb,var(--scene) 32%,var(--line));border-radius:24px;overflow:hidden;background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--scene) 16%,transparent),transparent 32%),linear-gradient(150deg,color-mix(in srgb,var(--scene) 9%,var(--surface)),var(--surface));margin-bottom:16px}
.element-scene .scene-symbol{position:absolute;left:18px;top:15px;font-size:4.8rem;font-weight:950;letter-spacing:-.09em;color:color-mix(in srgb,var(--scene) 86%,var(--text))}.element-scene .scene-number{position:absolute;left:21px;top:88px;color:var(--muted);font-size:.72rem;font-weight:850}.element-scene .scene-orbit{position:absolute;right:22px;top:35px;width:115px;height:55px;border:2px solid color-mix(in srgb,var(--scene) 36%,transparent);border-radius:50%;transform:rotate(28deg)}.element-scene .scene-orbit:before,.element-scene .scene-orbit:after{content:"";position:absolute;border-radius:50%;background:var(--scene)}.element-scene .scene-orbit:before{width:9px;height:9px;right:13px;top:5px}.element-scene .scene-orbit:after{width:6px;height:6px;left:17px;bottom:5px}
.element-scene .object{position:absolute;left:50%;bottom:23px;transform:translateX(-20%);width:130px;height:105px}
.scene-battery .object{width:116px;height:62px;border:4px solid var(--scene);border-radius:14px}.scene-battery .object:after{content:"";position:absolute;right:-13px;top:17px;width:10px;height:27px;background:var(--scene);border-radius:0 5px 5px 0}.scene-battery .object:before{content:"+";position:absolute;left:15px;top:7px;font-size:32px;font-weight:900;color:var(--scene)}
.scene-chip .object{width:100px;height:82px;border:4px solid var(--scene);border-radius:14px;background:repeating-linear-gradient(90deg,transparent 0 13px,color-mix(in srgb,var(--scene) 13%,transparent) 13px 15px)}.scene-chip .object:before,.scene-chip .object:after{content:"";position:absolute;left:-18px;right:-18px;height:3px;top:18px;background:repeating-linear-gradient(90deg,var(--scene) 0 8px,transparent 8px 17px);box-shadow:0 22px 0 0 var(--scene),0 44px 0 0 var(--scene)}
.scene-cable .object{height:28px;width:140px;border:7px solid #2d3430;border-radius:20px;transform:translateX(-22%) rotate(-10deg)}.scene-cable .object:after{content:"";position:absolute;inset:3px 8px;background:repeating-linear-gradient(90deg,#b76a31 0 6px,#e0a265 6px 10px);border-radius:8px}
.scene-glass .object{width:100px;height:95px;border:4px solid var(--scene);border-radius:10px 10px 28px 28px;transform:translateX(-15%) rotate(7deg);background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--scene) 20%,transparent) 46%)}
.scene-carbon .object{width:88px;height:88px;background:linear-gradient(135deg,color-mix(in srgb,var(--scene) 22%,transparent),transparent);border:4px solid var(--scene);transform:translateX(-10%) rotate(45deg);border-radius:12px}.scene-carbon .object:after{content:"";position:absolute;inset:18px;border:3px solid var(--scene);border-radius:50%}
.scene-oxygen .object,.scene-air .object,.scene-gas .object,.scene-toxicgas .object{width:120px;height:80px}.scene-oxygen .object:before,.scene-air .object:before,.scene-gas .object:before,.scene-toxicgas .object:before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;border:4px solid var(--scene);left:4px;top:12px;box-shadow:58px 0 0 -4px var(--surface),58px 0 0 0 var(--scene)}
.scene-cosmos .object{width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fff7c9 0 8%,#f2be52 9% 27%,#d57f34 45%,transparent 47%);filter:drop-shadow(0 0 20px rgba(221,154,60,.25))}.scene-cosmos .object:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--scene);right:-10px;top:13px;box-shadow:-130px 25px 0 -1px var(--scene),-85px -37px 0 -2px var(--scene)}
.scene-light .object,.scene-lamp .object{width:72px;height:104px;border:4px solid var(--scene);border-radius:50% 50% 20px 20px}.scene-light .object:after,.scene-lamp .object:after{content:"";position:absolute;left:19px;right:19px;bottom:-18px;height:18px;border:4px solid var(--scene);border-top:0;border-radius:0 0 7px 7px}
.scene-salt .object{width:95px;height:95px;border:4px solid var(--scene);transform:translateX(-15%) rotate(30deg);box-shadow:inset 20px 20px 0 color-mix(in srgb,var(--scene) 10%,transparent)}
.scene-bone .object{width:125px;height:34px;border-radius:25px;background:var(--scene);transform:translateX(-20%) rotate(-14deg)}.scene-bone .object:before,.scene-bone .object:after{content:"";position:absolute;width:42px;height:42px;border-radius:50%;background:var(--scene);top:-4px}.scene-bone .object:before{left:-16px;box-shadow:0 25px 0 var(--scene)}.scene-bone .object:after{right:-16px;box-shadow:0 25px 0 var(--scene)}
.scene-steel .object,.scene-aerospace .object,.scene-lightmetal .object{width:135px;height:70px;clip-path:polygon(0 35%,70% 0,100% 18%,68% 35%,100% 54%,70% 66%,0 100%,35% 54%);background:var(--scene)}
.scene-coin .object,.scene-gold .object{width:92px;height:92px;border-radius:50%;border:6px double var(--scene);box-shadow:14px 12px 0 color-mix(in srgb,var(--scene) 18%,transparent)}
.scene-galvanize .object,.scene-alloy .object,.scene-hardmetal .object,.scene-heat .object,.scene-jet .object{width:125px;height:75px;border:5px solid var(--scene);border-radius:10px;transform:translateX(-18%) rotate(-8deg);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--scene) 18%,transparent) 0 9px,transparent 9px 18px)}
.scene-medical .object,.scene-medicine .object{width:92px;height:92px;border-radius:50%;border:4px solid var(--scene)}.scene-medical .object:before,.scene-medicine .object:before{content:"+";position:absolute;inset:5px;display:grid;place-items:center;font-size:58px;font-weight:900;color:var(--scene)}
.scene-clock .object{width:94px;height:94px;border-radius:50%;border:5px solid var(--scene)}.scene-clock .object:before{content:"";position:absolute;width:4px;height:34px;background:var(--scene);left:45px;top:14px;transform-origin:bottom;transform:rotate(20deg)}.scene-clock .object:after{content:"";position:absolute;width:30px;height:4px;background:var(--scene);left:45px;top:45px;transform-origin:left;transform:rotate(25deg)}
.scene-firework .object{width:5px;height:90px;background:var(--scene)}.scene-firework .object:before{content:"✦";position:absolute;font-size:72px;color:var(--scene);left:-34px;top:-48px}
.scene-reactor .object,.scene-radioactive .object,.scene-neutron .object,.scene-smoke .object,.scene-research .object{width:100px;height:100px;border-radius:50%;border:4px solid var(--scene)}.scene-reactor .object:before,.scene-radioactive .object:before,.scene-neutron .object:before,.scene-smoke .object:before,.scene-research .object:before{content:"";position:absolute;inset:31px;border-radius:50%;background:var(--scene);box-shadow:0 -35px 0 -8px var(--scene),30px 18px 0 -8px var(--scene),-30px 18px 0 -8px var(--scene)}
.scene-catalyst .object{width:110px;height:78px;border-radius:18px;background:radial-gradient(circle,var(--scene) 0 4px,transparent 5px);background-size:22px 22px;border:4px solid var(--scene)}
.scene-screen .object{width:120px;height:82px;border:5px solid var(--scene);border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--scene) 20%,transparent),transparent)}.scene-screen .object:after{content:"";position:absolute;left:35px;right:35px;bottom:-16px;height:12px;border-top:4px solid var(--scene)}
.scene-laser .object,.scene-fiber .object,.scene-optics .object{width:120px;height:70px}.scene-laser .object:before,.scene-fiber .object:before,.scene-optics .object:before{content:"";position:absolute;left:0;top:34px;width:120px;height:4px;background:var(--scene);box-shadow:80px -12px 0 -1px color-mix(in srgb,var(--scene) 65%,transparent),80px 12px 0 -1px color-mix(in srgb,var(--scene) 65%,transparent)}
.scene-superconduct .object,.scene-magnet .object{width:120px;height:85px;border:15px solid var(--scene);border-top:0;border-radius:0 0 48px 48px}.scene-superconduct .object:before,.scene-magnet .object:before{content:"";position:absolute;left:-15px;top:-4px;width:38px;height:26px;background:#d55}.scene-superconduct .object:after,.scene-magnet .object:after{content:"";position:absolute;right:-15px;top:-4px;width:38px;height:26px;background:#5b7fc8}
.scene-capacitor .object{width:54px;height:90px;border:5px solid var(--scene);border-radius:10px}.scene-capacitor .object:before,.scene-capacitor .object:after{content:"";position:absolute;width:4px;height:42px;background:var(--scene);bottom:-40px}.scene-capacitor .object:before{left:11px}.scene-capacitor .object:after{right:11px}
.scene-liquidmetal .object,.scene-liquid .object{width:100px;height:55px;border-radius:50% 50% 45% 45%;background:linear-gradient(145deg,#eef1ee,var(--scene));box-shadow:inset -18px -8px 22px rgba(0,0,0,.12)}
.scene-shield .object{width:100px;height:115px;clip-path:polygon(50% 0,95% 18%,86% 72%,50% 100%,14% 72%,5% 18%);background:var(--scene)}
.scene-sulfur .object{width:100px;height:82px;clip-path:polygon(10% 55%,25% 12%,58% 0,92% 25%,85% 75%,42% 100%);background:#e4c735;border:4px solid color-mix(in srgb,#b09616 70%,var(--line))}
.scene-tin .object{width:95px;height:110px;border:4px solid var(--scene);border-radius:12px 12px 18px 18px;background:linear-gradient(90deg,transparent 0 15%,color-mix(in srgb,var(--scene) 15%,transparent) 16% 23%,transparent 24%)}
.scene-solar .object{width:125px;height:80px;border:4px solid var(--scene);transform:translateX(-18%) rotate(-10deg);background:repeating-linear-gradient(90deg,transparent 0 20px,var(--scene) 21px 23px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--scene) 17%,transparent) 0 17px,var(--scene) 18px 20px)}
.scene-toxicity .object,.scene-toxic .object{width:95px;height:95px;border:5px solid var(--scene);transform:translateX(-10%) rotate(45deg)}.scene-toxic .object:before{content:"!";position:absolute;inset:0;display:grid;place-items:center;font-size:58px;font-weight:950;color:var(--scene);transform:rotate(-45deg)}
.source-card{margin-top:16px}.source-card h3{margin:0 0 10px;font-size:1rem}.source-links{display:flex;flex-wrap:wrap;gap:8px}.source-links a{font-size:.72rem;text-decoration:none;color:var(--muted);padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}.source-links a:hover{color:var(--green);border-color:var(--green)}
@media(max-width:800px){.element-experience{grid-template-columns:1fr}.element-scene{min-height:210px}.element-story-card,.element-context-card{padding:20px;border-radius:21px}}