.sound-page { color: var(--paper); background: #090b10; }
html:has(.sound-page) { scroll-padding-top: 72px; }
.sound-page .site-header { position: sticky; top: 0; background: #090b10f5; }
.sound-page h1, .sound-page h2, .sound-page h3, .sound-page p, .sound-page figure { margin: 0; }
.sound-page h1, .sound-page h2 { font-family: var(--display); font-weight: 600; line-height: 1.05; }
.sound-page h2 { font-size: clamp(1.85rem,3vw,2.7rem); }
.sound-page em { color: #e9ba67; font-style: normal; }
.sound-page .primary-action { font: 600 .95rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; }
.sound-page .sound-eyebrow { color: #c4b4eb; font: .72rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.sound-page .sound-eyebrow span { margin: 0 .5em; }
.sound-intro, .sound-workshop { width: min(1180px,90%); margin: 0 auto; }
.sound-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 5%; padding: 38px 0 54px; }
.sound-intro h1 { font-size: clamp(3.2rem,5.3vw,5.2rem); letter-spacing: -.015em; }
.sound-intro p:not(.sound-eyebrow):not(.sound-small) { max-width: 510px; margin: 24px 0; color: #cdc6bc; font-size: 1.08rem; }
.sound-intro .primary-action { margin: 0; }
.sound-page .sound-small { color: #b1aba3; font-size: .8rem; margin-top: 15px; }
.sound-intro-art { height: 420px; overflow: hidden; position: relative; background: #040404; border: 1px solid #76614355; }
.sound-intro-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.sound-intro-art figcaption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: #090b10e8; color: #d4c1a5; font-size: .73rem; text-align: center; }
.sound-predict { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 0; border-top: 1px solid #ffffff26; scroll-margin-top: 76px; }
.sound-predict h2 { font-size: clamp(1.7rem,2.5vw,2.1rem); }
.sound-predict p:not(.sound-eyebrow) { margin-top: 8px; color: #bbb6b0; font-size: .9rem; }
.sound-choices { display: flex; gap: 10px; }
.sound-page button { cursor: pointer; border: 1px solid #ffffff35; background: #20212c; color: #f5f0e7; border-radius: 5px; min-height: 44px; padding: 9px 12px; font-size: .88rem; line-height: 1.4; }
.sound-page button:hover:not(:disabled) { border-color: #e9ba67; background: #30303b; }
.sound-page button:disabled { opacity: .45; cursor: not-allowed; }
.sound-page button[aria-pressed="true"] { border-color: #d9b173; background: #493823; color: #fff0d5; }
.sound-lab { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,1fr); border: 1px solid #a38a604d; background: #11121a; border-radius: 9px; overflow: clip; scroll-margin-top: 0; }
.sound-scene { min-width: 0; background: #030404; display: flex; flex-direction: column; justify-content: space-between; }
.sound-scene-top, .sound-scene-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-size: .75rem; color: #c6bda9; }
.sound-scene-top { border-bottom: 1px solid #ffffff15; }
#sound-state { color: #e8c183; }
.sound-scene-bottom { border-top: 1px solid #ffffff15; }
.sound-scene-bottom > :last-child { white-space: nowrap; color: #a2998c; }
.sound-viewport { height: clamp(300px,54svh,470px); position: relative; min-height: 0; }
#sound-canvas, .sound-fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
#sound-canvas { position: absolute; inset: 0; visibility: hidden; }
.sound-fallback { object-fit: cover; object-position: center 47%; }
.sound-ready #sound-canvas { visibility: visible; }
.sound-ready .sound-fallback { visibility: hidden; }
.sound-console { padding: clamp(18px,2vw,28px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.sound-readout { min-height: 115px; }
.sound-readout .sound-eyebrow { margin-bottom: 7px; }
.sound-readout h2 { font: 600 1.4rem/1.2 var(--sans); margin-bottom: 8px; }
.sound-readout > p:last-child { color: #d1cbc3; font-size: .94rem; line-height: 1.5; }
.sound-mode-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.sound-mode-picker legend { margin-bottom: 7px; font-size: .8rem; color: #c9c1b5; }
.sound-mode-picker > div, .sound-transport, .sound-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sound-mode-picker button { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.sound-mode-picker strong { font-size: 1.18rem; font-weight: 500; }
.sound-mode-picker small { font-size: .7rem; }
.sound-mode-picker button > span { color: #d0c6b7; font-size: .75rem; }
.sound-page .sound-primary { color: #201707; background: #ecc278; border-color: #ecc278; font-weight: 600; }
.sound-page .sound-primary:hover:not(:disabled) { background: #ffe0a6; }
.sound-primary > :first-child { margin-right: 7px; }
.sound-page .sound-result { min-height: 58px; padding: 10px 12px; border-left: 2px solid #8970b1; background: #24202f; font-size: .82rem; line-height: 1.5; color: #e2d8f5; }
.sound-page .sound-audio-note { color: #b8b1a7; font-size: .72rem; line-height: 1.4; }
.sound-page .sound-model-note { grid-column: 1/-1; padding: 12px 18px; border-top: 1px solid #ffffff20; font-size: .74rem; line-height: 1.5; color: #bfb8ae; }
.sound-model-note a { color: #dec591; text-underline-offset: 3px; }
.sound-explanation { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6%; padding: 80px 0; }
.sound-explanation p:not(.sound-eyebrow), .sound-takeaway > p:not(.sound-eyebrow) { color: #cbc4bc; margin: 20px 0 14px; max-width: 650px; }
.sound-source { color: #c3b1eb; font-size: .8rem; text-underline-offset: 4px; }
.sound-cutaway { padding: 18px; border: 1px solid #ffffff24; background: #15141e; }
.sound-cutaway svg { width: 100%; display: block; }
.sound-cutaway text { font: 18px var(--sans); }
.sound-cutaway figcaption { color: #bdb2c6; font-size: .8rem; }
.wave-heading { display: flex; justify-content: space-between; color: #d8c0a0; font-size: .76rem; }
.sound-cutaway svg { margin: 12px 0; }
.sound-page .sound-cutaway figcaption > p { margin: 0; min-height: 3.2em; color: #ece1cd; font-size: .92rem; }
.sound-cutaway figcaption > span { display: block; font-size: .75rem; line-height: 1.5; margin-top: 8px; }
.wave-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.wave-controls button { min-height: 44px; }
.sound-cutaway { scroll-margin-top: 12px; }
.sound-takeaway { padding: 36px 0 44px; border-top: 1px solid #ffffff24; }
.sound-takeaway h2 { font-size: clamp(2.7rem,4vw,4rem); }
.sound-science { padding: 40px 0; scroll-margin-top: 76px; }
.sound-science h2 { font-size: 2rem; }
.sound-science-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 28px 0; }
.sound-science-grid h3 { font-size: 1rem; margin-bottom: 10px; font-weight: 500; color: #eed7ae; }
.sound-science-grid p { font-size: .87rem; color: #c2bcb5; }
.sound-science-grid a { color: #d5bcf1; }
.sound-page .sound-review { font-size: .8rem; color: #bfb6a8; }
.sound-next { margin: 28px 0 65px; padding: 30px; border: 1px solid #ffffff28; background: #161923; display: grid; grid-template-columns: 1fr 200px; gap: 30px; align-items: center; }
.sound-next p:not(.sound-eyebrow) { margin: 14px 0 22px; color: #c2bdba; }
.sound-next img { width: 100%; height: 240px; object-fit: cover; }
.sound-next .primary-action { margin: 0; }
.sound-noscript { margin-top: 20px; }
@media (min-width: 851px) and (max-height: 760px) {
  .sound-console { padding: 14px 20px; gap: 10px; }
  .sound-readout { min-height: 104px; }
  .sound-viewport { height: 350px; }
}
@media (max-width: 850px) {
  .sound-intro { padding: 30px 0; gap: 20px; }
  .sound-intro h1 { font-size: 3rem; }
  .sound-intro-art { height: 320px; }
  .sound-predict { display: block; }
  .sound-choices { margin-top: 18px; }
  .sound-lab { grid-template-columns: minmax(0,1fr); }
  .sound-viewport { height: min(38svh,330px); }
  .sound-console { padding: 16px; gap: 10px; }
  .sound-readout { order: 0; }
  .sound-transport { order: 1; }
  .sound-mode-picker { order: 2; }
  .sound-tools { order: 3; }
  .sound-result { order: 4; }
  .sound-audio-note { order: 5; }
  .sound-readout { min-height: 0; }
  .sound-readout .sound-eyebrow { display: none; }
  .sound-readout h2 { font-size: 1.16rem; margin-bottom: 5px; }
  .sound-readout > p:last-child { font-size: .86rem; }
  .sound-scene-top, .sound-scene-bottom { padding: 8px 12px; font-size: .68rem; }
  .sound-page .sound-result { min-height: 0; padding: 8px 10px; }
  .sound-model-note { padding: 10px 12px; }
  .sound-explanation { padding: 50px 0; }
  .sound-science-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .sound-intro { position: relative; display: block; padding: 25px 0 30px; }
  .sound-page .sound-intro-art { height: 190px; margin-top: 22px; }
  .sound-intro-art img { object-position: center 47%; }
  .sound-intro h1 { font-size: 3.1rem; }
  .sound-intro p:not(.sound-eyebrow):not(.sound-small) { font-size: .97rem; margin: 18px 0; }
  .sound-page .primary-action { padding: .85rem 1rem; min-height: 48px; gap: 14px; font-size: .9rem; }
  .sound-predict { padding: 24px 0; }
  .sound-choices { display: grid; grid-template-columns: 1fr 1fr; }
  .sound-page button { padding: 8px; font-size: .8rem; }
  .sound-mode-picker strong { font-size: 1.03rem; }
  .sound-mode-picker button > span { font-size: .69rem; }
  .sound-viewport { height: min(32svh,260px); }
  .sound-scene-bottom { display: none; }
  .sound-explanation { grid-template-columns: 1fr; gap: 26px; }
  .sound-cutaway text { font-size: 26px; }
  .sound-next { grid-template-columns: 1fr; padding: 22px; }
  .sound-next img { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sound-page { scroll-behavior: auto; } html:has(.sound-page) { scroll-behavior: auto; } }