:root {
  --font-scale: 1;
  --navy: #10233c;
  --navy-700: #1b3a63;
  --blue: #3d7fca;
  --blue-soft: #84b7ec;
  --orange: #ff6b35;
  --orange-dark: #c9451a;
  --green: #1e7e54;
  --red: #c0392b;
  --amber: #b06a00;
  --cream: #f7f1e7;
  --paper: #fffdf8;
  --ink: #10233c;
  --muted: #637285;
  --line: rgba(27, 58, 99, .16);
  --shadow: 0 18px 48px rgba(27, 58, 99, .13);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: Calibri, "Segoe UI", system-ui, Arial, sans-serif;
}

button,
select {
  font: inherit;
}

button,
select,
[tabindex] {
  outline-offset: 3px;
}

button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(255, 107, 53, .5);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--navy-700);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 58px;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(230px, 1.3fr) auto;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, .95);
}

.brand,
.top-tools,
.voice-tools,
.reading-tools {
  display: flex;
  align-items: center;
}

.brand {
  gap: 9px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid rgba(27, 58, 99, .22);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700) 0 58%, var(--orange) 58% 100%);
  color: #fff;
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-weight: 800;
}

.brand-copy,
.module-name {
  display: grid;
  min-width: 0;
}

.brand-copy strong,
.module-name strong {
  overflow: hidden;
  color: var(--navy-700);
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: calc(15px * var(--font-scale));
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy span,
.module-name span {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-name {
  justify-self: center;
  text-align: center;
}

.top-tools {
  justify-content: flex-end;
  gap: 8px;
}

.voice-tools,
.reading-tools {
  gap: 4px;
}

.tool-button,
.reading-tools button,
.speed-control select,
.source-button,
.close-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--navy-700);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
}

.tool-button {
  min-width: 94px;
  padding: 0 10px;
}

.reading-tools button {
  min-width: 34px;
  padding: 0 7px;
}

.reading-tools button[data-font-action="reset"] {
  min-width: 56px;
}

.speed-control select {
  padding: 0 6px;
}

.course-grid {
  display: grid;
  grid-template-columns: 162px minmax(0, 1fr);
  min-height: 0;
  gap: 10px;
  padding: 10px;
}

.stepper {
  display: grid;
  grid-template-rows: repeat(15, minmax(0, 1fr));
  min-height: 0;
  gap: 4px;
}

.step-button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 253, 248, .72);
  color: var(--muted);
  text-align: left;
}

.step-button span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.step-button strong {
  overflow: hidden;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-button.done {
  border-style: double;
  border-width: 3px;
  border-color: var(--green);
  color: var(--green);
}

.step-button.active {
  border: 2px solid var(--blue);
  background: #eaf2fb;
  color: var(--navy-700);
  box-shadow: 0 2px 10px rgba(61, 127, 202, .14);
}

.lesson {
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 66%);
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

.lesson-copy,
.visual-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.lesson-copy {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(14px, 2vw, 26px);
  border-radius: 22px 12px 12px 22px;
}

.kicker {
  margin: 0 0 7px;
  color: var(--orange-dark);
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lesson-copy h1,
.visual-heading h2,
.sources-dialog h2 {
  margin: 0;
  color: var(--navy-700);
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
}

.lesson-copy h1 {
  font-size: clamp(calc(24px * var(--font-scale)), 3.1vw, calc(40px * var(--font-scale)));
  line-height: 1.02;
  letter-spacing: -.015em;
}

.lesson-intro {
  margin: 12px 0 10px;
  color: var(--muted);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.42;
}

.lesson-detail {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.42;
}

.lesson-detail p,
.lesson-detail ul {
  margin: 0;
}

.lesson-detail ul {
  padding-left: 20px;
}

.lesson-detail li + li {
  margin-top: 4px;
}

.fact,
.key-box,
.warning-box,
.neutral-box {
  padding: 9px 11px;
  border: 2px solid var(--navy-700);
  border-radius: 11px;
  background: #fff;
}

.key-box {
  border-style: double;
  border-width: 5px;
  border-color: var(--green);
}

.warning-box {
  border-style: dashed;
  border-color: var(--orange-dark);
}

.takeaway {
  margin: auto 0 0;
  padding: 9px 11px;
  border-left: 5px double var(--green);
  border-radius: 8px;
  background: #e3f5ec;
  color: #145d3e;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
  line-height: 1.3;
}

.visual-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 12px;
  border-radius: 12px 22px 22px 12px;
}

.visual-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.visual-heading h2 {
  font-size: calc(20px * var(--font-scale));
  line-height: 1.1;
}

.visual-heading p,
.visual-caption {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.3;
}

.source-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
}

.visual-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 4px 0;
}

.choice-button,
.action-button,
.chip-button,
.quiz-choice {
  min-height: 32px;
  border: 1.5px solid rgba(27, 58, 99, .28);
  border-radius: 999px;
  background: #fff;
  color: var(--navy-700);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
}

.choice-button,
.action-button,
.chip-button {
  padding: 5px 12px;
}

.choice-button.active,
.action-button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.visual-root {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.visual-caption {
  min-height: 18px;
  text-align: center;
}

.asset-figure {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  margin: 0;
}

.asset-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.arrow-callout {
  position: absolute;
  top: 15%;
  left: 61%;
  display: grid;
  min-width: 116px;
  padding: 8px 12px;
  border: 3px dashed var(--orange-dark);
  border-radius: 12px;
  background: var(--paper);
  color: var(--orange-dark);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.arrow-callout.visible {
  opacity: 1;
  transform: translateY(0);
}

.compare-grid,
.mission-grid,
.composition-grid,
.symbol-grid,
.burnout-grid {
  display: grid;
  width: min(94%, 900px);
  gap: 12px;
}

.compare-grid,
.mission-grid,
.composition-grid,
.symbol-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-card,
.mission-card,
.composition-card,
.symbol-card,
.burnout-card {
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  text-align: center;
}

.compare-card.active,
.mission-card.revealed,
.composition-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(61, 127, 202, .12);
}

.compare-card strong,
.mission-card strong,
.composition-card strong,
.symbol-card strong,
.burnout-card strong {
  color: var(--navy-700);
  font-size: calc(16px * var(--font-scale));
}

.compare-card small,
.mission-card small,
.composition-card small,
.symbol-card small,
.burnout-card small {
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  line-height: 1.35;
}

.connection-drawing {
  position: relative;
  width: min(84%, 290px);
  height: 88px;
}

.connection-drawing::before,
.connection-drawing::after {
  content: "";
  position: absolute;
  top: 35px;
  height: 28px;
  background: #bd7043;
  border: 4px solid #7f462b;
}

.connection-drawing::before {
  left: 0;
  width: 38%;
  border-radius: 18px 0 0 18px;
}

.connection-drawing::after {
  right: 0;
  width: 38%;
  border-radius: 0 18px 18px 0;
}

.connection-drawing span {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  display: block;
  width: 72px;
  height: 58px;
  border: 5px solid var(--navy);
  background: var(--navy-700);
  transform: translateX(-50%);
}

.connection-drawing.flare span {
  clip-path: polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
}

.connection-drawing.solder span {
  border-radius: 20px;
}

.circuit-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(80px, 1fr));
  align-items: center;
  width: min(94%, 960px);
  gap: 14px;
}

.circuit-line::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 5%;
  left: 5%;
  top: 50%;
  height: 9px;
  border-radius: 999px;
  background: var(--orange-dark);
}

.line-device {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 84px;
  place-items: center;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--navy-700);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  text-align: center;
}

.line-device.target {
  border: 4px dashed var(--orange-dark);
  background: #fff5ee;
}

.line-device.correct {
  border: 5px double var(--green);
  background: #e3f5ec;
}

.mission-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid currentColor;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 800;
}

.mission-card.filter {
  color: var(--navy-700);
}

.mission-card.dry {
  color: var(--blue);
}

.cutaway-stage {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  padding: 8px;
}

.cutaway-stage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.component-readout {
  min-height: 42px;
  padding: 7px 10px;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #eef5fc;
  color: var(--navy-700);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
}

.core-visual {
  position: relative;
  width: min(82%, 330px);
  height: 130px;
  overflow: hidden;
  border: 7px solid var(--navy-700);
  border-radius: 22px;
  background: #f7f1e7;
}

.core-visual.solid::before {
  content: "";
  position: absolute;
  inset: 18px 28px;
  border: 4px solid #6f5c38;
  border-radius: 14px;
  background-color: #d4c7a7;
  background-image: radial-gradient(#8b7a55 2px, transparent 3px);
  background-size: 18px 18px;
}

.core-visual.beads {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 5px;
  padding: 24px 32px;
}

.core-visual.beads i {
  width: 14px;
  height: 14px;
  border: 2px solid #6f5c38;
  border-radius: 50%;
  background: #d4c7a7;
}

.flow-lab,
.adsorption-lab,
.saturation-lab,
.cartridge-lab,
.biflow-lab {
  position: relative;
  width: min(92%, 900px);
  height: min(78%, 330px);
  overflow: hidden;
  border: 4px solid var(--navy-700);
  border-radius: 28px;
  background: #eef3f7;
}

.flow-pipe {
  position: absolute;
  right: 3%;
  left: 3%;
  top: 50%;
  height: 94px;
  border: 6px solid var(--navy-700);
  border-radius: 42px;
  background: #e7f3ff;
  transform: translateY(-50%);
}

.filter-mat {
  position: absolute;
  z-index: 2;
  top: 15%;
  bottom: 15%;
  left: 68%;
  width: 34px;
  border: 4px dashed var(--orange-dark);
  background: #f4e8cf;
}

.particle,
.water-molecule,
.acid-molecule {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.particle {
  top: calc(50% - 10px);
  left: 8%;
  width: 20px;
  height: 20px;
  border: 3px solid var(--red);
  background: #fbe7e4;
  color: var(--red);
}

.flow-lab.running .particle {
  animation: catch-particle 2.4s ease-in-out forwards;
}

.flow-lab.running .particle.p2 { animation-delay: .25s; }
.flow-lab.running .particle.p3 { animation-delay: .5s; }
.flow-lab.running .particle.p4 { animation-delay: .75s; }

.particle.p2 { top: calc(50% - 34px); left: 15%; }
.particle.p3 { top: calc(50% + 12px); left: 22%; }
.particle.p4 { top: calc(50% - 6px); left: 30%; }

@keyframes catch-particle {
  0% { transform: translateX(0) rotate(0); }
  80%, 100% { left: calc(68% - 22px); transform: rotate(260deg); }
}

.fluid-arrow {
  position: absolute;
  z-index: 1;
  top: calc(50% - 12px);
  left: 8%;
  width: 52%;
  height: 24px;
  border-radius: 999px;
  background: var(--blue);
}

.fluid-arrow::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -12px;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 28px solid var(--blue);
}

.adsorption-lab .core-block {
  position: absolute;
  inset: 14% 26%;
  border: 5px solid #6f5c38;
  border-radius: 24px;
  background-color: #d4c7a7;
  background-image: radial-gradient(#8b7a55 3px, transparent 4px);
  background-size: 24px 24px;
}

.water-molecule {
  width: 42px;
  height: 42px;
  border: 3px solid var(--blue);
  background: #e7f3ff;
  color: var(--navy-700);
}

.water-molecule.w1 { top: 12%; left: 4%; }
.water-molecule.w2 { top: 42%; left: 8%; }
.water-molecule.w3 { top: 70%; left: 5%; }

.adsorption-lab.running .water-molecule.w1 { animation: adsorb-one 1.4s ease forwards; }
.adsorption-lab.running .water-molecule.w2 { animation: adsorb-two 1.6s .2s ease forwards; }
.adsorption-lab.running .water-molecule.w3 { animation: adsorb-three 1.8s .35s ease forwards; }

@keyframes adsorb-one { to { top: 26%; left: 32%; transform: scale(.82); } }
@keyframes adsorb-two { to { top: 48%; left: 49%; transform: scale(.82); } }
@keyframes adsorb-three { to { top: 63%; left: 68%; transform: scale(.82); } }

.capacity-bar {
  width: 100%;
  height: 16px;
  overflow: hidden;
  border: 2px solid var(--navy-700);
  border-radius: 999px;
  background: #fff;
}

.capacity-bar span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.capacity-bar.acid span {
  background: var(--orange-dark);
}

.saturation-lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 26px;
}

.saturation-gauge {
  position: relative;
  width: 94px;
  height: 220px;
  justify-self: center;
  overflow: hidden;
  border: 7px solid var(--navy-700);
  border-radius: 30px;
  background: #fff;
}

.saturation-gauge span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20%;
  background: var(--blue);
  transition: height .2s ease, background .2s ease;
}

.saturation-control {
  display: grid;
  gap: 12px;
}

.saturation-control input {
  width: 100%;
}

.saturation-state {
  padding: 10px;
  border: 3px solid var(--blue);
  border-radius: 12px;
  background: #eef5fc;
  color: var(--navy-700);
  font-weight: 800;
}

.cartridge-shell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  height: 150px;
  border: 8px solid var(--navy-700);
  border-radius: 30px;
  background: #eef3f7;
  transform: translate(-50%, -50%);
}

.cartridge-cover {
  position: absolute;
  z-index: 3;
  top: -8px;
  right: -8px;
  width: 82px;
  height: 150px;
  border: 8px solid var(--navy-700);
  border-radius: 0 24px 24px 0;
  background: #cbd7e2;
  transition: transform .7s ease;
}

.cartridge-core {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 48px;
  width: 220px;
  height: 86px;
  border: 5px solid #6f5c38;
  border-radius: 18px;
  background-color: #d4c7a7;
  background-image: radial-gradient(#8b7a55 2px, transparent 3px);
  background-size: 18px 18px;
  transition: transform .7s ease;
}

.cartridge-lab.open .cartridge-cover {
  transform: translateX(112px);
}

.cartridge-lab.open .cartridge-core {
  transform: translateX(220px);
}

.symbol-card img {
  width: min(90%, 220px);
  height: 100px;
  object-fit: contain;
}

.cigar-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  width: min(92%, 850px);
  gap: 24px;
}

.drier-scale {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--navy-700);
  font-weight: 800;
  text-align: center;
}

.drier-shape {
  position: relative;
  width: 80%;
  height: 110px;
  border: 7px solid var(--navy);
  border-radius: 48px;
  background: var(--navy-700);
}

.drier-shape::before,
.drier-shape::after {
  content: "";
  position: absolute;
  top: 34px;
  width: 22%;
  height: 30px;
  border: 4px solid #7f462b;
  background: #bd7043;
}

.drier-shape::before { right: 100%; }
.drier-shape::after { left: 100%; }

.drier-shape.cigar {
  width: 58%;
  height: 62px;
  border-color: #7f462b;
  border-radius: 32px;
  background: #bd7043;
}

.drier-shape.cigar::before,
.drier-shape.cigar::after {
  top: 13px;
  height: 26px;
  background: #d98e61;
}

.biflow-lab {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.bi-port {
  display: grid;
  height: 70px;
  place-items: center;
  border: 5px solid #7f462b;
  border-radius: 16px;
  background: #bd7043;
  color: #fff;
  font-weight: 800;
}

.bi-core {
  position: relative;
  height: 180px;
  border: 6px solid #6f5c38;
  border-radius: 26px;
  background-color: #d4c7a7;
  background-image: radial-gradient(#8b7a55 2px, transparent 3px);
  background-size: 20px 20px;
}

.bi-arrow {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 76%;
  height: 18px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateY(-50%);
}

.bi-arrow::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -10px;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 25px solid var(--blue);
}

.biflow-lab.reverse .bi-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.check-valve {
  position: absolute;
  top: 18px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 4px solid var(--navy-700);
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy-700);
  font-size: 22px;
  font-weight: 900;
}

.check-valve.left { left: 14px; }
.check-valve.right { right: 14px; }

.check-valve.closed {
  border-style: dashed;
  border-color: var(--red);
  color: var(--red);
}

.burnout-grid {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
}

.burnout-card {
  min-height: 160px;
}

.burnout-card.polluted {
  border-style: dashed;
  border-color: var(--red);
}

.burnout-card.protection {
  border-style: double;
  border-width: 5px;
  border-color: var(--green);
}

.process-arrow {
  color: var(--orange-dark);
  font-size: 34px;
  font-weight: 900;
}

.quiz-shell {
  display: grid;
  align-self: start;
  width: min(92%, 850px);
  margin-top: 12px;
  gap: 10px;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
}

.quiz-prompt {
  margin: 0;
  color: var(--navy-700);
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: calc(19px * var(--font-scale));
  line-height: 1.2;
}

.quiz-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quiz-choice {
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 12px;
  text-align: left;
}

.quiz-choice.good {
  border: 5px double var(--green);
  background: #e3f5ec;
  color: #145d3e;
}

.quiz-choice.bad {
  border: 4px dashed var(--red);
  background: #fbe7e4;
  color: var(--red);
}

.quiz-feedback {
  min-height: 48px;
  padding: 8px 11px;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #eef5fc;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.35;
}

.quiz-result {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
}

.quiz-score {
  color: var(--navy-700);
  font-family: "Trebuchet MS", Calibri, Arial, sans-serif;
  font-size: clamp(46px, 8vw, 84px);
  font-weight: 800;
}

.bottom-nav {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 300px) minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .96);
}

.nav-button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
}

.nav-button.secondary {
  justify-self: start;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy-700);
}

.nav-button.primary {
  justify-self: end;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
}

.progress-copy {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
  text-align: center;
}

.progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe7ee;
}

.progress-track span {
  display: block;
  width: 6.67%;
  height: 100%;
  border-radius: inherit;
  background: var(--orange-dark);
  transition: width .25s ease;
}

.sources-dialog {
  width: min(620px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 2px solid var(--navy-700);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.sources-dialog::backdrop {
  background: rgba(16, 35, 60, .35);
}

.sources-dialog form {
  padding: 20px;
}

.dialog-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.sources-dialog h2 {
  font-size: 28px;
}

.sources-dialog p,
.sources-dialog li {
  line-height: 1.5;
}

.close-button {
  width: 38px;
  height: 38px;
  font-size: 24px;
}

.rights-rule {
  padding: 10px 12px;
  border: 4px dashed var(--orange-dark);
  border-radius: 12px;
}

code {
  font-family: Consolas, monospace;
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(170px, 1fr) auto;
  }

  .module-name {
    display: none;
  }

  .course-grid {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .step-button strong {
    font-size: calc(9px * var(--font-scale));
  }

  .lesson {
    grid-template-columns: minmax(220px, 37%) minmax(0, 63%);
  }
}

@media (max-width: 650px) {
  .app-shell {
    grid-template-rows: 44px minmax(0, 1fr) 50px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px;
  }

  .brand-mark {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .brand-copy strong {
    font-size: calc(12px * var(--font-scale));
  }

  .brand-copy span,
  .tool-button span,
  .speed-control,
  .reading-tools button[data-font-action="decrease"],
  .reading-tools button[data-font-action="increase"] {
    display: none;
  }

  .top-tools {
    gap: 3px;
  }

  .tool-button,
  .reading-tools button {
    min-width: 34px;
    min-height: 32px;
    padding: 0 5px;
    font-size: 11px;
  }

  .reading-tools button[data-font-action="reset"] {
    min-width: 42px;
    font-size: 9px;
  }

  .course-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 30px minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
  }

  .stepper {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    gap: 2px;
  }

  .step-button {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    border-radius: 6px;
  }

  .step-button span {
    width: 18px;
    height: 18px;
    border: 0;
    font-size: 9px;
  }

  .step-button strong {
    display: none;
  }

  .step-button.done {
    border-width: 2px;
  }

  .lesson {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(112px, 32%) minmax(0, 68%);
    gap: 4px;
  }

  .lesson-copy,
  .visual-card {
    border-radius: 12px;
    box-shadow: none;
  }

  .lesson-copy {
    padding: 8px 10px;
  }

  .kicker {
    margin-bottom: 2px;
    font-size: calc(9px * var(--font-scale));
    letter-spacing: .08em;
  }

  .lesson-copy h1 {
    font-size: clamp(calc(17px * var(--font-scale)), 5.4vw, calc(22px * var(--font-scale)));
    line-height: 1.02;
  }

  .lesson-intro {
    margin: 4px 0;
    font-size: calc(11px * var(--font-scale));
    line-height: 1.22;
  }

  .lesson-detail {
    gap: 3px;
    font-size: calc(10px * var(--font-scale));
    line-height: 1.2;
  }

  .lesson-detail .fact,
  .lesson-detail .key-box,
  .lesson-detail .warning-box,
  .lesson-detail .neutral-box {
    padding: 4px 7px;
  }

  .takeaway {
    padding: 4px 7px;
    font-size: calc(9px * var(--font-scale));
    line-height: 1.16;
  }

  .visual-card {
    padding: 5px;
  }

  .visual-heading {
    min-height: 31px;
    gap: 4px;
  }

  .visual-heading h2 {
    font-size: calc(14px * var(--font-scale));
  }

  .visual-heading p,
  .visual-caption {
    font-size: calc(9px * var(--font-scale));
    line-height: 1.12;
  }

  .source-button {
    min-height: 24px;
    padding: 0 6px;
    font-size: 9px;
  }

  .visual-controls {
    min-height: 26px;
    margin: 2px 0;
    gap: 3px;
  }

  .choice-button,
  .action-button,
  .chip-button {
    min-height: 25px;
    padding: 2px 8px;
    font-size: calc(9px * var(--font-scale));
  }

  .compare-grid,
  .mission-grid,
  .composition-grid,
  .symbol-grid {
    width: 98%;
    gap: 5px;
  }

  .compare-card,
  .mission-card,
  .composition-card,
  .symbol-card,
  .burnout-card {
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
  }

  .compare-card strong,
  .mission-card strong,
  .composition-card strong,
  .symbol-card strong,
  .burnout-card strong {
    font-size: calc(11px * var(--font-scale));
  }

  .compare-card small,
  .mission-card small,
  .composition-card small,
  .symbol-card small,
  .burnout-card small {
    font-size: calc(9px * var(--font-scale));
    line-height: 1.12;
  }

  .connection-drawing {
    height: 58px;
  }

  .connection-drawing::before,
  .connection-drawing::after {
    top: 22px;
    height: 20px;
  }

  .connection-drawing span {
    top: 11px;
    width: 52px;
    height: 42px;
  }

  .circuit-line {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    width: 98%;
    gap: 3px;
  }

  .line-device {
    min-height: 58px;
    padding: 3px;
    font-size: calc(8px * var(--font-scale));
  }

  .mission-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .component-readout {
    min-height: 30px;
    padding: 4px 6px;
    font-size: calc(9px * var(--font-scale));
  }

  .core-visual {
    height: 78px;
  }

  .flow-lab,
  .adsorption-lab,
  .saturation-lab,
  .cartridge-lab,
  .biflow-lab {
    width: 96%;
    height: 86%;
    border-width: 3px;
    border-radius: 18px;
  }

  .saturation-lab {
    padding: 10px;
  }

  .saturation-gauge {
    width: 58px;
    height: 120px;
    border-width: 4px;
  }

  .saturation-state {
    padding: 4px;
    font-size: 9px;
  }

  .symbol-card img {
    height: 54px;
  }

  .cigar-compare {
    width: 94%;
    gap: 12px;
  }

  .drier-shape {
    height: 62px;
  }

  .drier-shape::before,
  .drier-shape::after {
    top: 17px;
    height: 20px;
  }

  .drier-shape.cigar {
    height: 42px;
  }

  .drier-shape.cigar::before,
  .drier-shape.cigar::after {
    top: 6px;
  }

  .biflow-lab {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 4px;
    padding: 8px;
  }

  .bi-port {
    height: 46px;
    font-size: 9px;
  }

  .bi-core {
    height: 100px;
  }

  .check-valve {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .burnout-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    width: 98%;
    gap: 3px;
  }

  .burnout-card {
    min-height: 94px;
  }

  .process-arrow {
    font-size: 18px;
  }

  .quiz-shell {
    width: 96%;
    gap: 4px;
  }

  .quiz-prompt {
    font-size: calc(13px * var(--font-scale));
  }

  .quiz-choice {
    min-height: 35px;
    padding: 4px 6px;
    border-radius: 8px;
    font-size: calc(10px * var(--font-scale));
  }

  .quiz-feedback {
    min-height: 34px;
    padding: 4px 6px;
    font-size: calc(9px * var(--font-scale));
  }

  .bottom-nav {
    grid-template-columns: 92px minmax(90px, 1fr) 104px;
    gap: 4px;
    padding: 4px;
  }

  .nav-button {
    min-height: 36px;
    padding: 0 8px;
    font-size: calc(10px * var(--font-scale));
  }

  .progress-copy {
    font-size: calc(9px * var(--font-scale));
  }
}

@media (max-width: 380px), (max-height: 680px) {
  .lesson {
    grid-template-rows: minmax(142px, 36%) minmax(0, 64%);
  }

  .lesson-detail ul {
    padding-left: 14px;
  }

  .visual-caption {
    min-height: 10px;
  }
}

/* V2 — reconnaissance par l’image, explication par le schéma exact */
.visual-root [hidden] {
  display: none !important;
}

.realistic-asset {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .98) 0 38%, rgba(239, 232, 219, .76) 72%, rgba(211, 197, 176, .42) 100%);
}

.realistic-asset > img {
  filter: drop-shadow(0 18px 18px rgba(16, 35, 60, .18));
}

.asset-kind {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(27, 58, 99, .22);
  border-radius: 999px;
  background: rgba(255, 253, 248, .94);
  color: var(--navy-700);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.asset-figure.realistic-asset > img {
  padding: 3% 5%;
}

.arrow-callout {
  top: auto;
  bottom: 12%;
  left: 58%;
  min-width: 182px;
  gap: 2px;
  box-shadow: 0 10px 28px rgba(16, 35, 60, .16);
}

.arrow-callout::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 54px;
  border-top: 3px solid var(--orange-dark);
  transform: rotate(-16deg);
  transform-origin: right center;
}

.arrow-callout span {
  color: var(--ink);
  font-size: 11px;
}

.connection-gallery,
.connection-photo-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.connection-gallery {
  padding: 8px;
}

.connection-photo-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.photo-frame {
  position: relative;
  width: min(96%, 860px);
  height: 100%;
  min-height: 0;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(27, 58, 99, .14);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0 56%, #f1eadf 100%);
}

.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgba(16, 35, 60, .16));
}

.flare-detail img {
  padding: 1% 3%;
}

.solder-detail img {
  padding: 4% 7%;
}

.connection-steps {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 7px;
}

.connection-steps span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf2fb;
  color: var(--navy-700);
  font-size: calc(11px * var(--font-scale));
  font-weight: 800;
}

.connection-steps b {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
}

.connection-photo-panel > p {
  margin: 0;
  color: var(--orange-dark);
  font-size: calc(15px * var(--font-scale));
  letter-spacing: .025em;
  text-align: center;
}

.solder-target {
  position: absolute;
  z-index: 4;
  top: 49%;
  padding: 5px 8px;
  border: 2px solid var(--orange-dark);
  border-radius: 8px;
  background: rgba(255, 253, 248, .96);
  color: var(--orange-dark);
  font-size: 10px;
  font-weight: 900;
  transform: translateY(-50%);
}

.solder-target.left {
  left: 4%;
}

.solder-target.right {
  right: 4%;
}

.solder-target::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  border-top: 2px solid var(--orange-dark);
}

.solder-target.left::after {
  left: 100%;
}

.solder-target.right::after {
  right: 100%;
}

.installation-photo {
  position: relative;
  display: grid;
  width: min(96%, 720px);
  height: 100%;
  min-height: 0;
  margin: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: #18202a;
}

.installation-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.installation-photo figcaption {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(16, 35, 60, .88);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.photo-hotspot {
  position: absolute;
  z-index: 4;
  left: 92%;
  top: 83%;
  display: grid;
  width: 11%;
  height: 31%;
  place-items: start center;
  border: 3px solid #ffca59;
  border-radius: 18px;
  color: #fff;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .65));
}

.photo-hotspot i {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
}

.photo-hotspot b {
  position: absolute;
  top: -38px;
  right: -2px;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--orange-dark);
  font-size: 10px;
  white-space: nowrap;
}

.cutaway-media {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at 55% 46%, #fff 0 42%, #ece4d8 100%);
}

.cutaway-stage .cutaway-media > img:first-child {
  padding: 2% 4%;
  filter: drop-shadow(0 16px 16px rgba(16, 35, 60, .18));
}

.cutaway-stage .outside-inset {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 10px;
  width: 24%;
  height: 27%;
  padding: 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 8px 24px rgba(16, 35, 60, .18);
  object-fit: contain;
}

.cartridge-lab.realistic-asset {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(96%, 900px);
  height: 92%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.cartridge-lab.realistic-asset > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2% 4%;
  object-fit: contain;
}

.cartridge-lab figcaption {
  padding: 7px 10px;
  background: var(--navy-700);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.real-image-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(96%, 920px);
  height: 92%;
  gap: 12px;
}

.real-image-compare figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 45%, #fff 0 42%, #eee5d8 100%);
}

.real-image-compare img {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4%;
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgba(16, 35, 60, .16));
}

.real-image-compare figcaption {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: rgba(255, 253, 248, .96);
  color: var(--navy-700);
  text-align: center;
}

.real-image-compare figcaption strong {
  font-size: calc(14px * var(--font-scale));
}

.real-image-compare figcaption span {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
}

.bi-core {
  overflow: hidden;
  border-color: var(--navy-700);
  background: #f3ede4;
}

.bi-core > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px 7%;
  object-fit: contain;
  opacity: .84;
  filter: saturate(.84) drop-shadow(0 8px 10px rgba(16, 35, 60, .16));
}

.bi-arrow {
  z-index: 3;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .8);
}

.check-valve {
  z-index: 4;
}

.burnout-product img {
  width: min(92%, 190px);
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(16, 35, 60, .14));
}

@media (max-width: 650px) {
  .asset-kind {
    top: 5px;
    left: 5px;
    padding: 3px 6px;
    font-size: 7px;
  }

  .arrow-callout {
    right: 5px;
    bottom: 7%;
    left: auto;
    min-width: 120px;
    padding: 5px 7px;
    border-width: 2px;
    font-size: 9px;
  }

  .arrow-callout::before {
    width: 34px;
  }

  .arrow-callout span {
    font-size: 8px;
  }

  .connection-gallery {
    padding: 3px;
  }

  .connection-photo-panel {
    gap: 3px;
  }

  .photo-frame {
    width: 99%;
    border-radius: 10px;
  }

  .connection-steps {
    gap: 3px;
  }

  .connection-steps span {
    gap: 3px;
    padding: 2px 5px;
    font-size: calc(8px * var(--font-scale));
  }

  .connection-steps b {
    flex-basis: 15px;
    width: 15px;
    height: 15px;
    font-size: 8px;
  }

  .connection-photo-panel > p {
    font-size: calc(10px * var(--font-scale));
  }

  .solder-target {
    padding: 3px 4px;
    font-size: 7px;
  }

  .solder-target::after {
    width: 20px;
  }

  .installation-photo {
    width: 99%;
    border-radius: 10px;
  }

  .installation-photo figcaption {
    right: 5px;
    bottom: 5px;
    left: 5px;
    padding: 4px 6px;
    font-size: 8px;
  }

  .photo-hotspot {
    left: 92%;
    top: 83%;
    width: 12%;
    height: 31%;
    border-width: 2px;
  }

  .photo-hotspot b {
    top: -23px;
    padding: 3px 4px;
    font-size: 7px;
  }

  .cutaway-stage {
    padding: 3px;
  }

  .cutaway-stage .outside-inset {
    right: 4px;
    bottom: 4px;
    width: 26%;
    height: 28%;
    padding: 2px;
    border-width: 1px;
  }

  .cartridge-lab.realistic-asset {
    width: 99%;
    height: 96%;
    border-width: 1px;
    border-radius: 10px;
  }

  .cartridge-lab figcaption {
    padding: 4px 6px;
    font-size: 8px;
  }

  .real-image-compare {
    width: 99%;
    height: 96%;
    gap: 5px;
  }

  .real-image-compare figure {
    border-radius: 9px;
  }

  .real-image-compare figcaption {
    padding: 4px;
  }

  .real-image-compare figcaption strong {
    font-size: calc(9px * var(--font-scale));
  }

  .real-image-compare figcaption span {
    font-size: calc(7px * var(--font-scale));
  }

  .bi-core > img {
    padding: 5px 3%;
  }

  .burnout-product img {
    width: 96%;
    height: 38px;
  }
}

/* V3 — repères techniques, fonctions progressives et situations illustrées */
.photo-hotspot {
  left: 92%;
  top: 64%;
  width: 14%;
  height: 25%;
}

.function-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, .8fr);
  width: min(96%, 940px);
  height: 92%;
  gap: 12px;
}

.function-image {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f2eadf;
}

.function-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.function-image.beads-photo img {
  filter: saturate(.83) contrast(1.04);
}

.function-note {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 16px;
  border: 2px solid var(--navy-700);
  border-radius: 16px;
  background: var(--paper);
}

.function-note strong {
  color: var(--navy-700);
  font-size: calc(18px * var(--font-scale));
}

.function-note p {
  margin: 0;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.42;
}

.function-note b {
  padding: 8px 10px;
  border-left: 5px double var(--green);
  background: #e3f5ec;
  color: #145d3e;
  font-size: calc(12px * var(--font-scale));
}

.pollutant-tag,
.water-drop {
  position: absolute;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(16, 35, 60, .22);
}

.pollutant-tag {
  background: var(--orange-dark);
}

.pollutant-tag.scale { left: 10%; top: 18%; }
.pollutant-tag.chips { left: 21%; bottom: 18%; }
.pollutant-tag.sludge { left: 42%; top: 27%; }

.water-drop {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: var(--blue);
  transform: rotate(-45deg);
}

.water-drop::first-line {
  transform: rotate(45deg);
}

.water-drop.w1 { left: 14%; top: 14%; }
.water-drop.w2 { right: 15%; top: 22%; }
.water-drop.w3 { left: 48%; bottom: 13%; }

.nitrogen-lesson {
  display: grid;
  width: min(94%, 900px);
  gap: 12px;
}

.pipe-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pipe-compare article {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  text-align: center;
}

.pipe-compare article:first-child {
  border-style: dashed;
  border-color: var(--orange-dark);
}

.pipe-compare article:last-child {
  border-style: double;
  border-width: 5px;
  border-color: var(--green);
}

.pipe-compare strong {
  color: var(--navy-700);
  font-size: calc(15px * var(--font-scale));
}

.pipe-compare small {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.3;
}

.pipe-section {
  position: relative;
  display: grid;
  width: min(88%, 300px);
  height: 82px;
  place-items: center;
  overflow: hidden;
  border: 10px solid #a95731;
  border-radius: 42px;
  background: #f2d0ac;
  box-shadow: inset 0 7px 12px rgba(85, 41, 23, .18);
}

.pipe-section.dirty i {
  position: absolute;
  width: 22px;
  height: 15px;
  background: #2b2b2a;
  clip-path: polygon(50% 0, 100% 34%, 78% 100%, 15% 84%, 0 24%);
}

.pipe-section.dirty i:nth-child(1) { left: 12%; top: 18%; }
.pipe-section.dirty i:nth-child(2) { left: 37%; bottom: 12%; transform: rotate(31deg); }
.pipe-section.dirty i:nth-child(3) { right: 24%; top: 15%; transform: rotate(60deg); }
.pipe-section.dirty i:nth-child(4) { right: 7%; bottom: 17%; transform: rotate(92deg); }

.pipe-section.clean b {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
}

.cutaway-lines {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cutaway-lines polyline {
  fill: none;
  stroke: var(--orange-dark);
  stroke-width: .65;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#part-arrow);
  opacity: .52;
  transition: opacity .18s ease, stroke-width .18s ease, stroke .18s ease;
}

.cutaway-lines marker path {
  fill: var(--orange-dark);
}

.cutaway-lines polyline.active {
  stroke: var(--blue);
  stroke-width: 1.15;
  opacity: 1;
}

.part-label {
  position: absolute;
  z-index: 5;
  min-height: 28px;
  padding: 4px 8px;
  border: 2px solid var(--orange-dark);
  border-radius: 999px;
  background: rgba(255, 253, 248, .96);
  color: var(--navy-700);
  font-size: calc(10px * var(--font-scale));
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(16, 35, 60, .12);
}

.part-label.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.part-label.shell { left: 21%; top: 5%; }
.part-label.spring { left: 7%; bottom: 8%; }
.part-label.core { left: 42%; bottom: 5%; }
.part-label.mat { right: 17%; top: 5%; }
.part-label.plate { right: 5%; bottom: 8%; }

.technology-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(96%, 920px);
  height: 92%;
  gap: 12px;
}

.technology-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.technology-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(61, 127, 202, .12);
}

.technology-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.technology-card:first-child img {
  object-fit: contain;
  background: #f3ede4;
}

.technology-card > div {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.technology-card strong {
  color: var(--navy-700);
  font-size: calc(15px * var(--font-scale));
}

.technology-card small {
  color: var(--muted);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.28;
}

.filtration-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  width: min(96%, 940px);
  height: 90%;
  gap: 12px;
}

.filtration-real {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f3ede4;
}

.filtration-real img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filtration-real figcaption {
  padding: 6px;
  background: var(--navy-700);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.filtration-split .flow-lab {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.flow-label {
  position: absolute;
  z-index: 4;
  bottom: 15%;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 253, 248, .92);
  color: var(--navy-700);
  font-size: 9px;
  font-weight: 900;
}

.flow-label.inlet { left: 8%; }
.flow-label.outlet { right: 7%; }

.cartridge-point {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 2px solid var(--orange-dark);
  border-radius: 999px;
  background: rgba(255, 253, 248, .96);
  color: var(--navy-700);
  font-size: 10px;
  font-weight: 900;
}

.cartridge-point b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-dark);
  color: #fff;
}

.cartridge-point.cores { left: 30%; top: 25%; }
.cartridge-point.mesh { right: 23%; bottom: 22%; }
.cartridge-point.cover { right: 3%; top: 18%; }

.biflow-product-lab {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(96%, 930px);
  height: 92%;
  gap: 8px;
}

.biflow-product-lab figure {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f2eadf;
}

.biflow-product-lab figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double-flow {
  position: absolute;
  z-index: 4;
  top: 47%;
  min-width: 28%;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .84);
  transition: opacity .18s ease, transform .18s ease;
}

.double-flow.forward { left: 17%; }
.double-flow.reverse { right: 17%; opacity: .18; }
.biflow-product-lab.reverse .double-flow.forward { opacity: .18; }
.biflow-product-lab.reverse .double-flow.reverse { opacity: 1; }

.mesh-callout {
  position: absolute;
  z-index: 4;
  top: 16%;
  padding: 4px 7px;
  border: 2px solid var(--orange-dark);
  border-radius: 7px;
  background: rgba(255, 253, 248, .95);
  color: var(--orange-dark);
  font-size: 9px;
  font-weight: 900;
}

.mesh-callout.left { left: 24%; }
.mesh-callout.right { right: 24%; }

.biflow-rule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.biflow-rule span {
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--navy-700);
  font-size: 10px;
  text-align: center;
}

.chemistry-story {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  width: min(96%, 940px);
  gap: 7px;
}

.chemistry-story article {
  display: grid;
  min-width: 0;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: center;
}

.chemistry-story .acid-card {
  border-style: dashed;
  border-color: var(--orange-dark);
}

.chemistry-story .damage-card {
  border-style: double;
  border-width: 5px;
  border-color: var(--red);
}

.chemistry-story strong {
  color: var(--navy-700);
  font-size: calc(13px * var(--font-scale));
}

.chemistry-story small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.25;
}

.chem-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 4px solid var(--navy-700);
  border-radius: 50%;
  background: #eaf2fb;
  color: var(--navy-700);
  font-weight: 900;
}

.chem-icon.winding { color: var(--orange-dark); font-size: 28px; }
.chem-icon.oil { border-radius: 50% 50% 50% 10px; background: #423b36; color: #fff; font-size: 9px; transform: rotate(-45deg); }
.chem-icon.acid { border-style: dashed; border-color: var(--orange-dark); color: var(--orange-dark); }
.chem-icon.coil { border-color: var(--red); color: var(--red); font-size: 20px; }

.burnout-protection {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .7fr);
  width: min(96%, 940px);
  height: 90%;
  gap: 12px;
}

.burnout-protection figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f3ede4;
}

.burnout-protection figure img {
  width: 100%;
  height: 100%;
  padding: 5% 3%;
  object-fit: contain;
}

.pressure-tap {
  position: absolute;
  top: 8%;
  padding: 4px 7px;
  border: 2px solid var(--orange-dark);
  border-radius: 7px;
  background: rgba(255, 253, 248, .96);
  color: var(--orange-dark);
  font-size: 9px;
  font-weight: 900;
}

.pressure-tap.left { left: 18%; }
.pressure-tap.right { right: 17%; }

.burnout-checks {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 12px;
  border: 2px solid var(--green);
  border-style: double;
  border-width: 5px;
  border-radius: 16px;
  background: var(--paper);
}

.burnout-checks strong {
  color: var(--navy-700);
  font-size: calc(15px * var(--font-scale));
}

.burnout-checks span {
  padding: 5px 7px;
  border-left: 4px solid var(--blue);
  background: #eef5fc;
  color: var(--ink);
  font-size: calc(11px * var(--font-scale));
}

.quiz-question-grid {
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
  min-height: 0;
  gap: 12px;
}

.quiz-question-body {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 8px;
}

.quiz-illustration {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0;
  place-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, #fff 0 36%, #eee6da 100%);
}

.quiz-illustration > b {
  color: var(--navy-700);
  font-size: 9px;
  letter-spacing: .06em;
  text-align: center;
}

.quiz-mini-product,
.quiz-mini-duo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  height: 95px;
  gap: 4px;
}

.quiz-mini-product img {
  width: 92%;
  height: 100%;
  object-fit: contain;
}

.quiz-mini-arrow,
.quiz-mini-double {
  position: absolute;
  display: grid;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.quiz-mini-arrow { right: 4%; left: 28%; }
.quiz-mini-double { right: 10%; left: 10%; bottom: 6px; }

.mini-pollutants,
.mini-water,
.mini-acid,
.mini-coil {
  position: absolute;
  z-index: 3;
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 900;
}

.mini-pollutants { left: 3%; top: 12%; }
.mini-water { right: 2%; bottom: 14%; color: var(--blue); }
.mini-acid { left: 2%; top: 8%; }
.mini-coil { right: 2%; bottom: 12%; color: var(--red); font-size: 20px; }

.quiz-mini-duo img {
  width: 48%;
  height: 90%;
  object-fit: cover;
  border-radius: 7px;
}

.quiz-mini-product.replace {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
}

.quiz-mini-product.replace img {
  width: 100%;
  height: 68px;
}

.quiz-mini-product.replace i {
  grid-column: 2;
  grid-row: 1;
  color: var(--orange-dark);
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.quiz-mini-product.replace span {
  color: var(--navy-700);
  font-size: 8px;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 650px) {
  .photo-hotspot {
    left: 92%;
    top: 64%;
    width: 14%;
    height: 25%;
  }

  .function-scene {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 58%) minmax(0, 42%);
    width: 99%;
    height: 97%;
    gap: 4px;
  }

  .function-image,
  .function-note {
    border-radius: 9px;
  }

  .function-note {
    gap: 3px;
    padding: 5px 7px;
  }

  .function-note strong { font-size: calc(10px * var(--font-scale)); }
  .function-note p { font-size: calc(8px * var(--font-scale)); line-height: 1.15; }
  .function-note b { padding: 3px 5px; font-size: calc(7px * var(--font-scale)); }

  .pollutant-tag,
  .water-drop {
    padding: 2px 4px;
    font-size: 6px;
  }

  .water-drop { width: 27px; height: 27px; padding: 0; border-width: 2px; }

  .nitrogen-lesson {
    width: 99%;
    gap: 4px;
  }

  .pipe-compare { gap: 4px; }
  .pipe-compare article { gap: 3px; padding: 4px; border-radius: 9px; }
  .pipe-compare article:last-child { border-width: 3px; }
  .pipe-section { height: 45px; border-width: 6px; }
  .pipe-compare strong { font-size: calc(9px * var(--font-scale)); }
  .pipe-compare small { font-size: calc(7px * var(--font-scale)); line-height: 1.1; }
  .pipe-section.clean b { width: 30px; height: 30px; font-size: 11px; }

  .part-label {
    min-height: 19px;
    padding: 2px 4px;
    border-width: 1px;
    font-size: calc(7px * var(--font-scale));
  }

  .part-label.shell { left: 18%; top: 4%; }
  .part-label.spring { left: 3%; bottom: 6%; }
  .part-label.core { left: 40%; bottom: 3%; }
  .part-label.mat { right: 13%; top: 4%; }
  .part-label.plate { right: 2%; bottom: 6%; }

  .technology-grid {
    width: 99%;
    height: 96%;
    gap: 4px;
  }

  .technology-card { border-radius: 9px; }
  .technology-card > div { gap: 1px; padding: 3px; }
  .technology-card strong { font-size: calc(9px * var(--font-scale)); }
  .technology-card small { font-size: calc(7px * var(--font-scale)); line-height: 1.1; }

  .filtration-split {
    width: 99%;
    height: 96%;
    gap: 4px;
  }

  .filtration-real,
  .filtration-split .flow-lab { border-radius: 9px; }
  .filtration-real figcaption { padding: 3px; font-size: 7px; }
  .flow-label { bottom: 8%; padding: 2px 3px; font-size: 6px; }

  .cartridge-point {
    gap: 2px;
    padding: 2px 4px;
    border-width: 1px;
    font-size: 6px;
  }

  .cartridge-point b { width: 13px; height: 13px; font-size: 7px; }
  .cartridge-point.cores { left: 24%; top: 24%; }
  .cartridge-point.mesh { right: 20%; bottom: 24%; }
  .cartridge-point.cover { right: 1%; top: 17%; }

  .biflow-product-lab {
    width: 99%;
    height: 96%;
    gap: 4px;
  }

  .biflow-product-lab figure { border-radius: 9px; }
  .double-flow { min-width: 30%; padding: 3px 5px; font-size: 7px; }
  .mesh-callout { top: 10%; padding: 2px 4px; border-width: 1px; font-size: 6px; }
  .biflow-rule { gap: 3px; }
  .biflow-rule span { padding: 3px; font-size: 6px; }

  .chemistry-story {
    width: 99%;
    gap: 2px;
  }

  .chemistry-story article {
    min-height: 112px;
    gap: 3px;
    padding: 4px 2px;
    border-radius: 8px;
  }

  .chemistry-story .damage-card { border-width: 3px; }
  .chemistry-story strong { font-size: calc(7px * var(--font-scale)); }
  .chemistry-story small { font-size: calc(6px * var(--font-scale)); line-height: 1.08; }
  .chemistry-story .process-arrow { font-size: 11px; }
  .chem-icon { width: 30px; height: 30px; border-width: 2px; font-size: 8px; }
  .chem-icon.winding { font-size: 15px; }
  .chem-icon.coil { font-size: 11px; }

  .burnout-protection {
    grid-template-columns: minmax(0, 1.25fr) minmax(105px, .75fr);
    width: 99%;
    height: 96%;
    gap: 4px;
  }

  .burnout-protection figure,
  .burnout-checks { border-radius: 9px; }
  .pressure-tap { top: 5%; padding: 2px 3px; border-width: 1px; font-size: 5px; }
  .burnout-checks { gap: 3px; padding: 4px; border-width: 3px; }
  .burnout-checks strong { font-size: calc(8px * var(--font-scale)); }
  .burnout-checks span { padding: 2px 3px; border-left-width: 2px; font-size: calc(6px * var(--font-scale)); }

  .quiz-shell {
    align-self: stretch;
    height: 100%;
    margin-top: 0;
  }

  .quiz-question-grid {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 4px;
  }

  .quiz-question-body { gap: 3px; }
  .quiz-illustration { border-radius: 8px; gap: 2px; }
  .quiz-illustration > b { font-size: 6px; }
  .quiz-mini-product,
  .quiz-mini-duo { height: 58px; }
  .quiz-mini-product.replace img { height: 39px; }
  .quiz-mini-product.replace span { font-size: 5px; }
}