.demo-page{font-family:var(--font-montserrat), sans-serif;color:#f0ede6;background:#0a0a0f;flex-direction:column;height:100vh;display:flex;overflow:hidden}:root{--amber:#e5a000;--amber-dim:#e5a0004d;--panel-bg:#ffffff08;--panel-border:#ffffff0f;--text:#f0ede6;--text-muted:#7a7770}.demo-header{border-bottom:1px solid var(--panel-border);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 clamp(16px,3vw,40px);display:flex}.demo-header a{color:inherit;text-decoration:none}.knob-wrap{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:6px;display:flex}.knob-label{letter-spacing:.15em;text-transform:uppercase;opacity:.5;font-size:9px;font-weight:600}.knob-value{letter-spacing:.05em;opacity:.7;font-size:10px;font-weight:500}.knob-outer{cursor:grab;background:#1e1e24;border:1px solid #ffffff14;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:border-color .2s;display:flex;position:relative}.knob-outer:hover{border-color:var(--amber-dim)}.knob-indicator{background:var(--amber);transform-origin:bottom;border-radius:1px;width:2px;height:14px;margin-left:-1px;position:absolute;top:6px;left:50%}.wave-btn{border:1px solid var(--panel-border);width:44px;height:36px;color:var(--text-muted);cursor:pointer;letter-spacing:.05em;background:0 0;border-radius:8px;justify-content:center;align-items:center;font-family:inherit;font-size:10px;font-weight:500;transition:all .2s;display:flex}.wave-btn:hover{border-color:var(--amber-dim);color:var(--text)}.wave-btn.active{background:var(--amber);color:#0a0a0f;border-color:var(--amber)}.keyboard{-webkit-user-select:none;user-select:none;height:140px;margin:0 auto;display:flex;position:relative}.key-white{cursor:pointer;z-index:1;background:#f0ede6;border:1px solid #ccc;border-radius:0 0 6px 6px;width:44px;height:140px;transition:background 80ms;position:relative}.key-white:hover{background:#e8e5e0}.key-white.active{background:var(--amber)}.key-black{cursor:pointer;z-index:2;background:#1a1a1a;border:1px solid #111;border-radius:0 0 4px 4px;width:28px;height:88px;transition:background 80ms;position:absolute}.key-black:hover{background:#2a2a2a}.key-black.active{background:var(--amber)}.viz-canvas{width:100%;height:100%;display:block}.synth-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;padding:20px}.panel-title{letter-spacing:.18em;text-transform:uppercase;opacity:.5;text-align:center;margin-bottom:16px;font-size:10px;font-weight:600}.init-overlay{z-index:200;cursor:pointer;background:#0a0a0fe6;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:fixed;inset:0}.init-overlay span{letter-spacing:.1em;opacity:.6;font-size:14px;font-weight:300}.init-ring{border:2px solid var(--amber);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;animation:2s ease-in-out infinite initPulse;display:flex}.init-ring svg{opacity:.8}@keyframes initPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}