@import url('./science-proof-universe.css');

.water-course {
  --water-accent: #0fbc53;
  --water-accent-dark: #087b38;
  --water-support: #e5f8eb;
  --water-ink: #29272d;
  --water-cream: #fbf6eb;
  --water-white: #fffdf8;
  --water-coral: #fd7666;
  --water-pink: #fdc8e9;
  --water-yellow: #f6cc24;
  --water-lime: #b0ee0b;
  --water-blue: #86d9f6;
  min-height: 100vh;
  padding: 74px clamp(14px, 2.8vw, 42px) clamp(48px, 7vw, 100px);
  color: var(--water-ink);
  background: var(--water-cream);
  font-family: 'Bricolage Grotesque';
}

.water-course *,
.water-course *::before,
.water-course *::after { box-sizing: border-box; }
.water-course button,
.water-course input,
.water-course summary { font: inherit; }
.water-course button { color: inherit; cursor: pointer; }
.water-course h1,
.water-course h2,
.water-course h3,
.water-course strong,
.water-course .water-card-number { font-family: 'Bricolage Grotesque'; }
.water-course h1[tabindex='-1']:focus { outline: none; }
.water-live { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.water-course-header {
  max-width: 1280px;
  min-height: 76px;
  margin: 0 auto;
  border-bottom: 2px solid var(--water-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.water-course-header > div { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.water-course-header span,
.water-course-header small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.water-course-header strong { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.water-course-header small { color: var(--water-accent-dark); }

.water-stage-rail {
  max-width: 1280px;
  margin: 0 auto clamp(22px, 3vw, 38px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 2px solid var(--water-ink);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  background: var(--water-white);
}
.water-stage-rail button {
  min-height: 62px;
  border: 0;
  border-right: 2px solid var(--water-ink);
  background: var(--water-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}
.water-stage-rail button:last-child { border-right: 0; }
.water-stage-rail button:hover,
.water-stage-rail button:focus-visible { background: var(--water-support); outline: 3px solid var(--water-yellow); outline-offset: -4px; }
.water-stage-rail button.is-current { background: var(--water-accent); }
.water-stage-rail i {
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
}

.water-welcome,
.water-lesson-stage,
.water-lab-launch,
.water-lab-stage,
.water-lab-finish,
.water-cards-stage,
.water-cards-finish,
.water-summary,
.water-guide { width: min(1180px, 100%); margin: 0 auto; }

.water-welcome-grid {
  display: grid;
  grid-template-columns: 1.45fr .8fr;
  gap: 18px;
}
.water-welcome-hero {
  min-height: 510px;
  grid-row: span 2;
  border: 2px solid var(--water-ink);
  border-radius: 34px;
  overflow: hidden;
  background: var(--water-white);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
}
.water-welcome-hero > div { padding: clamp(30px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.water-welcome-hero > div > span,
.water-welcome-goals > span,
.water-welcome-progress span,
.water-card-kicker,
.water-card-question > span,
.water-card-takeaway > span,
.water-proof figcaption span,
.water-lab-launch > article > div > span,
.water-lab-card > header > span,
.water-lab-answer > span,
.water-lab-feedback span,
.water-cards-stage > article > header > span,
.water-summary > article > header span,
.water-summary-example span,
.water-summary-route header span,
.water-summary-rule > span,
.water-summary-say span,
.water-guide section > header > span,
.water-guide-hero > div > span,
.water-guide-source > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.water-welcome-hero h1,
.water-lesson-card h1,
.water-lab-launch h1,
.water-lab-finish h1,
.water-cards-finish h1,
.water-summary h1,
.water-guide h1 {
  margin: 18px 0;
  font-size: clamp(48px, 6.8vw, 94px);
  line-height: .88;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.water-welcome-hero h1 strong,
.water-welcome-hero h1 em,
.water-lesson-card h1 strong,
.water-lesson-card h1 em,
.water-lab-launch h1 strong,
.water-lab-launch h1 em,
.water-lab-finish h1 strong,
.water-lab-finish h1 em,
.water-cards-finish h1 strong,
.water-cards-finish h1 em,
.water-summary h1 strong,
.water-summary h1 em,
.water-guide h1 strong,
.water-guide h1 em { display: block; font-style: normal; }
.water-welcome-hero h1 em,
.water-lesson-card h1 em,
.water-lab-launch h1 em,
.water-lab-finish h1 em,
.water-cards-finish h1 em,
.water-summary h1 em,
.water-guide h1 em { color: var(--water-accent); }
.water-welcome-hero p { max-width: 520px; margin: 0 0 26px; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.45; }
.water-welcome-hero button,
.water-lab-launch button,
.water-lab-feedback button,
.water-lab-finish button,
.water-cards-finish button {
  min-height: 54px;
  padding: 12px 18px;
  border: 2px solid var(--water-ink);
  border-radius: 18px;
  background: var(--water-accent);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  font-weight: 800;
}
.water-welcome-hero button:hover,
.water-lab-launch button:hover,
.water-lab-feedback button:hover,
.water-lab-finish button:hover,
.water-cards-finish button:hover { transform: translateY(-2px); background: var(--water-lime); }
.water-welcome-hero > aside { position: relative; display: grid; align-items: end; justify-items: center; background: var(--water-support); overflow: hidden; }
.water-welcome-hero > aside > i { width: 115%; aspect-ratio: 1; position: absolute; bottom: -25%; border-radius: 49% 51% 46% 54%; background: var(--water-accent); transform: rotate(-7deg); }
.water-welcome-teacher { z-index: 1; width: 128%; max-width: none; height: auto; display: block; transform: translateX(-2%); }

.water-welcome-goals,
.water-welcome-progress {
  border: 2px solid var(--water-ink);
  border-radius: 28px;
  background: var(--water-support);
  padding: clamp(22px, 3vw, 36px);
}
.water-welcome-goals h2 { margin: 9px 0 18px; font-size: clamp(25px, 2.6vw, 36px); line-height: 1; letter-spacing: -.04em; }
.water-welcome-goals ol,
.water-welcome-progress ol { list-style: none; padding: 0; margin: 0; }
.water-welcome-goals li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; margin-top: 10px; line-height: 1.25; }
.water-welcome-goals li i,
.water-welcome-progress li i {
  width: 30px;
  height: 30px;
  border: 2px solid var(--water-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--water-white);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.water-welcome-progress { background: var(--water-white); }
.water-welcome-progress header { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.water-welcome-progress header div { display: grid; gap: 4px; }
.water-welcome-progress header small { font-size: 14px; }
.water-welcome-progress header > strong { font-size: 34px; color: var(--water-accent-dark); }
.water-welcome-progress > div { height: 14px; margin: 18px 0; border: 2px solid var(--water-ink); border-radius: 8px; overflow: hidden; background: var(--water-support); }
.water-welcome-progress > div i { display: block; width: var(--water-progress); height: 100%; background: var(--water-accent); transition: width .35s ease; }
.water-welcome-progress ol { display: flex; justify-content: space-between; gap: 6px; }
.water-welcome-progress li.is-done i { background: var(--water-lime); }

.water-destinations { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.water-destinations button {
  min-height: 138px;
  padding: 22px;
  border: 2px solid var(--water-ink);
  border-radius: 26px;
  display: grid;
  grid-template-columns: 1fr 58px auto;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.water-destinations button:hover { transform: translateY(-3px); }
.water-destinations button.is-lab { background: var(--water-lime); }
.water-destinations button.is-flashcards { background: var(--water-pink); }
.water-destinations button.is-summary { background: var(--water-yellow); }
.water-destinations button.is-guide { background: var(--water-coral); }
.water-destinations button > span { display: grid; gap: 5px; }
.water-destinations button strong { font-size: 21px; }
.water-destinations button small { font-size: 15px; }
.water-destinations button > i { height: 58px; display: grid; place-items: center; font-style: normal; font-size: 36px; }
.water-destinations svg { width: 52px; fill: none; stroke: currentColor; stroke-width: 3; }

.water-lesson-card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--water-ink);
  border-radius: 34px;
  background: var(--water-white);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
  grid-template-rows: auto auto;
}
.water-lesson-card.is-finale { background: #fff0f8; }
.water-card-number { position: absolute; top: 22px; right: 28px; z-index: 2; font-size: clamp(46px, 6vw, 82px); color: color-mix(in srgb, var(--water-accent) 24%, transparent); }
.water-card-copy { padding: clamp(30px, 5vw, 70px); }
.water-lesson-card h1 { font-size: clamp(45px, 5.5vw, 78px); }
.water-card-question { margin: 26px 0 22px; padding: 20px 22px; border-left: 8px solid var(--water-yellow); background: #fff8d7; display: grid; gap: 6px; }
.water-card-question strong { font-size: clamp(20px, 2vw, 27px); line-height: 1.15; }
.water-card-question small { font-size: 14px; }
.water-card-story p { max-width: 610px; margin: 0 0 12px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.48; }
.water-card-takeaway { margin-top: 24px; display: grid; gap: 5px; }
.water-card-takeaway strong { font-size: clamp(20px, 2vw, 28px); color: var(--water-accent-dark); }
.water-card-visual { padding: clamp(72px, 7vw, 100px) clamp(22px, 3vw, 44px) 40px; background: var(--water-support); display: grid; align-items: center; }
.water-lesson-card.is-finale .water-card-visual { background: var(--water-pink); }
.water-lesson-card > footer { grid-column: 1 / -1; border-top: 2px solid var(--water-ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 18px; background: var(--water-white); }
.water-lesson-card > footer button { min-height: 50px; padding: 10px 15px; border: 2px solid var(--water-ink); border-radius: 16px; background: var(--water-support); display: flex; align-items: center; gap: 12px; font-weight: 800; justify-self: start; }
.water-lesson-card > footer button.is-next { justify-self: end; background: var(--water-accent); }
.water-lesson-card > footer button:hover { background: var(--water-lime); }
.water-lesson-card > footer p { margin: 0 18px; display: flex; align-items: baseline; gap: 5px; }
.water-lesson-card > footer p strong { font-size: 24px; }

.water-proof { width: 100%; margin: 0; }
.water-proof figcaption { margin-bottom: 18px; display: grid; gap: 4px; }
.water-proof figcaption strong { font-size: clamp(21px, 2vw, 29px); }
.water-proof > p { margin: 16px 0 0; padding: 13px 15px; border-top: 2px solid var(--water-ink); font-size: 15px; line-height: 1.4; }
.water-proof svg { width: 100%; height: auto; overflow: visible; }
.water-proof .vessel,
.water-proof .glass,
.water-proof .tray,
.water-volume-pair .vessel { fill: #fffdf880; stroke: var(--water-ink); stroke-width: 4; }
.water-proof .solid,
.water-proof .ice { fill: var(--water-blue); stroke: var(--water-ink); stroke-width: 3; }
.water-proof .liquid,
.water-volume-pair .liquid { fill: #38bdf8; stroke: var(--water-ink); stroke-width: 3; }
.water-proof .level,
.water-volume-pair .level { fill: none; stroke: var(--water-ink); stroke-width: 4; }
.water-proof .gas circle { fill: var(--water-yellow); stroke: var(--water-ink); stroke-width: 2; }
.water-proof .detail { fill: none; stroke: var(--water-ink); stroke-width: 3; }
.water-proof .puddle { fill: #38bdf8; stroke: var(--water-ink); stroke-width: 3; }
.water-property-grid,
.water-three-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.water-property-grid article,
.water-three-scenes article { min-width: 0; padding: 14px 8px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); text-align: center; }
.water-property-grid article > strong,
.water-three-scenes article > strong { display: block; font-size: 18px; }
.water-property-grid dl { margin: 9px 0 0; }
.water-property-grid dl div { display: flex; justify-content: space-between; gap: 6px; padding: 5px 7px; border-top: 1px solid var(--water-ink); font-size: 12px; }
.water-property-grid dd { margin: 0; font-weight: 800; }
.water-three-scenes small { display: block; font-weight: 700; }
.water-three-scenes .air-space { fill: #fffdf866; stroke: var(--water-ink); stroke-width: 3; stroke-dasharray: 8 7; }
.water-three-scenes .invisible-arrows,
.water-proof .vapour { fill: none; stroke: var(--water-accent-dark); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 7; }

.water-proof--timeline ol { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.water-proof--timeline ol::before { content: ''; height: 4px; position: absolute; top: 50%; right: 12%; left: 12%; background: var(--water-ink); }
.water-proof--timeline li { z-index: 1; padding: 12px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); text-align: center; }
.water-proof--timeline li.is-change { background: #fff8d7; }
.water-proof--timeline li > span,
.water-proof--timeline li > strong { display: block; }
.water-proof--timeline li > span { font-size: 12px; font-weight: 800; }

.water-proof--reverse > div,
.water-proof--evaporation > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.water-proof--reverse article,
.water-proof--evaporation article { min-width: 0; text-align: center; }
.water-proof--reverse article strong,
.water-proof--evaporation article strong,
.water-proof--evaporation article small,
.water-proof--evaporation article > span { display: block; }
.water-reverse-arrows { display: grid; justify-items: center; gap: 2px; }
.water-reverse-arrows i { font-size: 34px; font-style: normal; }
.water-reverse-arrows em { font-size: 11px; font-style: normal; font-weight: 800; color: var(--water-accent-dark); }
.water-reverse-arrows b { font-size: 11px; }
.water-proof--evaporation > div { grid-template-columns: 1fr 1fr; }
.water-proof--evaporation article { padding: 10px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); }
.water-proof--evaporation article > span { font-size: 10px; font-weight: 800; }

.water-cold-glass .air-field { fill: #fffdf866; stroke: var(--water-ink); stroke-width: 3; stroke-dasharray: 9 7; }
.water-cold-glass .air-vapour { fill: var(--water-yellow); stroke: var(--water-ink); stroke-width: 2; }
.water-cold-glass .air-arrow { fill: none; stroke: var(--water-accent-dark); stroke-width: 4; stroke-dasharray: 8 7; marker-end: url(#waterArrow); }
.water-cold-glass .cold-water { fill: #9ce5ff; stroke: var(--water-ink); stroke-width: 3; }
.outside-drops { fill: #38bdf8; stroke: var(--water-ink); stroke-width: 2; }
.water-cold-glass > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.water-cold-glass > div span { padding: 6px 9px; border: 2px solid var(--water-ink); border-radius: 12px; background: var(--water-white); font-size: 11px; font-weight: 800; }

.water-proof--loop > div { display: grid; grid-template-columns: 1fr .8fr 1fr .8fr 1fr; align-items: center; gap: 8px; }
.water-proof--loop article { min-width: 0; padding: 16px 8px; border: 2px solid var(--water-ink); border-radius: 18px; text-align: center; background: var(--water-white); }
.water-proof--loop article > i { width: 50px; height: 50px; margin: 0 auto 8px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 27px; }
.water-proof--loop article > strong,
.water-proof--loop article > small { display: block; }
.water-proof--loop article.is-solid > i { background: var(--water-blue); }
.water-proof--loop article.is-liquid > i { color: #38bdf8; background: #dff5ff; }
.water-proof--loop article.is-gas > i { color: var(--water-yellow); background: #fff8d7; }
.water-proof--loop > div > span { min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 6px; text-align: center; }
.water-proof--loop > div > span b { font-size: 10px; overflow-wrap: anywhere; }
.water-proof--loop > div > span i,
.water-proof--loop > div > span em { font-size: 24px; font-style: normal; }
.water-proof--loop.is-compact figcaption { margin-bottom: 10px; }
.water-proof--loop.is-compact article { padding: 10px 5px; }
.water-proof--loop.is-compact article > i { width: 38px; height: 38px; font-size: 20px; }

.water-lab-launch > article {
  min-height: 610px;
  border: 2px solid var(--water-ink);
  border-radius: 34px;
  overflow: hidden;
  background: var(--water-white);
  display: grid;
  grid-template-columns: 1.25fr .75fr;
}
.water-lab-launch > article > div { padding: clamp(34px, 6vw, 80px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.water-lab-launch h1 { font-size: clamp(52px, 7vw, 94px); }
.water-lab-launch h1 em { color: var(--water-coral); }
.water-lab-launch p { max-width: 580px; font-size: 21px; line-height: 1.45; }
.water-lab-launch ol { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; }
.water-lab-launch li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; font-weight: 700; }
.water-lab-launch li i { width: 30px; height: 30px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: var(--water-support); }
.water-lab-launch > article > aside { position: relative; display: grid; align-items: end; justify-items: center; background: var(--water-accent); overflow: hidden; }
.water-lab-launch > article > aside > i { position: absolute; width: 120%; aspect-ratio: 1; bottom: -35%; border-radius: 46% 54% 52% 48%; background: var(--water-pink); }
.water-lab-teacher { position: relative; width: 133%; max-width: none; z-index: 1; }

.water-lab-card { border: 2px solid var(--water-ink); border-radius: 34px; overflow: hidden; background: var(--water-white); }
.water-lab-progress { min-height: 72px; padding: 12px 24px; border-bottom: 2px solid var(--water-ink); display: flex; align-items: center; gap: 20px; background: var(--water-support); }
.water-lab-progress ol { flex: 1; list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; position: relative; }
.water-lab-progress ol::before { content: ''; height: 3px; position: absolute; right: 18px; left: 18px; background: var(--water-ink); }
.water-lab-progress li { z-index: 1; }
.water-lab-progress li i { width: 34px; height: 34px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-white); font-style: normal; font-size: 11px; font-weight: 800; }
.water-lab-progress li.is-done i { background: var(--water-lime); }
.water-lab-progress li.is-current i { background: var(--water-accent); transform: scale(1.1); }
.water-lab-progress p { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.water-lab-progress p strong { font-size: 25px; }
.water-lab-card > header { padding: clamp(25px, 4vw, 48px) clamp(25px, 5vw, 64px) 24px; }
.water-lab-card > header h1 { margin: 10px 0; font-size: clamp(38px, 5vw, 66px); line-height: .96; }
.water-lab-card > header p { max-width: 850px; margin: 0 0 8px; font-size: clamp(19px, 2vw, 25px); font-weight: 700; line-height: 1.3; }
.water-lab-card > header small { font-size: 16px; }
.water-lab-visual { padding: 28px clamp(20px, 5vw, 64px); background: var(--water-support); border-block: 2px solid var(--water-ink); }
.water-lab-proof { width: min(760px, 100%); margin: 0 auto; }
.water-volume-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.water-volume-pair article { text-align: center; }
.water-volume-pair article > strong,
.water-volume-pair article > small { display: block; }
.water-volume-pair > i { font-style: normal; font-size: 46px; }
.water-lab-proof--fog .mirror { fill: #dff5ff; stroke: var(--water-ink); stroke-width: 4; }
.water-lab-proof--fog .zoom { fill: var(--water-white); stroke: var(--water-ink); stroke-width: 4; }
.water-lab-proof--fog .zoom-line { fill: none; stroke: var(--water-ink); stroke-width: 3; }
.water-lab-proof--fog figcaption { text-align: center; display: grid; gap: 3px; }
.water-lab-proof > .water-proof { margin: 0 auto; }

.water-lab-answer { padding: 28px clamp(20px, 5vw, 64px); }
.water-lab-answer > div { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.water-lab-answer > div > button { min-height: 94px; padding: 14px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; text-align: left; }
.water-lab-answer > div > button:hover:not(:disabled) { background: #fff8d7; transform: translateY(-2px); }
.water-lab-answer > div > button.is-selected { background: var(--water-pink); }
.water-lab-answer > div > button.is-revealed { background: var(--water-lime); }
.water-lab-answer button i { width: 32px; height: 32px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.water-lab-answer details { margin-top: 15px; }
.water-lab-answer summary { width: max-content; max-width: 100%; padding: 8px 12px; border: 2px solid var(--water-ink); border-radius: 12px; background: var(--water-support); font-weight: 800; cursor: pointer; }
.water-attempt-history { margin-top: 14px; padding: 13px; border-left: 6px solid var(--water-coral); background: #ffe7e2; }
.water-attempt-history > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-attempt-history ol { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.water-attempt-history li { display: flex; align-items: center; gap: 7px; }
.water-attempt-history li i { font-style: normal; font-size: 10px; }
.water-lab-feedback { padding: 22px clamp(20px, 5vw, 64px); border-top: 2px solid var(--water-ink); display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; background: #ffe7e2; }
.water-lab-feedback.is-correct { background: var(--water-support); }
.water-lab-feedback.is-supported { background: #fff8d7; }
.water-lab-feedback > i { width: 48px; height: 48px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-white); font-style: normal; font-size: 24px; }
.water-lab-feedback p { margin: 5px 0 0; line-height: 1.4; }
.water-lab-feedback button { background: var(--water-coral); }
.water-lab-feedback.is-correct button { background: var(--water-accent); }

.water-lab-finish > article,
.water-cards-finish > article { border: 2px solid var(--water-ink); border-radius: 34px; background: var(--water-white); padding: clamp(30px, 6vw, 76px); text-align: center; }
.water-party { height: 190px; display: flex; justify-content: center; align-items: end; gap: clamp(4px, 3vw, 36px); }
.water-party img { width: clamp(105px, 16vw, 190px); height: 100%; object-fit: contain; object-position: bottom; }
.water-party img:nth-child(2) { animation: water-jump 1.1s ease-in-out infinite alternate; }
.water-party img:nth-child(1) { animation: water-jump 1.25s .15s ease-in-out infinite alternate; }
.water-party img:nth-child(3) { animation: water-jump 1.4s .3s ease-in-out infinite alternate; }
.water-lab-finish h1,
.water-cards-finish h1 { font-size: clamp(45px, 6vw, 82px); }
.water-lab-finish h1 em,
.water-cards-finish h1 em { color: var(--water-accent-dark); }
.water-lab-finish > article > p { font-size: 21px; }
.water-lab-finish ul { width: min(650px, 100%); margin: 24px auto; padding: 0; list-style: none; display: grid; gap: 9px; text-align: left; }
.water-lab-finish li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; font-weight: 800; }
.water-lab-finish li i { width: 28px; height: 28px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-lime); font-style: normal; }
.water-lab-finish > article > div:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.water-lab-finish button:first-child { background: var(--water-support); }

.water-flashcards { background: var(--water-accent); }
.water-flashcards .water-stage-rail { background: var(--water-white); }
.water-cards-stage > article { border: 2px solid var(--water-ink); border-radius: 34px; overflow: hidden; background: var(--water-white); }
.water-cards-progress { min-height: 68px; padding: 12px 22px; border-bottom: 2px solid var(--water-ink); display: flex; align-items: center; gap: 18px; background: var(--water-support); }
.water-cards-progress ol { flex: 1; list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; gap: 5px; }
.water-cards-progress li i { width: 29px; height: 29px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; background: var(--water-white); }
.water-cards-progress li.is-current i { background: var(--water-yellow); transform: scale(1.1); }
.water-cards-progress li.is-done i { background: var(--water-lime); }
.water-cards-progress p { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.water-cards-progress p strong { font-size: 24px; }
.water-cards-stage > article > header { padding: 28px 30px 10px; text-align: center; }
.water-cards-stage > article > header h1 { margin: 8px 0; font-size: clamp(36px, 5vw, 62px); }
.water-cards-stage > article > header p { margin: 0; font-size: 17px; }
.water-memory-stage { padding: 26px clamp(20px, 5vw, 64px) 34px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 30px; }
.water-memory-card { min-height: 390px; padding: 0; border: 2px solid var(--water-ink); border-radius: 28px; background: transparent; perspective: 1300px; }
.water-memory-card > span { min-height: 390px; position: relative; display: block; transform-style: preserve-3d; transition: transform .55s ease; }
.water-memory-card.is-flipped > span { transform: rotateY(180deg); }
.water-memory-front,
.water-memory-back { position: absolute; inset: 0; padding: clamp(30px, 5vw, 60px); border-radius: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; backface-visibility: hidden; }
.water-memory-front { background: var(--water-yellow); }
.water-memory-card.is-tone-1 .water-memory-front { background: var(--water-pink); }
.water-memory-card.is-tone-2 .water-memory-front { background: var(--water-lime); }
.water-memory-card.is-tone-3 .water-memory-front { background: var(--water-coral); }
.water-memory-back { transform: rotateY(180deg); background: var(--water-support); }
.water-memory-front > strong,
.water-memory-back > strong { font-size: clamp(36px, 5vw, 66px); line-height: 1; }
.water-memory-front small,
.water-memory-back small { font-weight: 800; letter-spacing: .09em; }
.water-memory-front em,
.water-memory-back em { font-style: normal; font-size: 18px; }
.water-memory-back em span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-memory-front b,
.water-memory-back b { padding-top: 12px; border-top: 2px solid var(--water-ink); font-family: 'Bricolage Grotesque'; font-size: 14px; }
.water-memory-stage > aside { text-align: center; }
.water-memory-stage > aside img { width: 100%; height: 210px; object-fit: contain; }
.water-memory-stage > aside strong { display: block; margin-top: 8px; }
.water-cards-stage > article > footer { min-height: 84px; padding: 14px 22px; border-top: 2px solid var(--water-ink); display: flex; justify-content: center; gap: 12px; background: var(--water-support); }
.water-cards-stage > article > footer > p { margin: 0; display: flex; align-items: center; gap: 8px; }
.water-cards-stage > article > footer > p i { width: 26px; height: 26px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.water-cards-stage > article > footer button { min-height: 52px; padding: 10px 20px; border: 2px solid var(--water-ink); border-radius: 16px; display: inline-flex; align-items: center; gap: 12px; font-weight: 800; }
.water-cards-stage button.is-review { background: var(--water-pink); }
.water-cards-stage button.is-known { background: var(--water-lime); }
.water-cards-finish > article > div:first-child { height: 180px; display: flex; justify-content: center; align-items: end; gap: 10px; }
.water-cards-finish > article > div:first-child img { width: 180px; height: 180px; object-fit: contain; }
.water-cards-finish > article > div:first-child span { width: 105px; height: 105px; margin-bottom: 25px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-yellow); font: 800 40px/1 'Bricolage Grotesque'; }
.water-cards-finish > article > div:first-child small { display: block; font: 700 12px/1 'Bricolage Grotesque'; }
.water-cards-finish dl { display: flex; justify-content: center; gap: 15px; }
.water-cards-finish dl div { min-width: 160px; padding: 16px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-support); }
.water-cards-finish dt { font: 800 32px/1 'Bricolage Grotesque'; }
.water-cards-finish dd { margin: 5px 0 0; }
.water-cards-finish footer { margin-top: 25px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.water-summary > article,
.water-guide > article { border: 2px solid var(--water-ink); border-radius: 34px; overflow: hidden; background: var(--water-white); }
.water-summary > article > header { min-height: 310px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 210px; align-items: center; gap: 24px; background: var(--water-support); }
.water-summary h1 { margin: 12px 0; font-size: clamp(46px, 6vw, 82px); }
.water-summary h1 em { color: var(--water-accent-dark); }
.water-summary > article > header p { max-width: 660px; font-size: 19px; }
.water-summary > article > header aside { position: relative; display: grid; justify-items: center; }
.water-summary > article > header aside img { width: 190px; height: 190px; object-fit: contain; }
.water-summary > article > header aside b { position: absolute; right: 0; bottom: 0; width: 76px; height: 76px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-yellow); font-size: 31px; }
.water-summary > article > header aside small { display: block; font: 700 10px/1 'Bricolage Grotesque'; }
.water-summary-example { display: grid; grid-template-columns: .65fr 1.35fr; border-top: 2px solid var(--water-ink); border-bottom: 2px solid var(--water-ink); }
.water-summary-example > div { padding: clamp(24px, 4vw, 48px); }
.water-summary-example > div:first-child { background: var(--water-yellow); }
.water-summary-example h2 { margin: 9px 0; font-size: clamp(32px, 4vw, 52px); }
.water-summary-example p { font-size: 18px; line-height: 1.45; }
.water-summary-example .water-proof { max-width: 680px; }
.water-summary-route { padding: clamp(28px, 5vw, 62px); }
.water-summary-route h2 { margin: 8px 0 26px; font-size: clamp(32px, 4vw, 50px); }
.water-summary-route ol { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.water-summary-route ol::before { content: ''; height: 4px; position: absolute; top: 27px; right: 8%; left: 8%; background: var(--water-ink); }
.water-summary-route li { z-index: 1; min-width: 0; padding: 16px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); }
.water-summary-route li i { width: 54px; height: 54px; margin-bottom: 16px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-accent); font-style: normal; font-weight: 800; }
.water-summary-route li strong { display: block; font-size: 19px; }
.water-summary-route li p { margin: 6px 0 0; line-height: 1.4; }
.water-summary-rule { padding: clamp(28px, 5vw, 60px); border-top: 2px solid var(--water-ink); background: #fff8d7; }
.water-summary-rule > strong { display: block; max-width: 900px; margin: 8px 0 25px; font-size: clamp(23px, 3vw, 38px); line-height: 1.12; }
.water-summary-rule .water-proof { max-width: 880px; }
.water-summary-say { padding: 26px clamp(28px, 5vw, 60px); border-top: 2px solid var(--water-ink); display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 24px; background: var(--water-pink); }
.water-summary-say img { width: 130px; height: 130px; object-fit: contain; }
.water-summary-say strong { display: block; margin-top: 7px; font-size: clamp(23px, 3vw, 38px); }
.water-summary-say p { margin: 7px 0 0; }

.water-guide-hero { min-height: 460px; display: grid; grid-template-columns: 1.35fr .65fr; background: var(--water-support); }
.water-guide-hero > div { padding: clamp(32px, 6vw, 75px); }
.water-guide h1 { font-size: clamp(48px, 6vw, 84px); }
.water-guide h1 em { color: var(--water-accent-dark); }
.water-guide-hero > div > p { max-width: 650px; font-size: 20px; line-height: 1.45; }
.water-guide-hero dl { display: grid; grid-template-columns: 1.5fr .6fr .6fr; gap: 10px; margin: 25px 0 0; }
.water-guide-hero dl div { padding: 14px; border: 2px solid var(--water-ink); border-radius: 16px; background: var(--water-white); }
.water-guide-hero dt { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.water-guide-hero dd { margin: 5px 0 0; font-weight: 700; }
.water-guide-hero > aside { padding: 20px; display: flex; align-items: end; justify-content: center; background: var(--water-accent); overflow: hidden; }
.water-guide-hero > aside img { width: 42%; max-height: 250px; object-fit: contain; }
.water-guide-hero > aside span { min-width: 118px; margin-bottom: 45px; padding: 15px 10px; border: 2px solid var(--water-ink); border-radius: 18px; display: grid; text-align: center; background: var(--water-yellow); }
.water-guide-hero > aside small { margin-top: 4px; }
.water-guide-ready,
.water-guide-cheat,
.water-guide-session,
.water-guide-check { padding: clamp(30px, 5vw, 66px); border-top: 2px solid var(--water-ink); }
.water-guide section > header h2 { margin: 8px 0; font-size: clamp(31px, 4vw, 50px); }
.water-guide section > header p { max-width: 720px; margin: 0; font-size: 17px; }
.water-guide-ready ol { margin: 28px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.water-guide-ready li { padding: 18px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-support); display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.water-guide-ready li i,
.water-guide-session > ol > li > header > i,
.water-guide-check > ol > li > i { width: 32px; height: 32px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-white); font-style: normal; font-size: 11px; font-weight: 800; }
.water-guide-ready li p { margin: 6px 0 0; line-height: 1.4; }
.water-guide-cheat { background: #fff8d7; }
.water-guide-cheat dl { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.water-guide-cheat dl div { padding: 18px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); }
.water-guide-cheat dt { display: flex; align-items: center; gap: 9px; font: 800 20px/1.1 'Bricolage Grotesque'; }
.water-guide-cheat dt i { width: 30px; height: 30px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 'Bricolage Grotesque'; }
.water-guide-cheat dd { margin: 8px 0 0; line-height: 1.4; }
.water-guide-session > ol { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 22px; }
.water-guide-session > ol > li { border: 2px solid var(--water-ink); border-radius: 22px; overflow: hidden; }
.water-guide-session > ol > li > header { padding: 18px 22px; display: flex; align-items: center; gap: 12px; background: var(--water-support); }
.water-guide-session h3 { margin: 3px 0 0; font-size: 28px; }
.water-guide-session header span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-guide-setup { margin: 0; padding: 18px 22px; border-top: 2px solid var(--water-ink); }
.water-guide-setup strong,
.water-guide-session footer strong { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .08em; }
.water-guide-session blockquote { margin: 0; padding: 22px clamp(22px, 5vw, 55px); border-block: 2px solid var(--water-ink); background: var(--water-pink); }
.water-guide-session blockquote span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-guide-session blockquote p { margin: 8px 0; font: 800 clamp(20px, 2.5vw, 30px)/1.3 'Bricolage Grotesque'; }
.water-guide-work { display: grid; grid-template-columns: 1fr 1fr; }
.water-guide-work section { padding: 22px; }
.water-guide-work section + section { border-left: 2px solid var(--water-ink); background: #fff8d7; }
.water-guide-work span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-guide-work p { margin: 7px 0 0; line-height: 1.45; }
.water-guide-session > ol > li > footer { padding: 18px 22px; border-top: 2px solid var(--water-ink); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--water-support); }
.water-guide-session > ol > li > footer p { margin: 0; line-height: 1.4; }
.water-guide-check { background: var(--water-support); }
.water-guide-check > ol { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.water-guide-check > ol > li { padding: 18px; border: 2px solid var(--water-ink); border-radius: 18px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; background: var(--water-white); }
.water-guide-check details { margin-top: 8px; }
.water-guide-check summary { width: max-content; padding: 6px 10px; border: 2px solid var(--water-ink); border-radius: 10px; background: var(--water-yellow); font-weight: 800; }
.water-guide-finish { padding: clamp(34px, 6vw, 74px); border-top: 2px solid var(--water-ink); text-align: center; background: var(--water-pink); }
.water-guide-finish > div { height: 160px; display: flex; justify-content: center; align-items: end; gap: 12px; }
.water-guide-finish > div img { width: 170px; height: 160px; object-fit: contain; }
.water-guide-finish > div span { font-size: 50px; color: var(--water-accent-dark); }
.water-guide-finish > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.water-guide-finish h2 { margin: 14px 0 24px; font-size: clamp(38px, 5vw, 66px); line-height: .94; }
.water-guide-finish h2 strong,
.water-guide-finish h2 em { display: block; font-style: normal; }
.water-guide-finish h2 em { color: var(--water-accent-dark); }
.water-guide-finish > section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.water-guide-finish > section article { padding: 17px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); display: grid; grid-template-columns: 36px 1fr; gap: 9px; text-align: left; }
.water-guide-finish > section i { width: 34px; height: 34px; border: 2px solid var(--water-ink); border-radius: 50%; display: grid; place-items: center; background: var(--water-lime); font-style: normal; }
.water-guide-finish > section p { margin: 0; line-height: 1.4; }
.water-guide-finish > section p strong { display: block; font-size: 11px; }
.water-guide-finish blockquote { max-width: 850px; margin: 22px auto 0; padding: 22px; border: 2px solid var(--water-ink); border-radius: 18px; background: var(--water-white); }
.water-guide-finish blockquote span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.water-guide-finish blockquote p { font: 800 clamp(20px, 2.5vw, 28px)/1.3 'Bricolage Grotesque'; }
.water-guide-finish blockquote strong { display: block; color: var(--water-accent-dark); }
.water-guide-source { padding: 18px clamp(24px, 5vw, 60px); border-top: 2px solid var(--water-ink); display: grid; gap: 5px; background: var(--water-white); }
.water-guide-source a { color: var(--water-accent-dark); font-weight: 800; }

@keyframes water-jump { to { transform: translateY(-14px) rotate(2deg); } }

@media (max-width: 900px) {
  .water-course-header { min-height: 64px; }
  .water-course-header > div { display: grid; gap: 1px; }
  .water-course-header small { display: none; }
  .water-stage-rail button { min-height: 56px; gap: 5px; }
  .water-welcome-grid { grid-template-columns: 1fr; }
  .water-welcome-hero { grid-row: auto; min-height: 450px; }
  .water-welcome-goals,
  .water-welcome-progress { grid-column: auto; }
  .water-lesson-card { grid-template-columns: 1fr; }
  .water-card-visual { padding-top: 32px; }
  .water-memory-stage { grid-template-columns: 1fr 170px; }
  .water-summary-example { grid-template-columns: 1fr; }
  .water-summary-route ol { grid-template-columns: repeat(2, 1fr); }
  .water-summary-route ol::before { display: none; }
  .water-guide-hero { grid-template-columns: 1fr; }
  .water-guide-hero > aside { min-height: 260px; }
  .water-guide-ready ol { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .water-course { padding-inline: 10px; }
  .water-course-header strong { font-size: 15px; }
  .water-course-header span { font-size: 10px; }
  .water-stage-rail { border-radius: 0 0 16px 16px; }
  .water-stage-rail button { min-width: 0; padding: 6px 2px; flex-direction: column; font-size: 11px; }
  .water-stage-rail i { width: 25px; height: 25px; font-size: 9px; }
  .water-welcome-hero { min-height: 0; grid-template-columns: 1fr; }
  .water-welcome-hero > div { padding: 28px 22px; }
  .water-welcome-hero h1,
  .water-lesson-card h1,
  .water-lab-launch h1,
  .water-lab-finish h1,
  .water-cards-finish h1,
  .water-summary h1,
  .water-guide h1 { font-size: clamp(40px, 13vw, 60px); }
  .water-welcome-hero > aside { min-height: 300px; }
  .water-welcome-teacher { width: 98%; }
  .water-welcome-progress ol { flex-wrap: wrap; justify-content: flex-start; }
  .water-destinations { grid-template-columns: 1fr; }
  .water-destinations button { min-height: 108px; }
  .water-card-number { top: 15px; right: 18px; font-size: 50px; }
  .water-card-copy { padding: 28px 20px; }
  .water-card-question { padding: 16px; }
  .water-lesson-card > footer { grid-template-columns: 1fr 1fr; gap: 10px; }
  .water-lesson-card > footer p { display: none; }
  .water-lesson-card > footer button { max-width: 100%; font-size: 13px; }
  .water-lesson-card > footer button span { overflow-wrap: anywhere; }
  .water-property-grid,
  .water-three-scenes { grid-template-columns: 1fr; }
  .water-property-grid article,
  .water-three-scenes article { display: grid; grid-template-columns: 100px 1fr; align-items: center; text-align: left; }
  .water-property-grid article svg,
  .water-three-scenes article svg { grid-row: span 2; }
  .water-property-grid dl { width: 100%; }
  .water-proof--timeline ol { grid-template-columns: 1fr; }
  .water-proof--timeline ol::before { width: 4px; height: auto; top: 12%; bottom: 12%; right: auto; left: 50%; }
  .water-proof--reverse > div { grid-template-columns: 1fr; }
  .water-reverse-arrows { transform: rotate(90deg); margin: -14px 0; }
  .water-reverse-arrows b,
  .water-reverse-arrows em { transform: rotate(-90deg); }
  .water-proof--evaporation > div { grid-template-columns: 1fr; }
  .water-proof--loop > div { grid-template-columns: 1fr; }
  .water-proof--loop > div > span { grid-template-columns: auto auto; justify-content: center; }
  .water-proof--loop > div > span i,
  .water-proof--loop > div > span em { transform: rotate(90deg); }
  .water-lab-launch > article { min-height: 0; grid-template-columns: 1fr; }
  .water-lab-launch > article > div { padding: 30px 22px; }
  .water-lab-launch > article > aside { min-height: 280px; }
  .water-lab-teacher { width: 95%; }
  .water-lab-progress { padding: 10px 12px; }
  .water-lab-progress li i { width: 27px; height: 27px; font-size: 9px; }
  .water-lab-progress p { display: none; }
  .water-volume-pair { grid-template-columns: 1fr; }
  .water-volume-pair > i { transform: rotate(90deg); }
  .water-lab-answer > div { grid-template-columns: 1fr; }
  .water-lab-answer > div > button { min-height: 70px; }
  .water-lab-feedback { grid-template-columns: 42px 1fr; }
  .water-lab-feedback button { grid-column: 1 / -1; justify-self: stretch; }
  .water-party { height: 130px; }
  .water-memory-stage { grid-template-columns: 1fr; padding-inline: 14px; }
  .water-memory-stage > aside { display: grid; grid-template-columns: 100px 1fr; align-items: center; text-align: left; }
  .water-memory-stage > aside img { height: 100px; }
  .water-memory-card,
  .water-memory-card > span { min-height: 360px; }
  .water-memory-front > strong,
  .water-memory-back > strong { font-size: clamp(30px, 10vw, 45px); }
  .water-cards-stage > article > footer > p { flex-wrap: wrap; justify-content: center; font-size: 12px; }
  .water-cards-finish > article > div:first-child img { width: 105px; }
  .water-cards-finish > article > div:first-child span { width: 80px; height: 80px; font-size: 30px; }
  .water-cards-finish dl { display: grid; }
  .water-summary > article > header { grid-template-columns: 1fr; }
  .water-summary > article > header aside { display: none; }
  .water-summary-route ol { grid-template-columns: 1fr; }
  .water-summary-say { grid-template-columns: 80px 1fr; padding-inline: 18px; }
  .water-summary-say img { width: 80px; height: 90px; }
  .water-guide-hero dl { grid-template-columns: 1fr; }
  .water-guide-hero > aside { min-height: 220px; }
  .water-guide-hero > aside img { width: 36%; }
  .water-guide-cheat dl { grid-template-columns: 1fr; }
  .water-guide-work { grid-template-columns: 1fr; }
  .water-guide-work section + section { border-left: 0; border-top: 2px solid var(--water-ink); }
  .water-guide-session > ol > li > footer { grid-template-columns: 1fr; }
  .water-guide-finish > div { height: 110px; }
  .water-guide-finish > div img { width: 110px; height: 110px; }
  .water-guide-finish > section { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .water-course *,
  .water-course *::before,
  .water-course *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Sciences skin for the approved Maths reference course. Structure and stage
   components come from the canonical Maths renderer; only these tokens and
   the water proof drawings differ. */
.science-water-course {
  --violet: #0fbc53;
  --violet-2: #0a8f3d;
  --water-accent: #0fbc53;
  --water-accent-dark: #087b38;
  --water-support: #e5f8eb;
  --water-ink: #29272d;
  --water-cream: #fbf6eb;
  --water-white: #fffdf8;
  --water-coral: #fd7666;
  --water-pink: #fdc8e9;
  --water-yellow: #f6cc24;
  --water-lime: #b0ee0b;
  --water-blue: #86d9f6;
  /* Full TGO palette for lesson evidence. Green remains the Sciences skin;
     proof drawings use the whole brand system to encode meaning. */
  --science-ice: #2f73d9;
  --science-ice-soft: #e2efff;
  --science-water: #2bb7c9;
  --science-water-soft: #e0f8fb;
  --science-gas: #9267ea;
  --science-gas-soft: #f2ebff;
  --science-heat: #f29c45;
  --science-heat-soft: #fff0dc;
  --science-warm: #fd7666;
  --science-warm-soft: #ffe7e2;
  --science-cool: #5b5bd6;
  --science-cool-soft: #ebeaff;
  --science-change: #f6cc24;
  --science-change-soft: #fff5c8;
  --science-model: #f35aa5;
  --science-model-soft: #ffe5f2;
  --science-evidence: #00a98f;
  --science-evidence-soft: #dff8f2;
  --science-verified: #b0ee0b;
  --science-verified-soft: #f2ffd3;
  --course-banner: #0fbc53;
  --kid-joy-surface: #0fbc53;
}
.science-water-course [tabindex='-1']:focus { outline: none; }

.science-water-course .kid-lesson-welcome__hero { background-color: var(--water-support); }
.science-water-course .kid-lesson-welcome__teacher > span,
.science-water-course .kid-lab-launch-teacher { background: var(--water-support); }
.science-water-course .kid-lesson-welcome__teacher > span,
.science-water-course .kid-lab-launch-teacher > span { background: color-mix(in srgb, var(--water-accent) 52%, white); }
.science-water-course .kid-cards-page { background: var(--water-support); }
.science-water-course .kid-step-lab-friend > img { width: min(100%, 230px); max-height: 300px; object-fit: contain; }

.maths-pilot-sidebar.is-sciences { background: linear-gradient(180deg, #078d3b 0%, #0fbc53 58%, #087b38 100%); }
.maths-pilot-header[data-course-theme='sciences'] .maths-pilot-topbar > div > span {
  display: flex;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 14px 0 11px;
  border-left: 6px solid #0fbc53;
  border-radius: 9px 18px 15px 10px;
  background: #e5f8eb;
  color: #29272d;
  font-weight: 900;
}
.maths-pilot-header[data-course-theme='sciences'] .maths-pilot-topbar > div > span i { color: #0fbc53; }
.maths-pilot-header[data-course-theme='sciences'] .maths-pilot-points > span b { background: linear-gradient(90deg, #0fbc53, #ffc928); }
.maths-pilot-course[data-course-theme='sciences'] > .division-module-nav button.is-current {
  background: #e5f8eb !important;
  background-image: none !important;
  color: #29272d !important;
  transform: none;
}
.maths-pilot-course[data-course-theme='sciences'] > .division-module-nav button i,
.maths-pilot-course[data-course-theme='sciences'] > .division-module-nav button.is-current i {
  background: #0fbc53 !important;
  color: #fff !important;
}
.maths-pilot-course[data-course-theme='sciences'] .maths-pilot-outcomes li:first-child > i { background: #0fbc53; }
.maths-pilot-course[data-course-theme='sciences'] .maths-pilot-outcomes li small,
.maths-pilot-course[data-course-theme='sciences'] .maths-pilot-progress > div strong { color: #0f9f51; }
.maths-pilot-course[data-course-theme='sciences'] .maths-pilot-progress path { stroke: #0fbc53; }
/* Cartes keeps the canonical white rail while the selected item follows the
   same support-and-accent behavior as Arts, expressed in Sciences colours. */
body:has(.division-course-header.is-flashcards[data-course-theme='sciences']),
#app:has(.division-course-header.is-flashcards[data-course-theme='sciences']),
.division-course-header.is-flashcards[data-course-theme='sciences'] {
  background: #e5f8eb !important;
  background-image: none !important;
}
body:has(.division-course-header.is-flashcards[data-course-theme='sciences']) .science-water-course.division-flashcards-page,
.maths-pilot-course[data-course-theme='sciences'].division-flashcards-page,
.maths-pilot-course[data-course-theme='sciences'].division-flashcards-page .kid-cards-page {
  background: var(--water-support) !important;
  background-image: none !important;
}
.maths-pilot-course[data-course-theme='sciences'].division-flashcards-page > .division-module-nav {
  background: #fff !important;
  background-image: none !important;
}
body:has(.division-course-header.is-flashcards[data-course-theme='sciences']) .maths-pilot-course[data-course-theme='sciences'].division-flashcards-page > .division-module-nav button.is-current {
  background: #e5f8eb !important;
  background-image: none !important;
  color: var(--water-ink) !important;
}
body:has(.division-course-header.is-flashcards[data-course-theme='sciences']) .maths-pilot-course[data-course-theme='sciences'].division-flashcards-page > .division-module-nav button.is-current :where(strong, small) { color: var(--water-ink); }
body:has(.division-course-header.is-flashcards[data-course-theme='sciences']) .maths-pilot-course[data-course-theme='sciences'].division-flashcards-page > .division-module-nav button.is-current i {
  background: var(--water-accent) !important;
  color: #fff !important;
}

.science-water-course :where(.kid-step-visual, .kid-lab-visual, .kid-summary-example-visual) .water-proof,
.science-water-course .kid-lab-visual .water-lab-proof { width: min(100%, 980px); margin: 0 auto; }
.science-water-course .kid-step-visual .water-proof { padding: clamp(20px, 3vw, 38px); border-radius: 30px; background: var(--water-white); }
.science-water-course .kid-lab-visual { background: var(--water-support); }
.science-water-course .kid-summary-example-visual { display: block; }
.science-water-course .kid-summary-example-visual .water-proof { width: 100%; }

/* Sciences proof laboratory -------------------------------------------------
   Every Leçon card separates cause, observation and inference. The fills are
   semantic TGO colors, not a monochrome subject wash. */
.science-water-course .science-proof {
  color: var(--water-ink);
  overflow: hidden;
}
.science-water-course .science-proof figcaption span { color: var(--water-accent-dark); }
.science-water-course .science-proof figcaption strong { line-height: 1.08; }
.science-water-course .science-proof svg { display: block; width: 100%; height: auto; }
.science-water-course .science-proof article,
.science-water-course .science-proof section { min-width: 0; }
.science-water-course .science-proof :where(.science-bench-line, .science-ice-detail, .science-pour-arrow, .science-compress-arrow, .science-syringe, .science-water-level, .science-surface-mark, .science-measure-lines, .science-level-guide) {
  fill: none;
  stroke: var(--water-ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.science-water-course .science-proof :where(.science-vessel, .science-flask, .science-tray, .science-dish, .science-cylinder) {
  fill: var(--water-white);
  stroke: var(--water-ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.science-water-course .science-proof .science-ice {
  fill: var(--science-ice);
  stroke: var(--water-ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.science-water-course .science-proof .science-ice-detail { stroke: var(--water-white); stroke-width: 3; }
.science-water-course .science-proof .science-water {
  fill: var(--science-water);
  stroke: var(--water-ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.science-water-course .science-proof .science-water-level,
.science-water-course .science-proof .science-surface-mark { stroke: var(--science-water); stroke-width: 6; }
.science-water-course .science-proof .science-measure-lines { stroke-width: 2; }
.science-water-course .science-proof :where(.science-gas-field, .science-air-chamber) {
  fill: var(--science-gas-soft);
  stroke: var(--science-gas);
  stroke-width: 4;
  stroke-dasharray: 9 7;
}
.science-water-course .science-proof .science-eye {
  fill: var(--water-white);
  stroke: var(--water-ink);
  stroke-width: 4;
}
.science-water-course .science-proof .science-eye-pupil { fill: var(--water-ink); }
.science-water-course .science-proof .science-eye-slash { fill: none; stroke: var(--science-warm); stroke-width: 9; stroke-linecap: round; }
.science-water-course .science-proof .science-drop {
  fill: var(--science-water);
  stroke: var(--water-ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.science-water-course .science-proof > p {
  border: 0;
  border-left: 7px solid var(--science-verified);
  border-radius: 0 16px 16px 0;
  background: var(--science-verified-soft);
}

/* Atomic Leçon cards: one state or one change per illustration. */
.science-water-course .science-atomic-proof figcaption { margin-bottom: 16px; }
.science-water-course .science-atomic-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, .62fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.science-water-course .science-atomic-route > article {
  min-height: 250px;
  padding: 14px;
  border: 2px solid var(--water-ink);
  border-radius: 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  text-align: center;
}
.science-water-course .science-atomic-route > article > span,
.science-water-course .science-atomic-focus > span {
  justify-self: center;
  padding: 5px 9px;
  border: 2px solid var(--water-ink);
  border-radius: 999px;
  background: var(--water-white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.science-water-course .science-atomic-route > article > strong,
.science-water-course .science-atomic-focus > strong { font-size: 17px; }
.science-water-course .science-atomic-route svg { max-height: 178px; }
.science-water-course .science-atomic-action {
  min-height: 112px;
  padding: 10px 5px;
  border: 2px solid var(--water-ink);
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  background: var(--science-change-soft);
  text-align: center;
}
.science-water-course .science-atomic-action b { max-width: 100%; font-size: 9px; white-space: nowrap; }
.science-water-course .science-atomic-action i { padding-block: 2px; color: var(--science-warm); font-style: normal; font-size: 34px; line-height: 1.2; }
.science-water-course .science-atomic-action small { font-size: 9px; font-weight: 800; }
.science-water-course .science-atomic-action.is-warming { background: var(--science-heat-soft); }
.science-water-course .science-atomic-action.is-cooling { background: var(--science-cool-soft); }
.science-water-course .is-solid-route > article:first-child { background: var(--science-model-soft); }
.science-water-course .is-solid-route > article:last-child { background: var(--science-ice-soft); }
.science-water-course .is-liquid-route > article:first-child { background: var(--science-water-soft); }
.science-water-course .is-liquid-route > article:last-child { background: var(--science-change-soft); }
.science-water-course .is-fusion-route > article:first-child,
.science-water-course .is-solidification-route > article:last-child { background: var(--science-ice-soft); }
.science-water-course .is-fusion-route > article:last-child,
.science-water-course .is-solidification-route > article:first-child { background: var(--science-water-soft); }
.science-water-course .is-vaporisation-route > article:first-child { background: var(--science-water-soft); }
.science-water-course .is-vaporisation-route > article:last-child,
.science-water-course .is-liquefaction-route > article:first-child { background: var(--science-gas-soft); }
.science-water-course .is-liquefaction-route > article:last-child { background: var(--science-model-soft); }
.science-water-course .science-atomic-focus {
  width: min(440px, 100%);
  min-height: 310px;
  margin: 0 auto;
  padding: 18px;
  border: 2px solid var(--water-ink);
  border-radius: 26px;
  display: grid;
  justify-items: center;
  align-items: center;
  background: var(--science-gas-soft);
  text-align: center;
}
.science-water-course .science-atomic-focus svg { max-height: 205px; }
.science-water-course .science-atomic-focus small { max-width: 310px; font-size: 11px; font-weight: 700; }
.science-water-course .science-proof .science-palm,
.science-water-course .science-proof .science-clock,
.science-water-course .science-proof .science-cold-wall {
  fill: none;
  stroke: var(--water-ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.science-water-course .science-proof .science-palm { stroke: var(--science-model); }
.science-water-course .science-proof .science-clock { stroke: var(--science-heat); }
.science-water-course .science-proof .science-cold-wall { stroke: var(--science-cool); stroke-width: 8; }

/* 01 · properties */
.science-water-course .science-property-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.science-water-course .science-property-proof > article {
  padding: 12px;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
}
.science-water-course .science-property-proof > article.is-solid { background: var(--science-ice-soft); }
.science-water-course .science-property-proof > article.is-liquid { background: var(--science-water-soft); }
.science-water-course .science-property-proof > article.is-gas { background: var(--science-gas-soft); }
.science-water-course .science-property-proof svg { max-height: 138px; }
.science-water-course .science-proof-step,
.science-water-course .science-state-observations article > span,
.science-water-course .science-melting-states li > span,
.science-water-course .science-reverse-proof article > span,
.science-water-course .science-state-loop article > span {
  display: inline-flex;
  padding: 5px 8px;
  border: 2px solid var(--water-ink);
  border-radius: 999px;
  background: var(--water-white);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.science-water-course .science-property-proof dl { margin: 8px 0 0; }
.science-water-course .science-property-proof dl div {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 2px;
  border-top: 1px solid color-mix(in srgb, var(--water-ink) 28%, transparent);
  font-size: 11px;
}
.science-water-course .science-property-proof dt { font-weight: 900; }
.science-water-course .science-property-proof dd { margin: 0; font-weight: 800; text-align: right; }
.science-water-course .science-property-proof dd i {
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--water-ink);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--science-verified);
  font-style: normal;
}
.science-water-course .science-property-proof article.is-gas dd i { background: var(--science-change); }
.science-water-course .science-property-proof article.is-liquid dl div:first-child dd i { background: var(--science-change); }
.science-water-course .science-model-chip {
  display: block;
  margin: -2px 0 8px;
  color: var(--science-gas);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

/* 02 · observation versus model */
.science-water-course .science-state-observations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.science-water-course .science-state-observations article {
  padding: 12px;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
  text-align: center;
}
.science-water-course .science-state-observations .is-solid { background: var(--science-ice-soft); }
.science-water-course .science-state-observations .is-liquid { background: var(--science-water-soft); }
.science-water-course .science-state-observations .is-gas { background: var(--science-gas-soft); }
.science-water-course .science-state-observations svg { max-height: 130px; }
.science-water-course .science-state-observations strong,
.science-water-course .science-state-observations small { display: block; }
.science-water-course .science-state-observations strong { font-size: 16px; }
.science-water-course .science-state-observations small { margin-top: 3px; font-weight: 700; }
.science-water-course .science-droplet-check {
  margin-top: 12px;
  padding: 12px;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
  background: var(--science-model-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.science-water-course .science-droplet-check > div { min-height: 96px; padding: 10px; border-radius: 15px; background: var(--science-water-soft); }
.science-water-course .science-droplet-check > div.is-invisible { background: var(--science-gas-soft); display: grid; align-content: center; }
.science-water-course .science-droplet-check svg { float: left; width: 42%; max-width: 115px; margin-right: 8px; }
.science-water-course .science-droplet-check span,
.science-water-course .science-droplet-check strong,
.science-water-course .science-droplet-check small { display: block; }
.science-water-course .science-droplet-check span { margin-top: 7px; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.science-water-course .science-droplet-check > b { color: var(--science-warm); font-size: 34px; }

/* 03 · fusion timeline */
.science-water-course .science-heat-route {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 2px solid var(--water-ink);
  border-radius: 18px;
  background: var(--science-heat-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.science-water-course .science-heat-route span { font-size: 11px; font-weight: 900; }
.science-water-course .science-heat-route span i {
  width: 25px;
  height: 25px;
  border: 2px solid var(--water-ink);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--science-warm);
  font-style: normal;
}
.science-water-course .science-heat-route > b { color: var(--science-warm); font-size: 26px; }
.science-water-course .science-heat-route > strong { padding: 6px 10px; border-radius: 999px; background: var(--science-change); font-size: 12px; }
.science-water-course .science-melting-states {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.science-water-course .science-melting-states li {
  padding: 12px;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
  text-align: center;
}
.science-water-course .science-melting-states li.is-before { background: var(--science-ice-soft); }
.science-water-course .science-melting-states li.is-change { background: var(--science-change-soft); }
.science-water-course .science-melting-states li.is-after { background: var(--science-water-soft); }
.science-water-course .science-melting-states svg { max-height: 128px; }
.science-water-course .science-melting-states strong,
.science-water-course .science-melting-states small { display: block; }
.science-water-course .science-melting-states strong { font-size: 15px; }
.science-water-course .science-melting-states small { margin-top: 3px; font-size: 11px; font-weight: 700; }

/* 04 · reversible changes */
.science-water-course .science-reverse-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.science-water-course .science-reverse-proof > article {
  padding: 12px;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
  text-align: center;
}
.science-water-course .science-reverse-proof > article.is-liquid { background: var(--science-water-soft); }
.science-water-course .science-reverse-proof > article.is-solid { background: var(--science-ice-soft); }
.science-water-course .science-reverse-proof article svg { max-height: 135px; }
.science-water-course .science-reverse-proof article strong { display: block; }
.science-water-course .science-reverse-lanes { display: grid; gap: 9px; }
.science-water-course .science-reverse-lanes > span {
  min-width: 0;
  padding: 10px 8px;
  border: 2px solid var(--water-ink);
  border-radius: 16px;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.science-water-course .science-reverse-lanes .is-cooling { background: var(--science-cool-soft); }
.science-water-course .science-reverse-lanes .is-warming { background: var(--science-heat-soft); }
.science-water-course .science-reverse-lanes b,
.science-water-course .science-reverse-lanes strong { font-size: 10px; }
.science-water-course .science-reverse-lanes i,
.science-water-course .science-reverse-lanes em { font-style: normal; }
.science-water-course .science-reverse-lanes i { padding-block: 2px; color: var(--science-warm); font-size: 25px; line-height: 1.2; }
.science-water-course .science-reverse-lanes i em + em { display: none; }

/* 05 · controlled evaporation comparison */
.science-water-course .science-constants {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.science-water-course .science-constants span {
  padding: 7px 10px;
  border: 2px solid var(--water-ink);
  border-radius: 999px;
  background: var(--science-evidence-soft);
  font-size: 9px;
  font-weight: 900;
}
.science-water-course .science-evaporation-test { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.science-water-course .science-evaporation-test > article {
  overflow: hidden;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
  background: var(--water-white);
}
.science-water-course .science-evaporation-test > article > header { padding: 10px 13px; border-bottom: 2px solid var(--water-ink); }
.science-water-course .science-evaporation-test > article.is-narrow > header { background: var(--science-change-soft); }
.science-water-course .science-evaporation-test > article.is-wide > header { background: var(--science-warm-soft); }
.science-water-course .science-evaporation-test header span,
.science-water-course .science-evaporation-test header strong { display: block; }
.science-water-course .science-evaporation-test header span { font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.science-water-course .science-evaporation-scenes {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr);
  align-items: center;
  gap: 5px;
}
.science-water-course .science-evaporation-scenes section { text-align: center; }
.science-water-course .science-evaporation-scenes small,
.science-water-course .science-evaporation-scenes b { display: block; }
.science-water-course .science-evaporation-scenes small { font-size: 8px; font-weight: 900; }
.science-water-course .science-evaporation-scenes b { font-size: 13px; }
.science-water-course .science-evaporation-scenes > i { color: var(--science-heat); font-style: normal; font-size: 28px; font-weight: 900; }
.science-water-course .science-evaporation-scenes svg { max-height: 142px; }

/* 06 · condensation: observation first, model second */
.science-water-course .science-condensation-proof { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.science-water-course .science-condensation-proof > section {
  overflow: hidden;
  border: 2px solid var(--water-ink);
  border-radius: 22px;
}
.science-water-course .science-condensation-observation { background: var(--science-water-soft); }
.science-water-course .science-condensation-model { background: var(--science-model-soft); }
.science-water-course .science-condensation-proof section > header {
  min-height: 65px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--water-ink);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--water-white);
}
.science-water-course .science-condensation-proof section > header > i {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 2px solid var(--water-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--science-change);
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.science-water-course .science-condensation-model > header > i { background: var(--science-model); }
.science-water-course .science-condensation-proof header span,
.science-water-course .science-condensation-proof header strong { display: block; }
.science-water-course .science-condensation-proof header span { font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.science-water-course .science-condensation-proof header strong { font-size: 12px; line-height: 1.15; }
.science-water-course .science-condensation-observation > div,
.science-water-course .science-condensation-model > div {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}
.science-water-course .science-condensation-proof article { text-align: center; }
.science-water-course .science-condensation-proof article small,
.science-water-course .science-condensation-proof article strong,
.science-water-course .science-condensation-proof article > span { display: block; }
.science-water-course .science-condensation-proof article small,
.science-water-course .science-condensation-proof article > span { font-size: 8px; font-weight: 900; }
.science-water-course .science-condensation-proof article strong { font-size: 11px; }
.science-water-course .science-condensation-observation > div > i { color: var(--science-warm); font-style: normal; font-size: 26px; }
.science-water-course .science-condensation-observation svg { max-height: 165px; }
.science-water-course .science-level-guide { stroke: var(--science-warm); stroke-width: 2; stroke-dasharray: 5 5; }
.science-water-course .science-model-arrow { display: grid; justify-items: center; gap: 3px; text-align: center; }
.science-water-course .science-model-arrow b { max-width: 58px; font-size: 8px; }
.science-water-course .science-model-arrow i { color: var(--science-warm); font-style: normal; font-size: 27px; }
.science-water-course .science-condensation-model article.is-result { padding: 8px; border-radius: 15px; background: var(--science-water-soft); }

/* 07 · complete state map */
.science-water-course .science-state-loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(105px, .9fr) minmax(0, 1fr) minmax(105px, .9fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.science-water-course .science-state-loop > article {
  padding: 11px 7px;
  border: 2px solid var(--water-ink);
  border-radius: 20px;
  text-align: center;
}
.science-water-course .science-state-loop article.is-solid { background: var(--science-ice-soft); }
.science-water-course .science-state-loop article.is-liquid { background: var(--science-water-soft); }
.science-water-course .science-state-loop article.is-gas { background: var(--science-gas-soft); }
.science-water-course .science-state-loop article svg { max-height: 108px; }
.science-water-course .science-state-loop article strong,
.science-water-course .science-state-loop article small { display: block; }
.science-water-course .science-state-loop article strong { font-size: 14px; }
.science-water-course .science-state-loop article small { font-size: 9px; font-weight: 700; }
.science-water-course .science-loop-bridge { display: grid; gap: 7px; }
.science-water-course .science-loop-bridge > span {
  min-width: 0;
  padding: 7px 4px;
  border: 2px solid var(--water-ink);
  border-radius: 13px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.science-water-course .science-loop-bridge > span.is-warming { background: var(--science-heat-soft); }
.science-water-course .science-loop-bridge > span.is-cooling { background: var(--science-cool-soft); }
.science-water-course .science-loop-bridge :where(b, small) { max-width: 100%; font-size: 8px; font-weight: 900; white-space: nowrap; }
.science-water-course .science-loop-bridge i,
.science-water-course .science-loop-bridge em { font-style: normal; }
.science-water-course .science-loop-bridge i { color: var(--science-warm); font-size: 21px; line-height: 1; }
.science-water-course .science-loop-bridge i em + em { display: none; }
.science-water-course .science-proof--loop.is-compact figcaption { margin-bottom: 10px; }
.science-water-course .science-proof--loop.is-compact .science-state-loop > article { padding: 8px 5px; }
.science-water-course .science-proof--loop.is-compact .science-state-loop article svg { max-height: 84px; }

.science-water-course .water-attempt-history {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--water-support);
}
.science-water-course .water-attempt-history > span { color: var(--water-accent-dark); font: 900 11px/1 var(--font-display); letter-spacing: .1em; }
.science-water-course .water-attempt-history ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.science-water-course .water-attempt-history li { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 13px; background: #fff; font-weight: 800; }
.science-water-course .water-attempt-history li i { color: var(--water-accent-dark); font-style: normal; }

@media (max-width: 620px) {
  .science-water-course .water-proof { overflow: hidden; }
  .science-water-course .kid-step-visual .water-proof { padding: 18px 12px; }
  .science-water-course .science-atomic-route { grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); gap: 7px; }
  .science-water-course .science-atomic-route > article { min-height: 190px; padding: 8px 5px; border-radius: 18px; }
  .science-water-course .science-atomic-route > article > span,
  .science-water-course .science-atomic-focus > span { padding: 4px 6px; font-size: 8px; }
  .science-water-course .science-atomic-route > article > strong { font-size: 12px; }
  .science-water-course .science-atomic-route svg { max-height: 125px; }
  .science-water-course .science-atomic-action { min-height: 90px; padding-inline: 3px; border-radius: 15px; }
  .science-water-course .science-atomic-action b { font-size: 7px; letter-spacing: -.01em; }
  .science-water-course .science-atomic-action i { font-size: 25px; }
  .science-water-course .science-atomic-action small { font-size: 7px; }
  .science-water-course .science-atomic-focus { min-height: 260px; }
  .science-water-course .science-atomic-focus svg { max-height: 165px; }
  .science-water-course .science-property-proof,
  .science-water-course .science-state-observations,
  .science-water-course .science-melting-states,
  .science-water-course .science-evaporation-test,
  .science-water-course .science-condensation-proof,
  .science-water-course .science-state-loop { grid-template-columns: 1fr; }
  .science-water-course .science-property-proof > article { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; column-gap: 8px; }
  .science-water-course .science-property-proof .science-proof-step { grid-column: 1 / -1; justify-self: start; }
  .science-water-course .science-property-proof svg { max-height: 115px; }
  .science-water-course .science-state-observations article { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; text-align: left; }
  .science-water-course .science-state-observations article > span { grid-column: 1 / -1; justify-self: start; }
  .science-water-course .science-state-observations article svg { grid-row: span 2; max-height: 102px; }
  .science-water-course .science-droplet-check { grid-template-columns: 1fr; text-align: center; }
  .science-water-course .science-droplet-check > b { line-height: 1.1; }
  .science-water-course .science-droplet-check svg { float: none; width: 90px; margin: 0 auto; }
  .science-water-course .science-heat-route { flex-wrap: wrap; gap: 7px 10px; }
  .science-water-course .science-melting-states li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; text-align: left; }
  .science-water-course .science-melting-states li > span { grid-column: 1 / -1; justify-self: start; }
  .science-water-course .science-melting-states svg { grid-row: span 2; max-height: 105px; }
  .science-water-course .science-reverse-proof { grid-template-columns: 1fr; }
  .science-water-course .science-reverse-proof > article { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .science-water-course .science-reverse-proof article > span { grid-column: 1 / -1; justify-self: start; }
  .science-water-course .science-reverse-proof article svg { grid-row: span 1; max-height: 105px; }
  .science-water-course .science-reverse-lanes { grid-row: 2; }
  .science-water-course .science-reverse-lanes i em:first-child,
  .science-water-course .science-loop-bridge i em:first-child { display: none; }
  .science-water-course .science-reverse-lanes i em + em,
  .science-water-course .science-loop-bridge i em + em { display: inline; }
  .science-water-course .science-evaporation-scenes { grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr); }
  .science-water-course .science-evaporation-scenes svg { max-height: 115px; }
  .science-water-course .science-condensation-observation > div,
  .science-water-course .science-condensation-model > div { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .science-water-course .science-condensation-observation svg { max-height: 135px; }
  .science-water-course .science-state-loop > article { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; text-align: left; }
  .science-water-course .science-state-loop article > span { grid-column: 1 / -1; justify-self: start; }
  .science-water-course .science-state-loop article svg { grid-row: span 2; max-height: 92px; }
  .science-water-course .science-loop-bridge { width: 100%; }
  .science-water-course .science-loop-bridge > span { min-height: 68px; align-content: center; }
  .science-water-course .science-loop-bridge :where(b, small) { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .science-water-course *,
  .science-water-course *::before,
  .science-water-course *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}