:root {
  --ink: #111316;
  --paper: #f2f0e9;
  --muted: #9d9d98;
  --air: #77e5ff;
  --mechanical: #f3bf66;
  --voltage: #ff73b5;
  --digital: #b6f45d;
  --line: rgba(242, 240, 233, 0.16);
  --stage: var(--air);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

body[data-stage="air"] { --stage: var(--air); }
body[data-stage="frequency"] { --stage: #b5a6ff; }
body[data-stage="mechanical"] { --stage: var(--mechanical); }
body[data-stage="voltage"] { --stage: var(--voltage); }
body[data-stage="digital"] { --stage: var(--digital); }

.progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.08);
}
.progress span { display: block; height: 100%; width: 0; background: var(--stage); transition: background .4s; }

.site-header {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 3.4vw;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(17,19,22,.72);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; width: max-content; align-items: center; gap: 12px; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; }
.site-title { grid-column:2; justify-self:center; width:auto; min-width:0; }
.header-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; letter-spacing:-.01em; }
.brand-mark { display: flex; align-items: center; justify-content: center; gap: 3px; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.brand-mark i { display: block; width: 2px; height: 6px; background: var(--stage); border-radius: 10px; transition: background .3s; }
.brand-mark i:nth-child(2) { height: 14px; }
.brand-mark i:nth-child(3) { height: 9px; }
.header-status { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .13em; color: var(--muted); }
.header-status b { color: var(--stage); font-weight: 600; transition: color .3s; }
.icon-button { justify-self: end; border: 1px solid rgba(255,255,255,.22); width: 42px; height: 42px; color: var(--paper); background: transparent; border-radius: 50%; cursor: pointer; }
.icon-button[aria-pressed="true"] { border-color: var(--stage); color: var(--stage); }
.sound-icon { font-size: .67rem; letter-spacing: -2px; }
.header-links { grid-column:3; justify-self:end; display:flex; align-items:center; gap:15px; white-space:nowrap; }
.header-credit,.github-link { color:#96978f; font:700 .55rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.header-credit a,.github-link { color:var(--paper); text-decoration:none; border-bottom:1px solid #5a5a54; padding-bottom:3px; }
.header-credit a:hover,.github-link:hover { color:var(--stage); border-color:var(--stage); }

.story-scroll {
  position: relative;
  height: calc(var(--panel-count) * 100svh);
  background: var(--ink);
}
.story-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.story-panel {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, filter;
}
.story-panel:first-child,
.story-panel.is-visible { visibility: visible; }
.story-panel:first-child { opacity: 1; }
.story-panel.is-active { pointer-events: auto; }
.ensemble-fft-transition {
  position:absolute;
  z-index:8;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.story-viewport.is-ensemble-fft-morphing .ensemble-fft-transition { opacity:1; visibility:visible; }
.story-viewport.is-ensemble-fft-morphing #ensembleCanvas,
.story-viewport.is-ensemble-fft-morphing #fftCanvas { opacity:0; }
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 2vw;
  padding: 125px 8vw 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 52%, rgba(119,229,255,.13), transparent 24%),
    linear-gradient(115deg, #111316 0%, #111316 58%, #171c20 100%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--air), transparent); opacity: .45; }
.hero-noise { position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 2; grid-column: 2; grid-row: 1; max-width: 760px; }
.eyebrow, .chapter-kicker { margin: 0 0 30px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .67rem; letter-spacing: .18em; font-weight: 700; color: var(--stage); }
.hero h1 { margin: 0; font-size: clamp(3.9rem, 7.1vw, 8.5rem); line-height: .87; letter-spacing: -.065em; font-weight: 620; }
h1 em, h2 em { color: var(--stage); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-lede { max-width: 540px; margin: 32px 0 0 5px; color: #c1c1bd; font-size: clamp(1rem, 1.35vw, 1.28rem); }
.hero-actions { display: flex; align-items: center; gap: 26px; margin: 38px 0 0 5px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 0 24px; color: var(--ink); background: var(--air); border: 1px solid var(--air); border-radius: 2px; font-weight: 750; cursor: pointer; transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); }
.primary-button span { font-size: .76rem; }
.text-link { font-size: .8rem; text-underline-offset: 5px; color: #a6a7a4; }
.text-link span { color: var(--air); margin-left: 7px; }

.hero-stage { position: relative; z-index: 1; grid-column: 1; grid-row: 1; aspect-ratio: 1; width: min(43vw, 640px); justify-self: start; }
#heroCanvas { position: absolute; inset: 10%; width: 80%; height: 80%; }
.hero-orbit { position: absolute; border: 1px solid rgba(119,229,255,.17); border-radius: 50%; }
.orbit-one { inset: 5%; animation: breathe 3s ease-in-out infinite; }
.orbit-two { inset: 19%; border-style: dashed; animation: spin 25s linear infinite; }
.hero-stage-label { position: absolute; left: 50%; transform: translateX(-50%); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; letter-spacing: .13em; color: #777e81; white-space: nowrap; }
.hero-stage-label b { color: var(--air); margin-left: 8px; }
.top-label { top: 3%; }.bottom-label { bottom: 3%; }
.scroll-cue { position: absolute; z-index: 2; bottom: 28px; left: 8vw; display: flex; align-items: center; gap: 12px; color: #747774; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.scroll-cue span { position: relative; width: 26px; height: 40px; border: 1px solid #555b5b; border-radius: 15px; }
.scroll-cue span::after { content: ""; position: absolute; top: 8px; left: 11px; width: 3px; height: 7px; border-radius: 3px; background: var(--air); animation: scrollDot 1.8s ease-in-out infinite; }
.scroll-cue small { font-size: .52rem; }

.chapter {
  display: grid;
  grid-template-columns: minmax(500px, 1.16fr) minmax(320px, .84fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
  padding: 108px 7vw 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.chapter:nth-of-type(odd) { background: #14171a; }
.chapter-copy { grid-column: 2; grid-row: 1; max-width: 580px; }
.chapter-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.chapter-kicker span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid currentColor; border-radius: 50%; font-size: .6rem; }
.chapter h2 { margin: 0; font-size: clamp(3rem, 5.6vw, 6.8rem); line-height: .9; letter-spacing: -.055em; font-weight: 580; }
.chapter-intro { max-width: 510px; margin: 30px 0; color: #b5b6b2; font-size: clamp(1rem, 1.3vw, 1.22rem); }
.equation { width: max-content; max-width: 100%; margin: 30px 0 20px; padding: 16px 21px; border-left: 2px solid var(--stage); background: rgba(255,255,255,.045); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.4rem, 2.15vw, 2rem); letter-spacing: .015em; }
.equation span { color: var(--stage); }
.equation sub { font-size: .55em; }
.small-equation { font-size: clamp(1.08rem, 1.65vw, 1.55rem); }
.magenta { border-color: var(--voltage); color: var(--voltage); }
.digital-equation { border-color: var(--digital); }
.equation-caption { margin: -7px 0 25px 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .56rem; color: var(--muted); }
.equation-caption b { color: var(--paper); }
.term-list { margin-top: 24px; border-top: 1px solid var(--line); }
.term-list p { display: grid; grid-template-columns: 48px 1fr; gap: 10px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .78rem; color: #999b98; }
.term-list b { color: var(--stage); font-family: Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.term-list.compact { display: grid; grid-template-columns: repeat(3, 1fr); }
.term-list.compact p { display: block; }
.term-list.compact span { display: block; }
.chapter-note { position: relative; margin: 29px 0 0; padding-left: 20px; max-width: 480px; color: #969895; font-size: .78rem; }
.chapter-note::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 4px; width: 2px; background: var(--stage); }
.chapter-note span { display: block; margin-bottom: 3px; color: var(--stage); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }

.demo-card { position: relative; grid-column: 1; grid-row: 1; width: 100%; max-width: 790px; min-width: 0; padding: 20px; border: 1px solid rgba(255,255,255,.16); background: #0e1012; box-shadow: 0 34px 80px rgba(0,0,0,.28); }
.demo-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-top: 2px solid var(--stage); opacity: .8; }
.demo-head { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 14px; color: #d3d3ce; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .57rem; letter-spacing: .12em; }
.demo-head b { color: #5f6362; font-weight: 500; }
.demo-card canvas { display: block; width: 100%; height: 340px; background: #15191c; border: 1px solid rgba(255,255,255,.06); }
.readout-row, .adc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px; border: 1px solid rgba(255,255,255,.08); }
.readout-row div, .adc-stats p { margin: 0; padding: 12px 14px; border-right: 1px solid rgba(255,255,255,.08); }
.readout-row div:last-child, .adc-stats p:last-child { border: 0; }
.readout-row small, .adc-stats small { display: block; color: #696d6c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .5rem; letter-spacing: .13em; }
.readout-row strong, .adc-stats b { font-size: .9rem; color: var(--stage); font-weight: 500; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.control-grid label, .full-control { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 13px; color: #9a9b98; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .57rem; letter-spacing: .07em; }
input[type="range"] { width: 100%; height: 3px; accent-color: var(--stage); cursor: ew-resize; }
.demo-sound { width: 100%; margin-top: 18px; padding: 13px; color: var(--stage); background: transparent; border: 1px solid color-mix(in srgb, var(--stage) 30%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .58rem; letter-spacing: .1em; cursor: pointer; }
.demo-sound:hover { background: color-mix(in srgb, var(--stage) 8%, transparent); }

.component-controls { margin-top: 13px; }
.component-controls label { display: grid; grid-template-columns: 8px 112px 1fr 55px; align-items: center; gap: 10px; padding: 8px 0; color: #8e9190; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .55rem; }
.component-controls label i { display: block; width: 6px; height: 6px; background: var(--tone); border-radius: 50%; }
.component-controls label b { color: #c8cac5; text-align: right; font-weight: 500; }
.domain-chain { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; color: #8a8c89; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .54rem; letter-spacing: .12em; }
.domain-chain span:first-child, .domain-chain span:last-child { color: var(--stage); }
.domain-chain i { color: #424746; font-style: normal; }
.domain-chain.large { justify-content: flex-start; margin-top: 30px; font-size: .62rem; }
.meter-labels { display: flex; justify-content: space-between; margin: 14px 1px 5px; color: #676b69; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .47rem; letter-spacing: .08em; }
.level-meter { position: relative; height: 8px; overflow: hidden; background: linear-gradient(90deg, #373b3c 0 25%, var(--digital) 25% 74%, #ff6f68 74% 100%); opacity: .8; }
.level-meter i { position: absolute; inset: 0; background: #232628; transform-origin: right; transition: transform .12s; }
.level-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; left: 42%; box-shadow: 0 0 7px #fff; }
.adc-stats p { text-align: center; }
.adc-stats b { color: var(--digital); }
.legend { display: flex; gap: 22px; margin: 13px 0 18px; color: #797d7b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .53rem; }
.legend i { display: inline-block; width: 22px; height: 2px; vertical-align: middle; margin-right: 7px; }
.legend .steps { background: var(--voltage); }
.legend .smooth { background: var(--air); }
.full-control { margin-top: 8px; }

@keyframes breathe { 50% { transform: scale(.96); opacity: .62; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrollDot { 0%,100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(15px); opacity: 1; } }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 150px; }
  .hero-content { grid-column: 1; }
  .hero-stage { position: absolute; right: -13vw; width: 58vw; opacity: .42; }
  .chapter { grid-template-columns: 1fr; padding-top: 100px; padding-bottom: 45px; overflow-y: auto; align-content: start; }
  .chapter-copy { grid-column: 1; grid-row: 2; max-width: 680px; }
  .demo-card { grid-column: 1; grid-row: 1; }
  .demo-card { max-width: none; }
}

@media (max-width: 700px) {
  .site-header { height: 66px; padding: 0 14px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .header-status { display: none; }
  .header-title { max-width:190px; white-space:normal; text-align:center; font-size:.58rem; line-height:1.08; text-transform:uppercase; }
  .header-links { gap:7px; }
  .header-credit,.github-link { font-size:.42rem; }
  .icon-button { width:34px; height:34px; }
  .hero { padding: 115px 24px 90px; }
  .hero h1 { font-size: clamp(3.6rem, 16vw, 5.6rem); }
  .hero-stage { right: -40vw; width: 100vw; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .scroll-cue { left: 24px; }
  .chapter { grid-template-columns: 1fr; padding: 110px 22px; gap: 55px; }
  .chapter h2 { font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .demo-card { padding: 13px; }
  .demo-card canvas { height: 270px; }
  .control-grid { grid-template-columns: 1fr; }
  .component-controls label { grid-template-columns: 8px 88px 1fr 50px; }
  .term-list.compact { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Punch Geometry — selected visual direction */
:root {
  --ink: #111316;
  --paper: #f5eed8;
  --muted: #5d554d;
  --air: #2f59c5;
  --mechanical: #f4dc18;
  --voltage: #ed321f;
  --digital: #148b8c;
  --line: rgba(17,19,22,.25);
}
body { background:#ed321f; color:var(--ink); }
body[data-stage="air"] { --stage:#2f59c5; }
body[data-stage="frequency"] { --stage:#f4dc18; }
body[data-stage="mechanical"] { --stage:#ed321f; }
body[data-stage="voltage"] { --stage:#148b8c; }
body[data-stage="digital"] { --stage:#f4dc18; }
.story-scroll { background:#ed321f; }
.progress { height:5px; background:#111316; }
.progress span { background:var(--stage); }
.site-header { color:var(--paper); background:#111316; border-bottom:0; }
.brand-mark { border:2px solid var(--paper); }
.brand-mark i { background:var(--stage); }
.header-status { color:#8d8c84; }.header-status b { color:var(--stage); }
.icon-button { color:var(--paper); border:2px solid var(--paper); }
.icon-button[aria-pressed="true"] { color:var(--stage); border-color:var(--stage); }
.hero {
  color:var(--ink);
  background:#ed321f;
  background-image:none;
}
.hero::after { height:7px; background:#111316; opacity:1; }
.hero-noise,.hero-orbit { display:none; }
.hero-content { max-width:720px; }
.eyebrow,.chapter-kicker { color:var(--panel-accent,#f4dc18); font-weight:900; }
.hero h1,.chapter h2 { font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-weight:900; text-transform:uppercase; }
.hero h1 { font-size:clamp(3.8rem,6.5vw,7.8rem); line-height:.86; }
.hero h1 em,.chapter h2 em { color:var(--panel-accent,#f4dc18); font-family:inherit; font-style:normal; font-weight:900; }
.hero-lede { color:var(--ink); font-weight:650; }
.primary-button { color:var(--paper); background:var(--ink); border:3px solid var(--ink); border-radius:0; box-shadow:7px 7px 0 #f4dc18; text-transform:uppercase; }
.text-link { color:var(--ink); font-weight:750; }.text-link span { color:var(--ink); }
.scroll-cue { color:var(--ink); font-weight:800; }.scroll-cue span { border:2px solid var(--ink); }.scroll-cue span::after { background:var(--ink); }
.hero-stage { isolation:isolate; }
.hero-stage::before { content:""; position:absolute; z-index:0; inset:13% 0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(#f4dc18 0 50%,#2f59c5 50%); }
.hero-stage::after { content:""; position:absolute; z-index:2; left:50%; top:50%; width:31%; aspect-ratio:1; transform:translate(-50%,-50%); border:32px solid var(--ink); border-radius:50%; background:#148b8c; }
#heroCanvas { z-index:3; mix-blend-mode:multiply; }
.hero-stage-label { z-index:4; color:var(--ink); font-weight:900; }.hero-stage-label b { color:var(--ink); }

.chapter {
  --panel-bg:#ed321f;
  --panel-ink:#111316;
  --panel-accent:#f4dc18;
  --panel-shape:#2f59c5;
  --stage:var(--panel-accent);
  color:var(--panel-ink);
  background:var(--panel-bg) !important;
  border:0;
}
.chapter-air { --panel-bg:#ed321f; --panel-accent:#f4dc18; --panel-shape:#2f59c5; }
.chapter-mic { --panel-bg:#2f59c5; --panel-ink:#f5eed8; --panel-accent:#f4dc18; --panel-shape:#ed321f; }
.chapter-voltage { --panel-bg:#148b8c; --panel-ink:#111316; --panel-accent:#f4dc18; --panel-shape:#ed321f; }
.chapter-digital { --panel-bg:#f5eed8; --panel-accent:#ed321f; --panel-shape:#2f59c5; }
.chapter-receiver { --panel-bg:#148b8c; --panel-accent:#f4dc18; --panel-shape:#2f59c5; }
.chapter-dac { --panel-bg:#f4dc18; --panel-accent:#ed321f; --panel-shape:#148b8c; }
.chapter-speaker { --panel-bg:#2f59c5; --panel-ink:#f5eed8; --panel-accent:#f4dc18; --panel-shape:#ed321f; }
.chapter-ensemble { --panel-bg:#148b8c; --panel-ink:#111316; --panel-accent:#f4dc18; --panel-shape:#2f59c5; }
.chapter-fft { --panel-bg:#f4dc18; --panel-ink:#111316; --panel-accent:#2f59c5; --panel-shape:#ed321f; }
.chapter-winding { --panel-bg:#2f59c5; --panel-ink:#f5eed8; --panel-accent:#f4dc18; --panel-shape:#ed321f; }
.chapter-fft-process { --panel-bg:#ed321f; --panel-ink:#111316; --panel-accent:#f4dc18; --panel-shape:#148b8c; }

/* Interstitial — why a continuous microphone voltage needs an ADC. */
.adc-interstitial {
  display:grid;
  place-items:center;
  padding:108px 7vw 42px;
  overflow:hidden;
  color:var(--paper);
  background:linear-gradient(90deg,#2f59c5 0 50%,#f5eed8 50%);
  isolation:isolate;
}
.adc-interstitial::before,
.adc-interstitial::after {
  position:absolute;
  z-index:0;
  content:"";
  pointer-events:none;
}
.adc-interstitial::before {
  left:-10vw;
  bottom:-24vw;
  width:54vw;
  aspect-ratio:1;
  border-radius:50%;
  background:#ed321f;
}
.adc-interstitial::after {
  top:-19vw;
  right:-7vw;
  width:49vw;
  aspect-ratio:1;
  clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  background:#f4dc18;
}
.adc-popover {
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  padding:34px 38px 32px;
  background:var(--ink);
  border:4px solid var(--ink);
  box-shadow:-13px 13px 0 #ed321f,13px -13px 0 #f4dc18;
}
.adc-popover-kicker {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  color:#f4dc18;
  font:900 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
}
.adc-popover-kicker span { padding:7px 9px; color:var(--ink); background:#f4dc18; }
.adc-popover h2 {
  margin:0;
  font:900 clamp(3rem,5vw,5.7rem)/.87 "Arial Black","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.adc-popover h2 em { color:#f4dc18; font-family:inherit; font-style:normal; font-weight:900; }
.adc-popover-intro {
  max-width:900px;
  margin:20px 0 22px;
  color:#c9c5b9;
  font-size:clamp(.92rem,1.2vw,1.08rem);
  font-weight:650;
}
.adc-handoff {
  display:grid;
  grid-template-columns:1fr 170px 1fr;
  align-items:stretch;
  gap:10px;
}
.adc-handoff-signal {
  min-width:0;
  padding:12px 14px 10px;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
}
.adc-handoff-signal > span,
.adc-handoff-signal > b {
  display:block;
  font:900 .53rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}
.adc-handoff-signal > span { color:#736f65; }
.adc-handoff-signal > b { margin-top:2px; }
.adc-handoff-signal svg { display:block; width:100%; height:78px; overflow:visible; }
.analog-signal path { fill:none; stroke:#ed321f; stroke-width:6; }
.digital-signal line { stroke:#2f59c5; stroke-width:3; opacity:.55; }
.digital-signal .sample-dots { fill:#148b8c; stroke:var(--ink); stroke-width:2; }
.digital-signal .sample-values { fill:var(--ink); font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-anchor:middle; }
.adc-machine {
  position:relative;
  display:grid;
  place-content:center;
  color:var(--ink);
  background:#ed321f;
  border:3px solid var(--paper);
  text-align:center;
}
.adc-machine small { font:900 .45rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.adc-machine strong { font:900 2.75rem/.9 "Arial Black",Arial,sans-serif; }
.adc-machine i { position:absolute; right:-20px; top:50%; display:grid; width:38px; height:38px; place-items:center; color:var(--ink); background:#f4dc18; border:3px solid var(--ink); font:900 1.15rem/1 Arial,sans-serif; transform:translateY(-50%); }
.adc-machine .adc-arrow-in { left:-20px; right:auto; }
.adc-machine .adc-arrow-out { left:auto; right:-20px; }
.adc-two-jobs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.adc-two-jobs p { display:grid; grid-template-columns:max-content 1fr; gap:13px; margin:0; padding:12px 14px; color:var(--ink); background:var(--paper); }
.adc-two-jobs b { color:#ed321f; font:900 .64rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.adc-two-jobs span { font-size:.73rem; font-weight:750; }
.adc-next {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  margin-top:14px;
  padding:13px 16px;
  color:var(--ink);
  background:#f4dc18;
  border:3px solid #f4dc18;
  cursor:pointer;
  font:900 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  text-align:left;
}
.adc-next:hover { color:var(--paper); background:transparent; }
.adc-next span { font:900 1.1rem/1 Arial,sans-serif; }
.chapter-digital .chapter-intro em { color:#ed321f; font-style:normal; font-weight:900; }
.chapter.chapter-digital h2 { font-size:clamp(2.55rem,4vw,4.85rem); }
.chapter-digital .chapter-intro { margin:20px 0 16px; }
.curve-comparison { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.curve-comparison article { min-width:0; padding:13px 14px 12px; color:var(--paper); background:var(--ink); border-top:7px solid #2f59c5; }
.curve-comparison article:last-child { border-color:#ed321f; }
.curve-comparison small,.curve-comparison b,.curve-comparison code { display:block; }
.curve-comparison small { color:#aaa69a; font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.curve-comparison b { margin-top:7px; font:900 .82rem/1.15 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.curve-comparison p { margin:7px 0 9px; color:#c6c2b7; font-size:.68rem; font-weight:700; line-height:1.38; }
.curve-comparison code { width:max-content; max-width:100%; padding:5px 7px; color:var(--ink); background:#f4dc18; font:900 .57rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.nyquist-intuition { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; margin-top:10px; padding:10px 12px; color:var(--ink); background:#f4dc18; }
.nyquist-intuition span,.nyquist-intuition b { display:block; }
.nyquist-intuition span { font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.nyquist-intuition b { margin-top:4px; font:900 .76rem/1.15 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.nyquist-intuition p { margin:4px 0 0; font-size:.64rem; font-weight:750; line-height:1.35; }
.strobe-pair { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.strobe-pair i { display:grid; aspect-ratio:1; place-items:center; color:var(--paper); background:var(--ink); border-radius:50%; font:900 .7rem/1 "Arial Black",Arial,sans-serif; font-style:normal; }
.twinkle-rule { margin-top:10px; padding:11px 13px 12px; color:var(--paper); background:#ed321f; }
.twinkle-rule span,.twinkle-rule b { display:block; }
.twinkle-rule span { color:#f4dc18; font:900 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.twinkle-rule b { margin-top:5px; font:900 .79rem/1.2 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.twinkle-rule p { margin:5px 0 0; font-size:.66rem; font-weight:700; line-height:1.35; opacity:.82; }
.chapter-digital .adc-count-note { margin-top:11px; font-size:.69rem; line-height:1.4; }
.chapter-digital .adc-count-note span { display:inline; margin-right:6px; }
.demo-adc #adcCanvas { height:315px; }
.adc-code-path { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px; }
.adc-code-path > div { position:relative; min-width:0; padding:9px 10px 8px; color:var(--ink); background:var(--paper); border-top:5px solid #2f59c5; }
.adc-code-path > div:nth-child(2) { border-color:#148b8c; }
.adc-code-path > div:nth-child(3) { border-color:#ed321f; }
.adc-code-path > div:nth-child(4) { border-color:#f4dc18; }
.adc-code-path > div:not(:last-child)::after { position:absolute; z-index:2; top:50%; right:-13px; display:grid; width:19px; height:19px; place-items:center; color:var(--ink); background:#f4dc18; border:2px solid var(--ink); content:"→"; font:900 .65rem/1 Arial,sans-serif; transform:translateY(-50%); }
.adc-code-path small,.adc-code-path b,.adc-code-path span,.adc-code-path code { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adc-code-path small { color:#777268; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.075em; }
.adc-code-path b,.adc-code-path code { margin-top:5px; color:var(--ink); font:900 .74rem/1 "Arial Black",Arial,sans-serif; }
.adc-code-path code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.61rem; }
.adc-code-path span { margin-top:4px; color:#67635c; font:800 .45rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.demo-adc .adc-stats { grid-template-columns:repeat(4,1fr); }
.demo-adc .adc-stats p { min-width:0; padding-right:8px; padding-left:8px; }
.demo-adc .adc-stats b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-adc .adc-stats b span { color:inherit; }
.demo-adc .adc-stats p:last-child b { font-size:.68rem; }
.demo-adc .control-grid label { grid-template-columns:152px 1fr; }
.adc-key-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.adc-key-controls .melody-key-group { border-color:rgba(245,238,216,.42); }
.adc-status { margin:12px 0 0; padding:9px 11px; color:var(--ink); background:#b6f45d; font:900 .56rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.045em; }
.adc-status.is-unsafe { color:var(--ink); background:#f4dc18; }
.demo-adc .demo-sound { margin-top:10px; }
.chapter-digital.is-performing .demo-head b { animation:adcLivePulse .55s steps(2,end) infinite; }

@keyframes adcLivePulse { 50% { color:#f4dc18; } }

/* Interstitial — the ADC output is already a digital PCM stream. */
.pcm-interstitial {
  display:grid;
  place-items:center;
  padding:106px 7vw 38px;
  overflow:hidden;
  color:var(--ink);
  background:#2f59c5;
  isolation:isolate;
}
.pcm-interstitial::before,
.pcm-interstitial::after {
  position:absolute;
  z-index:0;
  content:"";
  pointer-events:none;
}
.pcm-interstitial::before {
  top:-18vw;
  right:-5vw;
  width:52vw;
  aspect-ratio:1;
  border-radius:50%;
  background:#ed321f;
}
.pcm-interstitial::after {
  left:-8vw;
  bottom:-22vw;
  width:55vw;
  aspect-ratio:1;
  clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%);
  background:#f4dc18;
}
.pcm-card {
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  padding:32px 36px 30px;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:-13px 13px 0 #ed321f,13px -13px 0 #f4dc18;
}
.pcm-title-row { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:end; }
.pcm-kicker { margin:0 0 13px; color:#ed321f; font:900 .6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.pcm-kicker span { display:inline-block; margin-right:9px; padding:6px 8px; color:var(--paper); background:var(--ink); }
.pcm-card h2 { margin:0; font:900 clamp(2.8rem,4.65vw,5.25rem)/.86 "Arial Black","Helvetica Neue",Arial,sans-serif; letter-spacing:-.065em; text-transform:uppercase; }
.pcm-card h2 em { color:#2f59c5; font:inherit; font-style:normal; }
.pcm-intro { margin:0 0 3px; font-size:clamp(.84rem,1.15vw,1.02rem); font-weight:700; line-height:1.45; }
.pcm-definitions { margin:14px 0 0; border-top:3px solid var(--ink); }
.pcm-definitions div { display:grid; grid-template-columns:66px 1fr; gap:9px; padding:8px 0; border-bottom:1px solid rgba(17,19,22,.28); }
.pcm-definitions dt { color:#ed321f; font:900 .58rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.pcm-definitions dd { margin:0; color:#514e49; font-size:.64rem; font-weight:700; line-height:1.35; }
.pcm-definitions dd b { color:var(--ink); }
.pcm-clock-line { display:grid; grid-template-columns:190px 1fr; gap:10px; margin-top:20px; }
.pcm-clock,.pcm-stream { min-width:0; color:var(--paper); background:var(--ink); border:3px solid var(--ink); }
.pcm-clock { position:relative; display:grid; align-content:center; padding:14px 16px; overflow:hidden; }
.pcm-clock span,.pcm-stream > span { display:block; color:#aaa69b; font:900 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.pcm-clock b { margin-top:7px; color:#f4dc18; font:900 1.35rem/1 "Arial Black",Arial,sans-serif; }
.pcm-clock i { position:absolute; right:14px; bottom:15px; width:46px; height:24px; background:linear-gradient(90deg,transparent 0 8%,#f4dc18 8% 18%,transparent 18% 38%,#f4dc18 38% 48%,transparent 48% 68%,#f4dc18 68% 78%,transparent 78%); opacity:.8; }
.pcm-stream { padding:12px 14px 10px; }
.pcm-word-track { display:flex; gap:6px; margin-top:9px; overflow:hidden; }
.pcm-word-track code { flex:1 1 0; min-width:0; padding:8px 5px 7px; color:var(--ink); background:var(--paper); border:3px solid var(--paper); font:900 clamp(.53rem,.8vw,.78rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center; white-space:nowrap; }
.pcm-word-track code small { display:block; margin-bottom:5px; color:#777268; font-size:.42rem; letter-spacing:.08em; }
.pcm-stream p { margin:8px 0 0; color:#aaa69b; font-size:.62rem; font-weight:700; }
.pcm-interstitial.is-active .pcm-word-track code { animation:pcmWordClock 1.4s steps(1,end) infinite; animation-delay:calc(var(--word-index) * 120ms); }
@keyframes pcmWordClock { 0%,8% { color:var(--ink); background:#b6f45d; border-color:#f4dc18; transform:translateY(-2px); } 9%,100% { color:var(--ink); background:var(--paper); border-color:var(--paper); transform:none; } }
.pcm-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:10px; border:3px solid var(--ink); }
.pcm-meta-grid p { min-width:0; margin:0; padding:10px 12px; border-right:2px solid rgba(17,19,22,.25); }
.pcm-meta-grid p:last-child { border:0; }
.pcm-meta-grid small,.pcm-meta-grid b,.pcm-meta-grid span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcm-meta-grid small { color:#777268; font:900 .44rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.pcm-meta-grid b { margin-top:5px; color:#ed321f; font:900 .78rem/1 "Arial Black",Arial,sans-serif; }
.pcm-meta-grid span { margin-top:4px; color:#68645d; font:800 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.pcm-choice { display:grid; grid-template-columns:1fr 46px 1fr; gap:8px; align-items:stretch; margin-top:10px; }
.pcm-choice article { padding:10px 12px; color:var(--paper); background:var(--ink); border-top:6px solid #b6f45d; }
.pcm-choice article:last-child { border-color:#2f59c5; }
.pcm-choice article span,.pcm-choice article b { display:block; }
.pcm-choice article span { color:#f4dc18; font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.pcm-choice article b { margin-top:5px; font:900 .75rem/1 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.pcm-choice article p { margin:5px 0 0; color:#b9b5aa; font-size:.61rem; font-weight:700; line-height:1.35; }
.pcm-choice > i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 1.25rem/1 "Arial Black",Arial,sans-serif; font-style:normal; }
.pcm-next { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; padding:11px 14px; color:var(--paper); background:#ed321f; border:3px solid #ed321f; cursor:pointer; font:900 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.075em; text-align:left; }
.pcm-next:hover { color:var(--ink); background:#f4dc18; border-color:var(--ink); }
.pcm-next span { font:900 1rem/1 Arial,sans-serif; }

/* Interstitial — transmit PCM, regroup it, and play it back remotely. */
.transmission-interstitial {
  display:grid;
  place-items:center;
  padding:104px 6vw 34px;
  overflow:hidden;
  color:var(--ink);
  background:#148b8c;
  isolation:isolate;
}
.transmission-interstitial::before,
.transmission-interstitial::after {
  position:absolute;
  z-index:0;
  content:"";
  pointer-events:none;
}
.transmission-interstitial::before {
  top:-15vw;
  left:-6vw;
  width:50vw;
  aspect-ratio:1;
  border-radius:50%;
  background:#2f59c5;
}
.transmission-interstitial::after {
  right:-7vw;
  bottom:-18vw;
  width:52vw;
  aspect-ratio:1;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:#f4dc18;
}
.tx-card {
  position:relative;
  z-index:1;
  width:min(1160px,100%);
  padding:28px 32px 26px;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:-13px 13px 0 #ed321f,13px -13px 0 #f4dc18;
}
.tx-title-row { display:grid; grid-template-columns:1.08fr .92fr; gap:34px; align-items:end; }
.tx-kicker { margin:0 0 12px; color:#148b8c; font:900 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.tx-kicker span { display:inline-block; margin-right:9px; padding:6px 8px; color:var(--paper); background:var(--ink); }
.tx-card h2 { margin:0; font:900 clamp(2.7rem,4.3vw,4.9rem)/.87 "Arial Black","Helvetica Neue",Arial,sans-serif; letter-spacing:-.065em; text-transform:uppercase; }
.tx-card h2 em { color:#ed321f; font:inherit; font-style:normal; }
.tx-intro { margin:0 0 3px; font-size:clamp(.82rem,1.08vw,.98rem); font-weight:700; line-height:1.45; }
.tx-route { display:grid; grid-template-columns:185px 1fr 185px; gap:8px; margin-top:18px; padding:8px; color:var(--paper); background:var(--ink); }
.tx-node { min-width:0; padding:10px 11px; color:var(--ink); background:var(--paper); border-top:5px solid #2f59c5; }
.tx-receiver { border-color:#b6f45d; }
.tx-node small,.tx-node b,.tx-node span { display:block; }
.tx-node small,.tx-link > span { color:#777268; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.tx-node b { margin-top:5px; font:900 .73rem/1 "Arial Black",Arial,sans-serif; }
.tx-node div { display:flex; gap:4px; margin-top:9px; }
.tx-node code,.tx-receiver > code { display:block; min-width:0; overflow:hidden; padding:5px 6px; color:var(--paper); background:var(--ink); font:900 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.tx-receiver > code { margin-top:8px; color:var(--ink); background:#b6f45d; font-size:.62rem; }
.tx-node span { margin-top:5px; color:#6d6961; font:800 .43rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.tx-link { min-width:0; padding:9px 8px 6px; overflow:hidden; }
.tx-link > span { color:#aaa69b; }
.tx-link p { margin:4px 0 0; color:#f4dc18; font:900 .47rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; text-align:center; }
.tx-bit-track { position:relative; height:42px; margin-top:7px; overflow:hidden; border-top:1px solid rgba(245,238,216,.18); border-bottom:1px solid rgba(245,238,216,.18); }
.tx-bit-track::before { position:absolute; top:50%; right:0; left:0; height:2px; background:rgba(245,238,216,.18); content:""; }
.tx-bit-track i { position:absolute; top:50%; left:-28px; display:grid; width:22px; height:22px; place-items:center; color:var(--ink); border:2px solid var(--ink); font:900 .55rem/1 "Arial Black",Arial,sans-serif; font-style:normal; transform:translateY(-50%); }
.tx-bit-track i.is-one { background:#f4dc18; }
.tx-bit-track i.is-zero { background:#b6f45d; }
.transmission-interstitial.is-active .tx-bit-track i { animation:txBitTravel 4.2s linear infinite; animation-delay:calc(var(--bit-index) * -.14s); }
@keyframes txBitTravel { from { left:-28px; } to { left:calc(100% + 28px); } }
.transmission-interstitial.is-active .tx-receiver > code { animation:txReceivePulse .7s steps(2,end) infinite; }
@keyframes txReceivePulse { 50% { background:#f4dc18; } }
.tx-reconstruction { display:grid; grid-template-columns:1fr 38px 1fr 38px 1fr; gap:7px; align-items:stretch; margin-top:10px; }
.tx-stage { min-width:0; padding:10px 12px 9px; color:var(--paper); background:var(--ink); border-top:6px solid #2f59c5; }
.tx-stage-dac { border-color:#ed321f; }
.tx-stage-speaker { border-color:#f4dc18; }
.tx-stage small,.tx-stage b { display:block; }
.tx-stage small { color:#aaa69b; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; }
.tx-stage b { margin-top:5px; font:900 .73rem/1 "Arial Black",Arial,sans-serif; text-transform:uppercase; }
.tx-stage p { margin:4px 0 0; color:#aaa69b; font-size:.52rem; font-weight:700; }
.tx-stage-words div { display:flex; gap:5px; margin-top:12px; }
.tx-stage-words code { min-width:0; overflow:hidden; padding:7px; color:var(--ink); background:#b6f45d; font:900 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.tx-stage svg { display:block; width:100%; height:54px; margin-top:2px; overflow:visible; }
.tx-stage-arrow { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 1.1rem/1 "Arial Black",Arial,sans-serif; font-style:normal; }
.tx-dac-steps { fill:none; stroke:#ed321f; stroke-width:5; stroke-linejoin:miter; }
.tx-dac-curve { fill:none; stroke:#b6f45d; stroke-width:3; stroke-linecap:round; }
.transmission-interstitial.is-active .tx-dac-curve { stroke-dasharray:14 7; animation:txCurveFlow 1.2s linear infinite; }
@keyframes txCurveFlow { to { stroke-dashoffset:-42; } }
.tx-speaker-body { fill:#2f59c5; stroke:var(--paper); stroke-width:3; }
.tx-speaker-cone { fill:#ed321f; stroke:var(--paper); stroke-width:3; transform-origin:48px 29px; }
.tx-speaker-wave { fill:none; stroke:#f4dc18; stroke-width:5; stroke-linecap:square; opacity:.25; transform-origin:72px 29px; }
.transmission-interstitial.is-active .tx-speaker-cone { animation:txConeIdle .48s ease-in-out infinite alternate; }
.transmission-interstitial.is-active .tx-speaker-wave { animation:txSpeakerWave 1.25s ease-out infinite; }
.transmission-interstitial.is-active .tx-speaker-wave.wave-two { animation-delay:.2s; }
.transmission-interstitial.is-active .tx-speaker-wave.wave-three { animation-delay:.4s; }
.transmission-interstitial.is-performing .tx-speaker-cone { animation-duration:.18s; }
@keyframes txConeIdle { to { transform:scaleX(1.08); } }
@keyframes txSpeakerWave { from { opacity:.7; transform:scale(.8); } to { opacity:0; transform:scale(1.12); } }
.tx-actions { display:grid; grid-template-columns:1fr 190px; gap:7px; margin-top:10px; }
.tx-actions button { min-width:0; padding:10px 12px; border:3px solid var(--ink); cursor:pointer; font:900 .52rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.055em; text-align:left; }
.tx-listen { color:var(--paper); background:#ed321f; }
.tx-listen:disabled { cursor:wait; opacity:.7; }
.tx-path { color:var(--ink); background:var(--paper); }
.tx-path span { display:block; margin-bottom:4px; color:#777268; font-size:.42rem; letter-spacing:.08em; }
.tx-path-playback { box-shadow:inset 0 5px 0 #b6f45d; }
.tx-actions button:hover:not(:disabled) { color:var(--ink); background:#f4dc18; }

/* Playback branch — recover sample-word boundaries at the remote device. */
.receiver-domain-chain span { color:var(--panel-ink) !important; }
.demo-receiver { border:3px solid var(--ink); box-shadow:10px 10px 0 #f4dc18; }
.receiver-flow { display:grid; gap:8px; }
.receiver-flow section { display:grid; grid-template-columns:128px minmax(0,1fr); column-gap:12px; align-items:center; min-height:82px; padding:9px 11px; color:var(--ink); background:var(--paper); border-left:6px solid #2f59c5; }
.receiver-flow section:nth-child(2) { border-color:#ed321f; }
.receiver-flow section:nth-child(3) { border-color:#f4dc18; }
.receiver-flow section > small { grid-column:1; grid-row:1 / span 4; font:900 .47rem/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.receiver-flow section > div,.receiver-flow section > b,.receiver-flow section > p { grid-column:2; min-width:0; }
.receiver-flow section > b { margin-top:4px; font:900 .62rem/1 "Arial Black",Arial,sans-serif; }
.receiver-flow section > p { margin:5px 0 0; color:#67635c; font-size:.54rem; font-weight:750; line-height:1.3; }
.receiver-bit-lane { position:relative; height:30px; overflow:hidden; background:var(--ink); }
.receiver-bit-lane::before { position:absolute; top:50%; right:0; left:0; height:2px; background:#464946; content:""; }
.receiver-bit-lane i { position:absolute; top:50%; left:-24px; display:grid; width:20px; height:20px; place-items:center; color:var(--ink); background:#b6f45d; border:2px solid var(--ink); font:900 .5rem/1 "Arial Black",Arial,sans-serif; font-style:normal; transform:translateY(-50%); }
.receiver-bit-lane i.is-one { background:#f4dc18; }
.chapter-receiver.is-active .receiver-bit-lane i { animation:receiverBitTravel 3.3s linear infinite; animation-delay:calc(var(--receiver-bit) * -.14s); }
@keyframes receiverBitTravel { from { left:-24px; } to { left:calc(100% + 24px); } }
.receiver-word-builder { display:flex; gap:3px; overflow:hidden; }
.receiver-word-builder i { display:grid; flex:0 1 25px; height:25px; place-items:center; color:var(--paper); background:var(--ink); font:900 .54rem/1 "Arial Black",Arial,sans-serif; font-style:normal; }
.chapter-receiver.is-active .receiver-word-builder i { animation:receiverWordLatch 1.4s steps(2,end) infinite; }
.chapter-receiver.is-active .receiver-word-builder i:nth-child(even) { animation-delay:.15s; }
@keyframes receiverWordLatch { 50% { color:var(--ink); background:#f4dc18; } }
.receiver-buffer { display:flex; gap:4px; overflow:hidden; }
.receiver-buffer code { min-width:0; overflow:hidden; padding:7px 8px; color:var(--ink); background:#b6f45d; font:900 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.receiver-format { margin-top:10px; padding:9px 11px; color:var(--ink); background:#f4dc18; font:900 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.055em; }
.receiver-next,.dac-next { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; padding:11px 13px; color:var(--paper); background:#ed321f; border:3px solid #ed321f; cursor:pointer; font:900 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.065em; text-align:left; }
.receiver-next:hover,.dac-next:hover { color:var(--ink); background:#f4dc18; border-color:var(--ink); }
.receiver-next span,.dac-next span { font:900 1rem/1 Arial,sans-serif; }

/* DAC — make one binary word's mapping to a held voltage explicit. */
.dac-code-readout { display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:stretch; margin-top:11px; }
.dac-code-readout p { min-width:0; margin:0; padding:9px 10px; color:var(--ink); background:var(--paper); border-top:5px solid #2f59c5; }
.dac-code-readout p:nth-of-type(2) { border-color:#ed321f; }
.dac-code-readout p:nth-of-type(3) { border-color:#148b8c; }
.dac-code-readout small,.dac-code-readout b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dac-code-readout small { color:#777268; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; }
.dac-code-readout b { margin-top:5px; font:900 .7rem/1 "Arial Black",Arial,sans-serif; }
.dac-code-readout > i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 .85rem/1 Arial,sans-serif; font-style:normal; }

/* Speaker — mirror the microphone transducer, then show the listener below the copy. */
.demo-speaker #speakerCanvas { height:340px; }
.listener-scene { position:relative; min-width:0; overflow:hidden; background:#ed321f; isolation:isolate; }
.listener-copy-scene { width:min(100%,460px); height:210px; margin-top:24px; border:4px solid var(--ink); box-shadow:7px 7px 0 var(--panel-accent); }
.listener-scene::before { position:absolute; z-index:0; top:7%; left:10%; width:80%; aspect-ratio:1; border-radius:50%; background:#f4dc18; content:""; }
.listener-waves { position:absolute; z-index:1; top:24%; left:-8%; width:45%; height:42%; }
.listener-waves i { position:absolute; inset:0; border:8px solid #f5eed8; border-top-color:transparent; border-bottom-color:transparent; border-left-color:transparent; border-radius:50%; opacity:.2; }
.listener-waves i:nth-child(2) { inset:-14%; }
.listener-waves i:nth-child(3) { inset:-28%; }
.chapter-speaker.is-active .listener-waves i { animation:listenerWavePulse 1.2s ease-out infinite; }
.chapter-speaker.is-active .listener-waves i:nth-child(2) { animation-delay:.18s; }
.chapter-speaker.is-active .listener-waves i:nth-child(3) { animation-delay:.36s; }
@keyframes listenerWavePulse { from { opacity:.65; transform:scale(.72); } to { opacity:0; transform:scale(1.18); } }
.listener-shrew { position:absolute; z-index:2; left:30%; bottom:-5%; width:40%; max-width:none; transform-origin:55% 80%; }
.chapter-speaker.is-active .listener-shrew { animation:listenerHeadBob 1.1s steps(3,end) infinite; }
.chapter-speaker.is-performing .listener-shrew { animation-duration:.52s; }
@keyframes listenerHeadBob { 50% { transform:translateY(-5px) rotate(-2deg); } }
.listener-couch i { position:absolute; display:block; background:#2f59c5; border:4px solid var(--ink); }
.couch-back { z-index:1; right:8%; bottom:9%; left:8%; height:39%; border-radius:20px 20px 4px 4px; }
.couch-seat { z-index:3; right:6%; bottom:5%; left:6%; height:21%; background:#148b8c !important; }
.couch-arm { z-index:4; bottom:5%; width:20%; height:31%; background:#f5eed8 !important; }
.couch-arm.left { left:3%; }
.couch-arm.right { right:3%; }
.music-notes i { position:absolute; z-index:5; color:var(--ink); font:900 1.25rem/1 Georgia,serif; font-style:normal; opacity:.25; }
.music-notes i:nth-child(1) { top:12%; right:21%; }
.music-notes i:nth-child(2) { top:22%; right:8%; }
.music-notes i:nth-child(3) { top:7%; right:43%; }
.chapter-speaker.is-performing .music-notes i { animation:listenerNoteFloat 1.5s ease-in-out infinite; }
.chapter-speaker.is-performing .music-notes i:nth-child(2) { animation-delay:.2s; }
.chapter-speaker.is-performing .music-notes i:nth-child(3) { animation-delay:.4s; }
@keyframes listenerNoteFloat { 50% { opacity:1; transform:translateY(-8px) rotate(8deg); } }
.listener-caption { position:absolute; z-index:6; right:8px; bottom:7px; padding:5px 6px; color:var(--paper); background:var(--ink); font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; }

/* Ensemble — many simultaneous sources collapse into one microphone waveform. */
.chapter-ensemble .chapter-intro { margin:18px 0 14px; font-size:clamp(.9rem,1.08vw,1.02rem); }
.ensemble-equation { margin:14px 0 12px; padding-top:11px; padding-bottom:11px; font-size:clamp(1.18rem,1.8vw,1.7rem); }
.ensemble-chain { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; align-items:stretch; }
.ensemble-chain p { margin:0; padding:8px 9px; color:var(--paper); background:var(--ink); font-size:.58rem; font-weight:700; line-height:1.35; }
.ensemble-chain b,.ensemble-chain span { display:block; }
.ensemble-chain b { margin-bottom:4px; color:var(--panel-accent); font:900 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.ensemble-chain i { display:grid; place-items:center; color:var(--ink); background:var(--panel-accent); font:900 .72rem/1 Arial,sans-serif; font-style:normal; }
.chapter-ensemble .chapter-note { margin-top:12px; font-size:.67rem; }
.demo-ensemble #ensembleCanvas { height:325px; }
.ensemble-voices { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:9px; }
.ensemble-voices button { min-width:0; padding:8px 9px; color:var(--paper); background:#242729; border:2px solid #484b49; cursor:pointer; text-align:left; opacity:.52; }
.ensemble-voices small,.ensemble-voices b,.ensemble-voices span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ensemble-voices small { font:900 .42rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.045em; }
.ensemble-voices b { margin:6px 0 2px; font:900 .86rem/1 "Arial Black",Arial,sans-serif; }
.ensemble-voices span { color:#a8aaa4; font:800 .46rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ensemble-voices button.is-active { color:var(--ink); border-color:var(--voice-color); background:var(--voice-color); opacity:1; }
.ensemble-voices button.is-active span { color:rgba(17,19,22,.62); }
.voice-trumpet { --voice-color:#2f59c5; }.voice-trumpet.is-active { color:var(--paper) !important; }
.voice-trumpet.is-active span { color:rgba(245,238,216,.68) !important; }
.voice-piano { --voice-color:#148b8c; }.voice-piano.is-active { color:var(--paper) !important; }
.voice-piano.is-active span { color:rgba(245,238,216,.68) !important; }
.voice-guitar { --voice-color:#ed321f; }.voice-guitar.is-active { color:var(--paper) !important; }
.voice-guitar.is-active span { color:rgba(245,238,216,.68) !important; }
.ensemble-sample-path { display:grid; grid-template-columns:1fr 50px 1fr 58px 1fr; margin-top:7px; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ensemble-sample-path p { min-width:0; margin:0; padding:8px 9px; background:var(--paper); border-top:5px solid #2f59c5; }
.ensemble-sample-path p:nth-of-type(2) { border-color:#ed321f; }
.ensemble-sample-path p:nth-of-type(3) { border-color:#148b8c; }
.ensemble-sample-path small,.ensemble-sample-path b,.ensemble-sample-path code { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ensemble-sample-path small { color:#777268; font-size:.4rem; font-weight:900; letter-spacing:.06em; }
.ensemble-sample-path b,.ensemble-sample-path code { margin-top:5px; font:900 .66rem/1 "Arial Black",Arial,sans-serif; }
.ensemble-sample-path > i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.ensemble-play { margin-top:7px; }
.fft-play { margin:0; }
.chapter-ensemble.is-performing .ensemble-voices button.is-active { animation:ensemblePulse .46s ease-in-out infinite alternate; }
@keyframes ensemblePulse { to { transform:translateY(-2px); filter:brightness(1.18); } }

.fft-equation sup { font-size:.48em; }

/* FFT — explicitly separate transport/playback from optional frequency analysis. */
.chapter-fft .chapter-intro { margin:20px 0 15px; font-size:clamp(.88rem,1.05vw,1.02rem); }
.fft-equation { margin:15px 0 12px; padding-top:11px; padding-bottom:11px; font-size:clamp(1.08rem,1.6vw,1.55rem); }
.fft-definitions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fft-definitions p { margin:0; padding:8px 10px; background:rgba(17,19,22,.11); border-top:4px solid var(--panel-accent); font-size:.65rem; font-weight:700; }
.fft-definitions b,.fft-definitions span { display:block; }
.fft-definitions b { margin-bottom:3px; color:var(--panel-accent); font:900 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-use-list { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.fft-use-list p { margin:0; padding:8px; color:var(--paper); background:var(--ink); font-size:.58rem; font-weight:700; line-height:1.35; }
.fft-use-list b,.fft-use-list span { display:block; }
.fft-use-list b { margin-bottom:4px; color:var(--panel-accent); font:900 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.chapter-fft .chapter-note { margin-top:12px; font-size:.68rem; }
.demo-fft #fftCanvas { height:340px; }
.fft-orbit-controls { display:grid; grid-template-columns:1fr repeat(4,34px) 68px; gap:5px; margin-top:8px; color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-orbit-controls p { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; margin:0; padding:7px 10px; background:#242729; border-left:5px solid #2f59c5; }
.fft-orbit-controls p b,.fft-orbit-controls p span { overflow:hidden; font-size:.43rem; letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.fft-orbit-controls p b { color:#f4dc18; }
.fft-orbit-controls p span { color:#bab8ae; }
.fft-orbit-controls button { min-width:0; padding:0; color:var(--ink); background:#f4dc18; border:0; box-shadow:3px 3px 0 #2f59c5; cursor:pointer; font:900 .82rem/1 "Arial Black",Arial,sans-serif; }
.fft-orbit-controls button:hover,.fft-orbit-controls button:focus-visible { color:var(--paper); background:#2f59c5; outline:2px solid var(--paper); outline-offset:1px; }
.fft-orbit-controls .fft-orbit-reset { color:var(--paper); background:#242729; box-shadow:none; font:900 .42rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; }
.fft-flow { display:grid; grid-template-columns:1fr 78px 1fr; margin-top:10px; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-flow p { margin:0; padding:8px 10px; background:var(--paper); border-top:5px solid #ed321f; }
.fft-flow p:last-child { border-color:#2f59c5; }
.fft-flow small,.fft-flow b,.fft-flow span { display:block; }
.fft-flow small { color:#777268; font-size:.42rem; font-weight:900; letter-spacing:.08em; }
.fft-flow b { margin:4px 0 2px; font-size:.66rem; }
.fft-flow span { color:#777268; font-size:.45rem; }
.fft-flow > i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.fft-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.fft-modes button { min-height:42px; padding:7px 8px; color:var(--paper); background:#242729; border:2px solid #4c4e4d; cursor:pointer; font:900 .5rem/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; text-align:left; }
.fft-modes button small { margin-right:6px; color:#969890; font:inherit; }
.fft-modes button:hover,.fft-modes button.is-active { color:var(--ink); background:#f4dc18; border-color:#f4dc18; }
.fft-modes button.is-active small { color:#ed321f; }
.fft-hover-guide { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:7px 0 0; padding:7px 10px; color:var(--paper); background:var(--ink); border-left:6px solid var(--panel-accent); font:900 .44rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.fft-hover-guide b { color:var(--panel-accent); }
.fft-hover-guide span { color:#bab8ae; text-align:right; }
#fftCanvas { cursor:crosshair; }
.fft-result { display:grid; grid-template-columns:1fr 115px; gap:7px; margin-top:8px; }
.fft-result p { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; margin:0; padding:8px 10px; color:var(--ink); background:var(--paper); border-left:6px solid #2f59c5; }
.fft-result small { color:#777268; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; }
.fft-result b { overflow:hidden; font:900 .66rem/1 "Arial Black",Arial,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.fft-result button { color:var(--paper); background:#ed321f; border:2px solid #ed321f; cursor:pointer; font:900 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-result button[aria-pressed="true"] { color:var(--ink); background:#b6f45d; border-color:#b6f45d; }
.fft-result button:disabled { color:var(--ink); background:#d8d1bb; border-color:#d8d1bb; cursor:default; }

/* Fourier winding machine — one candidate frequency becomes one complex coefficient. */
.chapter-winding h2 { font-size:clamp(2.6rem,4.55vw,5.4rem); }
.chapter-winding .chapter-intro { margin:16px 0 13px; font-size:clamp(.88rem,1.04vw,1rem); }
.winding-equation { margin:13px 0 11px; padding-top:10px; padding-bottom:10px; font-size:clamp(1.02rem,1.5vw,1.46rem); }
.winding-equation sup { font-size:.48em; }
.winding-math-map { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.winding-math-map p { margin:0; padding:8px 9px; color:var(--paper); background:rgba(17,19,22,.3); border-top:4px solid var(--panel-accent); font-size:.58rem; font-weight:700; line-height:1.3; }
.winding-math-map b,.winding-math-map span { display:block; }
.winding-math-map b { margin-bottom:4px; color:var(--panel-accent); font:900 .66rem/1 Georgia,"Times New Roman",serif; }
.chapter-winding .chapter-note { margin-top:12px; font-size:.67rem; }
.demo-winding { position:relative; }
.demo-winding #windingCanvas { height:292px; }
.winding-readout { display:grid; grid-template-columns:1fr 34px 1fr 34px 1fr; margin-top:8px; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.winding-readout p { min-width:0; margin:0; padding:8px 9px; background:var(--paper); border-top:5px solid #2f59c5; }
.winding-readout p:nth-of-type(2) { border-color:#148b8c; }
.winding-readout p:nth-of-type(3) { border-color:#ed321f; }
.winding-readout small,.winding-readout b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.winding-readout small { color:#777268; font-size:.38rem; font-weight:900; letter-spacing:.06em; }
.winding-readout b { margin-top:5px; font:900 .66rem/1 "Arial Black",Arial,sans-serif; }
.winding-readout i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 .7rem/1 Georgia,serif; font-style:normal; }
.winding-controls { display:grid; grid-template-columns:1fr 72px 72px 92px; gap:6px; margin-top:8px; color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.winding-controls > p { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; margin:0; padding:7px 9px; background:#242729; border-left:5px solid #2f59c5; }
.winding-controls > p b,.winding-controls > p span { overflow:hidden; font-size:.42rem; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.winding-controls > p b { color:#f4dc18; }
.winding-controls > p span { color:#aaa9a2; }
.winding-controls button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; color:var(--ink); background:#f4dc18; border:0; box-shadow:3px 3px 0 #2f59c5; cursor:pointer; font:900 .4rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.winding-controls kbd { display:grid; place-items:center; width:24px; height:24px; background:var(--paper); border:2px solid var(--ink); font:900 .72rem/1 "Arial Black",Arial,sans-serif; }
.winding-controls button.is-held,.winding-controls button[aria-pressed="true"] { color:var(--paper); background:#2f59c5; outline:2px solid var(--paper); }
.winding-play { margin:8px 0 0; min-height:42px; }
.fft-butterfly { margin-top:8px; color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-butterfly > summary { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:0 10px; background:#242729; border-left:6px solid #f4dc18; cursor:pointer; list-style:none; }
.fft-butterfly > summary::-webkit-details-marker { display:none; }
.fft-butterfly > summary b { color:#f4dc18; font-size:.48rem; letter-spacing:.07em; }
.fft-butterfly > summary span { color:#aaa9a2; font-size:.42rem; }
.fft-butterfly[open] { position:absolute; z-index:20; inset:16px; display:block; margin:0; padding:14px; background:var(--ink); border:3px solid var(--paper); box-shadow:10px 10px 0 #f4dc18; }
.fft-butterfly[open] > summary { display:none; }
.butterfly-panel { display:grid; grid-template-rows:auto 1fr auto auto; height:100%; min-height:0; }
.butterfly-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.butterfly-head p { margin:0; }
.butterfly-head small,.butterfly-head b { display:block; }
.butterfly-head small { color:#a4a39c; font-size:.42rem; letter-spacing:.07em; }
.butterfly-head b { margin-top:5px; color:#f4dc18; font-size:.62rem; }
.butterfly-head button { width:30px; height:30px; color:var(--ink); background:#f4dc18; border:0; cursor:pointer; font:900 1.05rem/1 Arial,sans-serif; }
.butterfly-svg { width:100%; min-height:0; }
.butterfly-svg text { fill:#aaa9a2; font:900 9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:1px; text-anchor:middle; }
.butterfly-svg .butterfly-labels text:first-child { text-anchor:start; }
.butterfly-lines { fill:none; stroke:#777b7a; stroke-width:1.2; opacity:.18; transition:opacity .18s,stroke .18s,stroke-width .18s; }
.butterfly-nodes circle { fill:#777b7a; transition:fill .18s,r .18s; }
.fft-butterfly[data-stage="1"] .butterfly-lines.stage-1,
.fft-butterfly[data-stage="2"] .butterfly-lines.stage-2,
.fft-butterfly[data-stage="3"] .butterfly-lines.stage-3 { stroke:#f4dc18; stroke-width:2; opacity:1; }
.fft-butterfly[data-stage="1"] .butterfly-nodes .stage-1 circle,
.fft-butterfly[data-stage="2"] .butterfly-nodes .stage-2 circle,
.fft-butterfly[data-stage="3"] .butterfly-nodes .stage-3 circle { fill:#ed321f; r:7px; }
.butterfly-stage-titles text { fill:#f4dc18; }
.butterfly-stages { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.butterfly-stages button { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 9px; color:var(--paper); background:#242729; border:2px solid #4b4d4c; cursor:pointer; text-align:left; }
.butterfly-stages button b { color:#969891; font-size:.48rem; }
.butterfly-stages button span { overflow:hidden; font:900 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.butterfly-stages button.is-active { color:var(--ink); background:#f4dc18; border-color:#f4dc18; }
.butterfly-stages button.is-active b { color:#ed321f; }
.butterfly-counts { display:grid; grid-template-columns:1fr 48px 1fr; margin-top:8px; color:var(--ink); }
.butterfly-counts p { margin:0; padding:8px 10px; background:var(--paper); border-top:5px solid #ed321f; }
.butterfly-counts p:last-child { border-color:#2f59c5; }
.butterfly-counts small,.butterfly-counts b { display:block; }
.butterfly-counts small { color:#777268; font-size:.4rem; font-weight:900; }
.butterfly-counts b { margin-top:5px; font-size:.61rem; }
.butterfly-counts i { display:grid; place-items:center; background:#f4dc18; font:900 .72rem/1 Arial,sans-serif; font-style:normal; }

/* Spectral edit — FFT, mask, inverse FFT. */
.chapter-fft-process .chapter-intro { margin:16px 0 14px; font-size:clamp(.88rem,1.04vw,1rem); }
.chapter-fft-process h2 { font-size:clamp(2.65rem,4.65vw,5.55rem); }
.fft-process-equation { margin:14px 0 12px; padding-top:11px; padding-bottom:11px; font-size:clamp(1.08rem,1.62vw,1.55rem); }
.fft-process-steps { display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:stretch; }
.fft-process-steps p { margin:0; padding:9px 10px; color:var(--paper); background:var(--ink); font-size:.58rem; font-weight:700; line-height:1.32; }
.fft-process-steps b,.fft-process-steps span { display:block; }
.fft-process-steps b { margin-bottom:4px; color:var(--panel-accent); font:900 .57rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.fft-process-steps i { display:grid; place-items:center; color:var(--ink); background:var(--panel-accent); font:900 .78rem/1 "Arial Black",Arial,sans-serif; font-style:normal; }
.chapter-fft-process .chapter-note { margin-top:13px; font-size:.69rem; }
.demo-fft-process #fftProcessCanvas { height:330px; }
.fft-process-modes { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.fft-process-modes button { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:7px; min-width:0; padding:9px 10px; color:var(--paper); background:#242729; border:2px solid #4c4e4d; cursor:pointer; text-align:left; }
.fft-process-modes button small { grid-row:1 / 3; align-self:center; color:#9a9b95; font:900 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-process-modes button b { overflow:hidden; font:900 .56rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
.fft-process-modes button span { margin-top:4px; color:#aaa9a2; font:800 .43rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-process-modes button:hover,.fft-process-modes button.is-active { color:var(--ink); background:#f4dc18; border-color:#f4dc18; }
.fft-process-modes button.is-active small { color:#ed321f; }
.fft-process-modes button.is-active span { color:rgba(17,19,22,.62); }
.fft-process-flow { display:grid; grid-template-columns:1fr 48px 1fr 48px 1fr; margin-top:8px; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.fft-process-flow p { min-width:0; margin:0; padding:8px 9px; background:var(--paper); border-top:5px solid #ed321f; }
.fft-process-flow p:nth-of-type(2) { border-color:#f4dc18; }
.fft-process-flow p:nth-of-type(3) { border-color:#2f59c5; }
.fft-process-flow small,.fft-process-flow b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fft-process-flow small { color:#777268; font-size:.4rem; font-weight:900; letter-spacing:.07em; }
.fft-process-flow b { margin-top:4px; font-size:.57rem; }
.fft-process-flow > i { display:grid; place-items:center; color:var(--ink); background:#f4dc18; font:900 .45rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; }
.fft-process-audio { display:grid; grid-template-columns:145px 1fr; gap:7px; margin-top:8px; }
.fft-process-audio > button { min-height:46px; }
#fftProcessABToggle { color:var(--paper); background:#2f59c5; border:3px solid #2f59c5; cursor:pointer; font:900 .5rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.035em; }
#fftProcessABToggle[aria-pressed="false"] { color:var(--ink); background:var(--paper); border-color:var(--paper); }
.fft-process-audio .demo-sound { margin:0; }
.chapter-fft-process.is-performing .demo-head b { animation:ensemblePulse .42s ease-in-out infinite alternate; }

.chapter::after { content:""; position:absolute; z-index:0; left:-3vw; top:50%; width:min(48vw,720px); aspect-ratio:1; transform:translateY(-50%); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:var(--panel-shape); }
.chapter-mic::after,.chapter-voltage::after { clip-path:circle(48%); }
.chapter-digital::after,.chapter-speaker::after { clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%); }
.chapter-winding::after { clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%); }
.chapter-fft-process::after { clip-path:circle(48%); }
.chapter > * { position:relative; z-index:1; }
.chapter h2 { font-size:clamp(2.8rem,5vw,6.1rem); letter-spacing:-.065em; }
.chapter-intro { color:currentColor; font-weight:600; opacity:.74; }
.chapter-kicker span { border:2px solid currentColor; font-family:Arial,sans-serif; }
.equation { color:var(--paper); background:var(--ink); border-left:14px solid var(--panel-accent); box-shadow:7px 7px 0 var(--panel-shape); font-family:Georgia,"Times New Roman",serif; }
.equation span { color:var(--panel-accent); }
.equation-caption { color:currentColor; opacity:.65; }.equation-caption b { color:currentColor; }
.term-list { border-color:currentColor; }.term-list p { color:currentColor; border-color:currentColor; font-weight:600; opacity:.75; }.term-list b { color:var(--panel-accent); font-family:"Arial Black",Arial,sans-serif; }
.chapter-note { color:currentColor; font-weight:650; opacity:.76; }.chapter-note::before { width:7px; background:var(--panel-accent); }.chapter-note span { color:var(--panel-accent); font-weight:900; }
.chapter-mic h2 { font-size:clamp(2.7rem,4.4vw,5.3rem); }
.chapter-mic .chapter-intro { margin:15px 0; max-width:570px; font-size:1rem; line-height:1.48; }
.mic-equation-stack { display:grid; grid-template-columns:1.2fr .9fr; align-items:stretch; gap:12px; }
.chapter-mic .mic-equation-stack .equation { display:grid; align-items:center; margin:0; padding:11px 13px; font-size:clamp(1rem,1.45vw,1.55rem); white-space:nowrap; }
.mic-lorentz-note { margin:15px 0 0; padding:9px 11px; color:var(--paper); background:rgba(17,19,22,.16); font:650 .65rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
.mic-lorentz-note b { margin-right:7px; color:var(--panel-accent); }
.mic-impact-list { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }
.mic-impact-list article { display:grid; grid-template-columns:112px 1fr; column-gap:13px; padding:10px 12px 11px; background:rgba(17,19,22,.12); border-top:4px solid var(--panel-accent); }
.mic-impact-list article > b,.mic-impact-list article > span { display:block; }
.mic-impact-list article > b { grid-row:1 / 3; color:var(--panel-accent); font:900 .8rem/1.1 "Arial Black",Arial,sans-serif; }
.mic-impact-list article > span { color:var(--paper); font:900 .55rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.035em; }
.mic-impact-list article p { margin:5px 0 0; font-size:.7rem; font-weight:650; line-height:1.4; opacity:.78; }
.mic-impact-list article strong { color:var(--paper); }
.domain-chain { color:currentColor; font-weight:800; }.domain-chain span:first-child,.domain-chain span:last-child { color:var(--panel-accent); }.domain-chain i { color:currentColor; opacity:.45; }

.demo-card { color:var(--paper); padding:16px; background:var(--ink); border:4px solid var(--ink); box-shadow:13px 13px 0 var(--panel-accent); }
.demo-card::before { display:none; }
.demo-head { color:var(--paper); font-weight:900; }.demo-head b { color:var(--panel-accent); font-weight:900; }
.demo-card canvas { background:var(--paper); border:3px solid var(--ink); }
.readout-row,.adc-stats { border:2px solid var(--paper); }
.readout-row div,.adc-stats p { border-color:rgba(245,238,216,.3); }
.readout-row small,.adc-stats small { color:#9e9b90; font-weight:800; }.readout-row strong,.adc-stats b { color:var(--panel-accent); font-family:"Arial Black",Arial,sans-serif; }
.control-grid label,.full-control { color:var(--paper); font-weight:800; text-transform:uppercase; }
input[type="range"] { height:6px; accent-color:var(--panel-accent); }
.demo-sound { color:var(--ink); background:var(--panel-accent); border:3px solid var(--panel-accent); font-weight:900; text-transform:uppercase; }
.demo-sound:hover { color:var(--paper); background:transparent; }
.component-controls label { color:var(--paper); font-weight:800; }.component-controls label b { color:var(--paper); }
.legend { color:var(--paper); font-weight:800; }.meter-labels { color:var(--paper); font-weight:800; }

@media (max-height:900px) and (min-width:821px) {
  .adc-interstitial { padding:91px 6vw 22px; }
  .adc-popover { padding:24px 28px 23px; }
  .adc-popover-kicker { margin-bottom:12px; }
  .adc-popover h2 { font-size:clamp(2.7rem,4.25vw,4.6rem); }
  .adc-popover-intro { margin:13px 0 14px; font-size:.9rem; }
  .adc-handoff-signal { padding-top:9px; padding-bottom:7px; }
  .adc-handoff-signal svg { height:62px; }
  .adc-machine strong { font-size:2.25rem; }
  .adc-two-jobs { margin-top:9px; }
  .adc-two-jobs p { padding:9px 11px; }
  .adc-next { margin-top:9px; padding:10px 13px; }
  .pcm-interstitial { padding:91px 6vw 22px; }
  .pcm-card { padding:22px 27px 21px; }
  .pcm-title-row { gap:24px; }
  .pcm-card h2 { font-size:clamp(2.55rem,4vw,4.4rem); }
  .pcm-clock-line { margin-top:13px; }
  .pcm-meta-grid,.pcm-choice,.pcm-next { margin-top:7px; }
  .pcm-choice article { padding-top:8px; padding-bottom:8px; }
  .transmission-interstitial { padding:89px 5vw 20px; }
  .tx-card { padding:20px 25px 19px; }
  .tx-title-row { gap:24px; }
  .tx-card h2 { font-size:clamp(2.35rem,3.65vw,4rem); }
  .tx-route { margin-top:11px; }
  .tx-reconstruction,.tx-actions { margin-top:7px; }
  .tx-stage { padding-top:8px; padding-bottom:7px; }
  .tx-stage svg { height:45px; }
  .receiver-flow section { min-height:70px; padding-top:7px; padding-bottom:7px; }
  .listener-copy-scene { height:170px; margin-top:14px; }
  .chapter { padding-top:88px; padding-bottom:28px; }
  .chapter-digital .chapter-intro { margin:11px 0; font-size:.88rem; }
  .curve-comparison article { padding:9px 10px; }
  .curve-comparison b { margin-top:4px; font-size:.7rem; }
  .curve-comparison p { margin:4px 0 6px; font-size:.6rem; }
  .curve-comparison code { padding:4px 6px; font-size:.5rem; }
  .nyquist-intuition { grid-template-columns:60px 1fr; margin-top:7px; padding:7px 9px; }
  .nyquist-intuition b { font-size:.65rem; }
  .nyquist-intuition p { font-size:.56rem; }
  .twinkle-rule { margin-top:7px; padding:8px 10px; }
  .twinkle-rule b { font-size:.68rem; }
  .twinkle-rule p { font-size:.58rem; }
  .chapter h2 { font-size:clamp(2.6rem,4.25vw,5rem); }
  .chapter.chapter-digital h2 { font-size:clamp(2.25rem,3.5vw,3.9rem); }
  .chapter-mic h2 { font-size:clamp(2.4rem,3.7vw,4.4rem); }
  .chapter-mic .chapter-intro { margin:10px 0; line-height:1.4; }
  .mic-lorentz-note { margin-top:10px; padding:7px 9px; }
  .mic-impact-list article { padding:8px 9px 9px; }
  .mic-impact-list article p { margin-top:4px; font-size:.66rem; }
  .chapter-intro { margin:18px 0; font-size:1rem; }
  .equation { margin:17px 0 13px; padding:11px 16px; }
  .equation-caption { margin-bottom:15px; }
  .term-list { margin-top:13px; }
  .term-list p { padding:6px 0; }
  .chapter-note { margin-top:15px; }
  .demo-card canvas { height:300px; }
  .demo-adc #adcCanvas { height:255px; }
  .demo-mic #micCanvas { height:250px; }
  .control-grid { margin-top:13px; }
  .demo-sound { margin-top:13px; padding:10px; }
  .readout-row div,.adc-stats p { padding:9px 11px; }
}

/* Section 02 — a short note sequence becomes one piecewise pressure waveform. */
.tune-equation { font-size:clamp(1.18rem,1.85vw,1.72rem); }
.melody-live-visual { display:grid; grid-template-columns:.47fr .53fr; gap:8px; height:300px; }
.melody-character-stage { position:relative; min-width:0; overflow:hidden; isolation:isolate; background:#ed321f; border:3px solid var(--ink); }
.melody-character-stage::before { position:absolute; z-index:0; width:94%; aspect-ratio:1; top:50%; left:43%; border-radius:50%; background:#f4dc18; content:""; transform:translate(-50%,-50%); }
#melodyShrewStage { position:absolute; z-index:2; top:-13%; left:-13%; display:block; width:126%; height:126%; overflow:visible; }
.melody-character-label { position:absolute; z-index:5; top:9px; left:9px; display:flex; font:900 .48rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; }
.melody-character-label span,.melody-character-label b { padding:7px 8px; }
.melody-character-label span { color:var(--paper); background:var(--ink); }
.melody-character-label b { color:var(--ink); background:#f4dc18; }
#melodyShrewPose { transform-origin:500px 860px; transition:transform 150ms steps(3,end); }
#melodyShrewCharacter { transform-origin:500px 860px; animation:sourceIdleBob 1.8s steps(4,end) infinite; }
#melodyShrewImage { pointer-events:none; }
#melodyShrewMouth { fill:#148b8c; transform-origin:635px 357px; }
#melodyShrewEye { fill:#111316; transform-origin:515px 330px; }
.melody-sound-wave { fill:none; stroke-width:22px; stroke-linecap:square; opacity:.14; transform-origin:710px 265px; }
.melody-sound-wave.wave-yellow { stroke:#f4dc18; }
.melody-sound-wave.wave-teal { stroke:#148b8c; }
.melody-sound-wave.wave-cream { stroke:#f5eed8; }
.melody-live-visual #airCanvas { width:100%; height:100%; }
.chapter-air.is-performing #melodyShrewCharacter { animation:sourceSingBob .54s steps(4,end) infinite; }
.chapter-air.is-performing #melodyShrewMouth { animation:sourceMouth .2s steps(2,end) infinite alternate; }
.chapter-air.is-performing .melody-sound-wave { animation:sourceWavePulse .58s cubic-bezier(.15,.65,.35,1) infinite; }
.chapter-air.is-performing .melody-sound-wave:nth-child(2) { animation-delay:85ms; }
.chapter-air.is-performing .melody-sound-wave:nth-child(3) { animation-delay:170ms; }
.melody-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:11px; }
.melody-strip button { min-width:0; padding:8px 3px 7px; color:var(--paper); background:transparent; border:2px solid rgba(245,238,216,.3); cursor:pointer; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center; transition:background 90ms,color 90ms,transform 90ms; }
.melody-strip button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--panel-accent); }
.melody-strip button.is-current { color:var(--ink); background:var(--panel-accent); border-color:var(--panel-accent); }
.melody-strip button:disabled { cursor:default; }
.melody-strip small,.melody-strip b { display:block; }
.melody-strip small { margin-bottom:2px; opacity:.55; font-size:.43rem; letter-spacing:.08em; }
.melody-strip b { font-size:.7rem; }
.demo-sound:disabled { cursor:wait; opacity:.7; }

@media (max-width:700px) {
  .melody-live-visual { grid-template-columns:1fr; height:auto; }
  .melody-character-stage { height:260px; }
  .melody-live-visual #airCanvas { height:220px; }
}

/* Section 01 — Signal Shrew is the physical source and the waveform is its trace. */
.source-copy h1 { max-width:680px; font-size:clamp(3.6rem,5.75vw,6.8rem); line-height:.86; }
.source-copy .hero-lede { max-width:590px; margin-top:22px; }
.source-caption { margin:20px 0 0 5px; color:var(--ink); font:800 .57rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.07em; text-transform:uppercase; }
.source-caption span { display:inline-block; margin-right:10px; padding:6px 8px; color:var(--paper); background:var(--ink); }

.source-keyboard { max-width:650px; margin:22px 0 0 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.source-readouts { display:grid; grid-template-columns:repeat(3,1fr); color:var(--paper); background:var(--ink); border:3px solid var(--ink); box-shadow:6px 6px 0 #f4dc18; }
.source-readouts div { min-width:0; padding:10px 12px; border-right:2px solid rgba(245,238,216,.28); }
.source-readouts div:last-child { border-right:0; }
.source-readouts small,.source-readouts strong { display:block; }
.source-readouts small { color:#a8a59b; font-size:.48rem; font-weight:900; letter-spacing:.08em; }
.source-readouts strong { margin-top:3px; color:#f4dc18; font-family:"Arial Black",Arial,sans-serif; font-size:.88rem; }
.source-key-groups { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.source-key-group { display:grid; grid-template-columns:minmax(86px,1fr) 62px 62px; align-items:center; gap:7px; padding:8px; color:var(--paper); background:var(--ink); border:3px solid var(--ink); }
.source-key-group > span { padding-left:5px; font-size:.53rem; font-weight:900; letter-spacing:.1em; }
.source-key { min-width:0; height:50px; padding:4px; color:var(--ink); background:#f4dc18; border:3px solid var(--ink); box-shadow:3px 3px 0 #2f59c5; cursor:pointer; font:900 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; transition:transform 70ms,box-shadow 70ms,background 70ms; touch-action:none; user-select:none; }
.source-key kbd,.source-key small { display:block; font:inherit; }
.source-key kbd { font-family:"Arial Black",Arial,sans-serif; font-size:1rem; }
.source-key small { margin-top:4px; font-size:.42rem; letter-spacing:.06em; }
.source-key.is-pressed { color:var(--paper); background:#2f59c5; box-shadow:1px 1px 0 var(--ink); transform:translate(3px,3px); }
.source-space-key { grid-column:1 / -1; display:grid; grid-template-columns:105px 1fr; align-items:center; width:100%; height:52px; padding:5px 12px; color:var(--paper); background:var(--ink); border:3px solid var(--ink); box-shadow:6px 6px 0 #f4dc18; text-align:left; }
.source-space-key kbd { display:grid; height:32px; place-items:center; color:var(--ink); background:var(--paper); font-size:.68rem; }
.source-space-key span { padding-left:16px; font-size:.65rem; letter-spacing:.11em; }
.source-space-key.is-pressed { color:var(--ink); background:#f4dc18; }

.melody-readouts { grid-template-columns:repeat(4,1fr); }
.melody-key-controls,.mic-key-controls,.speaker-key-controls { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.mic-emf-meter { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:12px; margin-top:12px; color:var(--paper); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.mic-emf-meter span { display:grid; gap:5px; }
.mic-emf-meter small { color:#aaa79d; font-size:.47rem; font-weight:900; letter-spacing:.08em; }
.mic-emf-meter i { display:block; height:8px; overflow:hidden; background:rgba(245,238,216,.18); border:1px solid rgba(245,238,216,.38); }
.mic-emf-meter i b { display:block; width:100%; height:100%; background:var(--panel-accent); transform:scaleX(0); transform-origin:left center; transition:transform 45ms linear; }
.mic-emf-meter span:last-child i b { background:#ed321f; }
.mic-emf-meter strong { padding-bottom:2px; color:var(--panel-accent); font-size:.62rem; letter-spacing:.06em; }
.melody-key-group { display:grid; grid-template-columns:minmax(82px,1fr) 54px 54px; align-items:center; gap:6px; padding:6px; color:var(--paper); border:2px solid rgba(245,238,216,.3); }
.melody-key-group > span { padding-left:4px; font-size:.48rem; font-weight:900; letter-spacing:.07em; }
.melody-key-group .source-key { height:42px; }
.mic-readouts { grid-template-columns:repeat(4,1fr); }

@media (max-width:700px) {
  .adc-interstitial { display:block; padding:84px 15px 30px; overflow-y:auto; }
  .adc-popover { padding:20px 18px; box-shadow:-7px 7px 0 #ed321f,7px -7px 0 #f4dc18; }
  .adc-popover-kicker { align-items:flex-start; margin-bottom:14px; font-size:.52rem; }
  .adc-popover h2 { font-size:clamp(2.35rem,11.5vw,3.2rem); }
  .adc-popover-intro { margin:15px 0; font-size:.85rem; }
  .adc-handoff { grid-template-columns:1fr; }
  .adc-handoff-signal svg { height:62px; }
  .adc-machine { min-height:86px; }
  .adc-machine i { left:50%; right:auto; transform:translateX(-50%) rotate(90deg); }
  .adc-machine .adc-arrow-in { top:-20px; bottom:auto; }
  .adc-machine .adc-arrow-out { top:auto; bottom:-20px; }
  .adc-two-jobs { grid-template-columns:1fr; }
  .adc-two-jobs p { grid-template-columns:1fr; gap:4px; }
  .curve-comparison { grid-template-columns:1fr; }
  .demo-adc #adcCanvas { height:260px; }
  .adc-code-path { grid-template-columns:repeat(2,1fr); }
  .adc-code-path > div:nth-child(2)::after { display:none; }
  .demo-adc .adc-stats { grid-template-columns:repeat(2,1fr); }
  .adc-key-controls { grid-template-columns:1fr; }
  .demo-adc .control-grid label { grid-template-columns:1fr; gap:7px; }
  .pcm-interstitial { display:block; padding:84px 15px 30px; overflow-y:auto; }
  .pcm-card { padding:20px 18px; box-shadow:-7px 7px 0 #ed321f,7px -7px 0 #f4dc18; }
  .pcm-title-row,.pcm-clock-line { grid-template-columns:1fr; gap:14px; }
  .pcm-card h2 { font-size:clamp(2.35rem,11.5vw,3.2rem); }
  .pcm-intro { font-size:.84rem; }
  .pcm-clock-line { margin-top:16px; }
  .pcm-clock { min-height:86px; }
  .pcm-word-track { overflow-x:auto; padding-bottom:4px; }
  .pcm-word-track code { flex:0 0 auto; min-width:max-content; }
  .pcm-meta-grid { grid-template-columns:repeat(2,1fr); }
  .pcm-meta-grid p:nth-child(2) { border-right:0; }
  .pcm-meta-grid p:nth-child(-n+2) { border-bottom:2px solid rgba(17,19,22,.25); }
  .pcm-choice { grid-template-columns:1fr; }
  .pcm-choice > i { min-height:36px; }
  .pcm-next { line-height:1.35; }
  .transmission-interstitial { display:block; padding:84px 15px 30px; overflow-y:auto; }
  .tx-card { padding:20px 18px; box-shadow:-7px 7px 0 #ed321f,7px -7px 0 #f4dc18; }
  .tx-title-row { grid-template-columns:1fr; gap:14px; }
  .tx-card h2 { font-size:clamp(2.3rem,11vw,3.15rem); }
  .tx-intro { font-size:.84rem; }
  .tx-route { grid-template-columns:1fr; margin-top:16px; }
  .tx-link { min-height:94px; }
  .tx-reconstruction { grid-template-columns:1fr; }
  .tx-stage-arrow { min-height:34px; }
  .tx-stage svg { height:62px; }
  .tx-actions { grid-template-columns:1fr; }
  .tx-actions button { min-height:48px; }
  .receiver-flow section { grid-template-columns:1fr; gap:7px; padding:11px; }
  .receiver-flow section > small { grid-column:1; grid-row:auto; }
  .receiver-flow section > div,.receiver-flow section > b,.receiver-flow section > p { grid-column:1; }
  .receiver-word-builder { flex-wrap:wrap; }
  .receiver-word-builder i { flex-basis:19px; height:22px; }
  .dac-code-readout { grid-template-columns:1fr 22px 1fr 22px 1fr; }
  .dac-code-readout p { padding-right:6px; padding-left:6px; }
  .dac-code-readout b { font-size:.58rem; }
  .demo-speaker #speakerCanvas { height:270px; }
  .listener-copy-scene { height:230px; }
  .melody-readouts { grid-template-columns:repeat(2,1fr); }
  .mic-readouts { grid-template-columns:repeat(2,1fr); }
  .melody-key-controls,.mic-key-controls,.speaker-key-controls { grid-template-columns:1fr; }
  .mic-emf-meter { grid-template-columns:1fr; align-items:stretch; }
  .mic-emf-meter strong { text-align:center; }
  .mic-equation-stack,.mic-impact-list { grid-template-columns:1fr; }
  .chapter-mic .mic-equation-stack .equation { white-space:normal; }
  .mic-impact-list article { grid-template-columns:1fr; }
  .mic-impact-list article > b { grid-row:auto; margin-bottom:7px; }
}

.shrew-source-stage { width:min(46vw,700px); height:min(78vh,720px); aspect-ratio:auto; overflow:visible; }
.shrew-source-stage::before { display:block; inset:1% 3% 23%; clip-path:circle(46%); background:#f4dc18; }
.shrew-source-stage::after { display:none; }
#sourceShrewStage { position:absolute; z-index:2; top:-5%; left:-2%; display:block; width:104%; height:83%; overflow:visible; }
.source-accent-triangle { fill:#2f59c5; }
.source-snout-backdrop { fill:#2f59c5; opacity:.96; }
.source-ground-shadow { fill:rgba(17,19,22,.16); }
#sourceShrewPose { transform-origin:500px 860px; transition:transform 180ms steps(3,end); }
#sourceShrewCharacter { transform-origin:500px 860px; animation:sourceIdleBob 1.8s steps(4,end) infinite; }
#sourceShrewImage { pointer-events:none; }
#sourceShrewMouth { fill:#148b8c; transform-origin:635px 357px; }
#sourceShrewEye { fill:#111316; transform-origin:515px 330px; }
.source-sound-wave { fill:none; stroke-width:22px; stroke-linecap:square; opacity:.14; transform-origin:710px 265px; }
.source-sound-wave.wave-yellow { stroke:#f4dc18; }
.source-sound-wave.wave-teal { stroke:#148b8c; }
.source-sound-wave.wave-cream { stroke:#f5eed8; }

.source-performance-label { position:absolute; z-index:6; top:1.5%; left:2%; display:flex; align-items:center; font:900 .58rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.source-performance-label span { min-width:74px; padding:8px 10px; color:var(--paper); background:var(--ink); text-align:center; }
.source-performance-label b { padding:8px 10px; color:var(--ink); background:#f4dc18; }
.source-wave-card { position:absolute; z-index:5; right:1%; bottom:1%; left:1%; padding:10px; color:var(--paper); background:var(--ink); border:3px solid var(--ink); box-shadow:8px 8px 0 rgba(17,19,22,.26); }
.source-wave-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 8px; font:900 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.source-wave-head b { color:#f4dc18; }
#sourceWaveCanvas { display:block; width:100%; height:112px; background:var(--paper); border:3px solid var(--ink); }
.hero.is-singing #sourceShrewCharacter { animation:sourceSingBob .54s steps(4,end) infinite; }
.hero.is-singing #sourceShrewMouth { animation:sourceMouth .2s steps(2,end) infinite alternate; }
.hero.is-singing .source-sound-wave { animation:sourceWavePulse .58s cubic-bezier(.15,.65,.35,1) infinite; }
.hero.is-singing .source-sound-wave:nth-child(2) { animation-delay:85ms; }
.hero.is-singing .source-sound-wave:nth-child(3) { animation-delay:170ms; }

@keyframes sourceIdleBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes sourceSingBob { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.022)} }
@keyframes sourceMouth { to { transform:scale(1.08,1.35); } }
@keyframes sourceWavePulse { 0%{opacity:0;transform:scale(.76)} 28%{opacity:.82} 100%{opacity:0;transform:scale(1.2)} }

@media (max-height:900px) and (min-width:821px) {
  .source-copy h1 { font-size:clamp(3.35rem,5.2vw,5.9rem); }
  .source-copy .hero-lede { margin-top:16px; font-size:1rem; }
  .source-keyboard { margin-top:16px; }
  .source-readouts div { padding:8px 10px; }
  .source-key-group { padding:6px; }
  .source-key { height:44px; }
  .source-space-key { height:46px; }
  .source-caption { margin-top:15px; }
  .shrew-source-stage { height:min(73vh,650px); }
  #sourceWaveCanvas { height:94px; }
}

@media (max-width:820px) {
  .hero { display:flex; flex-direction:column; align-items:stretch; overflow-y:auto; padding-top:104px; }
  .source-copy { z-index:4; width:100%; }
  .source-copy h1 { max-width:560px; font-size:clamp(3.3rem,11vw,5.4rem); }
  .source-copy .hero-lede { max-width:620px; }
  .source-keyboard { max-width:none; }
  .shrew-source-stage { position:relative; right:auto; order:-1; width:min(76vw,620px); height:54vh; min-height:440px; margin:-40px auto -55px; opacity:1; }
  .shrew-source-stage::before { inset:5% 5% 25%; }
  #sourceWaveCanvas { height:92px; }
  .scroll-cue { display:none; }
}

@media (max-width:600px) {
  .hero { padding:88px 18px 45px; }
  .source-copy { min-width:0; }
  .source-copy h1 { max-width:100%; font-size:clamp(2.7rem,12vw,3rem); letter-spacing:-.075em; }
  .shrew-source-stage { width:100%; height:410px; min-height:410px; margin:-45px auto -45px; }
  .source-performance-label { top:4%; }
  .source-keyboard { margin-left:0; }
  .source-readouts { grid-template-columns:1fr; }
  .source-readouts div { display:grid; grid-template-columns:1fr auto; align-items:center; border-right:0; border-bottom:1px solid rgba(245,238,216,.28); }
  .source-readouts div:last-child { border-bottom:0; }
  .source-readouts strong { margin-top:0; }
  .source-key-groups { grid-template-columns:1fr; }
  .source-space-key { grid-column:1; }
  .source-caption { margin-left:0; }
  #sourceWaveCanvas { height:78px; }
}

@media (max-width:820px) {
  .ensemble-fft-transition { display:none; }
  .fft-definitions,.fft-use-list { grid-template-columns:1fr; }
  .chapter-ensemble .chapter-copy,.chapter-fft .chapter-copy { padding-bottom:42px; }
}

@media (max-width:600px) {
  .demo-ensemble #ensembleCanvas { height:390px; }
  .ensemble-voices { grid-template-columns:1fr 1fr; }
  .ensemble-sample-path { grid-template-columns:1fr 38px 1fr; }
  .ensemble-sample-path > i:nth-of-type(2) { display:none; }
  .ensemble-sample-path p:nth-of-type(3) { grid-column:1 / -1; margin-top:5px; }
  .demo-fft #fftCanvas { height:330px; }
  .fft-flow { grid-template-columns:1fr 60px 1fr; }
  .fft-result { grid-template-columns:1fr 106px; }
}