:root{
  --bg:#F2F5F0;--surface:#FFFFFF;--ink:#13221B;--muted:#4F6157;--line:#D5DCD3;
  --accent:#1B5A46;--on-accent:#FFFFFF;--wattle:#E3AB1C;--on-wattle:#2A2000;--sel:#E2EEE8;
  --good:#17754A;--good-bg:#DDF2E6;--bad:#B02F29;--bad-bg:#F9E3E1;
  --c-people:#8A5A12;--c-democracy:#1F5F8B;--c-gov:#5B3E8F;--c-values:#1B5A46;
  --font:'Avenir Next','Segoe UI Variable','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Roboto,sans-serif;
  --radius:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1612;--surface:#16211B;--ink:#E8EFEA;--muted:#A0AFA6;--line:#2A3A31;
    --accent:#6CC4A1;--on-accent:#08140F;--wattle:#E8BC3F;--on-wattle:#2A2000;--sel:#1C3027;
    --good:#5CCB93;--good-bg:#143325;--bad:#F0857F;--bad-bg:#3A1D1B;
    --c-people:#E0B25A;--c-democracy:#7DB9E6;--c-gov:#B79CEB;--c-values:#6CC4A1;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1612;--surface:#16211B;--ink:#E8EFEA;--muted:#A0AFA6;--line:#2A3A31;
  --accent:#6CC4A1;--on-accent:#08140F;--wattle:#E8BC3F;--on-wattle:#2A2000;--sel:#1C3027;
  --good:#5CCB93;--good-bg:#143325;--bad:#F0857F;--bad-bg:#3A1D1B;
  --c-people:#E0B25A;--c-democracy:#7DB9E6;--c-gov:#B79CEB;--c-values:#6CC4A1;color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font);
  padding:0 max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));
  padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:720px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em;font-weight:750;text-wrap:balance}
h2{font-size:1.2rem}
p{margin:0}
a{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--wattle);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

/* top bar */
.top{display:flex;align-items:center;gap:10px;padding:16px 0 10px}
.mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:18px;height:18px}
.brand{font-weight:750;font-size:1.05rem}
.sp{flex:1}
.iconbtn{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-size:1.2rem;line-height:1;display:grid;place-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:650}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.wattle{background:var(--wattle);color:var(--on-wattle);border-color:var(--wattle)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.big{width:100%;min-height:54px;font-size:1.05rem}
.btn.sm{min-height:44px;padding:0 14px;font-size:.92rem}
.btn.grow{flex:1}
.link{background:none;border:0;padding:6px 2px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.92rem;min-height:44px}
.kicker{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;font-weight:650}

/* resume */
.resume{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:2px solid var(--wattle);background:var(--surface);border-radius:var(--radius);padding:14px 16px;margin:6px 0 14px}
.resume b{display:block}
.resume span{color:var(--muted);font-size:.9rem}
.rbtns{display:flex;gap:8px}

/* readiness */
.ready{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:20px;margin-top:6px;display:grid;gap:16px}
.rtop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.rnum{font-weight:800;font-size:clamp(3.2rem,15vw,4.4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rnum small{font-size:.45em;margin-left:2px;color:var(--muted)}
.rlab{flex:1;min-width:180px;display:grid;gap:2px}
.rlab b{font-size:1.1rem}
.rlab span{color:var(--muted);font-size:.9rem}
.rmeter{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.rmeter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--wattle));border-radius:5px}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stats li{display:grid;gap:0;text-align:center;padding:8px 2px;border-radius:10px;background:var(--bg)}
.stats b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.74rem;line-height:1.25}
.fine{color:var(--muted);font-size:.86rem;text-align:center;margin-top:-4px}

/* blocks */
.block{margin-top:30px}
.block>h2{margin-bottom:6px}
.sub{color:var(--muted);font-size:.93rem;margin:4px 0 10px;max-width:62ch}
.mini{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:7px}
.mini i{display:block;height:100%;background:var(--accent);border-radius:3px}

/* syllabus */
.sect{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);margin-top:10px;overflow:hidden}
.sect summary{list-style:none;cursor:pointer;padding:14px 16px;min-height:60px;display:block;position:relative;padding-right:44px}
.sect summary::-webkit-details-marker{display:none}
.sect summary::after{content:"";position:absolute;right:18px;top:24px;width:9px;height:9px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.sect[open] summary::after{transform:rotate(-135deg);top:28px}
.sname{display:grid;gap:0}
.sname b{font-size:1.04rem}
.sname span{color:var(--muted);font-size:.86rem}
.sbody{padding:0 16px 14px;border-top:1px solid var(--line)}
.sact{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.sact .btn{flex:1;min-width:130px}
.subs{list-style:none;margin:6px 0 0;padding:0}
.subs li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.subs li:first-child{border-top:0}
.subs .nm{flex:1;min-width:0}
.subs .nm b{font-weight:650;display:block}
.subs .nm span{color:var(--muted);font-size:.84rem}
.subs .bt{display:flex;gap:6px;flex:none}

/* mock block */
.mockblock{background:var(--accent);color:var(--on-accent);border-radius:20px;padding:22px 20px;display:grid;gap:12px;justify-items:start}
.mockblock .kicker{color:inherit;opacity:.8}
.mockblock h2{font-size:1.6rem}
.mockblock p{opacity:.94;max-width:54ch}
.mstat{font-size:.92rem;border-top:1px solid color-mix(in srgb,var(--on-accent) 30%,transparent);padding-top:10px;width:100%}
.hist{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hchip{border:1.5px solid var(--line);border-radius:10px;padding:6px 12px;background:var(--surface);display:grid;line-height:1.25}
.hchip b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.hchip em{font-style:normal;font-size:.78rem;font-weight:650}
.hchip.p{border-color:var(--good)}.hchip.p em{color:var(--good)}
.hchip.f em{color:var(--bad)}

/* rows */
.rows{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.rows .nm b{display:block;font-weight:650}
.rows .nm span{color:var(--muted);font-size:.88rem}
.rows .btn{flex:none;min-height:44px}

/* notes */
.tip{margin:6px 0 4px;padding:12px 14px;border-radius:12px;background:var(--sel);border-left:4px solid var(--wattle);font-size:.95rem}
.jump{display:flex;gap:8px;overflow-x:auto;padding:10px 0 6px;scrollbar-width:none}
.chipbtn{flex:none;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:0 16px;min-height:44px;font-weight:650;white-space:nowrap}
.chipbtn.cur{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.lcard{border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--surface);margin-top:12px;scroll-margin-top:12px}
.lcard h2{font-size:1.1rem;margin-bottom:8px}
.lcard ul{margin:0;padding-left:1.15rem;display:grid;gap:8px}
.lact{margin-top:14px}
.steps{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:.9rem}
.bul{margin:10px 0 0;padding-left:1.2rem;display:grid;gap:8px}
.pledge{margin:10px 0;padding:18px 18px;border-left:5px solid var(--wattle);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;font-size:1.08rem;line-height:1.7;font-weight:550}

/* quiz */
.qbar{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:max(env(safe-area-inset-top,0px),0px);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line)}
.qrow{display:flex;align-items:center;gap:10px;padding:8px 0 6px}
.qname{flex:1;min-width:0;display:grid;line-height:1.25}
.qname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count{color:var(--muted);font-size:.86rem;font-variant-numeric:tabular-nums}
.timer{font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums;padding:2px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface)}
.timer.low{border-color:var(--bad);color:var(--bad)}
.meter{height:5px;background:var(--line);margin:0 calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
.meter i{display:block;height:100%;background:var(--accent);transition:width .25s}
.qcard{margin-top:20px}
.qmeta{display:flex;flex-wrap:wrap;gap:6px}
.chip{border-radius:999px;padding:2px 11px;font-size:.78rem;font-weight:700;border:1.5px solid currentColor}
.chip.s-people{color:var(--c-people)}.chip.s-democracy{color:var(--c-democracy)}.chip.s-gov{color:var(--c-gov)}.chip.s-values{color:var(--c-values)}
.chip.must,.chip.retry{background:var(--wattle);color:var(--on-wattle);border-color:var(--wattle)}
.qtext{font-size:clamp(1.3rem,5.2vw,1.7rem);font-weight:700;margin:12px 0 4px;line-height:1.28}
.listen{display:inline-block;padding-left:0}
.opts{display:grid;gap:10px;margin-top:10px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;min-height:64px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface)}
.opt:hover:not(:disabled){border-color:var(--accent)}
.ltr{flex:none;width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:750}
.txt{flex:1;min-width:0;overflow-wrap:anywhere}
.tag{display:block;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.opt.sel{border-color:var(--accent);background:var(--sel)}
.opt.sel .ltr{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.opt:disabled{color:var(--ink);cursor:default}
.opt.right{border-color:var(--good);background:var(--good-bg)}
.opt.right .ltr{background:var(--good);color:var(--bg);border-color:var(--good)}
.opt.right .tag{color:var(--good)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt.wrong .ltr{background:var(--bad);color:var(--bg);border-color:var(--bad)}
.opt.wrong .tag{color:var(--bad)}
.opt.dim{opacity:.55}
.fb{margin-top:16px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);display:grid;gap:6px}
.fb.ok{border-color:var(--good)}.fb.no{border-color:var(--bad)}
.fb strong{font-size:1.08rem}
.fb.ok strong{color:var(--good)}.fb.no strong{color:var(--bad)}
.fb .right{font-weight:650}
.fb .again{color:var(--muted);font-size:.9rem}
.navtoggle{display:block;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chips button{width:44px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);font-weight:650;font-variant-numeric:tabular-nums}
.chips button.done{background:var(--sel);border-color:var(--accent)}
.chips button.flag{border-color:var(--wattle);box-shadow:inset 0 -4px 0 var(--wattle)}
.chips button.cur{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.dock{position:sticky;bottom:0;z-index:4;margin-top:18px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line);display:flex;gap:10px}
.dock .btn{min-height:52px}
.btn.flagon{background:var(--wattle);color:var(--on-wattle);border-color:var(--wattle)}
.confirm{margin-top:16px;padding:16px;border-radius:14px;border:2px solid var(--wattle);background:var(--surface);display:grid;gap:12px}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* results */
.res{padding-top:18px}
.score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px}
.big{font-weight:800;font-size:clamp(3.4rem,16vw,5.2rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.verdict{font-weight:750;font-size:1.3rem;padding:2px 14px;border-radius:10px}
.verdict.pass{background:var(--good-bg);color:var(--good)}
.verdict.not{background:var(--bad-bg);color:var(--bad)}
.verdict.plain{background:var(--sel);color:var(--accent)}
.why{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.why .y{color:var(--good);font-weight:650}.why .n{color:var(--bad);font-weight:650}
.msg{margin-top:12px;max-width:60ch}
.tb{display:grid;gap:12px;margin-top:18px}
.tb .r{display:grid;gap:4px}
.tb .lab{display:flex;justify-content:space-between;gap:12px;font-size:.93rem}
.tb .lab span:last-child{font-variant-numeric:tabular-nums;font-weight:650}
.trk{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.trk i{display:block;height:100%;background:var(--accent)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:0 12px;min-height:46px;font-weight:650;color:var(--muted);white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.miss{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.miss li{border:1.5px solid var(--line);border-left-width:5px;border-radius:12px;padding:14px 16px;background:var(--surface);display:grid;gap:6px}
.miss li.b{border-left-color:var(--bad)}.miss li.g{border-left-color:var(--good)}
.miss .q{font-weight:650}
.miss .yours{color:var(--bad);font-size:.93rem}
.miss .corr{color:var(--good);font-size:.93rem;font-weight:650}
.miss .ex{color:var(--muted);font-size:.93rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* settings */
.field{display:grid;gap:8px;margin:14px 0}
.field>span{font-weight:650}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.seg button{flex:1;min-height:46px;border:0;background:none;font-weight:650;border-right:1.5px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--accent);color:var(--on-accent)}
textarea{width:100%;font:inherit;font-size:.85rem;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);color:var(--ink);resize:vertical;margin-top:8px}

.foot{margin-top:40px;color:var(--muted);font-size:.82rem;display:grid;gap:8px;max-width:64ch}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* custom practice, search, badges */
.tog{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
mark{background:var(--wattle);color:var(--on-wattle);border-radius:3px;padding:0 2px}
.sres{margin-top:14px}
.sres h2{margin-bottom:6px}
.srl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.srl li{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:4px}
.srl .sn{color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.srl .corr{color:var(--good);font-weight:650;font-size:.93rem}
.srl .ex{color:var(--muted);font-size:.9rem}
.badges{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.badges li{display:flex;gap:10px;align-items:flex-start;border:1.5px dashed var(--line);border-radius:12px;padding:10px 12px;opacity:.7}
.badges li.on{border:1.5px solid var(--wattle);background:var(--surface);opacity:1}
.badges .bi{font-size:1.4rem;line-height:1;color:var(--muted)}
.badges li.on .bi{color:var(--wattle)}
.badges b{display:block;font-size:.93rem}
.badges span:not(.bi){color:var(--muted);font-size:.78rem;line-height:1.3;display:block}
.badgebox{margin-top:14px;padding:12px 14px;border-radius:12px;border:2px solid var(--wattle);background:var(--surface)}
/* external links */
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:var(--on-accent)}
.srcs{font-size:.88rem;color:var(--muted);margin:10px 0 0}
.xl{font-weight:650}
.lk{flex:none}
/* welcome */
.welcome{padding:14px 0 10px;display:grid;gap:14px}
.welcome h1{font-size:clamp(1.9rem,7.5vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.welcome h2{font-size:1.1rem;margin-top:8px}
.lead{font-size:1.06rem;max-width:56ch}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.facts li{border:1.5px solid var(--line);border-radius:999px;padding:5px 14px;background:var(--surface);font-size:.92rem;white-space:nowrap}
.nlab{font-weight:650;margin-top:6px}
.nlab span{color:var(--muted);font-weight:400}
.tin{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;background:var(--surface);color:var(--ink)}
.tin:focus-visible{outline:3px solid var(--wattle);outline-offset:2px}
.hello{margin:2px 0 8px;font-weight:650;font-size:1.05rem}
.steps li span{display:block}
/* flashcards, progress, cheat sheet */
.fcard{display:grid;gap:12px;align-content:center;min-height:300px;width:100%;text-align:left;padding:24px 20px;border:1.5px solid var(--line);border-radius:20px;background:var(--surface);margin-top:18px}
.fcard.flip{border-color:var(--accent);background:var(--sel)}
.fcard .fl{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fcard .fq{font-size:1.25rem;font-weight:700;line-height:1.3}
.fcard .ans{font-size:1.4rem;font-weight:800;color:var(--accent)}
.fcard .exp{font-size:.95rem;color:var(--muted)}
.act{display:flex;align-items:flex-end;gap:4px;margin-top:12px}
.ab{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;font-size:.7rem;color:var(--muted)}
.ab i{display:block;width:100%;background:var(--accent);border-radius:4px 4px 0 0}
.ptl .nm{flex:1}
.kf{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.kf div{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px}
.kf b{display:block;font-size:1.08rem}
.kf span{color:var(--muted);font-size:.85rem}
@media print{
  body{background:#fff;color:#000;padding:0}
  .top .iconbtn,.sact,.actions,.dock,.jump,.foot,.toast{display:none!important}
  .lcard,.kf div{break-inside:avoid;border-color:#999;background:#fff}
  .block{margin-top:18px}
}
@media (max-width:480px){
  .stats span{font-size:.7rem}
  .subs li{flex-direction:column;align-items:stretch}
  .subs .bt .btn{flex:1}
  .rows li{align-items:flex-start;flex-direction:column}
  .rows .btn{width:100%}
  .actions .btn{width:100%}
  .mockblock .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}