:root{
  --bg:#07090f; --panel:#0d1220; --line:#1f2a44; --text:#e8eef8; --muted:#8b97ad;
  --blue:#9cc7ff; --purple:#c8b6ff; --quiet:#3b4a6b; --mid:#6f86b8; --loud:#c8b6ff;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 50% -200px,#121a33 0%,var(--bg) 70%) fixed}
.wrap{max-width:1100px;margin:0 auto;padding:32px 16px 64px}
.top{margin-bottom:24px}
.kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
h1{font-size:clamp(34px,6vw,56px);margin:6px 0 4px;font-weight:700;letter-spacing:-.02em}
.sub{margin:0;color:var(--muted);font-size:17px}
.muted{color:var(--muted)}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed #33436b;padding:34px 16px;cursor:pointer;text-align:center;
  background:rgba(156,199,255,.03);transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:rgba(156,199,255,.08);border-color:var(--blue)}
.drop-main{font-size:18px;font-weight:500}
.drop-sub{font-size:13px;color:var(--muted)}
.drop.small{padding:14px 16px;flex-direction:row;gap:14px}
.drop.small .drop-main{font-size:15px}

.progress{margin:18px 0;display:flex;align-items:center;gap:14px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted)}
.bar{flex:1;height:3px;background:var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--purple));transition:width .15s}

#room{margin-top:22px}
.player{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);background:var(--panel)}
.play{width:48px;height:48px;flex:0 0 48px;border:1px solid var(--blue);background:transparent;color:var(--blue);font-size:18px;cursor:pointer}
.play:hover{background:rgba(156,199,255,.12)}
.track{flex:1;min-width:0}
.name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.time{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);margin-top:2px}
.send{border:0;padding:12px 16px;font:600 14px "Space Grotesk",sans-serif;color:#0a0e1a;cursor:pointer;
  background:linear-gradient(90deg,var(--blue),var(--purple));white-space:nowrap}
.send:hover{filter:brightness(1.08)}
.send:disabled{opacity:.5;cursor:wait}

.readouts{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:16px 0}
.card{background:var(--panel);padding:14px 14px 12px;min-width:0}
.lbl{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card b{display:block;font-size:26px;font-weight:700;margin:6px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:15px}
.meter{height:3px;background:var(--line);margin-top:8px}
.meter i{display:block;height:100%;width:0;background:var(--blue);transition:width .08s}

.panel{border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.panel-head{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.viz{position:relative;line-height:0}
.viz canvas{display:block;width:100%}
#live{height:240px}
.overview{cursor:pointer}
#overview{height:300px}
#playhead{position:absolute;inset:0;height:100%;pointer-events:none}

/* subtle grain, about 6 on a 0-40 scale */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.15;mix-blend-mode:overlay}

.ribbon{display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;overflow:hidden;min-height:44px;font-family:"JetBrains Mono",monospace;font-size:14px}
.ribbon span{padding:3px 8px;border:1px solid var(--line);color:var(--blue);flex:0 0 auto;animation:pop .25s ease-out}
.ribbon span:last-child{border-color:var(--blue);background:rgba(156,199,255,.1)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.legend{display:flex;gap:18px;padding:10px 14px;font-size:12px;color:var(--muted)}
.sw{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.sw.q{background:var(--quiet)}.sw.m{background:var(--mid)}.sw.l{background:var(--loud)}
.note-small{font-size:13px;color:var(--blue);margin:4px 0 0}

@media (max-width:760px){
  .readouts{grid-template-columns:repeat(3,1fr)}
  .card b{font-size:21px}
  .card:nth-child(5){grid-column:span 2}
  .player{flex-wrap:wrap}
  .send{width:100%}
  #live{height:200px}
  #overview{height:260px}
}

/* ---- stage 2: sources, capture, painting ---- */
.hook{margin:10px 0 0;font-size:15px;color:var(--purple);font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
.sources{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:12px;width:max-content;max-width:100%}
.src{background:var(--panel);color:var(--muted);border:0;padding:10px 16px;font:500 14px "Space Grotesk",sans-serif;cursor:pointer}
.src.on{color:#0a0e1a;background:var(--blue)}
.capture{border:1px dashed #33436b;padding:18px 16px;background:rgba(156,199,255,.03)}
.cap-how{margin:0 0 14px;color:var(--text);font-size:15px}
.cap-row{display:flex;align-items:center;gap:14px}
.cap-btn{border:1px solid var(--blue);background:transparent;color:var(--blue);padding:12px 22px;font:600 15px "Space Grotesk",sans-serif;cursor:pointer}
.cap-btn.rec{background:var(--purple);border-color:var(--purple);color:#0a0e1a}
.cap-time{font-family:"JetBrains Mono",monospace;color:var(--muted);font-size:14px}
.cap-viz{margin-top:14px}
#capLive{height:120px}
.cap-msg{margin:10px 0 0;font-size:13px;color:var(--muted);min-height:16px}
.art .panel-head{align-items:center}
.styles{display:flex;gap:1px;background:var(--line)}
.styles button{background:var(--panel);color:var(--muted);border:0;padding:6px 12px;font:500 12px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.styles button.on{background:var(--purple);color:#0a0e1a}
.art-wrap{background:#05070c;display:flex;justify-content:center;padding:16px}
#art{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.art-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;font-size:13px}
.save{border:1px solid var(--purple);background:transparent;color:var(--purple);padding:9px 14px;font:600 13px "Space Grotesk",sans-serif;cursor:pointer;white-space:nowrap}
.save:hover{background:rgba(200,182,255,.12)}
@media (max-width:760px){
  .sources{width:100%}.src{flex:1;padding:10px 6px}
  .art-foot{flex-direction:column;align-items:stretch}.save{width:100%}
  .art .panel-head{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---- stage 3: painting at the end ---- */
.toart{border:1px solid var(--purple);background:transparent;color:var(--purple);padding:11px 14px;font:600 14px "Space Grotesk",sans-serif;cursor:pointer;white-space:nowrap}
.toart:hover{background:rgba(200,182,255,.12)}
.art{margin-top:8px}
.art.reveal .art-wrap canvas{animation:paint 2.4s ease-out both}
@keyframes paint{0%{opacity:0;filter:blur(18px) saturate(0);transform:scale(.97)}60%{opacity:1;filter:blur(2px) saturate(.8)}100%{opacity:1;filter:none;transform:none}}
@media (max-width:760px){.toart{width:100%}}

.kicker .home{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.kicker .home:hover,.kicker .home:focus-visible{border-bottom-color:currentColor}