:root{
  --bg:#EDF0F3; --panel:#FFFFFF; --ink:#13202C; --muted:#586979; --line:#D3DAE1;
  --accent:#0F3D8F; --navy:#0A2A5E; --navy-ink:#FFFFFF; --gold:#F2B705; --todo:#FFE08A; --todo-ink:#4A3A00;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E151C; --panel:#16202A; --ink:#E6ECF1; --muted:#93A4B4; --line:#2A3846;
    --accent:#86AEF2; --navy:#0D2146; --gold:#E5B73A; --todo:#5A4A10; --todo-ink:#FFE9A8; color-scheme:dark;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Public Sans','Segoe UI',system-ui,sans-serif;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 56px}
.wrap{max-width:820px;margin:0 auto}
.top{background:var(--navy);color:var(--navy-ink);padding:18px 22px;border-bottom:4px solid var(--gold);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.top a{color:var(--navy-ink)}
.brand{font-weight:700;font-size:18px;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:16px 0}
.seg{display:flex;gap:8px}
.seg button{font:600 14px inherit;font-family:inherit;padding:7px 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:4px;cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.seg button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.meta{color:var(--muted);font-size:14px;margin:0}
.todo-banner{background:var(--todo);color:var(--todo-ink);padding:10px 14px;border-radius:4px;margin:0 0 16px;font-size:14px}
.todo{background:var(--todo);color:var(--todo-ink);padding:0 4px;border-radius:2px}
.doc{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:4px;padding:8px 24px 28px;counter-reset:sec}
.doc h1{font-size:28px;line-height:1.2;margin:22px 0 6px}
.doc h2{font-size:18px;margin:26px 0 6px;counter-increment:sec}
.doc h2::before{content:counter(sec) ". "}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0}
.doc th,.doc td{text-align:left;vertical-align:top;border:1px solid var(--line);padding:7px 9px}
.doc th{background:var(--bg)}
.scroll{overflow-x:auto}
.note{border-left:3px solid var(--gold);padding:2px 12px;color:var(--muted)}
a{color:var(--accent)}
.foot{margin-top:18px;color:var(--muted);font-size:13px}