:root{color-scheme:dark;--bg:#080d1b;--panel:#10182b;--line:#24334e;--text:#e8f0ff;--muted:#91a0bd;--cyan:#37d9ff;--violet:#8c70ff;--green:#60e7a6}*{box-sizing:border-box}html{overflow-x:hidden}body{margin:0;background:radial-gradient(circle at 18% 0,#172447 0,transparent 31rem),var(--bg);color:var(--text);font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{max-width:1400px;margin:auto;padding:32px 24px 60px}.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.eyebrow{color:var(--cyan);font-weight:700;font-size:.7rem;letter-spacing:.16em;margin:0 0 3px}h1,h2,p{margin-top:0}h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.06em;margin-bottom:0}h1 span{color:var(--cyan)}h2{font-size:1.05rem;margin-bottom:0}.status,.badge{border:1px solid var(--line);background:#0c1427;padding:8px 11px;border-radius:999px;font-size:.8rem;color:#b5c3dd}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}.status.playing i{box-shadow:0 0 0 5px #60e7a633}.panel{min-width:0;background:linear-gradient(145deg,#111b31,#0d1426);border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:0 16px 35px #0002}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:17px}.panel-heading p{font-size:.8rem;color:var(--muted);margin:3px 0 0}.switch-label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.75rem;color:var(--muted);cursor:pointer}.switch-label input,.wave-picker input,.mode-options input{position:absolute;opacity:0}.switch{width:38px;height:22px;border-radius:20px;background:#36435c;position:relative}.switch:after{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;background:white;transition:.2s}.switch-label input:checked+.switch{background:var(--cyan)}.switch-label input:checked+.switch:after{left:20px}.frequency-row,.control-label{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:.83rem}.frequency-row div{display:flex;align-items:center;gap:6px;color:var(--cyan);font-size:1rem}.frequency-row input{width:110px;min-height:44px;background:#091124;border:1px solid #314365;border-radius:7px;padding:7px;color:white;text-align:right;font:inherit}.range{accent-color:var(--violet);width:100%;min-height:32px;margin:8px 0 4px}.accent{accent-color:var(--cyan)}.range-ends{display:flex;justify-content:space-between;color:#71809e;font-size:.7rem}.wave-picker{border:0;margin:0;padding:0}.wave-picker legend{font-size:.8rem;color:var(--muted);margin-bottom:8px}.wave-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.wave-picker label{display:flex;min-height:54px;flex-direction:column;justify-content:center;border:1px solid var(--line);background:#0b1222;border-radius:8px;padding:7px 3px;text-align:center;cursor:pointer;font-size:.7rem;color:#aebbd4}.wave-picker span{display:block;color:var(--cyan);font-size:1.1rem;line-height:1}.wave-picker label:has(input:checked){border-color:var(--cyan);background:#12324a;color:white}.playback-panel{display:flex;flex-direction:column}.control-label output{color:var(--cyan)}.transport{display:flex;gap:10px;margin-top:12px}.button,.icon-button{min-height:44px;border:0;border-radius:9px;padding:10px 16px;cursor:pointer;font-weight:700}.button{flex:1;color:#06111e}.play{background:var(--cyan)}.stop{background:#2c3851;color:#dce7fb}.button:disabled{opacity:.45;cursor:not-allowed}.hint,.test-tip{margin:10px 0 0;color:#91a0bd;font-size:.78rem}.test-tip{color:#b6c3dc}.mode-options{display:grid;gap:8px}.mode-options label{display:flex;min-height:58px;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);background:#0c1426;border-radius:9px;cursor:pointer}.mode-options label:has(input:checked){border-color:var(--violet);background:#1a1938}.mode-options b,.mode-options small{display:block}.mode-options b{font-size:.8rem}.mode-options small{font-size:.7rem;color:var(--muted);margin-top:3px}.harmonic-panel{margin-top:16px}.harmonics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.harmonic{min-width:0;padding:10px;border-radius:9px;background:#0a1222;border:1px solid var(--line);opacity:.65}.harmonic.active{opacity:1;border-color:#466076}.harmonic-top{display:flex;align-items:center;justify-content:space-between;font-size:.8rem}.harmonic label{display:flex;align-items:center;gap:7px;cursor:pointer}.harmonic input[type=checkbox]{width:20px;height:20px;accent-color:var(--cyan)}.harmonic output{color:var(--cyan);font-size:.72rem}.harmonic .range{margin:7px 0 0}.notice{min-height:1.2em;color:#ffbd72;margin:12px 0 0;font-size:.78rem}.advanced-controls{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:0 12px}.advanced-controls summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.82rem;color:#b9c8e2}.advanced-controls .harmonics{padding:4px 0 12px}.visual-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;margin-top:16px}.scope-panel canvas,.spectrum-panel canvas{display:block;width:100%;max-width:100%;background:#091123;border-radius:10px;border:1px solid #1c2941}.scope-panel canvas{height:330px}.spectrum-panel canvas{height:330px}.scope-actions{display:flex;gap:7px}.icon-button{border:1px solid var(--line);background:#17223a;color:#d9e6ff}.icon-button.active{border-color:var(--cyan);color:var(--cyan)}.scope-controls{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:8px 20px;align-items:center;margin-top:12px;color:var(--muted);font-size:.76rem}.scope-controls label{display:flex;justify-content:space-between}.scope-controls output{color:var(--cyan)}select{min-height:44px;max-width:100%;background:#0a1222;border:1px solid var(--line);color:#dbe7ff;border-radius:7px;padding:7px}.spectrum-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.spectrum-legend span{font-size:.68rem;color:#a6b6d3}.spectrum-legend i{display:inline-block;width:7px;height:7px;background:var(--cyan);border-radius:2px;margin-right:4px}.how-it-works{margin-top:28px}.how-it-works>h2{margin-bottom:12px}.how-it-works>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.how-it-works article{padding:16px;border-left:2px solid var(--cyan);background:#0c1426}.how-it-works b{font-size:.85rem}.how-it-works p{color:var(--muted);font-size:.78rem;margin:6px 0 0}@media(max-width:900px){.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-grid{grid-template-columns:1fr}.spectrum-panel canvas{height:250px}.harmonics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:590px){.app-shell{display:flex;flex-direction:column;padding:20px 14px;overflow:hidden}.hero{order:0;align-items:flex-start;flex-direction:column;margin-bottom:18px}.control-grid{order:1;grid-template-columns:1fr}.primary-panel{order:1}.playback-panel{order:2}.wave-panel{order:3}.mode-panel{order:4}.visual-grid{order:2;margin-top:16px}.spectrum-panel canvas{height:190px}.scope-panel canvas{height:235px}.scope-controls{grid-template-columns:1fr}.scope-controls select{width:100%}#synthPanel{order:3}#harmonicPanel{order:4}.how-it-works{order:5;margin-top:22px}.harmonics,.how-it-works>div{grid-template-columns:1fr}.harmonic{padding:11px}.harmonic summary{min-height:44px;cursor:pointer;display:flex;align-items:center}.harmonic[open] summary{margin-bottom:8px}.frequency-row{align-items:flex-start;flex-direction:column}.frequency-row select{width:100%}.frequency-row input{width:100%}.panel{padding:16px}.panel-heading{align-items:center}.panel-heading .icon-button{font-size:.75rem;padding:7px 10px}.wave-picker label{min-height:48px;font-size:.66rem}.notice{font-size:.74rem}.advanced-controls:not([open]) .harmonics{display:none}}@media(max-width:380px){.app-shell{padding-left:10px;padding-right:10px}.panel{padding:14px}.scope-panel canvas{height:210px}.spectrum-panel canvas{height:175px}.transport{gap:7px}.button{padding:10px 8px}}