/* Грувбокс /music (спека 2026-10-02-music-sequencer-design): один прибор в
   палитре OS — stone-корпус, бумажные клавиши и ручки, коралловые светодиоды,
   тёмно-синий ЖК с шалфейной линией, ноты в цветах направлений.

   Перенос стилей макета v18 (docs/superpowers/specs/mockups/music/v18.html,
   строки 17–27 и 54–293) без изменений по виду. Отличия:
   - токены прибора живут на .music-page, токены панели — из tokens.css (те же значения);
   - классы, совпавшие со стилями панели, с приставкой m-: m-card, m-empty, m-btn,
     m-steps, m-grid, m-cell, m-note, m-hint, m-toast;
   - нет сайдбара, шапки и переключателя состояний макета, нет .hw#keys (режим KEYS снят). */
.music-page {
  /* device: stone hardware */
  --face-1:#F7F5F1; --face-2:#E9E6E0; --edge:#CFCAC2; --edge-dark:#B9B3AA; --well:#E3E0DA;
  --key-1:#FFFFFF; --key-2:#EFECE7; --key-edge:#C9C4BB;
  --led:#EE6040; --led-off:#E0D6D0;
  --lcd-bg:#15245A; --lcd-fg:#CAD3B7; --lcd-dim:#5A6A9E; --lcd-grid:#22336E;
  /* channels: direction palette */
  --ch-drums:#57534E; --ch-bass:#15245A; --ch-lead:#EE6040; --ch-notes:#44599E;
  --cell:18px;
  color-scheme: light;
}
.music-page [hidden], .m-toast[hidden] { display:none !important; }
/* :where — специфичность как у голого button макета: классы кнопок (.hw, .tabbtn, .sw …) задают свой шрифт */
:where(.music-page) button { font:inherit; color:inherit; cursor:pointer; }
.music-page button:focus-visible, .music-page input:focus-visible, .music-page .knob:focus-visible, .music-page .sw:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.m-card { background:var(--paper-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.label { font:500 10.5px var(--font-sans); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-label); }
.tracks { padding:12px; display:flex; flex-direction:column; gap:10px; }
.tracks.pop { position:absolute; z-index:40; top:62px; left:20px; width:300px; max-height:420px; overflow:auto; box-shadow:0 16px 48px rgba(28,25,23,.18); border-color:var(--border-strong); }
.empty-card { max-width:420px; }
/* cartridge: current track + opens the track list */
.dev-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cart { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--key-edge); border-radius:8px; padding:5px 10px 5px 6px;
  background:linear-gradient(180deg, var(--key-1), var(--key-2)); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge-dark), 0 4px 6px rgba(28,25,23,.06); min-width:0; max-width:100%; }
.cart.open { transform:translateY(2px); box-shadow: inset 0 1px 2px rgba(87,83,78,.18), 0 1px 0 var(--edge-dark); }
.cart .lcd-line { font-size:14px; padding:5px 10px; min-width:200px; text-align:left; overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 6px rgba(202,211,183,.45); }
.cart .caret { font:600 11px var(--font-mono); color:var(--fg-muted); }
.cart .n { font:600 9.5px var(--font-mono); letter-spacing:.12em; color:var(--fg-label); }
.dev-head .pls { display:flex; gap:6px; }
.tracks-head { display:flex; align-items:center; justify-content:space-between; }
.track-list { display:flex; flex-direction:column; gap:2px; }
.track { text-align:left; border:0; background:none; padding:9px 10px; border-radius:var(--radius); display:flex; flex-direction:column; gap:5px; }
.track:hover { background:var(--paper-mute); }
.track.sel { background:var(--ink-soft); }
.track .t { font-weight:500; }
.track .m { display:flex; gap:5px; flex-wrap:wrap; align-items:center; font:12px var(--font-mono); color:var(--fg-muted); }
.pl { font:500 11px var(--font-sans); padding:1px 8px; border-radius:var(--radius-pill); }
.pl.party { background:var(--ink-soft); color:var(--ink-hover); }
.pl.amb { background:var(--accent-bg); color:var(--accent); }
.m-empty { padding:22px 10px; text-align:center; color:var(--fg-muted); font-size:13px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.m-btn { border:1px solid var(--border-strong); background:var(--paper-card); border-radius:var(--radius); padding:5px 11px; font-size:13px; }
.m-btn.primary { background:var(--ink); border-color:var(--ink); color:var(--fg-on-ink); }
.m-btn.primary:hover { background:var(--ink-hover); }
.m-btn.sm { padding:3px 9px; font-size:12px; }

/* ── the device ───────────────────────────────────────────── */
.dev { position:relative; border-radius:14px; color:var(--fg); min-width:0;
  background:linear-gradient(180deg, var(--face-1), var(--face-2));
  border:1px solid var(--edge);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(120,113,108,.18), 0 1px 0 var(--edge-dark), 0 8px 20px rgba(28,25,23,.10);
  padding:18px 20px 28px; display:flex; flex-direction:column; gap:14px; }
.screw { position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #fff, #B9B3AA 75%); box-shadow:0 0 0 1px var(--edge); }
.screw::after { content:""; position:absolute; left:1px; right:1px; top:4px; height:1px; background:#8F877D; transform:rotate(35deg); }
.screw.tl { left:9px; top:9px; } .screw.tr { right:9px; top:9px; } .screw.bl { left:9px; bottom:9px; } .screw.br { right:9px; bottom:9px; }
.model { position:absolute; right:28px; bottom:8px; font:600 9px var(--font-mono); letter-spacing:.24em; color:var(--fg-faint); }
.model b { color:var(--ink); font-weight:600; }
.engr { font:600 9.5px var(--font-mono); letter-spacing:.14em; color:var(--fg-label); text-transform:uppercase; }
.well { background:var(--well); border-radius:9px; box-shadow: inset 0 1px 3px rgba(87,83,78,.28), 0 1px 0 #fff; }

/* sticky head: cartridge, transport, channels, pattern strip, bars stay in view while the grid scrolls the page */
.dev-sticky { position:sticky; top:0; z-index:10; display:flex; flex-direction:column; gap:14px;
  margin:-18px -20px 0; padding:18px 20px 12px; border-radius:14px 14px 0 0;
  background:linear-gradient(180deg, var(--face-1), color-mix(in srgb, var(--face-1) 55%, var(--face-2))); }
.dev-sticky::after { content:""; position:absolute; left:0; right:0; top:100%; height:10px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(28,25,23,.10), transparent); transition:opacity .15s; }
.dev-sticky.stuck { border-radius:0; box-shadow:0 1px 0 var(--edge); }
.dev-sticky.stuck::after { opacity:1; }
.top { display:grid; grid-template-columns:auto auto minmax(180px,1fr); gap:20px; align-items:center; }
.transport { display:flex; gap:8px; }
.hw { min-width:46px; height:38px; padding:0 10px; border-radius:6px; border:1px solid var(--key-edge); color:var(--fg-soft);
  background:linear-gradient(180deg, var(--key-1), var(--key-2)); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge-dark), 0 4px 6px rgba(28,25,23,.08);
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:600 10px var(--font-mono); letter-spacing:.1em; }
.hw:active, .hw.on { transform:translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge-dark); color:var(--fg); }
.hw .lamp { width:6px; height:6px; border-radius:50%; background:var(--led-off); box-shadow:inset 0 1px 1px rgba(0,0,0,.15); }
.hw.on .lamp { background:var(--led); box-shadow:0 0 7px var(--led); }
@keyframes recblink { 50% { opacity:.35; } }
.hw.rec.on .lamp { background:var(--err); box-shadow:0 0 8px #D0361B; animation:recblink 1s steps(1) infinite; }
.hw.rec.on { color:var(--err); }
.key.tap { cursor:pointer; }
.kb { font:600 9px var(--font-mono); min-width:15px; height:15px; padding:0 3px; border-radius:3px; border:1px solid var(--key-edge); background:#fff; color:var(--fg-soft);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 0 var(--edge-dark); text-transform:uppercase; margin-left:auto; margin-right:6px; }
.key.drum .kb { margin-left:0; margin-right:0; }
.key.tap:hover { color:var(--ink); }
.key.hitflash { background:var(--ink-soft) !important; color:var(--ink) !important; }
.hw.red { background:linear-gradient(180deg, #F0755A, var(--ink)); border-color:var(--ink-hover); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #A8341A; }
.hw.red:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #A8341A; }
.hw.sm { height:28px; min-width:0; font-size:9.5px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--edge-dark); }
.hw.sm.red { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #A8341A; }
.knobs { display:flex; gap:18px; align-items:flex-start; }
.kn { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:50px; }
.kn .val { font:500 10.5px var(--font-mono); font-variant-numeric:tabular-nums; color:var(--fg-soft); }
.knob { width:40px; height:40px; border-radius:50%; position:relative; cursor:ns-resize; touch-action:none;
  background:radial-gradient(circle at 38% 30%, #fff, #E4E0D9 72%);
  box-shadow: 0 3px 5px rgba(28,25,23,.18), 0 1px 0 var(--edge-dark), inset 0 -2px 2px rgba(87,83,78,.12), 0 0 0 1px var(--key-edge); }
.knob::after { content:""; position:absolute; left:50%; top:4px; width:2px; height:12px; margin-left:-1px; border-radius:1px; background:var(--fg); transform-origin:50% 16px; transform:rotate(var(--a, 0deg)); }
.knob .ring { position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 225deg, var(--kc, var(--led)) 0 var(--p, 0deg), var(--edge) var(--p, 0deg) 270deg, transparent 270deg);
  -webkit-mask:radial-gradient(circle, transparent 25px, #000 26px, #000 27.5px, transparent 28.5px); mask:radial-gradient(circle, transparent 25px, #000 26px, #000 27.5px, transparent 28.5px); }
.knob.sm { width:24px; height:24px; box-shadow:0 2px 3px rgba(28,25,23,.16), 0 0 0 1px var(--key-edge); }
.knob.sm::after { top:2px; height:8px; transform-origin:50% 10px; }
.scope-box { display:flex; flex-direction:column; gap:5px; min-width:0; }
.scope-box .engr { display:flex; justify-content:space-between; gap:8px; }
canvas.scope { width:100%; height:58px; border-radius:6px; background:var(--lcd-bg); display:block; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px var(--well), 0 0 0 4px var(--edge); }

.selector { display:flex; gap:7px; padding:8px; flex-wrap:wrap; }
.tabcell { flex:1 1 0; min-width:96px; position:relative; display:flex; }
.tabbtn { flex:1 1 auto; min-width:0; height:48px; border-radius:7px; border:1px solid var(--key-edge); color:var(--fg-muted);
  background:linear-gradient(180deg, var(--key-1), var(--key-2)); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge-dark), 0 4px 6px rgba(28,25,23,.06);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:0 12px; font:600 11.5px var(--font-mono); letter-spacing:.1em; position:relative; }
.tabbtn .row { display:flex; gap:7px; align-items:center; width:100%; }
.tabbtn .lamp { width:7px; height:7px; border-radius:50%; background:var(--led-off); flex:none; box-shadow:inset 0 1px 1px rgba(0,0,0,.15); }
.tabbtn .sub { font:500 9.5px var(--font-mono); letter-spacing:.06em; color:var(--fg-faint); }
.tabbtn .cnt { margin-left:auto; font:500 10px var(--font-mono); color:var(--fg-label); }
.tabbtn.sel { color:var(--fg); transform:translateY(2px); background:linear-gradient(180deg, #F3F1ED, #E7E4DE); box-shadow: inset 0 1px 2px rgba(87,83,78,.18), 0 1px 0 var(--edge-dark); }
.tabbtn.sel .sub { color:var(--fg-muted); }
.tabbtn.sel .lamp { background:var(--lc); box-shadow:0 0 7px var(--lc); }
.tabbtn::before { content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:1px; background:var(--lc); opacity:.0; }
.tabbtn.sel::before { opacity:.9; }
.tabbtn.muted .row span:nth-child(2) { text-decoration:line-through; }
.tabbtn .act { position:absolute; right:9px; bottom:9px; width:5px; height:5px; border-radius:50%; }
.tabcell:has(.tmute) .tabbtn .act { right:38px; }
.tabcell:has(.tmute) .tabbtn::before { right:38px; }
/* mute keys: channel (on the tab) and drum lane (in the grid); lit = silent */
.tmute, .lmute { border:1px solid var(--key-edge); background:linear-gradient(180deg, var(--key-1), var(--key-2)); border-radius:4px; padding:0;
  font:600 9.5px var(--font-mono); letter-spacing:0; color:var(--fg-label); box-shadow:0 1px 0 var(--edge-dark); display:inline-flex; align-items:center; justify-content:center; }
.tmute { position:absolute; right:8px; bottom:7px; width:22px; height:17px; z-index:1; }
.tabcell:has(.tabbtn.sel) .tmute { bottom:5px; }
.lmute { width:22px; height:20px; flex:none; }
.tmute:hover, .lmute:hover { color:var(--ink); }
.tmute.on, .lmute.on { background:linear-gradient(180deg, #F0755A, var(--ink)); border-color:var(--ink-hover); color:#fff; box-shadow:0 1px 0 #A8341A; }
.tmute:active, .lmute:active { transform:translateY(1px); box-shadow:none; }
.key.drum.off .nm { color:var(--fg-faint); text-decoration:line-through; }
.m-note.drum.off { opacity:.3; }
.tabbtn .act.blink { background:var(--lc); box-shadow:0 0 6px var(--lc); }

.panel { display:flex; flex-direction:column; gap:12px; min-width:0; }
.strip { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; padding:12px 14px; }
.grp { display:flex; flex-direction:column; gap:6px; }
.grp .ctl { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.vr { width:1px; align-self:stretch; background:var(--edge); box-shadow:1px 0 0 #fff; }
.spacer { flex:1; }

.lcd { font:500 18px var(--font-mono); letter-spacing:.04em; color:var(--lcd-fg); background:var(--lcd-bg); border:0; border-radius:6px; padding:8px 12px; width:100%; min-width:0;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px var(--well), 0 0 0 4px var(--edge); text-shadow:0 0 6px rgba(202,211,183,.45); }
.lcd:focus { outline:none; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 3px var(--well), 0 0 0 4px var(--accent); }
.lcd-line { font:500 11px var(--font-mono); color:var(--lcd-fg); background:var(--lcd-bg); border-radius:4px; padding:4px 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); white-space:nowrap; }
.lcd-line.bad { color:#F7C9BB; }
.lcd-line.busy { color:var(--lcd-dim); }

.sw { display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:0; font:600 10.5px var(--font-mono); letter-spacing:.1em; color:var(--fg-label); }
.sw .body { width:34px; height:18px; border-radius:9px; background:var(--edge); box-shadow: inset 0 1px 3px rgba(87,83,78,.4); position:relative; }
.sw .body::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:linear-gradient(180deg, #fff, #E4E0D9); box-shadow:0 1px 2px rgba(28,25,23,.3); transition:left .12s; }
.sw .lamp { width:6px; height:6px; border-radius:50%; background:var(--led-off); }
.sw.on { color:var(--fg); }
.sw.on .body { background:var(--swc, var(--led)); }
.sw.on .body::after { left:18px; }
.sw.on .lamp { background:var(--swc, var(--led)); box-shadow:0 0 6px var(--swc, var(--led)); }

.pad { font:600 12px var(--font-mono); min-width:30px; height:28px; padding:0 8px; border-radius:5px; border:1px solid var(--key-edge); color:var(--fg-soft);
  background:linear-gradient(180deg, var(--key-1), var(--key-2)); box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--edge-dark); display:inline-flex; align-items:center; gap:5px; }
.pad.sel { background:linear-gradient(180deg, #F0755A, var(--ink)); border-color:var(--ink-hover); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #A8341A; }
.pad.now { outline:2px solid var(--accent); outline-offset:2px; }
.pad.add { background:none; border:1px dashed var(--edge-dark); box-shadow:none; color:var(--fg-label); }
.pad .x { color:var(--fg-faint); font-weight:400; }
.pad .x:hover { color:var(--err); }
.pad.sel .x { color:rgba(255,255,255,.6); }
.chain { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:10px; min-height:48px; }
.chain .arrow { color:var(--fg-faint); font:11px var(--font-mono); }

.duty { display:inline-flex; border-radius:5px; overflow:hidden; border:1px solid var(--key-edge); box-shadow:0 2px 0 var(--edge-dark); }
.duty button { border:0; background:linear-gradient(180deg, var(--key-1), var(--key-2)); color:var(--fg-muted); font:600 10.5px var(--font-mono); padding:0 9px; height:26px; display:inline-flex; align-items:center; gap:5px; }
.duty button + button { border-left:1px solid var(--key-edge); }
.duty button.sel { background:var(--well); color:var(--fg); box-shadow:inset 0 2px 3px rgba(87,83,78,.3); }
.duty svg { width:14px; height:10px; stroke:currentColor; fill:none; stroke-width:1.6; }

.grid-wrap { overflow-y:auto; overflow-x:hidden; max-height:400px; position:relative; border-radius:8px; background:var(--paper-raised); }
.m-steps, .m-grid { display:grid; grid-template-columns: var(--keyw) repeat(16, var(--cell)); width:max-content; }
.m-steps { position:sticky; top:0; z-index:4; background:var(--paper-card); border-bottom:1px solid var(--border-strong); padding-block:5px 3px; }
.m-steps > span { font:9.5px/12px var(--font-mono); color:var(--fg-faint); text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.m-steps > span i { width:7px; height:7px; border-radius:50%; background:var(--led-off); display:block; box-shadow:inset 0 1px 1px rgba(0,0,0,.12); }
.m-steps > span.b { color:var(--fg-soft); font-weight:600; }
.m-steps > span.lit i { background:var(--led); box-shadow:0 0 7px var(--led); }
.m-steps > span:first-child { position:sticky; left:0; background:var(--paper-card); z-index:1; }
.m-grid { position:relative; user-select:none; touch-action:none; }
.key { position:sticky; left:0; z-index:2; font:10px var(--font-mono); padding-left:8px; color:var(--fg-label); background:var(--paper-card); border-right:1px solid var(--border-strong); border-bottom:1px solid var(--border-faint); display:flex; align-items:center; gap:8px; }
.key.black { background:var(--paper-mute); color:var(--fg-faint); }
.key.c { color:var(--fg-soft); font-weight:600; }
.key.drum { font:600 10.5px var(--font-mono); letter-spacing:.06em; color:var(--fg-soft); padding-right:8px; }
.key.drum .nm { flex:1; cursor:pointer; }
.key.drum .nm:hover { color:var(--ink); }
.dice { border:1px solid var(--key-edge); background:linear-gradient(180deg, var(--key-1), var(--key-2)); border-radius:4px; width:22px; height:20px; padding:0; font-size:13px; line-height:18px; color:var(--fg-muted); box-shadow:0 1px 0 var(--edge-dark); }
.dice:hover { color:var(--ink); }
.dice:active { transform:translateY(1px); box-shadow:none; }
.key.drum .rv { font:9.5px var(--font-mono); color:var(--fg-label); width:42px; text-align:right; font-variant-numeric:tabular-nums; }
.m-cell { border-right:1px solid var(--border-faint); border-bottom:1px solid var(--border-faint); }
.m-cell.blackrow { background:#F5F3EF; }
.m-cell.beat { border-right-color:var(--border-strong); }
.m-cell.bar { border-right:1px solid var(--fg-faint); }
.m-cell:hover { background:var(--ink-soft); }
.m-grid.selmode .m-cell:hover { background:var(--accent-bg); }
.m-grid.selmode { cursor:crosshair; }
.m-note { position:absolute; border-radius:3px; z-index:1; pointer-events:none; background:var(--nc); box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35); }
.m-note .tail { position:absolute; top:50%; height:2px; margin-top:-1px; left:100%; opacity:.4; background:var(--nc); border-radius:0 2px 2px 0; }
.m-note .grip { position:absolute; right:1px; top:2px; bottom:2px; width:2px; background:rgba(255,255,255,.55); border-radius:1px; }
.m-note.drum { border-radius:50%; }
.m-note.sel { outline:2px solid var(--fg); outline-offset:1px; z-index:2; }
.ghost-note { position:absolute; border-radius:3px; pointer-events:none; opacity:.16; }
.marquee { position:absolute; border:1px dashed var(--accent); background:rgba(68,89,158,.08); z-index:3; pointer-events:none; display:none; }
.cursor { position:absolute; top:0; bottom:0; width:var(--cell); background:rgba(238,96,64,.10); border-left:2px solid var(--led); pointer-events:none; z-index:3; display:none; }

.pages { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; padding:10px 14px; }
.pgs { display:flex; gap:8px; flex:1 1 380px; }
.pg { flex:1 1 0; min-width:70px; height:50px; border-radius:6px; border:1px solid var(--key-edge); color:var(--fg-soft); position:relative;
  background:linear-gradient(180deg, var(--key-1), var(--key-2)); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge-dark), 0 4px 6px rgba(28,25,23,.06);
  display:flex; flex-direction:column; justify-content:space-between; padding:6px 8px 7px; font:600 11px var(--font-mono); letter-spacing:.1em; text-align:left; }
.pg .top { display:flex; align-items:center; gap:6px; }
.pg .l { width:7px; height:7px; border-radius:50%; background:var(--led-off); box-shadow:inset 0 1px 1px rgba(0,0,0,.15); }
.pg .l.play { margin-left:auto; }
.pg.sel { transform:translateY(2px); box-shadow: inset 0 1px 2px rgba(87,83,78,.18), 0 1px 0 var(--edge-dark); color:var(--fg); background:linear-gradient(180deg, #F3F1ED, #E7E4DE); }
.pg.sel .l.edit { background:var(--led); box-shadow:0 0 7px var(--led); }
.pg .l.play.on { background:var(--accent); box-shadow:0 0 7px var(--accent); }
.pg .map { display:grid; grid-template-columns:repeat(16, 1fr); gap:2px; }
.pg .map i { height:4px; border-radius:1px; background:var(--edge); }
.pg .map i.b { background:var(--edge-dark); }
.pg .map i.on { background:var(--mc); }
.pg.off { opacity:.4; cursor:not-allowed; box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--edge-dark); }
.pg.off .top::after { content:"LOOPS"; margin-left:4px; font-size:8.5px; letter-spacing:.12em; color:var(--fg-label); }
.kbd { padding:10px 14px 12px; display:flex; flex-direction:column; gap:8px; }
.kbd .head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.kbd .head b { color:var(--fg-soft); font-weight:600; }
.dpads { display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
.dpad { height:58px; border-radius:7px; border:1px solid var(--key-edge); background:linear-gradient(180deg, var(--key-1), var(--key-2));
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--edge-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; user-select:none; touch-action:none; cursor:pointer; }
.dpad .cap { font:600 18px var(--font-mono); color:var(--fg); }
.dpad .nm { font:600 9px var(--font-mono); letter-spacing:.1em; color:var(--fg-label); }
.dpad.down { transform:translateY(2px); box-shadow: inset 0 1px 2px rgba(87,83,78,.2), 0 1px 0 var(--edge-dark); background:var(--ink-soft); }
.dpad.down .cap { color:var(--ink); }
.piano { position:relative; height:96px; display:flex; user-select:none; touch-action:none; }
.wk { flex:1 1 0; position:relative; border:1px solid var(--key-edge); border-left-width:0; background:linear-gradient(180deg, #fff, #F3F1ED); border-radius:0 0 6px 6px;
  box-shadow: inset 0 -3px 0 var(--edge); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; padding-bottom:7px; cursor:pointer; }
.wk:first-child { border-left-width:1px; }
.wk .cap, .bk .cap { font:600 13px var(--font-mono); color:var(--fg); }
.wk .nt, .bk .nt { font:500 9px var(--font-mono); color:var(--fg-label); }
.wk.c .nt { color:var(--fg-soft); font-weight:600; }
.bk { position:absolute; top:0; width:calc(100% / 14 * .62); height:58%; margin-left:calc(100% / 14 * -.31); z-index:2; border-radius:0 0 5px 5px; cursor:pointer;
  background:linear-gradient(180deg, #57534E, #1C1917); box-shadow: inset 0 -3px 0 #000, 0 2px 3px rgba(28,25,23,.3); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; padding-bottom:5px; }
.bk .cap { color:#FAFAF8; font-size:11.5px; }
.bk .nt { color:#A39B90; font-size:8px; }
.wk.down { background:linear-gradient(180deg, var(--ink-soft), #F9D9CF); box-shadow: inset 0 -1px 0 var(--edge); }
.wk.down .cap { color:var(--ink); }
.bk.down { background:linear-gradient(180deg, #EE6040, #C9401F); }
.m-hint { font:11px var(--font-mono); color:var(--fg-label); display:flex; gap:6px 16px; flex-wrap:wrap; padding:0 2px; }
.m-hint b { color:var(--fg-soft); font-weight:500; }
.phone-note { display:none; font:12px var(--font-mono); color:var(--lcd-fg); background:var(--lcd-bg); border-radius:5px; padding:8px 10px; }
.confirm { display:flex; gap:8px; align-items:center; font:11px var(--font-mono); color:var(--err); }

.m-toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--fg); color:var(--fg-on-ink); border-radius:var(--radius); padding:8px 8px 8px 14px; font-size:13px; display:flex; gap:12px; align-items:center; z-index:30; box-shadow:0 8px 24px rgba(28,25,23,.25); }
.m-toast button { border:0; background:var(--ink); color:var(--fg-on-ink); border-radius:5px; padding:3px 10px; font-size:12.5px; }

@media (max-width: 1100px) { .top { grid-template-columns:auto 1fr; } .scope-box { grid-column:1 / -1; } }
@media (max-width: 860px) {
  .top { grid-template-columns:1fr; }
  .knobs { flex-wrap:wrap; }
  .phone-note { display:block; }
  .m-grid { pointer-events:none; }
  .tabcell { min-width:calc(50% - 6px); }
  .dev-sticky { position:static; }
}
@media (max-height: 760px) { .dev-sticky { position:static; } }
@media (prefers-reduced-motion: reduce) { .music-page * { transition:none !important; } }