/* SPDX-License-Identifier: GPL-3.0-only */
/* The native SYNTH hierarchy, with touch-sized details below its compact overview. */
.instrument-menu{position:fixed;z-index:1002;right:12px;top:42px;display:flex;flex-direction:column;min-width:200px;padding:8px;background:#101010;border:1px solid #586900;box-shadow:0 8px 32px #000c}.instrument-menu[hidden]{display:none}.instrument-menu button{min-height:44px;text-align:left;padding:10px 14px;font:11px var(--mono);color:var(--text)}.instrument-menu button.active{color:var(--accent);background:#202800}
.instrument-app .instrument-toolbar .tabs{gap:4px}.instrument-app .instrument-toolbar .tabs button{padding:8px 14px;border:1px solid transparent}.instrument-app .instrument-toolbar .tabs button.active{color:#000;background:var(--accent);border-color:var(--accent)}
.instrument-app .synth-view{padding:4px 0}.synth-overview{display:grid;grid-template-columns:minmax(148px,1.35fr) repeat(6,minmax(72px,1fr));gap:5px;align-items:stretch}.algorithm-overview,.operator-strip{background:#0b0b0b;border:1px solid #303228;border-radius:3px;min-width:0}.operator-strip.selected{border-color:var(--accent);background:#161a0e}.algorithm-overview{display:grid;grid-template-columns:1fr 72px;grid-template-rows:28px 1fr;gap:0;padding:3px}.algorithm-title{grid-column:1/-1;min-height:28px;color:var(--accent);font:9px var(--mono);text-align:left;padding:0 2px}.algorithm-diagram{display:block;width:100%;height:110px;color:var(--accent);padding:0}.algorithm-diagram svg{width:100%;height:100%}.algorithm-controls{min-width:0;display:flex;flex-direction:column;justify-content:center}.instrument-app .algorithm-controls .field{gap:0}.algorithm-controls .field-head{display:none}.instrument-app .algorithm-controls .field select{min-height:28px;padding:2px;font:8px var(--mono);background:#111;border:1px solid #586900}.instrument-app .algorithm-controls .knob{padding:3px 0;gap:0}.instrument-app .algorithm-controls .knob>label{font-size:8px;min-height:14px}.instrument-app .algorithm-controls .knob-value{margin:0;min-height:14px;font-size:9px}
.operator-select{display:grid;grid-template-columns:1fr auto;grid-template-rows:18px 16px;width:100%;min-height:40px;padding:3px 5px;text-align:left;color:var(--text);font:9px var(--mono)}.selected .operator-select strong{color:var(--accent)}.operator-role{font-size:7px;color:#92978b;text-align:right}.operator-summary{grid-column:1/-1;font-size:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#a5aa9c}.operator-ratio{display:block;text-align:center;font:9px var(--mono);color:#ccc;line-height:16px}
.instrument-app .synth-overview .knob{padding:0;gap:0}.instrument-app .synth-overview .knob>label{font-size:8px;min-height:12px}.instrument-app .synth-overview .knob-value{font-size:10px;margin:0;min-height:14px}.instrument-app .synth-overview .dial{width:42px;height:42px;min-width:42px}.instrument-app .synth-overview .dial:after{left:20px;top:6px;transform-origin:1px 15px;height:11px}.instrument-app .synth-overview .dial-zone{min-height:44px;gap:0;position:relative}.instrument-app .synth-overview .mod-add{position:absolute;right:0;width:24px;min-height:44px;height:44px;font-size:14px}.instrument-app .synth-overview .mod-tray{max-width:100%;overflow-x:auto}.instrument-app .synth-overview .mod-route{flex:none}.instrument-app .synth-overview .midi-badge{font-size:7px;min-height:22px}
.envelope-view{width:100%;height:60px;color:var(--accent);display:block;overflow:visible;flex:none}.envelope-line{stroke:currentColor;stroke-width:1.5;fill:none}.envelope-fill{fill:currentColor;opacity:.12}.envelope-handles{fill:#111;stroke:#ddd;opacity:0}.editable-envelope{touch-action:none;cursor:crosshair}.editable-envelope:hover .envelope-handles,.editable-envelope:active .envelope-handles{opacity:1}.operator-strip>.envelope-view{height:22px;padding:2px 4px}.operator-strip:has([data-param$=_level] .dial[aria-valuenow="0"])>.envelope-view{opacity:.25}
.instrument-app .synth-pages{position:sticky;top:-4px;z-index:3;display:flex;background:#000;margin:4px 0;padding:2px 0;gap:4px;border-bottom:1px solid #303228}.instrument-app .synth-pages button{min-height:36px;padding:6px 14px;font:10px var(--mono);color:var(--accent);border:1px solid #586900;border-radius:2px}.instrument-app .synth-pages button.active{background:#455200;color:#f0f4df}
.instrument-app .native-operator-board{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px}.instrument-app .native-operator-board .control-section{padding:8px;margin:0;background:#0b0b0b;border:1px solid #303228;border-radius:2px}.instrument-app .native-operator-board .control-section>h3{color:var(--accent);font-size:9px;letter-spacing:0;margin:0 0 6px}.instrument-app .native-operator-board .deep-controls{gap:2px;grid-template-columns:repeat(3,minmax(0,1fr))}.instrument-app .native-operator-board [data-synth-section=expression] .deep-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.instrument-app .native-operator-board [data-synth-section=envelope] .deep-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.instrument-app .native-operator-board .choice-controls{gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}.instrument-app .native-operator-board .field select{min-height:38px;padding:5px;background:#10110e;border-color:#586900;font-size:10px}.instrument-app .native-operator-board .knob{padding:4px 0;gap:0}.instrument-app .native-operator-board .knob>label{min-height:16px;font-size:8px}.instrument-app .native-operator-board .knob-value{margin:0;min-height:16px;font-size:10px}.instrument-app .native-operator-board .dial-zone{gap:0}.instrument-app .native-operator-board .mod-add{max-width:26px;min-width:26px}.instrument-app .native-operator-board .field-head{font-size:9px}.velocity-coarse{font:9px var(--mono);min-height:36px;width:100%;text-align:left;color:#999}.velocity-coarse:before{content:'□ ';color:var(--accent)}.velocity-coarse[aria-checked=true]:before{content:'■ '}
.instrument-app .filter-board{grid-template-columns:repeat(2,minmax(0,1fr))}.synth-io{border:1px solid #303228;margin-top:6px;background:#0b0b0b}.synth-io>summary{font:9px var(--mono);min-height:36px;padding:12px;color:var(--accent);cursor:pointer}.io-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:4px}
.instrument-dialog{background:#0a0a0a;color:var(--text);border:1px solid #586900;padding:10px;width:min(780px,calc(100vw - 20px));max-height:calc(100dvh - 20px)}.instrument-dialog-head{display:flex;position:sticky;top:-10px;z-index:1;justify-content:space-between;align-items:center;background:#0a0a0a;border-bottom:1px solid #303228;margin-bottom:8px}.instrument-dialog-head h2{font:12px var(--mono);margin:0;color:var(--accent)}.instrument-dialog-head button{min-height:44px;padding:8px 12px;font:10px var(--mono);color:var(--text)}.algorithm-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px}.algorithm-picker button{color:var(--accent);border:1px solid #303228;background:#0c0c0c;padding:4px;text-align:left;font:10px var(--mono)}.algorithm-picker button.active{border-color:var(--accent);background:#1c2400}.algorithm-picker svg{display:block;width:100%;height:88px}.user-matrix{display:grid;grid-template-columns:58px repeat(6,minmax(66px,1fr));gap:4px;min-width:490px;align-items:center;font:10px var(--mono);text-align:center}.user-matrix .knob{gap:0}.user-matrix .knob>label{font-size:8px}.user-matrix .knob-value{font-size:9px;min-height:14px;margin:0}.user-matrix .dial-zone{min-height:44px}.user-matrix .dial{width:44px;height:44px}.user-matrix .dial:after{left:21px;top:6px;transform-origin:1px 16px}.user-matrix .mod-add{display:none}.matrix-out{min-height:44px;border:1px solid #586900;color:#aaa;font:10px var(--mono)}.matrix-out[aria-pressed=true]{color:#000;background:var(--accent)}
.performance-strip{--strip-color:#25e0c4;position:relative;display:block;width:40px;height:66px;min-height:44px;overflow:hidden;border:1px solid #435049;border-radius:5px;background:repeating-linear-gradient(to top,transparent 0 10px,#ffffff0c 10px 11px),linear-gradient(90deg,#0c1110,#17201e 50%,#0c1110);box-shadow:inset 0 1px 5px #000;touch-action:none}.performance-strip.bipolar{--strip-color:#c2f000}.performance-strip.bipolar:before{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px solid #c2f00055}.strip-fill{position:absolute;bottom:calc(var(--strip-low)*100%);height:calc((var(--strip-high) - var(--strip-low))*100%);left:8px;right:8px;background:var(--strip-color);opacity:.28;pointer-events:none}.strip-marker{position:absolute;bottom:calc(var(--strip-position)*100%);height:2px;left:5px;right:5px;background:var(--strip-color);box-shadow:0 0 6px var(--strip-color);pointer-events:none;transform:translateY(1px)}.engaged .strip-fill{opacity:.5}.instrument-app .performance-strip input[type=range]{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;touch-action:none;cursor:ns-resize}.performance-strip:focus-within{outline:1px solid var(--strip-color);outline-offset:2px}.instrument-app .performance-wheels{gap:4px}.instrument-app .performance-wheels label{font-size:8px}
@media(min-width:1100px){.instrument-app .native-operator-board{grid-template-columns:1fr 1.3fr 1.8fr 1fr}.instrument-app .native-operator-board [data-synth-section=envelope] .deep-controls{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){.instrument-app .instrument-access #presets-toggle{max-width:80px}.instrument-app .instrument-toolbar .tabs button{padding:8px}.instrument-access{gap:3px}.instrument-app .console{padding-inline:5px}.synth-overview{grid-template-columns:118px repeat(6,minmax(64px,1fr));overflow-x:auto}.instrument-app .native-operator-board,.instrument-app .filter-board{grid-template-columns:1fr}.instrument-app .native-operator-board .deep-controls{grid-template-columns:repeat(4,minmax(0,1fr))}}
.instrument-app .synth-overview .mod-add{display:none}.instrument-app .synth-pages .overview-toggle{margin-left:auto;color:#aab38b;border-color:#303228;font-size:9px}.overview-compact .algorithm-diagram,.overview-compact .algorithm-controls,.overview-compact .operator-ratio,.overview-compact .knob,.overview-compact .envelope-view{display:none!important}.overview-compact .algorithm-overview{display:flex;align-items:center;padding:0 4px}.overview-compact .algorithm-title{min-height:44px;width:100%;font-size:10px}.overview-compact .operator-select{min-height:44px;padding:4px 6px;grid-template-rows:18px 16px;font-size:11px}.overview-compact .operator-summary{font-size:9px}.overview-compact .operator-role{font-size:8px}.instrument-app .native-operator-board .deep-controls .knob>label{font-size:9px}.instrument-app .native-operator-board .control-section>h3{font-size:10px}.mod-families{display:flex;flex-wrap:wrap;gap:4px}.mod-families button{font:10px var(--mono);min-height:40px;padding:8px;color:var(--text);border:1px solid #303228}.mod-families button.active{color:var(--accent);border-color:var(--accent)}
.mod-board{padding:8px;border:1px solid #303228;background:#0b0b0b}.instrument-app .mod-board .deep-controls{grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:4px}.instrument-app .mod-board .choice-controls{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.instrument-app .mod-board .control-section{margin:4px 0 10px}.instrument-app .mod-board .control-section>h3{color:var(--accent);font-size:10px}.mod-route-list>summary{font:10px var(--mono);padding:12px 8px;min-height:40px;color:#aaa}.controller-slots{display:grid;gap:6px}.controller-slot{display:grid;grid-template-columns:65px 80px minmax(100px,1fr) minmax(90px,1fr) 70px 70px;gap:6px;align-items:center;font:11px var(--mono)}.controller-slot select,.controller-slot button{min-height:44px;background:#121510;color:var(--text);border:1px solid #48513a;padding:6px;font:10px var(--mono)}.function-tools{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}.function-tools button,.function-tools select{min-height:40px;padding:6px 10px;border:1px solid #4f3264;background:#121014;color:#c49dea;font:10px var(--mono)}.function-tools button[aria-pressed=true]{background:#65417d;color:white}.function-surface{display:block;width:100%;height:180px;touch-action:none;background:#050306;border:1px solid #4f3264;cursor:crosshair}.function-grid{stroke:#523365;stroke-width:.5;fill:none;opacity:.4}.function-line{stroke:#b16aff;stroke-width:1.8;fill:none}.function-fill{fill:#9d4edd;opacity:.15}.function-surface circle{fill:#c49dea;stroke:#08030b;stroke-width:1}.function-surface circle.sustain-point{stroke:#fff;stroke-width:3}.function-surface g>path:not(.function-grid path){fill:#9d4edd}.function-editor{margin-bottom:10px}
.instrument-mark{font:700 14px var(--mono);color:var(--accent);padding:0 4px;letter-spacing:.5px;flex:none}.output-drawer{position:fixed;z-index:1003;top:42px;right:10px;max-height:calc(100dvh - 66px);overflow:auto;width:min(680px,calc(100vw - 20px));padding:12px;background:#0b0b0b;border:1px solid #586900;box-shadow:0 10px 30px #000c}.output-drawer[hidden]{display:none}.output-drawer h3{font:11px var(--mono);color:var(--accent);margin:0 0 10px}.output-drawer .quality{font:10px var(--mono);display:flex;gap:10px;align-items:center;color:#ccc}.output-drawer .quality select{min-height:38px;background:#111;color:var(--text);border:1px solid #586900;padding:6px}.instrument-app .output-drawer .field-head output{display:none}.output-drawer .field{align-self:center}.instrument-app .output-drawer .knob>label{font-size:9px}.controller-mode #output-toggle{display:none}
@media(max-width:760px){.instrument-mark{display:none}.instrument-app .instrument-access #presets-toggle{max-width:75px}.instrument-app .instrument-toolbar .tabs button{padding:8px 9px}}

.envelope-viewport{min-width:0}.envelope-viewport .editable-envelope{overflow:hidden;height:94px}.envelope-view-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;font:9px var(--mono);color:#a8ad97}.instrument-app .envelope-view-tools button{min-height:36px;padding:3px 8px;font:10px var(--mono);border:1px solid var(--line);color:var(--accent)}

.envelope-line,.function-line{vector-effect:non-scaling-stroke}.graph-window{font:9px var(--mono);color:#a8ad97;align-self:center}.function-surface{overflow:hidden}

/* Small separation from the controls; envelope geometry and gestures stay unchanged. */
.envelope-viewport{margin-top:8px}

.envelope-stage-help{font:9px/1.4 var(--mono);color:#a8ad97;white-space:normal;margin-top:3px}