:root {
      --bg: #0a0a10;
      --fg: #f4f3ee;
      --muted: rgba(244, 243, 238, 0.65);
      --line: rgba(244, 243, 238, 0.12);
      --accent: #DC527D;
      --accent2: #8b4ad9;
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f4f3ee;
        --fg: #0a0a10;
        --muted: rgba(10, 10, 16, 0.65);
        --line: rgba(10, 10, 16, 0.12);
      }
    }
    body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Inter", system-ui, sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 80px 28px 120px;
    }
    .hero {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    h1 {
      font-size: 44px;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin: 0 0 8px;
      font-weight: 600;
    }
    .last-updated {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 56px;
    }
    h2 {
      font-size: 22px;
      letter-spacing: -0.4px;
      margin: 48px 0 14px;
      font-weight: 600;
    }
    p, ul {
      color: var(--fg);
      font-size: 16px;
      margin: 14px 0;
    }
    ul {
      padding-left: 22px;
    }
    li {
      margin-bottom: 8px;
    }
    .callout {
      background: var(--line);
      border-left: 3px solid var(--accent);
      padding: 18px 22px;
      margin: 24px 0;
      border-radius: 8px;
    }
    .callout strong { color: var(--accent); }
    a {
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
    }
    .footer {
      margin-top: 72px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }
  
    .pill {
      display: inline-block;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      color: #fff;
      border: 0;
      border-radius: 999px;
      padding: 12px 22px;
      font-weight: 600;
      font-size: 15px;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 6px 24px 18px;
      margin: 28px 0;
    }
    .card h2 { font-size: 17px; margin: 26px 0 6px; }
    .card p { font-size: 15.5px; margin: 6px 0 0; }
    nav.links a { margin-right: 18px; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .4px; }
    header a.brand { color: var(--fg); border: 0; font-weight: 600; letter-spacing: -0.3px; }
