:root {
  color-scheme:light;
  --primary-hue:90deg;
  --primary:oklch(.67 .16 var(--primary-hue));
  --primary-hover:oklch(.57 .14 var(--primary-hue));
  --primary-soft:oklch(.96 .035 var(--primary-hue));
  --ink:oklch(.23 .035 var(--primary-hue));
  --muted:oklch(.49 .035 var(--primary-hue));
  --line:oklch(.86 .026 var(--primary-hue));
  --surface:oklch(.995 .006 var(--primary-hue));
  --background:oklch(.965 .015 var(--primary-hue));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--background);
}
* { box-sizing:border-box; }
body { margin:0; line-height:1.65; background:radial-gradient(ellipse at 50% -25%,var(--primary-soft) 0,transparent 54%),var(--background); }
.top { height:72px; padding:0 max(22px,calc((100vw - 1000px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-size:19px; font-weight:800; letter-spacing:-.5px; }
.brand span,.top a:last-child { color:var(--primary-hover); }
.top a:last-child { font-size:13px; font-weight:700; text-decoration:none; }
.page { width:min(820px,calc(100% - 36px)); margin:54px auto 70px; padding:clamp(24px,6vw,54px); background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 8px 28px oklch(.30 .04 90 / .08); }
.eyebrow { margin:0 0 8px; color:var(--primary-hover); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0 0 22px; font-size:clamp(30px,5vw,42px); line-height:1.12; letter-spacing:-1.4px; }
h2 { margin:30px 0 8px; font-size:18px; letter-spacing:-.3px; }
p,li { color:var(--muted); }
a { color:var(--primary-hover); }
footer { width:min(1000px,calc(100% - 36px)); margin:0 auto; padding:18px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:12px; }
footer nav { display:flex; gap:18px; flex-wrap:wrap; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--primary-hover); }
@media(max-width:520px) { .top { padding:0 18px; } .page { margin:25px auto 40px; } footer { flex-direction:column; } }