:root{--desk: #24212d;--panel: #2f2b3a;--pad-a: #3d3949;--pad-b: #4d485d;--ink: #f1e9d8;--ink-dim: #a9a2b8;--line: #4d485d;--track-0: #ff6f5e;--track-1: #ffa94d;--track-2: #ffd95a;--track-3: #9be37c;--track-4: #4fd6c0;--track-5: #5cabff;--track-6: #a892ff;--track-7: #f283d2;--strip: 19rem;font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI Variable Display,Segoe UI,system-ui,sans-serif;color:var(--ink);background:var(--desk);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh}#app{max-width:76rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}button,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-bottom:1.5rem}h1{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;flex:1}.play{min-width:6.5rem;padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--ink);color:var(--desk);font-weight:800;font-size:1.05rem}.play[aria-pressed=true]{background:var(--track-0)}.field{display:flex;align-items:center;gap:.6rem;color:var(--ink-dim);font-size:.9rem}.tempo input{width:4.6rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:var(--panel);color:var(--ink);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}.swing input{width:8rem}.swing output{min-width:2.6rem;color:var(--ink);font-variant-numeric:tabular-nums}.actions{display:flex;gap:.5rem}.quiet{padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-dim);font-size:.9rem}.quiet:hover{color:var(--ink);border-color:var(--ink-dim)}.notice{margin:0 0 1rem;padding:.7rem 1rem;border-radius:.6rem;background:var(--track-0);color:var(--desk);font-weight:600}.grid{display:grid;gap:.4rem;padding:.75rem;border-radius:1rem;background:var(--panel);overflow-x:auto}.row{display:grid;grid-template-columns:var(--strip) minmax(34rem,1fr);align-items:center;gap:.75rem;border-radius:.6rem}.row.is-drop{outline:2px dashed var(--hue);outline-offset:2px}.strip{display:grid;grid-template-columns:1fr auto 5rem 3.2rem;align-items:center;gap:.5rem}.name{padding:.55rem .7rem;border:0;border-left:.4rem solid var(--hue);border-radius:.4rem;background:var(--pad-a);font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.name:active{background:var(--hue);color:var(--desk)}.mute{width:2rem;height:2rem;border:1px solid var(--line);border-radius:.4rem;background:transparent;color:var(--ink-dim);font-weight:700;font-size:.8rem}.mute[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--desk)}.volume{width:100%;accent-color:var(--hue)}.swing input{accent-color:var(--ink)}.pitch{width:100%;padding:.3rem .2rem;border:1px solid var(--line);border-radius:.4rem;background:transparent;text-align:center;font-variant-numeric:tabular-nums}.steps{display:grid;grid-template-columns:repeat(16,1fr);gap:.3rem}.pad:nth-child(4n):not(:last-child){margin-right:.45rem}.pad{height:2.6rem;min-width:0;padding:0;border:0;border-radius:.35rem;background:var(--pad-a);touch-action:none}.pad[data-beat="1"]{background:var(--pad-b)}.pad.is-on{background:var(--hue)}.pad.is-on.is-soft{background:color-mix(in srgb,var(--hue) 45%,var(--pad-a))}.pad.is-now{background:#6f6887}.pad.is-on.is-now{background:color-mix(in srgb,var(--hue) 35%,white)}.row.is-muted .steps,.row.is-muted .name{opacity:.35}.help{max-width:62ch;margin:1.25rem 0 0;color:var(--ink-dim);font-size:.9rem;line-height:1.5}@media(max-width:44rem){:root{--strip: 12rem}.strip{grid-template-columns:1fr auto 3.2rem}.volume{display:none}}