/* Shared tokens, base, top bar. Light by default; dark via system or the theme toggle (data-theme on <html>). */
:root{
  --paper:#f1f4ef; --paper-2:#e4ebe1; --surface:#fbfcfa; --grid:#dfe7db; --rule:#c3d0bf;
  --ink:#13202b; --ink-2:#435450; --ink-3:#57685f;
  --dr:#1c4cae; --dr-wash:#e0e8fa; --cr:#a14a09; --cr-wash:#f9e5d2;
  --accent:#c2283a; --good:#1a7546; --warn:#8f6104; --bad:#ad2430;
  --f-ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-num:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-form:"Noto Serif","Times New Roman",Times,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1412; --paper-2:#17201c; --surface:#121a17; --grid:#1a2420; --rule:#2c3b35;
    --ink:#e3eae6; --ink-2:#a6b6af; --ink-3:#86978f;
    --dr:#89a9ff; --dr-wash:#1a2646; --cr:#f0a35f; --cr-wash:#3a2412;
    --accent:#ff6e7c; --good:#63d29b; --warn:#efc150; --bad:#ff7d86;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0e1412; --paper-2:#17201c; --surface:#121a17; --grid:#1a2420; --rule:#2c3b35;
  --ink:#e3eae6; --ink-2:#a6b6af; --ink-3:#86978f;
  --dr:#89a9ff; --dr-wash:#1a2646; --cr:#f0a35f; --cr-wash:#3a2412;
  --accent:#ff6e7c; --good:#63d29b; --warn:#efc150; --bad:#ff7d86;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--f-ui)}
a{color:var(--dr);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--dr);outline-offset:2px}

.topbar{border-bottom:1px solid var(--rule);background:var(--paper)}
.topbar-in{max-width:var(--page-w,1440px);margin:0 auto;padding:10px clamp(16px,3vw,40px);display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.brand{font:800 15px/1.2 var(--f-ui);color:var(--ink);text-decoration:none;margin-right:auto}
.topbar nav{display:flex;gap:16px;font:500 14px/1.2 var(--f-ui)}
.topbar nav a{color:var(--ink-2);text-decoration:none;padding:6px 0}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}

.btn{appearance:none;font:600 13px/1 var(--f-ui);padding:0 12px;min-height:36px;border-radius:6px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--ink-3)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover:not(:disabled){background:var(--ink-2);border-color:var(--ink-2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.small{min-height:30px;font-size:12.5px;padding:0 10px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}