/* blindtest.ai — central stylesheet v3
   v1/v2 = shared shell, blind/reveal mechanics. v3 = "The Reveal Chamber" layer
   at the bottom of this file. All v1/v2 class contracts are preserved; v3 only
   overrides tokens and adds new selectors, so page markup needs no changes.
   Previous revision kept as site.css.bak-v2. */

/* ---------------------------------------------------- IBM Plex Sans (self-hosted) */
@font-face {
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: dark;
  --bg0:#05070e; --bg1:#0a0e1a;
  --card:rgba(16,22,38,.55); --card2:#0a0e1a;
  --border:rgba(120,150,255,.14); --border2:rgba(120,150,255,.28);
  --ink:#e9ecf5; --ink2:#c9d2e6; --muted:#96a0b8; --faint:#5c6580; --dim:#96a0b8;
  --acc:#5eead4; --violet:#a78bfa; --green:#4ade80; --amber:#fbbf24; --red:#fb7185;
  --grad:linear-gradient(120deg,#5eead4,#818cf8 55%,#c084fc);
  --mono:'SF Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --serif:Georgia,'Times New Roman',serif;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--serif);
  font-size:15.5px; line-height:1.65; color:var(--ink);
  background:var(--bg0) linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 60%,var(--bg1) 100%) fixed;
  min-height:100vh; display:flex; flex-direction:column;
}
::selection { background:rgba(167,139,250,.35); }
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { width:100%; max-width:1280px; margin:0 auto; padding:64px 24px; flex:1; }

/* ------------------------------------------- Top-Nav (shared, = homepage) */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; flex-wrap:wrap; row-gap:.15rem; align-items:center; gap:1.4rem;
  padding:.75rem 1.6rem; background:rgba(5,7,14,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); font-family:var(--mono); font-size:.72rem;
}
nav .logo { font-size:.85rem; letter-spacing:.18em; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:bold; }
nav a { color:var(--dim); text-decoration:none; letter-spacing:.08em;
  padding:.3rem .1rem; transition:color .2s; }
nav a:hover { color:var(--acc); text-decoration:none; }
nav .lead { margin-left:auto; color:var(--amber); border:1px solid rgba(251,191,36,.3);
  border-radius:99px; padding:.25rem .8rem; background:rgba(251,191,36,.07); }
@media(max-width:900px){ nav a.d { display:none; } nav { gap:.5rem .9rem; }
  .wrap { padding-top:108px; } }
@media(max-width:560px){ nav .lead { display:none; } }

/* -------------------------------------------------------------- Typo */
h1 { font-size:clamp(26px,4vw,34px); font-weight:normal; letter-spacing:-.01em;
     line-height:1.2; margin:40px 0 12px; text-wrap:balance; }
h2 { font-size:22px; font-weight:normal; letter-spacing:-.01em; color:var(--ink);
     margin:48px 0 16px; }
h2 .cnt { color:var(--faint); font-size:15px; margin-left:6px; }
.lead { color:var(--muted); max-width:72ch; font-size:16px; }
.crumbs { font-family:var(--mono); font-size:12px; color:var(--faint); margin:8px 0 24px; }
.crumbs a { color:var(--muted); }
.eyebrow { font-family:var(--mono); font-size:.72rem; font-weight:normal; letter-spacing:.3em;
           text-transform:uppercase; color:var(--acc); margin-bottom:8px; }

/* -------------------------------------------------------------- Cards */
.card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:20px; box-shadow:0 10px 28px rgba(3,7,20,.35);
}
.card.link { transition:transform .15s ease, border-color .15s ease; position:relative; }
.card.link:hover { transform:translateY(-2px); border-color:var(--border2); }
.card.link > a.cover { position:absolute; inset:0; border-radius:12px; }
.grid { display:grid; gap:16px; margin-top:16px; align-items:stretch; }
.grid.cats { grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); }
.grid.kpis { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); margin-top:28px; }

/* Badges / Chips */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:600; line-height:1;
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.02);
}
.chip.acc   { color:var(--acc);   border-color:rgba(94,234,212,.35); }
.chip.grn   { color:var(--green); border-color:rgba(52,211,153,.35); }
.chip.amb   { color:var(--amber); border-color:rgba(251,191,36,.35); }
.chip.red   { color:var(--red);   border-color:rgba(251,113,133,.3); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.dot.g { background:var(--green); } .dot.b { background:var(--acc); }
.meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }

/* ---------------------------------------------------------------- Hero */
.hero { padding-top:24px; }
.hero h1 { font-size:32px; margin-top:48px; }
.kpi { text-align:left; padding:22px 24px; }
.kpi b { display:block; font-size:32px; font-weight:750; letter-spacing:-.02em;
         color:var(--ink); line-height:1.1; }
.kpi span { display:block; margin-top:6px; font-size:13px; color:var(--muted); }
.kpi b em { font-style:normal; color:var(--acc); }

/* Category cards (flex column -> meta row flush bottom, equal heights) */
.catcard { display:flex; flex-direction:column; }
.catcard .emoji { font-size:26px; line-height:1; margin-bottom:12px; display:block; }
.catcard h3 { font-size:17px; font-weight:650; margin-bottom:6px; }
.catcard h3 a { color:var(--ink); }
.catcard p { font-size:13.5px; color:var(--muted); line-height:1.55; }
.catcard .meta { margin-top:auto; padding-top:14px; }

/* ---------------------------------------------------------------- Roster */
.tblwrap { overflow-x:auto; margin-top:16px; border:1px solid var(--border);
           border-radius:12px; background:var(--card); box-shadow:0 10px 28px rgba(3,7,20,.35); }
table.roster { border-collapse:collapse; width:100%; min-width:640px;
  font-family:var(--mono); font-size:13px; }
.roster th {
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); padding:14px 18px 10px;
  border-bottom:1px solid var(--border);
}
.roster td { padding:12px 18px; border-bottom:1px solid rgba(120,150,255,.1); vertical-align:middle; }
.roster tr:last-child td { border-bottom:none; }
.roster tbody tr:hover { background:rgba(94,234,212,.04); }
.roster td.num { font-variant-numeric:tabular-nums; color:var(--ink2); text-align:right; }
.roster th.num { text-align:right; }
.roster a.m { color:var(--ink); font-weight:600; }
.roster .grp td { padding:10px 18px 6px; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  background:rgba(255,255,255,.015); }

/* ---------------------------------------------------------- Round pages */
.taskcard { margin-top:28px; border-left:none; position:relative; overflow:hidden; }
.taskcard::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--acc); border-radius:3px 0 0 3px; }
.taskcard > summary { list-style:none; user-select:none; }
.taskcard > summary::-webkit-details-marker { display:none; }
.taskcard > summary::after { content:'▾'; margin-left:6px; color:var(--faint); }
.taskcard[open] > summary::after { content:'▴'; }
pre.txt {
  white-space:pre-wrap; word-break:break-word; font-family:inherit;
  font-size:14.5px; line-height:1.65; color:var(--ink2);
}
pre.txt.mono { font-family:var(--mono); font-size:13px; line-height:1.55; }
.agrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.agrid .grp { grid-column:1/-1; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-top:12px;
  display:flex; align-items:center; gap:10px; }
.agrid .grp::after { content:''; flex:1; height:1px; background:var(--border); }
.acard { padding:0; overflow:hidden; position:relative; }
.acard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.acard.local::before { background:linear-gradient(90deg,var(--green),transparent 70%); }
.acard.cloud::before { background:linear-gradient(90deg,var(--acc),transparent 70%); }
.acard.dnf { opacity:.55; }
.acard.dnf::before { background:linear-gradient(90deg,var(--red),transparent 70%); }
.ahead { display:flex; align-items:center; gap:10px; padding:14px 18px 12px;
         border-bottom:1px solid rgba(120,150,255,.1); }
.ahead .name { font-weight:650; font-size:14.5px; color:var(--ink); }
.ahead .name:hover { color:var(--acc); text-decoration:none; }
.ahead .spacer { flex:1; }
.abody { padding:16px 18px 18px; }
.acard .none { color:var(--faint); font-size:13.5px; font-style:italic; }

/* Clamp mechanics for long answers */
.awrap .clip { max-height:34em; overflow:auto; position:relative; }
.awrap > details.expand { margin-top:10px; }
.awrap > details.expand > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  font-size:12.5px; font-weight:600; color:var(--acc);
  padding:5px 12px; border:1px solid rgba(94,234,212,.35); border-radius:999px;
}
.awrap > details.expand > summary::-webkit-details-marker { display:none; }
.awrap > details.expand > summary .less { display:none; }
.awrap > details.expand[open] > summary .more { display:none; }
.awrap > details.expand[open] > summary .less { display:inline; }
.awrap:has(> details.expand[open]) .clip { max-height:none; overflow:visible; }
.awrap.clamped .clip::after {
  content:''; position:sticky; display:block; bottom:0; height:44px; margin-top:-44px;
  background:linear-gradient(180deg,transparent,#10162a); pointer-events:none;
}
.awrap:has(> details.expand[open]) .clip::after { display:none; }

/* Rendered screenshots (R21-R30) */
a.shot { display:block; border:1px solid var(--border); border-radius:10px;
  overflow:hidden; background:var(--card2); }
a.shot img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .25s ease; }
a.shot:hover img { transform:scale(1.03); }
.acard > a.shot { border:0; border-radius:0;
  border-bottom:1px solid rgba(120,150,255,.1); }
details.code { margin-top:12px; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; background:rgba(255,255,255,.02); }
details.code > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--acc); }
details.code pre { margin-top:8px; max-height:28em; overflow:auto; }

/* Chain of thought (reasoning) */
details.think { margin:0 0 12px; border:1px dashed rgba(94,234,212,.3);
  border-radius:8px; padding:8px 12px; background:rgba(94,234,212,.04); }
details.think > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--acc); }
details.think pre { margin-top:8px; font-size:12.5px; color:var(--muted); }

/* Prev/Next */
.pager { display:flex; justify-content:space-between; gap:16px; margin-top:40px; }
.pager a { flex:1; max-width:340px; display:block; padding:14px 18px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  color:var(--ink2); font-size:14px; transition:border-color .15s ease; }
.pager a:hover { border-color:var(--border2); text-decoration:none; color:var(--ink); }
.pager a.next { text-align:right; margin-left:auto; }
.pager .dir { display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:2px; }

/* --------------------------------------------------------- Category lists */
.rlist { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.rcard { display:flex; gap:18px; align-items:flex-start; }
.rcard .body { flex:1; min-width:0; }
.rcard h3 { font-size:16px; font-weight:650; margin-bottom:4px; }
.rcard h3 a { color:var(--ink); }
.rcard p { font-size:13.5px; color:var(--muted); }
.rcard .side { flex:none; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }

/* Image matrix */
table.imgs { border-collapse:separate; border-spacing:10px; width:100%; }
table.imgs th { color:var(--ink2); font-size:13.5px; font-weight:600; text-align:left;
  padding:4px 6px; vertical-align:middle; white-space:nowrap; }
table.imgs td { vertical-align:top; }
.imgcell { display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border);
  background:var(--card2); }
.imgcell img { width:100%; display:block; transition:transform .25s ease; }
.imgcell:hover img { transform:scale(1.06); }
.cap { font-size:12px; color:var(--muted); margin-top:6px; text-align:center; }
.scroll { overflow-x:auto; margin-top:20px; }

/* ------------------------------------------------------------- Model page */
.mhead { margin-top:28px; }
.statrow { display:flex; gap:40px; flex-wrap:wrap; margin-top:18px; }
.statrow b { display:block; font-size:26px; font-weight:750; letter-spacing:-.02em; }
.statrow span { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
details.fold { border:1px solid var(--border); border-radius:12px; background:var(--card);
  margin-top:12px; overflow:hidden; }
details.fold > summary { cursor:pointer; list-style:none; padding:14px 18px;
  display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary:hover { background:rgba(94,234,212,.04); }
details.fold > summary .caret { color:var(--faint); transition:transform .15s ease; font-size:11px; }
details.fold[open] > summary .caret { transform:rotate(90deg); }
details.fold > summary .spacer { flex:1; }
details.fold .inner { padding:4px 18px 18px; border-top:1px solid rgba(120,150,255,.1); }
details.fold .inner pre { margin-top:12px; }
details.fold .rlink { font-size:12.5px; font-weight:500; }

/* ---------------------------------------------------------------- Footer */
footer { border-top:1px solid var(--border); margin-top:auto;
  padding:2rem 24px 2.5rem; font-family:var(--mono); font-size:.66rem;
  color:var(--faint); text-align:center; line-height:2; }
footer a { color:var(--dim); }
footer a:hover { color:var(--acc); }

/* ------------------------------------------------------------ Legal prose */
.legal { max-width:76ch; }
.legal h2 { margin:36px 0 10px; font-size:19px; }
.legal h3 { margin:24px 0 8px; font-size:16px; font-weight:normal; color:var(--ink); }
.legal p { margin:0 0 14px; color:var(--ink2); }
.legal address { font-style:normal; color:var(--ink2); line-height:1.7; }
.note { background:rgba(94,234,212,.06); border:1px solid rgba(94,234,212,.2);
  border-radius:12px; padding:14px 18px; margin-top:20px; font-size:13.5px; color:var(--ink2); }

@media (max-width:860px) {
  .agrid { grid-template-columns:1fr; }
  h1, .hero h1 { font-size:26px; }
  .wrap { padding:0 16px 48px; }
  .nav { padding:12px 16px; }
  .statrow { gap:24px; }
  .rcard { flex-direction:column; gap:10px; }
  .rcard .side { flex-direction:row; align-items:center; }
}

/* -------------------------------- Click-to-play sim player (R21-R30) */
.player { position:relative; }
.player .poster { display:block; width:100%; padding:0; margin:0; cursor:pointer;
  border:1px solid var(--border,rgba(120,150,255,.14)); border-radius:10px; overflow:hidden;
  background:var(--card2,#0a0e1a); position:relative; font:inherit; color:inherit;
  text-align:inherit; }
.player .poster img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .25s ease, filter .25s ease; }
.player .poster:hover img { transform:scale(1.03); filter:brightness(.75); }
.player .noshot { display:block; width:100%; aspect-ratio:4/3;
  background:linear-gradient(160deg,#0c1226,#05070f); }
.player .pbtn { position:absolute; top:50%; left:50%;
  transform:translate(-50%,-62%); width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  font-size:21px; color:#fff; background:rgba(8,12,26,.72);
  border:1px solid rgba(94,234,212,.55); pointer-events:none;
  transition:transform .15s ease, background .15s ease; }
.player .poster:hover .pbtn { transform:translate(-50%,-62%) scale(1.1);
  background:rgba(94,234,212,.4); }
.player .plab { position:absolute; top:50%; left:50%; transform:translate(-50%,26px);
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.9); pointer-events:none;
  white-space:nowrap; }
.player.on .poster { display:none; }
.player .stopbtn { margin-top:8px; cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--red,#fb7185); background:none; border:1px solid rgba(251,113,133,.4);
  border-radius:999px; padding:5px 12px; }
.player .stopbtn:hover { background:rgba(251,113,133,.12); }

/* ================================================================== */
/* v2 additions — shared shell, blind/reveal, CTA, a11y               */
/* ================================================================== */

/* Accessibility */
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:4px; }
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--bg1);
  color:var(--acc); padding:.6rem 1.2rem; border:1px solid var(--border2);
  border-radius:0 0 10px 0; font-family:var(--mono); font-size:12px; }
.skip:focus { left:0; }

/* Buttons */
.btnrow { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:13px; font-weight:700; letter-spacing:.04em; line-height:1;
  padding:13px 24px; border-radius:999px; transition:filter .15s ease, background .15s ease; }
.btn.primary { background:var(--grad); color:#04060d; border:1px solid transparent; }
.btn.primary:hover { filter:brightness(1.12); text-decoration:none; }
.btn.ghost { color:var(--acc); border:1px solid rgba(94,234,212,.4);
  background:rgba(94,234,212,.06); }
.btn.ghost:hover { background:rgba(94,234,212,.13); text-decoration:none; }

/* Gradient text helper */
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* How-it-works steps */
.grid.steps { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); margin-top:24px; }
.step .num { font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--violet);
  letter-spacing:.25em; display:block; margin-bottom:10px; }
.step h3 { font-size:16px; font-weight:650; margin-bottom:6px; }
.step p { font-size:13.5px; color:var(--muted); line-height:1.55; }

/* Blind answer cards: anonymous letter badge, hidden real name */
.acard .modtag { display:inline-flex; align-items:center; gap:9px; font-weight:650;
  font-size:14.5px; color:var(--ink); min-width:0; }
.letter { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--violet);
  border:1px solid rgba(167,139,250,.45); background:rgba(167,139,250,.09);
  border-radius:7px; padding:4px 8px; letter-spacing:.08em; flex:none; }
.acard .real { display:none; }
.acard .real a { color:var(--ink); }
.acard .real a:hover { color:var(--acc); text-decoration:none; }
body.revealed .acard .real { display:inline; }
body:has(#reveal[open]) .acard .real { display:inline; }

/* Blind hint line on round pages */
.blindnote { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px;
  font-family:var(--mono); font-size:12px; color:var(--violet); }
.blindnote .dotv { width:8px; height:8px; border-radius:50%; background:var(--violet); flex:none; }

/* Reveal section — the resolution moment */
.reveal { margin-top:44px; border:1px solid rgba(167,139,250,.4); border-radius:14px;
  background:linear-gradient(160deg,rgba(167,139,250,.09),rgba(94,234,212,.05));
  overflow:hidden; }
.reveal > summary { cursor:pointer; list-style:none; padding:20px 24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-family:var(--mono); }
.reveal > summary::-webkit-details-marker { display:none; }
.reveal > summary .rlabel { font-size:13.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.reveal > summary .hint { color:var(--faint); font-size:11.5px; }
.reveal > summary:hover .rlabel { filter:brightness(1.2); }
.reveal[open] > summary .hint { display:none; }
.reveal .inner { padding:6px 24px 24px; border-top:1px dashed rgba(167,139,250,.35); }
@keyframes revealfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.reveal[open] .inner { animation:revealfade .5s ease; }
.reveal .inner h2 { margin-top:28px; }

/* "Your pick" — local-only vote, persisted in localStorage, no network/cookies */
.pickbtn { flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.03em;
  padding:5px 10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); color:var(--muted); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.pickbtn:hover { border-color:rgba(167,139,250,.5); color:var(--violet); }
.pickbtn:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.pickbtn:disabled { opacity:.45; cursor:not-allowed; }
.acard.picked { border-color:rgba(167,139,250,.6); box-shadow:0 0 0 1px rgba(167,139,250,.25) inset; }
.acard.picked .pickbtn { color:var(--violet); border-color:rgba(167,139,250,.6); background:rgba(167,139,250,.12); }

.yourpick { margin:0 0 18px; padding:10px 14px; border:1px solid rgba(167,139,250,.35);
  border-radius:10px; background:rgba(167,139,250,.07); font-family:var(--mono);
  font-size:12.5px; color:var(--ink2); }
.yourpick[hidden] { display:none; }

/* Footer AI notice — visible on every page (house rule) */
.ai-note { display:inline-block; margin-bottom:10px; padding:6px 14px;
  border:1px solid var(--border); border-radius:999px; color:var(--muted);
  background:rgba(255,255,255,.02); font-size:.68rem; letter-spacing:.05em; }

/* Compact rounds table rows */
.roster td .cat { color:var(--faint); font-size:11.5px; letter-spacing:.06em; }

@media (max-width:560px) {
  .btn { width:100%; justify-content:center; }
  .reveal > summary { padding:16px; }
  .reveal .inner { padding:4px 16px 16px; }
}

/* ================================================================== */
/* v3 — "The Reveal Chamber"                                          */
/* Typography moves from Georgia to IBM Plex Sans (lab/protocol feel), */
/* surfaces get an inner glow, anonymous answer cards get a dossier    */
/* letter stamp, and the optional #bt3d canvas layers behind content.  */
/* Additive only: every v1/v2 selector above keeps working.           */
/* ================================================================== */

:root {
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Model-family colours. Used ONLY after reveal — never on anonymous cards. */
  --fam-anthropic:#d4a27f; --fam-qwen:#7dd3fc; --fam-meta:#93c5fd;
  --fam-mistral:#fca5a5; --fam-google:#86efac; --fam-deepseek:#c4b5fd;
}

body { font-family:var(--sans); font-size:16px; letter-spacing:-.005em; }

/* Prompt/answer bodies stay in the reading face; code stays mono (unchanged). */
pre.txt { font-family:var(--sans); }

/* -------------------------------------------------------------- Typography */
h1 { font-size:clamp(30px,4.6vw,44px); font-weight:600; letter-spacing:-.028em;
     line-height:1.12; }
h2 { font-size:clamp(21px,2.4vw,26px); font-weight:600; letter-spacing:-.02em; }
.hero h1 { font-size:clamp(34px,6vw,60px); font-weight:700; letter-spacing:-.035em;
           line-height:1.04; }
.lead { font-size:17px; line-height:1.6; }
.hero .lead { font-size:clamp(17px,2vw,20px); color:var(--ink2); max-width:60ch; }
.eyebrow { letter-spacing:.34em; font-size:.68rem; }
.kpi b { font-weight:700; letter-spacing:-.03em; }
.catcard h3, .step h3, .rcard h3 { font-weight:600; letter-spacing:-.015em; }

/* ------------------------------------------------------------- Surfaces */
/* 1px border plus a faint inner highlight — glass instead of flat panels. */
.card, .tblwrap, .pager a, details.fold {
  box-shadow:0 10px 28px rgba(3,7,20,.35), inset 0 1px 0 rgba(190,210,255,.055);
}
.card.link:hover { border-color:var(--border2);
  box-shadow:0 18px 40px rgba(3,7,20,.5), inset 0 1px 0 rgba(190,210,255,.09); }

/* --------------------------------------------- Anonymous card = dossier file */
/* The letter is the identity until reveal, so make it the card's watermark. */
.acard[data-letter] > .abody { position:relative; z-index:1; }
.acard[data-letter]::after {
  content:attr(data-letter);
  position:absolute; right:14px; bottom:6px; z-index:0; pointer-events:none;
  font-family:var(--mono); font-size:104px; font-weight:700; line-height:.8;
  color:rgba(167,139,250,.07); letter-spacing:-.04em;
  transition:opacity .5s ease, color .5s ease;
}
/* After the reveal the stamp has done its job and steps back. */
body.revealed .acard[data-letter]::after { opacity:0; }

/* ------------------------------------------------------------ Nav 3D toggle */
/* Injected by site.js; styled here so it matches the mono nav rhythm. */
nav .t3d {
  margin-left:.2rem; flex:none; cursor:pointer;
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim);
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:999px; padding:.3rem .7rem; line-height:1;
  transition:color .2s, border-color .2s, background .2s;
}
nav .t3d:hover { color:var(--acc); border-color:rgba(94,234,212,.4);
  background:rgba(94,234,212,.08); }
nav .t3d[aria-pressed="true"] { color:var(--acc); border-color:rgba(94,234,212,.5);
  background:rgba(94,234,212,.12); }
/* The toggle sits next to the CTA, which owns margin-left:auto. */
nav .lead + .t3d { margin-left:.6rem; }
/* Below 560px the CTA is hidden, so the toggle takes over the right edge.
   Repeats the .lead + .t3d selector to beat its specificity. */
@media(max-width:560px){
  nav .t3d, nav .lead + .t3d { margin-left:auto; }
}

/* --------------------------------------------------------- #bt3d canvas layer */
/* The canvas is decorative. It sits behind all content and never takes input. */
#bt3d {
  position:fixed; inset:0; z-index:0; display:block;
  width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease;
}
/* Atmosphere behind a reading page — present, never competing with body copy. */
#bt3d.on { opacity:.8; }

/* Only when the scene is actually mounted does the page background step aside,
   so the no-JS and toggle-off cases keep the original v2 gradient. */
html.bt3d {
  background:var(--bg0) linear-gradient(180deg,var(--bg0) 0%,var(--bg1) 60%,var(--bg1) 100%) fixed;
}
html.bt3d body { background:transparent; }

/* Scrim between canvas and content: a soft band under the nav where headline and
   lead sit, fading out by mid-page so the chamber stays visible further down. */
html.bt3d body::before {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,14,.62) 0%,rgba(5,7,14,.34) 30%,
                             rgba(5,7,14,.08) 62%,rgba(5,7,14,.28) 100%);
}

/* Content must stay above canvas and scrim (nav is already z-index:100). */
html.bt3d main, html.bt3d footer { position:relative; z-index:2; }
/* Cards need a touch more body over a moving background to stay readable. */
html.bt3d .card, html.bt3d .tblwrap {
  background:rgba(10,14,26,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
html.bt3d .reveal { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* Toggle-off state: no canvas at all. */
html.no3d #bt3d { display:none; }

/* -------------------------------------------------------------- Motion care */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  #bt3d { display:none; }
  .reveal[open] .inner { animation:none; }
  .card.link:hover { transform:none; }
  a.shot:hover img, .imgcell:hover img { transform:none; }
  #bt3d, .acard[data-letter]::after { transition:none; }
}

@media (max-width:560px) {
  .acard[data-letter]::after { font-size:72px; right:10px; }
}