/* Instrument surfaces: ink, electric blue, mint, violet, and amber. */
:root {
  --paper: #f5f6fa;
  --ink: #172035;
  --muted: #596579;
  --line: #dbe1ed;
  --blue: #374ce4;
  --navy: #121b31;
  --lime: #d7fa86;
  --mint: #8eecc5;
  --violet: #c3b3ff;
  --amber: #ffd389;
  --ease: cubic-bezier(.2,.8,.2,1);
}
button { transition: background .24s var(--ease), color .24s, border-color .24s, box-shadow .24s, transform .24s var(--ease); }
button:not(:disabled):active { transform: translateY(2px) scale(.975); }
button:disabled { cursor: not-allowed; }
.primary { background: linear-gradient(145deg,#4d60ed,#3043cf); box-shadow: 0 3px 0 #2232a2, 0 5px 12px #364bdb20; border-color: #4054df; border-radius: 9px; }
.primary:hover { background: #4a60ed; box-shadow: 0 4px 0 #2232a2, 0 8px 18px #364bdb30; }
.hero { background: radial-gradient(ellipse at 95% 105%,#7668f5 0,transparent 58%),linear-gradient(125deg,#2035b9,#354fe3 65%,#4564f1); box-shadow: 0 18px 38px -28px #2336ae90; border-radius: 12px; }
.hero:before { background-size: 36px 36px; mask-image: linear-gradient(145deg,transparent,#000); }
.hero h1 em { color: #defa93; }
.hero-bits { filter: drop-shadow(0 15px 12px #111b6140); }
.hero-bits span { border-radius: 8px; box-shadow: inset 0 1px #ffffff3b,0 4px #182b9d; }
.hero-bits .lit { box-shadow: inset 0 1px #fff9,0 4px #9bb95c; }
.round-link { transition: transform .3s var(--ease), background .3s; }
.round-link:hover { transform: translateY(4px); background: #ffffff18; }
.sidebar nav a { transition: color .2s, background .2s; border-radius: 4px 0 0 4px; }
.sidebar nav a.active { background: linear-gradient(90deg,transparent,#374ce409); }
.motion-toggle { margin-left:auto; border:1px solid var(--line); font-size:12px; white-space:nowrap; border-radius:30px; padding:7px 12px; color:var(--muted); background:transparent; }
.motion-toggle:before { content:'Ⅱ'; margin-right:6px; font-size:12px; }
.motion-toggle[aria-pressed=true]:before { content:'▷'; }
.chapter { --accent:var(--blue); }
#circuits { --accent:#16846e; }
#waves { --accent:#7250b6; }
#meaning { --accent:#a44776; }
.chapter .section-number { color:var(--accent); border-color:var(--accent); }
.experiment { padding:30px; border-radius:16px; border-color:#dce2ef; box-shadow:0 12px 32px -24px #1d31585e,inset 0 1px #fff; overflow:hidden; }
.lab-heading { padding-bottom:19px; margin-bottom:24px; border-bottom:1px solid #17203512; }
.lab-heading .eyebrow { font-size:11px; letter-spacing:1.5px; }
.lab-hint { font-size:12px; }
.lab-caption { font-size:14px; }
.teacher-note { border-radius:0 8px 8px 0; background:#ecf0f7; }
.teacher-note[open] { background:#e9eef8; }
.teacher-note summary { transition:color .2s; }
.teacher-note summary:hover { color:var(--blue); }
/* Each decimal place has a consistent tint in the wheel and its contribution. */
.place-0 { --place:#a18aec; --place-light:#efe9ff; --place-ink:#6644b9; }
.place-1 { --place:#65c6b4; --place-light:#e2f6ef; --place-ink:#176955; }
.place-2 { --place:#efa756; --place-light:#fff1d9; --place-ink:#8b5009; }
.place-3 { --place:#7399ec; --place-light:#e8efff; --place-ink:#345baa; }
.decimal-lab { background:linear-gradient(135deg,#fff,#f6f8fe); }
.decimal-columns { gap:14px; }
.decimal-col label { font-size:13px; font-weight:500; }
.decimal-col .power { color:var(--place-ink); font-size:19px; }
.digit-wheel { border:1px solid color-mix(in srgb,var(--place) 45%,white); background:var(--place-light); border-radius:13px; margin-top:13px; overflow:hidden; box-shadow:inset 0 1px white,0 4px 0 color-mix(in srgb,var(--place) 24%,white); }
.digit-adjustments { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid color-mix(in srgb,var(--place) 35%,white); background:#ffffff45; }
.digit-wheel button { border:0; border-radius:0; padding:0; min-height:42px; color:var(--place-ink); background:transparent; font:500 22px var(--display); }
.digit-wheel button+button { border-left:1px solid color-mix(in srgb,var(--place) 35%,white); }
.digit-wheel button:focus-visible { outline-offset:-4px; }
.digit-wheel button:hover { background:color-mix(in srgb,var(--place) 25%,transparent); }
.digit-wheel output { display:block; color:var(--place-ink); font:500 50px/1.2 var(--display); padding:14px 0 16px; cursor:default; }
.decimal-col small { color:var(--place-ink); font:500 14px var(--display); margin-top:16px; }
.place-composition { display:flex; height:7px; gap:3px; margin-top:27px; border-radius:8px; background:#e6eaf3; overflow:hidden; }
.place-composition span { background:var(--place); flex-basis:0; border-radius:5px; transition:flex-grow .6s var(--ease),opacity .3s; }
.decimal-lab .equation { border:0; padding:20px 0 0; margin:0; }
.equation>div { font:500 17px var(--display); display:flex; gap:7px; flex-wrap:wrap; justify-content:center; align-items:center; }
.equation>div>span:not(.operator) { color:var(--place-ink); background:var(--place-light); padding:5px 10px; border-radius:6px; }
.equation .operator { color:#8290a6; font-size:15px; }
.equation>strong { display:block; font:500 48px var(--display); letter-spacing:-2px; margin-top:14px; }
.equation .equals { color:#96a0b5; font-size:29px; vertical-align:middle; margin-right:7px; }
/* A four-key instrument, with a different light for each place. */
.binary-lab { background:radial-gradient(ellipse at 90% 0,#263351 0,transparent 65%),#10192c; border-color:#17233a; box-shadow:0 18px 40px -25px #10192c90,inset 0 1px #ffffff12; }
.binary-lab .lab-heading { border-color:#ffffff12; }
.binary-lab .eyebrow { color:#b2c3f4; }
.binary-layout { gap:27px; }
.bit-grid { gap:13px; }
.bit-label { margin-bottom:15px!important; }
.bit-col .bit-label strong { font-size:27px; font-weight:500; margin-top:4px; }
.bit { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:109px; border-radius:14px; background:linear-gradient(150deg,#29334a,#1b263d); color:#8392ac; border:1px solid #384660; box-shadow:inset 0 1px #ffffff12,0 5px 0 #090f1e,0 9px 14px #0003; font:500 53px var(--display); }
.bit i { width:18px; height:3px; border-radius:5px; background:#71809b55; margin-top:5px; transition:background .3s,box-shadow .3s; }
.bit:hover { background:#303d56; border-color:#627491; transform:translateY(-2px); }
.bit[aria-pressed=true] { background:linear-gradient(155deg,color-mix(in srgb,var(--place) 55%,white),var(--place)); color:#18203b; border-color:color-mix(in srgb,var(--place) 60%,white); box-shadow:inset 0 1px #ffffff99,0 5px 0 color-mix(in srgb,var(--place) 50%,#10192c),0 8px 28px color-mix(in srgb,var(--place) 20%,transparent); }
.bit[aria-pressed=true] i { background:#16233d; box-shadow:0 0 8px #ffffff65; }
.bit-col small { font-size:13px; margin-top:16px; color:#a6b4c9; }
.binary-result { padding-left:24px; border-color:#ffffff19; }
.binary-result output { color:#e2edff; font-size:82px; text-shadow:0 0 30px #94b6ff22; }
.binary-result p { font-size:16px; }
.binary-controls { gap:7px; margin-top:25px; }
.binary-controls button { min-height:38px; border-radius:7px; font-size:12px; padding:7px 10px; }
.binary-controls #binary-play { border-color:#a8bcef44; color:#d7e5ff; }
.binary-controls #binary-play[aria-pressed=true] { background:#334364; color:#fff; }
.number-track { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:4px; border-top:1px solid #ffffff13; padding-top:24px; margin-top:24px; }
.number-track button { min-width:0; padding:5px 0; border:0; border-radius:5px; background:#ffffff07; color:#98a8c2; font:12px var(--display); height:32px; }
.number-track button:hover { color:#fff; background:#ffffff15; }
.number-track button[aria-pressed=true] { color:#142138; background:#d7fa86; box-shadow:0 0 16px #d7fa8326; }
.binary-lab .lab-caption { min-height:48px; margin-bottom:0; }
.challenge { background:linear-gradient(110deg,#ecefff,#f5f2ff); border-radius:13px; border-color:#dce0f5; padding:27px; }
#target-number { display:inline-block; padding:3px 13px; margin:0 3px; border-radius:8px; color:#4f3dc4; background:#fff; box-shadow:0 3px 0 #d2cdec; }
.challenge h3 { margin-top:14px; }
.feedback.success { color:#176548; }
/* Circuit traces are diagram geometry, animated only while this chapter is visible. */
.circuit-lab { background:radial-gradient(ellipse at 80% 30%,#153f43,#12282f 65%); color:#e6f4f1; border-color:#1d4248; }
.circuit-lab .lab-heading { border-color:#ffffff12; }
.circuit-lab .eyebrow { color:#97e5d2; }
.circuit-lab .lab-hint,.circuit-lab .lab-caption,.circuit-output p { color:#a9c3c6; }
.circuit-layout { gap:12px; min-height:220px; }
.circuit-layout svg { background-image:radial-gradient(#8be7d112 .8px,transparent .8px); background-size:14px 14px; padding:12px 0; }
.circuit-layout svg .wire { stroke:#46606a; stroke-width:4; transition:stroke .4s; }
.circuit-layout svg .battery { stroke:#a5c2c6; }
.circuit-layout svg text { fill:#a9c3c6; font-size:11px; }
.circuit-layout svg circle { fill:#153139; stroke:#567b80; }
.switch-wire { transform-origin:190px 35px; transform:rotate(-28deg); transition:transform .4s var(--ease),stroke .3s!important; }
.circuit-layout.is-on .switch-wire { transform:rotate(0); }
.circuit-layout.is-on .wire { stroke:#66c5b2; }
.current-flow { fill:none; stroke:#b6ffe3; stroke-width:3; stroke-dasharray:2 20; stroke-linecap:round; opacity:0; transition:opacity .3s; animation:current 1.6s linear infinite paused; }
.circuit-layout.is-on .current-flow { opacity:1; }
#circuits.in-view .is-on .current-flow { animation-play-state:running; }
.circuit-layout svg #lamp-circle { fill:#16323b; stroke:#608287; transition:fill .35s,filter .4s,stroke .4s; }
.circuit-layout.is-on #lamp-circle { fill:#e7ffb5; stroke:#e7ffb5; filter:drop-shadow(0 0 12px #d7ff90aa); }
.bulb-filament { stroke:#739797; }
.circuit-layout.is-on .bulb-filament { stroke:#5c8148; }
.circuit-output .state-bit { color:#6c8e94; font-size:64px; transition:color .3s,text-shadow .3s; }
.is-on .state-bit { color:#d7ffae; text-shadow:0 0 30px #baff9933; }
.circuit-output .primary { background:#244952; border-color:#4b757e; box-shadow:0 3px 0 #091b21; color:#d6f4ed; }
.is-on .circuit-output .primary { background:#a4f0d4; border-color:#c8ffe8; color:#143c35; }
@keyframes current { to { stroke-dashoffset:-88; } }
/* A quantity you can see and feel as well as read. */
.units-lab { background:linear-gradient(140deg,#fff9ed,#fffcf6 55%,#fff); border-color:#eadfc9; }
.units-lab .eyebrow { color:#8b5b12; }
.range-label strong { font-size:36px; letter-spacing:-1.5px; }
.units-lab .range-label strong { color:#8b5b12; }
input[type=range] { --fill:0%; --track-ink:var(--blue); appearance:none; background:transparent; height:32px; margin:18px 0; }
input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:8px; background:linear-gradient(to right,var(--track-ink) 0%,var(--track-ink) var(--fill),#d8dfed var(--fill),#d8dfed 100%); }
input[type=range]::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:6px solid var(--track-ink); margin-top:-9px; box-shadow:0 3px 7px #15213e30; transition:box-shadow .2s,transform .2s; }
input[type=range]:hover::-webkit-slider-thumb { transform:scale(1.1); box-shadow:0 0 0 5px color-mix(in srgb,var(--track-ink) 12%,transparent),0 3px 7px #15213e20; }
input[type=range]::-moz-range-track { height:6px; border-radius:8px; background:#d8dfed; }
input[type=range]::-moz-range-progress { background:var(--track-ink); height:6px; }
input[type=range]::-moz-range-thumb { width:13px; height:13px; border:6px solid var(--track-ink); background:white; border-radius:50%; }
#movie-size { --track-ink:#bd7919; }
.data-blocks { display:grid; grid-template-columns:repeat(10,1fr); gap:7px; margin:8px 0 10px; }
.data-column { display:grid; grid-template-rows:repeat(8,7px) 20px; gap:4px; }
.data-column i { background:#e7dfcf; border-radius:2px; transition:background .2s var(--delay),transform .3s var(--ease) var(--delay),box-shadow .3s; transform:scale(.9); }
.data-column.filled i { background:#efb955; transform:scale(1); box-shadow:inset 0 1px #ffe5ad; }
.data-column:nth-child(even).filled i { background:#d9a03c; }
.data-column span { font:11px var(--display); text-align:center; color:#876d46; padding-top:5px; }
.data-key { font-size:12px; color:#816c4b; text-align:center; margin-top:5px; }
.conversion-flow { margin-top:25px; padding-top:18px; border-top:1px solid #af8f5b26; }
.conversion-flow strong { font-size:48px; color:#594024; }
.conversion-highlight { background:#f5d48a; border:1px solid #dabb7b; box-shadow:inset 0 1px #fff4d4,0 3px #e2c78f; border-radius:10px; }
.conversion-flow .conversion-highlight strong { color:#594024; }
/* The oscilloscope uses a fixed one-second horizontal scale. */
.wave-lab,.phase-lab { background:radial-gradient(ellipse at 15% 0,#332d54,#181c33 65%); color:#e8e6f7; border-color:#303450; }
.wave-lab .lab-heading,.phase-lab .lab-heading { border-color:#ffffff13; }
.wave-lab .eyebrow,.phase-lab .eyebrow { color:#cfb7ff; }
.wave-lab .lab-hint,.phase-lab .lab-hint,.wave-lab .lab-caption,.phase-lab .lab-caption { color:#b8b8d0; }
.wave-lab .range-label strong { color:#d3bfff; }
#frequency { --track-ink:#b79ce9; }
.wave-lab input::-webkit-slider-runnable-track,.meaning-lab input::-webkit-slider-runnable-track { background:linear-gradient(to right,var(--track-ink) 0%,var(--track-ink) var(--fill),#ffffff20 var(--fill),#ffffff20 100%); }
.wave-chart,.phase-chart { background-image:linear-gradient(#c6b8fc09 1px,transparent 1px),linear-gradient(90deg,#c6b8fc09 1px,transparent 1px); background-size:25px 25px; border-radius:6px; overflow:visible; }
.wave-axis { stroke:#9998ba44; }
.wave-chart text { fill:#b2b2ce; }
.wave-path { stroke:#c7b1ff; stroke-width:2.5; filter:drop-shadow(0 0 5px #b991ff55); }
#wave-scan { stroke:#eed4ff66; stroke-width:1; stroke-dasharray:3 4; }
#wave-dot { fill:#fff0b8; stroke:#282443; stroke-width:2; filter:drop-shadow(0 0 5px #ffe6aacc); }
.wave-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:22px; }
.wave-controls button,.transmission button { background:#ffffff0c; color:#e4dbff; border-color:#b29be94a; font-size:13px; border-radius:8px; }
.wave-controls button[aria-pressed=true] { background:#493b66; }
.wave-controls span { color:#b8b8d0; font-size:12px; }
.phase-bits { gap:10px; }
.phase-bits button { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 0; background:#1c3c48; border-color:#65d9cc55; color:#94eadc; border-radius:11px; box-shadow:0 3px 0 #0e1528; }
.phase-bits button small { font:10px var(--body); letter-spacing:1px; }
.phase-bits button>span { font-size:35px; line-height:1.2; }
.phase-bits button>i { font:12px var(--display); opacity:.8; }
.phase-bits button[aria-pressed=true] { background:#49365e; border-color:#ca9bea66; color:#e4beff; }
.phase-bits button.sending { border-color:#ffeda7; box-shadow:0 0 0 2px #ffeda722,0 0 20px #ffeda722; }
.phase-chart { margin-top:23px; }
#phase-scan { opacity:0; fill:#e5c0ff13; stroke:#d2acff44; transition:x .35s var(--ease),opacity .2s; }
#phase-scan.scanning { opacity:1; }
.transmission { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 0 2px; }
.transmission>div { display:flex; align-items:center; gap:14px; }
.transmission span { font-size:10px; letter-spacing:1px; color:#b8b8d0; }
.transmission output { font:500 24px var(--display); letter-spacing:4px; color:#ffeda7; white-space:nowrap; }
/* One editable byte, presented as the same data through three lenses. */
.meaning-lab { background:radial-gradient(ellipse at 90% 15%,#453044,#211d32 65%); border-color:#403449; }
.meaning-lab>.eyebrow { color:#d6b4cf; }
.meaning-byte { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; margin:25px 0 18px; letter-spacing:0; }
.meaning-byte button { display:flex; flex-direction:column; align-items:center; padding:9px 0; border:1px solid #9b6d9655; border-radius:8px; background:#ffffff07; color:#b194b3; box-shadow:0 3px 0 #100d1e; }
.meaning-byte button small { font:11px var(--body); opacity:.75; }
.meaning-byte button>span { font:500 34px var(--display); }
.meaning-byte button[aria-pressed=true] { color:#301f38; background:#e2b5d7; border-color:#f1d5ef; box-shadow:0 3px 0 #997b9b; }
.byte-slider { border-bottom:1px solid #ffffff14; padding:0 0 23px; margin-bottom:25px; }
.byte-slider label { display:flex; justify-content:space-between; gap:15px; font-size:13px; color:#c7b1c9; }
.byte-slider output { font-family:var(--display); }
#meaning-value { --track-ink:#e2b5d7; margin:9px 0; }
#meaning-reset { background:transparent; border:0; padding:4px 10px; font-size:12px; color:#d8c2df; border-radius:20px; }
#meaning-reset:hover { background:#ffffff0b; }
.interpret-buttons { background:#0d0b192e; padding:5px; border:1px solid #ffffff12; border-radius:11px; flex-wrap:nowrap; gap:3px; }
.interpret-buttons button { flex:1; border:0; border-radius:7px; padding:10px 7px; font-size:13px; color:#d5bfd5; }
.interpret-buttons button[aria-pressed=true] { background:#e3d2e9; color:#3b2345; box-shadow:0 3px 12px #0002; }
.meaning-result { border:0; margin:23px 0 0; padding:0; min-height:246px; }
.meaning-visual { border-radius:11px; min-height:147px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#f6e2f8; background:#ffffff06; border:1px solid #ffffff10; padding:14px; }
.meaning-result-label { font-size:10px; letter-spacing:1.8px; opacity:.75; }
.meaning-result strong { font:500 75px/1.1 var(--display); letter-spacing:-3px; padding-top:8px; }
.meaning-result strong.long-value { font-size:32px; letter-spacing:-1px; }
.meaning-result p { font-size:14px; color:#cbb9d1; line-height:1.8; margin-top:20px; }
/* Memory has a visible state, including when power disappears. */
.memory-lab { background:linear-gradient(150deg,#eff4ff,#fff); }
.journey { grid-template-columns:repeat(4,1fr); gap:11px; }
.journey button { background:#edf1f8; border:1px solid #d7dfef; border-radius:10px; padding:14px 10px 12px; font-size:13px; font-weight:600; box-shadow:0 3px #dfe6f3; }
.journey button>span { font-size:11px; letter-spacing:1px; }
.journey button[aria-pressed=true] { background:#3249d2; border-color:#6d80ec; box-shadow:0 3px #23379e,0 8px 17px #3249d233; }
.memory-cells { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:18px; }
.memory-cells i { height:8px; border-radius:2px; background:#c5cee0; transition:background .35s,opacity .5s calc(var(--cell) * 15ms); }
.has-data .memory-cells i { background:#7a9ada; }
.has-data[aria-pressed=true] .memory-cells i { background:#bccdff; }
.journey button:first-child.has-data .memory-cells i { background:#69bea6; }
.journey button:first-child[aria-pressed=true] .memory-cells i { background:#a6f2ce; }
.power-off .journey button:not(:first-child) .memory-cells i { opacity:.16; }
.power-off .journey button:not(:first-child) { color:#7a879b; background:#edf0f5; box-shadow:none; }
.power-off .journey button:first-child { border-color:#66b196; box-shadow:0 3px #d2e7df; background:#e8f5ed; }
.journey-controls { display:flex; align-items:center; gap:15px; justify-content:space-between; margin-top:23px; }
.journey-controls button { font-size:13px; padding:9px 13px; border-radius:8px; color:#3b54bb; }
.journey-controls span { font-size:12px; color:#657592; }
.journey-detail { min-height:190px; padding-top:30px; }
.journey-detail h3 { font-size:25px; }
.power-row { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:20px; border-color:#d5deed; }
.power-row button { border-radius:8px; background:#e9eef8; border-color:#cbd5e9; }
.power-row p { margin:0; font-size:13px; }
.power-row button[aria-pressed=true] { background:#14213b; }
/* Checks have a distinct, calm success state and a finite reward. */
.quiz { background:linear-gradient(140deg,#fff,#f5f7ff); border-top:3px solid #697be7; }
.quiz h3 { font-size:29px; line-height:1.35; margin:28px 0; }
.quiz-progress span { border-radius:10px; height:6px; width:25px; background:#e1e6f2; }
.quiz-progress .done { background:#6e80de; }
.quiz-options { gap:12px; }
.quiz-options button { border-radius:11px; padding:15px 17px; background:white; border-color:#dce2f0; box-shadow:0 3px #edf0f7; font-size:15px; }
.quiz-options button:hover:not(:disabled) { background:#f2f4ff; border-color:#b1bcf2; transform:translateX(3px); }
.quiz-options button>span { border-radius:6px; background:#edf0fa; color:#6272ac; padding:5px 10px; font-size:13px; }
.quiz-options button i { font:20px var(--display); margin-left:auto; font-style:normal; }
.quiz-options button.correct { background:#e5f6ed; border-color:#83c6a4; color:#18523d; box-shadow:0 3px #bfdcca; opacity:1; }
.quiz-options button.correct>span { color:#18523d; background:#c7ebd8; }
.quiz-options button.incorrect { background:#fff5e8; border-color:#e6c58e; box-shadow:0 3px #f3e3c7; color:#775329; }
.quiz.answered .quiz-options button:not(.correct) { opacity:.55; box-shadow:none; }
.quiz-feedback { margin-top:19px; padding:16px 18px; border-radius:10px; background:#fff4e1; color:#75562e; font-size:14px; }
.quiz-feedback.is-correct { background:#e3f2ea; color:#205d43; }
.quiz-feedback:empty { margin:0; padding:0; }
.quiz .complete-mark { width:146px; height:146px; margin:25px auto; padding:10px; border-radius:50%; background:conic-gradient(#7b9fdf var(--score),#e2e8f3 0); display:grid; place-items:center; }
.complete-mark>span { display:flex; align-items:baseline; justify-content:center; gap:4px; width:126px; height:126px; padding-top:26px; border-radius:50%; background:#fafbff; font:500 48px var(--display); color:#435caa; }
.complete-mark small { font-size:23px; color:#8492b5; }
/* Phone layouts keep every key accessible without horizontal scrolling. */
@media(max-width:1100px) {
  .experiment { padding:24px; }
  .bit { height:92px; font-size:45px; border-radius:11px; }
  .binary-layout { grid-template-columns:minmax(0,1fr) 115px; gap:20px; }
  .binary-result { padding-left:16px; }
  .binary-result output { font-size:67px; }
  .journey { grid-template-columns:repeat(2,1fr); }
  .journey button { padding:15px; }
  .memory-cells { margin-top:12px; }
  .memory-cells i { height:7px; }
  .power-row { grid-template-columns:1fr; gap:13px; }
  .power-row button { justify-self:start; }
}
@media(max-width:800px) {
  .binary-layout { grid-template-columns:minmax(0,1fr) 145px; }
  .binary-result output { font-size:80px; }
  .journey { grid-template-columns:repeat(4,1fr); }
  .lesson-intro { flex-wrap:wrap; }
}
@media(max-width:560px) {
  .experiment { padding:23px 18px; border-radius:13px; }
  .lab-heading { align-items:start; gap:16px; }
  .lab-hint { max-width:130px; text-align:right; font-size:11px; }
  .lab-heading .eyebrow { font-size:10px; }
  .decimal-columns { gap:8px; }
  .decimal-col label { font-size:11px; }
  .decimal-col .power { font-size:17px; }
  .digit-wheel output { font-size:41px; }
  .digit-wheel button { min-height:42px; }
  .equation>div { gap:4px; font-size:14px; }
  .equation>div>span:not(.operator) { padding:4px 5px; }
  .equation>strong { font-size:43px; }
  .decimal-col small { font-size:12px; }
  .binary-layout { grid-template-columns:1fr; gap:22px; }
  .bit { height:91px; }
  .bit-grid { gap:10px; }
  .bit-col .bit-label strong { font-size:25px; }
  .binary-result { border:0; border-top:1px solid #ffffff15; padding:17px 0 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .binary-result output { font-size:61px; line-height:1; letter-spacing:-3px; }
  .binary-result p { max-width:100px; font-size:15px; text-align:right; }
  .binary-result>span { font-size:10px; }
  .number-track { grid-template-columns:repeat(8,1fr); padding-top:18px; margin-top:19px; gap:6px; }
  .number-track button { height:34px; font-size:13px; }
  .binary-controls { justify-content:center; gap:7px; }
  .binary-controls button { font-size:12px; }
  .binary-lab .lab-caption { min-height:72px; }
  .circuit-layout { grid-template-columns:1fr; }
  .circuit-output { display:flex; justify-content:center; align-items:center; gap:15px; flex-wrap:wrap; }
  .circuit-output .state-bit { font-size:52px; }
  .circuit-output p { flex-basis:100%; margin:0; }
  .data-blocks { gap:5px; }
  .data-column { grid-template-rows:repeat(8,6px) 20px; gap:3px; }
  .data-key { font-size:11px; }
  .conversion-flow div>span { font-size:9px; }
  .conversion-flow strong { font-size:38px; }
  .conversion-flow>span { font-size:10px; }
  .wave-controls { flex-direction:column; align-items:start; gap:11px; }
  .phase-bits { gap:7px; }
  .phase-bits button small { font-size:9px; letter-spacing:.3px; }
  .transmission { flex-wrap:wrap; }
  .transmission>div { gap:10px; }
  .transmission output { font-size:22px; letter-spacing:2px; }
  .meaning-byte { gap:4px; }
  .meaning-byte button { border-radius:6px; }
  .meaning-byte button>span { font-size:27px; }
  .meaning-byte button small { font-size:10px; }
  .interpret-buttons button { font-size:11px; padding:10px 3px; }
  .meaning-result { min-height:296px; }
  .meaning-result strong { font-size:66px; }
  .journey { grid-template-columns:repeat(2,1fr); }
  .journey-controls { flex-direction:column; align-items:start; gap:10px; }
  .journey-detail { min-height:225px; }
  .quiz h3 { font-size:23px; }
  .quiz-options button { padding:13px; gap:11px; font-size:14px; }
  .quiz-progress { gap:4px; }
  .quiz-progress span { width:19px; }
  .lesson-intro { gap:14px; }
  .motion-toggle { margin:0; font-size:11px; }
}
.motion-paused *, .motion-paused *:before, .motion-paused *:after { animation-play-state:paused!important; transition-duration:0s!important; }
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media print {
  .experiment { box-shadow:none; color:#000; background:#fff; }
  .experiment * { text-shadow:none!important; filter:none!important; }
  .motion-toggle,.wave-controls,.journey-controls,.transmission { display:none; }
}

html.motion-paused { scroll-behavior:auto!important; }

/* Compare symbol shaping with the ideal instantaneous phase reversal. */
.phase-model-controls { display:flex; gap:6px; margin-top:24px; flex-wrap:wrap; }
.phase-model-controls button { background:transparent; color:#bcb5d6; border-color:#8b7dad55; border-radius:7px; font-size:13px; padding:8px 13px; }
.phase-model-controls button[aria-pressed=true] { background:#443956; color:#f0e5ff; border-color:#ba9bda; }
#phase-reference { fill:none; stroke:#c6c0d44d; stroke-width:1.5; stroke-dasharray:4 5; }
#phase-transitions rect { fill:#e6beff0d; stroke:none; }
.phase-legend { display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:#c7bfd8; }
.phase-legend span:before { content:''; display:inline-block; width:18px; height:0; border-top:2px solid #c7b1ff; margin-right:8px; vertical-align:middle; }
.phase-legend span+span:before { border-top:2px dashed #ada5bd88; }
.phase-lab #phase-model-note { font-size:14px; color:#d2c9df; }