:root{
  --bg:#0a0b10;
  --bg2:#12141c;
  --fg:#dfe3ee;
  --dim:#7b839b;
  --line:#22263a;
  --accent:#5ef0ff;
  --hot:#ff3d6e;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(1200px 600px at 50% -220px,#1b2033 0%,transparent 70%),
    var(--bg);
  color:var(--fg);font-family:var(--mono);font-size:13px;
  display:flex;flex-direction:column;overflow:hidden;
}
.sr{position:absolute;left:-9999px}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:10px 14px;background:linear-gradient(#151824,#0e1017);
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.brand{display:flex;align-items:baseline;gap:8px;letter-spacing:.14em}
.brand .ver{color:var(--dim);font-size:10px}
.group{display:flex;align-items:center;gap:7px}
.group.grow{margin-left:auto}
label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
input[type=range]{width:96px;accent-color:var(--accent);height:18px}
select,input[type=number]{
  background:var(--bg2);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:5px 6px;font-family:var(--mono);font-size:12px;
}
output{min-width:3ch;color:var(--accent)}
.chk{display:flex;align-items:center;gap:5px;accent-color:var(--accent)}
.btn{
  background:#1b1f2e;color:var(--fg);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;font-family:var(--mono);font-size:12px;cursor:pointer;
  transition:.12s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.big{font-size:15px;padding:8px 14px;line-height:1}
.btn.accent{border-color:#2f6d76;color:var(--accent)}
.btn.on{background:#12333a;border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 1px #2b5a62 inset,0 0 14px #5ef0ff33}
#play.playing{background:#123a24;border-color:#4dff9e;color:#4dff9e}

/* ---------- lane grid ---------- */
.lanes{
  flex:1 1 auto;overflow:auto;padding:14px;
  display:grid;gap:14px;align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.lane{
  background:linear-gradient(#12151f,#0d0f16);border:1px solid var(--line);
  border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;
  min-width:240px;
}
.lane.muted{opacity:.45}
.lhead{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.name{font-size:11px;letter-spacing:.14em;color:var(--fg);flex:1 1 auto}
.mini{
  background:#161a26;border:1px solid var(--line);color:var(--dim);border-radius:5px;
  font-family:var(--mono);font-size:11px;padding:2px 6px;cursor:pointer;
}
.mini:hover{color:var(--accent);border-color:var(--accent)}
.mini.on{color:var(--hot);border-color:var(--hot)}
.mini.spin.on{color:#4dff9e;border-color:#4dff9e}
canvas.pad{
  display:block;width:100%;aspect-ratio:1;border-radius:10px;
  background:#080a0f;cursor:crosshair;touch-action:none;
}
.lfoot{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:10px}
.lfoot input[type=range]{width:100%;flex:1}
.count{color:#4b5270}

footer.hint{
  flex:0 0 auto;display:flex;justify-content:space-between;gap:20px;
  padding:7px 14px;border-top:1px solid var(--line);color:var(--dim);font-size:11px;background:#0b0d13;
}
footer.hint b{color:var(--accent);font-weight:400}
footer.hint .right{color:#4b5270}

/* ---------- boot overlay ---------- */
.boot{
  position:fixed;inset:0;background:#05060aee;display:grid;place-items:center;z-index:9;
  backdrop-filter:blur(3px);

  overflow:auto;}
.boot.hidden{display:none}
.bootCard{max-width:420px;text-align:center;color:var(--dim);padding:24px}
.bootCard h1{color:var(--accent);letter-spacing:.24em;font-size:20px;margin:0 0 10px}
.bootCard ul{list-style:none;padding:0;text-align:left;font-size:12px;line-height:1.9;margin:14px 0 20px}
.bootCard ul li:before{content:"○ ";color:var(--accent)}
.bootCard .btn{font-size:14px}

@media (max-width:760px){
  body{overflow:auto}
  .lanes{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  footer.hint{flex-direction:column;gap:4px}
}