/* ============================ DESIGN TOKENS ============================
   The Lollypop layer: one style guide, so "icons and artwork are in sync
   throughout" instead of every feature inventing its own green.

   Before this block, beta.css carried 155 distinct hardcoded hex values and no
   tokens at all. Six features had each derived their own palette by eye, which
   is why the app read as six separate products stapled together.

   Every value below was contrast-checked BEFORE being written here:
     --ink on --paper ............ 11.98:1
     --ink on --card ............. 12.72:1
     --ink-soft on --paper ....... 6.73:1
     <fam>-ink on <fam>-bg ....... 7.31:1 - 8.91:1
     #fff on <fam>-deep .......... 6.00:1 - 8.21:1
     <fam>-edge on --paper ....... 3.01:1 - 3.89:1  (WCAG 1.4.11 non-text)

   RUNG MEANINGS - use the right one or contrast breaks:
     -bg    surface tint. Text on it must be the matching -ink.
     -line  DECORATIVE hairline only. Fails 3:1 by design; never the sole
            carrier of meaning.
     -edge  border/shape that CARRIES MEANING (selected, progress, stroke).
            Verified >=3:1 on paper.
     -deep  solid fill for buttons/badges. Pair with white text only.
     -ink   text colour. Safe on -bg, --paper and --card.

   The six families are not decoration: they are the six islands the learning
   content already names (Wonder Woods, Puzzle Peaks, Memory Meadow, Rainbow
   Ridge, Question Cove, Story Pond), so a colour always means a place.
   ======================================================================== */
:root {
  --paper: #fbf8ef;
  --card: #ffffff;
  --ink: #22372c;
  --ink-soft: #4a5c50;

  --leaf-bg: #e4f2e2;
  --leaf-line: #a8cfa4;
  --leaf-edge: #4f8a52;
  --leaf-deep: #2f6b45;
  --leaf-ink: #1d4a2f;

  --puzzle-bg: #ece4f7;
  --puzzle-line: #c3aade;
  --puzzle-edge: #8360ab;
  --puzzle-deep: #5f3d90;
  --puzzle-ink: #4a2d72;

  --memory-bg: #fdeade;
  --memory-line: #f0bd95;
  --memory-edge: #c07340;
  --memory-deep: #94491a;
  --memory-ink: #7a3b12;

  --rainbow-bg: #dceef7;
  --rainbow-line: #9cc9e0;
  --rainbow-edge: #4a86a9;
  --rainbow-deep: #1c6483;
  --rainbow-ink: #14495f;

  --cove-bg: #fce3ea;
  --cove-line: #efaec1;
  --cove-edge: #cc6382;
  --cove-deep: #962c4f;
  --cove-ink: #7a2340;

  --story-bg: #fbf0d4;
  --story-line: #e3c579;
  --story-edge: #ad842c;
  --story-deep: #875a0c;
  --story-ink: #6b4708;

  /* Type scale. NN/g: 14pt (~18.7px) for young children, 12pt (~16px) for
     older. 43.5% of this app's home-screen text used to render below 14px, so
     the scale now has a HARD FLOOR of 15px and nothing smaller exists. */
  --t-display: clamp(30px, 5.5vw, 46px);
  --t-title: clamp(23px, 3.4vw, 30px);
  --t-lead: clamp(18px, 2.4vw, 21px);
  --t-body: 17px;
  --t-small: 15px; /* the floor. Do not add anything below this. */

  /* Rounded sans for reading. Education Sciences 14(8):854 (2024) measured
     sans-serif fastest for children (Roboto 194.65 WPM, Arial 185.13 WPM) with
     no speed/comprehension trade-off (p=0.803), and a 101 WPM gap between a
     child's best- and worst-fitting font. Serif is kept for display headings
     only, where it carries the brand rather than the reading load. */
  --font-read:
    "Nunito", "Quicksand", "Varela Round", Svadhyaya, Arial, sans-serif;
  --font-display: "Baloo 2", "Fredoka", Georgia, serif;

  /* Touch. NN/g: >=2cm x 2cm for young children, 4x the adult target. */
  --tap: 60px;

  --r-card: 22px;
  --r-pill: 999px;
  --lift: 0 3px 0 rgba(34, 55, 44, 0.13);
  --lift-press: 0 1px 0 rgba(34, 55, 44, 0.13);
}

/* Self-hosted so the CSP can stay locked to font-src 'self'. Both faces are
   SIL Open Font Licence, latin subset, variable weight: 72KB for the pair.
   Nunito carries the reading load (rounded sans — see the type-scale note in
   the tokens); Baloo 2 is display only. */
@font-face {
  font-family: Nunito;
  src: url("/static/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/static/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: Svadhyaya;
  src: local("Inter"), local("Aptos"), local("Segoe UI");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-body) / 1.6 var(--font-read);
  -webkit-text-size-adjust: 100%;
}
a {
  color: #315942;
  text-underline-offset: 4px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #8b61b3;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font: 700 var(--t-display) / 1.1 var(--font-display);
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}
h1 em {
  color: #6b7f53;
}
h2 {
  font:
    700 var(--t-title)/1.2 var(--font-display),
    serif;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 19px;
}
p {
  color: #526250;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.65;
}
.site-header {
  max-width: 1250px;
  margin: auto;
  padding: 24px 34px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid #dedfd2;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font:
    600 24px Georgia,
    serif;
  text-decoration: none;
}
.brand small {
  display: block;
  font:
    600 15px/1.5 Arial,
    sans-serif;
  letter-spacing: 2px;
  color: #637059;
}
.beta-label {
  background: #e8eddd;
  border: 1px solid #c9d4b9;
  padding: 6px 12px;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 30px;
  margin-left: auto;
}
.site-header > a:last-child {
  font-size: var(--t-small);
  font-weight: 600;
}
main {
  max-width: 1160px;
  margin: auto;
  padding: 30px 34px 60px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #dddccd;
  padding-bottom: 14px;
  margin-bottom: 30px;
}
.tabs a {
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 11px;
}
.tabs a[aria-current] {
  background: #e4ecda;
  color: #294e37;
}
.eyebrow {
  font-size: var(--t-small);
  letter-spacing: 1.8px;
  font-weight: 700;
  color: #60704f;
  margin-bottom: 12px;
}
.account-hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 30px;
  background: #eef2e4;
  border: 1px solid #d7dfc9;
  padding: clamp(26px, 4vw, 48px);
  border-radius: 28px;
  margin-bottom: 28px;
}
.account-hero p {
  max-width: 55ch;
}
.account-hero .button {
  margin-top: 10px;
}
.companion {
  display: block;
  width: 200px;
  max-width: 100%;
  margin: auto;
}
.companion-card {
  text-align: center;
}
.companion-card p {
  font-size: var(--t-small);
  margin: 12px 0 0;
}
.save-indicator {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--t-small);
}
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
/* Buttons that feel pressable. The old ones were flat 48px rectangles reviewed
   as having "no tactile squishiness". Now: 60px (NN/g's ~2cm floor for young
   children), a solid bottom edge that COMPRESSES on press, and a pill radius.
   The press state is a real transform, so the finger gets feedback. */
.button {
  min-height: var(--tap);
  padding: 15px 26px;
  color: #fff;
  background: var(--leaf-deep);
  border: 0;
  border-radius: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 800 var(--t-body) / 1.3 var(--font-read);
  text-align: center;
  box-shadow: 0 4px 0 #1f4a2e;
  cursor: pointer;
}
.button:active:not([disabled]) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1f4a2e;
}
.button[disabled] {
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
}
.button.secondary {
  color: #31563f;
  background: #fffdf8;
}
.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.panel {
  background: #fffef9;
  border: 1px solid #dedfd2;
  padding: 28px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.panel p:last-child {
  margin-bottom: 0;
}
.panel.empty {
  max-width: 720px;
  margin: 50px auto;
}
.panel.empty .text-link {
  display: block;
  margin-top: 20px;
}
.window-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 24px 28px;
  border: 1px solid #cbd7be;
  background: #f1f4e8;
  border-radius: 20px;
  margin: 24px 0;
}
.window-panel > div {
  flex: 1;
  min-width: 220px;
}
.window-panel p {
  font-size: var(--t-small);
  margin: 8px 0 0;
}
.window-panel h2 {
  font-size: 26px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.stats article {
  padding: 22px;
  border: 1px solid #daddcc;
  border-radius: 18px;
  background: #f6f0df;
}
.stats strong {
  display: block;
  font:
    400 36px Georgia,
    serif;
}
.stats span {
  display: block;
  font-size: var(--t-small);
  margin-top: 8px;
  color: #566449;
}
.page-heading {
  margin: 30px 0;
}
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.lesson-card {
  display: flex;
  flex-direction: column;
  background: #edf2e4;
  border: 1px solid #d8dfca;
  padding: 28px;
  border-radius: 22px;
  min-width: 0;
}
.lesson-card.tone-1 {
  background: #f0eaf5;
  border-color: #dfd4e8;
}
.lesson-card.tone-2 {
  background: #f8eee2;
  border-color: #e8d8c7;
}
.lesson-card p {
  font-size: var(--t-small);
}
.lesson-card .button {
  margin-top: auto;
  align-self: flex-start;
}
/* NN/g: under-9s recognise large, filled, colourful shapes fastest. 64px badge with a
   38px icon — comfortably above the 2cm target guidance on a tablet. */
.lesson-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #ffffff, #fdf9ee);
  border: 1px solid #d8e0cd;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 0 #e6ecdd;
}
.lesson-icon .icon {
  width: 38px;
  height: 38px;
}
.lesson-card:hover .lesson-icon,
.lesson-card:focus-within .lesson-icon {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: no-preference) {
  .lesson-icon {
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
}
.lesson-grid .panel {
  margin: 0;
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
dl {
  margin: 22px 0;
}
dt {
  font-size: var(--t-small);
  font-weight: 700;
  color: #66735a;
  margin-top: 16px;
}
dd {
  margin: 4px 0 16px;
  overflow-wrap: anywhere;
}
.settings,
.setup {
  max-width: 780px;
}
.settings > label,
.setup > label,
dialog > label {
  display: block;
  font-weight: 600;
  margin: 18px 0;
}
.settings select,
.setup select,
dialog input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  min-height: 48px;
  background: #fffef9;
  border: 1px solid #9cae90;
  border-radius: 10px;
  color: #2e4837;
}
.check-field {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--t-small);
  line-height: 1.65;
}
.check-field input {
  flex: none;
  margin-top: 6px;
  accent-color: #31563f;
  width: 20px;
  height: 20px;
}
.small {
  font-size: var(--t-small);
  line-height: 1.7;
  color: #586651;
}
.prose {
  max-width: 880px;
  margin-inline: auto;
}
.prose h1 {
  font-size: 40px;
}
.site-footer {
  max-width: 1160px;
  margin: auto;
  padding: 26px 34px;
  border-top: 1px solid #dedfd2;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--t-small);
  color: #66725e;
}
.site-footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  background: #294d3a;
  color: white;
  padding: 12px;
  z-index: 20;
}
.skip:focus {
  top: 8px;
}
.notice {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px 24px;
  font-size: var(--t-small);
  color: #31563f;
}
.notice:empty {
  display: none;
}
.notice:not(:empty) {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 14px 20px;
  background: #294d3a;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px #18342825;
  z-index: 30;
}
dialog {
  max-width: 680px;
  width: calc(100% - 32px);
  max-height: 90dvh;
  border: 1px solid #bdccae;
  border-radius: 24px;
  padding: 38px;
  color: #294438;
  background: #fffdf7;
  box-shadow: 0 25px 70px #19362830;
}
dialog::backdrop {
  background: #18302480;
}
.close {
  position: absolute;
  right: 14px;
  top: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 28px;
  color: #31563f;
}
.choices {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.choices .button {
  text-align: left;
  justify-content: flex-start;
  background: #f0f3e8;
  color: #294d3a;
  border-color: #b9c9a7;
}
.visual-guide {
  background: #eef2e4;
  border-radius: 14px;
  padding: 20px 20px 20px 44px;
}
.lesson-copy {
  font-size: 18px;
  line-height: 1.8;
}
#answer-feedback {
  min-height: 28px;
  font-weight: 600;
}
details {
  padding: 14px 18px;
  border: 1px solid #d7ddc8;
  border-radius: 12px;
}
summary {
  cursor: pointer;
  min-height: 30px;
}
details p {
  margin: 14px 0 0;
}
.loading-card {
  padding: 45px;
  border: 1px solid #d8dfca;
  border-radius: 24px;
  background: #eef2e4;
}
@media (max-width: 850px) {
  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-header {
    gap: 14px;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 580px) {
  main {
    padding: 22px 18px 40px;
  }
  .site-header {
    padding: 20px 18px;
    flex-wrap: wrap;
  }
  .brand {
    font-size: 22px;
  }
  .site-header > a:last-child {
    margin-left: auto;
  }
  .beta-label {
    font-size: var(--t-small);
  }
  .account-hero {
    grid-template-columns: 1fr;
    padding: 26px;
  }
  .companion {
    width: 150px;
  }
  .companion-card {
    display: none;
  }
  .lesson-grid {
    grid-template-columns: 1fr;
  }
  .panel {
    padding: 23px;
  }
  .stats {
    gap: 8px;
  }
  .stats article {
    padding: 16px 12px;
  }
  .stats strong {
    font-size: 28px;
  }
  .stats span {
    font-size: var(--t-small);
  }
  .tabs {
    gap: 4px;
  }
  .tabs a {
    padding: 10px 12px;
    font-size: var(--t-small);
  }
  .site-footer {
    flex-direction: column;
    padding: 24px 18px;
  }
  .window-panel {
    padding: 22px;
  }
  .window-panel > div {
    min-width: 0;
    flex-basis: 100%;
  }
  dialog {
    padding: 34px 22px;
  }
  .prose h1 {
    font-size: 32px;
  }
  .account-hero h1 {
    font-size: 35px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/* ---- Restored keepsake surfaces: garden, badges, certificates, mistake lab ---- */
.garden-grid {
  list-style: none;
  margin: 18px 0 12px;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.garden-plot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border-radius: 16px;
  background: #f2f5e8;
  border: 1px solid #dbe4c8;
  text-align: center;
}
.garden-plot.is-seed {
  background: #f7f6ef;
  border-style: dashed;
}
.garden-plot svg {
  width: 46px;
  height: 56px;
}
.garden-plot span {
  font-size: var(--t-small);
  line-height: 1.35;
  color: #3d5443;
}
.badge-grid,
.cert-grid {
  list-style: none;
  margin: 18px 0 12px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.badge-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.badge-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: #f2f5e8;
  border: 1px solid #dbe4c8;
}
.badge-chip.is-locked {
  background: #f7f6ef;
  border-style: dashed;
  color: #566150;
}
.badge-chip span {
  font-weight: 600;
}
.badge-chip small,
.cert-card small {
  color: #52655a;
  font-size: var(--t-small);
}
.badge-chip .icon,
.cert-card .icon {
  width: 22px;
  height: 22px;
  color: #3d6b4c;
}
.cert-grid {
  grid-template-columns: 1fr;
}
.cert-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: 14px;
  background: #f2f5e8;
  border: 1px solid #dbe4c8;
}
.cert-card.is-closed {
  background: #f7f6ef;
  border-style: dashed;
}
.cert-card > div {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
}
.cert-card .button {
  margin: 0;
}
/* ---- Certificate sheet ----
   Warm parchment, gold rule, illustrated crest. Contrast pre-verified:
   ink #2b3b30 on #fdfaf1 = 11.36:1, name #1f4a33 = 9.65:1, meta #55655a = 5.93:1.
   Gold #c9a24a is decorative only and never carries text meaning. */
.certificate-sheet {
  text-align: center;
  padding: 0;
  position: relative;
}
/* Double gold rule via borders (scales to any sheet height), plus four corner SVGs
   pinned inside it. Corners are decorative and sit above the parchment, never text. */
.cert-inner {
  position: relative;
  padding: 40px 44px 34px;
  background: linear-gradient(158deg, #fffdf6 0%, #fdfaf1 48%, #fbf4e6 100%);
  border: 2.5px solid #c9a24a;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px #fdfaf1,
    inset 0 0 0 8px #fdfaf1,
    inset 0 0 0 9px #e6d3a2;
  color: #2b3b30;
}
.cert-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
}
.cert-corner.tl {
  top: 14px;
  left: 14px;
}
.cert-corner.tr {
  top: 14px;
  right: 14px;
  transform: rotate(90deg);
}
.cert-corner.br {
  bottom: 14px;
  right: 14px;
  transform: rotate(180deg);
}
.cert-corner.bl {
  bottom: 14px;
  left: 14px;
  transform: rotate(270deg);
}
.cert-inner .eyebrow {
  color: #7a6535;
  letter-spacing: 0.14em;
}
.cert-crest {
  display: flex;
  justify-content: center;
  margin: 4px 0 2px;
}
.cert-companion {
  width: 84px;
  height: 88px;
}
.cert-inner h2 {
  font-size: 30px;
  line-height: 1.2;
  margin: 6px 0 2px;
  color: #1f4a33;
}
.cert-lead {
  margin: 10px 0 0;
  color: #55655a;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.certificate-sheet .cert-name {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: #1f4a33;
  margin: 2px 0 4px;
}
.cert-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px auto 10px;
  max-width: 300px;
}
.cert-rule span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #c9a24a, transparent);
}
.cert-rule .icon {
  width: 20px;
  height: 20px;
}
.cert-body {
  margin: 0 auto;
  max-width: 42ch;
  color: #2b3b30;
}
.cert-seal {
  width: 88px;
  height: 88px;
  margin: 10px auto 0;
  display: block;
}
.certificate-sheet .cert-meta {
  color: #55655a;
  font-size: var(--t-small);
  font-style: italic;
  margin: 2px 0 0;
}
.retry-recipe {
  list-style: none;
  counter-reset: step;
  margin: 16px 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.retry-recipe li {
  counter-increment: step;
  position: relative;
  padding: 13px 14px 13px 44px;
  border-radius: 14px;
  background: #f2f5e8;
  border: 1px solid #dbe4c8;
  display: flex;
  flex-direction: column;
}
.retry-recipe li::before {
  content: "0" counter(step);
  position: absolute;
  left: 13px;
  top: 13px;
  font-size: var(--t-small);
  font-weight: 700;
  color: #3d6b4c;
}
.retry-recipe span {
  color: #45584b;
  font-size: var(--t-small);
}
@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }
  body > *:not(#lesson-dialog) {
    display: none !important;
  }
  /* The dialog backdrop is a dark scrim on screen; on paper it would print as a heavy
     grey border and waste ink. Force the page and dialog to plain white. */
  html,
  body {
    background: #fff !important;
  }
  #lesson-dialog::backdrop {
    background: #fff;
  }
  #lesson-dialog {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
  }
  #lesson-dialog .close,
  #lesson-dialog .actions {
    display: none !important;
  }
  /* Keep the parchment, gold frame and seal on paper — without this most browsers
     strip background gradients and the sheet prints as plain white. */
  .cert-inner,
  .certificate-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cert-inner {
    padding: 34px 40px 30px;
  }
  .certificate-sheet .cert-name {
    font-size: 44px;
  }
  /* The safeguarding footnote is screen guidance for the adult, not part of the
     keepsake — printing it on a child's certificate would be odd and cluttered. */
  .certificate-sheet .small {
    display: none !important;
  }
}

/* ---- Plan Room: readiness gates (governance, not learning) ---- */
/* All colour pairs pre-verified for WCAG AA: 5.91:1 - 7.46:1 */
.gate-headline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 14px;
  background: #fdf1e2;
  border: 1px solid #e6c9a4;
  color: #7a3f14;
}
.gate-headline .icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.gate-stack {
  display: grid;
  gap: 16px;
  margin: 18px 0;
}
.gate-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dfe3d3;
}
.gate-card.is-open {
  border-left: 5px solid #b8843c;
}
.gate-card.is-partial {
  border-left: 5px solid #5f8a56;
}
.gate-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gate-card h2 {
  margin: 0;
  font-size: 21px;
}
.gate-flag {
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.gate-card.is-open .gate-flag {
  background: #fdf1e2;
  color: #7a3f14;
}
.gate-card.is-partial .gate-flag {
  background: #eaf2e0;
  color: #2f5c40;
}
.gate-card > p {
  color: #45584b;
}
.gate-card h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 8px;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3d5443;
}
.gate-card h3 .icon {
  width: 18px;
  height: 18px;
}
.gate-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.gate-list li {
  color: #45584b;
}
.gate-list.is-pending li::marker {
  color: #b8843c;
}
.gate-list.is-done li::marker {
  color: #5f8a56;
}
@media (max-width: 620px) {
  .gate-card {
    padding: 17px 16px;
  }
  .gate-card h2 {
    font-size: 19px;
  }
}

/* ---- Structured reflection (closed vocabulary; no free text anywhere) ---- */
/* Colour pairs pre-verified for WCAG AA: 6.24:1 - 7.69:1 */
.reflect-invite {
  margin: 20px 0 8px;
  padding: 17px 18px;
  border-radius: 16px;
  background: #eef4e4;
  border: 1px solid #d3e0bf;
  text-align: left;
}
.reflect-invite h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 18px;
  color: #2f5340;
}
.reflect-invite h3 .icon {
  width: 20px;
  height: 20px;
}
.reflect-choices {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  margin-top: 13px;
}
.reflect-choices .button {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-start;
  margin: 0;
  padding: 12px 14px;
  text-align: left;
  background: #fff;
  color: #2f5340;
  border: 1px solid #cbd9b8;
  font-weight: 600;
}
.reflect-choices .button:hover,
.reflect-choices .button:focus-visible {
  background: #f7fbf0;
  border-color: #8fae74;
}
.reflect-choices .button .icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #4a7355;
}
.reflect-log {
  list-style: none;
  margin: 15px 0 10px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.reflect-log li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f2f5e8;
  border: 1px solid #dbe4c8;
}
.reflect-log li .icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #4a7355;
}
.reflect-log li span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.reflect-log li small {
  color: #45584b;
  font-size: var(--t-small);
}
@media (max-width: 620px) {
  .reflect-choices {
    grid-template-columns: 1fr;
  }
}

/* ---- Device PIN pad (app-scoped shared-tablet lock) ---- */
/* Contrast pre-verified for WCAG AA: 7.24:1 - 9.20:1 */
.pin-screen {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}
.pin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #eef4e4;
  color: #2f5340;
  margin-bottom: 6px;
}
.pin-mark .icon {
  width: 26px;
  height: 26px;
}
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin: 22px 0 6px;
}
.pin-dots span {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 2px solid #9fb38f;
  background: transparent;
}
.pin-dots span.is-on {
  background: #24503a;
  border-color: #24503a;
}
.pin-alert {
  margin: 10px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fdeee8;
  border: 1px solid #eec3b3;
  color: #8a2f14;
  font-size: var(--t-small);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 14px;
}
.pin-key {
  padding: 17px 0;
  font-size: 21px;
  font-weight: 700;
  border-radius: 14px;
  background: #fff;
  color: #24503a;
  border: 1px solid #cbd9b8;
  cursor: pointer;
  min-height: 56px;
}
.pin-key.is-wide {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}
.pin-key:hover:not(:disabled),
.pin-key:focus-visible {
  background: #f2f8ea;
  border-color: #7f9f6b;
}
.pin-key:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pin-screen .small {
  color: #45584b;
}
@media (max-width: 420px) {
  .pin-key {
    padding: 15px 0;
    font-size: 19px;
  }
}

/* ================= REZI'S BRAIN — teaching surface =================
   Built for an 8-year-old on a tablet. Every contrast pair below was computed
   before this file was written: text pairs run 7.34:1 - 11.19:1 (all AAA), and
   the progress fill #3f7d57 on #e8eee2 is 4.15:1 as a non-text graphic (needs 3:1).
   Touch targets are >=64px, comfortably over the 2cm NN/g guidance for under-9s. */
.teach-heading h1 {
  font-size: clamp(26px, 5vw, 38px);
}
.teach-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid #efd9a4;
  border-radius: 18px;
  padding: 16px 22px;
  margin: 18px 0;
}
.teach-score strong {
  font-size: 40px;
  line-height: 1;
  color: #7a5a12;
}
.teach-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.teach-card {
  background: #fff;
  border: 1px solid #dde5d5;
  border-radius: 22px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.teach-card.is-done {
  background: #f4fbf5;
  border-color: #b6dcc2;
}
.teach-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.teach-card h3 {
  margin: 0 0 4px;
  font-size: 20px;
}
.teach-say {
  margin: 0;
  font-style: italic;
  color: #4a5a50;
  font-size: var(--t-small);
}
.rezi-mini {
  width: 62px;
  height: 66px;
  flex-shrink: 0;
}
.teach-bar {
  height: 12px;
  border-radius: 99px;
  background: #e8eee2;
  overflow: hidden;
}
.teach-bar span {
  display: block;
  height: 100%;
  background: #3f7d57;
  border-radius: 99px;
}
.teach-flag {
  font-size: var(--t-small);
  font-weight: 600;
  color: #4a5a50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.teach-flag.is-ready {
  color: #7a3f14;
  background: #fdf1e2;
  padding: 5px 12px;
  border-radius: 99px;
  align-self: flex-start;
}
.teach-flag.is-done {
  color: #1d4a30;
  background: #d9f0df;
  padding: 5px 12px;
  border-radius: 99px;
  align-self: flex-start;
}
.teach-flag .icon {
  width: 18px;
  height: 18px;
}

/* --- The stage: Rezi plus his speech bubble --- */
.rezi-stage {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(160deg, #fffdf6, #f6f1e3);
  border: 1px solid #e6dcc2;
  border-radius: 24px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.rezi-big {
  width: 132px;
  height: 138px;
  flex-shrink: 0;
}
.rezi-bubble {
  position: relative;
  background: #fff8e6;
  border: 2px solid #e6cf9a;
  border-radius: 18px;
  padding: 14px 18px;
  margin: 0;
  font-size: 17px;
  color: #2b3b30;
  flex: 1;
}
.rezi-bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 26px;
  border: 9px solid transparent;
  border-right-color: #e6cf9a;
}

/* --- The board: tap a cause, a direction, an effect --- */
.teach-board {
  background: #fff;
  border: 1px solid #dde5d5;
  border-radius: 22px;
  padding: 18px 20px 22px;
  margin-bottom: 18px;
}
.teach-board h2 {
  font-size: 17px;
  margin: 0 0 12px;
  color: #3d5348;
}
.node-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.node-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 116px;
  min-height: 116px;
  padding: 12px 8px;
  background: #fff;
  border: 2px solid #d5ddcd;
  border-radius: 20px;
  cursor: pointer;
  color: #294438;
  font-size: var(--t-small);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}
.node-chip.is-picked {
  background: #dbe6fb;
  border-color: #5a7fc0;
  color: #26324a;
  box-shadow: 0 0 0 3px #c3d5f5;
}
.node-art {
  width: 54px;
  height: 54px;
}
.dir-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.dir-row h2 {
  width: 100%;
  margin: 0 0 4px;
}
.button[data-variant="more"],
.button[data-variant="less"] {
  min-height: 64px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 18px;
  padding: 0 22px;
}
.button[data-variant="more"] {
  background: #d9f0df;
  color: #1d4a30;
  border: 2px solid #7fb894;
}
.button[data-variant="less"] {
  background: #fde3d0;
  color: #7a3410;
  border: 2px solid #dd9c6e;
}
.button[data-variant="tiny"] {
  min-height: 40px;
  padding: 0 14px;
  font-size: var(--t-small);
  background: #fff;
  color: #5a4a3a;
  border: 1px solid #d8cdb8;
}
.button[data-variant="ghost"] {
  background: #fff;
  color: #31563f;
  border: 1px solid #b9c9b3;
}
.dir-hint {
  width: 100%;
  margin: 4px 0 0;
  font-size: var(--t-small);
  color: #4a5a50;
}

/* --- What Rezi currently believes --- */
.taught-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.taught-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #f7faf4;
  border: 1px solid #dde5d5;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 600;
  color: #294438;
}
.tl-arrow {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: var(--t-small);
}
.tl-more {
  background: #d9f0df;
  color: #1d4a30;
}
.tl-less {
  background: #fde3d0;
  color: #7a3410;
}
.taught-line .button[data-variant="tiny"] {
  margin-left: auto;
}
.taught-empty {
  color: #4a5a50;
  font-style: italic;
  padding: 12px 2px;
}
.teach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

/* --- Quiz outcome. Note: this reports REZI's score, never the child's. --- */
.quiz-out {
  background: #fff;
  border: 2px solid #dde5d5;
  border-radius: 22px;
  padding: 18px 20px;
}
.quiz-out.is-win {
  border-color: #7fb894;
  background: #f4fbf5;
}
.quiz-out h3 {
  margin: 0 0 12px;
  font-size: 22px;
}
.quiz-out ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.quiz-out li {
  display: flex;
  gap: 12px;
  border-radius: 14px;
  padding: 12px 14px;
}
.quiz-out li.ok {
  background: #eef8f0;
  color: #1d4a30;
}
.quiz-out li.no {
  background: #fdf3ec;
  color: #7a3410;
}
.quiz-out li strong {
  font-size: 20px;
  line-height: 1.2;
}
.quiz-out p {
  margin: 0;
}
.quiz-said {
  font-style: italic;
  margin-top: 4px !important;
}
.quiz-cheer {
  margin: 14px 0 0 !important;
  font-weight: 600;
}

/* Motion is opt-in only: everything above is readable and usable when static. */
@media (prefers-reduced-motion: no-preference) {
  .rezi-think-dots {
    animation: rezi-float 1.5s ease-in-out 2;
  }
  .rezi-excited {
    animation: rezi-bounce 0.6s ease 2;
  }
  .node-chip {
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }
  .node-chip:hover {
    transform: translateY(-2px);
  }
  @keyframes rezi-float {
    0%,
    100% {
      opacity: 0.5;
      transform: translateY(2px);
    }
    50% {
      opacity: 1;
      transform: translateY(-3px);
    }
  }
  @keyframes rezi-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-9px);
    }
  }
}

/* Picture-first rendering of what Rezi believes: art + arrow + art. */
.tl-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 92px;
  text-align: center;
}
.tl-node small {
  font-size: var(--t-small);
  line-height: 1.2;
  font-weight: 600;
  color: #3d5348;
}
.tl-node .node-art {
  width: 44px;
  height: 44px;
}
.tl-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 14px;
}
.tl-arrow em {
  font-style: normal;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.taught-empty {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Big friendly step numbers so the sequence reads without literacy. */
.teach-board h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.teach-board h2::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #31563f;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}

/* ================= THE MAKING ROOM =================
   Her own writing. Contrast pre-computed: 5.84:1 - 11.66:1, all AA or better.
   The editor is deliberately calm and paper-like — no counters ticking, no
   progress bars, nothing that turns writing into a performance. */
.gyan-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.gyan-row article {
  background: #fff8e6;
  border: 1px solid #efd9a4;
  border-radius: 18px;
  padding: 16px 18px;
  text-align: center;
}
.gyan-row strong {
  display: block;
  font-size: 34px;
  line-height: 1.1;
  color: #7a5a12;
}
.gyan-row span {
  font-size: var(--t-small);
  color: #55655a;
}
.make-new {
  margin: 18px 0;
}
.make-new h2 {
  font-size: 18px;
  margin: 0 0 12px;
}
.make-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.make-kinds .button {
  min-height: 64px;
  font-size: 17px;
  border-radius: 18px;
  padding: 0 24px;
}
.work-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.work-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #dde5d5;
  border-radius: 18px;
  padding: 14px 18px;
}
.work-card.published {
  background: #f9fdf9;
  border-color: #b6dcc2;
}
.work-spine {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fdf9ee;
  border: 1px solid #e3dcc8;
  flex-shrink: 0;
}
.work-spine .icon {
  width: 30px;
  height: 30px;
}
.work-meta {
  flex: 1;
  min-width: 160px;
}
.work-meta h3 {
  margin: 0 0 2px;
  font-size: 18px;
}
.work-meta p {
  margin: 0;
  font-size: var(--t-small);
  color: #4a5a50;
}
.work-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4a5a50;
  font-style: italic;
}
.rezi-quiet {
  padding: 12px 16px;
}
.rezi-quiet .rezi-bubble {
  font-size: 15px;
}

/* --- The writing desk --- */
.make-desk {
  background: #fffdf7;
  border: 1px solid #e6dcc2;
  border-radius: 22px;
  padding: 20px 22px 16px;
}
.make-desk label {
  display: block;
  font-weight: 600;
  font-size: var(--t-small);
  color: #3d5348;
  margin-bottom: 16px;
}
.make-desk input,
.make-desk textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid #d8cdb8;
  border-radius: 12px;
  background: #fff;
  color: #2b3b30;
  font:
    17px/1.7 Georgia,
    "Times New Roman",
    serif;
  resize: vertical;
}
.make-desk #make-title {
  font-size: 22px;
  font-weight: 700;
}
.make-desk textarea {
  min-height: 180px;
}
.chapter-box {
  border: 1px solid #e0d5b8;
  border-radius: 16px;
  padding: 14px 16px 6px;
  margin: 0 0 14px;
}
.chapter-box legend {
  font-weight: 700;
  font-size: var(--t-small);
  color: #3d5348;
  padding: 0 8px;
}
.save-note {
  margin: 4px 0 0;
  font-size: var(--t-small);
  color: #55655a;
  font-style: italic;
}

/* --- Draw your own cover --- */
.cover-panel {
  background: #fffdf7;
  border: 1px solid #e6dcc2;
  border-radius: 22px;
  padding: 20px 22px 22px;
  margin-top: 18px;
}
.cover-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 12px 0 14px;
}
.cover-colours,
.cover-sizes {
  display: flex;
  gap: 8px;
}
.cover-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #d8cdb8;
  background: var(--sw);
  cursor: pointer;
  padding: 0;
}
.cover-swatch[style*="ffffff"] {
  border-color: #b8ada0;
}
.cover-swatch.is-picked {
  border-color: #1f4a33;
  box-shadow: 0 0 0 2px #fffdf7 inset;
}
.cover-size {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #d8cdb8;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cover-size span {
  display: block;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: #3d5348;
}
.cover-size.is-picked {
  border-color: #1f4a33;
  background: #eef3ea;
}
.cover-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  background: #fffdf7;
  border: 1px dashed #d8cdb8;
  border-radius: 16px;
  touch-action: none;
  cursor: crosshair;
}

/* --- The printed book --- */
.book-sheet {
  text-align: left;
}
.bk-cover {
  position: relative;
  text-align: center;
  background: linear-gradient(158deg, #fffdf6, #fbf4e6);
  border: 2.5px solid #c9a24a;
  border-radius: 16px;
  padding: 40px 30px 34px;
  margin-bottom: 26px;
  overflow: hidden;
}
/* Her drawn cover sits behind the title block; the gold border stays a frame
   around it, so a plain cover and a drawn one both look like a real book. */
.bk-cover .cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bk-cover[data-has-art="true"] .bk-cover-text {
  position: relative;
  background: #fffdf6cc;
  border-radius: 12px;
  padding: 14px 10px 6px;
}
.bk-kicker {
  font-size: var(--t-small);
  letter-spacing: 0.18em;
  color: #7a6535;
  margin: 0 0 10px;
}
.bk-cover h1 {
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: #1f4a33;
}
.bk-by {
  font-size: 19px;
  font-style: italic;
  color: #55655a;
  margin: 0 0 14px;
}
.bk-crest {
  display: flex;
  justify-content: center;
}
.bk-mark {
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  color: #7a6535;
  margin: 12px 0 0;
}
.bk-body {
  font:
    17px/1.8 Georgia,
    "Times New Roman",
    serif;
  color: #2b3b30;
  padding: 0 6px;
}
.bk-body p {
  margin: 0 0 1.05em;
}
.bk-chapter {
  margin-bottom: 26px;
}
.bk-chapter h2 {
  font-size: 21px;
  color: #1f4a33;
  border-left: 3px solid #c9a24a;
  padding-left: 12px;
  margin: 0 0 10px;
}
@media print {
  .bk-cover {
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bk-chapter {
    page-break-inside: avoid;
  }
}

.share-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.share-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fdf9ee;
  border: 1px solid #e3dcc8;
  border-radius: 14px;
  padding: 12px 14px;
}
.share-list li > div {
  flex: 1;
  min-width: 180px;
}
.share-list code {
  font-size: var(--t-small);
  color: #55655a;
}

/* ================= REZI WONDERS =================
   Contrast pre-computed: 6.18:1 - 11.19:1, all AA or better.
   Tap targets >=64px per NN/g guidance for under-9s. */
.wonder-panel {
  border-color: #e0d5ee;
}
.wonder-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.wonder-head h2 {
  margin: 0 0 2px;
  font-size: 20px;
}
.wonder-recall {
  margin: 0;
  font-size: var(--t-small);
  color: #55655a;
  font-style: italic;
}
.rezi-tiny {
  width: 44px;
  height: 46px;
  flex-shrink: 0;
}
.wonder-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.wonder-card {
  border: 1px solid #e2dcef;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.wonder-card.is-answered {
  background: #f9fdf9;
  border-color: #c6dfcd;
}
.wonder-ask {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #294438;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.wonder-body {
  padding: 0 16px 16px 16px;
}
.wonder-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wonder-choices .button {
  min-height: 56px;
  border-radius: 16px;
}
.wonder-said {
  margin: 0 0 8px;
  font-size: var(--t-small);
  color: #4a5a50;
}
.wonder-reply {
  margin: 0;
  padding: 12px 15px;
  background: #fff8e6;
  border: 1px solid #e6cf9a;
  border-radius: 14px;
  color: #2b3b30;
  font-size: 16px;
}
.wonder-own {
  margin: 10px 0 0;
  padding: 11px 15px;
  background: #f3eefb;
  border: 1px solid #ddd0f0;
  border-radius: 14px;
  color: #5d4a86;
  font-size: 15px;
}
.wonder-own span {
  font-weight: 700;
  color: #4a3a6f;
}
.wonder-human {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 0;
  padding: 11px 15px;
  background: #fdf3ec;
  border: 1px solid #e8c4a8;
  border-radius: 14px;
  color: #7a3410;
  font-size: 15px;
  font-weight: 600;
}
.wonder-human .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.wonder-body .button[data-variant="tiny"] {
  margin-top: 10px;
}

/* Difficulty is adult-controlled. Shown as a plain statement of the current setting,
   not a disabled dropdown — an input a child can see but not use is just frustrating. */
.locked-setting {
  background: #fdf9ee;
  border: 1px solid #e3dcc8;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.locked-setting h2 {
  margin: 0 0 6px;
  font-size: 17px;
}
.locked-setting p {
  margin: 0 0 6px;
}
.locked-setting p strong {
  font-size: 19px;
  color: #31563f;
}

/* ======================= POP-UP EXPLAINERS =======================
   Design notes, so the reasoning survives me:

   - One idea per screen. CTW's "distractor" testing cut any segment that held
     less than 80-90% of a child's attention; the fix is never more than one
     thing to look at.
   - The diagram is the hero, the words are the caption. Under-9s read pictures
     first (NN/g, Designing for Kids).
   - Every touch target is >= 56px tall / >= 2cm. NN/g's floor for under-9s.
   - Labels pop on in order via --i, so the picture assembles at reading speed
     instead of arriving all at once.
   - Contrast for every pair below was computed before this block was written.
     Lowest text pair is 6.11:1; the off-state progress dot is 3.54:1, which is
     the WCAG 1.4.11 bar for non-text UI. Nothing here relies on colour alone.
   ================================================================= */

.exp-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.exp-card {
  background: #fff;
  border: 1px solid #d8ddd2;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 0 #ece9dd;
}
.exp-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.exp-card-top h3 {
  font:
    400 21px/1.25 Georgia,
    serif;
  color: #294438;
  margin: 0 0 6px;
}
.exp-hook {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: #4c5f4e;
}
.exp-bigq {
  margin: 0;
  background: #f3edfa;
  border: 1px solid #e0d3ef;
  border-radius: 14px;
  padding: 12px 14px;
  color: #54357c;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.exp-bigq .icon {
  flex-shrink: 0;
}
.exp-bigq.big {
  font:
    400 clamp(20px, 3.2vw, 27px)/1.3 Georgia,
    serif;
  justify-content: center;
  text-align: center;
  padding: 16px 18px;
}
.exp-parts {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: expart;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.exp-parts li {
  counter-increment: expart;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-small);
  color: #3d5245;
}
.exp-parts li::before {
  content: counter(expart);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e8f4ec;
  color: #245a41;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-small);
}
/* margin-top:auto pins "Find out" to the bottom of every card, so the row of
   buttons lines up even when the titles wrap to different heights. */
.exp-card > .button {
  align-self: flex-start;
  margin-top: auto;
  min-height: 56px;
  padding: 14px 26px;
  font-size: 16px;
  border-radius: 14px;
}
.exp-card .exp-parts {
  margin-bottom: 4px;
}

/* ---- the stage: picture first, caption under it ---- */
.exp-stage {
  background: #fffdf6;
  border: 1px solid #e6e1cf;
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 6px;
  color: #294438;
}
.exp-hookbox {
  text-align: center;
  margin-bottom: 18px;
}
.exp-hook-lead {
  font-size: 16px;
  color: #4c5f4e;
  max-width: 46ch;
  margin: 0 auto 14px;
}
/* The frame hugs the diagram. Left unbounded it stretched to 1050px on desktop and
   the picture floated in a white void with the caption stranded off to the left —
   fine for an adult scanning, useless for an eight-year-old following one idea. */
.exp-figure {
  position: relative;
  background: #fff;
  border: 1px solid #e2d9c4;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.exp-scene {
  width: 100%;
  max-width: 468px;
  height: auto;
  display: block;
}
.exp-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.exp-labels li {
  background: #fdf0cf;
  border: 1px solid #e0b94b;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: var(--t-small);
  font-weight: 600;
  color: #4a3410;
}
/* The caption is a speech bubble sitting directly under the picture it explains,
   centred on the same column, so the eye travels picture -> words and stops. */
.exp-speaker {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 18px auto 0;
  max-width: 560px;
  background: #f3edfa;
  border: 1px solid #e0d3ef;
  border-radius: 18px;
  padding: 14px 18px;
}
.exp-predict .exp-speaker {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0;
}
.exp-speaker p {
  margin: 0;
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.6;
  color: #294438;
}
.exp-speaker strong {
  color: #54357c;
}
.exp-partname {
  margin: 0 0 12px;
  font-size: var(--t-small);
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  color: #5a4a2e;
}

/* ---- guess before you are told (ETS: participation raised gains) ---- */
.exp-predict {
  border-top: 1px dashed #e0d3ef;
  padding-top: 18px;
}
.exp-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 12px;
}
.exp-choices .button {
  min-height: 56px;
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 14px;
  background: #fff;
  color: #31563f;
  border: 2px solid #31563f;
  flex: 1 1 200px;
}

/* ---- progress: dots, plus an accessible label in the markup ---- */
.exp-progress {
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
}
.exp-progress span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7c8874;
}
.exp-progress span.on {
  background: #54357c;
}

/* ---- wonder facts ---- */
.exp-facts {
  background: #eaf6ee;
  border: 1px solid #cbe3d4;
  border-radius: 22px;
  padding: 22px;
  color: #22513c;
}
.exp-facts h2 {
  font:
    400 24px/1.25 Georgia,
    serif;
  color: #1d4634;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.exp-facts ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exp-facts li {
  font-size: 16px;
  line-height: 1.6;
}

/* ---- the answer, then straight back out into the real world ---- */
.exp-answer {
  background: #fff;
  border: 1px solid #d8ddd2;
  border-radius: 22px;
  padding: 22px;
  color: #294438;
}
.exp-guess {
  background: #f3edfa;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: var(--t-small);
  color: #4c3a68;
  margin: 16px 0 0;
}
.exp-look,
.exp-grownup {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 18px;
  padding: 16px 18px;
  margin-top: 16px;
}
/* Bonus & Mares 2015: children transfer content to real life more when they
   judge it real. So the last thing an explainer does is send her outside. */
.exp-look {
  background: #e6f2f8;
  border: 1px solid #bcdcea;
  color: #164a61;
}
/* ETS/Lesser: talking it over with an adult raised the measured gains. */
.exp-grownup {
  background: #fdeef2;
  border: 1px solid #f2ccd8;
  color: #6b2f43;
}
.exp-look h3,
.exp-grownup h3 {
  font:
    700 15px/1.4 Svadhyaya,
    Arial,
    sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: inherit;
}
.exp-look p,
.exp-grownup p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: inherit;
}
.exp-look .icon,
.exp-grownup .icon,
.exp-facts .icon {
  flex-shrink: 0;
}
.exp-stage .small {
  margin: 0;
}

@media (max-width: 520px) {
  .exp-stage,
  .exp-facts,
  .exp-answer {
    padding: 16px;
    border-radius: 18px;
  }
  .exp-choices .button {
    flex: 1 1 100%;
  }
  .exp-speaker {
    gap: 10px;
  }
}

/* All explainer motion is opt-in. A child who needs stillness gets the same
   information, just already assembled. */
@media (prefers-reduced-motion: no-preference) {
  .exp-labels li {
    animation: exp-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards;
    animation-delay: calc(var(--i, 0) * 0.16s + 0.1s);
  }
  .exp-scene {
    animation: exp-fade 0.3s ease-out;
  }
  .exp-card {
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease;
  }
  .exp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ece9dd;
  }
  @keyframes exp-pop {
    from {
      opacity: 0;
      transform: scale(0.72) translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes exp-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ======================= THE ISLAND MAP =======================
   Six drawn places instead of six identical cards. Each island inherits its
   whole palette from one data-fam attribute, so the tokens do the work and no
   per-island CSS exists to drift.
   ============================================================= */
.island-map {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
  /* TWO across even on a small phone. One-per-row made the page 3574px tall,
     and NN/g is explicit that under-9s should not have to scroll much. Two
     columns puts all six places within about one and a half screens, so she
     can see the whole world nearly at once. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
.island {
  --fam-bg: var(--leaf-bg);
  --fam-line: var(--leaf-line);
  --fam-edge: var(--leaf-edge);
  --fam-deep: var(--leaf-deep);
  --fam-ink: var(--leaf-ink);
  background: var(--card);
  border: 2px solid var(--fam-line);
  border-radius: var(--r-card);
  padding: 0 0 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--lift);
}
.island[data-fam="leaf"] {
  --fam-bg: var(--leaf-bg);
  --fam-line: var(--leaf-line);
  --fam-edge: var(--leaf-edge);
  --fam-deep: var(--leaf-deep);
  --fam-ink: var(--leaf-ink);
}
.island[data-fam="puzzle"] {
  --fam-bg: var(--puzzle-bg);
  --fam-line: var(--puzzle-line);
  --fam-edge: var(--puzzle-edge);
  --fam-deep: var(--puzzle-deep);
  --fam-ink: var(--puzzle-ink);
}
.island[data-fam="memory"] {
  --fam-bg: var(--memory-bg);
  --fam-line: var(--memory-line);
  --fam-edge: var(--memory-edge);
  --fam-deep: var(--memory-deep);
  --fam-ink: var(--memory-ink);
}
.island[data-fam="rainbow"] {
  --fam-bg: var(--rainbow-bg);
  --fam-line: var(--rainbow-line);
  --fam-edge: var(--rainbow-edge);
  --fam-deep: var(--rainbow-deep);
  --fam-ink: var(--rainbow-ink);
}
.island[data-fam="cove"] {
  --fam-bg: var(--cove-bg);
  --fam-line: var(--cove-line);
  --fam-edge: var(--cove-edge);
  --fam-deep: var(--cove-deep);
  --fam-ink: var(--cove-ink);
}
.island[data-fam="story"] {
  --fam-bg: var(--story-bg);
  --fam-line: var(--story-line);
  --fam-edge: var(--story-edge);
  --fam-deep: var(--story-deep);
  --fam-ink: var(--story-ink);
}
/* The picture is the hero and fills the card's full width: under-9s read
   pictures before words. */
.island-art {
  width: 100%;
  height: auto;
  display: block;
  background: var(--fam-bg);
  border-bottom: 2px solid var(--fam-line);
}
.island-plate {
  text-align: center;
  padding: 16px 18px 8px;
}
.island-plate h2 {
  font: 800 var(--t-title) / 1.15 var(--font-display);
  color: var(--fam-ink);
  margin: 0 0 4px;
}
.island-what {
  margin: 0;
  font-size: var(--t-body);
  color: var(--ink-soft);
}
.island-been {
  margin: 10px 0 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--fam-ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* Each island's button wears that island's colour, so the place and the door
   match. Depth colour is the -deep rung darkened by the same overlay trick
   rather than a new hardcoded hex. */
.island > .button {
  background: var(--fam-deep);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--fam-deep) 72%, #000);
  min-width: 148px;
}
.island > .button:active:not([disabled]) {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fam-deep) 72%, #000);
}

@media (prefers-reduced-motion: no-preference) {
  .island {
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }
  .island:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 rgba(34, 55, 44, 0.11);
  }
}

/* ================== HERO: A BIG FRIEND, NOT A STICKER ==================
   Rezi was ~62px, repeated identically down every list. A design review put it
   plainly: "Rezi is a static sticker". NN/g found children EXPECT to tap on
   characters and pictures, and that they interact with them. So on the home
   screen she is now ~200px, greeting Mishita by name, and she appears ONCE
   rather than a dozen times — presence instead of wallpaper.
   ====================================================================== */
.companion-big {
  width: clamp(150px, 26vw, 210px);
  height: auto;
  display: block;
}
.hero-friend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-friend-name {
  margin: 0;
  font: 800 var(--t-lead) / 1.2 var(--font-display);
  color: var(--leaf-ink);
}
.hero-words .lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.hero-go {
  font-size: var(--t-lead);
  padding: 17px 32px;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
}
.account-hero {
  background: var(--leaf-bg);
  border: 2px solid var(--leaf-line);
}

/* The mistake principle, as four scannable beats rather than five paragraphs. */
.retry-recipe {
  gap: 14px;
}
.retry-recipe li strong {
  font: 800 var(--t-lead) / 1.2 var(--font-display);
}

@media (prefers-reduced-motion: no-preference) {
  /* She breathes. Nothing loud, nothing that pulls focus off the words —
     just enough that she reads as alive rather than pasted on. */
  .companion-big {
    animation: rezi-breathe 1.6s ease-in-out 1;
    transform-origin: 50% 90%;
  }
  @keyframes rezi-breathe {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.035) rotate(-1.2deg);
    }
  }
}

@media (max-width: 700px) {
  /* NN/g: avoid heavy scrolling for under-9s. On a phone the hero stacks with
     the friend FIRST, so the first thing she sees is a face, not a paragraph. */
  .account-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-friend {
    order: -1;
  }
  .account-hero p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .island-plate {
    padding: 12px 10px 6px;
  }
  .island-plate h2 {
    font-size: 19px;
  }
  .island-what {
    font-size: var(--t-small);
  }
  .island > .button {
    min-width: 0;
    width: calc(100% - 24px);
    padding: 15px 12px;
  }
}

/* ========================= THE SHELF =========================
   Her books standing spine-out on a real plank, her name down each one.
   Contrast verified before writing: white spine text on each family -deep is
   5.98:1 (draft) to 8.21:1 (poem). Nothing here is rated or ranked — spine
   THICKNESS reflects length only, which is a fact about what she wrote and not
   a judgement of it (Amabile 1986).
   ============================================================= */
.shelf-unit {
  background: var(--card);
  border: 2px solid var(--story-line);
  border-radius: var(--r-card);
  padding: 20px 20px 0;
  margin-bottom: 24px;
  box-shadow: var(--lift);
}
.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}
.shelf-head h2 {
  margin: 0;
  color: var(--story-ink);
}
.shelf-count {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
}
.shelf-row {
  list-style: none;
  margin: 0;
  /* Centred, so three books do not sit lost at the left of a wide plank.
     They lean together the way real books do on a half-full shelf. */
  padding: 0 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  overflow-x: auto;
  overflow-y: hidden;
}
.book {
  --spine: var(--cove-deep);
  flex: 0 0 auto;
}
.book[data-fam="puzzle"] {
  --spine: var(--puzzle-deep);
}
.book[data-fam="rainbow"] {
  --spine: var(--rainbow-deep);
}
.book[data-fam="cove"] {
  --spine: var(--cove-deep);
}
.book[data-fam="draft"] {
  --spine: #6b6257;
}
/* The spine IS the button. Big target: ~200px tall and at least 44px wide,
   comfortably past NN/g's 2cm floor for a child of eight. */
.book-spine {
  width: var(--w, 56px);
  height: 250px;
  border: 0;
  border-radius: 4px 4px 3px 3px;
  background: var(--spine);
  color: #fff;
  cursor: pointer;
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    inset -5px 0 0 rgba(0, 0, 0, 0.16),
    inset 5px 0 0 rgba(255, 255, 255, 0.14),
    0 3px 5px rgba(34, 55, 44, 0.22);
}
.spine-title,
.spine-by {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  overflow: hidden;
}
/* Titles WRAP down the spine instead of truncating. A child seeing
   "My Cat Has Opi..." on her own book is the opposite of the point. */
.spine-title {
  font: 800 var(--t-body) / 1.15 var(--font-display);
  letter-spacing: 0.2px;
  white-space: normal;
  /* Leaves guaranteed room for the by-line beneath: the title may shrink, her
     name may not. A spine reading "Mishi" defeats the entire feature. */
  flex: 0 1 auto;
  min-height: 0;
  text-align: left;
}
/* Her name in full, always. It is the whole reason the shelf exists. */
.spine-by {
  font: 700 var(--t-small) / 1 var(--font-read);
  white-space: nowrap;
  opacity: 0.95;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  /* Never squeezed, never truncated. */
  flex: 0 0 auto;
  overflow: visible;
}
/* The plank the books stand on. */
.shelf-plank {
  height: 18px;
  margin: 0 -20px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(#c9975a, #a97539);
  box-shadow: inset 0 3px 0 #e0bd86;
}
.shelf-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 30px 10px;
  min-height: 150px;
}
.shelf-empty p {
  margin: 0;
  font-size: var(--t-lead);
  color: var(--ink-soft);
}

/* Drafts live on a desk, not a shelf: unfinished is a different state, not a
   lesser one. */
.desk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.desk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--story-line);
  border-radius: 16px;
  padding: 14px 16px;
}
.desk-item h3 {
  margin: 0 0 2px;
  font: 800 var(--t-lead) / 1.2 var(--font-display);
}
.desk-item p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* Front matter in the editor. Collapsed by default so a blank page stays a
   blank page — autonomy, not a form to fill in. */
.front-matter {
  border: 1px dashed var(--story-line);
  border-radius: 14px;
  padding: 4px 16px 14px;
  margin: 6px 0 4px;
}
.front-matter summary {
  cursor: pointer;
  font: 800 var(--t-body) / 2.4 var(--font-read);
  color: var(--story-ink);
}
.fm-hint {
  display: block;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---- The printed book's anatomy: title page, dedication, note, colophon ---- */
.bk-title-page {
  text-align: center;
  padding: 54px 30px;
  border-bottom: 1px solid #e3dcc8;
}
.bk-title-page h2 {
  font: 700 clamp(26px, 4vw, 38px) / 1.15 var(--font-display);
  margin: 0 0 14px;
}
.btp-by {
  margin: 0;
  font-size: var(--t-lead);
  font-weight: 700;
}
.btp-ed {
  margin: 12px 0 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.bk-dedication {
  padding: 44px 40px;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  border-bottom: 1px solid #e3dcc8;
}
.bk-dedication p {
  margin: 0;
  font-size: var(--t-lead);
}
/* The Author's Chair, in print. She introduces her own work; nobody grades it. */
.bk-note {
  padding: 30px 34px;
  background: var(--story-bg);
  border-top: 1px solid #e3dcc8;
}
.bk-note h3 {
  font: 800 var(--t-lead) / 1.2 var(--font-display);
  color: var(--story-ink);
  margin: 0 0 10px;
}
.bk-colophon {
  padding: 26px 34px 34px;
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-soft);
  border-top: 1px solid #e3dcc8;
}
.bk-colophon p {
  margin: 0 0 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .book-spine {
    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease;
  }
  /* The book eases out of the shelf, the way a real one does. */
  .book-spine:hover,
  .book-spine:focus-visible {
    transform: translateY(-10px);
  }
  .book-spine:active {
    transform: translateY(-4px);
  }
}

@media print {
  /* Each part of the book gets its own page, like a real one. */
  .bk-title-page,
  .bk-dedication,
  .bk-note {
    page-break-after: always;
  }
  .front-matter,
  .shelf-unit {
    display: none;
  }
}

/* LIVING STORYBOOK: tangible places, gentle choices. See ALIVE-PLAN.md.
   Scenery is restricted to browse surfaces; no scene is added to an editor or beat. */
:root {
  --world-paper: #fbf3e8;
  --world-shadow: 0 10px 30px rgba(47, 69, 40, .07);
}
.site-header { background:var(--paper); }
.brand { font-family:var(--font-display); font-size:27px; }
.tabs { border:1px solid #e2e1d3; border-radius:20px; background:var(--card); padding:8px; gap:5px; box-shadow:0 3px 14px #33432a04; }
.tabs a { display:flex; align-items:center; gap:7px; padding:10px 11px; min-height:48px; border:1px solid transparent; }
.tabs .icon { width:22px; height:22px; }
.tabs a[aria-current] { border-color:var(--leaf-line); background:var(--leaf-bg); box-shadow:0 2px 0 #224a3010; }
.panel { box-shadow:0 3px 0 #d6d7c81f; }
.room-heading { display:grid; grid-template-columns:minmax(0,1fr) 215px; align-items:center; gap:25px; padding:24px 32px; border:1px solid #e6ddcb; border-radius:26px; background:var(--world-paper); overflow:hidden; margin-bottom:24px; }
.room-heading-copy > :last-child { margin-bottom:0; }
.room-heading .eyebrow { color:var(--ink-soft); }
.room-heading h1 { margin-bottom:14px; }
.room-heading-art { width:100%; height:190px; object-fit:contain; mix-blend-mode:multiply; }
body[data-room="learn"] .room-heading { grid-template-columns:1fr; background:none; border:0; padding:4px 0 10px; }
body[data-room="learn"] .room-heading-art { display:none; }
.living-clearing { border:1px solid #dce1c8; background:linear-gradient(115deg,#f1f4df 0%,#f4f0de 100%); padding:34px 42px; overflow:hidden; min-height:340px; }
.living-clearing h1 { font-size:clamp(34px,4vw,52px); }
.living-clearing .hero-friend { position:relative; isolation:isolate; padding:5px 0 0; }
.clearing-trees { position:absolute; width:310px; max-width:none; height:260px; object-fit:contain; z-index:-1; inset:-10px auto auto -60px; opacity:.42; mix-blend-mode:multiply; }
.companion-greeting { border:0; padding:0; border-radius:38%; background:transparent; cursor:pointer; }
.companion-greeting .companion-big { filter:drop-shadow(3px 6px 3px #51422a12); }
.companion-message { font-size:var(--t-small); margin:0; text-align:center; max-width:270px; min-height:24px; }
.world-doorways { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin:20px 0 28px; }
.world-door { display:grid; grid-template-columns:82px minmax(0,1fr) 18px; align-items:center; gap:9px; background:var(--world-paper); border:1px solid #e0ddcc; border-radius:20px; padding:10px 13px 10px 2px; text-decoration:none; box-shadow:var(--lift); min-height:104px; }
.world-door .world-object { width:82px; height:88px; object-fit:cover; mix-blend-mode:multiply; }
.world-door strong { display:block; font:700 var(--t-lead)/1.2 var(--font-display); color:var(--ink); }
.world-door small { display:block; font-size:var(--t-small); line-height:1.35; margin-top:5px; color:var(--ink-soft); }
.door-arrow { font-size:21px; color:var(--leaf-deep); }
.island { border:1px solid var(--fam-line); box-shadow:0 5px 0 #d8d4c130; border-radius:25px; }
.island-portal { display:block; width:100%; background:var(--world-paper); border:0; padding:0; border-radius:23px 23px 0 0; overflow:hidden; }
.island-portal:disabled { opacity:1; }
.island-art { position:relative; display:block; width:100%; aspect-ratio:200/140; background:var(--world-paper); overflow:hidden; border-bottom:1px solid var(--fam-line); }
.island-fallback { width:100%; height:100%; display:block; }
.island-diorama { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.island-diorama[hidden] { display:none; }
.has-world-art .island-fallback { visibility:hidden; }
.island-plate { padding-top:18px; }
.island-plate h2 { font-size:clamp(21px,2.3vw,27px); }
.island > .button { margin-top:auto; }
.garden-panel { background:linear-gradient(180deg,#f2f5e5,#eaf0d9); border:1px solid #d6dfbd; padding:30px; }
.garden-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.garden-heading h2 { margin-bottom:10px; }
.garden-heading p { max-width:650px; }
.garden-sun { flex-shrink:0; padding:16px; border-radius:50%; background:#f7e9b1; box-shadow:inset 0 3px 0 #fff5d2,0 5px 20px #aa853016; }
.garden-sun .icon { width:38px; height:38px; }
.garden-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-block:24px; }
.garden-plot,.garden-plot.is-seed { padding:0; background:#fbf9eb; border:1px solid #cdd8b9; border-radius:65% 65% 22px 22px / 28% 28% 22px 22px; overflow:visible; box-shadow:0 4px 0 #b3c39720; }
.garden-plot.is-seed { background:#f3f4e7; border-style:solid; }
.garden-flower { display:flex; flex-direction:column; align-items:center; width:100%; min-height:250px; padding:12px 12px 20px; border:0; background:transparent; color:var(--ink); border-radius:inherit; }
.garden-plot .world-flower { width:120px; height:150px; display:block; }
.garden-flower strong { font:700 var(--t-lead)/1.2 var(--font-display); }
.garden-flower span { display:block; font-size:var(--t-small); line-height:1.4; color:var(--ink-soft); margin-top:6px; }
.flower-album { background:#fffdf5; border:1px solid #e4d8be; padding:30px; box-shadow:3px 4px 0 #e9e0ce,6px 8px 0 #f4eedf; margin-bottom:32px; }
.flower-album h2 { margin-bottom:10px; }
.album-pages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; list-style:none; padding:0; margin:24px 0 8px; }
.album-flower { display:flex; flex-direction:column; align-items:center; background:#fcf4e4; border:1px solid #e0d6bf; border-radius:6px; width:100%; min-height:270px; padding:18px 12px; position:relative; box-shadow:3px 4px 9px #70603b09; color:var(--ink); }
.album-flower .world-flower { width:120px; height:150px; transform:rotate(-9deg); }
.album-flower strong { font:700 var(--t-lead)/1.25 var(--font-display); }
.album-flower span:not(.album-tape) { font-size:var(--t-small); color:var(--ink-soft); line-height:1.4; margin-top:7px; }
.album-tape { width:52px; height:19px; position:absolute; top:-6px; background:#d5cfad99; transform:rotate(-5deg); }
.album-empty { display:flex; align-items:center; gap:24px; border:1px dashed #d6ccb2; border-radius:12px; padding:24px; margin-top:22px; }
.album-empty .world-flower { width:90px; height:120px; flex-shrink:0; opacity:.8; }
.album-empty p { font-size:var(--t-lead); margin:0; }
.album-empty span { font-size:var(--t-small); }
.flower-detail { text-align:center; }
.flower-portrait { width:190px; height:220px; margin:0 auto 18px; border-radius:80% 80% 35% 35%; background:#f4f2df; }
.flower-portrait .world-flower { width:160px; height:200px; }
.flower-detail .actions { justify-content:center; }
.flower-detail > p { max-width:490px; margin-inline:auto; }
#garden-error:empty { display:none; }
#garden-error { color:var(--cove-deep); font-weight:700; }
.loading-card { background:linear-gradient(120deg,var(--leaf-bg),var(--paper)); }
body[data-room="research"] .prose,body[data-room="privacy"] .prose { border-top:5px solid var(--leaf-line); }
@media (prefers-reduced-motion:no-preference) {
  .world-door,.garden-flower .flower-head,.album-flower { transition:transform .22s ease,box-shadow .22s ease; }
  .world-door:hover,.album-flower:hover { transform:translateY(-3px); box-shadow:var(--world-shadow); }
  .garden-flower:hover .flower-head { transform:rotate(-5deg); transform-origin:80px 100px; }
  .island-diorama { transition:transform .3s ease; }
  .island-portal:hover:not(:disabled) .island-diorama { transform:scale(1.04); }
  .companion-greeting.is-greeting { animation:world-hello .65s ease-in-out 1; }
  .flower-portrait.is-pressed .world-flower { animation:world-press .6s ease-out 1; }
  @keyframes world-hello { 0%,100% { transform:rotate(0); } 35% { transform:rotate(-6deg); } 65% { transform:rotate(4deg); } }
  @keyframes world-press { from { transform:translateY(-16px) rotate(-12deg); } to { transform:none; } }
}
/* Saved calm and OS reduced motion both suppress ALL decorative motion, including legacy rules. */
body[data-calm="true"] *,body[data-calm="true"] *::before,body[data-calm="true"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
body[data-calm="true"] .world-door:hover,body[data-calm="true"] .album-flower:hover,body[data-calm="true"] .island:hover,body[data-calm="true"] .garden-flower:hover .flower-head,body[data-calm="true"] .island-portal:hover .island-diorama { transform:none; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .world-door:hover,.album-flower:hover,.island:hover,.garden-flower:hover .flower-head,.island-portal:hover .island-diorama { transform:none; }
}
@media (max-width:850px) {
  .world-doorways { gap:10px; }
  .world-door { grid-template-columns:1fr; text-align:center; justify-items:center; padding:8px 12px 16px; }
  .world-door .world-object { height:92px; width:110px; }
  .world-door small,.world-door .door-arrow { display:none; }
  .room-heading { grid-template-columns:minmax(0,1fr) 150px; padding:24px; gap:15px; }
  .room-heading-art { height:155px; }
}
@media (max-width:580px) {
  .tabs { gap:4px; padding:6px; border-radius:16px; }
  .tabs a { flex:1 1 calc(25% - 6px); flex-direction:column; gap:3px; padding:7px 3px; font-size:15px; line-height:1.2; text-align:center; min-height:64px; }
  .tabs .icon { width:22px; height:22px; }
  .room-heading { grid-template-columns:minmax(0,1fr) 88px; padding:20px; gap:8px; border-radius:22px; }
  .room-heading-art { height:100px; width:100px; max-width:none; margin-left:-10px; }
  .room-heading h1 { font-size:30px; }
  .room-heading .eyebrow { font-size:15px; letter-spacing:.8px; }
  .room-heading-copy p:not(.eyebrow) { font-size:16px; line-height:1.55; }
  .living-clearing { padding:23px; min-height:0; }
  .living-clearing .hero-friend { order:-1; padding-top:0; }
  .living-clearing .companion-big { width:155px; }
  .clearing-trees { width:230px; height:180px; left:calc(50% - 160px); }
  .living-clearing h1 { font-size:34px; }
  .living-clearing .hero-words > .eyebrow { font-size:15px; letter-spacing:.5px; }
  .living-clearing .hero-friend-name { font-size:18px; }
  .living-clearing .hero-words .lead { margin-bottom:18px; }
  .world-doorways { margin-block:16px 24px; }
  .world-door { padding:6px 7px 13px; gap:3px; border-radius:17px; }
  .world-door .world-object { width:85px; height:70px; }
  .world-door strong { font-size:17px; }
  .island-plate h2 { font-size:20px; }
  .garden-panel,.flower-album { padding:20px 16px; }
  .garden-heading { gap:12px; }
  .garden-sun { padding:9px; }
  .garden-sun .icon { width:26px; height:26px; }
  .garden-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .garden-flower { padding:8px 8px 15px; min-height:229px; }
  .garden-plot .world-flower { width:100px; height:135px; }
  .garden-flower strong { font-size:19px; }
  .garden-flower span { font-size:15px; }
  .album-pages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .album-flower { min-height:248px; padding:15px 8px; }
  .album-flower strong { font-size:19px; }
  .album-flower .world-flower { width:90px; height:130px; }
  .album-empty { gap:10px; padding:15px; }
  .album-empty .world-flower { width:65px; height:90px; }
  .album-empty p { font-size:17px; }
}
@media print { .tabs,.world-doorways,.room-heading-art,.clearing-trees { display:none; } }
.empty-world { display:block; width:170px; height:132px; object-fit:contain; mix-blend-mode:multiply; margin:0 auto 15px; }
@media (max-width:580px) { .empty-world { width:130px; height:100px; } }