/* Shared styles for the small standalone explainers.
   They were first drawn inside a chat, which supplied these tokens and classes;
   this file recreates them so each page works on its own, in light and dark. */
:root{
  --surface-0:#F5F4EF; --surface-1:#EFEDE6; --surface-2:#FFFFFF;
  --text-primary:#1F1E1B; --text-secondary:#5F5E5A; --text-muted:#888780;
  --border:rgba(31,30,27,.12); --border-strong:rgba(31,30,27,.22); --border-stronger:rgba(31,30,27,.40);
  --bg-accent:#E6F1FB; --text-accent:#185FA5; --border-accent:#85B7EB;
  --text-success:#3B6D11; --text-danger:#A32D2D;
  --bg-tint-violet:#E2DFFA; --bg-tint-aqua:#CDEFE6; --bg-tint-orange:#FBE1CF; --bg-tint-magenta:#F7D5E3;
  --bg-tint-blue:#D3E6F8; --bg-tint-green:#DCEDC6; --bg-tint-yellow:#F7EBC3;
  --t:#888780;
  --radius:8px;
  --font-sans:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-serif:"Newsreader","Iowan Old Style",Georgia,serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface-0:#1A1A18; --surface-1:#232320; --surface-2:#2A2A27;
  --text-primary:#F1EFE8; --text-secondary:#B4B2A9; --text-muted:#888780;
  --border:rgba(241,239,232,.12); --border-strong:rgba(241,239,232,.22); --border-stronger:rgba(241,239,232,.40);
  --bg-accent:#0C447C; --text-accent:#B5D4F4; --border-accent:#378ADD;
  --text-success:#97C459; --text-danger:#F09595;
  --bg-tint-violet:#3C3489; --bg-tint-aqua:#085041; --bg-tint-orange:#712B13; --bg-tint-magenta:#72243E;
  --bg-tint-blue:#0C447C; --bg-tint-green:#27500A; --bg-tint-yellow:#633806;
  --t:#888780; color-scheme:dark}}
:root[data-theme="dark"]{
  --surface-0:#1A1A18; --surface-1:#232320; --surface-2:#2A2A27;
  --text-primary:#F1EFE8; --text-secondary:#B4B2A9; --text-muted:#888780;
  --border:rgba(241,239,232,.12); --border-strong:rgba(241,239,232,.22); --border-stronger:rgba(241,239,232,.40);
  --bg-accent:#0C447C; --text-accent:#B5D4F4; --border-accent:#378ADD;
  --text-success:#97C459; --text-danger:#F09595;
  --bg-tint-violet:#3C3489; --bg-tint-aqua:#085041; --bg-tint-orange:#712B13; --bg-tint-magenta:#72243E;
  --bg-tint-blue:#0C447C; --bg-tint-green:#27500A; --bg-tint-yellow:#633806;
  --t:#888780; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-0);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.6;padding-inline:16px;padding-block:28px 48px}
.page{max-width:560px;margin:0 auto}
.crumb{font-size:13px;color:var(--text-secondary);text-decoration:none}
.crumb:hover,.crumb:focus-visible{color:var(--text-primary);text-decoration:underline}
h1{font-family:var(--font-serif);font-weight:400;font-size:30px;line-height:1.15;margin:10px 0 8px;text-wrap:balance}
.lede{color:var(--text-secondary);margin:0 0 18px}
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px}
.notes{font-size:14px;color:var(--text-secondary);margin-top:18px}
.notes p{margin:0 0 10px}
.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}
button{font:inherit;font-size:13px;color:var(--text-primary);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius);padding:6px 12px;cursor:pointer}
button:hover{background:var(--surface-1)}
button:focus-visible,input:focus-visible{outline:2px solid var(--border-accent);outline-offset:2px}
input[type=range]{accent-color:var(--text-accent)}
svg text.t{font:400 14px var(--font-sans);fill:var(--text-primary)}
svg text.th{font:500 14px var(--font-sans);fill:var(--text-primary)}
svg text.ts{font:400 12px var(--font-sans);fill:var(--text-secondary)}
svg .leader{stroke:var(--t);stroke-width:.5;stroke-dasharray:3 3;fill:none}