/**
 * Kinderwelt — Look und Rahmen der neuen Grundschul-Apps (seit 2026-09-28).
 * Gehört zu kinderwelt.js; API, Regeln und Anatomie stehen dort im Kopf.
 *
 * Anatomie (Hochformat 390×844 ist der Primärfall):
 *   .kw            Raster über den ganzen Viewport
 *   ├ .kw-kopf     links „Zum Weg", Mitte Fortschritt, rechts das Monster
 *   ├ .kw-buehne   die Szene der App (#buehne gehört der App)
 *   └ .kw-fuss     Daumen-Zone der App (#fuss gehört der App)
 *   #kw-weg        Stationen-Weg, liegt über Bühne + Fuß
 *   #kw-blase      Sprechblase unter dem Kopf, verdeckt nie die Bühnenmitte
 *
 * Maße: EIN Abstand (14 px, ≤ 768 px: 10 px), Radien 16 (Tasten) / 24 (Flächen),
 * Tippflächen ≥ 56 px. Farben nur über die --k-*-Variablen (Canvas liest sie
 * per Kind.farbe()).
 */

/* ── Nunito (aus _shared, variabel 400–900) + offene Schul-4 ─────────────── */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../_shared/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../_shared/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../_shared/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../_shared/nunito-vier.woff2') format('woff2');
  unicode-range: U+0034;
}
/* Ziffer 1 in der Schulform ohne Fuß (Zainab, 2026-10-01), gleiches Muster wie die 4.
   Bauen: python3 scripts/_nunito-eins-font.py */
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../_shared/nunito-eins.woff2') format('woff2');
  unicode-range: U+0031;
}

/* ── Farbwelt: Tag (Creme) und Abendhimmel (Navy) ────────────────────────── */
:root {
  --k-luft: 14px;
  --k-r: 16px;
  --k-r-gross: 24px;
  --k-taste: 56px;
  --k-monster: 64px;

  --k-bg: #f6f1e7;
  --k-flaeche: #ffffff;
  --k-flaeche-2: #fbf8f2;
  --k-ink: #363150;
  --k-ink-2: rgba(54, 49, 80, 0.62);
  --k-ink-3: rgba(54, 49, 80, 0.32);
  --k-taste-bg: rgba(54, 49, 80, 0.07);
  --k-taste-hover: rgba(54, 49, 80, 0.11);
  --k-taste-an: rgba(54, 49, 80, 0.15);
  --k-blau: #3d82e0;
  --k-gelb: #f2a93b;
  --k-gruen: #2fa878;
  --k-koralle: #e8635a;
  --k-lila: #8a63d6;
  --k-tuerkis: #2aa8ad;
  --k-erfolg: #2fa878;
  --k-hinweis: #f2a93b;
  --k-blase: #363150;
  --k-blase-ink: #ffffff;
  --k-schatten: rgba(54, 49, 80, 0.18);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --k-bg: #161d38;
  --k-flaeche: #1f2748;
  --k-flaeche-2: #252e55;
  --k-ink: #eef0fc;
  --k-ink-2: rgba(238, 240, 252, 0.66);
  --k-ink-3: rgba(238, 240, 252, 0.32);
  --k-taste-bg: rgba(238, 240, 252, 0.09);
  --k-taste-hover: rgba(238, 240, 252, 0.14);
  --k-taste-an: rgba(238, 240, 252, 0.19);
  --k-blau: #6ea8ff;
  --k-gelb: #ffc75c;
  --k-gruen: #4cd399;
  --k-koralle: #ff8f84;
  --k-lila: #ab8bff;
  --k-tuerkis: #4fd0d6;
  --k-erfolg: #4cd399;
  --k-hinweis: #ffc75c;
  --k-blase: #eef0fc;
  --k-blase-ink: #161d38;
  --k-schatten: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@media (max-width: 768px) {
  :root { --k-luft: 10px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  overflow: hidden;
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; }
canvas { display: block; touch-action: none; }

/* ── Rahmen ──────────────────────────────────────────────────────────────── */
.kw {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "kopf" "buehne" "fuss";
  gap: var(--k-luft);
  padding: var(--k-luft);
  padding-top: max(var(--k-luft), env(safe-area-inset-top));
  padding-bottom: max(var(--k-luft), env(safe-area-inset-bottom));
}
.kw-kopf {
  grid-area: kopf;
  position: relative;
  display: flex; align-items: center; gap: var(--k-luft);
  height: var(--k-monster);
  /* Über allen Bühnenflächen (Weg 20, Sperre 40, Abschluss 45): die Sprechblase
     hängt am Kopf und darf nie darunter rutschen. Hand/Konfetti/Blatt liegen höher. */
  z-index: 55;
}
.kw-kopf-mitte {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--k-luft);
}
.kw-buehne {
  grid-area: buehne;
  position: relative;
  min-height: 0;
  border-radius: var(--k-r-gross);
  background: var(--k-flaeche);
  overflow: hidden;
}
#buehne { position: absolute; inset: 0; }
.kw-fuss {
  grid-area: fuss;
  position: relative;
  min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--k-luft);
}
.kw-fuss:empty, .kw-fuss:has(> #fuss:empty) { display: none; }
#fuss { display: contents; }

/* Handy quer (wenig Höhe): Daumen-Zone als Spalte rechts neben der Bühne. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --k-monster: 56px; --k-luft: 10px; }
  .kw {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "buehne fuss";
    padding-left: max(var(--k-luft), env(safe-area-inset-left));
    padding-right: max(var(--k-luft), env(safe-area-inset-right));
  }
  .kw-fuss { justify-content: center; max-width: 46vw; }
  .kw-reihe { flex-wrap: wrap; }
}

/* ── Tasten ──────────────────────────────────────────────────────────────── */
.kw-taste {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--k-taste); min-height: var(--k-taste);
  padding: 0 16px;
  border-radius: var(--k-r);
  background: var(--k-taste-bg);
  color: var(--k-ink);
  font-weight: 800; font-size: 19px;
  transition: transform .12s ease, background-color .15s ease, opacity .2s ease;
  touch-action: manipulation;
  flex: none;
}
.kw-taste svg { width: 28px; height: 28px; flex: none; }
.kw-taste.rund { padding: 0; width: var(--k-taste); border-radius: 50%; }
.kw-taste.quadrat { padding: 0; width: var(--k-taste); }
.kw-taste.gross { min-height: 72px; min-width: 72px; font-size: 30px; border-radius: 20px; }
.kw-taste.primaer { background: var(--k-blau); color: #fff; }
.kw-taste.erfolg { background: var(--k-erfolg); color: #fff; }
.kw-taste.an { background: var(--k-taste-an); box-shadow: inset 0 0 0 3px var(--k-blau); }
.kw-taste:disabled, .kw-taste[aria-disabled="true"] { opacity: .35; pointer-events: none; }
@media (hover: hover) { .kw-taste:hover { background: var(--k-taste-hover); } .kw-taste.primaer:hover { filter: brightness(1.06); background: var(--k-blau); } .kw-taste.erfolg:hover { filter: brightness(1.06); background: var(--k-erfolg); } }
.kw-taste:active { transform: scale(.94); }
.kw-reihe { display: flex; align-items: center; justify-content: center; gap: var(--k-luft); flex-wrap: nowrap; max-width: 100%; }
.kw-reihe.wrap { flex-wrap: wrap; }

/* Zahlentasten (Ziffernblock, Antwortkacheln) */
.kw-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: none;
  border-radius: var(--k-r);
  background: var(--k-taste-bg);
  font-weight: 900; font-size: 32px; font-variant-numeric: tabular-nums;
  transition: transform .12s ease, background-color .15s ease;
}
.kw-zahl:active { transform: scale(.92); }
@media (hover: hover) { .kw-zahl:hover { background: var(--k-taste-hover); } }
.kw-zahl.richtig { background: var(--k-erfolg); color: #fff; }
.kw-zahl:disabled { opacity: .35; pointer-events: none; }
.kw-zahl.falsch { animation: kw-wackel .42s ease; }
@media (max-width: 380px) { .kw-zahl { width: 56px; height: 56px; font-size: 28px; } }

@keyframes kw-wackel {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-2deg); }
  45% { transform: translateX(6px) rotate(2deg); }
  70% { transform: translateX(-3px); }
}
.kw-wackel { animation: kw-wackel .42s ease; }
@keyframes kw-hops { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } 70% { transform: scale(.97); } }
.kw-hops { animation: kw-hops .45s ease; }

/* ── Kopf: Zurück, Fortschritt, Monster ──────────────────────────────────── */
#kw-zurueck, #kw-einst, #kw-skip { flex: none; }
#kw-einst { color: var(--k-ink-2); }
#kw-skip { background: var(--k-blau); color: #fff; }
.kw-perlen { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.kw-perle {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--k-taste-an);
  transition: background-color .3s ease, transform .3s ease;
}
.kw-perle.voll { background: var(--k-erfolg); animation: kw-hops .45s ease; }
.kw-perle.jetzt { box-shadow: 0 0 0 3px var(--k-ink-3); }
@media (max-width: 380px) { .kw-perle { width: 13px; height: 13px; } .kw-perlen { gap: 5px; } }
.kw-kopf-symbol { width: 40px; height: 40px; color: var(--k-ink-2); }
.kw-kopf-titel { font-weight: 900; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-sterne-kopf { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 20px; color: var(--k-ink-2); }
.kw-sterne-kopf svg { width: 26px; height: 26px; color: var(--k-gelb); }

#kw-monster {
  flex: none;
  position: relative;
  width: var(--k-monster); height: var(--k-monster);
  border-radius: 50%;
  background: var(--k-flaeche);
  padding: 0;
  overflow: visible;
  transition: transform .15s ease;
}
#kw-monster:active { transform: scale(.94); }
#kw-monster .kw-mfigur { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
#kw-monster .kw-mfigur svg { width: 100%; height: 100%; }
#kw-monster.ruft::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--k-gelb);
  animation: kw-ruf 1.2s ease-in-out infinite;
}
@keyframes kw-ruf { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Monster-Leiste: drei runde Tasten unter dem Monster */
#kw-leiste {
  position: absolute; right: 4px; top: calc(var(--k-monster) + 8px);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  z-index: 60;
}
#kw-leiste .kw-taste {
  width: var(--k-taste); padding: 0; border-radius: 50%;
  background: var(--k-flaeche);
  box-shadow: 0 6px 18px var(--k-schatten);
  opacity: 0; transform: translateY(-14px) scale(.6);
  transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
#kw-leiste.offen { pointer-events: auto; }
#kw-leiste.offen .kw-taste { opacity: 1; transform: none; }
#kw-leiste.offen .kw-taste:nth-child(2) { transition-delay: .04s; }
#kw-leiste.offen .kw-taste:nth-child(3) { transition-delay: .08s; }
#kw-leiste .kw-taste.lauscht { background: var(--k-koralle); color: #fff; animation: kw-ruf 1s ease-in-out infinite; }
#kw-leiste .kw-t-tipp { color: var(--k-gelb); }
#kw-leiste .kw-t-zeig { color: var(--k-blau); }
#kw-leiste .kw-t-frag { color: var(--k-koralle); }

/* ── Sprechblase ─────────────────────────────────────────────────────────── */
#kw-blase {
  position: absolute; right: 0; top: calc(var(--k-monster) + 10px);
  max-width: min(560px, 100%);
  padding: 12px 16px 13px;
  border-radius: 18px;
  background: var(--k-blase); color: var(--k-blase-ink);
  font-weight: 800; font-size: 19px; line-height: 1.3;
  box-shadow: 0 10px 28px var(--k-schatten);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .2s ease, transform .22s ease;
  pointer-events: none;
  z-index: 50;
}
#kw-blase::before {
  content: ''; position: absolute; top: -8px; right: calc(var(--k-monster) / 2 - 9px);
  width: 18px; height: 18px; border-radius: 4px;
  background: inherit; transform: rotate(45deg);
}
#kw-blase.an { opacity: 1; transform: none; }
#kw-blase.fam { font-weight: 700; }
@media (max-width: 480px) { #kw-blase { font-size: 18px; left: 0; max-width: none; } }
/* Handy quer: Die Blase wohnt IN der Kopfzeile links neben dem Monster — so
   verdeckt sie weder die Bühne noch die Daumen-Spalte rechts. */
@media (orientation: landscape) and (max-height: 560px) {
  #kw-blase {
    top: 50%; right: calc(var(--k-monster) + 14px); left: auto;
    max-width: min(58vw, 560px);
    padding: 8px 14px; font-size: 16px; line-height: 1.25;
    transform: translate(8px, -50%) scale(.97); transform-origin: right center;
  }
  #kw-blase.an { transform: translate(0, -50%); }
  #kw-blase::before { top: 50%; right: -7px; margin-top: -8px; }
}

/* ── Vorführung: Bühnensperre, Zeigehand, Überspringen ───────────────────── */
#kw-sperre {
  position: absolute; z-index: 40;
  border-radius: var(--k-r-gross);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: var(--k-luft);
}
body.kw-vorfuehrung .kw-buehne { box-shadow: inset 0 0 0 4px var(--k-blau); }
#kw-hand {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 58px; height: 58px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
  will-change: transform;
}
#kw-hand.an { opacity: 1; }
#kw-hand svg { width: 100%; height: 100%; transform-origin: 30% 10%; transition: transform .14s ease; }
#kw-hand.drueckt svg { transform: scale(.86) translateY(3px); }
.kw-ripple {
  position: fixed; z-index: 69; pointer-events: none;
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 3px solid var(--k-blau);
  animation: kw-ripple .6s ease-out forwards;
}
@keyframes kw-ripple { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.4); opacity: 0; } }

/* ── Stationen-Weg ───────────────────────────────────────────────────────── */
#kw-weg {
  position: absolute; inset: 0; z-index: 20;
  border-radius: var(--k-r-gross);
  background: var(--k-flaeche);
  overflow: hidden;
}
#kw-weg .kw-weg-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#kw-weg .kw-weg-linie { fill: none; stroke: var(--k-taste-an); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 26; }
#kw-weg .kw-weg-linie.fertig { stroke: var(--k-erfolg); opacity: .45; stroke-dasharray: none; stroke-width: 10; }
.kw-station {
  position: absolute;
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border-radius: 50%;
  background: var(--k-flaeche);
  box-shadow: 0 0 0 5px var(--k-taste-an), 0 10px 24px var(--k-schatten);
  display: flex; align-items: center; justify-content: center;
  color: var(--k-ink);
  transition: transform .15s ease, box-shadow .2s ease;
}
.kw-station:active { transform: scale(.94); }
.kw-station .kw-st-bild { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 34px; }
.kw-station .kw-st-bild svg { width: 60px; height: 60px; }
.kw-station.geschafft { box-shadow: 0 0 0 5px var(--k-erfolg), 0 10px 24px var(--k-schatten); }
.kw-station.dran { box-shadow: 0 0 0 6px var(--k-gelb), 0 10px 24px var(--k-schatten); animation: kw-dran 1.6s ease-in-out infinite; }
@keyframes kw-dran { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.kw-station.gesperrt { opacity: .42; }
.kw-station.frei { border-radius: 30px; }
.kw-st-stern {
  position: absolute; right: -6px; top: -6px;
  width: 38px; height: 38px; color: var(--k-gelb);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2));
}
.kw-st-schloss { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; background: var(--k-flaeche); color: var(--k-ink-2); padding: 6px; box-shadow: 0 0 0 3px var(--k-taste-an); }
.kw-st-titel {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%);
  white-space: nowrap; font-weight: 800; font-size: 16px; color: var(--k-ink-2);
  pointer-events: none;
}
#kw-weg.dicht .kw-station { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
#kw-weg.dicht .kw-station .kw-st-bild, #kw-weg.dicht .kw-station .kw-st-bild svg { width: 50px; height: 50px; font-size: 30px; }
@media (max-width: 380px), (max-height: 700px) {
  .kw-station { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .kw-station .kw-st-bild, .kw-station .kw-st-bild svg { width: 50px; height: 50px; font-size: 28px; }
  .kw-st-titel { font-size: 14px; top: calc(100% + 9px); }
}

/* ── Abschluss einer Station ─────────────────────────────────────────────── */
.kw-overlay {
  position: absolute; inset: 0; z-index: 45;
  border-radius: var(--k-r-gross);
  background: var(--k-flaeche);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 24px;
  text-align: center;
}
.kw-overlay .kw-gross-stern { width: 140px; height: 140px; color: var(--k-gelb); animation: kw-stern-rein .7s cubic-bezier(.3, 1.6, .5, 1) both; filter: drop-shadow(0 10px 18px rgba(242, 169, 59, .35)); }
@keyframes kw-stern-rein { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.kw-overlay .kw-frage { font-weight: 900; font-size: 24px; }
.kw-gesichter { display: flex; gap: var(--k-luft); flex-wrap: wrap; justify-content: center; }
.kw-gesicht {
  width: 96px; height: 96px; border-radius: 28px;
  background: var(--k-taste-bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background-color .15s ease;
}
.kw-gesicht svg { width: 64px; height: 64px; }
.kw-gesicht:active { transform: scale(.92); }
.kw-gesicht.g-leicht { color: var(--k-gruen); }
.kw-gesicht.g-mittel { color: var(--k-gelb); }
.kw-gesicht.g-schwer { color: var(--k-koralle); }
@media (max-width: 380px) { .kw-gesicht { width: 84px; height: 84px; } .kw-gesicht svg { width: 56px; height: 56px; } }
#kw-konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

/* ── Wörter-Station (Nachsprechen) ───────────────────────────────────────── */
.kw-woerter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; }
.kw-woerter .kw-satz { font-weight: 900; font-size: clamp(26px, 6.5vw, 40px); line-height: 1.2; max-width: 16em; }
.kw-woerter .kw-satz-bild { width: 120px; height: 120px; color: var(--k-lila); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kw-woerter.kw-mund-an .kw-satz-bild { opacity: 1; transform: scale(1); }
.kw-woerter .kw-satz-bild svg { width: 100%; height: 100%; }

/* ── Einstellungs-Blatt ──────────────────────────────────────────────────── */
#kw-blatt { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 20, 40, .35); }
#kw-blatt .kw-blatt-karte {
  width: min(520px, 100%);
  margin: var(--k-luft);
  border-radius: var(--k-r-gross);
  background: var(--k-flaeche);
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
#kw-blatt h3 { font-size: 15px; font-weight: 900; color: var(--k-ink-2); text-transform: uppercase; letter-spacing: .04em; }
#kw-blatt .kw-reihe { justify-content: flex-start; flex-wrap: wrap; }
#kw-blatt .kw-blatt-kopf { display: flex; align-items: center; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}