/* ATP Power Company: plant scene on top, four-step control console below (fits the 1366×768 stage, ~1066×628). */
.apc-stage{--apc-ink:#1d2a33;--apc-bg1:#fdf1e2;--apc-bg2:#f3dcc0;--apc-tile:#e6c9a6;--apc-membrane:#d9a441;--apc-tube:#fffdf8;--apc-tube-line:#5b6b7a;--apc-lit:#f2a63b;--apc-dim:#9aa6b1;
  position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10px;overflow:hidden;color:var(--tlg-text,#172033);font-size:16px}
[data-theme=dark] .apc-stage{--apc-ink:#f1ece4;--apc-bg1:#2f2a26;--apc-bg2:#3a2f26;--apc-tile:#4a3e33;--apc-membrane:#b8862e;--apc-tube:#1e252b;--apc-tube-line:#a8b4bf}

/* scene */
.apc-scene-host{min-height:0;min-width:0;container-type:size;display:grid;place-items:center}
.apc-scene{position:relative;width:min(100cqw,calc(100cqh * 2.8889));aspect-ratio:1040/360;border:3px solid var(--tlg-border-strong,#475569);border-radius:18px;overflow:hidden;background:var(--apc-bg2);box-shadow:0 8px 22px #0f172a2e}
.apc-svg{display:block;width:100%;height:100%}
.apc-bg1{stop-color:var(--apc-bg1)}.apc-bg2{stop-color:var(--apc-bg2)}.apc-tile{stroke:var(--apc-tile)}.apc-membrane{stroke:var(--apc-membrane)}
.apc-tube{fill:var(--apc-tube);stroke:var(--apc-tube-line)}.apc-tick{stroke:var(--apc-tube-line)}.apc-order-line{stroke:#b42318}
[data-theme=dark] .apc-order-line{stroke:#ff8a7a}
.apc-lbl{font-family:var(--tlg-font,system-ui,sans-serif);font-size:17px;font-weight:800;fill:var(--apc-ink);letter-spacing:.02em}
.apc-lbl--sm{font-size:16px;font-weight:700}.apc-lbl--it{font-style:italic;font-weight:600}.apc-lbl--dark{fill:#2a1a10}.apc-lbl--light{fill:#ffffff}
.apc-hex{fill:#fff3c4;stroke:#c7901e;stroke-width:2.5}
.apc-glu{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .18s,transform .18s}.apc-glu.is-on{opacity:1}
.apc-pipe{stroke:#4b5763;stroke-width:14}.apc-pipe--feed{stroke:#5b6b7a}
.apc-flow{stroke:var(--apc-lit);stroke-width:6;stroke-dasharray:10 10;opacity:0}
.apc-nad{stroke:#2f8f5b;stroke-width:4;stroke-dasharray:3 7;opacity:.55}
.apc-scene[data-route=aerobic] .apc-flow--aerobic,.apc-scene[data-route=fermentation] .apc-flow--ferment{opacity:1}
.apc-scene[data-route=aerobic] .apc-pipe--ferment,.apc-scene[data-route=fermentation] .apc-pipe--aerobic{stroke:var(--apc-dim);opacity:.6}
.apc-scene.is-running .apc-flow{animation:apc-dash .6s linear infinite}
.apc-scene.run-aerobic.is-running .apc-nad--etc,.apc-scene.run-ferment.is-running .apc-nad--vat,.apc-scene.run-aerobic.is-done:not(.is-stalled) .apc-nad--etc,.apc-scene.run-ferment.is-done .apc-nad--vat{opacity:1;stroke-width:5}
.apc-scene.run-ferment.is-running .apc-bubbles circle{animation:apc-bubble 1s ease-in infinite}.apc-bubbles circle:nth-child(2n){animation-delay:.35s!important}.apc-bubbles circle:nth-child(3n){animation-delay:.6s!important}
.apc-scene.is-stalled .apc-etc{fill:#b42318;transition:fill .3s .9s}
.apc-scene.is-running .apc-smoke{opacity:1;animation:apc-smoke 1.2s ease-out infinite}
.apc-scene.is-over .apc-fill{fill:#d99a12}
.apc-carrier{fill:#5b8def;stroke:#1d3f8a;stroke-width:2}.apc-nadplus{fill:#4fbf7f;stroke:#1d5e3a;stroke-width:2}.apc-o2{fill:#9fd3ff;stroke:#1f5d99;stroke-width:2}
.apc-banner{position:absolute;left:50%;top:50px;transform:translateX(-50%);max-width:min(560px,80%);padding:8px 16px;border-radius:12px;font-weight:800;font-size:17px;line-height:1.3;text-align:center;box-shadow:0 6px 18px #0f172a40;border:2px solid}
.apc-banner--ok{background:#e9f7ee;color:#0f5132;border-color:#1f8a4c}.apc-banner--bad{background:#fff1ec;color:#7a1d0c;border-color:#c2410c}
.apc-scene.is-done .apc-banner{animation:apc-pop .35s ease-out}
@keyframes apc-dash{to{stroke-dashoffset:-20}}
@keyframes apc-bubble{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(-22px);opacity:0}}
@keyframes apc-smoke{0%{transform:translateY(6px);opacity:.2}60%{opacity:.9}100%{transform:translateY(-14px);opacity:0}}
@keyframes apc-pop{0%{transform:translate(-50%,-8px) scale(.94);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}

/* console */
.apc-console{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(220px,1fr) minmax(220px,1fr) minmax(250px,1.2fr);gap:8px;min-width:0}
.apc-panel{min-width:0;border:2px solid var(--tlg-border,#cbd5e1);border-radius:14px;background:var(--tlg-surface,#fff);padding:8px 10px;box-shadow:0 4px 12px #0f172a12;display:flex;flex-direction:column;gap:6px}
.apc-panel-h{margin:0;font-size:17px;line-height:1.2;display:flex;align-items:center;gap:7px}
.apc-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ps-accent,#21576b);color:#fff;font-size:16px;flex:none}
.apc-batch-read{display:flex;align-items:baseline;gap:8px}.apc-batch-num{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;min-width:1.4em}.apc-batch-unit{font-size:16px;font-weight:700;color:var(--tlg-text-muted,#526174)}
.apc-batch-row{display:flex;align-items:center;gap:6px}
.apc-range{font-size:16px;flex:1;min-width:0;height:44px;accent-color:var(--ps-accent,#21576b);margin:0}
.apc-step-btn{flex:none;width:44px;height:44px;border-radius:10px;border:2px solid var(--tlg-border-strong,#475569);background:var(--tlg-surface,#fff);color:var(--tlg-text,#172033);font:inherit;font-size:22px;font-weight:900;cursor:pointer}
.apc-step-btn:hover:not(:disabled){background:var(--tlg-bg-band,#f1f5f9)}
.apc-note{margin:0;font-size:16px;line-height:1.3;color:var(--tlg-text-muted,#526174)}
.apc-radios{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.apc-opt{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 9px;border:2px solid var(--tlg-border,#cbd5e1);border-radius:10px;background:var(--tlg-surface,#fff);cursor:pointer;line-height:1.2}
.apc-opt input{appearance:none;-webkit-appearance:none;position:absolute;inset:0;margin:0;border-radius:8px;cursor:pointer;font-size:16px}
.apc-opt input:focus-visible{outline:3px solid var(--tlg-focus,#2563eb);outline-offset:2px}
.apc-opt-text{display:flex;flex-direction:column;min-width:0}.apc-opt-text b{font-size:16px}.apc-opt-text small{font-size:16px;color:var(--tlg-text-muted,#526174)}
.apc-opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--tlg-border-strong,#475569);background:var(--tlg-surface,#fff)}
.apc-opt:has(input:checked){border-color:var(--ps-accent,#21576b);background:color-mix(in srgb,var(--ps-accent,#21576b) 12%,var(--tlg-surface,#fff));box-shadow:inset 0 0 0 1px var(--ps-accent,#21576b)}
.apc-opt:has(input:checked)::before{border-color:var(--ps-accent,#21576b);background:radial-gradient(circle,var(--ps-accent,#21576b) 0 5px,var(--tlg-surface,#fff) 6px)}
[data-theme=dark] .apc-opt:has(input:checked){border-color:#7cc4d8;box-shadow:inset 0 0 0 1px #7cc4d8}[data-theme=dark] .apc-opt:has(input:checked)::before{border-color:#7cc4d8;background:radial-gradient(circle,#7cc4d8 0 5px,var(--tlg-surface) 6px)}
.apc-route .apc-opt{min-height:62px}
.apc-opt-icon{flex:none;width:44px;height:30px}.apc-opt-icon svg{width:100%;height:100%;display:block}
.apc-nadopts .apc-opt{padding-top:3px;padding-bottom:3px}
.apc-num{display:flex;flex-direction:column;gap:2px;font-weight:700}
.apc-num-label{font-size:16px}
.apc-num-row{display:flex;align-items:center;gap:6px}
.apc-num input{flex:1;min-width:0;width:100%;min-height:44px;font:inherit;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em;padding:4px 10px;border-radius:9px;border:2px solid #3b4651;background:#122028;color:#9ff0c4;box-shadow:inset 0 2px 6px #0008}
.apc-num input::placeholder{color:#5f7d72}
.apc-num input:focus-visible{outline:3px solid var(--tlg-focus,#2563eb);outline-offset:2px}
.apc-unit{flex:none;font-size:16px;font-weight:700;color:var(--tlg-text-muted,#526174)}
.apc-stage.is-locked .apc-opt,.apc-stage.is-locked .apc-opt input{cursor:default}
.apc-stage input:disabled,.apc-stage button:disabled{opacity:1}
.apc-stage.is-locked .apc-step-btn{opacity:.55}

/* Briefing worked example */
.apc-example .apc-svg{width:100%;height:auto;border-radius:12px;border:2px solid var(--tlg-border,#cbd5e1)}
.apc-example{--apc-ink:#1d2a33;--apc-bg1:#fdf1e2;--apc-bg2:#f3dcc0;--apc-tile:#e6c9a6;--apc-membrane:#d9a441;--apc-tube:#fffdf8;--apc-tube-line:#5b6b7a;--apc-lit:#f2a63b;--apc-dim:#9aa6b1}
.apc-example .apc-glu.is-on{opacity:1}.apc-example[data-route=aerobic] .apc-flow--aerobic{opacity:1}.apc-example[data-route=aerobic] .apc-pipe--ferment{stroke:var(--apc-dim);opacity:.6}

/* narrow screens: scene above, panels stack (the stage scrolls) */
@media (max-width:900px){
  .apc-stage{position:static;display:flex;flex-direction:column;overflow:visible}
  .apc-scene-host{container-type:normal;display:block;overflow-x:auto;border-radius:18px}.apc-scene{width:100%;min-width:760px}.apc-svg{height:auto}
  .apc-console{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.apc-console{grid-template-columns:1fr}.apc-banner{top:8px;font-size:16px}}
@media (prefers-reduced-motion:reduce){.apc-stage *,.apc-example *{animation:none!important;transition:none!important}}