:root{color-scheme:dark;--mint:#8ee4c2;--gold:#edc587;--muted:#99b3b0;--line:#344f4d;background:#091112;color:#e1ebe7;font:14px/1.5 'Segoe UI',sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#26413c77,transparent 55%)}[hidden]{display:none!important}header,main{max-width:1560px;margin:auto;padding:20px 30px}header{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em}a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}.intro{max-width:950px;margin-bottom:25px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.15em;text-transform:uppercase}h1{font:clamp(30px,4vw,48px) Georgia,serif;margin:12px 0}h2{font-size:21px;margin:6px 0 18px}p{line-height:1.7;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:20px;align-items:start}.viewer{position:sticky;top:15px;border:1px solid #52776b;border-radius:14px;overflow:hidden;background:#101d1e;min-width:0;box-shadow:0 0 55px #5bd7a412}.toolbar{padding:11px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line)}button,select{font:inherit;font-size:12px;background:#162a2b;border:1px solid #54766c;color:#d2e9df;border-radius:7px;padding:8px 10px}button{cursor:pointer}button:hover,button[aria-pressed=true]{border-color:var(--mint);background:#2a493f;color:#f1fff7}button:disabled{opacity:.4;cursor:wait}input{accent-color:var(--mint)}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#stage{position:relative;height:650px;max-height:67vh;min-height:350px;background:#060d11;isolation:isolate;contain:paint}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#reference{z-index:0;pointer-events:none}#riveUnderlay{z-index:1;pointer-events:none}#cv{z-index:2;cursor:grab;touch-action:none}#cv:active{cursor:grabbing}#riveOverlay{z-index:3;pointer-events:none}.badge,.hint{position:absolute;pointer-events:none;z-index:4;font-size:11px;color:#a8c6bc;background:#071514bb;border-radius:6px;padding:7px 10px}.badge{top:14px;left:14px}.hint{bottom:12px;right:14px}#err,#loading{position:absolute;z-index:5;inset:0;display:grid;place-content:center;padding:40px;text-align:center;background:#101b1bf5;color:var(--mint)}#err{color:#ffaa9b}#cam{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.receipt{padding:10px 14px;display:flex;flex-direction:column;gap:3px;font-size:10px;color:#8daaa0}.controls{padding:20px;border:1px solid #54766c;border-radius:14px;background:linear-gradient(135deg,#19302cbb,#121d25bb)}.controls h2{font:25px Georgia,serif}fieldset{padding:16px 0;margin:16px 0 0;border:0;border-top:1px solid var(--line)}legend{color:var(--gold);font-size:12px;font-weight:600;padding:0 5px 0 0}label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;font-size:12px;color:#bcd1c9}select{max-width:66%;min-width:0;font-size:11px}input[type=range]{min-width:30px;flex:1;max-width:125px}.check{justify-content:flex-start}.check span{margin-left:auto;color:#718f88;font-size:10px}output{width:5ch;text-align:right;font-size:11px;font-variant-numeric:tabular-nums}.fine{font-size:11px;line-height:1.6;margin:12px 0 4px}.playline{display:flex;align-items:center;gap:12px}.playline span{color:#83a098;font-size:10px}.exports{display:flex;gap:8px}.explain{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;padding:38px 0}.explain p{font-size:13px}.explain h2{font:25px Georgia,serif}.explain a{font-size:13px}@media(max-width:1000px){.workbench{grid-template-columns:1fr}.viewer{position:relative;top:auto}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.controls>h2,.controls>.exports,.controls>#settings-status{grid-column:1/-1}.controls>label,.controls>p{grid-column:1/-1}#stage{height:65vw;max-height:680px}.explain{gap:20px}.receipt{font-size:11px}}@media(max-width:580px){header,main{padding:16px}header span{display:none}.controls,.explain{display:block}.controls fieldset{margin-top:22px}.explain article{margin-bottom:30px}#stage{min-height:320px}.toolbar button{padding:7px;font-size:11px}.badge{max-width:calc(100% - 28px)}#cam{width:100%;margin-left:0}}

/* One visual instrument: the transport bar remains beside its viewport. */
.workbench{padding:14px;border:1px solid #54766c;border-radius:18px;background:#11222180;gap:14px;align-items:start}
.viewer{top:10px}.controls{border-color:#344f4d;background:#16272580}
.transport{display:grid;grid-template-columns:auto minmax(130px,1fr) minmax(130px,1fr);gap:10px 20px;align-items:center;padding:10px 14px;background:#18302bf5;border-bottom:1px solid #54766c}
.transport .playline{gap:12px;flex-wrap:wrap}.transport .playline>span{flex-basis:100%;font-size:10px}.transport label{margin:0}.transport input[type=range]{max-width:none}.transport output{min-width:5ch}.transport #pp{min-width:88px;border-color:#9c885b;color:var(--gold)}
@media(max-width:1200px){.transport{grid-template-columns:1fr 1fr}.transport .playline{grid-column:1/-1}.transport .playline>span{flex-basis:auto;margin-left:auto}}
@media(max-width:1000px){.workbench{display:block}.viewer{position:relative;top:auto}.controls{margin-top:14px}.transport{position:relative}.controls #kernel-controls{grid-column:1/-1}}
@media(max-width:580px){.workbench{padding:7px;border-radius:14px}.transport{padding:9px;gap:8px}.transport .playline{gap:6px}.transport .playline>span{font-size:9px}.transport label{font-size:11px}.transport input[type=range]{width:45px;min-width:25px}.controls{padding:14px}}