:root{color-scheme:light dark;--bg:#f4f4f5;--card:#fff;--text:#09090b;--sub:#52525b;--pill:#e4e4e7}
@media (prefers-color-scheme:dark){:root{--bg:#000;--card:#18181b;--text:#fff;--sub:#a1a1aa;--pill:#27272a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","SF Pro Text",Segoe UI,sans-serif}
body:before{content:"";position:fixed;inset:0 0 auto;height:420px;background:linear-gradient(#0ea5e9,#2563eb 55%,transparent);opacity:.18;z-index:-1}
.wrap{max-width:720px;margin:0 auto;padding:48px 16px 64px}
header{display:flex;align-items:center;gap:14px}
.logo{width:56px;height:56px;border-radius:13px;display:block}
h1{margin:0;font-size:32px;letter-spacing:-.5px}
h2{margin:0 0 6px;font-size:18px}
.sub{color:var(--sub);margin:10px 0 24px}
nav{display:flex;gap:8px;margin:0 0 24px;flex-wrap:wrap}
nav a{color:var(--text);text-decoration:none;background:var(--pill);padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px}
.card{background:var(--card);border-radius:24px;padding:20px;margin:0 0 12px}
.card p,.card li{margin:0;color:var(--sub)}
.card ul{margin:6px 0 0;padding-left:20px}
a{color:#0284c7}