/* Shared chrome for every page on this site: design tokens, layout primitives, nav, hero
   shell, callouts, the visualizer toolbar/transport controls, the code-editor panel, the
   complexity cards, and the closing pattern callout. Page-specific visualization CSS (grid
   cells, diagrams, result tables, etc.) is bespoke per page and lives inline there instead.
   A layout-critical custom property (e.g. a grid --cell size) must stay page-local too: an
   undefined custom property silently invalidates the whole declaration that reads it. */

:root{
  --bg:#0b0d10;
  --surface:#12151a;
  --surface-2:#171b21;
  --border:#262b33;
  --border-soft:#1c2028;
  --text:#e8eaed;
  --text-muted:#9aa3b2;
  --text-faint:#7a8190;
  --accent:#f2b84b;
  --accent-ink:#1a1304;
  --accent-soft:rgba(242,184,75,.14);
  --left:#3fd0c9;
  --left-soft:rgba(63,208,201,.14);
  --radius-lg:18px;
  --radius:14px;
  --radius-sm:9px;
  --sans:'Outfit',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-soft);color:var(--text)}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:0 0 8px 0;z-index:100;font-weight:600;
}
.skip-link:focus{left:0}

a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:880px;margin-inline:auto;padding-inline:24px}
section{padding-block:clamp(56px,9vw,96px)}
section + section{border-top:1px solid var(--border-soft)}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;font-weight:600;
  color:var(--accent);text-transform:uppercase;margin:0 0 14px;
}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.18;margin-bottom:16px}
p{margin:0}
.lede{color:var(--text-muted);font-size:17px;max-width:62ch}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}

code,.mono{font-family:var(--mono)}

/* ---------- nav (identical on every page: wordmark + Problems + Patterns + Tips) ---------- */
.nav{
  position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;
  background:rgba(11,13,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.wordmark{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px}
.wordmark .dot{color:var(--accent)}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:500}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
@media (max-width:640px){.nav-links{display:none}}

/* ---------- hero shell (content/visual inside is page-specific) ---------- */
.hero{padding-top:clamp(64px,10vw,108px)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(40px,6.4vw,64px);line-height:1.02;margin-bottom:18px}
.formula-pill{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:12px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  font-family:var(--mono);font-size:clamp(12px,2vw,14.5px);color:var(--text);
}
.formula-pill b{color:var(--accent);font-weight:600}
.formula-note{margin-top:12px;font-size:14px}
.scroll-cue{
  margin-top:36px;display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);
  text-decoration:none;font-size:14px;font-weight:500;
}
.scroll-cue:hover{color:var(--text)}
.scroll-cue svg{transition:transform .3s var(--ease)}
.scroll-cue:hover svg{transform:translateY(3px)}

.hero-visual{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px;
}
.hero-visual-cap{font-size:13px;color:var(--text-muted);margin-top:14px;text-align:center}
.hero-visual-cap b{color:var(--text)}

/* ---------- small reusable bits: legend pills, badges, callout cards ---------- */
.legend{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.legend-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--text-muted);
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;
  font-family:var(--mono);font-size:11px;font-weight:700;
}

.callout-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.callout-row{grid-template-columns:1fr}}
.callout{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
}
.callout h3{font-size:15px;margin-bottom:8px;color:var(--text)}
.callout p{font-size:14px;color:var(--text-muted)}

/* ---------- visualizer toolbar + transport controls (wired by step-player.js) ---------- */
.viz-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(18px,3vw,28px);margin-top:32px;
}
.viz-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px}
.seg button{
  border:0;background:transparent;color:var(--text-muted);font-family:var(--sans);font-weight:600;font-size:13px;
  padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.transport{display:flex;align-items:center;gap:8px}
.ctrl-btn{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;
  transition:border-color .2s var(--ease),transform .15s var(--ease);
}
.ctrl-btn:hover{border-color:var(--text-faint)}
.ctrl-btn:active{transform:scale(.93)}
.ctrl-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ctrl-btn svg{width:16px;height:16px}
.speed-btn{font-family:var(--mono);font-size:12px;font-weight:600;min-width:46px}

.step-readout{font-family:var(--mono);font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.step-readout b{color:var(--text)}

.grid-stage{display:flex;justify-content:center;overflow-x:auto;padding:8px 2px 4px}

.formula-readout{
  margin-top:20px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;font-family:var(--mono);font-size:clamp(12.5px,2.4vw,14.5px);color:var(--text-muted);
  min-height:24px;
}
.formula-readout b{color:var(--text);font-weight:600}
.formula-readout .ft{color:var(--accent)}
.formula-readout .fl{color:var(--left)}

.viz-caption{margin-top:14px;font-size:13px;color:var(--text-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- code panel (wired by code-panel.js) ---------- */
.editor{
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:32px;
  background:#0e1014;
}
.editor-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.traffic{display:flex;gap:6px;margin-right:6px}
.traffic span{width:10px;height:10px;border-radius:50%;background:var(--border)}
.editor-tabs{display:flex;gap:4px;flex:1}
.editor-tabs button{
  border:0;background:transparent;color:var(--text-faint);font-family:var(--mono);font-size:12.5px;
  padding:6px 12px;border-radius:7px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.editor-tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text)}
.editor-body{padding:22px clamp(16px,3vw,26px);overflow-x:auto}
.editor-body pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--text-muted)}
.tok-kw{color:var(--left)}
.tok-type{color:#8fb3ff}
.tok-cm{color:var(--text-faint);font-style:italic}
.tok-num{color:var(--accent)}
.editor-note{padding:14px clamp(16px,3vw,26px) 20px;font-size:13px;color:var(--text-muted);border-top:1px solid var(--border-soft)}

/* ---------- complexity cards (auto-fits 1 card or many, no empty second column) ---------- */
.complexity-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px}
.complexity-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.complexity-card h3{font-size:14px;color:var(--text-muted);font-weight:600;margin-bottom:14px;font-family:var(--mono)}
.complexity-stat{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border-soft);font-size:14px}
.complexity-stat:first-of-type{border-top:none}
.complexity-stat b{font-family:var(--mono);color:var(--text)}

/* ---------- pattern-to-remember callout ---------- */
.pattern-card{
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,40px);margin-top:28px;
}
.pattern-card p.lead{font-size:clamp(18px,2.6vw,23px);color:var(--text);font-weight:600;line-height:1.4;max-width:54ch}
.pattern-strip{font-family:var(--mono);margin-top:18px;color:var(--accent);font-size:clamp(13px,2.4vw,15px)}
.pattern-card .lede{margin-top:14px;color:var(--text)}

/* ---------- problem card (used by index.html's grid and patterns.html's cross-links) ---------- */
.problem-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;text-decoration:none;color:var(--text);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.problem-card:hover{border-color:var(--text-faint);transform:translateY(-2px)}
.problem-card .tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.problem-card .tag{
  font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;
  background:var(--surface-2);color:var(--text-muted);
}
.problem-card .tag.difficulty-easy{color:var(--left)}
.problem-card .tag.difficulty-medium{color:var(--accent)}
.problem-card .tag.difficulty-hard{color:#ff8a7a}
.problem-card h3{font-size:18px;margin-bottom:8px}
.problem-card p{font-size:14px;color:var(--text-muted);line-height:1.5}

/* ---------- generic "nothing here" / error notices ---------- */
.empty-note,.error-note{
  margin-top:18px;padding:32px 24px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);
  color:var(--text-muted);font-size:14px;
}
.empty-note button{
  margin-top:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;
}
.error-note{border-color:#ff8a7a;color:#ff8a7a}

footer{padding-block:36px}
.footer-row{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-faint)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ======================================================================
   Global text-size scaling.
   --fs is a unitless multiplier (default 1). Every text size below is the
   ORIGINAL size plus 2px, wrapped in calc(... * var(--fs)); at the default
   the whole site reads +2px, and the header control scales it 85% to 150%.
   The header chrome itself (wordmark, nav-links, the control buttons) stays
   fixed so the 64px nav never overflows. Overrides sit last so equal
   specificity wins over the originals above. */
:root{--fs:1}
.eyebrow{font-size:calc(14px * var(--fs))}
h1{font-size:calc(34px * var(--fs))}
.hero h1{font-size:calc(clamp(42px,6.4vw,66px) * var(--fs))}
h2{font-size:calc(clamp(28px,3.4vw,36px) * var(--fs))}
.lede{font-size:calc(19px * var(--fs))}
.formula-pill{font-size:calc(clamp(14px,2vw,16.5px) * var(--fs))}
.formula-note{font-size:calc(16px * var(--fs))}
.scroll-cue{font-size:calc(16px * var(--fs))}
.hero-visual-cap{font-size:calc(15px * var(--fs))}
.legend-pill{font-size:calc(15px * var(--fs))}
.callout h3{font-size:calc(17px * var(--fs))}
.callout p{font-size:calc(16px * var(--fs))}
.seg button{font-size:calc(15px * var(--fs))}
.speed-btn{font-size:calc(14px * var(--fs))}
.step-readout{font-size:calc(14.5px * var(--fs))}
.formula-readout{font-size:calc(clamp(14.5px,2.4vw,16.5px) * var(--fs))}
.viz-caption{font-size:calc(15px * var(--fs))}
.editor-tabs button{font-size:calc(14.5px * var(--fs))}
.editor-body pre{font-size:calc(15px * var(--fs))}
.editor-note{font-size:calc(15px * var(--fs))}
.complexity-card h3{font-size:calc(16px * var(--fs))}
.complexity-stat{font-size:calc(16px * var(--fs))}
.pattern-card p.lead{font-size:calc(clamp(20px,2.6vw,25px) * var(--fs))}
.pattern-strip{font-size:calc(clamp(15px,2.4vw,17px) * var(--fs))}
.problem-card .tag{font-size:calc(13px * var(--fs))}
.problem-card h3{font-size:calc(20px * var(--fs))}
.problem-card p{font-size:calc(16px * var(--fs))}
.empty-note,.error-note{font-size:calc(16px * var(--fs))}
.empty-note button{font-size:calc(15px * var(--fs))}
.footer-row{font-size:calc(15px * var(--fs))}

/* ---------- header layout + the text-size control (fixed, non-scaling) ---------- */
.nav-actions{display:flex;align-items:center;gap:18px}
.fs-control{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px}
.fs-btn{
  border:0;background:transparent;color:var(--text-muted);font-family:var(--sans);font-weight:700;font-size:14px;
  padding:6px 11px;border-radius:999px;cursor:pointer;line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.fs-btn:hover{background:var(--surface);color:var(--text)}
.fs-btn:disabled{opacity:.4;cursor:not-allowed}
.fs-btn:disabled:hover{background:transparent;color:var(--text-muted)}
.fs-readout{font-family:var(--mono);font-weight:600;font-size:12px;min-width:40px}