:root{font-family:Arial,Helvetica,sans-serif;color:#203033;background:#fff;--teal:#087f78;--coral:#ce5143;--line:#d7e1e1;--muted:#586a6d;--surface:#f2f6f6}*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a{color:#096c74;text-underline-offset:3px}button{min-height:38px;border:1px solid #b9cccc;background:#fff;color:#203033;border-radius:4px;cursor:pointer;padding:8px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px}button:hover{background:#ecf5f3}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d17d25;outline-offset:3px}button[aria-pressed=true]{background:#087f78;color:#fff;border-color:#087f78}button:disabled{opacity:.5;cursor:default}button svg{width:19px;height:19px;flex-shrink:0}.masthead{max-width:1500px;margin:auto;padding:22px 28px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:2px solid #203033}.series{font-size:13px;text-decoration:none;font-weight:700}h1{font-size:28px;line-height:1.18;margin:7px 0 0;font-weight:650}h2{font-size:17px;line-height:1.4;margin:0}h3{font-size:16px;line-height:1.4;margin:0 0 9px}.commands{display:flex;gap:7px;flex-wrap:wrap}.commands button{width:40px;height:40px;padding:8px}main{max-width:1500px;margin:auto;padding:0 28px}.workspace{display:grid;grid-template-columns:235px minmax(0,1fr);gap:28px;padding-top:24px}aside{background:var(--surface);padding:18px;align-self:start;min-width:0}.field{display:block;min-width:0;margin-bottom:19px;font-size:13px;font-weight:600}.field>label{display:block;margin-bottom:8px}.field-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.field-head output{font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}.field select{display:block;margin-top:8px}select,input[type=number]{width:100%;min-width:0;border:1px solid #a7bfc1;border-radius:3px;background:#fff;padding:8px;color:#203033;font-size:14px;min-height:38px}select{white-space:normal}input[type=range]{width:100%;margin:6px 0;accent-color:var(--teal);min-height:20px}input[type=checkbox]{accent-color:var(--teal);width:17px;height:17px}.toggle{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0 20px}.sound{border-top:1px solid #c8d9d9;padding-top:16px}.sound h2{font-size:15px;margin-bottom:12px}.listen{background:#087f78;color:#fff;border-color:#087f78;width:100%;margin-bottom:16px}.listen:hover{background:#08665f}.listen[aria-pressed=true]{background:#a84136;border-color:#a84136}.wav{width:100%;font-size:13px}#audio-status{font-size:12px;line-height:1.5;margin-bottom:0;color:var(--muted);overflow-wrap:anywhere}#error{font-size:13px;line-height:1.5;color:#a22e22}.experiment{min-width:0}.figure-head,.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.figure-head span,.section-head span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.main-figures{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px}.wheel-figure,.wave-figure{min-width:0}canvas{display:block;width:100%;height:320px;background:#fff}#wheel{background:#f4f8f7}#stack{height:300px}.mini-key{font-size:11px;line-height:1.7;display:flex;gap:10px;flex-wrap:wrap;padding-top:10px;color:var(--muted)}.mini-key span:before{content:'';display:inline-block;width:12px;height:3px;background:#b4c9c7;margin:0 5px 3px 0}.mini-key .sum-key:before{background:var(--teal)}.mini-key .selected-key:before{background:var(--coral)}.formula{font:14px/1.65 Georgia,'Times New Roman',serif;overflow-wrap:anywhere}#formula{min-height:42px;padding-top:6px}.scrub{display:grid;grid-template-columns:auto minmax(70px,1fr) 80px;align-items:center;gap:12px;font-size:12px;margin-top:16px}.scrub output{font-variant-numeric:tabular-nums;text-align:right}.caption{font-size:13px;line-height:1.6;color:var(--muted);max-width:960px}.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:16px;padding:14px 0;gap:16px}.readouts dl{margin:0;min-width:0}.readouts dt{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:6px}.readouts dd{font-size:20px;font-variant-numeric:tabular-nums;margin:0;overflow-wrap:anywhere}.period-note{font-size:13px;line-height:1.6;color:#36504f;min-height:42px}.mix-band,.clock-band,.guide{padding:25px 0;border-top:1px solid var(--line);margin-top:24px}.harmonic-bank{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px}.harmonic-bank button{height:92px;min-height:92px;padding:5px 0;display:flex;flex-direction:column;justify-content:end;gap:7px;border-color:transparent;border-radius:3px;background:#f0f5f4;font-size:12px;font-variant-numeric:tabular-nums;position:relative}.harmonic-bank .bar{display:block;background:#75b6ae;width:9px;min-height:2px;height:var(--height);max-height:56px}.harmonic-bank button.excluded{background:#fafbfb;color:#7b898b}.harmonic-bank button.excluded .bar{background:#c7d1d0}.harmonic-bank button[aria-pressed=true]{background:#fff0ec;color:#a63d31;outline:2px solid #ce5143;outline-offset:-2px}.harmonic-bank button[aria-pressed=true] .bar{background:#ce5143}.inspector{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:24px;align-items:center;margin-top:23px;padding-top:8px}.inspector h3{margin-bottom:3px}.inspector p{font-size:12px;color:var(--muted);margin:3px 0;line-height:1.6}.inspector .field{margin:0}.selected-actions{display:flex;gap:6px;flex-wrap:wrap;max-width:230px}.selected-actions button{font-size:12px}.guide>h2{margin-bottom:22px}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 42px}.guide p{font-size:14px;line-height:1.75;margin:10px 0;color:#415457}.guide .formula{font-size:16px;color:#203033}footer{font-size:12px;line-height:1.9;padding:22px 0 32px;border-top:1px solid var(--line);margin-top:18px}.fallback{line-height:1.7}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr);gap:20px}.main-figures{grid-template-columns:minmax(0,1fr)}#wheel{height:270px}#wave{height:260px}.inspector{grid-template-columns:1.2fr 1fr 1fr}.selected-actions{grid-column:1/-1;max-width:none}.harmonic-bank{grid-template-columns:repeat(12,minmax(0,1fr))}.harmonic-bank button{height:78px;min-height:78px}}
@media(max-width:700px){.masthead{padding:18px 16px;align-items:start;flex-direction:column;gap:14px}h1{font-size:25px}main{padding:0 16px}.workspace{grid-template-columns:minmax(0,1fr);padding-top:16px;gap:20px}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:16px}.field{margin-bottom:6px}aside>.field:first-child{grid-column:1/-1}.sound{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.sound h2,.sound #audio-status{grid-column:1/-1;margin:0}.sound .listen{margin:0}.sound .field{margin:0}.sound .wav{align-self:end}.toggle{margin:0;align-self:center}.experiment{grid-row:1}.figure-head h2{font-size:16px}.main-figures{grid-template-columns:1fr}#wheel{height:265px}#wave{height:265px}.readouts{gap:12px}.readouts dd{font-size:17px}.readouts dt{font-size:11px}.scrub{grid-template-columns:1fr 65px;gap:6px}.scrub>span{grid-column:1/-1}.scrub input{min-height:30px}.inspector{grid-template-columns:minmax(0,1fr);gap:18px}.selected-actions{grid-column:auto}.guide-grid{grid-template-columns:minmax(0,1fr);gap:22px}.harmonic-bank{grid-template-columns:repeat(8,minmax(0,1fr))}.harmonic-bank button{height:74px;min-height:74px}#stack{height:330px}button{min-height:44px}input[type=range]{min-height:30px}select,input[type=number]{font-size:16px}.period-note{min-height:0}#error{grid-column:1/-1}}