:root{--bg: #071521;--panel: #0d2637;--panel-2: #102e40;--ink: #f3f8fb;--muted: #b8ccd7;--line: rgba(207, 232, 242, .18);--accent: #69d8f3;--accent-rgb: 105, 216, 243}*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--bg)}body{color:var(--ink);font-family:Aptos,Segoe UI Variable,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit}.learning-path{min-height:100vh;min-height:100dvh;overflow-x:hidden;background:radial-gradient(circle at 11% 21%,rgba(var(--accent-rgb),.09),transparent 31%),radial-gradient(circle at 92% 76%,rgba(185,162,255,.06),transparent 30%),linear-gradient(145deg,#091a27,#06131e 58%,#0b2230)}.accent-cyan{--accent: #69d8f3;--accent-rgb: 105,216,243}.accent-amber{--accent: #ffc85a;--accent-rgb: 255,200,90}.accent-violet{--accent: #b9a2ff;--accent-rgb: 185,162,255}.accent-mint{--accent: #67d7ad;--accent-rgb: 103,215,173}.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#02080d}.intro-stage{position:relative;width:min(100vw,100vh);height:min(100vw,100vh);max-width:900px;max-height:900px;overflow:hidden;background:#02080d}.intro-video{width:100%;height:100%;display:block;object-fit:contain;background:#02080d}.intro-overlay{position:absolute;inset:0;padding:clamp(32px,8vw,92px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;background:radial-gradient(circle at 50% 33%,rgba(62,184,219,.12),transparent 33%),linear-gradient(to top,#02080dfa,#02080dad 55%,#02080de6)}.intro-overlay p{margin:0 0 16px;color:#69d8f3;font-size:16px;font-weight:800;letter-spacing:.18em}.intro-overlay h1{margin:0;font-size:clamp(48px,7vw,78px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}.intro-overlay button{min-width:280px;min-height:66px;margin-top:38px;padding:0 26px;display:flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:18px;color:#06131e;background:#69d8f3;font-size:20px;font-weight:850;cursor:pointer;box-shadow:0 20px 55px #69d8f338}.intro-overlay button svg{width:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.intro-overlay small{margin-top:17px;color:#aec5d1;font-size:15px}.topbar{height:82px;padding:0 clamp(20px,4vw,68px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.42);border-radius:15px;background:rgba(var(--accent-rgb),.09)}.brand-mark svg{width:34px;fill:none;stroke:currentColor;stroke-width:1.6}.brand>span:last-child{display:flex;flex-direction:column}.brand strong{font-size:15px;letter-spacing:.09em}.brand small{margin-top:3px;color:var(--muted);font-size:15px}.path-title{color:#c6d9e2;font-size:16px;font-weight:720;letter-spacing:.08em;text-transform:uppercase}.page-count{justify-self:end;display:flex;align-items:baseline;gap:8px;color:var(--muted);font-size:16px;font-variant-numeric:tabular-nums}.page-count span{color:var(--ink);font-size:27px;font-weight:850}.page-count i{color:var(--accent);font-style:normal}.progress-track{height:4px;background:#ffffff0a}.progress-track span{display:block;height:100%;background:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.5)}.slide{width:min(1530px,100%);min-height:calc(100dvh - 86px);margin:0 auto;padding:clamp(28px,4vw,64px) clamp(22px,4.5vw,74px) 108px;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(380px,.82fr);align-items:center;gap:clamp(34px,4.5vw,76px)}.visual-column{min-width:0;display:grid;place-items:center}.content-column{width:100%;max-width:520px}.kicker{margin:0 0 18px;color:#c5d8e1;font-size:15px;font-weight:760;letter-spacing:.1em;text-transform:uppercase}.kicker span{margin-right:10px;padding-right:10px;color:var(--accent);border-right:2px solid var(--accent)}.content-column h1{margin:0;max-width:10em;font-size:clamp(42px,4.25vw,67px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}.memory-card{margin-top:clamp(25px,3.8vh,43px);padding:21px 23px 23px;border-left:4px solid var(--accent);border-radius:0 18px 18px 0;background:linear-gradient(100deg,rgba(var(--accent-rgb),.12),#ffffff06)}.memory-card>span{color:var(--accent);font-size:15px;font-weight:850;letter-spacing:.16em}.memory-card p{margin:9px 0 0;color:#eef7fa;font-size:clamp(19px,1.45vw,23px);font-weight:570;line-height:1.4;text-wrap:pretty}.fact-list{margin-top:18px;display:grid;gap:8px}.fact-list div{min-height:48px;padding:10px 14px;display:grid;grid-template-columns:36px 1fr;align-items:center;border:1px solid var(--line);border-radius:13px;background:#0a1f2dc2}.fact-list b{color:var(--accent);font-size:15px;letter-spacing:.06em}.fact-list span{color:#c9dbe3;font-size:16px;line-height:1.3}.plate{position:relative;width:100%;max-width:880px;aspect-ratio:1.727;overflow:hidden;border:1px solid rgba(226,241,247,.18);border-radius:clamp(24px,3vw,38px);background:linear-gradient(150deg,#113246f5,#071824f7);box-shadow:0 34px 80px #00000052,inset 0 0 0 1px #ffffff06}.plate:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 -65px 90px #020c132e}.plate-svg{width:100%;height:100%;display:block}.svg-overline{fill:#a9c3d0;font-size:16px;font-weight:850;letter-spacing:.11em}.svg-label{fill:#edf7fa;font-size:17px;font-weight:690}.svg-label.strong{font-weight:860;letter-spacing:.05em}.svg-caption{fill:#b8ccd7;font-size:16px;font-weight:580}.svg-mini{fill:#c7dce5;font-size:16px;font-weight:800}.svg-tag{fill:#091f2de6;stroke:#69d8f39e;stroke-width:2}.svg-tag.tag-amber{stroke:#ffc85abd}.svg-tag.tag-violet{stroke:#b9a2ffbf}.svg-tag.tag-mint{stroke:#67d7adbf}.svg-tag-text{fill:#f0f8fb;font-size:16px;font-weight:820;letter-spacing:.04em}.atom-shell{fill:none;stroke:#7ea2b3;stroke-width:2;opacity:.7}.atom-symbol{fill:#071521;font-size:24px;font-weight:900}.atom-symbol.large{font-size:29px}.charge-text{fill:#071521;font-size:22px;font-weight:900}.transfer-arrow{fill:none;stroke:#ffc85a;stroke-width:6;stroke-linecap:round}.overview-card,.family-card,.chem-card{fill:#0b2434db;stroke:#d2eaf32b;stroke-width:2}.overview-orbit{fill:none;stroke:#b8ccd7;stroke-width:2}.overview-arrow{fill:none;stroke:#ffc85a;stroke-width:5;stroke-linecap:round}.overview-title{fill:#f2f8fa;font-size:18px;font-weight:850}.overview-sub{fill:#b8ccd7;font-size:16px;font-weight:620}.overview-number{fill:#ffffff21;font-size:47px;font-weight:900}.valence-ring{fill:#69d8f306;stroke:#8db2c1;stroke-width:3}.notation-box{fill:#03111b8c;stroke:#fff3;stroke-width:2}.notation-symbol{fill:#f4f9fb;font-size:36px;font-weight:850}.family-title{fill:#f1f8fa;font-size:16px;font-weight:850;letter-spacing:.04em}.family-fact{fill:#e8f2f5;font-size:21px;font-weight:780}.family-verb{fill:#fff;font-size:22px;font-weight:850}.family-note{fill:#a9c1cc;font-size:15px;font-weight:580}.element-symbol{fill:#071521;font-size:30px;font-weight:900}.ion-label{fill:#081722;font-size:16px;font-weight:900}.ion-label.big{font-size:18px}.ion-label.tiny{font-size:16px}.mass-box,.equation-balance,.neutral-rule{fill:#69d8f312;stroke:#69d8f361;stroke-width:2}.mass-title{fill:#edf7fa;font-size:21px;font-weight:840}.formula-xl{fill:#f6fbfd;font-size:38px;font-weight:850;letter-spacing:.02em}.formula-xl.left{text-anchor:start}.formula-lg{fill:#f6fbfd;font-size:31px;font-weight:850}.formula-md{fill:#f5fafc;font-size:22px;font-weight:810}.formula-op{fill:#ffc85a;font-size:42px;font-weight:800}.formula-op.small{font-size:30px}.battery-sign{fill:#ffc85a;font-size:27px;font-weight:900}.hazard-title{fill:#f4f8fa;font-size:20px;font-weight:900;letter-spacing:.08em}.safety-rule{fill:#ffc85a14;stroke:#ffc85a7a;stroke-width:2}.ph-number{fill:#fff;font-size:21px;font-weight:900}.ph-zone{font-size:20px;font-weight:900;letter-spacing:.12em}.ph-zone.acidic{fill:#ff756f}.ph-zone.neutral{fill:#67d7ad}.ph-zone.basic{fill:#b9a2ff}.reaction-band{stroke-width:2}.acid-band{fill:#ffc85a0f;stroke:#ffc85a59}.base-band{fill:#67d7ad0f;stroke:#67d7ad59}.formula-row{fill:#0b2434e0;stroke:#d9ecf429;stroke-width:2}.photo-plate>img{width:100%;height:100%;display:block;object-fit:cover}.photo-shade{position:absolute;inset:0;background:linear-gradient(to top,#020c13eb,#020c1305 46%,#020c1324)}.photo-label-grid{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:grid;gap:10px}.reaction-labels{grid-template-columns:repeat(4,1fr)}.photo-label-grid span{min-height:59px;padding:10px 11px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(255,255,255,.29);border-radius:13px;color:#f6fbfd;background:#04131ddb;font-size:16px;font-weight:800}.photo-label-grid b{color:#ffc85a;font-size:15px}.indicator-photo img{object-position:center}.indicator-key{position:absolute;z-index:2;left:20px;right:20px;bottom:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.indicator-key span{min-height:82px;padding:13px 15px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:15px;color:#f6fbfd;background:#04131de0;font-size:16px;line-height:1.34}.indicator-key b{margin-bottom:4px;font-size:17px;letter-spacing:.08em}.indicator-key .acid b{color:#ff8279}.indicator-key .neutral b{color:#67d7ad}.indicator-key .basic b{color:#b9a2ff}.indicator-photo>small{position:absolute;z-index:2;left:24px;bottom:18px;color:#d3e2e8;font-size:15px}.flame-photo img{object-position:center}.flame-label{position:absolute;z-index:2;right:22px;width:220px;min-height:72px;padding:11px 15px;display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.34);border-radius:15px;background:#04121cdb}.flame-label b{min-width:60px;color:#06131e;border-radius:10px;padding:8px;text-align:center;font-size:20px}.flame-label span{color:#fff;font-size:16px;font-weight:740}.flame-label.sodium{top:50px}.flame-label.sodium b{background:#ffe15b}.flame-label.calcium{bottom:78px}.flame-label.calcium b{background:#ff774d}.flame-note{position:absolute;z-index:2;left:22px;bottom:20px;padding:12px 16px;border-radius:13px;color:#f4f9fb;background:#04121ce0;font-size:16px;font-weight:790}.environment-photo img{object-position:36% center;filter:brightness(.68) saturate(.78)}.environment-flow{position:absolute;z-index:2;inset:50px 36px auto;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:18px}.environment-flow>div{min-height:160px;padding:23px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:22px;background:#04121ce6}.environment-flow b{color:#67d7ad;font-size:18px;letter-spacing:.1em}.environment-flow div:last-child b{color:#ff8c78}.environment-flow span{margin-top:13px;color:#f1f7fa;font-size:17px;font-weight:690;line-height:1.5}.environment-flow svg{width:100%;fill:none;stroke:#ffc85a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.responsibility{position:absolute;z-index:2;left:36px;right:36px;bottom:30px;padding:16px;border:1px solid rgba(103,215,173,.5);border-radius:16px;color:#fff;background:#052026e6;text-align:center;font-size:17px;font-weight:850;letter-spacing:.055em}.controls{position:fixed;z-index:20;left:50%;bottom:18px;transform:translate(-50%);width:min(820px,calc(100% - 28px));min-height:70px;padding:9px;display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:#061520eb;box-shadow:0 20px 50px #0006}.control-group{display:flex;align-items:center;gap:8px}.icon-button,.text-button,.speed-button{min-height:50px;border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#dceaf0;background:#ffffff0a;cursor:pointer}.icon-button{width:52px;display:grid;place-items:center}.icon-button svg{width:25px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.icon-button.active{color:#071521;background:var(--accent);border-color:var(--accent)}.icon-button:disabled{opacity:.34;cursor:default}.text-button,.speed-button{padding:0 15px;font-size:15px;font-weight:750}.speed-button{min-width:62px;color:var(--accent)}.voice-menu,.transcript{position:fixed;z-index:30;right:24px;bottom:102px;width:min(440px,calc(100% - 48px));max-height:min(70vh,590px);overflow:auto;padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:21px;background:#0b2637;box-shadow:0 26px 70px #0000007a}.voice-menu>div,.transcript>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.voice-menu strong,.transcript strong{font-size:18px}.voice-menu div>button,.transcript div>button{width:40px;height:40px;border:0;border-radius:12px;color:#fff;background:#ffffff14;font-size:27px;cursor:pointer}.voice-menu p{color:#b9cdd6;font-size:15px;line-height:1.45}.voice-menu>button{width:100%;min-height:50px;margin-top:7px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#dceaf0;background:#ffffff09;font-size:15px;text-align:left;cursor:pointer}.voice-menu>button.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}.voice-menu>button b{color:var(--accent);font-size:15px}.voice-menu small{color:#b9cdd6;font-size:15px}.transcript p{color:#e2edf2;font-size:17px;line-height:1.65}.transcript small{color:#ffc85a;font-size:15px}@media(max-width:1050px){.topbar{grid-template-columns:1fr auto}.path-title{display:none}.slide{grid-template-columns:1fr;padding-top:24px;gap:26px;align-items:start}.visual-column{width:min(880px,100%);margin:0 auto}.content-column{max-width:880px;margin:0 auto}.content-column h1{max-width:16em;font-size:clamp(38px,7vw,61px)}.memory-card{margin-top:22px}}@media(max-width:720px){.topbar{height:72px;padding:0 17px}.brand-mark{width:41px;height:41px}.brand small{display:none}.brand strong{font-size:15px}.page-count span{font-size:23px}.slide{min-height:auto;padding:21px 15px 122px}.plate{border-radius:20px}.content-column h1{font-size:clamp(36px,10vw,48px)}.kicker{line-height:1.55}.memory-card p{font-size:19px}.fact-list span{font-size:15px}.controls{bottom:10px;min-height:66px;padding:7px}.tools .icon-button,.tools .text-button:first-of-type{display:none}.text-button,.speed-button{padding:0 10px}.reaction-labels{grid-template-columns:repeat(2,1fr)}.photo-label-grid span{min-height:48px;font-size:15px}.indicator-key{grid-template-columns:1fr;bottom:16px}.indicator-key span{min-height:50px;padding:7px 10px}.indicator-photo>small{display:none}.environment-flow{inset:22px 22px auto;grid-template-columns:1fr;gap:12px}.environment-flow svg{display:none}.environment-flow>div{min-height:90px;padding:14px}.environment-flow span{margin-top:6px;font-size:15px}.responsibility{left:22px;right:22px;bottom:18px;font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}