:root{--bg:#050b18;--panel:#0d1830;--text:#eef5ff;--muted:#9fb0cb;--accent:#4fd1ff;--line:rgba(255,255,255,.13);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#11264b 0,#050b18 42%,#02050b 100%);color:var(--text)}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:14px 24px;background:rgba(4,10,23,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:.08em}.brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:3px}.spacer{flex:1}.lang-switch{display:flex;background:#101d36;border:1px solid var(--line);border-radius:999px;padding:3px}.lang-switch button{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer}.lang-switch button.active{background:#eaf7ff;color:#06101f;font-weight:800}.home-main{padding:38px 24px 70px;max-width:1800px;margin:auto}.hero{text-align:center;margin-bottom:28px}.hero h1{font-size:clamp(32px,5vw,68px);margin:0 0 12px}.hero p{color:var(--muted);font-size:18px}.tools{display:flex;gap:12px;justify-content:center;margin:24px auto 30px}.search{width:min(520px,100%);padding:13px 18px;border-radius:14px;border:1px solid var(--line);background:#0c172c;color:#fff}.legend{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:0 auto 28px}.legend span{font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}.ptable-wrap{overflow-x:auto;padding:12px}.ptable{display:grid;grid-template-columns:repeat(18,minmax(62px,1fr));grid-template-rows:repeat(9,82px);gap:6px;min-width:1220px}.element-cell{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:6px;overflow:hidden;transition:.2s transform,.2s box-shadow,.2s border-color;background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03));}.element-cell:hover{transform:translateY(-5px) scale(1.04);z-index:5;box-shadow:0 12px 36px rgba(0,0,0,.45);border-color:#fff}.element-cell .z{font-size:10px;color:#dce9ff}.element-cell .sym{font-size:25px;font-weight:900;line-height:1.1}.element-cell .nm{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d4def0}.element-cell .ms{position:absolute;right:5px;top:5px;font-size:8px;color:#aebdd4}.alkali{--c:#fb7185}.alkaline{--c:#fbbf24}.transition{--c:#60a5fa}.post{--c:#a78bfa}.metalloid{--c:#34d399}.nonmetal{--c:#22d3ee}.halogen{--c:#f472b6}.noble{--c:#c084fc}.lanthanide{--c:#fb923c}.actinide{--c:#f97316}.element-cell:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--c)}.series-label{display:flex;align-items:center;color:#8fa2c0;font-size:12px;padding-left:8px}.home-footer{text-align:center;color:var(--muted);padding:20px}
/* element presentation */
.presentation-page{height:100vh;overflow:hidden;background:#020611}.presentation{position:relative;width:100vw;height:100vh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 40%,#17315e,#050b18 52%,#02040a)}.stars{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.3px);background-size:58px 58px;animation:drift 30s linear infinite}.scene{position:absolute;inset:0;display:grid;place-items:center;padding:8vh 7vw 12vh;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}.scene.active{opacity:1;visibility:visible}.scene.leaving{opacity:0}.scene-content{position:relative;z-index:2;width:min(1200px,92vw);text-align:center}.eyebrow{font-size:clamp(13px,1.2vw,18px);letter-spacing:.18em;text-transform:uppercase;color:#85dfff;font-weight:800}.scene h1,.scene h2{margin:12px 0}.scene h1{font-size:clamp(54px,9vw,150px);line-height:.9}.scene h2{font-size:clamp(30px,4.8vw,72px)}.scene p{font-size:clamp(17px,2vw,30px);color:#cedaf0;line-height:1.45;max-width:1000px;margin:18px auto}.brand-intro{display:flex;flex-direction:column;gap:12px;align-items:center}.brand-intro .contract{font-size:clamp(34px,6vw,88px);font-weight:1000;letter-spacing:.08em;text-shadow:0 0 40px #47cbff}.brand-intro .bin,.brand-intro .phone{font-size:clamp(20px,2.5vw,38px);font-weight:750}.periodic-card{position:relative;margin:auto;width:clamp(220px,26vw,390px);aspect-ratio:1/1.18;border-radius:28px;border:2px solid rgba(255,255,255,.45);background:linear-gradient(145deg,color-mix(in srgb,var(--c) 42%,#102044),rgba(5,11,24,.9));box-shadow:0 0 70px color-mix(in srgb,var(--c) 50%,transparent);animation:float 4s ease-in-out infinite}.periodic-card .pc-z{position:absolute;left:24px;top:18px;font-size:clamp(20px,2.2vw,36px)}.periodic-card .pc-mass{position:absolute;right:22px;top:22px;color:#d5e4fa}.periodic-card .pc-symbol{font-size:clamp(100px,14vw,210px);font-weight:1000;margin-top:20%}.periodic-card .pc-name{font-size:clamp(22px,3vw,42px);font-weight:800}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.info-box{padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(12,25,49,.75);backdrop-filter:blur(10px)}.info-box strong{display:block;font-size:clamp(25px,3vw,48px);color:#fff}.info-box span{color:#aebed8}.atom-wrap{position:relative;width:min(440px,70vw);aspect-ratio:1;margin:0 auto 20px}.nucleus{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#ff7b76 25%,#b50f43 72%);box-shadow:0 0 55px #ff5680;font-size:22px;font-weight:900}.orbit{position:absolute;inset:8%;border:2px solid rgba(91,208,255,.5);border-radius:50%;transform:rotate(var(--r)) scaleY(.42)}.electron{position:absolute;left:50%;top:4%;width:18px;height:18px;border-radius:50%;background:#8eeaff;box-shadow:0 0 18px #2ecbff;animation:electron 4s linear infinite;transform-origin:0 210px}.feature-icon{font-size:clamp(90px,13vw,190px);filter:drop-shadow(0 0 25px var(--c));animation:float 3s ease-in-out infinite}.pill-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.pill{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:700}.watermark{position:absolute;right:22px;bottom:18px;z-index:30;text-align:right;color:rgba(255,255,255,.28);font-size:12px;line-height:1.35;pointer-events:none;letter-spacing:.04em}.watermark strong{display:block;font-size:14px}.topbar{position:absolute;left:18px;right:18px;top:15px;z-index:40;display:flex;align-items:center;gap:10px}.back{padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(5,12,27,.72)}.topbar .title{font-weight:800}.topbar .spacer{flex:1}.topbar button{border:1px solid var(--line);background:rgba(5,12,27,.72);color:#fff;border-radius:11px;padding:8px 11px;cursor:pointer}.topbar button.active{background:#fff;color:#07101f}.progress{position:absolute;left:0;bottom:0;height:5px;background:var(--c);z-index:45;width:0}.subtitles{position:absolute;left:50%;bottom:6.5vh;transform:translateX(-50%);z-index:35;width:min(1040px,88vw);text-align:center;font-size:clamp(17px,2vw,30px);font-weight:700;line-height:1.35;text-shadow:0 2px 8px #000;background:rgba(0,0,0,.42);padding:10px 18px;border-radius:15px}.cycle{position:absolute;left:18px;bottom:18px;z-index:30;font-size:12px;color:#8fa5c7}.pulse-ring{position:absolute;left:50%;top:50%;width:300px;height:300px;border:2px solid var(--c);border-radius:50%;transform:translate(-50%,-50%);animation:pulse 2.2s ease-out infinite;opacity:.2}.summary-list{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:15px;margin:28px auto 0;max-width:850px}.summary-list div{padding:16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
@keyframes drift{to{background-position:58px 116px}}@keyframes float{50%{transform:translateY(-12px)}}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}@keyframes electron{to{transform:rotate(360deg)}}
@media(max-width:700px){.info-grid{grid-template-columns:1fr}.summary-list{grid-template-columns:1fr}.scene{padding:12vh 5vw 17vh}.watermark{font-size:9px}.subtitles{bottom:8vh}.topbar .title{display:none}}