:root {
  --bg: #07080f;
  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.10);
  --text: #f2f3f8;
  --muted: rgba(242,243,248,.58);
  --accent: #ffb26b;
  --accent2: #f2708a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58rem 34rem at 78% -8%, rgba(70,86,190,.30), transparent 62%),
    radial-gradient(46rem 30rem at 8% 22%, rgba(120,60,170,.24), transparent 60%),
    radial-gradient(52rem 32rem at 62% 108%, rgba(190,90,70,.20), transparent 62%);
}
.wrap { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 56px 22px 90px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 46px; }
.mark { width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: conic-gradient(from -90deg, #cdd0f5 0deg 150deg, rgba(255,255,255,.07) 150deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%);
          mask: radial-gradient(circle, transparent 34%, #000 35%); }
.brand { font-weight: 600; letter-spacing: -.01em; }
.brand small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--text); }
h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; font-weight: 600; }
h2 { font-size: 19px; margin: 38px 0 10px; letter-spacing: -.01em; }
p, li { color: rgba(242,243,248,.82); }
.lede { font-size: 18px; color: var(--muted); margin-bottom: 34px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 18px 0; }
.card h2 { margin-top: 0; }
.key { display: grid; gap: 10px; padding: 0; list-style: none; margin: 16px 0; }
.key li { display: flex; gap: 11px; align-items: flex-start; }
.key b { color: var(--text); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 9px; flex: none;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); }
.updated { color: var(--muted); font-size: 13px; margin-bottom: 30px; }
a { color: var(--accent); }
footer { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; }
code { background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; font-size: 13px; }