/* Original Claude canvas scene, joined directly to the production diagram above. */
:root{
  --bg:#060c1d; --bg-2:#0a1330; --panel:#0d1838; --line:#1c2a52; --line-2:#2a3b6d;
  --fg:#e7ecff; --muted:#8e9bc4; --dim:#5d6a92;
  --cyan:#43e3ff; --violet:#a083ff; --gold:#f4c55c;
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;margin:0}
.wrap{max-width:1260px;margin:0 auto;padding-inline:0;padding-block:0 24px}
.ctl{display:flex;gap:8px;margin-left:auto}
.btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:9px 14px;cursor:pointer}
.btn:hover,.ph:hover{border-color:var(--cyan)}
.btn:focus-visible,.ph:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn.primary{border-color:rgba(67,227,255,.6);background:rgba(67,227,255,.12)}
.stage{border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:#050a19;overflow-x:auto;overflow-y:hidden}
.stage canvas{display:block}
.below-stage{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;margin:9px 18px 0}
.hint{display:none;font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:6px}
@media (max-width:760px){.hint{display:block}}
.rm{font-family:var(--f-mono);font-size:12px;color:var(--gold);margin:0}
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:10px 18px 0}
@media (max-width:760px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ph{font:inherit;cursor:pointer;text-align:left;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;display:grid;gap:2px;min-width:0;position:relative;overflow:hidden}
.ph b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim);font-weight:600}
.ph span{font-size:13px;font-weight:600;color:var(--fg)}
.ph i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan)}
.ph.on{border-color:rgba(67,227,255,.7)} .ph.on b{color:var(--cyan)}
.ph[data-k="1"].on{border-color:rgba(160,131,255,.8)} .ph[data-k="1"].on b{color:var(--violet)} .ph[data-k="1"] i{background:var(--violet)}
.ph[data-k="3"].on,.ph[data-k="4"].on{border-color:rgba(244,197,92,.8)} .ph[data-k="3"].on b,.ph[data-k="4"].on b{color:var(--gold)} .ph[data-k="3"] i,.ph[data-k="4"] i{background:var(--gold)}
.now{margin:12px 18px 0;font-size:15px;color:#cdd5f3;min-height:1.5em}
.now b{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);margin-right:8px}
footer{margin:18px 18px 0;font-family:var(--f-mono);font-size:11px;color:var(--dim);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.recording .wrap{padding-bottom:0}
.recording .below-stage,.recording .rail,.recording .now,.recording footer{display:none}
.recording body{overflow:hidden}