@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fonts/JetBrainsMono-VF.woff2") format("woff2");
}

/* Tokens from ds/theme-ide.css (dark mode, the landing page default) */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #1C1E22; --surface: #23252A; --sunk: #18191C;
  --ink: #DFE1E5; --ink-2: #A9AEB8; --ink-3: #8A909B;
  --line: #31343A; --line-2: #2B2E33; --border-control: #565B64;
  --accent: #3574F0; --accent-ink: #FFFFFF; --accent-text: #73A5FF; --accent-tint: #23314D; --accent-on-tint: #B3CCFF;
  --positive: #67BF80;
  --elevation-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.band { border-top: 1px solid var(--line); }
.band--alt { background: var(--surface); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.mono { font-family: var(--font-mono); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; border-radius: 4px; white-space: nowrap; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink-2); color: var(--ink); }
.btn--sm { font-size: 13px; padding: 8px 14px; }
.btn--lg { font-size: 15px; padding: 13px 20px; }
.muted-link { color: var(--ink-2); }
.muted-link:hover { color: var(--ink); }
.quiet-link { color: var(--ink-3); }
.quiet-link:hover { color: var(--ink); }
.underline-link { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.underline-link:hover { color: var(--ink); border-color: var(--ink-2); }

/* Star request banner */
.star-banner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding: 9px 16px; background: var(--accent-tint); color: var(--accent-on-tint); font-size: 13px; font-weight: 500; text-align: center; }
.star-banner:hover { color: var(--ink); }
.star-banner__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav__inner { height: 60px; display: flex; align-items: center; gap: 24px; }
.nav__links { display: flex; gap: 20px; font-size: 14px; font-weight: 500; flex: 1; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand__mark { width: 16px; height: 16px; background: var(--accent); border-radius: 4px; }
@media (max-width: 960px) { .nav__star { display: none; } }
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; gap: 10px; }
  .nav__spacer { flex: 1; }
}

/* Engines */
.engines { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.engine { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.engine__mg { width: 36px; height: 36px; flex: none; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #15171A; background: oklch(0.82 0.1 var(--h)); }
.engine__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.engine__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engine__lang { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.dot { width: 8px; height: 8px; flex: none; }
.dot--a { background: var(--positive); border: 1px solid var(--positive); }
.dot--n { background: var(--accent); border: 1px solid var(--accent); }
.dot--p { background: transparent; border: 1px solid var(--ink-3); }

/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.feature { background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.feature h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.feature p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* Exact-values table */
.values { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); font-family: var(--font-mono); font-size: 13px; }
.values__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); border-bottom: 1px solid var(--line-2); }
.values__row:last-child { border-bottom: 0; }
.values__row > div { padding: 10px 14px; overflow-wrap: anywhere; }
.values__head { background: var(--bg); border-bottom: 1px solid var(--line); }
.values__head > div { padding: 8px 14px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.t { color: var(--ink-3); font-size: 11px; }

/* Compare table */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.cmp { width: 100%; min-width: 860px; border-collapse: collapse; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; vertical-align: top; font-size: 14px; line-height: 1.45; border-bottom: 1px solid var(--line-2); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp thead th { background: var(--surface); border-bottom: 1px solid var(--line); padding: 16px 18px; }
.cmp thead th span { display: block; }
.cmp__name { font-size: 15px; font-weight: 700; }
.cmp__by { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 4px; }
.cmp tbody th { font-size: 13px; font-weight: 600; color: var(--ink-2); width: 18%; }
.cmp td { font-weight: 400; }
.cmp .us { background: var(--accent-tint); color: var(--accent-on-tint); font-weight: 700; }
.cmp thead .us { box-shadow: inset 0 2px 0 var(--accent); }

/* Donate */
.donate-card { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tier { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tier__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tier__amounts { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.star-note { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.star-note p { flex: 1 1 260px; }
.btn--donate { font-size: 15px; padding: 14px; border-radius: 6px; width: 100%; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }

/* Download platform links */
.dl-others { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 13px; color: var(--ink-3); }
[data-dl-secondary][hidden], .dl-others a[hidden] { display: none; }