:root{--bg: #f2ece0;--bg-2: #efe7d8;--panel: #f7f2e9;--panel-2: #f7f2e9;--border: #2a2620;--text: #26221b;--muted: #7a715f;--accent: #d9381e;--accent-2: #9c2b16;--accent-dim: #c9b79a;--danger: #9c2b16;--font-body: Georgia, "Times New Roman", serif;--font-display: Georgia, "Times New Roman", serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;--radius-panel: 0px;--radius-inner: 0px;--border-width: 1px;--panel-fill: var(--panel);--panel-shadow: none;--body-bg: var(--bg);--scope-bg: #f7f2e9;--header-fill: none;--title-transform: uppercase;--title-spacing: 2px;--viz-grid: #e0d6c3;--viz-axis: #c9bda6;--viz-wave: #d9381e;--viz-wave-glow: transparent;--viz-scope: #26221b;--btn-fill: var(--accent);--btn-text: #f7f2e9;--btn-radius: 0px;--btn-shadow: none;font-family:var(--font-body)}*{box-sizing:border-box}button{font-family:inherit}[hidden]{display:none!important}body{margin:0;color:var(--text);background:var(--body-bg);min-height:100vh}#app{max-width:1080px;margin:0 auto;padding:28px 20px 60px}header h1{margin:0;font-size:40px;letter-spacing:.5px;font-family:var(--font-display);background:var(--header-fill);-webkit-background-clip:text;background-clip:text;color:transparent}.byline{margin:10px 0 20px;font-family:var(--font-display);font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.byline a{color:#a82f18;text-decoration:underline;text-underline-offset:3px;transition:color .15s}.byline a:hover{color:#86230f}.panel{background:var(--panel-fill);border:var(--border-width) solid var(--border);border-radius:var(--radius-panel);padding:16px 18px;margin-bottom:16px;box-shadow:var(--panel-shadow)}.credits{margin-top:28px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}.credits a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;transition:color .15s}.credits a:hover{color:var(--accent)}.section-break{height:1px;background:var(--border);margin:30px 0}.panel-title{font-size:13px;font-weight:600;text-transform:var(--title-transform);letter-spacing:var(--title-spacing);color:var(--text);margin-bottom:14px}.panel-title .hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12px;margin-left:8px}.top-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.display-panel canvas{width:100%;height:190px;display:block;background:var(--scope-bg);border:var(--border-width) solid var(--border);border-radius:var(--radius-inner)}.harmonics{display:flex;gap:8px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.h-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 auto;min-width:34px}.h-readout{font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums;height:14px}.h-label{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.h-slider{writing-mode:vertical-lr;direction:rtl;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;width:22px;height:150px;accent-color:var(--accent);cursor:ns-resize}.harmonics-wrap{display:flex;flex-direction:column;gap:22px}.harmonics-toggles{display:flex;flex-wrap:wrap;gap:22px;margin-top:16px}.phase-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 0;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;transition:color .15s}.phase-toggle:hover{color:var(--accent)}.phase-toggle .chevron{font-size:11px;transition:transform .15s}.phase-toggle.open .chevron{transform:rotate(180deg)}.h-phase{display:none;flex-direction:column;align-items:center;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);width:100%}.harmonics-wrap.phases-open .h-phase{display:flex}.p-slider{writing-mode:vertical-lr;direction:rtl;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;width:22px;height:80px;accent-color:var(--accent-2);cursor:ns-resize}.p-readout{font-size:10px;color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums}.presets{display:flex;flex-direction:column}.preset-row{display:flex;align-items:center;gap:14px;padding:16px 0}.preset-row+.preset-row{border-top:1px solid var(--border)}.preset-row:first-child{padding-top:0}.preset-row:last-child{padding-bottom:0}.preset-group-label{width:96px;flex-shrink:0;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.preset-group{display:flex;flex-wrap:wrap;gap:8px}.preset-btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s,transform .05s}.preset-btn:hover{border-color:var(--accent);background:#efe7d8}.preset-btn.active,.preset-btn.active:hover{background:var(--accent);border-color:var(--accent);color:#f7f2e9}.preset-btn:active{transform:translateY(1px)}.transport{display:grid;grid-template-columns:auto 1fr 1fr;gap:18px 28px;align-items:center}.ctrl{display:flex;flex-direction:column;gap:6px}.ctrl label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.ctrl input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.ctrl .readout{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}.play-ctrl{align-self:end;justify-content:center}.play-btn{height:100%;min-height:64px;min-width:150px;font-size:17px;font-weight:700;color:var(--btn-text);background:var(--btn-fill);border:none;border-radius:var(--btn-radius);cursor:pointer;box-shadow:var(--btn-shadow);transition:transform .05s,box-shadow .15s,filter .15s}.play-btn:hover{filter:brightness(1.05)}.play-btn:active{transform:translateY(1px)}.play-btn.active{color:#f7f2e9;background:var(--accent-2);box-shadow:none}.envelope{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px}.effects{display:flex;flex-direction:column;gap:16px}.fx-row{display:flex;align-items:center;gap:18px}.fx-toggle{flex-shrink:0;min-width:104px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 16px;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}.fx-toggle:hover{border-color:var(--accent)}.fx-toggle.active{background:var(--accent);border-color:var(--accent);color:#f7f2e9}.fx-row input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}.fx-row .readout{flex-shrink:0;min-width:68px;text-align:right;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}.fx-row.off input[type=range],.fx-row.off .readout{opacity:.4}.keyboard{position:relative;height:160px;-webkit-user-select:none;user-select:none;touch-action:none}.white-row{display:flex;height:100%;gap:0}.key{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;cursor:pointer}.key.natural{flex:1;background:linear-gradient(180deg,#f7f2e9,#e9e0d0);border:1px solid var(--border);color:#7a715f}.key.natural.down{background:linear-gradient(180deg,#f0c3b8,#e0968a)}.key.sharp{position:absolute;top:0;width:5.8%;height:62%;background:linear-gradient(180deg,#3a342b,#26221b);border:1px solid #05070a;z-index:2;color:#d8cdb8}.key.sharp.down{background:linear-gradient(180deg,#c25a45,#9c2b16)}.key-letter{font-family:var(--font-mono);font-size:11px;font-weight:700;opacity:.85}.key.sharp .key-letter{color:#ece3d0}.key-name{font-family:var(--font-mono);font-size:10px;opacity:.6;margin-top:2px}@media(max-width:720px){.top-row,.transport{grid-template-columns:1fr}.envelope{grid-template-columns:repeat(2,1fr)}.h-slider{height:120px}.preset-row{flex-direction:column;align-items:flex-start;gap:6px}.preset-group-label{width:auto}}header h1{color:var(--text)}.h-readout,.h-label,.readout,.panel-title{font-family:var(--font-mono)}