:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#25272a;background:#f4f3ee;font-synthesis:none;--accent:#5650ba;--muted:#76766f;--line:#ddddd4}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #aaa1ff;outline-offset:5px}button:disabled{cursor:wait;opacity:.7}.app{max-width:940px;margin:auto;padding:42px 30px 28px}.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--muted);margin:0 0 10px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}h1{font-size:clamp(30px,5vw,43px);font-weight:520;letter-spacing:-.055em;line-height:1.15;margin:0}.intro{margin:14px 0 28px;color:#676962;font-size:15px;line-height:1.5}.status{display:flex;align-items:center;gap:7px;font-size:11px;border:1px solid var(--line);border-radius:30px;padding:8px 12px;white-space:nowrap}.status:before{content:"";height:6px;width:6px;border-radius:50%;background:#a9aaa3}.status.active:before{background:var(--accent)}.presets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.preset{background:transparent;border:1px solid var(--line);border-radius:12px;padding:17px 20px;text-align:left;color:inherit;transition:background .16s,border-color .16s}.preset:hover{background:#eae9e2}.preset.selected{border-color:#aaa6d7;background:#eeedf7}.preset span,.preset strong{display:block}.preset-kicker{font-size:10px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px}.preset strong{font-size:17px;font-weight:550;letter-spacing:-.025em;margin-bottom:5px}.preset span:last-child{font-size:12px;color:#6c6d67}.instrument{background:#fffef9;border:1px solid var(--line);border-radius:16px;padding:28px}.frequency-grid{display:grid;grid-template-columns:1fr 54px 1fr;align-items:center;gap:16px}.control-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:550}.role{font-size:10px;color:var(--muted);font-weight:400}.number-row{display:flex;align-items:baseline;margin:18px 0 20px;gap:8px}.number-row input{min-width:0;width:124px;appearance:textfield;-moz-appearance:textfield;border:0;border-bottom:1px solid transparent;background:transparent;padding:0;color:inherit;font-size:43px;line-height:1.1;font-weight:450;letter-spacing:-.06em;font-variant-numeric:tabular-nums;border-radius:2px}.number-row input:hover{border-bottom-color:var(--line)}.number-row input::-webkit-inner-spin-button,.number-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-row>span{font-size:13px;color:var(--muted)}.multiply{font-size:32px;font-weight:300;color:#a2a099;text-align:center;margin-top:4px}input[type=range]{width:100%;height:22px;accent-color:var(--accent);cursor:pointer;margin:0}.range-labels{display:flex;justify-content:space-between;color:#8a8b83;font-size:10px;margin-top:4px}.transport{border-top:1px solid var(--line);padding-top:25px;margin-top:28px;display:flex;align-items:center;gap:22px}.play{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:#fff;border:0;border-radius:9px;min-width:125px;height:48px;font-size:14px}.play:hover{background:#4741a0}#play-icon{font-size:11px}.bypass{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:#55574f;padding:10px 0;font-size:13px}.switch{width:31px;height:18px;border-radius:30px;background:#d5d6ce;position:relative;transition:background .15s}.switch:after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}.bypass[aria-pressed=true] .switch{background:var(--accent)}.bypass[aria-pressed=true] .switch:after{transform:translateX(13px)}.level-control{margin-left:auto;width:240px}.level-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:7px}.level-label output{color:var(--muted);font-variant-numeric:tabular-nums}.listening-note{font-size:11px;line-height:1.6;color:var(--muted);margin:22px 0 0}#error{font-size:13px;color:#9c3636;margin:12px 0 0}.spectrum-section{margin-top:28px}.spectrum-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.spectrum-heading .eyebrow{margin-bottom:6px}h2{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:0}.components{font-size:19px;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--accent)}.components span{color:#a7a59e;padding:0 7px}.spectrum-wrap{position:relative;margin-top:16px;background:#eaeae3;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:225px}.spectrum-idle{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:12px;color:#86877e;pointer-events:none;white-space:nowrap}.formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;font-size:12px;color:#777970;margin:13px 0 0}.formula strong{font-weight:550;color:#45463f}.formula>span{padding:0 12px;color:#a6a79d}footer{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);margin-top:26px;padding-top:16px}footer p{font-size:11px;line-height:1.7;color:#7b7c73;margin:0}footer p:last-child{padding-left:15px}
@media(max-width:620px){.app{padding:28px 19px}.intro{font-size:13px;margin-bottom:22px}.status{font-size:10px;padding:7px 10px}.preset{padding:14px}.preset strong{font-size:15px}.preset span:last-child{font-size:10px}.instrument{padding:20px}.frequency-grid{grid-template-columns:1fr 20px 1fr;gap:10px}.control-label{align-items:flex-start;flex-direction:column;gap:5px;font-size:11px}.number-row{margin:17px 0}.number-row input{width:90px;font-size:35px}.number-row>span{font-size:11px}.multiply{font-size:24px}.transport{gap:17px;flex-wrap:wrap;margin-top:23px;padding-top:20px}.play{min-width:115px;height:45px}.level-control{width:100%;margin-left:0;margin-top:3px}.listening-note{margin-top:17px}.components{font-size:16px}.components span{padding:0 2px}canvas{height:205px}.formula{font-size:10px}.formula>span{padding:0 4px}footer{gap:12px;grid-template-columns:1fr}footer p:last-child{padding:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}