:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;font-synthesis:none;--waves-color-surface-canvas: #101819;--waves-color-surface-panel: #192426;--waves-color-surface-control: #172224;--waves-color-surface-control-hover: #2b4140;--waves-color-text: #e7eeeb;--waves-color-text-muted: #a1b6b1;--waves-color-border: #354648;--waves-color-accent: #78e3c0;--waves-color-accent-ink: #10201b;--waves-color-danger: #ffb3a4;--waves-radius-control: 6px;--waves-radius-panel: 12px;--waves-space-panel: 20px;--waves-focus-width: 2px;--waves-motion-fast: .15s;color:var(--waves-color-text);background:var(--waves-color-surface-canvas);--accent: var(--waves-color-accent);--muted: var(--waves-color-text-muted);--line: var(--waves-color-border)}*{box-sizing:border-box}body{margin:0}main{max-width:1480px;margin:auto;padding:38px 40px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}h1{font-size:clamp(2rem,4vw,3.5rem);font-weight:600;letter-spacing:-.065em;margin:0}h1 span{color:var(--muted);font-size:.38em;letter-spacing:-.02em;font-weight:400}.eyebrow{color:var(--accent);letter-spacing:.19em;font-size:.65rem;font-weight:600;margin:0 0 12px}.intro{color:var(--muted);font-size:.9rem;margin:10px 0 0}.engine{display:flex;align-items:center;gap:16px;font-size:.75rem;color:var(--muted)}button,input,select{font:inherit}button,input:not([type=range]),select{border:1px solid var(--line);border-radius:var(--waves-radius-control);background:var(--waves-color-surface-control);color:var(--waves-color-text);padding:9px 12px;min-height:40px}button{cursor:pointer;font-size:.78rem;white-space:nowrap;transition:background var(--waves-motion-fast),border-color var(--waves-motion-fast)}button:hover{background:var(--waves-color-surface-control-hover);border-color:var(--waves-color-accent)}button:disabled{opacity:.5;cursor:wait}button.primary,button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--waves-color-accent-ink)}button.danger{color:var(--waves-color-danger)}:focus-visible{outline:var(--waves-focus-width) solid var(--accent);outline-offset:4px}label,.caption{font-size:.73rem;color:var(--muted)}.panel{background:var(--waves-color-surface-panel);border:1px solid var(--line);border-radius:var(--waves-radius-panel);padding:var(--waves-space-panel)}h2{text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;color:var(--accent);font-weight:600;margin:0 0 20px}.patch-bar{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.1fr) minmax(180px,1fr) auto;gap:20px;align-items:center}.patch-bar:has(#instrument-picker[hidden]){grid-template-columns:minmax(220px,1.1fr) minmax(180px,1fr) auto}.patch-bar label,.midi-learn>label{display:block;margin-bottom:7px}.patch-bar input,.patch-bar select{width:100%}#patch-state,#instrument-description{display:block;margin-top:5px}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.status-strip{display:flex;justify-content:space-between;gap:20px;min-height:56px;align-items:center;font-size:.76rem;color:var(--muted);padding:12px 2px}.status-strip>span:last-child{white-space:nowrap}.synth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}#instrument-panel,#shared-controls{display:contents}#instrument-panel>.panel:first-child{grid-column:span 2}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 22px}#instrument-panel>.panel:first-child .controls{grid-template-columns:repeat(3,minmax(0,1fr))}.parameter{display:grid;grid-template-columns:1fr;gap:5px;min-width:0}.parameter>span{color:#cedad6}.parameter output{font-size:.7rem;color:var(--accent);font-variant-numeric:tabular-nums}.parameter input,.parameter select{width:100%;min-width:0}.parameter select{font-size:.72rem;padding:7px}.parameter-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.parameter-header output{display:none}.parameter-header select{width:auto}.advanced-controls{margin-top:18px}.advanced-controls summary{cursor:pointer;margin-bottom:16px}input[type=range]{accent-color:var(--accent);cursor:pointer;height:24px;margin:3px 0 0}.performance{margin-top:16px}.performance-top{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:14px}.performance-top h2{margin-bottom:8px}.performance-top p{margin:8px 0 18px;line-height:1.6}#octave{min-width:70px;text-align:center;font-size:.75rem;color:var(--muted)}#keyboard{position:relative;height:155px;margin-top:10px;touch-action:none;-webkit-user-select:none;user-select:none}.piano-key{position:absolute;top:0;padding:0 0 10px;border-radius:0 0 5px 5px;display:flex;align-items:end;justify-content:center;touch-action:none;font-size:.65rem}.piano-key.white{height:100%;background:#e5e8df;color:#54635f;border:1px solid #192426;z-index:1}.piano-key.black{height:62%;background:#101819;border:1px solid #344745;z-index:2}.piano-key.pressed,.piano-key:hover{background:var(--accent);color:#10201b}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.midi-learn{margin-top:20px}.midi-learn select{width:100%;margin-bottom:10px;font-size:.8rem}.bottom-grid p{line-height:1.6;margin-bottom:0}canvas{width:100%;height:130px;margin-top:10px;background:#101819;border-radius:6px}.meter-label{display:flex;gap:15px;align-items:center;margin-top:12px}meter{width:100%;height:12px}footer{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.65rem;padding-top:24px;line-height:1.5}[hidden]{display:none!important}@media(max-width:1150px){.synth-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.patch-bar,.patch-bar:has(#instrument-picker[hidden]){grid-template-columns:1fr 1fr}.patch-bar .button-row{grid-column:1 / -1}}@media(max-width:800px){main{padding:24px 18px}.synth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid{grid-template-columns:1fr}.status-strip>span:last-child{display:none}.engine{flex-direction:column;gap:8px}}@media(max-width:480px){main{padding:20px 12px}.panel{padding:16px}.synth-grid{grid-template-columns:1fr}#instrument-panel>.panel:first-child{grid-column:auto}#instrument-panel>.panel:first-child .controls{grid-template-columns:repeat(2,minmax(0,1fr))}.patch-bar,.patch-bar:has(#instrument-picker[hidden]){grid-template-columns:1fr;gap:12px}header{align-items:start}.eyebrow{font-size:.52rem}h1 span{display:block;margin-top:5px}footer{flex-direction:column;gap:8px}#keyboard{height:125px}}
