header{ z-index: 10; }
    :root{
      --bg: #f6f7fb;
      --card: #ffffff;
      --ink: #12141a;
      --muted: #5b6270;
      --accent: #5865f2;
      --ring: rgba(88,101,242,.15);
      --shadow: 0 10px 30px rgba(20,24,40,.06);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg: #0f1218;
        --card: #141924;
        --ink: #e8ebf2;
        --muted: #aab1bf;
        --accent: #8ea0ff;
        --ring: rgba(142,160,255,.18);
        --shadow: 0 10px 30px rgba(0,0,0,.35);
      }
    }
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
      background: var(--bg);
      position: relative;
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body::before{
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(1200px 600px at 10% -10%, rgba(88,101,242,.08), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(24,208,188,.06), transparent 60%),
        var(--bg);
    }
    .wrap{
      max-width: 920px;
      margin: 48px auto 96px;
      padding: 0 20px;
    }
    header{
      position: sticky; top: 0;
      backdrop-filter: saturate(140%) blur(8px);
      -webkit-backdrop-filter: saturate(140%) blur(8px);
      will-change: backdrop-filter;
      background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.45));
      transform: translateZ(0);
      border-bottom: 1px solid rgba(88,101,242,.12);
      padding: 10px 0;
    }
    @media (prefers-color-scheme: dark){
      header{ background: linear-gradient(to bottom, rgba(20,24,36,.55), rgba(20,24,36,.35)); border-bottom-color: rgba(142,160,255,.12);}
    }
    .nav{
      max-width: 920px; margin: 0 auto; padding: 0 20px;
      display: flex; gap: 16px; align-items: center; justify-content: space-between;
    }
    .brand{ font-weight: 700; letter-spacing: .2px;}
    .nav a{ color: var(--ink); text-decoration: none; opacity: .8;}
    .nav a:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 3px;}
    .card{
      background: var(--card);
      border-radius: 16px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(88,101,242,.10);
      overflow: hidden;
    }
    .hero{
      padding: 28px 28px 0;
    }
    h1{
      margin: 0 0 8px;
      font-size: clamp(28px, 3.2vw, 36px);
      line-height: 1.2;
      letter-spacing: -.3px;
    }
    .meta{ color: var(--muted); font-size: 14px; margin-bottom: 4px;}
    .toc{
      padding: 16px 28px 0;
      border-top: 1px solid rgba(88,101,242,.10);
    }
    .toc h2{
      font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
    }
    .toc ul{ margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));}
    .toc ul li { list-style: none; }
    .toc a{ color: var(--accent); text-decoration: none; }
    .toc a:hover{ text-decoration: underline; text-underline-offset: 3px;}
    .content{ padding: 4px 28px 28px; }
    h3{
      margin-top: 28px; margin-bottom: 8px; font-size: 18px; letter-spacing: .2px;
    }
    p{ margin: 8px 0 12px; color: var(--ink) }
    ul{ margin: 8px 0 16px 20px;}
    li{ margin: 6px 0; }
    .foot{
      margin-top: 20px; padding-top: 16px;
      border-top: 1px dashed rgba(88,101,242,.18);
      color: var(--muted); font-size: 14px;
    }
    .badge{
      display:inline-block; font-size:12px; padding:3px 8px; border-radius:999px; background: var(--ring); color: var(--accent);
      border: 1px solid rgba(88,101,242,.22);
    }
    a.anchor{
      color: inherit; text-decoration: none;
    }