:root{color-scheme:light dark;--bg:#F8FAFC;--surface:#FFFFFF;--surface-2:#F1F5F9;--line:#E2E8F0;--text:#0F172A;--text-2:#475569;--text-3:#64748B;
    --primary:#2563EB;--primary-soft:#EFF4FF;--primary-ink:#1D4ED8;--radius:20px;--shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06)}
  /* Dark by the phone's own setting, unless the app has been told otherwise. DoneLine lets people pick
     Light or Dark in Settings, which it records as data-theme; inside the reader this document is told
     the same, so it matches the app instead of following the phone. It used to follow only the phone,
     so an app set to Light on a phone in dark mode showed these pages dark. */
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1220;--surface:#121A2B;--surface-2:#182236;--line:#243049;--text:#E2E8F0;--text-2:#A7B4C8;--text-3:#7D8BA3;
    --primary:#5B8DEF;--primary-soft:#172746;--primary-ink:#8AB4FF;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35)}}
  :root[data-theme="dark"]{--bg:#0B1220;--surface:#121A2B;--surface-2:#182236;--line:#243049;--text:#E2E8F0;--text-2:#A7B4C8;--text-3:#7D8BA3;
    --primary:#5B8DEF;--primary-soft:#172746;--primary-ink:#8AB4FF;--shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35)}
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:var(--primary-ink);text-underline-offset:3px}
  .bar{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
  .bar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 20px}
  .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
  .brand svg{width:32px;height:32px;border-radius:9px}
  .grow{flex:1}
  .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--primary);color:#fff;font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap}
  .btn.ghost{background:var(--surface-2);color:var(--text)}
  .hero{max-width:1080px;margin:0 auto;padding:48px 20px 8px}
  /* Read inside the app, this page is a frame under the reader's own toolbar. The logo and name stay, as
     plain text - nothing in the header may be tapped, since the site refuses to load inside a frame. The
     button across to the other document goes; the reader's toolbar is the way around. No notch padding
     either: the frame starts below the toolbar, not at the top of the screen. The row of section
     shortcuts that used to sit under the title is gone from both documents: inside the reader on iOS it
     still misbehaved, and two short documents read well enough from top to bottom. */
  :root[data-embedded] .bar{position:static;padding-top:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-embedded] .bar .btn{display:none}
  :root[data-embedded] .hero{padding-top:8px}
  /* The site refuses to be framed, so this link would open onto nothing in the reader. In a browser
     it is the way back to the app. */
  :root[data-embedded] .site-link{display:none}
  .eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary-ink);font-size:.8rem;font-weight:600;letter-spacing:.02em}
  h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;letter-spacing:-.03em;margin:.45em 0 .25em}
  .updated{color:var(--text-3);font-size:.95rem;margin:0}
  .layout{max-width:780px;margin:0 auto;padding:24px 20px 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
  nav.toc{position:sticky;top:88px;font-size:.9rem}
  nav.toc strong{display:block;color:var(--text-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px 12px}
  nav.toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--text-2);text-decoration:none;line-height:1.35}
  nav.toc a:hover{background:var(--surface-2);color:var(--text)}
  article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,4vw,44px)}
  article>p:first-child{font-size:1.08rem;color:var(--text-2);margin-top:0}
  h2{font-size:1.3rem;letter-spacing:-.015em;margin:2.2em 0 .6em;padding-top:1.6em;border-top:1px solid var(--line)}
  article h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4em}
  p,li{color:var(--text-2)} strong{color:var(--text)}
  ul{padding-left:1.2em} li{margin:.35em 0} li::marker{color:var(--primary)}
  .table{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:1em 0}
  table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:480px}
  th{background:var(--surface-2);color:var(--text);font-weight:600;text-align:left}
  th,td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
  tr:last-child td{border-bottom:0} td{color:var(--text-2)}
  .callout{display:flex;gap:12px;padding:16px 18px;border-radius:14px;background:var(--primary-soft);color:var(--text);margin:1.2em 0}
  .callout p{margin:0;color:var(--text)}
  footer{max-width:1080px;margin:0 auto;padding:0 20px calc(40px + env(safe-area-inset-bottom,0px));color:var(--text-3);font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
  footer a{color:var(--text-2)}
  .show-sm{display:none}
  @media (max-width:820px){
    .layout{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 16px 56px}
    .hero{padding:28px 16px 4px}
    h1{font-size:2rem}
    .hide-sm{display:none}.show-sm{display:inline}
    /* "On this page" becomes a row of chips you can swipe */
    nav.toc{position:static;display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;background:none;border:0;scrollbar-width:none}
    nav.toc::-webkit-scrollbar{display:none}
    nav.toc strong{display:none}
    nav.toc a{flex:none;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:500;white-space:nowrap}
    html{scroll-padding-top:72px}
  }
  @media (max-width:640px){
    body{font-size:15.5px}
    .bar-in{padding:10px 16px}
    article{border-radius:18px;padding:20px 18px}
    article>p:first-child{font-size:1rem}
    h2{font-size:1.15rem;margin:1.8em 0 .5em;padding-top:1.3em}
    /* Tables become one card per row, each value under its column name */
    .table{border:0;overflow:visible;margin:.8em 0}
    table{min-width:0}
    thead,tr:first-child:has(th){display:none}
    table,tbody,tr,td{display:block;width:100%}
    tr{border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin:0 0 10px;background:var(--surface-2)}
    td{border:0;padding:8px 0}
    td+td{border-top:1px solid var(--line)}
    td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
    td:first-child{color:var(--text);font-weight:500}
    .callout{padding:14px 16px}
    footer{padding:0 16px calc(32px + env(safe-area-inset-bottom,0px));font-size:.85rem}
  }
  @media print{.bar,nav.toc,footer{display:none}.layout{display:block}article{box-shadow:none;border:0}}