:root{--bg:#f4f0e6;--card:#fffdf8;--ink:#17262c;--mut:#62706f;--line:#ddd6c6;--pri:#0e6b5c;--pri2:#d8ece4;--ok:#16835f;--okbg:#ddf2e8;--bad:#c23f3a;--badbg:#fbe4e1;--amb:#d48a17;--ambbg:#fbefd8}
@media (prefers-color-scheme:dark){:root{--bg:#10191c;--card:#18252a;--ink:#edf3ef;--mut:#a2b1ae;--line:#2c3b3f;--pri:#52c7ad;--pri2:#173f38;--ok:#62d3a7;--okbg:#17392d;--bad:#ff8a81;--badbg:#472320;--amb:#f0b95c;--ambbg:#46351a}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 "Source Sans 3",system-ui,sans-serif}
main{max-width:720px;margin:auto;padding:18px 16px 104px}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.12;margin:0}
h1{font-size:32px;font-weight:800;letter-spacing:-.02em}h2{font-size:23px;font-weight:700}h3{font-size:18px;font-weight:700}
p{margin:.35em 0}.mut{color:var(--mut)}.sm{font-size:14.5px}.mt{margin-top:14px}.mt2{margin-top:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:12px}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}.grow{flex:1;min-width:0}.wrap{flex-wrap:wrap}
button,input{font:inherit;color:inherit}
.btn{display:block;width:100%;border:0;border-radius:13px;padding:14px;background:var(--pri);color:var(--bg);font-weight:700;cursor:pointer;text-align:center}
.btn.ghost{background:transparent;color:var(--pri);border:1.5px solid var(--pri)}
.btn.soft{background:var(--pri2);color:var(--pri)}
.btn.small{display:inline-block;width:auto;padding:8px 13px;font-size:15px}
.btn:disabled{opacity:.45}
button:focus-visible,input:focus-visible{outline:3px solid var(--amb);outline-offset:2px}
input{width:100%;padding:13px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
label{display:block;font-weight:600;margin:12px 0 5px}
.tabs{display:flex;background:var(--pri2);border-radius:12px;padding:4px}.tabs button{flex:1;padding:9px;border:0;background:none;border-radius:9px;font-weight:700;color:var(--pri);cursor:pointer}.tabs .on{background:var(--card);color:var(--ink)}
.err{color:var(--bad);font-weight:600;min-height:1.4em;margin-top:8px}
.hero{background:var(--pri);color:var(--bg);border-radius:18px;padding:18px;margin-top:12px}
.hero p{opacity:.9}.big{font:800 42px/1 "Bricolage Grotesque",system-ui;letter-spacing:-.03em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.stat{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 8px;text-align:center}.stat b{display:block;font:800 23px "Bricolage Grotesque",system-ui}.stat span{font-size:13px;color:var(--mut)}
.cap{height:13px;border-radius:9px;background:var(--pri2);overflow:hidden;position:relative}.cap i{display:block;height:100%;background:var(--pri);border-radius:9px;transition:width .3s}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:13px;font-weight:700;background:var(--pri2);color:var(--pri);white-space:nowrap}.chip.amb{background:var(--ambbg);color:var(--amb)}.chip.bad{background:var(--badbg);color:var(--bad)}.chip.ok{background:var(--okbg);color:var(--ok)}
.task{display:flex;gap:11px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:12px 0;cursor:pointer}.task:first-of-type{border-top:0}.tick{width:25px;height:25px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:800}.task.done .tick{background:var(--ok);border-color:var(--ok);color:var(--bg)}.task.done b{text-decoration:line-through;opacity:.7}
.tema{cursor:pointer;width:100%;text-align:left;display:block}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.q{font:700 21px/1.27 "Bricolage Grotesque",system-ui;margin:14px 0}
.opt{display:flex;gap:11px;width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:13px;margin-top:9px;text-align:left;cursor:pointer}.opt .l{font-weight:800;color:var(--pri);flex:none}.opt.sel{border-color:var(--pri);background:var(--pri2)}.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.bad{border-color:var(--bad);background:var(--badbg)}.opt:disabled{cursor:default;color:inherit}
.fb{border-radius:13px;padding:13px;margin-top:12px}.fb.ok{background:var(--okbg)}.fb.bad{background:var(--badbg)}.fb.blank{background:var(--ambbg)}
.top{display:flex;align-items:center;gap:11px}.x{border:0;background:none;font-size:24px;line-height:1;cursor:pointer;padding:4px;color:var(--mut)}
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom))}.sticky>div{max-width:688px;margin:auto}
.flash{min-height:250px;display:grid;place-items:center;text-align:center;padding:24px;cursor:pointer;width:100%;font:700 23px/1.25 "Bricolage Grotesque",system-ui;background:var(--card);border:1.5px solid var(--line);border-radius:18px;margin-top:14px}.flash.back{background:var(--pri2);color:var(--ink);font-size:21px}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:13px}.grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:13px;cursor:pointer;padding:0}.grid .a{background:var(--pri2);color:var(--pri);font-weight:700}.grid .cur{outline:2px solid var(--pri)}
.rank{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}.rank:first-child{border-top:0}.rank .n{width:30px;font:800 20px "Bricolage Grotesque",system-ui;text-align:center;color:var(--mut)}.rank.me .grow b{color:var(--pri)}
ul.res{padding-left:20px;margin:.5em 0}ul.res li{margin:.35em 0}
#nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}#nav[hidden]{display:none}
#nav button{background:none;border:0;padding:9px 2px 8px;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer}#nav button.on{color:var(--pri)}#nav svg{display:block;width:23px;height:23px;margin:0 auto 2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}