@font-face{font-family:Big Shoulders Display;font-style:normal;font-weight:500 900;font-display:block;src:url(/fonts/bigshoulders-var-latin.woff2)format("woff2")}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:400 800;font-display:block;src:url(/fonts/jbmono-var-latin.woff2)format("woff2")}:root{--paper:#faf9f6;--paper-2:#f1efea;--panel:#fff;--ink:#1a1917;--ink-2:#57544c;--line:#e4e1da;--graphite:#8c897f;--keys:#e39a12;--strings:#d23a50;--brass:#e5722b;--winds:#5f9a46;--synth:#3f5bec;--bass:#8b44ad;--voice:#12a394;--perc:#6b6860;--beat:var(--keys);--focus:var(--synth);--font-display:"Big Shoulders Display", "Arial Narrow", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--r-pill:100px;--r-lg:22px;--r-md:16px;--r-sm:9px;--r-xs:5px;--shadow-1:0 2px 8px #00000024;--shadow-2:0 8px 22px #00000014;--shadow-3:0 24px 60px -34px #0006;--dur-1:.12s;--dur-2:.15s;--dur-3:.2s;--dur-4:.3s;--dur-5:.5s;--ease-bloom:cubic-bezier(.2, 1.3, .4, 1);--ease-out:cubic-bezier(.22, .61, .36, 1);--hairline:1px}[data-theme=dark]{--paper:#151412;--paper-2:#1e1c19;--panel:#1b1916;--ink:#faf9f6;--ink-2:#a5a199;--line:#302d28;--graphite:#7e7b73}@keyframes beat-pulse{0%,to{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}@keyframes bloom{0%{transform:translate(-50%,50%)scale(0)}to{transform:translate(-50%,50%)scale(1)}}@keyframes bloom-in{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes note-hit{0%{transform:scale(1)}40%{transform:scale(1.45)}to{transform:scale(1)}}@keyframes blink{0%,to{opacity:.35}50%{opacity:1}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background var(--dur-4) ease, color var(--dur-4) ease;margin:0;padding:0;font-size:14px;line-height:1.5}body:before{content:"";z-index:0;pointer-events:none;opacity:.42;background:repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--line) 39px, var(--line) 40px);position:fixed;inset:0}#root{z-index:1;max-width:1080px;padding:env(safe-area-inset-top) calc(24px + env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));margin:0 auto;position:relative}h1,h2,h3,.wordmark,.btn{font-family:var(--font-display)}h2{letter-spacing:-.01em;margin:0;font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:800;line-height:.95}h3{letter-spacing:-.005em;margin:0;font-size:clamp(1.15rem,3vw,1.5rem);font-weight:700;line-height:1}.eyebrow{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);font-size:11px;font-weight:500}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}::selection{background:var(--ink);color:var(--paper)}.beat{background:var(--beat);border-radius:50%;flex:none;width:.15em;height:.15em;display:inline-block}.beat.pulsing{animation:1.4s ease-in-out infinite beat-pulse}.app-header{background:var(--panel);border-bottom:var(--hairline) solid var(--line);transition:background var(--dur-4) ease;justify-content:space-between;align-items:center;gap:12px;margin:0 calc(50% - 50vw) 32px;padding:14px max(24px,50vw - 516px);display:flex}.wordmark{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.42em;display:flex}.logomark{border-radius:var(--r-sm);background:var(--ink);width:30px;height:30px;color:var(--paper);font-family:var(--font-display);flex:none;justify-content:center;align-items:center;font-size:22px;font-weight:900;line-height:1;display:inline-flex;position:relative}.logomark .beat{width:4px;height:4px;position:absolute;bottom:5px;right:4px}.wordmark h1{letter-spacing:-.005em;color:var(--ink);align-items:baseline;gap:.12em;margin:0;font-size:26px;font-weight:800;line-height:.8;display:inline-flex}.wordmark .tagline{margin-left:8px}.header-nav{align-items:center;gap:8px;display:flex}.beta-tag{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);border:var(--hairline) solid var(--line);border-radius:var(--r-pill);padding:4px 10px;font-size:10px;font-weight:700}@media (max-width:720px){.wordmark .tagline,.beta-tag{display:none}}.btn{-webkit-appearance:none;appearance:none;border:var(--hairline) solid var(--ink);color:var(--ink);font-family:var(--font-display);letter-spacing:.01em;border-radius:var(--r-pill);cursor:pointer;transition:transform var(--dur-2) ease, background var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:11px 20px;font-size:1rem;font-weight:800;line-height:1;display:inline-flex}@media (hover:hover){.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:default;color:var(--ink);background:0 0;transform:none}.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}@media (hover:hover){.btn-primary:hover{background:var(--ink);color:var(--paper)}}.btn-primary:disabled{background:var(--ink);color:var(--paper)}@media (hover:hover){.btn-danger-ghost:hover{background:var(--ink);color:var(--paper)}}.btn-small{min-height:34px;padding:8px 14px;font-size:.85rem}.history-btn{padding:8px 12px;font-size:17px;line-height:1}@media (pointer:coarse){.history-btn{min-width:44px;min-height:40px}}.btn-big,.btn-large{padding:13px 26px;font-size:1.15rem}select,input[type=number],input[type=text],input[type=email]{-webkit-appearance:none;appearance:none;border:none;border-bottom:2px solid var(--ink);color:var(--ink);font-family:var(--font-mono);transition:border-color var(--dur-2) ease;background:0 0;border-radius:0;outline:none;padding:7px 2px;font-size:13px}select:focus,input[type=number]:focus,input[type=text]:focus,input[type=email]:focus{border-bottom-color:var(--focus)}select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%231A1917'/%3E%3C/svg%3E");background-position:right 4px center;background-repeat:no-repeat;padding-right:18px}[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23FAF9F6'/%3E%3C/svg%3E")}.bpm-field{flex-wrap:wrap;align-items:center;gap:4px;display:inline-flex}.bpm-field input{text-align:center}.bpm-field input:disabled{opacity:.4}.bpm-step{-webkit-appearance:none;appearance:none;border-radius:var(--r-pill);border:var(--hairline) solid var(--line);width:34px;height:34px;color:var(--ink);font-family:var(--font-mono);cursor:pointer;transition:border-color var(--dur-2) ease, background var(--dur-2) ease;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:0 0;flex:none;justify-content:center;align-items:center;font-size:15px;line-height:1;display:inline-flex}@media (hover:hover){.bpm-step:hover:not(:disabled){border-color:var(--ink)}}.bpm-step:active:not(:disabled){background:var(--paper-2)}.bpm-step:disabled{opacity:.4;cursor:default}@media (pointer:coarse){.bpm-step{width:40px;height:40px}}.bpm-slider{margin-left:6px}@media (pointer:coarse){.bpm-slider{width:170px}}input[type=range]{-webkit-appearance:none;appearance:none;background:var(--line);border-radius:2px;outline:none;width:130px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--ink);cursor:pointer;border:3px solid var(--paper);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--ink);cursor:pointer;border:3px solid var(--paper);width:10px;height:10px;box-shadow:var(--shadow-1);border-radius:50%}.toggle{cursor:pointer;font-family:var(--font-mono);color:var(--ink-2);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;display:inline-flex}.toggle input[type=checkbox]{-webkit-appearance:none;appearance:none;border-radius:var(--r-pill);background:var(--line);cursor:pointer;width:36px;height:20px;transition:background var(--dur-3) var(--ease-out);flex:none;margin:0;position:relative}.toggle input[type=checkbox]:after{content:"";width:16px;height:16px;box-shadow:var(--shadow-1);transition:left var(--dur-3) var(--ease-out);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.toggle input[type=checkbox]:checked{background:var(--voice)}.toggle input[type=checkbox]:checked:after{left:18px}.toggle input[type=checkbox]:disabled{opacity:.4;cursor:default}.panel{background:var(--panel);border:var(--hairline) solid var(--line);border-radius:var(--r-md);transition:background var(--dur-4) ease}.label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2);font-size:10px;font-weight:700}.record-view{flex-direction:column;align-items:center;gap:26px;padding:24px 0 20px;display:flex}.record-hero{text-align:center;max-width:640px}.record-hero h2{margin:0 0 12px;font-size:clamp(2.4rem,7vw,3.8rem)}.record-hero p{color:var(--ink-2);margin:0;font-size:14px;line-height:1.7}.mic-stage{flex-direction:column;align-items:center;gap:18px;padding:34px 60px 28px;display:flex}.mic-button{cursor:pointer;background:var(--ink);width:124px;height:124px;color:var(--paper);font-family:var(--font-display);letter-spacing:.04em;transition:transform var(--dur-2) ease;box-shadow:var(--shadow-3);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;font-weight:800;display:flex;position:relative}@media (hover:hover){.mic-button:hover{transform:translateY(-2px)}}.mic-button:active{transform:scale(.97)}.mic-button:disabled{opacity:.5;cursor:default}.mic-status{font-family:var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;align-items:center;gap:8px;min-height:22px;font-size:13px;display:inline-flex}.mic-status .beat{width:8px;height:8px}.countin-count{font-family:var(--font-display);color:var(--ink);font-size:44px;font-weight:800;line-height:1}.level-meter{align-items:flex-end;gap:3px;height:42px;display:flex}.level-meter .bar{background:var(--graphite);opacity:.9;border-radius:3px;width:5px;min-height:3px;transition:height 60ms linear}.pitch-lane{width:100%;max-width:560px}.pitch-lane canvas{border:var(--hairline) solid var(--line);border-radius:var(--r-sm);width:100%;display:block}.pitch-readout{font-family:var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:baseline;gap:8px;min-height:18px;margin-top:6px;font-size:12px;display:flex}.pitch-note{color:var(--ink);font-weight:700}.record-options{flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;display:flex}.record-alt{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.record-warning{font-family:var(--font-mono);color:var(--ink);border:var(--hairline) solid var(--ink);border-radius:var(--r-pill);padding:6px 14px;font-size:12px}.divider-word{color:var(--ink-2);font-size:12px}.calibrate-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.cal-chip{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);border:var(--hairline) solid var(--line);border-radius:var(--r-pill);padding:5px 12px;font-size:10px}.cal-steps{font-family:var(--font-mono);color:var(--ink);margin:0;padding-left:22px;font-size:13px;line-height:2}.cal-title{font-family:var(--font-display);margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1}.cal-hint,.cal-note,.cal-summary{font-family:var(--font-mono);color:var(--ink-2);text-align:center;max-width:46ch;margin:0;font-size:13px;line-height:1.7}.cal-summary{color:var(--ink)}.processing-view{flex-direction:column;align-items:center;gap:26px;padding:110px 0;display:flex}.processing-beat{background:var(--beat);border-radius:50%;width:22px;height:22px;animation:1.4s ease-in-out infinite beat-pulse}.processing-view .stage-text,.shared-view .stage-text{font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink-2);font-size:13px}.review-view{flex-direction:column;align-items:center;gap:22px;padding:10px 0 12px;display:flex}.review-head{text-align:center;max-width:640px}.review-head h2{margin:0 0 12px}.review-head p{color:var(--ink-2);margin:0;font-size:13px;line-height:1.7}.review-panel{flex-direction:column;gap:14px;width:100%;max-width:880px;padding:18px;display:flex}.take-health{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.take-health .btn-small{margin-left:auto}.health-chip{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;border-radius:var(--r-pill);border:var(--hairline) solid var(--line);color:var(--ink-2);padding:6px 12px;font-size:10px;font-weight:700}.health-chip.warn{color:var(--ink);border-color:var(--ink)}.health-chip.good{color:var(--ink-2)}.contour-wrap{width:100%}.contour-wrap canvas{border-radius:var(--r-sm);display:block}.review-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.review-summary{font-family:var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.review-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.review-hint{color:var(--ink-2);text-align:center;max-width:620px;margin:0;font-size:11px;line-height:1.6}.editor-view{flex-direction:column;gap:16px;display:flex}.editor-topbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.editor-topbar .name-input{border-bottom-color:#0000;min-width:210px;font-size:15px;font-weight:700}@media (hover:hover){.editor-topbar .name-input:hover{border-bottom-color:var(--ink)}}.editor-topbar .name-input:focus{border-bottom-color:var(--focus)}.save-hint{letter-spacing:.04em;color:var(--ink-2);font-size:11px}.spacer{flex:1}.transport-bar{flex-wrap:wrap;align-items:center;gap:16px;padding:12px 16px;display:flex}.play-btn{background:var(--ink);width:52px;height:52px;color:var(--paper);cursor:pointer;transition:transform var(--dur-2) ease;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:18px;display:flex}@media (hover:hover){.play-btn:hover{transform:translateY(-2px)}}.loop-btn{border:var(--hairline) solid var(--line);width:38px;height:38px;color:var(--ink-2);cursor:pointer;transition:transform var(--dur-2) ease, background var(--dur-2) ease, color var(--dur-2) ease;background:0 0;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:17px;line-height:1;display:flex}@media (hover:hover){.loop-btn:hover{transform:translateY(-2px)}}.loop-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.transport-time{font-family:var(--font-mono);color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:74px;font-size:12px}.instrument-chip{border-radius:var(--r-pill);border:var(--hairline) solid var(--line);cursor:pointer;transition:border-color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);font-family:var(--font-mono);color:var(--ink-2);background:0 0;align-items:center;gap:9px;min-height:40px;padding:8px 16px;display:flex}@media (hover:hover){.instrument-chip:hover{border-color:var(--c,var(--ink))}}.instrument-chip.active{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}.chip-dot{background:var(--c,var(--graphite));width:9px;height:9px;transition:background var(--dur-3) var(--ease-out);border-radius:50%;flex:none}.instrument-chip.active .chip-dot{background:#fff}.instrument-chip .meta{flex-direction:column;align-items:flex-start;line-height:1.3;display:flex}.instrument-chip .name{text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-size:12px;font-weight:700}.instrument-chip.active .name{color:#fff}.instrument-chip .sub{color:var(--ink-2);font-size:10px}.instrument-chip.active .sub{color:#fffc}.instrument-chip .caret{color:var(--ink-2);margin-left:2px;font-size:10px}.instrument-chip.active .caret{color:#fffc}.octave-control{align-items:center;gap:8px;display:flex}.feel-chips{gap:6px;display:flex}.feel-chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.landing-view{flex-direction:column;gap:52px;max-width:100%;padding:12px 0 40px;display:flex}.landing-hero{text-align:left;max-width:760px;padding-top:20px}.landing-hero .eyebrow{align-items:center;gap:8px;margin-bottom:18px;display:inline-flex}.landing-hero .eyebrow .beat{width:6px;height:6px}.landing-hero h2{letter-spacing:-.01em;margin:0 0 20px;font-size:clamp(3.2rem,10vw,6.4rem);font-weight:800;line-height:.9}.landing-sub{color:var(--ink-2);max-width:560px;margin:0 0 26px;font-size:14px;line-height:1.7}.landing-ctas{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.landing-helper{color:var(--ink-2);font-size:12px;font-style:normal}.landing-privacy{color:var(--ink-2);margin-top:18px;font-size:12px}.landing-privacy strong{color:var(--ink)}.hum-motif{width:100%;max-width:760px;height:auto;margin-top:36px;display:block}.hum-motif .motif-note{transform-origin:50%;transform-box:fill-box;animation:bloom-in var(--dur-5) var(--ease-bloom) backwards}.landing-steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.landing-step{text-align:left;padding:24px}.landing-step .eyebrow{display:block}.landing-step h3{margin:12px 0 8px}.landing-step p{color:var(--ink-2);margin:0;font-size:12px;line-height:1.7}.landing-signup{text-align:left;padding:28px 24px}.landing-signup h3{margin:0 0 14px}.signup-row{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.signup-row input{min-width:240px;font-size:14px}.signup-thanks{color:var(--ink-2);margin:0}.signup-thanks a{color:var(--ink)}.landing-foot{letter-spacing:.04em;color:var(--ink-2);justify-content:flex-start;gap:16px;font-size:11px;display:flex}.landing-foot a{color:var(--ink-2)}.record-poly{flex-direction:column;align-items:center;gap:6px;margin-top:10px;display:flex}.poly-tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);border:var(--hairline) solid var(--line);border-radius:var(--r-pill);margin-left:4px;padding:2px 8px;font-size:10px;font-weight:700}.poly-hint{color:var(--ink-2);text-align:center;max-width:420px;font-size:11px;line-height:1.6}.library-disclosure{color:var(--ink-2);margin:-6px 0 14px;font-size:11px}.report-overlay{z-index:50;background:#1a191766;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}[data-theme=dark] .report-overlay{background:#0000008c}.report-dialog{width:min(440px,100vw - 32px);box-shadow:var(--shadow-3);flex-direction:column;gap:12px;padding:20px 22px;display:flex}.report-dialog h3{margin:0}.report-blurb{color:var(--ink-2);margin:0;font-size:12px;line-height:1.6}.shared-view{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:560px;margin:0 auto;padding:40px 20px;display:flex}.shared-kicker{align-items:center;gap:8px;display:inline-flex}.shared-kicker .beat{width:6px;height:6px}.shared-name{margin:0}.shared-meta{color:var(--ink-2);font-size:12px}.shared-roll{border-radius:var(--r-md);background:var(--paper-2);border:var(--hairline) solid var(--line);width:100%;max-width:560px;height:190px}.play-btn-hero{width:96px;height:96px;box-shadow:var(--shadow-3);margin:18px 0 0;font-size:34px}.shared-status-slot{justify-content:center;align-items:center;min-height:20px;display:flex}.shared-warmup{align-items:center;gap:8px;display:inline-flex}.shared-warmup .beat-dot{background:var(--beat);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite beat-pulse}.shared-warmup .stage-text{animation:rise-in var(--dur-4) var(--ease-out)}.shared-ctas{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.shared-sub{color:var(--ink-2);max-width:420px;line-height:1.6}.shared-footnote{color:var(--ink-2);max-width:420px;margin-top:22px;font-size:11px;line-height:1.6}.shared-footnote strong{color:var(--ink)}.gate-email{border:none;border-bottom:2px solid var(--ink);width:100%;color:var(--ink);font-family:var(--font-mono);box-sizing:border-box;background:0 0;outline:none;padding:8px 2px;font-size:14px}.gate-email:focus{border-bottom-color:var(--focus)}.account-code{letter-spacing:.2em;font-size:20px;font-weight:500}.account-privacy{letter-spacing:.04em;font-size:11px}.account-privacy a{color:var(--ink-2)}.report-comment{resize:vertical;border-radius:var(--r-sm);border:var(--hairline) solid var(--line);background:var(--paper-2);width:100%;color:var(--ink);font-family:var(--font-mono);box-sizing:border-box;outline:none;padding:10px 12px;font-size:12px;line-height:1.6}.report-comment:focus{border-color:var(--focus)}.report-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.playback-tempo{font-family:var(--font-mono);color:var(--ink-2);white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:inline-flex}.playback-tempo input{width:62px}.octave-value{font-family:var(--font-mono);text-align:center;font-variant-numeric:tabular-nums;min-width:26px;font-size:12px}.instrument-browser{flex-direction:column;gap:12px;max-height:320px;padding:14px 16px;display:flex;overflow-y:auto}.browser-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.browser-title{color:var(--ink-2);font-size:11px}.family-section{flex-direction:column;gap:7px;display:flex}.family-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--ink-2);font-size:10px;font-weight:700}.family-chips{flex-wrap:wrap;gap:7px;display:flex}.instrument-chip.compact{gap:7px;min-height:34px;padding:6px 13px}.instrument-chip.compact .name{font-size:11px}.instrument-chip.compact .sub{font-size:9px}.roll-wrap{border-radius:var(--r-md);outline-offset:-3px;max-height:480px;overflow:auto}.roll-wrap canvas{touch-action:pan-x pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block}.roll-help{color:var(--ink-2);justify-content:space-between;align-items:center;gap:10px;padding:8px 12px 10px;font-size:11px;display:flex}.controls-bar{flex-wrap:wrap;align-items:center;gap:26px;padding:16px 18px;display:flex}.control-group{flex-direction:column;gap:8px;display:flex}.control-group .row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.control-group .value{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:11px}input.bpm-input{width:74px}.key-suggestions{margin-top:2px}.key-suggestions .btn-small{min-height:26px;padding:4px 10px;font-size:.8rem}.chord-popover{z-index:50;background:var(--panel);border:var(--hairline) solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-3);grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;display:grid;position:fixed}.chord-popover button{border:var(--hairline) solid var(--line);color:var(--ink);border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-mono);transition:border-color var(--dur-2) ease, background var(--dur-2) ease;background:0 0;flex-direction:column;align-items:center;gap:2px;padding:7px 10px;font-size:12px;display:flex}@media (hover:hover){.chord-popover button:hover{border-color:var(--c,var(--ink))}}.chord-popover button.current{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}.chord-popover .roman{color:var(--ink-2);font-size:10px}.chord-popover button.current .roman{color:#fffc}.library-view{flex-direction:column;gap:18px;padding-top:8px;display:flex}.library-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.library-head h2{margin:0}.library-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;display:grid}.project-card{cursor:pointer;transition:box-shadow var(--dur-2) ease, transform var(--dur-2) ease;flex-direction:column;gap:12px;padding:24px;display:flex}@media (hover:hover){.project-card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}}.project-card .take-dot{background:var(--c,var(--graphite));border-radius:50%;width:11px;height:11px}.project-card .take-instrument{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);align-items:center;gap:8px;font-size:10px;font-weight:700;display:inline-flex}.project-card h3{margin:0}.project-card .meta{color:var(--ink-2);flex-wrap:wrap;gap:10px;font-size:11px;display:flex}.project-card .foot{justify-content:space-between;align-items:center;margin-top:2px;display:flex}.project-card .date{letter-spacing:.04em;color:var(--ink-2);font-size:10px}.library-empty{text-align:center;color:var(--ink-2);padding:70px 24px;font-size:13px}.toast{bottom:calc(26px + env(safe-area-inset-bottom));background:var(--panel);border:var(--hairline) solid var(--line);color:var(--ink);border-radius:var(--r-md);font-family:var(--font-mono);box-shadow:var(--shadow-3);z-index:100;overflow-wrap:anywhere;width:max-content;max-width:90vw;animation:rise-in var(--dur-3) var(--ease-out);align-items:baseline;gap:10px;padding:12px 20px;font-size:12px;line-height:1.6;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast:before{content:"";background:var(--voice);border-radius:50%;flex:none;align-self:center;width:7px;height:7px}.toast.error{border-color:var(--ink)}.toast.error:before{background:var(--ink)}.quality-note{color:var(--ink-2);font-size:11px}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.app-header,.tab-bar,.btn,.mic-button,.play-btn,.loop-btn,.instrument-chip,.project-card,.landing-ctas,.eyebrow{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}html[data-native] body{overscroll-behavior:none}html[data-native] #root{padding-top:0;padding-bottom:calc(24px + var(--tab-bar-h) + env(safe-area-inset-bottom))}html[data-native] .app-header{padding-top:calc(12px + env(safe-area-inset-top));margin-bottom:20px;padding-bottom:12px}html[data-native] .toast{bottom:calc(14px + var(--tab-bar-h) + env(safe-area-inset-bottom))}:root{--tab-bar-h:56px}.tab-bar{z-index:40;height:calc(var(--tab-bar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-top:var(--hairline) solid var(--line);transition:background var(--dur-4) ease;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tab-bar .tab{-webkit-appearance:none;appearance:none;min-height:var(--tab-bar-h);font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:color var(--dur-3) var(--ease-out);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0;font-size:11px;font-weight:700;display:flex}.tab-bar .tab .beat{opacity:0;width:6px;height:6px;transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-5) var(--ease-bloom);transform:scale(.6)}.tab-bar .tab.active{color:var(--ink)}.tab-bar .tab.active .beat{opacity:1;transform:scale(1)}.tab-bar .tab:focus-visible{outline-offset:-3px}.settings-view{flex-direction:column;gap:14px;max-width:640px;display:flex}.settings-view h2{margin-bottom:6px}.settings-section{flex-direction:column;gap:12px;padding:20px 22px;display:flex}.settings-row{flex-direction:column;gap:12px;display:flex}.settings-blurb{color:var(--ink-2);margin:0;font-size:12px;line-height:1.6}.settings-blurb strong{color:var(--ink)}.settings-actions,.segmented{flex-wrap:wrap;gap:8px;display:flex}.segmented .btn.active{background:var(--ink);color:var(--paper)}.settings-links{flex-direction:column;gap:10px;font-size:12px;display:flex}.settings-links a{color:var(--ink);text-underline-offset:3px;min-height:24px;text-decoration:underline}.settings-version{letter-spacing:.04em;color:var(--ink-2);font-size:11px}.onboarding-view{flex-direction:column;gap:32px;display:flex}.onboarding-view .landing-steps{margin-top:0}.onboarding-ctas{flex-direction:column;align-items:stretch}.onboarding-ctas .btn{justify-content:center}.onboarding-ctas .landing-helper{text-align:center}@keyframes vt-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes vt-out{to{opacity:0}}::view-transition-old(root){animation:vt-out var(--dur-2) var(--ease-out) both}::view-transition-new(root){animation:vt-in var(--dur-4) var(--ease-out) both}.app-header{view-transition-name:app-header}.tab-bar{view-transition-name:tab-bar}::view-transition-old(app-header){animation:none}::view-transition-new(app-header){animation:none}::view-transition-old(tab-bar){animation:none}::view-transition-new(tab-bar){animation:none}@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}::view-transition-old(*){animation:none!important}::view-transition-new(*){animation:none!important}}.editor-actions{display:contents}:root{--transport-h:72px}html[data-dock=transport] #root{padding-bottom:calc(24px + var(--transport-h) + env(safe-area-inset-bottom))}html[data-dock=transport] .toast{bottom:calc(12px + var(--transport-h) + env(safe-area-inset-bottom))}@keyframes sheet-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@media (max-width:720px){.editor-topbar{gap:8px}.editor-topbar .name-input{flex:1;min-width:110px}.editor-actions{scrollbar-width:none;scroll-snap-type:x proximity;flex-basis:100%;gap:8px;padding:2px 0 6px;display:flex;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),#0000)}.editor-actions::-webkit-scrollbar{display:none}.editor-actions .btn{scroll-snap-align:start;flex:none}.editor-actions .btn-primary{order:-1}.roll-panel{margin-left:calc(-24px - env(safe-area-inset-left));margin-right:calc(-24px - env(safe-area-inset-right));border-left:0;border-right:0;border-radius:0}.roll-wrap{border-radius:0;max-height:60vh}.roll-help{padding:8px 20px 10px;font-size:10px}.transport-bar.docked{z-index:40;min-height:var(--transport-h);padding:10px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));box-shadow:var(--shadow-3);view-transition-name:transport;border-bottom:0;border-left:0;border-right:0;border-radius:0;gap:10px;position:fixed;bottom:0;left:0;right:0}.transport-bar.docked .transport-time{min-width:40px;font-size:11px}.transport-bar.docked .instrument-chip.current{flex:1;min-width:0}.transport-bar.docked .instrument-chip .meta{flex:1;min-width:0;padding-right:6px}.transport-bar.docked .instrument-chip .name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.transport-bar.docked .instrument-chip .sub,.transport-bar.docked .spacer{display:none}.sheet-backdrop{z-index:45;background:#1a191766;position:fixed;inset:0}[data-theme=dark] .sheet-backdrop{background:#0000008c}.instrument-browser.sheet{z-index:46;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:72vh;padding:0 16px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-3);animation:sheet-up var(--dur-4) var(--ease-out) both;border-bottom:0;position:fixed;bottom:0;left:0;right:0}.instrument-browser.sheet .browser-header{z-index:1;background:var(--panel);padding:14px 0 10px;position:sticky;top:0}.controls-bar{gap:18px;padding:16px}.control-group{flex-basis:100%}.control-group input[type=range]{flex:1;width:auto;min-width:120px}.playback-tempo{flex-basis:100%}}::view-transition-old(transport){animation:none}::view-transition-new(transport){animation:none}.layer-strip{scrollbar-width:none;align-items:center;gap:8px;padding:2px 0 4px;display:flex;overflow-x:auto}.layer-strip::-webkit-scrollbar{display:none}.layer-item{flex:none;align-items:center;gap:4px;display:inline-flex}.layer-item.muted .instrument-chip{opacity:.45}.layer-mute,.layer-delete{min-height:28px;padding:4px 10px;font-size:.8rem}.layer-item.muted .layer-mute{background:var(--ink);color:var(--paper)}.record-headphones{color:var(--ink-2);font-size:12px}.sheet-backdrop{z-index:45;background:#1a191766;position:fixed;inset:0}[data-theme=dark] .sheet-backdrop{background:#0000008c}.sheet{z-index:46;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:76vh;box-shadow:var(--shadow-3);animation:sheet-up var(--dur-4) var(--ease-out) both;border-bottom:0;flex-direction:column;padding:0;display:flex;position:fixed;bottom:0;left:0;right:0}.sheet-header{border-bottom:var(--hairline) solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 10px;display:flex}.sheet-title{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-size:11px;font-weight:700}.sheet-body{padding:14px 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column;gap:14px;display:flex;overflow-y:auto}.sheet-actions{flex-direction:column;gap:8px;display:flex}.sheet-actions .btn{justify-content:center;width:100%}.sheet-section{flex-direction:column;gap:8px;display:flex}html[data-dock=transport] .app-header{display:none}.editor-view.phone{z-index:30;background:var(--paper);padding:calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));flex-direction:column;gap:8px;display:flex;position:fixed;inset:0}.editor-view.phone .editor-topbar{flex-wrap:nowrap;flex:none;gap:6px}.editor-view.phone .editor-topbar .name-input{flex:1;min-width:0;font-size:14px}.editor-view.phone .save-hint{display:none}.layer-tabs{scrollbar-width:none;flex:none;align-items:center;gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.layer-tabs::-webkit-scrollbar{display:none}.layer-tabs .instrument-chip.compact .sub{display:none}.layer-tabs .layer-add{flex:none;width:34px;min-height:34px;padding:0;font-size:18px;line-height:1}.editor-view.phone .roll-panel{min-height:0;margin:0 calc(-12px - env(safe-area-inset-right)) 0 calc(-12px - env(safe-area-inset-left));border-left:0;border-right:0;border-radius:0;flex-direction:column;flex:1;display:flex}.editor-view.phone .roll-wrap{border-radius:0;flex:1;max-height:none}.editor-view.phone .roll-help{flex:none;padding:6px 16px 8px}.editor-view.phone .transport-bar.docked{margin:0 calc(-12px - env(safe-area-inset-right)) 0 calc(-12px - env(safe-area-inset-left));flex:none;position:static}.editor-view.phone .transport-bar .adjust-btn{flex:none}.sheet .controls-bar{box-shadow:none;background:0 0;border:0;gap:18px;padding:0}.sheet .control-group{flex-basis:100%}.sheet .control-group input[type=range]{flex:1;width:auto;min-width:120px}.sheet .instrument-browser{max-height:none;box-shadow:none;background:0 0;border:0;padding:0;overflow:visible}.project-open{font:inherit;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0;padding:0}.note-controls{padding:8px 12px;font-size:12px}.note-controls summary{cursor:pointer}.note-controls label{align-items:center;gap:8px;margin-top:8px;display:flex}.note-controls select{min-width:0;max-width:100%}.note-control-actions{flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;display:flex}.project-card .foot{gap:var(--space-2,8px);flex-wrap:wrap}.editor-view.phone .note-controls{flex:none;max-height:35vh;overflow:auto}.editor-view.phone .transport-bar .instrument-chip .name{display:block}.editor-view.phone .transport-bar .instrument-chip{overflow:hidden}.library-view input{font:inherit;color:var(--ink);border:0;border-bottom:2px solid var(--ink);background:0 0;min-width:0;max-width:100%}.sheet a{color:var(--ink);text-underline-offset:.2em}@media (max-width:720px){.editor-view.phone .transport-time{display:none}.editor-view.phone .transport-bar .btn-small{min-height:40px}}