:root{--base-h:270;--accent-h:41;--gray-1:oklch(.165 .009 var(--base-h));--gray-2:oklch(.205 .012 var(--base-h));--gray-3:oklch(.24 .016 var(--base-h));--gray-4:oklch(.275 .019 var(--base-h));--gray-5:oklch(.31 .021 var(--base-h));--gray-6:oklch(.345 .022 var(--base-h));--gray-7:oklch(.4 .023 var(--base-h));--gray-8:oklch(.48 .025 var(--base-h));--gray-9:oklch(.56 .026 var(--base-h));--gray-10:oklch(.62 .026 var(--base-h));--gray-11:oklch(.72 .022 var(--base-h));--gray-12:oklch(.925 .01 var(--base-h));--accent-1:oklch(.19 .02 var(--accent-h));--accent-2:oklch(.22 .035 var(--accent-h));--accent-3:oklch(.265 .055 var(--accent-h));--accent-4:oklch(.3 .075 var(--accent-h));--accent-5:oklch(.345 .095 var(--accent-h));--accent-6:oklch(.41 .11 var(--accent-h));--accent-7:oklch(.5 .13 var(--accent-h));--accent-8:oklch(.6 .16 var(--accent-h));--accent-9:#ff6e33;--accent-10:oklch(.74 .175 var(--accent-h));--accent-11:oklch(.79 .145 var(--accent-h));--accent-12:oklch(.91 .06 var(--accent-h));--gusta-pink:#f13f8a;--grad-gusta:linear-gradient(135deg, var(--accent-9), var(--gusta-pink));--bg:var(--gray-1);--bg-raised:var(--gray-2);--bg-panel:var(--gray-3);--bg-hover:var(--gray-4);--on-bg:var(--gray-6);--border:var(--gray-5);--border-strong:var(--gray-8);--hairline:oklch(100% 0 0/.05);--text:var(--gray-12);--text-dim:var(--gray-11);--text-faint:var(--gray-9);--select:var(--gray-12);--on-select:var(--gray-1);--accent:var(--accent-9);--accent-fill:var(--accent-9);--on-accent:var(--gray-1);--accent-soft:var(--accent-3);--focus-ring:var(--accent);--danger:#fb575d;--on-danger:var(--gray-1);--rec:var(--danger);--success:#6fd087;--on-success:var(--gray-1);--warn:#f0ba59;--solo:#59c5f5;--on-solo:var(--gray-1);--play:#58cd78;--meter-safe:var(--success);--meter-hot:var(--warn);--meter-clip:var(--danger);--scrim:oklch(.1 .01 var(--base-h) / .6);--chat-user:#2a3040;--grid-beat:oklch(100% 0 0/.06);--grid-sub:oklch(100% 0 0/.03);--shade-key:oklch(0% 0 0/.35);--shade-row:oklch(0% 0 0/.25);--note-edge:oklch(0% 0 0/.4);--on-tc:oklch(.16 .01 var(--base-h) / .8);--fn-1:oklch(78% .13 355);--fn-2:oklch(78% .13 80);--fn-3:oklch(78% .13 115);--fn-4:oklch(78% .13 150);--fn-5:oklch(78% .13 195);--fn-6:oklch(78% .13 250);--fn-7:oklch(78% .13 300);--fn-out:var(--gray-9);--knob-hi:#3d434f;--knob-lo:#21252d;--knob-edge:#14161b;--led-bg:#0b0907;--led-text:#ff9142;--led-inset:oklch(0% 0 0/.7);--tc-l:.78;--tc-c:.13;--sheet-paper:var(--bg-raised);--sheet-ink:var(--text);--sheet-dim:var(--text-dim);--sheet-rule:var(--border-strong);--art-dark-stage:oklch(.165 .009 var(--base-h));--art-dark-plate:oklch(.205 .012 var(--base-h));--art-dark-ink:oklch(.925 .01 var(--base-h));--art-dark-dim:oklch(.72 .022 var(--base-h));--art-dark-faint:oklch(.56 .026 var(--base-h));--art-dark-hair:oklch(100% 0 0/.14);--art-dark-shade:oklch(0% 0 0/.5);--art-light-stage:oklch(.978 .004 var(--base-h));--art-light-plate:oklch(.945 .007 var(--base-h));--art-light-ink:oklch(.22 .02 var(--base-h));--art-light-dim:oklch(.46 .028 var(--base-h));--art-light-faint:oklch(.6 .025 var(--base-h));--art-light-hair:oklch(0% 0 0/.14);--art-light-shade:oklch(100% 0 0/.6);--art-accent:var(--accent-9);--art-pink:var(--gusta-pink);--surface:var(--bg-panel);--surface-2:var(--bg-raised);--panel:var(--bg-panel);--ok:var(--success);--text-muted:var(--text-dim);--shadow-1:0 1px 3px oklch(0% 0 0/.5);--shadow-2:0 10px 30px oklch(0% 0 0/.45), inset 0 1px 0 oklch(100% 0 0/.04);--shadow-3:0 16px 48px oklch(0% 0 0/.55);--glow-sm:0 0 0 1px color-mix(in oklch, var(--accent-9) 50%, transparent);--glow-md:0 0 12px color-mix(in oklch, var(--accent-9) 45%, transparent);--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-readout:"JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;--sans:var(--font-ui);--mono:var(--font-readout);--text-2xs:10px;--text-xs:11px;--text-sm:12px;--text-md:13px;--text-lg:15px;--text-xl:20px;--text-field:16px;--lh-tight:1;--lh-ui:1.25;--lh-body:1.45;--w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700;--track-caps:.06em;--track-readout:.04em;--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:10px;--sp-6:12px;--sp-8:16px;--sp-10:20px;--sp-12:24px;--sp-16:32px;--control-sm:24px;--control-md:28px;--control-lg:32px;--icon-sm:12px;--icon-md:16px;--icon-lg:20px;--icon-stroke:1.5px;--r-xs:3px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-full:999px;--dur-press:80ms;--dur-fast:.12s;--dur-base:.2s;--dur-slow:.32s;--ease-out:cubic-bezier(.2, 0, 0, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--beat:.5s;--pulse-rec:calc(var(--beat) * 2);--pulse-breathe:calc(var(--beat) * 4);--z-base:1;--z-raise:2;--z-sticky:3;--z-sticky-top:5;--z-scrim:25;--z-drag:30;--z-dock:40;--z-drawer:60;--z-overlay:100;--z-float:120;--z-menu:130;--z-toast:160;--z-modal:200;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--gray-1:oklch(.995 .002 var(--base-h));--gray-2:oklch(.978 .004 var(--base-h));--gray-3:oklch(.955 .006 var(--base-h));--gray-4:oklch(.93 .008 var(--base-h));--gray-5:oklch(.905 .01 var(--base-h));--gray-6:oklch(.875 .012 var(--base-h));--gray-7:oklch(.83 .015 var(--base-h));--gray-8:oklch(.72 .02 var(--base-h));--gray-9:oklch(.62 .025 var(--base-h));--gray-10:oklch(.56 .028 var(--base-h));--gray-11:oklch(.48 .028 var(--base-h));--gray-12:oklch(.22 .02 var(--base-h));--accent-1:oklch(.99 .008 var(--accent-h));--accent-2:oklch(.975 .018 var(--accent-h));--accent-3:oklch(.955 .03 var(--accent-h));--accent-4:oklch(.93 .05 var(--accent-h));--accent-5:oklch(.9 .07 var(--accent-h));--accent-6:oklch(.86 .09 var(--accent-h));--accent-7:oklch(.8 .11 var(--accent-h));--accent-8:oklch(.73 .14 var(--accent-h));--accent-10:oklch(.68 .19 var(--accent-h));--accent-11:oklch(.53 .15 var(--accent-h));--accent-12:oklch(.36 .09 var(--accent-h));--bg:var(--gray-3);--bg-raised:oklch(100% 0 0);--bg-panel:var(--gray-2);--bg-hover:var(--gray-4);--on-bg:var(--gray-5);--border:var(--gray-7);--border-strong:var(--gray-8);--hairline:oklch(0% 0 0/.06);--on-select:oklch(100% 0 0);--accent:var(--accent-11);--on-accent:oklch(.16 .01 var(--base-h));--danger:#c9222b;--on-danger:oklch(100% 0 0);--success:#1d7d3e;--on-success:oklch(100% 0 0);--warn:#935f00;--solo:#0072a3;--on-solo:oklch(100% 0 0);--play:#1d7d3e;--scrim:oklch(.2 .01 var(--base-h) / .35);--chat-user:#dfe5f0;--grid-beat:oklch(0% 0 0/.08);--grid-sub:oklch(0% 0 0/.04);--shade-key:oklch(0% 0 0/.16);--shade-row:oklch(0% 0 0/.055);--note-edge:oklch(0% 0 0/.25);--on-tc:oklch(100% 0 0/.9);--fn-1:oklch(55% .14 355);--fn-2:oklch(55% .14 80);--fn-3:oklch(55% .14 115);--fn-4:oklch(55% .14 150);--fn-5:oklch(55% .14 195);--fn-6:oklch(55% .14 250);--fn-7:oklch(55% .14 300);--fn-out:var(--gray-8);--knob-hi:#f6f7fa;--knob-lo:#d7dbe4;--knob-edge:#aab1bf;--led-bg:#f3e4d4;--led-text:#8a3a08;--led-inset:oklch(0% 0 0/.15);--tc-l:.52;--tc-c:.13;--shadow-1:0 1px 2px oklch(.2 .02 var(--base-h) / .18);--shadow-2:0 8px 24px oklch(.2 .02 var(--base-h) / .14);--shadow-3:0 16px 48px oklch(.2 .02 var(--base-h) / .18);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media print{:root,:root[data-theme=light]{--sheet-paper:#fff;--sheet-ink:#000;--sheet-dim:#3d3d3d;--sheet-rule:#6b6b6b}}:where([style*=--tc],.section-span){--tc-ink:var(--tc)}@supports not (color:oklch(from red l min(c, 0.1) h)){:root[data-theme=light] :where([style*=--tc],.section-span){--tc-ink:color-mix(in oklab, var(--tc) 62%, black)}}@supports (color:oklch(from red l min(c, 0.1) h)){:where([style*=--tc],.section-span){--tc-ink:oklch(from var(--tc) var(--tc-l) min(c, var(--tc-c)) h)}}:root{font:var(--text-md) / var(--lh-body) var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;--track-head-w:210px}*{box-sizing:border-box}body{margin:0}#root,.app{flex-direction:column;height:100dvh;display:flex}button{font:inherit;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), translate var(--dur-press) var(--ease-out);padding:5px 10px}@media (hover:hover){button:hover:not(:disabled):where(:not(.on,.active,.selected,.lit,[aria-pressed=true])){border-color:var(--border-strong)}}button:active:not(:disabled){translate:0 1px}textarea{font:inherit;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-sm)}:where(button,a[href],input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[role=button],[role=slider],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=tab]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}button:disabled{opacity:.4;cursor:default}input,select{font:inherit;color:var(--text);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px}input[type=checkbox],input[type=range]{accent-color:var(--select)}@media (prefers-reduced-motion:reduce){:root{--dur-press:0s;--dur-fast:0s;--dur-base:0s;--dur-slow:0s}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.render-spinner{animation-duration:1.6s!important;animation-iteration-count:infinite!important}.beat-led[data-pulse]{opacity:.9;animation:none!important}}body{background:var(--bg);color:var(--text);font:15px/1.6 var(--sans);margin:0}.tool-page{max-width:780px;margin:0 auto;padding:0 20px 72px}.tool-top{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:28px;padding:14px 0;display:flex}.tool-wordmark{letter-spacing:.02em;color:var(--text);align-items:center;gap:8px;font-weight:700;text-decoration:none;display:inline-flex}.tool-wordmark span{color:var(--accent)}.tool-top-spacer{flex:auto}.tool-cta{background:var(--accent-fill);color:var(--on-accent);border:1px solid var(--accent-fill);border-radius:6px;padding:6px 14px;font-weight:650;text-decoration:none;display:inline-block}.tool-cta:hover{filter:brightness(1.08)}h1{margin:0 0 10px;font-size:30px;line-height:1.2}h2{margin:40px 0 10px;padding-top:4px;font-size:20px}h3{margin:22px 0 6px;font-size:16px}.tool-lede{color:var(--text-dim);margin:0 0 22px;font-size:17px}p{margin:0 0 14px}a{color:var(--accent)}ul{margin:0 0 14px;padding-left:20px}li{margin-bottom:6px}code{font-family:var(--mono);background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:.92em}.tool-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;margin-bottom:16px;padding:20px}.dropzone{border:2px dashed var(--border);background:var(--bg-panel);text-align:center;cursor:pointer;border-radius:10px;padding:34px 20px;transition:border-color .12s}.dropzone:hover,.dropzone:focus-visible,.dropzone.is-over{border-color:var(--accent)}.dropzone-title{margin-bottom:4px;font-size:17px;font-weight:600}.dropzone-hint{color:var(--text-dim);font-size:13px}.dropzone input[type=file]{display:none}.tool-status{color:var(--text-dim);min-height:20px;margin-top:14px;font-size:14px}.tool-status:empty{min-height:0;margin-top:0}.tool-status.is-error{color:var(--danger)}.progress{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;height:8px;margin-top:12px;overflow:hidden}.progress-fill{background:var(--accent-fill);width:0;height:100%;transition:width .15s linear}.result{margin-top:18px;display:none}.result.is-visible{display:block}.result-headline{font-family:var(--mono);background:var(--led-bg);color:var(--led-text);border:1px solid var(--border);box-shadow:inset 0 2px 8px var(--led-inset);text-align:center;letter-spacing:.04em;border-radius:8px;padding:18px 20px;font-size:40px;font-weight:700}.result-sub{text-align:center;color:var(--text-dim);margin-top:8px;font-size:13px}.fact-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px;display:grid}.fact{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.fact-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.fact-value{font-family:var(--mono);margin-top:2px;font-size:17px}.stem-out{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;margin-top:12px;padding:12px 14px}.stem-out h3{margin:0 0 4px;font-size:15px}.stem-out p{color:var(--text-dim);margin:0 0 10px;font-size:13px}.stem-out audio{width:100%;margin-bottom:10px}.button-row{flex-wrap:wrap;gap:10px;display:flex}.btn-accent{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill);font-weight:600}.privacy-note{background:color-mix(in srgb, var(--accent) 10%, var(--bg-raised));border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));color:var(--text);border-radius:8px;align-items:flex-start;gap:10px;margin-bottom:30px;padding:10px 14px;font-size:13.5px;display:flex}.privacy-note svg{color:var(--accent);flex:none;margin-top:2px}.metro-display{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-bottom:18px;display:flex}.beat-dot{border:1px solid var(--border);background:var(--bg-panel);border-radius:50%;width:26px;height:26px}.beat-dot.is-accent{border-color:color-mix(in srgb, var(--accent) 60%, var(--border))}.beat-dot.is-active{background:var(--accent-fill);border-color:var(--accent-fill)}.metro-row{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;display:flex}.metro-row label{min-width:108px;color:var(--text-dim);font-size:13px}.metro-row input[type=range]{accent-color:var(--accent-fill);flex:180px}.metro-bpm{font-family:var(--mono);background:var(--led-bg);color:var(--led-text);border:1px solid var(--border);box-shadow:inset 0 2px 8px var(--led-inset);text-align:center;border-radius:8px;margin-bottom:14px;padding:10px 0;font-size:44px;font-weight:700}.metro-bpm small{letter-spacing:.1em;opacity:.75;font-size:14px;display:block}.faq details{border:1px solid var(--border);background:var(--bg-raised);border-radius:8px;margin-bottom:10px;padding:12px 16px}.faq summary{cursor:pointer;font-weight:600}.faq details p{color:var(--text-dim);margin:10px 0 0}.tool-links{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:14px 0 8px;display:grid}.tool-links a{background:var(--bg-raised);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:12px 14px;text-decoration:none;display:block}.tool-links a:hover{border-color:var(--accent)}.tool-links strong{color:var(--accent);margin-bottom:2px;display:block}.tool-links span{color:var(--text-dim);font-size:13px}.studio-cta{background:var(--bg-raised);border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border));text-align:center;border-radius:12px;margin-top:34px;padding:22px}.studio-cta h2{margin:0 0 8px}.studio-cta p{color:var(--text-dim);max-width:52ch;margin:0 auto 16px}.tool-footer{border-top:1px solid var(--border);color:var(--text-dim);flex-wrap:wrap;gap:14px;margin-top:40px;padding-top:16px;font-size:13px;display:flex}@media (width<=560px){h1{font-size:25px}.result-headline{font-size:32px}}.play-controls{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;display:flex}.play-octave{align-items:center;gap:6px;display:inline-flex}.play-readout{opacity:.7;font-variant-numeric:tabular-nums;margin-left:auto}.play-board{touch-action:none;-webkit-user-select:none;user-select:none;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;height:min(52vh,420px);display:grid}.play-col{border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;--bend:0;border-radius:10px;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 4px;display:flex;position:relative;overflow:hidden}.play-col.lit{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--bg-raised))}.play-degree{opacity:.6;font-size:12px}.play-col.lit .play-degree{color:var(--accent);opacity:1}.play-note{opacity:.45;font-size:11px}.play-string{background:linear-gradient(to bottom, transparent, var(--border) 12%, var(--border) 88%, transparent);width:2px;transform:translateY(calc(var(--bend) * -24px));border-radius:2px;flex:1;margin:8px 0}.play-col.lit .play-string{background:linear-gradient(to bottom, transparent, var(--accent) 12%, var(--accent) 88%, transparent);width:3px;box-shadow:0 0 12px color-mix(in srgb, var(--accent) 55%, transparent)}.play-bend{text-align:center;color:var(--accent);pointer-events:none;font:600 15px/1 ui-monospace,monospace;position:absolute;top:38%;left:0;right:0}.play-key{border:1px solid var(--border);text-align:center;opacity:.7;border-radius:5px;min-width:20px;padding:2px 5px;font:500 10px/1.4 ui-monospace,monospace;position:absolute;top:8px;right:8px}.play-key.on{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);opacity:1}.play-hint{opacity:.7;margin-top:12px;font-size:13px}