/*
 * De vijf stijlen. Elke stijl vult de tokens uit basis.css en versiert de kop,
 * de band, de sectietitels en het kader. Het papier binnen het kader blijft neutraal.
 */

/* Griekse cijfers met keraia: Α΄ = 1, Β΄ = 2, Γ΄ = 3, Δ΄ = 4. */
@counter-style griekse-cijfers {
  system: fixed;
  symbols: 'Α΄' 'Β΄' 'Γ΄' 'Δ΄' 'Ε΄' 'Ϛ΄' 'Ζ΄' 'Η΄' 'Θ΄';
  suffix: '';
}

/* ---------- Athene: marmer, zwart vernis en terracotta, met meanders ---------- */
:root[data-stijl='athene'] {
  --achtergrond: #ebe6dc;
  --inkt: #231d18;
  --inkt-zacht: #5f564c;
  --accent: #a84b24;
  --accent-inkt: #f7f1e6;
  --lijn: #c9bfae;
  --font-kop: 'Tenor Sans', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-tekst: 'Gentium Book Plus', Georgia, serif;
  --kop-gewicht: 400;
  --kop-spatiering: 0.12em;
  --radius: 3px;
  --knop-achtergrond: transparent;
  --knop-inkt: #231d18;
  --knop-rand: 1px solid #231d18;
  --kader: #1e1915;
  --kader-padding: 24px 10px;
  --kader-radius: 10px;
  --focus: #a84b24;
  --dialoog: #f4f0e8;
  --band-hoogte: 14px;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 11H12M10 11V1H2V8H7V5H5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --embleem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23cdc7ba' stroke='%23857e71' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='26.5' fill='none' stroke='%23a29b8e' stroke-width='1' stroke-dasharray='2 2'/%3E%3Cellipse cx='28' cy='40' rx='10' ry='13' fill='%23736c60'/%3E%3Ccircle cx='28' cy='25' r='9' fill='%23736c60'/%3E%3Cpath d='M20 19l1.5-6 4 5zM36 19l-1.5-6-4 5z' fill='%23736c60'/%3E%3Ccircle cx='24.5' cy='25' r='3.8' fill='%23ece6da'/%3E%3Ccircle cx='31.5' cy='25' r='3.8' fill='%23ece6da'/%3E%3Ccircle cx='24.5' cy='25' r='1.6' fill='%231e1915'/%3E%3Ccircle cx='31.5' cy='25' r='1.6' fill='%231e1915'/%3E%3Cpath d='M28 27.5l-1.4 3h2.8z' fill='%23ece6da'/%3E%3Cpath d='M24 52l2 3 2-3 2 3 2-3' fill='none' stroke='%23736c60' stroke-width='1.4'/%3E%3Cpath d='M8 20c4-5 9-7 14-6' fill='none' stroke='%23736c60' stroke-width='1.4'/%3E%3Cellipse cx='12' cy='15.5' rx='3.2' ry='1.4' transform='rotate(-35 12 15.5)' fill='%23736c60'/%3E%3Cellipse cx='17.5' cy='13' rx='3.2' ry='1.4' transform='rotate(-15 17.5 13)' fill='%23736c60'/%3E%3Cg font-family='Georgia,serif' font-size='9' fill='%2357503f' text-anchor='middle'%3E%3Ctext x='48' y='26'%3E%CE%91%3C/text%3E%3Ctext x='48' y='36'%3E%CE%98%3C/text%3E%3Ctext x='48' y='46'%3E%CE%95%3C/text%3E%3C/g%3E%3C/svg%3E");
}

[data-stijl='athene'] h1 {
  text-transform: uppercase;
}

[data-stijl='athene'] .band,
[data-stijl='athene'] .kader::before,
[data-stijl='athene'] .kader::after {
  background: var(--accent);
  -webkit-mask: var(--meander) repeat-x left center / 14px 14px;
  mask: var(--meander) repeat-x left center / 14px 14px;
}

[data-stijl='athene'] .kader::before,
[data-stijl='athene'] .kader::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 10px;
  -webkit-mask-size: 10px 10px;
  mask-size: 10px 10px;
}

[data-stijl='athene'] .kader::before { top: 7px; }
[data-stijl='athene'] .kader::after { bottom: 7px; }

[data-stijl='athene'] .sectie > h2 {
  text-transform: uppercase;
  font-size: 1.35rem;
}

[data-stijl='athene'] .sectie > h2::before {
  content: counter(sectie, griekse-cijfers);
  color: var(--accent);
  letter-spacing: 0;
}

[data-stijl='athene'] .grafiek-knoppen .knop,
[data-stijl='athene'] .kop-knoppen .knop {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

/* ---------- Athene: kopanimatie ----------
 * De uil op de zilveren munt (de "uil" van Athene, vandaar "uilen naar Athene
 * dragen") doet om de 48 seconden traag zijn ogen half dicht, als een slaperige
 * uil. Een halve cyclus later knipoogt hij met één oog. Er gebeurt dus hoogstens
 * om de 24 s iets, en de rest van de tijd staat alles stil.
 *
 * De oogleden liggen precies op de ogen van het embleem. Het embleem is 64 px en
 * de viewBox 64 eenheden, dus elke maat is "coördinaat / 64". De ogen hebben
 * straal 3,8 rond (24,5 25) en (31,5 25). Een ooglid heeft straal 4,4 in de kleur
 * van de kop (#736c60): zo blijft er van een gesloten oog geen lichte rand over,
 * en wat over de kop valt, zie je niet. Het middelpunt ligt 0,2 naar buiten, zodat
 * de punt van de snavel vrij blijft. Elk ooglid is afgeknipt op de middellijn
 * x = 28 tussen de ogen, zodat de knipoog het open oog niet raakt.
 *
 * In rust is een ooglid platgedrukt tot hoogte nul: de ogen staan open, ook als
 * de beweging uit staat (prefers-reduced-motion). Alleen transform beweegt.
 */
[data-stijl='athene'] .embleem {
  --athene-cyclus: 48s;
  position: relative;
}

[data-stijl='athene'] .embleem::before,
[data-stijl='athene'] .embleem::after {
  content: '';
  position: absolute;
  top: calc(100% * 20.6 / 64);
  width: calc(100% * 8.8 / 64);
  height: calc(100% * 8.8 / 64);
  border-radius: 50%;
  background: #736c60;
  transform: scaleY(0);
  transform-origin: 50% 0;
  pointer-events: none;
  animation: athene-knipperen var(--athene-cyclus) ease-in-out infinite;
}

[data-stijl='athene'] .embleem::before {
  left: calc(100% * 19.9 / 64);
  clip-path: inset(0 calc(100% * 0.7 / 8.8) 0 0);
}

/* Het rechteroog volgt dezelfde klok en knipoogt in de tweede helft. */
[data-stijl='athene'] .embleem::after {
  left: calc(100% * 27.3 / 64);
  clip-path: inset(0 0 0 calc(100% * 0.7 / 8.8));
  animation-name: athene-knipoog;
}

/* Eén slaperige knippering: in 0,6 s half dicht, even zo blijven, in 0,6 s weer open. */
@keyframes athene-knipperen {
  0%, 44%, 46.9%, 100% { transform: scaleY(0); }
  45.25%, 45.6% { transform: scaleY(0.55); }
}

/* Dezelfde knippering, en een halve cyclus later een knipoog die even dicht blijft. */
@keyframes athene-knipoog {
  0%, 44%, 46.9%, 94%, 97.6%, 100% { transform: scaleY(0); }
  45.25%, 45.6% { transform: scaleY(0.55); }
  95.25%, 96.3% { transform: scaleY(1); }
}

/* Wie op de uil tikt, krijgt meteen de knipoog: het stuk vanaf 94 % van de klok, één keer. */
[data-stijl='athene'] .embleem.tik::before {
  animation: none;
}

[data-stijl='athene'] .embleem.tik::after {
  animation: athene-knipoog var(--athene-cyclus) ease-in-out 1 calc(var(--athene-cyclus) * -0.94);
}

/* ---------- Athene: laadanimatie ----------
 * Terwijl Claude de foto leest, leest de uil van Athene mee (de steenuil heet in de biologie
 * echt Athene noctua). Hij komt aangevlogen, landt op een Ionische zuil, en op de stele ernaast
 * rolt een boekrol af met een functie en een parabool. Daarna een lus van 7 s:
 * 1. Hij kijkt even rond en draait zijn kop bijna helemaal om (uilen halen ongeveer 270 graden).
 *    Het gezicht verdwijnt achter de kop, je ziet even alleen zijn gespikkelde achterhoofd, en dan
 *    piept het gezicht aan de andere kant weer tevoorschijn. Daar kantelt hij zijn kop en knippert
 *    hij twee keer verbaasd, met opgetrokken wenkbrauwen. Dan draait hij terug. Het lijf beweegt
 *    intussen geen millimeter.
 * 2. Hij leest drie regels van de rol; zijn pupillen springen per regel in kleine schokjes, zoals
 *    echte ogen lezen.
 * 3. Hij kijkt je aan en knipoogt, zoals de uil in het embleem.
 * Grondig (data-fase="grondig"): boven zijn kop verschijnt een wolkje met ; (het Griekse vraagteken)
 * en er valt een bril op zijn snavel. De bril hoort bij het gezicht en draait voortaan mee rond.
 *
 * Het omdraaien: gezicht en achterhoofd liggen binnen de knipvorm van de kop en schuiven opzij terwijl
 * ze smaller worden (scaleX), zoals bij een bol die draait. Het gezicht springt van kant terwijl het
 * helemaal buiten de kop ligt; step-end zorgt dat die sprong nooit in beeld komt. Groepen die schalen
 * of draaien hebben inhoud die links en rechts even breed is rond x = 60, zodat hun draaipunt
 * (fill-box) niet verschuift als er binnenin iets beweegt.
 *
 * Zonder beweging (prefers-reduced-motion) staat de uil op de zuil en leest hij de afgerolde rol;
 * in de grondige fase heeft hij zijn bril al op.
 */
[data-stijl='athene'] .laden .laden-athene {
  --athene-laden-lus: 7s;
  --athene-laden-start: 1.3s;
  display: block;
}

/* Verschijning: aanvliegen, landen met een kleine plof, en de rol die afrolt. */
[data-stijl='athene'] #athene-uil {
  animation: athene-laden-aanvliegen 0.9s both;
}

[data-stijl='athene'] #athene-landing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: athene-laden-landen 0.9s ease-out both;
}

[data-stijl='athene'] #athene-vleugel-links,
[data-stijl='athene'] #athene-vleugel-rechts {
  transform-box: fill-box;
  transform-origin: 62% 0;
  animation: athene-laden-fladderen 0.9s ease-in-out both;
}

[data-stijl='athene'] #athene-blad {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: athene-laden-afrollen 0.55s 0.8s ease-out both;
}

[data-stijl='athene'] #athene-rol-onder {
  animation: athene-laden-rol-zakken 0.55s 0.8s ease-out both;
}

/* De lus. Alle delen volgen dezelfde klok, die start als de uil geland is. */
[data-stijl='athene'] #athene-kop {
  transform-box: fill-box;
  transform-origin: 50% 88%;
  animation: athene-laden-kop var(--athene-laden-lus) var(--athene-laden-start) ease-in-out infinite;
}

[data-stijl='athene'] #athene-gezicht,
[data-stijl='athene'] #athene-achterhoofd {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: athene-laden-gezicht var(--athene-laden-lus) var(--athene-laden-start) ease-in-out infinite;
}

/* In rust ligt het achterhoofd links naast de kop, dus buiten beeld. */
[data-stijl='athene'] #athene-achterhoofd {
  transform: translateX(-22px) scaleX(0.2);
  animation-name: athene-laden-achterhoofd;
}

[data-stijl='athene'] #athene-oog-links,
[data-stijl='athene'] #athene-oog-rechts,
[data-stijl='athene'] #athene-knipoog {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: athene-laden-ogen var(--athene-laden-lus) var(--athene-laden-start) ease-in-out infinite;
}

/* Het rechteroog zit in een extra groep die alleen de knipoog doet. */
[data-stijl='athene'] #athene-knipoog {
  animation-name: athene-laden-knipoog;
}

[data-stijl='athene'] #athene-wenkbrauwen {
  animation: athene-laden-wenkbrauwen var(--athene-laden-lus) var(--athene-laden-start) ease-in-out infinite;
}

[data-stijl='athene'] #athene-pupil-links,
[data-stijl='athene'] #athene-pupil-rechts {
  animation: athene-laden-lezen var(--athene-laden-lus) var(--athene-laden-start) ease-in-out infinite;
}

/* Wolkje en bril horen bij de grondige fase en zijn er anders niet. */
[data-stijl='athene'] #athene-vraag,
[data-stijl='athene'] #athene-bril,
[data-stijl='athene'] #athene-glans {
  opacity: 0;
}

[data-stijl='athene'] .laden[data-fase='grondig'] #athene-vraag {
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: athene-laden-vraag 2.6s ease-out both;
}

[data-stijl='athene'] .laden[data-fase='grondig'] #athene-bril {
  opacity: 1;
  animation: athene-laden-bril 0.9s 0.6s both;
}

[data-stijl='athene'] .laden[data-fase='grondig'] #athene-glans {
  animation: athene-laden-glans var(--athene-laden-lus) 1.5s ease-in-out infinite;
}

/* Van linksboven het beeld in, en zacht neerkomen op de zuil. */
@keyframes athene-laden-aanvliegen {
  0% {
    transform: translate(-48px, -84px);
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  }
  55% {
    transform: translate(-10px, -18px);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: translate(0, 0);
  }
}

/* Bij het neerkomen zakt de uil even in en veert hij terug, vanaf zijn pootjes. */
@keyframes athene-laden-landen {
  0%,
  76% {
    transform: scale(1, 1);
  }
  85% {
    transform: scale(1.1, 0.88);
  }
  94% {
    transform: scale(0.97, 1.04);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* Drie slagen met de vleugels, ze even spreiden om te remmen, en dan netjes opvouwen. */
@keyframes athene-laden-fladderen {
  0% {
    transform: rotate(70deg);
  }
  14% {
    transform: rotate(130deg);
  }
  28% {
    transform: rotate(50deg);
  }
  42% {
    transform: rotate(125deg);
  }
  56% {
    transform: rotate(55deg);
  }
  70% {
    transform: rotate(100deg);
  }
  86%,
  100% {
    transform: rotate(0deg);
  }
}

/* Het blad rolt naar beneden af, schiet een tikje door en veert terug. */
@keyframes athene-laden-afrollen {
  0% {
    transform: scaleY(0.02);
  }
  70% {
    transform: scaleY(1.06);
  }
  86% {
    transform: scaleY(0.97);
  }
  100% {
    transform: scaleY(1);
  }
}

/* De onderste rol volgt de onderrand van het blad: verschuiving = 34,5 × (schaal − 1). */
@keyframes athene-laden-rol-zakken {
  0% {
    transform: translateY(-33.8px);
  }
  70% {
    transform: translateY(2.07px);
  }
  86% {
    transform: translateY(-1.04px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Bij de verbazing kantelt de kop; tijdens het lezen hangt hij een beetje naar de rol. */
@keyframes athene-laden-kop {
  0%,
  24% {
    transform: rotate(0deg);
  }
  27%,
  33.5% {
    transform: rotate(-10deg);
  }
  36.5%,
  48% {
    transform: rotate(0deg);
  }
  51.5%,
  75% {
    transform: rotate(4deg);
  }
  79%,
  100% {
    transform: rotate(0deg);
  }
}

/*
 * Het gezicht: naar rechts weg (4 tot 13 %), even weg, dan links weer tevoorschijn (18 tot 22 %),
 * blijven piepen tot 36,5 %, en langs dezelfde weg terug tot het om 48 % weer recht vooruit kijkt.
 * Op 17 % en 41 % springt het van kant terwijl het buiten de kop ligt.
 */
@keyframes athene-laden-gezicht {
  0%,
  4% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: ease-in;
  }
  8.5% {
    transform: translateX(8px) scaleX(0.6);
    animation-timing-function: ease-out;
  }
  13%,
  17% {
    transform: translateX(22px) scaleX(0.2);
    animation-timing-function: step-end;
  }
  18% {
    transform: translateX(-22px) scaleX(0.2);
    animation-timing-function: ease-out;
  }
  22%,
  36.5% {
    transform: translateX(-9px) scaleX(0.55);
    animation-timing-function: ease-in;
  }
  41% {
    transform: translateX(-22px) scaleX(0.2);
    animation-timing-function: step-end;
  }
  42% {
    transform: translateX(22px) scaleX(0.2);
    animation-timing-function: linear;
  }
  44.5% {
    transform: translateX(8px) scaleX(0.6);
    animation-timing-function: ease-out;
  }
  48%,
  100% {
    transform: translateX(0) scaleX(1);
  }
}

/* Het achterhoofd ligt altijd een halve draai verder: het komt binnen als het gezicht weggaat. */
@keyframes athene-laden-achterhoofd {
  0%,
  4% {
    transform: translateX(-22px) scaleX(0.2);
    animation-timing-function: ease-in;
  }
  8.5% {
    transform: translateX(-8px) scaleX(0.6);
    animation-timing-function: ease-out;
  }
  13%,
  17% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: ease-out;
  }
  22%,
  36.5% {
    transform: translateX(10px) scaleX(0.5);
    animation-timing-function: ease-in;
  }
  41% {
    transform: translateX(0) scaleX(1);
    animation-timing-function: linear;
  }
  44.5% {
    transform: translateX(-8px) scaleX(0.6);
    animation-timing-function: ease-out;
  }
  48%,
  100% {
    transform: translateX(-22px) scaleX(0.2);
  }
}

/* Grote ogen bij het piepen, en twee keer verbaasd knipperen. */
@keyframes athene-laden-ogen {
  0%,
  22% {
    transform: scale(1, 1);
  }
  25%,
  27.5% {
    transform: scale(1.14, 1.14);
  }
  28.5% {
    transform: scale(1.14, 0.1);
  }
  29.5%,
  31.5% {
    transform: scale(1.14, 1.14);
  }
  32.5% {
    transform: scale(1.14, 0.1);
  }
  33.5%,
  34% {
    transform: scale(1.14, 1.14);
  }
  37%,
  100% {
    transform: scale(1, 1);
  }
}

/* Na het lezen: het rechteroog gaat even dicht. */
@keyframes athene-laden-knipoog {
  0%,
  84% {
    transform: scaleY(1);
  }
  86%,
  88% {
    transform: scaleY(0.1);
  }
  90%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes athene-laden-wenkbrauwen {
  0%,
  22% {
    transform: translateY(0);
  }
  25%,
  34% {
    transform: translateY(-2.5px);
  }
  37%,
  100% {
    transform: translateY(0);
  }
}

/* Drie regels lezen: per regel vier schokjes naar rechts en een snelle sprong terug. */
@keyframes athene-laden-lezen {
  0%,
  48% {
    transform: translate(0, 0);
  }
  51.5% {
    transform: translate(0.2px, 0.6px);
    animation-timing-function: steps(4, end);
  }
  58.5% {
    transform: translate(2.4px, 0.6px);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translate(0.2px, 1.3px);
    animation-timing-function: steps(4, end);
  }
  67% {
    transform: translate(2.4px, 1.3px);
    animation-timing-function: ease-in-out;
  }
  68.5% {
    transform: translate(0.2px, 2px);
    animation-timing-function: steps(4, end);
  }
  75.5% {
    transform: translate(2.4px, 2px);
    animation-timing-function: ease-in-out;
  }
  79%,
  100% {
    transform: translate(0, 0);
  }
}

/* Het wolkje met het Griekse vraagteken popt op, blijft even hangen en waait weg. */
@keyframes athene-laden-vraag {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.2);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.12);
  }
  20%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  88%,
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.85);
  }
}

/* De bril valt van boven op de snavel en stuitert twee keer na. */
@keyframes athene-laden-bril {
  0% {
    opacity: 0;
    transform: translateY(-44px);
    animation-timing-function: ease-in;
  }
  12% {
    opacity: 1;
  }
  55% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  84% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  92% {
    transform: translateY(-1px);
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Af en toe een glinstering over het glas. */
@keyframes athene-laden-glans {
  0%,
  4% {
    opacity: 0;
    transform: translate(-2.5px, 2.5px);
  }
  7% {
    opacity: 1;
  }
  10%,
  100% {
    opacity: 0;
    transform: translate(1.5px, -1.5px);
  }
}

/* Stilstaand beeld: de uil leest de afgerolde rol; in de grondige fase met bril. */
@media (prefers-reduced-motion: reduce) {
  [data-stijl='athene'] .laden-athene,
  [data-stijl='athene'] .laden-athene * {
    animation: none !important;
  }

  [data-stijl='athene'] #athene-kop {
    transform: rotate(4deg);
  }

  [data-stijl='athene'] #athene-pupil-links,
  [data-stijl='athene'] #athene-pupil-rechts {
    transform: translate(1.6px, 1.4px);
  }
}

/* ---------- Minecraft: aarde, gras en stenen menuvensters ---------- */
:root[data-stijl='minecraft'] {
  --achtergrond: #79553a;
  --achtergrond-beeld: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23866043'/%3E%3Cpath fill='%2379553a' d='M0 1h1v1H0zM3 0h1v1H3zM6 2h1v1H6zM2 4h1v1H2zM5 5h2v1H5zM1 7h1v1H1zM7 6h1v1H7z'/%3E%3Cpath fill='%23966c4a' d='M1 2h1v1H1zM4 3h1v1H4zM6 0h1v1H6zM0 5h1v1H0zM3 6h1v1H3z'/%3E%3Cpath fill='%23593d29' d='M5 1h1v1H5zM2 2h1v1H2zM7 4h1v1H7zM4 7h1v1H4zM1 5h1v1H1z'/%3E%3Cpath fill='%23b9855c' d='M3 3h1v1H3zM6 7h1v1H6z'/%3E%3C/svg%3E");
  --inkt: #3f3f3f;
  --inkt-zacht: #555;
  --accent: #5d9b2f;
  --accent-inkt: #fff;
  --lijn: #555;
  --font-kop: 'Pixelify Sans', 'Courier New', monospace;
  --font-tekst: 'Pixelify Sans', 'Courier New', monospace;
  --kop-gewicht: 600;
  --radius: 0;
  --knop-achtergrond: #8b8b8b;
  --knop-inkt: #fff;
  --knop-rand: 3px solid;
  --kader: #8b8b8b;
  --kader-padding: 6px;
  --kader-radius: 0;
  --kader-rand: 3px solid;
  --focus: #ffff55;
  --dialoog: #c6c6c6;
  --band-hoogte: 24px;
  --fout: #a4161a;
  --let-op: #7a4a00;
  --ok: #1d5e0f;
  --embleem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%23866043'/%3E%3Cpath fill='%235d9b2f' d='M0 0h8v2H0zM0 2h1v1H0zM2 2h2v1H2zM5 2h1v2H5zM7 2h1v1H7z'/%3E%3Cpath fill='%2378b83a' d='M0 0h1v1H0zM3 0h1v1H3zM6 1h1v1H6zM2 1h1v1H2z'/%3E%3Cpath fill='%23593d29' d='M1 4h1v1H1zM6 6h1v1H6zM3 7h1v1H3z'/%3E%3Cpath fill='%23b9855c' d='M3 5h1v1H3zM6 4h1v1H6z'/%3E%3Cpath fill='%23966c4a' d='M2 7h1v1H2zM4 3h1v1H4zM0 6h1v1H0z'/%3E%3C/svg%3E");
}

[data-stijl='minecraft'] body {
  background-size: 64px 64px;
  image-rendering: pixelated;
}

[data-stijl='minecraft'] .kop {
  color: #fff;
}

[data-stijl='minecraft'] h1 {
  color: #fff;
  text-shadow: 4px 4px 0 #3f3f3f;
}

[data-stijl='minecraft'] .ondertitel,
[data-stijl='minecraft'] .stijlkiezer,
[data-stijl='minecraft'] .voet {
  color: #f2f2f2;
  text-shadow: 2px 2px 0 #3f3f3f;
}

[data-stijl='minecraft'] .band {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3' shape-rendering='crispEdges'%3E%3Crect width='8' height='3' fill='%23866043'/%3E%3Cpath fill='%235d9b2f' d='M0 0h8v1H0zM0 1h1v1H0zM2 1h2v1H2zM5 1h1v2H5zM7 1h1v1H7z'/%3E%3Cpath fill='%2378b83a' d='M1 0h1v1H1zM4 0h1v1H4z'/%3E%3C/svg%3E") repeat-x left top / 64px 24px;
  image-rendering: pixelated;
}

[data-stijl='minecraft'] .sectie {
  padding: 14px;
  background: #c6c6c6;
  border: 3px solid;
  border-color: #fff #555 #555 #fff;
  box-shadow: 0 0 0 3px #000;
}

[data-stijl='minecraft'] .sectie > h2::before {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  background: #8b8b8b;
  border: 3px solid;
  border-color: #373737 #fff #fff #373737;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  font-size: 0.85em;
}

[data-stijl='minecraft'] .kader {
  border-color: #373737 #fff #fff #373737;
}

[data-stijl='minecraft'] .knop {
  border-color: #c6c6c6 #555 #555 #c6c6c6;
  box-shadow: 0 0 0 2px #000;
  text-shadow: 2px 2px 0 #3f3f3f;
}

[data-stijl='minecraft'] .knop:hover {
  background: #7e88bf;
}

[data-stijl='minecraft'] .knop-hoofd {
  background: var(--accent);
  border-color: #8fd14f #3b6b18 #3b6b18 #8fd14f;
}

[data-stijl='minecraft'] input[type='text'],
[data-stijl='minecraft'] input[type='password'],
[data-stijl='minecraft'] select {
  border: 3px solid;
  border-color: #373737 #fff #fff #373737;
  background: #000;
  color: #fff;
}

[data-stijl='minecraft'] .foto-voorbeeld {
  border: 3px solid #373737;
}

[data-stijl='minecraft'] dialog {
  border: 3px solid;
  border-color: #fff #555 #555 #fff;
  box-shadow: 0 0 0 3px #000;
}

/* ---------- Minecraft: kopanimatie ----------
 * Het grasblok zweeft zacht op en neer, zoals een voorwerp dat in het spel op de grond
 * gevallen is, met de ronde schaduw eronder die smaller en lichter wordt als het blok stijgt.
 * Het blok (met zijn zwarte rand) zit in ::before en de schaduw in ::after. De doos van het
 * embleem zelf tekent niets en blijft staan, zodat de lay-out niet verschuift.
 */
[data-stijl='minecraft'] .embleem {
  position: relative;
  background: none;
}

[data-stijl='minecraft'] .embleem::before,
[data-stijl='minecraft'] .embleem::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

[data-stijl='minecraft'] .embleem::before {
  inset: 0;
  background: var(--embleem) center / contain no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #000;
  animation: minecraft-zweven 8s ease-in-out infinite;
}

/* De schaduw ligt op de grond en beweegt niet mee: ze krimpt en vervaagt een beetje. */
[data-stijl='minecraft'] .embleem::after {
  left: 8px;
  right: 8px;
  top: calc(100% + 7px);
  height: 8px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
  animation: minecraft-schaduw 8s ease-in-out infinite;
}

/* Hoogstens 3 px omhoog, heen en terug in 8 s. Stil staat het blok in zijn gewone plaats. */
@keyframes minecraft-zweven {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes minecraft-schaduw {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(0.82);
    opacity: 0.65;
  }
}

/* ---------- Minecraft: laadanimatie ----------
 * Op zoek naar x. Een stenen blok vol wiskundige tekens valt uit de lucht en landt met een
 * stofwolkje. Een ijzeren houweel hakt erop; bij elke slag lopen de barsten verder, tot het
 * blok in scherven uiteenspat. Eruit springt de onbekende x, die als een gevallen voorwerp
 * ronddraait en op en neer deint, tot een onzichtbare speler hem opraapt. Dan valt het
 * volgende blok. Om de beurt is de buit x, y of een wortelteken.
 *
 * Grondig (data-fase="grondig"): het werd moeilijker, dus het blok is nu obsidiaan, en dat
 * hak je alleen met een diamanten houweel. Het houweel maakt met vonkjes een draai in de
 * lucht, wordt diamant met de paarse glans van een betovering en hakt twee keer zo snel.
 * Beide houwelen lopen van bij het begin mee op dezelfde klok; de fase kiest alleen welk je
 * ziet. Zo blijven de slagen gelijk met de barsten, wanneer het grondige model ook begint.
 *
 * Eén cyclus duurt 4 s: vallen (0 tot 14 %), vijf slagen om de 10 % (20 tot 60 %), breken
 * (60 %), de buit (60 tot 95 %). Alle maten staan in eenheden van de viewBox (50 bij 30,
 * getoond op 250 bij 150 px: één eenheid is één pixel van de tekening, of 5 px).
 */
[data-stijl='minecraft'] .laden-minecraft {
  --minecraft-cyclus: 4s;
  display: block;
}

/* Alleen wat beweegt, draait of schaalt rond zijn eigen doos. De vaste groepen met een
 * transform-attribuut (verschuiven en spiegelen) blijven rekenen vanaf de oorsprong. */
[data-stijl='minecraft'] #minecraft-blok,
[data-stijl='minecraft'] #minecraft-blok-wissel,
[data-stijl='minecraft'] #minecraft-blokschaduw,
[data-stijl='minecraft'] .minecraft-stofwolk,
[data-stijl='minecraft'] .minecraft-scherf,
[data-stijl='minecraft'] #minecraft-buit,
[data-stijl='minecraft'] #minecraft-buit-draai,
[data-stijl='minecraft'] #minecraft-buitschaduw,
[data-stijl='minecraft'] #minecraft-houweel,
[data-stijl='minecraft'] #minecraft-houweel-wissel,
[data-stijl='minecraft'] #minecraft-houweel-ijzer,
[data-stijl='minecraft'] #minecraft-houweel-diamant,
[data-stijl='minecraft'] .minecraft-vonk {
  transform-box: fill-box;
}

/* Het blok valt, deint even na, schokt bij elke slag en verdwijnt bij de vijfde. */
[data-stijl='minecraft'] #minecraft-blok {
  transform-origin: 50% 100%;
  animation: minecraft-laden-blok var(--minecraft-cyclus) linear infinite;
}

@keyframes minecraft-laden-blok {
  0% {
    transform: translate(0, -28px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  10% {
    transform: translate(0, 0) scale(1.06, 0.9);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translate(0, -1px) scale(0.98, 1.03);
    animation-timing-function: ease-in;
  }
  14%,
  20%,
  23%,
  30%,
  33%,
  40%,
  43%,
  50%,
  53%,
  59.9% {
    transform: translate(0, 0) scale(1, 1);
    opacity: 1;
  }
  21%,
  31%,
  41%,
  51% {
    transform: translate(-0.6px, 0.2px) scale(1, 1);
  }
  60%,
  100% {
    transform: translate(0, 0) scale(1, 1);
    opacity: 0;
  }
}

/* De schaduw groeit terwijl het blok valt en verdwijnt met het blok. */
[data-stijl='minecraft'] #minecraft-blokschaduw {
  transform-origin: 50% 50%;
  animation: minecraft-laden-blokschaduw var(--minecraft-cyclus) linear infinite;
}

@keyframes minecraft-laden-blokschaduw {
  0% {
    transform: scale(0.3);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  10%,
  59.9% {
    transform: scale(1);
    opacity: 1;
  }
  60%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Twee stofwolkjes bij het landen, naar links en (gespiegeld) naar rechts. */
[data-stijl='minecraft'] .minecraft-stofwolk {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: minecraft-laden-stof var(--minecraft-cyclus) linear infinite;
}

@keyframes minecraft-laden-stof {
  0%,
  9.9% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  10% {
    transform: translate(0, 0) scale(0.6);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  20%,
  100% {
    transform: translate(-3.5px, -1.5px) scale(1.2);
    opacity: 0;
  }
}

/* Vier stappen barsten: telkens een slag later, en weg wanneer het blok breekt. */
[data-stijl='minecraft'] .minecraft-barst {
  fill: #1f1f1f;
  opacity: 0;
}

[data-stijl='minecraft'] #minecraft-barst-1 { animation: minecraft-laden-barst-1 var(--minecraft-cyclus) linear infinite; }
[data-stijl='minecraft'] #minecraft-barst-2 { animation: minecraft-laden-barst-2 var(--minecraft-cyclus) linear infinite; }
[data-stijl='minecraft'] #minecraft-barst-3 { animation: minecraft-laden-barst-3 var(--minecraft-cyclus) linear infinite; }
[data-stijl='minecraft'] #minecraft-barst-4 { animation: minecraft-laden-barst-4 var(--minecraft-cyclus) linear infinite; }

@keyframes minecraft-laden-barst-1 {
  0%, 19.9%, 60%, 100% { opacity: 0; }
  20%, 59.9% { opacity: 0.85; }
}

@keyframes minecraft-laden-barst-2 {
  0%, 29.9%, 60%, 100% { opacity: 0; }
  30%, 59.9% { opacity: 0.85; }
}

@keyframes minecraft-laden-barst-3 {
  0%, 39.9%, 60%, 100% { opacity: 0; }
  40%, 59.9% { opacity: 0.85; }
}

@keyframes minecraft-laden-barst-4 {
  0%, 49.9%, 60%, 100% { opacity: 0; }
  50%, 59.9% { opacity: 0.85; }
}

/* Obsidiaan, diamant, flits, vonkjes en glans liggen klaar; ze komen pas in de grondige fase in beeld. */
[data-stijl='minecraft'] #minecraft-obsidiaan,
[data-stijl='minecraft'] #minecraft-houweel-diamant,
[data-stijl='minecraft'] #minecraft-flits,
[data-stijl='minecraft'] .minecraft-vonk,
[data-stijl='minecraft'] .minecraft-glans {
  opacity: 0;
}

/* Het houweel draait om zijn handvat, rechtsonder in zijn tekening van 16 bij 16. */
[data-stijl='minecraft'] #minecraft-houweel-ijzer,
[data-stijl='minecraft'] #minecraft-houweel-diamant {
  transform-origin: 90.6% 90.6%;
  transform: rotate(30deg);
}

[data-stijl='minecraft'] #minecraft-houweel-ijzer {
  animation: minecraft-laden-zwaai var(--minecraft-cyclus) linear infinite;
}

[data-stijl='minecraft'] #minecraft-houweel-diamant {
  animation: minecraft-laden-zwaai-grondig var(--minecraft-cyclus) linear infinite;
}

/* Vijf slagen: traag optillen, snel neer, even terugveren. */
@keyframes minecraft-laden-zwaai {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  10% {
    transform: rotate(14deg);
    animation-timing-function: ease-in-out;
  }
  17.5%,
  27.5%,
  37.5%,
  47.5%,
  57.5% {
    transform: rotate(30deg);
    animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6);
  }
  20%,
  30%,
  40%,
  50%,
  60% {
    transform: rotate(-16deg);
    animation-timing-function: ease-out;
  }
  22%,
  32%,
  42%,
  52% {
    transform: rotate(-7deg);
    animation-timing-function: ease-in-out;
  }
  65%,
  100% {
    transform: rotate(0deg);
  }
}

/* Obsidiaan is taai: negen slagen in dezelfde tijd, de barsten lopen om de twee slagen verder. */
@keyframes minecraft-laden-zwaai-grondig {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  10% {
    transform: rotate(14deg);
    animation-timing-function: ease-in-out;
  }
  18.5%,
  23.5%,
  28.5%,
  33.5%,
  38.5%,
  43.5%,
  48.5%,
  53.5%,
  58.5% {
    transform: rotate(28deg);
    animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6);
  }
  20%,
  25%,
  30%,
  35%,
  40%,
  45%,
  50%,
  55%,
  60% {
    transform: rotate(-16deg);
    animation-timing-function: ease-out;
  }
  21.5%,
  26.5%,
  31.5%,
  36.5%,
  41.5%,
  46.5%,
  51.5%,
  56.5% {
    transform: rotate(-6deg);
    animation-timing-function: ease-in-out;
  }
  65%,
  100% {
    transform: rotate(0deg);
  }
}

/* De verschijning: terwijl het eerste blok valt, wordt het houweel draaiend van rechts in beeld gegooid. */
[data-stijl='minecraft'] #minecraft-houweel {
  transform-origin: 50% 50%;
  animation: minecraft-laden-houweel-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

@keyframes minecraft-laden-houweel-in {
  from {
    transform: translate(26px, -6px) rotate(300deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* Scherven: drie aan elke kant (de rechtse zijn gespiegeld), in een boog naar buiten en omlaag. */
[data-stijl='minecraft'] .minecraft-scherf {
  opacity: 0;
  transform-origin: 50% 50%;
}

[data-stijl='minecraft'] .minecraft-scherf-licht { fill: #a2a2a2; }
[data-stijl='minecraft'] .minecraft-scherf-donker { fill: #606060; }

[data-stijl='minecraft'] .minecraft-scherf-a { animation: minecraft-laden-scherf-a var(--minecraft-cyclus) linear infinite; }
[data-stijl='minecraft'] .minecraft-scherf-b { animation: minecraft-laden-scherf-b var(--minecraft-cyclus) linear infinite; }
[data-stijl='minecraft'] .minecraft-scherf-c { animation: minecraft-laden-scherf-c var(--minecraft-cyclus) linear infinite; }

@keyframes minecraft-laden-scherf-a {
  0%, 59.9% { transform: translate(0, 0) scale(1); opacity: 0; }
  60% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-out; }
  65% { transform: translate(-4px, -6px) scale(0.9); animation-timing-function: ease-in; }
  73% { transform: translate(-7px, 8px) scale(0.5); opacity: 1; }
  74%, 100% { transform: translate(-7px, 8px) scale(0.5); opacity: 0; }
}

@keyframes minecraft-laden-scherf-b {
  0%, 59.9% { transform: translate(0, 0) scale(1); opacity: 0; }
  60% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-out; }
  64% { transform: translate(-6px, -3px) scale(0.9); animation-timing-function: ease-in; }
  71% { transform: translate(-10px, 6px) scale(0.5); opacity: 1; }
  72%, 100% { transform: translate(-10px, 6px) scale(0.5); opacity: 0; }
}

@keyframes minecraft-laden-scherf-c {
  0%, 59.9% { transform: translate(0, 0) scale(1); opacity: 0; }
  60% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: ease-out; }
  63% { transform: translate(-5px, -2px) scale(0.9); animation-timing-function: ease-in; }
  69% { transform: translate(-8px, 3px) scale(0.5); opacity: 1; }
  70%, 100% { transform: translate(-8px, 3px) scale(0.5); opacity: 0; }
}

/* De buit springt uit het blok, landt, deint en vliegt naar de onzichtbare speler bij het handvat. */
[data-stijl='minecraft'] #minecraft-buit {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: minecraft-laden-buit var(--minecraft-cyclus) linear infinite;
}

@keyframes minecraft-laden-buit {
  0%,
  59.9% {
    transform: translate(0, -3px) scale(0.5);
    opacity: 0;
  }
  60% {
    transform: translate(0, -3px) scale(0.5);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  65% {
    transform: translate(0, -7px) scale(1);
    animation-timing-function: ease-in;
  }
  70% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translate(0, -0.7px) scale(1);
    animation-timing-function: ease-in;
  }
  74% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: translate(0, -1px) scale(1);
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6);
  }
  93% {
    transform: translate(13px, -4.7px) scale(0.2);
    opacity: 1;
  }
  94%,
  100% {
    transform: translate(13px, -4.7px) scale(0.2);
    opacity: 0;
  }
}

/* Een gevallen voorwerp draait om zijn as: van voren, op zijn kant, van achteren. */
[data-stijl='minecraft'] #minecraft-buit-draai {
  transform-origin: 50% 50%;
  animation: minecraft-laden-draai 1.6s ease-in-out infinite;
}

@keyframes minecraft-laden-draai {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}

[data-stijl='minecraft'] #minecraft-buitschaduw {
  opacity: 0;
  transform-origin: 50% 50%;
  animation: minecraft-laden-buitschaduw var(--minecraft-cyclus) linear infinite;
}

@keyframes minecraft-laden-buitschaduw {
  0%,
  64.9% {
    transform: scale(0.4);
    opacity: 0;
  }
  65% {
    transform: scale(0.4);
    opacity: 0.3;
    animation-timing-function: ease-in;
  }
  70%,
  74% {
    transform: scale(1);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: scale(0.85);
    opacity: 0.8;
    animation-timing-function: ease-in-out;
  }
  86% {
    transform: scale(1);
    opacity: 1;
  }
  90%,
  100% {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* Om de beurt x, y en een wortelteken: elk teken is één cyclus van de drie zichtbaar. */
[data-stijl='minecraft'] .minecraft-teken {
  opacity: 0;
  animation: minecraft-laden-beurt calc(var(--minecraft-cyclus) * 3) linear infinite;
}

[data-stijl='minecraft'] #minecraft-teken-y {
  animation-delay: calc(var(--minecraft-cyclus) * -2);
}

[data-stijl='minecraft'] #minecraft-teken-wortel {
  animation-delay: calc(var(--minecraft-cyclus) * -1);
}

@keyframes minecraft-laden-beurt {
  0%,
  33.3% {
    opacity: 1;
  }
  33.4%,
  100% {
    opacity: 0;
  }
}

/* ---------- Minecraft: grondige fase ---------- */
[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-erts,
[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-houweel-ijzer {
  opacity: 0;
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-obsidiaan,
[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-houweel-diamant {
  opacity: 1;
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-barst { fill: #8a6cc9; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-scherf-licht { fill: #3f2b66; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-scherf-donker { fill: #110b1d; }

/* De betovering: vijf schuine strepen lichten na elkaar op, als een glans die over het houweel schuift. */
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans {
  animation: minecraft-laden-glans 1.6s linear infinite;
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans:nth-child(2) { animation-delay: 0.12s; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans:nth-child(3) { animation-delay: 0.24s; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans:nth-child(4) { animation-delay: 0.36s; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans:nth-child(5) { animation-delay: 0.48s; }

@keyframes minecraft-laden-glans {
  0%,
  100% {
    opacity: 0;
  }
  12% {
    opacity: 0.75;
  }
  30% {
    opacity: 0;
  }
}

/* De wissel: het houweel draait een keer rond om zijn midden, met vonkjes, en het blok flitst wit.
 * Deze animaties starten op het moment dat data-fase="grondig" verschijnt en spelen een keer. */
[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-houweel-wissel {
  transform-origin: 50% 50%;
  animation: minecraft-laden-opwaardering 0.8s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@keyframes minecraft-laden-opwaardering {
  from {
    transform: rotate(0deg) scale(1);
  }
  45% {
    transform: rotate(-250deg) scale(1.15);
  }
  to {
    transform: rotate(-360deg) scale(1);
  }
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-vonk {
  transform-origin: 50% 50%;
  animation: minecraft-laden-vonk 0.7s ease-out both;
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-vonk:nth-of-type(2) { animation-delay: 0.12s; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-vonk:nth-of-type(3) { animation-delay: 0.24s; }
[data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-vonk:nth-of-type(4) { animation-delay: 0.36s; }

@keyframes minecraft-laden-vonk {
  from {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(45deg);
    opacity: 1;
  }
  to {
    transform: scale(0) rotate(90deg);
    opacity: 0;
  }
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-blok-wissel {
  transform-origin: 50% 50%;
  animation: minecraft-laden-blokwissel 0.5s ease-out both;
}

@keyframes minecraft-laden-blokwissel {
  from {
    transform: scale(1);
  }
  35% {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

[data-stijl='minecraft'] .laden[data-fase='grondig'] #minecraft-flits {
  animation: minecraft-laden-flits 0.6s ease-out both;
}

@keyframes minecraft-laden-flits {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}

/* ---------- Minecraft: stilstaand beeld ----------
 * Zonder beweging: het blok met de eerste barsten en het houweel opgeheven voor de volgende
 * slag. In de grondige fase staat er obsidiaan met een diamanten houweel dat glanst.
 */
@media (prefers-reduced-motion: reduce) {
  [data-stijl='minecraft'] .laden-minecraft * {
    animation: none !important;
  }

  [data-stijl='minecraft'] #minecraft-barst-1,
  [data-stijl='minecraft'] #minecraft-barst-2 {
    opacity: 0.85;
  }

  [data-stijl='minecraft'] .laden[data-fase='grondig'] .minecraft-glans:nth-child(3) {
    opacity: 0.6;
  }
}

/* ---------- Galileo: perkament, ijzergalinkt en de sterrenhemel van Padua ---------- */
:root[data-stijl='galileo'] {
  /* Een tik op de kop laat een vallende ster voorbij komen (js/verrassing.js). */
  --kop-verrassing: vallende-ster;
  --achtergrond: #eadcbc;
  --inkt: #3a2a1a;
  --inkt-zacht: #6b5641;
  --accent: #7a3b1d;
  --accent-inkt: #f6ecd6;
  --lijn: #b49a6d;
  --font-kop: 'IM Fell English SC', 'Book Antiqua', Georgia, serif;
  --font-tekst: 'EB Garamond', Garamond, Georgia, serif;
  --kop-gewicht: 400;
  --kop-spatiering: 0.02em;
  --radius: 2px;
  --knop-achtergrond: #f6ecd6;
  --knop-inkt: #3a2a1a;
  --knop-rand: 1px solid #6b5641;
  --kader: #a8843e;
  --kader-padding: 7px;
  --kader-radius: 3px;
  --kader-rand: 1px solid #5c431b;
  --focus: #1d2340;
  --dialoog: #f3e8cf;
  --band-hoogte: 22px;
  --embleem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='%23f2e6c9'/%3E%3Cpath d='M32 5a27 27 0 0 1 0 54a13 27 0 0 0 0-54z' fill='%233d3326'/%3E%3Cg fill='none' stroke='%23a08a63' stroke-width='1.2'%3E%3Ccircle cx='21' cy='20' r='3'/%3E%3Ccircle cx='16' cy='36' r='2'/%3E%3Ccircle cx='25' cy='46' r='3.5'/%3E%3Ccircle cx='28' cy='30' r='1.6'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='27' fill='none' stroke='%23c9b68c' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* De vaste sterren staan in de rand boven en onder, waar nooit tekst staat. */
[data-stijl='galileo'] .kop {
  padding: 1.1rem 1.25rem;
  border-radius: 4px;
  color: #f2e6c9;
  background-color: #1d2340;
  background-image:
    radial-gradient(circle at 12% 10px, #f2e6c9 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% calc(100% - 10px), #f2e6c9 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 7px, #f2e6c9 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 79% calc(100% - 8px), #f2e6c9 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 12px, #f2e6c9 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 45% calc(100% - 12px), #f2e6c9 0 0.8px, transparent 1.3px);
}

[data-stijl='galileo'] .ondertitel,
[data-stijl='galileo'] .stijlkiezer {
  color: #d9c9a3;
}

[data-stijl='galileo'] .kop .knop {
  background: transparent;
  color: #f2e6c9;
  border-color: #d9c9a3;
}

/* Jupiter en de lijn onderaan. De drie manen staan op eigen lagen, zie de kopanimatie. */
[data-stijl='galileo'] .band {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Ccircle cx='80' cy='11' r='5.5' fill='none' stroke='%233a2a1a' stroke-width='1.4'/%3E%3Cpath d='M0 21.5H160' stroke='%23b49a6d'/%3E%3C/svg%3E") repeat-x left center / 160px 22px;
}

[data-stijl='galileo'] .sectie > h2::before {
  content: counter(sectie, upper-roman) '.';
  color: var(--accent);
}

[data-stijl='galileo'] .sectie > h2 {
  font-size: 1.65rem;
}

[data-stijl='galileo'] .knop-hoofd {
  background: var(--accent);
  color: var(--accent-inkt);
  border-color: #4d230f;
}

/* ---------- Galileo: kopanimatie ----------
 * Twee stille knipogen naar de Sidereus Nuncius (1610).
 * 1. Door de kijker fonkelen de vaste sterren, de planeten niet. Zes extra sterretjes
 *    in de nachthemel van de kop worden af en toe even zwakker, in twee groepjes met
 *    elk een eigen traag ritme, zodat het nooit gelijk loopt.
 * 2. De band toont Jupiter met de drie "sterretjes" die Galileo op 7 januari 1610 zag,
 *    twee in het oosten en een in het westen. Nacht na nacht stonden ze anders: het
 *    waren manen. Ze schuiven hier heel traag een paar pixels heen en weer en blijven
 *    het langst hangen aan de uiteinden, zoals een maan die je van opzij ziet draaien.
 * Staat beweging uit (prefers-reduced-motion), dan blijft de tekening van 7 januari
 * precies staan en schijnen alle sterren voluit.
 */
[data-stijl='galileo'] .kop {
  position: relative;
  isolation: isolate;
}

/* Twee lagen sterren achter de inhoud van de kop (z-index -1 binnen de kop). Ze staan
 * in de bovenste en onderste rand van de kop, op vaste pixels van de rand, zodat ze
 * op elke breedte buiten de tekst en de knoppen vallen. */
[data-stijl='galileo'] .kop::before,
[data-stijl='galileo'] .kop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  animation: galileo-fonkelen 11s ease-in-out infinite;
}

[data-stijl='galileo'] .kop::before {
  background-image:
    radial-gradient(circle at 4% calc(100% - 7px), #f2e6c9 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 41% 6px, #f2e6c9 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% calc(100% - 9px), #f2e6c9 0 0.8px, transparent 1.3px);
}

[data-stijl='galileo'] .kop::after {
  background-image:
    radial-gradient(circle at 23% 9px, #f2e6c9 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 53% calc(100% - 6px), #f2e6c9 0 1px, transparent 1.5px),
    radial-gradient(circle at 97% 8px, #f2e6c9 0 0.9px, transparent 1.4px);
  animation-duration: 17s;
  animation-delay: -7s;
}

/* Lang stil, dan een korte dubbele schommeling naar zwakker: nooit feller dan in rust. */
@keyframes galileo-fonkelen {
  0%,
  58%,
  100% {
    opacity: 1;
  }
  63% {
    opacity: 0.4;
  }
  67% {
    opacity: 0.8;
  }
  71% {
    opacity: 0.5;
  }
  78% {
    opacity: 1;
  }
}

/* De band zelf houdt alleen Jupiter en de lijn; de manen staan op twee eigen lagen
 * met dezelfde tegel van 160 bij 22 px, dus op 0% precies op hun plaats. */
[data-stijl='galileo'] .band {
  position: relative;
  overflow: hidden;
}

[data-stijl='galileo'] .band::before,
[data-stijl='galileo'] .band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 160px 22px;
}

/* De twee binnenste manen, een aan elke kant van Jupiter. */
[data-stijl='galileo'] .band::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cg fill='%233a2a1a'%3E%3Ccircle cx='58' cy='11' r='1.8'/%3E%3Ccircle cx='104' cy='11' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  animation: galileo-manen 29s infinite;
}

/* De buitenste maan draait trager en begint de andere kant op. */
[data-stijl='galileo'] .band::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Ccircle cx='38' cy='11' r='1.8' fill='%233a2a1a'/%3E%3C/svg%3E");
  animation: galileo-manen 47s infinite reverse;
}

/* Een cirkelbaan van opzij gezien: sinusvormig, traag aan de uiteinden, en op 0% en 100%
 * precies op de plaats uit de tekening. */
@keyframes galileo-manen {
  0% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
  }
  25% {
    transform: translateX(-3px);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  75% {
    transform: translateX(3px);
    animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);
  }
  100% {
    transform: translateX(0);
  }
}

/* ---------- Galileo: laadanimatie ----------
 * De valproef van Pisa, als inkttekening op perkament.
 * Verschijning (1,3 s): de toren groeit kaarsrecht uit de grond, staat even trots,
 * trilt en zakt dan krakend scheef. Zo is hij dus scheef geraakt.
 * Lus (3 s): op een plankje bovenaan liggen een zware ijzeren kogel en een licht
 * koperen balletje. Het plankje klapt weg, ze vallen versnellend (afstand = D·t²),
 * landen op hetzelfde moment, de toren davert nog wat schever en op de grond
 * verschijnt het besluit: klein = groot. De gestippelde ringetjes zijn een
 * stroboscoop, om de kwart valtijd een beeld, met afstanden 1 : 3 : 5 : 7 (de wet
 * van de oneven getallen van Galileo). De eerste landing valt na 2,5 s.
 * Grondig (data-fase="grondig"): de toren schuift opzij voor een kijker op een
 * driepoot. Die volgt de kogels naar beneden, schuift uit om de landing van dichtbij
 * te zien en knikt bij het =-teken. De kijker draait altijd mee in de lus, ook
 * onzichtbaar, zodat hij gelijk loopt met de val, op welk moment hij ook verschijnt.
 * Minder beweging: het stroboscoopbeeld van de hele val, met beide kogels op de
 * grond en het =-teken (bij grondig met de kijker op de landing gericht).
 * Elke basisregel hieronder is dat stilstaande beeld; de animaties leggen er de
 * beweging over. Alleen transform en opacity bewegen.
 * basis.css verbergt elke svg in .laden; hier verschijnt alleen die van Galileo.
 */
[data-stijl='galileo'] .laden .laden-galileo {
  --galileo-begin: 1.3s;
  --galileo-lus: 3s;
  display: block;
}

/* Alles wat draait of schaalt, doet dat rond een punt van zijn eigen omtrek (fill-box),
 * ook in Safari. De toren en de kijkerbuis hebben daarvoor een onzichtbaar anker met
 * het draaipunt in het midden, zodat dat punt niet verschuift als een deel binnenin beweegt. */
[data-stijl='galileo'] .laden-galileo #galileo-grond,
[data-stijl='galileo'] .laden-galileo #galileo-toren,
[data-stijl='galileo'] .laden-galileo #galileo-plank,
[data-stijl='galileo'] .laden-galileo #galileo-plank-hout,
[data-stijl='galileo'] .laden-galileo .galileo-kogel,
[data-stijl='galileo'] .laden-galileo #galileo-stof,
[data-stijl='galileo'] .laden-galileo #galileo-is,
[data-stijl='galileo'] .laden-galileo #galileo-kijker-buis {
  transform-box: fill-box;
}

/* De proef staat in het midden; komt de kijker, dan schuift de toren een eindje opzij. */
[data-stijl='galileo'] .laden-galileo #galileo-proef {
  transform: translateX(12px);
}

[data-stijl='galileo'] .laden[data-fase='grondig'] .laden-galileo #galileo-proef {
  transform: translateX(-8px);
  animation: galileo-laden-opschuiven 0.9s ease-in-out both;
}

/* De grond trekt zich vanuit het midden open. */
[data-stijl='galileo'] .laden-galileo #galileo-grond {
  transform-origin: 50% 50%;
  animation: galileo-laden-grond 0.3s ease-out both;
}

/* De toren: eerst de verschijning, daarna davert hij bij elke landing. De lus heeft geen
 * vulling vooraf, zodat de verschijning zichtbaar blijft tot de lus begint. */
[data-stijl='galileo'] .laden-galileo #galileo-toren {
  transform-origin: 50% 50%;
  transform: rotate(5.5deg);
  animation:
    galileo-laden-toren-op var(--galileo-begin) both,
    galileo-laden-toren-davert var(--galileo-lus) var(--galileo-begin) infinite;
}

/* Het plankje schuift uit de galerij als de toren scheef staat, en klapt om zijn scharnier. */
[data-stijl='galileo'] .laden-galileo #galileo-plank {
  transform-origin: 0% 50%;
  transform: rotate(85deg);
  animation: galileo-laden-plank var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-plank-hout {
  transform-origin: 0% 50%;
  animation: galileo-laden-plank-uit 0.3s cubic-bezier(0.3, 1.4, 0.6, 1) 1.1s both;
}

/* Beide kogels krijgen dezelfde val: hun onderkant start en landt op dezelfde hoogte. */
[data-stijl='galileo'] .laden-galileo .galileo-kogel {
  transform-origin: 50% 100%;
  transform: translateY(75.5px);
  animation: galileo-laden-vallen var(--galileo-lus) var(--galileo-begin) infinite both;
}

/* De ringetjes van de stroboscoop: elke rij met haar eigen moment. */
[data-stijl='galileo'] .laden-galileo #galileo-spoor-0 {
  opacity: 0.5;
  animation: galileo-laden-spoor-0 var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-spoor-1 {
  opacity: 0.5;
  animation: galileo-laden-spoor-1 var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-spoor-2 {
  opacity: 0.5;
  animation: galileo-laden-spoor-2 var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-spoor-3 {
  opacity: 0.5;
  animation: galileo-laden-spoor-3 var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-stof {
  transform-origin: 50% 100%;
  opacity: 0;
  animation: galileo-laden-stof var(--galileo-lus) var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-is {
  transform-origin: 50% 50%;
  animation: galileo-laden-is var(--galileo-lus) var(--galileo-begin) infinite both;
}

/* De kijker: onzichtbaar tot het grondige model het overneemt. */
[data-stijl='galileo'] .laden-galileo #galileo-kijker {
  opacity: 0;
}

[data-stijl='galileo'] .laden[data-fase='grondig'] .laden-galileo #galileo-kijker {
  opacity: 1;
  animation: galileo-laden-kijker-op 0.9s both;
}

[data-stijl='galileo'] .laden-galileo #galileo-kijker-buis {
  transform-origin: 50% 50%;
  transform: rotate(-18.7deg);
  animation: galileo-laden-volgen var(--galileo-lus) linear var(--galileo-begin) infinite both;
}

[data-stijl='galileo'] .laden-galileo #galileo-kijker-uittrek {
  transform: translateX(-7px);
  animation: galileo-laden-zoom var(--galileo-lus) var(--galileo-begin) infinite both;
}

@keyframes galileo-laden-grond {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Recht omhoog, even trots staan, trillen, en dan krakend scheef tot 5,5 graden. */
@keyframes galileo-laden-toren-op {
  0%,
  8% {
    transform: rotate(0deg) scale(1, 0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
  }
  32% {
    transform: rotate(0deg) scale(1, 1.07);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(0deg) scale(1, 0.97);
    animation-timing-function: ease-in-out;
  }
  44%,
  62% {
    transform: rotate(0deg) scale(1, 1);
  }
  64% {
    transform: rotate(-0.8deg) scale(1, 1);
  }
  66% {
    transform: rotate(0.7deg) scale(1, 1);
  }
  68% {
    transform: rotate(-0.4deg) scale(1, 1);
  }
  70% {
    transform: rotate(0deg) scale(1, 1);
    animation-timing-function: ease-in;
  }
  83% {
    transform: rotate(8.5deg) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  89% {
    transform: rotate(4.4deg) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  95% {
    transform: rotate(6.2deg) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: rotate(5.5deg) scale(1, 1);
  }
}

/* Bij de landing (40 %) helt de toren even nog verder over en veert terug. */
@keyframes galileo-laden-toren-davert {
  0%,
  40% {
    transform: rotate(5.5deg);
  }
  42% {
    transform: rotate(7.2deg);
  }
  44.5% {
    transform: rotate(4.5deg);
  }
  47% {
    transform: rotate(6.2deg);
  }
  49.5% {
    transform: rotate(5.1deg);
  }
  52%,
  100% {
    transform: rotate(5.5deg);
  }
}

@keyframes galileo-laden-plank-uit {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Waterpas (tegen de helling in), even wiebelen, wegklappen tot het loodrecht langs de
 * toren hangt (85 graden plus de 5,5 van de toren), dus buiten de valweg, en na de landing terug. */
@keyframes galileo-laden-plank {
  0%,
  13% {
    transform: rotate(-5.5deg);
  }
  14% {
    transform: rotate(-6.8deg);
  }
  15% {
    transform: rotate(-4.4deg);
  }
  16% {
    transform: rotate(-6.2deg);
  }
  17% {
    transform: rotate(-5.5deg);
    animation-timing-function: ease-in;
  }
  20% {
    transform: rotate(89deg);
    animation-timing-function: ease-out;
  }
  22% {
    transform: rotate(79deg);
    animation-timing-function: ease-in-out;
  }
  24% {
    transform: rotate(87deg);
    animation-timing-function: ease-in-out;
  }
  26%,
  62% {
    transform: rotate(85deg);
    animation-timing-function: ease-in-out;
  }
  71% {
    transform: rotate(-8deg);
    animation-timing-function: ease-out;
  }
  74%,
  100% {
    transform: rotate(-5.5deg);
  }
}

/* Op het plankje ploffen, wachten, en dan vrij vallen van 18 % tot 40 %. De bézier
 * (1/3, 0, 2/3, 1/3) is precies y = t²: zo groeit de afstand zoals bij een echte val. */
@keyframes galileo-laden-vallen {
  0% {
    transform: translateY(-8px) scale(1, 1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333);
  }
  5% {
    transform: translateY(0) scale(1, 1);
    opacity: 1;
  }
  6.5% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  8.5% {
    transform: translateY(-1.5px) scale(0.96, 1.04);
    animation-timing-function: ease-in;
  }
  10%,
  18% {
    transform: translateY(0) scale(1, 1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333);
  }
  40% {
    transform: translateY(75.5px) scale(1, 1);
    animation-timing-function: ease-out;
  }
  42% {
    transform: translateY(75.5px) scale(1.2, 0.76);
    animation-timing-function: ease-out;
  }
  45.5% {
    transform: translateY(70.5px) scale(0.96, 1.04);
    animation-timing-function: ease-in;
  }
  49% {
    transform: translateY(75.5px) scale(1, 1);
  }
  50.5% {
    transform: translateY(75.5px) scale(1.07, 0.93);
  }
  52%,
  82% {
    transform: translateY(75.5px) scale(1, 1);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateY(75.5px) scale(1, 1);
    opacity: 0;
  }
}

/* Elk ringetje verschijnt op het moment dat de kogels erdoor vallen (t = 0, 1/4, 1/2 en 3/4). */
@keyframes galileo-laden-spoor-0 {
  0%,
  18% {
    opacity: 0;
  }
  19%,
  82% {
    opacity: 0.5;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes galileo-laden-spoor-1 {
  0%,
  23.5% {
    opacity: 0;
  }
  24.2%,
  82% {
    opacity: 0.5;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes galileo-laden-spoor-2 {
  0%,
  29% {
    opacity: 0;
  }
  29.7%,
  82% {
    opacity: 0.5;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes galileo-laden-spoor-3 {
  0%,
  34.5% {
    opacity: 0;
  }
  35.2%,
  82% {
    opacity: 0.5;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes galileo-laden-stof {
  0%,
  39.9% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(0.5);
    animation-timing-function: ease-out;
  }
  47%,
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* Het =-teken springt op zodra de kogels stilliggen. */
@keyframes galileo-laden-is {
  0%,
  51% {
    opacity: 0;
    transform: scale(0);
  }
  54% {
    opacity: 1;
    transform: scale(1.45);
  }
  57% {
    transform: scale(0.88);
  }
  59.5%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes galileo-laden-opschuiven {
  from {
    transform: translateX(12px);
  }
  to {
    transform: translateX(-8px);
  }
}

/* De kijker schuift van rechts binnen en veert even na. */
@keyframes galileo-laden-kijker-op {
  0% {
    opacity: 0;
    transform: translateX(80px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: translateX(-4px);
    animation-timing-function: ease-in-out;
  }
  85% {
    transform: translateX(1.5px);
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Richten op het midden tussen de kogels (x = 100,5 als de proef opzij geschoven is).
 * Tijdens de val volgt de hoek atan((82 - y)/69,5) met y = 30 + 75,5·t², hier in vier
 * rechte stukjes. Bij het =-teken knikt de kijker even. */
@keyframes galileo-laden-volgen {
  0%,
  18% {
    transform: rotate(36.8deg);
  }
  23.5% {
    transform: rotate(34.2deg);
  }
  29% {
    transform: rotate(25.5deg);
  }
  34.5% {
    transform: rotate(7.8deg);
  }
  40%,
  52% {
    transform: rotate(-18.7deg);
  }
  54% {
    transform: rotate(-14.7deg);
  }
  56% {
    transform: rotate(-19.7deg);
  }
  58% {
    transform: rotate(-16.2deg);
  }
  60%,
  72% {
    transform: rotate(-18.7deg);
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: rotate(36.8deg);
  }
}

/* Na de landing schuift de binnenbuis uit, om van dichtbij te kijken, en daarna weer in. */
@keyframes galileo-laden-zoom {
  0%,
  40% {
    transform: translateX(0);
    animation-timing-function: ease-out;
  }
  45%,
  70% {
    transform: translateX(-7px);
    animation-timing-function: ease-in-out;
  }
  78%,
  100% {
    transform: translateX(0);
  }
}

/* Minder beweging: geen animatie, dus het stilstaande stroboscoopbeeld uit de basisregels. */
@media (prefers-reduced-motion: reduce) {
  [data-stijl='galileo'] .laden-galileo,
  [data-stijl='galileo'] .laden-galileo * {
    animation: none !important;
  }
}

/* ---------- Galileo: vallende ster ----------
 * Wie op de nachthemel van de kop tikt, ziet een vallende ster. js/verrassing.js kiest de plaats,
 * de richting, de lengte en de snelheid; hier staat alleen hoe ze eruitziet. De ster ligt achter
 * de tekst, net als de andere sterren, en de kop knipt ze af aan zijn rand. Het draaipunt is de
 * heldere kop rechts, zodat de staart erachter groeit.
 */
[data-stijl='galileo'] .kop {
  overflow: hidden;
}

[data-stijl='galileo'] .kop .vallende-ster {
  display: block;
  position: absolute;
  top: -1px;
  z-index: -1;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgb(242 230 201 / 0), rgb(242 230 201 / 0.55) 70%, #fff8e6);
  transform-origin: 100% 50%;
  pointer-events: none;
}

[data-stijl='galileo'] .kop .vallende-ster::after {
  content: '';
  position: absolute;
  top: -1.5px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff8e6;
  box-shadow: 0 0 6px 2px rgb(255 248 230 / 0.55);
}

/* ---------- Escher: zwart-witte houtsnede met kubussen in vlakvulling ---------- */
:root[data-stijl='escher'] {
  --achtergrond: #fbfaf6;
  --inkt: #111;
  --inkt-zacht: #4a4a46;
  --accent: #2f5d50;
  --accent-inkt: #fff;
  --lijn: #111;
  --font-kop: 'Federo', 'Futura', 'Century Gothic', sans-serif;
  --font-tekst: 'Spectral', Georgia, serif;
  --kop-gewicht: 400;
  --kop-spatiering: 0.04em;
  --radius: 0;
  --knop-achtergrond: #fff;
  --knop-inkt: #111;
  --knop-rand: 2px solid #111;
  --kader: #111;
  --kader-padding: 5px;
  --kader-radius: 0;
  --kader-schaduw: 6px 6px 0 #c9c7bf;
  --focus: #2f5d50;
  --dialoog: #fbfaf6;
  --band-hoogte: 45px;
  --kubussen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.32 30'%3E%3Cg%3E%3Cpath fill='%23fff' d='M8.66 0 17.32 5 8.66 10 0 5zM0 15 8.66 20 0 25-8.66 20zM17.32 15 25.98 20 17.32 25 8.66 20zM0-15 8.66-10 0-5-8.66-10zM17.32-15 25.98-10 17.32-5 8.66-10z'/%3E%3Cpath fill='%23111' d='M0 5 8.66 10 8.66 20 0 15zM-8.66 20 0 25 0 35-8.66 30zM8.66 20 17.32 25 17.32 35 8.66 30zM-8.66-10 0-5 0 5-8.66 0zM8.66-10 17.32-5 17.32 5 8.66 0z'/%3E%3Cpath fill='%237a7a74' d='M8.66 10 17.32 5 17.32 15 8.66 20zM0 25 8.66 20 8.66 30 0 35zM17.32 25 25.98 20 25.98 30 17.32 35zM0-5 8.66-10 8.66 0 0 5zM17.32-5 25.98-10 25.98 0 17.32 5z'/%3E%3C/g%3E%3C/svg%3E");
  --embleem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fff' stroke='%23111' stroke-width='2' stroke-linejoin='round' d='M32 6 54.5 19 32 32 9.5 19z'/%3E%3Cpath fill='%23111' d='M9.5 19 32 32 32 58 9.5 45z'/%3E%3Cpath fill='%237a7a74' stroke='%23111' stroke-width='2' stroke-linejoin='round' d='M32 32 54.5 19 54.5 45 32 58z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' d='M14 28 27 35.5 27 50'/%3E%3C/svg%3E");
}

/* De kubussen zelf staan op een eigen laag, zie de kopanimatie. */
[data-stijl='escher'] .band {
  border-block: 2px solid #111;
}

[data-stijl='escher'] .sectie > h2::before {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  background: #111;
  color: #fbfaf6;
  font-size: 0.8em;
}

[data-stijl='escher'] .knop-hoofd {
  background: var(--accent);
  color: var(--accent-inkt);
  border-color: #111;
}

[data-stijl='escher'] .knop:hover {
  background: #111;
  color: #fbfaf6;
}

[data-stijl='escher'] .knop-hoofd:hover {
  background: #1f4037;
}

[data-stijl='escher'] .foto-voorbeeld {
  border: 2px solid #111;
}

/* ---------- Escher: kopanimatie ----------
 * De kubussen in de band klimmen heel traag een trap op die nooit hoger komt, zoals in
 * Klimmen en dalen. In 30 s schuift de vlakvulling gelijkmatig één trede schuin omhoog
 * (13 px opzij, 22,5 px omhoog: een halve tegel van 26 bij 45 px) en valt dan naadloos op
 * zichzelf. De tegels staan op een pseudo-element dat een tegel ruimer is; de band knipt het
 * af binnen zijn randen. Zonder beweging is het beeld gelijk aan de vroegere stilstaande band.
 */
[data-stijl='escher'] .band {
  position: relative;
  overflow: hidden;
}

[data-stijl='escher'] .band::before {
  content: '';
  position: absolute;
  inset: 0 0 -45px -26px;
  background: var(--kubussen) repeat left top / 26px 45px;
  pointer-events: none;
  animation: escher-klimmen 30s linear infinite;
}

@keyframes escher-klimmen {
  to {
    transform: translate(13px, -22.5px);
  }
}

/* ---------- Escher: laadanimatie ----------
 * Terwijl Claude de foto leest, klimt een groen kubusje op pootjes een onmogelijke trap op,
 * zoals de monniken in Klimmen en dalen (1960): vier keer de hoek om en elke stap een trede
 * hoger. Na één ronde staat het toch weer op de trede waar het begon. Daar kijkt het je aan,
 * krijgt een vraagteken, kijkt links en rechts rond en trippelt wat ter plaatse. Dan klimt
 * het gewoon verder.
 *
 * De trap is in 3D een spiraal die niet sluit: het einde ligt verder in het grondplan en ook
 * hoger. In isometrie valt dat verschil precies weg, zodat de ring op het scherm sluit. Elke
 * trede is een balk in de kleuren van het embleem (wit, zwart en grijs), met een wit lijntje
 * als een guts in de zwarte buitenmuur, en de binnenplaats is gearceerd als in een houtsnede.
 *
 * Verschijning: de treden springen een voor een op hun plaats, in de volgorde van de ronde.
 * Is de ring rond, dan valt het kubusje op de voorste hoek en zakt even door zijn pootjes.
 * Grondig (data-fase="grondig" op .laden): een tweede kubusje, zwart en wit zoals het embleem,
 * valt op de achterste hoek en daalt de trap af, de andere kant op. Het komt nooit lager.
 * Zijn animaties staan alleen in de regels voor de grondige fase, zodat ze pas beginnen als
 * die fase begint (een SVG-groep met display: none houdt zijn animaties in Chrome gewoon lopen).
 *
 * Een ronde duurt 18 stappen van 0,24 s: 14 treden en een pauze van 4 stappen. Het pad staat
 * in de keyframes als verschuiving naar het midden van elke trede, met halverwege een sprongetje.
 * De oogjes tonen waar het kubusje heen kijkt: op de grijze zijkant als het naar rechts loopt,
 * op de zwarte als het naar links loopt, niet als het van je weg klimt, en op beide zijkanten
 * als het je aankijkt. Alleen transform en opacity bewegen.
 *
 * Zonder beweging staat de hele trap er, met het groene kubusje op de voorste hoek dat je met
 * zijn vraagteken aankijkt, en in de grondige fase het tweede kubusje op de achterste hoek.
 * Dat zijn de beginwaarden in de SVG zelf.
 */
[data-stijl='escher'] .laden-escher {
  --escher-stap: 0.24s;
  /* Een ronde is 18 stappen: zo komt de verbazing binnen de gewone leestijd. */
  --escher-ronde: 4.32s;
  display: block;
}

/* De treden springen op hun plaats, in de volgorde van de ronde (--i staat op elke trede). */
[data-stijl='escher'] .laden-escher .escher-trede {
  animation: escher-laden-opbouw 0.3s cubic-bezier(0.3, 1.6, 0.6, 1) calc(var(--i) * 0.04s) backwards;
}

[data-stijl='escher'] .laden-escher .escher-binnenplaats {
  animation: escher-laden-inkleuren 0.4s ease-out 0.2s backwards;
}

/* Wanneer elk kubusje valt (--escher-val) en wanneer het staat en begint te lopen (--escher-begin). */
[data-stijl='escher'] .laden-escher .escher-loper-1 {
  --escher-val: 0.58s;
  --escher-begin: 1s;
}

[data-stijl='escher'] .laden-escher .escher-loper-2 {
  --escher-val: 0.1s;
  --escher-begin: 0.52s;
  display: none;
}

[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 {
  display: inline;
}

[data-stijl='escher'] .laden-escher .escher-lijf {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Het vraagteken springt open vanuit het puntje van zijn wolkje. */
[data-stijl='escher'] .laden-escher .escher-vraag {
  transform-box: fill-box;
  transform-origin: 0% 100%;
}

/* Het wolkje van het tweede kubusje staat rechts naast het kubusje: daar ligt het puntje links, op 66 % van de hoogte. */
[data-stijl='escher'] .laden-escher .escher-loper-2 .escher-vraag {
  transform-origin: 0% 66.2%;
}

[data-stijl='escher'] .laden-escher .escher-loper-1,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 {
  animation: escher-laden-val 0.42s cubic-bezier(0.55, 0, 1, 0.45) var(--escher-val) backwards;
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-lijf,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-lijf {
  animation: escher-laden-plof calc(var(--escher-stap) * 0.9) ease-out var(--escher-begin);
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-pad {
  animation: escher-laden-klimmen var(--escher-ronde) var(--escher-begin) infinite backwards;
}

[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-pad {
  animation: escher-laden-dalen var(--escher-ronde) var(--escher-begin) infinite backwards;
}

/* De pootjes stappen om beurten; in de pauze trippelen ze ter plaatse. */
[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-been,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-been {
  animation: escher-laden-stappen calc(var(--escher-stap) * 2) linear var(--escher-begin) infinite;
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-been-r,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-been-r {
  animation-delay: calc(var(--escher-begin) + var(--escher-stap));
}

/* De oogjes: step-end, dus elke waarde blijft staan tot de volgende sleutel. */
[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-ogen,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-ogen {
  animation: escher-laden-kijk-v var(--escher-ronde) step-end var(--escher-begin) infinite backwards;
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-ogen-r {
  animation-name: escher-laden-kijk-r;
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-ogen-l {
  animation-name: escher-laden-kijk-l;
}

/* Naar jou kijken doen ze allebei op dezelfde momenten van hun ronde. */
[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-ogen-v,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-ogen-v {
  animation-name: escher-laden-kijk-v;
}

[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-ogen-r {
  animation-name: escher-laden-kijk2-r;
}

[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-ogen-l {
  animation-name: escher-laden-kijk2-l;
}

[data-stijl='escher'] .laden-escher .escher-loper-1 .escher-vraag,
[data-stijl='escher'] .laden[data-fase='grondig'] .escher-loper-2 .escher-vraag {
  animation: escher-laden-vraag var(--escher-ronde) ease-out var(--escher-begin) infinite backwards;
}

@keyframes escher-laden-opbouw {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes escher-laden-inkleuren {
  from {
    opacity: 0;
  }
}

/* Vallen: van boven de rand van het beeld, steeds sneller, recht op zijn trede. */
@keyframes escher-laden-val {
  from {
    transform: translateY(-120px);
  }
}

/* Neerkomen: even plat en breed, dan een tikje te hoog, dan gewoon. */
@keyframes escher-laden-plof {
  0% {
    transform: scale(1.25, 0.72);
  }
  55% {
    transform: scale(0.94, 1.06);
  }
  100% {
    transform: none;
  }
}

@keyframes escher-laden-stappen {
  0%,
  50%,
  100% {
    transform: none;
  }
  25% {
    transform: translateY(-1.5px);
  }
}

/* Het vraagteken: open kort na de aankomst op de begintrede (77,78 %), weg vlak voor het vertrek. */
@keyframes escher-laden-vraag {
  0%,
  79.17% {
    opacity: 0;
    transform: scale(0);
  }
  81.67% {
    opacity: 1;
    transform: scale(1.2);
  }
  83.89%,
  96.67% {
    opacity: 1;
    transform: none;
  }
  99.17%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Klimmen: van de voorste hoek de ring rond, elke stap een trede hoger, en dan de pauze. */
@keyframes escher-laden-klimmen {
  0% { transform: translate(76.6px, 83px); animation-timing-function: ease-out; }
  2.78% { transform: translate(68px, 65.3px); animation-timing-function: ease-in; }
  5.56% { transform: translate(59.5px, 69.3px); animation-timing-function: ease-out; }
  8.33% { transform: translate(50.9px, 51.5px); animation-timing-function: ease-in; }
  11.11% { transform: translate(42.3px, 55.5px); animation-timing-function: ease-out; }
  13.89% { transform: translate(50.9px, 37.8px); animation-timing-function: ease-in; }
  16.67% { transform: translate(59.5px, 41.8px); animation-timing-function: ease-out; }
  19.44% { transform: translate(68px, 24px); animation-timing-function: ease-in; }
  22.22% { transform: translate(76.6px, 28px); animation-timing-function: ease-out; }
  25% { transform: translate(85.2px, 24px); animation-timing-function: ease-in; }
  27.78% { transform: translate(93.7px, 34px); animation-timing-function: ease-out; }
  30.56% { transform: translate(101.5px, 30px); animation-timing-function: ease-in; }
  33.33% { transform: translate(109.3px, 39.2px); animation-timing-function: ease-out; }
  36.11% { transform: translate(117.1px, 35.2px); animation-timing-function: ease-in; }
  38.89% { transform: translate(124.9px, 44.3px); animation-timing-function: ease-out; }
  41.67% { transform: translate(132.7px, 40.3px); animation-timing-function: ease-in; }
  44.44% { transform: translate(140.5px, 49.5px); animation-timing-function: ease-out; }
  47.22% { transform: translate(149.1px, 45.5px); animation-timing-function: ease-in; }
  50% { transform: translate(157.7px, 55.5px); animation-timing-function: ease-out; }
  52.78% { transform: translate(149.1px, 51.5px); animation-timing-function: ease-in; }
  55.56% { transform: translate(140.5px, 61.6px); animation-timing-function: ease-out; }
  58.33% { transform: translate(132.7px, 57.6px); animation-timing-function: ease-in; }
  61.11% { transform: translate(124.9px, 66.7px); animation-timing-function: ease-out; }
  63.89% { transform: translate(117.1px, 62.7px); animation-timing-function: ease-in; }
  66.67% { transform: translate(109.3px, 71.8px); animation-timing-function: ease-out; }
  69.44% { transform: translate(101.5px, 67.8px); animation-timing-function: ease-in; }
  72.22% { transform: translate(93.7px, 77px); animation-timing-function: ease-out; }
  75% { transform: translate(85.2px, 73px); animation-timing-function: ease-in; }
  77.78%, 100% { transform: translate(76.6px, 83px); }
}

/* Dalen: van de achterste hoek de andere kant op. */
@keyframes escher-laden-dalen {
  0% { transform: translate(76.6px, 28px); animation-timing-function: ease-out; }
  2.78% { transform: translate(68px, 24px); animation-timing-function: ease-in; }
  5.56% { transform: translate(59.5px, 41.8px); animation-timing-function: ease-out; }
  8.33% { transform: translate(50.9px, 37.8px); animation-timing-function: ease-in; }
  11.11% { transform: translate(42.3px, 55.5px); animation-timing-function: ease-out; }
  13.89% { transform: translate(50.9px, 51.5px); animation-timing-function: ease-in; }
  16.67% { transform: translate(59.5px, 69.3px); animation-timing-function: ease-out; }
  19.44% { transform: translate(68px, 65.3px); animation-timing-function: ease-in; }
  22.22% { transform: translate(76.6px, 83px); animation-timing-function: ease-out; }
  25% { transform: translate(85.2px, 73px); animation-timing-function: ease-in; }
  27.78% { transform: translate(93.7px, 77px); animation-timing-function: ease-out; }
  30.56% { transform: translate(101.5px, 67.8px); animation-timing-function: ease-in; }
  33.33% { transform: translate(109.3px, 71.8px); animation-timing-function: ease-out; }
  36.11% { transform: translate(117.1px, 62.7px); animation-timing-function: ease-in; }
  38.89% { transform: translate(124.9px, 66.7px); animation-timing-function: ease-out; }
  41.67% { transform: translate(132.7px, 57.6px); animation-timing-function: ease-in; }
  44.44% { transform: translate(140.5px, 61.6px); animation-timing-function: ease-out; }
  47.22% { transform: translate(149.1px, 51.5px); animation-timing-function: ease-in; }
  50% { transform: translate(157.7px, 55.5px); animation-timing-function: ease-out; }
  52.78% { transform: translate(149.1px, 45.5px); animation-timing-function: ease-in; }
  55.56% { transform: translate(140.5px, 49.5px); animation-timing-function: ease-out; }
  58.33% { transform: translate(132.7px, 40.3px); animation-timing-function: ease-in; }
  61.11% { transform: translate(124.9px, 44.3px); animation-timing-function: ease-out; }
  63.89% { transform: translate(117.1px, 35.2px); animation-timing-function: ease-in; }
  66.67% { transform: translate(109.3px, 39.2px); animation-timing-function: ease-out; }
  69.44% { transform: translate(101.5px, 30px); animation-timing-function: ease-in; }
  72.22% { transform: translate(93.7px, 34px); animation-timing-function: ease-out; }
  75% { transform: translate(85.2px, 24px); animation-timing-function: ease-in; }
  77.78%, 100% { transform: translate(76.6px, 28px); }
}

/* Waar het groene kubusje kijkt: r is de grijze zijkant, l de zwarte en v allebei (naar jou). */
@keyframes escher-laden-kijk-r {
  0% { opacity: 0; }
  22.22% { opacity: 1; }
  50% { opacity: 0; }
  86.67% { opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes escher-laden-kijk-l {
  0% { opacity: 0; }
  50% { opacity: 1; }
  77.78% { opacity: 0; }
  83.33% { opacity: 1; }
  86.67% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes escher-laden-kijk-v {
  0% { opacity: 1; }
  0.56% { opacity: 0; }
  77.78% { opacity: 1; }
  83.33% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

/* Het tweede kubusje loopt de andere kant op, dus kijkt het op andere momenten opzij. */
@keyframes escher-laden-kijk2-r {
  0% { opacity: 0; }
  11.11% { opacity: 1; }
  22.22% { opacity: 0; }
  86.67% { opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes escher-laden-kijk2-l {
  0% { opacity: 0; }
  0.56% { opacity: 1; }
  11.11% { opacity: 0; }
  83.33% { opacity: 1; }
  86.67% { opacity: 0; }
  100% { opacity: 0; }
}

/* Minder beweging: alles staat stil in de beginwaarden van de SVG. */
@media (prefers-reduced-motion: reduce) {
  [data-stijl='escher'] .laden-escher,
  [data-stijl='escher'] .laden-escher * {
    animation: none !important;
  }
}

/* ---------- Mario: zachte 16-bit hemel met wolken, vraagtekenblokken, groene buizen en ronde heuvels ---------- */
:root[data-stijl='mario'] {
  --achtergrond: #c4e7fb;
  /* De hemel zelf is effen. Wolken en heuvels staan enkel in de body-regel, zo blijft de balk van het tekenblad gewoon hemelblauw. */
  --achtergrond-beeld: none;
  --inkt: #1d2747;
  --inkt-zacht: #3d4b6e;
  --accent: #c62f28;
  --accent-inkt: #fff;
  --lijn: #1d2747;
  --font-kop: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --font-tekst: 'Nunito', ui-rounded, 'Avenir Next', 'Segoe UI', sans-serif;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --kop-gewicht: 400;
  --kop-spatiering: 0;
  --radius: 12px;
  --knop-achtergrond: #fffdf6;
  --knop-inkt: #1d2747;
  --knop-rand: 3px solid #1d2747;
  --kader: linear-gradient(90deg, #3f9a52 0 3px, #a8e89a 3px 5px, #dff7cf 5px 9px, #8fdc84 9px 14px, #6ccf6e 14px calc(100% - 14px), #4fb05c calc(100% - 14px) calc(100% - 10px), #6ccf6e calc(100% - 10px) calc(100% - 6px), #3f9a52 calc(100% - 6px));
  --kader-padding: 26px 10px 10px;
  --kader-radius: 6px;
  --kader-rand: 3px solid #1f5f30;
  --kader-schaduw: 0 6px 0 rgb(29 39 71 / 0.14);
  --focus: #1f4fd0;
  --dialoog: #fffaf0;
  --band-hoogte: 48px;
  --fout: #a3161a;
  --let-op: #7a4a00;
  --ok: #1a5e2c;
  --heuvels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 160' width='480' height='160'%3E%3Cg transform='translate(178 23) scale(0.5)'%3E%3Cg fill='%23ffffff' stroke='%23a9d8f5' stroke-width='8.0'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Crect x='14' y='46' width='122' height='9' rx='4.5' fill='%23e6f4fd'/%3E%3C/g%3E%3Cg transform='translate(398 12) scale(0.36)'%3E%3Cg fill='%23ffffff' stroke='%23a9d8f5' stroke-width='11.11'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Crect x='14' y='46' width='122' height='9' rx='4.5' fill='%23e6f4fd'/%3E%3C/g%3E%3Cg transform='translate(0 32)'%3E%3Cpath d='M16 108V86A50 50 0 0 1 116 86V108Z' fill='%23b5e3a1' stroke='%234e9a52' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M36 92V74' fill='none' stroke='%23e2f6d4' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M92 108V96A34 34 0 0 1 160 96V108Z' fill='%238fd18a' stroke='%233f8a48' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M106 100V92' fill='none' stroke='%23e2f6d4' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M262 108A60 60 0 0 1 382 108Z' fill='%23b5e3a1' stroke='%234e9a52' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M284 96V84' fill='none' stroke='%23e2f6d4' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M360 108V100A30 30 0 0 1 420 100V108Z' fill='%238fd18a' stroke='%233f8a48' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M373 102V96' fill='none' stroke='%23e2f6d4' stroke-width='6' stroke-linecap='round'/%3E%3Cdefs%3E%3Cpattern id='g' width='24' height='22' patternUnits='userSpaceOnUse' x='0' y='106'%3E%3Crect width='24' height='22' fill='%23b86a36'/%3E%3Crect x='1.5' y='1.5' width='21' height='19' rx='4' fill='%23dc9a62'/%3E%3Cpath d='M5 6V12' stroke='%23f2c08f' stroke-width='2' stroke-linecap='round'/%3E%3C/pattern%3E%3C/defs%3E%3Crect y='106' width='480' height='22' fill='url(%23g)'/%3E%3Crect y='102' width='480' height='7' fill='%236cc04a'/%3E%3Cpath d='M0 108.5H480' stroke='%233f8a48' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --wolken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 64' width='560' height='64'%3E%3Cg transform='translate(36 17) scale(0.6)'%3E%3Cg fill='%23ffffff' stroke='%23a9d8f5' stroke-width='6.67'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Crect x='14' y='46' width='122' height='9' rx='4.5' fill='%23e6f4fd'/%3E%3C/g%3E%3Cg transform='translate(262 10) scale(0.4)'%3E%3Cg fill='%23ffffff' stroke='%23a9d8f5' stroke-width='10.0'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Crect x='14' y='46' width='122' height='9' rx='4.5' fill='%23e6f4fd'/%3E%3C/g%3E%3Cg transform='translate(420 21) scale(0.5)'%3E%3Cg fill='%23ffffff' stroke='%23a9d8f5' stroke-width='8.0'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='0' y='26' width='150' height='34' rx='17'/%3E%3Ccircle cx='44' cy='28' r='24'/%3E%3Ccircle cx='82' cy='18' r='30'/%3E%3Ccircle cx='120' cy='32' r='20'/%3E%3C/g%3E%3Crect x='14' y='46' width='122' height='9' rx='4.5' fill='%23e6f4fd'/%3E%3C/g%3E%3C/svg%3E");
  --blok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='1' y='1' width='30' height='30' rx='5' fill='%23f7c13a' stroke='%238a4b08' stroke-width='2'/%3E%3Cpath d='M4.6 25V7.2Q4.6 4.6 7.2 4.6H25' fill='none' stroke='%23ffe38a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M27.4 7V24.8Q27.4 27.4 24.8 27.4H7' fill='none' stroke='%23e0901c' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%238a4b08'%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3Ccircle cx='24.4' cy='7.6' r='1.4'/%3E%3Ccircle cx='7.6' cy='24.4' r='1.4'/%3E%3Ccircle cx='24.4' cy='24.4' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --blokken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 48' preserveAspectRatio='none'%3E%3Cg transform='translate(48 7) scale(0.8) translate(-32 -7.6)'%3E%3Cellipse cx='32' cy='7.6' rx='5.2' ry='6.8' fill='%23f9d24a' stroke='%23a86a00' stroke-width='1.6'/%3E%3Crect x='30.7' y='3.9' width='2.6' height='7.4' rx='1.3' fill='%23d99a12'/%3E%3Cpath d='M29 5.2Q29.4 3.4 30.6 2.8' fill='none' stroke='%23fff6c8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(0 16)'%3E%3Crect x='1' y='1' width='30' height='30' rx='4' fill='%23e0874a' stroke='%237a3512' stroke-width='2'/%3E%3Cpath d='M2 11.3H30M2 21H30M16 2V11.3M9 11.3V21M23 11.3V21M16 21V30' fill='none' stroke='%237a3512' stroke-width='1.6'/%3E%3Cpath d='M4.4 4.6H13M19 4.6H27.6M4.4 14.4H6.4M12 14.4H20M25.6 14.4H27.6M4.4 24.2H13M19 24.2H27.6' fill='none' stroke='%23f6b27e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(32 16)'%3E%3Crect x='1' y='1' width='30' height='30' rx='5' fill='%23f7c13a' stroke='%238a4b08' stroke-width='2'/%3E%3Cpath d='M4.6 25V7.2Q4.6 4.6 7.2 4.6H25' fill='none' stroke='%23ffe38a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M27.4 7V24.8Q27.4 27.4 24.8 27.4H7' fill='none' stroke='%23e0901c' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%238a4b08'%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3Ccircle cx='24.4' cy='7.6' r='1.4'/%3E%3Ccircle cx='7.6' cy='24.4' r='1.4'/%3E%3Ccircle cx='24.4' cy='24.4' r='1.4'/%3E%3C/g%3E%3Cg transform='translate(1.2 1.2)' fill='none' stroke='%238a4b08' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 12.6C12.6 10.2 14.1 8.6 16.2 8.6C18.4 8.6 19.9 10 19.9 12C19.9 14 18.7 14.8 17.5 15.6C16.6 16.2 16.2 16.8 16.2 18V18.8'/%3E%3C/g%3E%3Ccircle cx='17.4' cy='24.3' r='1.9' fill='%238a4b08'/%3E%3Cg fill='none' stroke='%23fff8e0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 12.6C12.6 10.2 14.1 8.6 16.2 8.6C18.4 8.6 19.9 10 19.9 12C19.9 14 18.7 14.8 17.5 15.6C16.6 16.2 16.2 16.8 16.2 18V18.8'/%3E%3C/g%3E%3Ccircle cx='16.2' cy='23.1' r='1.9' fill='%23fff8e0'/%3E%3C/g%3E%3Cg transform='translate(64 16)'%3E%3Crect x='1' y='1' width='30' height='30' rx='4' fill='%23e0874a' stroke='%237a3512' stroke-width='2'/%3E%3Cpath d='M2 11.3H30M2 21H30M16 2V11.3M9 11.3V21M23 11.3V21M16 21V30' fill='none' stroke='%237a3512' stroke-width='1.6'/%3E%3Cpath d='M4.4 4.6H13M19 4.6H27.6M4.4 14.4H6.4M12 14.4H20M25.6 14.4H27.6M4.4 24.2H13M19 24.2H27.6' fill='none' stroke='%23f6b27e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(96 16)'%3E%3Crect x='1' y='1' width='30' height='30' rx='4' fill='%23e0874a' stroke='%237a3512' stroke-width='2'/%3E%3Cpath d='M2 11.3H30M2 21H30M16 2V11.3M9 11.3V21M23 11.3V21M16 21V30' fill='none' stroke='%237a3512' stroke-width='1.6'/%3E%3Cpath d='M4.4 4.6H13M19 4.6H27.6M4.4 14.4H6.4M12 14.4H20M25.6 14.4H27.6M4.4 24.2H13M19 24.2H27.6' fill='none' stroke='%23f6b27e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  /* Het embleem in twee lagen die elk apart bewegen (zie de kopanimatie). Samen zijn ze het vraagtekenblok met de munt erboven. */
  --embleem-blok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M21.5 10.5 18 7.5M42.5 10.5 46 7.5M20.5 14.5H16.5M43.5 14.5H47.5' fill='none' stroke='%23e0901c' stroke-width='2' stroke-linecap='round'/%3E%3Cg transform='translate(8 15.5) scale(1.5)'%3E%3Crect x='1' y='1' width='30' height='30' rx='5' fill='%23f7c13a' stroke='%238a4b08' stroke-width='2'/%3E%3Cpath d='M4.6 25V7.2Q4.6 4.6 7.2 4.6H25' fill='none' stroke='%23ffe38a' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M27.4 7V24.8Q27.4 27.4 24.8 27.4H7' fill='none' stroke='%23e0901c' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%238a4b08'%3E%3Ccircle cx='7.6' cy='7.6' r='1.4'/%3E%3Ccircle cx='24.4' cy='7.6' r='1.4'/%3E%3Ccircle cx='7.6' cy='24.4' r='1.4'/%3E%3Ccircle cx='24.4' cy='24.4' r='1.4'/%3E%3C/g%3E%3Cg transform='translate(1.2 1.2)' fill='none' stroke='%238a4b08' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 12.6C12.6 10.2 14.1 8.6 16.2 8.6C18.4 8.6 19.9 10 19.9 12C19.9 14 18.7 14.8 17.5 15.6C16.6 16.2 16.2 16.8 16.2 18V18.8'/%3E%3C/g%3E%3Ccircle cx='17.4' cy='24.3' r='1.9' fill='%238a4b08'/%3E%3Cg fill='none' stroke='%23fff8e0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 12.6C12.6 10.2 14.1 8.6 16.2 8.6C18.4 8.6 19.9 10 19.9 12C19.9 14 18.7 14.8 17.5 15.6C16.6 16.2 16.2 16.8 16.2 18V18.8'/%3E%3C/g%3E%3Ccircle cx='16.2' cy='23.1' r='1.9' fill='%23fff8e0'/%3E%3C/g%3E%3C/svg%3E");
  --embleem-munt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='7.6' rx='5.2' ry='6.8' fill='%23f9d24a' stroke='%23a86a00' stroke-width='1.6'/%3E%3Crect x='30.7' y='3.9' width='2.6' height='7.4' rx='1.3' fill='%23d99a12'/%3E%3Cpath d='M29 5.2Q29.4 3.4 30.6 2.8' fill='none' stroke='%23fff6c8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Op smalle schermen krijgt het papier zoveel mogelijk plaats: een smallere buis met dezelfde glans. */
@media (max-width: 520px) {
  :root[data-stijl='mario'] {
    --kader: linear-gradient(90deg, #3f9a52 0 2px, #a8e89a 2px 3px, #dff7cf 3px 5px, #6ccf6e 5px calc(100% - 4px), #3f9a52 calc(100% - 4px));
    --kader-padding: 26px 6px 6px;
  }
}

/*
 * Wolken staan alleen in een strook boven de kop en net boven de heuvels, nooit achter tekst.
 * Beide lagen hangen aan de linkerrand, dus hun plaats verandert niet met de schermbreedte.
 */
[data-stijl='mario'] body {
  background-image: var(--heuvels), var(--wolken);
  background-repeat: repeat-x, repeat-x;
  background-position: left bottom, left top;
  background-size: 480px 160px, 560px 64px;
}

/* Ruimte voor de strook wolken boven de kop. */
[data-stijl='mario'] .app {
  padding-top: 64px;
}

/* De titel past op één regel naast het embleem, ook in het brede pixellettertype. */
[data-stijl='mario'] .kop-tekst {
  flex-basis: min(22rem, calc(100% - 80px));
}

/* Het pixellettertype krijgt vaste groottes in veelvouden van 4 px, zodat de pixels scherp blijven. */
[data-stijl='mario'] h1 {
  font-family: var(--font-pixel);
  font-size: 20px;
  line-height: 1.25;
  color: #c62f28;
  text-shadow: 0.125em 0.125em 0 #fff;
}

[data-stijl='mario'] .stijlkiezer {
  font-weight: 600;
}

/* Een rij zwevende blokken met een munt boven het vraagtekenblok, altijd in hele blokken. */
[data-stijl='mario'] .band {
  margin-top: 0.5rem;
  background: var(--blokken) left top / 128px 48px round no-repeat;
}

[data-stijl='mario'] .sectie > h2 {
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 380px) {
  [data-stijl='mario'] h1 {
    font-size: 24px;
  }
}

@media (min-width: 521px) {
  [data-stijl='mario'] h1 {
    font-size: 32px;
  }

  [data-stijl='mario'] .sectie > h2 {
    font-size: 20px;
  }
}

/* Het sectienummer zit in een leeg vraagtekenblok. */
[data-stijl='mario'] .sectie > h2::before {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding-top: 0.15rem;
  background: var(--blok) center / 100% 100% no-repeat;
  color: #5a2e02;
  font-size: 16px;
  line-height: 1;
  text-shadow: 2px 2px 0 #ffe38a;
  filter: drop-shadow(0 4px 0 rgb(29 39 71 / 0.18));
}

/* Het kader is een groene buis: een brede rand bovenaan en strepen glans langs de zijkant. */
[data-stijl='mario'] .kader::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -10px;
  right: -10px;
  height: 24px;
  border: 3px solid #1f5f30;
  border-radius: 6px;
  background: var(--kader);
  box-shadow: 0 3px 0 rgb(31 95 48 / 0.35);
}

[data-stijl='mario'] .knop {
  font-weight: 600;
  box-shadow: 0 4px 0 #1d2747;
}

[data-stijl='mario'] .knop:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #1d2747;
}

[data-stijl='mario'] .knop-hoofd {
  border-color: #7d1712;
  box-shadow: 0 4px 0 #7d1712;
}

[data-stijl='mario'] .knop-hoofd:active {
  box-shadow: 0 1px 0 #7d1712;
}

/*
 * Het gekozen gereedschap (Pen of Gom) is een toestand: goud en ingezakt, met het vinkje en de streep uit basis.css.
 * Zo blijft Lees de functie de enige rode knop. Het gewicht blijft 600, dan verspringt de tekst niet bij het wisselen.
 */
[data-stijl='mario'] .tekenblad-gereedschap .knop[aria-pressed='true'],
[data-stijl='mario'] .tekenblad-gereedschap .knop[aria-pressed='true']:hover {
  background: #ffc21a;
  color: var(--knop-inkt);
  font-weight: 600;
  box-shadow: 0 1px 0 #1d2747;
  transform: translateY(3px);
}

/* Hover alleen met een muis of trackpad, zodat er op de iPad na een tik niets blijft hangen. */
@media (hover: hover) {
  [data-stijl='mario'] .knop:hover {
    background: #fff3c4;
  }

  [data-stijl='mario'] .knop-hoofd:hover {
    background: #b52a23;
  }
}

[data-stijl='mario'] .veld-label {
  font-weight: 500;
}

[data-stijl='mario'] input[type='text'],
[data-stijl='mario'] input[type='password'],
[data-stijl='mario'] select {
  border-width: 3px;
  background: #fff;
  color: #1d2747;
  box-shadow: inset 0 3px 0 rgb(29 39 71 / 0.1);
}

[data-stijl='mario'] .foto-voorbeeld {
  border: 3px solid #1d2747;
}

/* Ruimte onder de voettekst, zodat die op de hemel staat en niet op de wolken of de heuvels. */
[data-stijl='mario'] .voet {
  padding-bottom: 6.5rem;
}

[data-stijl='mario'] dialog {
  border: 4px solid #1d2747;
  border-radius: 16px;
  box-shadow: 0 8px 0 rgb(29 39 71 / 0.35);
}

[data-stijl='mario'] dialog::backdrop {
  background: rgb(29 39 71 / 0.5);
}

[data-stijl='mario'] .dialoog-inhoud h2 {
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.5;
  color: #c62f28;
}

/* ---------- Mario: kopanimatie ----------
 * Af en toe springt er iemand onzichtbaar tegen het vraagtekenblok in het embleem.
 * Het blok wipt 2 px op en de munt erboven springt 3 px mee en draait één keer rond, zoals een munt in het spel.
 * Dat duurt ongeveer een seconde; de rest van de cyclus van 16 s staat alles stil.
 * Het embleem bestaat daarvoor uit twee lagen: het blok met de stralen (--embleem-blok) en de munt (--embleem-munt).
 * Samen geven ze precies het vroegere embleem, dus ook zonder animatie (prefers-reduced-motion) ziet het er hetzelfde uit.
 * Mario zet geen --embleem, dus de doos van het embleem zelf tekent niets.
 */
[data-stijl='mario'] .embleem {
  --mario-cyclus: 16s;
  position: relative;
}

[data-stijl='mario'] .embleem::before,
[data-stijl='mario'] .embleem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
  pointer-events: none;
}

[data-stijl='mario'] .embleem::before {
  background-image: var(--embleem-blok);
  animation: mario-blok-tik var(--mario-cyclus) infinite;
}

/*
 * De munt draait om haar eigen middellijn: die valt samen met het midden van het embleem (x = 32).
 * Lineair tussen de tussenstappen, zodat ze gelijkmatig ronddraait en een kleine boog beschrijft.
 */
[data-stijl='mario'] .embleem::after {
  background-image: var(--embleem-munt);
  animation: mario-munt-sprong var(--mario-cyclus) linear infinite;
}

/* Het blok: lang stil, dan 2 px omhoog en zacht terug, samen ongeveer twee derde van een seconde. */
@keyframes mario-blok-tik {
  0%,
  87% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  88.5% {
    transform: translateY(-2px);
    animation-timing-function: ease-in-out;
  }

  91%,
  100% {
    transform: translateY(0);
  }
}

/*
 * De munt: tegelijk met het blok een boogje van 3 px hoog en één volle draai, in vier gelijke stappen van 0,24 s.
 * Na 360 graden staat ze er weer precies zoals in het begin, dus de herhaling springt niet.
 */
@keyframes mario-munt-sprong {
  0%,
  87% {
    transform: translateY(0) rotateY(0deg);
  }

  88.5% {
    transform: translateY(-2.25px) rotateY(90deg);
  }

  90% {
    transform: translateY(-3px) rotateY(180deg);
  }

  91.5% {
    transform: translateY(-2.25px) rotateY(270deg);
  }

  93%,
  100% {
    transform: translateY(0) rotateY(360deg);
  }
}

/* Wie op het vraagtekenblok tikt, laat het meteen opwippen: het stuk vanaf 87 % van de klok, één keer. */
[data-stijl='mario'] .embleem.tik::before {
  animation: mario-blok-tik var(--mario-cyclus) 1 calc(var(--mario-cyclus) * -0.87);
}

[data-stijl='mario'] .embleem.tik::after {
  animation: mario-munt-sprong var(--mario-cyclus) linear 1 calc(var(--mario-cyclus) * -0.87);
}

/* ---------- Mario: laadanimatie ----------
 * Terwijl Claude leest, wipt het vraagtekenblok telkens op en schiet er een munt uit.
 * De munt vliegt over een echte parabool (de stippellijn) en valt in de groene buis.
 * Het tellertje rechtsboven telt mee: hoe langer het lezen duurt, hoe rijker je wordt.
 * Bij elke tiende munt springt het tellertje even op.
 * Grondig (data-fase="grondig"): een power-up. Uit het blok komen nu sterren met een spoor
 * van sterrenstof, de parabool kleurt goud en het tellertje telt sterren.
 *
 * Opkomst (0,8 s): de grond rolt open, de buis schiet uit de grond, het blok valt uit de lucht
 * en stuitert, het tellertje zakt in beeld. Daarna loopt de lus op één klok: een stap per munt.
 * De munt beweegt in twee lagen: x gaat gelijkmatig, y versnelt als bij een worp
 * (exact kwadratisch, dus de munt volgt precies de getekende parabool).
 * Het tellertje is een kilometerteller van twee cijferstroken die met steps() verspringen,
 * precies op het moment dat de munt in de buis verdwijnt (--mario-laden-binnen).
 */
[data-stijl='mario'] .laden-mario {
  /* Na de opkomst begint de lus. */
  --mario-laden-start: 0.8s;
  /* Eén munt per stap. */
  --mario-laden-stap: 1.2s;
  /* Deel van de stap waarop de munt helemaal in de buis zit (zie mario-laden-vlucht-y). */
  --mario-laden-binnen: 0.78;
  display: block;
}

/*
 * Schalen en draaien gebeurt rond het eigen midden van elk bewegend onderdeel, ook in Safari.
 * Alleen op de onderdelen met een animatie: groepen met een transform-attribuut blijven zoals ze getekend zijn.
 */
[data-stijl='mario'] :where(.laden-mario [class^='mario-']) {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* De cijfers in het pixellettertype met een witte schaduw, zoals de titel (de kleur komt van hun groep). */
[data-stijl='mario'] .laden-mario text {
  font-family: var(--font-pixel);
  font-size: 12px;
}

/* ---- Opkomst ---- */

[data-stijl='mario'] .mario-grond {
  transform-origin: 50% 100%;
  animation: mario-laden-grond 0.3s ease-out both;
}

[data-stijl='mario'] .mario-buis {
  animation: mario-laden-buis-op 0.5s 0.12s both;
}

[data-stijl='mario'] .mario-blok-val {
  animation: mario-laden-blok-val 0.55s 0.22s both;
}

[data-stijl='mario'] .mario-wolk {
  animation:
    mario-laden-verschijn 0.4s 0.1s both,
    mario-laden-wolk 7s 0.5s ease-in-out infinite alternate;
}

[data-stijl='mario'] .mario-spoor {
  animation: mario-laden-verschijn 0.4s 0.5s both;
}

[data-stijl='mario'] .mario-teller {
  animation: mario-laden-teller-in 0.4s 0.45s both;
}

/* De vliegende munt blijft weg tot het blok op zijn plaats hangt. */
[data-stijl='mario'] .mario-vlucht,
[data-stijl='mario'] .mario-sterrenstof {
  animation: mario-laden-verschijn 0.1s calc(var(--mario-laden-start) - 0.1s) both;
}

@keyframes mario-laden-verschijn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mario-laden-grond {
  from {
    opacity: 0;
    transform: scaleX(0.3);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* De buis schiet uit de grond, schiet iets te ver en veert terug. */
@keyframes mario-laden-buis-op {
  0% {
    transform: translateY(44px);
    animation-timing-function: ease-out;
  }

  65% {
    transform: translateY(-4px);
    animation-timing-function: ease-in-out;
  }

  85% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Het blok valt (versnellend) uit de lucht en stuitert één keer na. */
@keyframes mario-laden-blok-val {
  0% {
    transform: translateY(-80px);
    animation-timing-function: ease-in;
  }

  55% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  76% {
    transform: translateY(-7px);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes mario-laden-teller-in {
  0% {
    opacity: 0;
    transform: translateY(-14px);
    animation-timing-function: ease-in;
  }

  60% {
    opacity: 1;
    transform: translateY(2px);
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mario-laden-wolk {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(6px);
  }
}

/* ---- De lus: een munt per stap ---- */

[data-stijl='mario'] .mario-blok-tik {
  animation: mario-laden-blok-tik var(--mario-laden-stap) var(--mario-laden-start) infinite;
}

[data-stijl='mario'] .mario-stralen {
  opacity: 0;
  animation: mario-laden-stralen var(--mario-laden-stap) var(--mario-laden-start) infinite;
}

[data-stijl='mario'] .mario-vlucht-x {
  animation: mario-laden-vlucht-x var(--mario-laden-stap) var(--mario-laden-start) linear infinite;
}

[data-stijl='mario'] .mario-vlucht-y {
  animation: mario-laden-vlucht-y var(--mario-laden-stap) var(--mario-laden-start) infinite;
}

[data-stijl='mario'] .mario-munt {
  animation: mario-laden-munt-draai 0.5s infinite;
  transition: opacity 0.25s;
}

[data-stijl='mario'] .mario-ster {
  opacity: 0;
  animation: mario-laden-ster-draai 0.8s linear infinite;
  transition: opacity 0.25s;
}

[data-stijl='mario'] .mario-buisrand {
  transform-origin: 50% 100%;
  animation: mario-laden-slik var(--mario-laden-stap) var(--mario-laden-start) infinite;
}

[data-stijl='mario'] .mario-teller-munt {
  animation: mario-laden-teller-draai var(--mario-laden-stap) var(--mario-laden-start) infinite;
  transition: opacity 0.25s;
}

[data-stijl='mario'] .mario-teller-ster {
  opacity: 0;
  transition: opacity 0.25s;
}

/* Kilometerteller: de eenheden verspringen bij elke munt, de tientallen bij elke tiende. */
[data-stijl='mario'] .mario-eenheden {
  animation: mario-laden-tel calc(var(--mario-laden-stap) * 10) calc(var(--mario-laden-start) + var(--mario-laden-stap) * var(--mario-laden-binnen)) steps(10, start) infinite;
}

[data-stijl='mario'] .mario-tientallen {
  animation: mario-laden-tel calc(var(--mario-laden-stap) * 100) calc(var(--mario-laden-start) + var(--mario-laden-stap) * (var(--mario-laden-binnen) + 9)) steps(10, start) infinite;
}

[data-stijl='mario'] .mario-cijfers {
  animation: mario-laden-hoera calc(var(--mario-laden-stap) * 10) calc(var(--mario-laden-start) + var(--mario-laden-stap) * (var(--mario-laden-binnen) + 9)) infinite;
}

/* Het blok wipt 5 px op, net wanneer de munt eruit schiet. */
@keyframes mario-laden-blok-tik {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  6% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
  }

  14%,
  100% {
    transform: translateY(0);
  }
}

@keyframes mario-laden-stralen {
  0%,
  100% {
    opacity: 0;
  }

  3%,
  12% {
    opacity: 1;
  }

  20% {
    opacity: 0;
  }
}

/*
 * Vlucht in x: gelijkmatig van het blok (x = 32) naar de buis (x = 166) in 1 s van de 1,2 s.
 * Daarna wacht de munt onzichtbaar in de buis tot de volgende stap.
 */
@keyframes mario-laden-vlucht-x {
  0% {
    transform: translateX(0);
  }

  83.33%,
  100% {
    transform: translateX(134px);
  }
}

/*
 * Vlucht in y: 36 px omhoog tot de top, dan 70 px omlaag tot in de buis.
 * De bezierkrommen zijn exact y = 2s - s² en y = s², en de tijden verhouden zich als √36 : √70,
 * zodat de munt overal dezelfde zwaartekracht voelt: samen met de gelijkmatige x een echte parabool.
 * Rond 78 % zakt de munt onder de rand van de buis: dan telt het tellertje (--mario-laden-binnen).
 */
@keyframes mario-laden-vlucht-y {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.3333, 0.6667, 0.6667, 1);
  }

  34.8% {
    transform: translateY(-36px);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0.3333);
  }

  83.33%,
  100% {
    transform: translateY(34px);
  }
}

/* De munt draait rond: van voor naar achter en terug. */
@keyframes mario-laden-munt-draai {
  0% {
    transform: scaleX(1);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: scaleX(-1);
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes mario-laden-ster-draai {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* De buis neemt een hapje: de rand zakt even in en veert terug als de munt erin valt. */
@keyframes mario-laden-slik {
  0%,
  74% {
    transform: scale(1, 1);
  }

  80% {
    transform: scale(1.07, 0.8);
    animation-timing-function: ease-out;
  }

  88% {
    transform: scale(0.97, 1.06);
    animation-timing-function: ease-in-out;
  }

  94%,
  100% {
    transform: scale(1, 1);
  }
}

/* Het muntje van het tellertje draait een halve slag mee bij elke munt die binnenkomt. */
@keyframes mario-laden-teller-draai {
  0%,
  78% {
    transform: scaleX(1);
  }

  83% {
    transform: scaleX(0.1);
  }

  88%,
  100% {
    transform: scaleX(1);
  }
}

/* Tien cijfers van 16 px hoog; de elfde (opnieuw 0) maakt de lus naadloos. */
@keyframes mario-laden-tel {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-160px);
  }
}

/* Een sprongetje van het hele getal bij elke tiende munt. */
@keyframes mario-laden-hoera {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  1.5% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
  }

  3%,
  100% {
    transform: translateY(0);
  }
}

/* ---- Grondig: power-up ---- */

[data-stijl='mario'] .mario-sterrenstof .mario-volger-1 {
  animation-delay: calc(var(--mario-laden-start) + 0.07s);
}

[data-stijl='mario'] .mario-sterrenstof .mario-volger-2 {
  animation-delay: calc(var(--mario-laden-start) + 0.14s);
}

[data-stijl='mario'] .mario-sterrenstof > g {
  opacity: 0;
  transition: opacity 0.25s;
}

[data-stijl='mario'] .mario-fonkel {
  animation: mario-laden-fonkel 0.3s ease-in-out infinite alternate;
}

[data-stijl='mario'] .mario-spoor-goud {
  opacity: 0;
  transition: opacity 0.4s;
}

[data-stijl='mario'] .laden[data-fase='grondig'] .mario-munt,
[data-stijl='mario'] .laden[data-fase='grondig'] .mario-teller-munt {
  opacity: 0;
}

[data-stijl='mario'] .laden[data-fase='grondig'] .mario-ster,
[data-stijl='mario'] .laden[data-fase='grondig'] .mario-teller-ster,
[data-stijl='mario'] .laden[data-fase='grondig'] .mario-sterrenstof > g {
  opacity: 1;
}

[data-stijl='mario'] .laden[data-fase='grondig'] .mario-spoor-goud {
  opacity: 0.95;
}

@keyframes mario-laden-fonkel {
  from {
    transform: scale(1) rotate(0deg);
  }

  to {
    transform: scale(0.45) rotate(45deg);
  }
}

/* ---- Minder beweging: een stilstaand beeld ----
 * De munt hangt in de top van de parabool en het tellertje staat op ×01.
 * Bij grondig hangt daar de ster, met het sterrenstof net achter haar op de baan.
 */
@media (prefers-reduced-motion: reduce) {
  [data-stijl='mario'] .laden-mario,
  [data-stijl='mario'] .laden-mario * {
    animation: none !important;
    transition: none !important;
  }

  [data-stijl='mario'] .mario-vlucht .mario-vlucht-x {
    transform: translateX(56px);
  }

  [data-stijl='mario'] .mario-vlucht .mario-vlucht-y {
    transform: translateY(-36px);
  }

  [data-stijl='mario'] .mario-sterrenstof .mario-vlucht-x.mario-volger-1 {
    transform: translateX(46.6px);
  }

  [data-stijl='mario'] .mario-sterrenstof .mario-vlucht-y.mario-volger-1 {
    transform: translateY(-35px);
  }

  [data-stijl='mario'] .mario-sterrenstof .mario-vlucht-x.mario-volger-2 {
    transform: translateX(37.2px);
  }

  [data-stijl='mario'] .mario-sterrenstof .mario-vlucht-y.mario-volger-2 {
    transform: translateY(-32px);
  }

  [data-stijl='mario'] .mario-eenheden {
    transform: translateY(-16px);
  }
}

/* ---------- Alle stijlen: kop en band stil bij minder beweging ----------
 * Wie op het toestel minder beweging vraagt, krijgt de kop en de band van elke stijl
 * stilstaand te zien. Elke kopanimatie is zo gebouwd dat het beeld zonder animatie klopt:
 * open ogen, het blok op zijn plaats, de sterren voluit en de band zoals hij getekend is.
 */
@media (prefers-reduced-motion: reduce) {
  [data-stijl] .kop,
  [data-stijl] .kop::before,
  [data-stijl] .kop::after,
  [data-stijl] .kop *,
  [data-stijl] .kop *::before,
  [data-stijl] .kop *::after,
  [data-stijl] .band,
  [data-stijl] .band::before,
  [data-stijl] .band::after {
    animation: none !important;
  }
}