@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#1e1e2e; --bg-elevated:#181825; --bg-deep:#11111b;
  --surface:#232335; --surface-hover:#2b2b40; --border:#3b3b52; --rule: rgba(255,255,255,0.08);
  --text:#cdd6f4; --text-dim:#a6adc8; --text-faint:#6c7086;
  --accent:#cba6f7; --accent-2:#b4befe; --accent-soft: rgba(203,166,247,0.12);
  --green:#a6e3a1; --blue:#89b4fa; --peach:#fab387; --pink:#f5c2e7; --red:#f38ba8; --yellow:#f9e2af;
  --green-bg: rgba(166,227,161,0.12); --blue-bg: rgba(137,180,250,0.12);
  --peach-bg: rgba(250,179,135,0.12); --pink-bg: rgba(245,194,231,0.14);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eff1f5; --bg-elevated:#e6e9ef; --bg-deep:#dce0e8;
    --surface:#ffffff; --surface-hover:#f2f4f8; --border:#ccd0da; --rule: rgba(76,79,105,0.14);
    --text:#4c4f69; --text-dim:#6c6f85; --text-faint:#8c8fa1;
    --accent:#8839ef; --accent-2:#7287fd; --accent-soft: rgba(136,57,239,0.08);
    --green:#40a02e; --blue:#1e66f5; --peach:#fe640b; --pink:#ea76cb; --red:#d20f39; --yellow:#df8e1d;
    --green-bg: rgba(64,160,46,0.10); --blue-bg: rgba(30,102,245,0.10);
    --peach-bg: rgba(254,100,11,0.10); --pink-bg: rgba(234,118,203,0.10);
  }
}
:root[data-theme="light"]{
  --bg:#eff1f5; --bg-elevated:#e6e9ef; --bg-deep:#dce0e8;
  --surface:#ffffff; --surface-hover:#f2f4f8; --border:#ccd0da; --rule: rgba(76,79,105,0.14);
  --text:#4c4f69; --text-dim:#6c6f85; --text-faint:#8c8fa1;
  --accent:#8839ef; --accent-2:#7287fd; --accent-soft: rgba(136,57,239,0.08);
  --green:#40a02e; --blue:#1e66f5; --peach:#fe640b; --pink:#ea76cb; --red:#d20f39; --yellow:#df8e1d;
  --green-bg: rgba(64,160,46,0.10); --blue-bg: rgba(30,102,245,0.10);
  --peach-bg: rgba(254,100,11,0.10); --pink-bg: rgba(234,118,203,0.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Source Sans 3', system-ui, sans-serif; font-size:16px; line-height:1.6;
}
::selection{ background:var(--accent-soft); color:var(--text); }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
code{ font-family:'JetBrains Mono', monospace; font-size:0.92em; }
h1,h2,h3{ font-family:'Sora', sans-serif; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
img{ max-width:100%; }

.wrap{ max-width:1080px; margin:0 auto; padding-left:clamp(1.25rem,4vw,2.5rem); padding-right:clamp(1.25rem,4vw,2.5rem); }

/* ---- Nav ---- */
.site-nav{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom:1px solid var(--rule);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1080px; }
.wordmark{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; color:var(--text); display:flex; align-items:center; gap:0.5em; }
.wordmark:hover{ text-decoration:none; }
.wordmark .glyph{ color:var(--accent); }
.nav-links{ display:flex; gap:1.8rem; align-items:center; font-size:0.95rem; }
.nav-links a{ color:var(--text-dim); }
.nav-links a.current, .nav-links a:hover{ color:var(--text); text-decoration:none; }
.nav-links a.cta{
  color:var(--bg); background:var(--accent); padding:0.45rem 1rem; border-radius:6px; font-weight:600;
}
.nav-links a.cta:hover{ opacity:0.88; }
@media (max-width:640px){ .nav-links{ gap:1rem; } .nav-links .hide-sm{ display:none; } }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em; font-weight:600; font-size:0.98rem;
  padding:0.7rem 1.3rem; border-radius:8px; border:1px solid transparent; cursor:pointer;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--accent); color:var(--bg-deep); }
.btn-primary:hover{ opacity:0.9; }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ background:var(--surface-hover); }

/* ---- Sections ---- */
section{ padding: clamp(3rem,7vw,5.5rem) 0; }
.section-head{ max-width:56ch; margin-bottom:2.4rem; }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:0.6em; margin-bottom:0.6rem;
}
.eyebrow::before{ content:"§"; color:var(--text-faint); }
.section-head h2{ font-size:clamp(1.6rem,3.4vw,2.1rem); font-weight:700; margin-bottom:0.6rem; }
.section-head p{ color:var(--text-dim); }

/* ---- Cards / grid ---- */
.grid{ display:grid; gap:1.1rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:800px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem;
}
.card h3{ font-size:1.05rem; font-weight:600; margin-bottom:0.5rem; }
.card p{ color:var(--text-dim); margin:0; font-size:0.95rem; }
.card .icon{ font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:1.1rem; margin-bottom:0.7rem; display:block; }

/* ---- Code block ---- */
pre{
  background:var(--bg-deep); border:1px solid var(--border); border-radius:10px;
  padding:1.1rem 1.3rem; overflow-x:auto; font-size:0.88rem; line-height:1.7;
}
pre code{ color:var(--text); }
.token-cmt{ color:var(--text-faint); }
.token-str{ color:var(--green); }

/* ---- Footer ---- */
footer{ border-top:1px solid var(--rule); padding:2.5rem 0 3.5rem; color:var(--text-faint); font-size:0.88rem; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
footer a{ color:var(--text-dim); }

.tag{
  font-family:'JetBrains Mono', monospace; font-size:0.74rem; padding:0.2rem 0.5rem;
  border-radius:4px; border:1px solid transparent; line-height:1.4; white-space:nowrap; display:inline-block;
}
.tag.s{ color:var(--green); background:var(--green-bg); border-color:color-mix(in srgb, var(--green) 35%, transparent); }
.tag.m{ color:var(--blue); background:var(--blue-bg); border-color:color-mix(in srgb, var(--blue) 35%, transparent); }
.tag.l{ color:var(--peach); background:var(--peach-bg); border-color:color-mix(in srgb, var(--peach) 35%, transparent); }
.tag.lineage{ color:var(--text-dim); background:var(--surface); border-color:var(--border); }
.tag.native{ color:var(--pink); background:var(--pink-bg); border-color:color-mix(in srgb, var(--pink) 35%, transparent); font-weight:500; }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; padding: clamp(4rem,10vw,7rem) 0 clamp(3rem,6vw,4.5rem); }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.9; }
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; line-height:1.02; margin-bottom:1.1rem; }
.hero h1 .accent{ color:var(--accent); }
.hero .subtitle{ max-width:56ch; font-size:1.15rem; color:var(--text-dim); margin-bottom:2rem; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-bottom:0.75rem; }
.hero .badges{ display:flex; gap:0.6rem; margin-bottom:2.2rem; }
.hero .badges img{ height:20px; display:block; }

/* ---- Download panel ---- */
.dl-meta{
  display:flex; flex-wrap:wrap; gap:0.9rem 1.4rem; align-items:center; margin-bottom:1.6rem;
  font-family:'JetBrains Mono',monospace; font-size:0.85rem; color:var(--text-faint);
}
.dl-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.1rem; }
.dl-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.4rem; }
.dl-arch{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.2rem; text-transform:uppercase; letter-spacing:0.02em; }
.dl-size{ color:var(--text-faint); font-size:0.85rem; font-family:'JetBrains Mono',monospace; margin:0.2rem 0 0.9rem; }
.dl-parts{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; line-height:2; max-height:8.5rem; overflow-y:auto; margin-bottom:0.9rem; padding-right:0.4rem; }
.dl-parts .ptsize{ color:var(--text-faint); }
.dl-card pre{ margin:0; font-size:0.78rem; padding:0.8rem 0.9rem; }
.dl-empty{ color:var(--text-dim); }

/* ---- Roadmap page ---- */
.rm-shell{ display:grid; grid-template-columns:240px minmax(0,1fr); max-width:1080px; margin:0 auto; }
@media (max-width:900px){ .rm-shell{ grid-template-columns:1fr; } .rm-toc{ display:none; } }
.rm-head{ grid-column:1/-1; padding:2.6rem clamp(1.25rem,4vw,2.5rem) 1.6rem; border-bottom:1px solid var(--rule); }
.rm-head h1{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:700; margin:0.4rem 0 0.7rem; }
.rm-head .lede{ max-width:62ch; color:var(--text-dim); font-size:1.05rem; }
.rm-legend{
  grid-column:1/-1; display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; align-items:center;
  padding:0.9rem clamp(1.25rem,4vw,2.5rem); background:var(--bg-elevated); border-bottom:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace; font-size:0.76rem; color:var(--text-faint);
}
.rm-toc{ padding:2.2rem 1.25rem; position:sticky; top:64px; align-self:start; max-height:calc(100vh - 64px); overflow-y:auto; }
.rm-toc-title{ font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 0.9rem 0.9rem; }
.rm-toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.15rem; }
.rm-toc a{ display:flex; gap:0.6em; align-items:baseline; color:var(--text-dim); padding:0.45rem 0.9rem; border-radius:6px; font-size:0.92rem; }
.rm-toc a:hover{ background:var(--surface-hover); text-decoration:none; color:var(--text); }
.rm-toc a .n{ font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--text-faint); }
.rm-toc small{ display:block; margin:0.15rem 0.9rem 0; color:var(--text-faint); font-size:0.76rem; }
.rm-main{ padding:2.4rem clamp(1.25rem,4vw,2.75rem) 5rem; min-width:0; }
.rm-group{ margin-bottom:3.2rem; scroll-margin-top:5rem; }
.rm-group-head{ display:flex; align-items:baseline; gap:0.85rem; margin-bottom:0.4rem; padding-bottom:0.9rem; border-bottom:2px solid var(--border); }
.rm-group-num{ font-family:'JetBrains Mono',monospace; font-size:1rem; color:var(--accent); }
.rm-group-head h2{ font-size:1.5rem; font-weight:600; }
.rm-group-note{ color:var(--text-faint); font-size:0.9rem; margin:0.6rem 0 1.4rem; font-style:italic; }
.rm-feature{ padding:1.15rem 0; border-bottom:1px solid var(--rule); }
.rm-feature:last-child{ border-bottom:none; }
.rm-feature:hover{ background:var(--surface-hover); margin:0 -0.9rem; padding-left:0.9rem; padding-right:0.9rem; border-radius:8px; }
.rm-feature h3{ font-size:1.05rem; font-weight:600; margin:0; }
.rm-feature p{ margin:0.15rem 0 0.2rem; color:var(--text-dim); max-width:68ch; }
.rm-feature p.why::before{ content:"Why it matters — "; color:var(--text-faint); font-family:'JetBrains Mono',monospace; font-size:0.78rem; }
.rm-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.45rem; }