/* Skillprint Experiments: the one design system for the front page and the
   write-ups. The game screen keeps its own look (styles.css); everything a
   reader sees around it uses these tokens, faces and the shared header and
   footer. It follows the Signal pages on skillprint.co: dark navy ground,
   amber accent, violet for actions and links, Recoleta for display type and
   Geist for everything else. Dark only, as the Signal pages are.
   Token names are kept from the first version so the write-ups and their
   templates need no edits: --rope is the accent, --cyan the link colour. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

/* Recoleta ships one weight. Declaring it for the whole range makes every
   heading weight use that face as drawn instead of a synthesised bold.
   The file is the DEMO build, the same one skillprint.co serves: %, < = >,
   ^ ` | ~, every accented letter and most symbols above U+00A0 are a
   placeholder glyph. unicode-range limits the face to the characters it
   really draws, so the rest fall back to Georgia instead of the placeholder.
   Swap in the licensed file and drop the range. */
@font-face { font-family: Recoleta; src: url("/recoleta.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
             unicode-range: U+0020-0024, U+0026-003B, U+003F-005D, U+005F, U+0061-007B, U+007D, U+00A0, U+00B7,
                            U+2013-2014, U+2018-201D, U+2026; }

:root {
  color-scheme: dark;
  --bg: #090d27; --bg-2: #212549; --bg-3: #2b3159;
  --ink: #f8f9fc; --ink-2: #c5cbdb; --ink-3: #9da3c0;
  --line: rgba(248,249,252,.10); --line-2: rgba(248,249,252,.18);
  --rope: #ffb21b; --rope-ink: #090d27; --rope-wash: rgba(255,178,27,.10);
  --cyan: #aba0f4; --cyan-wash: rgba(171,160,244,.12);
  --action: #573eeb; --action-ink: #fcfcfd;
  --good: #86efac; --good-wash: rgba(134,239,172,.12);
  --bad: #fca5a5; --bad-wash: rgba(252,165,165,.12);
  --warn: #fdc65a; --warn-wash: rgba(255,178,27,.10);
  --s-fable: #a896f5; --s-astra: #f59352; --s-gemini: #5b9cf0; --s-kimi: #f07aa6; --s-human: #f8f9fc; --s-heur: #9da3c0;
  --seat-red: #f0625f; --seat-blue: #5b8fe8; --seat-green: #4fc06c; --seat-yellow: #e3c02b;
  --lvl-1: #64748b; --lvl-2: #3b82f6; --lvl-3: #d97706; --lvl-4: #9333ea;
  --stage: #0b1222;
  --tip-bg: #f8f9fc; --tip-ink: #090d27; --focus: #8473f0;
  /* Faces, by role, as skillprint.co uses them: Recoleta for the page title
     only; Geist for headings, text and labels; Geist Mono for code and the
     small badge. --f-display and --f-mono are the names the pages were
     written against, so they now point at Geist. */
  --f-hero: Recoleta, Georgia, "Times New Roman", serif;
  --f-display: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-code: "Geist Mono", ui-monospace, Menlo, monospace;
}
body { background: var(--bg); }
h1 { color: var(--rope); }

/* ---- The hero band, as on skillprint.co/ai-labs: the site bar and the
   title sit on warm brown with a 24px dot grid, which fades into the navy
   page below. The dots are the texture-orange-dots tile drawn in CSS. ---- */
:root { --warm: #3f3124; --warm-dot: #473624; --warm-2: #fbd790; --warm-ink: rgba(249,238,216,.74); --warm-line: rgba(249,238,216,.14); }
/* Widths, as on skillprint.co: the nav and the hero sit in a 1512px frame,
   the sections under them in 1376px. */
:root { --w-frame: 1512px; --w-page: 1376px; }
.hero-band { margin-inline: -20px; padding-inline: 20px; padding-bottom: 64px;
             background: linear-gradient(to bottom, transparent 72%, var(--bg) 100%),
                         radial-gradient(circle at 12px 12px, var(--warm-dot) 2.1px, transparent 2.6px) 0 0 / 24px 24px,
                         var(--warm); }
.hero-band .site-bar { border-bottom-color: var(--warm-line); }
.hero-band .site-bar nav a { color: var(--warm-ink); }
.hero-band h1 span { color: var(--warm-2); }
.hero-band .intro .lede, .hero-band .mast .sub { color: var(--warm-ink); }
.hero-band .intro .eyebrow, body.article .hero-band .mast .eyebrow {
  display: inline-block; padding: 6px 12px; border: 1px solid rgba(255,178,27,.28); border-radius: 999px;
  background: rgba(255,178,27,.10); color: var(--rope); font: 600 11px/1.5 var(--f-code); letter-spacing: .12em; }
body.article .hero-band .mast .eyebrow { margin-bottom: 16px; }
body.article .hero-band .mast .meta > span { background: rgba(249,238,216,.08); color: var(--warm-ink); }
body.article .hero-band .mast .meta > span b { color: var(--ink); }

/* ---- The shared frame: header on every page, footer at the bottom. ---- */
.site-bar { width: min(var(--w-frame), 100%); margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            padding-block: calc(16px + env(safe-area-inset-top, 0px)) 14px; border-bottom: 1px solid var(--line); }
.site-bar .mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
                  font: 700 14px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.site-bar .mark i { display: none; }
.site-bar nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.site-bar nav a { color: var(--ink-2); text-decoration: none; font: 600 12px/1 var(--f-body);
                  padding: 8px 11px; border-radius: 999px; border: 1px solid transparent; }
.site-bar nav a:hover, .site-bar nav a:focus-visible, .site-bar nav a[aria-current="page"] { color: var(--ink); border-color: var(--line-2); }
.site-foot { width: min(var(--w-frame), 100%); margin: 72px auto 0; padding: 18px 0 calc(28px + env(safe-area-inset-bottom, 0px));
             border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
             font: 400 14px/22px var(--f-body); color: var(--ink-3); }
.site-foot a { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Links read as links on either ground. */
.site-foot a, .prose-link { color: var(--cyan); text-decoration-color: currentColor; text-underline-offset: 3px; }

/* ---- Write-ups. One frame for everything: the title, the figures and the
   reading column share a left edge; prose stops at a reading measure inside
   that frame instead of floating centred under a wider title. ---- */
body.article .mast { width: min(var(--w-frame), 100%); margin-inline: auto; }
body.article .wide, body.article .col,
body.article footer:not(.site-foot), body.article .toc { width: min(var(--w-page), 100%); margin-inline: auto; }
body.article section.col > :not(.brief):not(.lvcards):not(.mech):not(.tablewrap):not(.verdicts):not(.tips),
body.article footer:not(.site-foot) > * { max-width: 68ch; }
body.article h2.col { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); max-width: var(--w-page); }
body.article .mast { margin-top: 40px; }
body.article .mast h1 { margin-bottom: 20px; }
body.article .mast .meta { gap: 8px; }
body.article .mast .meta > span { padding: 6px 10px; border-radius: 6px; background: var(--bg-3); color: var(--ink-2); }
body.article .mast .meta > span b { color: var(--ink); }
body.article .surface { border-color: var(--line); background: var(--bg-2); }
/* Charts are drawn to scale with their width; past about 1000px their labels
   grow too large, so the drawing stops there and centres in the panel. */
body.article .surface svg { max-width: 1000px; margin-inline: auto; }
body.article .gif img { background: var(--stage); border-color: var(--line-2); }
body.article a:not(.mark):not(.site-bar nav a) { color: var(--cyan); text-underline-offset: 3px; }
body.article .findings a { color: var(--cyan); }

/* On this page: a row of the sections, built from the headings. */
.toc { margin: 34px auto 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.toc b { display: block; font: 600 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: inline-flex; gap: 7px; align-items: baseline; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px;
         color: var(--ink-2) !important; text-decoration: none; font: 500 13px/1.2 var(--f-mono); }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--rope); font-weight: 600; }
.toc a:hover, .toc a:focus-visible { border-color: var(--rope); color: var(--ink) !important; }
@media (max-width: 640px) { body.article h2.col { margin-top: 56px; } }

/* Reading, navigation and touch targets shared across every publication. */
html { scroll-padding-top: 24px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; z-index: 100; left: 20px; top: 12px; transform: translateY(-160%);
  padding: 12px 18px; border-radius: 8px; background: var(--ink); color: var(--bg) !important; font: 600 15px var(--f-body); }
.skip-link:focus { transform: none; }
.site-bar .mark { min-height: 44px; letter-spacing: .09em; }
.site-bar nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.site-foot { align-items: center; margin-top: 48px; }
body.article { padding-bottom: 0; }
body.article .mast h1 { max-width: 24ch; text-wrap: balance; }
body.article h2 { font-size: clamp(26px, 3vw, 38px); }
body.article h2.col { margin-top: 56px; padding-top: 24px; }
body.article .brief { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
body.article .brief p { font-size: 16px; line-height: 1.65; }
body.article .findings { max-width: 76ch; gap: 20px; }
body.article .findings span { font-size: 17px; line-height: 1.6; }
body.article .gif { max-width: 1000px; }
body.article .gif figcaption { font-size: 14px; line-height: 1.6; max-width: 78ch; }
body.article .fig-head { gap: 12px; }
body.article .fig-head h3 { font-weight: 500; line-height: 1.4; }
body.article .fig-head label { min-width: 0; max-width: 100%; line-height: 1.6; }
body.article select { min-height: 44px; max-width: 100%; font-size: 16px; line-height: 1.4; }
body.article .tablewrap table { min-width: 620px; }
body.article .toc { margin-top: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.toc a { min-height: 44px; align-items: center; line-height: 1.35; }
.scroll-hint { margin: 8px 0 0; font: 400 13px/1.5 var(--f-body); color: var(--ink-3); }
.scroller, .tablewrap { overscroll-behavior-x: contain; scrollbar-color: var(--ink-3) var(--bg-2); }
.chart-values { border-top: 1px solid var(--line); margin-top: 14px; color: var(--ink-2); font: 400 14px/1.6 var(--f-body); }
.chart-values summary { padding: 12px 0; min-height: 44px; cursor: pointer; color: var(--cyan); font-weight: 500; }
.chart-values ul { margin: 0 0 12px; padding-left: 22px; max-height: 360px; overflow: auto; }
.chart-values li { padding: 5px 8px; overflow-wrap: anywhere; }
.related-reading { width: min(var(--w-page), 100%); margin: 64px auto 0; padding-top: 26px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.related-reading h2 { grid-column: 1 / -1; margin: 0 0 8px; }
.related-reading a { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line); text-decoration: none; }
.related-reading a:hover { border-color: var(--cyan); }
.related-reading strong { font: 500 18px/1.4 var(--f-body); }
.related-reading span { color: var(--ink-2); font: 400 15px/1.5 var(--f-body); }
@media (max-width: 640px) {
  body.home, body.article, body.explorer { padding-inline: 16px; }
  .hero-band { margin-inline: -16px; padding-inline: 16px; padding-bottom: 36px; }
  .site-bar { gap: 2px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .site-bar .mark { font-size: 12px; }
  .site-bar nav { width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: nowrap; gap: 0; }
  .site-bar nav a { font-size: 12px; padding: 10px 8px; }
  body.article .mast { margin-top: 28px; }
  body.article .mast h1 { font-size: clamp(34px, 9vw, 48px); }
  body.article .mast .sub { line-height: 1.6; }
  body.article .mast .meta { font-size: 12px; }
  body.article .surface { padding: 12px; }
  body.article .findings li { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; }
  body.article .toc ol { display: grid; grid-template-columns: 1fr; gap: 0; }
  .toc a { border: 0; border-radius: 6px; padding: 10px 0; }
  .related-reading { grid-template-columns: 1fr; margin-top: 44px; }
  .site-foot { margin-top: 36px; font-size: 13px; gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}
.toc summary { min-height:44px; padding:10px 0; font:600 14px/1.6 var(--f-body); cursor:pointer; color:var(--ink-2); }
.article-actions { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:18px; font:500 14px/1.4 var(--f-body); }
.article-actions a { display:inline-flex; align-items:center; min-height:44px; }
.outcome-bars { display:grid; gap:20px; padding:10px 2px; max-width:1000px; margin:auto; }
.outcome-label { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-bottom:8px; font:400 15px/1.5 var(--f-body); }
.outcome-label b { font-weight:500; color:var(--ink); }
.outcome-label span { color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.outcome-track { height:12px; background:var(--bg); border-radius:4px; overflow:hidden; }
.outcome-track span { display:block; height:100%; border-radius:4px; }