@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color:#25292b;font-synthesis:none;text-rendering:optimizelegibility;--ink:#25292b;--muted:#687074;--line:#b8bbb8;--panel:#eeeeea;--paper:#f7f7f2;--signal:#efb429;--signal-dark:#9d6b00;--cyan:#087483;--brand-accent:#147859;--brand-mark:#b7df59;--danger:#b64a37;--mono:"IBM Plex Mono", monospace;background:#d9d9d4;font-family:Barlow Condensed,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit;letter-spacing:0}button,select{min-height:40px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#root{min-height:100vh}.app-shell{background:var(--paper);border-top:6px solid var(--ink);min-height:100vh}.app-header{background:var(--paper);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;min-height:62px;padding:10px clamp(14px,2vw,32px);display:flex}.brand-block{align-items:center;gap:16px;display:flex}.brand-mark{background:var(--ink);width:42px;height:42px;color:var(--brand-mark);border:1px solid #405943;border-radius:10px 10px 10px 3px;place-items:center;display:grid;box-shadow:3px 3px #dce8d4}.brand-mark svg{width:34px}.brand-block p,.brand-block h1{margin:0}.brand-block p{font:500 9px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:5px}.brand-block h1{letter-spacing:-.02em;font-size:clamp(26px,3vw,32px);line-height:.9}.brand-block h1 span{color:var(--brand-accent);font-weight:700}.patch-identity{text-align:right;border-left:1px solid var(--line);padding-left:26px}.patch-identity span,.eyebrow{font:500 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--muted);display:block}.patch-identity strong{font:500 13px/1 var(--mono);margin-top:6px;display:block}.patch-identity label>span{margin-bottom:4px}.patch-identity select{border:1px solid var(--line);min-width:170px;min-height:30px;color:var(--ink);background:var(--paper);font:500 11px var(--mono);border-radius:3px;padding:0 8px}.connection-strip{color:#f4f4ef;background:var(--ink);grid-template-columns:auto auto minmax(150px,1fr) minmax(150px,1fr) 72px 32px;align-items:end;gap:6px 10px;padding:8px clamp(14px,2vw,32px);display:grid}.connection-strip button,.connection-strip select{min-height:32px}.connection-strip label>span{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9ba1a2;margin-bottom:6px;display:block}.connection-strip select{color:#f4f4ef;background:#303638;border:1px solid #505658;border-radius:3px;width:100%;padding:0 10px}.connection-status{align-self:center;align-items:center;gap:10px;min-width:126px;display:flex}.connection-status .eyebrow{color:#b9bebe}.connection-status strong{text-transform:uppercase;margin-top:4px;font-size:16px;display:block}.status-light{background:#6c7475;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 4px #353b3d}.status-ready{background:#54d6ac;box-shadow:0 0 10px #54d6ac}.status-error{background:#ef6c58}.status-requesting{background:var(--signal)}.primary-action,.icon-button{border:1px solid var(--signal);background:var(--signal);color:#1f2426;border-radius:3px}.primary-action{text-transform:uppercase;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:700;display:flex}.primary-action svg,.icon-button svg{width:16px}.icon-button{width:32px;color:var(--signal);background:0 0;place-items:center;padding:0;display:grid}.status-message{font:400 10px/1.4 var(--mono);color:#aeb3b4;overflow-wrap:anywhere;grid-column:1/-1;margin:0}main{background-image:linear-gradient(#25292b09 1px,#0000 1px);background-size:100% 28px;padding:10px clamp(14px,2vw,32px)}.panel-workspace{max-width:1920px;margin:0 auto}.web-synth-panel{color:#f4f4ef;background:#202527;border:1px solid #596365;border-radius:4px;max-width:1480px;padding:clamp(12px,1vw,16px)}.web-synth-heading{justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px;display:flex}.web-synth-heading h2{text-transform:uppercase;margin:4px 0;font-size:clamp(20px,3vw,28px)}.web-synth-heading p{color:#b7c1c3;font:400 11px/1.6 var(--mono);margin:0}.web-synth-actions{align-items:end;gap:10px;display:flex}.web-synth-actions label>span{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#b7c1c3;margin-bottom:6px;display:block}.web-synth-actions select{color:#f4f4ef;background:#292f31;border:1px solid #7d898c;border-radius:3px;min-width:150px;min-height:34px;padding:0 8px}.audio-status{color:#d5dbda;font:400 11px/1.5 var(--mono);background:#292f31;border-left:3px solid #899294;margin:0 0 14px;padding:9px 12px}.audio-status-ready{border-color:#54d6ac}.audio-status-error{color:#ffd3ca;border-color:#ef6c58}.audio-status strong{text-transform:uppercase;margin-right:5px}.audio-spectrum{background:#292f31;border:1px solid #7d898c;min-width:0;margin-top:8px;padding:6px 8px}.audio-spectrum-heading{font:400 10px/1.4 var(--mono);color:#b7c1c3;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:4px;display:flex}.audio-spectrum-heading h3{color:#f4f4ef;font:700 12px/1.4 var(--mono);text-transform:uppercase;margin:0}.audio-spectrum-heading button{color:#f1c965;min-height:28px;font:500 10px/1.4 var(--mono);background:#202527;border:1px solid #7d898c;border-radius:3px;margin-left:auto;padding:3px 8px}.audio-spectrum-heading button:disabled{color:#b7c1c3;cursor:not-allowed}.audio-spectrum-heading button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.audio-spectrum-plot{background:#202527;width:100%;height:56px;display:block}.audio-spectrum-plot rect{fill:#54d6ac}.audio-spectrum-plot line{stroke:#596365;stroke-width:1px;vector-effect:non-scaling-stroke}.audio-spectrum-labels{color:#b7c1c3;font:400 9px/1.4 var(--mono);justify-content:space-between;gap:6px;margin-top:3px;display:flex}.web-synth-grid{gap:8px;display:grid}.web-synth-actions{flex-wrap:wrap}.synth-tutorial{overflow-wrap:anywhere;background:#292f31;border:1px solid #899294;border-radius:6px;margin-bottom:12px;padding:8px 16px;font:400 .9375rem/1.45 system-ui,sans-serif}.synth-tutorial h3{margin:6px 0;font:700 clamp(1.125rem,1.6vw,1.375rem)/1.25 system-ui,sans-serif}.synth-tutorial h4{margin:0 0 6px;font:700 .9375rem/1.4 system-ui,sans-serif}.synth-tutorial p{max-width:65ch;margin:0 0 6px}.web-preset-save p{font:400 12px/1.6 var(--mono);overflow-wrap:anywhere}.synth-tutorial button,.web-preset-save button{color:#f1c965;min-height:36px;font:500 12px/1.5 var(--mono);background:#393628;border:1px solid #f1c965;border-radius:3px;padding:7px 12px}.synth-tutorial button,.tutorial-preset-save button{min-height:44px;font:600 .9375rem/1.4 system-ui,sans-serif}.synth-tutorial button:disabled,.web-preset-save button:disabled{color:#b7c1c3;cursor:not-allowed;background:#202527;border-color:#7d898c}.synth-tutorial button:focus-visible,.web-preset-save :focus-visible,.synth-tutorial h3:focus{outline:2px solid var(--signal);outline-offset:3px}.tutorial-actions{flex-wrap:wrap;gap:8px;display:flex}.tutorial-progress-heading{color:#d5dbda;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.875rem;display:flex}.synth-tutorial .eyebrow{color:#b7c1c3;letter-spacing:.06em;font-size:.875rem}.tutorial-roadmap{flex-wrap:wrap;gap:6px;margin:6px 0 8px;padding:0;list-style:none;display:flex}.tutorial-roadmap li{color:#d5dbda;border:1px solid #7d898c;border-radius:4px;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 6px;font-size:.875rem;display:flex}.tutorial-roadmap li[aria-current=step]{color:#f1c965;background:#393628;border:2px solid #f1c965;font-weight:700}.tutorial-roadmap .tutorial-step-done{border-color:#54d6ac}.tutorial-roadmap li>svg{flex-shrink:0;width:16px;height:16px}.tutorial-step-done>svg{color:#54d6ac}.tutorial-lesson-grid{grid-template-columns:minmax(0,1.9fr) minmax(15rem,1fr);align-items:start;gap:8px 16px;display:grid}.tutorial-lesson-copy{gap:10px;min-width:0;display:grid}.tutorial-learn p{max-width:none}.synth-tutorial .tutorial-takeaway{color:#f1c965;font-weight:700}.tutorial-challenge{border-left:3px solid var(--signal);background:#202527;border-radius:4px;padding:10px}.tutorial-challenge ol{max-width:65ch;margin:0;padding-left:1.5em}.tutorial-challenge li+li{margin-top:6px}.tutorial-challenge li::marker{color:#f1c965;font-weight:700}.tutorial-listen{border:1px solid #7d898c;border-radius:4px;padding:10px}.synth-tutorial .tutorial-play-hint{color:#b7c1c3;margin-bottom:0;font-size:.875rem}.tutorial-visual{background:#202527;border:1px solid #7d898c;border-radius:6px;grid-area:1/2/span 2;min-width:0;margin:0;padding:10px}.tutorial-visual svg{fill:none;width:100%;max-width:200px;height:auto;margin:6px auto;display:block}.harmonic-comparison{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:12px;display:grid}.harmonic-spectrum-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.harmonic-spectrum-heading strong{color:#f1c965;display:block}.harmonic-spectrum-heading span{font-size:.875rem;display:block}.harmonic-spectrum-heading svg{flex:0 0 48px;width:48px;margin:0}.harmonic-axis-label{color:#b7c1c3;margin:6px 0 4px;font-size:.75rem;display:block}.harmonic-plot{grid-template-columns:repeat(8,minmax(0,1fr));display:grid}.harmonic-column{text-align:center;min-width:0}.harmonic-bar-track{background:repeating-linear-gradient(0deg,#0000 0 15px,#7d898c25 15px 16px);border-bottom:1px solid #7d898c;justify-content:center;align-items:end;height:64px;display:flex}.harmonic-bar{background:#f1c965;border-radius:2px 2px 0 0;width:6px;max-width:50%}.harmonic-tick{color:#d5dbda;padding-top:3px;font-size:.75rem;display:block}.synth-tutorial .harmonic-frequency-label{text-align:right;color:#b7c1c3;margin:-6px 0 0;font-size:.75rem}.synth-tutorial .harmonic-key{margin:0;font-size:.875rem}.harmonic-frequency-label,.harmonic-key{grid-column:1/-1}@media (forced-colors:active){.harmonic-bar{forced-color-adjust:none;background:canvastext}}.tutorial-visual-labels{flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-bottom:8px;font-size:.875rem;font-weight:600;display:flex}.tutorial-visual figcaption{max-width:65ch;margin-top:8px}.synth-tutorial .tutorial-sketch-note{color:#b7c1c3;font-size:.875rem}.sketch-axis{stroke:#7d898c;stroke-width:1.5px}.sketch-signal{stroke:#f1c965;stroke-width:3px}.sketch-secondary{stroke:#b7c1c3;stroke-width:2px}.sketch-marker{stroke:#d5dbda;stroke-width:1.5px;stroke-dasharray:5 5}.sketch-box{stroke:#f1c965;stroke-width:2px}.synth-tutorial .tutorial-feedback{margin-top:6px;font-weight:600}.tutorial-preset-save,.tutorial-preset-save p{font:400 .9375rem/1.45 system-ui,sans-serif}@media (width>=1100px){.tutorial-lesson-copy{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}}@media (width<=800px){.tutorial-lesson-grid{grid-template-columns:minmax(0,1fr)}.tutorial-visual{grid-area:auto}}.web-preset-save{flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;display:flex}.web-preset-save input{color:#f4f4ef;background:#292f31;border:1px solid #7d898c;border-radius:3px;min-width:0;max-width:100%;min-height:36px;padding:6px 8px}.web-preset-save p{color:#b7c1c3;flex-basis:100%;margin:0}.preset-error{color:#ffd3ca;overflow-wrap:anywhere;background:#292f31;border-left:3px solid #ef6c58;padding:10px}.tutorial-controls .web-synth-signal-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.tutorial-controls .web-synth-envelope-grid:empty{display:none}.web-synth-signal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 112px minmax(0,1.5fr) minmax(0,1.5fr);align-items:stretch;gap:8px;display:grid}.web-synth-envelope-grid{grid-template-columns:repeat(2,minmax(0,1.25fr)) minmax(0,1fr);align-items:stretch;gap:8px;display:grid}.web-synth-module{min-width:0}.web-synth-controls{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.web-filter-tone-controls{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.web-filter-tone-controls .parameter-heading label{overflow-wrap:anywhere}.web-voice-module .web-synth-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.web-voice-module .web-synth-control:last-child{grid-column:1/-1}.web-voice-note{color:#b7c1c3;font:400 10px/1.5 var(--mono);margin:8px 6px}.web-waveform-control{grid-column:1/-1}.waveform-options{border:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;min-width:0;margin:4px 0 0;padding:0;display:grid}.waveform-option{cursor:pointer;color:#d5dbda;background:#202527;border:1px solid #7d898c;border-radius:3px;justify-content:center;align-items:center;gap:4px;min-height:24px;padding:2px;display:flex;position:relative}.waveform-option input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.waveform-option svg{flex-shrink:0;width:28px;height:18px}.waveform-option path{fill:none;stroke:currentColor;stroke-width:2px}.waveform-option span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tutorial-controls .waveform-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,80px),1fr))}.tutorial-controls .waveform-option{flex-direction:column;min-height:44px;padding:6px}.tutorial-controls .waveform-option span{clip-path:none;white-space:normal;overflow-wrap:anywhere;text-align:center;width:auto;height:auto;font:500 .875rem/1.4 system-ui,sans-serif;position:static;overflow:visible}.waveform-option:has(input:checked){color:#f1c965;background:#393628;border-color:#f1c965}.waveform-option:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:2px}.web-synth-control{border-bottom:1px solid #596365;border-right:1px solid #596365;min-width:0;min-height:0;padding:4px 6px}.web-synth-control .parameter-heading label{text-transform:uppercase;font-size:10px}.web-synth-control .parameter-heading output{font:500 10px var(--mono);color:#f1c965}.web-synth-control select{color:#f4f4ef;background:#202527;border:1px solid #7d898c;border-radius:2px;width:100%;min-height:30px;margin-top:5px}.web-synth-control input[type=range]{width:100%;accent-color:var(--signal);margin:19px 0 7px}.web-synth-control .rotary-control{margin-top:4px}.web-synth-control .rotary-value{font-size:10px}.web-number-control{width:100%;min-width:0;margin-top:4px}.web-editable-value{color:#f1c965;width:100%;min-height:28px;font:500 11px/1.4 var(--mono);background:0 0;border:1px solid #0000;border-radius:3px;padding:3px;display:block}.web-editable-value:hover{background:#202527;border-color:#7d898c}.web-editable-value:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.web-number-control input{color:#f1c965;width:100%;min-width:0;min-height:28px;font:500 11px/1.4 var(--mono);background:#202527;border:1px solid #7d898c;border-radius:3px;padding:3px}.web-number-control input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.web-number-control input[aria-invalid=true]{border-color:#ef6c58}.web-number-unit{color:#d5dbda;overflow-wrap:anywhere;margin-top:2px;font:400 11px/1.4 system-ui,sans-serif;display:block}.web-number-error{color:#ffd3ca;overflow-wrap:anywhere;margin-top:4px;font:400 11px/1.4 system-ui,sans-serif;display:block}.web-mixer-module{width:112px;max-width:100%}.web-mixer-module .web-synth-control{flex-direction:column;align-items:center;gap:8px;display:flex}.web-mixer-module .parameter-heading{flex-direction:column;align-items:center;gap:4px}.web-mixer-module .web-synth-control input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:120px;margin:0}.web-envelope-layout,.hardware-envelope-layout{grid-template-columns:180px minmax(0,1fr);align-items:stretch;gap:6px;min-width:0;display:grid}.web-envelope-layout .envelope-controls,.hardware-envelope-layout .envelope-controls{min-width:0}.web-envelope-layout .envelope-controls .parameter-control,.hardware-envelope-layout .envelope-controls .parameter-control{min-height:0;padding:4px 2px}.web-envelope-layout .envelope-controls .parameter-heading,.hardware-envelope-layout .envelope-controls .parameter-heading{min-height:27px}.web-envelope-layout .envelope-controls .parameter-heading label,.hardware-envelope-layout .envelope-controls .parameter-heading label{font-size:9px}.web-envelope-layout .envelope-controls .parameter-heading output,.hardware-envelope-layout .envelope-controls .parameter-heading output{font:500 8px/1.2 var(--mono);color:#f1c965}.web-envelope-layout .envelope-controls input[type=range]{width:20px;height:120px}.hardware-envelope-layout .envelope-controls input[type=range]{width:24px;height:100px}.web-envelope-layout .web-envelope-graph{border:1px solid #596365;align-self:center;height:164px;min-height:0}.hardware-envelope-layout .envelope-graph{border:1px solid #596365;align-self:center;height:130px;min-height:0}.web-synth-panel .primary-action{white-space:nowrap;min-height:34px}.web-synth-panel .primary-action:disabled{opacity:.65}.panel-intro{justify-content:space-between;align-items:end;gap:24px;margin-bottom:8px;display:flex}.panel-intro h2{margin:2px 0 0;font-size:20px}.panel-intro p{max-width:420px;font:400 11px/1.6 var(--mono);color:var(--muted);margin:0}.peak-panel{color:#f4f4ef;background:#202527;border:2px solid #715843;border-width:2px 6px;border-radius:8px;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"utility utility lfo lfo lfo lfo amp amp amp mod mod mod""osc osc osc osc osc osc mixer mixer filter filter filter filter""matrix matrix matrix matrix matrix matrix matrix matrix matrix matrix matrix matrix""arp glide effects effects effects menu menu menu menu menu menu menu""caption caption caption caption caption caption caption caption caption caption caption caption";align-items:start;gap:6px;padding:8px;display:grid;box-shadow:0 10px 24px #25292b26}.peak-module,.peak-panel .patch-panel{background:#292f31;border:1px solid #7d898c;min-width:0}.module-heading{border-bottom:1px solid #596365;justify-content:space-between;align-items:center;gap:4px;display:flex;position:relative}.app-shell [hidden]{display:none!important}.module-heading>h2{flex:1;min-width:0}.section-toggle{width:100%;min-height:24px;color:inherit;font:inherit;text-align:left;text-transform:inherit;letter-spacing:inherit;background:0 0;border:0;align-items:center;gap:4px;padding:0;display:flex}.section-toggle svg{flex:0 0 12px;width:12px;height:12px}.section-toggle span{overflow-wrap:anywhere}.help-container{display:contents}.control-tooltip{z-index:2;color:#f4f4ef;font:400 10px/1.6 var(--mono);text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;background:#202527;border:1px solid #7d898c;padding:8px;display:none;position:absolute;top:100%;left:0;right:0;box-shadow:0 4px 10px #0008}.help-container:hover .control-tooltip:not(.dismissed),.help-container:focus-within .control-tooltip:not(.dismissed){display:block}.peak-module-title{text-transform:uppercase;letter-spacing:.06em;margin:0;padding:2px 6px;font-size:14px}.control-help{color:#b7c1c3;background:0 0;border:0;flex:0 0 24px;place-items:center;width:24px;min-height:24px;margin-right:3px;padding:0;display:grid}.control-help svg{width:14px;height:14px}.click-help-container{flex:0 0 24px;display:inline-flex}.click-control-help{color:#b7c1c3;font:700 12px var(--mono);cursor:pointer;border:1px solid #0000;border-radius:50%;margin:0}.click-control-help:hover,.click-control-help[aria-expanded=true]{color:#f1c965;border-color:currentColor}.click-control-help:focus-visible{outline:2px solid var(--signal);outline-offset:2px}.click-control-tooltip{z-index:100;box-sizing:border-box;color:#f4f4ef;width:min(300px,100vw - 16px);max-height:calc(100dvh - 16px);font:400 12px/1.6 var(--mono);overflow-wrap:anywhere;background:#202527;border:1px solid #7d898c;border-radius:4px;padding:12px;position:fixed;overflow-y:auto;box-shadow:0 6px 20px #0008}.click-control-tooltip strong{color:#f1c965}.click-control-tooltip p{margin:6px 0 0}.web-synth-control .parameter-heading{flex-wrap:wrap;gap:2px}.web-synth-control .parameter-heading label{flex:1}.web-synth-control .parameter-heading output{flex-basis:100%}.web-filter-tone-controls .parameter-heading{min-height:40px}.web-envelope-layout .parameter-heading,.hardware-envelope-layout .parameter-heading{flex-wrap:nowrap;width:100%;max-width:100%}.web-envelope-layout .parameter-heading label,.web-envelope-layout .parameter-heading output,.hardware-envelope-layout .parameter-heading label,.hardware-envelope-layout .parameter-heading output{text-align:center;flex:none;max-width:100%}.web-mixer-module .parameter-heading{flex-direction:row;justify-content:center}.web-action-heading,.web-action-with-help{align-items:center;gap:4px;display:flex}.web-action-heading{color:#b7c1c3;font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.12em;justify-content:space-between}.keyboard-controls .click-control-help,.keyboard-heading .click-control-help{color:var(--ink)}.utility-module{grid-area:utility;grid-template-columns:minmax(0,1fr);align-items:start;gap:6px;display:grid}.arp-module{grid-area:arp}.glide-module{grid-area:glide}.glide-module .parameter-grid{grid-template-columns:minmax(0,1fr)}.lfo-module{grid-area:lfo}.lfo-selector{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:5px 5px 0;display:grid}.lfo-selector button{color:#b7c1c3;min-height:28px;font:500 10px var(--mono);text-transform:uppercase;cursor:pointer;background:#202527;border:1px solid #596365}.lfo-selector button[aria-pressed=true]{border-color:var(--signal);background:var(--signal);color:#1f2426;font-weight:700}.lfo-unavailable{font:400 10px/1.6 var(--mono);color:#eac475;margin:0;padding:18px 10px}.amp-module{grid-area:amp}.mod-envelopes-module{grid-area:mod}.oscillator-bank{grid-area:osc;gap:6px;display:grid}.oscillator-module .parameter-grid{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}.lfo-module .parameter-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.mixer-module{grid-area:mixer}.filter-module{grid-area:filter}.matrix-module{grid-area:matrix}.matrix-notice{border-left:3px solid var(--signal);color:#e4d5ac;font:400 10px/1.5 var(--mono);background:#202527;margin:6px;padding:7px 9px}.matrix-slot-selector{grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;padding:5px 6px 0;display:grid}.matrix-slot-selector button{color:#b7c1c3;min-width:0;min-height:30px;font:500 10px var(--mono);background:#202527;border:1px solid #596365;padding:0 4px}.matrix-slot-selector button[aria-pressed=true]{border-color:var(--signal);background:var(--signal);color:#1f2426;font-weight:700}.matrix-slot{border:1px solid #596365;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-width:0;margin:5px 6px 6px;padding:5px;display:grid}.matrix-slot legend{color:var(--signal);font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:0 5px}.matrix-slot label{min-width:0;font:500 9px/1.35 var(--mono);text-transform:uppercase;color:#b7c1c3;display:block}.matrix-slot .matrix-depth,.matrix-slot .midi-address{grid-column:1/-1}.matrix-slot select{color:#f4f4ef;background:#202527;border:1px solid #596365;border-radius:2px;width:100%;min-width:0;min-height:32px;margin-top:3px;padding:0 4px;font-size:11px;display:block}.matrix-depth>span{justify-content:space-between;gap:6px;display:flex}.matrix-depth output{color:#f1c965;font:500 10px var(--mono)}.matrix-depth input{width:100%;height:28px;accent-color:var(--signal);margin:3px 0 0;display:block}.matrix-slot .midi-address{align-self:end}.parameter-grid.filter-main,.filter-modulation .parameter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mixer-module .parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-module{grid-area:menu}.menu-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}.menu-tabs button[aria-selected=true]{border-color:var(--signal);background:var(--signal);color:#1f2426;font-weight:700}.menu-tabs button:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}.parameter-grid.menu-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.menu-grid .parameter-control:nth-child(n){border-right:1px solid #596365}.dual-filter,.filter-modulation,.envelope-options{border-top:1px solid #596365}.mod-envelopes-module .lfo-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.sub-module-title{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#b7c1c3;margin:0;padding:6px 8px}.effects-module{grid-area:effects}.effects-bank{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px;min-width:0;display:grid}.effects-top-row{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.panel-caption{font:500 9px/1.5 var(--mono);text-transform:uppercase;color:#c0c9c9;grid-area:caption;align-items:center;gap:10px;padding-top:2px;display:flex}.panel-caption svg{width:18px;color:var(--signal)}.panel-caption span:last-child{margin-left:auto}.unavailable-controls{padding:8px}.unavailable-controls>span{font:500 9px/1.6 var(--mono);text-transform:uppercase;color:#eac475}.unavailable-controls p{font:400 10px/1.6 var(--mono);color:#b7c1c3;overflow-wrap:anywhere;margin:6px 0 0}.parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.parameter-control{border-bottom:1px solid #596365;border-right:1px solid #596365;min-width:0;min-height:78px;padding:5px 6px}.parameter-grid>.parameter-control:last-child{border-right:0}.parameter-heading{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px;display:flex}.parameter-heading label{text-transform:uppercase;overflow-wrap:anywhere;font-size:12px;font-weight:700}.parameter-heading output{text-align:right;min-width:0;font:500 11px var(--mono);color:#f1c965;overflow-wrap:anywhere}.rotary-value{text-align:center;font:500 11px/14px var(--mono);color:#f1c965;overflow-wrap:anywhere;display:block}.parameter-control select{color:#f4f4ef;background:#202527;border:1px solid #7d898c;border-radius:2px;width:100%;min-height:28px;margin-top:5px;padding:0 4px;font-size:12px}.parameter-control input[type=range]{width:100%;accent-color:var(--signal);margin:19px 0 7px}.rotary-control{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;place-items:center;width:100%;height:40px;display:grid}.rotary-dial{background:radial-gradient(circle at 35% 30%,#707b7d 0,#41494b 43%,#24292b 78%);border:1px solid #788284;border-radius:50%;width:34px;height:34px;display:block;position:relative;box-shadow:inset 0 1px 3px #ffffff38,inset 0 -3px 4px #0008,0 2px 3px #0006}.rotary-indicator{background:var(--signal);transform-origin:1px 12px;border-radius:2px;width:2px;height:10px;position:absolute;top:4px;left:calc(50% - 1px)}.parameter-control.prominent{border-right:0}.parameter-control.disabled{opacity:.45}.parameter-control.disabled .rotary-control{cursor:not-allowed}.rotary-control.large{height:64px}.rotary-control.large .rotary-dial{border-width:2px;width:58px;height:58px}.rotary-control.large .rotary-indicator{transform-origin:1.5px 22px;width:3px;height:18px;top:5px;left:calc(50% - 1.5px)}.rotary-control:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}.midi-address{font:400 8px/12px var(--mono);color:#b7c1c3;letter-spacing:.08em;display:none}.debug-mode .midi-address{display:block}.peak-panel :focus-visible{outline-color:var(--signal)}.ultranova-theme{--signal:#ff7e8c;--cyan:#235a9e}.ultranova-theme .connection-strip{background:#122b50}.ultranova-theme .status-ready{background:#ff526c;box-shadow:0 0 10px #ff526c}.ultranova-panel{background:linear-gradient(135deg,#194575,#10284b);border-color:#235da4}.ultranova-panel .peak-module{background:#183a63;border-color:#648cb8}.ultranova-panel .module-heading{border-color:#648cb8}.ultranova-panel .parameter-control{border-color:#42648d}.ultranova-panel .parameter-control select,.ultranova-panel .lfo-selector button,.ultranova-panel .control-tooltip{background:#10284b;border-color:#648cb8}.ultranova-panel .parameter-heading output,.ultranova-panel .rotary-value{color:#ff9eaa}.ultranova-panel .rotary-dial{background:radial-gradient(circle at 35% 30%,#586e86,#26364b 43%,#111d2d 78%);border-color:#7e99b8}.ultranova-panel .rotary-indicator{background:#ff526c;box-shadow:0 0 5px #ff526c}.ultranova-panel .lfo-selector,.ultranova-panel .mod-envelopes-module .lfo-selector{grid-template-columns:repeat(3,minmax(0,1fr))}.ultranova-panel .lfo-selector button[aria-pressed=true]{color:#201c29;background:var(--signal);border-color:var(--signal);box-shadow:0 0 5px #ff526c55}.ultranova-panel .amp-module .parameter-grid,.ultranova-panel .mod-envelopes-module .parameter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ultranova-panel .amp-module input[type=range],.ultranova-panel .mod-envelopes-module input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:60px;margin:5px auto;display:block}.ultranova-panel .filter-module .parameter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ultranova-panel .arp-module .parameter-grid{grid-template-columns:minmax(0,1fr)}.patch-panel{padding:8px}.patch-panel .module-heading{margin-bottom:6px}.section-title-row{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.section-title-row h2{text-transform:uppercase;margin:3px 0 0;font-size:16px}.section-title-row svg{color:var(--signal)}.peak-panel .eyebrow{color:#b7c1c3}.envelope-graph{background:#202527;border-bottom:1px solid #596365;width:100%;height:46px;display:block}.grid-line{stroke:#42494b;stroke-width:1px}.envelope-line{fill:none;stroke:var(--signal);stroke-width:3px;vector-effect:non-scaling-stroke}.envelope-fill{fill:#138fa02e;stroke:none}.envelope-graph circle{fill:var(--paper);stroke:var(--signal);stroke-width:3px}.envelope-controls{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.envelope-controls .parameter-control{border-right:1px solid #596365;flex-direction:column;align-items:center;gap:4px;padding:5px;display:flex}.envelope-controls .parameter-control:last-child{border-right:0}.envelope-controls .parameter-heading{flex-direction:column;align-items:center}.envelope-controls input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:60px;margin:0}.envelope-options{grid-template-columns:repeat(2,minmax(0,1fr))}.effect-module .parameter-control{border-right:0}.patch-state{border-left:3px solid var(--cyan);color:var(--ink);font:400 10px/1.5 var(--mono);overflow-wrap:anywhere;background:#e1e4e1;margin:0 0 6px;padding:6px}.patch-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;display:grid}.patch-actions button{flex-wrap:wrap;min-height:24px;padding:2px 3px;font-size:12px}.patch-actions button,.app-footer button{background:var(--paper);color:var(--ink);text-transform:uppercase;border:1px solid #8f9695;border-radius:3px;justify-content:center;align-items:center;gap:7px;font-weight:700;display:flex}.patch-actions button:hover:not(:disabled),.app-footer button:hover{border-color:var(--cyan);color:var(--cyan)}.patch-actions svg{flex-shrink:0;width:12px;height:12px}.app-footer svg{width:15px}.patch-actions button span{background:var(--signal);font:500 8px var(--mono);color:var(--ink);padding:2px 4px}.keyboard-section{border-top:1px solid var(--line);background:#d9d9d4;padding:8px clamp(14px,2vw,32px)}.keyboard-inner{max-width:1920px;margin:0 auto}.keyboard-performance-grid{grid-template-columns:minmax(0,1fr) 280px;align-items:stretch;gap:8px;display:grid}.keyboard-performance-grid .audio-spectrum{margin-top:0}.keyboard-toolbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:5px;display:flex}.keyboard-heading{align-items:center;gap:11px;display:flex}.keyboard-heading>svg{width:22px;color:var(--cyan)}.keyboard-heading .eyebrow{color:#555d60}.keyboard-heading h2{text-transform:uppercase;margin:2px 0 0;font-size:18px}.keyboard-controls{align-items:center;gap:12px;display:flex}.octave-control{background:var(--paper);border:1px solid #9ca19f;grid-template-columns:38px 92px 38px;align-items:center;display:grid}.octave-control button{background:0 0;border:0;place-items:center;min-height:38px;display:grid}.octave-control button:first-child{border-right:1px solid #c4c7c4}.octave-control button:last-child{border-left:1px solid #c4c7c4}.octave-control svg{width:15px}.octave-control output{text-align:center;font:500 10px var(--mono);text-transform:uppercase}.velocity-control{font:500 9px var(--mono);text-transform:uppercase;grid-template-columns:auto 100px 28px;align-items:center;gap:8px;display:grid}.velocity-control input{min-width:0;height:24px;accent-color:var(--cyan)}.velocity-control output{color:#065b67}.panic-button{background:var(--paper);text-transform:uppercase;border:1px solid #8f9695;border-radius:3px;padding:0 12px;font-weight:700}.keyboard-status{font:400 9px var(--mono);color:#555d60;margin:0 0 8px}.piano-bed{border:4px solid var(--ink);background:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;border-top:6px solid #633337;width:100%;height:108px;position:relative}.white-keys{height:100%;display:flex}.piano-key{border-radius:0 0 3px 3px}.white-key{height:100%;color:var(--ink);background:linear-gradient(#deded8,#f7f7f2 18%,#fff 90%,#eeeee8);border-top:0;border-bottom:4px solid #c9cac5;border-left:0;border-right:1px solid #8b908e;flex:1;position:relative}.white-key:last-child{border-right:0}.white-key span{font:500 9px var(--mono);position:absolute;bottom:10px;left:0;right:0}.black-keys{pointer-events:none;position:absolute;inset:0}.black-key{pointer-events:auto;background:linear-gradient(#131617,#303537 85%,#1b1e20);border:0;border-bottom:5px solid #111516;min-width:24px;height:61%;position:absolute;top:0;transform:translate(-50%);box-shadow:0 4px 5px #00000059}.white-key.active-key{background:var(--signal)}.black-key.active-key{background:var(--cyan);border-bottom-color:#064c56}.piano-key:disabled{opacity:.56}.app-footer{border-top:1px solid var(--line);background:#e3e3de;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:6px clamp(14px,2vw,32px);display:grid}.app-footer>div{font:500 10px var(--mono);text-transform:uppercase;align-items:center;gap:8px;display:flex}.app-footer>div svg{width:16px;color:var(--cyan)}.app-footer p{font:400 9px/1.4 var(--mono);color:#555d60;margin:0}.app-footer button{background:0 0;padding:0 13px}.app-footer .footer-actions{flex-wrap:wrap;justify-content:flex-end}.app-footer button[aria-pressed=true]{background:var(--signal);color:var(--ink)}.debug-panel{border-top:1px solid var(--line);background:var(--paper);overflow-wrap:anywhere;padding:16px clamp(14px,2vw,32px)}.debug-panel h2{margin:0 0 12px;font-size:18px}.debug-summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:0;display:grid}.debug-summary>div{min-width:0}.debug-summary dt{font-weight:700}.debug-summary dd{margin:4px 0 0}.debug-panel p,.debug-panel summary,.debug-summary{font:400 12px/1.5 var(--mono)}.debug-panel summary{cursor:pointer;padding:8px 0}.debug-values{max-height:240px;overflow:auto}.debug-values table{border-collapse:collapse;width:100%;font:400 12px/1.5 var(--mono)}.debug-values caption{text-align:left;padding:8px}.debug-values th,.debug-values td{text-align:left;border-bottom:1px solid var(--line);padding:6px 8px}@media (width<=1050px){.connection-strip{grid-template-columns:auto auto 1fr 1fr}.channel-select{grid-column:3}.peak-panel{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"utility utility lfo lfo""amp amp mod mod""osc osc osc osc""mixer filter filter filter""matrix matrix matrix matrix""arp glide effects effects""menu menu menu menu""caption caption caption caption"}.utility-module{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.mixer-module .parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lfo-module .parameter-grid{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}}@media (width<=1200px){.web-synth-signal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 112px}.web-synth-grid:not(.tutorial-controls) .web-filter-module{grid-column:1}.web-synth-grid:not(.tutorial-controls) .web-lfo-module{grid-column:2}.web-synth-grid:not(.tutorial-controls) .web-mixer-module{grid-area:1/3/3}.web-mixer-module .web-synth-control input[type=range]{height:180px}.web-envelope-layout,.hardware-envelope-layout{grid-template-columns:160px minmax(0,1fr)}}@media (width<=700px){.keyboard-performance-grid{grid-template-columns:minmax(0,1fr)}.app-header{flex-wrap:wrap;min-height:62px;padding:10px 14px}.patch-identity{text-align:left;border-left:0;width:100%;padding-left:0;display:block}.patch-identity strong{display:none}.connection-strip{grid-template-columns:1fr 1fr;padding:10px 14px}.connection-status{grid-column:1/-1}.connection-strip>label{min-width:0}.channel-select{grid-column:auto}main{padding:10px}.panel-intro{flex-direction:column;align-items:start;gap:8px}.web-synth-heading{flex-direction:column;align-items:stretch}.web-synth-actions{flex-wrap:wrap;align-items:stretch}.web-synth-actions label{flex:1}.web-lfo-module .parameter-heading{min-height:40px}.web-synth-envelope-grid{grid-template-columns:1fr}.peak-panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"utility utility""lfo lfo""amp amp""mod mod""osc osc""mixer mixer""filter filter""matrix matrix""arp glide""effects effects""menu menu""caption caption";padding:10px}.panel-caption{flex-wrap:wrap}.panel-caption span:last-child{margin-left:0}.parameter-grid{grid-template-columns:1fr 1fr}.parameter-grid.filter-main,.filter-modulation .parameter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.matrix-slot-selector{grid-template-columns:repeat(8,minmax(0,1fr))}.parameter-control{padding:6px}.menu-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.app-footer{grid-template-columns:1fr auto;padding:14px 18px}.app-footer p{display:none}.keyboard-section{padding:10px}.keyboard-toolbar{flex-direction:column;align-items:flex-start}.keyboard-controls{grid-template-columns:1fr auto;width:100%;display:grid}.velocity-control{grid-column:1/-1;grid-template-columns:auto 1fr 30px}.octave-control{grid-template-columns:38px 1fr 38px}}@media (width<=600px){.web-synth-signal-grid{grid-template-columns:minmax(0,1fr) 112px}.web-oscillator-1-module,.web-oscillator-2-module{grid-column:1}.web-synth-grid:not(.tutorial-controls) .web-mixer-module{grid-area:1/2/3}.web-mixer-module .web-synth-control input[type=range]{height:120px}.web-synth-grid:not(.tutorial-controls) .web-filter-module,.web-synth-grid:not(.tutorial-controls) .web-lfo-module{grid-column:1/-1}}@media (width<=360px){.web-synth-signal-grid{grid-template-columns:minmax(0,1fr)}.web-voice-module .web-synth-controls{grid-template-columns:1fr}.web-synth-grid:not(.tutorial-controls) .web-mixer-module{grid-area:auto/1}.web-envelope-layout,.hardware-envelope-layout{grid-template-columns:1fr}.web-envelope-layout .web-envelope-graph,.hardware-envelope-layout .envelope-graph{width:100%;height:100px}}@media (width<=420px){.brand-block{gap:10px}.brand-block h1{font-size:27px}.connection-strip{grid-template-columns:1fr}.connection-status{grid-column:auto}.parameter-grid{grid-template-columns:1fr}.parameter-grid.filter-main,.filter-modulation .parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.utility-module,.effects-top-row{grid-template-columns:1fr}.matrix-slot-selector{grid-template-columns:repeat(4,minmax(0,1fr))}.matrix-slot{grid-template-columns:repeat(2,minmax(0,1fr))}.matrix-slot label:nth-of-type(3){grid-column:1/-1}.parameter-control{border-right:0}.patch-actions,.app-footer{grid-template-columns:1fr}.app-footer button{width:100%}.keyboard-controls{grid-template-columns:1fr}.velocity-control{grid-column:auto}.panic-button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}
