:root{
  --bg:#111315; --panel:#1b1e21; --panel2:#23272b; --line:#2e3338;
  --ink:#e8ebee; --dim:#8b949c; --orange:#ff7a1a; --orange-dim:#7a3d10;
  --green:#48e0a1; --red:#ff4d4d; --blue:#4db8ff;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 90% at 50% 0%,#191c1f 0%,var(--bg) 60%);
  color:var(--ink);font-family:var(--mono);font-size:13px;overflow:hidden;
  -webkit-font-smoothing:antialiased;color-scheme:dark;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:14px;padding:8px 12px;background:linear-gradient(#20242a,#171a1e);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:2px;font-size:15px;color:var(--orange);text-shadow:0 0 14px rgba(255,122,26,.45)}
.brand small{color:var(--dim);letter-spacing:1px;font-weight:400;font-size:10px;display:block;text-shadow:none}
.grp{display:flex;align-items:center;gap:6px;padding:0 8px;border-left:1px solid var(--line);height:38px}
.grp:first-of-type{border-left:0}
.lab{color:var(--dim);font-size:10px;letter-spacing:1px}
.btn{border:1px solid var(--line);background:#22262b;border-radius:6px;padding:6px 10px;font-size:12px;
  transition:.12s;white-space:nowrap}
.btn:hover{background:#2b3137;border-color:#3c434a}
.btn.on{background:var(--orange);color:#1a0e02;border-color:var(--orange);box-shadow:0 0 12px rgba(255,122,26,.5)}
.btn.play.on{background:var(--green);color:#04120c;border-color:var(--green);box-shadow:0 0 14px rgba(72,224,161,.5)}
.val{min-width:34px;text-align:center;color:var(--orange);font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;background:#333a41;border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--orange);cursor:pointer;box-shadow:0 0 8px rgba(255,122,26,.6)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--orange);cursor:pointer}
select{background:#22262b;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 6px;font-family:inherit;font-size:12px}

/* ---------- main grid ---------- */
.main{flex:1 1 auto;display:flex;min-height:0}
.grid{flex:1 1 auto;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.track{display:grid;grid-template-columns:150px 1fr;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:6px;align-items:center}
.track.sel{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset,0 0 18px rgba(255,122,26,.14)}
.track.muted{opacity:.45}
.thead{display:flex;flex-direction:column;gap:4px}
.tname{display:flex;align-items:center;gap:6px}
.tnum{width:18px;height:18px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:10px;font-weight:700}
.track.sel .tnum{background:var(--orange);color:#180c02;border-color:var(--orange)}
.tsel{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--ink);min-width:56px}
.track.sel .tsel{color:var(--orange)}
.mini{display:flex;gap:4px}
.mini button{width:20px;height:18px;border-radius:4px;border:1px solid var(--line);background:#22262b;font-size:9px}
.mini button.on{background:var(--orange);color:#180c02;border-color:var(--orange)}
.mini button.m.on{background:var(--red);color:#fff;border-color:var(--red)}
.mini button.s.on{background:var(--blue);color:#04121c;border-color:var(--blue)}
.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:5px}
.step{position:relative;aspect-ratio:1/1;min-height:30px;border-radius:6px;background:#191c1f;border:1px solid #2a2f34;
  transition:background .07s,box-shadow .07s,transform .05s}
.step.beat{border-color:#3a4046}
.step.on{background:linear-gradient(#ff9a4d,#ff6a00);border-color:#ff8a33;box-shadow:0 0 12px rgba(255,122,26,.5)}
.step.on.beat-glow{box-shadow:0 0 16px rgba(255,122,26,.75)}
.step.cur{transform:scale(1.06);border-color:#fff}
.step.cur.on{background:linear-gradient(#ffd0a3,#ffa347)}
.step .trig{position:absolute;left:3px;top:3px;font-size:8px;color:#1a0e02;font-weight:700;opacity:.9}
.step .lck{position:absolute;right:3px;bottom:2px;width:6px;height:6px;border-radius:50%}
.step.haslck .lck{background:#04121c;box-shadow:0 0 0 1px #7fd0ff}
.step.hascond::after{content:"";position:absolute;left:3px;bottom:3px;width:5px;height:5px;border-radius:1px;background:#3affc0;transform:rotate(45deg)}
.track.cur .steps{filter:saturate(1.15)}

/* ---------- right inspector ---------- */
.side{flex:0 0 268px;border-left:1px solid var(--line);background:var(--panel);overflow:auto;padding:10px}
.side h3{margin:2px 0 8px;font-size:11px;letter-spacing:2px;color:var(--dim);font-weight:600}
.knob{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:8px;margin:7px 0}
.knob label{font-size:10px;letter-spacing:1px;color:var(--dim)}
.knob .kv{color:var(--orange);text-align:right;font-weight:700;font-size:11px}
.machine{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px}
.machine button{padding:7px 2px;font-size:10px;font-weight:700;letter-spacing:.5px;border-radius:6px;
  border:1px solid var(--line);background:#22262b}
.machine button.on{background:var(--orange);color:#180c02;border-color:var(--orange)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px}
.hint{color:var(--dim);font-size:10px;line-height:1.6}
.hint b{color:var(--ink)}

/* ---------- step inspector popover ---------- */
.pop{position:fixed;z-index:40;background:#12161a;border:1px solid var(--orange);border-radius:10px;padding:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);width:270px;display:none}
.pop.show{display:block}
.pop h4{margin:0 0 8px;font-size:11px;letter-spacing:2px;color:var(--orange)}
.pop .row{display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:8px;margin:6px 0;font-size:11px}
.pop .row label{color:var(--dim);letter-spacing:.5px}
.pop .btns{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
.mask{position:fixed;inset:0;z-index:30;display:none}
.mask.show{display:block}

.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:#12161a;border:1px solid var(--line);
  color:var(--ink);padding:7px 14px;border-radius:20px;font-size:11px;opacity:0;transition:.25s;pointer-events:none;z-index:60}
.toast.show{opacity:1}
.splash{position:fixed;inset:0;background:rgba(10,12,14,.92);display:grid;place-items:center;z-index:80;text-align:center}
.splash .btn{margin-top:14px;padding:12px 22px;font-size:15px}
.splash .big{font-size:26px;color:var(--orange);letter-spacing:3px;font-weight:700;text-shadow:0 0 22px rgba(255,122,26,.5)}