:root{--bg:#fff8e6;--card:#fffdf7;--ink:#1f2430;--mute:#5b6470;--line:#1f2430;--soft:#e9e2cf;--sun:#ffd84d;--sunbg:#fff3c4;
 --dad:#3b63d6;--dadbg:#e8eeff;--mom:#8e3fbf;--mombg:#f4e9fb;--kidbg:#fff3c4;--up:#0d7a54;--upbg:#e3f6ec;--dn:#b3261e;--dnbg:#fdecea;--accent:#3b63d6;
 --comic:"Comic Neue","Comic Sans MS","Chalkboard SE",system-ui,sans-serif;--disp:"Baloo 2","Chalkboard SE","Trebuchet MS",system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#151a22;--card:#1d232d;--ink:#e8ecf2;--mute:#a3adb8;--line:#8792a2;--soft:#2c3440;--sun:#e9c23a;--sunbg:#3a3320;
 --dad:#8aa4ff;--dadbg:#212b47;--mom:#d29af2;--mombg:#33233f;--kidbg:#3a3320;--up:#5fd3a2;--upbg:#173828;--dn:#ff8a80;--dnbg:#3d1e22;--accent:#8aa4ff;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#151a22;--card:#1d232d;--ink:#e8ecf2;--mute:#a3adb8;--line:#8792a2;--soft:#2c3440;--sun:#e9c23a;--sunbg:#3a3320;
 --dad:#8aa4ff;--dadbg:#212b47;--mom:#d29af2;--mombg:#33233f;--kidbg:#3a3320;--up:#5fd3a2;--upbg:#173828;--dn:#ff8a80;--dnbg:#3d1e22;--accent:#8aa4ff;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--comic);-webkit-tap-highlight-color:transparent}
main{max-width:920px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));display:grid;gap:16px}
h1,h2{font-family:var(--disp);line-height:1.15;margin:0}
h1{font-size:28px}h2{font-size:22px}
p{margin:0}
a{color:var(--accent)}
button{font:inherit;color:inherit}
.mute{color:var(--mute);font-size:15px}
.center{text-align:center}
.big{font:800 26px var(--disp)}
.eyebrow{font:800 13px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.top h1{text-align:center;font-size:24px}
.top .me{justify-self:end}
.back{font:800 18px var(--disp);text-decoration:none;color:var(--ink);padding:8px 4px;min-height:44px;display:inline-flex;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--sunbg);border:2px solid var(--sun);border-radius:999px;padding:5px 12px;font:800 17px var(--disp)}
.pill .sk{font-size:15px;margin-left:4px}
.pill.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.25)}}
.star{width:20px;height:20px;color:#e0a800}
.card{background:var(--card);border:2px solid var(--soft);border-radius:18px;padding:18px 20px;display:grid;gap:12px}
.card.fact{border-style:dashed}
.card.lesson{background:var(--sunbg);border-color:var(--sun)}
details.card summary{cursor:pointer;font:800 18px var(--disp)}
.btn{font:800 18px var(--disp);background:var(--sun);color:#1f2430;border:2.5px solid var(--line);border-radius:14px;padding:10px 20px;min-height:52px;cursor:pointer;box-shadow:3px 3px 0 var(--line);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.wide{width:100%}
.btn:active,.opts button:active,.pad button:active{transform:translate(2px,2px);box-shadow:none}
.btn:focus-visible,.opts button:focus-visible,.pad button:focus-visible,.kid:focus-visible,.tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.link{background:none;border:0;color:var(--mute);font:700 16px var(--comic);text-decoration:underline;padding:12px;cursor:pointer;justify-self:center;min-height:44px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.foot{text-align:center;color:var(--dn);font-size:14px;min-height:1em}
/* picker */
.pick{display:grid;gap:24px;justify-items:center;padding-top:6vh}
.hello{font-size:34px;text-align:center}
.kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;width:100%;max-width:640px}
.kid{background:var(--card);border:3px solid var(--line);border-radius:24px;box-shadow:5px 5px 0 var(--line);padding:20px;display:grid;justify-items:center;gap:8px;cursor:pointer;border-top:12px solid var(--c)}
.kid svg{width:130px;height:146px;color:var(--ink)}
.kid span{font:800 26px var(--disp)}
.kid small{color:var(--dn);font-size:14px}
.kid:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--line)}
/* pin */
.pinbox{display:grid;justify-items:center;gap:12px;padding-top:2vh}
.pinbox .back{justify-self:start}
.pinbox svg{width:100px;height:112px;color:var(--ink)}
.dots{display:flex;gap:16px;min-height:24px}
.dots i{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);display:block}
.dots i.on{background:var(--ink)}
.dots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.err{color:var(--dn);font-weight:700;min-height:1.4em;text-align:center}
.pad{display:grid;grid-template-columns:repeat(3,88px);gap:14px}
.pad button{height:88px;border-radius:50%;border:3px solid var(--line);background:var(--card);font:800 32px var(--disp);box-shadow:3px 3px 0 var(--line);cursor:pointer}
.pad.small{grid-template-columns:repeat(3,76px);gap:10px;justify-content:center}
.pad.small button{height:64px;border-radius:16px;font-size:28px}
/* home */
.hero{display:flex;align-items:center;gap:16px;background:var(--card);border:2px solid var(--soft);border-left:10px solid var(--c);border-radius:18px;padding:12px 18px}
.hero svg{width:96px;height:108px;flex:none;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tile{background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:4px 4px 0 var(--line);padding:20px;display:grid;gap:4px;text-decoration:none;color:var(--ink);min-height:170px;align-content:start}
.tile:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.tile .emo{font-size:46px;line-height:1}
.tile b{font:800 26px var(--disp)}
.tile .done{color:var(--up);font-weight:700}
/* quiz */
.q{display:grid;gap:10px;padding:8px 0;border-bottom:1px dashed var(--soft)}
.q:last-of-type{border-bottom:0}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts button{font:700 17px var(--comic);background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:10px 16px;min-height:52px;cursor:pointer;box-shadow:2px 2px 0 var(--line);text-align:left}
.opts button.ok{background:var(--upbg);border-color:var(--up)}
.opts button.no{background:var(--dnbg);border-color:var(--dn);text-decoration:line-through}
.why{font-size:17px}
.qbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qbar .mute{flex:1 1 220px}
/* comic strip (money, senior) */
.strip{display:grid;align-items:start;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.pan{background:var(--card);border:3px solid var(--line);border-radius:6px;box-shadow:4px 4px 0 var(--line);padding:12px;display:grid;gap:10px;min-width:0}
.pan.dad{background:var(--dadbg)}.pan.mom{background:var(--mombg)}.pan.kid{background:var(--kidbg)}
.who{display:flex;align-items:center;gap:10px;font:800 19px var(--disp)}
.dad .who{color:var(--dad)}.mom .who{color:var(--mom)}
.who svg{width:78px;height:88px;flex:none;color:var(--ink)}
.bub{position:relative;background:#fff;color:#1f2430;border:2.5px solid #1f2430;border-radius:18px;padding:12px 14px;font:600 17px/1.45 var(--comic)}
.bub:before{content:"";position:absolute;left:26px;top:-14px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:14px solid #1f2430}
.bub:after{content:"";position:absolute;left:29px;top:-9px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #fff}
.bub .kl-up{color:#0d7a54}.bub .kl-dn{color:#b3261e}
.num{position:absolute;right:-8px;top:-10px;background:var(--sun);color:#1f2430;border:2px solid #1f2430;border-radius:999px;font:800 12px/1 var(--disp);padding:4px 7px}
.up{color:var(--up)}.dn{color:var(--dn)}
.spot{font:800 32px var(--disp);color:var(--dad);font-variant-numeric:tabular-nums}
#sp{width:100%;accent-color:var(--dad);height:36px}
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.res>div{background:var(--soft);border-radius:12px;padding:10px 12px}
.v{font:800 24px var(--disp);font-variant-numeric:tabular-nums}
.zone{font-weight:700}
/* coins */
.coins{display:flex;flex-wrap:wrap;gap:10px}
.coin{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--disp);color:#3b2a00;border:3px solid #8a6a1a;background:radial-gradient(circle at 35% 30%,#fff4c2,#d9b24a 70%)}
.coin.c1,.coin.c2{width:58px;height:58px;background:radial-gradient(circle at 35% 30%,#fff,#b9bec6 70%);border-color:#7b818a;color:#222}
.coin.c10,.coin.c20{border-width:6px;border-color:#c9cdd3}
/* maths */
.prog{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.prog i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);display:block}
.prog i.cur{outline:3px solid var(--accent);outline-offset:2px}
.prog i.ok{background:var(--up);border-color:var(--up)}
.prog i.meh{background:var(--sun)}
.mq{justify-items:center;text-align:center}
.qtext{font-size:30px;max-width:640px}
.entry{display:grid;gap:10px;justify-items:center}
.ans{font:800 40px var(--disp);min-width:200px;border-bottom:4px solid var(--line);text-align:center;font-variant-numeric:tabular-nums}
.btn.go{min-width:200px}
/* reading */
.story p{font-size:20px;line-height:1.7}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.book{background:var(--card);border:2.5px solid var(--line);border-left:12px solid var(--sun);border-radius:10px;padding:14px 16px;display:grid;gap:4px;text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 var(--line)}
.book b{font:800 19px var(--disp)}
/* parent */
.days{display:flex;gap:6px;flex-wrap:wrap}
.days i{width:20px;height:20px;border-radius:5px;background:var(--soft);display:block}
.days i.on{background:var(--up)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--soft)}
td:not(:first-child),th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
code{font-size:14px;word-break:break-all}
@media (max-width:600px){h1{font-size:24px}.hello{font-size:28px}.top h1{font-size:20px}.qtext{font-size:24px}.pad{grid-template-columns:repeat(3,76px)}.pad button{height:76px}.kid svg{width:100px;height:112px}.tile{min-height:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.btn:active,.opts button:active,.pad button:active,.kid:active,.tile:active{transform:none}}
.card>.btn,.card>.row{justify-self:start}
.mq>.why .btn{margin-top:12px}
#pv{display:grid;gap:16px}
/* trading diary */
.tile .new{color:#fff;background:var(--dn);border-radius:999px;padding:2px 10px;font:800 13px var(--disp);justify-self:start}
.patches{display:flex;flex-wrap:wrap;gap:10px}
.patch{width:76px;height:76px;display:block}
.patch.big{width:150px;height:150px;margin:0 auto}
.earned{display:grid;gap:8px;justify-items:center}
.bub p{margin:0 0 6px}.bub p:last-child{margin:0}
.dlist{display:flex;flex-wrap:wrap;gap:12px}
.dlist a{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--ink);font-size:14px;padding:6px;border-radius:12px;border:2px solid transparent}
.dlist a.cur{border-color:var(--accent)}
.dlist .patch{width:56px;height:56px}
.dlist .blank{width:56px;height:56px;border-radius:50%;border:3px dashed var(--line);display:grid;place-items:center;font:800 22px var(--disp);color:var(--mute)}