:root{--clr-primary:#f5a623;--clr-primary-dark:#d98c0a;--clr-primary-soft:#fdebc8;--clr-correct:#27ae60;--clr-wrong:#e74c3c;--clr-surface:#fff;--clr-bg:#fdf6ee;--clr-text:#2c2c2c;--clr-text-soft:#888;--clr-border:#e0d6c8;--radius:16px;--shadow:0 4px 16px #00000014;color:var(--clr-text);background:var(--clr-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif}html[data-tekstgrootte=groot]{font-size:112.5%}html[data-tekstgrootte=extra]{font-size:125%}*,:before,:after{box-sizing:border-box}body{background:var(--clr-bg);min-height:100dvh;margin:0;overflow-x:hidden}button,input{font:inherit;color:inherit}p,h1,h2{margin:0}.scherm{max-width:560px;min-height:100dvh;padding:calc(20px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;margin:0 auto;display:flex}.scherm--start{text-align:center;justify-content:center;align-items:center;gap:12px}.app-naam{color:var(--clr-primary);margin-top:8px;font-size:2.4rem;font-weight:900}.ondertitel{color:var(--clr-text-soft);margin-bottom:24px;font-size:1.1rem}.build-info{color:var(--clr-text-soft);margin-top:24px;font-size:.8rem}.kop{font-size:1.8rem;font-weight:900}.subkop{color:var(--clr-text-soft);margin-top:-8px;font-weight:700}.laden{color:var(--clr-text-soft)}.kaart{background:var(--clr-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.melding{flex-direction:column;gap:12px;display:flex}.melding--fout{border:2px solid var(--clr-wrong);color:var(--clr-wrong);font-weight:700}.melding__detail{color:var(--clr-text-soft);font-size:.9rem;font-weight:400}.knop{border-radius:var(--radius);cursor:pointer;border:2px solid #0000;min-height:52px;padding:12px 24px;font-size:1.1rem;font-weight:900;transition:transform .1s,background-color .15s}.knop:active:not(:disabled){transform:scale(.97)}.knop:disabled{opacity:.5;cursor:default}.knop:focus-visible,.option:focus-visible,.les-kaart:focus-visible,.modus:focus-visible,.sluit:focus-visible{outline:3px solid var(--clr-primary-dark);outline-offset:2px}.knop--primair{background:var(--clr-primary);color:#fff;box-shadow:0 4px 0 var(--clr-primary-dark)}.knop--secundair{background:var(--clr-surface);border-color:var(--clr-border);color:var(--clr-text)}.knop--gevaar{background:var(--clr-wrong);color:#fff}.knop--groot{width:100%;min-height:60px;font-size:1.25rem}.scherm--start .knop--groot{max-width:320px}.knoppen-rij{flex-direction:column;gap:12px;margin-top:8px;display:flex}.lessen{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.lessen>li{flex-direction:column;gap:12px;display:flex}.les-kaart{text-align:left;cursor:pointer;border:3px solid #0000;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:72px;display:flex}.les-kaart--gekozen{border-color:var(--clr-primary);background:var(--clr-primary-soft)}.les-kaart__titel{font-size:1.15rem;font-weight:900}.les-kaart__aantal{color:var(--clr-text-soft);white-space:nowrap;font-weight:700}.modus-keuze{flex-direction:column;gap:12px;padding:0 4px 8px;display:flex}.modus-keuze__kop{font-size:1.15rem;font-weight:900}.modi{flex-direction:column;gap:8px;display:flex}.modus{text-align:left;background:var(--clr-surface);border:2px solid var(--clr-border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px;display:flex}.modus--gekozen{border-color:var(--clr-primary);box-shadow:0 0 0 2px var(--clr-primary) inset}.modus__letter{background:var(--clr-primary-soft);width:40px;height:40px;color:var(--clr-primary-dark);border-radius:50%;flex:none;place-items:center;font-size:1.2rem;font-weight:900;display:grid}.modus--gekozen .modus__letter{background:var(--clr-primary);color:#fff}.modus__tekst{flex-direction:column;display:flex}.modus__naam{font-weight:900}.modus__omschrijving{color:var(--clr-text-soft);font-size:.9rem}.oefen-kop{align-items:center;gap:12px;display:flex}.progress{flex-direction:column;flex:1;gap:6px;display:flex}.progress__label{color:var(--clr-text-soft);font-weight:900}.progress__track{background:var(--clr-border);border-radius:999px;height:12px;overflow:hidden}.progress__fill{background:var(--clr-primary);border-radius:999px;height:100%;transition:width .3s}.sluit{background:var(--clr-surface);width:48px;height:48px;box-shadow:var(--shadow);color:var(--clr-text-soft);cursor:pointer;border:none;border-radius:50%;flex:none;font-size:1.8rem;font-weight:700;line-height:1}.vraag{flex-direction:column;gap:16px;display:flex}.vraagkaart{text-align:center;flex-direction:column;justify-content:center;gap:10px;min-height:160px;padding:32px 20px;display:flex;position:relative}.vraagkaart__instructie{color:var(--clr-text-soft);font-weight:700}.vraagkaart__tekst{overflow-wrap:anywhere;font-weight:900}.vraagkaart__tekst--woord{font-size:2rem}.vraagkaart__tekst--betekenis{font-size:1.3rem;font-weight:700;line-height:1.4}.feedback{color:#fff;white-space:nowrap;border-radius:999px;padding:4px 16px;font-weight:900;animation:.25s ease-out pop;position:absolute;top:-14px;left:50%;transform:translate(-50%)}.feedback--goed{background:var(--clr-correct)}.feedback--fout{background:var(--clr-wrong)}.opties{flex-direction:column;gap:10px;display:flex}.option{border-radius:var(--radius);border:2px solid var(--clr-border);background:var(--clr-surface);width:100%;min-height:56px;box-shadow:var(--shadow);cursor:pointer;text-align:center;padding:12px 16px;transition:border-color .15s,background-color .15s,opacity .15s}.option:disabled{cursor:default}.option--woord{font-size:1.4rem;font-weight:900}.option--betekenis{text-align:left;font-size:1.1rem;font-weight:700;line-height:1.35}@media (hover:hover){.option--neutraal:hover{border-color:var(--clr-primary)}}.option--neutraal:focus-visible{border-color:var(--clr-primary)}.option--correct{background:var(--clr-correct);border-color:var(--clr-correct);color:#fff;animation:.25s ease-out pop}.option--fout{background:var(--clr-wrong);border-color:var(--clr-wrong);color:#fff;animation:.4s ease-in-out shake}.option--gedimd{opacity:.45;box-shadow:none}.typ-form{flex-direction:column;gap:12px;display:flex}.invoer{border-radius:var(--radius);border:3px solid var(--clr-border);background:var(--clr-surface);text-align:center;outline:none;width:100%;min-height:64px;padding:12px 16px;font-size:1.5rem;font-weight:900;transition:border-color .15s,background-color .15s}.invoer:focus{border-color:var(--clr-primary)}.invoer--correct,.invoer--correct:focus{border-color:var(--clr-correct);color:var(--clr-correct);background:#e8f7ee}.invoer--fout,.invoer--fout:focus{border-color:var(--clr-wrong);color:var(--clr-wrong);background:#fdecea;animation:.4s ease-in-out shake}.juist-antwoord{text-align:center;color:var(--clr-text);font-size:1.1rem}.juist-antwoord strong{color:var(--clr-correct);font-weight:900}.dialoog-achtergrond{z-index:10;background:#0006;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialoog{text-align:center;flex-direction:column;gap:10px;width:100%;max-width:360px;display:flex}.dialoog__titel{font-size:1.3rem;font-weight:900}.dialoog__tekst{color:var(--clr-text-soft)}.dialoog__knoppen{flex-direction:column;gap:10px;margin-top:8px;display:flex}.score{text-align:center;flex-direction:column;gap:4px;display:flex}.score__getal{font-size:1.3rem;font-weight:900}.score__procent{color:var(--clr-primary);font-size:3.5rem;font-weight:900;line-height:1.1}.score__tekst{margin-top:6px;font-size:1.1rem}.fouten{flex-direction:column;gap:10px;display:flex}.fouten__kop{font-size:1.15rem;font-weight:900}.fouten__lijst{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.fout-item{border-left:6px solid var(--clr-wrong);flex-direction:column;gap:4px;padding:14px 16px;display:flex}.fout-item__woord{color:var(--clr-correct);font-size:1.2rem;font-weight:900}.fout-item__gegeven{color:var(--clr-text-soft);font-size:.9rem}.scherm-kop{align-items:center;gap:12px;display:flex}.scherm-kop .kop{flex:1}.scherm--start{position:relative}.rond-knop{background:var(--clr-surface);width:48px;height:48px;box-shadow:var(--shadow);color:var(--clr-text-soft);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;font-size:1.5rem;font-weight:900;display:grid}.rond-knop:focus-visible{outline:3px solid var(--clr-primary-dark);outline-offset:2px}.rond-knop--rechtsboven{top:calc(16px + env(safe-area-inset-top));position:absolute;right:16px}.scherm-kop .rond-knop--rechtsboven{position:static}.begroeting-avatar{vertical-align:-.15em;font-size:1.4em}.kop--tikbaar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.instellingen-blok{flex-direction:column;gap:14px;display:flex}.instellingen-blok__kop{font-size:1.15rem;font-weight:900}details.instellingen-blok>summary{cursor:pointer}.instellingen-blok__tekst{color:var(--clr-text-soft)}.veld{flex-direction:column;gap:6px;display:flex}.veld__label{font-weight:700}.veld__fout{color:var(--clr-wrong);font-size:.9rem;font-weight:700}.tekstveld{border:2px solid var(--clr-border);background:var(--clr-surface);border-radius:12px;outline:none;width:100%;min-height:52px;padding:10px 14px;font-size:1.15rem;font-weight:700}.tekstveld:focus{border-color:var(--clr-primary)}.tekstveld--klein{font-size:1rem}.tekstveld--fout,.tekstveld--fout:focus{border-color:var(--clr-wrong)}.avatars{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.avatar-keuze{aspect-ratio:1;border:2px solid var(--clr-border);background:var(--clr-surface);cursor:pointer;border-radius:14px;min-height:52px;font-size:1.8rem;line-height:1}.avatar-keuze--gekozen{border-color:var(--clr-primary);background:var(--clr-primary-soft);box-shadow:0 0 0 2px var(--clr-primary) inset}.avatar-keuze:focus-visible,.segment__optie:focus-visible{outline:3px solid var(--clr-primary-dark);outline-offset:2px}.segment{background:var(--clr-bg);border:2px solid var(--clr-border);border-radius:14px;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.segment__optie{cursor:pointer;background:0 0;border:none;border-radius:10px;min-height:44px;font-weight:700}.segment__optie--gekozen{background:var(--clr-primary);color:#fff;font-weight:900}.schakelaar{cursor:pointer;align-items:center;gap:12px;min-height:48px;display:flex}.schakelaar__tekst{flex-direction:column;flex:1;display:flex}.schakelaar__label{font-weight:700}.schakelaar__omschrijving{color:var(--clr-text-soft);font-size:.9rem}.schakelaar__input{opacity:0;width:1px;height:1px;position:absolute}.schakelaar__baan{background:var(--clr-border);border-radius:999px;flex:none;width:52px;height:30px;transition:background-color .15s;position:relative}.schakelaar__baan:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.schakelaar__input:checked+.schakelaar__baan{background:var(--clr-primary)}.schakelaar__input:checked+.schakelaar__baan:after{transform:translate(22px)}.schakelaar__input:focus-visible+.schakelaar__baan{outline:3px solid var(--clr-primary-dark);outline-offset:2px}.knop--gevaar-rand{background:var(--clr-surface);border-color:var(--clr-wrong);color:var(--clr-wrong)}.status{overflow-wrap:anywhere;border-radius:12px;padding:10px 14px;font-size:.95rem}.status--ok{color:#1e8449;background:#e8f7ee}.status--fout{color:#c0392b;background:#fdecea}.status__tijd{opacity:.8;font-size:.85rem}.code{background:var(--clr-bg);white-space:pre;border-radius:12px;margin:0;padding:12px;font-size:.8rem;line-height:1.4;overflow-x:auto}.fade-in{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.03)}to{transform:scale(1)}}.feedback{animation-name:popBadge}@keyframes popBadge{0%{opacity:0;transform:translate(-50%)scale(.6)}to{opacity:1;transform:translate(-50%)scale(1)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}html.minder-beweging *,html.minder-beweging :before,html.minder-beweging :after{transition:none!important;animation:none!important}