:root {
  color-scheme: light;
  --ink: #142a33;
  --muted: #627178;
  --paper: #f4f1e8;
  --cream: #fffdf6;
  --teal: #147d7a;
  --teal-dark: #0a5655;
  --coral: #ed654e;
  --coral-dark: #a33b2d;
  --yellow: #f6c64d;
  --blue: #4f8fb7;
  --line: #d9d6ca;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 1100px; min-height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--paper); }
button { color: inherit; font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 4px solid rgba(20,125,122,.3); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { width: min(1320px, calc(100% - 48px)); height: 100vh; margin: 0 auto; display: grid; grid-template-rows: minmax(0, 1fr) 190px; gap: 16px; padding: 18px 0 20px; }
.studio { position: relative; min-height: 0; overflow: hidden; border: 1px solid #d4d0c5; border-radius: 24px; background: var(--cream); box-shadow: 0 8px 0 #d9d4c7; }
.studio-topline { position: absolute; z-index: 10; inset: 18px 20px auto 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.studio-topline div { display: flex; align-items: baseline; gap: 10px; }
.studio-topline span { color: var(--teal-dark); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.studio-topline strong { font-size: 17px; }
.mute { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; box-shadow: 0 3px 0 #cbc7bd; pointer-events: auto; }
.mute svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.sound-off { display: none; }
.mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: block; }

.lab-bench { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 44%, #fff 0 24%, transparent 58%), linear-gradient(#fbfaf4 0 76%, #e8dfcc 76%); }
.lab-bench::after { position: absolute; left: 0; right: 0; bottom: 23%; height: 3px; content: ""; background: #d1c5ad; box-shadow: 0 8px 15px rgba(66,54,35,.12); }
#waveCanvas { position: absolute; z-index: 2; left: 4%; top: 17%; width: 92%; height: 58%; }
.measurement { position: absolute; z-index: 5; color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; opacity: 1; transition: opacity 150ms ease-out; pointer-events: none; }
.measurement b { color: var(--ink); font-size: 13px; }
.amplitude-measure { left: 8.5%; top: 31%; height: 120px; display: flex; align-items: center; gap: 10px; }
.amplitude-measure i { width: 16px; height: 100%; border-block: 2px solid var(--coral); background: linear-gradient(90deg, transparent 7px, var(--coral) 7px 9px, transparent 9px); }
.wavelength-measure { left: 37%; bottom: 19%; width: 250px; display: grid; justify-items: center; gap: 3px; color: var(--teal-dark); }
.wavelength-measure i { width: 100%; height: 13px; border-inline: 2px solid var(--teal); background: linear-gradient(var(--teal),var(--teal)) center/100% 2px no-repeat; }
.pulse-marker { position: absolute; z-index: 7; left: 9%; top: 28%; display: grid; justify-items: center; gap: 4px; color: var(--coral-dark); font-size: 9px; font-weight: 950; text-transform: uppercase; transition: left 1200ms linear; }
.pulse-marker i { width: 17px; height: 17px; border: 4px solid white; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--coral-dark); }
.pulse-marker.is-running { left: 83%; }
.target-wrap { position: absolute; z-index: 8; right: 34px; top: 72px; width: 330px; padding: 12px 14px 10px; border: 2px solid var(--ink); border-radius: 14px; background: white; box-shadow: 5px 5px 0 var(--ink); }
.target-wrap > span { display: block; color: var(--teal-dark); font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
#targetWave { display: block; width: 100%; height: 100px; overflow: visible; }
#targetWave path { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
#targetWave .target-shadow { stroke: rgba(20,42,51,.15); transform: translateY(4px); }
.evidence-card { position: absolute; z-index: 12; left: 50%; bottom: 34px; min-width: 350px; max-width: 650px; padding: 12px 20px; transform: translateX(-50%); border: 2px solid var(--teal-dark); border-radius: 12px; color: white; background: var(--teal); box-shadow: 0 5px 0 var(--teal-dark); text-align: center; font-size: 15px; font-weight: 850; }
.evidence-card strong { color: #fff3b8; }
.equation-strip { position: absolute; z-index: 9; left: 50%; top: 68px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 10px 22px; border: 1px solid #c8d7d5; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 4px 0 #d6dedb; }
.equation-strip div { min-width: 100px; text-align: center; }
.equation-strip span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.equation-strip strong { font-size: 19px; }
.equation-strip > b { color: var(--teal); font-size: 22px; }

.level-intro, .finale { position: absolute; z-index: 20; left: 50%; top: 50%; width: 520px; min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 46px; transform: translate(-50%,-50%); border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,246,.98); box-shadow: 0 14px 0 rgba(20,42,51,.1), 0 26px 65px rgba(20,42,51,.16); text-align: center; }
.level-intro::before, .finale::before { position: absolute; inset: 10px; content: ""; border: 2px dashed #d8d1c3; border-radius: 14px; pointer-events: none; }
.level-intro > span, .finale > span { z-index: 1; color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.level-intro h1, .finale h1 { z-index: 1; margin: 8px 0 10px; font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.level-intro p, .finale p { z-index: 1; max-width: 410px; margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.level-intro button, .finale button { z-index: 1; min-width: 230px; min-height: 54px; border: 2px solid var(--teal-dark); border-radius: 12px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-weight: 950; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.level-intro button:hover, .finale button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }
.finale { min-height: 390px; background: #fffdf4; }
.final-wave { z-index: 1; width: 190px; height: 75px; display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 8px; }
.final-wave i { width: 48px; height: 48px; border: 7px solid var(--coral); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-45deg); border-radius: 50%; animation: bob 800ms ease-in-out infinite alternate; }
.final-wave i:nth-child(2) { animation-delay: 160ms; border-color: var(--teal); border-left-color: transparent; border-bottom-color: transparent; }
.final-wave i:nth-child(3) { animation-delay: 320ms; }

.decision { min-height: 0; display: grid; grid-template-columns: minmax(290px,.7fr) minmax(0,1.8fr); align-items: center; gap: 26px; padding: 18px 22px 18px 28px; border: 1px solid #d4d0c5; border-radius: 20px; background: var(--cream); box-shadow: 0 6px 0 #d9d4c7; }
.decision-copy span { color: var(--coral-dark); font-size: 10px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.decision-copy h2 { margin: 4px 0 4px; font-size: 25px; line-height: 1.12; letter-spacing: -.025em; }
.decision-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.decision-actions { min-width: 0; display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.choice { min-height: 112px; flex: 1 1 0; display: grid; place-items: center; gap: 5px; padding: 12px 14px; border: 2px solid #d5d4cc; border-radius: 14px; background: white; text-align: center; transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out; }
.choice:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 5px 0 #c9dcda; }
.choice .icon { color: var(--coral); font-size: 31px; font-weight: 1000; line-height: 1; }
.choice strong { font-size: 16px; }
.choice small { color: var(--muted); font-size: 10px; font-weight: 750; }
.action-button { min-width: 320px; min-height: 90px; align-self: center; border: 3px solid var(--teal-dark); border-radius: 14px; color: white; background: var(--teal); box-shadow: 0 8px 0 var(--teal-dark); font-size: 22px; font-weight: 950; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.action-button:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--teal-dark); }
.action-button:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--teal-dark); }
.result-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.result-row p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }
.result-row p strong { display: block; color: var(--ink); font-size: 19px; }
.result-row button { min-width: 210px; min-height: 58px; border: 2px solid var(--coral-dark); border-radius: 12px; color: white; background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark); font-weight: 950; }
.match-choice { min-height: 118px; }
.match-choice b { color: var(--teal-dark); font-size: 12px; }
.is-pulsing { animation: pulse 520ms ease-out 3; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 12px rgba(246,198,77,.9)); transform: scale(1.035); } }
@keyframes bob { to { transform: rotate(-45deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }