/* Shared tokens with index.html / privacy.html (kept in sync by hand, standalone static page). */
  :root{
    --bg:#0a0a0b; --surface:#141416; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
    --fg:#f5f5f6; --fg-2:#d2d2d8; --muted:#9a9aa3; --accent:#c6f24e; --accent-ink:#0c1402;
    --display:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Inter",system-ui,-apple-system,sans-serif;
    --r:16px; --r-pill:999px; --pad:clamp(20px,5vw,40px);
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
  body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(55% 45% at 80% -5%, rgba(198,242,78,.10), transparent 60%)}
  a{color:var(--accent)}
  ::selection{background:var(--accent); color:var(--accent-ink)}
  :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
  .wrap{max-width:760px; margin-inline:auto; padding-inline:var(--pad)}

  header{border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:70px; max-width:1120px; margin-inline:auto; padding-inline:var(--pad)}
  .logo{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; text-decoration:none; color:var(--fg)}
  .logo .mark{width:30px; height:30px}
  .back{color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:500}
  .back:hover{color:var(--accent)}

  main{padding-block:clamp(48px,8vw,80px)}
  h1{font-family:var(--display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,5vw,3rem); line-height:1.05; margin:0 0 12px}
  .updated{color:var(--muted); font-size:.9rem; margin:0 0 36px}
  h2{font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:44px 0 12px; scroll-margin-top:90px}
  h3{font-family:var(--display); font-weight:700; font-size:1.1rem; margin:26px 0 8px; color:var(--fg)}
  p{margin:0 0 16px; color:var(--fg-2)}
  ul{margin:0 0 16px; padding-left:22px; color:var(--fg-2)}
  li{margin-bottom:8px}
  strong{color:var(--fg); font-weight:600}
  .lede{font-size:1.15rem; color:var(--fg-2)}

  .note{border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); padding:20px 22px; margin:0 0 28px}
  .note p:last-child{margin-bottom:0}
  .note.warn{border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.06)}
  .note.warn strong{color:#fb7185}

  .toc{border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; margin:0 0 36px; background:var(--surface)}
  .toc b{font-family:var(--display); font-size:.95rem; letter-spacing:.02em; color:var(--fg)}
  .toc ol{margin:10px 0 0; padding-left:20px; columns:2; column-gap:28px}
  @media (max-width:560px){.toc ol{columns:1}}
  .toc li{margin-bottom:6px}
  .toc a{color:var(--fg-2); text-decoration:none}
  .toc a:hover{color:var(--accent)}

  footer{border-top:1px solid var(--line); padding-block:40px; color:var(--muted); font-size:.88rem}
  footer .wrap{display:flex; flex-wrap:wrap; gap:12px 18px; justify-content:space-between}
  footer a{color:var(--muted); text-decoration:none}
  footer a:hover{color:var(--accent)}