/*
 * Author: Richard Knuchel
 * Copyright (c) 2026 Richard Knuchel
 * SPDX-License-Identifier: BSD-2-Clause
 */
:root{color-scheme:dark;font-family:Inter,"Segoe UI",system-ui,sans-serif;background:#101314;color:#e5dfd2;font-synthesis:none;font-optical-sizing:auto;--ink:#111516;--panel:#1a2020;--panel2:#202726;--line:#39403b;--muted:#91958a;--amber:#e5a753;--gold:#f4c47b;--green:#93ad82;--wood:#4c3020}
select{color-scheme:dark}
select option,select optgroup{background-color:#1a211d;color:#f0e8d8}
select option:disabled{color:#949b90}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;padding:16px 24px 212px;background:radial-gradient(ellipse at 50% -35%,#38413a 0,#1c2322 38%,#101314 75%);color:#e5dfd2}button,input,select,textarea{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}input,select,textarea{accent-color:var(--amber)}
.instrument{max-width:1440px;margin:0 auto 12px;padding:0 24px 14px;border:1px solid #51574b;border-top-color:#81816b;border-radius:8px;background:linear-gradient(115deg,#262b28 0,#1b211f 31%,#202522 68%,#181d1d 100%);box-shadow:0 20px 70px #0008,inset 0 1px #ffffff0b;position:relative;overflow:hidden}.instrument:before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:7px;background:repeating-linear-gradient(178deg,#78503a 0 2px,#39291f 3px 5px,#5b3c2c 6px 8px);opacity:.85}.instrument>*{position:relative;z-index:1}
.instrument:after{content:"";position:absolute;z-index:0;inset:0 0 0 auto;width:7px;background:repeating-linear-gradient(178deg,#78503a 0 2px,#39291f 3px 5px,#5b3c2c 6px 8px);opacity:.85}
/* Keep the playable controls together above the fixed keyboard. */
#oscillators .oscillator{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:3px 5px;min-height:0;padding:7px 9px 6px}
#oscillators .oscillator h2{grid-column:1/-1;margin:0 0 2px 3px}
#oscillators .oscillator .parameter-control{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;gap:6px;min-height:23px;font-size:10px}
#oscillators .oscillator .parameter-control select{max-width:150px}
#oscillators .oscillator .knob-control{grid-column:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto 38px auto;justify-items:center;gap:1px;min-height:0;text-align:center;font-size:10px}
#oscillators .oscillator .knob-control>span,.primary-controls .knob-control>span,.effects-controls .knob-control>span{font-size:10px;letter-spacing:.1px;color:#d8d2c3}
#oscillators .oscillator .knob-shell,#oscillators .oscillator .knob-face{width:36px;height:36px}
#oscillators .oscillator .knob-face:before{display:block;inset:3px}
#oscillators .oscillator .knob-pointer{display:block;top:3px;height:7px;transform-origin:1px 15px}
#oscillators .oscillator .knob-control input[type=range]{appearance:none;opacity:.001;border:0;background:transparent}
#oscillators .oscillator .knob-control output,.primary-controls .knob-control output,.effects-controls .knob-control output{font-size:10px;min-height:12px}
.primary-controls{grid-template-columns:1.05fr 1.2fr 1.2fr;gap:7px;align-items:stretch}
.primary-controls>.control-group,.effects-controls>.control-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;align-items:center;gap:2px 4px;min-width:0;padding:6px 8px}
.primary-controls>.control-group h3,.effects-controls>.control-group h3{grid-column:1/-1;margin:0 0 2px;font-size:10px;letter-spacing:.7px}
.primary-controls .parameter-control,.effects-controls .parameter-control{grid-template-columns:minmax(0,1fr) 17px;gap:2px 5px;min-width:0;min-height:22px;font-size:10px}
.primary-controls .parameter-control:has(select),.effects-controls .parameter-control:has(select){grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(50px,1fr)}
.primary-controls .parameter-control:has(input[type=checkbox]),.effects-controls .parameter-control:has(input[type=checkbox]){grid-column:span 2;grid-template-columns:minmax(0,1fr) 17px}
.primary-controls .parameter-control input[type=checkbox],.effects-controls .parameter-control input[type=checkbox]{width:13px;height:13px}
.primary-controls .knob-control,.effects-controls .knob-control{grid-template-rows:auto 39px auto;gap:0;min-height:0;font-size:10px}
.primary-controls .knob-shell,.primary-controls .knob-face,.effects-controls .knob-shell,.effects-controls .knob-face{width:36px;height:36px}
.primary-controls .knob-pointer,.effects-controls .knob-pointer{top:3px;height:7px;transform-origin:1px 15px}
.primary-controls .knob-face:before,.effects-controls .knob-face:before{inset:3px}
.effects-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.effect-heading{margin-top:6px;padding-top:5px}
.oscillator-section,.signal-section,.performance-section{padding-top:6px;padding-bottom:6px}
.section-heading{margin-bottom:5px}
.performance-section{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.performance-section>.section-heading{grid-column:1/-1;margin:0}
#performance-controls{display:flex;align-items:center;gap:6px;min-width:0;padding:0;margin:0;border:0}
#performance-controls>.control-group{display:flex;align-items:center;gap:6px;min-width:0;flex:1;padding:4px 7px}
#performance-controls .control-group h3{margin:0 4px 0 0;min-width:auto;font-size:9px}
#performance-controls .knob-control{grid-template-columns:auto 32px auto;grid-template-rows:1fr;gap:4px;min-height:0;align-items:center;font-size:9px;text-align:left}
#performance-controls .knob-shell,#performance-controls .knob-face{width:30px;height:30px}
#performance-controls .knob-control output{font-size:9px}
#performance-controls .parameter-control{min-width:80px;display:flex;align-items:center;gap:5px;font-size:9px}
#performance-controls .parameter-control select{min-width:0;font-size:9px}
.performance-buttons{align-self:center;gap:5px}
.performance-buttons .button{min-width:0;padding:7px 8px;font-size:9px}
.footer{padding-top:4px}
.effects-controls>.control-group{grid-template-columns:repeat(4,minmax(0,1fr))}
.effects-controls .parameter-control:has(select),.effects-controls .parameter-control:has(input[type=checkbox]){grid-column:span 1;grid-template-columns:minmax(0,1fr) 16px;gap:2px}
.effects-controls .parameter-control:has(select){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;justify-items:start}
.effects-controls .parameter-control:has(select) select{width:100%;min-width:0;padding:2px}
.effects-controls .knob-control{grid-template-rows:auto 34px auto}
.effects-controls .knob-shell,.effects-controls .knob-face{width:32px;height:32px}
.effects-controls .knob-pointer{transform-origin:1px 14px}
.instrument{height:calc(100vh - 160px)}
body .instrument{height:calc(100vh - 155px)}
#effects-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
.performance-section{display:none}
#performance-controls.performance-tile{display:grid;grid-template-columns:1fr;align-content:start;gap:5px;padding:6px 7px;border:1px solid #4c5248;border-radius:4px;background:linear-gradient(145deg,#292e29,#1a201e);box-shadow:inset 0 1px #ffffff09;min-width:0}
#performance-controls.performance-tile>.section-heading{margin:0;padding:0;border:0}
#performance-controls.performance-tile>.section-heading .section-index{display:none}
#performance-controls.performance-tile>.section-heading h2{font-family:Georgia,serif;font-size:11px;letter-spacing:.6px;text-transform:none;color:#ead7b4}
#performance-controls.performance-tile>.section-heading .section-note{display:none}
#performance-controls.performance-tile>.control-group{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}
#performance-controls.performance-tile>.control-group h3{margin:0;min-width:25px;font-size:9px}
#performance-controls.performance-tile .knob-control{grid-template-columns:auto 31px auto;grid-template-rows:1fr;gap:3px;min-height:0;align-items:center;font-size:9px;text-align:left}
#performance-controls.performance-tile .knob-shell,#performance-controls.performance-tile .knob-face{width:28px;height:28px}
#performance-controls.performance-tile .knob-pointer{transform-origin:1px 13px}
#performance-controls.performance-tile .parameter-control{display:flex;align-items:center;gap:4px;min-width:0;font-size:9px}
#performance-controls.performance-tile .parameter-control output{display:none}
#performance-controls.performance-tile .parameter-control select{max-width:105px;padding:2px 4px}
#performance-controls.performance-tile .performance-buttons{display:flex;flex-wrap:wrap;gap:4px}
#performance-controls.performance-tile .performance-buttons .button{flex:1;min-width:0;padding:6px 5px;font-size:8px;letter-spacing:.5px}
#oscillators .oscillator .parameter-control:has(input[type=checkbox]){grid-column:1/span 2;grid-template-columns:minmax(0,1fr) 16px}
#oscillators .oscillator .parameter-control:has(select){grid-column:3/-1;grid-template-columns:minmax(0,1fr) minmax(64px,1fr)}
@media(min-width:701px) and (max-height:760px){.topbar{min-height:54px}.toolbar{height:31px}.visualizer-strip{padding:4px 0}.scope-wrap{height:37px}.scope-wrap canvas{height:25px}.oscillator-section,.signal-section,.performance-section{padding-top:4px;padding-bottom:4px}.section-heading{margin-bottom:3px}.section-index{width:18px;height:16px}.oscillator{min-height:0}.primary-controls>.control-group,.effects-controls>.control-group{padding:4px 6px;gap:1px 3px}.primary-controls .knob-control,.effects-controls .knob-control{grid-template-rows:auto 34px auto}.primary-controls .knob-shell,.primary-controls .knob-face,.effects-controls .knob-shell,.effects-controls .knob-face{width:32px;height:32px}.primary-controls .knob-pointer,.effects-controls .knob-pointer{transform-origin:1px 14px}.effects-controls .knob-control output,.primary-controls .knob-control output{font-size:9px}.performance-buttons .button{padding:5px 7px}.footer{display:none}}
@media(min-width:701px) and (max-height:760px){body .instrument{height:calc(100vh - 135px)}.topbar{min-height:48px}.toolbar{height:29px}.visualizer-strip{padding:2px 0}.scope-wrap{height:31px}.scope-wrap canvas{height:19px}.oscillator-section,.signal-section,.performance-section{padding-top:2px;padding-bottom:2px}.section-heading{margin-bottom:1px}.oscillator .knob-control{grid-template-rows:auto 28px auto}.oscillator .knob-shell,.oscillator .knob-face{width:27px;height:27px}.primary-controls>.control-group,.effects-controls>.control-group{padding:2px 4px}.primary-controls .knob-control,.effects-controls .knob-control{grid-template-rows:auto 29px auto}.primary-controls .knob-shell,.primary-controls .knob-face,.effects-controls .knob-shell,.effects-controls .knob-face{width:27px;height:27px}.performance-buttons .button{padding:3px 5px}}
@media(min-width:701px) and (max-height:760px){#performance-controls.performance-tile{gap:3px;padding:4px 5px}#performance-controls.performance-tile>.section-heading,#performance-controls.performance-tile>.control-group h3{display:none}#performance-controls.performance-tile>.control-group{flex-wrap:nowrap;gap:3px}#performance-controls.performance-tile .knob-control{grid-template-columns:auto 25px auto;gap:2px}#performance-controls.performance-tile .knob-shell,#performance-controls.performance-tile .knob-face{width:23px;height:23px}#performance-controls.performance-tile .knob-pointer{transform-origin:1px 11px}#performance-controls.performance-tile>.performance-buttons{flex-wrap:nowrap;gap:3px}#performance-controls.performance-tile .performance-buttons .button{padding:4px 3px;font-size:7px;letter-spacing:0}}
@media(max-width:1100px) and (min-width:701px){.primary-controls{grid-template-columns:1fr 1fr 1fr}.primary-controls>.control-group,.effects-controls>.control-group{padding-inline:5px}.effects-controls{gap:5px}}
.topbar{min-height:82px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:10px;min-width:202px;color:var(--gold);text-decoration:none;font-weight:800;letter-spacing:4px;font-size:20px}.wordmark svg{width:37px;height:37px;fill:none;stroke:var(--amber);stroke-width:2.4}.wordmark small{display:block;color:#a3a291;font-size:8px;letter-spacing:2.4px;font-weight:600;margin-top:2px}.brand-eight{color:#f4ead6}.preset-readout{display:grid;gap:2px;min-width:210px;padding-left:22px;border-left:1px solid #4b5147}.micro-label{font-size:9px;letter-spacing:1.7px;color:var(--muted);font-weight:700}.preset-readout strong{font-family:Georgia,serif;font-weight:400;font-size:19px;letter-spacing:.2px}.preset-readout #preset-modified{font-size:10px;color:var(--green)}.preset-readout #preset-modified.modified{color:var(--amber)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.top-actions #status{font-size:11px;color:#b9b9aa;min-width:152px;margin:0}.status-lamp{width:8px;height:8px;border-radius:50%;background:#74776d;box-shadow:0 0 0 3px #ffffff08}.status-lamp.running{background:#9abc7f;box-shadow:0 0 12px #9abc7f88}.button{border:1px solid #60675d;border-radius:4px;padding:9px 13px;background:linear-gradient(#303734,#252b28);font-size:10px;letter-spacing:1px;font-weight:700}.button:hover{border-color:var(--amber);color:var(--gold)}.button-power{background:linear-gradient(#dca455,#b57836);border-color:#f2c078;color:#21190f;text-transform:uppercase}.button-power:hover{background:linear-gradient(#efbd71,#ce8b41);color:#21190f}.button-panic{padding:9px 15px;border-color:#774e42;color:#e5a18a;background:linear-gradient(#392823,#281e1b);font-size:10px;letter-spacing:1.4px}.button-danger{border-color:#75463b;color:#e5a18a}.toolbar{height:43px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.toolbar-left,.toolbar-actions{display:flex;align-items:center;gap:15px}.model-tag{font-size:10px;color:#272018;background:var(--amber);padding:4px 6px;border-radius:2px;font-weight:800;letter-spacing:1px}.toolbar-caption,.text-button{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#aaa99a}.text-button{background:none;border:0;padding:9px 6px}.text-button:hover{color:var(--gold)}
.visualizer-strip{display:grid;grid-template-columns:minmax(300px,1.8fr) minmax(170px,1fr) 90px minmax(190px,.9fr);gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid #464c43}.scope-wrap{height:56px;position:relative;border:1px solid #3d463c;background:linear-gradient(#121817,#171d1b);border-radius:3px;padding:4px 8px 11px}.scope-wrap canvas{display:block;width:100%;height:40px}.scope-caption{position:absolute;right:7px;bottom:2px;font-size:7px;letter-spacing:1.1px;color:#7d8579}.meter-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}.meter-track{grid-column:1/3;height:12px;display:grid;gap:3px}.meter-track i{display:block;height:4px;background:linear-gradient(90deg,#719065,#abc27d 70%,#d9b25e 88%,#d67850);transform:scaleX(0);transform-origin:left;border-radius:2px}.meter-wrap output{font-size:10px;color:#c3b99f;font-variant-numeric:tabular-nums}.voice-readout{display:grid;justify-items:center;gap:2px;border-left:1px solid #424940;border-right:1px solid #424940}.voice-readout strong{font-size:19px;color:#ece3ce;font-variant-numeric:tabular-nums}.voice-readout strong small{font-size:10px;color:#868c7f}.voice-readout>span:last-child{font-size:8px;letter-spacing:1.4px;color:var(--green)}.master-control{display:grid;gap:6px}.master-row{display:flex;gap:10px;align-items:center}.master-row input{width:100%;min-width:70px}.master-row output{font-size:11px;color:#d6bd91;font-variant-numeric:tabular-nums;min-width:34px}
.oscillator-section,.signal-section{padding:13px 0 10px;border-bottom:1px solid #454b42}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:10px}.section-index{display:inline-grid;place-items:center;color:#191710;background:var(--amber);width:21px;height:18px;font-size:9px;font-weight:800;border-radius:2px}.section-heading h1,.section-heading h2{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin:0;font-weight:700}.section-note{margin-left:auto;font-size:8px;letter-spacing:1.4px;color:#858a7d}.oscillator-bank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.oscillator{position:relative;padding:10px 12px 9px;border:1px solid #444b41;border-radius:4px;background:linear-gradient(145deg,#232a26,#1a201e);box-shadow:inset 0 1px #ffffff08}.oscillator:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--amber),#735331);opacity:.75}.oscillator h2{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#e5b36f;margin:0 0 8px 3px}.control-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:start}.control-group{border:1px solid #3e463e;border-radius:4px;background:linear-gradient(150deg,#222825,#1a201e);padding:9px 10px;min-width:0}.control-group h3{font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:#d6bd91;margin:0 0 7px}.parameter-control{display:grid;grid-template-columns:minmax(66px,.85fr) minmax(65px,1fr) 48px;align-items:center;gap:7px;min-height:27px;font-size:10px;color:#bfc0b3}.parameter-control>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.parameter-control input[type=range]{width:100%;min-width:45px;height:14px}.parameter-control output{font-size:9px;text-align:right;color:#d3bd91;font-variant-numeric:tabular-nums;white-space:nowrap}.parameter-control select{min-width:0;width:100%;background:#151a18;color:#e5dfd2;border:1px solid #51574b;border-radius:2px;padding:3px;font-size:10px}.parameter-control:has(input[type=checkbox]){grid-template-columns:minmax(80px,1fr) 20px 42px}.parameter-control input[type=checkbox]{justify-self:center;width:14px;height:14px}.footer{display:flex;gap:20px;align-items:center;color:#858a7f;font-size:9px;letter-spacing:.6px;padding:10px 2px 1px}.footer-api{margin-left:auto}.footer code{color:#c3ae88}
.keyboard-dock{position:fixed;z-index:5;left:0;right:0;bottom:0;padding:9px 24px 12px;background:linear-gradient(180deg,#171c1b,#101313 60%);border-top:1px solid #68634e;box-shadow:0 -12px 35px #0008}.keyboard-rail{max-width:1390px;margin:auto}.key-caption{display:flex;align-items:center;gap:9px;height:26px}.key-caption strong{font-size:9px;letter-spacing:1.8px}.key-caption>span:last-child{font-size:8px;letter-spacing:1.2px;color:var(--muted)}.performance-tools{display:flex;align-items:center;gap:12px;position:absolute;right:0;top:0;height:26px}.compact-control{display:flex;align-items:center;gap:5px;font-size:8px;letter-spacing:1px;color:#aaa999}.compact-control input{width:76px;height:14px}.compact-control output{width:20px;font-size:9px;color:#d8bd8c;text-align:right}.mode-control select{background:#1c211f;color:#e5dfd2;border:1px solid #52584e;border-radius:2px;padding:3px;font-size:9px}.hold-button{background:transparent;border:1px solid #53574d;border-radius:3px;padding:4px 8px;font-size:8px;letter-spacing:1px;color:#bbb6a8}.hold-button[aria-pressed=true]{background:#80603b;color:#fff1d8;border-color:#d4a55f}.keyboard{display:flex;gap:3px;height:112px;touch-action:none;user-select:none}.keyboard button{position:relative;flex:1;min-width:0;height:100%;padding:0 2px 8px;display:flex;justify-content:center;align-items:flex-end;border:1px solid #a9a38e;border-top:0;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#d9d4c2,#f0ead8 25%,#e4dece 80%,#c5beaa);color:#36362f;box-shadow:0 4px 5px #0007;font-size:9px;letter-spacing:.2px;touch-action:none;transition:background .08s,transform .08s}.keyboard button.black-key{z-index:1;flex:.62;margin:0 -9px;height:65%;align-self:flex-start;border:1px solid #77786d;border-top:0;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#171b1a,#343a35 46%,#151918);color:#c7c1ae;box-shadow:0 4px 6px #000b;font-size:8px}.keyboard button[aria-pressed=true]{background:linear-gradient(#f2c376,#cf843d);color:#221a11;transform:translateY(2px)}.keyboard button.black-key[aria-pressed=true]{background:linear-gradient(#dda951,#976128);color:#fff0d3}.keyboard button .note-name{pointer-events:none}.keyboard button:focus-visible{z-index:2;outline-offset:-3px}
.panel-dialog,.small-dialog{width:min(970px,94vw);max-height:min(82vh,760px);overflow:auto;padding:20px 22px;border:1px solid #777052;border-radius:7px;background:linear-gradient(145deg,#252c28,#171d1b);color:#e5dfd2;box-shadow:0 24px 80px #000c}.panel-dialog::backdrop,.small-dialog::backdrop{background:#080b0bd9;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #464c41;padding-bottom:13px;margin-bottom:15px}.dialog-head h2,.small-dialog h2{margin:3px 0 0;font-family:Georgia,serif;font-size:24px;font-weight:400}.icon-button{width:32px;height:32px;border:1px solid #555a4f;border-radius:3px;background:#1a201e;color:#e9d5ad;font-size:23px;line-height:1}.dialog-intro{font-size:11px;color:#aaa99b;margin:0 0 14px}.dialog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:start}.dialog-grid .control-group{padding:10px}.performance-controls{display:flex;align-items:center;gap:16px;padding:8px 0 13px;border-bottom:1px solid #41483f;margin-bottom:12px}.performance-controls .parameter-control{min-width:210px;flex:1}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.settings-grid>label,.preset-tools>label,.small-dialog form>label{display:grid;gap:6px;font-size:10px;color:#bcbcad}.settings-grid select,.settings-grid textarea,.preset-tools input,.preset-tools select,.small-dialog input{width:100%;background:#141a18;color:#e5dfd2;border:1px solid #4d5549;border-radius:3px;padding:8px;font-size:11px}.settings-grid .scope-setting{display:flex;align-items:center;gap:8px}.settings-grid .mapping-setting{grid-column:1/-1}.settings-grid textarea{font-family:ui-monospace,monospace}.preset-dialog{width:min(1050px,95vw)}.preset-tools{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:12px;align-items:end}.preset-tools .favorite-filter{display:flex;align-items:center;gap:6px;height:34px;white-space:nowrap}.preset-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0;max-height:35vh;overflow:auto}.preset-item{display:grid;grid-template-columns:1fr auto;gap:4px;padding:9px 10px;text-align:left;background:#1a211e;border:1px solid #40483f;border-radius:3px;color:#e5dfd2}.preset-item:hover,.preset-item[aria-current=true]{border-color:#b58d58;background:#282a23}.preset-item strong{font-family:Georgia,serif;font-size:14px;font-weight:400}.preset-item small{font-size:9px;color:#93978b}.preset-item .favorite-mark{color:var(--amber)}.preset-actions{display:flex;flex-wrap:wrap;gap:7px;border-top:1px solid #42493f;padding-top:12px}.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.small-dialog{width:min(420px,92vw);padding:22px}.small-dialog form{display:grid;gap:16px}.dialog-buttons{display:flex;justify-content:flex-end;gap:8px}#toast{position:fixed;z-index:10;right:24px;bottom:190px;max-width:min(440px,90vw);padding:10px 14px;border:1px solid #8c744e;border-radius:4px;background:#242922;color:#f0d9ae;font-size:11px;box-shadow:0 8px 30px #0009;opacity:0;pointer-events:none;transform:translateY(6px);transition:.18s}#toast.visible{opacity:1;transform:translateY(0)}
@media(max-width:1000px){body{padding:10px 12px 205px}.instrument{padding:0 17px 12px}.control-groups{grid-template-columns:repeat(3,minmax(0,1fr))}.visualizer-strip{grid-template-columns:minmax(230px,1.5fr) minmax(140px,1fr) 75px minmax(150px,.8fr);gap:11px}.topbar{gap:15px}.wordmark{min-width:175px}.top-actions #status{min-width:120px}}
@media(min-width:701px) and (max-height:760px){body{padding-top:7px;padding-bottom:172px}.topbar{min-height:62px}.wordmark svg{width:31px;height:31px}.visualizer-strip{padding:8px 0}.scope-wrap{height:48px}.scope-wrap canvas{height:32px}.oscillator-section,.signal-section{padding-top:9px;padding-bottom:7px}.section-heading{margin-bottom:7px}.oscillator{padding:7px 10px}.parameter-control{min-height:24px}.keyboard-dock{padding:6px 20px 8px}.keyboard{height:94px}.performance-tools{height:24px}.key-caption{height:24px}.footer{padding:7px 2px 0}}
@media(max-width:700px){body{padding:7px 7px 198px}.instrument{padding:0 13px 10px}.topbar{min-height:68px;gap:8px;flex-wrap:wrap;padding:8px 0}.wordmark{min-width:0;font-size:16px;letter-spacing:2px}.wordmark svg{width:30px;height:30px}.wordmark small{font-size:7px;letter-spacing:1.2px}.preset-readout{min-width:0;padding-left:10px}.preset-readout strong{font-size:15px}.top-actions{gap:6px}.top-actions #status{display:none}.button{padding:8px 9px;font-size:9px}.toolbar{height:auto;min-height:42px;align-items:flex-start;gap:5px}.toolbar-left{padding-top:10px}.toolbar-actions{gap:1px;flex-wrap:wrap;justify-content:flex-end}.text-button{font-size:8px;padding:7px 4px}.visualizer-strip{grid-template-columns:1fr 85px;gap:9px}.scope-wrap{grid-column:1/-1}.meter-wrap{grid-column:1}.voice-readout{grid-column:2;grid-row:2}.master-control{grid-column:1/-1}.oscillator-bank{grid-template-columns:1fr}.control-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.oscillator{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}.oscillator h2{grid-column:1/-1}.parameter-control{grid-template-columns:minmax(50px,.9fr) minmax(40px,1fr) 40px;gap:4px;font-size:9px}.parameter-control output{font-size:8px}.keyboard-dock{padding:7px 8px 8px}.key-caption{height:24px}.performance-tools{position:static;height:28px;gap:8px;justify-content:space-between}.compact-control input{width:55px}.keyboard-rail{display:flex;flex-direction:column}.keyboard{height:100px;gap:2px}.keyboard button{font-size:7px;padding-bottom:6px}.keyboard button.black-key{margin:0 -5px;font-size:6px}.footer{gap:9px;flex-wrap:wrap;font-size:8px}.footer-api{display:none}.dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-tools{grid-template-columns:1fr 1fr}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-actions .button{flex:1}.performance-controls{flex-wrap:wrap}.performance-controls .parameter-control{min-width:44%;}.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.control-groups{grid-template-columns:1fr}.toolbar-caption{display:none}.preset-readout{flex:1}.top-actions{width:100%;justify-content:flex-end}.topbar{padding-bottom:7px}.dialog-grid{grid-template-columns:1fr}.preset-list{grid-template-columns:1fr}.compact-control input{width:46px}.mode-control{display:none}.keyboard{height:87px}}

/* Keep the instrument console scrollable while the performance keyboard stays in view. */
body{height:100vh;min-height:0;overflow:hidden;padding-bottom:0}
.instrument{height:calc(100vh - 205px);min-height:0;overflow-y:auto;overflow-x:hidden;margin-bottom:0}
@media(min-width:701px) and (max-height:760px){.instrument{height:calc(100vh - 158px)}}
@media(max-width:700px){body{padding-bottom:0}.instrument{height:calc(100vh - 192px)}}

/* Cinder-8's compact performance face: engraved metal, walnut cheeks and tactile dials. */
:root{--amber:#d6a65f;--gold:#edd09a;--green:#9aae89;--steel:#353a35}
.instrument{border-color:#55584d;border-top-color:#88806a;background:repeating-linear-gradient(92deg,#ffffff03 0 1px,#00000004 1px 3px),linear-gradient(110deg,#282c28 0,#1c211f 28%,#242824 56%,#1c211f 100%);box-shadow:0 24px 74px #0009,inset 0 1px #fff1,inset 0 0 0 5px #10141355}
.instrument:before{width:9px;background:repeating-linear-gradient(176deg,#84583c 0 2px,#39271d 3px 5px,#65452e 6px 8px,#2c221b 9px 10px);opacity:.95}
.topbar{min-height:69px;gap:22px}.wordmark{min-width:184px;font-family:Georgia,serif;font-weight:700;letter-spacing:3px;font-size:19px}.wordmark svg{stroke:#dbb16e}.preset-readout{min-width:190px;padding-left:17px}.preset-readout strong{font-size:18px}.toolbar{height:37px}.text-button{font-size:9px;color:#c2bdaa}.visualizer-strip{padding:8px 0;grid-template-columns:minmax(250px,1.7fr) minmax(150px,.8fr) 75px minmax(175px,.8fr);gap:14px}.scope-wrap{height:48px;padding:3px 7px 10px}.scope-wrap canvas{height:34px}.oscillator-section,.signal-section,.performance-section{padding:9px 0 8px;border-bottom:1px solid #41473f}.section-heading{margin-bottom:7px}.section-heading h1,.section-heading h2{font-family:Georgia,serif;font-size:13px;letter-spacing:.9px;color:#eee3cf;text-transform:none}.section-index{background:linear-gradient(#e1b66d,#b77d3e);box-shadow:inset 0 1px #ffdfa1;font-size:8px}.section-note{font-size:8px;color:#969789;letter-spacing:1.15px}
.oscillator-bank{gap:8px}.oscillator{min-height:112px;padding:8px 10px;background:linear-gradient(135deg,#2b302c,#1b201e);border-color:#52574b;box-shadow:inset 0 1px #ffffff0b,0 4px 10px #0002}.oscillator:before{width:2px;opacity:.5}.oscillator h2{font-family:Georgia,serif;font-size:12px;letter-spacing:.6px;color:#e7d3ae;margin-bottom:7px}.control-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.primary-controls{display:grid;grid-template-columns:minmax(1.2fr,1.55fr) minmax(230px,1fr);gap:9px;align-items:stretch}.effects-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.effect-heading{margin-top:10px;padding-top:8px;border-top:1px solid #3d443c}.performance-section{padding-bottom:9px}.performance-controls{display:grid;grid-template-columns:minmax(210px,1fr) auto;gap:12px;align-items:center}.performance-controls .control-group{display:flex;align-items:center;gap:9px;min-height:52px;padding:6px 10px}.performance-controls .control-group h3{margin:0 auto 0 0;min-width:70px}.performance-controls .knob-control{grid-template-columns:auto 43px auto;align-items:center;gap:6px}.performance-controls .knob-shell,.performance-controls .knob-face{width:40px;height:40px}.performance-buttons{display:flex;gap:7px}.performance-buttons .button{min-width:93px;padding:8px 9px}.footer{padding-top:6px;font-size:8px}
.control-group{position:relative;padding:8px 10px 9px;border-color:#4c5248;background:linear-gradient(145deg,#292e29,#1a201e);box-shadow:inset 0 1px #ffffff09}.control-group h3{font-family:Georgia,serif;font-size:11px;letter-spacing:.6px;text-transform:none;color:#ead7b4;margin:0 0 6px}.parameter-control{grid-template-columns:minmax(68px,1fr) minmax(62px,1fr) 48px;min-height:25px;font-size:10px;color:#d0cbbb}.parameter-control output{color:#d7c298}.parameter-control select{min-height:23px;padding:3px 5px;border-color:#626052;background:linear-gradient(#202522,#171c1a);font-size:10px}
.knob-control{display:grid;grid-template-rows:auto 52px auto;justify-items:center;align-items:center;gap:2px;min-width:0;text-align:center;color:#d3ccbc;font-size:9px}.knob-control>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:.2px}.knob-control output{min-height:12px;color:#d7c08f;font-size:9px;font-variant-numeric:tabular-nums;white-space:nowrap}.knob-shell{width:52px;height:52px;position:relative;display:grid;place-items:center}.knob-face{width:48px;height:48px;position:relative;display:grid;place-items:center;border:1px solid #77715d;border-radius:50%;background:radial-gradient(circle at 35% 28%,#5a5b50 0,#343932 26%,#242925 68%,#161a18 100%);box-shadow:inset 0 1px 3px #ffffff25,inset 0 -4px 6px #0008,0 2px 4px #0008}.knob-face:before{content:"";position:absolute;inset:4px;border:1px solid #ffffff12;border-radius:50%;background:repeating-conic-gradient(from -135deg,#d6b16f 0 1deg,transparent 1deg 22deg);mask:radial-gradient(transparent 0 82%,#000 84%)}.knob-pointer{position:absolute;z-index:1;left:calc(50% - 1px);top:5px;width:2px;height:9px;border-radius:2px;background:#f1d59c;box-shadow:0 0 5px #e5be75aa;transform-origin:1px 19px;transform:rotate(var(--angle,-135deg))}.knob-control input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:.001;cursor:ns-resize;touch-action:none}.knob-control input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:50%}.knob-control:has(input[type=checkbox]){display:grid;grid-template-columns:minmax(60px,1fr) 20px auto;grid-template-rows:1fr;justify-items:stretch;gap:8px;min-height:25px;text-align:left}.knob-control:has(select){display:flex;flex-direction:row;justify-content:space-between;min-height:25px;text-align:left}.knob-control:has(select) select{min-width:80px}.oscillator .knob-control{grid-template-columns:minmax(52px,1fr) 48px auto;grid-template-rows:1fr;gap:7px;text-align:left;min-height:29px}.oscillator .knob-shell,.oscillator .knob-face{width:27px;height:27px}.oscillator .knob-face:before,.oscillator .knob-pointer{display:none}.oscillator .knob-control input[type=range]{appearance:none;border:1px solid #696556;border-radius:50%;background:radial-gradient(circle at 35% 30%,#55574d,#242925 70%);opacity:1;cursor:ns-resize}.oscillator .knob-control input[type=range]::-webkit-slider-thumb{appearance:none;width:5px;height:13px;border:0;border-radius:2px;background:#e7c887}.oscillator .knob-control input[type=range]::-moz-range-thumb{width:5px;height:13px;border:0;border-radius:2px;background:#e7c887}.oscillator .parameter-control{min-height:29px}.oscillator .parameter-control>span{font-size:9px}
.keyboard-dock{padding-top:7px;padding-bottom:9px;background:linear-gradient(#202421,#111514 55%);border-top-color:#74654d}.keyboard{height:101px;gap:2px}.key-caption{height:23px}.key-caption>span:last-child{margin-left:3px}.key-caption #octave-indicator{margin-left:auto;font-size:8px;letter-spacing:1px;color:#b7aa8f}.performance-tools{height:23px}.physical-key{position:absolute;left:4px;top:5px;font-size:8px;color:#706e61;letter-spacing:.3px;text-transform:uppercase;pointer-events:none}.black-key .physical-key{color:#bdb49f;top:4px}.keyboard button[aria-pressed=true] .physical-key{color:#392715}.keyboard button.black-key[aria-pressed=true] .physical-key{color:#25190d}
.control-groups{display:block}.advanced-controls,.dialog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.help-dialog{max-width:480px}.help-dialog dl{display:grid;grid-template-columns:110px 1fr;gap:9px 14px;font-size:11px}.help-dialog dt{color:#e4c58d}.help-dialog dd{margin:0;color:#c1c0b5}.preset-actions button:disabled{opacity:.4;cursor:not-allowed;border-color:#494d45;color:#8c8f83}.performance-section .parameter-control{display:flex;align-items:center;gap:10px;min-width:170px}.performance-section .parameter-control>span{white-space:nowrap}.performance-section .parameter-control select{max-width:120px}.performance-section .knob-control:has(input[type=checkbox]){min-width:90px}
@media(min-width:701px) and (max-height:760px){.topbar{min-height:58px}.visualizer-strip{padding:6px 0}.scope-wrap{height:42px}.scope-wrap canvas{height:28px}.oscillator-section,.signal-section,.performance-section{padding-top:6px;padding-bottom:6px}.oscillator{min-height:99px;padding:6px 9px}.section-heading{margin-bottom:5px}.knob-control{grid-template-rows:auto 46px auto;gap:1px}.knob-shell{width:46px;height:46px}.knob-face{width:43px;height:43px}.keyboard{height:88px}}
@media(max-width:1100px){.primary-controls{grid-template-columns:minmax(0,1.3fr) minmax(210px,.8fr)}.performance-controls{grid-template-columns:minmax(170px,1fr) auto}.knob-shell,.knob-face{width:45px;height:45px}.knob-control{grid-template-rows:auto 48px auto}}
@media(max-width:700px){.primary-controls{grid-template-columns:1fr}.effects-controls{grid-template-columns:1fr}.performance-controls{grid-template-columns:1fr}.performance-controls .control-group{flex-wrap:wrap}.oscillator{min-height:105px}.keyboard{height:90px}.physical-key{font-size:6px}.knob-control{grid-template-rows:auto 47px auto}.knob-shell,.knob-face{width:44px;height:44px}}

.top-actions .demo-status{max-width:130px;color:var(--amber);font-size:9px;letter-spacing:1px;text-transform:uppercase}
.top-actions .demo-status:not([hidden]){display:inline-flex;align-items:center;gap:6px}
.demo-status:not([hidden]):before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px #e5a753aa;animation:demo-pulse 1.5s ease-in-out infinite}
@keyframes demo-pulse{50%{opacity:.42}}
.toolbar-actions .tune-library-button{color:#f1c783;border-bottom:1px solid #8e6c3d}
.toolbar-actions .demo-stop-button:not([hidden]){padding:5px 8px;font-size:8px}
.tunes-dialog{width:min(900px,94vw)}
.tunes-dialog .dialog-head{align-items:flex-start}
.tunes-dialog .dialog-head>div{max-width:700px}
.tunes-dialog .dialog-intro{max-width:620px;line-height:1.55;margin:7px 0 0}
.tunes-now-playing{display:flex;align-items:center;gap:9px;min-height:38px;margin:12px 0;padding:8px 11px;border:1px solid #464c41;border-radius:3px;background:#151a18;color:#aaa99b;font-size:11px}
.tunes-now-playing[data-playing=true]{border-color:#90704a;color:#efd3a0;background:linear-gradient(90deg,#342a1e,#1b201d)}
.tunes-now-playing strong{font-family:Georgia,serif;font-size:14px;font-weight:400;color:#efcf96}
.tunes-now-playing span{margin-left:auto;color:#aeb19f;font-size:9px;letter-spacing:.8px}
.tunes-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:min(40vh,420px);overflow-y:auto;padding-right:3px}
.tune-item{display:grid;grid-template-columns:1fr auto;align-content:start;gap:5px 8px;min-height:120px;padding:12px;text-align:left;border:1px solid #464d42;border-radius:4px;background:linear-gradient(145deg,#262c27,#191f1d);color:#e5dfd2;transition:border-color .15s,background .15s,transform .15s}
.tune-item:hover,.tune-item:focus-visible{border-color:#b58c56;background:linear-gradient(145deg,#32362c,#202522);transform:translateY(-1px)}
.tune-item[aria-pressed=true]{border-color:#d0a45f;box-shadow:inset 0 0 0 1px #d0a45f55,0 0 18px #d0a45f12}
.tune-item strong{font-family:Georgia,serif;font-size:17px;font-weight:400;color:#f0d8ad}
.tune-item .tune-play-mark{width:22px;height:22px;display:grid;place-items:center;border:1px solid #71684f;border-radius:50%;color:#e3b76f;font-size:10px}
.tune-item .tune-description{grid-column:1/-1;min-height:32px;color:#bab9ad;font-size:10px;line-height:1.45}
.tune-item .tune-meta{grid-column:1/-1;display:flex;gap:10px;align-self:end;padding-top:4px;border-top:1px solid #3e453d;color:#929889;font-size:9px;letter-spacing:.7px;text-transform:uppercase}
.tunes-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid #41483f}
.tune-audio-note{font-size:9px;color:#8e9387}
@media(max-width:700px){.tunes-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tune-item{min-height:110px;padding:9px}.tune-item strong{font-size:14px}.tunes-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.tunes-list{grid-template-columns:1fr}.tune-item{min-height:0}}
.toolbar-actions .loop-studio-button{color:#c4d6a8;border-bottom:1px solid #657c56}
.loop-dialog{width:min(980px,94vw);max-height:min(88vh,820px);overflow:auto}
.loop-dialog .dialog-head{align-items:flex-start}
.loop-dialog .dialog-intro{max-width:700px;line-height:1.5;margin:7px 0 0}
.loop-status{display:flex;align-items:center;gap:10px;min-height:40px;margin:14px 0;padding:8px 11px;border:1px solid #454c42;border-radius:3px;background:#151a18;color:#aeb19f;font-size:10px;letter-spacing:.7px}
.loop-status strong{color:#e9dec8;font-family:Georgia,serif;font-size:14px;font-weight:400;letter-spacing:0}
.loop-status #loop-position{margin-left:auto;color:#c4d6a8}
.loop-status #loop-counts{color:#999d90}
.loop-indicator{width:8px;height:8px;border-radius:50%;background:#64705d;box-shadow:0 0 0 3px #64705d22}
.loop-status[data-recording=true] .loop-indicator{background:#d87958;box-shadow:0 0 0 3px #d879582e,0 0 12px #df765c}
.loop-status[data-playing=true] .loop-indicator{background:#e5b45f;box-shadow:0 0 0 3px #e5b45f2e,0 0 12px #e5b45f}
.loop-options{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.loop-options>label,.automation-tools>label,.performance-tools-row>label{display:flex;align-items:center;gap:7px;color:#b9b8a9;font-size:10px}
.loop-options select,.automation-tools select,.performance-tools-row select,.performance-tools-row input{min-height:30px;padding:5px 8px;border:1px solid #444b40;border-radius:3px;background:#171c19;color:#e4dfd3}
.loop-options .loop-check{margin-left:auto}
.loop-transport{display:flex;flex-wrap:wrap;gap:6px;padding:11px 0;border-top:1px solid #3e453d;border-bottom:1px solid #3e453d}
.loop-transport .button,.automation-tools .button,.performance-tools-row .button{padding:8px 10px;font-size:9px;letter-spacing:.45px}
.button-record{border-color:#8e5747;color:#f0a18a;background:linear-gradient(#352522,#251d1a)}
.button-record:hover{border-color:#d87958;background:#3b2923}
.automation-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 0 13px}
.automation-tools label:first-child{margin-right:auto}
.automation-tools .loop-seed-label{margin-left:12px}
.performance-shelf{padding:12px;border:1px solid #444a40;border-radius:4px;background:linear-gradient(110deg,#202622,#191e1c)}
.performance-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.performance-shelf-head>div{display:flex;align-items:baseline;gap:10px}
.performance-shelf-head strong{color:#ded5c1;font:14px Georgia,serif}
.loop-error{color:#e5a18b;font-size:10px}
.performance-tools-row{display:flex;align-items:end;flex-wrap:wrap;gap:7px}
.performance-tools-row .performance-name{flex:1 1 170px;display:grid;gap:4px}
.performance-tools-row .performance-name input{width:100%}
.performance-tools-row .performance-select{flex:1.4 1 200px;display:grid;gap:4px}
.performance-tools-row .performance-select select{width:100%}
.performance-tools-row .file-button{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:700px){.loop-status{flex-wrap:wrap;gap:7px}.loop-status #loop-position{margin-left:0}.loop-options{align-items:flex-start;flex-wrap:wrap}.loop-options .loop-check{margin-left:0}.automation-tools label:first-child{margin-right:0}.automation-tools .loop-seed-label{margin-left:0}.performance-shelf-head>div{align-items:flex-start;flex-direction:column;gap:3px}}
/* Voice options: arrange parameter families into readable hardware cards. */
#sound-dialog #advanced-controls{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;align-items:start}
#sound-dialog #advanced-controls>.control-group{min-width:0;align-content:start}
#sound-dialog #group-advanced-controls-voice{order:1;grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px}
#sound-dialog #group-advanced-controls-voice>h3,#sound-dialog #group-advanced-controls-filter>h3{grid-column:1/-1}
#sound-dialog #group-advanced-controls-voice>.parameter-control:has(select){grid-column:span 2;grid-template-columns:minmax(0,70px) minmax(0,1fr);gap:6px}
#sound-dialog #group-advanced-controls-voice>.knob-control:not(:has(select)){grid-column:span 2}
#sound-dialog #group-advanced-controls-voice>.parameter-control:has(input[type=checkbox]){grid-column:span 2;grid-template-columns:minmax(0,1fr) 18px;gap:6px}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select){display:grid;grid-column:span 2;grid-template-columns:minmax(65px,.8fr) minmax(95px,1.2fr);grid-template-rows:30px 12px;align-items:center;justify-items:stretch;gap:2px 8px;min-height:0;text-align:left}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select)>span{grid-column:1;grid-row:1/3;white-space:normal;overflow:visible;text-overflow:clip}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select) .knob-shell{grid-column:2;grid-row:1;width:auto;height:30px;display:block}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select) .knob-face{width:100%;height:30px;display:block;overflow:visible;border:0;border-radius:3px;background:transparent;box-shadow:none}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select) .knob-face:before,#sound-dialog #group-advanced-controls-voice>.knob-control:has(select) .knob-pointer{display:none}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select) .knob-face select{position:relative;z-index:1;display:block;width:100%;height:30px;min-width:0;padding:4px 6px;border:1px solid #626052;border-radius:3px;background:linear-gradient(#202522,#171c1a);color:#e5dfd2;font:inherit}
#sound-dialog #group-advanced-controls-voice>.knob-control:has(select)>output{grid-column:2;grid-row:2;min-height:12px;text-align:right;font-size:9px}
#sound-dialog #group-advanced-controls-Oscillator\ 1\ detail{order:2}
#sound-dialog #group-advanced-controls-Oscillator\ 2\ detail{order:3}
#sound-dialog #group-advanced-controls-Oscillator\ 3\ detail{order:4}
#sound-dialog #group-advanced-controls-noise{order:5}
#sound-dialog #group-advanced-controls-drive{order:6}
#sound-dialog #group-advanced-controls-filter{order:7;grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px 8px}
#sound-dialog #group-advanced-controls-filter>.parameter-control:has(select),#sound-dialog #group-advanced-controls-filter>.parameter-control:has(input[type=checkbox]){grid-column:span 2;grid-template-columns:minmax(0,1fr) 18px;gap:6px}
#sound-dialog #group-advanced-controls-filter>.parameter-control:has(select){grid-template-columns:minmax(60px,.8fr) minmax(90px,1.2fr)}
#sound-dialog #group-advanced-controls-filter>.knob-control{grid-column:span 2}
#sound-dialog #group-advanced-controls-chorus{order:8}
#sound-dialog #group-advanced-controls-delay{order:9}
#sound-dialog #group-advanced-controls-reverb{order:10}
@media(max-width:700px){#sound-dialog #advanced-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#sound-dialog #group-advanced-controls-voice{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#sound-dialog #group-advanced-controls-voice>.parameter-control:has(select),#sound-dialog #group-advanced-controls-voice>.knob-control:not(:has(select)),#sound-dialog #group-advanced-controls-voice>.knob-control:has(select),#sound-dialog #group-advanced-controls-voice>.parameter-control:has(input[type=checkbox]){grid-column:span 1}#sound-dialog #group-advanced-controls-filter{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#sound-dialog #group-advanced-controls-filter>.parameter-control:has(select),#sound-dialog #group-advanced-controls-filter>.parameter-control:has(input[type=checkbox]),#sound-dialog #group-advanced-controls-filter>.knob-control{grid-column:span 2}}
/* Reserve a real column for performance controls so the octave readout never sits beneath them. */
.keyboard-rail{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:23px auto;align-items:center;column-gap:18px}
.key-caption{grid-column:1;grid-row:1;min-width:0}
.key-caption #octave-indicator{min-width:max-content}
.performance-tools{position:static;grid-column:2;grid-row:1;justify-self:end;gap:10px}
.keyboard{grid-column:1/-1;grid-row:2;width:100%}
@media(max-width:900px){.keyboard-rail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;row-gap:3px}.key-caption{grid-column:1;grid-row:1}.performance-tools{grid-column:1;grid-row:2;justify-self:start;justify-content:flex-start;flex-wrap:wrap;height:auto;min-height:24px}.keyboard{grid-column:1;grid-row:3}}
/* One shared case contains a scrollable console and a permanent performance deck. */
body{height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:0;display:grid;place-items:center}
.instrument-chassis{position:relative;isolation:isolate;display:grid;grid-template-rows:minmax(0,1fr) auto;width:min(1440px,calc(100vw - 24px));height:calc(100dvh - 16px);min-height:0;margin:0;overflow:hidden;border:1px solid #55584d;border-top-color:#88806a;border-radius:8px;background:linear-gradient(110deg,#262b28,#1b211f 31%,#202522 68%,#181d1d);box-shadow:0 24px 74px #0009,inset 0 1px #fff1,inset 0 0 0 5px #10141355}
.instrument-chassis:before,.instrument-chassis:after{content:"";position:absolute;z-index:5;top:0;bottom:0;width:9px;background:repeating-linear-gradient(176deg,#84583c 0 2px,#39271d 3px 5px,#65452e 6px 8px,#2c221b 9px 10px);opacity:.95;pointer-events:none}
.instrument-chassis:before{left:0}.instrument-chassis:after{right:0}
.instrument-chassis>.instrument,.instrument-chassis>.keyboard-dock{position:relative;z-index:1;width:100%;max-width:none;min-height:0;margin:0}
.instrument-chassis>.instrument{height:auto;overflow-x:hidden;overflow-y:auto;padding:8px 24px 12px;border:0;border-radius:0;background:repeating-linear-gradient(92deg,#ffffff03 0 1px,#00000004 1px 3px),linear-gradient(110deg,#282c28 0,#1c211f 28%,#242824 56%,#1c211f 100%);box-shadow:none;scrollbar-color:#68644f #171c1a;scrollbar-width:thin}
.instrument-chassis>.instrument:before,.instrument-chassis>.instrument:after{content:none}
.instrument-chassis>.keyboard-dock{position:static;left:auto;right:auto;bottom:auto;z-index:2;padding:8px 20px 10px;border:0;border-top:1px solid #74654d;border-radius:0;background:linear-gradient(180deg,#202421,#111514 55%);box-shadow:inset 0 1px #ffffff0a}
.instrument-chassis .keyboard-rail{width:100%;max-width:none}
#dynamics-controls{grid-template-columns:1fr}
#dynamics-controls>.control-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#dynamics-controls>.control-group>h3,#dynamics-controls>.control-group>.parameter-control{grid-column:1/-1}
#dynamics-controls>.control-group>.parameter-control{grid-template-columns:auto 24px;justify-content:start;gap:12px}
#dynamics-open{justify-self:start;padding:2px 0;font-size:8px;color:#d6bd91}
@media(max-width:700px){#dynamics-controls>.control-group{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.instrument-chassis>.instrument{padding-inline:17px}}
@media(max-width:700px){.instrument-chassis{width:calc(100vw - 12px);height:calc(100dvh - 12px)}.instrument-chassis>.instrument{padding:7px 13px 10px}.instrument-chassis>.keyboard-dock{padding:7px 8px 8px}}

/* The scope switch stays visible when waveform drawing is disabled. */
button.scope-caption{border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;line-height:1.2}button.scope-caption:hover,button.scope-caption:focus-visible{color:var(--amber)}
.scope-wrap{box-shadow:inset 0 0 14px #070e0bc4;border-color:#43503c}