:root {
  --bg: #05070d;
  --ink: #f1f7ff;
  --soft: #b9c7da;
  --cyan: #7fe3ff;
  --amber: #ffb65c;
  --pad: clamp(22px, 6vw, 104px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Shown as-is when WebGL is unavailable; the canvas paints over it otherwise. */
  background:
    radial-gradient(90vw 70vh at 72% 18%, rgba(46, 120, 190, 0.22), transparent 62%),
    radial-gradient(80vw 60vh at 18% 88%, rgba(98, 78, 210, 0.16), transparent 64%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: clip;
}

#scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.no-webgl #scene { display: none; }
.no-webgl .rail, .no-webgl .cue { display: none; }

/* Technical overlay: a faint dot grid, labels pinned to things in the scene, two small readouts */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  pointer-events: none;
}
.webgl .overlay { display: block; }
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(205, 232, 255, 0.55) 0.7px, transparent 1.4px);
  background-size: 112px 112px;
  background-position: center;
  opacity: 0.3;
}
.pins { position: absolute; inset: 0; overflow: hidden; }
.pin {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: #eef6ff;
  text-shadow: 0 0 10px rgba(5, 7, 13, 0.95), 0 0 3px rgba(5, 7, 13, 0.9);
  opacity: 0;
  will-change: transform, opacity;
  padding: 3px 10px 5px;
  border-radius: 7px;
  background: rgba(5, 7, 13, 0.6);
}
.hud {
  position: absolute;
  bottom: 28px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.hud-l { left: var(--pad); }
.hud-r { right: var(--pad); }

/* Top bar */
.bar {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) calc(var(--pad) - 10px) 10px;
  background: linear-gradient(rgba(5, 7, 13, 0.72), rgba(5, 7, 13, 0));
}
.bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 10px;
}
.bar nav { display: flex; gap: 2px; }
.bar nav a { color: var(--soft); }
.bar nav a:hover { color: var(--ink); }
.brand { gap: 10px; font-weight: 600; }


/* Progress rail */
.rail {
  position: fixed;
  z-index: 2;
  right: calc(var(--pad) * 0.5 - 4px);
  top: 50%;
  height: 132px;
  width: 9px;
  margin-top: -66px;
  pointer-events: none;
}
.rail::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(127, 227, 255, 0.28);
}
.rail i {
  position: absolute;
  left: 2px;
  width: 5px;
  height: 1px;
  background: rgba(127, 227, 255, 0.7);
}
.rail i:nth-child(1) { top: 0; }
.rail i:nth-child(2) { top: 33.333%; }
.rail i:nth-child(3) { top: 66.666%; }
.rail i:nth-child(4) { top: 100%; }
.rail b {
  position: absolute;
  left: 1px;
  top: calc(var(--p, 0) * 100%);
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 2px rgba(255, 182, 92, 0.7);
}

/* Sections */
main { position: relative; z-index: 2; }

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 96px var(--pad);
}
.content {
  position: relative;
  max-width: 33rem;
  will-change: opacity, transform;
}
.content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -30%;
  background: radial-gradient(closest-side, rgba(5, 7, 13, 0.78), rgba(5, 7, 13, 0.5) 55%, rgba(5, 7, 13, 0));
  pointer-events: none;
}
.stage-center { justify-items: center; text-align: center; }
.stage-hero .content { max-width: 33rem; }
.stage-low { align-items: end; padding-bottom: 8vh; }
.stage-center .content { max-width: 64rem; }
.stage-center .lead { max-width: 30em; margin-left: auto; margin-right: auto; text-wrap: balance; font-size: clamp(1.08rem, 1.7vw, 1.4rem); }
.stage-center .content::before {
  inset: -45% -12%;
  background: radial-gradient(closest-side, rgba(5, 7, 13, 0.62), rgba(5, 7, 13, 0.3) 60%, rgba(5, 7, 13, 0));
}
.stage-close { align-items: start; padding-top: 92px; padding-bottom: 0; }

h1, h2 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 6.4vw, 6rem); }
h2 { font-size: clamp(2.3rem, 6vw, 4.2rem); }
.close-name { font-size: clamp(1.7rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 21em; margin: 0 auto; }
.close-name span { display: inline-block; }
.kicker { margin: 0 0 1.1em; font-size: clamp(0.95rem, 1.2vw, 1.1rem); font-weight: 550; letter-spacing: 0.01em; color: var(--amber); }
.stage-low h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.stage-low .content { max-width: 46rem; }
.stage-center .actions { justify-content: center; }
.lines span { display: block; }
/* Two equal choices side by side: each line sits on the same baseline above its own button, and both buttons
   are the same size (as wide as the longer label needs). The wrappers vanish so all four share one grid. */
.offer { display: inline-grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 1fr; align-items: center; justify-items: stretch; gap: 12px 22px; margin-top: 1.6em; }
.offer > div { display: contents; }
.closing { margin: 0; font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.3; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; text-align: center; white-space: nowrap; }
.offer .btn { margin-top: 0; width: 100%; height: 54px; min-height: 0; padding: 0 24px; justify-content: center; font-size: 17px; white-space: nowrap; }

/* A large line shown between two stops. It sits on the seam between the sections, so it crosses the middle
   of the screen halfway through the hand-off. Without motion it is ordinary text between the sections. */
.bridge {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
  pointer-events: none;
}
.bridge span { position: relative; display: inline-block; max-width: 17em; }
.bridge span::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -18%;
  background: radial-gradient(closest-side, rgba(5, 7, 13, 0.9), rgba(5, 7, 13, 0.62) 55%, rgba(5, 7, 13, 0));
}
.bridge { text-shadow: 0 0 18px rgba(5, 7, 13, 0.95), 0 0 4px rgba(5, 7, 13, 0.9); }

p {
  margin: 1.1em 0 0;
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  color: #dbe6f4;
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.2rem, 2.3vw, 1.7rem);
  color: var(--ink);
  margin-top: 0.9em;
}
.num {
  margin: 0 0 1.1em;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.num::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 1px;
  margin-left: 12px;
  background: linear-gradient(90deg, var(--amber), transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 1.9em;
  padding: 0 26px;
  border-radius: 999px;
  background: #eef8ff;
  color: #05070d;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(127, 227, 255, 0.5), 0 0 34px rgba(127, 227, 255, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 182, 92, 0.9), 0 0 44px rgba(255, 182, 92, 0.4);
}
.btn:active { transform: translateY(0); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 1.7em; }
.actions .btn { margin-top: 0; }
/* agents.md: a quiet line under the first button; a click copies the file's text */
.agents-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0 26px;
  padding: 4px 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--soft);
  opacity: 0.72;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.agents-copy:hover, .agents-copy:focus-visible { opacity: 1; color: var(--cyan); }
.agents-copy-done { position: absolute; left: 100%; margin-left: 10px; color: var(--amber); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.agents-copy.is-copied { opacity: 1; color: var(--amber); }
.agents-copy.is-copied .agents-copy-done { opacity: 1; }
.btn-quiet {
  min-height: 46px;
  padding: 0 20px;
  background: rgba(5, 7, 13, 0.55);
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  box-shadow: inset 0 0 0 1px rgba(127, 227, 255, 0.55);
}
.btn-quiet:hover { background: rgba(127, 227, 255, 0.12); box-shadow: inset 0 0 0 1px var(--amber); }
p + p { margin-top: 0.75em; }

a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 1.6em;
}
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  background: rgba(5, 7, 13, 0.55);
  box-shadow: inset 0 0 0 1px rgba(127, 227, 255, 0.55);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
footer a:hover {
  background: rgba(127, 227, 255, 0.12);
  box-shadow: inset 0 0 0 1px var(--amber);
}

/* Pinned text: the page is a long scroll track and each stop's text holds still on screen while the scene
   moves behind it. The script adds this class only when motion is allowed and WebGL works. */
.pinned main { height: calc(var(--len, 11) * 100vh); height: calc(var(--len, 11) * 100svh); }
.pinned .stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; min-height: 0; pointer-events: none; }
.pinned .stage .content { pointer-events: auto; opacity: 0; }
.boot .stage-hero .content, .boot .cue { opacity: 0; }
.gh { flex: none; margin-right: 2px; }
.pinned .bridge { top: 50%; opacity: 0; will-change: opacity, transform; } /* the script also drifts it a little with the scroll */

/* Touch: the scenes answer click, drag and finger. Up-and-down finger swipes stay the browser's (they scroll);
   sideways drags reach the scene. The hand cursors show what can be grabbed; text is not selectable only while a drag is held. */
html.pinned.webgl { touch-action: pan-y pinch-zoom; }
html.tt-hover { cursor: grab; }
html.tt-grab, html.tt-grab * { cursor: grabbing !important; }
html.tt-down, html.tt-down * { -webkit-user-select: none; user-select: none; }

html:not(.pinned) .hud, html:not(.pinned) .rail { display: none; } /* ordinary scrolling page: no readouts to collide with the text */

/* Scroll cue */
.cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft);
  opacity: var(--cue, 1);
}
.cue::after {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--cyan), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phone: scene on top, words below it */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .stage { align-items: end; padding: 84px var(--pad) 11svh; }
  .stage-center { align-items: center; padding-bottom: 84px; }
  .stage-low { padding-bottom: 6svh; }
  .stage-low h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .stage-hero { padding-bottom: 17svh; }
  .stage-close { align-items: start; padding-top: 78px; padding-bottom: 0; }
  .content::before { inset: -14% -18%; }
  .stage-center .content::before { inset: -40% -14%; }
  .bar { padding-left: calc(var(--pad) - 10px); padding-right: calc(var(--pad) - 10px); }
  .bar a { font-size: 14px; padding: 0 8px; }
  .rail { display: none; }
  .hud { display: none; }
  .overlay::before { background-size: 78px 78px; }
  .pin { font-size: 13px; letter-spacing: 0.02em; padding: 1px 6px 3px; }
  .offer .btn { font-size: 15.5px; padding: 0 14px; gap: 8px; height: 50px; }
  .offer { display: grid; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; gap: 8px; margin-top: 1.1em; }
  .offer > div + div .closing { margin-top: 10px; }
  .lines span { display: inline; }
  .stage-close .lead { font-size: 1.04rem; line-height: 1.45; }
  .btn { padding: 0 22px; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* Short, wide screens: a phone on its side */
@media (max-height: 540px) and (min-width: 761px) {
  .stage { padding-top: 62px; padding-bottom: 20px; }
  .content { max-width: 47vw; }
  .stage-center .content { max-width: 80vw; }
  .stage-hero .content { max-width: 45vw; }
  .stage-low .content { max-width: 90vw; }
  .stage-low h2 { font-size: min(3.4vw, 8vh); }
  .kicker { margin-bottom: 0.6em; }
  .pin { font-size: 11px; padding: 0 4px 1px; background: rgba(5, 7, 13, 0.45); }
  h1 { font-size: min(6vw, 15vh); }
  h2 { font-size: min(4.4vw, 10vh); }
  .close-name { font-size: min(3.1vw, 7.6vh); }
  .lines span { display: inline; }
  .stage-close .lead { font-size: 0.9rem; margin-top: 0.5em; }
  .offer { margin-top: 0.6em; gap: 6px 18px; }
  .closing { font-size: 0.98rem; }
  .offer .btn { height: 44px; font-size: 15px; padding: 0 16px; }
  .bridge { font-size: min(4.4vw, 11vh); }
  p { font-size: 0.92rem; line-height: 1.4; margin-top: 0.6em; }
  p + p { margin-top: 0.45em; }
  .actions { margin-top: 0.9em; gap: 8px 10px; }
  .actions .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .lead { font-size: 1.15rem; margin-top: 0.6em; }
  .num { display: none; }
  .btn { min-height: 48px; margin-top: 1.1em; }
  footer { margin-top: 0.9em; }
  .stage-close { padding-top: 58px; }
  .cue, .hud { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue::after { animation: none; }
  .btn, footer a { transition: none; }
}

/* Top-right links (2026-10-01): seed repo, book a session, go deeper */
.bar nav a { gap: 7px; }
.bar nav .gh { flex: none; }
@media (max-width: 760px) {
  .bar nav { gap: 0; }
  .bar nav a { font-size: 13px; padding: 0 6px; }
  .bar nav .gh { width: 14px; height: 14px; }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
}

/* Sideways phone narrower than 761px (2026-10-01): the phone rules above stack the close's two buttons,
   which pushed "Book a session" below the screen. Keep the close compact and the two offers side by side. */
@media (max-height: 540px) and (max-width: 760px) and (orientation: landscape) {
  .stage-close { padding-top: 54px; }
  .close-name { font-size: min(4.2vw, 7.4vh); }
  .stage-close .lead { font-size: 0.86rem; line-height: 1.35; margin-top: 0.45em; }
  .offer { display: inline-grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: none; grid-auto-columns: 1fr; gap: 4px 12px; margin-top: 0.6em; }
  .offer > div + div .closing { margin-top: 0; }
  .closing { font-size: 0.9rem; }
  .offer .btn { height: 40px; font-size: 13.5px; padding: 0 12px; gap: 6px; }
  .stage-hero { padding-bottom: 5svh; }
  .stage-hero .content { max-width: 50vw; }
  h1 { font-size: min(7vw, 14vh); }
  .stage-hero .lead { font-size: 1rem; }
  .actions .btn { min-height: 40px; font-size: 14px; padding: 0 14px; }
  .agents-copy { margin-top: 8px; }
  .cue { display: none; }
}