:root{
  --surface-0:#f4f3ee; --surface-1:#faf9f5; --surface-2:#ffffff;
  --text-primary:#1a1a17; --text-secondary:#5f5e5a; --text-muted:#8a8984;
  --border:#e3e1d9; --border-strong:#cfcdc4; --border-stronger:#a9a79e;
  --bg-accent:#e6f1fb; --text-accent:#185fa5; --border-accent:#378add; --fill-accent:#378add; --on-accent:#ffffff;
  --bg-success:#eaf3de; --text-success:#3b6d11;
  --bg-warning:#faeeda; --text-warning:#854f0b;
  --bg-danger:#fcebeb; --text-danger:#a32d2d;
  --fill-primary:#1a1a17; --on-primary:#ffffff;
  --fill-control:#eceae2; --radius:8px;
}
*{box-sizing:border-box}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--text-primary); background:var(--surface-1); margin:0; line-height:1.6;}
.page{max-width:760px; margin:0 auto; padding:48px 24px 80px;}
h1{font-size:28px; font-weight:600; margin:0 0 4px;}
h2{font-size:21px; font-weight:600; margin:2.2em 0 0.6em; border-bottom:1px solid var(--border); padding-bottom:6px;}
h3{font-size:16px; font-weight:600; margin:1.6em 0 0.4em;}
p, li{font-size:14px; color:var(--text-primary);}
.sub{color:var(--text-secondary); font-size:14px; margin:0 0 4px;}
ul{padding-left:20px; margin:6px 0 14px;}
li{margin:3px 0;}
table.spec{border-collapse:collapse; width:100%; font-size:13px; margin:8px 0 16px;}
table.spec th, table.spec td{border:1px solid var(--border); padding:6px 9px; text-align:left; vertical-align:top;}
table.spec th{background:var(--surface-0); font-weight:600;}
pre{background:var(--surface-0); border:1px solid var(--border); border-radius:8px; padding:14px; font-size:11px; overflow-x:auto; line-height:1.45;}
.wf{margin:14px 0 34px;}
.wf-note{font-size:13px; color:var(--text-secondary); margin:4px 0 12px;}
.c-purple rect{fill:#EEEDFE; stroke:#534AB7; stroke-width:1}
.c-purple .th{fill:#3C3489} .c-purple .ts{fill:#534AB7}
.c-teal rect{fill:#E1F5EE; stroke:#0F6E56; stroke-width:1}
.c-teal .th{fill:#085041} .c-teal .ts{fill:#0F6E56}
.c-gray rect{fill:#F1EFE8; stroke:#5F5E5A; stroke-width:1}
.c-gray .th{fill:#444441} .c-gray .ts{fill:#5F5E5A}
svg .ts{fill:#8a8984}
.toc{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px 22px; margin:22px 0;}
.toc p{margin:2px 0; font-size:13px;}
.badge{font-size:11px; padding:2px 8px; border-radius:99px; background:var(--bg-accent); color:var(--text-accent);}
.decision{background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--border-accent); border-radius:0; padding:10px 14px; font-size:13px; margin:10px 0 16px;}

.sitenav{display:flex; flex-wrap:wrap; gap:4px 14px; padding:14px 0 10px; border-bottom:1px solid var(--border); margin-bottom:8px; font-size:13px;}
.sitenav a{color:var(--text-secondary); text-decoration:none;}
.sitenav a:hover{color:var(--text-primary);}
.sitenav a.active{color:var(--text-primary); font-weight:600;}
.sitenav .brand{font-weight:600; color:var(--text-primary); margin-right:6px;}
.pagefoot{font-size:12px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:14px; margin-top:40px;}
.pagefoot a{color:var(--text-accent); text-decoration:none;}
.cardlink{display:block; background:var(--surface-2); border:0.5px solid var(--border); border-radius:12px; padding:14px 18px; text-decoration:none; color:var(--text-primary);}
.cardlink:hover{border-color:var(--border-strong);}
.cardlink p{margin:0;}
.cardlink .t{font-size:15px; font-weight:600;}
.cardlink .d{font-size:12px; color:var(--text-secondary); margin-top:3px;}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin:14px 0;}