:root{color-scheme:dark;--bg:#0d0d12;--bg-elevated:#17171f;--bg-step:#2a2a3c;--border-step:#40405c;--text:#f0f0f5;--text-dim:#9a9aa8;--border:#2c2c3a;--focus:#5da9ff;--surface:linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 88%, white 12%), var(--bg-elevated));--shadow-elevated:0 6px 18px -10px #000000bf;--color-kick:#ff6b4a;--color-snare:#ffd166;--color-hihat:#4ecdc4;--color-perc:#c77dff;--color-play:#4ade80;--color-rec:#ff4d6d;--color-ambient:#5da9ff}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);flex-direction:column;align-items:center;min-height:100dvh;margin:0;padding:1.5rem 2rem;font-family:system-ui,sans-serif;line-height:1.6;display:flex}main{flex-direction:column;flex:1;justify-content:center;width:100%;max-width:75rem;margin:0 auto;display:flex}a{color:var(--color-ambient)}code{background:var(--bg-elevated);border-radius:.25rem;padding:.1rem .35rem}header nav{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}header{margin-bottom:.75rem}h1{letter-spacing:.01em;margin:0 0 .35rem;font-size:1.85rem}.tagline{color:var(--text-dim);margin:0;font-size:.95rem}#pads{grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.5rem 0;display:grid}.pad{border:2px solid color-mix(in srgb, var(--pad-color,var(--border)) 35%, transparent);background:linear-gradient(135deg, color-mix(in srgb, var(--pad-color,var(--color-ambient)) 42%, var(--bg-elevated)), color-mix(in srgb, var(--pad-color,var(--color-ambient)) 12%, var(--bg-elevated)));box-shadow:var(--shadow-elevated);color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;user-select:none;border-radius:.75rem;justify-content:center;align-items:center;padding:1.5rem .5rem;transition:box-shadow .15s,border-color .15s;display:flex;position:relative}.pad[data-pad=kick]{--pad-color:var(--color-kick);animation-delay:0s}.pad[data-pad=snare]{--pad-color:var(--color-snare);animation-delay:.2s}.pad[data-pad=hihat]{--pad-color:var(--color-hihat);animation-delay:.4s}.pad[data-pad=perc]{--pad-color:var(--color-perc);animation-delay:.6s}body.pre-first-gesture .pad{animation:2.4s ease-in-out infinite pad-invite}@keyframes pad-invite{0%,to{box-shadow:var(--shadow-elevated), 0 0 0 0 transparent}50%{box-shadow:var(--shadow-elevated), 0 0 8px 4px color-mix(in srgb, var(--pad-color,var(--color-ambient)) 55%, transparent)}}@media (prefers-reduced-motion:reduce){body.pre-first-gesture .pad{animation:none}}.pad-name{font-weight:600}.pad-key{color:var(--text);border:1px solid color-mix(in srgb, var(--pad-color,var(--border)) 70%, white 15%);background:#00000059;border-radius:.35rem;padding:0 .4rem;font-size:.85rem;line-height:1.4;position:absolute;top:.65rem;left:.65rem}.pad--pressed{background:var(--pad-color,var(--color-ambient));border-color:var(--pad-color,var(--color-ambient));color:#0d0d12;transform:scale(.96)}.pad--pressed .pad-key{color:#0d0d12;background:#ffffff59;border-color:#0d0d12}#transport{flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.5rem 0;display:flex}#transport button{border:2px solid var(--border);background:var(--surface);box-shadow:var(--shadow-elevated);color:var(--text);font:inherit;cursor:pointer;border-radius:.5rem;padding:.5rem 1rem}#transport #play-stop{text-align:center;background:color-mix(in srgb, var(--color-play) 14%, var(--bg-elevated));border-color:var(--color-play);min-width:7rem;margin-right:.75rem;padding:.7rem 1.85rem;font-size:1.05rem;font-weight:700}#play-stop[aria-pressed=true]{background:var(--color-play);border-color:var(--color-play);color:#0d0d12}#transport #rec,#transport #clear,#transport #random-groove{color:var(--text-dim);padding:.45rem .9rem;font-size:.9rem}#transport #rec{color:var(--color-rec);border-color:color-mix(in srgb, var(--color-rec) 45%, var(--border))}#rec[aria-pressed=true]{background:var(--color-rec);border-color:var(--color-rec);color:#0d0d12}.bpm-control{color:var(--text-dim);border:2px solid var(--border);background:var(--surface);box-shadow:var(--shadow-elevated);border-radius:.5rem;align-items:center;gap:.5rem;padding:.4rem .85rem;display:flex}.bpm-control #bpm-value{width:3ch;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;display:inline-block}#bpm{appearance:none;cursor:pointer;background:0 0;width:8rem;height:1rem}#bpm::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-ambient) var(--bpm-fill,50%), var(--bg-step) var(--bpm-fill,50%));border-radius:999px;height:.4rem}#bpm::-webkit-slider-thumb{appearance:none;background:var(--text);border:2px solid var(--color-ambient);cursor:pointer;border-radius:50%;width:1rem;height:1rem;margin-top:-.3rem}#bpm::-moz-range-track{background:var(--bg-step);border-radius:999px;height:.4rem}#bpm::-moz-range-progress{background:var(--color-ambient);border-radius:999px;height:.4rem}#bpm::-moz-range-thumb{background:var(--text);border:2px solid var(--color-ambient);cursor:pointer;border-radius:50%;width:1rem;height:1rem}#transport #ambient-toggle{border-radius:999px;margin-left:auto;padding:.5rem 1.3rem;font-weight:600}#grid{border:2px solid var(--border);background:var(--bg-elevated);border-radius:.75rem;flex-direction:column;gap:.35rem;margin:1.5rem 0;padding:1rem 1.25rem;display:flex}.grid-row{align-items:center;gap:.5rem;display:flex}.grid-row[data-pad=kick]{--pad-color:var(--color-kick)}.grid-row[data-pad=snare]{--pad-color:var(--color-snare)}.grid-row[data-pad=hihat]{--pad-color:var(--color-hihat)}.grid-row[data-pad=perc]{--pad-color:var(--color-perc)}.grid-row-label{width:4rem;color:var(--pad-color,var(--text));flex-shrink:0;padding-right:.5rem;font-size:.85rem;font-weight:600}.grid-steps{flex:1;grid-template-columns:repeat(16,minmax(1.5rem,1fr));gap:.25rem;display:grid;overflow-x:auto}.step{aspect-ratio:1;border:1px solid var(--border-step);background:var(--bg-step);cursor:pointer;touch-action:manipulation;border-radius:.2rem;width:100%;padding:0;transition:background-color .12s,border-color .12s}.step--on{background:var(--pad-color,var(--text));border-color:var(--pad-color,var(--text))}.step--current{box-shadow:0 0 0 2px var(--focus) inset}#ambient-toggle{border-color:var(--color-ambient)}#ambient-toggle[aria-pressed=true]{background:var(--color-ambient);border-color:var(--color-ambient);color:#0d0d12}button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (hover:hover){.pad:not(.pad--pressed):hover{border-color:var(--pad-color,var(--border));box-shadow:var(--shadow-elevated), 0 6px 18px -6px color-mix(in srgb, var(--pad-color,var(--color-ambient)) 55%, transparent)}.step:not(.step--on):hover{background:color-mix(in srgb, var(--pad-color,var(--text)) 30%, var(--bg-step));border-color:var(--pad-color,var(--border))}@media (prefers-reduced-motion:no-preference){.pad{transition:box-shadow .15s,border-color .15s,transform .15s}.pad:not(.pad--pressed):hover{transform:translateY(-2px)}}}@media (width>=601px){#transport{margin:2rem 0}#pads{gap:1.25rem;margin:2rem 0}.pad{padding:3.25rem 1rem}.pad-name{font-size:1.3rem}.pad-key{font-size:1rem}#grid{gap:.9rem;margin:2.5rem 0}.grid-row-label{font-size:1rem}.grid-steps{grid-template-columns:repeat(16,minmax(3.25rem,1fr));gap:.55rem}}@media (width<=600px){body{padding:1rem}h1{margin:0 0 .5rem;font-size:1.75rem}main>p{margin:0 0 1rem}#transport{grid-template-columns:repeat(3,1fr);grid-template-areas:"play play play""rec clear random""bpm bpm bpm""ambient ambient ambient";align-items:stretch;gap:.6rem;margin:1.25rem 0;display:grid}#transport #play-stop{grid-area:play;width:100%;margin-right:0;padding:.85rem 1rem;font-size:1.1rem}#transport #rec{grid-area:rec}#transport #clear{grid-area:clear}#transport #random-groove{grid-area:random}#transport #rec,#transport #clear,#transport #random-groove{text-align:center;width:100%;padding:.7rem .4rem;font-size:.85rem}#transport .bpm-control{grid-area:bpm;justify-content:space-between;width:100%;padding:.6rem .85rem}#transport #bpm{flex:1;width:auto}#transport #ambient-toggle{text-align:center;grid-area:ambient;width:100%;margin-left:0;padding:.7rem 1rem}#pads{margin:1rem 0}#grid{margin:.75rem 0;padding:.6rem .5rem}.grid-row-label{display:none}.pad{padding:1rem .5rem}.pad-key{display:none}.grid-steps{grid-template-columns:repeat(16,minmax(0,1fr));gap:.15rem;display:grid}.step{width:100%}.step:not(.step--on){background:color-mix(in srgb, var(--pad-color,var(--bg-step)) 22%, var(--bg-step));border-color:color-mix(in srgb, var(--pad-color,var(--border-step)) 40%, var(--border-step))}}