/* Cerebro design system: the site and the docs. Monochrome, light and dark, one accent: ink.
   The theme starts dark, whatever the system says; light only when the visitor chose it (data-theme="light" on <html>). */
:root {
  --bg: #fafaf9; --raise: #ffffff; --sunk: #f3f3f1; --line: #e7e6e3; --line-2: #d4d3cf;
  --ink: #0b0b0c; --soft: #63636a; --faint: #73737a;
  --glow: #0b0b0c; --on-glow: #fafaf9;
  --deep: #f6f6f4; --dim: #6f6f76; --key: #3451c7; --str: #9c4f1c; --ok: #1f9d55; --no: #d6453d;
  --halo: rgba(11, 11, 12, .10); --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px -18px rgba(0,0,0,.18);
  --amber: #c2410c; --amber-soft: rgba(234, 88, 12, .07); --amber-line: rgba(234, 88, 12, .26);
  --signal: #2563eb; --accent: #2563eb; --accent-soft: rgba(37, 99, 235, .08); --accent-line: rgba(37, 99, 235, .28);
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-mark: 'Righteous', 'Geist', system-ui, sans-serif;
  color-scheme: light;
}
:root:not([data-theme="light"]) {
  --bg: #0a0a0b; --raise: #111113; --sunk: #0d0d0f; --line: #1f1f23; --line-2: #2d2d33;
  --ink: #ededee; --soft: #8f8f96; --faint: #7c7c83;
  --glow: #ededee; --on-glow: #0a0a0b;
  --deep: #0d0d0f; --dim: #7c7c83; --key: #8fb4ff; --str: #e7c38d; --ok: #3ccf7e; --no: #ff7a6b;
  --halo: rgba(255, 255, 255, .16); --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 60px -30px rgba(0,0,0,.8);
  --amber: #fdba74; --amber-soft: rgba(251, 146, 60, .09); --amber-line: rgba(251, 146, 60, .30); --signal: #4d8dff; --accent: #4d8dff; --accent-soft: rgba(77, 141, 255, .12); --accent-line: rgba(77, 141, 255, .34);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--bg); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section[id] { scroll-margin-top: 76px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }

/* ── brand ── */
.mark { display: inline-flex; align-items: center; font-family: var(--font-mark); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; line-height: 1; text-decoration: none; color: var(--ink); }
.mark .wm { color: var(--ink); }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; border-radius: 999px; padding: 11px 20px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-go { background: var(--ink); color: var(--bg); }
.btn-go:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn-line { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--soft); }
.btn-sm { font-size: 14px; padding: 8px 14px; }
.btn-lg { font-size: 16px; padding: 14px 24px; }

/* ── docs helpers kept from the first site ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.step { border-top: 1px solid var(--ink); padding-top: 22px; }
.step .n { font-family: var(--font-mono); font-size: 12px; color: var(--soft); letter-spacing: 1px; text-transform: uppercase; }
.step h3 { font-weight: 500; font-size: 21px; margin: 14px 0 10px; letter-spacing: -0.015em; }
.step p { color: var(--soft); margin: 0; max-width: 36ch; }
.menu { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 180px; margin: 0; padding: 5px; list-style: none; background: var(--raise); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 30; }
.menu li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 9px; font: 450 14px/1.2 var(--font-body); color: var(--ink); cursor: pointer; }
.menu li:hover, .menu li.hi { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.menu li .tick { opacity: 0; }
.menu li[aria-selected="true"] .tick { opacity: 1; }

/* ── theme switch (site and docs) ── */
.theme { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; padding: 0; }
.theme:hover { color: var(--ink); border-color: var(--soft); }
.theme svg { width: 16px; height: 16px; }
.theme .sun { display: none; }
:root:not([data-theme="light"]) .theme .sun { display: block; }
:root:not([data-theme="light"]) .theme .moon { display: none; }

/* ── code ── */
.k { color: var(--key); } .s { color: var(--str); } .c { color: var(--dim); }
.cp { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--soft); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer; margin-left: auto; }
.cp:hover { color: var(--ink); border-color: var(--line-2); }
.cp svg { width: 13px; height: 13px; }
.cp.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }