:root{
    --papier:#FDF7ED; --wit:#FFFFFF; --diep:#F4E8D6;
    --ink:#2B2015; --grijs:#7A6A54; --heading:#5E3B14;
    --hair:#DFCDB2; --hair-licht:#EDE0CC;
    --oranje:#B9670F; --bruin:#6E4119; --blauw:#141FC0;
    --A:#B9670F; --B:#2A34B5; --C:#A03F26; --D:#57642F;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--papier);color:var(--ink);
    font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;margin:0}
  button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--blauw);outline-offset:4px}

  #voortgang{position:fixed;top:0;left:0;right:0;height:2px;background:var(--hair-licht);z-index:9}
  #voortgang i{display:block;height:100%;background:var(--bruin);width:0;transition:width 400ms cubic-bezier(.4,0,.2,1)}

  .blad{max-width:660px;margin:0 auto;padding:74px 26px 110px}
  .merk{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.42em;font-size:13px;
    color:var(--heading);text-transform:uppercase;margin:0 0 66px;font-weight:400}

  .teller{font-family:Heebo,sans-serif;font-size:11px;font-weight:500;letter-spacing:.24em;
    color:var(--grijs);margin:0 0 20px;font-variant-numeric:tabular-nums}
  .teller b{color:var(--bruin);font-weight:500}

  h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:clamp(42px,8vw,66px);line-height:1.02;color:var(--heading);
    margin:0 0 30px;letter-spacing:-.005em;text-wrap:balance}
  legend.vraag{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:clamp(30px,5.2vw,42px);line-height:1.1;color:var(--heading);
    margin:0;padding:0;letter-spacing:-.005em;text-wrap:balance;display:block}
  fieldset{border:0;margin:0;padding:0;min-width:0}
  .hint{font-family:Heebo,sans-serif;font-size:12px;letter-spacing:.1em;
    color:var(--grijs);margin:14px 0 40px}
  .intro p{color:var(--grijs);margin:0 0 20px;max-width:52ch}
  .intro p.slot{color:var(--ink)}

  /* keuzelijst, redactioneel: hairlines, geen kaartjes */
  .lijst{border-top:1px solid var(--hair);margin:0}
  .rij{display:flex;gap:20px;align-items:flex-start;padding:19px 4px 19px 0;
    border-bottom:1px solid var(--hair-licht);cursor:pointer;
    transition:background 180ms,padding-left 180ms}
  .rij:hover{background:var(--diep);padding-left:10px}
  .rij input{position:absolute;opacity:0;width:1px;height:1px}
  .merker{flex:none;width:15px;height:15px;margin-top:6px;border:1.5px solid var(--hair);
    position:relative;transition:border-color 180ms}
  .rij.rond .merker{border-radius:50%}
  .merker::after{content:"";position:absolute;inset:2.5px;background:var(--blauw);
    transform:scale(0);transition:transform 180ms cubic-bezier(.34,1.56,.64,1)}
  .rij.rond .merker::after{border-radius:50%}
  .rij span.t{flex:1;font-size:17px;line-height:1.45}
  .rij:has(input:checked) .merker{border-color:var(--blauw)}
  .rij:has(input:checked) .merker::after{transform:scale(1)}
  .rij:has(input:checked) span.t{color:var(--ink);font-weight:600}
  .rij:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:3px}

  /* frequentie */
  .stel{padding:17px 0;border-bottom:1px solid var(--hair-licht);
    display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
  .stel:first-of-type{border-top:1px solid var(--hair)}
  .stel .t{flex:1 1 240px;font-size:16px;line-height:1.4}
  .schaal{display:flex;flex:none}
  .schaal label{font-family:Heebo,sans-serif;font-size:12px;font-weight:400;letter-spacing:.08em;
    text-transform:uppercase;min-width:66px;min-height:44px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--grijs);border-bottom:2px solid var(--hair-licht);transition:all 180ms}
  .schaal label:hover{color:var(--bruin);border-bottom-color:var(--hair)}
  .schaal input{position:absolute;opacity:0;width:1px;height:1px}
  .schaal label:has(input:checked){color:var(--bruin);font-weight:500;
    border-bottom:2px solid var(--oranje)}
  .schaal label:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:2px}

  /* cijfer */
  .cijfers{display:flex;gap:0;border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);margin:0}
  .cijfers label{flex:1;min-height:62px;display:flex;align-items:center;justify-content:center;
    font-family:Heebo,sans-serif;font-size:15px;font-weight:400;cursor:pointer;
    color:var(--grijs);border-right:1px solid var(--hair-licht);
    font-variant-numeric:tabular-nums;transition:all 180ms}
  .cijfers label:last-child{border-right:0}
  .cijfers label:hover{background:var(--diep);color:var(--bruin)}
  .cijfers input{position:absolute;opacity:0;width:1px;height:1px}
  .cijfers label:has(input:checked){background:var(--bruin);color:var(--papier);font-weight:500}
  .cijfers label:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:-2px}
  .schaaluitleg{display:flex;justify-content:space-between;gap:18px;
    font-family:Heebo,sans-serif;font-size:11.5px;letter-spacing:.06em;
    color:var(--grijs);margin:12px 0 0}

  .nav{display:flex;align-items:center;gap:26px;margin-top:44px;flex-wrap:wrap}
  .knop{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
    background:var(--blauw);color:var(--papier);
    font-family:Heebo,sans-serif;font-size:12px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;padding:0 34px;transition:background 200ms;text-decoration:none}
  .knop:hover{background:#0C149A}
  .knop[disabled]{background:var(--hair);color:var(--papier);cursor:not-allowed}
  .knop.lijn{background:transparent;color:var(--bruin);box-shadow:inset 0 0 0 1px var(--hair)}
  .knop.lijn:hover{background:var(--diep)}
  .terug{font-family:Heebo,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--grijs);min-height:44px;display:inline-flex;align-items:center;
    border-bottom:1px solid var(--hair);transition:color 180ms}
  .terug:hover{color:var(--oranje)}
  .melding{font-family:Heebo,sans-serif;font-size:12px;letter-spacing:.08em;
    color:var(--oranje);margin:18px 0 0}

  /* het wegen */
  .wegen{padding:40px 0 20px;text-align:center}
  .wegen .zin{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(23px,4vw,30px);color:var(--heading);margin:0 0 54px;line-height:1.3;
    opacity:0;animation:kom 700ms ease forwards}
  .staven{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,6vw,44px);
    height:190px;margin:0 auto}
  .staaf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    height:100%;width:34px}
  .staaf .kolom{width:100%;background:var(--kleur);height:0;
    transition:height 900ms cubic-bezier(.22,1,.36,1),opacity 500ms ease}
  .staaf .naam{font-family:Heebo,sans-serif;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--grijs);margin-top:14px;
    writing-mode:vertical-rl;transform:rotate(180deg);height:78px;
    display:flex;align-items:flex-start}
  .staaf.dim .kolom{opacity:.16}
  .staaf.dim .naam{opacity:.4}
  @keyframes kom{to{opacity:1}}
  /* de weging: schermvullend, de schijven en de meetlijnen, vloeit over in de kroon */
  .weging{position:fixed;inset:0;z-index:20;background:var(--bruin);opacity:0;animation:kom 500ms ease forwards}
  .weging canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .weging .zin{position:absolute;left:24px;right:24px;top:clamp(48px,11vh,110px);text-align:center;
    font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(22px,3.6vw,34px);line-height:1.3;color:var(--papier);opacity:.92;margin:0;
    text-wrap:balance;pointer-events:none;transition:opacity 500ms}
  .weging.weg{animation:none;opacity:0;transition:opacity 750ms ease}
  .weging .naamblok{position:absolute;left:24px;right:24px;bottom:30%;color:var(--papier);
    opacity:0;transform:translateY(14px);transition:opacity 650ms ease,transform 650ms ease;pointer-events:none}
  .weging .naamblok.aan{opacity:1;transform:none}
  .weging .naamblok .aanhef{font-family:Heebo,sans-serif;font-size:11px;letter-spacing:.26em;
    text-transform:uppercase;opacity:.78;margin:0}
  .weging .naamblok .naam{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:clamp(46px,10vw,84px);line-height:.96;margin:12px 0 0;letter-spacing:-.01em}

  /* uitslag */
  /* de kroon: kleurverloop in de profielkleur, met zwevende schijven op een tekenvlak */
  .kroon{position:relative;overflow:hidden;background:var(--bruin);color:var(--papier);
    margin:0 -26px 0;padding:44px 26px 48px;min-height:clamp(440px,70vh,620px);
    display:flex;flex-direction:column;justify-content:space-between;
    opacity:0;animation:kom 800ms ease forwards}
  .kroon canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .kroon .aanhef,.kroon .kroontekst{position:relative}
  .kroon .aanhef{font-family:Heebo,sans-serif;font-size:11px;letter-spacing:.26em;
    text-transform:uppercase;opacity:.78;margin:0}
  .kroon .vak{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:clamp(50px,11vw,88px);line-height:.94;margin:0 0 14px;letter-spacing:-.01em;
    text-wrap:balance}
  .kroon .zacht{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(19px,3.4vw,24px);margin:0;opacity:.92;max-width:26ch}
  .kroon .streep{width:46px;height:1px;background:currentColor;opacity:.45;margin:26px 0 0}

  /* kroon en uitslag delen één profielkleur, via --kleur (gezet per uitslag) */
  .uitslag{padding-top:52px}
  .kroon,.uitslag{
    --tint:color-mix(in srgb,var(--kleur) 9%,var(--papier));
    --tint2:color-mix(in srgb,var(--kleur) 22%,var(--papier));
    --donker:color-mix(in srgb,var(--kleur) 58%,#2B2015);
    --donker2:color-mix(in srgb,var(--kleur) 80%,#2B2015);
    --sch-1:0 1px 2px color-mix(in srgb,var(--kleur) 10%,transparent),0 3px 8px -2px color-mix(in srgb,var(--kleur) 10%,transparent);
    --sch-2:0 2px 4px color-mix(in srgb,var(--kleur) 8%,transparent),0 14px 28px -10px color-mix(in srgb,var(--kleur) 26%,transparent);
    --sch-3:0 10px 20px -8px color-mix(in srgb,var(--kleur) 28%,transparent),0 30px 60px -20px color-mix(in srgb,var(--kleur) 34%,transparent)}
  .etiket{font-family:Heebo,sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.22em;
    text-transform:uppercase;color:var(--kleur);margin:0 0 14px}
  .kader{border-left:2px solid var(--kleur);padding:4px 0 4px 20px;margin:0 0 44px;
    font-size:15px;color:var(--grijs);max-width:52ch}
  .uitslag h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:34px;
    color:var(--heading);margin:52px 0 20px;letter-spacing:-.005em}
  .uitslag h3:first-of-type{margin-top:0}
  .uitslag p{margin:0 0 20px;color:var(--grijs);max-width:56ch}
  .uitslag p.lood{font-size:19px;color:var(--ink);line-height:1.55}
  /* markeerstift: de kernwoorden in Koosje's tekst, in de profielkleur */
  .uitslag mark{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--kleur) 28%,transparent) 58%);
    color:var(--ink);font-weight:600;padding:0 2px;border-radius:2px;
    box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .uitslag p.lood mark{color:var(--donker)}
  /* de uitleg: een witte kaart met rechts een bewegend tekeningetje van het mechanisme */
  .uitleg{display:grid;grid-template-columns:1fr 128px;gap:30px;align-items:start;
    background:var(--wit);border-radius:8px;padding:34px 34px 30px;box-shadow:var(--sch-2)}
  .uitleg .tekst p:last-child{margin-bottom:0}
  .uitleg .tekst .etiket{margin-bottom:16px}
  .uitleg .glyph{width:128px;height:128px;color:var(--kleur);margin-top:4px}
  .glyph *{transform-box:fill-box;transform-origin:center}

  /* één zin van Koosje, uitgelicht */
  .citaat{margin:46px 0 50px;padding:0 0 0 28px;position:relative;max-width:36ch}
  .citaat::before{content:"";position:absolute;left:0;top:13px;width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,var(--tint2),var(--kleur) 85%)}
  .citaat p{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:clamp(25px,4.4vw,31px);line-height:1.25;color:var(--donker);margin:0;text-wrap:balance;max-width:none}

  /* herken je dit: aantikbare kaarten, met een teller */
  .herken-kop{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
    flex-wrap:wrap;margin:52px 0 6px}
  .herken-kop h3{margin:0}
  .herken-kop .tel{font-family:Heebo,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;color:var(--donker);background:var(--tint);border-radius:999px;
    padding:6px 14px 6px 10px;display:inline-flex;align-items:baseline;gap:7px;
    transition:opacity 300ms,transform 300ms cubic-bezier(.34,1.56,.64,1)}
  .herken-kop .tel b{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:400;
    letter-spacing:0;color:var(--kleur);line-height:1}
  .herken-kop .tel:empty{opacity:0;transform:scale(.9)}
  .herken-hint{font-size:14px;color:var(--grijs);margin:0 0 18px}
  .herken{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .herken button{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;
    padding:16px 18px;font-size:16.5px;line-height:1.45;color:var(--ink);
    background:var(--wit);border-radius:7px;box-shadow:var(--sch-1);
    transition:transform 220ms ease,box-shadow 220ms ease,background 220ms ease,color 220ms}
  .herken button:hover{transform:translateY(-2px);box-shadow:var(--sch-2);color:var(--heading)}
  .herken button:active{transform:scale(.99)}
  .herken .schijf{flex:none;width:16px;height:16px;margin-top:4px;border-radius:50%;
    border:1.5px solid var(--kleur);background:transparent;
    transition:transform 380ms cubic-bezier(.34,1.56,.64,1),background 220ms,box-shadow 220ms,border-color 220ms}
  .herken button[aria-pressed="true"]{color:var(--heading);font-weight:600;background:var(--tint);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kleur) 35%,transparent),var(--sch-1)}
  .herken button[aria-pressed="true"] .schijf{border-color:transparent;transform:scale(1.18);
    background:radial-gradient(circle at 32% 28%,var(--tint2),var(--kleur) 85%);
    box-shadow:0 2px 6px color-mix(in srgb,var(--kleur) 32%,transparent)}

  /* het programma: een getint vlak met zwevende schijven in de hoek en tegels met de pijlers */
  .programma{background:var(--tint);border-radius:10px;padding:38px 34px 40px;margin:56px 0 0;
    position:relative;overflow:hidden;isolation:isolate}
  .programma canvas.los{position:absolute;right:-24px;top:-28px;width:220px;height:180px;z-index:-1;
    pointer-events:none}
  .programma .etiket,.programma h3{padding-right:150px}
  .programma h3{margin-top:0;font-size:31px}
  .programma p:last-child{margin-bottom:0}
  .programma .knoppen{margin-top:26px}
  .pijlers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:6px 0 26px}
  .pijlers span{background:var(--wit);border-radius:7px;padding:14px 14px 15px;box-shadow:var(--sch-1);
    font-family:Heebo,sans-serif;font-size:12px;font-weight:500;letter-spacing:.03em;line-height:1.4;
    color:var(--donker);display:flex;flex-direction:column;gap:11px;
    transition:transform 220ms ease,box-shadow 220ms ease}
  .pijlers span:hover{transform:translateY(-2px);box-shadow:var(--sch-2)}
  .pijlers span::before{content:"";width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,var(--tint2),var(--kleur) 85%);
    box-shadow:0 2px 4px color-mix(in srgb,var(--kleur) 25%,transparent)}

  /* foto van Koosje naast haar persoonlijke noot; de foto kantelt licht mee met de muis */
  .noot{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;margin:64px 0 0;isolation:isolate}
  .noot .lijst3d{perspective:900px}
  .noot .foto{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,var(--tint2),var(--tint));
    border:1px solid color-mix(in srgb,var(--kleur) 28%,var(--hair));border-radius:6px;
    display:flex;align-items:flex-end;padding:14px;box-shadow:var(--sch-3);
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 320ms ease,box-shadow 320ms ease;
    will-change:transform}
  .noot .foto::after{content:"";position:absolute;inset:0;transform:translate(12px,12px);z-index:-1;
    border:1px solid color-mix(in srgb,var(--kleur) 42%,transparent);border-radius:6px;pointer-events:none}
  .noot .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    border-radius:5px;display:block}
  .noot .foto span{position:relative;z-index:1;font-family:Heebo,sans-serif;font-size:10px;
    font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--kleur);line-height:1.5}
  .noot .q{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:23px;line-height:1.35;color:var(--heading);margin:0 0 18px;max-width:30ch}
  .noot .q.leeg{color:var(--grijs);font-size:19px}
  .noot .naam{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;letter-spacing:.12em;
    color:var(--kleur);margin:0}

  /* de volgende stap: een lichte plaat in de profielkleur, met de schijven in de hoek */
  .stap{margin:64px 0 0;padding:42px 34px 46px;border-radius:10px;position:relative;overflow:hidden;
    isolation:isolate;background:linear-gradient(160deg,var(--tint2),var(--tint));box-shadow:var(--sch-2)}
  .stap canvas.los{position:absolute;right:-30px;top:-46px;width:250px;height:180px;z-index:-1;pointer-events:none}
  .stap .etiket,.stap h3{padding-right:150px}
  .stap h3{margin-top:0}
  .stap .knop{box-shadow:var(--sch-2)}
  .stap .knop:hover{transform:translateY(-1px)}
  .stap .zij{margin-top:36px;padding:26px 26px 28px;border-radius:8px;background:var(--wit);box-shadow:var(--sch-1)}
  .stap .zij .etiket{margin-bottom:10px}
  .stap .zij p{font-size:15.5px;margin-bottom:14px}
  .stap .zij .knoppen{margin-top:16px}
  .podcast{margin-top:24px;padding-top:22px;border-top:1px solid var(--hair-licht)}
  .podcast p{margin-bottom:10px}
  .podcast .afl{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;
    font-size:19px;line-height:1.3;color:var(--heading);margin-bottom:0}
  .knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
  .knop{transition:background 200ms,transform 200ms,box-shadow 200ms}

  /* de tips: kaartjes uit de zomergids, op mobiel veeg je erdoorheen */
  .tipsblok{margin-top:60px}
  .tipsblok .etiket{margin-bottom:10px}
  .tipsblok h3{margin:0 0 22px;font-size:30px}
  .tipsblok ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .tipsblok li{background:var(--wit);border-radius:7px;box-shadow:var(--sch-1);
    padding:40px 20px 20px 20px;position:relative;font-size:15.5px;color:var(--ink);line-height:1.5;
    transition:transform 220ms ease,box-shadow 220ms ease}
  .tipsblok li:hover{transform:translateY(-3px);box-shadow:var(--sch-2)}
  .tipsblok li::before{content:"";position:absolute;left:20px;top:18px;width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,var(--tint2),var(--kleur) 85%);
    box-shadow:0 2px 4px color-mix(in srgb,var(--kleur) 25%,transparent)}
  .tipsblok li:first-child:nth-last-child(odd){grid-column:1/-1;background:var(--tint);font-size:17px;
    box-shadow:none}

  /* blokken komen omhoog terwijl ze in beeld scrollen, per stuk aangestuurd vanuit JavaScript
     (IntersectionObserver), niet met de scroll-CSS van animation-timeline: view(). Die laatste
     werkt onvoorspelbaar binnen het ingesloten venster van een gepubliceerd artifact. */
  .onthul{opacity:0;transform:translateY(20px);
    transition:opacity 650ms ease var(--d,0ms),transform 650ms cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .onthul.zichtbaar{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.onthul{opacity:1;transform:none;transition:none}}

  /* de tekeningetjes bij de uitleg */
  @media (prefers-reduced-motion:no-preference){
    .g-ring{animation:g-ring 5.2s ease-in-out infinite}
    .g-brein{animation:g-puls 3.2s ease-in-out infinite}
    .g-buik{animation:g-puls 3.2s ease-in-out 1.6s infinite}
    .g-lijn{animation:g-lijn 3.2s linear infinite}
    .g-bel{animation:g-bel 2.8s ease-out infinite}
    .g-groot{animation:g-groei 4.4s ease-in-out infinite}
    .g-klein{animation:g-krimp 4.4s ease-in-out infinite}
    .g-kring{animation:g-kring 2.4s ease-out infinite}
    .g-aan{animation:g-aan 2.4s ease-in-out infinite}
  }
  @keyframes g-ring{0%{stroke-dashoffset:276}42%{stroke-dashoffset:184}58%{stroke-dashoffset:196}100%{stroke-dashoffset:276}}
  @keyframes g-puls{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:1}}
  @keyframes g-lijn{to{stroke-dashoffset:-28}}
  @keyframes g-bel{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-58px);opacity:0}}
  @keyframes g-groei{0%,100%{transform:scale(1)}50%{transform:scale(1.75)}}
  @keyframes g-krimp{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.6);opacity:.5}}
  @keyframes g-kring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
  @keyframes g-aan{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
  .disclaimer{margin:22px 0 0;font-size:13px;font-style:italic;color:var(--grijs)}
  .stub{border-top:2px solid var(--oranje);padding-top:26px;margin-top:44px}
  .stub .etiket{font-family:Heebo,sans-serif;font-size:10px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--oranje);margin:0 0 12px}

  /* de persoonlijke noot onderaan: een handgeschreven kaartje op een donker vlak, met een
     polaroid eraan geclipt. Vaste kleuren, niet de profielkleur, want dit is voor iedereen gelijk */
  .slotnoot{margin:76px -26px 0;padding:22px 26px 24px;border-radius:14px;
    background:linear-gradient(170deg,#0608D8,#0A0BA6 55%,#070880);position:relative}
  .slotnoot .kaartje{position:relative;max-width:536px;margin:0 auto;background:var(--papier);
    padding:26px 28px 22px;transform:rotate(-1.4deg);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 8px 18px -8px rgba(0,0,0,.35)}
  .slotnoot .kaartje::before{content:"";position:absolute;inset:9px;border:1px solid var(--hair);
    pointer-events:none}
  .slotnoot h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:24px;
    line-height:1.1;color:var(--heading);margin:0 0 5px;letter-spacing:-.01em}
  .slotnoot .onder{font-family:Heebo,sans-serif;font-size:10.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--oranje);margin:0 0 12px}
  /* het kopblok houdt rechts ruimte vrij, want daar hangt de polaroid overheen */
  .slotnoot .kopblok{padding-right:158px;margin-bottom:15px}
  .slotnoot .hand{font-family:Caveat,"Bradley Hand",cursive;font-weight:500;font-size:17.5px;
    line-height:1.32;color:#3E2A17;margin:0 0 8px;max-width:52ch}
  .slotnoot .hand.aanhef{margin-bottom:12px}
  .slotnoot .groet{font-family:Caveat,"Bradley Hand",cursive;font-weight:600;font-size:23px;
    color:#8C3D1F;margin:16px 0 0;line-height:1;transform:rotate(-2deg);display:inline-block}
  .slotnoot .krul{display:block;width:80px;height:10px;margin:2px 0 0 4px;color:#8C3D1F}
  .slotnoot .motto{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;
    font-size:13.5px;line-height:1.45;color:var(--grijs);margin:0}
  .slotnoot .concept{font-family:Heebo,sans-serif;font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--oranje);margin:13px 0 0;opacity:.8}

  /* de polaroid, geclipt aan de rechterbovenhoek van het kaartje */
  .slotnoot .polaroid{position:absolute;right:-22px;top:-38px;width:148px;background:#FFFDF8;
    padding:9px 9px 26px;transform:rotate(6deg);
    box-shadow:0 18px 30px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.2)}
  .slotnoot .polaroid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  .slotnoot .polaroid span{position:absolute;left:0;right:0;bottom:8px;text-align:center;
    font-family:Caveat,cursive;font-size:15px;color:#5E3B14}
  .slotnoot .clip{position:absolute;left:12px;top:-17px;width:23px;height:50px;
    transform:rotate(-14deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}

  @media (max-width:560px){
    .slotnoot{margin:66px -20px 0;padding:34px 16px 20px;border-radius:10px}
    .slotnoot .kaartje{padding:22px 16px 18px;transform:rotate(-1deg)}
    .slotnoot h3{font-size:21px}
    .slotnoot .hand{font-size:16.5px}
    .slotnoot .kopblok{padding-right:104px;margin-bottom:16px}
    .slotnoot .motto{max-width:none}
    .slotnoot .polaroid{width:96px;right:-6px;top:-40px;padding:6px 6px 17px}
    .slotnoot .polaroid span{font-size:12px;bottom:4px}
  }

  /* wisselbalk, alleen voor Eva en Koosje tijdens het meekijken */
  .wissel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:-30px 0 26px;
    font-family:Heebo,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .wissel .wie{color:var(--grijs);margin-right:10px}
  .wissel a{color:var(--grijs);text-decoration:none;padding:8px 10px;min-height:36px;
    display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:color 180ms}
  .wissel a:hover{color:var(--bruin)}
  .wissel a.nu{color:var(--bruin);border-bottom-color:var(--oranje)}
  /* dezelfde balk onder het startscherm, zodat Eva en Koosje de uitslagen kunnen openen zonder de scan te doen */
  .wissel.onder{margin:72px 0 0;padding-top:20px;border-top:1px solid var(--hair)}


  /* het invulscherm */
  .poort h2.vraag{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:clamp(30px,5.2vw,42px);line-height:1.1;color:var(--heading);margin:0;letter-spacing:-.005em}
  .poort .veld{display:block;margin:0 0 22px}
  .poort .veld span{display:block;font-family:Heebo,sans-serif;font-size:11px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);margin:0 0 8px}
  .poort input[type=text],.poort input[type=email]{width:100%;font:inherit;font-size:18px;color:var(--ink);
    background:var(--wit);border:0;border-bottom:1.5px solid var(--hair);padding:14px 4px;min-height:52px;
    border-radius:0;transition:border-color 180ms}
  .poort input:focus{outline:none;border-bottom-color:var(--blauw)}
  .poort .poortuitleg{color:var(--grijs);margin:18px 0 38px;max-width:52ch}
  .poort .vinkje{display:flex;align-items:flex-start;gap:12px;margin:0 0 26px;cursor:pointer;color:var(--grijs)}
  .poort .vinkje input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--blauw)}
  .poort .vinkje span{font-size:14px;line-height:1.5;color:var(--grijs)}
  .poort .klein{font-size:13px;color:var(--grijs);margin:22px 0 0}

  details.debug{margin-top:64px;border-top:1px solid var(--hair)}
  details.debug summary{font-family:Heebo,sans-serif;font-size:10.5px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--grijs);
    cursor:pointer;padding:22px 0;min-height:44px;display:flex;align-items:center}
  details.debug .inhoud{padding:0 0 30px}
  .telrij{display:flex;gap:0;margin:0 0 24px;border-top:1px solid var(--hair-licht)}
  .telrij span{flex:1;font-family:Heebo,sans-serif;font-size:12px;padding:12px 6px;
    text-align:center;color:var(--grijs);border-right:1px solid var(--hair-licht);
    font-variant-numeric:tabular-nums}
  .telrij span:last-child{border-right:0}
  .telrij span.top{color:var(--bruin);font-weight:500;box-shadow:inset 0 -2px 0 var(--oranje)}
  .springlijst{font-family:Heebo,sans-serif;font-size:12px;letter-spacing:.06em;color:var(--grijs);margin:0 0 18px}
  .springlijst a{color:var(--bruin);text-decoration:none;border-bottom:1px solid var(--hair)}
  .debug ol{margin:0;padding-left:18px;font-size:14px;color:var(--grijs)}
  .debug li{margin-bottom:7px}
  .opnieuw{margin-top:40px;margin-bottom:8px;text-align:center}

  /* De verdeling: hoe de antwoorden zich over de vijf routes verdelen. Balklengte is het
     aantal punten ten opzichte van de hoogste score, zodat de langste balk altijd de uitkomst
     is. Bewust geen getallen of percentages: de punten zijn een rekenhulp en zeggen een
     bezoeker niets, en een percentage zou klinken als een zekerheid over haar lichaam. */
  .verdeling{margin:34px 0 0;padding:26px 26px 22px;background:var(--wit);
    border:1px solid var(--hair-licht);border-radius:8px}
  .verdeling .etiket{font-family:Heebo,sans-serif;font-size:10.5px;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;color:var(--oranje);margin:0 0 6px}
  .verdeling h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:26px;
    line-height:1.15;color:var(--heading);margin:0 0 4px}
  .verdeling .inleiding{font-size:14.5px;color:var(--grijs);margin:0 0 22px;max-width:46ch}
  .verdeling ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
  .verdeling li{display:grid;grid-template-columns:minmax(96px,132px) minmax(0,1fr) auto;
    gap:0 14px;align-items:center}
  .verdeling .route{font-size:15px;color:var(--ink);line-height:1.25}
  .verdeling li.hoogste .route{font-weight:600}
  .verdeling .spoor{height:14px;background:var(--diep);border-radius:2px;overflow:hidden}
  .verdeling .vulling{display:block;height:100%;background:var(--kleur);
    border-radius:0 4px 4px 0;
    transform-origin:left center;animation:groei 620ms cubic-bezier(.2,.7,.3,1) both}
  .verdeling .woord{font-family:Heebo,sans-serif;font-size:11.5px;letter-spacing:.06em;
    color:var(--zacht);white-space:nowrap;text-align:right;min-width:104px}
  .verdeling li.hoogste .woord{color:var(--bruin);font-weight:500}
  .verdeling .slot{font-size:13.5px;color:var(--zacht);margin:20px 0 0;padding-top:16px;
    border-top:1px solid var(--hair-licht);max-width:52ch}
  @keyframes groei{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){.verdeling .vulling{animation:none}}
  @media (max-width:560px){
    .verdeling{padding:20px 18px 18px}
    .verdeling li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
    .verdeling .spoor{grid-column:1 / -1;order:3}
    .verdeling .woord{min-width:0}
  }

  @media (max-width:560px){
    .blad{padding:56px 20px 80px}
    .kroon{margin:0 -20px;padding:36px 20px 40px;min-height:clamp(400px,62vh,520px)}
    .stap{padding:30px 22px 34px}
    .stap canvas.los{display:none}
    .stap .etiket,.stap h3{padding-right:0}
    .programma{padding:30px 22px 32px}
    .noot{grid-template-columns:1fr;gap:26px}
    .noot .foto{max-width:200px}
    .stap .zij{padding:20px 18px 22px}
    .uitleg{grid-template-columns:1fr;gap:18px;padding:26px 22px 26px}
    .uitleg .glyph{width:92px;height:92px;order:-1;margin:0}
    .programma canvas.los{display:none}
    .programma .etiket,.programma h3{padding-right:0}
    .pijlers{grid-template-columns:1fr 1fr}
    .herken-kop{margin-top:44px}
    .tipsblok ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
      margin:0 -20px;padding:6px 20px 16px;scrollbar-width:none}
    .tipsblok ul::-webkit-scrollbar{display:none}
    .tipsblok li{flex:0 0 78vw;max-width:320px;scroll-snap-align:start}
    .tipsblok li:first-child:nth-last-child(odd){font-size:15.5px}
    .tipsblok li:hover{transform:none}
    .cijfers{flex-wrap:wrap}
    .cijfers label{flex:1 1 18%;min-height:52px;border-bottom:1px solid var(--hair-licht)}
    .schaal label{min-width:56px}
    .staven{gap:14px}
    .staaf{width:26px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation-duration:1ms!important}
    html{scroll-behavior:auto}
  }