/* Elevate with Hafi: practice site.
   Layout idea: a teacher's marked-up exam paper. Ink on paper, one red pen, hairline rules,
   questions set like the booklets, corrections shown the way a teacher marks them. */

@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-latin-600-italic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#16181d; --ink-2:#4a4d55; --ink-3:#6b6e76;
  --paper:#f5f1e8; --paper-2:#ebe5d8; --sheet:#ffffff; --bg:#fbfaf7;
  --red:#bf3a25; --red-soft:#f3dcd5; --ok:#2f6b46; --ok-soft:#dbeadf;
  --hair:#d9d4c9; --hair-2:#c9c2b4;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mark:color-mix(in srgb,var(--red) 16%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#ece6d9; --ink-2:#bdb6a8; --ink-3:#938c80;
  --paper:#1a1c20; --paper-2:#22252b; --sheet:#1d2025; --bg:#141619;
  --red:#e36a52; --red-soft:#3a201b; --ok:#7cc495; --ok-soft:#18291f;
  --hair:#2e3238; --hair-2:#3b4047; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#ece6d9; --ink-2:#bdb6a8; --ink-3:#938c80;
  --paper:#1a1c20; --paper-2:#22252b; --sheet:#1d2025; --bg:#141619;
  --red:#e36a52; --red-soft:#3a201b; --ok:#7cc495; --ok-soft:#18291f;
  --hair:#2e3238; --hair-2:#3b4047; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--hair-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sans{font-family:var(--sans)}
.eyebrow{font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.08}
h3{font-size:21px;line-height:1.25}
p{margin:0}
.lead{color:var(--ink-2);font-size:19px;max-width:60ch}
.muted{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}
.brand svg{height:30px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;font:500 15px/1 var(--sans)}
.nav a{padding:10px 12px;text-decoration:none;color:var(--ink-2);border-radius:6px;position:relative}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--red);border-radius:2px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--hair-2);border-radius:4px;height:40px;padding:0 14px;font:600 14px var(--sans);cursor:pointer}
@media (max-width:880px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--hair);
    padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--hair);border-radius:0;font-size:17px}
  .nav a[aria-current="page"]::after{left:auto;right:4px;top:50%;bottom:auto;width:8px;height:8px;border-radius:50%;transform:translateY(-50%)}
}

/* ---------- Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:4px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  transition:transform .12s var(--ease),background .15s,color .15s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.sm{height:36px;padding:0 14px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:600 14px var(--sans);color:var(--red);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- Red pen */
.pen-strike{position:relative;color:var(--ink-3);white-space:nowrap}
.pen-strike::after{content:"";position:absolute;left:-.04em;right:-.04em;top:54%;height:.075em;background:var(--red);border-radius:.05em;
  transform-origin:left center;transform:rotate(-2deg) scaleX(var(--s,1));transition:transform .45s var(--ease)}
.pen-ins{color:var(--red);font-style:italic}
.caret{display:inline-block;width:.06em;height:.9em;background:var(--red);vertical-align:-.08em;margin-left:.04em}

/* ---------- Home */
.hero{padding-block:clamp(44px,7vw,84px) clamp(40px,6vw,72px);border-bottom:1px solid var(--hair);background:var(--paper)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:end}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.08;letter-spacing:-.02em;font-weight:600;padding-top:.5em}
.fix{position:relative;display:inline-block}
.fix .pen-ins{position:absolute;left:.1em;top:-.62em;font:500 .4em/1 var(--sans);font-style:normal;letter-spacing:0;white-space:nowrap}
.fix .pen-ins::before{content:"";position:absolute;left:-.55em;top:.7em;width:.5em;height:.5em;border-left:2px solid var(--red);border-top:2px solid var(--red);transform:rotate(45deg)}
.textlink{font:600 15px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.hero h1 .line2{display:block}
.hero .sub{margin-top:26px;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:30px}
.card-q{background:var(--sheet);border:1px solid var(--hair-2);border-radius:2px;padding:22px 22px 18px 34px;position:relative;margin:0}
.card-q .meta{font:500 13px/1.3 var(--sans);color:var(--ink-3);margin-bottom:12px}
.card-q .txt{font-size:16.5px;line-height:1.55}
.card-q .txt p{margin:0}
.card-q ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:16px}
.card-q li{display:flex;gap:10px;align-items:baseline;padding:4px 6px;border-radius:4px;position:relative}
.card-q li b{font:700 13px var(--sans);width:18px;flex:none}
.card-q li.x{color:var(--ink-3)}
.card-q li.x .t{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.card-q li.ok{background:var(--ok-soft)}
.card-q li.ok::before{content:"✓";position:absolute;left:-26px;color:var(--red);font:700 18px var(--sans)}
.card-q .note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--hair-2);color:var(--red);font-size:15.5px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--hair)}
.stats div{padding:22px 0 24px;border-right:1px solid var(--hair);padding-left:20px}
.stats div:first-child{padding-left:0}
.stats div:last-child{border-right:0}
.stats b{display:block;font:600 40px/1 var(--serif);letter-spacing:-.02em}
.stats span{display:block;margin-top:8px;font:500 14px/1.3 var(--sans);color:var(--ink-2)}
.section{padding-block:clamp(44px,6vw,76px);border-bottom:1px solid var(--hair)}
.prose-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px}
.prose{display:grid;gap:16px;max-width:62ch;font-size:18px}
.prose a{text-decoration-color:var(--red);text-decoration-thickness:1.5px}
.h-gap{margin-bottom:28px}
.dom{font:600 14px/1.2 var(--sans);color:var(--ink-3);margin:28px 0 4px}
.skills>div:first-child .dom,.skills>div:nth-child(2) .dom{margin-top:0}
.contact{padding-block:clamp(44px,6vw,72px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.contact-grid p{color:var(--ink-2);margin-top:12px;max-width:56ch}
.contact-lines{margin:0;display:grid;gap:0;border-top:1px solid var(--ink)}
.contact-lines div{padding:12px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;font:500 15px var(--sans)}
.contact-lines dt{color:var(--ink-3)}
.contact-lines dd{margin:0;font-weight:600}
@media (max-width:880px){.prose-row,.contact-grid{grid-template-columns:1fr;gap:20px}}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.section-head p{max-width:52ch;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.step{padding:22px 24px 26px 0;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;min-width:0}
.step+.step{padding-left:24px}
.step:last-child{border-right:0}
.step .k{font:700 12px var(--sans);letter-spacing:.14em;color:var(--red)}
.step p{color:var(--ink-2);flex:1}
.step a{font:600 15px var(--sans);text-decoration:none;color:var(--ink)}
.step a span{color:var(--red)}
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.skills h4{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 6px}
.skills h4:first-child{margin-top:0}
.skill-row{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.skill-row .n{font:500 14px var(--sans);color:var(--ink-3);margin-left:auto}
.skill-row:hover .name{color:var(--red)}

.guides-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.guide-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;text-decoration:none}
.guide-card img{border:1px solid var(--hair-2)}
.guide-card:hover h3{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.guide-card p{color:var(--ink-2);margin-top:8px;font-size:16px}
.guide-card .go{display:inline-block;margin-top:12px;font:500 14px var(--sans);color:var(--ink-3)}
.cta-band{background:var(--ink);color:var(--paper)}
.cta-band .wrap{padding-block:56px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center}
.cta-band h2{color:var(--paper)}
.cta-band p{color:color-mix(in srgb,var(--paper) 75%,transparent);margin-top:12px}
.cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .btn.ghost{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 40%,transparent)}

.contact-lines b{font-weight:700}
footer.foot{padding-block:36px 48px;font:500 14px/1.6 var(--sans);color:var(--ink-3)}
footer.foot .wrap{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(3){padding-left:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:20px 0;border-right:0;border-bottom:1px solid var(--hair)}
  .skills,.guides-row{grid-template-columns:1fr}
  .cta-band .wrap{grid-template-columns:1fr}
}
@media (max-width:420px){.guide-card{grid-template-columns:110px minmax(0,1fr)}}

/* ---------- Page header for inner views */
.page-head{padding-block:40px 28px;border-bottom:1px solid var(--hair)}
.page-head h1{font-size:clamp(34px,5vw,54px);line-height:1.02;letter-spacing:-.025em}
.page-head p{margin-top:12px;color:var(--ink-2);max-width:62ch}

/* ---------- Practice: filters + list */
.bank{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding-block:32px 64px}
.filters{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));align-self:start;font-family:var(--sans);font-size:14.5px;display:grid;gap:22px}
.filters fieldset{border:0;margin:0;padding:0;display:grid;gap:4px}
.filters legend{font:700 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;padding:0}
.chk{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;color:var(--ink-2)}
.chk input{appearance:none;width:16px;height:16px;border:1.5px solid var(--hair-2);border-radius:3px;margin:0;display:grid;place-items:center;flex:none;background:var(--sheet)}
.chk input:checked{border-color:var(--ink);background:var(--ink)}
.chk input:checked::after{content:"";width:8px;height:4px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:rotate(-45deg) translate(1px,-1px)}
.chk input[type=radio]{border-radius:50%}
.chk input[type=radio]:checked::after{width:6px;height:6px;border:0;background:var(--paper);border-radius:50%;transform:none}
.chk .c{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chk:hover{color:var(--ink)}
.group-name{font:600 13px var(--sans);color:var(--ink);margin-top:8px}
.filter-toggle{display:none}
.list-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink);flex-wrap:wrap}
.list-head .count{font:600 15px var(--sans)}
.list-head .acts{display:flex;gap:10px;flex-wrap:wrap}
.qrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 4px;border-bottom:1px solid var(--hair);cursor:pointer;text-decoration:none}
.qrow:hover{background:color-mix(in srgb,var(--sheet) 70%,transparent)}
.qrow .mark{font:700 16px/1.4 var(--sans);text-align:center;color:var(--ink-3)}
.qrow .mark.ok{color:var(--ok)}
.qrow .mark.x{color:var(--red)}
.qrow .ex{font-size:16px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.qrow .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;font:500 12.5px var(--sans);color:var(--ink-3)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--hair);border-radius:99px;white-space:nowrap}
.diff{display:inline-flex;gap:2px;align-items:center}
.diff i{width:6px;height:6px;border-radius:50%;border:1px solid var(--ink-3)}
.diff i.on{background:var(--ink-2);border-color:var(--ink-2)}
.flag-dot{color:var(--red);font:700 13px var(--sans)}
.empty{padding:48px 0;text-align:center;color:var(--ink-2)}
@media (max-width:880px){
  .bank{grid-template-columns:1fr;gap:16px}
  .filters{position:static;display:none;padding:18px;border:1px solid var(--hair);border-radius:8px;background:var(--sheet)}
  .filters.open{display:grid}
  .filter-toggle{display:inline-flex}
}

/* ---------- Question view */
.qview{padding-block:24px 72px}
.qbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--hair);font:500 14px var(--sans);color:var(--ink-2)}
.qbar .src{font-weight:600;color:var(--ink)}
.qbar .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.timer{font:600 15px var(--sans);font-variant-numeric:tabular-nums}
.timer.low{color:var(--red)}
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-bottom:1px solid var(--hair);min-height:420px}
.qgrid>div{padding:32px 36px 36px 0;min-width:0}
.qgrid>div+div{padding:32px 0 36px 36px;border-left:1px solid var(--hair)}
.passage p{margin-bottom:12px;font-size:18px;line-height:1.65}
.passage p.note{margin:0 0 6px;padding-left:18px;text-indent:-14px}
.passage p.verse{margin:0;line-height:1.5}
.blank{display:inline-block;min-width:4.5em;border-bottom:1.5px solid var(--ink);vertical-align:baseline;height:1em}
.tbl-wrap{overflow-x:auto;margin:0 0 18px}
.tbl{border-collapse:collapse;font:500 14px/1.35 var(--sans);min-width:100%}
.tbl caption{text-align:left;font:600 15px var(--sans);margin-bottom:8px;caption-side:top}
.tbl th,.tbl td{border-bottom:1px solid var(--hair);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.tbl th{font-weight:700;color:var(--ink-2);border-bottom-color:var(--ink);font-size:13px}
.tbl td{font-variant-numeric:tabular-nums}
.stem{font:600 18px/1.45 var(--serif);margin-bottom:18px}
.choices{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.choice{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;width:100%;text-align:left;background:var(--sheet);
  border:1.5px solid var(--hair);border-radius:3px;padding:12px 14px;cursor:pointer;font:400 17px/1.45 var(--serif);
  transition:border-color .12s,background .12s,transform .1s var(--ease);position:relative}
.choice:hover{border-color:var(--hair-2)}
.choice:active{transform:scale(.995)}
.choice .l{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-items:center;font:700 13px var(--sans);color:var(--ink-2)}
.choice[aria-pressed="true"]{border-color:var(--ink)}
.choice[aria-pressed="true"] .l{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.choice.elim .t{text-decoration:line-through;text-decoration-color:var(--red);color:var(--ink-3)}
.choice.right{border-color:var(--ok);background:var(--ok-soft)}
.choice.right .l{background:var(--ok);border-color:var(--ok);color:var(--sheet)}
.choice.wrong{border-color:var(--red);background:var(--red-soft)}
.choice.wrong .l{background:var(--red);border-color:var(--red);color:#fff}
.choice .x-btn{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;background:none;color:var(--ink-3);font:600 15px var(--sans);cursor:pointer;border-radius:4px;display:none}
.elim-on .choice .x-btn{display:block}
.elim-on .choice{padding-right:44px}
.qacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.qacts .spacer{flex:1}
.why{margin-top:26px;display:grid;grid-template-columns:52px 1fr;align-items:start}
.why .by{font:italic 600 15px/1.3 var(--serif);color:var(--red)}
.why .by::before{content:"^";display:block;font:600 21px/.8 var(--sans);margin-bottom:1px}
.why p{font:italic 400 17px/1.6 var(--serif);color:var(--ink);margin:0}
.why .verdict{font-style:normal;font-weight:600}

@keyframes whyin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;flex-wrap:wrap}
.qnav .pos{font:500 14px var(--sans);color:var(--ink-3)}
.flag-btn[aria-pressed="true"]{color:var(--red);border-color:var(--red)}
@media (max-width:880px){
  .qgrid{grid-template-columns:1fr}
  .qgrid>div{padding:24px 0}
  .qgrid>div+div{padding:24px 0 28px;border-left:0;border-top:1px solid var(--hair)}
}

/* ---------- Test mode navigator */
.navgrid{display:flex;flex-wrap:wrap;gap:10px 8px;padding:14px 0 6px}
.navgrid button{width:38px;height:38px;border:1.5px dashed var(--ink-3);background:transparent;border-radius:0;font:600 13px var(--sans);cursor:pointer;color:var(--ink-2);position:relative;padding:0}
.navgrid button:hover{border-color:var(--ink);color:var(--ink)}
.navgrid button.done{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--paper)}
.navgrid button.cur{border:2px solid var(--ink);font-weight:700}
.navgrid button.cur::before{content:"";position:absolute;left:50%;top:-10px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--red)}
.navgrid button.flag::after{content:"";position:absolute;top:-2px;right:-2px;border-top:12px solid var(--red);border-left:12px solid transparent}
.navgrid.big button{width:46px;height:46px;font-size:15px}

/* ---------- Test runner, laid out like Bluebook */
.qview.bb{padding-bottom:0}
.bb-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px 16px;padding:14px 0 12px;border-bottom:1px solid var(--ink);font:500 14px var(--sans);color:var(--ink-2)}
.bb-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.bb-head .src{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.bb-clock{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px}
.bb-clock .timer{font:600 22px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.bb-clock .timer.low{color:var(--red)}
.bb-tools{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.bb-warn{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px;padding:10px 14px;border:1.5px solid var(--red);background:var(--sheet);color:var(--red);font:600 14.5px var(--sans)}
.bb-panel{border-bottom:1px solid var(--hair);padding:18px 0 22px;font-size:16.5px;line-height:1.55}
.bb-panel p{max-width:72ch}
.bb-panel p+p{margin-top:10px}
.bb-panel .plain{margin:10px 0 0;max-width:72ch}
.bb-panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.bb-panel-h h2{font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.bb-qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px dashed var(--hair-2)}
.bb-qhead .sp{margin-left:auto;display:flex;gap:8px}
.bb-num{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;background:var(--ink);color:var(--paper);font:700 15px var(--sans)}
.bb-skill{font-size:13px;flex-basis:100%}
.bb-bar{position:sticky;bottom:0;z-index:10;background:var(--bg);border-top:1px solid var(--ink);margin-top:28px;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.bb-bar-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.bb-bar-in>:last-child{justify-self:end;grid-column:3}
.bb-bar .btn{white-space:nowrap}
.bb-qbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);font:600 14px var(--sans);cursor:pointer;white-space:nowrap}
.bb-qbtn::after{content:"";border:5px solid transparent;border-bottom-color:currentColor;margin-top:-5px}
.bb-qbtn[aria-expanded="true"]::after{border-bottom-color:transparent;border-top-color:currentColor;margin-top:5px}
.bb-pos{font:600 14px var(--sans);color:var(--ink-2)}
.bb-nav{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:min(580px,100%);max-height:calc(100vh - 140px);overflow:auto;margin-bottom:8px;padding:16px 18px;background:var(--sheet);border:1px solid var(--ink)}
.bb-nav p:last-child{margin-top:10px}
.bb-legend{display:flex;gap:6px 16px;flex-wrap:wrap;font:500 13px var(--sans);color:var(--ink-2)}
.bb-legend i{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border:1.5px dashed var(--ink-3);position:relative}
.bb-legend i.done{border-style:solid;border-color:var(--ink);background:var(--ink)}
.bb-legend i.cur{border:2px solid var(--ink)}
.bb-legend i.flag::after{content:"";position:absolute;top:-2px;right:-2px;border-top:8px solid var(--red);border-left:8px solid transparent}
.passage mark.hl{background:var(--mark);color:inherit;border-bottom:2px solid var(--red);padding:0}
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.ref-grid figure{margin:0;padding:12px 8px 14px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:grid;gap:6px;justify-items:center;align-content:start;text-align:center;background:var(--sheet)}
.ref-grid svg{width:120px;height:92px;color:var(--ink);overflow:visible}
.ref-grid .s{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.ref-grid .d{stroke-dasharray:4 3}
.ref-grid .dot{fill:currentColor}
.ref-grid text{fill:currentColor;font:italic 14px var(--serif)}
.ref-grid text.sm{font:500 10px var(--sans)}
.ref-grid figcaption{font-size:16px;line-height:1.5}
.ref-facts{margin:14px 0 0;padding-left:20px;display:grid;gap:4px;font-size:16px}
.spr label{font:600 15px var(--sans)}
.spr-help{font-size:13.5px;max-width:44ch}
.spr-prev{font:500 14px var(--sans);color:var(--ink-2);display:flex;align-items:center;gap:10px;min-height:44px}
.spr-prev .v{font:500 22px/1.2 var(--serif);color:var(--ink)}
.bb-review{padding:32px 0 8px;max-width:760px;margin:0 auto}
.bb-review h1{font-size:clamp(30px,4.5vw,44px);margin-bottom:10px}
.bb-review h1:focus{outline:none}
.bb-review-box{margin-top:24px;padding:18px 20px;border:1px solid var(--ink);background:var(--sheet)}
.bb-sum{margin-top:16px;font-size:15px;color:var(--ink-2)}
.bb-sum b{color:var(--red)}
@media (max-width:640px){
  .bb-top{grid-template-columns:minmax(0,1fr) auto}
  .bb-tools{grid-column:1/-1;justify-content:flex-start}
  .bb-tools:empty{display:none}
  .bb-qbtn{padding:0 10px;font-size:13.5px}
  .bb-pos{display:none}
  .bb-bar .btn.sm{padding:0 12px}
  .bb-review-box{padding:14px 12px}
}

/* ---------- Results */
.result{padding-block:40px 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px}
.score-big{font:600 clamp(72px,11vw,128px)/.9 var(--serif);letter-spacing:-.04em}
.score-big small{font-size:.35em;color:var(--ink-3);letter-spacing:0}
.stamp{display:inline-block;margin-top:18px;padding:8px 14px;border:2px solid var(--red);color:var(--red);font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-3deg);border-radius:4px}
.bk-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 48px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair);font:500 15px var(--sans)}
.meter{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .6s var(--ease)}
.meter i.low{background:var(--red)}
@media (max-width:880px){.result{grid-template-columns:1fr;gap:28px}}

/* ---------- Papers */
.papers{padding-block:32px 72px;display:grid;gap:0}
.paper{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--hair)}
.paper .when{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.paper h3{font-size:24px}
.paper .mods{display:flex;gap:10px;flex-wrap:wrap}
.paper .info{font:500 14px var(--sans);color:var(--ink-3);margin-top:6px}
.month{border-top:1px solid var(--ink)}
.month+.month{margin-top:8px}
.month summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;cursor:pointer;list-style:none;border-bottom:1px solid var(--hair)}
.month summary::-webkit-details-marker{display:none}
.month summary .mname{font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.month summary .mname::before{content:"+";display:inline-block;width:1.2em;color:var(--ink-3)}
.month[open] summary .mname::before{content:"\2212"}
.month summary .mcount{font:500 13px var(--sans);color:var(--ink-3)}
.paper .when{color:var(--ink)}
.callout{margin-top:24px;padding:14px 0 0;border-top:1px solid var(--hair-2);font:500 14.5px/1.5 var(--sans);color:var(--ink-2);max-width:70ch}
@media (max-width:880px){.paper{grid-template-columns:1fr;gap:12px}}

/* ---------- Guides page */
.guide-full{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;padding-block:44px;border-bottom:1px solid var(--hair)}
.guide-full .cover{border:1px solid var(--hair-2)}
.guide-full ul{margin:16px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)}
.peek{display:flex;gap:14px;margin-top:22px;overflow-x:auto;padding-bottom:8px}
.peek img{width:150px;flex:none;border:1px solid var(--hair)}
.guide-full .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.soon{padding-block:36px 72px}
.soon-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.soon-list{gap:4px 18px}
.soon-list span{font:500 15px var(--sans);color:var(--ink-3)}
@media (max-width:880px){.guide-full{grid-template-columns:1fr;gap:24px}.guide-full .cover{max-width:240px}}

/* ---------- Words */
.words-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:22px 0;border-bottom:1px solid var(--ink)}
.search{flex:1;min-width:220px;height:46px;border:1.5px solid var(--hair-2);border-radius:4px;background:var(--sheet);padding:0 14px;font:500 16px var(--sans);color:var(--ink)}
.search:focus{border-color:var(--ink);outline:none}
.seg{display:inline-flex;border:1.5px solid var(--hair-2);border-radius:4px;overflow:hidden;font:600 14px var(--sans)}
.seg button{border:0;background:transparent;padding:0 14px;height:43px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.wl{width:100%;border-collapse:collapse}
.wl td{padding:14px 12px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.wl .w{font:600 19px/1.3 var(--serif);width:22%;min-width:120px}
.wl .d{font-size:16.5px}
.wl .d i{display:block;color:var(--ink-3);margin-top:4px;font-size:15.5px}
.wl .t{font:500 13px var(--sans);color:var(--ink-3);white-space:nowrap;text-align:right;width:110px}
.wl .t b{color:var(--red);font-weight:700}
.more-row{text-align:center;padding:24px 0}
.flash{max-width:620px;margin:36px auto 64px;text-align:center}
.fcard{perspective:1200px;height:300px;cursor:pointer;margin-bottom:20px}
.fcard .in{position:relative;width:100%;height:100%;transition:transform .45s var(--ease);transform-style:preserve-3d}
.fcard.flip .in{transform:rotateY(180deg)}
.fcard .side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--sheet);border:1px solid var(--hair-2);border-radius:3px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px}
.fcard .back{transform:rotateY(180deg)}
.fcard .word{font:600 clamp(36px,6vw,54px)/1 var(--serif);letter-spacing:-.02em}
.fcard .hint{margin-top:14px;font:500 13px var(--sans);color:var(--ink-3)}
.fcard .def{font-size:21px;line-height:1.45}
.fcard .exs{margin-top:14px;font-style:italic;color:var(--ink-2)}
.fbar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media (max-width:600px){.wl .t{display:none}.wl .w{width:34%}}

/* ---------- Progress */
.prog{padding-block:32px 72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:360px;margin-top:14px}
.days span{aspect-ratio:1;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;font:600 11px var(--sans);color:var(--ink-3)}
.days span.on{background:var(--red);border-color:var(--red);color:#fff}
.days .lbl{border:0;aspect-ratio:auto;font-size:10.5px}
.big-n{font:600 56px/1 var(--serif);letter-spacing:-.03em}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);margin-bottom:32px}
.kv div{padding:16px 16px 18px 0;border-right:1px solid var(--hair)}
.kv div+div{padding-left:16px}
.kv div:last-child{border-right:0}
.kv span{display:block;font:500 13.5px var(--sans);color:var(--ink-2);margin-top:6px}
@media (max-width:880px){.prog{grid-template-columns:1fr}}

/* ---------- Classes */
.classes{padding-block:40px 72px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px}
.classes ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:0;border-top:1px solid var(--ink)}
.classes ol li{counter-increment:s;padding:16px 0 16px 44px;border-bottom:1px solid var(--hair);position:relative}
.classes ol li::before{content:counter(s) ".";position:absolute;left:0;top:16px;font:600 18px/1.3 var(--serif);color:var(--ink-3)}
.classes ol li b{display:block;font-weight:600}
.classes ol li span{color:var(--ink-2)}
.panel{border-top:1px solid var(--ink);padding:18px 0 0;align-self:start}
.panel h3{margin-bottom:10px}
.panel .row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);font:500 15px var(--sans)}
.panel .row:last-of-type{border-bottom:0}
.copy-btn{background:none;border:1px solid var(--hair-2);border-radius:6px;font:600 12px var(--sans);padding:4px 8px;cursor:pointer;color:var(--ink-2)}
@media (max-width:880px){.classes{grid-template-columns:1fr}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--paper);
  font:600 14px var(--sans);padding:12px 18px;border-radius:8px;transition:opacity .2s,transform .25s var(--ease);pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes viewin{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .fcard .in{transition:none}
}

/* ---------- Night hero */
.hero.night{position:relative;overflow:hidden;background:#101216;color:#f5f1e8;border-bottom:0;
  --ink:#f5f1e8; --ink-2:#c9c3b7; --ink-3:#9a948a; --red:#ef7a62; --star:#f5f1e8; --spark:#ef7a62}
.hero.night .sky{position:absolute;inset:0;display:block;pointer-events:none}
.hero.night .wrap{position:relative}
.hero.night .btn{background:#f5f1e8;color:#16181d;border-color:#f5f1e8}
.hero.night .textlink{color:#f5f1e8}
.hero.night .pen-strike{color:#8f897f}
.hero.night .card-q{--ink:#16181d; --ink-2:#4a4d55; --ink-3:#6b6e76; --red:#bf3a25; color:#16181d;background:#fffdf8;border-color:#fffdf8}
.hero.night .card-q li.ok{background:#dbeadf}
.sky-toggle{position:absolute;z-index:2;right:max(16px,env(safe-area-inset-right,0px));bottom:14px;background:none;border:0;color:#9a948a;font:500 12.5px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px}
.sky-toggle:hover{color:#f5f1e8}

/* ---------- Math, figures, tests, about */
.qgrid.one{grid-template-columns:minmax(0,760px);justify-content:center}
.qgrid.one>div:first-child{display:none}
.qgrid.one>div+div{border-left:0;padding-left:0}
.fig{margin:0 0 18px;background:#fff;padding:12px;border:1px solid var(--hair);border-radius:2px;display:flex;justify-content:center}
.fig img{max-height:340px;width:auto}
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.86em;line-height:1.1;margin:0 .12em}
.frac>span:first-child{border-bottom:1px solid currentColor;padding:0 .15em}
.frac>span:last-child{padding:0 .15em}
.ov{border-top:1px solid currentColor;padding-left:.08em}
.stem{font:600 18px/1.55 var(--serif);margin-bottom:18px}
.stem i,.choice i,.tbl i,.why i{font-family:var(--serif);font-style:italic}
.tbl.math td,.tbl.math th{font-family:var(--serif);font-size:16px;text-align:center}
.tbl.mini{min-width:0;width:auto}
.tbl.mini td,.tbl.mini th{font:400 16px var(--serif);padding:3px 14px 3px 0}
.passage u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.spr{display:grid;gap:10px}
.spr-in{width:220px;max-width:100%;height:52px;border:1.5px solid var(--ink-3);border-radius:3px;background:var(--sheet);color:var(--ink);font:500 22px var(--sans);padding:0 14px;font-variant-numeric:tabular-nums}
.spr-in:focus{outline:2px solid var(--red);outline-offset:2px;border-color:var(--ink)}
.spr-in.right{border-color:var(--ok);background:var(--ok-soft)}
.spr-in.wrong{border-color:var(--red);background:var(--red-soft)}
.interlude{padding-block:56px 80px;max-width:720px}
.interlude h1{font-size:clamp(34px,5vw,52px);margin:6px 0 14px}
.interlude .lead{margin-bottom:18px}
.plain{margin:0 0 8px;padding-left:20px;display:grid;gap:6px;color:var(--ink-2)}
.big-timer{font:600 64px/1 var(--sans);letter-spacing:-.02em;margin:24px 0}
.about{padding-block:36px 72px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px}
.about .prose{font-size:18.5px}
@media (max-width:880px){.about{grid-template-columns:1fr;gap:32px}.nav{gap:0}}
@media (min-width:881px) and (max-width:1060px){.nav a{padding:10px 8px;font-size:14.5px}}

.stem.m{font-weight:400;font-size:19px}

/* Built-in tools: floating windows for the calculator, reference and scratchpad */
.tool-win{position:fixed;z-index:60;right:16px;top:178px;background:var(--sheet);border:1px solid var(--ink);display:flex;flex-direction:column;max-width:calc(100vw - 32px)}
.tool-win[hidden]{display:none}
.tool-h{display:flex;align-items:center;gap:14px;padding:8px 12px;border-bottom:1px solid var(--hair);font:600 14px/1.2 var(--sans);cursor:move;user-select:none;touch-action:none}
.tool-t{flex:1}
.tool-acts{display:flex;gap:12px}
.tool-acts .link[aria-pressed="true"]{color:var(--red)}
.tool-b{overflow:auto}
.tool-win.calc{left:16px;right:auto;width:min(480px,calc(100vw - 32px));height:min(540px,calc(100vh - 274px));resize:both;overflow:hidden}
.tool-win.calc .tool-b{flex:1;overflow:hidden}
.tool-win.calc iframe{width:100%;height:100%;border:0;display:block}
.tool-win.ref{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 274px)}
.tool-win.ref .tool-b{padding:12px 16px}
.tool-win.pad{top:auto;bottom:88px;width:min(460px,calc(100vw - 32px))}
.tool-win.pad canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:var(--sheet)}
/* Mistakes log */
.mk-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:28px 0 14px}
.mk-bar .sp{flex:1}
.mk-bar select,.mk select{font:400 14px var(--sans);padding:4px 6px;border:1px solid var(--hair-2);background:var(--sheet);color:var(--ink);border-radius:2px}
table.mk{width:100%;border-collapse:collapse;font:400 14.5px/1.4 var(--sans)}
table.mk th{text-align:left;font-weight:600;border-bottom:1px solid var(--ink);padding:8px 10px 8px 0}
table.mk td{border-bottom:1px solid var(--hair);padding:9px 10px 9px 0;vertical-align:top}
table.mk s{color:var(--red)}
@media (max-width:760px){table.mk th:nth-child(1),table.mk td:nth-child(1),table.mk th:nth-child(5),table.mk td:nth-child(5){display:none}}
/* Progress charts */
svg.chart{width:100%;max-width:560px;height:auto;display:block;margin-top:6px}
svg.chart .grid{stroke:var(--hair);stroke-width:1}
svg.chart .ax{font:400 11px var(--sans);fill:var(--ink-3)}
svg.chart .ln{fill:none;stroke:var(--ink);stroke-width:1.6}
svg.chart .pt{fill:var(--red)}