@import"https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafafa;--surface:#fff;--ink:#1b1b1b;--ink-soft:#4a4a4a;--muted:#8c8c8c;--hairline:rgba(27,27,27,.1);--mint:#9cf0d4;--done:#2f9e6d;--learning:#d97706;--idle:#d0d0cc}body{align-items:flex-start;background:var(--bg);color:var(--ink);display:flex;font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;justify-content:center;min-height:100vh;padding:6rem 1.5rem;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}main{max-width:640px;text-align:left;width:100%}h1{color:var(--ink);font-family:Funnel Display,-apple-system,sans-serif;font-size:clamp(2.6rem,5.5vw,3.6rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin-bottom:.75rem}h1 .accent{display:inline-block;position:relative;z-index:0}h1 .accent:before{background:var(--mint);border-radius:2px;bottom:.05em;content:"";height:.45em;left:-.1em;position:absolute;right:-.1em;z-index:-1}h1:after{background:var(--ink);content:"";display:block;height:2px;margin-top:1.75rem;opacity:.85;width:36px}.groep{margin-top:3rem}.groep h2{align-items:center;color:var(--ink);display:flex;font-family:Funnel Display,sans-serif;font-size:1.05rem;font-weight:500;gap:.55rem;letter-spacing:-.015em;margin-bottom:.85rem}.groep h2 .material-symbols-outlined{color:var(--ink);font-size:1.15rem;opacity:.85}.uitdagingen{border-top:1px solid var(--hairline);list-style:none;text-align:left}.uitdagingen li{align-items:center;border-bottom:1px solid var(--hairline);color:var(--ink);cursor:pointer;display:flex;font-size:.98rem;font-weight:400;gap:1rem;padding:1.05rem 1rem 1.05rem 1.75rem;position:relative;transition:background .25s ease}.uitdagingen li:after{color:var(--ink);content:"→";font-family:Funnel Display,sans-serif;margin-left:auto;opacity:0;transform:translate(-6px);transition:opacity .25s ease,transform .25s ease}.uitdagingen li:hover{background:#1b1b1b08}.uitdagingen li:hover:after{opacity:.6;transform:translate(0)}.uitdagingen li .challenge{flex:1}.status-badge{border-radius:999px;display:inline-block;flex-shrink:0;height:8px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:8px}.status-badge .material-symbols-outlined{display:none}.status-yes .status-badge{background:var(--done);box-shadow:0 0 0 4px #2f9e6d1f}.status-learning .status-badge{animation:pulse 1.8s ease-in-out infinite;background:var(--learning)}.status-no .status-badge{background:transparent;border:1px solid var(--idle)}.status-no{color:var(--muted)}.status-no .challenge{color:var(--ink-soft)}@keyframes pulse{0%,to{box-shadow:0 0 #d9770666}50%{box-shadow:0 0 0 6px #d9770600}}.status-pill{align-items:center;border-radius:999px;box-shadow:0 12px 30px -10px #12121240;color:#fff;display:inline-flex;height:64px;justify-content:center;margin:.25rem 0 1.25rem;width:64px}.status-pill .material-symbols-outlined{font-size:2rem}.status-pill.status-yes{background:linear-gradient(135deg,#34d399,#10b981)}.status-pill.status-learning{background:linear-gradient(135deg,#fbbf24,#f97316)}.status-pill.status-learning .material-symbols-outlined{animation:spin 2.4s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.site-footer{color:var(--muted);font-size:.82rem;margin-top:4rem;text-align:left}.site-footer a{border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;transition:border-color .2s ease}.site-footer a:hover{border-bottom-color:var(--ink)}.modal-overlay{align-items:center;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:#1212124d;display:flex;inset:0;justify-content:center;opacity:0;padding:1.5rem;position:fixed;transition:opacity .25s ease,visibility .25s ease;visibility:hidden;z-index:1000}.modal-overlay.active{opacity:1;visibility:visible}.modal{backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);background:linear-gradient(135deg,#ffffffc7,#ffffff8c);border:1px solid hsla(0,0%,100%,.6);border-radius:22px;box-shadow:inset 0 1px #ffffffb3,0 30px 80px -20px #12121266;max-width:480px;padding:2.5rem 2.25rem 2rem;position:relative;transform:translateY(12px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);width:100%}.modal:before{background:linear-gradient(135deg,#ffffffe6,#fff0 50%,#ffffff4d);border-radius:22px;content:"";inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none;position:absolute}.modal-overlay.active .modal{transform:translateY(0) scale(1)}.modal-close{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff80;border:1px solid hsla(0,0%,100%,.6);border-radius:999px;color:var(--ink-soft);cursor:pointer;display:inline-flex;padding:.4rem;position:absolute;right:1rem;top:1rem;transition:background .2s ease,color .2s ease,transform .25s ease}.modal-close:hover{background:#ffffffd9;color:var(--ink);transform:rotate(90deg)}.modal h3{color:var(--ink);font-family:Funnel Display,sans-serif;font-size:1.65rem;font-weight:500;letter-spacing:-.025em;line-height:1.2;margin-bottom:1.25rem;padding-right:2rem}.empty-state{padding:1.5rem 0 .5rem;text-align:center}.empty-state .material-symbols-outlined{color:var(--idle);font-size:2.5rem;margin-bottom:.75rem}.empty-state p{color:var(--ink);font-family:Funnel Display,sans-serif;font-size:1.15rem;font-weight:500;margin-bottom:.4rem}.empty-state .empty-hint{color:var(--muted);font-size:.85rem}.progress-state{padding:.5rem 0 0}.score-screenshot{border:1px solid hsla(0,0%,100%,.6);border-radius:14px;box-shadow:0 12px 30px -10px #12121233;width:100%}.modal-meta{color:var(--ink-soft);font-size:.88rem;line-height:1.55;margin-top:1rem}.modal-meta strong{color:var(--muted);display:block;font-family:Source Code Pro,monospace;font-size:.72rem;font-weight:500;letter-spacing:.02em;margin-bottom:.25rem}.modal-meta a{border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;transition:border-color .2s ease;word-break:break-all}.modal-meta a:hover{border-bottom-color:var(--ink)}