:root{--paper:#090f17;--ink:#e8efef;--muted:#9cadb7;--line:#ffffff18;--green:#a9dfcd;--dark:#0b1722;--font:Inter,'Segoe UI',Arial,sans-serif;color-scheme:dark}body{background:radial-gradient(ellipse at 50% 20%,#142630,#090f17 65%);font-family:var(--font)}header{height:76px;max-width:none;padding:0 32px;border-bottom:1px solid var(--line)}header .brand{font-size:24px;letter-spacing:-1px;gap:9px;color:#e8efef}.brand-mark{color:#9cdbca;font-size:29px}.brand b span,.brand>span:not(.brand-mark){font-weight:350;color:#a7b9be}nav{gap:8px}nav a{padding:10px 14px;border-radius:7px;color:#a6b9c1;font-size:14px}nav a[aria-current=page]{background:#9edcc31a;color:#b7e8d7;border:1px solid #9edcc32b}nav a:hover{text-decoration:none;background:#ffffff08}.course-link{font-size:14px;color:#a9c3c9;text-decoration:none}main{max-width:1520px;padding:0 32px}.intro{padding:30px 0 25px;gap:25px;align-items:center}.intro .eyebrow{font-size:12px;letter-spacing:1.7px;color:#8eb9b4;margin-bottom:10px}h1{font-family:var(--font);font-size:clamp(30px,3.2vw,48px);font-weight:500;letter-spacing:-1.7px;line-height:1.1;margin:0 0 12px}h1 em{font-style:normal;font-weight:350;color:#a5ddc9}.lede{font-size:16px;max-width:none;line-height:1.6}.lab{border:1px solid #ffffff16;border-radius:12px;box-shadow:none}.lab-top{font-size:12px;color:#aac0c9}.lab-body{grid-template-columns:minmax(0,1fr) 350px}.viewer{aspect-ratio:auto;min-height:510px;height:clamp(470px,57vh,680px)}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{outline:none}.phase-panel{background:#101c27;padding:26px}.phase-panel h2{font-family:var(--font);font-weight:500;font-size:27px;line-height:1.2}.phase-panel>p{font-size:16px}.phase-meta,.observation>span,.mechanism>span{font-size:12px;color:#8eb9b4}.observation p,.mechanism p{font-size:14px;line-height:1.6}.trap{font-size:13px}.read-button,.subtle{font-size:14px}.scene-head{font-size:12px}.scene-note{font-size:12px;max-width:200px}.scene-bottom{font-size:12px}.zoom{z-index:2}.division-label{display:block;padding:5px 9px;border:1px solid #9cbeb333;border-radius:6px;background:#101c27d9;color:#d5e3e7;font-size:12px;white-space:nowrap}.division-fallback{padding:80px 35px}.transport{padding:14px 24px}.play,.step{border-radius:8px}.play{font-size:14px}.transport label,.transport select{font-size:14px}.timeline button{font-size:13px;border-radius:5px;padding:8px 6px}.timeline button span{font-size:12px}.timeline button[aria-pressed=true]{background:#a9dfcd14;color:#b5e6d5}.timeline button[aria-pressed=true] span{color:#9ed5c2}.lab-foot{font-size:12px;color:#90a9b5}.section-heading h2,.quiz h2{font-family:var(--font);font-weight:500;letter-spacing:-1px}.section-heading p{font-size:16px}.element-buttons button{border-radius:8px;color:#bdcdd4;background:#101c27;border-color:#ffffff20;font-size:14px}.element-buttons button[aria-pressed=true]{background:#a9dfcd1a;border-color:#a9dfcd66;color:#c3ecdc}.element-detail{background:#101c27;border:1px solid #ffffff17;border-radius:10px;color:#dce8e8}.element-detail p{color:#a7bec6;font-size:16px}.element-detail>span{color:#9ccabb}.lesson-grid article{background:#101c27;border:1px solid #ffffff17;border-radius:10px}.lesson-grid p{color:#a6bbc4;font-size:16px}.lesson-number{color:#9ccabb}.lesson-grid h3{color:#e6efee}.chromosome-diagram,.count-demo{background:#0a151f!important;color:#a9dfcd!important;border-color:#ffffff17!important}.chromosome-diagram .arrow,.count-demo small{color:#a7bbc2}.faq details{border-color:#ffffff1c}.faq summary{font-size:16px}.faq p{color:#a6bbc4;font-size:16px}.quiz{background:#101c27;border:1px solid #ffffff17;border-radius:12px;color:#e8efef}.quiz p{color:#a6bbc4}.quiz-content button{background:#0a151f;border-color:#ffffff20;color:#d7e8e8}.quiz-content button.correct{background:#214538;color:#c9f4dc}.quiz-content button.wrong{background:#542d32;color:#ffe0e3}.quiz-content .dark-button{background:#a9dfcd;color:#16392d}footer{border-color:#ffffff18;color:#a7bec6}footer .brand{font-size:24px;letter-spacing:-1px;gap:0}footer a,footer p{font-size:14px}.explore-elements,.understand{padding-top:65px}.eyebrow{color:#8eb9b4;font-size:12px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#9bdfc9}
@media(max-width:1000px){header{padding:0 20px}header>.course-link{display:none}main{padding:0 20px}.lab-body{grid-template-columns:minmax(0,1fr) 310px}.phase-panel{padding:22px 20px}.timeline{grid-template-columns:repeat(4,1fr)}.intro>.course-link{display:none}}
@media(max-width:740px){header{height:auto;min-height:100px;flex-wrap:wrap;justify-content:center;gap:7px;padding:10px 12px}header .brand{font-size:22px}header nav{width:100%;justify-content:center;gap:5px}nav a{font-size:13px;padding:8px}.intro{padding:23px 0}.intro .eyebrow{font-size:12px;letter-spacing:1px}main{padding:0 12px}h1{font-size:32px;letter-spacing:-1px}.lab-body{grid-template-columns:1fr}.viewer{min-height:390px;height:390px}.phase-panel{border-top:1px solid #ffffff16}.phase-panel h2{margin-top:14px}.lab-top{padding:12px;font-size:12px;height:auto;letter-spacing:.4px}.lab-top .separator{display:none}.transport{padding:12px;gap:9px;flex-wrap:wrap}.transport-spacer{display:none}.timeline{padding:6px 12px 12px;gap:5px}.timeline button{font-size:12px}.scene-head{left:12px;top:14px}.scene-note{max-width:145px}.scene-bottom{left:12px;right:12px;bottom:12px;flex-direction:column;gap:0}.division-label{font-size:12px}.lesson-grid{grid-template-columns:1fr}.element-detail{padding:20px}.quiz{padding:24px}.lab-foot{padding:14px}.section-heading{gap:15px}.section-heading h2{font-size:30px}}
.division-canvas{width:100%;height:100%}.division-canvas:focus-visible{outline:2px solid #9bdfc9;outline-offset:-3px}

.narration-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:5px 0 12px;width:100%;color:#a4c7bc;font-size:12px}.narration-controls label{display:flex;align-items:center;gap:7px}.narration-controls select{color:#d9e8e3;background:#0b1722;border:1px solid #ffffff25;border-radius:5px;padding:5px;font-size:13px}#narration-audio{width:100%;height:40px;margin-bottom:12px}#narration-audio[hidden]{display:none}.phase-panel .read-button{margin-top:0}#speech-status:not(.sr-only){font-size:13px;color:#e9c8a9;margin-top:12px}

#browser-voice-row{display:grid;gap:7px;color:#a4c7bc;font-size:13px;margin-bottom:12px;width:100%}#browser-voice-row[hidden]{display:none}#browser-voice{width:100%;min-width:0;background:#0b1722;border:1px solid #ffffff25;border-radius:5px;padding:7px;color:#d9e8e3;font-size:14px}.narration-transcript{margin-top:12px;font-size:13px;color:#a7bec6}.narration-transcript summary{cursor:pointer}.narration-transcript p{font-size:14px;line-height:1.65}