/* Audiopedia teaching instruments — original vector artwork, 16 October 2026. */
.av-visual{--av-ink:#182326;--av-blue:#17647e;--av-mid:#27829c;--av-light:#52acd0;--av-paper:#fafaf7;--av-line:rgba(23,100,126,.22);color:var(--av-ink);position:relative;isolation:isolate;min-width:0;font-family:inherit}
.av-visual *{box-sizing:border-box}.av-visual button,.av-visual input{font:inherit}.av-visual svg{display:block;width:100%;height:auto;overflow:visible}.av-visual svg text{font-family:inherit;fill:var(--av-ink)}
.av-plate{position:relative;border:1px solid var(--av-line);border-radius:4px;background:linear-gradient(115deg,rgba(255,255,255,.83),rgba(250,250,247,.6));padding:17px 19px 14px;overflow:hidden}.av-plate:before{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(23,100,126,.065);border-radius:2px}.av-plate-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 9px;border-bottom:1px solid var(--av-line);font-size:10px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--av-blue);font-weight:600}.av-plate-head span:last-child{font-size:9px;color:#59666a;letter-spacing:.06em;font-weight:400}.av-scene{position:relative;margin:6px 0 0}.av-scene .av-svg-title{font-size:12px;font-weight:600;letter-spacing:.02em}.av-scene .av-svg-note{font-size:10px;fill:#51646b}.av-scene .av-svg-micro{font-size:8px;fill:#5d7076;letter-spacing:.08em}.av-scene .av-svg-number{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:30px}.av-rule{stroke:var(--av-line);stroke-width:.8}.av-blue-stroke{stroke:var(--av-blue)}.av-wave{fill:none;stroke:var(--av-mid);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.av-dimension{stroke:#6e858d;stroke-width:.7;fill:none}.av-dashed{stroke-dasharray:3 4}.av-flow{stroke-dasharray:3 8}.av-flow-active .av-flow{animation:av-flow 2.4s linear}.av-node{transition:opacity .25s,filter .25s}.av-node.is-muted{opacity:.35}.av-node.is-selected .av-node-body{fill:#e9f1f1;stroke:var(--av-blue);stroke-width:1.4}.av-node.is-selected .av-node-halo{opacity:1}.av-node-halo{opacity:0;transition:opacity .3s}.av-control-row{display:flex;align-items:center;gap:12px;margin-top:6px}.av-control-row label{font-size:11px;line-height:1.45;min-width:92px;color:#42585f}.av-control-row input[type=range]{accent-color:var(--av-blue);width:100%;min-width:0;height:24px;cursor:pointer}.av-control-row output{min-width:47px;font-size:12px;font-weight:600;white-space:nowrap;text-align:right;color:var(--av-blue)}
.av-tabs{display:flex;gap:5px;flex-wrap:wrap;padding-top:3px}.av-tab,.av-action{appearance:none;color:var(--av-blue);border:1px solid rgba(23,100,126,.23);background:transparent;border-radius:3px;min-height:36px;padding:7px 10px;cursor:pointer;font-size:11px;font-weight:500;line-height:1.3;transition:background .18s,border-color .18s,transform .18s}.av-tab:hover,.av-action:hover{background:#e8f0f0;border-color:var(--av-blue)}.av-tab[aria-pressed=true]{background:var(--av-blue);border-color:var(--av-blue);color:#fff}.av-tab:focus-visible,.av-action:focus-visible,.av-visual input:focus-visible{outline:2px solid var(--av-blue);outline-offset:3px}.av-detail{min-height:49px;line-height:1.55;font-size:13px;margin:10px 0 0;color:#42565d}.av-detail strong{color:var(--av-ink);font-weight:600}.av-caption{border-top:1px solid var(--av-line);margin:11px 0 0;padding-top:9px;font-size:10px;line-height:1.55;color:#5d6b6f}.av-result{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:4px 0 8px}.av-result output{color:var(--av-blue);font-size:27px;font-family:Georgia,serif}.av-result span{font-size:11px;color:#596970}.av-inline-note{font-size:10px;color:#5d6b6f;line-height:1.6;margin:6px 0 0}.av-control-label{display:block;font-size:11px;font-weight:600;margin:10px 0 7px;color:#42585f}.av-connections{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.av-connections .av-tab{padding:9px 5px}.av-has-pulse .av-pulse-dot{animation:av-pulse-path 2.4s ease-in-out both}.av-pulse-dot{opacity:0}
/* The home atlas is a single engraved drawing, with responsive HTML annotations. */
.av-atlas{padding:0;perspective:1000px;touch-action:pan-y}.av-atlas-art{transform:rotateX(var(--av-rx,0deg)) rotateY(var(--av-ry,0deg));transform-origin:50% 50%;transition:transform .35s ease-out;will-change:transform}.av-atlas-svg{aspect-ratio:560/420;min-height:0}.av-atlas .av-atlas-top{font-size:9px;letter-spacing:.16em;fill:#51717e}.av-atlas .av-atlas-label{font-size:10px;letter-spacing:.025em;fill:#425b65}.av-atlas .av-atlas-caption{font-size:8px;letter-spacing:.09em;fill:#69828b}.av-atlas .av-atlas-title{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;fill:var(--av-blue)}.av-atlas-controls{position:relative;margin:-16px 18px 0 24px;display:flex;align-items:center;gap:13px;border-top:1px solid var(--av-line);padding:13px 0}.av-atlas-controls .av-action{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.035em;min-height:37px;border-radius:30px;padding:8px 13px}.av-atlas-controls .av-action:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--av-blue);box-shadow:0 0 0 3px rgba(23,100,126,.08)}.av-atlas-controls p{font-size:10px;line-height:1.6;color:#58707b;margin:0}.av-atlas-note{font-size:9px;line-height:1.6;color:#6a7b81;margin:1px 24px 0;letter-spacing:.025em}.av-atlas.is-tracing .av-atlas-coil{animation:av-coil 1s ease-in-out 3}.av-atlas.is-tracing .av-atlas-cone{animation:av-cone .45s ease-in-out 6}.av-atlas.is-tracing .av-atlas-wave{animation:av-ripple 2.4s ease-out both;animation-delay:var(--av-delay,0s)}.av-atlas.is-tracing .av-atlas-trace{animation:av-trace 2.6s linear both;stroke-dasharray:700;stroke-dashoffset:700}.av-atlas-trace{stroke-dasharray:700;stroke-dashoffset:700}.av-atlas-wave{opacity:.2}.av-atlas-pulse-label{opacity:0;transition:opacity .3s}.av-atlas.is-tracing .av-atlas-pulse-label{opacity:1}
@keyframes av-flow{to{stroke-dashoffset:-55}}@keyframes av-coil{50%{transform:translateX(4px)}}@keyframes av-cone{50%{transform:translateX(3px)}}@keyframes av-ripple{0%{opacity:.1}35%{opacity:.9}100%{opacity:.18}}@keyframes av-trace{0%{stroke-dashoffset:700}70%,100%{stroke-dashoffset:0}}@keyframes av-pulse-path{0%{opacity:0;transform:translateX(0)}5%{opacity:1}95%{opacity:1}100%{opacity:0;transform:translateX(350px)}}
@media(prefers-reduced-motion:reduce){.av-visual *,.av-visual *:before,.av-visual *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.av-atlas-art{transform:none!important;will-change:auto}.av-atlas.is-tracing .av-atlas-trace{stroke-dashoffset:0}.av-atlas.is-tracing .av-atlas-wave{opacity:.7}}
@media(max-width:600px){.av-plate{padding:13px 11px 12px}.av-plate-head{font-size:9px}.av-plate-head span:last-child{font-size:8px}.av-tabs{gap:4px}.av-tab{font-size:10px;padding:7px 8px;min-height:38px}.av-control-row{gap:8px}.av-control-row label{min-width:80px;font-size:10px}.av-detail{font-size:12px;min-height:51px}.av-caption{font-size:10px}.av-atlas-controls{margin:-8px 5px 0 10px;gap:9px}.av-atlas-controls p{font-size:9px}.av-atlas-controls .av-action{font-size:9px;padding:8px 10px}.av-atlas-note{margin:0 10px;font-size:8px}.av-atlas .av-atlas-label{font-size:11px}.av-scene .av-svg-note{font-size:12px}.av-scene .av-svg-micro{font-size:10px}.av-scene .av-svg-title{font-size:13px}}
.av-signal-mobile{display:none}.av-mobile-node{font:inherit}
@media(max-width:480px){.av-signal-plate>.av-scene>svg,.av-signal-plate>.av-tabs{display:none}.av-signal-mobile{display:flex;flex-direction:column;gap:4px;margin:11px 0 0}.av-mobile-node{appearance:none;display:flex;align-items:center;gap:11px;position:relative;text-align:left;width:100%;min-height:61px;padding:3px 10px;border:1px solid transparent;border-bottom-color:var(--av-line);border-radius:3px;background:transparent;color:var(--av-ink);cursor:pointer}.av-mobile-node[aria-pressed=true]{background:#eaf1f0;border-color:rgba(23,100,126,.3)}.av-mobile-node:focus-visible{outline:2px solid var(--av-blue);outline-offset:2px}.av-mobile-node>svg{width:39px;height:54px;flex:0 0 39px;overflow:hidden}.av-mobile-order{font-size:9px;font-family:monospace;color:#617c87;align-self:flex-start;margin-top:9px}.av-mobile-node>span:nth-of-type(2){font-size:12px;font-weight:600;line-height:1.4}.av-mobile-node small{font-size:10px;display:block;font-weight:400;color:#58717b;margin-top:3px}.av-mobile-arrow{margin-left:auto;color:var(--av-blue);font-size:18px}.av-signal-plate .av-caption{margin-top:7px}.av-signal-plate .av-detail{min-height:0}}
.av-quant-controls{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px}.av-quant-controls .av-control-label{font-size:10px;line-height:1.4;min-height:28px;margin:3px 0 5px}.av-quant-controls .av-tabs{gap:3px}.av-quant-controls .av-tab{padding:7px 8px;font-size:10px;min-height:34px}
@media(max-width:600px){.av-quant-controls{grid-template-columns:1fr;gap:9px}.av-quant-controls .av-control-label{min-height:0}.av-quant-controls .av-tab{min-height:38px}.av-quant-controls .av-tabs{gap:6px}}
/* R2 phone instruments: readable text outside the scaled drawing and thumb-size controls. */
.av-mobile-key,.av-step{display:none}
@media(max-width:700px){
  .av-plate{padding:14px 10px 13px;border-radius:8px}
  .av-plate:before{display:none}
  .av-plate-head{align-items:flex-start;flex-direction:column;gap:3px;font-size:12px;line-height:1.4;letter-spacing:.055em;padding-bottom:11px}
  .av-plate-head span:last-child{font-size:11px;line-height:1.5;letter-spacing:.025em}
  .av-scene{margin:9px 0 0}
  .av-visual[data-av-kind]:not([data-av-kind=signal]) .av-scene>svg text{display:none}
  .av-mobile-key{display:block;margin:2px 0 13px;font-size:13px;line-height:1.5;color:#42565d}
  .av-mobile-key p{margin:7px 0 0;font-size:13px;line-height:1.5}
  .av-key-values{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .av-key-values>span{display:flex;flex-direction:column;min-width:0;gap:4px}
  .av-key-values small{font-size:12px;line-height:1.4;color:#536b73}
  .av-key-values strong{font-size:16px;font-weight:600;line-height:1.35;color:var(--av-blue)}
  .av-key-values.av-key-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .av-key-three strong{font-size:17px}
  .av-key-axis{display:flex;justify-content:space-between;align-items:center;gap:7px}
  .av-key-axis>span{min-width:0}
  .av-key-lines{display:flex;flex-wrap:wrap;gap:8px 16px}
  .av-key-lines>span{display:flex;align-items:center;gap:7px}
  .av-key-solid,.av-key-dashed{display:inline-block;vertical-align:middle;width:21px;border-top:2px solid var(--av-blue)}
  .av-key-dashed{border-top-style:dashed}
  .av-key-stack{display:grid;gap:7px;list-style:none;margin:0;padding:0}
  .av-key-stack li{display:grid;grid-template-columns:51px minmax(0,1fr);gap:10px;margin:0;font-size:13px;line-height:1.45}
  .av-key-stack strong{font-weight:600;color:var(--av-blue)}
  .av-tabs{gap:8px;padding-top:3px}
  .av-tab,.av-action,.av-quant-controls .av-tab{min-width:44px;min-height:44px;padding:10px 14px;font-size:14px;line-height:1.35;border-radius:7px;touch-action:manipulation}
  .av-connections{gap:8px}
  .av-connections .av-tab{padding:10px 5px}
  .av-control-label,.av-quant-controls .av-control-label{font-size:14px;line-height:1.4;min-height:0;margin:12px 0 8px}
  .av-control-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px 10px;align-items:center;margin:11px 0 5px}
  .av-control-row label{grid-column:1/3;grid-row:1;min-width:0;font-size:14px;line-height:1.45}
  .av-control-row output{grid-column:3;grid-row:1;min-width:0;font-size:14px;line-height:1.45;text-align:right;overflow:visible}
  .av-control-row input[type=range]{grid-column:2;grid-row:2;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;touch-action:pan-y;cursor:ew-resize}
  .av-control-row input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:9px;background:#b8d2d9}
  .av-control-row input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin-top:-11.5px;border:3px solid var(--av-paper);border-radius:50%;background:var(--av-blue);box-shadow:0 0 0 1px var(--av-blue)}
  .av-control-row input[type=range]::-moz-range-track{height:5px;border-radius:9px;background:#b8d2d9}
  .av-control-row input[type=range]::-moz-range-thumb{width:23px;height:23px;border:3px solid var(--av-paper);border-radius:50%;background:var(--av-blue);box-shadow:0 0 0 1px var(--av-blue)}
  .av-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--av-line);border-radius:8px;color:var(--av-blue);background:var(--av-paper);font-size:23px;line-height:1;cursor:pointer;touch-action:manipulation}
  .av-step-minus{grid-column:1;grid-row:2}.av-step-plus{grid-column:3;grid-row:2}
  .av-step:disabled{opacity:.35;cursor:default}.av-step:focus-visible{outline:2px solid var(--av-blue);outline-offset:3px}
  .av-detail{font-size:15px;line-height:1.6;min-height:0;margin-top:13px}
  .av-caption{font-size:12px;line-height:1.6;padding-top:12px;margin-top:15px}
  .av-result{justify-content:flex-start;align-items:center;margin:13px 0 4px;gap:12px}
  .av-result output{font-size:30px;line-height:1.2;white-space:nowrap}
  .av-result span{font-size:13px;line-height:1.4;max-width:145px}
  .av-inline-note{font-size:12px;line-height:1.6}
  .av-quant-controls{grid-template-columns:1fr;gap:6px}
  .av-quant-controls .av-tabs{gap:8px}
  .av-quant-controls .av-tab{flex:1;padding:10px 8px}
  .av-visual[data-av-kind=phono] .av-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .av-visual[data-av-kind=phono] .av-tab{padding:9px 4px;font-size:13px;min-height:54px}
  .av-atlas-controls{margin:0 5px;display:grid;grid-template-columns:1fr;gap:10px;padding-top:12px}
  .av-atlas-controls .av-action{justify-content:center;font-size:14px;min-height:44px;padding:10px 14px}
  .av-atlas-controls p{font-size:13px;line-height:1.5}
  .av-atlas-note{font-size:11px;line-height:1.5;margin:5px}
}
@media(max-width:700px){
  .av-signal-plate>.av-scene>svg,.av-signal-plate>.av-tabs{display:none}
  .av-signal-mobile{display:flex;flex-direction:column;gap:7px;margin:4px 0 0}
  .av-mobile-node{appearance:none;display:flex;align-items:center;gap:10px;position:relative;text-align:left;width:100%;min-height:72px;padding:7px 9px;border:1px solid var(--av-line);border-radius:7px;background:transparent;color:var(--av-ink);cursor:pointer;touch-action:manipulation}
  .av-mobile-node[aria-pressed=true]{background:#eaf1f0;border-color:var(--av-blue)}
  .av-mobile-node:focus-visible{outline:2px solid var(--av-blue);outline-offset:2px}
  .av-mobile-node>svg{width:36px;height:54px;flex:0 0 36px;overflow:hidden}
  .av-mobile-order{font-size:11px;font-family:monospace;color:#617c87;align-self:flex-start;margin-top:7px}
  .av-mobile-node>span:nth-of-type(2){font-size:15px;font-weight:600;line-height:1.35}
  .av-mobile-node small{font-size:12px;display:block;font-weight:400;color:#58717b;margin-top:4px;line-height:1.4}
  .av-mobile-arrow{margin-left:auto;color:var(--av-blue);font-size:18px}
}
/* Coarse pointers also need a comfortable target in landscape and on tablets. */
@media(pointer:coarse){
  .av-tab,.av-action,.av-quant-controls .av-tab,.av-atlas-controls .av-action{min-width:44px;min-height:44px}
  .av-control-row input[type=range]{min-height:44px}
}