:root{--paper:#fbfaf6;--card:#fff;--ink:#1f2933;--pencil:#5b6673;--rule:#e1ded4;--rule-strong:#c9c5b8;--blue:#1d5c8a;--blue-ink:#174a6f;--blue-wash:#e8f1f8;--red:#b3261e;--red-wash:#fbeceb;--green:#2e6b34;--green-wash:#e6f2e7;--amber:#6b5200;--amber-wash:#fff6dc;--focus:#f2a516;--radius:12px;--radius-sm:8px;--fast:.14s;--ease:cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:18px}body{background:var(--paper);color:var(--ink);margin:0;font-family:Lexend,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}header.top{border-bottom:2px solid var(--rule);background:var(--card);justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}header.top nav{flex-wrap:wrap;gap:.25rem;display:flex}header.top nav a{color:var(--blue);white-space:nowrap;border-radius:var(--radius-sm);transition:background-color var(--fast) var(--ease);padding:.35rem .55rem;font-weight:700;text-decoration:none}header.top nav a:hover{background:var(--blue-wash)}header.top .who{white-space:nowrap;align-items:center;gap:.6rem;display:flex}header.top .who span{color:var(--pencil)}header.top form{display:inline}@media (width<=40rem){header.top{flex-wrap:wrap;padding:.5rem .75rem}header.top .who{order:1;justify-content:space-between;width:100%}header.top nav{order:2;width:100%}}main{max-width:52rem;margin:0 auto;padding:1.25rem 1rem 4rem}h1{letter-spacing:-.01em;margin:.25rem 0 1rem;font-size:1.85rem;line-height:1.2}h2{margin:1.75rem 0 .5rem;font-size:1.2rem}p{max-width:42rem}.muted{color:var(--pencil)}.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);margin:.9rem 0;padding:1.1rem 1.15rem}.card.flat{background:0 0;border:0;padding:0}button,.btn{font:inherit;border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;min-height:2.75rem;transition:transform var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1.15rem;font-weight:700;text-decoration:none;display:inline-flex}button:hover,.btn:hover{background:var(--blue-ink);border-color:var(--blue-ink)}button:active,.btn:active{transform:scale(.97)}button.secondary,.btn.secondary{color:var(--blue);background:0 0}button.secondary:hover,.btn.secondary:hover{background:var(--blue-wash);color:var(--blue-ink)}button.small,.btn.small{min-height:2.25rem;padding:.35rem .75rem;font-size:.9rem}input,select,textarea{font:inherit;border:2px solid var(--rule-strong);width:100%;min-height:2.75rem;color:var(--ink);transition:border-color var(--fast) var(--ease);background:#fff;border-radius:10px;padding:.6rem .8rem}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);outline:none}label{margin:.75rem 0 .3rem;font-weight:700;display:block}.row{flex-wrap:wrap;gap:1rem;display:flex}.row>*{flex:12rem}.stats{grid-template-columns:repeat(auto-fit,minmax(9rem,max-content));gap:.5rem 2.5rem;display:grid}.stat .muted{font-size:.95rem}.big{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700;line-height:1.2}.tabel{width:100%;overflow-x:auto}table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.95rem}th,td{text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;padding:.55rem .6rem}th{color:var(--pencil);border-bottom:2px solid var(--rule-strong);font-weight:700}tbody tr:last-child td{border-bottom:0}.pill{color:var(--pencil);white-space:nowrap;background:#ecebe4;border-radius:999px;padding:.1rem .6rem;font-size:.85rem;font-weight:700;display:inline-block}.pill.mastered{background:var(--green-wash);color:var(--green)}.pill.practising{background:var(--blue-wash);color:var(--blue-ink)}@media (width<=40rem){table.stapel thead{display:none}table.stapel,table.stapel tbody,table.stapel tr,table.stapel td{width:100%;display:block}table.stapel tr{border-bottom:1px solid var(--rule);padding:.6rem 0}table.stapel tr:last-child{border-bottom:0}table.stapel td{border:0;justify-content:space-between;gap:1rem;padding:.15rem 0;display:flex}table.stapel td:before{content:attr(data-l);color:var(--pencil);flex:none}table.stapel td.lead{padding-bottom:.3rem;font-size:1.05rem}table.stapel td.lead:before{content:none}}.nota{align-items:center;gap:.4rem;min-width:14rem;display:flex}.nota input{flex:8rem;min-width:0;min-height:2.25rem;font-size:.9rem}.punt{color:var(--pencil);font-weight:400}@media (width<=40rem){.punt:before{content:none}}@media (width>=40.01rem){.punt:before{content:"· "}}.alert{animation:verskyn .18s var(--ease);border-left:5px solid #0000;border-radius:10px;margin:.75rem 0;padding:.85rem 1rem}.alert.ok{background:var(--green-wash);color:var(--green);border-left-color:var(--green)}.alert.bad{background:var(--red-wash);color:var(--red);border-left-color:var(--red)}.alert.hint{background:var(--amber-wash);color:var(--amber);border-left-color:#e2b02d}@keyframes verskyn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.oefen{grid-template-columns:1fr;align-items:start;gap:1rem;display:grid}@media (width>=62rem){.oefen{grid-template-columns:3fr 2fr}.oefen .card{margin:0}}.problem{text-align:center;letter-spacing:.01em;font-variant-numeric:tabular-nums;margin:1rem 0 1.25rem;font-size:clamp(2rem,8vw,2.8rem);font-weight:700}.answer-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.answer-row input{text-align:center;font-variant-numeric:tabular-nums;max-width:11rem;font-size:1.6rem}.answer-row .unit{min-width:2.5rem;font-size:1.6rem;font-weight:700}.progressbar{background:#e8e6de;border-radius:999px;height:10px;overflow:hidden}.progressbar>div{background:var(--blue);height:100%;transition:width .3s var(--ease)}details.sleutel summary{cursor:pointer;color:var(--blue-ink);font-weight:700}.reel{text-align:center;margin:.5rem 0}.reel strong{display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}