/* `hidden` has to win. Plenty of rules here set a display on elements that
   are sometimes hidden — `label{display:block}` alone was enough to leave a
   hidden row on screen — and the UA's [hidden] rule loses every time. */
[hidden]{display:none !important}

/* ---------- palettes ----------
   Every colour the app and its canvases use comes from here, so a palette is
   a self-contained block and the drawing code never names a colour. */
:root,
:root[data-palette="slate"]{
  --bg:#0b0e13; --panel:#121722; --panel-2:#161d2a; --line:#222c3d;
  --ink:#dfe6f2; --dim:#8492aa; --faint:#5b6779;
  --accent:#7fd1c1; --accent-2:#9b8cf0; --hot:#e2685f; --gold:#e8c46a;
  --wave:#7fd1c1; --wave-off:#46536a; --head:#e8c46a;
  --dial-bg:#0a0d13; --on-bg:#17202e; --on-line:#3a5c62;
  --radius:10px;
}
:root[data-palette="slate"]{ --on-line:#3a5c62; }

/* Warm and low — lamplight rather than moonlight. */
:root[data-palette="ember"]{
  --bg:#120d0a; --panel:#1c1512; --panel-2:#241b16; --line:#3a2a21;
  --ink:#f4e6d8; --dim:#b08f78; --faint:#7a5f4e;
  --accent:#ffa94d; --accent-2:#e0637a; --hot:#ff5d46; --gold:#ffd48a;
  --wave:#ffa94d; --wave-off:#6b5243; --head:#ffd48a;
  --dial-bg:#150f0c; --on-bg:#2c1f17; --on-line:#8a5a2e;
  --radius:10px;
}

/* Loud. For a room with a projector in it. */
:root[data-palette="neon"]{
  --bg:#06060b; --panel:#0e0e1a; --panel-2:#151528; --line:#282846;
  --ink:#f2f2ff; --dim:#9a9ad0; --faint:#61618f;
  --accent:#2bf5c8; --accent-2:#c65cff; --hot:#ff3d7f; --gold:#ffe14d;
  --wave:#2bf5c8; --wave-off:#3d3d6b; --head:#ffe14d;
  --dial-bg:#07070f; --on-bg:#16203a; --on-line:#2bf5c8;
  --radius:10px;
}

/* Deep water. Cool, high contrast, easy on a long session. */
:root[data-palette="tide"]{
  --bg:#07121a; --panel:#0e1d29; --panel-2:#132837; --line:#1e3d52;
  --ink:#e3f2fb; --dim:#7ea8c4; --faint:#4e7a94;
  --accent:#4cc9f0; --accent-2:#8de969; --hot:#f07167; --gold:#ffd166;
  --wave:#4cc9f0; --wave-off:#3b6a85; --head:#ffd166;
  --dial-bg:#061019; --on-bg:#12303f; --on-line:#2f7f9e;
  --radius:10px;
}

/* Daylight, for working on it rather than performing with it. */
:root[data-palette="paper"]{
  --bg:#eae6df; --panel:#f6f3ee; --panel-2:#fffdf9; --line:#cfc7bb;
  --ink:#1d1a16; --dim:#5f584e; --faint:#8d8478;
  --accent:#0f7d6b; --accent-2:#6a4bc4; --hot:#c4402f; --gold:#a87a12;
  --wave:#0f7d6b; --wave-off:#b3aa9c; --head:#c4402f;
  --dial-bg:#ddd7cd; --on-bg:#e6f0ea; --on-line:#0f7d6b;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.45 ui-sans-serif,-apple-system,"SF Pro Text",Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-y:auto;
}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 40%,#141b28 0%,#0b0e13 100%)}
.gate.hidden{display:none}
.gate-card{text-align:center;max-width:460px;padding:24px}
.gate-card h1{margin:0 0 6px;font-size:34px;letter-spacing:.06em;font-weight:500}
.gate-card .sub{color:var(--dim);margin:0 0 22px}
.begin{background:var(--accent);color:#06231f;border:0;border-radius:999px;
  padding:11px 34px;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.03em}
.begin:hover{filter:brightness(1.08)}
.hint{color:var(--faint);font-size:11px;margin-top:18px}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:14px;padding:9px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
.brand{letter-spacing:.05em}
.brand b{font-weight:600}
.tag{color:var(--faint);margin-left:7px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.transport{display:flex;align-items:center;gap:9px}
.rec{display:flex;align-items:center;gap:7px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer;font-size:12px}
.rec .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.rec.on{border-color:var(--hot);color:#ffd9d5}
.rec.on .dot{background:var(--hot);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.time{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px;min-width:38px}
.stop{background:transparent;border:1px solid #4a2b2b;color:#c98d87;border-radius:999px;
  padding:5px 13px;font-size:12px;cursor:pointer}
.stop:hover{border-color:var(--hot);color:#ffd9d5}
.stop.armed{background:var(--hot);border-color:var(--hot);color:#2a0b08}
.meters{display:flex;align-items:center;gap:10px;margin-left:auto}
.meter{width:120px;height:5px;background:#0a0d13;border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),#e8c46a 78%,var(--hot));transition:width .07s linear}
.stat{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;min-width:66px}
.master{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11px}
.master input{width:96px}
.mini{background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  border-radius:7px;padding:4px 10px;font-size:11px;cursor:pointer}
.mini:hover{color:var(--ink);border-color:#31405a}

/* ---------- layout ---------- */
/* No fixed cap — on a wide monitor the grids below simply fit more per row
   rather than leaving half the screen empty. */
.app{padding:16px;max-width:3200px;margin:0 auto}

/* ---------- pads ---------- */
.pads{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
/* Past this width all eight pads fit on one row, which is how you want them
   when you are performing and reading the whole set at a glance. */
@media (min-width:2200px){.pads{grid-template-columns:repeat(8,1fr)}}
.pad{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:crosshair;user-select:none;opacity:.62;
  transition:border-color .18s,background .25s,opacity .25s,box-shadow .25s}
.pad.sel{border-color:var(--accent-2)}
/* A live pad should be unmistakable from across a room. */
.pad.on{background:var(--on-bg);border-color:var(--on-line);opacity:1;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.pad.drop{border-color:var(--accent);background:#16241f}
.pad-head{display:flex;align-items:center;gap:8px;padding:clamp(7px,0.9vh,12px) clamp(10px,0.9vw,18px);
  border-bottom:1px solid var(--line)}
.pad-num{width:clamp(17px,1.5vw,26px);height:clamp(17px,1.5vw,26px);border-radius:5px;
  display:grid;place-items:center;background:var(--dial-bg);color:var(--faint);
  font-size:clamp(10px,0.85vw,14px);font-weight:600}
.pad.on .pad-num{background:var(--accent);color:#06231f}
.pad-name{flex:1;color:var(--dim);font-size:clamp(12px,1vw,17px);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pad.on .pad-name{color:var(--ink)}
.pad-cyc{color:var(--faint);font-size:clamp(10px,0.8vw,14px);font-variant-numeric:tabular-nums}
.pad canvas{display:block;width:100%;height:clamp(104px,13vh,190px)}

/* ---------- workspace ----------
   Scenes down the left, the working panels in the middle, the orbits on the
   right. Three unequal columns rather than another full-width band. */
.workspace{display:grid;grid-template-columns:minmax(190px,25%) 1fr 1fr;gap:12px;
  margin-top:14px;align-items:stretch}
.leftcol{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:1250px){.workspace{grid-template-columns:minmax(170px,26%) 1fr}
  .orbit-strip{grid-column:1 / -1}}
@media (max-width:820px){
  .workspace{grid-template-columns:1fr}
  /* The controls for the sound belong directly under the sound. Scenes and
     the shared effects can wait below them. */
  .tabs-col{order:1}
  .leftcol{order:2}
}

.scenes-strip,.orbit-strip{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 13px}
/* Square, and only as tall as that makes it — a tall column should not drag
   the system down to the bottom of the fold. */
.orbit-strip{display:flex;flex-direction:column;align-self:start}
#phase{display:block;width:100%;aspect-ratio:1;height:auto}
.tabs-col{display:flex;flex-direction:column}

/* Scenes stack rather than sitting in a row. */
.scenes-strip .slots{grid-template-columns:1fr;gap:8px}
.morph-inline{display:flex;align-items:center;gap:8px;color:var(--dim);
  margin-top:12px;font-size:11px}
.morph-inline input[type=range]{flex:1;margin:0}
.morph-inline .v{float:none;min-width:32px;text-align:right}

/* ---------- tabs ---------- */
.tabs-col{min-width:0}
.tabs{display:flex;gap:5px;margin:0 0 10px;flex-wrap:wrap}
.tab{background:transparent;border:1px solid transparent;color:var(--faint);
  border-radius:7px;padding:5px 13px;font-size:11px;cursor:pointer;letter-spacing:.05em;
  text-transform:uppercase}
.tab:hover{color:var(--dim)}
.tab.on{background:var(--panel);border-color:var(--line);color:var(--ink)}

/* ---------- panels ---------- */
.sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:11px;
  align-items:start}
.sheet.hidden{display:none}
.sheet .wide{grid-column:span 2}
@media (max-width:760px){.sheet{grid-template-columns:1fr}.sheet .wide{grid-column:span 1}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.panel-head{display:flex;align-items:baseline;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.panel-head .note{color:var(--faint);font-size:10px}
.panel-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- param grid ---------- */
/* Column count is user-set, so the on-screen layout can be made to match
   however the physical knobs are arranged. */
.params{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:9px}
@media (max-width:520px){.params{grid-template-columns:repeat(2,1fr)}}

/* Each cell is a dial. The ring is the value, the number sits in the middle,
   and the whole thing is still drag-to-change like a knob. */
.par{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;cursor:ns-resize;user-select:none;position:relative;
  display:flex;align-items:center;gap:10px;
  transition:border-color .15s}
.par .txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.par:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.par .k{font-size:clamp(9px,0.62vw,12px);text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);display:flex;gap:5px;align-items:baseline;white-space:nowrap}
.par .kn{font-style:normal;font-size:8px;color:var(--accent);opacity:.8}
.par .dial{position:relative;width:var(--dial,62px);height:var(--dial,62px);
  border-radius:50%;
  background:conic-gradient(from 215deg,
    var(--accent) calc(var(--fill,0) * 290deg), var(--dial-bg) 0 290deg,
    transparent 290deg);
  -webkit-mask:radial-gradient(circle, transparent 0 61%, #000 63%);
  mask:radial-gradient(circle, transparent 0 61%, #000 63%)}
.par .dialwrap{position:relative;flex:0 0 auto}
.par .n{font-size:clamp(14px,1.15vw,22px);font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.05}
.par .n span{font-size:clamp(8px,0.6vw,11px);color:var(--faint);margin-left:2px}
.par.synced .k{color:var(--accent)}
.par.catching{border-color:var(--hot)}
.par .knobmark{position:absolute;left:50%;top:6px;width:2px;height:9px;
  background:var(--hot);opacity:0;transform-origin:50% calc(var(--dial,54px) * 0.5 + 8px);
  transform:rotate(calc(-145deg + var(--knob,0) * 290deg));transition:opacity .15s}
.par.catching .knobmark{opacity:.95}
.cols{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:10px}
.cols select{width:auto;padding:2px 5px;margin:0;font-size:11px}

/* ---------- forge / capture / space ---------- */
.forge,.space,.capture{display:flex;flex-direction:column;gap:9px}
label{display:block;color:var(--dim);font-size:11px}
select,input[type=range]{width:100%}
select{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:5px 7px;margin-top:3px;font-size:12px}
input[type=range]{-webkit-appearance:none;appearance:none;height:3px;background:#0a0d13;
  border-radius:3px;margin-top:7px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;
  border-radius:50%;background:var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;
  background:var(--accent);cursor:pointer}
.v{float:right;color:var(--ink);font-variant-numeric:tabular-nums;font-size:11px}
.go{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:8px;font-size:12px;cursor:pointer}
.go:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.go:disabled{opacity:.4;cursor:default}
.go.armed{border-color:var(--hot);color:#ffd9d5}
.check{display:flex;align-items:center;gap:7px}
.check em{color:var(--faint);font-style:normal}
.in-meter{height:5px;background:#0a0d13;border-radius:3px;overflow:hidden}
.in-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--hot));
  transition:width .07s linear}
.note{color:var(--faint);font-size:10px;margin:0}
.note.warn{color:#e8c46a}

/* ---------- help ---------- */
.help{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#05070ac9}
.help.hidden{display:none}
.help-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;max-width:440px}
.help-card h2{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.07em}
.help-card table{width:100%;border-collapse:collapse;font-size:12px}
.help-card td{padding:4px 0;color:var(--dim)}
.help-card td:first-child{width:130px;color:var(--ink)}
kbd{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font:11px ui-monospace,monospace}
.tip{color:var(--faint);font-size:11px;margin:14px 0 16px;line-height:1.6}
.tip b{color:var(--accent)}

/* ---------- stacked controls ---------- */
.stack{display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:7px;align-items:flex-end}
.row input[type=search]{flex:1}
.go.narrow{padding:7px 13px;white-space:nowrap}
input[type=search],input[type=password]{width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:6px 8px;margin-top:3px;font-size:12px}
input[type=search]:focus,input[type=password]:focus{outline:none;border-color:var(--accent)}
.lnk{float:right;color:var(--accent);font-size:10px;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* ---------- freesound results ---------- */
.results{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.res{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  padding:6px 8px;cursor:pointer;font-size:11px}
.res:hover{border-color:var(--accent)}
.res b{display:block;font-weight:500;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.res span{color:var(--faint);font-size:10px}

/* ---------- scenes ---------- */
.scenes-strip{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px}
.scenes-strip .strip-label{display:flex;align-items:center;gap:9px}
.morph-inline{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--dim)}
.morph-inline input[type=range]{width:150px;margin:0}
.morph-inline .v{float:none;min-width:32px;text-align:right}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}
.slot{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:9px;text-align:center;position:relative;overflow:hidden}
.slot.full{border-color:#31405a}
.slot .nm{font-size:14px;letter-spacing:.08em;color:var(--faint);position:relative;z-index:1}
.slot.full .nm{color:var(--ink)}
.slot .btns{position:relative;z-index:1}

/* The scene you last landed on, and the one you are gliding towards. */
.slot.active{border-color:var(--accent);background:#12211e}
.slot.active .nm{color:var(--accent)}
.slot.morphing{border-color:var(--accent-2)}
.slot .prog{position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(155,140,240,0.18);z-index:0}
.slot .edited{position:absolute;top:6px;right:7px;width:5px;height:5px;border-radius:50%;
  background:var(--faint);z-index:1}
.slot.active .edited{background:#e8c46a}
.slot .btns{display:flex;gap:4px;margin-top:7px}
.slot button{flex:1;background:#0a0d13;border:1px solid var(--line);color:var(--dim);
  border-radius:5px;padding:3px 0;font-size:10px;cursor:pointer}
.slot button:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.slot button:disabled{opacity:.35;cursor:default}
.morph-bar{height:3px;background:#0a0d13;border-radius:3px;overflow:hidden}
.morph-bar i{display:block;height:100%;width:0;background:var(--accent-2)}

/* ---------- midi ---------- */
.knobmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px}
.km{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 8px}
.km .k{color:var(--faint);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.km .cc{font-size:11px;font-variant-numeric:tabular-nums;color:var(--dim)}
.km.mapped .cc{color:var(--accent)}

/* ---------- midi monitor ---------- */
.monitor{display:flex;align-items:center;gap:9px;background:#0a0d13;
  border:1px solid var(--line);border-radius:7px;padding:6px 9px}
.mon-label{color:var(--faint);font-size:9px;text-transform:uppercase;letter-spacing:.1em}
#mon-last{flex:1;font:11px ui-monospace,monospace;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mon-last.live{color:var(--accent)}
.mon-count{font:10px ui-monospace,monospace;color:var(--faint);font-variant-numeric:tabular-nums}

.knobmode{margin-top:2px}
.knobmode select{width:auto}

/* A knob that is waiting to pick up its value shows where it currently sits,
   so an inert knob reads as "not caught yet" rather than "broken". */
.par .knobmark{position:absolute;top:0;bottom:0;width:2px;left:var(--knob,0%);
  background:var(--hot);opacity:0;z-index:3;transition:opacity .15s}
.par.catching .knobmark{opacity:.9}
.par.catching{border-color:var(--hot)}

/* ---------- ui scale ---------- */
/* One knob for overall size. Useful on a big monitor read from across the
   room, which is the position you are in while actually performing.
   
   It goes on the content, never on <body>: a zoom declaration makes its
   element the containing block for position:fixed descendants, so zooming the
   body sizes the gate, help and tour overlays to the document rather than to
   the screen — which on a phone puts them off the edge entirely. */
.bar,.app{zoom:var(--ui-scale,1)}
.size{margin-left:4px}

/* ---------- world clock ---------- */
/* What the world is doing, so a set can be played to the light. */
.wclock{display:flex;align-items:center;gap:7px;font:11px ui-monospace,monospace;
  color:var(--dim);background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;white-space:nowrap}
.wclock b{color:var(--ink);font-weight:400;text-transform:capitalize}
.wclock i{font-style:normal;color:var(--faint)}
.wclock.soon i{color:#e8c46a}
.wclock.imminent i{color:var(--hot)}

/* ---------- transport ---------- */
.clock{gap:8px}
.clockbtn{background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  border-radius:999px;padding:5px 13px;font-size:12px;cursor:pointer}
.clockbtn.on{border-color:var(--accent);color:var(--accent)}
.beats{display:flex;gap:3px;align-items:center;min-width:56px}
.beats i{width:6px;height:6px;border-radius:50%;background:#0a0d13;
  border:1px solid var(--line);display:block}
.beats i.on{background:var(--dim);border-color:var(--dim)}
.beats i.down.on{background:var(--accent);border-color:var(--accent)}
.tnum{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:10px}
.tnum input{width:46px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink);border-radius:6px;padding:3px 5px;font:11px ui-monospace,monospace}
.mini.on{border-color:var(--accent);color:var(--accent)}
.par.synced .k{color:var(--accent)}

/* ---------- swell macros ---------- */
#macromap{display:flex;flex-direction:column;gap:5px}
.macro{display:grid;grid-template-columns:52px 1fr 76px 70px;gap:6px;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
.macro.mapped .mk{color:var(--accent)}
.macro.firing{border-color:var(--accent)}
.macro .mk{font:10px ui-monospace,monospace;color:var(--faint)}
.macro select{margin:0;padding:3px 5px;font-size:11px}
.macro input[type=range]{margin:0}
.macro .amt{font:10px ui-monospace,monospace;color:var(--dim);text-align:right}

/* ---------- per-track banks ---------- */
#bankmap{display:flex;flex-direction:column;gap:5px}
.bank{display:grid;grid-template-columns:1fr 96px 62px 22px;gap:6px;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
.bank .bk{font:10px ui-monospace,monospace;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bank .bk em{font-style:normal;color:var(--faint)}
.bank select{margin:0;padding:3px 5px;font-size:11px}
.bank .rm{background:none;border:0;color:var(--faint);cursor:pointer;font-size:15px;line-height:1}
.bank .rm:hover{color:var(--hot)}
.bank.hit{border-color:var(--accent)}

/* ---------- stacked side panels ---------- */
.side-col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- grouped midi assignments ---------- */
.mapgroup{margin-top:10px}
.mapgroup h4{margin:0 0 5px;font:600 9px/1 ui-sans-serif,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.mapgroup:empty{display:none}

.capbadge{font:11px ui-monospace,monospace;color:#2a0b08;background:var(--hot);
  border-radius:999px;padding:3px 10px;white-space:nowrap}

/* The keyboard belongs to one pad at a time, and you have to be able to see
   which one without looking away from what you are playing. */
.keysbadge{font:11px ui-monospace,monospace;color:var(--bg);background:var(--accent-2);
  border-radius:999px;padding:3px 10px;white-space:nowrap}

/* Which surface a mapping came from, under the note name. */
.km .dev{display:block;font-style:normal;font-size:9px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km .dev.warn{color:var(--hot)}
.note.warn{color:var(--hot)}

/* ---------- count-in ---------- */
/* Big enough to read from wherever you are standing, and over everything —
   you are looking at your hands, not at the screen. */
.countin{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;z-index:60;
  pointer-events:none;background:rgba(0,0,0,0.18)}
.countin[hidden]{display:none}
.countin b{font:700 clamp(84px,18vw,220px)/1 ui-monospace,monospace;
  color:var(--hot);text-shadow:0 0 40px rgba(0,0,0,0.6)}
.countin span{font:13px ui-monospace,monospace;color:var(--ink);
  letter-spacing:0.18em;text-transform:uppercase}

/* A little more room for the dials when there is screen to spare. */
/* The dial can grow now that the numbers live beside it. */
.par{--dial:clamp(46px,4.2vw,86px)}

/* ---------- play buttons on the pads ---------- */
/* Visible on hover with a mouse, always visible on a touch screen, where
   there is no hover to reveal anything. */
/* Always visible, not revealed on hover — it is the first thing a new
   visitor needs to find, and there is no hover on a touch screen. */
.pad-play{background:var(--dial-bg);border:1px solid var(--line);color:var(--dim);
  border-radius:6px;width:clamp(26px,2.1vw,36px);height:clamp(22px,1.8vw,30px);
  font-size:clamp(9px,0.66vw,12px);line-height:1;cursor:pointer;padding:0;
  transition:color .15s,border-color .15s,background .15s}
.pad-play:hover{color:var(--accent);border-color:var(--accent)}
.pad-play.playing{color:var(--accent);border-color:var(--on-line);
  background:color-mix(in srgb,var(--accent) 14%,var(--dial-bg))}
.pad-play.empty{color:var(--faint);opacity:.45;cursor:default}

/* ---------- touch ----------
   A drag has to belong to the page by default, or there is no way to scroll
   past an instrument that fills the screen. The pad claims the gesture only
   once it has been held (see wirePad), and on a dial only the ring itself
   takes the drag — the rest of the cell scrolls. */
.pad canvas{touch-action:pan-y}
.dial{touch-action:none}
.slot{touch-action:pan-y}
/* Held, and now sculpting rather than scrolling. */
.pad.grabbed{border-color:var(--accent)}
.pad.grabbed canvas{touch-action:none}
@media (hover:none){
  .par{padding:11px 12px}
  /* Bigger ring to aim at, since it is the only part that takes a drag. */
  .par{--dial:clamp(62px,17vw,86px)}
  .mini,.go,.slot button{min-height:34px}
  .tab{padding:9px 15px}
}

/* ---------- first-run tour ---------- */
.tour{position:fixed;inset:0;z-index:60;background:#05070ab0}
.tour.hidden{display:none}
.tour-ring{position:absolute;border:2px solid var(--accent);border-radius:12px;
  box-shadow:0 0 0 9999px #05070ab0,0 0 22px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:all .28s ease;pointer-events:none}
.tour-card{position:absolute;width:320px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:15px 16px;
  transition:top .28s ease,left .28s ease;box-shadow:0 12px 40px #0009}
.tour-card h3{margin:0 0 7px;font-size:13px;color:var(--ink);letter-spacing:.02em}
.tour-card p{margin:0;font-size:12px;line-height:1.55;color:var(--dim)}
.tour-foot{display:flex;align-items:center;gap:8px;margin-top:13px}
.tour-count{flex:1;font:10px ui-monospace,monospace;color:var(--faint)}

/* ---------- narrow screens ---------- */
@media (max-width:760px){
  .app{padding:10px}
  /* Eight full-height pads stack into a very long page on a phone. Shorter
     pads keep the whole instrument within a few flicks. */
  .pad canvas{height:92px}
  .pads{gap:8px}
  .pad-head{padding:6px 10px}
  /* The pad header carries five controls; on a phone it needs its own row. */
  .panel-actions{margin-left:0;width:100%}
  .bar{gap:9px;padding:8px 10px}
  .meters{margin-left:0}
  .meter{width:72px}
  /* Room for the things you actually touch on a phone. */
  .clock,.master,.stat{display:none}
  .gate-card{max-width:calc(100vw - 32px)}
  .tour-card{width:calc(100vw - 28px);left:14px !important}
}

/* ---------- phone layout ----------
   Placed last on purpose: the base .orbit-strip rule sets display, and a
   later rule of equal specificity is what beats it. */
@media (max-width:820px){
  /* The orbits are lovely and cost a canvas repaint every frame. On a phone
     that is battery spent on something you have to scroll to reach. */
  .orbit-strip{display:none}
  .tabs-col{order:1}
  .leftcol{order:2}
}

/* A control that the current playback mode ignores. */
.par.inert{opacity:.32}
.par.inert .dial{filter:grayscale(1)}