:root {
  --bg: #0b0e14;
  --panel: #11151f;
  --border: #1e2533;
  --fg: #e6e9ef;
  --muted: #9aa4b2;
  --accent: #6ea8fe;
  --accent-2: #7ee787;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }

/* Form controls do not inherit the page's palette the way other elements do.
   A button, input or select with no background of its own is painted with the
   browser's, which is near white — and every foreground colour here is chosen
   for a dark ground. That pairing has produced the same contrast bug twice:
   button.btn, fixed at the time with a one-line override, and then button.chip,
   which shipped at 1.34:1 against a WCAG AA floor of 4.5. Fixing it per class
   means the next control is broken until someone notices, so the default is set
   once here and components override it where they want something else. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
}
/* Options are drawn by the platform, and a transparent one is unreadable on
   the systems that honour the page's colours. */
option { background-color: var(--panel); color: var(--fg); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* The canvas the browser paints outside the body — the overscroll area, and
   anything past the gradient's box — is white unless the root element carries a
   colour. body sets only a gradient, and the `background` shorthand resets
   background-color to transparent, so the root has to hold the solid colour. */
html { background-color: var(--bg); }
html { scroll-behavior: smooth; }
/* Smooth scrolling can trigger nausea in people with vestibular disorders, so
   it is opt-out for anyone who has asked their OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #131a28 0%, var(--bg) 60%) var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(960px, 92vw); margin-inline: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links carry no underline until hover, so keyboard focus needs a visible ring
   of its own; the browser default is easy to lose against this background. */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

/* Available to screen readers, removed from the visual layout. Used for the
   section headings that keep the document outline from skipping a level. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; gap: 16px;
}
.brand { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--fg); letter-spacing: .02em; }
.brand::before { content: "›"; color: var(--accent-2); margin-right: .35em; }
nav { display: flex; gap: 20px; flex-wrap: wrap; }
nav a { color: var(--muted); font-size: .95rem; }
nav a:hover { color: var(--fg); text-decoration: none; }

.hero { padding: 64px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--muted); max-width: 46ch; margin: 0 auto 30px; }
.lede em { color: var(--fg); font-style: normal; border-bottom: 1px solid var(--accent); }

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 9px;
  border: 1px solid var(--border); color: var(--fg); font-weight: 600; font-size: .98rem;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); color: #07101f; border-color: var(--accent); }
.btn.primary:hover { background: #8bbcff; }

.install {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.install li {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 13px;
}
.install li:hover { border-color: var(--accent); }
.install .lang {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.install a { font-family: var(--mono); font-size: .9rem; color: var(--accent-2); }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; padding: 30px 0 10px;
}
.features article {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px;
  display: flex; flex-direction: column;
}
.features h3 { margin: 0 0 8px; font-size: 1.08rem; }
.features p { margin: 0; color: var(--muted); font-size: .96rem; }
.features .card-link { margin-top: auto; padding-top: 16px; }
.features .card-link a { font-size: .92rem; font-weight: 600; }
.features code { font-family: var(--mono); font-size: .85em; color: var(--accent-2); }

/* Tools section, below the fold on the landing page. Reuses the feature-card
   look rather than pulling in tools.css, so the landing page keeps loading one
   stylesheet. Cards are uniform: no per-tool colour. */
.tools { padding: 30px 0 10px; }
.tools h2 { font-size: 1.5rem; margin: 0 0 10px; }
.tools-lede { color: var(--muted); max-width: 62ch; margin: 0 0 22px; font-size: .98rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tool-grid article {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: 12px; padding: 22px;
}
.tool-grid h3 { margin: 0 0 8px; font-size: 1.05rem; }
.tool-grid h3 a { color: var(--fg); }
.tool-grid h3 a:hover { color: var(--accent); text-decoration: none; }
.tool-grid p { margin: 0; color: var(--muted); font-size: .95rem; }
.tool-grid article.pending { opacity: .6; }
.tools-more { margin: 18px 0 0; font-size: .95rem; }

.quote { padding: 40px 0; }
.quote blockquote {
  margin: 0; padding: 22px 26px; border-left: 3px solid var(--accent-2);
  background: var(--panel); border-radius: 0 12px 12px 0; color: var(--muted);
}
.quote p { margin: 0; }

footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 40px 0; margin-top: 30px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .9rem;
}
footer .links { display: flex; gap: 18px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }
@media (max-width: 560px) { header { flex-direction: column; align-items: flex-start; } }