@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--sand:#F1E5CE;--sand-2:#EADBBE;--bar:#F4D7B2;--card:#FBF6EC;--line:#DCCBA8;--ink:#141414;--text:#3C3C3C;--muted:#6B6457;--orange:#F97316;--orange-dark:#D85E0B;--green:#2F7D5B;--red:#C2410C}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sand);color:var(--text);font:500 16px/1.5 Inter,system-ui,sans-serif;min-height:100vh;-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:var(--bar);border-bottom:1px solid var(--line)}
.home img{display:block;border-radius:10px}
.bar-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.bar-title b{font:800 1.25rem/1.1 "Baloo 2",sans-serif;color:var(--ink)}
.bar-title span{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{max-width:560px;margin:0 auto;padding:18px 16px 120px}
h1,h2{font-family:"Baloo 2",sans-serif;color:var(--ink);line-height:1.15;margin:0}
h1{font-size:1.7rem;font-weight:800}
h2{font-size:1.15rem;font-weight:800;margin:26px 0 10px}
.lead{color:var(--muted);margin:6px 0 0}
.tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 10px;color:var(--text)}
.tile:active{transform:scale(.99)}
.tile .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 1.1rem "Baloo 2",sans-serif;color:#fff;background:var(--orange)}
.tile .ic.hard{background:var(--red)}
.tile .ic.list{background:var(--ink)}
.tile .tx{flex:1;min-width:0}
.tile .tx b{display:block;color:var(--ink);font-weight:700}
.tile .tx small{color:var(--muted)}
.tile .go{color:var(--orange-dark);font-weight:800}
.ep{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 8px}
.ep input{width:22px;height:22px;accent-color:var(--orange);flex:0 0 auto}
.ep label{flex:1;min-width:0;cursor:pointer}
.ep b{display:block;color:var(--ink);font-weight:700}
.ep small{color:var(--muted)}
.ep .num{color:var(--orange);font-weight:800}
.meter{height:5px;background:var(--sand-2);border-radius:4px;margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--green)}
.ep .play{border:0;background:var(--orange);color:#fff;border-radius:10px;padding:8px 12px;font-weight:700;font-size:.85rem}
.dock{position:fixed;left:0;right:0;bottom:0;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:var(--sand);border-top:1px solid var(--line);display:flex;gap:10px;justify-content:center}
.dock .btn{max-width:528px}
.btn{flex:1;border:0;border-radius:12px;padding:14px 16px;font:800 1rem "Baloo 2",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.btn-o{background:var(--orange);color:#fff}
.btn-l{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn:disabled{opacity:.45}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:16px;color:var(--muted)}
.linkbtn{border:0;background:none;color:var(--orange-dark);font-weight:700;padding:0;text-decoration:underline}
/* practice */
.top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.top .back{border:0;background:none;font-weight:700;color:var(--ink);padding:6px 0}
.prog{flex:1;height:8px;background:var(--sand-2);border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--orange);transition:width .25s}
.count{font-weight:700;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.card{position:relative;width:100%;min-height:300px;border:0;background:#fff;border-radius:22px;box-shadow:0 1px 2px rgba(20,20,20,.06),0 12px 30px rgba(20,20,20,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 22px;text-align:center;color:var(--ink)}
.src{text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 12px 8px;line-height:1.35}
.card .w{font:800 clamp(1.9rem,8vw,2.6rem)/1.15 "Baloo 2",sans-serif;color:var(--ink);word-break:break-word}
.card .a{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line);width:80%;font:700 clamp(1.3rem,5.5vw,1.7rem)/1.25 "Baloo 2",sans-serif;color:var(--orange-dark)}
.card .hint{position:absolute;bottom:16px;left:0;right:0;font-size:.8rem;color:var(--muted)}
.card .flag{position:absolute;top:14px;right:16px;font-size:.72rem;font-weight:800;color:var(--red)}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.grade button{border:0;border-radius:14px;padding:14px 6px;font:800 1rem "Baloo 2",sans-serif;color:#fff}
.ask{text-align:center;font:700 1.05rem "Baloo 2",sans-serif;color:var(--ink);margin:18px 0 0}
.ask+.grade{margin-top:10px}
.dirsw{display:flex;width:max-content;margin:0 auto 14px;background:var(--card);border:1.5px solid var(--ink);border-radius:999px;padding:3px}
.dirsw button{border:0;background:none;border-radius:999px;padding:7px 18px;font-weight:800;font-size:.9rem;color:var(--ink)}
.dirsw button.on{background:var(--ink);color:#fff}
.g-hard{background:var(--red)}
.g-good{background:var(--ink)}
.g-easy{background:var(--green)}
.done{text-align:center;padding-top:30px}
.done .big{font:800 3rem "Baloo 2",sans-serif;color:var(--orange)}
.listname{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);font:inherit;margin:6px 0 10px;background:#fff}
.rm{border:0;background:none;color:var(--muted);font-size:1.2rem;padding:4px 8px}
.note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:16px 0 0;font-size:.9rem;color:var(--text)}
.ep.locked{opacity:.92}
.ep .lock{flex:0 0 auto;width:22px;height:22px;display:block}
.ep .lock svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ep .lbl{flex:1;min-width:0}
.ep .lbl b{display:block;color:var(--ink);font-weight:700}
.ep .lbl small{color:var(--muted)}
.ep .play.dark{background:var(--ink)}
.ep{position:relative}
.ep .free{position:absolute;top:-8px;right:12px;background:var(--green);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:999px}
.msg{color:var(--red);font-weight:700;margin-top:12px}
.inlink{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.inlink:hover{color:var(--orange-dark)}
.codebox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:16px 0 0}
.cb-t{margin:0 0 10px;color:var(--text);font-size:.95rem}
.cb-t b{color:var(--ink)}
.cb-row{display:flex;gap:8px}
.cb-row input{flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1.5px solid var(--line);font:700 1rem Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;background:var(--card);color:var(--ink)}
.cb-row input::placeholder{color:#B9AD96;font-weight:600}
.cb-row input:focus{outline:none;border-color:var(--orange)}
.cb-row button{border:0;border-radius:12px;padding:0 20px;background:var(--orange);color:#fff;font:800 1rem "Baloo 2",sans-serif}
.cb-row button:disabled{opacity:.6}
.cb-s{margin:10px 0 0;font-size:.8rem;color:var(--muted)}
.codebox .msg{margin:8px 0 0;font-size:.85rem}
.panel{background:#EFDCBD;border-radius:24px;margin:30px -10px 6px;padding:2px 14px 10px}
.panel>h2:first-child{margin-top:20px}
.panel .tile,.panel .ep{background:var(--card)}
.cardwrap{position:relative}
.say{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:grid;place-items:center;padding:0}
.say svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.say.on{background:var(--orange);border-color:var(--orange)}.say.on svg{stroke:#fff}
/* inloggen met Patreon */
.pbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;font:800 1.05rem/1 "Baloo 2",sans-serif;padding:14px 18px;border-radius:12px;margin:4px 0 0}
.pbtn svg{width:18px;height:18px;fill:#fff;flex-shrink:0}
.pbtn-o{background:var(--orange)}
.cb-alt{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
.cb-alt summary{cursor:pointer;color:var(--ink);font-weight:600;width:max-content;margin-bottom:8px}
/* ingebed in het tabblad op een afleveringspagina */
.embed body{min-height:0;background:transparent}
.embed .bar,.embed .top .back,.embed .btn[data-go="#/"]{display:none!important}
.embed #app{padding-top:4px}