.mito-enter{margin-top:22px}
.map-mito .map-scene{background:#061319;height:clamp(460px,47vw,650px)}
.map-mito .map-webgl{touch-action:none}
.map-mito .map-coordinate{font-size:9px;letter-spacing:.17em}
.map-mito .atom-scene-label{max-width:calc(100% - 112px);font-size:10px;letter-spacing:.12em;bottom:59px}
.mito-start-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 25px;background:linear-gradient(100deg,#18373b,#14292c);border-bottom:1px solid #34595a}
.mito-start-strip .eyebrow{font-size:10px;margin:0;letter-spacing:.17em}
.mito-start-strip .button{padding:12px 16px;min-height:42px;font-size:12px;letter-spacing:.03em}
.mito-start-strip[hidden]{display:none}
.mito-scene-key{position:absolute;left:24px;right:24px;bottom:21px;display:none;gap:18px;flex-wrap:wrap;z-index:3;pointer-events:none;font-size:11px;color:#e0e9e3;text-shadow:0 1px 5px #000}
.map-mito.map-ready[data-map-active="power"] .mito-scene-key{display:flex}
.mito-scene-key span{display:flex;align-items:center;gap:7px}
.mito-scene-key i{width:7px;height:7px;border-radius:50%}
.mito-electron-dot{background:#fff0a6}.mito-proton-dot{background:#70e8f9}.mito-atp-dot{background:#ffc767}
.mito-camera-buttons{position:absolute;top:90px;left:24px;right:75px;display:flex;gap:6px;flex-wrap:wrap;z-index:4}
.mito-camera-buttons button,.mito-scenarios button{border:1px solid #52676a;background:#0a1b23e8;color:#c8d9d4;padding:10px 12px;border-radius:3px;font:inherit;font-size:12px;min-height:40px;cursor:pointer}
.mito-camera-buttons button[aria-pressed="true"],.mito-scenarios button[aria-pressed="true"]{border-color:#ddb888;background:#25423e;color:#fff4d9;box-shadow:inset 0 2px #ddb888}
.mito-camera-buttons button:hover,.mito-scenarios button:hover{border-color:#95d3cc;color:#fff}
.mito-camera-buttons button:focus-visible,.mito-lab button:focus-visible,.mito-sliders input:focus-visible{outline:2px solid #89ddd8;outline-offset:4px}
.mito-camera-buttons[hidden],.mito-lab[hidden],.mito-readouts[hidden]{display:none}
.mito-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:21px 27px 15px;background:linear-gradient(115deg,#10232b,#112b2e)}
.mito-readouts>div>span{display:block;color:#c2d6d2;font-size:11px;letter-spacing:.04em;margin-bottom:7px}
.mito-readouts strong{display:flex;align-items:baseline;gap:6px;color:#fff0d4;font-weight:normal}
.mito-readouts b{font:normal 30px/1.15 var(--display);font-variant-numeric:tabular-nums;width:3ch;text-align:right;display:inline-block}
.mito-readouts small{font-size:10px;color:#aabfb9}
.mito-meter{height:3px;overflow:hidden;margin-top:10px;background:#395057}
.mito-meter i{display:block;height:100%;width:0;background:#75cdd4}
.mito-readouts>div:nth-child(2) .mito-meter i{background:#f0c071}
.mito-readouts>div:nth-child(3) .mito-meter i{background:#fff0a6}
.mito-readouts>p{grid-column:1/-1;color:#a7bcb7;margin:0;font-size:10px;line-height:1.55}
.mito-lab{padding:25px 27px 28px;background:#0d1f28;border-top:1px solid #30434a}
.mito-lab-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.mito-lab-heading .eyebrow{font-size:10px;letter-spacing:.15em;margin:0}
.mito-play-controls{display:flex;gap:8px;flex-wrap:wrap}
.mito-play-controls .button{font-size:11px;padding:11px 13px;min-height:42px;letter-spacing:.03em}
.mito-scenarios{display:flex;gap:7px;flex-wrap:wrap;margin:19px 0}
.mito-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.mito-sliders label{display:grid;grid-template-columns:1fr auto;gap:12px 8px;color:#d0dfda;font-size:12px}
.mito-sliders output{font-variant-numeric:tabular-nums;width:5ch;text-align:right;color:#f4d4a0}
.mito-sliders input{grid-column:1/-1;width:100%;margin:0;accent-color:#87d5d6;min-height:28px;cursor:pointer}
.mito-sliders small{grid-column:1/-1;color:#91aaa8;font-size:10px;line-height:1.4}
.mito-explanation{font:16px/1.6 var(--display);color:#c8d9d4;margin:23px 0 0;min-height:4.8em}
.map-mito .mito-destinations{grid-template-columns:repeat(3,minmax(0,1fr))}
.map-mito .mito-destinations a{min-height:95px;padding:16px;border-bottom:1px solid var(--line)}
.map-mito .map-dossier h2{font-size:clamp(43px,4vw,62px);margin-top:18px}
.map-mito .map-dossier .map-subtitle{margin-bottom:27px}
.map-mito.map-ready[data-map-active="power"] [data-map-file="power"]{display:block}
.mito-challenge{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}
.mito-challenge h3{font-size:27px;margin:15px 0}
.mito-challenge p{font:16px/1.65 var(--display);color:#c3d0ce}
.mito-challenge .mito-compartments{font:12px/1.8 var(--sans);color:#afc7c1}
.mito-related .text-link{display:block;margin-top:17px}
@media(min-width:1000px){.map-mito .map-dossiers{padding:34px}.map-mito .map-dossier h3{font-size:30px}.map-mito .map-dossier>p:not(.eyebrow):not(.map-subtitle){font-size:16px}}
@media(max-width:700px){
 .map-mito .map-scene{height:440px}
 .map-mito .map-coordinate{left:18px;top:20px;font-size:8px}
 .map-mito .atom-scene-label{bottom:64px;left:18px;font-size:9px}
 .mito-start-strip{padding:12px 18px}.mito-start-strip .eyebrow{font-size:9px}.mito-start-strip .button{font-size:11px;padding:11px 12px}
 .mito-camera-buttons{top:78px;left:16px;right:60px;gap:5px}
 .mito-camera-buttons button{font-size:10px;padding:9px 10px;min-height:38px}
 .mito-scene-key{left:18px;right:18px;bottom:18px;gap:12px;font-size:9px}
 .mito-readouts{gap:11px;padding:18px}
 .mito-readouts>div>span{font-size:10px;min-height:26px}
 .mito-readouts b{font-size:25px}
 .mito-readouts strong{gap:4px}.mito-readouts small{font-size:9px}
 .mito-lab{padding:20px 18px}
 .mito-sliders{gap:18px}.mito-sliders label{font-size:11px}
 .mito-scenarios button{font-size:11px;padding:9px 10px;flex:1;min-width:85px}
 .mito-explanation{font-size:15px;min-height:6.4em}
 .map-mito .mito-destinations{grid-template-columns:repeat(2,minmax(0,1fr))}
 .map-mito .mito-destinations a{padding:14px 12px;min-height:89px}
 .map-mito .map-stage-bottom{padding:12px 18px}
}
@media(max-width:360px){.mito-readouts{gap:6px;padding:15px 12px}.mito-readouts b{font-size:22px}.mito-sliders{grid-template-columns:1fr}.mito-camera-buttons{right:52px}.mito-camera-buttons button{font-size:9px;padding:8px}}
@media(prefers-reduced-motion:reduce){.mito-meter i{transition:none}}

/* Living Network: a separate cell-scale view with its own controls and key. */
.mito-network-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:13px 24px;background:#17151c;border-bottom:1px solid #453a32}
.mito-network-controls[hidden]{display:none}
.mito-network-controls .eyebrow{margin:0;font-size:10px;letter-spacing:.15em}
.mito-network-controls>div{display:flex;flex-wrap:wrap;gap:8px}
.mito-network-controls button{font:inherit;font-size:12px;min-height:42px;padding:10px 13px;border:1px solid #69533a;background:#221f21;color:#f8dfac;border-radius:3px;cursor:pointer}
.mito-network-controls button:focus-visible{outline:2px solid #89ddd8;outline-offset:3px}
.mito-network-key{display:none;position:absolute;left:24px;right:24px;bottom:20px;z-index:3;gap:14px;flex-wrap:wrap;font-size:11px;color:#e0e9e3;pointer-events:none;text-shadow:0 1px 5px #000}
.mito-network-key span{display:flex;align-items:center;gap:7px}
.mito-network-key i{width:7px;height:7px;border-radius:50%}
.mito-network-dot{background:#ffe578}.mito-nucleus-dot{background:#64d9ec}.mito-fiber-dot{background:#a82d50}
.map-mito.map-ready[data-map-active="network"] .mito-network-key{display:flex}
.map-mito.map-ready[data-map-active="network"] [data-map-file="network"]{display:block}
@media(min-width:701px){.map-mito .mito-destinations [data-map-target="network"]{grid-column:1/-1;min-height:76px}}
@media(max-width:700px){.mito-network-controls{padding:12px 18px}.mito-network-controls button{font-size:11px}.mito-network-key{left:18px;right:65px;font-size:10px;gap:8px 12px}}
