/* Layout: friendly coach-led app. Sticky top bar (streak, XP, timer, settings), one scrolling column
   capped at 560px, five-tab bottom bar. Rounded, chunky, colourful; no terminal look. */
:root{
  --bg:#F3F6FC; --surface:#FFFFFF; --soft:#E9EFFB; --ink:#1E2A47; --ink2:#586583; --line:#DCE4F3;
  --blue:#3F5EF0; --blue-d:#2B45C4; --on-blue:#FFFFFF;
  --green:#1FB36B; --green-d:#138A50; --green-ink:#0E7443; --on-green:#FFFFFF;
  --orange:#FF8A26; --gold:#FFC533; --coral:#FF5C7A; --coral-ink:#C7233F; --violet:#7A5AF8; --amber-ink:#9A5B00;
  --mascot:var(--blue); --mascot-d:var(--blue-d);
  --f-display:"Fredoka",ui-rounded,"Nunito",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1626; --surface:#18213A; --soft:#212C4A; --ink:#EDF1FF; --ink2:#A2AECB; --line:#2A3658;
    --blue:#7C93FF; --blue-d:#5A70E6; --on-blue:#0B1230;
    --green:#3DDC97; --green-d:#22B877; --green-ink:#5BE6A9; --on-green:#06301E;
    --orange:#FFA24D; --gold:#FFD45E; --coral:#FF8AA0; --coral-ink:#FF9BAE; --violet:#A28BFF; --amber-ink:#FFC766;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1626; --surface:#18213A; --soft:#212C4A; --ink:#EDF1FF; --ink2:#A2AECB; --line:#2A3658;
  --blue:#7C93FF; --blue-d:#5A70E6; --on-blue:#0B1230;
  --green:#3DDC97; --green-d:#22B877; --green-ink:#5BE6A9; --on-green:#06301E;
  --orange:#FFA24D; --gold:#FFD45E; --coral:#FF8AA0; --coral-ink:#FF9BAE; --violet:#A28BFF; --amber-ink:#FFC766;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;margin:0;min-height:100%;
  padding-top:env(safe-area-inset-top,0px)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:10px}
h1,h2,h3{font-family:var(--f-display);margin:0;font-weight:600;text-wrap:balance}
h1{font-size:30px;line-height:1.1}
h2{font-size:22px;line-height:1.15}
h3{font-size:17px;line-height:1.25}
p{margin:0}
.sub{color:var(--ink2);font-size:14.5px}
.small{font-size:13px;color:var(--ink2)}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.app{max-width:560px;margin:0 auto;padding-inline:16px;padding-block:16px calc(110px + env(safe-area-inset-bottom,0px))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* top bar */
.bar-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.top-in{max-width:560px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:21px;min-width:0}
.brand svg{width:34px;height:34px;flex:none}
.chips{display:flex;align-items:center;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:600;font-size:16px;padding:5px 10px 5px 8px;border-radius:999px;background:var(--surface);border:2px solid var(--line);font-variant-numeric:tabular-nums;min-height:36px}
.chip svg{width:19px;height:19px}
button.chip{cursor:pointer}
.chip.timer{border-color:var(--green);color:var(--green-ink)}
.icon-btn{width:40px;height:40px;border-radius:12px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0;position:relative}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .sdot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);background:var(--green)}
.sdot.saving{background:var(--gold)}.sdot.offline,.sdot.error{background:var(--coral)}
.flame{color:var(--orange)}.bolt{color:var(--violet)}

/* cards, buttons, bars */
.card{background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:16px;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:12px 20px;min-height:52px;font-family:var(--f-display);font-weight:600;font-size:18px;background:var(--blue);color:var(--on-blue);box-shadow:0 5px 0 var(--blue-d);text-decoration:none;transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--blue-d)}
.btn:disabled{opacity:.6;cursor:default}
.btn.alt{background:var(--surface);color:var(--blue);border:2px solid var(--line);box-shadow:0 5px 0 var(--line)}
.btn.alt:active{box-shadow:0 1px 0 var(--line)}
.btn.green{background:var(--green);color:var(--on-green);box-shadow:0 5px 0 var(--green-d)}
.btn.block{width:100%}
.btn.sm{min-height:44px;font-size:16px;padding:8px 16px}
.mini{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--blue);font-family:var(--f-display);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 3px 0 var(--line);white-space:nowrap}
.mini:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.link{background:none;border:0;padding:8px 0;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:40px;text-align:left}
.bar{height:14px;background:var(--soft);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green);border-radius:999px;position:relative}
.bar>i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:3px;border-radius:2px;background:rgb(255 255 255 / .38)}
.bar.blue>i{background:var(--blue)}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;padding:5px 11px;border-radius:999px;background:var(--soft);color:var(--ink)}
.pill.ok{background:color-mix(in srgb,var(--green) 18%,var(--surface));color:var(--green-ink)}
.pill.warn{background:color-mix(in srgb,var(--gold) 28%,var(--surface));color:var(--amber-ink)}
.pill.bad{background:color-mix(in srgb,var(--coral) 18%,var(--surface));color:var(--coral-ink)}
.note{padding:12px 14px;border-radius:16px;font-size:15px}
.note.warn{background:color-mix(in srgb,var(--gold) 22%,var(--surface))}
.note.bad{background:color-mix(in srgb,var(--coral) 16%,var(--surface))}
.note.ok{background:color-mix(in srgb,var(--green) 14%,var(--surface))}
.note b{font-family:var(--f-display);font-weight:600}
@media (prefers-reduced-motion: reduce){.btn,.mini{transition:none}}

/* forms */
label.f{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:14px}
.input{width:100%;min-height:52px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);font-size:17px;font-weight:600}
.input:focus{border-color:var(--blue);outline:0}
textarea.input{min-height:96px;resize:vertical;font-weight:500;font-size:15.5px;line-height:1.45}
.check{display:flex;align-items:center;gap:10px;font-weight:700;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--blue)}
.err{color:var(--coral-ink);font-weight:700;font-size:14.5px;min-height:1em}

/* login */
.auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-card{width:100%;max-width:400px}
.auth-hero{text-align:center;margin-bottom:18px}
.auth-hero svg{width:120px;height:120px}
.auth-hero h1{font-size:34px;margin-top:4px}
.auth-hero p{color:var(--ink2);margin-top:6px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--soft);padding:6px;border-radius:18px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg button{border:0;background:transparent;border-radius:13px;min-height:46px;font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line)}

/* coach */
.coach{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center}
.mchar svg{width:84px;height:84px;display:block}
.bubble{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px 14px}
.bubble::before{content:"";position:absolute;left:-9px;top:26px;width:14px;height:14px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}
.bubble .hi{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--ink2);margin-bottom:2px}
.bubble .msg{font-weight:700;font-size:16.5px;line-height:1.35}
.cta2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}

/* goal */
.goal{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center}
.ring{position:relative;width:112px;height:112px}
.ring svg{width:112px;height:112px;transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.ring .mid b{font-family:var(--f-display);font-weight:600;font-size:30px;font-variant-numeric:tabular-nums}
.ring .mid span{font-size:12.5px;color:var(--ink2);margin-top:3px;font-weight:700}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.seg3 button{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 2px;min-height:48px;line-height:1.15;box-shadow:0 3px 0 var(--line)}
.seg3 button b{display:block;font-family:var(--f-display);font-weight:600;font-size:15px}
.seg3 button span{font-size:12px;color:var(--ink2);font-weight:700}
.seg3 button[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 3px 0 var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--surface))}
.wdots{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.wd{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--ink2)}
.wd i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--ink2)}
.wd i svg{width:20px;height:20px}
.wd.on i{background:var(--orange);color:#fff}
.wd.today i{outline:3px solid var(--blue);outline-offset:2px}
.wd.fut{opacity:.55}

/* tasks */
.tasks{display:flex;flex-direction:column}
.task{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-top:2px solid var(--line)}
.task:first-child{border-top:0;padding-top:4px}
.task:last-child{padding-bottom:2px}
.chk{width:48px;height:48px;margin:-9px 0 -9px -9px;background:none;border:0;padding:0;display:grid;place-items:center}
.box{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);background:var(--surface);display:grid;place-items:center;color:transparent;transition:transform .12s}
.chk:active .box{transform:scale(.88)}
.chk[aria-checked="true"] .box{background:var(--green);border-color:var(--green);color:var(--on-green)}
.tmain{min-width:0}
.trow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:5px}
.t-read{--tc:var(--blue)}.t-watch{--tc:var(--orange)}.t-lab{--tc:var(--green)}.t-quiz{--tc:var(--violet)}.t-extra{--tc:var(--coral)}
.tag{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;line-height:1;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--tc,var(--ink2)) 16%,var(--surface));color:var(--ink)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc,var(--ink2))}
.tag.late{--tc:var(--coral)}
.wkchip{font-weight:800;font-size:12px;color:var(--ink2)}
.chip2{font-weight:800;font-size:11px;padding:4px 8px;border-radius:999px;background:var(--soft);color:var(--ink2)}
.ttl{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.25}
.tdesc{font-size:15px;margin-top:2px;overflow-wrap:anywhere}
.tmeta{font-size:13px;font-weight:700;color:var(--ink2);margin-top:5px}
.task.done .tmain{opacity:.7}
@media (prefers-reduced-motion: reduce){.box{transition:none}}

/* road */
.track{position:relative;height:16px;background:var(--soft);border-radius:999px;margin:44px 8px 40px}
.track .fill{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:999px}
.track .me{position:absolute;top:-38px;width:34px;height:34px;margin-left:-17px}
.track .me svg{width:34px;height:34px;display:block}
.track .flag{position:absolute;top:22px;transform:translateX(-50%);font-size:11.5px;font-weight:800;color:var(--ink2);white-space:nowrap}
.track .flag::before{content:"";display:block;width:3px;height:10px;background:var(--line);margin:-16px auto 6px;border-radius:2px}
.track .flag.end{transform:translateX(-88%)}
.track .flag.end::before{margin-left:auto;margin-right:4px}
.track .now{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1px;background:var(--ink);border-radius:2px;opacity:.5}

/* fact cards */
.fact{background:color-mix(in srgb,var(--gold) 20%,var(--surface));border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.career{background:color-mix(in srgb,var(--violet) 12%,var(--surface));border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}
.kicker{font-family:var(--f-display);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
.bignum{font-family:var(--f-display);font-weight:700;font-size:42px;line-height:1;margin:4px 0 6px}
.sourceln{font-size:13px;margin-top:6px}

/* plan timeline */
.wkrow{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px}
.rail{position:relative;display:flex;justify-content:center}
.rail::after{content:"";position:absolute;top:60px;bottom:-16px;left:50%;margin-left:-2px;width:4px;border-radius:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 8px,transparent 8px 16px)}
.wkrow:last-child .rail::after{display:none}
.node{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:18px;background:var(--soft);color:var(--ink2);border:3px solid var(--line);position:relative;z-index:1;margin-top:8px}
.node svg{width:22px;height:22px}
.node.done{background:var(--green);border-color:var(--green);color:var(--on-green)}
.node.cur{background:var(--blue);border-color:var(--blue);color:var(--on-blue);box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 22%,transparent)}
.node.late{background:color-mix(in srgb,var(--coral) 22%,var(--surface));border-color:var(--coral);color:var(--ink)}
.wk{background:var(--surface);border:2px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:16px;min-width:0}
.wk.cur{border-color:var(--blue)}
.wk>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;gap:10px;align-items:center;padding:14px 16px;cursor:pointer;min-height:64px}
.wk>summary::-webkit-details-marker{display:none}
.wk>summary::after{content:"";width:9px;height:9px;border-right:3px solid var(--ink2);border-bottom:3px solid var(--ink2);transform:rotate(-45deg);transition:transform .15s}
.wk[open]>summary::after{transform:rotate(45deg)}
.wk .when{font-size:12.5px;font-weight:800;color:var(--ink2)}
.wk .cnt{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink2)}
.wk-in{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.funfact{padding:11px 13px;border-radius:14px;background:color-mix(in srgb,var(--gold) 20%,var(--surface));font-size:14.5px}
.funfact b{font-family:var(--f-display);font-weight:600}
@media (prefers-reduced-motion: reduce){.wk>summary::after{transition:none}}

/* books */
.switchrow{display:flex;justify-content:space-between;align-items:center;gap:14px}
.sw{width:56px;height:34px;border-radius:17px;background:var(--soft);border:2px solid var(--line);position:relative;padding:0;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink2);transition:transform .15s,background .15s}
.sw[aria-checked="true"]{background:var(--green);border-color:var(--green)}
.sw[aria-checked="true"]::after{transform:translateX(22px);background:var(--on-green)}
.part-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.chno{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--ink2)}
@media (prefers-reduced-motion: reduce){.sw::after{transition:none}}

/* practise */
.win{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;background:color-mix(in srgb,var(--blue) 10%,var(--surface));border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.win .mchar svg{width:72px;height:72px}
.dgrid{display:grid;gap:12px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;width:100%;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px 16px;min-height:66px;box-shadow:0 4px 0 var(--line)}
.drow:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.drow b{display:block;font-family:var(--f-display);font-weight:600;font-size:18px}
.drow .s{display:block;font-size:14px;color:var(--ink2)}
.drow .best{font-size:13px;font-weight:800;color:var(--ink2);text-align:right}
.decks{display:flex;gap:8px;flex-wrap:wrap}
.dchip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13.5px;min-height:38px}
.dchip[aria-pressed="true"]{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--ink)}
.qbig{font-family:var(--f-display);font-weight:600;font-size:34px;line-height:1.1;margin:8px 0;overflow-wrap:anywhere}
.qtext{font-family:var(--f-display);font-weight:500;font-size:21px;line-height:1.25;margin:0 0 16px;text-wrap:balance}
.field{width:100%;font-family:var(--f-display);font-weight:600;font-size:24px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:var(--bg);min-height:60px}
.field:focus{border-color:var(--blue);outline:0}
.opts{display:grid;gap:10px}
.opt{text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:14px 16px;font-weight:700;font-size:16.5px;min-height:56px;box-shadow:0 4px 0 var(--line)}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,var(--surface));box-shadow:0 4px 0 var(--green)}
.opt.wrong{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 16%,var(--surface));box-shadow:0 4px 0 var(--coral)}
.fb{border-radius:18px;padding:14px 16px;margin-top:16px}
.fb.ok{background:color-mix(in srgb,var(--green) 16%,var(--surface))}
.fb.no{background:color-mix(in srgb,var(--coral) 16%,var(--surface))}
.fb h3.ok{color:var(--green-ink)}.fb h3.no{color:var(--coral-ink)}
.fb .ans{font-family:var(--f-display);font-weight:600;font-size:20px;margin:4px 0;overflow-wrap:anywhere}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.score{font-family:var(--f-display);font-weight:700;font-size:72px;line-height:1}
.flash{min-height:230px;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:24px 18px;border-radius:22px;border:2px solid var(--line);background:var(--surface);box-shadow:0 6px 0 var(--line);width:100%}
.flash .deck{font-weight:800;font-size:12.5px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.flash .front{font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1.25;text-wrap:balance}
.flash .back{font-size:18px;font-weight:700;color:var(--green-ink);border-top:2px dashed var(--line);padding-top:12px;overflow-wrap:anywhere}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.grades .btn{font-size:16px;padding:8px 6px;flex-direction:column;gap:0;line-height:1.1}
.grades .btn span{font-family:var(--f-body);font-size:12px;font-weight:700;opacity:.85}
.btn.again{background:var(--coral);color:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--coral) 70%,#000)}
.boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:70px}
.boxes div{background:var(--blue);border-radius:6px 6px 0 0;min-height:4px}
.boxes div.z{background:var(--soft)}
.boxlab{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;font-size:11px;font-weight:800;color:var(--ink2);text-align:center;margin-top:4px}

/* exam */
.hero-exam{background:linear-gradient(160deg,color-mix(in srgb,var(--blue) 16%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.countdown{display:flex;align-items:flex-end;gap:10px;margin:6px 0}
.countdown b{font-family:var(--f-display);font-weight:700;font-size:64px;line-height:.9}
.countdown span{font-weight:800;color:var(--ink2);padding-bottom:6px}
.tl{display:flex;flex-direction:column}
.tl .step{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:start;position:relative;padding-bottom:16px}
.tl .step:last-child{padding-bottom:0}
.tl .step::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:4px;background:var(--line);border-radius:2px}
.tl .step:last-child::before{display:none}
.tl .dotx{width:18px;height:18px;border-radius:50%;background:var(--soft);border:3px solid var(--line);margin-top:3px;position:relative;z-index:1}
.tl .past .dotx{background:var(--green);border-color:var(--green)}
.tl .key .dotx{background:var(--blue);border-color:var(--blue)}
.tl .dead .dotx{background:var(--coral);border-color:var(--coral)}
.tl b{font-family:var(--f-display);font-weight:600;font-size:16.5px;display:block}
.tl .date{font-weight:800;font-size:13.5px;color:var(--ink2);white-space:nowrap;padding-top:2px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form2 .full{grid-column:1/-1}
.pxlist{display:flex;flex-direction:column}
.pxrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:2px solid var(--line)}
.pxrow:first-child{border-top:0}
.pxrow .sc{font-family:var(--f-display);font-weight:700;font-size:20px}
.xbtn{background:none;border:0;color:var(--ink2);width:40px;height:40px;border-radius:10px;font-size:20px}
.linkgrid{display:grid;gap:10px}
.linkcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;border:2px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--line)}
.linkcard b{font-family:var(--f-display);font-weight:600;display:block}
.linkcard span{font-size:13.5px;color:var(--ink2)}
.linkcard i{font-style:normal;color:var(--blue);font-weight:800}

/* progress */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink2);font-weight:700}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;margin-top:12px}
.prow:first-child{margin-top:0}
.prow .bar{grid-column:1/-1}
.prow b{font-weight:800;font-size:15px}
.prow span{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--ink2)}
.chart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;align-items:end;height:120px;border-bottom:2px solid var(--line)}
.chart .col{display:flex;align-items:flex-end;height:100%}
.chart .col i{display:block;width:100%;background:var(--blue);border-radius:6px 6px 0 0;min-height:3px}
.chart .col i.z{background:var(--soft)}
.chart .col.today i{background:var(--green)}
.xlab{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px;margin-top:5px;font-size:11px;font-weight:800;color:var(--ink2);text-align:center}
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.badge{border:2px solid var(--line);border-radius:18px;padding:12px 8px;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.badge .medal{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#5A3B00}
.badge .medal svg{width:24px;height:24px}
.badge.locked{opacity:.55}
.badge.locked .medal{background:var(--soft);color:var(--ink2)}
.badge b{font-family:var(--f-display);font-weight:600;font-size:14px;line-height:1.2}
.badge span{font-size:12px;color:var(--ink2)}
.ladder{display:flex;flex-direction:column}
.lstep{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;position:relative;padding-bottom:16px}
.lstep:last-child{padding-bottom:0}
.lstep::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:3px;background:var(--line);border-radius:2px}
.lstep:last-child::before{display:none}
.lstep i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-family:var(--f-display);font-weight:700;font-style:normal;color:var(--ink2)}
.lstep.first i{background:var(--green);color:var(--on-green)}
.lstep b{font-family:var(--f-display);font-weight:600;font-size:17px;display:block}
.lstep span{font-size:14.5px;color:var(--ink2)}
.danger{background:transparent;border:2px solid var(--coral);color:var(--coral-ink);border-radius:14px;padding:11px 16px;font-weight:800;min-height:48px}

/* tabs, toast, sheets, confetti */
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:2px solid var(--line);z-index:6;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;min-height:54px;color:var(--ink2);font-family:var(--f-display);font-weight:600;font-size:12.5px;border-radius:14px}
.tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current="page"]{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:rgb(10 16 35 / .6);display:grid;place-items:center;padding:20px;z-index:30;overflow-y:auto}
.sheet{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:22px 20px 20px;max-width:420px;width:100%;animation:pop .28s cubic-bezier(.2,.9,.3,1.2)}
.sheet.center{text-align:center}
.sheet .mchar{display:flex;justify-content:center}
.sheet .mchar svg{width:112px;height:112px}
.sheet h2{margin:6px 0 8px;font-size:26px}
.xpgain{display:inline-block;margin-top:12px;font-family:var(--f-display);font-weight:700;font-size:20px;padding:6px 16px;border-radius:999px;background:color-mix(in srgb,var(--violet) 18%,var(--surface))}
.factbox{margin:14px 0 4px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--gold) 22%,var(--surface));text-align:left;font-size:15px}
.factbox b{font-family:var(--f-display);font-weight:600}
.drawer{position:fixed;inset:0;z-index:25;background:rgb(10 16 35 / .5);display:flex;justify-content:center;align-items:flex-end}
.drawer-in{background:var(--bg);width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;border-radius:26px 26px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));animation:up .25s ease-out}
.drawer-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.timer-face{font-family:var(--f-display);font-weight:700;font-size:72px;line-height:1;text-align:center;font-variant-numeric:tabular-nums;margin:10px 0}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#fx span{position:absolute;width:9px;height:14px;border-radius:3px;animation:conf 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes conf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),calc(var(--dy) + 140px)) rotate(var(--rot));opacity:0}}
.splash{min-height:100vh;display:grid;place-items:center}
.splash svg{width:96px;height:96px;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.toast,.sheet,.drawer-in,.splash svg{transition:none;animation:none}}
.form2>*{min-width:0}
.input{min-width:0;max-width:100%}
input[type=date].input,input[type=time].input{display:block;width:100%;font-size:15.5px;padding:12px 8px 12px 12px}
.seg3 button{min-width:0;padding:6px 0}
@media (max-width:440px){.chip.hide-narrow{display:none}}
@media (max-width:400px){.brand span{display:none}.seg3 button b{font-size:14px}.seg3 button span{font-size:11px}}
@media (max-width:370px){.form2{grid-template-columns:1fr}.chips .chip.xp{display:none}.coach{grid-template-columns:64px minmax(0,1fr)}.mchar svg{width:64px;height:64px}.goal{grid-template-columns:96px minmax(0,1fr)}.ring,.ring svg{width:96px;height:96px}}

/* quests */
.qlist{display:flex;flex-direction:column;gap:14px}
.quest{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.quest b{display:block;font-family:var(--f-display);font-weight:600;font-size:16px;margin-bottom:6px}
.quest .bar{height:12px;margin-bottom:4px}
.qicon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 30%,var(--surface));color:var(--amber-ink)}
.qicon svg{width:20px;height:20px}
.quest.done .qicon{background:var(--green);color:var(--on-green)}

/* lab walkthrough */
.lab{border:2px solid var(--line);border-radius:16px;background:var(--bg)}
.lab>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;font-family:var(--f-display);font-weight:600;font-size:16px;min-height:48px}
.lab>summary::-webkit-details-marker{display:none}
.lab>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:3px solid var(--ink2);border-bottom:3px solid var(--ink2);transform:rotate(-45deg);transition:transform .15s}
.lab[open]>summary::after{transform:rotate(45deg)}
.lab-in{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.steps li{padding-left:2px}
.steps li::marker{font-family:var(--f-display);font-weight:700;color:var(--blue)}
.steps li p{font-weight:600;margin-bottom:6px}
.cmd{min-width:0;background:#16203A;border-radius:12px;overflow:hidden}
.cmdbar{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 4px 12px;background:rgb(255 255 255 / .06);color:#A9B6E0;font-size:12px;font-weight:800}
.cmd pre{margin:0;color:#E7ECFF;padding:10px 12px 12px;font:500 13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre}
.copy{border:0;border-radius:8px;background:rgb(255 255 255 / .14);color:#E7ECFF;font-weight:800;font-size:12px;padding:6px 12px;min-height:32px}
@media (prefers-reduced-motion: reduce){.lab>summary::after{transition:none}}

/* cheat sheets */
.tblwrap{overflow-x:auto;border:2px solid var(--line);border-radius:14px}
table.ref{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
table.ref th{text-align:left;padding:10px 10px;background:var(--soft);font-family:var(--f-display);font-weight:600;white-space:nowrap}
table.ref td{padding:9px 10px;border-top:2px solid var(--line);vertical-align:top;white-space:nowrap}
table.ref td:last-child{white-space:normal}
table.ref td:first-child{font-weight:800;white-space:nowrap}
table.ref tr:nth-child(even) td{background:color-mix(in srgb,var(--soft) 45%,var(--surface))}

/* exam tips */
.tips{display:grid;gap:12px}
.tip{padding:12px 14px;border-radius:14px;background:var(--soft)}
.tip b{font-family:var(--f-display);font-weight:600;font-size:16.5px}
.qbig{white-space:pre-line}

@media (max-width:440px){
  .wkrow{grid-template-columns:34px minmax(0,1fr);gap:8px}
  .node{width:34px;height:34px;font-size:14px;border-width:2px}
  .node svg{width:16px;height:16px}
  .rail::after{top:46px}
  .wk-in{padding:0 12px 14px}
  .lab-in{padding:0 10px 12px}
  .steps{padding-left:18px}
  .cmd pre{font-size:12.5px}
}

.refcard{padding:14px 10px}
.refcard>p{padding:0 4px}
@media (max-width:400px){table.ref{font-size:13px}table.ref th,table.ref td{padding:8px 7px}}

/* 3.2: focus card, calendar heatmap, weekly card */
.focus{border:2px solid color-mix(in srgb,var(--violet) 35%,var(--line))}
.focusname{font-family:var(--f-display);font-weight:600;font-size:19px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);gap:3px}
.heat i,.heatkey i{display:block;aspect-ratio:1;border-radius:4px;background:var(--soft)}
.heat i.h1,.heatkey i.h1{background:color-mix(in srgb,var(--green) 30%,var(--soft))}
.heat i.h2,.heatkey i.h2{background:color-mix(in srgb,var(--green) 55%,var(--soft))}
.heat i.h3,.heatkey i.h3{background:var(--green)}
.heat i.h4,.heatkey i.h4{background:var(--green-d)}
.heat i.fut{opacity:.45}
.heat i.today{outline:2px solid var(--blue);outline-offset:1px}
.heat i.exam{outline:2px solid var(--coral);outline-offset:1px;opacity:1}
.heatkey{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:12px;font-weight:800;color:var(--ink2);justify-content:flex-end}
.heatkey i{width:14px;aspect-ratio:1}
.wsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.ws{background:var(--soft);border-radius:14px;padding:10px 6px;text-align:center;min-width:0}
.ws b{display:block;font-family:var(--f-display);font-weight:600;font-size:20px;overflow-wrap:anywhere}
.ws span{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-top:2px}
.seg.two{display:inline-grid;grid-template-columns:1fr 1fr}
@media (max-width:360px){.wsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}