/* GENERATED by platform/build_kit21.py from production/ui21/tokens/pausito-tokens-2.1.json (+ B uit production/ui2/tokens/pausito-tokens.json). Do not edit by hand. PRJ-028 Pausito-kit 2.1.0. */
:root,.pk-scope,[data-pk-vorm="rond"]{--pk-ink:#0C0B14;--pk-night:#000000;--pk-glow:#29213F;--pk-cream:#FEEDBA;--pk-cream-s:#8C7F5E;--pk-gold:#F2CB81;--pk-gold-s:#7A4E00;--pk-teal:#4FD1C5;--pk-teal-s:#00695F;--pk-coral:#F2A08F;--pk-coral-s:#8C3A2A;--pk-mute:#A79F8C;--pk-sub:#D9CFB4;--pk-label:#B3ADC5;--pk-line:#3A3446;--pk-line-2:#51465D;--pk-line-3:#64556C;--pk-surface:#201B2C;--pk-surface-2:#272233;--pk-field:#332A40;--pk-deep:#1A1422;--pk-dialog-text:#F9F1E5;--pk-paper:#FBF3E4;--pk-paper-ink:#2A2320;--pk-paper-sub:#5E534A;--pk-paper-link:#7A4E00;--pk-on-accent:#0C0B14;--pk-backdrop:#08060ECA;--pk-s1:4px;--pk-s2:8px;--pk-s3:12px;--pk-s4:16px;--pk-s5:20px;--pk-s6:26px;--pk-s7:32px;--pk-gutter:20px;--pk-maxw:600px;--pk-maxw-wide:1280px;--pk-tap:44px;--pk-tap-big:52px;--pk-border:4px;--pk-border-s:3px;--pk-border-xs:2px;--pk-drop:6px;--pk-drop-l:8px;--pk-drop-s:4px;--pk-r1:30px 36px 28px 38px/34px 28px 36px 30px;--pk-r2:36px 28px 34px 30px/28px 36px 30px 34px;--pk-r3:32px 38px 30px 34px/36px 30px 34px 28px;--pk-r4:38px 30px 36px 32px/30px 34px 28px 36px;--pk-r-big:40px 52px 44px 56px/48px 40px 54px 42px;--pk-r-card2:54px 40px 50px 44px/42px 52px 40px 50px;--pk-r-card3:46px 56px 42px 50px/52px 44px 48px 40px;--pk-r-tile:26px 32px 24px 30px/30px 24px 32px 26px;--pk-r-chip:16px 20px 15px 21px/19px 15px 21px 16px;--pk-r-panel:22px 28px 20px 26px/26px 20px 28px 22px;--pk-r-quiet:22px;--pk-r-dialog:25px;--pk-r-field:10px;--pk-r-stage:23px;--pk-r-pill:999px;--pk-cut-btn:0px;--pk-cut-card:0px;--pk-cut-chip:0px;--pk-shadow-stage:0 18px 70px #0005;--pk-shadow-dialog:0 30px 100px #0009;--pk-t-press:90ms;--pk-t-nudge:140ms;--pk-t-pop:380ms;--pk-t-sticker:900ms;--pk-t-fade:250ms;--pk-t-breathe:3400ms;--pk-t-toast:4000ms;--pk-t-zak:170ms;--pk-t-vul:200ms;--pk-ease-pop:cubic-bezier(.3,1.6,.5,1);--pk-font-display:Fredoka,Inter,system-ui,sans-serif;--pk-font-text:Inter,'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;--pk-display-weight:600;--pk-display-spacing:0}
[data-pk-vorm="hoekig"]{--pk-ink:#000000;--pk-night:#000000;--pk-glow:#000000;--pk-cream:#FFF4E0;--pk-cream-s:#8A7F6A;--pk-gold:#FFD23F;--pk-gold-s:#8A6A00;--pk-teal:#3FC1FF;--pk-teal-s:#0B5E86;--pk-coral:#FF6B5B;--pk-coral-s:#8C2418;--pk-mute:#A39C90;--pk-sub:#E6CFC4;--pk-line:#3A3446;--pk-paper:#FBF3E4;--pk-paper-ink:#2A2320;--pk-paper-sub:#5E534A;--pk-on-accent:#000000;--pk-drop:7px;--pk-drop-l:7px;--pk-drop-s:5px;--pk-r1:0px;--pk-r2:0px;--pk-r3:0px;--pk-r4:0px;--pk-r-big:0px;--pk-r-card2:0px;--pk-r-card3:0px;--pk-r-tile:0px;--pk-r-chip:0px;--pk-r-panel:0px;--pk-r-quiet:0px;--pk-r-dialog:0px;--pk-r-field:0px;--pk-r-stage:0px;--pk-r-pill:0px;--pk-cut-btn:20px;--pk-cut-card:20px;--pk-cut-chip:10px;--pk-font-display:'Pausito Recht',Inter,'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;--pk-display-weight:800;--pk-display-spacing:-.01em}
:root,.pk-scope,[data-pk-vorm]{--pk-bg:var(--pk-ink);--pk-text:var(--pk-cream);--pk-focus:var(--pk-cream);--pk-accent:var(--pk-gold);--pk-line-games:var(--pk-gold);--pk-line-games-s:var(--pk-gold-s);--pk-line-kennis:var(--pk-teal);--pk-line-kennis-s:var(--pk-teal-s);--pk-line-doen:var(--pk-cream);--pk-line-doen-s:var(--pk-cream-s)}
[data-pk-vorm="hoekig"]{--pk-line-games:var(--pk-coral);--pk-line-games-s:var(--pk-coral-s);--pk-line-kennis:var(--pk-gold);--pk-line-kennis-s:var(--pk-gold-s);--pk-line-doen:var(--pk-teal);--pk-line-doen-s:var(--pk-teal-s)}
/* PRJ-028 Pausito-kit 2.1.0 — BASIS: lettertypen, schil, typografie, opmaak. Bron voor platform/build_kit21.py (niet de uitvoer).
   Stijl A (Onthulspel) is de standaard; variant B via data-pk-vorm="hoekig" (zie vorm-hoekig.css). Klassen zijn neutraal (pk-*):
   het Pausito-logo/woordmerk zit NIET in deze kit (merkregel: PAUSITO_LOOK_AND_FEEL_KIT.md §11).
   claude-pausitokit-1014 / claude-opus-5-5 / ontwerper / 2026-10-14. Kandidaat; niet geserveerd. */

/* Lettertypen: de bestaande, zelf gehoste woff2 van kit 1.1.0 (OFL, licentietekst ernaast). Relatief pad: werkt zowel op
   /kit/2.1.0/ui/pk.css -> /kit/1.1.0/ als in de map app/pausito/kit/. Geen CDN. Een app buiten Pausito kopieert 1.1.0/ mee. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 600;font-display:swap;src:url(../../1.1.0/fredoka-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500 600;font-display:swap;src:url(../../1.1.0/fredoka-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../../1.1.0/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../../1.1.0/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}
/* Variant B: 'Pausito Recht' = hetzelfde variabele Inter-bestand met het zware gewicht (zoals kit 2.0.3). */
@font-face{font-family:'Pausito Recht';font-style:normal;font-weight:400 900;font-display:swap;src:url(../../1.1.0/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tekstgrootte (calm.js zet --ps-text 1 / 1.15 / 1.3): de kit schaalt tekst, nooit het beeld. */
:root,.pk-scope,[data-pk-vorm]{--pk-scale:var(--ps-text,1);
  --pk-fs-xs:calc(12px*var(--pk-scale));--pk-fs-s:calc(14px*var(--pk-scale));--pk-fs-m:calc(16px*var(--pk-scale));
  --pk-fs-l:calc(20px*var(--pk-scale));--pk-fs-xl:clamp(26px,7.5vw,34px);--pk-fs-xxl:clamp(32px,9vw,44px)}
:root{color-scheme:dark}

/* Schil: <html class="pk-root"> of <body class="pk">. Donker speelvlak met een zachte gloed bovenaan. */
.pk,.pk-root{background:radial-gradient(ellipse at 50% 15%,var(--pk-glow),transparent 65%) no-repeat,var(--pk-bg);color:var(--pk-text);
  font-family:var(--pk-font-text);font-size:var(--pk-fs-m);line-height:1.5;font-synthesis:none;margin:0}
body.pk,.pk-root body{min-height:100dvh}
.pk-scope{background:radial-gradient(ellipse at 50% 15%,var(--pk-glow),transparent 65%) no-repeat,var(--pk-bg);color:var(--pk-text);font-family:var(--pk-font-text)}
.pk *,.pk *::before,.pk *::after,.pk-root *,.pk-root *::before,.pk-root *::after{box-sizing:border-box}
.pk [hidden],.pk-root [hidden]{display:none!important}
:where(.pk,.pk-root) :where(h1,h2,h3),.pk-display{font-family:var(--pk-font-display);font-weight:var(--pk-display-weight);letter-spacing:var(--pk-display-spacing);line-height:1.1;overflow-wrap:anywhere;color:var(--pk-cream)}
:where(.pk,.pk-root) h1{font-size:var(--pk-fs-xxl);margin:0 0 var(--pk-s3)}
:where(.pk,.pk-root) h2{font-size:var(--pk-fs-xl);margin:0 0 var(--pk-s3)}
:where(.pk,.pk-root) h3{font-size:calc(17px*var(--pk-scale));margin:0 0 var(--pk-s2)}
:where(.pk,.pk-root) p{margin:0 0 var(--pk-s3)}
:where(.pk,.pk-root) a{color:var(--pk-gold);text-underline-offset:.2em}
:where(.pk,.pk-root) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.pk,.pk-root) :where(button,a,input,select,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(.pk,.pk-root) :where(button:enabled,summary){cursor:pointer}
/* Focus: gestreept crème, altijd zichtbaar, nooit weggehaald. */
:where(.pk,.pk-root) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px dashed var(--pk-focus);outline-offset:5px}
.pk-num,:where(.pk,.pk-root) button{font-variant-numeric:tabular-nums}
.pk-sub{color:var(--pk-sub)} .pk-mute{color:var(--pk-mute)}
.pk-eyebrow{font-size:var(--pk-fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--pk-accent)}
.pk-wrap{width:min(100%,var(--pk-maxw));margin:auto;padding:max(12px,env(safe-area-inset-top)) var(--pk-gutter) max(10px,env(safe-area-inset-bottom))}
.pk-wrap--wide{width:min(100%,var(--pk-maxw-wide))}
.pk-stack{display:flex;flex-direction:column;gap:var(--pk-s4)}
.pk-row{display:flex;flex-wrap:wrap;gap:14px 10px;align-items:center}
.pk-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
/* Overloop (fix 14/10, gsm 390 px was 406 px breed): geen component wordt breder dan zijn container. */
:where(.pk,.pk-root,.pk-scope) :where(img,svg,video,canvas,select,input,textarea){max-width:100%}
.pk-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* PRJ-028 Pausito-kit 2.1.0 — COMPONENTEN in stijl A (Onthulspel). Bron: docs/pausito-kit.css (14/10) en app/style.css (stijl A).
   Knop, kaart, kopbalk, navigatie, eindscherm, lege/laadstaat, dialoog, velden, toast + de kleine spelstukken (chip, bolletjes,
   balk, badge, sticker, tegel, paneel, papier). Variant B staat in vorm-hoekig.css; beweging en Rustig in beweging.css.
   claude-pausitokit-1014 / claude-opus-5-5 / ontwerper / 2026-10-14. */

/* ---------- Knoppen ----------
   Outline + harde stickerschaduw in een donkere tint van dezelfde kleur; geen verloop, geen blur. Kleur via --c (rand) en --s (schaduw).
   primair = goud (één per scherm) · secundair = teal · gewoon = crème · rustig = dunne lijn zonder schaduw · link = tekst. */
.pk-btn{--c:var(--pk-cream);--s:var(--pk-cream-s);--pk-cut:var(--pk-cut-btn);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--pk-tap-big);padding:8px 18px;border:var(--pk-border) solid var(--c);border-radius:var(--pk-r1);background:transparent;
  color:var(--pk-cream);box-shadow:0 var(--pk-drop) 0 var(--s);font:var(--pk-display-weight) calc(18px*var(--pk-scale))/1.2 var(--pk-font-display);
  letter-spacing:var(--pk-display-spacing);text-decoration:none;text-align:center;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;hyphens:auto;
  transition:transform var(--pk-t-press) ease-out,box-shadow var(--pk-t-press) ease-out}
.pk-btn:hover{background-color:#FEEDBA12}
.pk-btn:active:not(:disabled){transform:translateY(calc(var(--pk-drop) - 2px));box-shadow:0 2px 0 var(--s)} /* zakt op zijn schaduw */
.pk-btn:disabled,.pk-btn[aria-disabled=true]{--c:var(--pk-line);--s:var(--pk-deep);color:var(--pk-label);cursor:default}
.pk-btn:nth-of-type(4n+2){border-radius:var(--pk-r2)} .pk-btn:nth-of-type(4n+3){border-radius:var(--pk-r3)} .pk-btn:nth-of-type(4n){border-radius:var(--pk-r4)}
.pk-btn--primary{--c:var(--pk-gold);--s:var(--pk-gold-s);min-height:72px;font-size:calc(24px*var(--pk-scale));box-shadow:0 var(--pk-drop-l) 0 var(--s)}
.pk-btn--primary:nth-of-type(n){border-radius:var(--pk-r-big)}
.pk-btn--secondary,.pk-btn--teal{--c:var(--pk-teal);--s:var(--pk-teal-s)}
.pk-btn--gold{--c:var(--pk-gold);--s:var(--pk-gold-s)}
.pk-btn--right{--c:var(--pk-teal);--s:var(--pk-teal-s);color:var(--pk-teal)}                                  /* juist */
.pk-btn--wrong{--c:var(--pk-mute);--s:var(--pk-deep);color:var(--pk-mute);text-decoration:line-through}       /* "Nog niet!" */
.pk-btn--block{display:flex;width:100%}
.pk-btn--quiet{--c:var(--pk-line-2);--s:transparent;border-width:var(--pk-border-xs);box-shadow:none;color:var(--pk-sub);min-height:var(--pk-tap);
  font:500 calc(16px*var(--pk-scale))/1.2 var(--pk-font-text);letter-spacing:0}
.pk-btn--quiet:nth-of-type(n){border-radius:var(--pk-r-quiet)}
.pk-btn--quiet:active:not(:disabled){transform:none;box-shadow:none;background-color:#FEEDBA1F}
/* Speeldriehoek voor "verder spelen": <i class="pk-play" aria-hidden="true"></i> als eerste kind (2.0-kit: ::before; nu een element,
   omdat variant B de pseudo-elementen voor het bord gebruikt). */
.pk-play{flex:none;width:0;height:0;border-left:20px solid var(--c);border-top:12px solid transparent;border-bottom:12px solid transparent}
.pk-link{display:inline-flex;align-items:center;min-height:var(--pk-tap);border:0;background:none;color:var(--pk-sub);padding:0 6px;
  font:500 calc(15px*var(--pk-scale))/1.2 var(--pk-font-text);text-decoration:underline;text-underline-offset:.2em}
/* Ronde icoonknop 44 px (terug naar alle spellen, instellingen, delen). Altijd een aria-label. */
.pk-round{width:var(--pk-tap);height:var(--pk-tap);min-width:var(--pk-tap);padding:0;border-radius:calc(var(--pk-tap)/2);border:var(--pk-border-xs) solid var(--pk-line);
  background:#0C0B14B8;color:var(--pk-cream);display:inline-grid;place-items:center;font-size:22px;line-height:1;text-decoration:none}
.pk-round svg,.pk-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kaart (keuzekaart / modus / product) ---------- */
.pk-card{--c:var(--pk-cream);--s:var(--pk-cream-s);--pk-cut:var(--pk-cut-card);position:relative;display:flex;align-items:center;gap:18px;min-height:96px;padding:14px 20px;text-align:left;
  border:var(--pk-border) solid var(--c);border-radius:var(--pk-r-big);background:transparent;color:var(--pk-cream);box-shadow:0 var(--pk-drop-l) 0 var(--s);
  text-decoration:none;width:100%;transition:transform var(--pk-t-press) ease-out,box-shadow var(--pk-t-press) ease-out}
.pk-card:nth-of-type(3n+2){border-radius:var(--pk-r-card2)} .pk-card:nth-of-type(3n){border-radius:var(--pk-r-card3)}
a.pk-card:hover,button.pk-card:hover{box-shadow:0 calc(var(--pk-drop-l) + 1px) 0 var(--s),0 0 0 3px #FEEDBA33}
a.pk-card:active,button.pk-card:active{transform:translateY(calc(var(--pk-drop-l) - 2px));box-shadow:0 2px 0 var(--s)}
.pk-card[data-lijn=games]{--c:var(--pk-line-games);--s:var(--pk-line-games-s)}
.pk-card[data-lijn=kennis]{--c:var(--pk-line-kennis);--s:var(--pk-line-kennis-s)}
.pk-card[data-lijn=doen]{--c:var(--pk-line-doen);--s:var(--pk-line-doen-s)}
.pk-card.is-last{box-shadow:0 var(--pk-drop-l) 0 var(--s),0 0 0 4px #FEEDBA40}   /* "vorige keer" */
.pk-card__icon{flex:none;width:clamp(56px,9vh,76px);height:clamp(56px,9vh,76px);border-radius:50%;border:var(--pk-border) solid var(--c);display:grid;place-items:center;color:var(--c)}
.pk-card__icon svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pk-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pk-card__title{display:block;font:var(--pk-display-weight) clamp(22px,6.5vw,30px)/1.05 var(--pk-font-display);letter-spacing:var(--pk-display-spacing);color:var(--pk-cream)}
.pk-card__sub{display:block;font-size:var(--pk-fs-m);color:var(--pk-sub)}
.pk-cards{display:flex;flex-direction:column;gap:18px}

/* ---------- Kopbalk ----------
   links terug (pk-round) of merk, midden titel/voortgang, rechts acties. Het merk is OPTIONEEL: alleen producten die via het
   Pausito-CMS publiceren zetten .pk-head__brand met het bestaande logo (/brand/); lokale/persoonlijke apps laten het weg. */
.pk-head{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0}
.pk-head__brand{display:inline-flex;align-items:center;gap:10px;font:var(--pk-display-weight) calc(20px*var(--pk-scale))/1 var(--pk-font-display);letter-spacing:var(--pk-display-spacing);color:var(--pk-cream);text-decoration:none}
.pk-head__brand img,.pk-head__brand svg{width:36px;height:36px;flex:none}
.pk-head__brand small{font:500 var(--pk-fs-s)/1 var(--pk-font-text);color:var(--pk-sub)}
.pk-head__title{flex:1;min-width:0;margin:0;font:var(--pk-display-weight) calc(19px*var(--pk-scale))/1.1 var(--pk-font-display);letter-spacing:var(--pk-display-spacing);color:var(--pk-cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-head__actions{display:flex;gap:8px;margin-left:auto}

/* ---------- Navigatie ----------
   Sprongbalk met chips (kraam-idee uit B, hier rond). Huidige = gevuld (aria-current). Kleur per lijn via data-lijn. */
.pk-nav{display:flex;flex-wrap:wrap;gap:10px 8px;max-width:100%;min-width:0;padding:10px 2px 14px;margin:0;list-style:none}
.pk-nav>li{display:flex;max-width:100%}
/* Eén rij die binnen zijn container scrolt (scroll-snap); de rand van het laatste item blijft zichtbaar door de padding. */
.pk-nav--scroll{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:2px;scrollbar-width:thin}
.pk-nav--scroll>li,.pk-nav--scroll :is(a,button){flex:none;scroll-snap-align:start}
.pk-nav a,.pk-nav button{--c:var(--pk-accent);--s:var(--pk-gold-s);flex:none;display:inline-flex;align-items:center;min-height:var(--pk-tap);padding:0 14px;
  border:var(--pk-border-s) solid var(--c);border-radius:var(--pk-r-chip);background:var(--pk-bg);color:var(--pk-cream);box-shadow:0 var(--pk-drop-s) 0 var(--s);
  font:600 calc(15px*var(--pk-scale))/1 var(--pk-font-text);white-space:nowrap;text-decoration:none}
.pk-nav [data-lijn=games]{--c:var(--pk-line-games);--s:var(--pk-line-games-s)}
.pk-nav [data-lijn=kennis]{--c:var(--pk-line-kennis);--s:var(--pk-line-kennis-s)}
.pk-nav [data-lijn=doen]{--c:var(--pk-line-doen);--s:var(--pk-line-doen-s)}
.pk-nav [aria-current=true],.pk-nav [aria-current=page]{background:var(--c);color:var(--pk-on-accent)}

/* ---------- Kleine spelstukken ---------- */
.pk-chip{max-width:100%;--c:var(--pk-teal);--s:var(--pk-teal-s);--pk-cut:var(--pk-cut-chip);position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;
  border:var(--pk-border-s) solid var(--c);border-radius:var(--pk-r-chip);box-shadow:0 var(--pk-drop-s) 0 var(--s);background:#0C0B14D0;color:var(--pk-cream);
  font:var(--pk-display-weight) calc(17px*var(--pk-scale))/1 var(--pk-font-display);white-space:nowrap}
.pk-chip--gold{--c:var(--pk-gold);--s:var(--pk-gold-s)} .pk-chip--cream{--c:var(--pk-cream);--s:var(--pk-cream-s)}
.pk-dots{display:flex;gap:8px} .pk-dots i{width:16px;height:16px;border-radius:8px;border:3px solid #5A5266;background:#0C0B14B0}
.pk-dots i.done{background:var(--pk-gold);border-color:var(--pk-gold)} .pk-dots i.now{border-color:var(--pk-cream);box-shadow:0 0 0 3px var(--pk-line)}
.pk-bar{position:relative;height:22px;padding:2px;border:3px solid var(--pk-teal);border-radius:12px 14px 11px 15px/13px 11px 14px 12px;box-shadow:0 var(--pk-drop-s) 0 var(--pk-teal-s);background:#0C0B14C0;overflow:hidden}
.pk-bar>i{display:block;height:100%;width:var(--pk-val,50%);border-radius:8px;background:var(--pk-teal)}
.pk-badge{--c:var(--pk-gold);--s:var(--pk-gold-s);--pk-cut:var(--pk-cut-chip);position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:10px 28px;
  border:var(--pk-border) solid var(--c);border-radius:var(--pk-r-big);box-shadow:0 7px 0 var(--s);transform:rotate(-2deg)}
.pk-badge b{font:var(--pk-display-weight) clamp(26px,7.5vw,34px)/1.1 var(--pk-font-display);color:var(--pk-cream)} .pk-badge span{font:500 calc(20px*var(--pk-scale))/1.2 var(--pk-font-display);color:var(--pk-gold)}
.pk-sticker{display:inline-block;padding:3px 12px;border-radius:var(--pk-r-pill);background:var(--pk-cream);color:var(--pk-on-accent);font:var(--pk-display-weight) calc(15px*var(--pk-scale))/1.2 var(--pk-font-display);transform:rotate(-4deg);white-space:nowrap}
.pk-sticker--teal{background:var(--pk-teal)} .pk-sticker--gold{background:var(--pk-gold)} .pk-sticker--mute{background:var(--pk-mute)}
.pk-hint{width:fit-content;max-width:100%;margin:0 auto 8px;padding:2px 12px;border-radius:12px;background:#0C0B14D9;color:var(--pk-sub);font-size:var(--pk-fs-s);text-align:center}
.pk-tile{position:relative;aspect-ratio:1;padding:0;border:var(--pk-border-s) solid var(--pk-cream);border-radius:var(--pk-r-tile);background:var(--pk-night);box-shadow:0 5px 0 var(--pk-cream-s);overflow:visible}
.pk-tile img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.pk-tile[aria-pressed=true],.pk-tile.is-on{border:5px solid var(--pk-gold);box-shadow:0 5px 0 var(--pk-gold-s)}
.pk-mark{position:absolute;right:-9px;top:-9px;width:28px;height:28px;border-radius:14px;border:3px solid var(--pk-ink);display:grid;place-items:center;font:700 15px/1 system-ui,sans-serif;color:var(--pk-on-accent);background:var(--pk-teal)}
.pk-mark--miss{background:var(--pk-mute)}
.pk-panel{background:#0C0B14F2;border:var(--pk-border-s) solid var(--pk-line);border-radius:var(--pk-r-panel);padding:var(--pk-s5)}
.pk-paper{background:var(--pk-paper);color:var(--pk-paper-ink);border-radius:var(--pk-r-panel);padding:24px 22px 26px;font:400 calc(17px*var(--pk-scale))/1.65 var(--pk-font-text)}
.pk-paper :where(h2,h3){color:var(--pk-paper-ink);font-family:var(--pk-font-text);font-weight:700;letter-spacing:0}
.pk-paper small,.pk-paper .pk-sub{color:var(--pk-paper-sub)}
.pk-paper a{color:var(--pk-paper-link)}  /* goud nooit als tekst op papier (META-060 §3) */
.pk-prose{max-width:68ch;line-height:1.6;color:var(--pk-sub)} .pk-prose h2{color:var(--pk-cream)} .pk-prose a{color:var(--pk-gold)}

/* ---------- Eindscherm: titel, badge, drie GELIJKE keuzes (D-174), delen als klein icoon ---------- */
.pk-end{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:12px 0 20px;container-type:inline-size;max-width:100%}
.pk-end__title{margin:0;font:var(--pk-display-weight) var(--pk-fs-xxl)/1.05 var(--pk-font-display);letter-spacing:var(--pk-display-spacing);color:var(--pk-cream)}
.pk-end__choices{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;align-items:stretch;gap:18px;width:100%;margin-top:6px}
.pk-end__choices>.pk-btn{width:100%;height:100%;min-height:64px;font-size:calc(21px*var(--pk-scale));box-shadow:0 var(--pk-drop) 0 var(--s)}
.pk-end__choices>.pk-btn:nth-child(1){--c:var(--pk-gold);--s:var(--pk-gold-s)}
.pk-end__choices>.pk-btn:nth-child(2){--c:var(--pk-teal);--s:var(--pk-teal-s)}
.pk-end__choices>.pk-btn:nth-child(3){--c:var(--pk-cream);--s:var(--pk-cream-s)}
/* Drie naast elkaar pas als elke keuze minstens ~200 px heeft (containerbreedte, niet schermbreedte); anders onder elkaar.
   grid-auto-rows:1fr + height:100% = drie even hoge knoppen, ook als één label op twee regels breekt. */
@container (min-width:640px){.pk-end__choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pk-end__share{display:flex;align-items:center;gap:10px;color:var(--pk-sub);font-size:var(--pk-fs-s)}

/* ---------- Lege toestand en laden ---------- */
/* Leeg: één warme zin + één actie. Het beeld is het pauzeteken (twee balken, CSS) — níet het logo. */
.pk-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px;text-align:center;color:var(--pk-sub)}
.pk-empty__mark{display:flex;gap:10px;height:56px;align-items:stretch}
.pk-empty__mark::before,.pk-empty__mark::after{content:"";width:16px;border-radius:8px;border:3px solid var(--pk-gold);box-shadow:0 var(--pk-drop-s) 0 var(--pk-gold-s)}
.pk-empty h2{font-size:clamp(22px,6vw,28px);margin:0}
.pk-empty p{margin:0;max-width:34ch}
/* Laden: de pauze ademt (META-060 §4); geen spinner. role="status" + verborgen tekst in de HTML. */
.pk-loading{display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:64px}
.pk-loading>i{width:14px;height:44px;border-radius:7px;background:var(--pk-gold)}
.pk-loading>span{margin-left:10px;color:var(--pk-sub);font-size:var(--pk-fs-s)}
.pk-skeleton{border-radius:var(--pk-r-tile);background:#FEEDBA12;min-height:56px}

/* ---------- Dialoog ---------- */
.pk-dialog{border:1px solid var(--pk-line-3);border-radius:var(--pk-r-dialog);background:var(--pk-surface);color:var(--pk-dialog-text);box-shadow:var(--pk-shadow-dialog);
  padding:24px 18px 20px;width:min(92vw,510px);max-width:100%;max-height:90dvh;overflow-y:auto}
.pk-dialog:not([open]):not(.is-open){display:none}
.pk-dialog::backdrop{background:var(--pk-backdrop);backdrop-filter:blur(8px)}
.pk-dialog h2{font-size:clamp(24px,6vw,29px);padding-right:36px}
.pk-dialog p{color:var(--pk-sub)}
.pk-dialog__actions{display:flex;flex-wrap:wrap;gap:16px 10px;justify-content:flex-end;margin-top:20px}
.pk-close{position:absolute;right:8px;top:5px;min-width:var(--pk-tap);min-height:var(--pk-tap);display:grid;place-items:center;font-size:25px;border:0;background:transparent;color:inherit}
/* inline-variant (demo, of een paneel dat zich als dialoog gedraagt) */
.pk-dialog.is-open{display:block;position:relative;margin:0;width:100%}

/* ---------- Invoervelden ---------- */
.pk-label{display:block;color:var(--pk-label);font-size:var(--pk-fs-s);margin:18px 0 8px}
.pk-input,.pk-field,:where(.pk,.pk-root) :where(select,textarea,input[type=text],input[type=email],input[type=search],input[type=number],input[type=password],input[type=url],input[type=tel]){
  width:100%;min-height:48px;background:var(--pk-field);border:1px solid var(--pk-line-3);border-radius:var(--pk-r-field);padding:12px;color:var(--pk-cream);font:400 var(--pk-fs-m)/1.3 var(--pk-font-text)}
:where(.pk,.pk-root) ::placeholder{color:var(--pk-sub);opacity:1}
.pk-input[aria-invalid=true]{border:2px solid var(--pk-coral)}
.pk-help{display:block;margin-top:6px;color:var(--pk-sub);font-size:var(--pk-fs-s)}
.pk-error{display:block;margin-top:6px;color:var(--pk-coral);font-size:var(--pk-fs-s)}
.pk-check{display:flex;align-items:center;gap:12px;min-height:var(--pk-tap);color:var(--pk-cream)}
.pk-check input{width:24px;height:24px;accent-color:var(--pk-gold);flex:none}

/* ---------- Toast ----------
   <div class="pk-toasts" role="status" aria-live="polite"></div> één keer per pagina; pk.js PK.toast('Bewaard.') voegt er één toe.
   Kort, warm, verdwijnt vanzelf (4 s) en is ook met de hand te sluiten. Geen toast voor fouten die een keuze vragen: gebruik een dialoog. */
.pk-toasts{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:12px;width:min(92vw,420px);max-width:calc(100% - 32px);pointer-events:none}
.pk-toast{--c:var(--pk-cream);--s:var(--pk-cream-s);pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:var(--pk-r-chip);
  background:var(--c);color:var(--pk-on-accent);box-shadow:0 var(--pk-drop-s) 0 var(--s),var(--pk-shadow-stage);font:var(--pk-display-weight) calc(17px*var(--pk-scale))/1.25 var(--pk-font-display)}
.pk-toast--ok{--c:var(--pk-teal);--s:var(--pk-teal-s)} .pk-toast--fout{--c:var(--pk-coral);--s:var(--pk-coral-s)}
.pk-toast>span{flex:1}
.pk-toast>button{min-width:var(--pk-tap);min-height:var(--pk-tap);border:0;background:transparent;color:inherit;font-size:22px;border-radius:50%}
.pk-toasts--inline{position:static;transform:none;width:auto;max-width:100%}
/* PRJ-028 Pausito-kit 2.1.0 — VARIANT B "Kermis hoekig" (D-216/D-221, kit 2.0.3) op de pk-componenten.
   Aan met data-pk-vorm="hoekig" op <html> of op een container. Kleuren komen uit de B-tokens (tokens.css, gelezen uit
   production/ui2/tokens/pausito-tokens.json); hier alleen de VORM: afgesneden hoeken, zware rechte koppen, en de stickerschaduw als
   tweede bord. Techniek letterlijk volgens production/ui2/bron/vorm-hoekig.css: drie lagen op het element zelf (achtergrond =
   schaduwbord, ::before = gekleurde rand, ::after = zwart vlak); een afgesneden hoek is een stop in een linear-gradient (clip-path
   zou de schaduw mee afknippen). Ingedrukt: het element zakt, de schaduw blijft staan, het vlak verdwijnt en het bord kleurt.
   claude-pausitokit-1014 / claude-opus-5-5 / ontwerper / 2026-10-14. */

[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge),
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge)::before,
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge)::after{
  --pk-k:calc(var(--pk-cut)*.7071);
  --pk-vl:linear-gradient(135deg,#0000 calc(var(--pk-k) - .6px),var(--pk-vul) var(--pk-k));
  --pk-vr:linear-gradient(315deg,#0000 calc(var(--pk-k) - .6px),var(--pk-vul) var(--pk-k))}
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge){
  --pk-vul:var(--s);--pk-z:var(--pk-drop);--pk-w:var(--pk-border);position:relative;isolation:isolate;border:0;border-radius:0;box-shadow:none;
  background:var(--pk-vl) left bottom/50.5% calc(100% - var(--pk-z)) no-repeat,var(--pk-vr) right bottom/50.5% calc(100% - var(--pk-z)) no-repeat;
  transition:transform var(--pk-t-zak) cubic-bezier(.3,.7,.4,1),background-position var(--pk-t-zak) cubic-bezier(.3,.7,.4,1)}
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge)::before{
  content:"";position:absolute;z-index:-2;left:0;right:0;top:0;bottom:var(--pk-z);--pk-vul:var(--c);
  background:var(--pk-vl) left top/50.5% 100% no-repeat,var(--pk-vr) right top/50.5% 100% no-repeat}
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card,.pk-chip,.pk-badge)::after{
  content:"";position:absolute;z-index:-1;left:var(--pk-w);right:var(--pk-w);top:var(--pk-w);bottom:calc(var(--pk-z) + var(--pk-w));
  --pk-vul:var(--pk-bg);--pk-k:calc((var(--pk-cut) - 2px)*.7071);
  background:var(--pk-vl) left top/50.5% 100% no-repeat,var(--pk-vr) right top/50.5% 100% no-repeat;
  transform-origin:left center;transition:transform var(--pk-t-vul) cubic-bezier(.3,.7,.4,1)}
/* Maten: rand zit nu in de lagen, dus padding = oude padding + rand (+ schaduw onderaan). */
[data-pk-vorm="hoekig"] .pk-btn:not(.pk-btn--quiet){min-height:calc(var(--pk-tap-big) + var(--pk-z));padding:12px 22px calc(12px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-btn--primary{min-height:calc(72px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-end__choices>.pk-btn{min-height:calc(64px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-card{padding:18px 24px calc(18px + var(--pk-z));min-height:calc(96px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-chip{--pk-w:var(--pk-border-s);--pk-z:var(--pk-drop-s);padding:0 15px var(--pk-z);min-height:calc(40px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-badge{padding:14px 32px calc(14px + var(--pk-z))}
[data-pk-vorm="hoekig"] .pk-btn:hover{background-color:transparent}
[data-pk-vorm="hoekig"] a.pk-card:hover,[data-pk-vorm="hoekig"] button.pk-card:hover,[data-pk-vorm="hoekig"] .pk-card.is-last{box-shadow:none;outline:3px solid #FFF4E033;outline-offset:2px}
/* Ingedrukt (:active of data-ingedrukt) en gekozen: zakken en vullen; tekst wordt zwart op de kleur. */
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card):is(:active,[data-ingedrukt]):not(:disabled){transform:translateY(var(--pk-z));background-position:left top,right top;box-shadow:none}
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card):is([data-ingedrukt],[aria-pressed=true],[data-gekozen=true])::after{transform:scaleX(0)}
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card):is([data-ingedrukt],[aria-pressed=true],[data-gekozen=true]),
[data-pk-vorm="hoekig"] :is(.pk-btn:not(.pk-btn--quiet),.pk-card):is([data-ingedrukt],[aria-pressed=true],[data-gekozen=true]) :is(.pk-card__title,.pk-card__sub,.pk-card__icon){color:var(--pk-on-accent);border-color:var(--pk-on-accent)}
/* Rechte koppen en vierkante bedieningen */
[data-pk-vorm="hoekig"] :is(.pk-round,.pk-card__icon,.pk-dots i,.pk-bar,.pk-bar>i,.pk-mark,.pk-hint,.pk-loading>i,.pk-empty__mark::before,.pk-empty__mark::after,.pk-toast>button){border-radius:0}
[data-pk-vorm="hoekig"] .pk-empty__mark::before,[data-pk-vorm="hoekig"] .pk-empty__mark::after{border-radius:0}
[data-pk-vorm="hoekig"] .pk-badge{transform:none}
[data-pk-vorm="hoekig"] .pk-sticker{transform:rotate(-2deg)}
/* Papier: afgesneden hoeken zonder schaduw, dus clip-path mag hier (zoals .wPapier in 2.0.3). */
[data-pk-vorm="hoekig"] .pk-paper{border-radius:0;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
/* PRJ-028 Pausito-kit 2.1.0 — BEWEGING: kort en eindig (ademen 1x, pop 380 ms, duw 140 ms, sticker 900 ms, indrukken 90 ms).
   Niets loopt oneindig behalve de laadindicator; geen flitsen, geen confetti; diepte via box-shadow.
   "Rustig" (calm.js zet data-calm="1" op <html>; kit 2.0.x gebruikte data-rustig="true") en prefers-reduced-motion zetten ALLE beweging
   uit; vormen en kleuren blijven. De systeeminstelling wint altijd. claude-pausitokit-1014 / claude-opus-5-5 / 2026-10-14. */
@keyframes pkBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
@keyframes pkBars{0%,100%{transform:scaleY(.72);opacity:.75}50%{transform:scaleY(1);opacity:1}}
@keyframes pkBadge{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg) translateY(-3px)}}
@keyframes pkPop{0%{transform:scale(1)}30%{transform:scale(.93,.9)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes pkNudge{0%,100%{transform:translateX(0)}33%{transform:translateX(-4px)}66%{transform:translateX(4px)}}
@keyframes pkStickerIn{0%{opacity:0;transform:rotate(-4deg) scale(.6)}20%{opacity:1;transform:rotate(-4deg) scale(1.1)}100%{opacity:1;transform:rotate(-4deg) scale(1)}}
@keyframes pkToastIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.pk-breathe{animation:pkBreathe var(--pk-t-breathe) ease-in-out 1 both}
.pk-breathe:nth-child(2){animation-delay:.4s}.pk-breathe:nth-child(3){animation-delay:.8s}
.pk-pop{animation:pkPop var(--pk-t-pop) var(--pk-ease-pop) 1}
.pk-nudge{animation:pkNudge var(--pk-t-nudge) ease-in-out 1}
.pk-sticker.is-in{animation:pkStickerIn var(--pk-t-sticker) ease-out 1 both}
.pk-badge.is-in{animation:pkBadge 3.8s ease-in-out .2s 1 both}
.pk-toast{animation:pkToastIn var(--pk-t-fade) ease-out 1 both}
.pk-loading>i{animation:pkBars 1.6s ease-in-out infinite;transform-origin:50% 100%}
.pk-loading>i+i{animation-delay:.2s}
.pk-fade-out{opacity:0;transition:opacity var(--pk-t-fade)}
:root:is([data-calm="1"],[data-calm="true"],[data-rustig="true"]) :is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *,
:root:is([data-calm="1"],[data-calm="true"],[data-rustig="true"]) :is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *::before,
:root:is([data-calm="1"],[data-calm="true"],[data-rustig="true"]) :is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *::after,
:root.pk-root:is([data-calm="1"],[data-calm="true"],[data-rustig="true"]) *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  :is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *,:is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *::before,:is(.pk,.pk-root,.pk-scope,[data-pk-vorm]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .pk-btn:active:not(:disabled){transform:none}
}
/* Kleine schermen */
@media (max-width:420px){.pk-card{gap:12px;padding:12px 14px}.pk-card__title{font-size:clamp(20px,6.5vw,26px)}.pk-btn--primary{min-height:64px;font-size:calc(22px*var(--pk-scale))}}
@media (min-width:800px){.pk-wrap{padding-top:24px}}