/* AIRF live quiz: one stylesheet for the home page, self-paced mode, presenter screen and phones. */
:root{
  --bg:#F6F5FA; --surface:#FFFFFF; --ink:#1B1530; --body:#2B2540; --muted:#655F78; --line:#E3E0EC;
  --brand:#361A54; --brand-2:#4C2BD6; --brand-soft:#EEE8F7; --accent:#FDD633;
  --green:#38761D; --green-l:#6AA84F; --green-soft:#E3F1DC; --red:#B3261E; --red-soft:#FBE4E1;
  --sage:#D9EAD3; --sage-l:#6AA84F; --lav:#E4DCF1; --lav-l:#8E7CC3; --blue:#CFE2F3; --blue-l:#3C78D8;
  --peach:#FCE5CD; --peach-l:#E69138; --pink:#F4CCCC; --pink-l:#CC4125; --yellow:#FFF2CC;
  --qc:#E69138; --kc:#3C78D8; --vc:#6AA84F;
  --a:#3D6FE0; --b:#8B5CF6; --c:#E07A2E; --d:#14918A;
  --font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:"IBM Plex Sans","Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;cursor:pointer;color:inherit}
a{color:var(--brand-2)}
.hidden{display:none!important}
h1,h2,h3,h4{font-family:var(--head)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 22px;font-weight:700;font-size:16px;background:var(--brand);color:#fff;text-decoration:none;transition:transform .1s,opacity .2s,background .2s}
.btn:hover{opacity:.93}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.big{font-size:19px;padding:17px 30px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn .arr{color:var(--accent)}
.btn.ghost .arr{color:var(--brand)}
.kbd{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--surface)}
.btn .kbd{color:#d9cfe8;border-color:rgba(255,255,255,.3);background:transparent}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- home ---------- */
.home{max-width:1100px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 18px 64px}
.brandline{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--brand);letter-spacing:.02em}
.brandline .mark{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:var(--accent);font-weight:800;font-size:14px}
.home h1{font-size:clamp(30px,4.6vw,50px);line-height:1.08;letter-spacing:-.02em;margin:22px 0 10px}
.home .lede{font-size:clamp(16px,1.6vw,19px);color:var(--muted);margin:0;max-width:680px;line-height:1.5}
.sect{margin:40px 0 14px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.qcard .cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--brand)}
.qcard .cvr{display:block;background:var(--brand)}
@media (min-width:860px){
  .cards.one{grid-template-columns:minmax(0,1fr)}
  .cards.one .qcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .cards.one .cvr{display:flex;align-items:center}
  .cards.one .cb{padding:28px 30px}
  .cards.one h3{font-size:28px}
}
.qcard .cb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.qcard .kick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--brand)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700;background:var(--brand-soft);color:var(--brand)}
.pill.done{background:var(--green-soft);color:var(--green)}
.pill.live{background:#FDECEC;color:var(--red)}
.pill.cohort{font-size:14px;padding:6px 12px;margin:0 0 14px}
.qcard h3{margin:0;font-size:22px;line-height:1.2}
.qcard .meta{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0}
.qcard .prog{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.qcard .prog i{display:block;height:100%;background:var(--green-l)}
.qcard .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.livebar{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:18px;padding:18px 20px}
.livebar b{font-size:18px}
.livebar p{margin:2px 0 0;color:#D9CFE8;font-size:14.5px}
.livebar .btn{background:var(--accent);color:var(--brand);margin-left:auto}
.rec{width:10px;height:10px;border-radius:50%;background:#FF5A4E;box-shadow:0 0 0 0 rgba(255,90,78,.6);animation:rec 1.6s infinite;flex:none}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,90,78,.55)}70%{box-shadow:0 0 0 12px rgba(255,90,78,0)}100%{box-shadow:0 0 0 0 rgba(255,90,78,0)}}
.foot{margin-top:46px;font-size:13.5px;color:var(--muted)}

/* ---------- page frame (self-paced and presenter) ---------- */
.pv{max-width:1280px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) clamp(16px,3.4vw,44px) 56px}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14.5px;color:var(--muted);font-weight:600;min-height:40px}
.topbar .title{margin-right:auto;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:10px;min-width:0}
.topbar .title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:700;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px;font-size:14px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap}
.progress{height:6px;background:var(--line);border-radius:99px;margin:12px 0 0;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);transition:width .4s}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots button{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;color:var(--muted);padding:0}
.dots button.ok{background:var(--green-soft);border-color:var(--green-l);color:var(--green)}
.dots button.no{background:var(--red-soft);border-color:#E3958E;color:var(--red)}
.dots button.cur{outline:2.5px solid var(--brand);outline-offset:1px;color:var(--ink)}
.qnum{font-size:15px;font-weight:800;color:var(--brand);margin:26px 0 10px;letter-spacing:.01em}

/* question layout: illustration beside the question on wide screens, between question and options on phones */
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"q q" "opts illus";gap:0 36px;align-items:start}
.qgrid .qa .qtext{max-width:1150px}
@media (min-width:921px){.qgrid .ia svg:not(.katex svg){max-height:max(420px,calc(100vh - 290px))}}
.qgrid .qa{grid-area:q}
.qgrid .ia{grid-area:illus}
.qgrid .oa{grid-area:opts}
.qtext{font-size:clamp(21px,2.3vw,34px);line-height:1.22;font-weight:700;letter-spacing:-.01em;margin:0 0 20px}
.illus{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;overflow:hidden}
.illus svg{display:block;width:100%;height:auto}
.illus .ilcap{font-size:14px;color:var(--muted);margin:10px 2px 0;line-height:1.45;text-align:center}
@media (max-width:920px){
  .qgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"q" "illus" "opts"}
  .qgrid .ia{margin-bottom:16px}
}

/* options: presenter */
.opts{display:grid;gap:12px}
.opt{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:14px 16px;min-height:70px;overflow:hidden;transition:border-color .3s,opacity .3s;text-align:left;width:100%}
.opt .fill{position:absolute;inset:0 auto 0 0;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1);opacity:.14}
.opt .L{position:relative;flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.opt .txt{position:relative;font-size:clamp(16px,1.35vw,20px);font-weight:600;line-height:1.3;flex:1}
.opt .pct{position:relative;font-size:clamp(19px,1.8vw,26px);font-weight:800;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.opt .pct small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.opt .tick{position:relative;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.opt.correct{border-color:var(--green-l);background:var(--green-soft)}
.opt.correct .tick{background:var(--green-l)}
.opt.wrong{border-color:#E3958E;background:#FFF8F7}
.opt.wrong .tick{background:var(--red)}
.opt.dim{opacity:.55}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
button.opt:not([disabled]):hover{border-color:#BDB4D4}
button.opt[disabled]{cursor:default}
.c0 .L,.c0 .fill{background:var(--a)}.c1 .L,.c1 .fill{background:var(--b)}.c2 .L,.c2 .fill{background:var(--c)}.c3 .L,.c3 .fill{background:var(--d)}
.opt.correct .fill{background:var(--green-l);opacity:.2}
.controls{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}
.controls .info{margin-right:auto;font-size:15px;color:var(--muted);font-weight:600}
.controls .info b{color:var(--ink);font-size:21px;font-variant-numeric:tabular-nums}

/* verdict (self-paced) */
.verdict{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:16px;padding:14px 16px;margin-top:14px;font-weight:700;font-size:16.5px}
.verdict.ok{background:var(--green-soft);color:var(--green)}
.verdict.no{background:var(--red-soft);color:var(--red)}
.verdict.none{background:var(--brand-soft);color:var(--brand)}
.verdict .btn{margin-left:auto}

/* ---------- explanation ---------- */
.acc{margin-top:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .chev{margin-left:auto;transition:transform .2s;color:var(--muted)}
.acc[open]>summary .chev{transform:rotate(180deg)}
.acc>.body{padding:4px clamp(14px,2.4vw,30px) 26px;border-top:1px solid var(--line)}
.exhead{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:30px 0 12px}
.ex{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px clamp(14px,2.4vw,30px) 26px}
.panel{padding:22px 0 6px;border-bottom:1px dashed var(--line)}
.panel:last-of-type{border-bottom:0}
.panel h4{font-size:clamp(18px,1.6vw,21px);line-height:1.3;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.pn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;font-family:var(--font)}
.panel p,.panel li{font-size:16.5px;line-height:1.62;color:var(--body);max-width:78ch}
.panel p{margin:0 0 12px}
.panel ul{margin:0 0 12px;padding-left:22px}
.panel li{margin:4px 0}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:820px){.cols{grid-template-columns:minmax(0,1fr)}}
.eqbox{background:#FAF8FD;border:1px solid var(--lav);border-radius:14px;padding:12px 16px;margin:6px 0 14px;overflow-x:auto;overflow-y:hidden;text-align:center}
.eqbox .katex-display{margin:.5em 0}
.eqcap{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5}
.katex{font-size:1.08em}
code.tex{font-size:14px;background:#F4F2F8;padding:2px 6px;border-radius:6px}
.take{background:var(--yellow);border:1px solid #434343;border-radius:12px;padding:14px 18px;font-weight:700;text-align:center;font-size:16.5px;line-height:1.5;margin-top:22px}
.whynot{display:grid;gap:8px;margin:4px 0 6px}
.whynot div{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:15.5px;line-height:1.5;color:var(--body)}
.whynot .L{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;opacity:.75}
.whynot i{font-style:normal;color:var(--muted)}
.pc{border-radius:14px;padding:14px 16px;border:1.5px solid;font-size:15.5px;line-height:1.55}
.pc b.h{display:block;font-family:var(--head);font-size:16.5px;margin-bottom:4px}
.pc.sage{background:var(--sage);border-color:var(--sage-l)}
.pc.lav{background:var(--lav);border-color:var(--lav-l)}
.pc.blue{background:var(--blue);border-color:var(--blue-l)}
.pc.peach{background:var(--peach);border-color:var(--peach-l)}
.pc.pink{background:var(--pink);border-color:var(--pink-l)}
.pc.plain{background:#FAF9FC;border-color:var(--line)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:4px 0 12px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45;margin:4px 0 12px}
.cmp th,.cmp td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--head);font-size:15.5px}
.cmp thead th:nth-child(2){background:var(--blue);border-radius:10px 0 0 0}
.cmp thead th:nth-child(3){background:var(--lav);border-radius:0 10px 0 0}
.cmp tbody th{color:var(--muted);font-weight:700;width:22%}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- widgets ---------- */
.wg{background:#FCFBFE;border:1px solid var(--line);border-radius:16px;padding:16px;margin:4px 0 14px}
.wg svg{display:block;width:100%;height:auto}
.wg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.45;min-height:34px}
.replay{flex:none;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--muted)}
.replay:hover{border-color:#BDB4D4;color:var(--ink)}
.cap{font-size:14.5px;color:var(--muted);line-height:1.5}
.cap b{color:var(--ink)}

/* tokens */
.toks{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tk{display:inline-flex;align-items:center;border:1.5px solid #CDD2DF;border-radius:9px;padding:5px 10px;font-size:15px;font-weight:600;background:#fff;transition:all .35s;line-height:1.25}
.tk.blank{border-style:dashed;border-color:var(--brand);color:var(--brand);font-weight:800;min-width:38px;justify-content:center}
.tk.win{background:var(--peach);border-color:var(--peach-l)}
.tk.tgt{background:var(--yellow);border-color:#C9A227;border-style:dashed}
.tk.fade{color:#B4AEC3;border-color:#E4E1EA}
.tk.ghost{opacity:.3}
.tk.clue{background:var(--pink);border-color:var(--pink-l);color:#7A1F12}
.tk.new{background:var(--sage);border-color:var(--sage-l);animation:pop .45s both}
.tk.q{background:var(--peach);border-color:var(--peach-l)}
.tk.k{background:var(--blue);border-color:var(--blue-l)}
.tk.v{background:var(--sage);border-color:var(--sage-l)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes fadeup{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}

/* bars */
.brow{display:grid;grid-template-columns:var(--lw,92px) 1fr 52px;gap:10px;align-items:center;font-size:15px;margin:6px 0}
.brow .t{font-weight:700;text-align:right}
.brow .bar{height:16px;background:#F0EEF5;border-radius:5px;overflow:hidden}
.brow .bar i{display:block;height:100%;width:0;border-radius:5px;background:var(--lav-l);transition:width .8s cubic-bezier(.2,.8,.2,1),background .4s}
.brow .n{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.brow.pick .bar i{background:var(--green-l)}
.brow.pick .t,.brow.pick .n{color:var(--green)}
.brow .n.neg{color:var(--red)}
.more{font-size:13.5px;color:var(--muted);margin:8px 0 0 4px}

/* next-token widget */
.nt-sent{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}
.nt-dist{margin-top:14px;min-height:150px}

/* q1 illustration: bottom to top */
.flowup{display:flex;flex-direction:column-reverse;align-items:center;gap:6px}
.flowup .ar{color:#8A84A0;font-size:22px;line-height:1}
.modelbox{border-radius:14px;background:var(--brand-2);color:#fff;font-weight:800;padding:14px 22px;font-size:16px;text-align:center}
.modelbox small{display:block;font-weight:600;color:#D9D2FA;font-size:13px;margin-top:2px}

/* counts table (n-gram) */
.counts{display:grid;gap:4px;max-width:360px;margin:12px auto 0}
.counts .brow{grid-template-columns:70px 1fr 46px}

/* attention stepper */
.st-eq{font-size:clamp(15px,2.2vw,20px);background:#FAF8FD;border:1px solid var(--lav);border-radius:14px;padding:8px 12px;text-align:center;overflow-x:auto;overflow-y:hidden}
.st-eq .katex-display{margin:.35em 0}
.eq-q,.eq-k,.eq-v,.eq-sc,.eq-sm{border-radius:6px;padding:1px 2px;transition:background .35s,box-shadow .35s}
.eq-q{color:var(--qc)}.eq-k{color:var(--kc)}.eq-v{color:var(--vc)}
.st[data-s="1"] .eq-q,.st[data-s="1"] .eq-k,.st[data-s="1"] .eq-v{background:#FFF2CC;box-shadow:0 0 0 2px #FFF2CC}
.st[data-s="2"] .eq-qk{background:#FFF2CC;box-shadow:0 0 0 3px #FFF2CC;border-radius:6px}
.st[data-s="3"] .eq-sc{background:#FFF2CC;box-shadow:0 0 0 3px #FFF2CC}
.st[data-s="4"] .eq-sm{background:#FFF2CC;box-shadow:0 0 0 3px #FFF2CC}
.st[data-s="5"] .eq-v{background:#FFF2CC;box-shadow:0 0 0 3px #FFF2CC}
.st[data-s="6"] .st-eq{background:#FFF2CC;border-color:#C9A227}
.st-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.st-dots{display:flex;gap:6px;margin-right:auto}
.st-dots button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-weight:800;font-size:13px;color:var(--muted);padding:0}
.st-dots button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.st-dots button.seen{border-color:#BDB4D4;color:var(--ink)}
.st-title{font-family:var(--head);font-weight:700;font-size:19px;margin:14px 0 10px}
.st-stage{min-height:250px;display:flex;flex-direction:column;justify-content:center}
.st-text{margin-top:12px}
.st-text p{font-size:16px;line-height:1.6;margin:0 0 10px;color:var(--body)}
.anim-in>*{animation:fadeup .45s both}
.anim-in>*:nth-child(2){animation-delay:.25s}.anim-in>*:nth-child(3){animation-delay:.5s}.anim-in>*:nth-child(4){animation-delay:.75s}.anim-in>*:nth-child(5){animation-delay:1s}
.vec{display:inline-grid;grid-auto-flow:column;gap:3px;vertical-align:middle}
.vec span{width:clamp(24px,4.6vw,36px);height:clamp(24px,4.6vw,32px);border-radius:6px;display:grid;place-items:center;font-size:clamp(10.5px,1.6vw,12.5px);font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid rgba(0,0,0,.08)}
.vec.mini span{width:13px;height:13px;border-radius:3px;font-size:0}
.s1{display:grid;gap:10px;justify-content:center}
.s1 .xrow{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
.s1 .row{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center}
.s1 .op{font-weight:700;color:var(--muted);font-size:15px;white-space:nowrap}
.s1 .role{font-size:15px;line-height:1.35}
.s1 .role b{display:block}
.sr{display:grid;grid-template-columns:72px auto 1fr 50px;gap:10px;align-items:center;margin:5px 0;font-size:15px}
.sr .t{font-weight:700;text-align:right}
.sr .bar{height:16px;background:#F0EEF5;border-radius:5px;overflow:hidden}
.sr .bar i{display:block;height:100%;border-radius:5px;background:var(--kc);transition:width .9s cubic-bezier(.2,.8,.2,1),background .5s}
.sr .n{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;transition:color .3s}
.sr.top .t{color:var(--qc)}
.sr .bar i.w{background:var(--lav-l)}
.sr.top .bar i.w{background:var(--qc)}
.sr .vv{transition:opacity .6s}
.sumline{display:flex;justify-content:flex-end;gap:10px;font-size:14px;color:var(--muted);margin-top:6px;font-weight:600}
.outrow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--line);font-weight:700}
.mats{--cell:clamp(8px,1.3vw,12px);display:flex;align-items:center;justify-content:center;gap:10px 12px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:20px}
.mats .op{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1}
.mats .op small{font-size:11px;font-weight:700;text-align:center;margin-top:3px}
.mat{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.mat .ml{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.mat .g{display:grid;gap:2px}
.mat .g span{width:var(--cell);height:var(--cell);border-radius:2px}
.st-dots button.on,.st-dots button.on.seen{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:560px){
  .st-eq{font-size:clamp(11px,3.2vw,16px);padding:6px 6px}
  .st-nav{gap:8px}
  .st-dots{width:100%;margin-right:0}
  .st-dots button{width:30px;height:30px}
  .st-nav .btn.small{padding:8px 11px;font-size:13.5px}
  .eqbox{padding:10px 8px}
  .eqbox .katex{font-size:1em}
  .st-title{font-size:17px}
}

/* feed-forward */
.ffn-n{transition:fill .35s,stroke .35s}
.ffn-e{stroke:#E1DDEA;transition:stroke .35s,stroke-opacity .35s}
.ffnsvg.p1 .e1{stroke:var(--lav-l);stroke-opacity:.55}
.ffnsvg.p1 .in{fill:var(--lav);stroke:var(--lav-l)}
.ffnsvg.p2 .hid.on{fill:var(--peach);stroke:var(--peach-l)}
.ffnsvg.p2 .hid.off{fill:#F1F0F3;stroke:#C9C3D6}
.ffnsvg.p3 .e2.on{stroke:var(--peach-l);stroke-opacity:.6}
.ffnsvg.p3 .out{fill:var(--sage);stroke:var(--sage-l)}
.pertok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.pertok .col{display:flex;flex-direction:column-reverse;align-items:center;gap:6px}
.pertok .box{border-radius:10px;background:var(--peach);border:1.5px solid var(--peach-l);font-weight:800;padding:8px 12px;font-size:14px}
.pertok .ar{color:#8A84A0}

/* causal mask grid */
.mgrid{--n:8;--cs:clamp(22px,7.2vw,52px);display:grid;grid-template-columns:auto repeat(var(--n),var(--cs));gap:clamp(3px,.8vw,6px);justify-content:center;align-items:end;margin:6px auto 4px}
.mgrid .mcol{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-size:clamp(11px,2.4vw,16px);justify-self:center;padding-top:6px;white-space:nowrap;transition:color .3s}
.mgrid .mrow{font-weight:800;text-align:right;padding-right:clamp(4px,1.2vw,10px);font-size:clamp(12px,2.8vw,18px);align-self:center;white-space:nowrap;cursor:pointer;transition:color .3s}
.mgrid .mc{height:var(--cs);border-radius:clamp(5px,1vw,9px);display:grid;place-items:center;border:1.5px solid;transition:opacity .3s,transform .3s}
.mgrid .mc svg{width:52%;height:52%}
.mgrid .mc.y{background:#E3F1DC;border-color:#93C47D}
.mgrid .mc.n{background:#F1F0F3;border-color:#DAD6E0}
.mgrid.play .mc{animation:pop .4s both;animation-delay:var(--d)}
.mgrid.sel .mc{opacity:.28}
.mgrid.sel .mc.on{opacity:1}
.mgrid.sel .mrow,.mgrid.sel .mcol{color:#B4AEC3}
.mgrid.sel .mrow.on,.mgrid.sel .mcol.on{color:var(--ink)}
.mgrid.sel .mc.on.y{transform:scale(1.06)}
.mlegend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:10px}
.mlegend span{display:inline-flex;align-items:center;gap:6px}
.mlegend i{width:18px;height:18px;border-radius:5px;border:1.5px solid;display:inline-block}
.trainpairs{display:grid;grid-template-columns:auto auto auto;gap:6px 12px;justify-content:center;align-items:center}
.trainpairs .h{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.trainpairs .ar{color:#8A84A0;font-weight:700}
.wtab{border-collapse:separate;border-spacing:4px;font-size:14px;margin:0 auto}
.wtab th{font-weight:700;color:var(--muted);font-size:13px;padding:2px 4px}
.wtab td{min-width:40px;text-align:center;padding:6px 4px;border-radius:7px;font-weight:700;font-variant-numeric:tabular-nums;background:#F4F2F8}
.wtab td.lab{background:none;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.wtab td.inf{background:#F1F0F3;color:var(--red)}
.wtab td.zero{background:#F1F0F3;color:#B4AEC3}
.wtab td.pos{background:#E3F1DC;color:var(--green)}

/* positions */
.bag{border:2px dashed var(--lav-l);border-radius:16px;padding:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;background:#FAF8FD}
.sent2{display:grid;gap:8px;justify-items:center}
.addrow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--muted)}
.addrow .box{border-radius:10px;padding:8px 12px;font-size:14px;border:1.5px solid;color:var(--ink)}
.rope-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;text-align:center}
.rope-read div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 6px;font-size:13px;color:var(--muted);font-weight:600}
.rope-read b{display:block;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}

/* softmax */
.tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:#F0EEF5;border-radius:12px;padding:4px;margin-bottom:12px}
.tabs button{border:0;background:transparent;border-radius:9px;padding:7px 12px;font-size:14px;font-weight:700;color:var(--muted)}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(27,21,48,.12)}
.slider{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-weight:700}
.slider input{flex:1;min-width:160px;accent-color:var(--brand)}
.slider output{font-variant-numeric:tabular-nums;min-width:64px}
.pipe{display:flex;flex-direction:column-reverse;align-items:stretch;gap:6px;max-width:420px;margin:0 auto}
.pipe .ar{text-align:center;color:#8A84A0;font-size:20px;line-height:1}
.pipe .box{border-radius:12px;padding:10px 14px;font-weight:800;text-align:center;border:1.5px solid;font-size:15px}
.pipe .logits{background:#FFFBEA;border:1.5px solid #E3C14F;border-radius:12px;padding:8px 12px}

/* quadratic */
.quad{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:20px;align-items:center}
@media (max-width:620px){.quad{grid-template-columns:minmax(0,1fr)}}
.quad .big{font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1.1}
.quad .big small{font-size:15px;color:var(--muted);font-weight:600;display:block;margin-top:2px}

/* architecture explorer */
.arch svg{max-height:74vh}
.ab{cursor:default}
.arch.interactive .ab{cursor:pointer}
.arch.interactive .ab:hover rect{stroke-width:3}
.arch .ab:focus{outline:none}
.arch .ab:focus-visible rect{stroke:#FDD633;stroke-width:4}
.explore{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.explore{grid-template-columns:minmax(0,1fr)}}
.xinfo{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;position:sticky;top:16px}
.xinfo .kick{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.xinfo h3{margin:6px 0 10px;font-size:23px;display:flex;align-items:center;gap:10px}
.xinfo h3 i{width:16px;height:16px;border-radius:5px;border:2px solid;flex:none}
.xinfo p{font-size:16px;line-height:1.6;margin:0 0 12px;color:var(--body)}
.xinfo .eg{background:#FAF9FC;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14.5px;color:var(--body);line-height:1.5}
.xinfo .eg b{color:var(--ink)}
.xinfo .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.xhint{font-size:14px;color:var(--muted);text-align:center;margin:8px 0 0}

/* results */
.result{text-align:center;margin:26px 0 8px}
.result .score{font-size:clamp(54px,8vw,84px);font-weight:800;color:var(--brand);line-height:1;font-family:var(--head)}
.result .score span{font-size:.45em;color:var(--muted)}
.summary{display:grid;gap:10px;max-width:900px;margin-top:18px}
.srow{display:grid;grid-template-columns:44px minmax(0,1fr) 64px;gap:12px;align-items:center;font-size:15.5px}
.srow .bar{height:14px;background:var(--line);border-radius:99px;overflow:hidden}
.srow .bar i{display:block;height:100%;background:var(--green-l)}
.ctabox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:18px;padding:20px 22px;margin:26px 0}
.ctabox b{font-size:19px;font-family:var(--head)}
.ctabox p{margin:3px 0 0;color:#D9CFE8;font-size:14.5px}
.ctabox .btn{margin-left:auto;background:var(--accent);color:var(--brand)}
.ctabox .btn .arr{color:var(--brand)}
.seg{display:inline-flex;background:var(--line);border-radius:99px;padding:3px;gap:2px}
.seg button{border:0;border-radius:99px;padding:8px 16px;font-size:14px;font-weight:700;background:transparent;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink)}

/* ---------- presenter lobby ---------- */
.center{min-height:100vh;display:grid;place-items:center;padding:28px}
.lobby{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:6vh 6vw}
.lobby h1{font-size:clamp(36px,5vw,66px);line-height:1.06;letter-spacing:-.02em;margin:0 0 12px}
.eyebrow{font-size:14px;font-weight:800;color:var(--brand);letter-spacing:.02em;margin:0 0 8px}
.lede{font-size:18px;color:var(--muted);margin:0}
.count{display:flex;align-items:baseline;gap:14px;margin:34px 0 30px}
.count b{font-size:clamp(56px,7vw,96px);line-height:1;color:var(--brand);font-weight:800;font-variant-numeric:tabular-nums}
.count span{font-size:22px;color:var(--muted);font-weight:600}
.joinbox{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px}
.joinbox .qr{background:#fff;border-radius:18px;padding:16px;display:inline-block;border:1px solid var(--line)}
.joinbox .qr svg{display:block;width:min(30vw,300px);height:auto}
.joinbox .url{margin-top:16px;font-size:17px;color:var(--muted);word-break:break-all}
.status{font-size:14px;color:var(--muted);margin-top:14px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C9C3D6;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--green-l)}
@media (max-width:900px){.lobby{grid-template-columns:1fr;padding:30px}}

/* ---------- phones (live) ---------- */
.phone{min-height:100vh;max-width:620px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.phone .pbar{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.wait{flex:1;display:grid;place-items:center;text-align:center;min-height:60vh}
.wait h2{font-size:26px;margin:14px 0 6px}
.wait p{color:var(--muted);margin:0;font-size:16px}
.pulse{width:62px;height:62px;border-radius:50%;background:var(--brand-soft);margin:0 auto;position:relative}
.pulse::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--brand);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.05);opacity:1}}
.pq{font-size:20px;font-weight:700;line-height:1.3;margin:18px 0 14px;font-family:var(--head)}
.pnote{text-align:center;font-size:14px;color:var(--muted);margin-top:14px}
.phone .opt{min-height:60px;padding:12px}
.phone .opt .txt{font-size:16px}
.phone .opt .L{width:34px;height:34px;font-size:16px}
.phone .acc>.body{padding:4px 12px 20px}
.phone .ex{padding:4px 12px 20px}

/* attention lines */
.arcs.x .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease calc(var(--i)*110ms)}
.arcs.x.play .ln{stroke-dashoffset:0}
.arcs.x .wl{opacity:0;transition:opacity .5s calc(.7s + var(--i)*110ms)}
.arcs.x.play .wl{opacity:1}
.arcs.reset .ln,.arcs.reset .wl,.arcs.still .ln,.arcs.still .wl{transition:none}

/* architecture: highlight rings */
.ab .ring{opacity:0;transition:opacity .25s}
.ab.hi .ring,.ab.on .ring{opacity:1}
.ab[data-part="block"].on .blk,.ab[data-part="block"].hi .blk{stroke:#FDD633;stroke-width:4;stroke-dasharray:none}
.arch{display:block}
.arch svg{margin:0 auto;max-width:400px}

/* airf.aims.ac.za: slim site header, breadcrumb, cohort cover */
.lq-top{position:sticky;top:0;z-index:50;background:#361A54;box-shadow:0 2px 16px rgba(54,26,84,.28)}
.lq-top .inner{max-width:1100px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:16px}
.lq-top .logo{display:block;height:40px}
.lq-top .logo img{height:40px;width:auto;display:block}
.lq-top nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.lq-top nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;opacity:.9}
.lq-top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.lq-top nav a[aria-current]{color:var(--accent);opacity:1}
@media (max-width:560px){.lq-top .logo img{height:32px}.lq-top nav{gap:12px}.lq-top nav a{font-size:13.5px}}
.lq-foot{max-width:1100px;margin:0 auto;padding:22px 18px 40px;color:var(--muted);font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line)}
.lq-foot a{color:var(--muted)}
.crumb{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:700;font-size:14px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px}
.cohortcover{aspect-ratio:16/9;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-decoration:none;background:linear-gradient(160deg,#361A54 0%,#4A2470 70%,#361A54 100%);position:relative;overflow:hidden}
.cohortcover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:var(--accent)}
.cohortcover .cflag{font-size:44px;line-height:1}
.cohortcover .cname{font-family:var(--head);font-weight:700;font-size:clamp(22px,3vw,30px)}
.cohortcover .csub{color:var(--accent);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px;margin-bottom:6%}

/* session ended / presenter messages */
.endcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 26px;max-width:520px;width:100%;text-align:center}
.endcard h2{font-size:clamp(24px,3vw,30px);margin:14px 0 8px;line-height:1.2}
.endcard p{color:var(--muted);font-size:16.5px;line-height:1.55;margin:0 0 22px}
.endcard .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.endcard .acts .btn{width:100%}
.endicon{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:30px;font-weight:800;margin:0 auto}
.endbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:2px solid var(--brand);border-radius:18px;padding:18px 20px;margin:26px 0 8px;background:var(--surface)}
.endbar b{font-family:var(--head);font-size:18px}
.endbar p{margin:3px 0 0;color:var(--muted);font-size:14.5px}
.endbar .btn{margin-left:auto}

/* KaTeX draws √ and big brackets with its own SVGs: keep the diagram rules above off them */
.katex svg{height:inherit!important;max-width:none!important;max-height:none!important;margin:0!important}
.eqbox .katex{font-size:1.22em}
.nt-dist,.smrows,.tmrows,.counts{max-width:640px}
.wg svg{max-width:600px;margin-left:auto;margin-right:auto}
.wg .ffnsvg{max-width:500px}
.wg .cols svg{max-width:360px}
.wg .arcs{max-width:520px}
.illus .arcs,.illus>svg{max-width:520px;margin:0 auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}