:root{
    --bg:#ffffff; --ink:#1c1c1c; --ink-2:#4a4a4a; --rule:#d9d9d9;
    --head:#1f3864; --bar:#9fb3d1; --bar-aus:#1f3864; --mark:#fff3c4;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#141518; --ink:#e8e6e1; --ink-2:#b3b0a9; --rule:#33363c;
      --head:#9db7e3; --bar:#4a5a74; --bar-aus:#9db7e3; --mark:#3a3418; color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#141518; --ink:#e8e6e1; --ink-2:#b3b0a9; --rule:#33363c;
    --head:#9db7e3; --bar:#4a5a74; --bar-aus:#9db7e3; --mark:#3a3418; color-scheme:dark;
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px)}
  *,*::before,*::after{box-sizing:inherit}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.6;}
  main{max-width:960px;margin:0 auto;padding:40px 20px 80px}
  header.title{padding:24px 0 36px;border-bottom:1px solid var(--rule)}
  header.title h1{font-size:2.1rem;line-height:1.15;margin:0 0 14px;font-weight:normal;color:var(--head)}
  header.title p{margin:0;color:var(--ink-2);font-size:1rem}

  /* ---- One topic = one collapsible row of the waterfall.
     Click the heading to expand or collapse it. ---- */
  .controls{display:flex;gap:18px;padding:18px 0 4px;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.9rem}
  .controls button{background:none;border:0;padding:0;color:var(--head);font:inherit;cursor:pointer;text-decoration:underline}
  details.step{border-bottom:1px solid var(--rule)}
  details.step summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;padding:22px 0}
  details.step summary::-webkit-details-marker{display:none}
  details.step summary::before{content:"";width:12px;height:12px;margin-top:9px;justify-self:center;
    border-right:2px solid var(--head);border-bottom:2px solid var(--head);transform:rotate(-45deg);transition:transform .15s}
  details.step[open] summary::before{transform:rotate(45deg)}
  details.step summary h2{margin:0;font-size:1.35rem;line-height:1.3;font-weight:normal;color:var(--head)}
  details.step summary:hover h2{text-decoration:underline}
  details.step summary:focus-visible{outline:2px solid var(--head);outline-offset:4px}
  details.step .body{max-width:620px;padding:0 0 36px 42px}
  details.step .body > :first-child{margin-top:0}
  details.step p{margin:0 0 1em}
  details.step h3{font-size:1.05rem;font-weight:bold;margin:1.6em 0 .4em;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  @media (max-width:720px){
    details.step .body{padding-left:0}
    body{font-size:17px}
    header.title h1{font-size:1.7rem}
  }
  @media (prefers-reduced-motion:reduce){details.step summary::before{transition:none}}

  figure{margin:1.6em 0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto}
  figcaption{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.85rem;color:var(--ink-2);margin-top:10px}
  .bar{fill:var(--bar)} .bar-aus{fill:var(--bar-aus)}
  .lbl{fill:var(--ink-2)} .lbl-aus{fill:var(--ink);font-weight:bold} .val{fill:var(--ink)}
  .g7{stroke:var(--ink-2);stroke-dasharray:4 4;stroke-width:1}

  table{border-collapse:collapse;width:100%;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.95rem;margin:1em 0}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
  th{color:var(--ink-2);font-weight:normal}
  td.num,th.num{text-align:right;white-space:nowrap}
  mark{background:var(--mark);color:inherit;padding:0 2px}
  .pull{margin:1.4em 0;padding:14px 18px;border-left:4px solid var(--head);font-size:1.1rem;line-height:1.45}
  ul{padding-left:1.2em} li{margin:.35em 0}
  footer{padding-top:28px;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.85rem;color:var(--ink-2)}
  footer ol{padding-left:1.4em} footer li{margin:.3em 0}
  a{color:var(--head)}
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

  /* ---- Site navigation and article index ---- */
  nav.site{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.9rem;padding:4px 0 0}
  nav.site a{text-decoration:none}
  nav.site a:hover{text-decoration:underline}
  ul.articles{list-style:none;padding:0;margin:0}
  ul.articles li{padding:26px 0;border-bottom:1px solid var(--rule)}
  ul.articles h2{margin:0 0 6px;font-size:1.35rem;line-height:1.3;font-weight:normal}
  ul.articles h2 a{text-decoration:none}
  ul.articles h2 a:hover{text-decoration:underline}
  ul.articles .when{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.85rem;color:var(--ink-2);margin:0 0 8px}
  ul.articles p{margin:0;max-width:620px;color:var(--ink-2)}