:root{color-scheme:light dark;--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--accent:#22d3ee;--brand:#60a5fa;--border:rgba(255,255,255,.08)}
html[data-theme="light"]{--bg:#ffffff;--card:#f8fafc;--text:#0f172a;--muted:#475569;--border:rgba(2,6,23,.1)}
html[data-theme="dark"]{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:rgba(255,255,255,.08)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1.2rem}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-name{font-weight:700}
.logo{width:40px;height:40px}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{color:var(--text);text-decoration:none;opacity:.9}
.nav a:hover{opacity:1}
.theme-toggle{padding:.5rem .7rem;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);cursor:pointer}
.hamburger{display:none;appearance:none;background:transparent;border:1px solid var(--border);padding:.5rem .7rem;border-radius:.5rem;color:var(--text)}
#nav-panel{position:fixed;inset:0 0 auto 0;top:64px;background:var(--card);border-top:1px solid var(--border);padding:1rem;display:none}
#nav-panel.open{display:block}
#nav-panel a{display:block;padding:.6rem 0;color:var(--text);text-decoration:none;border-bottom:1px dashed var(--border)}
#nav-panel a:last-child{border-bottom:0}
@media(max-width:900px){.nav .links{display:none}.hamburger{display:inline-flex}}
.hero{padding:4rem 0;background:radial-gradient(1200px 600px at 20% 10%,rgba(96,165,250,.12),transparent),radial-gradient(1200px 600px at 80% 20%,rgba(34,211,238,.1),transparent)}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 1rem}
.hero .accent{color:var(--accent)}
.lead{font-size:1.1rem;opacity:.95}
.section{padding:3rem 0}
.section.alt{background:rgba(127,127,127,.03);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.center{text-align:center}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.site-footer{border-top:1px solid var(--border);padding:1.6rem 0;margin-top:2rem}
.social{display:flex;gap:.6rem}
.social a{color:var(--text);text-decoration:none;opacity:.9}
/* Graph */
.projection .graph{max-width:720px;margin:0 auto}
.projection svg{width:100%;height:auto}
.path{stroke:url(#grad);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;animation:draw 5s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:1000}50%{stroke-dashoffset:0}100%{stroke-dashoffset:1000}}
.dot{fill:#22d3ee;animation:bob 2.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}