#teaching-content *{box-sizing:border-box}
#teaching-content [hidden]{display:none!important}
#teaching-content{margin:0;color:var(--ink);background:white;font-size:16px;line-height:1.6}
#teaching-content a{color:var(--navy);text-underline-offset:4px}
#teaching-content main{max-width:1440px;margin:auto;padding:0 32px}
#teaching-content h1,#teaching-content h2,#teaching-content h3{line-height:1.3;text-wrap:balance}
#teaching-content h1{font-size:clamp(30px,3vw,42px);margin:0;color:var(--navy);letter-spacing:-.025em}
#teaching-content h2{font-size:24px;margin:0 0 20px}
#teaching-content h3{font-size:19px;margin:0 0 12px}
#teaching-content p{margin:12px 0;color:var(--muted)}
#teaching-content .intro{padding:28px 0 24px;display:flex;justify-content:space-between;align-items:center;gap:24px}
#teaching-content .intro p{margin:6px 0 0}
#teaching-content .model-label{font-size:14px;color:var(--muted)}
#teaching-content .workspace-nav{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:24px}
#teaching-content .workspace-nav a{font-size:16px;font-weight:600;color:var(--muted);text-decoration:none;padding:12px 0;border-bottom:3px solid transparent}
#teaching-content .workspace-nav a[aria-current=page],#teaching-content .workspace-nav a:hover{color:var(--navy);border-color:var(--navy)}
#teaching-content [id]{scroll-margin-top:24px}
#teaching-content .lab{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
#teaching-content .controls-panel{grid-column:2;grid-row:1;background:var(--paper);padding:22px;min-width:0}
#teaching-content .workspace{grid-column:1;grid-row:1;min-width:0}
#teaching-content label{display:block;font-size:14px;font-weight:600}
#teaching-content select,#teaching-content button{font:inherit;border:1px solid var(--line);border-radius:4px;background:white;color:var(--ink);padding:10px 12px;min-height:44px}
#teaching-content select{width:100%;margin:6px 0 12px;min-width:0}
#teaching-content button{cursor:pointer;touch-action:manipulation}
#teaching-content button:hover{background:var(--paper);border-color:var(--navy)}
#teaching-content .primary{color:white;background:var(--navy);border-color:var(--navy)}
#teaching-content .primary:hover{background:var(--ink);color:var(--bg)}
#teaching-content .quiet{border-color:transparent;background:transparent;color:var(--muted);font-size:14px}
#teaching-content .controls-panel>.quiet{margin-top:12px}
#teaching-content .controls-panel #aim{width:100%;margin:6px 0 18px}
#teaching-content .control{margin:16px 0}
#teaching-content .control label{display:flex;justify-content:space-between;gap:8px}
#teaching-content output{font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
#teaching-content input[type=range]{width:100%;accent-color:var(--navy);margin:10px 0 0;cursor:pointer;min-height:20px}
#teaching-content input[type=checkbox]{accent-color:var(--navy);width:17px;height:17px;margin:0;flex-shrink:0}
#teaching-content .check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400}
#teaching-content .interference-control{margin-bottom:20px}
#teaching-content .parameter-group{border-top:1px solid var(--line);padding:14px 0}
#teaching-content .parameter-group summary{cursor:pointer;font-size:15px;font-weight:600}
#teaching-content .parameter-group summary span{float:right;font-size:14px;color:var(--muted);font-weight:400}
#teaching-content .frequency-flow{display:grid;grid-template-columns:1fr auto .85fr auto 1.2fr;gap:7px;align-items:center;margin-top:4px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#teaching-content .frequency-flow div{display:flex;flex-direction:column;gap:4px}
#teaching-content .frequency-flow span{font-size:14px;color:var(--muted)}
#teaching-content .frequency-flow strong{font-size:16px;font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
#teaching-content .frequency-flow .multiply{font-size:17px}
#teaching-content .spacing-status{display:grid;grid-template-columns:1fr auto;gap:4px;margin-top:16px;font-size:14px}
#teaching-content .spacing-status strong{font-size:16px;font-variant-numeric:tabular-nums}
#teaching-content .spacing-status p{grid-column:1/-1;font-size:14px;margin:4px 0 0}
#teaching-content .plot-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
#teaching-content .plot-heading h2{font-size:18px;margin:0}
#teaching-content .plot-heading>span{font-size:14px;color:var(--muted)}
#teaching-content canvas{display:block;width:100%;height:auto}
#teaching-content #scene{background:#fafafa;margin-top:14px}
#teaching-content .legend{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:10px 0 18px}
#teaching-content .legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
#teaching-content .target{background:var(--signal-blue)}
#teaching-content .noise{background:var(--orange)}
#teaching-content .steer{background:var(--navy)}
#teaching-content .animation-scale{margin-left:auto}
#teaching-content .listen{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:auto minmax(130px,1fr) minmax(100px,1fr);align-items:center;gap:12px 20px}
#teaching-content .listen label{font-size:14px;font-weight:400;color:var(--muted)}
#teaching-content .listen select{margin:4px 0 0;font-size:14px}
#teaching-content .listen .volume-control{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
#teaching-content .volume-control input{margin-top:10px}
#teaching-content .listen #audioStatus{grid-column:1/-1;font-size:14px;color:var(--muted);line-height:1.2}
#teaching-content .metrics{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;padding:22px 0}
#teaching-content .metrics span{font-size:14px;color:var(--muted);display:block}
#teaching-content .metrics strong{font-size:27px;font-weight:550;color:var(--navy);font-variant-numeric:tabular-nums}
#teaching-content .metric-note{align-self:center;font-size:14px;color:var(--muted)}
#teaching-content .line-key:before{content:"";display:inline-block;width:24px;border-top:2px solid var(--signal-blue);vertical-align:middle;margin-right:8px}
#teaching-content .line-key.dashed:before{border-top:2px dashed var(--navy)}
#teaching-content .scan-legend{margin:0 0 18px}
#teaching-content .plot-notes{border-top:1px solid var(--line);padding:14px 0}
#teaching-content .plot-notes summary{cursor:pointer;font-size:14px;font-weight:600}
#teaching-content .plot-notes p{font-size:14px;max-width:900px}
#teaching-content #reference{padding-top:8px}
#teaching-content .rotor-explanation{max-width:950px;margin:0 0 32px}
#teaching-content .principle{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:28px}
#teaching-content .formula{background:var(--paper);padding:18px;font-size:18px;color:var(--navy);overflow-x:auto}
#teaching-content .caption{font-size:14px}
#teaching-content .learning,#teaching-content .references{border-top:1px solid var(--line);padding-top:28px;margin-top:36px}
#teaching-content .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#teaching-content .references>p{max-width:950px}
#teaching-content .references ul{padding:0;list-style:none}
#teaching-content .references li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px}
#teaching-content .references li span{color:var(--muted);font-size:14px}
#teaching-content footer{max-width:1440px;margin:30px auto 0;padding:22px 32px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
#teaching-content :focus-visible{outline:3px solid var(--navy);outline-offset:4px}
#teaching-content .skip{position:absolute;left:16px;top:-80px;background:white;padding:12px;z-index:5}
#teaching-content .skip:focus{top:4px}
@media(max-width:1100px){#teaching-content main{padding:0 24px}
#teaching-content .lab{grid-template-columns:minmax(0,1fr) 280px;gap:20px}
#teaching-content .controls-panel{padding:18px}
#teaching-content .listen{gap:12px;grid-template-columns:auto minmax(130px,1fr)}
#teaching-content .listen .volume-control{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:12px}
#teaching-content .volume-control input{margin:0}
#teaching-content .metrics{grid-template-columns:1fr 1fr;gap:12px}
#teaching-content .metric-note{grid-column:1/-1}
#teaching-content .frequency-flow{gap:5px}
#teaching-content .frequency-flow strong{font-size:14px}
#teaching-content .principle{grid-template-columns:1fr}
}
@media(max-width:800px){#teaching-content .lab{display:flex;flex-direction:column}
#teaching-content .controls-panel,#teaching-content .scene-panel,#teaching-content .analysis-panel{width:100%;min-width:0}
#teaching-content .workspace{display:contents}
#teaching-content .scene-panel{order:0}
#teaching-content .controls-panel{order:1}
#teaching-content .analysis-panel{order:2}
#teaching-content #aimControls{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#teaching-content .controls-panel #aim{width:auto;padding-left:24px;padding-right:24px}
#teaching-content .interference-control{display:inline-flex;margin-left:20px}
#teaching-content .control-group{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
#teaching-content .frequency-flow{max-width:420px}
#teaching-content .frequency-flow strong{font-size:16px}
#teaching-content .spacing-status{max-width:420px}
#teaching-content .steps{grid-template-columns:1fr}
#teaching-content .metric-note{grid-column:auto}
#teaching-content .metrics{grid-template-columns:1fr 1fr auto}
#teaching-content .listen{grid-template-columns:auto minmax(150px,1fr) minmax(100px,1fr)}
#teaching-content .listen .volume-control{grid-column:auto;display:flex}
#teaching-content .volume-control input{margin-top:10px}
#teaching-content .references li{display:block}
#teaching-content .references li span{display:block}
}
@media(max-width:520px){#teaching-content main{padding:0 16px}
#teaching-content .intro{padding:22px 0;align-items:flex-start;flex-direction:column;gap:8px}
#teaching-content .intro h1{font-size:30px}
#teaching-content .intro p{font-size:14px}
#teaching-content .model-label{font-size:14px}
#teaching-content .workspace-nav{margin-bottom:20px}
#teaching-content .workspace-nav a{font-size:14px}
#teaching-content .controls-panel{padding:18px}
#teaching-content #aimControls{gap:14px}
#teaching-content .control label{font-size:14px;flex-wrap:wrap;gap:4px}
#teaching-content .interference-control{display:flex;margin:0 0 14px}
#teaching-content .parameter-group summary span{font-size:14px}
#teaching-content .metrics{grid-template-columns:1fr 1fr;gap:8px}
#teaching-content .metrics strong{font-size:24px}
#teaching-content .metric-note{grid-column:1/-1}
#teaching-content .listen{grid-template-columns:auto 1fr;gap:12px}
#teaching-content .listen .volume-control{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;gap:12px}
#teaching-content .volume-control input{margin:0}
#teaching-content .plot-heading h2{font-size:17px}
#teaching-content .plot-heading>span{font-size:14px}
#teaching-content .legend{gap:14px}
#teaching-content footer{padding:20px 16px}
#teaching-content .references a{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html #teaching-content{scroll-behavior:auto}
}