/* ==========================================================================
   SportsDataTutorials.com - styles.css
   A field-notebook-meets-developer-docs design system.
   Sections: 1 fonts | 2 tokens | 3 dark | 4 sport accents | 5 reset/base
   6 layout | 7 chrome (header/nav/footer) | 8 components | 9 pages
   10 utilities | 11 motion | 12 print
   Self-hosted fonts subset to Latin (Fontsource). To re-subset later:
   `pyftsubset FONT.ttf --unicodes=U+0000-00FF,U+2010-2027 --flavor=woff2`
   ========================================================================== */

/* --- 1. Fonts (self-hosted, swap to avoid invisible text) ----------------- */
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("../fonts/ZillaSlab-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/PublicSans-VF.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/PublicSans-Italic-VF.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- 2. Design tokens (light / paper) ------------------------------------- */
:root{
  /* surfaces & ink */
  --paper:#F4EEE2; --paper-2:#FBF7EE; --paper-sunk:#EAE2D2; --paper-card:#FCFAF4;
  --ink:#20242B; --ink-2:#4A4F58; --ink-3:#6C7079;
  --line:#DCD3C2; --line-strong:#C2B7A1;
  --focus:#2D6CDF;

  /* sport accent palette (light) */
  --sport-baseball:#B23A3A; --sport-basketball:#B65C12; --sport-soccer:#2E7D4F;
  --sport-football:#7A5230; --sport-hockey:#2C5E8A; --sport-foundations:#5B6E5A;
  --accent:var(--sport-accent,var(--sport-foundations));
  --accent-ink:#FBF7EE;

  /* difficulty (fixed, not sport-tinted) */
  --diff-beginner:#3E7A52; --diff-intermediate:#B07514; --diff-advanced:#A83E3E;

  /* code panel (dark in both themes - the "editor" inset) */
  --code-bg:#22262E; --code-bar:#191C22; --code-ink:#E7E2D6; --code-line:#343a45;
  --syn-comment:#9097a1; --syn-keyword:#E69A6B; --syn-string:#9CC59A;
  --syn-number:#E0BE76; --syn-function:#84B2E5; --syn-builtin:#C99AD6;
  --syn-operator:#C2BDB2; --syn-punc:#A8A398;

  /* type */
  --font-head:"Zilla Slab","Georgia",serif;
  --font-body:"Public Sans","Segoe UI","Helvetica Neue",sans-serif;
  --font-mono:"JetBrains Mono","Consolas","Liberation Mono",monospace;
  --fs-meta:.8125rem; --fs-sm:.9rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-h3:1.35rem; --fs-h2:1.75rem;
  --fs-h1:clamp(2.05rem,1.5rem+2.6vw,2.95rem);
  --fs-hero:clamp(2.45rem,1.6rem+4vw,3.85rem);
  --lh-body:1.66; --lh-tight:1.18;

  /* space, radius, shadow, motion */
  --gutter:1.25rem; --max:73rem; --measure:68ch; --measure-wide:82ch;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem;
  --r1:4px; --r2:8px; --r3:14px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(40,34,20,.06),0 2px 8px rgba(40,34,20,.05);
  --shadow-2:0 6px 24px rgba(40,34,20,.10);
  --sticker:1.5px 1.5px 0 var(--line-strong);
  --ease:cubic-bezier(.2,.6,.2,1); --dur:.5s;

  /* graph-paper grid */
  --grid:26px; --grid-line:color-mix(in oklab,var(--line-strong) 55%,transparent);
}

/* --- 3. Dark theme ("code editor at night") ------------------------------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14171C; --paper-2:#1A1E25; --paper-sunk:#0E1116; --paper-card:#1E232B;
  --ink:#E8E3D7; --ink-2:#B6B1A6; --ink-3:#8B8E94;
  --line:#2A2F38; --line-strong:#3C434F;
  --sport-baseball:#E0726B; --sport-basketball:#E59A4E; --sport-soccer:#5CB57F;
  --sport-football:#BE9166; --sport-hockey:#62A0D6; --sport-foundations:#9FB59C;
  --accent-ink:#14171C;
  --diff-beginner:#76C091; --diff-intermediate:#E0B45C; --diff-advanced:#E68A82;
  --code-bg:#10131A; --code-bar:#0A0D12; --code-line:#23282f;
  --grid-line:color-mix(in oklab,var(--line-strong) 60%,transparent);
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.3);
  --shadow-2:0 8px 30px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --paper:#14171C; --paper-2:#1A1E25; --paper-sunk:#0E1116; --paper-card:#1E232B;
  --ink:#E8E3D7; --ink-2:#B6B1A6; --ink-3:#8B8E94;
  --line:#2A2F38; --line-strong:#3C434F;
  --sport-baseball:#E0726B; --sport-basketball:#E59A4E; --sport-soccer:#5CB57F;
  --sport-football:#BE9166; --sport-hockey:#62A0D6; --sport-foundations:#9FB59C;
  --accent-ink:#14171C;
  --diff-beginner:#76C091; --diff-intermediate:#E0B45C; --diff-advanced:#E68A82;
  --code-bg:#10131A; --code-bar:#0A0D12; --code-line:#23282f;
  --grid-line:color-mix(in oklab,var(--line-strong) 60%,transparent);
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.3);
  --shadow-2:0 8px 30px rgba(0,0,0,.45);
}

/* --- 4. Per-sport accent: one attribute drives the whole scope ------------ */
[data-sport="baseball"]{--sport-accent:var(--sport-baseball)}
[data-sport="basketball"]{--sport-accent:var(--sport-basketball)}
[data-sport="soccer"]{--sport-accent:var(--sport-soccer)}
[data-sport="football"]{--sport-accent:var(--sport-football)}
[data-sport="hockey"]{--sport-accent:var(--sport-hockey)}
[data-sport="foundations"]{--sport-accent:var(--sport-foundations)}

/* --- 5. Reset & base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  color:var(--ink);background:var(--paper);
  font-synthesis:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:proportional-nums;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-tight);font-weight:600;color:var(--ink);text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p,ul,ol,figure,table,pre{margin-block:0}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}
img{max-width:100%;height:auto;display:block}
strong{font-weight:600}
code,kbd,samp{font-family:var(--font-mono)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:2px}
:where(a,button,input,summary):focus:not(:focus-visible){outline:none}
::selection{background:color-mix(in oklab,var(--accent) 28%,transparent)}
main{flex:1 0 auto}

.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:100;background:var(--accent);
  color:var(--accent-ink);padding:.55rem .9rem;border-radius:var(--r2);font-weight:600;
  transition:top .2s var(--ease)}
.skip-link:focus{top:.5rem}

/* --- 6. Layout primitives ------------------------------------------------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}
.measure{max-width:var(--measure);margin-inline:auto}
.section{padding-block:var(--s8)}
.section--tight{padding-block:var(--s7)}
.grid{display:grid;gap:var(--s5)}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:500}
.lede{font-size:var(--fs-lg);color:var(--ink-2);line-height:1.55}

/* graph-paper / dotted textures */
.bg-grid{background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
  linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid)}
.bg-dots{background-image:radial-gradient(var(--grid-line) 1.1px,transparent 1.2px);
  background-size:var(--grid) var(--grid)}

/* --- 7. Site chrome ------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper-2) 90%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:var(--s4);
  min-height:64px;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-head);
  font-weight:700;font-size:1.18rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand__mark{width:30px;height:30px;flex:none;border-radius:7px;background:var(--accent);
  display:grid;place-items:center;color:var(--accent-ink);font-family:var(--font-mono);
  font-weight:700;font-size:.95rem;box-shadow:var(--sticker)}
.brand:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.nav__menu{display:flex;align-items:center;gap:.1rem;list-style:none;padding:0}
.nav__menu a{display:block;padding:.4rem .55rem;border-radius:var(--r2);color:var(--ink-2);
  text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.nav__menu a:hover{background:var(--paper-sunk);color:var(--ink)}
.nav__menu a[aria-current="page"]{color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent)}
.nav__actions{display:flex;align-items:center;gap:.4rem}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);
  background:var(--paper-card);color:var(--ink-2);border-radius:var(--r2);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong)}
.icon-btn svg{width:19px;height:19px}
.theme-toggle .moon{display:none}.theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon,
:root:not([data-theme="light"]) .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block}}
.nav-toggle{display:none}

.site-footer{flex-shrink:0;margin-top:var(--s9);background:var(--paper-2);
  border-top:1px solid var(--line);padding-block:var(--s7) var(--s5)}
.site-footer__grid{display:grid;gap:var(--s6);grid-template-columns:1.4fr repeat(3,1fr)}
.site-footer h4{font-size:var(--fs-meta);font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:500;margin-bottom:var(--s3)}
.site-footer ul{list-style:none;padding:0;display:grid;gap:.5rem}
.site-footer a{color:var(--ink-2);text-decoration:none;font-size:.96rem}
.site-footer a:hover{color:var(--accent)}
.site-footer__bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content:space-between;
  color:var(--ink-3);font-size:var(--fs-sm)}
.footer-tag{max-width:34ch;color:var(--ink-2);font-size:.96rem;margin-top:.6rem}

/* --- 8. Components -------------------------------------------------------- */
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);
  font-weight:600;font-size:1rem;padding:.7rem 1.2rem;border-radius:var(--r2);
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s var(--ease),box-shadow .15s,background .15s}
.btn--accent{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-1)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);text-decoration:none}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:var(--paper-sunk);text-decoration:none}
.btn__arrow{transition:transform .15s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* badges */
.badge-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-mono);
  font-size:var(--fs-meta);font-weight:500;padding:.2rem .55rem;border-radius:var(--r1);
  line-height:1.4;white-space:nowrap}
.badge--sport{background:color-mix(in oklab,var(--accent) 16%,var(--paper-2));
  color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);text-transform:capitalize}
.badge--tool{background:var(--paper-sunk);color:var(--ink-2);border:1px solid var(--line-strong)}
.badge--time{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-meta)}
.badge--diff{font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:.22rem .55rem;
  border-radius:var(--r1);transform:rotate(-1.4deg);box-shadow:var(--sticker);color:#fff}
.badge--diff[data-level="Beginner"]{background:var(--diff-beginner)}
.badge--diff[data-level="Intermediate"]{background:var(--diff-intermediate)}
.badge--diff[data-level="Advanced"]{background:var(--diff-advanced)}
:root[data-theme="dark"] .badge--diff{color:#14171C}

/* cards */
.card-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tut-card{position:relative;display:flex;flex-direction:column;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.tut-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
.tut-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.tut-card__media{aspect-ratio:16/9;background:var(--paper-sunk);overflow:hidden;border-bottom:1px solid var(--line)}
.tut-card__media img{width:100%;height:100%;object-fit:cover}
.tut-card__body{display:flex;flex-direction:column;gap:.6rem;padding:1.1rem 1.15rem 1.2rem}
.tut-card__title{font-size:1.18rem;font-weight:600;line-height:1.22}
.tut-card__title a{color:var(--ink);text-decoration:none}
.tut-card__title a::after{content:"";position:absolute;inset:0}
.tut-card__title a:hover{color:var(--accent)}
.tut-card__desc{color:var(--ink-2);font-size:.96rem;line-height:1.5}
.tut-card__meta{margin-top:auto;padding-top:.4rem}

/* sport navigation cards */
.sport-card{position:relative;display:flex;flex-direction:column;gap:.5rem;
  padding:1.4rem 1.4rem 1.5rem;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r3);text-decoration:none;color:var(--ink);overflow:hidden;
  box-shadow:var(--shadow-1);transition:transform .18s var(--ease),box-shadow .18s}
.sport-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent)}
.sport-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);text-decoration:none}
.sport-card__icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in oklab,var(--accent) 16%,var(--paper-2));color:var(--accent);
  font-family:var(--font-mono);font-weight:700;font-size:1.3rem;margin-bottom:.3rem}
.sport-card h3{font-size:1.3rem}
.sport-card__desc{color:var(--ink-2);font-size:.96rem}
.sport-card__count{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);margin-top:.4rem}

/* code block - the dark "editor" inset */
.code{position:relative;background:var(--code-bg);border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--code-line);box-shadow:var(--shadow-1);margin-block:var(--s4)}
.code__bar{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;background:var(--code-bar);
  border-bottom:1px solid var(--code-line)}
.code__dots{display:flex;gap:.4rem}
.code__dots span{width:11px;height:11px;border-radius:50%;background:#3a3f49}
.code__dots span:nth-child(1){background:#E0726B}.code__dots span:nth-child(2){background:#E0B45C}
.code__dots span:nth-child(3){background:#76C091}
.code__lang{font-family:var(--font-mono);font-size:var(--fs-meta);color:#8b919c;
  text-transform:uppercase;letter-spacing:.08em}
.code__copy{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:var(--fs-meta);color:#b9bdc6;background:transparent;
  border:1px solid #343a45;border-radius:var(--r1);padding:.25rem .55rem;cursor:pointer;transition:.15s}
.code__copy:hover{color:#fff;border-color:#4a515c;background:#1d212833}
.code__copy[data-copied="true"]{color:#76C091;border-color:#3f6a4e}
.code pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font-size:.9rem;line-height:1.6}
.code pre code{font-family:var(--font-mono);color:var(--code-ink);background:none;padding:0;font-size:inherit}
.code--wide{max-width:var(--measure-wide)}
/* neutralize Prism base theme so our dark panel wins (styles.css loads after prism.css) */
.code pre[class*="language-"],.code code[class*="language-"]{background:none;text-shadow:none;color:var(--code-ink);margin:0;border-radius:0;tab-size:4;hyphens:none}
/* inline code inside prose */
.tutorial-body :not(pre)>code,.legal-body :not(pre)>code{background:var(--paper-sunk);color:var(--ink);
  padding:.1em .4em;border-radius:var(--r1);font-size:.88em;border:1px solid var(--line)}

/* Prism token colors (tuned for our dark code panel, both themes) */
.token.comment,.token.prolog,.token.cdata{color:var(--syn-comment);font-style:italic}
.token.punctuation{color:var(--syn-punc)}
.token.keyword,.token.boolean,.token.atrule,.token.important{color:var(--syn-keyword)}
.token.string,.token.char,.token.attr-value,.token.regex{color:var(--syn-string)}
.token.number,.token.constant{color:var(--syn-number)}
.token.function,.token.class-name{color:var(--syn-function)}
.token.builtin,.token.symbol{color:var(--syn-builtin)}
.token.operator,.token.entity,.token.url{color:var(--syn-operator);background:none}
.token.property,.token.tag,.token.variable{color:var(--code-ink)}
.token.deleted{color:#E0726B}.token.inserted{color:#76C091}

/* output block (real program output, not source - no highlight, no copy) */
.output{margin-block:var(--s4)}
.output__label{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.output__label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.output pre{margin:0;padding:.85rem 1rem;background:var(--paper-sunk);border:1px solid var(--line);
  border-left:3px solid var(--line-strong);border-radius:var(--r2);overflow-x:auto;
  font-size:.83rem;line-height:1.55}
.output pre samp{font-family:var(--font-mono);color:var(--ink-2);white-space:pre}

/* numbered steps: the marker is an auto-counter sticker before each step heading */
.steps{list-style:none;counter-reset:step;padding:0;display:grid;gap:var(--s7)}
.step{counter-increment:step}
.step>h3{display:flex;align-items:center;gap:.7rem;scroll-margin-top:84px;margin-bottom:var(--s3)}
.step>h3::before{content:counter(step);display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:9px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);
  font-weight:700;font-size:1.05rem;box-shadow:var(--sticker);flex:none}
.step>*+*{margin-top:var(--s4)}

/* callouts */
.callout{padding:1rem 1.15rem;border-radius:var(--r2);border:1px solid var(--line-strong);
  background:var(--paper-2);margin-block:var(--s4)}
.callout__title{font-family:var(--font-mono);font-size:var(--fs-meta);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin-bottom:.4rem;display:flex;gap:.45rem;align-items:center}
.callout--prereq{border-left:4px solid var(--accent);background:color-mix(in oklab,var(--accent) 7%,var(--paper-2))}
.callout--prereq .callout__title{color:var(--accent)}
.callout--note{border-left:4px solid var(--ink-3)}
.callout ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}

/* troubleshooting (native details) */
.trouble{display:grid;gap:.6rem;margin-block:var(--s4)}
.trouble details{border:1px solid var(--line);border-radius:var(--r2);background:var(--paper-card);overflow:hidden}
.trouble summary{cursor:pointer;padding:.8rem 1rem;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:.6rem}
.trouble summary::-webkit-details-marker{display:none}
.trouble summary::before{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:1.1rem;font-weight:700}
.trouble details[open] summary::before{content:"\2013"}
.trouble summary .err{font-family:var(--font-mono);font-size:.85rem;color:var(--diff-advanced)}
.trouble__body{padding:0 1rem 1rem;color:var(--ink-2)}
.trouble__body>*+*{margin-top:.6rem}

/* challenge box */
.challenge{position:relative;padding:1.4rem 1.5rem;border-radius:var(--r3);
  border:1.5px dashed var(--line-strong);background:var(--paper-2);margin-block:var(--s5)}
.challenge h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.challenge h3::before{content:"\2691";color:var(--accent)}

/* download */
.download{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;
  border:1px solid var(--line-strong);border-radius:var(--r2);background:var(--paper-card);
  text-decoration:none;color:var(--ink);font-family:var(--font-mono);font-size:.92rem;
  transition:.15s;box-shadow:var(--shadow-1)}
.download:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.download__icon{color:var(--accent)}

/* breadcrumb + pager */
.crumbs{font-size:var(--fs-sm)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;align-items:center}
.crumbs li{display:flex;gap:.45rem;align-items:center;color:var(--ink-3)}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current="page"]{color:var(--ink-3)}
.pager{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr;margin-top:var(--s6)}
.pager a{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.15rem;border:1px solid var(--line);
  border-radius:var(--r2);background:var(--paper-card);text-decoration:none;transition:.15s;box-shadow:var(--shadow-1)}
.pager a:hover{border-color:var(--accent);transform:translateY(-2px)}
.pager__dir{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.pager__title{color:var(--ink);font-weight:600;line-height:1.25}
.pager__next{text-align:right}

/* figures */
.figure{margin-block:var(--s5)}
.figure img{width:100%;border-radius:var(--r2);border:1px solid var(--line);background:var(--paper-card)}
.figure figcaption{margin-top:.55rem;font-size:var(--fs-sm);color:var(--ink-3);font-style:italic;text-align:center}
.figure--bleed img{border-radius:0;border-inline:0}

/* metadata row */
.tut-meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:var(--s3)}

/* stat tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2);margin-block:var(--s4)}
.stat-table{width:100%;border-collapse:collapse;font-size:.94rem;
  font-variant-numeric:tabular-nums}
.stat-table th,.stat-table td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--line)}
.stat-table thead th{background:var(--paper-sunk);font-family:var(--font-mono);font-size:var(--fs-meta);
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);font-weight:600;position:sticky;top:0}
.stat-table td.num,.stat-table th.num{text-align:right;font-family:var(--font-mono)}
.stat-table tbody tr:nth-child(even){background:color-mix(in oklab,var(--paper-sunk) 50%,transparent)}

/* ad slot - an empty (unfilled) slot collapses entirely so reviewers see clean content;
   a filled slot still reserves space and shows the label. */
.ad-slot{min-height:280px;display:grid;place-items:center;margin-block:var(--s5);
  border:1px dashed var(--line-strong);border-radius:var(--r2);color:var(--ink-3);
  font-family:var(--font-mono);font-size:var(--fs-meta);background:var(--paper-2)}
.ad-slot:empty{display:none}
@media (max-width:600px){.ad-slot:not(:empty){min-height:250px}}
.ad-slot:not(:empty)::after{content:"advertisement"}

/* search + filter */
.search{position:relative;max-width:30rem}
.search input{width:100%;padding:.7rem 1rem .7rem 2.4rem;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);background:var(--paper-card);color:var(--ink);font-size:1rem;font-family:var(--font-body)}
.search input::placeholder{color:var(--ink-3)}
.search__icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-btn{font-family:var(--font-mono);font-size:var(--fs-meta);padding:.4rem .8rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--paper-card);color:var(--ink-2);cursor:pointer;transition:.15s}
.filter-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.filter-label{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.search-empty{color:var(--ink-3);padding:var(--s4) 0}
.search-results{display:grid;gap:.4rem;margin-top:var(--s3);max-width:34rem}
.search-hit{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .8rem;border:1px solid var(--line);
  border-radius:var(--r2);background:var(--paper-card);text-decoration:none;transition:.15s}
.search-hit:hover{border-color:var(--accent);transform:translateX(2px)}
.search-hit__title{color:var(--ink);font-weight:600;font-size:.98rem}
.search-hit__meta{color:var(--ink-3);font-size:var(--fs-meta);text-transform:capitalize}

/* --- 9. Page-specific ----------------------------------------------------- */
.hero{position:relative;padding-block:var(--s8) var(--s7);overflow:hidden}
.hero__inner{max-width:48rem}
.hero h1{font-size:var(--fs-hero);font-weight:700;letter-spacing:-.015em;margin-block:.6rem}
.hero .lede{max-width:40ch;margin-block:var(--s4) var(--s5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.section-head h2{font-size:var(--fs-h2)}
.section-head a{font-family:var(--font-mono);font-size:var(--fs-sm);white-space:nowrap}

.featured{display:grid;gap:var(--s5);grid-template-columns:1.1fr .9fr;align-items:center;
  padding:var(--s6);border:1px solid var(--line);border-radius:var(--r3);background:var(--paper-card);box-shadow:var(--shadow-1)}
.featured>*{min-width:0}
.featured__media img{width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line)}
.featured__tag{font-family:var(--font-mono);font-size:var(--fs-meta);color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
.featured h3{font-size:1.7rem;margin-block:.4rem .6rem}

.tutorial-header{padding-block:var(--s6) var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.tutorial-body{font-size:var(--fs-lg)}
.tutorial-body p{margin-block:var(--s4)}
.tutorial-body h2{margin-top:var(--s7);margin-bottom:var(--s3);scroll-margin-top:80px}
.tutorial-body h2::after{content:"";display:block;width:42px;height:3px;background:var(--accent);margin-top:.5rem;border-radius:2px}
.tutorial-body ul,.tutorial-body ol{margin-block:var(--s4);padding-left:1.3rem;display:grid;gap:.4rem}
.tutorial-body li{padding-left:.2rem}
.whatyoubuild{padding:var(--s5);border-radius:var(--r3);background:var(--paper-2);border:1px solid var(--line);margin-bottom:var(--s5)}

.legal-body{font-size:var(--fs-base)}
.legal-body h2{margin-top:var(--s6);margin-bottom:var(--s3)}
.legal-body p,.legal-body li{color:var(--ink-2)}
.legal-body ul{margin-block:var(--s3);padding-left:1.3rem;display:grid;gap:.4rem}
.updated{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-3)}

.page-head{padding-block:var(--s7) var(--s5)}
.page-head h1{margin-block:.5rem}
.author-note{border:1px dashed var(--line-strong);border-radius:var(--r2);padding:.7rem 1rem;
  background:var(--paper-2);color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-sm)}

/* 404 */
.error-page{text-align:center;padding-block:var(--s9)}
.error-page .code404{font-family:var(--font-mono);font-size:clamp(4rem,12vw,8rem);font-weight:700;color:var(--accent);line-height:1}

/* --- 10. Utilities -------------------------------------------------------- */
.mono{font-family:var(--font-mono)}
.muted{color:var(--ink-3)}
.center{text-align:center}
.stack-sm>*+*{margin-top:var(--s3)}
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}
.flex{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.hidden,[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--line);border:0;margin-block:var(--s6)}

/* --- 11. Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  [data-animate]{opacity:0;transform:translateY(14px);animation:fadeUp .6s var(--ease) forwards;
    animation-delay:calc(var(--i,0)*70ms)}
  @keyframes fadeUp{to{opacity:1;transform:none}}
}

/* --- 12. Responsive ------------------------------------------------------- */
@media (max-width:860px){
  .featured{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
/* collapse the nav to a hamburger before the 8 links would crowd the bar */
@media (max-width:1024px){
  .nav__menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--paper-2);border-bottom:1px solid var(--line);padding:var(--s3) var(--gutter) var(--s4);
    box-shadow:var(--shadow-2);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav__menu a{padding:.7rem .5rem;border-radius:var(--r2);font-size:1.05rem}
  .nav[data-open="true"] .nav__menu{opacity:1;transform:none;pointer-events:auto}
  .nav-toggle{display:grid;place-items:center}
}
@media (max-width:720px){
  :root{--gutter:1rem}
  .pager{grid-template-columns:1fr}
  .section{padding-block:var(--s7)}
  .grid--two,.card-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .site-footer__grid{grid-template-columns:1fr}
  .badge--diff{transform:none}
  .hero{padding-block:var(--s6) var(--s5)}
}
@media print{
  .site-header,.site-footer,.ad-slot,.nav,.code__copy,.pager{display:none !important}
  body{background:#fff;color:#000}
  .code{border:1px solid #ccc}
}