/* Classroom revision: allocate space to the model before reducing type. */
.follow-option{display:flex;align-items:center;gap:6px;min-height:24px}.follow-option input{width:18px;height:18px;accent-color:#317f69}
.stage-tag{max-width:calc(100% - 430px)}@media(max-width:850px){.stage-tag{max-width:calc(100% - 24px)}}
body.high-contrast .stage{background:radial-gradient(ellipse at 50% 45%,#122328,#03090f 85%)}body.high-contrast .stage-tag,body.high-contrast .legend,body.high-contrast .gesture,body.high-contrast #stage-note{color:#f0f9f6}body.high-contrast .label{background:#07171f;color:#fff;border-color:#bddbcc}body.high-contrast .stage-actions button{background:#0a1822;color:#fff;border-color:#8cafa8}body.high-contrast #contrast{background:#f2f8e9;color:#16473b;border-color:#f2f8e9}.stage-actions{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 20px)}
.app{max-width:1920px;padding:0 20px}header{height:60px}.brand{font-size:22px}.brand small,.brand-mark,.top-meta>span,.intro .eyebrow,.credit{display:none}.top-meta{gap:8px}.top-meta button{font-size:16px;min-height:42px}main{grid-template-columns:minmax(0,1fr) 308px;gap:16px;padding:12px 0}.intro{margin-bottom:12px!important;align-items:center;flex-direction:row;min-height:48px}h1{font-size:25px}.mode-tabs button{font-size:17px;min-height:44px}.stage,body.division-mode .stage{height:calc(100dvh - 184px);min-height:340px;max-height:none;border-radius:14px}body.division-mode .stage{height:calc(100dvh - 354px)}body.coiling-mode .stage{height:calc(100dvh - 306px)}.stage-tag{left:18px;top:17px;font-size:17px}.stage-actions{top:12px;right:12px}.stage-actions button{font-size:15px;min-height:42px;padding:8px 11px}.stage-actions #zoom-in,.stage-actions #zoom-out{font-size:22px;min-width:44px}.legend{font-size:14px;bottom:42px;gap:12px;flex-wrap:wrap}.gesture{font-size:13px;bottom:16px}#stage-note{font-size:12px;bottom:16px}.label{font-size:16px;background:#10292feb}.observation,body.division-mode .observation{padding:16px}.observation h2,body.division-mode h2{font-size:23px;line-height:1.4;margin-bottom:10px}#card-body,body.division-mode #card-body{font-size:17px;line-height:1.6;margin:0 0 13px}.eyebrow{font-size:13px;letter-spacing:.3px;margin-bottom:8px}.cell-type button{font-size:17px;min-height:44px}.subtle{font-size:14px;line-height:1.5;margin:9px 0}.toggles{font-size:16px;gap:3px 9px}.toggles label{min-height:36px;display:flex;align-items:center;gap:4px}.toggles input{width:18px;height:18px}.wide{font-size:17px;min-height:44px;margin-top:8px}.metric-heading{font-size:14px;margin-top:12px}.metrics{gap:10px}.metrics>div{padding-top:6px}.metrics strong{font-size:32px;font-weight:600}.metrics span{font-size:13px;line-height:1.4;display:block}#count-note{font-size:13px}.transport{padding:10px 12px;margin-top:10px}.timeline-head{font-size:14px;margin-bottom:0}#time-label{font-size:16px}input[type=range]{height:20px;margin:5px 0 7px;touch-action:pan-y}.play-actions button{font-size:16px;min-height:42px;padding:8px 13px}.speed-label{font-size:15px}.speed-label select{min-height:40px;max-width:none}.phases{margin-top:8px;gap:4px}.phases button{font-size:14px;min-height:42px;padding:6px 3px}.phases button.active{box-shadow:inset 0 -3px #317a63}footer{padding:5px 0;font-size:12px;min-height:26px}.coil-copy{font-size:19px;line-height:1.7}.coil-metric{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.coil-metric strong{display:block;font-size:48px;font-weight:500;color:#357860}.coil-metric span{font-size:16px}.thinking{border:0;padding:0}.thinking h3{font-size:25px}.answers button{font-size:20px;min-height:48px}#feedback{font-size:18px;min-height:60px}dialog p{font-size:17px}body.theater aside{display:flex}body.theater main{grid-template-columns:minmax(0,1fr) 308px}body.theater .stage{height:calc(100dvh - 354px)}.structure-list button{font-size:18px;min-height:50px}.structure-list span{font-size:14px}
@media(min-width:1550px){main{grid-template-columns:minmax(0,1fr) 350px}.app{padding:0 28px}h1{font-size:29px}.mode-tabs button{font-size:19px}.observation h2,body.division-mode h2{font-size:26px}#card-body,body.division-mode #card-body{font-size:19px}.phases button{font-size:17px}.stage-tag{font-size:20px}}
@media(max-width:1150px){h1{font-size:22px}.intro{flex-wrap:wrap;gap:7px}.mode-tabs{margin-left:auto}.mode-tabs button{font-size:16px}main{grid-template-columns:minmax(0,1fr) 280px;gap:12px}.observation{padding:13px}.stage,body.division-mode .stage,body.coiling-mode .stage{min-height:360px}.stage-tag{font-size:16px}#stage-note{display:none}.legend{gap:8px}.phases{grid-template-columns:repeat(4,1fr)}body.division-mode .stage{height:calc(100dvh - 390px)}.play-actions button{padding:7px 9px;font-size:15px}}
@media(max-width:850px){.app{padding:0 12px}header{height:auto;min-height:60px;gap:8px;flex-wrap:wrap;padding:7px 0}.brand{font-size:20px}.top-meta{gap:5px}.top-meta button{font-size:14px;padding:7px 9px}main{display:flex;flex-direction:column;padding-top:10px}.intro{flex-direction:column;align-items:start;margin-bottom:10px!important}.mode-tabs{width:100%;margin:0}.mode-tabs button{flex:1;font-size:17px}.stage,body.division-mode .stage,body.coiling-mode .stage{height:52dvh;min-height:350px;max-height:610px}.stage-tag{font-size:16px;left:12px;top:14px}.stage-actions{top:47px;right:9px;gap:5px}.stage-actions button{font-size:14px;padding:6px 8px;min-height:44px}.legend{font-size:13px;left:12px;bottom:40px}.gesture{font-size:12px;left:12px}.phases{grid-template-columns:repeat(4,1fr);gap:5px}.phases button{font-size:15px;min-height:44px}.transport-row{flex-wrap:wrap;gap:8px}.play-actions{flex-wrap:wrap;gap:6px}.play-actions button{font-size:16px;min-height:44px;padding:7px 10px}.timeline-head{font-size:13px}aside{padding:0}.observation,body.division-mode .observation{padding:18px}.observation h2,body.division-mode h2{font-size:24px}#card-body,body.division-mode #card-body{font-size:18px}.metrics span{font-size:15px}.metrics strong{font-size:36px}.toggles{font-size:18px;gap:8px 18px}.subtle{font-size:15px}.cell-type button{font-size:19px}.wide{font-size:18px;min-height:48px}.label{font-size:14px}.coil-metric{padding:12px 0}body.theater main{display:flex}body.theater aside{display:flex}#fullscreen span{display:inline}footer{gap:12px;line-height:1.5}dialog{padding:23px}}
@media(max-width:420px){.top-meta{width:100%;justify-content:flex-end}.brand{font-size:20px}.stage-tag{font-size:14px}.legend{font-size:12px;gap:6px}.stage-actions button{padding:6px 8px}.timeline-head>span:last-child{font-size:12px}.transport{padding:10px}.play-actions{gap:5px}.play-actions button{padding:7px 8px;font-size:15px}.phases button{font-size:14px}}

/* 2.1: one camera toolbar, accurate input modes, collapsible help. */
@media(max-width:850px){.stage-actions button span{display:block}}
.stage-actions{top:14px;right:12px;width:102px;max-width:none;display:flex;flex-direction:column;gap:6px}.stage-actions button{width:100%;min-height:44px;font-size:15px;padding:7px 5px}.stage-actions #zoom-in,.stage-actions #zoom-out{font-size:24px}.stage-actions #drag-mode[aria-pressed=true]{background:#edf7e5;color:#164a3c;border-color:#edf7e5}.stage-actions button:disabled{opacity:.7;color:#c1d3cf;border-style:dashed}.stage-tag{max-width:calc(100% - 146px)}.legend{bottom:17px}.interaction-help{margin-top:5px;font-size:14px;color:#365f56}.interaction-help summary{cursor:pointer;min-height:30px;line-height:30px}.interaction-help summary span{margin-left:14px;color:#216458;font-weight:600}.interaction-help-body{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}.interaction-help-body p{margin:0;font-size:15px;line-height:1.6}.chromosome-picker{display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;gap:6px;margin-top:8px;font-size:15px}.chromosome-picker button{min-height:44px;padding:6px;font-size:17px}.chromosome-picker button[aria-pressed=true],.structure-list button[aria-pressed=true]{background:#e5f0df;box-shadow:inset 0 0 0 2px #4c806d}.stage-actions #focus[hidden]{display:none!important}
@media(min-width:1121px){.stage{height:calc(100dvh - 220px)}body.division-mode .stage{height:calc(100dvh - 390px);min-height:320px}body.coiling-mode .stage{height:calc(100dvh - 342px);min-height:320px}}
@media(min-width:851px) and (max-width:1120px){body.division-mode .stage{height:calc(100dvh - 424px);min-height:320px}body.coiling-mode .stage{height:calc(100dvh - 356px);min-height:320px}.stage-actions{width:90px}.stage-tag{max-width:calc(100% - 130px)}}
@media(max-width:850px){.stage-actions{top:45px;left:10px;right:10px;width:auto;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px}.stage-actions button{flex:1;width:0;min-width:0;min-height:48px;padding:5px 2px;font-size:13px;line-height:1.3}.stage-actions #zoom-in,.stage-actions #zoom-out{min-width:0;font-size:24px}.stage-tag{max-width:calc(100% - 24px)}.interaction-help-body{grid-template-columns:1fr}.interaction-help{font-size:14px}.legend{bottom:16px}.chromosome-picker{font-size:16px}}

/* 2.2: distinguish an anatomical zoom from a mitotic time sequence. */
.level-switch{display:flex;gap:6px;margin:0 0 14px}.level-switch button{flex:1;padding:9px 4px;min-height:44px;font-size:16px;border:1px solid #bad2c9;border-radius:8px;background:#f4f7ee;color:#245d51}.level-switch button[aria-pressed=true]{background:#226655;color:#fff;border-color:#226655}.packing-legend{display:grid;gap:8px;font-size:15px;line-height:1.45;margin:14px 0}.packing-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.purple-dot{background:#ac8ece}.teal-dot{background:#48b9a5}.gold-dot{background:#daa940}#coil-information .coil-metric{padding:12px 0}#coil-information .coil-metric strong{font-size:26px;line-height:1.4}#coil-information .coil-copy{font-size:19px;line-height:1.55;margin:12px 0}.nuc-toggles{display:flex;flex-direction:column;gap:4px;padding:8px 0}.nuc-toggles label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:18px}.nuc-toggles input{width:20px;height:20px;accent-color:#226655}#coil-information .nuc-message{font-size:17px}#coil-information .subtle{font-size:14px}
@media(min-width:851px) and (max-height:800px){.level-switch{margin-bottom:8px}#coil-information .coil-copy{font-size:18px;margin:9px 0}.packing-legend{gap:6px;margin:10px 0}#coil-information .coil-metric{padding:9px 0}}