:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#000;--surface:#000;--pink:#ff2d95;--pink-tint:#ff2d9524;--border:#ff2d9580;--text:#f5f5f7;--text-dim:#8a8f98;--color-idle:#9aa3b2;--color-count-in:#f5a524;--color-recording:#ff3b3b;--color-playing:#22c55e;--color-overdubbing:#ff8a1a;--color-stopped:#9aa3b2;--radius:14px;--touch:44px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);touch-action:manipulation;overscroll-behavior-y:contain;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;gap:20px;max-width:560px;margin:0 auto;padding:16px 16px 48px;display:flex}h1,h2,h3{margin:0}button,select,input{touch-action:manipulation;font-family:inherit}.app-header{justify-content:space-between;align-items:center;display:flex}.app-header h1{letter-spacing:.02em;font-size:1.25rem}.transport{background:var(--surface);border-radius:var(--radius);border:1.5px solid var(--border);flex-direction:column;align-items:center;gap:14px;padding:20px;display:flex}.status-chip{letter-spacing:.08em;border:1.5px solid var(--color-idle);color:var(--color-idle);background:0 0;border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:700}.transport[data-state=count-in] .status-chip{border-color:var(--color-count-in);color:var(--color-count-in)}.transport[data-state=recording] .status-chip{border-color:var(--color-recording);color:var(--color-recording)}.transport[data-state=playing] .status-chip{border-color:var(--color-playing);color:var(--color-playing)}.transport[data-state=overdubbing] .status-chip{border-color:var(--color-overdubbing);color:var(--color-overdubbing)}.transport[data-state=stopped] .status-chip{border-color:var(--color-stopped);color:var(--color-stopped)}.bpm-display{font-variant-numeric:tabular-nums;color:var(--pink);letter-spacing:.03em;font-size:1.05rem;font-weight:700}.bar-beat{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:.95rem}.loop-progress{background:0 0;border:1px solid #ffffff1f;border-radius:999px;width:100%;height:6px;overflow:hidden}.loop-progress-fill{background:var(--pink);width:0%;height:100%}.primary-btn{border:3px solid var(--color-recording);letter-spacing:.03em;width:168px;height:168px;color:var(--color-recording);cursor:pointer;background:0 0;border-radius:50%;font-size:1.1rem;font-weight:700;transition:border-color .15s,color .15s,transform 80ms}.primary-btn:active{background:var(--pink-tint);transform:scale(.97)}.primary-btn:disabled{opacity:.4;cursor:not-allowed}.transport[data-state=count-in] .primary-btn{border-color:var(--color-count-in);color:var(--color-count-in)}.transport[data-state=recording] .primary-btn{animation:1s infinite pulse-border}.transport[data-state=playing] .primary-btn{border-color:var(--color-playing);color:var(--color-playing)}.transport[data-state=overdubbing] .primary-btn{border-color:var(--color-overdubbing);color:var(--color-overdubbing)}.transport[data-state=stopped] .primary-btn{border-color:var(--color-stopped);color:var(--color-stopped)}@keyframes pulse-border{0%,to{border-color:var(--color-recording)}50%{border-color:color-mix(in srgb, var(--color-recording) 35%, transparent)}}.controls-row{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.control-btn{min-height:var(--touch);min-width:var(--touch);border:2px solid var(--pink);color:var(--pink);cursor:pointer;background:0 0;border-radius:10px;padding:10px 16px;font-size:.9rem;font-weight:600;transition:background-color .12s}.control-btn:active{background:var(--pink-tint)}.control-btn.small{min-height:var(--touch);min-width:var(--touch);padding:8px 12px;font-size:.8rem}.control-btn.danger{border-color:var(--color-recording);color:var(--color-recording)}.control-btn.overdub{border-color:var(--color-overdubbing);color:var(--color-overdubbing)}.control-btn.toggle.active{background:var(--pink);border-color:var(--pink);color:#000}.control-btn:disabled{opacity:.35;cursor:not-allowed}.level-meter{background:0 0;border:1px solid #ffffff1f;border-radius:999px;width:100%;height:10px;overflow:hidden}.level-meter-fill{background:linear-gradient(90deg, var(--color-playing), var(--color-count-in), var(--color-recording));width:0%;height:100%}.mixer{background:var(--surface);border-radius:var(--radius);border:1.5px solid var(--border);flex-direction:column;gap:12px;padding:16px;display:flex}.mixer-empty{color:var(--text-dim);font-size:.9rem}.mixer-list{flex-direction:column;gap:10px;display:flex}.mixer-row{border:1px solid #ffffff1a;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 8px;display:flex}.mixer-name{min-width:90px;color:var(--text-dim);font-size:.85rem}.mixer-volume{flex:1;min-width:100px}input[type=range]{appearance:none;height:var(--touch);background:0 0;min-width:44px}input[type=range]::-webkit-slider-runnable-track{background:#ffffff2e;border-radius:999px;height:4px}input[type=range]::-moz-range-track{background:#ffffff2e;border-radius:999px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--pink);cursor:pointer;background:#000;border-radius:50%;width:24px;height:24px;margin-top:-10px}input[type=range]::-moz-range-thumb{border:3px solid var(--pink);cursor:pointer;background:#000;border-radius:50%;width:24px;height:24px}.settings-panel{background:var(--surface);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius);width:min(480px,92vw);max-height:88vh;padding:0}.settings-panel::backdrop{background:#000000bf}.settings-header{background:var(--surface);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:16px;display:flex;position:sticky;top:0}.settings-body{flex-direction:column;gap:12px;padding:16px;display:flex;overflow-y:auto}.settings-body h3{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-top:10px;font-size:.85rem}.settings-row{min-height:var(--touch);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.settings-row label{color:var(--text-dim);flex:auto;min-width:140px;font-size:.9rem}.settings-row .inline-controls,.settings-row .segmented{flex:auto;justify-content:flex-end;min-width:0}.inline-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.bpm-value{text-align:center;font-variant-numeric:tabular-nums;min-width:72px}.settings-body select{min-height:var(--touch);border:2px solid var(--pink);min-width:0;max-width:100%;color:var(--text);background:0 0;border-radius:8px;flex:auto;padding:8px 10px;font-size:1rem}.segmented{border:2px solid var(--pink);border-radius:10px;display:flex;overflow:hidden}.segment-btn{min-height:var(--touch);color:var(--pink);cursor:pointer;background:0 0;border:none;flex:1;padding:10px 14px;font-size:.85rem;font-weight:600}.segment-btn.active{background:var(--pink);color:#000}.limitations-note{color:var(--text-dim);border:1px solid #ffffff1f;border-radius:10px;padding:10px;font-size:.8rem}.confirm-dialog{background:var(--surface);color:var(--text);border:1.5px solid var(--border);border-radius:var(--radius);width:min(380px,90vw);padding:20px}.confirm-dialog::backdrop{background:#000000bf}.dialog-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.dialog-actions button{min-height:var(--touch);border:2px solid var(--pink);color:var(--pink);cursor:pointer;background:0 0;border-radius:8px;padding:8px 16px;font-weight:600}.dialog-actions button.danger{border-color:var(--color-recording);color:var(--color-recording)}.toast-container{bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1000;flex-direction:column;gap:8px;width:min(420px,92vw);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{border:1.5px solid var(--pink);background:#000;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:.85rem;display:flex}.toast button{border:2px solid var(--pink);color:var(--pink);min-height:var(--touch);cursor:pointer;background:0 0;border-radius:6px;padding:6px 10px;font-weight:600}.unsupported{text-align:center;color:var(--text-dim);padding:40px 16px}.resume-overlay{z-index:900;text-align:center;background:#000000eb;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex;position:fixed;inset:0}@media (width<=420px){.primary-btn{width:140px;height:140px}.mixer-row{justify-content:space-between}.mixer-name{min-width:100%}.settings-row{flex-direction:column;align-items:stretch}.settings-row label{min-width:0}.settings-row .inline-controls,.settings-row .segmented,.settings-row>button,.settings-body select{width:100%}.mixer-volume{flex-basis:100%;order:1}}