:root{
  --bg:#F4F6FB; --grid:rgba(27,42,74,.055); --surface:#FFFFFF; --ink:#1B2A4A; --muted:#58668A;
  --line:#D8DEEA; --hl:#FFE066; --hl-ink:#1B2A4A; --ok:#1C7F53; --ok-bg:#E2F3EA; --bad:#B93A2A; --bad-bg:#FBE6E2;
  --accent:#2747C9; --accent-ink:#FFFFFF; --code-bg:#EEF1F8; --shade:rgba(17,26,45,.5);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111A2D; --grid:rgba(255,255,255,.035); --surface:#18243C; --ink:#E6EBF6; --muted:#9BA8C4;
    --line:#2B3A5A; --hl:#E8C645; --hl-ink:#111A2D; --ok:#56C690; --ok-bg:#163729; --bad:#F08372; --bad-bg:#3D2023;
    --accent:#8AA2FF; --accent-ink:#111A2D; --code-bg:#0F182A; --shade:rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111A2D; --grid:rgba(255,255,255,.035); --surface:#18243C; --ink:#E6EBF6; --muted:#9BA8C4;
  --line:#2B3A5A; --hl:#E8C645; --hl-ink:#111A2D; --ok:#56C690; --ok-bg:#163729; --bad:#F08372; --bad-bg:#3D2023;
  --accent:#8AA2FF; --accent-ink:#111A2D; --code-bg:#0F182A; --shade:rgba(0,0,0,.6); color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; color:var(--ink); background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:740px; margin:0 auto; padding:24px 20px 72px}
.brand{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:36px; min-height:42px}
.logo{font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em; background:none; border:0; color:var(--ink); padding:0; cursor:pointer}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(34px,7vw,54px); line-height:1.02; font-weight:800; max-width:15ch}
h2{font-size:clamp(28px,5.5vw,38px); line-height:1.08; font-weight:800}
h3{font-size:22px; font-weight:700}
.lede{color:var(--muted); font-size:19px; margin:14px 0 30px; max-width:50ch}
.muted{color:var(--muted)}
.streak{display:inline-block; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:5px 14px; font-weight:600; font-size:15px; margin:-14px 0 26px}
.cards{display:grid; gap:12px}
.card{display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:start; text-align:left; width:100%; background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; font:inherit}
.card:hover{border-color:var(--ink)}
.card p{margin:2px 0 0; color:var(--muted); font-size:16px; grid-column:1/-1}
.card .bar{grid-column:1/-1; margin-top:10px}
.card .foot{grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:15px; margin-top:6px}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap; border:1.5px solid var(--line); color:var(--muted)}
.pill.own{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.pill.free{background:var(--hl); border-color:var(--hl); color:var(--hl-ink)}
.bar{height:6px; background:var(--line); border-radius:6px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--ok); border-radius:6px}
.bundle{margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; border:1.5px dashed var(--line); border-radius:14px; padding:16px 20px}
.bundle p{margin:0}
.back{background:none; border:0; color:var(--muted); font:inherit; font-size:15px; padding:6px 0; cursor:pointer; margin-bottom:10px}
.back:hover{color:var(--ink)}
.course-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.upsell{background:var(--ink); color:var(--bg); border-radius:14px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 22px}
.upsell p{margin:0; font-size:16px; max-width:44ch}
.tabs{display:flex; gap:4px; border-bottom:1.5px solid var(--line); margin:0 0 22px; overflow-x:auto}
.tab{background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1.5px; padding:10px 12px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.rows{display:grid; gap:8px}
.row{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; font:inherit; cursor:pointer}
.row:hover{border-color:var(--ink)}
.row .n{flex:none; width:30px; height:30px; border-radius:8px; background:var(--code-bg); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--muted)}
.row .t{flex:1; min-width:0}
.row .t b{display:block; font-weight:700}
.row .t span{color:var(--muted); font-size:15px}
.section-title{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:700; margin:28px 0 12px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; font:inherit; font-size:16px; cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip small{color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.scores{width:100%; border-collapse:collapse; font-size:16px}
.scores td{padding:10px 0; border-bottom:1px solid var(--line)}
.scores td:last-child{text-align:right; font-weight:700}
.hint{background:var(--surface); border-left:4px solid var(--hl); border-radius:0 12px 12px 0; padding:12px 16px; margin-top:14px}
.mockcard{background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.mockcard p{margin:4px 0 0; color:var(--muted)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-weight:700; font-size:16px; border-radius:10px; padding:12px 20px; cursor:pointer; border:1.5px solid transparent}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.light{background:var(--hl); color:var(--hl-ink)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.small{padding:8px 14px; font-size:15px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
.acct{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:4px 14px 4px 4px; font:inherit; font-weight:600; color:var(--ink); cursor:pointer}
.acct i{font-style:normal; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700}
.note h4{font-size:21px; margin:30px 0 8px}
.note p{margin:0 0 12px; max-width:62ch}
.note ul{margin:0 0 12px; padding-left:22px; max-width:62ch}
.note li{margin-bottom:6px}
.note code, .ans code, .question code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.86em; background:var(--code-bg); border:1px solid var(--line); border-radius:5px; padding:1px 5px}
.toc{background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 18px; margin:18px 0 6px}
.toc b{font-family:"Bricolage Grotesque",sans-serif}
.toc ol{margin:8px 0 0; padding-left:22px; columns:2; column-gap:28px}
.toc li{margin-bottom:4px; break-inside:avoid}
.toc a{color:var(--ink); text-underline-offset:3px}
@media (max-width:520px){ .toc ol{columns:1} }
.tip{background:var(--hl); color:var(--hl-ink); border-radius:12px; padding:14px 18px; margin:26px 0 0}
.tip strong{display:block; font-family:"Bricolage Grotesque",sans-serif; margin-bottom:2px}
.tip p{margin:0}
pre{background:var(--code-bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow-x:auto; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14px; line-height:1.55; margin:0 0 16px}
pre code{background:none; border:0; padding:0; font-size:inherit}
.qtop{display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:15px; margin-bottom:14px}
.timer{font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:500; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:5px 12px}
.timer.low{color:var(--bad); border-color:var(--bad)}
.progress{height:4px; background:var(--line); border-radius:4px; margin-bottom:24px; overflow:hidden}
.progress i{display:block; height:100%; background:var(--ink)}
.question{font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(21px,4vw,25px); line-height:1.3; letter-spacing:-.015em; margin:0 0 18px}
.opts{display:grid; gap:10px; margin:0 0 20px; padding:0; list-style:none}
.opt{display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt:disabled{cursor:default}
.opt .key{flex:none; width:26px; height:26px; border-radius:7px; border:1.5px solid var(--line); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--muted)}
.opt.mono .txt{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:14px}
.opt.selected{border-color:var(--accent)}
.opt.selected .key{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.opt.correct{border-color:var(--ok); background:var(--ok-bg)}
.opt.correct .txt{background:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 88%,transparent 88%); color:var(--hl-ink); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 3px; margin:0 -3px}
.opt.correct .key{background:var(--ok); border-color:var(--ok); color:var(--surface)}
.opt.wrong{border-color:var(--bad); background:var(--bad-bg)}
.opt.wrong .txt{text-decoration:line-through; text-decoration-color:var(--bad)}
.opt.wrong .key{background:var(--bad); border-color:var(--bad); color:var(--surface)}
.explain{border-left:4px solid var(--hl); background:var(--surface); border-radius:0 12px 12px 0; padding:14px 18px; margin:0 0 18px}
.explain strong{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:18px; margin-bottom:4px}
.explain strong.ok{color:var(--ok)} .explain strong.bad{color:var(--bad)}
.explain p{margin:0}
.actions{display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.actions.end{justify-content:flex-end}
.actions.start{justify-content:flex-start}
.linkish{background:none; border:0; color:var(--muted); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 0}
.save{background:none; border:1.5px solid var(--line); border-radius:8px; color:var(--muted); font:inherit; font-size:14px; font-weight:600; padding:4px 10px; cursor:pointer}
.save[aria-pressed="true"]{background:var(--hl); border-color:var(--hl); color:var(--hl-ink)}
.report{background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 14px}
.report p{margin:0 0 10px; font-weight:600}
.report .chips{margin-bottom:12px}
.report .chip{font-size:14px; padding:6px 12px}
.dots{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px}
.dot{width:34px; height:34px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.dot.done{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.dot.here{outline:2px solid var(--accent); outline-offset:2px}
.score{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:10px 0 6px}
.score b{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(64px,14vw,96px); font-weight:800; line-height:1; letter-spacing:-.04em}
.score span{color:var(--muted); font-size:19px}
.review details, .iq details{background:var(--surface); border:1.5px solid var(--line); border-radius:12px; margin-bottom:10px}
.review summary, .iq summary{cursor:pointer; padding:14px 16px; font-weight:600; list-style:none; display:flex; gap:12px; align-items:flex-start}
.review summary::-webkit-details-marker, .iq summary::-webkit-details-marker{display:none}
.iq summary small{display:block; color:var(--muted); font-weight:400; font-size:14px; margin-top:2px}
.review .mark{flex:none; font-weight:800}
.mark.ok{color:var(--ok)} .mark.bad{color:var(--bad)}
.review .body, .iq .ans{padding:0 16px 16px; font-size:16px}
.review .body p{margin:6px 0}
.ans p{margin:0 0 10px} .ans ul{margin:0 0 10px; padding-left:22px} .ans li{margin-bottom:5px}
.ans h4{font-size:17px; margin:14px 0 6px}
.rate{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:12px; border-top:1px solid var(--line)}
.rate .chip{font-size:14px; padding:6px 12px}
.iq .locked{display:flex; gap:12px; align-items:center; width:100%; text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; font:inherit; color:var(--muted); cursor:pointer}
#modal[hidden]{display:none}
.backdrop{position:fixed; inset:0; background:var(--shade); z-index:20}
.dialog{position:fixed; z-index:21; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; background:var(--surface); color:var(--ink); border-radius:18px; padding:24px}
.dialog h3{font-size:24px; margin-bottom:6px}
.dialog p{margin:0 0 14px}
.dialog label{display:block; font-weight:600; font-size:15px; margin-bottom:12px}
.dialog input{display:block; width:100%; margin-top:6px; font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:11px 12px}
.dialog input:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.dialog .btn + .btn{margin-top:10px}
.dialog .actions .btn + .btn{margin-top:0}
.err{color:var(--bad); font-size:15px}
.demo{font-size:13px; color:var(--muted); margin:14px 0 0 !important}
.price{display:flex; align-items:baseline; gap:8px; margin:10px 0 12px}
.price b{font-family:"Bricolage Grotesque",sans-serif; font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1}
.price span{color:var(--muted)}
.checks{list-style:none; padding:0; margin:0 0 18px}
.checks li{padding-left:26px; position:relative; margin-bottom:8px}
.checks li::before{content:""; position:absolute; left:2px; top:6px; width:13px; height:8px; border-left:2.5px solid var(--ok); border-bottom:2.5px solid var(--ok); transform:rotate(-45deg)}
.toast{position:fixed; z-index:30; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:15px; font-weight:600}
button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
@media (max-width:520px){ .wrap{padding:18px 16px 60px} .brand{margin-bottom:26px} .dialog{padding:20px} }
@media (prefers-reduced-motion:no-preference){ .opt,.card,.chip,.row{transition:border-color .12s, background-color .12s} }

.site-foot{max-width:740px; margin:0 auto; padding:24px 20px calc(32px + env(safe-area-inset-bottom,0px)); color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid var(--line)}
.site-foot a{color:var(--muted)}
.loading{color:var(--muted); padding:40px 0}
.dialog .switch{margin-top:14px; font-size:15px; text-align:center}
.dialog .switch button{background:none; border:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; padding:0}
.legal{max-width:68ch}
.legal h1{font-size:36px; margin-bottom:12px}
.legal h2{font-size:22px; margin:26px 0 8px}
.legal p,.legal li{color:var(--ink)}

.logo{display:inline-flex; align-items:baseline; gap:1px; line-height:1; font-size:22px}
.logo picture{display:block}
.logo-mark{display:block; height:24px; width:auto}