:root{
  --ink:#14233f;--ink2:#44557a;--glass:rgba(255,255,255,.58);--glass-b:rgba(255,255,255,.85);
  --accent:#2f6df6;--bg1:#dfe9fb;--bg2:#cdbff0;--bg3:#bfe6f5;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#eaf0ff;--ink2:#a9b6d6;--glass:rgba(30,38,62,.55);--glass-b:rgba(255,255,255,.14);
    --accent:#7aa2ff;--bg1:#0e1426;--bg2:#241a45;--bg3:#0b2a3a}
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:radial-gradient(60vmax 60vmax at 90% -10%,var(--bg2) 0,transparent 60%),
             radial-gradient(55vmax 55vmax at -10% 110%,var(--bg3) 0,transparent 60%),var(--bg1);
  background-attachment:fixed}
a{color:var(--accent)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:12px;z-index:5;margin:12px auto 0;max-width:980px;padding:0 20px}
.bar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-radius:99px;
  background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.logo{font-weight:600;letter-spacing:.28em;color:var(--ink);text-decoration:none}
.bar nav a{margin-left:18px;color:var(--ink2);text-decoration:none;font-size:15px}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:28px;
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.hero{margin:48px 0 24px;padding:44px 32px;text-align:center}
.hero h1{font-size:clamp(32px,6vw,56px);line-height:1.05;margin:0 0 12px;font-weight:600;letter-spacing:-.02em}
.hero p{margin:0 auto 24px;max-width:560px;color:var(--ink2);font-size:18px}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:99px;text-decoration:none;font-weight:500;
  background:var(--glass);border:1px solid var(--glass-b);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pill.primary{background:var(--accent);border-color:transparent;color:#fff}
.pill:hover{transform:translateY(-1px)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:16px 0}
.card{padding:22px;border-radius:24px}
.card h3{margin:0 0 4px;font-size:19px}
.card p{margin:0 0 14px;color:var(--ink2);font-size:15px}
.grid .card{display:flex;flex-direction:column}
.links{margin-top:auto}
.grid .badge{align-self:flex-start}
.guide{margin-top:8px}
.badge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:99px;background:var(--glass-b);color:var(--ink2);margin-bottom:10px}
.doc{margin:40px 0;padding:36px clamp(20px,5vw,48px)}
.doc h1{margin:0 0 4px;font-size:clamp(28px,5vw,40px);letter-spacing:-.02em}
.doc h2{margin:30px 0 6px;font-size:22px}
.doc h3{margin:20px 0 4px;font-size:17px}
.doc .meta{color:var(--ink2);margin:0 0 18px}
.doc li{margin:2px 0}
footer{padding:36px 0 48px;text-align:center;color:var(--ink2);font-size:14px}
footer a{color:var(--ink2);margin:0 8px}
button.pill{font:inherit;cursor:pointer}
#reveal{margin-top:16px;font-size:18px;min-height:30px}
@media (max-width:560px){.bar nav a{margin-left:12px;font-size:14px}.hero{padding:32px 18px}}
.card.here{border:2px solid var(--accent)}
.here-tag{align-self:flex-start;font-size:12px;font-weight:600;color:#fff;background:var(--accent);padding:3px 10px;border-radius:99px;margin-bottom:10px}
.card.here .badge{display:none}