/* REVA, measuring plate. Tokens mirror the language sheet at the top of main.js. */

:root {
  --ground: #ffffff;
  --ink: #0a0b0d;
  --ink-2: #3a3e45;          /* body copy, 10.6:1 on white */
  --ink-3: #80858d;          /* resting step titles, large text only */
  --rule: rgba(10, 11, 13, 0.038);   /* the plate's ruling, ~3.5 % */
  --fit: #2b59ff;            /* dimension lines and fitted curves, nothing else */
  --fit-glass: #6d8bff;      /* the same blue lifted for the dark window, 6:1 on the glass */
  --line: rgba(10, 11, 13, 0.14);    /* outlines and guides while drawing, 1 px */
  --glass: #0e1014;          /* inside the window: a site */

  --plate: 64px;
  --edge: clamp(20px, 4.45vw, 64px);
  --r-win: 22px;

  /* house curves (the clip curve is also the pen: every outline, guide and fill) */
  --clip: cubic-bezier(0.645, 0.045, 0.355, 1);   /* the window re-clips */
  --clip-ms: 1300ms;
  --lift: cubic-bezier(0.25, 1, 0.5, 1);          /* words rise from line masks */
  --lift-ms: 1000ms;
  --readout: cubic-bezier(0.17, 1.03, 0.44, 0.99);/* text and controls arrive */
  --readout-ms: 860ms;
  --feedback-ms: 200ms;

  --sans: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--ground);
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: var(--plate) var(--plate);
  background-position: calc(50% - 0.5px) -1px;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-stretch: 100%;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 16px; }

.visually-hidden, .toast {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: 80px;
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--edge);
  background: linear-gradient(to bottom, #fff 68%, rgba(255,255,255,0));
}

.wordmark {
  font-stretch: 125%;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.nav ul { display: flex; gap: 28px; }
.nav ul a {
  font-size: 15.5px; font-weight: 500;
  color: var(--ink-2);
  transition: color var(--feedback-ms) var(--readout);
}
.nav ul a:hover { color: var(--ink); }

.install {
  position: relative; overflow: hidden;
  height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 600; font-stretch: 112%;
  transition: transform var(--feedback-ms) var(--readout), background-color var(--feedback-ms) var(--readout);
}
.install:hover { background: #22252b; }
.install:active { transform: scale(0.97); }

.menu-btn {
  display: none;
  align-items: center;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: rgba(10, 11, 13, 0.06);
  font-size: 16px; font-weight: 600; font-stretch: 112%;
  overflow: hidden;
  transition: background-color var(--feedback-ms) var(--readout);
}
.menu-btn:hover { background: rgba(10, 11, 13, 0.1); }
.menu-say { display: inline-block; }

.sheet {
  position: fixed; inset: 0; z-index: 29;
  padding: 120px var(--edge) 48px;
  background-color: var(--ground);
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: var(--plate) var(--plate);
  background-position: calc(50% - 0.5px) -1px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 640ms var(--clip);
  overflow-y: auto;
}
.sheet.is-open { clip-path: inset(0 0 0 0); }
.sheet-links { display: flex; flex-direction: column; gap: 6px; }
.sheet-links a {
  font-stretch: 118%; font-weight: 600;
  font-size: clamp(34px, 8.4vw, 60px);
  line-height: 1.08; letter-spacing: -0.035em;
}
.sheet .w { transform: translateY(110%); }
.sheet.is-open .w { transform: none; transition: transform var(--lift-ms) var(--lift); }

.install-say { display: inline-block; }
.is-copied .install-say { animation: say var(--readout-ms) var(--readout); }
@keyframes say { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- line masks ---------- */

.m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.02em 0.14em;
  margin: -0.08em -0.02em -0.14em;
}
.w { display: inline-block; will-change: transform; }
.pre .hero .w { transform: translateY(110%); }

/* baseline probe */
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

main { overflow-x: clip; }

/* ---------- the drafting layer ---------- */

.guide { stroke: var(--ink); stroke-opacity: 0.26; stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; fill: none; }
.draft {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.draft .guide-base, .draft .guide-cap, .draft .guide-mid { opacity: 0.5; }   /* the trace: 13 % */
.draft .guide-left, .draft .guide-right, .draft .guide-axis { opacity: 0; }

.fly {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.pre .fly { display: block; }
.is-landed .fly { display: none; }
.pre .nav .wordmark { visibility: hidden; }
.is-landed .nav .wordmark { visibility: visible; }

.wm-fill { fill: var(--ink); }
.wm-line path { fill: none; stroke: var(--ink); stroke-opacity: 0.34; stroke-dasharray: 1 1; stroke-dashoffset: 0; stroke-linejoin: round; }
.fly .wm-fill { clip-path: inset(100% 0 0 0); }

.dim line { stroke: var(--fit); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.dim-head { fill: var(--fit); }
.dim-value {
  fill: var(--fit);
  font-family: var(--sans); font-stretch: 100%; font-weight: 500; font-size: 17px; letter-spacing: 0;
}
.dim-glass line { stroke: var(--fit-glass); }
.dim-glass .dim-head, .dim-glass .dim-value { fill: var(--fit-glass); }
.dim-glass .dim-value { font-size: 18px; font-weight: 600; }

/* drafted titles: a 1 px outline drawn over the words, then the ink fills up from the baseline */
[data-draft] { position: relative; }
.dw { display: inline-block; }
.dt { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; opacity: 0; }
.is-drafting .dt { opacity: 1; }
.dt text { font: inherit; letter-spacing: inherit; fill: none; stroke: var(--ink); stroke-opacity: 0.34; stroke-width: 1; stroke-linejoin: round; }

/* ---------- 1. hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(80px + 13vh) var(--edge) 96px;
}

.headline {
  display: inline-flex;
  flex-direction: column;
  font-stretch: 122%;
  font-weight: 600;
  font-size: clamp(42px, 7.9vw, 136px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.line { display: flex; align-items: center; gap: 0.24em; white-space: nowrap; }
.line + .line { margin-top: 0.06em; }

.slot { display: block; position: relative; }
.slot-hero {
  flex: 1 1 auto;
  min-width: 2.6em;
  height: 0.74em;
  margin-left: 0.04em;
  transform: translateY(0.03em);
}

.hero-foot {
  position: relative;
  margin-top: 56px;
  min-height: 236px;
}
.sub {
  max-width: 30rem;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}
.pre .sub { opacity: 0; transform: translateY(14px); }
.sub.is-in { opacity: 1; transform: none; transition: opacity var(--readout-ms) var(--readout), transform var(--readout-ms) var(--readout); }

.trace { position: absolute; top: 4px; left: 0; width: 0; }
.trace-svg { display: block; overflow: visible; width: 100%; }
.trace .value {
  position: absolute; right: 0; top: -6px;
  font-size: 18px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
}
.pre .trace .value { clip-path: inset(0 100% 0 0); }
.trace .value.is-in { clip-path: inset(0 0 0 0); transition: clip-path var(--readout-ms) var(--readout); }

.dot { fill: var(--ink); }
.fitline { fill: none; stroke: var(--fit); stroke-width: 2; stroke-linecap: round; }

/* ---------- 2. proof ---------- */

.proof {
  position: relative;
  padding: 40px var(--edge) 20vh;
}
.proof-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
  max-width: 1312px;
  margin: 64px auto 0;
}
.sec-title {
  font-stretch: 116%;
  font-weight: 600;
  font-size: clamp(34px, 4.1vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.sec-copy { font-size: 18px; color: var(--ink-2); max-width: 32rem; }

.slot-proof {
  max-width: 1312px;
  margin: 0 auto;
  height: min(60vh, 46vw, 640px);
  min-height: 320px;
}

/* ---------- 3. card (pinned) ---------- */

.cardpin { position: relative; height: 340vh; }
.cardpin-stick {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  padding: 96px var(--edge) 48px;
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
}
.steps { display: flex; flex-direction: column; gap: 28px; }
.step-title {
  font-stretch: 116%;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  transition: color var(--readout-ms) var(--readout);
}
.step.is-on .step-title { color: var(--ink); }
.step-copy {
  display: none;
  max-width: 27rem;
  margin-top: 14px;
  font-size: 18px; color: var(--ink-2);
}
.step.is-on .step-copy { display: block; animation: copy-in var(--readout-ms) var(--readout) both; }
@keyframes copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.slot-card { height: min(72vh, 620px); min-height: 360px; }

/* ---------- shared: a plain onward link, its underline is a 1 px pen line ---------- */

.more {
  align-self: flex-start;
  font-size: 18px; font-weight: 600; font-stretch: 108%;
  padding-bottom: 5px;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size 640ms var(--clip);
}
.more:hover { background-size: 0 1.5px; background-position: 100% 100%; }

p code, .read-copy code {
  font-family: var(--mono); font-size: 0.86em;
  padding: 0.12em 0.4em; border-radius: 6px;
  background: rgba(10, 11, 13, 0.055);
}

.read-title, .mk-title {
  font-stretch: 116%;
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------- 4. what it reads ---------- */

.reads, .labels, .start, .agents, .end {
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding-left: var(--edge); padding-right: var(--edge);
}
.reads { padding-top: 24vh; padding-bottom: 10vh; }
.reads-head, .start-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
}
.reads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 12vh;
}
.fig { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 40px; }
.read-copy { margin-top: 14px; max-width: 31rem; font-size: 18px; color: var(--ink-2); }
.fig .dot { fill: var(--ink); }
.fig-text { font-family: var(--sans); font-weight: 600; font-stretch: 116%; letter-spacing: -0.03em; fill: var(--ink); }
.fig-line { font-family: var(--sans); font-weight: 600; font-stretch: 116%; letter-spacing: -0.03em; fill: none; stroke: var(--ink); stroke-opacity: 0.34; stroke-width: 1; stroke-linejoin: round; }

/* ---------- 5. exact / fitted / unknown ---------- */

.labels { padding-top: 14vh; padding-bottom: 12vh; }
.libs { max-width: 21em; }
.labels-copy { margin-top: 36px; max-width: 36rem; }
.marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  margin-top: 12vh;
}
.mk-fig { display: block; width: 100%; max-width: 240px; height: 96px; overflow: visible; margin-bottom: 30px; }
.mk-fig .dot { fill: var(--ink); }
.mk-copy { margin-top: 12px; max-width: 22rem; font-size: 18px; color: var(--ink-2); }

/* ---------- 6. start: copy beside the window, which is now a terminal ---------- */

.start {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  padding-top: 20vh; padding-bottom: 14vh;
}
.start .start-head { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
.start-side { display: flex; flex-direction: column; gap: 26px; }
.slot-term { height: min(64vh, 540px); min-height: 440px; }

.term {
  position: absolute; inset: 0;
  margin: 0; padding: 7% 8%;
  font-family: var(--mono); font-size: 15px; line-height: 1.75;
  color: rgba(244, 245, 247, 0.72);
  white-space: pre;
  overflow: hidden;
}
.term code, pre code { font: inherit; }
.tl { display: inline-block; }
.term .tc { color: #f4f5f7; }
.term i { font-style: normal; color: rgba(244, 245, 247, 0.42); }
.term b { font-weight: 500; color: var(--fit-glass); }
.term u { text-decoration: none; color: rgba(244, 245, 247, 0.58); }

/* ---------- 7. agents ---------- */

.agents {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
  padding-top: 14vh; padding-bottom: 14vh;
}
.agents-copy { display: flex; flex-direction: column; gap: 30px; }
.cmd {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 16px;
  max-width: 100%;
  height: 54px; padding: 0 7px 0 22px; border-radius: 999px;
  background: rgba(10, 11, 13, 0.055);
  white-space: nowrap;
  transition: background-color var(--feedback-ms) var(--readout);
}
.cmd:hover { background: rgba(10, 11, 13, 0.085); }
.cmd code { font-family: var(--mono); font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.cmd .install-say {
  height: 40px; line-height: 40px; padding: 0 16px; border-radius: 999px; overflow: hidden;
  background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 600; font-stretch: 112%;
}
.cmd:active .install-say { transform: scale(0.96); }

.chat {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(22px, 3.2vw, 44px);
  border-radius: var(--r-win);
  background: #f3f4f6;
}
.turn { font-size: 17px; line-height: 1.55; }
.turn-you {
  align-self: flex-end;
  max-width: 82%;
  padding: 14px 20px;
  border-radius: 18px 18px 6px 18px;
  background: var(--ink); color: #f4f5f7;
}
.turn-tool { color: var(--ink-2); font-size: 16px; }
.turn-tool code {
  font-family: var(--mono); font-size: 14px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(10, 11, 13, 0.06); color: var(--ink);
}
.turn-agent pre {
  margin: 16px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  color: var(--ink);
  overflow-x: auto;
}
.pre .turn { opacity: 0; transform: translateY(14px); }
.turn.is-in { opacity: 1; transform: none; transition: opacity var(--readout-ms) var(--readout), transform var(--readout-ms) var(--readout); }

/* ---------- 8. the closing: REVA in outline, the install button inside ---------- */

.end { padding-top: 16vh; padding-bottom: 16vh; }
.closing { position: relative; height: 40vw; }
.closing-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.closing .guide { stroke-opacity: 0.2; }
.closing .wm-fill { display: none; }
.install-big {
  position: absolute; left: 50%; top: var(--mid, 50%);
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 10px 0 28px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 2px 6px rgba(10, 11, 13, 0.06), 0 30px 60px -30px rgba(10, 11, 13, 0.5);
  white-space: nowrap;
  transition: background-color var(--feedback-ms) var(--readout);
}
.pre .install-big { clip-path: inset(0 50% 0 50% round 999px); }
.install-big code { font-family: var(--mono); font-size: 17px; }
.install-big .install-say {
  height: 42px; line-height: 42px; padding: 0 18px; border-radius: 999px;
  background: #f4f5f7; color: var(--ink);
  font-size: 16px; font-weight: 600; font-stretch: 112%;
  overflow: hidden;
}
.install-big:hover { background: #22252b; }
.install-big:active .install-say { transform: scale(0.96); }

/* ---------- footer: two ways on, then the plain facts ---------- */

.foot {
  max-width: calc(1312px + 2 * var(--edge));
  margin: 0 auto;
  padding: 4vh var(--edge) 64px;
}
.foot-next { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-bottom: 14vh; }
.next { display: flex; flex-direction: column; gap: 14px; }
.next-title {
  align-self: flex-start;
  font-stretch: 116%; font-weight: 600;
  font-size: clamp(34px, 4.1vw, 64px);
  line-height: 1.02; letter-spacing: -0.035em;
  padding-bottom: 6px;
  background: linear-gradient(var(--fit), var(--fit)) 0 100% / 0 2px no-repeat;
  transition: background-size 640ms var(--clip);
}
.next:hover .next-title, .next:focus-visible .next-title { background-size: 100% 2px; }
.next-copy { max-width: 28rem; font-size: 18px; color: var(--ink-2); }
.foot-base { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; }
.foot-note { max-width: 42rem; font-size: 16px; color: var(--ink-2); }
.foot-note a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; font-size: 16px; font-weight: 500; }
.foot-links a { color: var(--ink-2); transition: color var(--feedback-ms) var(--readout); }
.foot-links a:hover { color: var(--ink); }

/* ---------- the window ---------- */

.win-layer { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.win {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  border-radius: var(--r-win);
  box-shadow: 0 2px 6px rgba(10, 11, 13, 0.06), 0 34px 70px -34px rgba(10, 11, 13, 0.45);
  pointer-events: auto;
  will-change: transform;
}
.win.is-resting { position: absolute; inset: 0; width: auto; height: auto; transform: none !important; }
.pre .win { visibility: hidden; }
.win.is-shown { visibility: visible; }

.glass {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #181b21 0%, var(--glass) 60%);
  color: #f4f5f7;
  isolation: isolate;
}

.layer {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--feedback-ms) linear, visibility 0s linear var(--feedback-ms);
}
.layer.is-on { opacity: 1; visibility: visible; transition: opacity var(--feedback-ms) linear; }
.layer:not(.is-on) { pointer-events: none; }
.layer:not(.is-on) .panel { visibility: hidden; }

/* hero layer */
.subject {
  position: absolute; left: 0; top: 50%;
  width: 46%; aspect-ratio: 1;
  max-width: none;
  border-radius: 50%;
  background: #f4f5f7;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* proof layer */
.pane { position: absolute; inset: 0; overflow: hidden; }
.pane-b {
  clip-path: inset(0 0 var(--seam-open, 100%) calc(var(--seam, 0.5) * 100%));
  background:
    linear-gradient(to right, rgba(244, 245, 247, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(244, 245, 247, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(120% 140% at 50% 0%, #15181d 0%, var(--glass) 60%);
}
/* the rebuilt side: the original, dimmed, and REVA's rebuild drawn over it in 1 px outline */
.demo-ghost .demo-glow { opacity: 0.35 !important; }
.demo-ghost .demo-h { color: rgba(244, 245, 247, 0.2); }
.demo-ghost .demo-nav i { background: rgba(244, 245, 247, 0.2); }
.demo-ghost .demo-nav b, .demo-ghost .demo-s b { background: rgba(244, 245, 247, 0.08); }
.demo-line .demo-glow { background: none; filter: none; box-shadow: inset 0 0 0 1px rgba(244, 245, 247, 0.13); }
.demo-line .demo-h { color: transparent; -webkit-text-stroke: 1px rgba(244, 245, 247, 0.92); }
.demo-line .demo-nav i { background: none; box-shadow: inset 0 0 0 1px rgba(244, 245, 247, 0.85); }
.demo-line .demo-nav b, .demo-line .demo-s b { background: none; box-shadow: inset 0 0 0 1px rgba(244, 245, 247, 0.6); }
.demo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 9%;
  text-align: center;
}
.demo-glow {
  position: absolute; left: 50%; top: 58%;
  width: 70%; aspect-ratio: 2.2; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(126, 104, 255, 0.55), rgba(70, 120, 255, 0.18) 55%, transparent);
  filter: blur(24px);
  transform: translate(-50%, -50%);
}
.demo-nav { position: absolute; left: 9%; right: 9%; top: 7%; display: flex; gap: 2.2%; align-items: center; }
.demo-nav i { width: 1.6%; aspect-ratio: 1; border-radius: 50%; background: #f4f5f7; margin-right: auto; min-width: 12px; }
.demo-nav b { width: 6%; height: 6px; border-radius: 3px; background: rgba(244, 245, 247, 0.22); }
.demo-h {
  position: relative;
  font-stretch: 104%;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #f4f5f7;
}
.demo-l { display: flex; gap: 0.26em; justify-content: center; }
.demo-m { display: inline-block; overflow: hidden; padding: 0.04em 0.03em 0.12em; margin: -0.04em -0.03em -0.12em; position: relative; }
.demo-w { display: inline-block; }
.demo-s { margin-top: 3.2%; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.demo-s b { display: block; height: 9px; border-radius: 5px; background: rgba(244, 245, 247, 0.26); }
.demo-s b:first-child { width: 36%; }
.demo-s b:last-child { width: 24%; }

.seam {
  position: absolute; top: 0; bottom: 0; left: calc(var(--seam, 0.5) * 100%);
  width: 44px; margin-left: -22px;
  cursor: ew-resize;
  touch-action: pan-y;
  outline: none;
}
.seam::before {
  content: ""; position: absolute; left: 21.5px; top: 0; bottom: 0; width: 1px;
  background: rgba(244, 245, 247, 0.9);
  transform: scaleY(var(--seam-draw, 1));
  transform-origin: 50% 0;
}
.seam-grip {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; border-radius: 50%;
  background: #f4f5f7;
  transform: translate(-50%, -50%) scale(var(--seam-draw, 1));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.seam-grip::before, .seam-grip::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  border: solid var(--glass); border-width: 0 0 1.5px 1.5px;
}
.seam-grip::before { left: 9px; transform: translateY(-50%) rotate(45deg); }
.seam-grip::after { right: 9px; transform: translateY(-50%) rotate(-135deg); }
.seam:focus-visible .seam-grip { box-shadow: 0 0 0 3px var(--glass), 0 0 0 5px #f4f5f7; }

/* card layer */
.panel {
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 50% 0%, #181b21 0%, var(--glass) 60%);
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
}
.panel.is-on { visibility: visible; clip-path: inset(0 0 0 0); }
.panel.is-entering { visibility: visible; transition: clip-path var(--clip-ms) var(--clip); }
.panel.is-under { visibility: visible; clip-path: inset(0 0 0 0); }

.mini { position: absolute; inset: 0; padding: 7% 8%; }
.mini-nav { display: flex; gap: 3%; align-items: center; }
.mini-nav i { width: 14px; height: 14px; border-radius: 50%; background: #f4f5f7; margin-right: auto; }
.mini-nav b { width: 9%; height: 6px; border-radius: 3px; background: rgba(244, 245, 247, 0.22); }
.mini-head {
  position: relative; display: inline-flex; gap: 0.26em;
  margin-top: 12%;
  font-stretch: 100%; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: #f4f5f7;
}
.mini-hm { display: inline-block; overflow: hidden; padding: 0.06em 0.02em 0.14em; margin: -0.06em -0.02em -0.14em; }
.mini-hw { display: inline-block; }
.pick {
  position: absolute; inset: -12px -14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(244, 245, 247, 0.85);
}
.pick i { position: absolute; width: 7px; height: 7px; background: #f4f5f7; }
.pick i:nth-child(1) { left: -3px; top: -3px; }
.pick i:nth-child(2) { right: -3px; top: -3px; }
.pick i:nth-child(3) { left: -3px; bottom: -3px; }
.pick i:nth-child(4) { right: -3px; bottom: -3px; }
.mini-tiles { position: absolute; left: 8%; right: 8%; bottom: 9%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; height: 30%; }
.mini-tiles span { border-radius: 10px; background: linear-gradient(160deg, #262a32, #1a1d23); }
.mini-orb {
  position: absolute; right: 9%; top: 22%;
  width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb38a, #ff6a3d 45%, #a8321c 100%);
}

.panel-numbers { padding: 7% 8%; display: flex; flex-direction: column; }
.num-title { font-size: 22px; font-weight: 600; font-stretch: 112%; letter-spacing: -0.01em; }
.num-plot { display: block; width: 100%; height: 32%; margin: 5% 0 calc(3% + 64px); overflow: visible; }
.num-plot .dot { fill: #f4f5f7; }
.num-plot .fitline { stroke: var(--fit-glass); }
.num-rows { display: flex; flex-direction: column; }
.num-row {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; align-items: baseline;
  padding: 11px 0;
  font-size: 17px;
}
.num-row + .num-row { box-shadow: inset 0 1px 0 rgba(244, 245, 247, 0.08); }
.num-row dt { color: rgba(244, 245, 247, 0.68); }
.num-row dd { color: #f4f5f7; font-weight: 500; }
.mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 400 !important; color: rgba(244, 245, 247, 0.82) !important; }
.mark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.mark-exact::before { background: #f4f5f7; }
.mark-fitted::before { box-shadow: inset 0 0 0 1.5px rgba(244, 245, 247, 0.8); }

.panel-code { padding: 6% 7%; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 22px; }
.tab {
  height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  color: rgba(244, 245, 247, 0.62);
  transition: color var(--feedback-ms) var(--readout), background-color var(--feedback-ms) var(--readout);
}
.tab:hover { color: #f4f5f7; }
.tab[aria-selected="true"] { background: rgba(244, 245, 247, 0.1); color: #f4f5f7; }
.code-copy {
  margin-left: auto; height: 36px; padding: 0 16px; border-radius: 999px; overflow: hidden;
  background: #f4f5f7; color: var(--glass); font-size: 15px; font-weight: 600;
  transition: transform var(--feedback-ms) var(--readout);
}
.code-copy:active { transform: scale(0.96); }
.code {
  display: none;
  margin: 0; overflow: auto;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.7;
  color: rgba(244, 245, 247, 0.9);
}
.code.is-on { display: block; }

/* ---------- small screens ---------- */

@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav { gap: 10px; }
  .menu-btn { display: inline-flex; }
}

@media (max-width: 820px) {
  .nav { gap: 8px; height: 68px; }
  .menu-btn { height: 40px; padding: 0 16px; font-size: 15px; }
  .sheet { padding-top: 100px; }
  .nav ul { gap: 14px; }
  .nav ul a { font-size: 15px; }
  .wordmark { font-size: 20px; }
  .install { height: 40px; padding: 0 18px; font-size: 15px; }

  .hero { padding-top: calc(68px + 9vh); }
  .headline { display: flex; font-size: clamp(38px, 11.6vw, 72px); }
  .line-1 { flex-wrap: wrap; row-gap: 0.14em; }
  .slot-hero { flex-basis: 100%; height: 1.2em; margin: 0.06em 0 0.08em; transform: none; }
  .line-2 { flex-wrap: wrap; white-space: normal; row-gap: 0.06em; }
  .hero-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 32px; min-height: 0; }
  .trace { position: relative; top: 0; order: -1; width: 100% !important; left: 0 !important; }
  .sub { font-size: 18px; }

  .proof { padding: 24px var(--edge) 14vh; }
  .reads { padding-top: 16vh; }
  .reads-head, .start-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .reads-grid, .marks, .foot-next { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .reads-grid, .marks { margin-top: 8vh; }
  .labels-copy { margin-top: 24px; }
  .mk-fig { height: 80px; margin-bottom: 20px; }
  .start, .agents { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 14vh; padding-bottom: 10vh; }
  .slot-term { height: 440px; min-height: 0; }
  .term { font-size: 11.5px; padding: 26px 22px; }
  .cmd { height: 48px; padding-left: 16px; gap: 10px; }
  .cmd code { font-size: 13px; }
  .cmd .install-say { height: 36px; line-height: 36px; padding: 0 12px; font-size: 14px; }
  .chat { padding: 20px; gap: 18px; }
  .turn { font-size: 16px; }
  .turn-agent pre { font-size: 11.5px; padding: 14px; }
  .end { padding-top: 10vh; padding-bottom: 10vh; }
  .foot-next { padding-bottom: 10vh; }
  .foot-base { flex-direction: column; gap: 28px; }
  .install-big { height: 50px; gap: 10px; padding: 0 6px 0 16px; }
  .install-big code { font-size: 13.5px; }
  .install-big .install-say { height: 38px; line-height: 38px; padding: 0 12px; font-size: 14px; }
  .dim-value { font-size: 15px; }
  .proof-head { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .slot-proof { height: 120vw; max-height: 560px; min-height: 0; }

  .cardpin { height: 330vh; }
  .cardpin-stick { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 20px; padding: 80px var(--edge) 24px; align-items: start; }
  .steps { gap: 0; }
  .step { display: none; }
  .step.is-on { display: block; }
  .step-title { font-size: 30px; }
  .step-copy { font-size: 17px; }
  .slot-card { height: min(58svh, 520px); min-height: 0; }

  .num-row { grid-template-columns: 1fr auto; font-size: 15.5px; gap: 2px 12px; padding: 9px 0; }
  .num-row dd:not(.mark) { grid-column: 1; grid-row: 2; }
  .num-row .mark { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .tab { padding: 0 10px; font-size: 14px; }
  .code { font-size: 12.5px; }
}

/* ---------- reduced motion: final states, nothing travels ---------- */

@media (max-width: 359px) { .install { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* the A's counter: where the window first opens */
.slot-counter { position: fixed; z-index: 20; pointer-events: none; }