@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #0B0B0D; --elevated: #141416; --elevated-2: #1B1B1E;
  --hairline: rgba(255,255,255,0.09); --hairline-strong: rgba(255,255,255,0.16);
  --fg: #EDEBE6; --muted: #8A867D; --faint: #5A574F;
  --accent: #E8664E; --accent-ink: #0B0B0D; --accent-dim: rgba(232,102,78,0.15);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--ground); color: var(--fg);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  position: relative;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 760px; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; }

/* ===== Ambient thread — a single spiral line that runs the full page height,
   echoing the hero art and the logo's interlocking spiral. Absolutely
   positioned against body (not fixed) so it actually scrolls past with the
   page instead of being pinned to one viewport's worth of it. Very low
   opacity so it reads as texture, not decoration competing with content. */
.page-thread { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; opacity: 0.6; overflow: hidden; }
.page-thread svg { width: 100%; height: 100%; display: block; }
main, header, footer { position: relative; z-index: 1; }

header { position: sticky; top: 0; z-index: 40; background: rgba(11,11,13,0.72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; }
.brand .glyph { width: 22px; height: 22px; border-radius: 5px; display: block; }
.brand .ver { font-size: 11px; color: var(--muted); border: 1px solid var(--hairline); padding: 1px 7px; border-radius: 20px; font-weight: 400; }
.nav-links { display: flex; gap: 26px; font-size: 14px; font-family: var(--mono); }
.nav-links a { color: var(--muted); transition: color .18s; }
.nav-links a:hover { color: var(--fg); }
.nav-links a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 720px) { .nav-links { display: none; } }

.hero { padding: 92px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(520px 320px at 78% -8%, var(--accent-dim), transparent 70%),
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
  opacity: 0.55; z-index: 0;
}
/* Generated fluid-spiral art (site/assets/hero-spiral.png) — square image,
   subject on the right, transparent-to-dark on the left. Masked so it fades
   into --ground on all sides instead of showing a hard image edge. */
.hero-spiral {
  position: absolute; top: -6%; right: -6%; width: 68%; max-width: 860px; z-index: 0;
  opacity: 0.85; pointer-events: none; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 85%, transparent),
    linear-gradient(0deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000 85%, transparent),
    linear-gradient(0deg, transparent, #000 15%, #000 85%, transparent);
  mask-composite: intersect;
}
@media (max-width: 900px) { .hero-spiral { opacity: 0.45; width: 95%; right: -25%; } }
.hero .wrap { position: relative; z-index: 1; }
.hero-logo { display: block; width: 88px; height: 88px; margin: 0 0 26px; border-radius: 18px; }
h1.hero-title { font-family: var(--mono); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -0.035em; margin: 20px 0 0; text-wrap: balance; max-width: 15ch; }
h1.hero-title .hl { color: var(--accent); }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 54ch; margin: 22px 0 0; line-height: 1.65; }
.cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn { font-family: var(--mono); font-size: 14px; font-weight: 500; padding: 12px 20px; border-radius: 8px; cursor: pointer; transition: transform .15s, background .18s, border-color .18s, color .18s; display: inline-flex; align-items: center; gap: 9px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 600; }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 64px; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.stage { padding: 22px; border-right: 1px solid var(--hairline); background: var(--elevated); position: relative; }
.stage:last-child { border-right: none; }
.stage .num { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.stage .st-title { font-family: var(--mono); font-weight: 600; margin: 8px 0 5px; font-size: 15px; }
.stage .st-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.stage .arrow { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--accent); font-family: var(--mono); z-index: 2; background: var(--ground); padding: 2px; }
.stage:last-child .arrow { display: none; }
@media (max-width: 720px) { .pipeline { grid-template-columns: 1fr; } .stage { border-right: none; border-bottom: 1px solid var(--hairline); } .stage:last-child { border-bottom: none; } .stage .arrow { display: none; } }

/* ===== Fusion section — asymmetric: big claim on the left, diff proof on the right ===== */
.fusion-sec { padding: 100px 0; }
.fusion-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .fusion-grid { grid-template-columns: 1fr; gap: 36px; } }
.fusion-claim h2 { font-family: var(--mono); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 14px 0 0; }
.fusion-claim p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 18px 0 0; max-width: 46ch; }
.diff-demo { border: 1px solid var(--hairline-strong); border-radius: 14px; overflow: hidden; background: var(--elevated); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.diff-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.diff-header .fname { color: var(--fg); }
.diff-body { font-family: var(--mono); font-size: 13px; padding: 18px 18px; overflow-x: auto; }
.diff-line { padding: 3px 10px; border-radius: 4px; white-space: pre; }
.diff-line.add { background: rgba(111,207,151,0.14); color: #B7E6C9; }
.diff-line.add::before { content: "+ "; color: #6FCF97; }
.diff-line.ctx { color: var(--muted); }
.diff-line.ctx::before { content: "  "; }
.diff-tag { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--accent); background: var(--accent-dim); padding: 3px 9px; border-radius: 20px; }
.diff-foot { padding: 0 18px 16px; }

/* ===== Search demo — flush against the fusion section, no divider, reads as one narrative ===== */
.search-sec { padding: 0 0 100px; }
.sec-title-sm { font-family: var(--mono); font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 0; }
.sec-p { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 40ch; margin: 14px 0 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: center; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }
.term { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: #0d0d0f; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--elevated); border-bottom: 1px solid var(--hairline); }
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline-strong); display: inline-block; }
.term-body { padding: 20px; font-family: var(--mono); font-size: 13.5px; }
.term-prompt { color: #6FCF97; }
.term-cmd { color: var(--fg); }
.term-result { margin: 16px 0 0; padding: 12px 14px; border-left: 2px solid var(--accent); background: rgba(232,102,78,0.06); border-radius: 0 6px 6px 0; }
.term-result .path { color: var(--accent); font-size: 12.5px; }
.term-result .score { float: right; color: var(--faint); font-size: 11px; }
.term-result .snippet { color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.term-result mark { background: rgba(232,102,78,0.3); color: var(--fg); border-radius: 2px; padding: 0 2px; }

/* ===== Knowledge graph — the visual anchor of the page: full-bleed, darker,
   bigger type. Deliberately breaks out of .wrap's max-width. ===== */
.graph-sec { padding: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: radial-gradient(1200px 600px at 50% 0%, rgba(232,102,78,0.07), transparent 60%), #08080a; }
.graph-sec .wrap { max-width: 1320px; padding: 100px 28px; }
.graph-sec .eyebrow { display: block; text-align: center; }
.graph-sec h2 { font-family: var(--mono); font-weight: 700; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.03em; text-align: center; margin: 14px auto 0; max-width: 18ch; }
.graph-sec p { color: var(--muted); font-size: 15.5px; text-align: center; max-width: 52ch; margin: 18px auto 0; }
.graph-wrap { border: 1px solid var(--hairline-strong); border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #101013, #08080a); position: relative; margin-top: 48px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); }
#cortex-graph { width: 100%; height: 620px; display: block; cursor: grab; }
@media (max-width: 720px) { #cortex-graph { height: 420px; } }
.graph-hint { position: absolute; top: 18px; left: 22px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.graph-legend { position: absolute; bottom: 18px; left: 22px; display: flex; gap: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.graph-legend span { display: flex; align-items: center; gap: 6px; }
.graph-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

section.block { padding: 76px 0; border-top: 1px solid var(--hairline); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.sec-head h2 { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.025em; margin: 8px 0 0; }
.sec-head p { color: var(--muted); font-size: 14px; max-width: 40ch; margin: 0; }

/* ===== Skills — bento, weighted by how central the skill is to the pitch ===== */
.skills-bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: repeat(2, minmax(160px, auto)); gap: 14px; }
@media (max-width: 860px) { .skills-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; } }
@media (max-width: 560px) { .skills-bento { grid-template-columns: 1fr; } }
.tile { border-radius: 14px; padding: 26px; position: relative; overflow: hidden; border: 1px solid var(--hairline); transition: border-color .18s, background .18s; }
.tile.lead {
  grid-column: 1; grid-row: 1 / span 2;
  background: linear-gradient(160deg, #201612, var(--elevated) 60%); border-color: rgba(232,102,78,0.28);
}
.tile.lead::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--accent-dim), transparent 72%); }
.tile.mid { background: var(--elevated); }
.tile.mid.slot-1 { grid-column: 2; grid-row: 1; }
.tile.mid.slot-2 { grid-column: 3; grid-row: 1; }
.tile.mid.slot-3 { grid-column: 2; grid-row: 2; }
.tile.mid:hover, .tile.lead:hover { border-color: var(--hairline-strong); background: var(--elevated-2); }
.tile.quiet {
  grid-column: 3; grid-row: 2;
  background: transparent; border-style: dashed; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 860px) {
  .tile.lead, .tile.mid.slot-1, .tile.mid.slot-2, .tile.mid.slot-3, .tile.quiet { grid-column: auto; grid-row: auto; }
  .tile.lead { grid-column: span 2; }
  .tile.quiet { grid-column: span 2; }
}
@media (max-width: 560px) { .tile.lead, .tile.quiet { grid-column: span 1; } }
.tile-top { display: flex; align-items: center; gap: 9px; position: relative; z-index: 1; }
.tile-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
.tile-name { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.tile.lead .tile-name { font-size: 19px; }
.tile-desc { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; position: relative; z-index: 1; }
.tile.lead .tile-desc { font-size: 14.5px; max-width: 40ch; }
.tile-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; position: relative; z-index: 1; }
.tile-chip { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,0.06); padding: 3px 9px; border-radius: 6px; color: var(--fg); }

/* ===== Commands + changelog — compact two-column ledger instead of two full sections ===== */
.ledger { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
@media (max-width: 820px) { .ledger { grid-template-columns: 1fr; } }
.ledger-col { padding: 30px 30px 34px; }
.ledger-col + .ledger-col { border-left: 1px solid var(--hairline); background: var(--elevated); }
@media (max-width: 820px) { .ledger-col + .ledger-col { border-left: none; border-top: 1px solid var(--hairline); } }
.ledger-col h3 { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }

.cmd-list { display: flex; flex-direction: column; gap: 0; }
.cmd-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.cmd-row:last-child { border-bottom: none; }
.cmd-name { font-family: var(--mono); color: var(--accent); font-size: 13px; }
.cmd-desc { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .cmd-row { grid-template-columns: 1fr; gap: 4px; } }

.log { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--hairline); margin-left: 6px; }
.log-item { padding: 0 0 22px 22px; position: relative; }
.log-item:last-child { padding-bottom: 0; }
.log-item::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--elevated); }
.log-item.dim::before { background: var(--faint); }
.log-ver { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.log-date { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-left: 8px; }
.log-body { color: var(--muted); font-size: 13px; margin-top: 4px; }
.log-more { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--accent); }

footer { border-top: 1px solid var(--hairline); padding: 40px 0; color: var(--muted); font-size: 13px; }
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot-links { display: flex; gap: 20px; font-family: var(--mono); }
.foot-links a:hover { color: var(--accent); }

/* changelog page */
.cl-version { padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.cl-version:last-child { border-bottom: none; }
.cl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cl-ver { font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.cl-date { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.cl-section { margin: 14px 0 0; }
.cl-section:first-of-type { margin-top: 0; }
.cl-type { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.cl-section ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.cl-section li { margin: 0 0 4px; }

/* docs page */
.doc-item { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.doc-item:last-child { border-bottom: none; }
.doc-name { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--fg); }
.doc-trigger { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.doc-desc { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.doc-group { margin: 44px 0 20px; }
.doc-group:first-child { margin-top: 0; }
.doc-group h2 { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; }
.doc-hooks { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 8px 0 0; }
.doc-notes { color: var(--faint); font-size: 13px; line-height: 1.6; margin: 8px 0 0; font-style: italic; }