:root{
  --paper:#efe9da;          /* warm bone background */
  --card:#faf6ec;           /* raised surface */
  --card-2:#f4eee0;         /* inset / code tint */
  --ink:#1c1a15;            /* near-black warm */
  --ink-2:#3a3527;
  --muted:#7a7059;          /* warm gray text */
  --line:#d8cdb6;           /* hairline borders */
  --line-strong:#c3b596;
  --accent:#1d4e74;         /* blueprint cobalt */
  --accent-deep:#143a59;
  --accent-wash:#e4ecf2;
  --good:#2f6b3c;
  --good-wash:#e3eede;
  --bad:#a8341f;
  --bad-wash:#f3e2dc;
  --radius:3px;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  min-height:100vh;
}
::selection{background:var(--accent);color:var(--card)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:18px 32px;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.brand{display:flex;align-items:center;gap:16px}
.logomark{font-family:var(--mono);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--card);
  background:var(--accent);padding:10px 12px;border-radius:var(--radius);line-height:1}
.brand-text h1{font-family:var(--serif);font-weight:600;font-size:20px;margin:0;letter-spacing:-.01em;font-optical-sizing:auto}
.sub{margin:1px 0 0;color:var(--muted);font-size:12.5px;font-family:var(--mono);letter-spacing:-.01em}
.tabs{display:flex;gap:4px}
.tab{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--muted);background:transparent;
  border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:9px 16px;cursor:pointer}
.tab.active{color:var(--card);background:var(--ink);border-color:var(--ink)}

main{max-width:920px;margin:0 auto;padding:52px 32px 40px}
.view{display:none}
.view.active{display:block}

/* ---------- view heads ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.view-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.06;letter-spacing:-.02em;margin:0 0 16px;font-optical-sizing:auto}
.view-head h2 em{font-style:italic;color:var(--accent)}
.lede{font-size:17px;color:var(--ink-2);max-width:62ch;margin:0 0 32px}

/* ---------- spec strip (static title block) ---------- */
.specstrip{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);border-radius:var(--radius);
  background:var(--card);overflow:hidden;margin:0 0 44px}
.specstrip .cell{padding:18px 22px;border-right:1.5px solid var(--line-strong)}
.specstrip .cell:last-child{border-right:0}
.specstrip .num{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1;letter-spacing:-.02em;color:var(--ink);font-optical-sizing:auto}
.specstrip .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* ---------- concepts: phase + grid ---------- */
.cc-phase{margin-bottom:38px}
.cc-phase-head{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin:0 0 18px;padding-bottom:10px;border-bottom:1.5px solid var(--line-strong)}
.cc-phase-range{color:var(--accent);font-size:11px}
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px}
.cc-card{text-align:left;font-family:var(--sans);background:var(--card);border:1.5px solid var(--line-strong);
  border-radius:var(--radius);padding:18px 18px 16px;cursor:pointer;display:flex;flex-direction:column;gap:7px}
.cc-num{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.05em}
.cc-name{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.cc-detail{color:var(--muted);font-size:13px;line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-meta{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px}
.cc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}

/* ---------- concepts: detail ---------- */
.cd-back{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent);background:transparent;border:0;
  cursor:pointer;padding:0;margin-bottom:24px;font-weight:500}
.cd-head{border-bottom:1.5px solid var(--ink);padding-bottom:26px;margin-bottom:30px}
.cd-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.cd-title{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4.5vw,40px);line-height:1.06;letter-spacing:-.02em;margin:0 0 14px}
.cd-detail{font-size:17px;color:var(--ink-2);max-width:62ch;margin:0 0 22px}
.cd-section{margin-bottom:38px}
.cd-sec-head{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:500;
  display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px dotted var(--line-strong)}
.cd-sec-head span{color:var(--card);background:var(--accent);border-radius:999px;min-width:22px;text-align:center;padding:1px 7px;font-size:11px}
.cd-empty{color:var(--muted);font-size:15px}
.cd-hint{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.rev-toggle{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);background:var(--card-2);
  border:1.5px solid var(--ink);border-radius:var(--radius);padding:11px 18px;cursor:pointer;width:100%}

/* review (study) cards */
.rev-card{background:var(--card);border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:20px 22px;margin-bottom:12px}
.rev-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rev-idx{color:var(--card);background:var(--ink);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-weight:600}
.rev-kind{letter-spacing:.05em;text-transform:uppercase}
.rev-q{font-size:16px;line-height:1.5;margin-bottom:14px}
.rev-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.rev-opt{display:flex;align-items:center;gap:11px;background:var(--card-2);border:1.5px solid var(--line);border-radius:var(--radius);padding:10px 13px;font-size:14.5px}
.rev-box{width:16px;height:16px;border:1.5px solid var(--muted);border-radius:3px;flex-shrink:0}
.rev-opt.correct{border-color:var(--good);background:var(--good-wash)}
.rev-opt.correct .rev-box{background:var(--good);border-color:var(--good);position:relative}
.rev-opt.correct .rev-box::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rev-show{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--accent);background:transparent;
  border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:7px 15px;cursor:pointer}
.rev-ans{display:flex;gap:9px;align-items:flex-start;font-size:15px;font-weight:600;color:#214d2b;background:var(--good-wash);
  border:1.5px solid var(--good);border-radius:var(--radius);padding:12px 14px}
.rev-ans .mk{color:var(--good)}
.reading-link .wk{font-family:var(--mono);font-size:10px;color:var(--muted);background:var(--card-2);border:1px solid var(--line);
  border-radius:2px;padding:1px 6px;white-space:nowrap;flex-shrink:0}
.week-body .reading-link .wk{display:none}

/* ---------- week accordions ---------- */
.week-block{border:1.5px solid var(--line-strong);border-radius:var(--radius);background:var(--card);margin-bottom:12px;overflow:hidden}
.week-block.open{border-color:var(--ink)}
.week-head{display:flex;align-items:center;gap:18px;padding:18px 22px;cursor:pointer;user-select:none}
.week-num{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:8px;white-space:nowrap}
.week-num::before{content:"";width:9px;height:9px;background:var(--accent);display:inline-block}
.week-head h3{font-family:var(--serif);font-weight:500;font-size:18px;margin:0;flex:1;letter-spacing:-.01em}
.week-head .count{font-family:var(--mono);color:var(--muted);font-size:12px}
.week-head .caret{color:var(--muted);font-size:12px}
.week-block.open .caret{transform:rotate(90deg)}
.week-body{display:none;padding:6px 22px 22px}
.week-block.open .week-body{display:block}
.cat{margin-top:18px}
.cat h4{font-family:var(--mono);margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:500;
  padding-bottom:6px;border-bottom:1px dotted var(--line-strong)}
.reading-link{display:flex;align-items:baseline;gap:14px;padding:9px 10px;border-radius:var(--radius);
  text-decoration:none;color:var(--ink)}
.reading-link .sec{font-family:var(--mono);font-size:12.5px;color:var(--accent);min-width:56px;flex-shrink:0;font-weight:500}
.reading-link .ttl{flex:1;line-height:1.45}
.reading-link .note{color:var(--bad);font-size:13px;font-style:italic}
.reading-link .ext{font-family:var(--mono);color:var(--muted);font-size:12px;flex-shrink:0}
.vid-badge{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;background:var(--ink);color:var(--card);
  border-radius:2px;padding:2px 6px;margin-right:7px;vertical-align:1px}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;background:var(--card);
  border:1.5px solid var(--ink);border-radius:var(--radius);padding:16px 20px;margin-bottom:28px}
.field{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:row;align-items:center;gap:11px;font-weight:500}
.field select{font-family:var(--sans);font-size:15px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);
  background:var(--card-2);border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:9px 12px;cursor:pointer}
.field select:focus{outline:none;border-color:var(--accent)}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-2);user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:999px;background:var(--card-2);border:1.5px solid var(--line-strong);position:relative}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted)}
.switch input:checked+.track{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.track::after{transform:translateX(16px);background:var(--card)}
.spacer{flex:1}

.btn{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);background:var(--card-2);
  border:1.5px solid var(--ink);border-radius:var(--radius);padding:10px 20px;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--card);border-color:var(--accent-deep)}
.btn.ghost{background:transparent;border-color:var(--line-strong)}
.hidden{display:none!important}

/* ---------- quiz ---------- */
.qz-progress{height:5px;background:var(--card-2);border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;margin-bottom:14px}
.qz-bar{height:100%;width:0;background:var(--accent)}
.qz-meta{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:14px;letter-spacing:.02em}
.qz-score{color:var(--ink);font-weight:500}
.qz-card{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius);padding:30px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-weight:500}
.qz-question{font-size:19px;line-height:1.5;margin-bottom:24px;color:var(--ink)}
.qz-answers{display:flex;flex-direction:column;gap:11px}
.qz-opt{display:flex;align-items:center;gap:14px;background:var(--card-2);border:1.5px solid var(--line-strong);
  border-radius:var(--radius);padding:14px 16px;cursor:pointer;font-size:15.5px}
.qz-opt .box{width:22px;height:22px;border:1.5px solid var(--muted);flex-shrink:0;display:grid;place-items:center;
  font-size:12px;color:transparent;font-family:var(--mono)}
.qz-opt.radio .box{border-radius:50%}
.qz-opt:not(.radio) .box{border-radius:3px}
.qz-opt.selected{border-color:var(--accent);background:var(--accent-wash)}
.qz-opt.selected .box{background:var(--accent);border-color:var(--accent);color:var(--card)}
.qz-opt.correct{border-color:var(--good);background:var(--good-wash)}
.qz-opt.correct .box{background:var(--good);border-color:var(--good);color:var(--card)}
.qz-opt.wrong{border-color:var(--bad);background:var(--bad-wash)}
.qz-opt.wrong .box{background:var(--bad);border-color:var(--bad);color:var(--card)}
.qz-opt.locked{pointer-events:none}
.qz-feedback{margin-top:22px;padding:16px 18px;border-radius:var(--radius);font-size:15.5px;border:1.5px solid}
.qz-feedback.good{background:var(--good-wash);border-color:var(--good);color:#214d2b}
.qz-feedback.bad{background:var(--bad-wash);border-color:var(--bad);color:#7a2415}
.qz-feedback.unknown{background:var(--card-2);border-color:var(--line-strong);color:var(--ink-2)}
.qz-feedback strong{font-weight:600}
.qz-controls{display:flex;align-items:center;gap:12px;margin-top:22px}
.derived-tag{margin-top:12px;padding-top:12px;border-top:1px dotted var(--line-strong);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.derived-tag .dlabel{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:var(--card);padding:2px 7px;border-radius:2px;margin-right:8px;vertical-align:1px}
.derived-tag a{white-space:nowrap;font-weight:600}

/* ---------- results ---------- */
#qzResults{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--radius);padding:48px 32px;text-align:center}
.result-score{font-family:var(--serif);font-weight:600;font-size:88px;line-height:1;letter-spacing:-.03em;font-optical-sizing:auto}
.result-score.pass{color:var(--good)}.result-score.mid{color:var(--accent)}.result-score.low{color:var(--bad)}
.result-sub{color:var(--ink-2);font-size:17px;margin:10px 0 30px}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.review-head{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:left;margin:8px 0 12px}
.review-item{text-align:left;background:var(--card-2);border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px}
.review-item .rweek{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.review-item .ans{margin-top:10px;color:var(--good);font-weight:600;display:flex;gap:8px;align-items:flex-start}
.review-item .ans .mk{color:var(--good)}
.review-wrap{max-width:640px;margin:0 auto 30px}

/* ---------- code (light-mode highlighting for Canvas hljs markup) ---------- */
.qz-question pre,.qz-opt pre,.review-item pre,.rev-q pre{background:var(--card-2);border:1.5px solid var(--line-strong);
  border-radius:var(--radius);padding:14px 16px;overflow:auto;margin:14px 0}
.qz-question img,.review-item img,.rev-q img{max-width:100%;height:auto;border:1.5px solid var(--line-strong);border-radius:var(--radius);margin:12px 0;display:block}
pre code,code{font-family:var(--mono);font-size:13.5px;line-height:1.55}
:not(pre)>code{background:var(--card-2);border:1px solid var(--line);padding:1px 5px;border-radius:3px;font-size:.88em}
.markdownText p:first-child{margin-top:0}.markdownText p:last-child{margin-bottom:0}
.hljs-keyword,.hljs-meta-keyword{color:#a3306b}
.hljs-built_in,.hljs-type{color:#1d4e74}
.hljs-string,.hljs-meta-string{color:#2f6b3c}
.hljs-number{color:#1d6fa3}
.hljs-comment{color:#9a8f74;font-style:italic}
.hljs-function .hljs-title,.hljs-title{color:#7a3fa0}
.hljs-meta{color:#b5651d}
.hljs-params{color:var(--ink)}

/* ---------- sponsor / advertisement ---------- */
.promo{border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--accent-wash);padding:20px 24px;margin-top:48px}
.promo-tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.promo-body{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.promo-text{flex:1;min-width:240px}
.promo-name{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.1;margin:0 0 6px;color:var(--ink);letter-spacing:-.01em}
.promo-tagline{font-style:italic;font-weight:500;font-size:18px;color:var(--accent)}
.promo-desc{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:66ch}
.promo-cta{flex-shrink:0;white-space:nowrap;text-decoration:none;display:inline-block}

/* ---------- footer ---------- */
.foot{border-top:1.5px solid var(--ink);margin-top:40px;padding:24px 32px;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.01em}

@media(max-width:660px){
  .topbar{padding:14px 18px}
  main{padding:32px 18px 32px}
  .qz-card{padding:22px}
  .result-score{font-size:64px}
  .foot{flex-direction:column}
}