:root{color-scheme:dark;--bg:#020910;--panel:#071621;--line:#173848;--text:#e8f8ff;--muted:#7f9bab;--cyan:#35dcff;--orange:#ffb244}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 60% -10%,#0b2a3b 0,#04101a 37%,var(--bg) 72%);color:var(--text);font:14px Inter,Arial,sans-serif;min-height:100vh}.sitebar{height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,64px);background:#03101aaa;backdrop-filter:blur(14px)}.brand{font-weight:800;letter-spacing:.16em;color:var(--text);text-decoration:none}.brand span,.kicker{color:var(--cyan)}nav{display:flex;gap:28px}nav a{color:var(--muted);text-decoration:none;font-size:13px}nav a:hover{color:var(--text)}main{width:min(1500px,94vw);margin:auto}.intro{padding:32px 0 24px;display:flex;justify-content:space-between;gap:28px;align-items:end}.kicker{font:700 11px ui-monospace,monospace;letter-spacing:.18em;margin:0 0 10px}.intro h1{font-size:clamp(32px,4.5vw,60px);line-height:1;margin:0 0 12px;letter-spacing:-.035em}.intro>div>p:last-child{color:var(--muted);max-width:760px;line-height:1.55;margin:0}.status{display:flex;gap:22px;align-items:center;padding:13px 18px;border:1px solid var(--line);background:#061722cc;border-radius:10px}.status div{display:grid;gap:3px}.status small,.readouts small{font:700 9px ui-monospace,monospace;color:var(--muted);letter-spacing:.12em}.status strong{font:600 12px ui-monospace,monospace}.dot{width:8px;height:8px;background:#4df0aa;border-radius:50%;box-shadow:0 0 12px #4df0aa}.dot.paused{background:var(--orange);box-shadow:0 0 12px var(--orange)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--line);background:#04111b;box-shadow:0 25px 80px #0008}.stage-panel{min-width:0;border-right:1px solid var(--line)}.stage-toolbar,.transport{min-height:54px;display:flex;align-items:center;gap:14px;padding:8px 14px;border-bottom:1px solid var(--line)}button,select{font:inherit;color:var(--text);background:#0a202d;border:1px solid #1d4354;border-radius:6px;padding:8px 12px;cursor:pointer}button:hover{border-color:#3a748c}.segmented{display:flex}.segmented button{border-radius:0;margin-left:-1px}.segmented button:first-child{border-radius:6px 0 0 6px;margin:0}.segmented button:last-child{border-radius:0 6px 6px 0}.segmented button.active,.primary{color:#001018;background:var(--cyan);border-color:var(--cyan);font-weight:700}.legend{margin-left:auto;display:flex;gap:16px;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.swatch{display:inline-block;width:10px;height:4px}.crest{background:#50dfff}.trough{background:#2151cb}.wall{background:#ffb244}.tank-wrap{position:relative;background:#020b12;aspect-ratio:16/9;max-height:650px;overflow:hidden}#tank{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-note{position:absolute;left:14px;bottom:12px;background:#020b12cc;border:1px solid #194255;border-radius:5px;padding:7px 10px;color:var(--muted);font-size:11px;pointer-events:none}.transport{border-top:1px solid var(--line);border-bottom:0;flex-wrap:wrap}.transport label{margin-left:8px;display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.transport input{width:100px}.transport .right{margin-left:auto}.controls{background:linear-gradient(180deg,#071924,#04111a);max-height:760px;overflow:auto}.controls section{padding:18px;border-bottom:1px solid var(--line)}.controls h2{font-size:12px;text-transform:uppercase;letter-spacing:.11em;margin:0 0 16px}.section-head{display:flex;justify-content:space-between;align-items:start}.icon{padding:4px 8px}.badge{font:10px ui-monospace,monospace;color:var(--cyan);border:1px solid #176078;padding:4px 7px;border-radius:99px}.controls label{display:grid;grid-template-columns:1fr auto;gap:7px;margin:13px 0;color:var(--muted);font-size:11px}.controls output{color:var(--text);font:11px ui-monospace,monospace}.controls input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--cyan)}.field{grid-template-columns:1fr!important}.field select{width:100%;margin-top:2px}.full{width:100%}.full button{flex:1;padding:7px 4px;font-size:10px}.switch{display:flex!important;align-items:center;gap:9px!important}.switch input{display:none}.switch span{width:32px;height:18px;border-radius:20px;background:#173443;position:relative}.switch span:after{content:"";width:12px;height:12px;background:#7995a5;border-radius:50%;position:absolute;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:#13667c}.switch input:checked+span:after{left:17px;background:var(--cyan)}.readouts{display:grid;grid-template-columns:repeat(3,1fr) 2.1fr;border:1px solid var(--line);border-top:0;background:#06141e}.readouts article{padding:17px 19px;border-right:1px solid var(--line);min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:6px}.readouts article:last-child{border:0}.readouts strong{font:600 21px ui-monospace,monospace}.readouts p{color:var(--muted);font-size:10px;margin:0}.mini-line{height:2px;background:linear-gradient(90deg,var(--cyan) 40%,transparent 40%);opacity:.6}.scope-card{display:grid!important;grid-template-columns:130px 1fr;align-items:center}#scope{width:100%;height:58px}.lesson{margin:28px 0 34px;display:grid;grid-template-columns:.8fr 1.4fr .8fr;gap:30px;align-items:center;padding:25px 28px;border-left:2px solid var(--cyan);background:#06141d}.lesson h2{font-size:22px;margin:0}.lesson>p{color:var(--muted);line-height:1.65}.formula{font:22px Georgia,serif;color:var(--cyan)}.formula span{display:block;color:var(--muted);font:10px ui-monospace,monospace;margin-top:6px}footer{text-align:center;color:#547180;border-top:1px solid #102b39;padding:22px;font-size:11px}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.stage-panel{border-right:0}.controls{display:grid;grid-template-columns:repeat(2,1fr);max-height:none;border-top:1px solid var(--line)}.readouts{grid-template-columns:repeat(2,1fr)}.lesson{grid-template-columns:1fr}.intro{align-items:start;flex-direction:column}}@media(max-width:620px){nav{gap:12px}.sitebar{padding:0 12px}.brand{font-size:11px}nav a{font-size:10px}.controls{grid-template-columns:1fr}.readouts{grid-template-columns:1fr}.readouts article{border-right:0;border-bottom:1px solid var(--line)}.intro{padding-top:22px}.status{width:100%;justify-content:space-between}.legend{display:none}.stage-toolbar{overflow:auto}.transport .right{margin-left:0}.scope-card{grid-template-columns:100px 1fr!important}}
