:root{
    --bg:#f3f5f7; --surface:#ffffff; --surface-2:#eaeef1; --text:#13171c; --muted:#576470;
    --faint:#7c8792; --rule:#dce1e7; --accent:#0d6f79; --accent-ink:#0a565e; --accent-soft:#e3f1f2;
    --shadow:0 1px 2px rgba(19,23,28,.05),0 10px 30px rgba(19,23,28,.06);
    --maxw:1120px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0e1115; --surface:#151a20; --surface-2:#1a2027; --text:#e6ebf0; --muted:#9aa4af;
      --faint:#78828d; --rule:#252d36; --accent:#4fc9d2; --accent-ink:#7bdbe2; --accent-soft:#132a2d;
      --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0e1115; --surface:#151a20; --surface-2:#1a2027; --text:#e6ebf0; --muted:#9aa4af;
    --faint:#78828d; --rule:#252d36; --accent:#4fc9d2; --accent-ink:#7bdbe2; --accent-soft:#132a2d;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:5.5rem}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation:none !important; transition:none !important}
  }

  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Source Sans 3",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  }

  .skip{position:absolute; left:-9999px}
  .skip:focus{
    left:1rem; top:1rem; z-index:20; background:var(--surface); color:var(--text);
    padding:.6rem 1rem; border:1px solid var(--rule); border-radius:8px;
  }

  .topbar{
    position:sticky; top:0; z-index:10; background:var(--bg);
    border-bottom:1px solid var(--rule);
  }
  .topbar-in{
    max-width:var(--maxw); margin:0 auto; padding:.7rem clamp(1rem,4vw,2rem);
    display:flex; align-items:center; gap:.75rem;
  }
  .brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:600}
  .brand svg{display:block; width:26px; height:26px; color:var(--muted)}
  .brand span{letter-spacing:-.01em}
  .brand small{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
    padding-left:.6rem; margin-left:.2rem; border-left:1px solid var(--rule);
  }
  .spacer{flex:1}
  .toggle{
    display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
    background:var(--surface); color:var(--muted); border:1px solid var(--rule);
    border-radius:999px; padding:.35rem .8rem; font:inherit; font-size:.83rem;
  }
  .toggle:hover{color:var(--text); border-color:var(--accent)}
  .toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .toggle svg{width:15px; height:15px}

  .shell{max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 4rem}

  header.masthead{border-bottom:1px solid var(--rule); padding-bottom:1.9rem; margin-bottom:2.4rem}
  .eyebrow{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.73rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
    margin:0 0 .9rem;
  }
  h1{
    font-family:"Source Serif 4",Georgia,"Times New Roman",serif; font-weight:600;
    font-size:clamp(2.1rem,5.5vw,3rem); line-height:1.12; letter-spacing:-.018em;
    text-wrap:balance; margin:0 0 .8rem;
  }
  .standfirst{color:var(--muted); font-size:1.1rem; margin:0 0 1.7rem; max-width:40rem}
  dl.meta{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; margin:0; font-size:.93rem}
  dl.meta dt{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding-top:.28rem;
  }
  dl.meta dd{margin:0}

  .cols{display:grid; grid-template-columns:1fr; gap:2.5rem}
  @media (min-width:1000px){
    .cols{grid-template-columns:210px minmax(0,1fr); gap:3.5rem; align-items:start}
    nav.toc{position:sticky; top:5rem}
  }
  nav.toc h2{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
    margin:0 0 .7rem; padding:0; border:none; font-weight:500;
  }
  nav.toc ol{
    list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem;
    counter-reset:toc; font-size:.92rem;
  }
  nav.toc a{
    display:block; text-decoration:none; color:var(--muted); padding:.28rem 0 .28rem .95rem;
    border-left:2px solid var(--rule); counter-increment:toc;
  }
  nav.toc a::before{
    content:counter(toc) ". "; color:var(--faint);
    font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.8em;
  }
  nav.toc a:hover{color:var(--text); border-left-color:var(--accent)}
  nav.toc a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

  main{min-width:0}
  main h2{
    font-family:"Source Serif 4",Georgia,"Times New Roman",serif; font-weight:600;
    font-size:1.5rem; line-height:1.25; letter-spacing:-.012em; text-wrap:balance;
    margin:3.2rem 0 .85rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  }
  main .callout h2{border-top:none; padding-top:0; margin:0 0 .9rem; font-size:1.2rem}
  main section:first-of-type h2{margin-top:0}
  h2 .num{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.78rem; color:var(--accent); display:block; letter-spacing:.1em; margin-bottom:.35rem;
  }
  p{margin:0 0 1.05rem; max-width:38rem}
  ul{margin:0 0 1.15rem; padding-left:1.2rem; max-width:38rem}
  li{margin-bottom:.5rem}
  strong{font-weight:700}
  a{color:var(--accent-ink); text-underline-offset:.18em}
  a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

  code,.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em}
  code{
    background:var(--surface-2); border:1px solid var(--rule); border-radius:4px;
    padding:.08em .36em; word-break:break-word;
  }

  .callout{
    background:var(--surface); border:1px solid var(--rule); border-radius:12px;
    padding:1.5rem 1.6rem; box-shadow:var(--shadow); margin:0 0 2.6rem;
  }
  .callout ul{margin-bottom:0; max-width:none}

  .table-scroll{
    overflow-x:auto; border:1px solid var(--rule); border-radius:12px;
    background:var(--surface); margin:0 0 1.5rem; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:40rem; font-size:.93rem}
  th,td{text-align:left; vertical-align:top; padding:.85rem 1rem; border-bottom:1px solid var(--rule)}
  thead th{
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
    font-weight:500; background:var(--surface-2); white-space:nowrap;
  }
  tbody tr:last-child td{border-bottom:none}
  td.what{font-weight:600}
  td.what .mono{display:block; font-weight:400; color:var(--muted); font-size:.8rem}

  footer{
    margin-top:3.6rem; padding-top:1.5rem; border-top:1px solid var(--rule);
    color:var(--faint); font-size:.88rem;
  }
  footer p{max-width:44rem}

  @media print{
    .topbar, nav.toc{display:none}
    body{background:#fff; color:#000; font-size:11pt}
    .cols{grid-template-columns:1fr}
    .callout,.table-scroll{box-shadow:none}
  }

/* Three documents, one site: the bar has to say so, or each page looks like the
   only page and the other two are unreachable from it. */
.docnav{display:flex; gap:.15rem; flex-wrap:wrap}
.docnav a{
  text-decoration:none; color:var(--muted); font-size:.88rem;
  padding:.34rem .6rem; border-radius:8px; white-space:nowrap;
}
.docnav a:hover{color:var(--text); background:var(--surface-2)}
.docnav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.docnav a[aria-current="page"]{color:var(--text); background:var(--surface-2); font-weight:600}
@media (max-width:620px){
  .topbar-in{flex-wrap:wrap}
  .docnav{order:3; width:100%; padding-top:.15rem}
  .spacer{flex:1}
}