:root{--bg:#f4f4f6;--surface:#fff;--sunken:#e9e9ee;--text:#16161a;--muted:#6b6b78;--border:#dededf;--accent:#d93a35;--accent-text:#fff;--danger:#c0362f;--pad-lightness:44%;--radius:14px;--wave:#4a4a55;--wave-dim:#c6c6cd;--wave-edge:#16161a;--wave-playhead:#d93a35;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#101013;--surface:#1b1b21;--sunken:#141418;--text:#f1f1f4;--muted:#9c9caa;--border:#2c2c35;--accent:#e8514b;--accent-text:#fff;--danger:#f0736c;--pad-lightness:46%;--wave:#b6b6c4;--wave-dim:#3a3a45;--wave-edge:#f1f1f4;--wave-playhead:#e8514b}}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0}#app{flex-direction:column;max-width:640px;min-height:100dvh;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.25rem .6rem;display:flex}.app-header h1{letter-spacing:-.02em;margin:0;font-size:1.2rem}.mode-switch{background:var(--sunken);border:1px solid var(--border);border-radius:999px;padding:3px;display:flex}.mode{min-height:36px;color:var(--muted);font:inherit;background:0 0;border:none;border-radius:999px;padding:0 .95rem;font-size:.85rem;font-weight:600}.mode[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000002e}.mode:disabled{opacity:.45}.board{flex:1;padding:.5rem 1.25rem 1rem}.pad-grid{grid-template-columns:repeat(4,1fr);gap:.55rem;display:grid}.pad{aspect-ratio:1;border:1px solid var(--border);background:var(--surface);color:var(--muted);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:0;flex-direction:column;justify-content:flex-end;gap:.1rem;padding:.45rem .5rem;transition:transform 90ms,filter 90ms;display:flex;position:relative;overflow:hidden}.pad-label{text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:600;line-height:1.15;overflow:hidden}.pad-sub{opacity:.75;font-variant-numeric:tabular-nums;font-size:.7rem}.pad-progress{transform-origin:0;visibility:hidden;background:#ffffffd9;height:4px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.pad.is-sounding .pad-progress{visibility:visible}.pad:not(.is-filled){background:0 0;border-style:dashed;justify-content:center;align-items:center}.pad:not(.is-filled) .pad-label{opacity:.55;font-size:1rem}.pad.is-filled{background:hsl(var(--hue) 55% var(--pad-lightness));color:#fff;border-color:#0000;box-shadow:0 1px 2px #0003}.pad:disabled{cursor:default}.pad.is-sounding{filter:brightness(1.35);transform:scale(.96)}.pad.is-selected{outline:3px solid var(--text);outline-offset:2px}[data-picking=true] .pad:not(.is-selected){border-color:var(--accent);cursor:copy;border-style:dashed}.pad.is-armed{background:var(--accent);color:#fff;border-color:#0000;animation:1.2s ease-in-out infinite armed}[data-mode=play] .pad.is-filled:active{transform:scale(.94)}@keyframes armed{50%{opacity:.55}}.storage-note{text-align:center;color:var(--muted);margin:1.25rem 0 0;font-size:.72rem}.console{border-top:1px solid var(--border);background:var(--surface);padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom))}.console-message{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--danger);border-radius:10px;margin:0 0 .7rem;padding:.55rem .7rem;font-size:.85rem}.hint{color:var(--muted);align-items:center;min-height:44px;margin:0;font-size:.9rem;display:flex}.selection{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.05rem;font-weight:600;overflow:hidden}.selection-detail{color:var(--muted);font-variant-numeric:tabular-nums;margin:.1rem 0 0;font-size:.78rem}.action-row{flex-wrap:wrap;gap:.5rem;margin-top:.7rem;display:flex}.clip-editor{margin-top:.6rem}.waveform{background:var(--sunken);border:1px solid var(--border);touch-action:none;border-radius:0;height:84px;position:relative}.waveform-canvas{width:100%;height:100%;display:block}.trim-handle{cursor:ew-resize;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;width:44px;margin-left:-22px;padding:0;position:absolute;top:-6px;bottom:-6px}.trim-handle:before{content:"";background:var(--wave-edge);position:absolute;inset:0 21px}.trim-handle:after{content:"";background:var(--wave-edge);border:2px solid var(--surface);width:10px;height:30px;margin:-15px 0 0 -5px;position:absolute;top:50%;left:50%}.trim-handle:focus-visible:after{outline:2px solid var(--accent);outline-offset:2px}.clip-meta{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.75rem;display:flex}.clip-range{margin-right:auto}.link-button{color:var(--accent);white-space:nowrap;background:0 0;border:none;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.link-button[aria-pressed=true]{background:var(--accent);color:var(--accent-text)}button{font:inherit;touch-action:manipulation;cursor:pointer}.button{border:1px solid var(--border);background:var(--sunken);min-width:4.5rem;min-height:44px;color:var(--text);border-radius:10px;flex:1;padding:0 .75rem;font-size:.9rem;font-weight:600}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button.danger{color:var(--danger)}.button.wide{flex-basis:100%}.button:disabled{opacity:.5;cursor:default}.recording-panel{align-items:center;gap:.6rem;min-height:44px;display:flex}.rec-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:1.2s ease-in-out infinite armed}.rec-target{font-weight:600}.timer{font-variant-numeric:tabular-nums;color:var(--accent);margin-left:auto;font-size:1.1rem}.recording-panel .button{flex:none;min-width:5.5rem}.named-form{flex-direction:column;gap:.4rem;display:flex}.named-form label{color:var(--muted);font-size:.8rem}input[type=text]{border:1px solid var(--border);background:var(--sunken);min-height:44px;color:var(--text);border-radius:10px;padding:0 .75rem;font-family:inherit;font-size:16px}input[type=text]:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.pad,.rec-dot{transition:none;animation:none}}