:root{--paper:#f4f3ee;--ink:#18332f;--muted:#66726a;--line:#d7dcd2;--green:#d6eabf;--dark:#0a1723;--pink:#f4a6d9;--cyan:#88dbeb;--font:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}button,select,input{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #af711b;outline-offset:5px}header{max-width:1440px;margin:auto;height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{font-size:30px;font-weight:700;letter-spacing:-1.7px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.brand-mark{font-size:32px;line-height:1}.brand-dot{margin-left:-8px}nav{display:flex;gap:36px}nav a{text-decoration:none;font-size:14px}nav a:hover{text-decoration:underline}.level,.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:700}.level{border:1px solid var(--line);border-radius:30px;padding:8px 13px}main{max-width:1440px;margin:auto;padding:0 5%}.intro{padding:63px 0 56px;display:flex;gap:50px;align-items:flex-end;justify-content:space-between}.eyebrow{margin:0 0 20px}h1{font-family:Georgia,serif;font-size:clamp(40px,5.6vw,78px);line-height:1.08;letter-spacing:-3px;font-weight:400;margin:0 0 24px}h1 em{font-weight:400;color:#567747}.lede{font-size:17px;line-height:1.7;max-width:565px;color:var(--muted);margin:0}.intro-note{min-width:200px;border-left:1px solid var(--line);padding:0 0 0 28px;margin-bottom:7px}.intro-note>span{font-size:10px;letter-spacing:1.5px}.intro-note p{font-size:24px;line-height:1.4;margin:17px 0}.intro-note a{font-size:13px;text-underline-offset:5px}.lab{border-radius:18px;background:var(--dark);color:#eaf0f2;overflow:hidden;box-shadow:0 18px 50px #10202815}.lab-top{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14;padding:0 24px;font-size:10px;letter-spacing:1.5px;gap:10px}.live-dot{display:inline-block;background:#afd5a0;border-radius:50%;width:6px;height:6px;margin-right:9px}.separator{color:#6f8591;margin:0 10px}.subtle{color:inherit;border:0;background:none;padding:8px 0;font-size:12px;letter-spacing:0}.subtle:hover{text-decoration:underline}.lab-body{display:grid;grid-template-columns:minmax(0,1fr) 330px}.viewer{position:relative;min-width:0;aspect-ratio:1.25;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#142b3c,#07121d 75%)}canvas{width:100%;height:100%;display:block}.scene-head{position:absolute;top:22px;left:24px;right:20px;display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:1.4px;pointer-events:none}.scene-note{color:#849cae;font-size:10px;letter-spacing:0;max-width:150px;text-align:right}.scene-bottom{position:absolute;bottom:18px;left:24px;right:24px;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#b0bfcd;pointer-events:none}.zoom{position:absolute;right:16px;top:50%;display:flex;flex-direction:column;align-items:center;background:#07121d99;border:1px solid #d5e9ff22;border-radius:30px;overflow:hidden}.zoom button{background:transparent;color:#e2ecf3;border:0;width:36px;height:36px;font-size:20px}.zoom output{font-size:10px}.phase-panel{background:#13212d;padding:30px 27px;display:flex;flex-direction:column;align-items:start;border-left:1px solid #ffffff0a}.phase-meta{display:flex;justify-content:space-between;width:100%;font-size:10px;color:#b9d29f;letter-spacing:1.3px}.phase-panel h2{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.17;margin:23px 0 13px;letter-spacing:-.6px}.phase-panel>p{font-size:14px;color:#cad3da;margin:0 0 22px}.observation,.mechanism{margin:0 0 16px}.observation>span,.mechanism>span{font-size:9px;letter-spacing:1.5px;color:#a7c08e}.observation p,.mechanism p{font-size:12px;color:#c1cdd5;line-height:1.6;margin:6px 0 0}.trap{border-left:2px solid #efb981;padding-left:12px;font-size:11px;color:#e9c8a9;margin:0 0 15px}.read-button{background:transparent;border:1px solid #44545d;border-radius:20px;color:#e8eef2;font-size:11px;padding:8px 14px;margin-top:auto}.transport{border-top:1px solid #ffffff15;display:flex;align-items:center;gap:14px;padding:18px 24px}.play{background:var(--green);color:#1b3028;border:0;border-radius:40px;padding:12px 21px;font-size:13px;display:flex;gap:9px;align-items:center}.step{width:35px;height:35px;background:none;border:1px solid #42515c;border-radius:50%;color:#e7eef2}.step:disabled{opacity:.3;cursor:default}.transport-spacer{flex:1}.transport label{font-size:11px;color:#bbc9d2}.transport select{color:#eaf0f2;background:#13212d;border:1px solid #42515c;border-radius:6px;font-size:12px;padding:5px}.scrub{padding:0 24px}.scrub input{width:100%;accent-color:var(--green);height:16px;cursor:pointer}.timeline{display:grid;grid-template-columns:repeat(8,1fr);padding:4px 24px 20px;gap:4px}.timeline button{color:#8298a8;background:none;border:0;text-align:left;padding:7px 3px;font-size:10px;line-height:1.5}.timeline button span{display:block;color:#657986;font-size:9px;margin-bottom:6px}.timeline button[aria-pressed=true]{color:#dcf3c7}.timeline button[aria-pressed=true] span{color:#c2e4a1}.lab-foot{background:#0e1c27;display:flex;justify-content:space-between;gap:20px;color:#9aaebc;padding:12px 24px;font-size:10px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:28px}.section-heading .eyebrow{margin-bottom:12px}.section-heading h2,.quiz h2{font-family:Georgia,serif;font-size:36px;line-height:1.2;letter-spacing:-1px;font-weight:400;margin:0}.section-heading>p{font-size:13px;color:var(--muted);max-width:300px;margin:0}.explore-elements{padding:70px 0 52px}.element-buttons{display:flex;gap:9px;flex-wrap:wrap}.element-buttons button{border:1px solid var(--line);border-radius:24px;background:transparent;padding:10px 16px;color:#45564a;font-size:12px;display:flex;align-items:center;gap:8px}.element-buttons button[aria-pressed=true]{background:var(--ink);color:#f3f3ed;border-color:var(--ink)}.element-buttons i{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--dot)}.element-detail{display:grid;grid-template-columns:50px 1fr 240px;gap:25px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line);min-height:173px}.element-detail>span{font-family:Georgia,serif;font-size:36px;color:#8c9b7e;line-height:1}.element-detail h3{font-size:16px;margin:0 0 6px}.element-detail p{font-size:13px;color:var(--muted);margin:0}.element-detail>p{border-left:1px solid var(--line);padding-left:25px;font-style:italic}.understand{padding:25px 0 65px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.lesson-grid article{border-top:1px solid var(--line);padding-top:22px}.lesson-number{font-size:12px;color:#718360}.lesson-grid h3{font-size:20px;line-height:1.3;letter-spacing:-.4px;font-weight:500;margin:16px 0}.lesson-grid p{font-size:13px;color:var(--muted)}.chromosome-diagram{display:flex;align-items:center;justify-content:space-around;height:80px;color:#8e537a;font-size:45px;font-weight:bold}.chromosome-diagram .arrow{font-size:10px;color:var(--muted);font-weight:400}.count-demo{display:flex;justify-content:space-between;padding-top:14px;font-family:Georgia,serif;font-size:30px}.count-demo small{display:block;font:10px var(--font);color:var(--muted);margin-top:5px}.lesson-note{border-left:2px solid #99af7d;padding-left:12px}.faq{margin-top:45px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.faq details{border-top:1px solid var(--line);padding:17px 0}.faq summary{cursor:pointer;font-size:14px;font-weight:500}.faq p{font-size:13px;color:var(--muted);padding-right:12px}.quiz{display:grid;grid-template-columns:1fr 1fr;gap:65px;background:#e6eadf;border-radius:14px;padding:43px;margin-bottom:70px}.quiz>div>p:not(.eyebrow){font-size:13px;color:var(--muted)}.quiz h2{font-size:34px}.quiz-content>span{font-size:10px;letter-spacing:1px;color:#6d7d61}.quiz-content h3{font-size:17px;font-weight:500;line-height:1.4;margin:15px 0}.quiz-content #answers{display:grid;gap:7px}.quiz-content #answers button{text-align:left;border:1px solid #ccd4c1;border-radius:8px;background:#f4f5ed;padding:10px 13px;color:var(--ink);font-size:13px}.quiz-content #answers button.correct{background:#cce2b9;border-color:#73915c}.quiz-content #answers button.wrong{background:#f3dbcf;border-color:#b47b60}.quiz-content #answers button:disabled{cursor:default;color:var(--ink)}#feedback{font-size:13px}.dark-button{background:var(--ink);color:#fff;border:0;padding:10px 16px;border-radius:25px;font-size:12px}footer{border-top:1px solid var(--line);padding:30px 0 40px;display:flex;gap:30px;align-items:start;justify-content:space-between}footer>p{font-size:12px;color:var(--muted)}footer>div{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--muted)}footer a{text-underline-offset:3px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}[hidden]{display:none!important}@media(min-width:1250px){.viewer{aspect-ratio:1.5}}@media(max-width:1000px){.lab-body{grid-template-columns:minmax(0,1fr) 290px}.phase-panel{padding:24px 22px}.viewer{aspect-ratio:auto;min-height:500px}.scene-note{display:none}.scene-bottom{flex-direction:column}.timeline{grid-template-columns:repeat(4,1fr)}.section-heading h2{font-size:30px}.intro-note{min-width:155px}.element-detail{grid-template-columns:35px 1fr 190px;gap:18px}}@media(max-width:740px){header{height:78px;padding:0 6%}main{padding:0 6%}.brand{font-size:26px}.brand-mark{font-size:28px}nav{gap:17px}nav a{font-size:12px}.level{display:none}.intro{padding:38px 0}.intro-note{display:none}h1{font-size:48px;letter-spacing:-2px}.lede{font-size:15px}.lab-body{grid-template-columns:1fr}.viewer{min-height:0;aspect-ratio:1.1}.phase-panel{border-left:0;border-top:1px solid #ffffff12;padding:24px}.phase-panel h2{margin:15px 0 10px;font-size:27px}.phase-panel>p{margin-bottom:14px}.observation,.mechanism{margin-bottom:12px}.read-button{margin-top:7px}.lab-top{padding:0 16px;font-size:8px;letter-spacing:.6px}.separator{margin:0 4px}.lab-top .subtle{font-size:10px}.scene-head{left:18px;font-size:9px}.scene-bottom{left:18px;font-size:9px}.transport{gap:10px;flex-wrap:wrap;padding:16px}.play{padding:11px 13px;font-size:12px}.transport-spacer{display:none}.transport label{margin-left:auto}.transport #restart{margin-left:auto}.scrub{padding:0 16px}.timeline{padding:0 16px 14px;gap:5px}.timeline button{font-size:10px}.timeline button span{margin-bottom:3px}.lab-foot{padding:12px 16px;flex-direction:column;gap:4px}.section-heading{display:block}.section-heading>p{margin-top:15px;max-width:none}.explore-elements{padding:45px 0 30px}.section-heading h2{font-size:31px}.element-buttons{gap:7px}.element-buttons button{padding:9px 12px;font-size:11px;min-height:40px}.element-detail{grid-template-columns:25px 1fr;gap:15px;padding:22px 0}.element-detail>span{font-size:28px}.element-detail>p{grid-column:2;padding-left:12px}.lesson-grid{grid-template-columns:1fr;gap:25px}.lesson-grid article{padding-top:16px}.lesson-grid h3{margin:8px 0}.chromosome-diagram,.count-demo{max-width:350px}.faq{grid-template-columns:1fr;margin-top:30px}.quiz{grid-template-columns:1fr;padding:25px;gap:25px;margin-bottom:40px}.quiz h2{font-size:30px}.quiz .eyebrow{margin-bottom:14px}footer{flex-wrap:wrap;gap:10px 25px}footer>div{width:100%}.understand{padding-bottom:40px}.zoom{right:10px}.zoom button{width:33px;height:36px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(pointer:coarse){button,select{min-height:44px}.timeline button{min-height:50px}}

nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}@media(max-width:740px){header{height:auto;min-height:100px;flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:14px}header nav{width:100%;flex-wrap:wrap;gap:12px 20px}header nav a{font-size:14px}.intro{padding-top:25px}}