:root{--bg:#0f1117;--surface:#1a1d27;--surface-hover:#232736;--border:#2c3142;--text:#f2f4f8;--text-muted:#9aa3b5;--accent:#7c5cff;--accent-hover:#9178ff;--danger:#ff5c7a;--radius:14px;--gap:1rem;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}.container{max-width:720px;margin:0 auto;padding:2rem 1.25rem}h1{letter-spacing:-.02em;margin:0 0 .25rem;font-size:clamp(2rem,6vw,3rem);font-weight:800}.subtitle{color:var(--text-muted);margin:0 0 2rem;font-size:1.125rem}button{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-width:56px;min-height:56px;color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;padding:.875rem 1.5rem;font-size:1.0625rem;font-weight:600;transition:background .15s,border-color .15s,transform 50ms}button:hover{background:var(--surface-hover)}button:active{transform:scale(.98)}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-hover)}.capture{flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem;display:flex}.record-btn{border:4px solid var(--border);background:var(--surface);border-radius:50%;place-items:center;width:128px;height:128px;padding:0;display:grid}.record-dot{background:var(--danger);border-radius:50%;width:56px;height:56px;transition:border-radius .2s,width .2s,height .2s}.record-btn.recording{background:var(--danger);border-color:var(--danger);animation:1.4s ease-in-out infinite pulse}.record-btn.recording:hover{background:var(--danger)}.record-btn.recording .record-dot{background:#fff;border-radius:8px;width:40px;height:40px}@keyframes pulse{0%,to{box-shadow:0 0 #ff5c7a80}50%{box-shadow:0 0 0 16px #ff5c7a00}}.record-status{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:600}.level{background:var(--surface);border-radius:3px;width:200px;height:6px;overflow:hidden}.level-fill{background:linear-gradient(90deg, #3ddc97, #ffd166 70%, var(--danger));transform-origin:0;height:100%;transform:scaleX(0)}.upload-link{color:var(--text-muted);margin:0}.upload-link .link-btn,.message .link-btn,.best-take-nudge .link-btn,.duet-nudge .link-btn{min-width:0;min-height:0;color:var(--accent-hover);font-size:inherit;font-weight:inherit;background:0 0;border:none;padding:.25rem;text-decoration:underline}.message{border-radius:var(--radius);color:#ffc2cd;text-align:center;background:#ff5c7a1f;margin:0;padding:.75rem 1rem}.waveform{border-radius:var(--radius);background:var(--surface);--wave-color:var(--accent);--wave-played-color:#c7b8ff;--playhead-color:#fff;width:100%;height:140px;display:block}.duration{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:auto}[hidden]{display:none!important}.step{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:#1a1d2780;margin-bottom:1.5rem;padding:1.25rem}.step-title{align-items:center;gap:.625rem;margin:0 0 1rem;font-size:1.25rem;display:flex}.step-num{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:2rem;height:2rem;font-size:1rem;display:inline-grid}.step .capture{margin-bottom:0}.take{margin-top:1.25rem}.waveform-original{--wave-color:#5a6075;--wave-played-color:#9aa3b5;height:90px}.take-tip{border:1px solid var(--border);background:var(--surface);border-left:3px solid #ffb347;border-radius:8px;align-items:flex-start;gap:.5rem;margin-top:.5rem;padding:.5rem .75rem;font-size:.9rem;display:flex}.take-tip-clipped{border-left-color:var(--danger)}.take-tip span{flex:1}.take-tip-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 .25rem}.take-info{color:var(--text-muted);margin:.5rem 0 0;font-size:.9375rem}.takes{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.best-take-nudge,.duet-nudge{color:var(--text-muted);margin:.4rem 0 0;font-size:.85rem}.take-chip{border:1px solid var(--border);color:var(--text-muted);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:.3rem .75rem;font-size:.875rem}.take-chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}.take-chip-wrap{align-items:center;gap:.15rem;display:inline-flex}.take-chip-rename,.take-chip-delete{color:var(--text-muted);font:inherit;cursor:pointer;background:0 0;border:none;padding:0 .3rem;font-size:.75rem;line-height:1}.take-chip-rename:hover,.take-chip-delete:hover{color:var(--text)}.vibes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;display:grid}.vibe{text-align:left;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.875rem;display:flex}.vibe[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#7c5cff2e}.vibe-emoji{font-size:1.75rem;line-height:1}.vibe-name{font-size:1.0625rem}.vibe-desc{color:var(--text-muted);font-size:.8125rem;font-weight:400;line-height:1.35}.surprise-btn{margin-top:.75rem}.sliders{grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem;margin-top:1.5rem;display:grid}.slider{flex-direction:column;gap:.25rem;display:flex}.slider-label{font-weight:600}.slider-ends{color:var(--text-muted);justify-content:space-between;font-size:.8125rem;display:flex}input[type=range]{width:100%;height:32px;accent-color:var(--accent);touch-action:pan-y;margin:0}.autotune{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1.25rem}.toggle{cursor:pointer;align-items:center;gap:.75rem;min-height:44px;font-weight:600;display:inline-flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-track{background:var(--border);border-radius:15px;width:52px;height:30px;transition:background .15s;position:relative}.toggle-track:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle input:checked+.toggle-track:after{transform:translate(22px)}.toggle input:focus-visible+.toggle-track{outline:3px solid var(--accent);outline-offset:2px}.autotune-opts{grid-template-columns:repeat(2,1fr);align-items:end;gap:1rem 1.5rem;margin-top:.75rem;display:grid}.field{flex-direction:column;gap:.25rem;font-weight:600;display:flex}select{border:1px solid var(--border);background:var(--surface);min-height:44px;color:var(--text);font:inherit;border-radius:10px;padding:0 .75rem}.hint{color:var(--text-muted);grid-column:1/-1;margin:0;font-size:.9375rem}.hint:empty{display:none}.error-banner{border-radius:var(--radius);color:#ffc2cd;background:#ff5c7a24;align-items:center;gap:.75rem;margin:0 0 1rem;padding:.75rem .75rem .75rem 1rem;display:flex}.error-banner .link-btn{min-width:40px;min-height:40px;color:inherit;background:0 0;border:none;margin-left:auto;padding:0}.result{position:relative}.mixing{z-index:1;border-radius:var(--radius);background:#0f1117bf;justify-content:center;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:600;display:flex;position:absolute;inset:0}.spinner{border:3px solid #fff3;border-top-color:var(--accent-hover);border-radius:50%;width:26px;height:26px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.listen{align-items:center;gap:1rem;margin-top:1rem;display:flex}.play-btn{border-radius:50%;width:80px;height:80px;padding:0;font-size:1.75rem}.ab{border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);background:var(--surface);padding:4px;display:inline-flex}.ab button{min-height:48px;color:var(--text-muted);background:0 0;border:none;padding:.5rem 1rem}.ab button[aria-checked=true]{background:var(--accent);color:#fff}.download-btn{width:100%;margin-top:1.25rem;font-size:1.125rem}.fx-drawer{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-top:1rem}.fx-summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;min-height:52px;padding:0 1rem;font-weight:600;list-style:none;display:flex}.fx-summary::-webkit-details-marker{display:none}.fx-summary:after{content:"▾";color:var(--text-muted);margin-left:auto;transition:transform .15s}.fx-drawer[open]>.fx-summary:after{transform:rotate(180deg)}.fx-summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}.fx-body{padding:0 1rem 1rem}.fx-group{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin:1rem 0 .5rem;font-size:.8125rem;font-weight:700}.fx-group:first-child{margin-top:.25rem}.fx-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start;gap:.625rem;display:grid}.fx-card{border:1px solid var(--border);background:var(--bg);border-radius:12px;transition:border-color .15s,background .15s}.fx-card.on{border-color:var(--accent);background:#7c5cff1f}.fx-toggle{text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:.625rem;width:100%;min-height:64px;padding:.625rem .75rem;display:flex}.fx-toggle:hover{background:#ffffff08}.fx-emoji{font-size:1.5rem;line-height:1}.fx-text{flex-direction:column;flex:1;min-width:0;display:flex}.fx-name{font-size:.9875rem}.fx-desc{color:var(--text-muted);font-size:.8125rem;font-weight:400;line-height:1.3}.fx-switch{background:var(--border);border-radius:12px;flex:none;width:40px;height:24px;transition:background .15s;position:relative}.fx-switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px}.fx-toggle[aria-checked=true] .fx-switch{background:var(--accent)}.fx-toggle[aria-checked=true] .fx-switch:after{transform:translate(16px)}.fx-controls{flex-direction:column;gap:.25rem;padding:0 .75rem .625rem;display:flex}.fx-styles{gap:.5rem;margin-top:.25rem;display:flex}.fx-style{flex:1;min-width:0;min-height:44px;padding:.25rem .5rem;font-size:.9375rem}.fx-style[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#7c5cff2e}.fx-value{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.fx-reset{text-align:right;margin:0 0 .25rem}.fx-reset .link-btn{min-width:0;min-height:44px;color:var(--accent-hover);background:0 0;border:none;padding:.25rem;font-size:.9375rem;font-weight:500;text-decoration:underline}.fx-reset .link-btn:disabled{color:var(--text-muted);opacity:.6;cursor:default;text-decoration:none}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=480px){.container{padding:1.25rem .875rem}.step{padding:1rem}.vibes{grid-template-columns:repeat(2,1fr)}.sliders,.autotune-opts{grid-template-columns:1fr}.listen{flex-wrap:wrap}.fx-grid{grid-template-columns:1fr}.fx-body{padding:0 .625rem .75rem}.fx-reset{text-align:center}}.download-btn+.download-btn{margin-top:.5rem}.trim-wrap{position:relative}.trim-dim{pointer-events:none;background:#0a0c12a6;position:absolute;top:0;bottom:0}.trim-dim-start{border-radius:var(--radius) 0 0 var(--radius);left:0}.trim-dim-end{border-radius:0 var(--radius) var(--radius) 0;right:0}.trim-handle{cursor:ew-resize;touch-action:none;outline:none;width:32px;margin-left:-16px;position:absolute;top:0;bottom:0}.trim-handle:before{content:"";background:var(--accent);border-radius:2px;width:4px;position:absolute;top:0;bottom:0;left:14px}.trim-handle:after{content:"";background:var(--accent);border-radius:7px;width:14px;height:28px;margin-top:-14px;position:absolute;top:50%;left:9px;box-shadow:0 1px 4px #0006}.trim-handle:focus-visible:after,.trim-handle.dragging:after{background:#fff}.trim-off .trim-dim,.trim-off .trim-handle{display:none}.trim-apply{border:1px solid var(--accent);border-radius:var(--radius);color:var(--text);font:inherit;cursor:pointer;background:0 0;margin:.5rem auto 0;padding:.5rem 1rem;display:block}