:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{color:#f2f2f2;background:#0b0b0d;justify-content:center;min-height:100vh;margin:0;display:flex}.app{text-align:center;width:100%;max-width:560px;padding:1.5rem 1rem 3rem}h1{letter-spacing:.05em;margin:0 0 1rem}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.play-toggle{color:#fff;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#16a34a;border:2px solid #4ade80;border-radius:8px;padding:.6rem 1.4rem;font-size:1rem;font-weight:700}.play-toggle.playing{background:#dc2626;border-color:#f87171}.bpm-control{color:#ccc;align-items:center;gap:.5rem;font-size:.95rem;display:flex}.bpm-control input{color:#fff;text-align:center;background:#1a1a1a;border:2px solid #333;border-radius:8px;width:4.5rem;padding:.5rem;font-size:1.1rem}.track-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.5rem 0 1.25rem;display:flex}.track-button{color:#999;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#1a1a1a;border:2px solid #2e2e2e;border-radius:8px;padding:.6rem 1rem;font-size:.9rem;font-weight:600}.track-button.active{color:#fff;background:#2563eb;border-color:#60a5fa}.sampler-panel{flex-direction:column;align-items:center;gap:.5rem;margin:0 0 1.25rem;display:flex}.sampler-status{letter-spacing:.03em;color:#999;text-transform:uppercase;margin:0;font-size:.85rem;font-weight:600}.sampler-status--sample{color:#4ade80}.sampler-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.sampler-actions button{color:#ccc;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#1a1a1a;border:2px solid #2e2e2e;border-radius:8px;padding:.5rem .9rem;font-size:.85rem;font-weight:600}.sampler-actions button:disabled{opacity:.5;cursor:not-allowed}[data-role=record-sample]{touch-action:none}[data-role=record-sample].recording{color:#fff;background:#dc2626;border-color:#f87171}.sampler-error{color:#f87171;max-width:32rem;margin:0;font-size:.85rem}.pad-grid{aspect-ratio:1;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:.6rem;width:min(100%,480px);margin:0 auto;display:grid}.pad{aspect-ratio:1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#1c1c1f;border:2px solid #303035;border-radius:10px}.pad.on{background:#ff5a1f;border-color:#ff8a4c;box-shadow:0 0 14px #ff5a1fa6}.pad.current{outline-offset:2px;outline:4px solid #4ade80}.pad.on.current{box-shadow:0 0 18px #4ade80d9}