@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#18382f;--muted:#64746d;--green:#267553;--lime:#d8ecaa;--line:#dce3da;--purple:#7855a3}*{box-sizing:border-box}body{margin:0;background:#f6f7f1;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}header{padding:24px 4%;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}.brand{font-size:12px;letter-spacing:1.5px;font-weight:700;text-decoration:none;color:var(--ink)}.brand span{color:#829187;margin-left:15px}.tag,.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700}.tag{background:#eff3e8;padding:7px 10px;border-radius:5px}main{max-width:1300px;margin:auto;padding:42px 32px}.intro h1{font:800 clamp(32px,4vw,52px)/1.15 'Manrope',sans-serif;letter-spacing:-2px;margin:12px 0}.intro em{font-style:normal;color:var(--green)}p{line-height:1.65;color:var(--muted)}.intro p{font-size:17px;margin-bottom:26px}.reference{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:30px}.reference summary{display:flex;justify-content:space-between;padding:20px;cursor:pointer;font-weight:600}.hint{color:var(--green);font-size:13px}.reference-body{padding:0 24px 20px}.reference img{width:100%;border-radius:8px}.small{font-size:12px;color:var(--muted)}nav{display:flex;gap:8px;border-bottom:1px solid var(--line)}button,select,textarea{font:inherit}button,summary,select{cursor:pointer}button{border:0;transition:background .2s}button:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b48be1;outline-offset:3px}button:disabled{opacity:.42;cursor:not-allowed}.tab{padding:17px 27px;background:transparent;color:var(--muted);border-bottom:3px solid transparent;font-weight:700}.tab.active{color:var(--green);border-color:var(--green)}.lab{background:white;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;padding:28px}.lab-head,.section-head{display:flex;align-items:center;justify-content:space-between;gap:15px}h2{font:800 25px 'Manrope',sans-serif;letter-spacing:-.6px;margin:9px 0}h3{font-size:17px;margin:12px 0}.lab-head p{margin:8px 0 20px}.quiet{background:#f4f6f1;padding:11px 16px;border-radius:7px;white-space:nowrap}.setup{display:flex;align-items:center;gap:20px;font-size:12px;color:var(--muted);padding:12px 0 20px}.setup label{color:var(--ink);font-weight:600}select{padding:7px;border:1px solid var(--line);border-radius:6px;background:white}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px}.stat{padding:15px;background:#f7f8f4;border:1px solid #e8ece4;border-radius:9px}.stat span{font-size:11px;color:var(--muted)}.stat strong{display:block;font:800 29px 'Manrope';margin-top:7px}.stat.nad{background:#eef5df}.stat.nadh{background:#f3eef9}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:25px}.chamber{border:1px solid #d7e3d2;border-radius:15px;background:radial-gradient(ellipse at 50% 40%,#fff,#eff5e9);padding:18px}.chamber-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#6b826a}#badge{letter-spacing:.5px;font-weight:700}#diagram{min-height:215px;display:flex;align-items:center}svg{width:100%;height:auto;overflow:visible}svg text{font-family:'DM Sans',sans-serif}.carrier-pool{border-top:1px solid #d7e3d2;padding-top:17px;font-size:12px}#carriers{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.carrier{padding:9px 15px;border-radius:22px;background:#d5e8b5;color:#345e29;font-weight:700;border:1px solid #a3c680}.carrier.loaded{background:#e4d7f1;color:#705090;border-color:#baa0d2}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10px;color:var(--muted)}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.green{background:#9bbf6b}.purple{background:#ab8cc5}aside{padding:9px 0}aside p{font-size:13px}aside button{width:100%;padding:13px 10px;border-radius:7px;margin:4px 0;font-size:13px;font-weight:600}.primary{background:var(--green);color:white}.secondary{background:#eef3e8;color:var(--ink)}.text-button{color:var(--green);background:transparent}#status{font-size:13px;line-height:1.6;padding:13px;border-left:3px solid #a9c875;margin-top:15px;background:#f6f8f1}#status.stopped{border-color:#c57c55;background:#fff4ea;color:#8b4a26}.bottom-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-top:28px;border-top:1px solid var(--line);padding-top:12px}.table-scroll{max-height:225px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;text-align:left}th{font-size:10px;color:var(--muted);position:sticky;top:0;background:#fff}td,th{padding:10px 7px;border-bottom:1px solid #edf0e9}.reflect{padding-top:14px}textarea{width:100%;height:87px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:13px}.reflect summary{font-size:12px;color:var(--green);padding:12px 0}.notes{margin-top:24px;color:var(--muted);font-size:12px;line-height:1.6}.notes summary{cursor:pointer}footer{display:flex;justify-content:space-between;margin-top:30px;font-size:10px;letter-spacing:1.5px;color:#7d8a7c}button:hover:not(:disabled){filter:brightness(.96)}@media(max-width:850px){.workspace{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.bottom-grid{grid-template-columns:1fr}.brand span,.tag{display:none}.lab-head{align-items:flex-start}.setup{flex-wrap:wrap;gap:10px}.hint{display:none}main{padding:25px 15px}.lab{padding:18px}.quiet{font-size:11px}h2{font-size:21px}.tab{padding:15px}.intro h1{letter-spacing:-1px}}@media(prefers-reduced-motion:no-preference){.carrier{transition:background .4s}}
#diagram{min-height:340px}.chamber{background:#fcfdf9}.glucose-supply{display:flex;gap:10px;margin:10px 0 0}.glucose-token{display:grid;place-items:center;width:55px;height:55px;background:#fbefce;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);color:#74551c;padding:7px}.glucose-token b{font-size:16px}.glucose-token small{font-size:8px}.glucose-token.used{opacity:.22;filter:grayscale(1)}#animationCaption{min-height:48px;font-size:12px;line-height:1.6;color:#536c50;background:#eff4e8;border-radius:7px;padding:10px 12px}#products{font-size:10px;line-height:1.8;padding:12px 0;color:#74816b}#products span{display:block;text-transform:uppercase;letter-spacing:1px}.route-buttons{display:flex;gap:12px;margin:2px 0 10px}.route-buttons button{flex:1;background:#f5f7f1;border:1px solid #dce3da;padding:15px;border-radius:9px;color:#53654d;text-align:left;font-weight:700}.route-buttons button[aria-pressed=true]{border:2px solid #267553;background:#eef5df;color:#1d603d}.route-buttons small{display:block;font-weight:400;font-size:11px;margin-top:7px}#routeInfo{font-size:13px;margin:10px 0}#routes{margin-bottom:20px}#routes>p.small{margin-top:5px;font-size:11px}.choice{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin:7px 0;text-align:left;background:#f7f8f3;border:1px solid #dce3da;border-radius:7px;font-size:13px;color:#314b35}.choice span{border:1px solid #cbd7c3;border-radius:50%;min-width:24px;height:24px;display:grid;place-items:center;font-size:10px}.choice.correct{background:#e5f2dc;border-color:#6b9d46}.choice.incorrect{background:#fff0e6;border-color:#c78c62}#feedback{font-size:12px;min-height:50px}.correct-text{color:#267553}#nextQuestion{padding:10px 15px;border-radius:7px;font-size:12px}.carrier sup{background:#f6cf54;border-radius:50%;padding:2px;color:#634712;font-size:10px}.stop-badge{background:#f9e1d2;color:#924926;padding:4px 7px;border-radius:4px}.setup{justify-content:space-between}.workspace{grid-template-columns:minmax(0,1fr) 270px}#pause{margin-top:8px}@media(max-width:850px){.workspace{grid-template-columns:1fr}#diagram{min-height:0}.route-buttons{flex-direction:column}.glucose-supply{gap:6px}.glucose-token{width:46px;height:46px}.chamber{padding:12px}.stats .stat strong{font-size:25px}}
/* Compact desktop bench: counts, animation/carriers, controls. */
main{max-width:1500px}.lab{padding:20px}.lab-head h2{font-size:23px;margin:5px 0}.lab-head p{margin:5px 0 10px;font-size:13px}.setup{padding:8px 0 14px}.workspace{grid-template-columns:145px minmax(0,1fr) 245px;gap:18px;align-items:start}.stats{grid-template-columns:1fr;gap:7px;margin:0}.stat{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:53px}.stat span{font-size:11px;line-height:1.4;max-width:80px}.stat strong{font-size:23px;margin:0;white-space:nowrap}.chamber{padding:14px}.carrier-pool{border-top:0;border-bottom:1px solid #d7e3d2;padding:8px 0 10px;margin-bottom:10px}.carrier-pool>div:first-child{display:flex;justify-content:space-between;gap:8px}.carrier-pool .small{font-size:10px}#carriers{margin:8px 0;gap:6px}.carrier{padding:7px 11px;font-size:12px}.legend{gap:10px;font-size:9px}#inventory{display:flex;align-items:center;justify-content:space-between;gap:10px}#inventory>.small{font-size:10px}.glucose-supply{margin:0;gap:6px}.glucose-token{height:35px;width:38px;padding:4px}.glucose-token b{font-size:12px}.glucose-token small{font-size:7px}#diagram{min-height:0;justify-content:center}#diagram svg{display:block;height:clamp(230px,31vh,300px);width:100%}#animationCaption{font-size:11px;min-height:42px;padding:8px 10px}.chamber-label{font-size:9px;min-height:19px}aside{padding:0}aside h3{margin:7px 0}aside p{font-size:12px;line-height:1.5;margin:8px 0}aside button{padding:11px 8px;font-size:12px}#status{padding:10px;font-size:12px;line-height:1.5;margin-top:10px}.accounting{margin-top:12px;font-size:11px;color:var(--muted)}.accounting summary{cursor:pointer}#products{padding:8px}#routes{margin-bottom:12px}.route-buttons{gap:8px;margin:0}.route-buttons button{padding:9px 12px;font-size:12px}.route-buttons small{display:inline;font-size:10px;margin-left:10px}#routeInfo{font-size:11px;line-height:1.5;margin:0 0 7px}#routeContext{padding:10px;background:#f4f7ef;border-radius:7px;margin-bottom:12px}#routeContext>.small{font-size:10px;line-height:1.4;margin:0}.bottom-grid{margin-top:16px;padding-top:10px}.lab-head .eyebrow{font-size:10px}
@media(min-width:1100px) and (max-height:800px){.lab{padding:16px}.lab-head h2{font-size:21px}.setup{padding:5px 0 10px}#diagram svg{height:225px}.carrier-pool{padding:5px 0 7px}.stat{min-height:49px}.carrier{padding:5px 10px}#animationCaption{min-height:36px}.lab-head p{margin-bottom:5px}.route-buttons small{display:none}}
@media(max-width:1099px){.workspace{grid-template-columns:120px minmax(0,1fr) 210px;gap:12px}.stat{padding:8px}.stat strong{font-size:21px}.carrier{padding:6px 8px}.carrier-pool>div:first-child{display:block}.carrier-pool .small{display:none}.legend{font-size:9px}.route-buttons small{display:block;margin:5px 0 0}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.stat{min-height:48px}.stat span{max-width:none}.chamber{grid-row:2}.workspace>aside{grid-row:3}#diagram svg{height:auto;max-height:330px}.route-buttons{flex-direction:row}.route-buttons small{display:none}.carrier-pool>div:first-child{display:flex}#carriers{flex-wrap:wrap}.lab{padding:14px}.lab-head h2{font-size:20px}.lab-head{gap:8px}}
[hidden]{display:none!important}.condition-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 16px}.condition-cards button{padding:12px;border:1px solid var(--line);background:#f6f8f1;text-align:left;border-radius:8px;font-size:12px;color:var(--ink)}.condition-cards button span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.condition-cards button[aria-pressed=true]{background:#edf5df;border:2px solid var(--green)}.conditions-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.condition-predict{display:flex;gap:9px;align-items:center;font-size:12px;margin-bottom:12px;flex-wrap:wrap}.condition-predict button,#nextDataQuestion{padding:10px 15px;border-radius:6px;font-size:12px}.condition-predict select{flex:1;min-width:120px}.condition-stage{border:1px solid #d7e3d2;background:#fcfdf9;padding:15px;border-radius:12px}.condition-flags{display:flex;justify-content:space-between;gap:6px;font-size:10px;flex-wrap:wrap}.condition-flags>span{padding:6px;background:#f0f3e9;border-radius:5px}.condition-flags>.oxygen-off{background:#fcebdc;color:#985323}.condition-pool{margin:18px 0 10px;font-size:12px}.condition-pool>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.condition-pool .carrier{padding:5px 8px;font-size:10px}.condition-path{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:125px}.condition-molecule{text-align:center;font-size:20px;color:#8c672b;background:#f7e8bf;border-radius:24px;padding:12px}.condition-molecule small{display:block;font-size:10px;margin-top:5px}.condition-molecule.pyruvate{background:#f3d9cd;color:#8e5642;white-space:nowrap}.condition-molecule.absent{opacity:.35;background:#e5e8df}.condition-arrow{font-size:24px;color:#8cae7b}.condition-reactor{position:relative;background:#267553;color:white;padding:18px 10px;border-radius:9px;font-size:13px}.condition-reactor.blocked{background:#a64f36}.moving-electron{position:absolute;top:100%;left:0;color:#8a6712;background:#f7df8a;font-size:10px;padding:5px;border-radius:10px;white-space:nowrap;animation:carry 1.1s ease both}.flowing .condition-molecule:first-child{animation:glucoseFlow 1.1s ease both}.condition-atp{padding:10px;background:#f0f4e7;color:#42643c;font-size:12px;border-radius:6px;min-height:36px}.condition-stage .small{font-size:10px;margin:9px 0 0}.observation{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:10px;color:#64746d}.observation progress{flex:1;accent-color:#267553;min-width:50px}.condition-result{margin-top:12px;background:#eef5e4;padding:12px;border-radius:8px;font-size:12px;min-height:70px}.condition-result p{margin:5px 0 0;font-size:12px}.condition-graph{border:1px solid var(--line);border-radius:12px;padding:16px}.condition-graph h3{margin:6px 0}.condition-graph svg{height:auto;max-height:280px}.condition-graph td,.condition-graph th{padding:6px}.condition-graph p{font-size:10px;line-height:1.5;margin-bottom:0}.conditions-lower{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);padding-top:22px;margin-top:24px}.data-notes p{font-size:12px}.condition-reference{margin:20px 0 0;font-size:13px}.data-images{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}.data-images p{grid-column:1/-1;font-size:12px}.condition-reference .reference-body>p{font-size:12px}@keyframes carry{from{transform:translate(0,0);opacity:0}to{transform:translate(20px,-120px);opacity:1}}@keyframes glucoseFlow{0%{transform:translateX(0)}60%{transform:translateX(35px);opacity:.8}100%{transform:translateX(55px);opacity:0}}@media(prefers-reduced-motion:reduce){.moving-electron,.flowing .condition-molecule:first-child{animation:none}}@media(max-width:850px){.conditions-grid,.conditions-lower{grid-template-columns:1fr}.condition-cards{grid-template-columns:repeat(2,1fr)}nav .tab{padding:13px 10px;font-size:12px}.data-images{grid-template-columns:1fr}.data-images img:first-child{max-width:220px}.condition-predict label{width:100%}}

/* Compact collection header: keep the experiment close to the page title. */
body>main{padding-top:16px}
body main nav.collection-nav{margin:0 0 16px;padding:7px 10px;gap:14px;border-radius:10px}
body main nav.collection-nav a{min-height:40px;font-size:12px}
body main nav.collection-nav .lab-nav-home{padding:7px 11px}
body main nav.collection-nav .lab-nav-next{padding:7px 12px;width:min(100%,260px)}
body main nav.collection-nav .lab-nav-destination{font-size:12px}
body main nav.collection-nav .lab-nav-kicker{font-size:10px}
body main nav.collection-nav .lab-nav-brand{gap:0}
body main nav.collection-nav .lab-nav-course{min-height:27px}
body main nav.collection-nav .lab-skool-logo{width:78px;height:25px}
body main nav.collection-nav .lab-nav-progress{font-size:10px}
.intro .eyebrow{font-size:10px;letter-spacing:1.2px}
.intro h1{font-size:clamp(25px,2.7vw,36px);letter-spacing:-1px;margin:6px 0;line-height:1.2}
.intro>p{font-size:14px;margin:6px 0 14px;line-height:1.5}
main>.reference{margin-bottom:12px;border-radius:8px}
main>.reference>summary{padding:12px 15px;font-size:13px}
main>.reference .hint{font-size:11px}
nav[role=tablist] .tab{padding:13px 22px;font-size:13px}
@media(max-width:760px){body>main{padding-top:10px}body main nav.collection-nav{gap:7px;margin-bottom:12px}body main nav.collection-nav .lab-nav-brand{gap:9px}body main nav.collection-nav .lab-nav-course{min-height:24px}body main nav.collection-nav .lab-nav-progress{font-size:9px}.intro>p{font-size:12px;margin-bottom:10px}nav[role=tablist] .tab{padding:12px 8px;font-size:11px}main>.reference>summary{padding:11px 12px}}

/* The collection uses the shared five-question concept-check panel. */
.bottom-grid{grid-template-columns:1fr}