:root{
      --bg:#ffffff; --card:#f8fafc; --fg:#0e1116; --muted:#475569; --accent:#0ea5e9;
      --accent-2:#06b6d4; --border:#e2e8f0;
    }
    [data-theme="dark"]{
      --bg:#0b1220; --card:#071123; --fg:#e6eef6; --muted:#9fb3c8; --accent:#3dd1f0;
      --accent-2:#2ac7d6; --border:#123241;
    }
    *{box-sizing:border-box}
    body{margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--fg); line-height:1.6}
    .wrap{max-width:980px; margin:28px auto; padding:28px}
    header{display:flex; align-items:center; justify-content:space-between; gap:12px}
    h1{font-size:28px; margin:0}
    .muted{color:var(--muted); font-size:13px}
    .note{background:var(--card); border:1px solid var(--border); padding:14px; border-radius:10px}
    h2{margin-top:26px; font-size:20px}
    p,li{font-size:15px}
    ul{padding-left:20px}
    .footer{margin-top:36px; border-top:1px solid var(--border); padding-top:18px; color:var(--muted); font-size:13px}
    .btn{background:transparent; border:1px solid var(--border); color:var(--fg); padding:6px 10px; border-radius:8px; cursor:pointer}
    .btn:active{transform:translateY(1px)}
    pre.kv{background:transparent; border:1px dashed var(--border); padding:8px; border-radius:6px; overflow:auto}
    @media (prefers-color-scheme: dark){
      :root:not([data-theme="light"]){
        --bg:#0b1220; --card:#071123; --fg:#e6eef6; --muted:#9fb3c8; --accent:#3dd1f0; --border:#123241;
      }
    }
    .small{font-size:13px;color:var(--muted)}
a {
  color:var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted #0a66c2;
  position: relative;
}

a::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 0.3em;
  vertical-align: text-top;
  opacity: 0.7;
}
a:hover {
  text-decoration: underline;
}