:root{--bg:#14121b;--panel:#1e1b29;--panel-2:#262234;--edge:#383247;--ink:#f2eefb;--ink-dim:#a49cba;--accent:#ffd166;--rec:#ff5d6c;--focus:#7ee0ff;--radius:14px}*{box-sizing:border-box}html,body{height:100%}body{background:radial-gradient(90rem 50rem at 50% -20%, #241f36 0%, transparent 60%), var(--bg);min-height:100dvh;color:var(--ink);-webkit-text-size-adjust:100%;overscroll-behavior:none;flex-direction:column;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;display:flex}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;min-height:0;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:50;border:1px solid var(--accent);background:var(--panel-2);color:var(--ink);border-radius:8px;padding:.55rem .8rem;font-size:.85rem;text-decoration:none;transition:top .15s;position:absolute;top:-4rem;left:.5rem}.skip-link:focus{top:.5rem}main{flex-direction:column;flex:auto;gap:clamp(.6rem,1.5vw,1rem);width:100%;min-width:0;max-width:78rem;min-height:0;margin:0 auto;padding:clamp(.6rem,1.4vw,1rem) clamp(.75rem,3vw,2rem);display:flex}.transport{background:var(--panel);border:1px solid var(--edge);border-radius:var(--radius);flex-direction:column;gap:.7rem;padding:.75rem;display:flex}.transport-row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.spacer{flex:auto}.ctl{border:1px solid var(--edge);background:var(--panel-2);min-height:2.75rem;color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:.45rem;padding:0 .9rem;font-size:.9rem;transition:background .12s,border-color .12s,transform 60ms;display:inline-flex}.ctl:hover:not(:disabled){background:#2f2a40}.ctl:active:not(:disabled){transform:translateY(1px)}.ctl:disabled{opacity:.4;cursor:not-allowed}.ctl-glyph{clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;border-radius:2px;width:.85rem;height:.85rem}.ctl--play[aria-pressed=true] .ctl-glyph{clip-path:none}.ctl--play[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.ctl--record .ctl-glyph{clip-path:none;background:var(--rec);border-radius:50%}.ctl--record[aria-pressed=true]{border-color:var(--rec);background:color-mix(in srgb, var(--rec) 22%, var(--panel-2))}.ctl--record[aria-pressed=true] .ctl-glyph{animation:1s steps(2,start) infinite blink}.ctl--toggle[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}@keyframes blink{50%{opacity:.25}}.field{color:var(--ink-dim);align-items:center;gap:.45rem;font-size:.85rem;display:inline-flex}.transport-row--secondary .ctl{min-height:2.35rem;padding:0 .65rem;font-size:.82rem}.field--tempo{flex:10rem;min-width:0;max-width:24rem}.field--tempo input{min-width:4rem;max-width:12rem;height:2.75rem;accent-color:var(--accent);flex:auto}.field output{min-width:4.5rem;color:var(--ink);font-variant-numeric:tabular-nums}.field select{border:1px solid var(--edge);background:var(--panel-2);min-height:2.75rem;color:var(--ink);font:inherit;border-radius:10px;padding:0 .5rem;font-size:.85rem}.trim{--a:0;--b:1;--gutter:17px;--track:calc(100% - 2 * var(--gutter));box-shadow:inset 0 0 0 1px var(--edge);touch-action:none;-webkit-user-select:none;user-select:none;background:#0f0d16;border-radius:8px;padding:6px 0;position:relative}.trim-lanes{margin:0 var(--gutter);flex-direction:column;gap:2px;display:flex}.trim-lane{grid-template-columns:repeat(var(--steps,32), minmax(0, 1fr));gap:1px;height:12px;display:grid}.trim-lane i{background:hsl(var(--pad-hue) 22% 26%);border-radius:2px;position:relative}.trim-lane i.on{background:hsl(var(--pad-hue) 78% 62%);cursor:grab}.trim-lane i.out{background:hsl(var(--pad-hue) 16% 19%)}.trim-lane i.on.out{background:hsl(var(--pad-hue) 42% 38%)}.trim-lane i.on:after{content:"";position:absolute;inset:-2px}.trim-lane i:focus-visible{outline:2px solid var(--focus);outline-offset:1px;z-index:7}.trim-lane i.is-selected{box-shadow:0 0 0 2px var(--focus);z-index:6;background:#fff}.trim-lanes.is-carrying i.is-selected{cursor:grabbing;animation:.7s ease-in-out infinite alternate carry}@keyframes carry{to{box-shadow:0 0 0 4px var(--focus)}}.trim-beats{top:0;bottom:0;left:var(--gutter);right:var(--gutter);pointer-events:none;background-image:linear-gradient(90deg,#ffffff1f 0 1px,#0000 1px 100%);background-size:calc(100% / var(--bars,2)) 100%;position:absolute}.trim-dim{opacity:0;pointer-events:none;background:#0b0910;transition:opacity .12s;position:absolute;top:0;bottom:0}.trim.is-trimmed .trim-dim{opacity:.35}.trim-dim--before{width:calc(var(--gutter) + var(--a) * var(--track));left:0}.trim-dim--after{left:calc(var(--gutter) + var(--b) * var(--track));right:0}.trim-frame{top:0;bottom:0;left:calc(var(--gutter) + var(--a) * var(--track));width:calc((var(--b) - var(--a)) * var(--track));border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none;opacity:0;transition:opacity .12s;position:absolute}.trim.is-trimmed .trim-frame{opacity:1}.trim-handle{background:var(--accent);cursor:ew-resize;touch-action:none;z-index:4;border-radius:7px;width:14px;position:absolute;top:0;bottom:0}.trim-handle:after{content:"";position:absolute;top:-8px;bottom:-8px}.trim-handle:before{content:"";background:#00000073;border-radius:1px;width:2px;height:32%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.trim-handle--start{left:calc(var(--gutter) + var(--a) * var(--track));border-radius:7px 2px 2px 7px;transform:translate(-100%)}.trim-handle--start:after{left:-7px;right:0}.trim-handle--end{left:calc(var(--gutter) + var(--b) * var(--track));border-radius:2px 7px 7px 2px}.trim-handle--end:after{left:0;right:-7px}.trim-handle.is-dragging,.trim-handle:hover{background:#ffdf8a}.trim-handle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.trim-head{top:0;bottom:0;left:calc(var(--gutter) + var(--p,0) * var(--track));pointer-events:none;opacity:0;background:#fff;width:2px;position:absolute;box-shadow:0 0 6px #fffa}.trim-head.is-live{opacity:.9}.trim-actions,.note-actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.trim-actions[hidden],.note-actions[hidden]{display:none}.trim-actions .ctl,.note-actions .ctl{min-height:2.35rem;padding:0 .65rem;font-size:.82rem}.note-readout{color:var(--focus);font-variant-numeric:tabular-nums;margin:0;font-size:.8rem}.ctl--danger{border-color:color-mix(in srgb, var(--rec) 60%, var(--edge));color:var(--rec)}.ctl--danger:hover:not(:disabled){background:var(--rec);color:#1a0b0e}.ctl--primary{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 20%, var(--panel-2));color:var(--accent);font-weight:600}.trim-readout{color:var(--accent);font-variant-numeric:tabular-nums;margin:0;font-size:.8rem}.hint{text-align:center;height:1.4rem;color:var(--ink-dim);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:clamp(.74rem,2.3vw,.9rem);overflow:hidden}.board{flex:auto;grid-template-rows:repeat(3,minmax(6.5rem,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.5rem,1.2vw,.85rem);min-height:0;display:grid}.pad-cell{min-width:0;min-height:0;position:relative}.pad{border:1px solid hsl(var(--pad-hue) 40% 34%);border-radius:var(--radius);background:linear-gradient(160deg, hsl(var(--pad-hue) 45% 26%) 0%, hsl(var(--pad-hue) 42% 18%) 100%);width:100%;min-width:0;height:100%;color:var(--ink);font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:.35rem;padding:2.2rem .8rem .7rem;transition:filter 90ms,transform 60ms,box-shadow 90ms;display:flex;position:relative}.pad:hover{filter:brightness(1.18)}.pad.is-hit{filter:brightness(1.9);box-shadow:0 0 0 2px hsl(var(--pad-hue) 80% 62%);transform:scale(.985)}.pad-name{text-align:center;letter-spacing:.01em;flex:auto;align-items:center;min-height:0;font-size:clamp(1rem,1.9vw,1.7rem);font-weight:650;display:flex}.pad-key{border:1px solid hsl(var(--pad-hue) 40% 45%);width:1.5rem;height:1.5rem;color:hsl(var(--pad-hue) 55% 78%);border-radius:5px;place-items:center;font-size:.75rem;font-weight:600;display:grid;position:absolute;top:.6rem;left:.75rem}.pad-steps{flex:none;grid-template-columns:repeat(16,minmax(0,1fr));justify-items:center;gap:5px 2px;width:100%;min-width:0;min-height:6px;display:grid}.pad-steps i{aspect-ratio:1;background:hsl(var(--pad-hue) 30% 40%);border-radius:50%;width:100%;max-width:6px}.pad-steps i.on{background:hsl(var(--pad-hue) 85% 70%);box-shadow:0 0 4px hsl(var(--pad-hue) 85% 60%)}.pad-steps i.beat:not(.on){background:hsl(var(--pad-hue) 35% 52%)}.pad-steps i.out{opacity:.25;box-shadow:none}.pad-clear{min-width:2.25rem;min-height:2.25rem;color:hsl(var(--pad-hue) 40% 72%);font:inherit;opacity:.45;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:0;font-size:0;transition:opacity .12s,background .12s;position:absolute;top:.4rem;right:.4rem}.pad-clear:before{content:"⌫";font-size:.95rem}.pad-cell:hover .pad-clear,.pad-clear:focus-visible{opacity:1;border-color:hsl(var(--pad-hue) 30% 45%);background:#0009}.pad-clear:hover{opacity:1;background:var(--rec);color:#1a0b0e}.songs-dialog{border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel);width:min(28rem,100vw - 2rem);color:var(--ink);padding:1rem}.songs-dialog::backdrop{background:#0b0910cc}.songs-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.songs-head h2{margin:0;font-size:1.1rem}.songs-list{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.songs-list li{border:1px solid var(--edge);background:var(--panel-2);border-radius:10px;align-items:center;gap:.5rem;padding:.4rem .5rem;display:flex}.song-name{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;font-size:.9rem;overflow:hidden}.song-meta{color:var(--ink-dim);font-variant-numeric:tabular-nums;font-size:.75rem}.songs-empty{color:var(--ink-dim);margin:.5rem 0 0;font-size:.85rem}.songs-empty[hidden]{display:none}@media (width<=39.999rem){.transport-row--secondary{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.transport-row--secondary .spacer{display:none}.transport-row--secondary .ctl{justify-content:center}.ctl-word{display:none}.trim-actions,.note-actions{flex-wrap:nowrap}.trim-actions .ctl,.note-actions .ctl{flex:auto;justify-content:center;padding:0 .4rem}.trim-actions .trim-readout{display:none}.note-readout{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;overflow:hidden}.trim-lane{height:12px}.trim{--gutter:21px}.trim-handle{width:18px}.board{grid-template-rows:repeat(3,minmax(5.5rem,1fr))}}@media (width>=40rem){.board{grid-template-rows:minmax(3rem,.8fr) minmax(3rem,.8fr) minmax(3.5rem,1fr);grid-template-columns:repeat(4,1fr)}.pad-cell:first-child{grid-area:1/1/span 2/span 2}.pad-cell:nth-child(2){grid-area:1/3/span 2/span 2}.pad-cell:nth-child(n+3){grid-row:3}}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.pad.is-hit{filter:brightness(1.9)}}