:root{--navy:#152e52;--ink:#122746;--muted:#68788e;--bg:#f1f5fa;--line:#dfe7f0;--cyan:#069ec9;--cyan-soft:#eaf8fd;--violet:#8750db;--violet-soft:#f5efff;--orange:#b65b13;--orange-soft:#fff4e9;--radius:13px;font-family:Inter,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);font-size:16px;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);line-height:1.6}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button,a,input,summary{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #3e8fe6}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}h2{font-size:1.25rem;font-weight:750;line-height:1.4}h3{font-size:1rem}i,.formula,.matrix,.matrix-equation,.det-display,.recovery-formula,.concept-formula,.step-equations,.augmented-matrix{font-family:Cambria,"Times New Roman",serif}i{font-weight:600}button svg{width:20px;height:20px;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.topbar{background:var(--navy);color:#fff;border-bottom:1px solid #2d486e}.topbar-inner{max-width:1408px;margin:auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand>svg{color:#64d8f3;width:34px;height:32px}.brand strong{font-size:1.23rem;letter-spacing:.035em}.brand-divider{height:20px;width:1px;background:#60718a}.brand-sub{font-size:.95rem;color:#c4d4e9}nav{display:flex;gap:32px;font-size:.92rem}nav a{padding:23px 0 18px;border-bottom:3px solid transparent;color:#d6e3f3}nav a:hover{border-color:#63d7ef;color:white}nav b{font-size:1.1rem;margin-right:7px;color:#7bdbef;font-weight:500}main{max-width:1408px;padding:29px 32px 20px;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:24px}.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:#657b94;margin-bottom:7px}h1{font-size:clamp(1.65rem,3.1vw,2.35rem);line-height:1.35;letter-spacing:-.035em;font-weight:800}.lead{font-size:1rem;color:#61718a;margin-top:8px}.sound-control{width:210px;flex-shrink:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px}.sound-control label{grid-column:1/-1;color:var(--muted);font-size:.875rem;display:flex;justify-content:space-between;margin-bottom:7px}.sound-control input{width:116px}.sound-control button{font-size:.875rem;white-space:nowrap;padding:3px 0}.audio-message{font-size:.875rem;color:var(--muted);margin-top:-12px;margin-bottom:16px}.audio-message:empty{display:none}.audio-message.error{color:#a04612;background:#fff1df;padding:12px;border-radius:8px}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(350px,1fr);gap:18px;align-items:stretch}.left-stack{display:flex;flex-direction:column;gap:18px;min-width:0}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 12px #182d481f;padding:22px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.section-heading h2{display:flex;align-items:center;gap:10px}.section-index{font-size:.78rem;color:#7790ac;font-weight:600;font-family:inherit;letter-spacing:.025em}.meta{color:var(--muted);font-size:.875rem}.track{display:grid;grid-template-columns:120px 38px minmax(50px,1fr) 46px;gap:14px;align-items:center;padding:12px 15px;min-height:86px}.source{border-radius:9px;background:#f4f7fb;margin-top:10px}.source.voice{background:#f0f9fd}.source.music{background:#f7f3fd}.track-label strong{font-size:1rem;font-weight:750}.track-label strong i{font-size:1.4rem;margin-left:4px}.track-label>span{display:block;color:var(--muted);font-size:.875rem;white-space:nowrap}.voice i,.voice-text{color:var(--cyan)}.music i,.music-text{color:var(--violet)}.play-button{height:38px;width:38px;border:0;border-radius:50%;background:var(--cyan);color:#fff;display:grid;place-items:center;transition:transform .15s,filter .15s;box-shadow:0 3px 7px #079fd423}.play-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}.music .play-button{background:var(--violet);box-shadow:0 3px 7px #8656d928}.play-button svg{width:23px;height:23px}.wave-wrap{position:relative;height:56px;min-width:0;overflow:hidden}canvas{width:100%;height:100%;display:block}.playhead{display:none;position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--navy);box-shadow:0 0 0 2px #ffffffa0;pointer-events:none}.track.playing .playhead,.result-card.playing .playhead{display:block}.track-time{font-size:.75rem;white-space:nowrap;color:#6c7f98;font-variant-numeric:tabular-nums}.quiet-button,.text-button{display:inline-flex;gap:5px;align-items:center;justify-content:center;border:0;background:transparent;color:var(--muted);font-size:.875rem;padding:5px 4px}.quiet-button:hover,.text-button:hover{color:var(--ink)}.quiet-button svg{height:16px;width:16px}.preset-group{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-3px 0 16px}.preset{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 12px;font-size:.875rem;color:#50627c}.preset.active{background:var(--navy);border-color:var(--navy);color:white}.preset-group>span{font-size:.75rem;color:#7e8b9e;margin-left:auto}.mixer-block{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:12px}.mixed{background:#f6f8fc;min-height:84px}.mixed .play-button{background:#376daf}.track-label>.formula{white-space:normal;overflow-wrap:anywhere;line-height:1.35;font-size:1.08rem;color:var(--ink)}.coefficient-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:13px 15px}.coefficient{display:grid;grid-template-columns:auto minmax(45px,1fr) 38px;align-items:center;gap:10px}.coefficient label{font-size:.875rem;white-space:nowrap}.coefficient output{border:1px solid var(--line);border-radius:5px;padding:2px 0;text-align:center;font-variant-numeric:tabular-nums;font-size:.87rem;min-width:38px;background:#fff}.coefficient i{font-size:1rem;margin-left:2px}input[type=range]{appearance:none;height:6px;border-radius:4px;background:#dce6f3;cursor:pointer;width:100%;margin:10px 0;accent-color:var(--cyan)}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:var(--cyan);border:2px solid white;box-shadow:0 0 0 1px #069ec933,0 2px 5px #152e5229}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cyan);border:2px solid white}.music input[type=range]::-webkit-slider-thumb{background:var(--violet)}.music input[type=range]::-moz-range-thumb{background:var(--violet)}.small-note{font-size:.75rem;color:var(--muted);margin-top:13px}.small-tag{font-size:.75rem;color:var(--muted)}.math-panel{display:flex;flex-direction:column}.matrix-summary{display:flex;align-items:center;justify-content:space-around;margin:8px 0 18px;gap:16px}.matrix-equation{display:flex;align-items:center;gap:12px;font-size:1.7rem}.matrix{display:grid;grid-template-columns:repeat(2,minmax(34px,auto));gap:4px 15px;position:relative;padding:3px 12px;text-align:center;font-size:1.6rem;line-height:1.3}.matrix:before,.matrix:after,.augmented-matrix:before,.augmented-matrix:after{content:"";position:absolute;top:0;bottom:0;width:7px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}.matrix:before,.augmented-matrix:before{left:0;border-left:2px solid currentColor}.matrix:after,.augmented-matrix:after{right:0;border-right:2px solid currentColor}.det-display{border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;gap:0;min-width:105px}.det-display>span{font-size:1.1rem;color:var(--muted)}.det-display strong{font-size:2.1rem;font-weight:500;line-height:1.2}.status-pill{align-self:center;font-size:.9rem;font-weight:650;background:#e0f6f0;color:#137564;border:1px solid #c1ece2;padding:5px 18px;border-radius:6px;margin-bottom:21px}.status-pill.singular{background:var(--orange-soft);color:var(--orange);border-color:#f1d4b5}.graph-heading{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:8px}.graph-heading h3{font-size:.9rem}.graph-heading>span{font-size:.75rem;color:var(--muted)}#vector-plot{width:100%;height:auto;min-height:200px;margin:8px auto 0;max-height:240px;display:block;overflow:visible}#vector-plot text{font-family:inherit}.graph-legend{display:flex;gap:18px;justify-content:center;font-size:.75rem;color:var(--muted);margin:0 0 17px}.graph-legend>span{display:flex;align-items:center;gap:6px}.legend-line{width:17px;height:3px;display:inline-block}.cyan{background:var(--cyan)}.violet{background:var(--violet)}.insight{background:#f1f7fc;border-radius:8px;padding:13px 15px;margin-top:auto;margin-bottom:15px;font-size:.83rem;line-height:1.7}.insight strong{font-weight:650}.insight p{color:#61748e;margin-top:3px}.insight.singular{background:var(--orange-soft);color:var(--orange)}.insight.singular p{color:#9a6539}.primary-button,.secondary-button{border-radius:7px;padding:10px 18px;font-size:.9rem;font-weight:600;border:1px solid var(--navy);background:var(--navy);color:white;line-height:1.5}.primary-button:hover,.secondary-button:hover{background:#254877}.primary-button{width:100%}.elimination-panel{margin-top:20px;padding:24px}.section-description{font-size:.875rem;color:var(--muted);margin-top:6px}.step-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.secondary-button{padding:8px 17px}.elimination-work{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:21px 25px;background:#f6f8fc;border-radius:10px;margin-bottom:20px;align-items:center;min-height:180px}.step-narrative h3{font-size:1.2rem;margin:5px 0}.step-narrative>p{font-size:.9rem;color:var(--muted);max-width:420px}.step-dots{display:flex;gap:6px;margin-top:18px}.step-dot{height:5px;width:26px;border-radius:3px;background:#dce4ef}.step-dot.active{background:var(--navy)}.augmented-area{min-width:0;display:flex;align-items:center;flex-direction:column;overflow:auto}.matrix-captions{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:.75rem;color:var(--muted);margin-bottom:9px}.augmented-matrix{display:grid;position:relative;grid-template-columns:repeat(4,minmax(46px,1fr));gap:5px 8px;text-align:center;padding:5px 15px;font-size:1.4rem;min-width:240px;min-height:80px}.augmented-matrix span:nth-child(4n+2){padding-right:14px;border-right:1px solid #a8b8cd}.step-equations{font-size:1.15rem;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:12px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.result-card{border:1px solid #cdebf5;background:#f8fcfe;padding:17px 20px;border-radius:9px;min-width:0}.result-card.music{border-color:#e3d9f5;background:#fcfaff}.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.result-top strong{font-size:1rem;color:var(--cyan)}.result-card.music .result-top strong{color:var(--violet)}.listen-button{display:flex;align-items:center;gap:5px;border:1px solid #b9deed;border-radius:6px;background:#fff;color:var(--cyan);font-size:.875rem;padding:5px 13px}.music .listen-button{color:var(--violet);border-color:#dcccf2}.listen-button:hover:not(:disabled){background:#ecf7fc}.music .listen-button:hover:not(:disabled){background:#f3ecff}.listen-button svg{height:16px;width:16px}.recovery-formula{font-size:1.6rem;line-height:1.4;margin:10px 0 5px;overflow-wrap:anywhere}.recovery-formula.pending{font-size:1rem;font-family:inherit;color:#7d8ba0;font-weight:400}.result-wave{height:35px}.result-note{font-size:.75rem;color:var(--muted)}.singular-explanation{padding:15px 18px;margin:0 0 18px;border:1px solid #eacd9e;border-radius:9px;background:var(--orange-soft);color:#82531f}.singular-explanation h3{margin-bottom:5px}.singular-explanation p{font-size:.9rem;margin-top:6px}.singular-explanation .formula{font-size:1.2rem}.concept-panel{margin-top:24px;display:grid;grid-template-columns:1.2fr 1fr;gap:55px;padding:25px 4px 26px}.concept-main h2{font-size:1.6rem;letter-spacing:-.02em}.concept-main>p:last-child{font-size:.95rem;color:#60718a;margin-top:12px;max-width:620px}.concept-example{border-left:1px solid #d7e1ed;padding-left:35px}.concept-formula{font-size:2rem;line-height:1.3;margin-bottom:6px}.concept-example>p{color:var(--muted);font-size:.875rem}details{margin-top:13px}summary{font-size:.9rem;color:#2c567d;cursor:pointer;width:fit-content}details p{font-size:.875rem;color:var(--muted);margin-top:10px}footer{border-top:1px solid #dce4ed;padding:19px 0 2px;display:flex;justify-content:space-between;font-size:.75rem;color:#72839a}.noscript{position:fixed;bottom:0;padding:15px;background:#fff1de;color:#9b410d;width:100%}
@media(min-width:1500px){main,.topbar-inner{max-width:1470px}.workspace{grid-template-columns:minmax(0,1.7fr) minmax(380px,1fr)}}
@media(max-width:1100px){main{padding:22px}.topbar-inner{padding:0 22px}.brand-sub,.brand-divider{display:none}.workspace{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:14px}.panel{padding:17px}.track{grid-template-columns:95px 34px minmax(40px,1fr) 37px;gap:10px;padding:11px}.play-button{width:34px;height:34px}.coefficient-row{gap:14px;padding:11px}.coefficient{gap:6px;grid-template-columns:auto minmax(40px,1fr) 32px}.coefficient output{min-width:32px}.coefficient label i{display:none}.preset-group>span{display:none}.small-tag{display:none}.matrix-summary{gap:5px}.det-display{padding-left:20px}.step-actions{gap:5px}.elimination-work{gap:15px}.brand strong{font-size:1.1rem}}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.math-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.math-panel>.section-heading{grid-column:1/-1;margin-bottom:5px}.matrix-summary{grid-column:1;margin:10px 0}.status-pill{grid-column:1;margin:5px auto 15px;justify-self:center}.graph-heading{grid-column:2;grid-row:2;border:0;padding-top:0;align-self:start}.graph-heading>span{display:none}#vector-plot{grid-column:2;grid-row:2/5;margin-top:24px;height:210px}.graph-legend{grid-column:2;margin:0;gap:8px}.insight{grid-column:1;grid-row:4;margin:0}.math-panel>.primary-button{grid-column:1/-1;margin-top:14px}.sound-control{width:170px}.sound-control input{width:80px}.section-heading>.meta{font-size:.75rem}.elimination-panel>.section-heading{align-items:flex-start;flex-direction:column}.step-actions{align-self:flex-end}.concept-panel{gap:25px}nav{gap:16px}.track{grid-template-columns:120px 38px minmax(40px,1fr) 46px;gap:14px}.coefficient label i{display:inline}.coefficient-row{gap:22px}}
@media(max-width:580px){:root{font-size:16px}main{padding:20px 14px 14px}.topbar-inner{padding:14px 17px;min-height:62px;flex-wrap:wrap;gap:10px}.brand>svg{width:28px;height:26px}.brand strong{font-size:1.08rem}nav{width:100%;justify-content:space-between;gap:10px;font-size:.875rem}nav a{padding:3px 0}nav b{font-size:.9rem}.intro{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:18px}.eyebrow{font-size:.75rem}h1{font-size:1.8rem}.lead{font-size:.9rem;max-width:320px}.sound-control{grid-template-columns:auto 1fr auto;width:100%;column-gap:12px}.sound-control label{grid-column:auto;margin:0;font-size:.75rem;gap:10px}.sound-control input{width:100%}.sound-control button{font-size:.75rem}.panel{padding:16px 13px}.section-heading{gap:8px;margin-bottom:13px}h2{font-size:1.1rem}.section-index{font-size:.75rem}.section-heading>.meta{font-size:.75rem}.track{grid-template-columns:85px 32px minmax(50px,1fr) 33px;gap:9px;padding:10px 8px;min-height:76px}.track-label strong{font-size:.9rem}.track-label strong i{font-size:1.2rem;margin-left:2px}.track-label>span{font-size:.75rem}.track-label>.formula{font-size:.95rem}.play-button{width:32px;height:32px}.track-time{font-size:.75rem}.wave-wrap{height:47px}.coefficient-row{grid-template-columns:1fr;gap:6px;padding:9px 12px}.coefficient{grid-template-columns:64px 1fr 38px;gap:10px}.coefficient label{font-size:.875rem}.coefficient output{font-size:.875rem}.small-note{font-size:.75rem}.math-panel{display:flex;gap:0}.math-panel>.section-heading{margin-bottom:12px}.matrix-summary{width:100%;margin:5px 0 15px}.status-pill{margin-bottom:20px}.graph-heading{width:100%;border-top:1px solid var(--line);padding-top:15px}.graph-heading>span{display:block}#vector-plot{height:240px;margin-top:8px;max-width:380px}.graph-legend{margin-bottom:14px;gap:18px}.insight{width:100%}.elimination-panel{padding:18px 14px}.section-description{font-size:.875rem}.step-actions{align-self:stretch;justify-content:space-between;gap:4px;width:100%}.step-actions button{font-size:.875rem}.secondary-button{padding:8px 13px}.elimination-work{grid-template-columns:1fr;gap:23px;padding:18px 15px;min-height:0}.step-narrative h3{font-size:1.1rem}.step-narrative>p{font-size:.875rem}.augmented-area{padding-bottom:3px}.result-grid{grid-template-columns:1fr;gap:12px}.result-card{padding:15px}.recovery-formula{font-size:1.55rem}.result-wave{height:36px}.concept-panel{grid-template-columns:1fr;gap:23px;padding:20px 3px}.concept-main h2{font-size:1.45rem}.concept-main>p:last-child{font-size:.9rem}.concept-example{border-left:0;border-top:1px solid #d7e1ed;padding:22px 0 0}.concept-formula{font-size:1.9rem}footer{flex-direction:column;gap:5px;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Direct manipulation of mixing coefficients. */
.vector-controls{min-width:0;margin-bottom:16px}
.vector-controls #vector-plot{touch-action:none;user-select:none;outline-offset:2px;border-radius:8px}
#vector-plot:focus-visible{outline:3px solid #3e8fe6}
.draggable-vector{cursor:grab}
#vector-plot.dragging,#vector-plot.dragging .draggable-vector{cursor:grabbing}
.vector-picker{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.vector-picker button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);font-size:.875rem;flex:1;white-space:nowrap}
.vector-picker button[aria-pressed=true]{border-color:var(--cyan);background:var(--cyan-soft)}
.vector-picker button[data-vector-select=w][aria-pressed=true]{border-color:var(--violet);background:var(--violet-soft)}
.vector-picker button span{font-variant-numeric:tabular-nums}
.graph-help{font-size:.875rem;color:var(--muted);margin-top:9px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* A reading surface beneath the experiment, with sound examples beside the rules. */
.space-lesson{margin-top:28px;padding:32px clamp(20px,4vw,56px);box-shadow:none}
.space-lesson p{font-size:1rem;line-height:1.85;color:#52647d}
.space-lesson strong{color:var(--ink);font-weight:650}
.space-lesson h4{font-size:1rem;font-weight:650;line-height:1.6;margin:0 0 6px}
.lesson-intro{max-width:860px;margin-bottom:30px}
.lesson-intro h2{font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:14px}
.lesson-intro .eyebrow{font-size:.875rem;color:#506a8c;letter-spacing:.09em;line-height:1.5;margin-bottom:10px}
.lesson-section{border-top:1px solid var(--line);padding:30px 0}
.lesson-section:last-child{padding-bottom:4px}
.lesson-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.lesson-heading h3{font-size:1.25rem;line-height:1.5;margin-bottom:6px}
.lesson-heading p{color:var(--muted)}
.lesson-number{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;background:var(--navy);color:#d6f5ff;border-radius:8px;font-size:.875rem;font-weight:650;margin-top:2px}
.operation-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.operation-card{padding:22px 24px;background:#eff8fd;border-radius:10px;border-top:3px solid var(--cyan)}
.operation-card:nth-child(2){background:#f7f3ff;border-color:var(--violet)}
.operation-label{font-size:.875rem;font-weight:650;letter-spacing:.02em;color:#516b89;display:block;margin-bottom:10px}
.lesson-formula{font-family:Cambria,"Times New Roman",serif;font-size:1.25rem;line-height:1.75;overflow-wrap:anywhere}
.operation-card .lesson-formula{margin-bottom:8px}
.space-lesson .lesson-note{font-size:.875rem;color:#667890;line-height:1.8;margin-top:14px}
.definition-box{border-left:3px solid var(--cyan);background:#f3f8fc;border-radius:0 9px 9px 0;padding:20px 24px}
.definition-box .lesson-formula{margin:8px 0;font-size:1.4rem}
.space-lesson .axiom-intro{margin:22px 0 14px;font-size:.875rem}
.axiom-list{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);counter-reset:axiom}
.axiom-list li{counter-increment:axiom;padding:20px 24px 20px 0;border-bottom:1px solid var(--line);min-width:0}
.axiom-list li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.axiom-list h4:before{content:counter(axiom,decimal-leading-zero);font-family:inherit;font-size:.875rem;color:#7a8da5;margin-right:10px}
.axiom-list .lesson-formula{font-size:1.13rem;display:block;margin-bottom:8px}
.axiom-list p{color:#64758c}
.sound-model{margin-top:24px;padding:22px 24px;background:#f7f9fc;border-radius:9px}
.span-example{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;padding:24px;background:#f3f8fc;border-radius:10px;margin-bottom:20px}
.span-example .lesson-formula{margin:8px 0 12px}
.closure-example{border-left:1px solid #d3e2f0;padding-left:30px}
.experiment-connection{margin:22px 0;padding:20px 24px;border:1px solid #cddfed;border-radius:9px}
.current-combinations{display:flex;flex-wrap:wrap;gap:10px 36px;margin-bottom:10px}
.current-combinations .lesson-formula{font-size:1.4rem}
.representation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.representation-grid article{padding:22px;border:1px solid var(--line);border-radius:10px}
.representation-grid h4{font-size:1.1rem}
.representation-grid .lesson-formula{padding:9px 0 14px;font-size:1.25rem}
.why-callout{padding:24px 26px;margin-top:22px;border-radius:10px;background:var(--navy);color:white}
.why-callout h4{font-size:1.1rem;color:#fff}
.why-callout p{color:#dae6f6;margin-top:10px}
.return-equations{padding:20px 24px;background:#f2f7fc;border-radius:9px;margin-bottom:18px;display:grid;gap:10px}
.back-to-lab{display:inline-block;margin-top:20px;border-bottom:1px solid #89a3c0;color:#235983;padding:3px 0;font-weight:600;font-size:.95rem}
.back-to-lab:hover{color:var(--cyan)}
.harmonic-panel{margin-top:22px;padding:28px}
.harmonic-panel>.section-heading{align-items:flex-start;gap:20px;margin-bottom:20px}
.harmonic-badge{font-size:.875rem;white-space:nowrap;color:#375c85;background:#edf5fc;border:1px solid #d4e3f2;border-radius:7px;padding:6px 11px}
.harmonic-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.harmonic-presets button{border:1px solid var(--line);border-radius:9px;background:#f8fafc;text-align:left;padding:13px 17px;color:var(--ink)}
.harmonic-presets strong{display:block;font-size:1rem;margin-bottom:2px}
.harmonic-presets span{font-size:.875rem;color:var(--muted)}
.harmonic-presets button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
.harmonic-presets button[aria-pressed=true] span{color:#d0dfef}
.harmonic-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:start}
.harmonic-row{display:grid;grid-template-columns:100px minmax(60px,1fr) 46px;gap:15px;align-items:center;min-height:64px;border-bottom:1px solid #e6edf5;padding:8px 0}
.harmonic-label{display:flex;flex-direction:column;line-height:1.5}
.harmonic-label strong{font-size:1.1rem;font-weight:650;color:var(--navy)}
.harmonic-label strong span{font-size:.875rem;color:var(--muted);font-weight:400;margin-left:6px}
.harmonic-label small{font-size:.875rem;color:var(--muted)}
.harmonic-row output{font-size:.95rem;text-align:center;font-variant-numeric:tabular-nums;background:#f3f7fc;border:1px solid var(--line);border-radius:5px;padding:3px}
.harmonic-fixed-note{font-size:.875rem;color:var(--muted)}
.harmonic-hint{padding:13px 15px;background:#eef8fc;border-radius:8px;color:#3b657b;font-size:.875rem;line-height:1.8;margin-top:17px}
.harmonic-result{min-width:0;background:#f8fafc;border:1px solid var(--line);padding:20px;border-radius:11px}
.harmonic-plot-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.harmonic-plot-heading h3{font-size:1rem}
.harmonic-plot-heading span{font-size:.875rem;color:var(--muted)}
#harmonic-wave{display:block;width:100%;height:auto;margin:10px 0 0}
#harmonic-wave text{font-family:inherit}
.harmonic-wave-legend{display:flex;gap:10px 17px;align-items:center;flex-wrap:wrap;font-size:.875rem;color:var(--muted)}
.harmonic-wave-legend>span{display:flex;gap:6px;align-items:center}
.reference-line{background:repeating-linear-gradient(to right,#99a9bf 0 5px,transparent 5px 8px)}
#harmonic-scale{margin-left:auto;font-size:.8rem}
.harmonic-formula-box{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.harmonic-formula-box>span{font-size:.875rem;color:var(--muted)}
#harmonic-formula{margin:2px 0 5px;font-size:1.35rem}
.harmonic-coordinates{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.harmonic-playback{display:flex;align-items:center;gap:9px;margin-top:20px;flex-wrap:wrap}
.harmonic-playback .secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:42px;padding:8px 12px}
.harmonic-playback [aria-pressed=true]{background:#087a9c;border-color:#087a9c}
.harmonic-status{font-size:.875rem;color:var(--muted);min-height:44px;margin-top:11px;line-height:1.7}
.harmonic-match{display:flex;gap:8px;align-items:center;font-size:.875rem;cursor:pointer;margin-top:4px}
.harmonic-match input{width:17px;height:17px;accent-color:var(--cyan);flex-shrink:0}
.harmonic-level-note{margin-top:8px}
.harmonic-level-note summary{font-size:.875rem}
.harmonic-level-note p{line-height:1.8}
.harmonic-explanation{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.harmonic-explanation h3{margin-bottom:8px;font-size:1rem}
.harmonic-explanation p{font-size:1rem;color:#52647d;line-height:1.85}
.harmonic-footnote{color:var(--muted);font-size:.875rem;margin-top:16px;line-height:1.8}
@media(max-width:1100px){nav{gap:18px}.vector-picker button{gap:5px;padding:6px}.vector-picker .legend-line{width:12px}.representation-grid{gap:12px}.representation-grid article{padding:18px}}
@media(min-width:581px) and (max-width:850px){
  .vector-controls{grid-column:2;grid-row:2/5;margin:0}
  .vector-controls .graph-heading{padding:0}
  .vector-controls #vector-plot{margin-top:8px;height:210px}
}
@media(max-width:850px){
  nav{gap:14px}.topbar-inner{flex-wrap:wrap;padding-top:14px;padding-bottom:12px;gap:8px}nav a{padding:6px 0}
  .representation-grid{grid-template-columns:1fr}.representation-grid article{padding:20px 24px}
  .space-lesson{padding:28px}.span-example{gap:20px}.closure-example{padding-left:20px}
  .harmonic-workspace{grid-template-columns:1fr;gap:22px}.harmonic-panel{padding:24px}.harmonic-explanation{gap:22px}
}
@media(max-width:580px){
  nav{gap:8px}nav b{margin-right:3px}nav a{font-size:.8rem}
  .vector-controls{width:100%;margin-bottom:14px}.vector-controls .graph-heading>span{font-size:.75rem}
  .vector-picker button{padding:8px;min-height:42px}.graph-help{margin-bottom:2px}
  .space-lesson{padding:24px 18px;margin-top:22px}.lesson-intro{margin-bottom:22px}.lesson-intro h2{font-size:1.5rem}
  .lesson-section{padding:24px 0}.lesson-heading{gap:10px;margin-bottom:18px}.lesson-heading h3{font-size:1.15rem}
  .lesson-number{width:30px;height:30px}.operation-grid,.span-example,.axiom-list{grid-template-columns:1fr}
  .operation-card,.definition-box,.sound-model,.experiment-connection,.why-callout,.return-equations{padding:18px}
  .axiom-list li,.axiom-list li:nth-child(even){padding:18px 0;border-left:0}
  .span-example{padding:18px;gap:18px}.closure-example{border-left:0;border-top:1px solid #d3e2f0;padding:18px 0 0}
  .representation-grid article{padding:18px}.lesson-formula{font-size:1.16rem}
  nav{justify-content:flex-start;gap:8px 13px;flex-wrap:wrap}
  .harmonic-panel{padding:20px 14px}.harmonic-panel>.section-heading{flex-direction:column;gap:10px}
  .harmonic-presets{gap:7px}.harmonic-presets button{padding:10px 8px}.harmonic-presets strong{font-size:.95rem}.harmonic-presets span{font-size:.8rem;line-height:1.5;display:block}
  .harmonic-row{grid-template-columns:91px minmax(60px,1fr) 42px;gap:9px}.harmonic-label strong span{margin-left:3px}
  .harmonic-result{padding:16px 12px}.harmonic-playback{gap:8px}.harmonic-playback .secondary-button{padding:8px 10px}
  .harmonic-explanation{grid-template-columns:1fr;gap:20px}#harmonic-scale{margin-left:0}
}