/* Chess Coach · styles. Tokens, motion and parts are lifted from the board "Chess Coach · v2" (261015-5fc717),
   concept A (Training stack); the Year path (B) uses A's palette so the app stays one look. Light first. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Chess Pieces";src:url(../fonts/chess-symbols.woff2) format("woff2");unicode-range:U+2654-265F;font-display:block}

:root{
  --ui:Inter,-apple-system,system-ui,sans-serif;
  --dp:"Bricolage Grotesque",-apple-system,"SF Pro Display",system-ui,sans-serif;
  --pcs:"Chess Pieces","Noto Sans Symbols 2","Apple Symbols","Segoe UI Symbol",serif;
  --spring:cubic-bezier(.34,1.45,.64,1);--soft:cubic-bezier(.3,1.14,.5,1);--ease:cubic-bezier(.22,.8,.24,1);
  --cv:#F4F1EB;--card:#fff;--ink:#1D1B19;--ink2:#6C6861;--ink3:#A7A299;--line:rgba(29,27,25,.08);--onink:#fff;
  --pop:#FF5A2C;--popT:#FFE7DD;--g0:#ECE8E0;--g1:#FFD3C2;--g2:#FFA98A;--g3:#FF7B52;--g4:#E8501F;
  --lt:#F1ECE2;--dk:#C9BBA6;--ok:#3DB46E;--okT:#DDF1E4;--okInk:#2E9E5E;--no:#E8501F;--noT:#FFE5E0;
  --chip:#F3EFE8;
  --sh:0 1px 2px rgba(45,35,25,.07),0 3px 9px rgba(45,35,25,.05);--sh2:0 1px 2px rgba(45,35,25,.08),0 8px 22px rgba(45,35,25,.09);
  --pw:#FFFDF8;--pwo:#3a332b;--pb:#2E2924;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --cv:#171513;--card:#221F1C;--ink:#F2EEE7;--ink2:#B4AEA4;--ink3:#7E786F;--line:rgba(255,255,255,.08);--onink:#171513;
  --pop:#FF6A3D;--popT:#3B2117;--g0:#2A2622;--g1:#5C2E1D;--g2:#94401F;--g3:#D9582A;--g4:#FF7B52;
  --lt:#D8CFBF;--dk:#A08D74;--okT:#173323;--noT:#3B1D16;--chip:#2C2824;
  --sh:0 1px 2px rgba(0,0,0,.4),0 3px 9px rgba(0,0,0,.25);--sh2:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --cv:#171513;--card:#221F1C;--ink:#F2EEE7;--ink2:#B4AEA4;--ink3:#7E786F;--line:rgba(255,255,255,.08);--onink:#171513;
  --pop:#FF6A3D;--popT:#3B2117;--g0:#2A2622;--g1:#5C2E1D;--g2:#94401F;--g3:#D9582A;--g4:#FF7B52;
  --lt:#D8CFBF;--dk:#A08D74;--okT:#173323;--noT:#3B1D16;--chip:#2C2824;
  --sh:0 1px 2px rgba(0,0,0,.4),0 3px 9px rgba(0,0,0,.25);--sh2:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.35);
  color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--cv);overscroll-behavior:none}
body{color:var(--ink);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:flex}
.view{position:relative;flex:1;min-width:0;height:100%;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px calc(env(safe-area-inset-bottom,0px) + 22px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen > .wrap{display:flex;flex-direction:column;flex:1 0 auto;width:100%}
.screen.enter{animation:enter .45s var(--soft) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}

/* icons */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px;stroke-width:1.9}

/* shared bits */
.k{font:600 12px var(--ui);color:var(--ink3);letter-spacing:.02em;text-transform:uppercase}
.h{font:700 30px/1.08 var(--dp);letter-spacing:-.025em}
.h.m{font-size:22px}
.btn{height:52px;border-radius:26px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 24px;font:600 15.5px var(--ui);background:var(--ink);color:var(--onink);transition:transform .25s var(--spring),opacity .3s,background .3s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.btn.pop{background:var(--pop);color:#fff}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.sm{height:40px;padding:0 16px;font-size:14px;border-radius:20px}
.link{font:600 13.5px var(--ui);color:var(--ink2);padding:8px 4px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:14px;background:var(--card);font:600 12.5px var(--ui);box-shadow:var(--sh);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);transform:translate(-50%,20px);opacity:0;padding:10px 18px;border-radius:20px;background:var(--ink);color:var(--onink);font:600 14px var(--ui);transition:all .45s var(--spring);white-space:nowrap;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.top{top:calc(env(safe-area-inset-top,0px) + 96px);bottom:auto;transform:translate(-50%,-20px)}
.toast.top.on{transform:translate(-50%,0)}
.rise{animation:rise .7s var(--soft) both;animation-delay:calc(var(--i,0)*60ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px var(--pop),0 0 0 0 var(--popT)}50%{box-shadow:0 0 0 2px var(--pop),0 0 0 8px var(--popT)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .4s}
.grow{flex:1 1 auto;min-height:8px}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:var(--sh)}

/* top bar of a practice screen */
.bar{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.bar .back{width:40px;height:40px;margin-left:-8px;border-radius:20px;display:grid;place-items:center;color:var(--ink)}
.bar .back:active{background:var(--line)}
.bar .t{flex:1;min-width:0}
.bar .t .h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:4px;margin-left:auto;flex-wrap:nowrap}
.dots i{width:12px;height:5px;border-radius:3px;background:var(--g0);transition:background .3s}
.dots i.on{background:var(--ink)}.dots i.ok{background:var(--ok)}.dots i.no{background:var(--pop)}
.timer{height:6px;border-radius:3px;background:var(--g0);overflow:hidden;margin:12px 0 4px}
.timer i{display:block;height:100%;width:100%;background:var(--pop);transform-origin:0 50%;transform:scaleX(1)}
.timer i.run{animation:tm var(--dur,60s) linear forwards}
@keyframes tm{to{transform:scaleX(0)}}

/* the practice stack: prompt just above the board, board low under the thumb, actions just below */
.stage{display:flex;flex-direction:column;align-items:stretch}
.q{font:650 21px/1.25 var(--dp);letter-spacing:-.015em;margin:0 0 6px}
.q em{font-style:normal;background:var(--popT);padding:0 6px;border-radius:6px}
.fb{min-height:42px;font:500 14.5px/1.4 var(--ui);color:var(--ink2);margin-bottom:10px}
.fb b{color:var(--ink)}
.fb small{display:block;font:600 11px var(--ui);color:var(--ink3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.acts{display:flex;gap:10px;margin-top:14px}.acts .btn{flex:1}
.mv{display:flex;gap:10px;margin-top:14px}
.mv button{flex:1;height:56px;border-radius:18px;background:var(--card);box-shadow:var(--sh);font:700 18px var(--dp);transition:all .3s var(--spring)}
.mv button.ok{background:var(--pop);color:#fff;transform:scale(1.04)}
.mv button.no{background:var(--noT);color:#C23A22}
.mv button[disabled]{opacity:.4}

/* chessboard (percent geometry, so it fits any width) */
.bd{--bs:min(100%, calc(100dvh - var(--chrome, 340px)));position:relative;flex:none;width:var(--bs);aspect-ratio:1;margin:0 auto;border-radius:10px;overflow:hidden;user-select:none;container-type:inline-size;touch-action:manipulation}
.bd .sq{position:absolute;width:12.5%;height:12.5%}
.bd .sq.l{background:var(--lt)}.bd .sq.d{background:var(--dk)}
.bd .cl{position:absolute;font:600 2.5cqw/1 var(--ui);color:rgba(0,0,0,.34);pointer-events:none}
.bd .pc{position:absolute;width:12.5%;height:12.5%;display:grid;place-items:center;font-family:var(--pcs);font-size:10cqw;line-height:1;transition:left .42s var(--ease),top .42s var(--ease),opacity .3s,transform .3s var(--spring);pointer-events:none;z-index:2}
.bd .pc.w{color:var(--pw);text-shadow:0 0 1px var(--pwo),0 1px 0 var(--pwo),1px 0 0 var(--pwo),-1px 0 0 var(--pwo),0 -1px 0 var(--pwo),0 2px 3px rgba(0,0,0,.18)}
.bd .pc.b{color:var(--pb);text-shadow:0 2px 3px rgba(0,0,0,.15)}
.bd .pc.lift{transform:translateY(-6%) scale(1.08);z-index:3}
.bd .hl{position:absolute;width:12.5%;height:12.5%;pointer-events:none;animation:hlin .45s var(--spring) both;z-index:1}
.bd .hl.g{background:rgba(60,180,110,.42)}.bd .hl.r{background:rgba(240,70,50,.38)}.bd .hl.y{background:rgba(255,200,40,.42)}.bd .hl.a{background:color-mix(in srgb,var(--pop) 40%,transparent)}
.bd .hl.ring{background:none;box-shadow:inset 0 0 0 3px var(--pop);border-radius:6px}
.bd .hl.sel{background:color-mix(in srgb,var(--pop) 30%,transparent)}
.bd .hl.dot{background:radial-gradient(circle,rgba(29,27,25,.22) 0 16%,transparent 17%);animation:none}
.bd .hl.cap{background:radial-gradient(circle,transparent 0 62%,rgba(29,27,25,.2) 63% 74%,transparent 75%);animation:none}
.bd .hl.box{background:color-mix(in srgb,var(--pop) 11%,transparent);animation:none;transition:opacity .4s}
@keyframes hlin{from{opacity:0;transform:scale(.6)}}
.bd svg.ar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.bd svg.ar line{stroke-width:18;stroke-linecap:round;opacity:.82;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bd.tapme{cursor:pointer}

/* ===== A1 · Training stack ===== */
.top{display:flex;justify-content:space-between;align-items:flex-end;margin:6px 0 18px}
.chain{display:flex;gap:3px;margin-top:8px;justify-content:flex-end}.chain i{width:8px;height:8px;border-radius:2px;background:var(--g3)}.chain i.o{background:var(--g0)}
.prog{display:flex;gap:4px;margin-bottom:16px}.prog i{flex:1;height:6px;border-radius:3px;background:var(--g0);transition:background .4s}.prog i.on{background:var(--ink)}
.blk{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:20px;background:var(--card);box-shadow:var(--sh);margin-bottom:9px;transition:transform .4s var(--spring),opacity .4s,box-shadow .3s;text-align:left;width:100%}
.blk:active{transform:scale(.98)}
.blk .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--chip);color:var(--ink);flex:none}
.blk b{display:block;font:600 15.5px var(--ui)}.blk small{color:var(--ink3);font-size:12.5px}
.blk .st{margin-left:auto;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.8px var(--line);display:grid;place-items:center;color:var(--onink);transition:all .4s var(--spring);flex:none}
.blk .st .ic{opacity:0;transition:opacity .3s}
.blk.done{opacity:.55}.blk.done .st{background:var(--ink);box-shadow:none}.blk.done .st .ic{opacity:1}
.blk.next{box-shadow:0 0 0 2px var(--pop),var(--sh2);animation:pulse 2.2s 2}
.blk.next .st{background:var(--pop);box-shadow:none;color:#fff}
.blk.cur{box-shadow:0 0 0 2px var(--ink),var(--sh2)}
.blk.pop{transform:scale(1.04)}
.foot{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13.5px;padding:14px 4px 0}

/* bottom nav (phone): three calm tabs in one pill */
.nav{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:26px;background:var(--card);box-shadow:var(--sh2);z-index:50}
.nav button{height:42px;padding:0 16px;border-radius:21px;display:flex;align-items:center;gap:7px;font:600 13.5px var(--ui);color:var(--ink2);transition:background .3s,color .3s}
.nav button.on{background:var(--ink);color:var(--onink)}
.has-nav{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}

/* ===== A3 · Progress ===== */
.gh{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--c,10px));gap:var(--gp,3px);position:relative;justify-content:start}
.gh i{width:var(--c,10px);height:var(--c,10px);border-radius:var(--cr,3px);background:var(--g0);transition:transform .2s var(--spring);animation:cell .5s var(--soft) both;animation-delay:calc(var(--d)*4ms + 150ms);cursor:pointer}
.gh i[data-v="1"]{background:var(--g1)}.gh i[data-v="2"]{background:var(--g2)}.gh i[data-v="3"]{background:var(--g3)}.gh i[data-v="4"]{background:var(--g4)}
.gh i.fut{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.gh i.today{outline:2px solid var(--ink);outline-offset:1px}
.gh i.sel{transform:scale(1.35)}
@keyframes cell{from{opacity:0;transform:scale(.3)}}
.ghtip{font:500 12.5px var(--ui);color:var(--ink2);min-height:18px;margin-top:8px}
.ghtip b{color:var(--ink)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.stat{background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--sh)}
.stat b{font:700 26px var(--dp);letter-spacing:-.02em}.stat small{display:block;color:var(--ink3);font-size:12px}
.stat .dn{color:var(--okInk);font:600 12px var(--ui);margin-left:6px}
.op{display:flex;align-items:center;gap:12px;padding:9px 2px;font-size:14px;width:100%;text-align:left}
.op .bar2{flex:1;height:6px;border-radius:3px;background:var(--g0);overflow:hidden;max-width:120px}
.op .bar2 i{display:block;height:100%;background:var(--ink);border-radius:3px;width:0;transition:width 1s var(--ease)}
.op small{color:var(--ink3);font-size:12px;min-width:38px;text-align:right}
.op.lock{color:var(--ink3)}
.op .side{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);flex:none}.op .side.b{background:var(--ink)}
.sec{margin-top:22px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.row:last-child{border-bottom:0}
.seg{display:flex;gap:3px;padding:3px;border-radius:16px;background:var(--g0)}
.seg button{height:30px;padding:0 12px;border-radius:13px;font:600 12.5px var(--ui);color:var(--ink2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.step{display:flex;align-items:center;gap:10px;font:700 17px var(--dp)}
.step button{width:32px;height:32px;border-radius:16px;background:var(--g0);font:700 17px var(--ui)}
.credits{font:500 12px/1.6 var(--ui);color:var(--ink3);margin-top:12px}
.credits a{color:var(--ink2)}

/* ===== B · Year path (A's palette) ===== */
.path{position:relative;height:520px;margin:4px -20px 0;flex:none}
.path svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--card);box-shadow:var(--sh);display:grid;place-items:center;font:700 15px var(--dp);color:var(--ink2);transition:transform .4s var(--spring)}
.node.done{background:var(--pop);color:#fff}
.node.now{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--ink);color:var(--onink);font-size:22px;box-shadow:0 0 0 8px var(--popT),var(--sh2)}
.node.now small{display:block;font:600 10px var(--ui);opacity:.7;margin-top:-4px;text-align:center}
.node.lock{background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink3)}
.node .lbl{position:absolute;left:100%;margin-left:12px;white-space:nowrap;font:500 12.5px var(--ui);color:var(--ink2);top:50%;transform:translateY(-50%)}
.node .lbl.l{left:auto;right:100%;margin:0 12px 0 0}
.sheet{position:fixed;left:10px;right:10px;bottom:10px;border-radius:30px;background:var(--card);box-shadow:0 -6px 30px rgba(30,20,10,.14);padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateY(110%);transition:transform .6s var(--soft);z-index:70;max-width:520px;margin:0 auto}
.sheet.on{transform:none}
.scrim{position:fixed;inset:0;background:rgba(20,15,10,.18);opacity:0;pointer-events:none;transition:opacity .4s;z-index:65}
.scrim.on{opacity:1;pointer-events:auto}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.bl{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.bl button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:19px;background:var(--chip);font:600 13.5px var(--ui)}
.bl button.d{background:var(--popT);color:var(--g4)}
.bl button em{font-style:normal;color:var(--ink3);font-weight:500}
.phases{display:flex;gap:6px;margin:14px 0 14px}
.phases button{flex:1;text-align:left;padding:10px 10px 12px;border-radius:16px;background:var(--card);box-shadow:var(--sh);font:600 12px var(--ui);color:var(--ink2);transition:all .3s;min-width:0}
.phases button b{display:block;font:700 17px var(--dp);color:var(--ink)}
.phases button.on{background:var(--ink);color:var(--ink3)}.phases button.on b{color:var(--onink)}
.phases .mt{height:4px;border-radius:2px;background:var(--g0);margin-top:8px;overflow:hidden}.phases .mt i{display:block;height:100%;background:var(--pop)}
.ptext{font:500 14px/1.5 var(--ui);color:var(--ink2);min-height:64px;transition:opacity .2s}
.stones{display:flex;justify-content:space-between;margin-top:16px}
.stone{width:44px;text-align:center;font:600 10.5px/1.25 var(--ui);color:var(--ink2)}
.stone i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:6px;background:var(--card);box-shadow:var(--sh);font:700 14px var(--dp);font-style:normal;color:var(--ink)}
.stone.d i{background:var(--pop);color:#fff}.stone.n i{box-shadow:0 0 0 3px var(--pop)}.stone.l i{background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink3)}

/* ===== B2 · Coordinates ===== */
.score{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.score b{font:700 26px var(--dp)}
.big{font:800 96px/1 var(--dp);letter-spacing:-.04em;text-align:center;margin:8px 0 2px;transition:transform .3s var(--spring),color .3s}
.big.ok{color:var(--okInk);transform:scale(1.08)}.big.no{color:var(--no)}
.under{text-align:center;color:var(--ink3);font:500 13px var(--ui);margin-bottom:14px}

/* ===== F2 · cycle bar ===== */
.cyc{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.cyc .b{flex:1;height:8px;border-radius:4px;background:var(--g0);overflow:hidden}.cyc .b i{display:block;height:100%;background:var(--pop);border-radius:4px;transition:width .6s var(--ease)}
.cyc b{font:700 13px var(--dp)}

/* ===== H2 · leaves ===== */
.leaves{display:flex;gap:6px;margin:12px 0 2px}
.leaves i{width:20px;height:20px;border-radius:0 50% 0 50%;background:var(--g0);transition:all .5s var(--spring)}
.leaves i.on{background:var(--okInk);transform:rotate(-8deg) scale(1.06)}

/* ===== E2 · Game ===== */
.chk{display:flex;gap:8px;margin:0 0 12px}
.chk button{flex:1;height:46px;border-radius:16px;background:var(--card);box-shadow:var(--sh);font:600 14px var(--ui);display:flex;align-items:center;justify-content:center;gap:6px;transition:all .3s var(--spring)}
.chk button .ic{opacity:0;width:0;transition:all .3s}
.chk button.on{background:var(--ink);color:var(--onink)}.chk button.on .ic{opacity:1;width:16px}
.chk button[disabled]{opacity:.4}
.hint{font:500 13.5px/1.4 var(--ui);color:var(--ink2);min-height:40px;margin-bottom:8px}
.hint b{color:var(--ink)}
.who{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.who .n{display:flex;align-items:center;gap:10px;font:600 14px var(--ui)}
.who .av{width:32px;height:32px;border-radius:10px;background:var(--ink);color:var(--onink);display:grid;place-items:center;font-family:var(--pcs);font-size:20px}
.clk{font:700 17px var(--dp);padding:6px 12px;border-radius:12px;background:var(--card);box-shadow:var(--sh);font-variant-numeric:tabular-nums}
.clk.on{background:var(--ink);color:var(--onink)}
.who.me{margin:10px 0 0}

/* ===== G2 · counters ===== */
.mcount{display:flex;justify-content:space-between;margin:14px 0 4px;font:600 12px var(--ui);color:var(--ink3);letter-spacing:.02em}
.mcount b{display:block;font:700 22px var(--dp);color:var(--ink);letter-spacing:-.01em}

/* ===== I2 · Review ===== */
.mlist{background:var(--card);border-radius:22px;padding:8px;box-shadow:var(--sh);margin-top:12px}
.mrow{display:grid;grid-template-columns:34px 1fr 1fr 36px;align-items:center;min-height:44px;padding:0 8px;border-radius:12px;font:600 14.5px var(--ui);transition:background .3s;width:100%;text-align:left}
.mrow small{color:var(--ink3);font-weight:500}
.mrow .star{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--ink3)}
.mrow.mk{background:var(--popT)}.mrow.mk .star{color:var(--ink)}
.mrow .ev{grid-column:2/5;font:500 12.5px/1.35 var(--ui);color:var(--ink2);padding:0 0 8px}
.mrow .ev.bad{color:#C23A22}.mrow .ev.good{color:var(--okInk)}
.mrow .me{color:var(--ink)}.mrow .them{color:var(--ink3)}
.pbar{height:6px;border-radius:3px;background:var(--g0);overflow:hidden;margin:10px 0}
.pbar i{display:block;height:100%;background:var(--pop);width:0;transition:width .3s}

/* done card (end of a block) */
.donec{margin:auto 0;text-align:center;padding:30px 10px}
.donec .big2{font:800 64px/1 var(--dp);letter-spacing:-.04em}
.donec p{color:var(--ink2);font:500 15px/1.45 var(--ui);margin:12px auto 24px;max-width:300px}
.donec .tick{width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--onink);display:grid;place-items:center;margin:0 auto 18px;animation:rise .6s var(--spring) both}
.donec .tick .ic{width:30px;height:30px;stroke-width:2.4}

/* ===== desktop (≥1024 px): the stack stays on the left, the board grows on the right ===== */
.aside{display:none}
@media (min-width:1024px){
  .aside{display:block;position:relative;width:400px;flex:none;height:100%;border-right:1px solid var(--line)}
  .aside .screen{padding:34px 28px 28px}
  .view .screen{padding:34px 48px 30px}
  .view .screen > .wrap{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;flex:1 0 auto}
  .view .practice > .wrap{max-width:680px}
  .bd{--bs:min(100%, calc(100dvh - var(--chrome, 340px) - 20px), 660px)}
  .nav{display:none}
  .has-nav{padding-bottom:30px}
  .dprog{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .toast{bottom:40px}
  .toast.top{top:110px;left:calc(50% + 200px)}
}
@media (max-width:1023px){ .dprog{display:block} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.bd svg.ar line{stroke-dashoffset:0!important}}