/* E5 "filho" mode: tokens and overrides under html.kid. No logos, brand text or images.
   Capitals only on the title (the name plate h1); everything else is sentence case, untracked. */
html.kid {
  --color-paper: var(--kid-bg); --color-paper-2: var(--kid-bg); --color-paper-3: var(--kid-bg);
  --color-ink: var(--kid-fg); --color-muted: var(--kid-muted); --color-rule: var(--kid-gray); --color-rule-2: var(--kid-gray);
  --color-accent: var(--kid-red); --color-focus: var(--kid-fg); --color-cool: var(--kid-fg);
}
html.kid #stage { background: var(--kid-road); }
html.kid #hint { display: none; }
html.kid body {
  background: var(--kid-bg);
  color: var(--kid-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html.kid #hudstack,
html.kid :is(#hud, #hint, #prog, #pdone, #kidp, #kidb, #kidback, #toggle, #score, #dclose),
html.kid #me,
html.kid #mute,
html.kid dialog,
html.kid .card {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  color: var(--kid-fg);
}
html.kid #me h1 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
html.kid :is(#hud, #hint, #prog, #pdone, #kidp, #kidb, #kidback, #toggle, #mute, #score),
html.kid #me,
html.kid .card,
html.kid dialog {
  background: var(--kid-bg);
  border: 1px solid var(--kid-gray);
  border-radius: 4px;
}
html.kid dialog::backdrop {
  background: color-mix(in oklab, var(--kid-bg) 80%, transparent);
}
html.kid #me .lang a {
  letter-spacing: 0;
}
html.kid a {
  color: var(--kid-fg);
  text-decoration-color: var(--kid-accent);
}
html.kid button,
html.kid #mute {
  background: var(--kid-bg);
  color: var(--kid-fg);
  border: 2px solid var(--kid-red);
  border-radius: 4px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
html.kid :is(#toggle, #mute, #kidback, #dclose) {
  border: 2px solid var(--kid-red);
}
html.kid #pcta {
  background: var(--kid-red);
  color: var(--kid-fg);
}
html.kid button:hover,
html.kid button:focus-visible {
  background: var(--kid-red);
  color: var(--kid-fg);
  outline: 2px solid var(--kid-fg);
  outline-offset: 2px;
}
html.kid ::selection {
  background: var(--kid-accent);
  color: var(--kid-fg);
}
@media (max-width: 600px) { /* hide the nearest-station line and the visited counter so the back button and the letters fit */
  html.kid #hudstack > :is(#hud, #prog) { display: none; } /* the nearest-station line would cover the ring; the car labels say it already */
}
@media (prefers-reduced-motion: reduce) {
  html.kid *,
  html.kid *::before,
  html.kid *::after {
    animation: none !important;
    transition: none !important;
  }
}
html.kid #me .lang a { font-family: inherit; font-weight: 700; } /* language chips use the kid body font, mono stays on numbers only */
html.kid .kidprod { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem 1rem; text-align: center; }
html.kid .kidprod h2 { margin: 0; font-size: 1.75rem; font-weight: 800; }
html.kid .kidprod canvas { max-width: 100%; height: auto; background: var(--kid-road); border: 1px solid var(--kid-gray); border-radius: 4px; }
html.kid .kidprod p { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 0; }
html.kid .kidprod a { padding: .6rem 1rem; border: 2px solid var(--kid-red); border-radius: 4px; text-decoration: none; color: var(--kid-fg); }
html.kid .kidprod a:hover, html.kid .kidprod a:focus-visible { background: var(--kid-red); outline: 2px solid var(--kid-fg); outline-offset: 2px; }