@charset "UTF-8";
:root{--ink:#1c343c;--muted:#536b70;--teal:#136e70;--line:#d9e2dd;--paper:#f5f6f0;--coral:#ff947e;--mint:#70dfc3}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 "Segoe UI","Microsoft YaHei",sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:transparent;padding:8px 14px;min-height:44px;transition:background .2s}button:hover{background:#e1eae3}button:focus-visible,select:focus-visible,summary:focus-visible,#viewport:focus-visible{outline:3px solid #db9d38;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button[aria-pressed=true]{background:var(--teal);color:white;border-color:var(--teal)}header{height:83px;max-width:1480px;margin:auto;padding:0 40px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700}.brand-icon{display:grid;place-items:center;background:var(--ink);color:var(--mint);border-radius:12px;font-size:25px;width:45px;height:45px;transform:rotate(-8deg)}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:500}.course{margin-left:auto;font-size:13px}.course span{padding-left:16px;color:var(--muted)}main{max-width:1480px;margin:auto;padding:30px 40px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--teal);font-weight:700}h1{font-size:35px;letter-spacing:1px;margin:5px 0 0;font-weight:650}h1 span{font-size:16px;letter-spacing:0;color:var(--muted);margin-left:22px;font-weight:400}.intro>p{font-size:14px;margin:0;color:var(--muted)}.lab{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px}.visual{position:relative;background:radial-gradient(ellipse at 50% 38%,#233f51,#101f30 80%);border-radius:22px;min-height:566px;overflow:hidden;color:#d4e6e9}.stage-top{height:65px;position:absolute;top:0;left:0;right:0;z-index:2;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.stage-top>*{pointer-events:auto}.stage-top button{color:#d4e6e9;border-color:#4a6371;font-size:12px;padding:6px 10px;background:#182e40b8}.stage-top button:hover{background:#345266}.live{font-size:12px;letter-spacing:1px;white-space:nowrap}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:7px}#viewport{position:absolute;inset:65px 0 96px;touch-action:none}canvas{display:block;width:100%;height:100%}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.gene-label,.cell-label{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:700;text-shadow:0 1px 5px #000;white-space:nowrap}.gene-label{background:#112535c9;border-radius:4px;padding:0 4px}.cell-label{font-size:12px;font-weight:400;letter-spacing:1px;color:#bed6dc}.stage-caption{position:absolute;bottom:57px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px}#view-hint{font-size:11px;color:#a8becb}.legend{position:absolute;bottom:0;left:24px;right:24px;display:flex;gap:22px;align-items:center;border-top:1px solid #415262;padding:16px 0;font-size:11px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.mother{background:var(--mint)}.father{background:var(--coral)}.centromere{background:#f5d78c}.legend label{margin-left:auto;display:flex;align-items:center;gap:6px}input{accent-color:var(--teal)}aside{padding:4px 0}.step-heading{display:flex;justify-content:space-between;color:var(--teal);font-size:12px;letter-spacing:1px}#step-index{color:var(--muted)}h2{font-size:24px;line-height:1.4;margin:14px 0 12px;font-weight:650}.question{font-size:16px;margin:0 0 10px;color:var(--teal);font-weight:650}#explanation{min-height:76px;font-size:14px;margin:0 0 15px}.count-strip{display:grid;grid-template-columns:1fr 1fr;background:#e9eee6;border-radius:12px;padding:10px 0}.count-strip>div{text-align:center}.count-strip>div+div{border-left:1px solid #cbd7cf}.count-strip b{font:600 27px/1.3 "Segoe UI",sans-serif;display:block}.count-strip span{font-size:11px;color:var(--muted)}.small{font-size:12px;color:var(--muted);margin:8px 0}#count-note{min-height:20px}.experiment{border-top:1px solid var(--line);padding-top:14px;margin-top:13px}.switch-row,.arrange{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:13px;gap:10px}.switch-row input{width:36px;height:23px;cursor:pointer}.segmented{display:flex;gap:4px}.segmented button{font-size:12px;padding:5px 9px;min-height:40px}.selection{border-left:3px solid #799e91;padding:6px 12px;margin-top:16px;font-size:12px;background:#edf0e8}.selection strong{font-size:13px}.selection p{margin:4px 0}.timeline-panel{margin-top:20px;padding:18px 20px;background:#fffdf8;border:1px solid var(--line);border-radius:16px}.transport{display:flex;align-items:center;gap:8px}.primary{background:var(--teal);color:white;border-color:var(--teal);min-width:108px}.primary:hover{background:#0e5557}select{border:0;background:transparent;margin-left:6px;font-size:12px;padding:8px}.transport>span{margin-left:auto;font:13px monospace;color:var(--muted)}#timeline{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:16px}#timeline button{padding:9px 2px 3px;border:0;border-top:3px solid #d7e2da;border-radius:0;font-size:11px;min-height:52px;color:var(--muted);background:none}#timeline button span{display:block;font:11px monospace;opacity:.8}#timeline button.active{border-top-color:var(--teal);color:var(--teal);font-weight:700;background:#edf3eb}.outcome{margin-top:38px}.outcome-head{display:flex;align-items:center;justify-content:space-between}.outcome h2{font-size:22px;margin:8px 0 18px}.gametes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gamete{padding:15px 17px;text-align:left;background:#edf1e9;border-color:#dce4d9;position:relative}.gamete b{font-size:24px;display:block;letter-spacing:3px}.gamete small{display:block;letter-spacing:0;font-size:11px;color:var(--muted)}.gamete .tag{float:right;font-size:11px;padding:2px 6px;background:#fff9df;border-radius:4px}.gamete.active{outline:2px solid var(--teal)}.muted-result{opacity:.55}details{margin-top:20px;border-top:1px solid var(--line);padding:15px 0;font-size:13px}summary{cursor:pointer;padding:6px 0;color:var(--teal);font-weight:600}table{border-collapse:collapse;width:100%;margin:14px 0;background:#fffdf8}td,th{padding:10px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--line);padding:25px 0 10px;font-size:11px;color:var(--muted)}footer button{font-size:12px}dialog{max-width:680px;width:calc(100% - 30px);max-height:85vh;border:1px solid #d1ddd6;border-radius:18px;padding:30px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#081720ad;backdrop-filter:blur(4px)}dialog p{font-size:14px}.dialog-close{float:right;font-size:24px;padding:0 10px}dialog a{color:var(--teal)}.visual:fullscreen{border-radius:0;min-height:100vh}.visual:fullscreen #viewport{inset:65px 0 96px}#fallback{position:absolute;z-index:5;padding:40px;color:#ffe2a1}body:has(.visual:fullscreen){overflow:hidden}@media(max-width:1050px){main{padding:24px}.lab{grid-template-columns:minmax(0,1fr) 270px;gap:20px}header{padding:0 24px}.visual{min-height:590px}h1 span{display:block;margin:0;font-size:14px}#view-hint{display:none}.legend{gap:12px}}@media(max-width:760px){header{height:72px;padding:0 18px;gap:12px}.course{display:none}header>button{margin-left:auto;font-size:12px}main{padding:22px 16px}.intro{margin-bottom:18px}.intro>p{display:none}h1{font-size:30px}.lab{grid-template-columns:1fr;gap:22px}.visual{min-height:440px}.stage-top{padding:12px;gap:8px}.stage-top button{padding:5px 7px;font-size:11px}.live{font-size:10px}.legend{left:16px;right:16px;gap:13px;font-size:10px}.stage-caption{left:16px;right:16px}.step-heading{margin:0}aside{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}aside>*{grid-column:1/-1}aside h2{margin:8px 0}#explanation{min-height:0}.count-strip{grid-column:1}.count-strip span{font-size:10px}#count-note{grid-column:2;align-self:center}.experiment{margin-top:8px}.selection{margin-top:14px}.timeline-panel{padding:14px;margin-top:18px}#timeline{grid-template-columns:repeat(6,1fr);gap:8px 3px}.transport{gap:5px}select{max-width:105px;margin-left:0}.transport>span{display:none}.outcome{margin-top:28px}.outcome-head{display:block}.outcome-head button{margin-bottom:14px}.gametes{grid-template-columns:1fr 1fr;gap:10px}.gamete{padding:12px}.outcome h2{font-size:21px}footer{align-items:flex-start;font-size:10px}td,th{font-size:11px;padding:7px 4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Classroom revision: larger controls, compact main workflow, complete fullscreen. */
header{height:64px}main{padding-top:18px}.intro{margin-bottom:16px}h1{font-size:30px}.lab{grid-template-columns:minmax(0,1fr) 350px;gap:20px}.visual{min-height:490px}.stage-top button{font-size:14px}.stage-caption{font-size:15px}.legend{font-size:13px}.gene-label{font-size:16px}.cell-label{font-size:14px}.step-heading{font-size:14px}h2{font-size:24px;margin:9px 0}.question{font-size:18px;margin-bottom:7px}#explanation{font-size:15px;min-height:0;margin-bottom:10px}.count-strip{padding:7px 0}.count-strip span{font-size:13px}.small{font-size:13px}.experiment{padding-top:10px;margin-top:8px}.switch-row,.arrange{font-size:15px}.segmented button{font-size:14px;min-height:44px}.selection{margin-top:10px;padding:4px 10px}.selection p{margin:2px 0}.timeline-panel{padding:12px 16px;margin-top:14px}#timeline{margin-top:10px}#timeline button{font-size:14px;min-height:48px;padding-top:5px}#timeline button span{font-size:10px}.eyebrow{font-size:12px}.transport select{font-size:14px}#experiment-hint{display:none}#exchange-controls{position:absolute;bottom:96px;left:20px;right:20px;z-index:3;align-items:center;justify-content:center;gap:18px;background:#132b3de6;padding:7px;border:1px solid #507081;border-radius:10px;font-size:13px}#exchange-controls:not([hidden]){display:flex}#exchange-controls button{color:#d9efea;border-color:#67868e;font-size:13px;padding:5px 10px}#exchange-controls label{display:flex;align-items:center;gap:12px}#exchange-range{width:130px;accent-color:#65ddbd}#workspace:fullscreen{background:var(--paper);padding:18px;overflow:auto}#workspace:fullscreen .lab{grid-template-columns:minmax(0,1fr) 350px}#workspace:fullscreen .visual{min-height:calc(100vh - 165px)}#workspace:fullscreen .timeline-panel{margin-top:12px}.visual:fullscreen{min-height:auto}#viewport{inset:56px 0 96px}
@media(min-width:1000px) and (max-height:850px){header{height:54px}main{padding:12px 24px}.intro{margin-bottom:10px}.intro .eyebrow{display:none}h1{font-size:26px}.lab{grid-template-columns:minmax(0,1fr) 360px}.visual{min-height:466px}aside h2{font-size:22px;margin:6px 0}.question{font-size:17px}#explanation{line-height:1.5}#count-note{margin:5px 0}.selection{margin-top:8px}.timeline-panel{margin-top:10px;padding:8px 12px}.outcome{margin-top:26px}}
@media(max-width:760px){header{height:64px}.lab{grid-template-columns:1fr}.visual{min-height:450px}.stage-top{flex-wrap:wrap;height:auto;padding:10px}.stage-top .live{display:none}.stage-top>div{width:100%;display:flex;justify-content:flex-end;gap:4px}.stage-top button{font-size:12px}.legend{gap:10px;font-size:11px}.gene-label{font-size:15px}.cell-label{font-size:12px}#timeline button{font-size:13px}.intro h1{font-size:28px}#exchange-controls{left:10px;right:10px;gap:8px;font-size:11px}#exchange-controls button{font-size:11px;padding:3px 6px}#exchange-controls label{gap:5px}#exchange-range{width:95px}#workspace:fullscreen .lab{grid-template-columns:1fr}#workspace:fullscreen .visual{min-height:440px}#workspace:fullscreen{padding:10px}.selection strong{font-size:15px}.selection{font-size:14px}}
.selection select{font-size:15px;min-height:44px;width:100%;padding:5px;margin:0;color:var(--teal)}.selection:has(strong) select{max-width:160px;float:right;font-size:13px}.selection:has(strong){min-height:78px}#clear-selection{font-size:13px;min-height:36px;padding:3px 10px;float:right}
/* 3D classroom rebuild: the scene owns the viewport; essential transport stays with it. */
.visual{min-height:610px;height:calc(100vh - 155px);max-height:850px;background:radial-gradient(ellipse at 45% 42%,#294d60 0%,#142c40 55%,#0c1d2d 100%)}#viewport{inset:52px 0 100px}.stage-top{padding:12px 16px;height:52px}.stage-caption{bottom:45px;left:16px;right:16px;min-height:54px}.stage-caption>#scene-label{font-size:15px;max-width:32%;line-height:1.3}.stage-caption .transport{gap:6px}.stage-caption button{color:#e4f1ef;border-color:#729099;min-height:42px;padding:6px 12px}.stage-caption .primary{background:#428d86;border-color:#6bbbab}.stage-caption select{color:#deebef;font-size:12px;max-width:102px}.stage-caption select option{color:#173440;background:white}.stage-caption #progress-text{display:none}.legend{padding:11px 0;bottom:0;height:45px}#timeline{margin-top:0}.timeline-panel{padding:10px 16px;margin-top:12px}#exchange-controls{bottom:102px;left:18px;right:18px}#workspace:fullscreen .visual{min-height:calc(100vh - 36px);height:calc(100vh - 36px)}#workspace:fullscreen .timeline-panel{margin-top:15px}.gene-label{font-size:17px;background:#102a3dd4;padding:1px 5px;border:1px solid #637c8755}.cell-label{font-size:15px}.selection:has(strong) select{float:none;max-width:100%}aside{display:flex;flex-direction:column}aside #clear-selection{align-self:flex-end}.selection{margin-top:auto}.outcome{margin-top:26px}@media(min-width:1000px) and (max-height:850px){.visual{min-height:0;height:calc(100vh - 140px)}.intro{height:42px}header{height:52px}.lab{grid-template-columns:minmax(0,1fr) 340px}.selection{margin-top:16px}#explanation{line-height:1.6}.stage-caption>#scene-label{display:none}.stage-caption{justify-content:center}.stage-caption select{font-size:13px;max-width:112px}}
@media(max-width:1050px) and (min-width:761px){.lab{grid-template-columns:minmax(0,1fr) 295px}.stage-caption>#scene-label{display:none}.stage-caption{justify-content:center}.stage-caption select{max-width:92px}}
@media(max-width:760px){.visual{height:560px;min-height:560px}.lab{grid-template-columns:1fr}.stage-caption>#scene-label{display:none}.stage-caption{left:10px;right:10px;justify-content:center}.stage-caption .transport{gap:5px}.stage-caption select{font-size:12px;max-width:100px}.stage-caption button{padding:6px 10px}.legend{left:13px;right:13px;gap:10px;font-size:11px}.stage-top{height:52px;padding:10px 8px}.stage-top button{font-size:11px;padding:5px 6px;min-height:40px}.gene-label{font-size:15px}.cell-label{font-size:12px}#exchange-controls{font-size:11px;left:10px;right:10px}#workspace:fullscreen .visual{height:calc(100vh - 24px);min-height:460px}.selection{margin-top:15px}#viewport{inset:52px 0 100px}aside{display:block}}
.visual.high-contrast{background:#050e19}.high-contrast .gene-label{background:#071626;color:#fff;border-color:#a5c6d2;text-shadow:none}.high-contrast .cell-label{color:#fff}.high-contrast .legend,.high-contrast .stage-caption{color:#fff}.high-contrast .stage-top button{background:#0a2035;color:#fff;border-color:#7c9dab}.high-contrast #contrast{background:#dceee8;color:#112e35}.high-contrast .stage-caption button{border-color:#b0d5d1}.high-contrast #exchange-controls{background:#071626;border-color:#a5c6d2}
/* Final touch-target and tablet portrait adjustments. */
.selection{margin-top:16px}.stage-top button{min-width:44px;min-height:44px}
@media(min-width:761px) and (max-width:900px){.lab{grid-template-columns:1fr}.visual{height:600px;min-height:600px;max-height:none}aside{display:block}.stage-top>div{display:flex;gap:5px}.stage-caption>#scene-label{display:none}.stage-caption{justify-content:center}#workspace:fullscreen .lab{grid-template-columns:1fr}}
@media(max-width:760px){.stage-top{height:104px;padding:8px 10px}.stage-top>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%}.stage-top button{min-width:44px;min-height:44px;font-size:12px}#contrast{order:1}#focus{order:2}#fullscreen{order:3}#zoom-in{order:4}#zoom-out{order:5}#reset-view{order:6}#viewport{top:104px}.visual{height:610px;min-height:610px}.stage-caption button{min-width:44px;min-height:44px}}
/* v1.2: independent camera controls, preserving the experiment state. */
.view-stack{min-width:0}.camera-toolbar{position:absolute;right:12px;top:76px;width:108px;display:grid;grid-template-columns:1fr 1fr;gap:6px;z-index:3}.camera-toolbar button{min-width:44px;min-height:48px;color:#e5f3f2;background:#183246e8;border:1px solid #76959e;font-size:14px;line-height:1.4;padding:7px 3px}.camera-toolbar small{display:block;font-size:11px;font-weight:400}.camera-toolbar #zoom-in,.camera-toolbar #zoom-out{font-size:22px}.camera-toolbar #focus-selected,.camera-toolbar #drag-mode,.camera-toolbar #reset-view{grid-column:1/-1}.camera-toolbar button:disabled{opacity:.55}.camera-toolbar #drag-mode[aria-pressed=true]{background:#226e6c;border-color:#99e1cb}.high-contrast .camera-toolbar button{background:#071b2d;color:white;border-color:#aacfd9}.high-contrast .camera-toolbar #drag-mode[aria-pressed=true]{background:#185852}.gesture-help{margin:8px 0 0;padding:0 6px;border-top:0;font-size:13px}.gesture-help summary{padding:4px 0;font-size:13px}.gesture-help p{margin:5px 0;line-height:1.6}#viewport{right:132px}.visual{height:calc(100vh - 185px)}#exchange-controls{right:132px}.stage-top>div{display:flex;gap:5px}.stage-top{height:52px}.stage-top #contrast,.stage-top #focus,.stage-top #fullscreen{order:initial}.camera-toolbar #zoom-in,.camera-toolbar #zoom-out,.camera-toolbar #reset-view{order:initial}
@media(min-width:1000px) and (max-height:850px){.visual{height:calc(100vh - 168px)}}
@media(min-width:761px) and (max-width:900px){.visual{height:600px}}
@media(max-width:760px){.visual{height:680px;min-height:680px}.stage-top{height:52px;padding:8px 10px}.stage-top>div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.camera-toolbar{top:60px;left:10px;right:10px;width:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.camera-toolbar #zoom-in,.camera-toolbar #zoom-out{font-size:18px;display:flex;justify-content:center;align-items:center;gap:6px}.camera-toolbar button{min-height:48px;font-size:13px}.camera-toolbar #focus-selected{grid-column:auto}.camera-toolbar #drag-mode{grid-column:1/3;display:flex;align-items:center;justify-content:center;gap:10px}.camera-toolbar #reset-view{grid-column:3}.camera-toolbar #reset-view small{font-size:10px}.camera-toolbar #drag-mode small{font-size:12px}#viewport{top:168px;right:0}#exchange-controls{right:10px}.gesture-help{font-size:13px}#workspace:fullscreen .visual{min-height:620px}}