/* Vanna Notes — shared design tokens & chrome
   Type: Fraunces (display) · IBM Plex Sans (text) · IBM Plex Mono (figures) · Noto Sans SC (中文)
   Color: cool paper ground, ink navy, one accent (signal blue) + one counter-accent (vol orange) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root{
  color-scheme:light;
  --page:#EEF1F5; --surface:#FFFFFF; --surface-2:#F6F8FA; --ink:#0B1220; --ink-2:#3D4A5C; --muted:#7A8797;
  --grid:#E1E6EC; --axis:#C5CDD6; --ring:rgba(11,18,32,.10); --ring-strong:rgba(11,18,32,.22);
  --accent:#1F4FD8; --accent-ink:#163CA8; --accent-soft:rgba(31,79,216,.10);
  --vol:#C8552E; --vol-soft:rgba(200,85,46,.12);
  --good:#0F7B4F; --bad:#B8352B;
  --s1:var(--accent); --s1-soft:var(--accent-soft); --bench:#8E9AA8; --dd:var(--vol); --dd-soft:var(--vol-soft); --backfill:#B98A1E;
  --inverse-bg:#0B1220; --inverse-ink:#E8ECF1; --inverse-muted:#93A0B0;
  --serif:"Fraunces","Songti SC","Noto Serif SC",Georgia,serif;
  --sans:"IBM Plex Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1080px; --gutter:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --page:#0C1017; --surface:#141A23; --surface-2:#1A212C; --ink:#E8ECF1; --ink-2:#B6C0CC; --muted:#8792A1;
  --grid:#232B37; --axis:#334052; --ring:rgba(255,255,255,.10); --ring-strong:rgba(255,255,255,.22);
  --accent:#6E8DFF; --accent-ink:#8EA5FF; --accent-soft:rgba(110,141,255,.14);
  --vol:#E0774F; --vol-soft:rgba(224,119,79,.16);
  --good:#3DBB84; --bad:#E5705A; --bench:#6F7C8C; --backfill:#D9A548;
  --inverse-bg:#E8ECF1; --inverse-ink:#0B1220; --inverse-muted:#4A5568;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0C1017; --surface:#141A23; --surface-2:#1A212C; --ink:#E8ECF1; --ink-2:#B6C0CC; --muted:#8792A1;
  --grid:#232B37; --axis:#334052; --ring:rgba(255,255,255,.10); --ring-strong:rgba(255,255,255,.22);
  --accent:#6E8DFF; --accent-ink:#8EA5FF; --accent-soft:rgba(110,141,255,.14);
  --vol:#E0774F; --vol-soft:rgba(224,119,79,.16);
  --good:#3DBB84; --bad:#E5705A; --bench:#6F7C8C; --backfill:#D9A548;
  --inverse-bg:#E8ECF1; --inverse-ink:#0B1220; --inverse-muted:#4A5568;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
a:hover{border-bottom-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.06;font-variation-settings:"opsz" 144}
h2{font-size:clamp(24px,3vw,32px);line-height:1.2;font-variation-settings:"opsz" 72}
h3{font-size:20px;line-height:1.3;font-variation-settings:"opsz" 36}
p{margin:0 0 1em;max-width:66ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ring)}
.topbar .wrap{display:flex;align-items:center;gap:28px;height:60px}
.logo{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:baseline;gap:8px;border-bottom:none}
.logo .mark{display:inline-block;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--vol));transform:translateY(1px)}
.nav{display:flex;gap:22px;font-size:14.5px}
.nav a{color:var(--ink-2);border-bottom:none;padding:4px 0;position:relative}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.lang{margin-left:auto;display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--ring);border-radius:999px;padding:2px}
.lang button{font:inherit;font-size:12.5px;background:none;border:0;color:var(--muted);padding:3px 10px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:500;font-size:15px;padding:11px 18px;border-radius:999px;border:1px solid var(--ring-strong);color:var(--ink);background:var(--surface);cursor:pointer;transition:transform .12s,background .15s}
.btn:hover{border-bottom-color:var(--ring-strong);background:var(--surface-2)}
.btn.primary{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}

/* ---- footer ---- */
.footer{margin-top:96px;border-top:1px solid var(--ring);padding:36px 0 56px;color:var(--muted);font-size:13px;line-height:1.6}
.footer .wrap{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:760px){.footer .wrap{grid-template-columns:1.4fr 1fr}}
.footer p{max-width:70ch;margin:0}
.footer .links{display:flex;flex-wrap:wrap;gap:16px;align-content:start}
.footer .links a{color:var(--ink-2)}

/* ---- utilities ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;padding:3px 10px;border-radius:999px;border:1px solid var(--ring);color:var(--ink-2);background:var(--surface)}
.chip.up{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.chip.dn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}