:root{--bg:#ffffff;--fg:#1d1d1f;--muted:#5f6368;--card:#f5f5f7;--line:#e3e3e8;--accent:#2563EB;--accent2:#2563EB}
@media (prefers-color-scheme:dark){:root{--bg:#0f1014;--fg:#f2f2f5;--muted:#a7a9b2;--card:#1a1b22;--line:#2a2b34;--accent:#3B82F6;--accent2:#3B82F6}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-size:17px;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15em;color:var(--fg);text-decoration:none}
.logo{width:32px;height:32px}
nav a{color:var(--fg);text-decoration:none;margin-left:16px;font-size:.95em}
nav a:hover{color:var(--accent)}
.hero{text-align:center;padding:56px 0 40px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.hero-logo{width:96px;height:96px}
.tagline{font-weight:600;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch{max-width:620px;margin:0 auto 1.6em;color:var(--muted);font-size:1.08em}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:1em}
.badge,.button{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:600;text-decoration:none}
.badge{background:var(--fg);color:var(--bg)}
.button{background:var(--accent);color:#fff}
.small{font-size:.85em;color:var(--muted)}
.section{padding:48px 20px}
.section h2{font-size:1.7em;margin:0 0 .8em;text-align:center}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.card h3{margin:.3em 0;font-size:1.1em}
.card p{margin:0;color:var(--muted);font-size:.95em}
.icon{font-size:1.6em}
details{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0;background:var(--card)}
summary{cursor:pointer;font-weight:600}
details p{margin:.6em 0 0;color:var(--muted)}
.support{text-align:center}
.doc{max-width:760px;padding-top:32px;padding-bottom:48px}
.doc h1{font-size:2em;line-height:1.2}
.doc h2{font-size:1.25em;margin-top:1.8em}
.doc li{margin:.3em 0}
.site-footer{border-top:1px solid var(--line);padding:24px 0;text-align:center;font-size:.9em;color:var(--muted)}
.site-footer p{margin:.4em 0}
.site-footer .links a{margin:0 8px;display:inline-block}
.eyebrow{margin:.4em 0 .2em;font-size:1em;letter-spacing:.04em}
.hero h1{font-size:2.3em;line-height:1.15;max-width:760px;margin:0 auto .4em;letter-spacing:-.02em}
.contrast{font-weight:700;font-size:1.1em;margin:-.6em 0 1.4em}
@media (max-width:480px){nav a{margin-left:10px;font-size:.9em}.hero h1{font-size:1.9em}}
.hero{padding:88px 0 64px;background:none}
.hero-logo{width:64px;height:64px}
.hero h1{font-size:2em;font-weight:650}
.pitch{margin-bottom:2em}
.section{padding:56px 20px}
.section h2{font-size:1.3em;text-align:left}
.features{list-style:none;padding:0;margin:0}
.features li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.features li strong{display:block;color:var(--fg);font-weight:600}
details{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;margin:0}
.site-footer{padding:40px 0}
.hero-tagline{margin:-.2em auto 1.1em;color:var(--muted);font-size:1em;font-weight:400}