:root{--bg:#fff4e6;--ink:#1d1a17;--muted:#7a6f63;--red:#ff4b3e;--card:#1d1a17;--radius:22px;--font:ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--safe-b:env(safe-area-inset-bottom,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;margin:0}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible{outline:3px solid var(--red);outline-offset:3px}.screen{min-height:100dvh;padding:18px 20px calc(14px + var(--safe-b));flex-direction:column;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:8px;font-size:20px;font-weight:800;display:flex}.brand.small{font-size:17px}.dot{background:var(--red);border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 3px #ff4b3e33}.privacy,.sampler{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.credit{text-align:center;color:var(--muted);-webkit-user-select:none;user-select:none;margin:4px 0 0;font-size:12px;font-style:italic}.privacy{text-align:center;color:var(--muted);margin:10px 0 0;font-size:13px}.pill{border:2px solid var(--ink);background:#fff;border-radius:999px;justify-content:center;align-items:center;gap:6px;min-height:48px;padding:0 20px;font-size:16px;font-weight:700;transition:transform 80ms;display:inline-flex}.pill:active{transform:scale(.96)}.pill.small{white-space:nowrap;min-height:40px;padding:0 14px;font-size:14px}.pill.ghost{color:#fff;background:0 0;border-color:#ffffff80}.home-body{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:22px;padding:24px 0;display:flex}h1{letter-spacing:-.04em;margin:0 0 8px;font-size:clamp(34px,8vw,64px);font-weight:900;line-height:1.02}.squiggle{color:var(--red)}.cta{background:var(--red);color:#fff;letter-spacing:-.02em;border-radius:999px;justify-content:center;align-items:center;gap:14px;width:min(100%,420px);min-height:84px;font-size:26px;font-weight:900;transition:transform 80ms,box-shadow 80ms;display:inline-flex;box-shadow:0 6px #c22b20,0 18px 40px #ff4b3e59}.cta:active{transform:translateY(4px);box-shadow:0 2px #c22b20,0 10px 24px #ff4b3e4d}.cta-dot{background:#fff;border-radius:50%;width:22px;height:22px;animation:1.6s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.8;transform:scale(.75)}}.secondary{flex-wrap:wrap;justify-content:center;gap:10px;width:min(100%,420px);display:flex}.secondary .pill{flex:180px}.sub{color:var(--muted);margin:0;font-size:15px}.capture{color:#fff;background:#000;gap:16px}.capture .privacy{color:#ffffff8c}.viewfinder{border-radius:var(--radius);background:#151311;flex:1;min-height:0;position:relative;overflow:hidden}.viewfinder video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.countdown{background:var(--red);text-align:center;font-variant-numeric:tabular-nums;opacity:0;border-radius:999px;min-width:56px;padding:6px 14px;font-size:28px;font-weight:900;transition:opacity .15s,transform .15s;position:absolute;top:14px;right:16px;transform:scale(.8)}.recording .countdown{opacity:1;transform:none}.precount{color:#fff;text-shadow:0 6px 30px #00000073;font-variant-numeric:tabular-nums;pointer-events:none;place-items:center;font-size:clamp(120px,30vw,220px);font-weight:900;display:grid;position:absolute;inset:0}.record-now{background:var(--red);color:#fff;border-radius:999px;align-items:center;gap:10px;min-height:52px;padding:0 22px;font-size:18px;font-weight:900;display:none;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.record-now .cta-dot{width:14px;height:14px}.counting .record-now{display:inline-flex}.counting .rec-core{background:#ff4b3e99;width:40px;height:40px}.capture-status{white-space:nowrap;background:#0000008c;border-radius:999px;padding:8px 16px;font-size:15px;font-weight:700;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.capture-controls{grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.capture-controls .pill{justify-self:start}.rec-button{place-items:center;width:86px;height:86px;display:grid;position:relative}.rec-button:disabled{opacity:.4;cursor:default}.rec-button svg{position:absolute;inset:0;transform:rotate(-90deg)}.ring-track,.ring{fill:none;stroke-width:6px}.ring-track{stroke:#ffffffd9}.ring{stroke:var(--red);stroke-linecap:round;opacity:0}.recording .ring{opacity:1}.recording .ring-track{stroke:#ffffff40}.rec-core{background:var(--red);border-radius:50%;width:64px;height:64px;transition:all .18s}.recording .rec-core{border-radius:8px;width:32px;height:32px}.sampler{gap:12px;height:100dvh;padding-top:12px}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.topbar nav{flex-wrap:wrap;gap:8px;display:flex}.stage{--hue:8;border-radius:var(--radius);background:var(--card);isolation:isolate;flex:1;place-items:center;min-height:140px;display:grid;position:relative;overflow:hidden}.stage-tint{opacity:0;mix-blend-mode:color;pointer-events:none;position:absolute;inset:0}.stage[data-kind=audio] .stage-tint{mix-blend-mode:soft-light}.stage video,.stage .poster{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.stage .mirrored{transform:scaleX(-1)}.stage #wave{width:100%;height:70%;padding:0 6%}.stage[data-kind=video] #wave,.stage[data-kind=audio] video,.stage[data-kind=audio] .poster{display:none}.note-badge{background:hsl(var(--hue) 90% 60%);color:#fff;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;border-radius:999px;padding:6px 12px;font-size:15px;font-weight:800;transition:opacity .3s;position:absolute;top:12px;left:12px}.note-badge.show{opacity:1;transition:none}.tap-hint{color:var(--ink);pointer-events:none;background:#ffffffeb;border-radius:999px;padding:8px 16px;font-weight:800;animation:1.4s ease-in-out infinite nudge;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.tap-hint.gone{display:none}@keyframes nudge{50%{transform:translate(-50%,5px)}}.timeline{touch-action:none;cursor:pointer;border-radius:14px;flex:none;width:100%;height:60px;display:block}.timeline.dragging{cursor:grabbing!important}.controls{flex-wrap:wrap;flex:none;align-items:center;gap:8px;display:flex}.trim-label{margin-left:auto}.seg{border:2px solid var(--ink);background:#fff;border-radius:999px;display:flex;overflow:hidden}.seg button{white-space:nowrap;min-height:40px;padding:0 14px;font-size:14px;font-weight:800}.seg button+button{border-left:2px solid #eadccb}.seg button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.fx-slider{border:2px solid var(--ink);background:#fff;border-radius:999px;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-size:14px;font-weight:800;display:flex}.fx-slider input{width:96px;accent-color:var(--red);touch-action:none}.fx-slider output{font-variant-numeric:tabular-nums;min-width:46px;color:var(--muted);font-size:13px}.sampler[data-mode=pitch] .chop-only,.sampler[data-mode=chop] .pitch-only{display:none!important}.octave{border:2px solid var(--ink);background:#fff;border-radius:999px;align-items:center;display:flex;overflow:hidden}.octave-btn{width:48px;height:40px;font-size:20px;font-weight:900}.octave-btn:active,.octave-value:active{background:#f3e6d6}.octave-value{font-variant-numeric:tabular-nums;border-inline:2px solid #eadccb;flex-direction:column;justify-content:center;align-items:center;min-width:72px;height:40px;font-size:17px;font-weight:900;line-height:1;display:flex}.octave-value small{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px;font-size:9px;font-weight:800}.octave-value.shifted{color:var(--red)}.trim-label{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px;font-weight:700}.keyboard{--gap:4px;--black-w:calc(100% / var(--whites) * .62);gap:var(--gap);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex:none;height:clamp(150px,30dvh,250px);display:flex;position:relative}.key{--hue:8;cursor:pointer;justify-content:center;align-items:flex-end;padding-bottom:12px;font-size:13px;font-weight:800;transition:background-color .15s,transform 60ms;display:flex;position:relative}.key.active{transition:none}.key.white{border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);color:#b9ada0;background:#fff;border-radius:6px 6px 14px 14px;flex:1}.key.black{z-index:2;width:var(--black-w);background:var(--ink);color:#fff6;border-radius:4px 4px 10px 10px;height:60%;padding-bottom:8px;font-size:12px;position:absolute;top:0;box-shadow:0 4px #000}.key-chop{text-align:center;color:hsl(var(--hue) 75% 45%);pointer-events:none;font-size:15px;font-weight:900;position:absolute;top:10px;left:0;right:0}.key.black .key-chop{color:hsl(var(--hue) 90% 70%);font-size:13px}.keyboard[data-mode=chop] .key.white:not(.unused){box-shadow:inset 0 -6px 0 hsl(var(--hue) 90% 60%), 0 5px 0 var(--ink)}.keyboard[data-mode=chop] .key.white.active{box-shadow:0 2px 0 var(--ink)}.keyboard[data-mode=chop] .key.active .key-chop{color:#fff}.key.unused{opacity:.35}.key.root.white:before,.key.root.black:before{content:"";border:2px dotted var(--red);border-radius:50%;width:8px;height:8px;position:absolute;top:12px}.key.active{background:hsl(var(--hue) 90% 62%);color:#fff}.key.white.active{box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}.key.black.active{transform:translateY(2px);box-shadow:0 2px #000}.key-label{pointer-events:none}.hint{text-align:center;color:var(--muted);margin:4px 0 0;font-size:13px}.hint .touch-only{display:none}@media (hover:none) and (pointer:coarse){.hint .desktop-only,.key-label{display:none}.hint .touch-only{display:inline}}kbd{background:#fff;border:1.5px solid #cbbfb1;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:12px;font-weight:800}.loading{z-index:20;background:#fff4e6eb;place-content:center;justify-items:center;gap:16px;font-size:18px;font-weight:800;display:grid;position:fixed;inset:0}.spinner{border:5px solid #ff4b3e33;border-top-color:var(--red);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{z-index:30;left:50%;top:calc(14px + env(safe-area-inset-top,0px));background:var(--ink);color:#fff;border-radius:18px;flex-wrap:wrap;align-items:center;gap:10px;width:min(100% - 24px,520px);padding:12px 12px 12px 18px;font-size:15px;font-weight:600;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 12px 30px #00000040}.toast>span{flex:200px}.toast-close{color:#ffffffb3;border-radius:50%;width:40px;height:40px}@media (width<=640px){.screen{padding-left:12px;padding-right:12px}.controls{gap:6px}.seg button{padding:0 10px;font-size:13px}.seg .ico,.trim-label{display:none}.octave-btn{width:36px}.octave-value{min-width:50px}.fx-slider{flex:40%;order:1;gap:6px;min-width:0;padding:0 10px;font-size:13px}.fx-slider output{min-width:38px}.fx-slider input{flex:1;width:0;min-width:0}.keyboard{--gap:3px;height:clamp(150px,30dvh,230px)}.timeline{height:52px}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation:none!important}}