body,html{margin:0;padding:0;height:100%;width:100%;font-family:Arial,sans-serif}#app{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;transition:background-color .5s}h1,h2{margin:0;text-align:center}#heading{font-size:3em;margin-bottom:20px}#subheading{font-size:1.5em}.visualizer-container.svelte-2upeh2{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}svg.svelte-2upeh2{display:block}.bars-visualizer-container.svelte-2yzk34{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}svg.svelte-2yzk34{display:block;background-color:transparent}.particle-visualizer-container.svelte-d54ahc{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:radial-gradient(ellipse at center,#1a1a2e,#0f0f1a)}svg.svelte-d54ahc{display:block}.note-glows.svelte-d54ahc circle:where(.svelte-d54ahc){transition:opacity .1s ease-out}.circular-visualizer-container.svelte-oa6v2i{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:radial-gradient(ellipse at center,#1a1a2e,#0f0f1a);display:flex;justify-content:center;align-items:center}svg.svelte-oa6v2i{max-width:90vh;max-height:90vh}.active-segments.svelte-oa6v2i path:where(.svelte-oa6v2i){transition:opacity .08s ease-out}.container.svelte-18hb63y{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#161622,#08080f)}svg.svelte-18hb63y{display:block;width:100%;height:100%}.container.svelte-1f0wuqu{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:radial-gradient(ellipse at center,#1a1a2a,#0a0a13);display:flex;justify-content:center;align-items:center}svg.svelte-1f0wuqu{max-width:95vmin;max-height:95vmin}.container.svelte-7jhio8{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:#08080f}canvas.svelte-7jhio8{display:block;width:100%;height:100%}.legend.svelte-7jhio8{position:absolute;top:0;left:8px;height:100%;pointer-events:none;font-family:var(--synth-font-mono, monospace);font-size:10px;color:#ffffff59}.tick.svelte-7jhio8{position:absolute;transform:translateY(-50%)}.container.svelte-1qrf34c{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:#07070f}canvas.svelte-1qrf34c{display:block;width:100%;height:100%}.clear-btn.svelte-1qrf34c{position:absolute;bottom:24px;left:50%;transform:translate(-50%);font-family:var(--synth-font-mono, monospace);font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#0006;color:#fff9;cursor:pointer;transition:all .2s}.clear-btn.svelte-1qrf34c:hover{color:#fff;border-color:#fff6}.container.svelte-klcprc{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:#000}canvas.svelte-klcprc{display:block;width:100%;height:100%}.container.svelte-1po42l7{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden;background:#05050e}canvas.svelte-1po42l7{display:block;width:100%;height:100%}.container.svelte-wvauyk{width:100vw;height:100vh;position:fixed;top:0;left:0;background:radial-gradient(ellipse at center,#16161f,#08080f);display:flex;align-items:center;justify-content:center;padding:6vh 4vw;box-sizing:border-box}.piano.svelte-wvauyk{--black-w: calc(100% / var(--white-count) * .6);position:relative;width:100%;height:50vh;max-height:60vh;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}.white-row.svelte-wvauyk{display:grid;grid-template-columns:repeat(var(--white-count),1fr);height:100%;width:100%;gap:1px;background:#00000059;border-radius:4px;overflow:hidden}.white.svelte-wvauyk{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;background:#f7f7f0;transition:background .1s ease-out}.white[data-active=true].svelte-wvauyk>.surface:where(.svelte-wvauyk){box-shadow:inset 0 -2px 8px #00000026}.white.svelte-wvauyk .surface:where(.svelte-wvauyk){position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;transition:background .08s ease-out;pointer-events:none}.white.svelte-wvauyk .label:where(.svelte-wvauyk){position:relative;z-index:1;font-family:var(--synth-font-mono, monospace);font-size:clamp(8px,.9vw,12px);color:#00000080;pointer-events:none}.black-row.svelte-wvauyk{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.black.svelte-wvauyk{position:absolute;top:0;width:var(--black-w);height:62%;background:#0d0d14;border-radius:0 0 4px 4px;box-shadow:0 4px 6px #00000080;transition:background .08s ease-out}.black[data-active=true].svelte-wvauyk{background:var(--c);box-shadow:inset 0 -2px 6px #0006,0 0 12px var(--c)}.theme-select.svelte-qtjn4l{background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.12));border-radius:var(--synth-radius-sm, 6px);color:var(--synth-text-dim, #aaa);font-family:var(--synth-font-mono, monospace);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:6px 24px 6px 10px;cursor:pointer;transition:all .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.theme-select.svelte-qtjn4l:hover{color:var(--synth-text, #fff);border-color:var(--synth-accent, #ff6b6b)}.theme-select.svelte-qtjn4l:focus{outline:none;border-color:var(--synth-accent, #ff6b6b);box-shadow:0 0 0 2px #ff6b6b33}.status-strip.svelte-1r2894b{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.row.svelte-1r2894b{display:flex;flex-wrap:wrap;gap:4px}.chord-row.svelte-1r2894b{display:flex;justify-content:flex-start;min-height:22px}.chip.svelte-1r2894b{display:inline-flex;align-items:center;gap:5px;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#0000004d;color:var(--synth-text-dim, #8a8a95);border:1px solid var(--synth-border, rgba(255,255,255,.05))}.chip.status.ready.svelte-1r2894b{color:var(--synth-accent-green, #4ade80)}.chip.status.loading.svelte-1r2894b{color:var(--synth-accent-yellow, #facc15)}.chip.chord.svelte-1r2894b{background:var(--synth-accent, #ff6b6b);color:#fff;border-color:var(--synth-accent, #ff6b6b);font-size:11px;letter-spacing:1.5px;padding:4px 12px;min-width:48px;justify-content:center;transition:opacity .15s ease-out,background .15s ease-out}.chip.chord.empty.svelte-1r2894b{background:transparent;color:var(--synth-label, #6b6b78);border-color:var(--synth-border, rgba(255,255,255,.08));opacity:.55}.led.svelte-1r2894b{width:6px;height:6px;border-radius:50%;background:#333;box-shadow:inset 0 1px 2px #00000080}.led.on.svelte-1r2894b{background:var(--synth-accent-green, #4ade80);box-shadow:0 0 6px var(--synth-accent-green, #4ade80)}.led.pulse.svelte-1r2894b{background:var(--synth-accent-yellow, #facc15);animation:svelte-1r2894b-pulse 1s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.led.pulse.svelte-1r2894b{animation:none}}@keyframes svelte-1r2894b-pulse{0%,to{opacity:1}50%{opacity:.4}}.control-group.svelte-1aupt23{margin-bottom:12px}.control-label.svelte-1aupt23{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin-bottom:6px}.synth-select.svelte-1aupt23{width:100%;font-family:var(--synth-font-mono, monospace);font-size:12px;color:var(--synth-text, #e0e0e8);background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.12));border-radius:var(--synth-radius-sm, 6px);padding:8px 32px 8px 12px;cursor:pointer;box-shadow:inset 0 2px 4px #0006;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:all .15s ease}.synth-select.svelte-1aupt23:hover{border-color:var(--synth-accent, #ff6b6b)}.synth-select.svelte-1aupt23:focus{outline:none;border-color:var(--synth-accent, #ff6b6b);box-shadow:inset 0 2px 4px #0006,0 0 0 2px #ff6b6b33}.control-group.svelte-86yfo7{margin-bottom:12px}.control-label.svelte-86yfo7{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin:0 0 6px}.grid.svelte-86yfo7{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.viz-chip.svelte-86yfo7{font-family:var(--synth-font-mono, monospace);font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--synth-text, #e0e0e8);background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.1));border-radius:var(--synth-radius-sm, 6px);padding:7px 6px;cursor:pointer;transition:all .15s ease;box-shadow:inset 0 1px #ffffff08}.viz-chip.svelte-86yfo7:hover{background:var(--synth-panel, #252532);border-color:var(--synth-accent, #ff6b6b);color:#fff}.viz-chip.active.svelte-86yfo7{background:var(--synth-accent, #ff6b6b);color:#fff;border-color:var(--synth-accent, #ff6b6b);box-shadow:0 0 10px #ff6b6b4d}.control-group.svelte-arq31n{margin-bottom:12px}.control-label.svelte-arq31n{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin:0 0 6px}.preset-row.svelte-arq31n{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.preset-chip.svelte-arq31n{font-family:var(--synth-font-mono, monospace);font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--synth-border-light, rgba(255,255,255,.12));background:var(--synth-bg, #1a1a24);color:var(--synth-text-dim, #aaa);cursor:pointer;transition:all .15s}.preset-chip.svelte-arq31n:hover{color:#fff;border-color:var(--synth-accent, #ff6b6b)}.preset-chip.active.svelte-arq31n{background:var(--synth-accent, #ff6b6b);color:#fff;border-color:var(--synth-accent, #ff6b6b)}.preset-desc.svelte-arq31n{font-size:10px;color:var(--synth-text-dim, #888);margin:0 0 8px;line-height:1.4;font-style:italic}.swatches.svelte-arq31n{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.swatch.svelte-arq31n{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}.swatch.svelte-arq31n .label:where(.svelte-arq31n){font-family:var(--synth-font-mono, monospace);font-size:8px;color:var(--synth-label, #6b6b78)}.swatch.svelte-arq31n input[type=color]:where(.svelte-arq31n){width:100%;height:24px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:var(--c);padding:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none}.swatch.svelte-arq31n input[type=color]:where(.svelte-arq31n):disabled{cursor:not-allowed;opacity:.7}.swatch.svelte-arq31n input[type=color]:where(.svelte-arq31n)::-webkit-color-swatch-wrapper{padding:0}.swatch.svelte-arq31n input[type=color]:where(.svelte-arq31n)::-webkit-color-swatch{border:none;border-radius:3px}.swatch.svelte-arq31n input[type=color]:where(.svelte-arq31n)::-moz-color-swatch{border:none;border-radius:3px}.control-group.svelte-1nuwzev{margin-bottom:12px}.control-label.svelte-1nuwzev{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin-bottom:6px}.file-drop-zone.svelte-1nuwzev{display:block;position:relative;border:2px dashed var(--synth-border-light, rgba(255,255,255,.15));border-radius:var(--synth-radius-md, 8px);padding:16px;text-align:center;transition:all .2s ease;background:#0003;cursor:pointer}.file-drop-zone.svelte-1nuwzev:hover,.file-drop-zone.drag-over.svelte-1nuwzev{border-color:var(--synth-accent, #ff6b6b);background:#ff6b6b0d}.file-input.svelte-1nuwzev{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.file-label.svelte-1nuwzev{display:inline-flex;align-items:center;gap:8px;color:var(--synth-label, #888);font-size:11px;pointer-events:none}.file-label.svelte-1nuwzev svg:where(.svelte-1nuwzev){opacity:.6}.audio-controls.svelte-1nuwzev{display:flex;align-items:center;justify-content:space-between;background:#0000004d;border-radius:var(--synth-radius-sm, 8px);padding:8px 12px}.file-name.svelte-1nuwzev{font-family:var(--synth-font-mono, monospace);font-size:11px;color:var(--synth-text-dim, #aaa)}.audio-buttons.svelte-1nuwzev{display:flex;gap:6px}.play-btn.svelte-1nuwzev,.clear-btn.svelte-1nuwzev{width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.play-btn.svelte-1nuwzev{background:var(--synth-accent, #ff6b6b);color:#fff}.play-btn.svelte-1nuwzev:hover{filter:brightness(1.1);box-shadow:0 0 12px #ff6b6b80}.play-btn.playing.svelte-1nuwzev{background:var(--synth-accent-yellow, #facc15)}.clear-btn.svelte-1nuwzev{background:#ffffff1a;color:var(--synth-label, #888)}.clear-btn.svelte-1nuwzev:hover{background:#ef44444d;color:#ef4444}.analyzing-indicator.svelte-1nuwzev{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px;color:var(--synth-accent, #ff6b6b)}.analyzing-dot.svelte-1nuwzev{width:6px;height:6px;border-radius:50%;background:var(--synth-accent, #ff6b6b);animation:svelte-1nuwzev-pulse 1s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.analyzing-dot.svelte-1nuwzev{animation:none}}@keyframes svelte-1nuwzev-pulse{0%,to{opacity:1}50%{opacity:.4}}.control-group.svelte-1d26b1r{margin-bottom:12px}.control-label.svelte-1d26b1r{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin-bottom:6px}.synth-select.svelte-1d26b1r{width:100%;font-family:var(--synth-font-mono, monospace);font-size:12px;color:var(--synth-text, #e0e0e8);background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.12));border-radius:var(--synth-radius-sm, 6px);padding:8px 32px 8px 12px;cursor:pointer;box-shadow:inset 0 2px 4px #0006;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.status.svelte-1d26b1r{font-family:var(--synth-font-mono, monospace);font-size:10px;color:var(--synth-text-dim, #888);padding:6px 10px;border:1px dashed var(--synth-border-light, rgba(255,255,255,.12));border-radius:var(--synth-radius-sm, 6px);display:flex;align-items:center;gap:6px}.status.svelte-1d26b1r .dot:where(.svelte-1d26b1r){width:6px;height:6px;border-radius:50%;background:#555}.synth-knob-container.svelte-nzna0{display:flex;flex-direction:column;align-items:center;gap:6px}.synth-knob-label.svelte-nzna0{font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78)}.synth-knob.svelte-nzna0{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform .1s ease,filter .1s ease}.synth-knob.svelte-nzna0:hover{filter:brightness(1.1)}.synth-knob.dragging.svelte-nzna0{cursor:grabbing}.synth-knob.svelte-nzna0:focus{outline:none}.synth-knob.svelte-nzna0:focus-visible svg:where(.svelte-nzna0) circle:where(.svelte-nzna0):nth-child(3){stroke:var(--color);stroke-width:2}.synth-knob-value.svelte-nzna0{font-family:var(--synth-font-mono, monospace);font-size:11px;font-weight:600;color:var(--color);background:var(--synth-bg, #1a1a24);padding:2px 8px;border-radius:4px;min-width:32px;text-align:center}.synth-toggle-container.svelte-1wh4lhq{display:flex;align-items:center;gap:10px}.synth-toggle-label.svelte-1wh4lhq{font-family:var(--synth-font-mono, monospace);font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78)}.synth-toggle-switch.svelte-1wh4lhq{width:44px;height:22px;background:var(--synth-bg, #1a1a24);border:none;border-radius:11px;box-shadow:inset 0 3px 6px #00000080,inset 0 -1px 2px #ffffff0d;position:relative;cursor:pointer;transition:all .2s ease;padding:0}.synth-toggle-switch.svelte-1wh4lhq:hover:not(.disabled){box-shadow:inset 0 3px 6px #00000080,inset 0 -1px 2px #ffffff0d,0 0 0 2px #ffffff1a}.synth-toggle-switch.svelte-1wh4lhq:focus{outline:none}.synth-toggle-switch.svelte-1wh4lhq:focus-visible{box-shadow:inset 0 3px 6px #00000080,0 0 0 2px var(--toggle-color)}.synth-toggle-switch.disabled.svelte-1wh4lhq{opacity:.5;cursor:not-allowed}.synth-toggle-thumb.svelte-1wh4lhq{position:absolute;top:3px;left:3px;width:16px;height:16px;background:linear-gradient(135deg,#555,#333,#444);border-radius:50%;box-shadow:0 2px 4px #0006,inset 0 1px 1px #fff3;transition:all .2s ease}.synth-toggle-switch.active.svelte-1wh4lhq{background:#ff6b6b26;background-color:color-mix(in srgb,var(--toggle-color) 15%,var(--synth-bg, #1a1a24))}.synth-toggle-switch.active.svelte-1wh4lhq .synth-toggle-thumb:where(.svelte-1wh4lhq){left:25px;background:var(--toggle-color);box-shadow:0 0 10px var(--toggle-color),0 2px 4px #0006}.control-group.svelte-p09v8p{margin-bottom:12px}.control-label.svelte-p09v8p{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin:0 0 8px}.knobs.svelte-p09v8p{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}.mute-row.svelte-p09v8p{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--synth-border, rgba(255,255,255,.06))}.control-group.svelte-6c4ep4{margin-bottom:12px}.control-label.svelte-6c4ep4{display:block;font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin:0 0 6px}.list.svelte-6c4ep4{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px}.demo-btn.svelte-6c4ep4{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.08));border-radius:var(--synth-radius-sm, 6px);color:var(--synth-text, #e0e0e8);cursor:pointer;transition:all .15s;text-align:left}.demo-btn.svelte-6c4ep4:hover{background:var(--synth-panel, #252532);border-color:var(--synth-accent, #ff6b6b)}.demo-btn.playing.svelte-6c4ep4{background:#ff6b6b1f;border-color:var(--synth-accent, #ff6b6b);color:var(--synth-accent, #ff6b6b)}.demo-btn.svelte-6c4ep4 svg:where(.svelte-6c4ep4){flex-shrink:0;color:var(--synth-accent, #ff6b6b)}.title.svelte-6c4ep4{font-family:var(--synth-font-mono, monospace);font-size:10px;font-weight:600;flex:1}.composer.svelte-6c4ep4{font-family:var(--synth-font-mono, monospace);font-size:9px;color:var(--synth-text-dim, #888)}.control-panel.svelte-55plig{position:fixed;top:16px;left:16px;z-index:100;width:260px;max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;background:linear-gradient(180deg,var(--synth-panel-light, #2d2d3d) 0%,var(--synth-panel, #252532) 100%);border:1px solid var(--synth-border, rgba(255,255,255,.08));border-radius:var(--synth-radius-md, 12px);box-shadow:0 4px 24px #0009,inset 0 1px #ffffff0d;padding:16px;font-family:var(--synth-font-display, "Inter", sans-serif);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}.control-panel.svelte-55plig::-webkit-scrollbar{width:6px}.control-panel.svelte-55plig::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.panel-header.svelte-55plig{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}.header-left.svelte-55plig{display:flex;align-items:center;gap:10px;min-width:0}.header-right.svelte-55plig{display:flex;align-items:center;gap:4px}.led.svelte-55plig{width:8px;height:8px;border-radius:50%;background:#333;box-shadow:inset 0 1px 2px #00000080;transition:all .2s ease;flex-shrink:0}.led.on.svelte-55plig{background:var(--synth-accent-green, #4ade80);box-shadow:0 0 8px var(--synth-accent-green, #4ade80)}.panel-title.svelte-55plig{font-family:var(--synth-font-mono, monospace);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--synth-label, #888);margin:0;white-space:nowrap}.icon-btn.svelte-55plig{width:24px;height:24px;padding:0;background:transparent;border:1px solid transparent;color:var(--synth-label, #888);font-family:var(--synth-font-mono, monospace);font-size:12px;font-weight:600;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.icon-btn.svelte-55plig:hover{background:#ffffff0f;color:#fff}.icon-btn.active.svelte-55plig{background:#ff6b6b26;color:var(--synth-accent, #ff6b6b);border-color:var(--synth-accent, #ff6b6b)}.panel-divider.svelte-55plig{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:12px 0}.theme-row.svelte-55plig{display:flex;align-items:center;justify-content:space-between;gap:8px}.theme-label.svelte-55plig{font-family:var(--synth-font-mono, monospace);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label, #6b6b78)}.puck.svelte-55plig{position:fixed;top:16px;left:16px;z-index:100;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(180deg,var(--synth-panel-light, #2d2d3d) 0%,var(--synth-panel, #252532) 100%);border:1px solid var(--synth-border, rgba(255,255,255,.08));border-radius:999px;box-shadow:0 4px 16px #00000080;color:var(--synth-label, #888);font-family:var(--synth-font-mono, monospace);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .15s}.puck.svelte-55plig:hover{color:#fff;border-color:var(--synth-accent, #ff6b6b);transform:translate(2px)}.puck-label.svelte-55plig{white-space:nowrap}.recording-controls.svelte-yakqhn{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;gap:10px;z-index:100;background:var(--synth-panel-dark, rgba(30, 30, 40, .9));padding:10px 15px;border-radius:30px;border:1px solid var(--synth-border, rgba(255,255,255,.1));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--synth-shadow, 0 4px 12px rgba(0,0,0,.5))}.record-btn.svelte-yakqhn{width:44px;height:44px;border-radius:50%;border:2px solid var(--synth-accent, #ff4444);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.record-btn.svelte-yakqhn:hover:not(:disabled){background:#f443;box-shadow:0 0 10px #ff444480;transform:scale(1.05)}.record-btn.svelte-yakqhn:disabled{opacity:.4;cursor:not-allowed;border-color:#666}.record-icon.svelte-yakqhn{width:20px;height:20px;background:var(--synth-accent, #ff4444);border-radius:50%}.record-btn.svelte-yakqhn:disabled .record-icon:where(.svelte-yakqhn){background:#666}.recording-indicator.svelte-yakqhn{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--synth-font-mono, monospace)}.recording-dot.svelte-yakqhn{width:12px;height:12px;background:#f44;border-radius:50%;box-shadow:0 0 8px #f44;animation:svelte-yakqhn-pulse 1s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.recording-dot.svelte-yakqhn{animation:none}}@keyframes svelte-yakqhn-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.recording-time.svelte-yakqhn,.complete-time.svelte-yakqhn{font-size:14px;min-width:45px;color:#fff}.complete-time.shared.svelte-yakqhn{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--synth-accent-purple, #a78bfa);padding:3px 8px;border:1px solid var(--synth-accent-purple, #a78bfa);border-radius:999px;min-width:0}.stop-btn.svelte-yakqhn{width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.stop-btn.svelte-yakqhn:hover{background:#fff3;transform:scale(1.05)}.stop-icon.svelte-yakqhn{width:16px;height:16px;background:#fff;border-radius:2px}.recording-complete.svelte-yakqhn{display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--synth-font-mono, monospace)}.icon-btn.svelte-yakqhn{width:32px;height:32px;border-radius:50%;border:none;background:#ffffff1f;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.icon-btn.svelte-yakqhn:hover{transform:scale(1.1)}.icon-btn.replay.svelte-yakqhn:hover{background:#60a5fa66;box-shadow:0 0 8px #60a5fa66}.icon-btn.download.svelte-yakqhn:hover{background:#4ade8066;box-shadow:0 0 8px #4ade8066}.icon-btn.share.svelte-yakqhn:hover{background:#a88bfa66;box-shadow:0 0 8px #a88bfa66}.icon-btn.share.copied.svelte-yakqhn{background:#4ade8099;color:#fff}.icon-btn.new-btn.svelte-yakqhn:hover{background:#ef444466}.scrim.svelte-doqk94{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}.sheet.svelte-doqk94{width:min(720px,100%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,var(--synth-panel-light, #2d2d3d) 0%,var(--synth-panel, #252532) 100%);border:1px solid var(--synth-border, rgba(255,255,255,.08));border-radius:var(--synth-radius-lg, 14px);box-shadow:0 24px 60px #0009;padding:28px 32px;color:var(--synth-text, #e0e0e8);font-family:var(--synth-font-display, system-ui)}header.svelte-doqk94{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}header.svelte-doqk94 h2:where(.svelte-doqk94){margin:0;font-size:22px;letter-spacing:-.5px}.close.svelte-doqk94{border:none;background:transparent;color:var(--synth-text-dim, #888);font-size:16px;cursor:pointer;padding:6px 10px;border-radius:50%}.close.svelte-doqk94:hover{color:#fff;background:#ffffff14}section.svelte-doqk94{margin-top:20px}section.svelte-doqk94 h3:where(.svelte-doqk94){font-family:var(--synth-font-mono, monospace);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--synth-label, #6b6b78);margin:0 0 10px}.hint.svelte-doqk94{color:var(--synth-text-dim, #888);font-size:12px;margin:4px 0 12px}.hint.svelte-doqk94 strong:where(.svelte-doqk94){color:var(--synth-accent, #ff6b6b);font-weight:600}.rows.svelte-doqk94{display:flex;flex-direction:column;gap:6px}.row.svelte-doqk94{display:flex;gap:4px}.key.svelte-doqk94{flex:0 0 auto;width:44px;height:54px;background:var(--synth-bg, #1a1a24);border:1px solid rgba(255,255,255,.08);border-bottom:3px solid var(--c);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.key.svelte-doqk94 .cap:where(.svelte-doqk94){font-family:var(--synth-font-mono, monospace);font-weight:600;font-size:14px;color:#fff}.key.svelte-doqk94 .note:where(.svelte-doqk94){font-family:var(--synth-font-mono, monospace);font-size:9px;color:var(--c);opacity:.85}.shortcuts.svelte-doqk94{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}.shortcuts.svelte-doqk94 dt:where(.svelte-doqk94){font-size:12px;color:var(--synth-text-dim, #aaa);display:flex;gap:4px;align-items:center}.shortcuts.svelte-doqk94 dd:where(.svelte-doqk94){margin:0;font-size:12px;color:#fff}kbd.svelte-doqk94{font-family:var(--synth-font-mono, monospace);font-size:10px;background:var(--synth-bg, #1a1a24);border:1px solid var(--synth-border-light, rgba(255,255,255,.12));border-bottom-width:2px;border-radius:4px;padding:2px 6px;color:#fff}.midi-list.svelte-doqk94{list-style:none;padding:0;margin:0}.midi-list.svelte-doqk94 li:where(.svelte-doqk94){font-family:var(--synth-font-mono, monospace);font-size:12px;padding:6px 0;display:flex;align-items:center;gap:8px}.led.svelte-doqk94{width:8px;height:8px;border-radius:50%;background:#333}.led.on.svelte-doqk94{background:var(--synth-accent-green, #4ade80);box-shadow:0 0 8px var(--synth-accent-green, #4ade80)}.piano-wrap.svelte-5ku6uk{position:fixed;bottom:0;left:0;right:0;z-index:90;padding:12px 16px 16px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 100%);pointer-events:none}.piano.svelte-5ku6uk{--white-w: calc(100% / var(--white-count));--black-w: calc(var(--white-w) * .6);position:relative;height:160px;max-width:1200px;margin:0 auto;display:flex;background:transparent;touch-action:none;pointer-events:auto;border-radius:8px;overflow:hidden}.white.svelte-5ku6uk{flex:1;background:#f7f7f0;border:1px solid rgba(0,0,0,.3);border-top:none;border-radius:0 0 6px 6px;padding:0;cursor:pointer;transition:background .08s;box-shadow:inset 0 -4px 12px #00000014}.white.svelte-5ku6uk:active,.white.active.svelte-5ku6uk{background:color-mix(in srgb,var(--c) 80%,white);box-shadow:inset 0 -2px 6px #0003}.black.svelte-5ku6uk{position:absolute;top:0;width:var(--black-w);height:60%;background:#0d0d14;border:none;border-radius:0 0 4px 4px;padding:0;cursor:pointer;box-shadow:0 4px 6px #00000080;transition:background .08s}.black.svelte-5ku6uk:active,.black.active.svelte-5ku6uk{background:var(--c);box-shadow:inset 0 -2px 4px #0006}:root{--synth-bg-dark: #0d0d14;--synth-bg: #1a1a24;--synth-panel: #252532;--synth-panel-light: #2d2d3d;--synth-panel-dark: #1c1c28;--synth-accent: #ff6b6b;--synth-accent-hover: #ff8585;--synth-accent-green: #4ade80;--synth-accent-blue: #60a5fa;--synth-accent-yellow: #facc15;--synth-accent-purple: #a78bfa;--synth-accent-orange: #fb923c;--synth-text: #e0e0e8;--synth-text-dim: #888895;--synth-text-bright: #ffffff;--synth-label: #6b6b78;--synth-border: rgba(255, 255, 255, .08);--synth-border-light: rgba(255, 255, 255, .12);--synth-glow-red: 0 0 12px rgba(255, 107, 107, .6);--synth-glow-green: 0 0 12px rgba(74, 222, 128, .6);--synth-glow-blue: 0 0 12px rgba(96, 165, 250, .6);--synth-shadow: 0 4px 16px rgba(0, 0, 0, .5);--synth-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--synth-inset: inset 0 2px 4px rgba(0, 0, 0, .4);--synth-inset-deep: inset 0 4px 8px rgba(0, 0, 0, .5);--synth-panel-gradient: linear-gradient(180deg, var(--synth-panel-light) 0%, var(--synth-panel) 100%);--synth-metal-gradient: linear-gradient(135deg, #555 0%, #333 50%, #444 100%);--synth-knob-gradient: linear-gradient(135deg, #4a4a5a 0%, #2a2a3a 50%, #3a3a4a 100%);--synth-font-display: "Inter", "Segoe UI", system-ui, sans-serif;--synth-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--synth-spacing-xs: 4px;--synth-spacing-sm: 8px;--synth-spacing-md: 16px;--synth-spacing-lg: 24px;--synth-spacing-xl: 32px;--synth-radius-sm: 4px;--synth-radius-md: 8px;--synth-radius-lg: 12px;--synth-radius-full: 9999px}[data-theme=light]{--synth-bg-dark: #e6e5df;--synth-bg: #f3f2ec;--synth-panel: #fafaf4;--synth-panel-light: #ffffff;--synth-panel-dark: #ecebe4;--synth-accent: #d9343a;--synth-accent-hover: #e65459;--synth-accent-green: #2d9f63;--synth-accent-blue: #2a6fd6;--synth-accent-yellow: #d5a80f;--synth-accent-purple: #7a3fd9;--synth-accent-orange: #d97235;--synth-text: #1f1f26;--synth-text-dim: #60616c;--synth-text-bright: #000;--synth-label: #85858e;--synth-border: rgba(0, 0, 0, .1);--synth-border-light: rgba(0, 0, 0, .15);--synth-shadow: 0 4px 16px rgba(100, 100, 120, .2);--synth-shadow-sm: 0 2px 8px rgba(100, 100, 120, .15);--synth-panel-gradient: linear-gradient(180deg, var(--synth-panel-light) 0%, var(--synth-panel) 100%);--synth-metal-gradient: linear-gradient(135deg, #c0c0c5 0%, #a0a0a8 50%, #b0b0b5 100%);--synth-knob-gradient: linear-gradient(135deg, #f0f0ea 0%, #d0d0ca 100%);--synth-inset: inset 0 2px 4px rgba(0, 0, 0, .08);--synth-inset-deep: inset 0 4px 8px rgba(0, 0, 0, .12)}[data-theme=vintage]{--synth-bg-dark: #1a120b;--synth-bg: #2c1e14;--synth-panel: #3d2b1f;--synth-panel-light: #523a2a;--synth-panel-dark: #26170e;--synth-accent: #ffb86c;--synth-accent-hover: #ffcf9e;--synth-accent-green: #d4e09b;--synth-accent-blue: #8be9fd;--synth-text: #f0e6d2;--synth-text-dim: #a89f91;--synth-label: #d4c5b0;--synth-border: rgba(240, 230, 210, .15);--synth-border-light: rgba(240, 230, 210, .25);--synth-shadow: 0 4px 16px rgba(10, 5, 0, .6);--synth-panel-gradient: linear-gradient(180deg, var(--synth-panel-light) 0%, var(--synth-panel) 100%);--synth-metal-gradient: linear-gradient(135deg, #d4af37 0%, #aa8c2c 50%, #8a7020 100%);--synth-knob-gradient: linear-gradient(135deg, #2a1d15 0%, #1a100a 100%);--synth-font-display: "Georgia", serif;--synth-font-mono: "Courier New", monospace;--synth-radius-sm: 2px;--synth-radius-md: 4px;--synth-radius-lg: 6px}[data-theme=industrial]{--synth-bg-dark: #0a0a0a;--synth-bg: #151515;--synth-panel: #222;--synth-panel-light: #333;--synth-panel-dark: #111;--synth-accent: #ffff00;--synth-accent-hover: #ffff40;--synth-accent-green: #00ff00;--synth-accent-blue: #00ffff;--synth-text: #d0d0d0;--synth-text-dim: #707070;--synth-label: #909090;--synth-border: #444;--synth-border-light: #666;--synth-shadow: 0 2px 0 rgba(0,0,0,1);--synth-panel-gradient: repeating-linear-gradient(45deg, #222, #222 10px, #252525 10px, #252525 20px);--synth-metal-gradient: linear-gradient(180deg, #888 0%, #444 100%);--synth-knob-gradient: linear-gradient(180deg, #444 0%, #222 100%);--synth-font-display: "Impact", sans-serif;--synth-font-mono: "Consolas", "Monaco", monospace;--synth-radius-sm: 0px;--synth-radius-md: 2px;--synth-radius-lg: 4px}.synth-panel{background:var(--synth-panel-gradient);border:1px solid var(--synth-border);border-radius:var(--synth-radius-md);box-shadow:var(--synth-shadow),var(--synth-inset);padding:var(--synth-spacing-md);position:relative}.synth-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);border-radius:var(--synth-radius-md) var(--synth-radius-md) 0 0}.synth-panel-header{display:flex;align-items:center;gap:var(--synth-spacing-sm);margin-bottom:var(--synth-spacing-md);padding-bottom:var(--synth-spacing-sm);border-bottom:1px solid var(--synth-border)}.synth-panel-title{font-family:var(--synth-font-mono);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--synth-label);margin:0}.synth-led{width:8px;height:8px;border-radius:50%;background:#222;box-shadow:var(--synth-inset);transition:all .15s ease}.synth-led.on{background:var(--synth-accent);box-shadow:var(--synth-glow-red)}.synth-led.green.on{background:var(--synth-accent-green);box-shadow:var(--synth-glow-green)}.synth-led.blue.on{background:var(--synth-accent-blue);box-shadow:var(--synth-glow-blue)}.synth-btn{font-family:var(--synth-font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--synth-text);background:var(--synth-panel-dark);border:1px solid var(--synth-border-light);border-radius:var(--synth-radius-sm);padding:var(--synth-spacing-sm) var(--synth-spacing-md);cursor:pointer;transition:all .15s ease;box-shadow:var(--synth-shadow-sm);position:relative;overflow:hidden}.synth-btn:hover{background:var(--synth-panel);border-color:var(--synth-accent);color:var(--synth-text-bright)}.synth-btn:active{transform:translateY(1px);box-shadow:none}.synth-btn.primary{background:var(--synth-accent);color:#fff;border-color:var(--synth-accent)}.synth-btn.primary:hover{background:var(--synth-accent-hover)}.synth-select{font-family:var(--synth-font-mono);font-size:12px;color:var(--synth-text);background:var(--synth-bg);border:1px solid var(--synth-border-light);border-radius:var(--synth-radius-sm);padding:var(--synth-spacing-sm) var(--synth-spacing-md);padding-right:32px;cursor:pointer;box-shadow:var(--synth-inset);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:all .15s ease}.synth-select:hover{border-color:var(--synth-accent)}.synth-select:focus{outline:none;border-color:var(--synth-accent);box-shadow:var(--synth-inset),0 0 0 2px #ff6b6b33}.synth-toggle{width:44px;height:22px;background:var(--synth-bg);border-radius:var(--synth-radius-full);box-shadow:var(--synth-inset-deep);position:relative;cursor:pointer;transition:all .2s ease}.synth-toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--synth-metal-gradient);border-radius:50%;box-shadow:0 2px 4px #0006;transition:all .2s ease}.synth-toggle.active{background:#ff6b6b33}.synth-toggle.active:after{left:25px;background:var(--synth-accent);box-shadow:var(--synth-glow-red)}.synth-label{font-family:var(--synth-font-mono);font-size:10px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--synth-label);display:block;margin-bottom:var(--synth-spacing-xs)}.synth-value{font-family:var(--synth-font-mono);font-size:14px;font-weight:600;color:var(--synth-accent);background:var(--synth-bg);padding:4px 8px;border-radius:var(--synth-radius-sm);box-shadow:var(--synth-inset);min-width:60px;text-align:center}.synth-divider{height:1px;background:linear-gradient(90deg,transparent,var(--synth-border-light),transparent);margin:var(--synth-spacing-md) 0}.synth-control-group{display:flex;align-items:center;gap:var(--synth-spacing-sm)}.synth-control-row{display:flex;align-items:center;justify-content:space-between;gap:var(--synth-spacing-md)}.synth-jack{width:20px;height:20px;background:radial-gradient(circle at 30% 30%,#555,#222);border-radius:50%;border:2px solid #333;box-shadow:inset 0 2px 4px #0009,0 1px 2px #ffffff1a}.synth-screw{width:10px;height:10px;background:radial-gradient(circle at 30% 30%,#666,#333);border-radius:50%;position:relative}.synth-screw:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:1px;background:#222;transform:translate(-50%,-50%)}@keyframes synth-pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes synth-glow-pulse{0%,to{box-shadow:var(--synth-glow-red)}50%{box-shadow:0 0 20px #ff6b6bcc}}.synth-recording{animation:synth-glow-pulse 1s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.synth-recording,.synth-led,[class*=pulse]{animation:none!important}*{transition-duration:.01ms!important}}body{margin:0;padding:0;background-color:#222;color:#eee;overflow:hidden;font-family:var(--synth-font-display, "Inter", system-ui, sans-serif)}main.svelte-evvmw6{position:relative;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column}.instructions.svelte-evvmw6{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;background-color:#0000008c;padding:28px 48px;border-radius:14px;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.instructions.svelte-evvmw6 h1:where(.svelte-evvmw6){margin:0 0 .4em;font-size:clamp(2.4em,6vw,4em);font-weight:700;letter-spacing:-.02em}.instructions.svelte-evvmw6 p:where(.svelte-evvmw6){margin:0 0 .3em;font-size:clamp(1em,2vw,1.6em);color:#ffffffeb}.instructions.svelte-evvmw6 .sub:where(.svelte-evvmw6){font-size:clamp(.8em,1.3vw,1em);color:#ffffff8c}