:root {
  color-scheme: dark;
  --bg: #0e0c0b;
  --panel: #131110;
  --ink: #f3efeb;
  --muted: #a39c95;
  --faint: #6f6962;
  --hair: rgba(255, 255, 255, 0.13);
  --accent: #8fe3ff;
  --accent-hi: #d4f6ff;
  --gutter: clamp(16px, 4vw, 56px);
  --rail-1: 45.3%;
  --rail-2: 67.5%;
  --rail-3: 89.7%;
  --indent: 14.2vw;

  --t-top: #2e2a27;
  --t-left: #1e1b19;
  --t-right: #151312;
  --t-line: #6f675f;
  --t-detail: #4a433d;
  --on-top: #d4f6ff;
  --on-left: #8fe3ff;
  --on-right: #46b4d6;

  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  background: var(--ink); color: var(--bg); padding: 8px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Column guides, shared by every section */
.rails { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.rails i:nth-child(1) { left: var(--rail-1); }
.rails i:nth-child(2) { left: var(--rail-2); }
.rails i:nth-child(3) { left: var(--rail-3); }

/* Nav */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 32px var(--gutter) 0 calc(var(--rail-1) + 13px);
}
.logo { position: absolute; left: 50%; transform: translateX(-50%); }
.logo img { display: block; height: 60px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 1rem; }
.nav-links a { text-decoration: none; color: var(--ink); }
.nav-links .pill {
  background: rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 10px 18px;
}
.nav-links .pill:hover { background: rgba(255, 255, 255, 0.14); }

/* Hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; z-index: 1; }
#face {
  position: absolute; left: 0; top: 0;
  width: min(46vw, calc(100svh * 648 / 911));
  aspect-ratio: 648 / 911;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.22));
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent);
  mask-image: linear-gradient(to right, #000 78%, transparent);
}
.hero-copy {
  position: relative;
  margin-left: calc(var(--rail-1) + 13px);
  padding: min(30svh, 270px) var(--gutter) 64px 0;
}
h1 {
  position: relative;
  margin: 0;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 span { display: block; overflow: hidden; padding-bottom: 0.04em; }
h1 span:nth-child(n + 3) { margin-left: var(--indent); }
/* The mark fills the gap left of the two indented lines. Each line is 1.1em high. */
.hero-mark {
  position: absolute; top: 2.2em;
  --size: min(2.2em, calc(var(--indent) - 0.3em));
  left: calc((var(--indent) - var(--size)) / 2);
  width: var(--size); height: var(--size);
  animation: fade-in 0.95s ease both; animation-delay: 940ms;
}
@keyframes fade-in { from { opacity: 0; } }

/* The mark rains: each ball falls onto the grid and sinks in on its own cycle.
   Under the grid a drop forms once a second and falls, with a trail behind it. */
.hero-mark { overflow: visible; }
.hero-mark .stem, .hero-mark .ball, .hero-mark .ripple, .hero-mark .drip, .hero-mark .trail {
  transform-box: fill-box;
  animation-duration: var(--t, 1s);
  animation-delay: var(--d, 0s);
  animation-iteration-count: infinite;
}
.hero-mark .ball { fill: #8e8074; stroke: none; transform-origin: center; animation-name: ball-fall, ball-fade; }
.hero-mark .stem { transform-origin: bottom; animation-name: stem-shrink; }
.hero-mark .ripple { stroke: var(--accent); stroke-width: 4; opacity: 0; transform-origin: center; animation-name: ripple; }
.hero-mark .drip { transform-origin: 50% 0; animation-name: drip; }
.hero-mark .trail { stroke-dasharray: 0 200; animation-name: trail; }
@keyframes ball-fall {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
  70% { transform: translateY(var(--fall)) scale(1); animation-timing-function: ease-out; }
  74% { transform: translateY(var(--fall)) scale(1.25, 0.7); }
  86%, 100% { transform: translateY(var(--fall)) scale(0); }
}
@keyframes ball-fade {
  0% { opacity: 0; }
  10%, 76% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes stem-shrink {
  0% { transform: scaleY(1); opacity: 0; }
  10% { transform: scaleY(1); opacity: 1; animation-timing-function: ease-in; }
  50%, 100% { transform: scaleY(0); opacity: 0; }
}
@keyframes ripple {
  0%, 71% { transform: scale(0.2); opacity: 0; }
  72% { transform: scale(0.3); opacity: 0.9; }
  92%, 100% { transform: scale(1); opacity: 0; }
}
/* The drop and its trail share the same keyframe times and easing so they move together.
   The trail is 200 units long and its pathLength is 100, so one dash unit is 2 units. */
@keyframes drip {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  35% { transform: translateY(0) scale(0.8); }
  50% { transform: translateY(0) scale(0.95, 1.15); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
  80% { transform: translateY(150px) scale(0.85, 1.1); opacity: 1; }
  100% { transform: translateY(200px) scale(0.8); opacity: 0; }
}
@keyframes trail {
  0%, 50% { stroke-dasharray: 0 200; stroke-dashoffset: 0; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }
  80% { stroke-dasharray: 40 200; stroke-dashoffset: -35; opacity: 1; }
  100% { stroke-dasharray: 0 200; stroke-dashoffset: -100; opacity: 0; }
}
h1 i {
  display: block; font-style: normal;
  animation: line-in 0.95s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  animation-delay: calc(var(--n) * 120ms + 700ms);
}
@keyframes line-in { from { transform: translateY(108%); } }

.hero-sub { margin: 34px 0 0; max-width: 31rem; color: var(--muted); font-size: 1.1rem; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.btn {
  display: inline-block; background: var(--ink); color: var(--bg);
  padding: 13px 20px; border: 0; border-radius: 2px; font: inherit; font-size: 1rem;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-hi); }
.text-link { color: var(--ink); text-underline-offset: 4px; }
.hero-note { margin: 28px 0 0; color: var(--faint); font-size: 0.95rem; max-width: 30rem; }

/* Sections */
section { position: relative; z-index: 1; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
h2 { margin: 0; font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { margin: 0; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }
.lede { color: var(--muted); max-width: 34rem; }

.problem { padding: clamp(80px, 12vw, 160px) 0 clamp(24px, 4vw, 48px); }
.problem .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: end; }

.stage { padding: clamp(40px, 7vw, 96px) 0; }
.stage .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.stage.flip .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.stage.flip .plate { order: 2; }
.stage-no { font: 500 0.95rem var(--mono); color: var(--accent); margin-bottom: 14px; }
.stage-copy p { margin-top: 16px; color: var(--muted); max-width: 30rem; }
.stage-copy ul { list-style: none; margin: 22px 0 0; padding: 0; max-width: 30rem; }
.stage-copy li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--hair); font-size: 1rem; }
.stage-copy li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; background: var(--accent); }

/* Machine plates */
.plate { margin: 0; background: var(--panel); border: 1px solid var(--hair); }
.plate svg { display: block; width: 100%; height: auto; cursor: pointer; }
.plate figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--hair);
  font: 0.78rem var(--mono); color: var(--muted);
}
.plate output { color: var(--ink); text-align: right; flex: 1; }
.plate button {
  background: none; border: 1px solid var(--hair); color: var(--ink); font: inherit;
  padding: 5px 10px; cursor: pointer;
}
.plate button:hover { border-color: var(--accent); color: var(--accent-hi); }

.plate .slab .ft { fill: #181513; }
.bx .ft { fill: var(--t-top); }
.bx .fl { fill: var(--t-left); }
.bx .fr { fill: var(--t-right); }
.plate svg polygon { stroke: var(--t-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plate svg .dl { fill: none; stroke: var(--t-detail); stroke-width: 1; }
.plate svg .dl.faint { stroke: #2a2623; }
.plate svg .dl * { vector-effect: non-scaling-stroke; }
.plate svg .wire { stroke: var(--t-detail); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.plate svg .wire.on { stroke: var(--accent); }
.plate svg .wire.ring { stroke-width: 2.5; filter: url(#glow); }
.plate svg .wire.run { stroke: var(--accent-hi); stroke-dasharray: 90 910; animation: travel 1.1s linear infinite; filter: url(#soft); }
@keyframes travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }

.bx.on { filter: url(#glow); }
.bx.on .ft { fill: var(--on-top); }
.bx.on .fl { fill: var(--on-left); }
.bx.on .fr { fill: var(--on-right); }
.bx.on polygon { stroke: var(--accent-hi); }
.bx.pending .ft { animation: pending 0.9s ease-in-out infinite alternate; }
.bx.pending polygon { stroke: var(--accent); }
@keyframes pending { to { fill: #3a6677; } }
.bx.rejected polygon { stroke: var(--accent); stroke-dasharray: 3 3; }
.plate:not(.live) svg * { animation-play-state: paused; }
.cross { opacity: 0; }
.cross.show { opacity: 1; }
.cross .dl { stroke: var(--accent); stroke-width: 2; }

/* Model agnostic */
.agnostic { padding: clamp(56px, 9vw, 120px) 0; }
.agnostic .stage-copy p + p { margin-top: 12px; }

/* Pipeline */
.pipeline { padding: clamp(56px, 8vw, 110px) 0; }
.pipeline-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.steps li { padding: 22px 14px 24px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: rgba(14, 12, 11, 0.85); }
.steps svg { width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.steps strong { display: block; margin-top: 14px; font-weight: 500; font-size: 1.05rem; }
.steps span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.steps li:hover svg { stroke: var(--accent); }

/* Proof */
.proof { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
.proof .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.status-list { list-style: none; margin: 24px 0 0; padding: 0; max-width: 30rem; }
.status-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 1rem; }
.status-list em { font: normal 0.8rem var(--mono); color: var(--faint); align-self: center; }
.status-list .built em { color: var(--accent); }
.proof .lede { margin-top: 16px; }
.terms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.term { margin: 0; background: #0a0908; border: 1px solid var(--hair); font: 0.86rem/1.7 var(--mono); }
.term header { padding: 10px 16px; border-bottom: 1px solid var(--hair); color: var(--faint); font-size: 0.78rem; }
.term pre { margin: 0; padding: 16px 18px 20px; overflow-x: auto; color: var(--muted); }
.term b { color: var(--ink); font-weight: 500; }
.term .ok { color: var(--accent); }
.term .bad { color: var(--ink); text-decoration: underline wavy var(--faint); text-underline-offset: 4px; }

/* Local-first */
.local { padding: clamp(40px, 6vw, 80px) 0; }
.local .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.local article { padding: 28px 28px 32px 0; }
.local article + article { padding-left: 28px; border-left: 1px solid var(--hair); }
.local svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.local h3 { font-size: 1.25rem; margin-top: 16px; }
.local p { margin-top: 8px; color: var(--muted); font-size: 1rem; }

.cta { padding: clamp(72px, 11vw, 150px) 0; text-align: left; }
.cta h2 { max-width: 14ch; }
.cta .hero-actions { margin-top: 30px; }

footer { position: relative; z-index: 1; border-top: 1px solid var(--hair); padding: 28px 0 40px; color: var(--faint); font-size: 0.9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
footer a { color: var(--muted); }

/* Narrow screens */
@media (max-width: 960px) {
  .rails { display: none; }
  .nav { padding-left: var(--gutter); }
  .hero-copy { margin-left: 0; padding: min(36svh, 300px) var(--gutter) 56px; }
  #face { width: 100vw; opacity: 0.4; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  :root { --indent: 2.4em; }
  .problem .wrap, .stage .wrap, .stage.flip .wrap, .pipeline-head, .proof .wrap { grid-template-columns: minmax(0, 1fr); }
  .stage.flip .plate { order: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .local .wrap { grid-template-columns: minmax(0, 1fr); }
  .local article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .nav-links a:not(.pill) { display: none; }
  .logo img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  h1 i, .hero-mark, .hero-mark * { animation: none !important; }
  .plate svg *, .bx.pending .ft { animation: none !important; }
  .plate svg .wire.run { stroke-dasharray: none; stroke: var(--accent); }
}