/* JAILBREAK, the home of Talos. A dark product page whose product is a face: Talos in titanium with emerald glass
   curls, rendered in Blender Cycles, large and sharp at the top, turning as the page scrolls. Pure black, one grotesk
   (Host Grotesk) set big and heavy for headlines, emerald as the only accent: the second line of the headline, live
   signals, the close calls in charts, the step numbers. Graphite only for objects (the live card, the console, the
   arena report, the contract address). Each section has its own form. JetBrains Mono only for code. */
@font-face { font-family: "JB Hyphen"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("Roboto"), local("Segoe UI"); unicode-range: U+002D, U+2010, U+2011; }
:root {
  --bg: #000;
  --raise: #0b0c0d;
  --tile: #141517;
  --tile-2: #1c1d20;
  --line: #26282b;
  --line-2: #3b3e43;
  --text: #f4f5f6;
  --soft: #a7acb2;
  --mute: #868b92;
  --white: #fff;
  --em: #2fd283;
  --em-2: #17a862;
  --sans: "JB Hyphen", "Host Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(20px, 5vw, 64px);
  --max: 1280px;
  --edge: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; scrollbar-color: var(--line-2) var(--bg); scrollbar-width: thin; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--sans); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: var(--em); color: #000; }
input, textarea { caret-color: var(--em); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--soft); }
:focus-visible { outline: 2px solid var(--em); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, pre { font-family: var(--mono); letter-spacing: 0; font-size: 0.88em; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.empty { color: var(--mute); }
.body { color: var(--soft); max-width: 54ch; font-size: 18px; line-height: 1.55; }
.demo-note, .close p.demo-note { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.em { color: var(--em); }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 600 16px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.btn:active { transform: scale(0.98); }
/* the one action in the one accent, as on the $1M+ runners' sites (EGO, Higgspad, Backers: accent-filled primary) */
.btn.primary { background: var(--em); color: #000; }
.btn.primary:hover:not(:disabled) { background: #52dd99; }
.btn.ghost { background: rgba(255, 255, 255, 0.02); color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover:not(:disabled) { border-color: var(--soft); }
.btn.xs { height: 34px; padding: 0 15px; font-size: 14px; }
.btn:disabled { background: var(--tile-2); color: var(--mute); border-color: var(--line); cursor: not-allowed; }

/* ---- the nav ---- */
.lnav { position: fixed; inset: 0 0 auto; z-index: 20; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lnav-in { max-width: var(--max); margin-inline: auto; padding: 0 var(--gut); height: 56px; display: flex; align-items: center; gap: 26px; }
.word { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: 14px; font-weight: 500; color: var(--soft); text-decoration: none; transition: color 0.2s; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.lnav-act { display: flex; align-items: center; gap: 10px; }
.ca-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: 600 13px/1 var(--sans); cursor: pointer; transition: border-color 0.2s; }
.ca-chip em { font-style: normal; font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }
.ca-chip:hover:not(:disabled) { border-color: var(--soft); }
.ca-chip:disabled { cursor: default; }
.xlink { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--soft); transition: color 0.2s; }
.xlink:hover { color: var(--text); }
.xlink svg { width: 16px; height: 16px; }
.nav .m-only { display: none; }
.lnav-act .short { display: none; }
.menu-btn { display: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.menu-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }

/* ---- the stage: Talos, the offer, the live card and the numbers; then the turn with its captions ---- */
.story { position: relative; height: 460vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.talos { position: absolute; inset: 0; }
.talos canvas { position: absolute; inset: 0; display: block; }
/* the one entrance: as the page opens the light comes up on him out of black while he settles back */
.js .talos { opacity: 0; transform: scale(1.03); filter: brightness(0.2); }
.js .talos.lit { opacity: 1; transform: none; filter: none; transition: opacity 1.4s var(--ease), transform 2.6s var(--ease), filter 2.2s var(--ease) 0.15s; }
/* the lights bring him in (talos.ignite); the stage only settles from a hair closer */
.js .talos.ignite { opacity: 1; transform: none; filter: none; transition: transform 3.4s var(--ease); }
.leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leader polyline { fill: none; stroke: rgba(244, 245, 246, 0.78); stroke-width: 1.25; stroke-linejoin: round; }
.leader circle { fill: var(--em); }

/* Wide screens: Talos in the middle and the sentence across his face, "Talos will not" left of it and "open the
   vault." right, at his eye line. talos.js sets --head (his width), --eye (the height of his eyes) and --fs (the size
   that still fits beside him) on the stage; the fallbacks below only hold until he has loaded. */
.hero-copy { --g: 30px; --side: calc(50% - var(--head, 520px) / 2 - var(--g) - var(--gut)); --top: calc(var(--eye, 46vh) - 1.5 * var(--fs, 76px)); --under: calc(var(--top) + 1.96 * var(--fs, 76px)); position: absolute; z-index: 2; inset: 0; pointer-events: none; transform: translateY(var(--y, 0px)); }
.hero-copy a, .hero-copy article { pointer-events: auto; }
.hero-copy h1 { position: absolute; inset: 0; font-size: var(--fs, 76px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 700; text-wrap: initial; }
.hero-copy h1 > span { position: absolute; top: var(--top); width: var(--side); }
.hero-copy .h-a { right: calc(50% + var(--head, 520px) / 2 + var(--g)); text-align: right; }
.hero-copy .h-b { left: calc(50% + var(--head, 520px) / 2 + var(--g)); }
/* under him, centred: the dare in emerald, the one field, one quiet line */
.hero-copy h1 > .em { top: auto; bottom: 148px; left: 50%; width: auto; transform: translateX(-50%); white-space: nowrap; font-size: 0.46em; line-height: 1.1; letter-spacing: -0.03em; }
.hc-r { position: absolute; left: 50%; bottom: 40px; width: min(480px, calc(100% - 2 * var(--gut))); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hc-r .say { pointer-events: auto; }
.hero-meta { margin: 14px 0 0; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.hero-meta b { color: var(--soft); font-weight: 600; }
.hero-copy.pre .hm-live, .hero-copy:not(.pre) .hm-pre { display: none; }
.st-demo { margin-left: 8px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; color: var(--mute); }
.say { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 480px; height: 56px; padding: 5px 5px 5px 20px; border-radius: 999px; background: var(--tile); border: 1px solid var(--line-2); transition: border-color 0.2s var(--ease); }
.say:focus-within { border-color: var(--em-2); }
.say input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 400 16px/1 var(--sans); outline: none; }
.say input::placeholder { color: var(--mute); }
.say .btn { height: 44px; padding: 0 20px; flex: none; }
.said-who { margin-right: 8px; font-size: 0.72em; font-weight: 700; color: var(--em); }



/* the hero arrives as the key light reaches his face: rising, never blurred, the two halves of the sentence first */
.js .hero-copy h1 > span, .js .hc-r { opacity: 0; translate: 0 18px; }
.js .hero-copy.go h1 > span, .js .hero-copy.go .hc-r { opacity: 1; translate: 0 0; transition: opacity 1.1s var(--ease), translate 1.1s var(--ease); }
.hero-copy.go .h-b { transition-delay: 0.1s; }
.hero-copy.go h1 > .em { transition-delay: 0.24s; }
.hero-copy.go .hc-r { transition-delay: 0.36s; }


/* the captions of the turn */
/* captions stand beside him: features on his face side to his left, the far side (crown, ear) to his right; --headmax
   is his widest frame, so no caption ever runs into him */
.cap { --g: 30px; position: absolute; right: calc(50% + var(--headmax, 640px) / 2 + var(--g)); top: 50%; width: min(440px, calc(50% - var(--headmax, 640px) / 2 - var(--g) - var(--gut))); transform: translateY(calc(-50% + var(--y, 0px))); opacity: 0; pointer-events: none; will-change: opacity, transform; }
.cap h2 { font-size: clamp(2.5rem, 1.1rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; }
.cap.r { right: auto; left: calc(50% + var(--headmax, 640px) / 2 + var(--g)); }
.cap h3 { font-size: clamp(1.75rem, 0.7rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 650; }
.cap p { margin-top: 18px; font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.45; color: var(--soft); }
.cap p b, .cap code { color: var(--text); font-weight: 600; }
.cap-end .btn { margin-top: 30px; }
.cap.on { pointer-events: auto; }

/* sections rise in once as they arrive */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---- how it works: three numbered steps ---- */

/* ---- live: the record of attempts beside his latest answer and the vault's growth ---- */
.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.log > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; transition: background-color 1.6s var(--ease); }
.log > li.empty { display: block; }
.log > li.fresh { background-color: var(--tile); }
.log .tech { color: var(--soft); font-size: 13px; font-weight: 600; text-decoration: none; }
.log .tech:hover { color: var(--text); text-decoration: underline; }
.log time { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.log .msg { grid-column: 1 / -1; color: var(--text); font-size: 17px; overflow-wrap: anywhere; }
.log .msg::before { content: "\201C"; } .log .msg::after { content: "\201D"; }
.log .ans { grid-column: 1 / -1; color: var(--soft); overflow-wrap: anywhere; }
.log .ans::before { content: "Talos  "; font-size: 12px; font-weight: 700; color: var(--em); }
.log .res { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }
.log .res.open { justify-self: start; color: #000; background: var(--em); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.last-to { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.last-to q { color: var(--text); }
.last-to:empty { display: none; }
.fig-body .area { fill: rgba(47, 210, 131, 0.08); }
.fig-body .line { fill: none; stroke: var(--em); stroke-width: 1.5; stroke-linejoin: round; }
.fig-body .now { fill: var(--em); }
.js .growth .line { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); transition: stroke-dashoffset 2.2s var(--ease) 0.2s; }
.js .in .growth .line { stroke-dashoffset: 0; }
.js .growth .area { opacity: 0; transition: opacity 1.4s var(--ease) 1s; }
.js .in .growth .area { opacity: 1; }

/* ---- the myth and Freysa: an editorial spread with the vein and its nail ---- */
.js .vein.in .vein-drop { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) 0.9s; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.timeline li { position: relative; padding-bottom: 42px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--soft); }
.timeline li:last-child::before { background: var(--em); border-color: var(--em); }
.timeline time { font-size: 14px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.timeline p { margin-top: 8px; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.45; color: var(--soft); max-width: 42ch; }
.timeline li:last-child p { color: var(--text); }

/* ---- research: a side column that stays, figures that scroll ---- */
.findings { list-style: none; margin: 32px 0 0; padding: 0; }
.findings li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--soft); font-size: 16px; line-height: 1.45; }
.findings li b { color: var(--text); font-weight: 650; }
.r-method { margin-top: 20px; font-size: 14px; }
.r-method a { color: var(--soft); }
.fig-body { margin-top: 24px; }
.fig-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-body text { fill: var(--mute); font: 500 11px var(--sans); letter-spacing: 0; }
.fig-body .ax { stroke: var(--line); stroke-width: 1; }
.fig-body .bar { fill: #4a4e54; }
.fig-body .bar.hi { fill: var(--em); }
.js .fig-body .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 20ms + 0.15s); }
.js .in .fig-body .bar { transform: none; }
.closest { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: c; }
.closest li { counter-increment: c; display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.closest li::before { content: counter(c); color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.closest li.empty { display: block; }
.closest li.empty::before { display: none; }
.closest q { color: var(--text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.closest .sc { font-size: 15px; font-weight: 650; color: var(--em); font-variant-numeric: tabular-nums; }
.closest .sc small { color: var(--mute); font-weight: 400; }
.closest .by { grid-column: 2 / -1; font-size: 13px; color: var(--mute); }

/* ---- the Index: a real table ---- */
.tt { width: 100%; margin-top: clamp(40px, 5vw, 64px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tt th { text-align: left; font-size: 13px; font-weight: 500; color: var(--mute); padding: 0 0 14px; border-bottom: 1px solid var(--line-2); }
.tt td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tt th:not(:first-child), .tt td:not(:first-child) { text-align: right; width: 14%; }
.tt td:first-child a { text-decoration: none; font-weight: 600; }
.tt td:first-child a:hover { text-decoration: underline; }
.tt td.empty { text-align: left; }
.sample { margin-top: 22px; border-top: 1px solid var(--line); }
.sample summary, .signs summary { cursor: pointer; padding: 16px 0; font-size: 15px; color: var(--soft); list-style: none; }
.sample summary::-webkit-details-marker, .signs summary::-webkit-details-marker { display: none; }
.sample summary::after, .signs summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--ease); }
.sample[open] summary::after, .signs[open] summary::after { transform: translateY(0) rotate(-135deg); }
.sample pre { margin: 0 0 8px; padding: 20px; border-radius: 16px; background: var(--tile); font-size: 13px; line-height: 1.65; color: var(--soft); overflow: auto; max-height: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- the Arena ---- */
.waitlist { margin-top: 40px; display: grid; gap: 8px; max-width: 520px; }
.waitlist label { font-size: 14px; color: var(--soft); margin-top: 10px; }
.waitlist label span { color: var(--mute); margin-left: 6px; }
.console textarea, .waitlist input, .waitlist textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); color: var(--text); padding: 14px 16px; font: 400 16px/1.55 var(--sans); letter-spacing: -0.005em; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; }
.waitlist input { height: 52px; }
.console textarea::placeholder, .waitlist textarea::placeholder { color: var(--mute); }
.console textarea:focus, .waitlist input:focus, .waitlist textarea:focus { outline: none; border-color: var(--em-2); box-shadow: 0 0 0 4px rgba(47, 210, 131, 0.1); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.wl-foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wl-msg { font-size: 14px; color: var(--soft); }
.fine { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mute); }

/* ---- the model card, beside his face ---- */
.spec { margin: 28px 0 0; border-top: 1px solid var(--line-2); }
.spec div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 15px; font-weight: 650; }
.spec dd { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; max-width: 56ch; }
.spec code { color: var(--text); }

/* ---- funding ---- */
.split { margin: 0; }
.split-bar { margin-top: 16px; display: grid; grid-template-columns: 25fr 75fr; gap: 3px; height: 12px; }
.split-bar span:first-child { background: var(--em); border-radius: 6px 0 0 6px; transform-origin: left; }
.split-bar span:last-child { background: var(--line-2); border-radius: 0 6px 6px 0; transform-origin: left; }
.js .split-bar span { transform: scaleX(0); transition: transform 1.3s var(--ease) 0.3s; }
.js .split-bar span:last-child { transition-delay: 0.55s; }
.js .in .split-bar span { transform: none; }
.split dl { margin: 16px 0 0; display: grid; grid-template-columns: 25fr 75fr; gap: 3px; }
.split dt { font-size: 30px; font-weight: 650; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.split dd { margin: 4px 0 0; font-size: 14px; color: var(--soft); padding-right: 12px; }
.ca { margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--tile); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ca code { flex: 1 1 100%; font-size: 14px; overflow-wrap: anywhere; color: var(--text); }

/* ---- questions ---- */
.qs { border-top: 1px solid var(--line-2); }
.qs details { border-bottom: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-size: 19px; font-weight: 550; letter-spacing: -0.02em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::before, .qs summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--soft); transition: transform 0.35s var(--ease); }
.qs summary::after { transform: rotate(90deg); }
.qs details[open] summary::after { transform: rotate(0deg); }
.qs details p { padding: 0 44px 22px 0; color: var(--soft); max-width: 60ch; }

/* ---- the close: the vault in one sentence, Talos in profile facing it ---- */

/* ---- footer ---- */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--mute); }
.foot .wrap { display: grid; gap: 14px; }
.foot p { max-width: 70ch; }
.foot a { color: var(--soft); }
.foot-word { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--text); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }
.disclose:empty { display: none; }

/* ---- the console (it lives in the chamber) ---- */
.console { padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: var(--tile); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 40px 80px -24px #000; }
.console h2 { font-size: 24px; letter-spacing: -0.03em; }
.console-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.step { padding: 16px 0; border-top: 1px solid var(--line); }
.step label { display: block; margin-bottom: 10px; font-size: 14px; color: var(--soft); }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--soft); }
.wallets { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--soft); }
.wallets p { width: 100%; }
.elig { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--soft); }
.elig b { color: var(--text); font-weight: 600; }
.elig.bad { color: var(--text); }
.console textarea { min-height: 150px; }
.console-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mute); }
.count { font-variant-numeric: tabular-nums; }
.confirm { margin-bottom: 12px; font-size: 15px; color: var(--text); }
.send-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signs { margin-top: 4px; border-top: 1px solid var(--line); }
.signs pre { margin: 0 0 6px; padding: 16px; border-radius: 14px; background: var(--bg); font-size: 12.5px; line-height: 1.7; color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.answer { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.a-state { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.a-text { margin-top: 8px; color: var(--soft); }
.a-text:empty { display: none; }
.a-more { margin-top: 10px; font-size: 14px; color: var(--mute); }

/* ---- sub-pages: the full index, an article, the API, the method ---- */
.page { padding: 132px 0 120px; min-height: 80vh; }
.page h1 { font-size: clamp(2.5rem, 1.2rem + 4vw, 4.75rem); font-weight: 620; line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; }
.doc-nav { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-nav a { padding: 8px 16px; border-radius: 999px; background: var(--tile); text-decoration: none; font-size: 14px; color: var(--soft); }
.doc-nav a:hover { color: var(--text); }
.prose h2[id] { scroll-margin-top: 80px; }
.page .intro-p { margin-top: 24px; max-width: 46ch; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.38; letter-spacing: -0.02em; color: var(--soft); }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 36px; font-size: 14px; color: var(--soft); text-decoration: none; }
.back:hover { color: var(--text); }
.back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page .tt { margin-top: 56px; }
.art { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.art .meta { margin-top: 18px; font-size: 14px; color: var(--mute); }
.prose { margin-top: 44px; max-width: 64ch; }
.prose h2 { margin-top: 44px; font-size: 26px; letter-spacing: -0.03em; }
.prose p, .prose li { margin-top: 14px; color: var(--soft); line-height: 1.6; font-size: 18px; }
.prose ul { padding-left: 20px; }
.prose b { color: var(--text); font-weight: 600; }
.notable { list-style: none; margin: 20px 0 0; padding: 0; }
.notable li { padding: 20px 0; border-top: 1px solid var(--line); }
.notable q { display: block; color: var(--text); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.notable p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.see { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.see a { padding: 8px 16px; border-radius: 999px; background: var(--tile); text-decoration: none; font-size: 14px; color: var(--soft); }
.see a:hover { color: var(--text); }
.facts { position: sticky; top: 84px; margin: 0; padding: 8px 24px; border-radius: 22px; background: var(--tile); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.api-list { margin-top: 48px; display: grid; gap: 10px; max-width: 880px; }
.api-list pre { margin: 0; padding: 18px 22px; border-radius: 16px; background: var(--tile); font-size: 14px; line-height: 1.7; overflow-x: auto; color: var(--text); }
.api-fields { margin: 28px 0 0; max-width: 880px; }
.api-fields div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.api-fields dt { font-family: var(--mono); font-size: 14px; color: var(--text); padding-top: 2px; }
.api-fields dd { margin: 0; color: var(--soft); }

/* ---- the attempt chamber ---- */
.chamber { position: fixed; inset: 0; z-index: 90; background: #000; opacity: 0; transition: opacity 0.45s var(--ease); overflow-y: auto; overscroll-behavior: contain; }
.chamber.in { opacity: 1; }
.chamber-x { position: fixed; top: 14px; right: max(14px, var(--gut)); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(66, 66, 69, 0.6); color: var(--text); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 0.4s var(--ease), background-color 0.2s; }
.chamber.ready .chamber-x { opacity: 1; }
.chamber-x:hover { background: rgba(99, 99, 102, 0.7); }
.chamber-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.chamber-ui { position: relative; z-index: 1; min-height: 100%; display: grid; place-items: center; padding: 84px 16px 40px; }
.chamber-ui .console { width: min(600px, 100%); opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.chamber.ready .chamber-ui .console { opacity: 1; transform: none; }

/* ---- Talos in action: the count as the headline, his latest answer at display size, then the attempts ---- */
.live { padding: clamp(120px, 14vw, 220px) 0 clamp(104px, 12vw, 180px); border-top: 1px solid var(--line); text-align: center; }
.live-h { margin: 0 auto; font-size: clamp(2.5rem, 1rem + 4.6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 14ch; font-variant-numeric: tabular-nums; }
.live-sub { margin: 22px auto 0; font-size: 17px; color: var(--mute); max-width: 44ch; }
.live .pquote { margin: clamp(64px, 8vw, 112px) auto 0; max-width: 46rem; }
.live .pquote blockquote { margin: 0 auto; max-width: 22ch; color: var(--em); }
.live .pquote figcaption { margin: 20px auto 0; font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 60ch; }
.live .pquote figcaption a { color: var(--soft); }
.live .log { margin: clamp(64px, 8vw, 112px) auto 0; max-width: 46rem; text-align: left; }
.live .demo-note { margin-top: 24px; }

/* ---- the paper: Experiment 001. A margin column carries the section's number and name and stays in view while the
   section is read; the main column carries prose at a reading measure, and figures and tables with numbered captions ---- */
.paper-head { padding: clamp(120px, 14vw, 220px) 0 clamp(96px, 11vw, 160px); border-top: 1px solid var(--line); }
.ptitle { font-size: clamp(2.5rem, 1rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; max-width: 16ch; }
.byline { margin-top: 24px; font-size: 15px; color: var(--mute); }
.abs-h { margin-top: clamp(40px, 5vw, 64px); font-size: 14px; font-weight: 650; letter-spacing: 0; }
.abstract { margin-top: clamp(48px, 6vw, 80px); font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); line-height: 1.5; letter-spacing: -0.015em; color: var(--text); max-width: 40ch; }
.abstract code, .prose code, .avail code, .checks code { color: var(--text); font-size: 0.9em; }
.ref { margin-left: 2px; font-size: 0.68em; vertical-align: 0.45em; color: var(--em); text-decoration: none; font-variant-numeric: tabular-nums; }
.ref:hover { text-decoration: underline; }
.psec { padding: clamp(104px, 13vw, 200px) 0; border-top: 1px solid var(--line); }
.psec .pgrid { display: grid; grid-template-columns: 12rem minmax(0, 46rem); column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.psec .pgrid > * { grid-column: 2; }
.ph { grid-column: 1 !important; grid-row: 1 / span 30; align-self: start; position: sticky; top: 96px; font-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.125rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; }
.ph .sn { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mute); font-variant-numeric: tabular-nums; }
.pmain { max-width: 46rem; }
.prose h3 { margin-top: 40px; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 650; }
.prose h3:first-child { margin-top: 0; }
.prose h3 .sn { margin-right: 12px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; }
.prose p, .live-line, .r-lead, .avail { margin-top: 12px; font-size: 18px; line-height: 1.62; color: var(--soft); max-width: 66ch; }
.live-line:first-child, .r-lead:first-child, .prose > p:first-child { margin-top: 0; }
.live-line b, .prose b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.live-line span:empty { display: none; }
.avail b { color: var(--text); }
.pfig { margin: clamp(64px, 8vw, 112px) 0 0; }
.pgrid > .ph + .pfig, .pgrid > .ph + p, .pgrid > .ph + dl { margin-top: 0; }
.pfig figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--mute); max-width: 72ch; }
.pfig figcaption b { color: var(--text); font-weight: 650; margin-right: 4px; }
.pfig figcaption a { color: var(--soft); text-underline-offset: 3px; }
.pfig .fig-body { margin-top: 0; }
.pfig .tt { margin-top: 0; }
.pquote blockquote { margin: 0; padding: 0; font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 600; color: var(--text); max-width: 24ch; }
.pquote blockquote::before { content: "\201C"; } .pquote blockquote::after { content: "\201D"; }
/* the method as five short lines */
.steps-min { margin: 0; border-top: 1px solid var(--line); }
.steps-min > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps-min dt { font-size: 16px; font-weight: 650; }
.steps-min dd { margin: 0; font-size: 18px; line-height: 1.55; color: var(--soft); }
.steps-min a { color: var(--text); text-underline-offset: 3px; }
.steps-min code { color: var(--text); font-size: 0.9em; }
.fund-line { margin: 0; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.55; color: var(--soft); max-width: 40ch; }
.r-lead { margin-top: 0; }
.cite { margin-top: 40px; border-top: 1px solid var(--line); }
.cite summary { cursor: pointer; padding: 16px 0; font-size: 15px; font-weight: 600; list-style: none; }
.cite summary::-webkit-details-marker { display: none; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--soft); }
.checks a { color: var(--text); text-underline-offset: 3px; }
.checks .hash { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pull { margin: 36px 0 8px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 600; color: var(--text); max-width: 26ch; }
.fr-lead { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.42; color: var(--text); letter-spacing: -0.02em; max-width: 38ch; }
.pgrid > .timeline { margin-top: clamp(48px, 6vw, 80px); }
.prose .timeline { margin-top: 36px; }
.pface { margin-top: 0; display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 32px; align-items: end; }
.pface img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.pface figcaption { margin-top: 0; padding-bottom: 12px; }
#guard .spec { margin-top: clamp(32px, 4vw, 48px); }
#token .split { max-width: 46rem; }
#token .ca { max-width: 46rem; margin-top: clamp(48px, 6vw, 80px); }
.early { margin-top: 24px; border-top: 1px solid var(--line); }
.early summary { cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 600; color: var(--text); list-style: none; }
.early summary::-webkit-details-marker { display: none; }
.early .waitlist { margin-top: 4px; }
.qs { margin-top: 0; }
.reflist { margin: 0; padding: 0 0 0 1.4em; color: var(--soft); font-size: 15px; line-height: 1.55; }
.reflist li { padding: 8px 0; scroll-margin-top: 96px; }
.reflist li:target { color: var(--text); }
.reflist a { color: var(--text); text-underline-offset: 3px; }
.cite-h { margin-top: 40px; font-size: 16px; font-weight: 650; scroll-margin-top: 96px; }
.bib { position: relative; margin-top: 12px; }
.bib pre { margin: 0; padding: 20px 22px; border-radius: 16px; background: var(--tile); font-size: 13px; line-height: 1.65; color: var(--soft); overflow-x: auto; }
.bib .btn { position: absolute; top: 12px; right: 12px; }

/* ---- the end: his profile, his last word, the vault, and the same invitation as at the top ---- */
.close { padding: clamp(80px, 9vw, 140px) 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.close-copy { padding-bottom: clamp(80px, 9vw, 140px); }
.close h2 { font-size: clamp(2.5rem, 1rem + 4.4vw, 5rem); margin: 0; line-height: 1; letter-spacing: -0.04em; font-weight: 700; font-variant-numeric: tabular-nums; max-width: 12ch; }
.close-copy > p { margin-top: 22px; max-width: 30ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.4; color: var(--soft); }
.close-copy > .close-said { color: var(--text); }
.close-copy > .btn { margin-top: 36px; }
.close-face { width: 100%; max-width: 760px; justify-self: end; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }

/* ---- one attempt on its own page ---- */
.one { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(80px, 10vw, 140px); max-width: 60rem; }
.one-meta { margin-top: 36px; font-size: 15px; color: var(--mute); }
.one-meta b { color: var(--text); font-weight: 650; }
.one-msg { margin-top: 16px; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 650; overflow-wrap: anywhere; }
.one-msg::before { content: "\201C"; } .one-msg::after { content: "\201D"; }
.one-he { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--text); max-width: 40ch; }
.one-res { margin-top: 14px; font-size: 15px; color: var(--mute); }
.one-acts { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.log .when { text-decoration: none; text-align: right; }
.log .when:hover time { color: var(--text); }
.closest q a { color: inherit; text-decoration: none; }
.closest q a:hover { text-decoration: underline; }

/* the launch wallets in the footer, folded */
.wallets summary { cursor: pointer; color: var(--mute); }
.wallets ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wallets code { font-size: 12px; color: var(--soft); overflow-wrap: anywhere; }

/* ---- tablets and phones ---- */
@media (max-width: 1100px) {
  .nav { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gut) 20px; background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav.open { display: flex; }
  .nav .m-only { display: block; }
  .ca-chip, .xlink { display: none; }
  .nav a { padding: 14px 0; font-size: 22px; font-weight: 650; color: var(--text); letter-spacing: -0.03em; border-bottom: 1px solid var(--line); }
  .menu-btn { display: inline-grid; place-items: center; }
}
/* variant "stack" (?hero=stack): on wide screens too, the sentence sits under him in one centred block */
[data-hero="stack"] .hero-copy { inset: auto var(--gut) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-hero="stack"] .hero-copy h1, [data-hero="stack"] .hero-copy h1 > span, [data-hero="stack"] .hc-r { position: static; width: auto; transform: none; }
[data-hero="stack"] .hero-copy h1 { font-size: clamp(2.75rem, 1rem + 3.4vw, 4.75rem); line-height: 1.04; }
[data-hero="stack"] .hero-copy h1 > span { display: inline; }
[data-hero="stack"] .hero-copy h1 > .em { display: block; margin-top: 6px; transform: none; font-size: 1em; white-space: normal; line-height: inherit; letter-spacing: inherit; }
[data-hero="stack"] .hero-copy .w { display: none; }
[data-hero="stack"] .hc-r { margin-top: 30px; width: min(480px, 100%); }
/* portrait screens: Talos above, the copy below within reach of the thumb */
@media (max-width: 699px), (max-aspect-ratio: 9/10) {
  .story { height: 420vh; }
  .hero-copy { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-copy h1, .hero-copy h1 > span, .hc-r { position: static; width: auto; transform: none; }
  .hero-copy h1 { font-size: clamp(2.125rem, 1.2rem + 4vw, 3.25rem); line-height: 1.04; text-wrap: balance; }
  .hero-copy h1 > span { display: inline; }
  .hero-copy h1 > .em { display: block; transform: none; font-size: 1em; white-space: normal; line-height: inherit; letter-spacing: inherit; }
  .hero-copy .w { display: none; }
  .hc-r { margin-top: 22px; width: 100%; }
  .say { max-width: none; height: 54px; }
  .say .btn { padding: 0 16px; }
  .cap, .cap.r { left: var(--gut); right: var(--gut); width: auto; top: 60%; transform: translateY(var(--y, 0px)); }
  .cap h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 2.75rem); }
  .cap h3 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.375rem); }
  .cap p { margin-top: 10px; font-size: 16px; }
}
@media (max-width: 979px) {
  .art, .close-grid, .paper-head .pgrid, .psec .pgrid { grid-template-columns: minmax(0, 1fr); }
  .ph { grid-row: auto; position: static; margin-bottom: 28px; }
  .psec .pgrid > * { grid-column: 1; }
  .facts { position: static; }
  .pface { grid-template-columns: 1fr; }
  .pface img { max-width: 380px; }
  .close-copy { padding-bottom: 0; }
  .close-face { justify-self: center; margin: 8px 0 0; max-width: 560px; }
}
@media (max-width: 699px) and (max-height: 740px), (max-aspect-ratio: 9/10) and (max-height: 740px) {
  .hero-copy h1 { font-size: 2rem; }
  .btn { height: 44px; }
}
@media (max-width: 640px) {
  .lnav-act .long { display: none; }
  .lnav-act .short { display: inline; }
  .prose p, .live-line, .r-lead, .avail, .steps-min dd { font-size: 17px; }
  .steps-min > div { grid-template-columns: 1fr; gap: 6px; }
  .tt th:nth-child(3), .tt td:nth-child(3), .tt th:nth-child(5), .tt td:nth-child(5) { display: none; }
  .tt th:not(:first-child), .tt td:not(:first-child) { width: 28%; }
  .spec div { grid-template-columns: 1fr; gap: 4px; }
  .split dt { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}