/* BLINDFLOOR landing (/) — "The Blind Book". Object in the middle, two narrow text columns at the edges. */

html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
html.no-snap { scroll-snap-type: none; }
body { min-height: 100vh; }

/* ---------- stage: fixed behind everything ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); transition: opacity 400ms var(--ease); }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 1; transition: opacity 700ms var(--ease); }
.stage .gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease); }
.gl .stage.is-ready .gl-canvas { opacity: 1; }
.gl .stage.is-ready .poster { opacity: 0; }
.gl .stage:not(.is-ready) .poster { opacity: .55; }
.stage[data-dim] { opacity: var(--stage-o, 1); }

/* projected labels (hash, price line, fired ring, column counts) */
.labels { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease); }
.gl .stage.is-ready .labels { opacity: 1; }
.lbl {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity;
  font: 400 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--text-dim); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(5, 6, 8, .9), 0 0 2px rgba(5, 6, 8, 1);
}
.lbl[hidden] { display: none; }
.lbl.is-left { text-align: right; }
.lbl-price { color: var(--accent-hi); font-size: 13px; font-weight: 500; }
.lbl-price small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-faint); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.lbl-hash { color: #b9c0cb; }
.lbl-hash.is-demo { color: var(--text-dim); }
.lbl-fired { color: var(--hot); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-align: center; }
.lbl-fired a { color: var(--hot); pointer-events: auto; text-decoration-color: rgba(255,255,255,.4); }
.lbl-fired small { display: block; margin-top: 3px; font-size: 10px; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }
.lbl-col { text-align: center; color: var(--text-dim); font-size: 11.5px; }
.lbl-col b { display: block; color: var(--text); font-weight: 500; font-size: 13px; margin-top: 4px; }
.lbl-col.is-on b { color: var(--accent-hi); }

/* ---------- snaps ---------- */
.snaps { position: relative; z-index: 2; }
.snap {
  position: relative; min-height: 100vh; min-height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  padding: calc(var(--bar-h) + var(--sp-5)) var(--gutter) var(--sp-6);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5);
  pointer-events: none;
}
.snap > * { pointer-events: auto; }
.edge { position: relative; z-index: 2; }
.edge-left { width: 300px; max-width: 300px; flex: none; }
.edge-right { width: 260px; max-width: 260px; flex: none; text-align: left; }

/* hero type */
.hero h1 {
  margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-xl); line-height: 1.28; color: var(--hot);
  text-wrap: balance;
}
.hero .lead { margin: 0 0 var(--sp-3); color: var(--text); font-size: var(--fs-sm); line-height: 1.65; }
.fine { margin: 0; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.6; }

/* seal box: "you see" vs "chain sees" */
.seal {
  margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-3) var(--sp-3) var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: rgba(8, 9, 13, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.seal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.seal-title { color: var(--accent-hi); }
.seal-stock { font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--text-dim); border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 3px 6px; }
.seal-label { display: block; margin-bottom: 6px; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.seal-input {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg);
  font: 500 var(--fs-lg)/1 var(--font-mono); color: var(--text-dim);
  transition: border-color var(--dur) var(--ease);
}
.seal-input:focus-within { border-color: var(--accent); }
.seal-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font: 500 var(--fs-lg)/1 var(--font-mono); color: var(--hot); font-variant-numeric: tabular-nums;
}
.seal-input[data-bad] { border-color: var(--text-faint); }
.seal-split { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: var(--sp-3); border-radius: var(--r-2); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.seal-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: var(--sp-2); padding: 9px 10px; background: var(--panel); }
.seal-k { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.seal-v { font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seal-you .seal-v { color: var(--hot); }
.seal-chain { background: linear-gradient(90deg, rgba(139,124,255,.10), rgba(139,124,255,0) 85%), var(--panel); }
.seal-chain .seal-k { color: var(--accent-hi); }
.seal-chain .seal-v { color: var(--accent-hi); transition: opacity 160ms var(--ease); }
.seal[data-busy] .seal-chain .seal-v { opacity: .45; }
.seal-note { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-2xs); line-height: 1.55; color: var(--text-faint); }
.seal-note code { font-size: inherit; color: var(--text-dim); }
.seal-curl {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 7px 8px; cursor: pointer; text-align: left;
  border: 1px dashed var(--line-2); border-radius: var(--r-2); background: transparent; color: var(--text-dim); font-size: 10.5px;
}
.seal-curl:hover { border-color: var(--text-faint); color: var(--text); }
.curl-line { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curl-copy { flex: none; color: var(--accent-hi); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.seal-curl.is-done .curl-copy { color: var(--hot); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* right column: live numbers */
.live { margin: var(--sp-3) 0 0; display: grid; gap: 0; }
.live-row { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.live-row:last-child { border-bottom: 1px solid var(--line); }
.live dt { font-size: var(--fs-xs); color: var(--text-dim); }
.live dd { margin: 0; }
.live .num { font: 400 26px/1.2 var(--font-mono); color: var(--hot); margin-top: 2px; letter-spacing: -.01em; }
.live .num[data-retry] { color: var(--text-faint); }
.live-sub { font-size: var(--fs-2xs); color: var(--text-faint); margin-top: 2px !important; }
.live-note { margin: var(--sp-2) 0 0; font-size: var(--fs-2xs); color: var(--text-faint); min-height: 1.5em; }
.feed { display: grid; gap: 2px; margin: var(--sp-4) 0 var(--sp-3); }
.feed-v { font: 500 var(--fs-md)/1.3 var(--font-mono); color: var(--accent-hi); }
.feed-t { font-size: var(--fs-2xs); color: var(--text-faint); }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chip {
  height: 32px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: rgba(8, 9, 13, .7);
  font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: .06em; color: var(--text-dim); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip[aria-checked='true'] { color: var(--hot); border-color: var(--accent); background: var(--accent-tint); }

/* scroll cue */
.cue {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); text-decoration: none;
}
.cue:hover { color: var(--text); }
.cue-line { width: 1px; height: 34px; background: linear-gradient(var(--text-faint), transparent); }
.gl .cue-line { animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* steps 2–4: one caption at the left edge, lower half */
.step { align-items: flex-end; }
.step-copy { padding-bottom: var(--sp-7); }
.step-copy h2 { margin: var(--sp-3) 0 var(--sp-3); font-size: var(--fs-xl); line-height: 1.28; color: var(--hot); text-wrap: balance; }
.step-copy p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.65; }
.step-copy p.fine { font-size: var(--fs-xs); }
.step-copy code { font-size: .95em; color: var(--accent-hi); }
.counts { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; font-size: var(--fs-xs); color: var(--text-dim); }
.gl .counts { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.counts b { color: var(--text); font-weight: 500; }

/* rail (01–04) */
.rail {
  position: fixed; right: var(--gutter); bottom: var(--sp-5); z-index: 20; display: flex; gap: 2px;
  font: 500 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .1em; transition: opacity 300ms var(--ease);
}
.rail a { padding: 8px 6px; color: var(--text-faint); text-decoration: none; border-bottom: 1px solid var(--line); }
.rail a:hover { color: var(--text); }
.rail a[aria-current='step'] { color: var(--hot); border-bottom-color: var(--accent); }
.rail.is-off { opacity: 0; pointer-events: none; }

/* ---------- 2D sections ---------- */
.flat { position: relative; z-index: 3; background: var(--bg); scroll-snap-align: start; }
.flat::before { content: ''; position: absolute; left: 0; right: 0; top: -120px; height: 120px; background: linear-gradient(rgba(5,6,8,0), var(--bg)); pointer-events: none; }
.block { padding: var(--sp-9) var(--gutter) var(--sp-8); border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; }
.block-in { max-width: 1240px; margin: 0 auto; }
.block-narrow { max-width: 1240px; }
.block h2 { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-2xl); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.block-lead { margin: 0; max-width: 60ch; color: var(--text); font-size: var(--fs-md); line-height: 1.6; }
.block-more { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); }

.steps { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps li { padding: var(--sp-5) var(--sp-5) var(--sp-4) 0; border-right: 1px solid var(--line); margin-right: var(--sp-5); }
.steps li:last-child { border-right: 0; margin-right: 0; }
.step-ico { display: inline-block; font-size: var(--fs-md); color: var(--accent-hi); letter-spacing: .06em; margin-bottom: var(--sp-5); }
.steps h3 { margin: 0 0 var(--sp-2); font: 400 13px/1.4 var(--font-head); letter-spacing: var(--track-head); text-transform: uppercase; color: var(--hot); }
.steps p { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.7; }
.steps code, .risks code { color: var(--text); font-size: .95em; }

.table-wrap { margin-top: var(--sp-6); overflow-x: auto; border-top: 1px solid var(--line); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 500; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 14px 12px 10px 0; border-bottom: 1px solid var(--line); }
.ledger td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; }
.ledger .r { text-align: right; padding-right: 32px; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .st { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.ledger .st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--text-dim); }
.ledger .st-armed::before { border-color: var(--accent); background: var(--accent-tint); }
.ledger .st-fired { color: var(--hot); }
.ledger .st-fired::before { border-color: var(--hot); background: var(--hot); }
.ledger .st-disarmed { color: var(--text-dim); }
.ledger .hash { color: var(--accent-hi); }
.ledger .trig { color: var(--hot); }
.ledger td.empty { color: var(--text-faint); padding: 22px 0; white-space: normal; }

.risks { list-style: none; margin: var(--sp-5) 0 0; padding: 0; max-width: 78ch; }
.risks li { padding: var(--sp-3) 0; border-top: 1px solid var(--line); color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.7; }
.risks strong { color: var(--text); font-weight: 500; }

/* dev-only stub badge (never shown on a public host: the stub only runs on localhost) */
.stub-badge { position: fixed; left: 8px; bottom: 8px; z-index: 90; padding: 4px 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #0a0820; background: var(--accent); border-radius: var(--r-1); }

/* poster mode (dev): the scene alone, used to render web/img/poster.webp and og.jpg */
.poster-mode .topbar, .poster-mode .snaps, .poster-mode .rail, .poster-mode .skip, .poster-mode .stub-badge { display: none !important; }

/* ---------- laptop heights ---------- */
@media (max-height: 820px) and (min-width: 769px) {
  .hero h1 { font-size: 21px; margin-bottom: var(--sp-3); }
  .seal { margin-top: var(--sp-4); }
  .hero .fine { display: none; }
  .live .num { font-size: 22px; }
}

/* ---------- mobile (≤ 768 px): object on top at 60vh, the edge columns stack below ---------- */
@media (max-width: 768px) {
  :root { --bar-h: 92px; --gutter: 16px; }
  .topbar-in { flex-wrap: wrap; align-content: center; row-gap: 8px; column-gap: var(--sp-3); padding-top: 8px; padding-bottom: 8px; }
  .topbar { background: linear-gradient(180deg, rgba(5,6,8,.96) 0%, rgba(5,6,8,.85) 80%, rgba(5,6,8,0) 100%); }
  /* row 1: brand · App Ledger Docs X   row 2: CA pill · Buy */
  .brand { order: 1; }
  .nav { display: contents; }
  .nav > a { order: 2; }
  .nav > a:first-child { margin-left: auto; }
  .topbar-in::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .ca { order: 4; flex: 1 1 0; }
  .nav .btn-buy { order: 5; min-height: 32px; height: 32px; }
  .nav .btn-buy .sub { display: none; }
  .ca-v { flex: 1; }
  .snap { display: block; padding-top: calc(var(--bar-h) + var(--sp-3)); }
  .edge-left, .edge-right { width: auto; max-width: none; flex: 1 1 auto; min-width: 0; }
  .hero h1 { font-size: 20px; margin-bottom: 0; }
  .hero .lead { margin-top: var(--hero-gap, 54svh); }
  .edge-right { margin-top: var(--sp-6); }
  .hero .cue { display: none; }
  .seal { background: rgba(8, 9, 13, .94); }
  .hero { padding-bottom: var(--sp-8); }
  .step { display: flex; align-items: flex-end; }
  .step-copy { padding: var(--sp-4) 0 var(--sp-6); }
  .step-copy::before { content: ''; position: absolute; inset: -40px calc(-1 * var(--gutter)) 0; background: linear-gradient(rgba(5,6,8,0), rgba(5,6,8,.9) 40px); z-index: -1; }
  .step-copy h2 { font-size: 20px; }
  .rail { display: none; }
  .block { padding: var(--sp-8) var(--gutter) var(--sp-7); }
  .block h2 { font-size: 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .step-ico { margin-bottom: var(--sp-3); }
  .ledger { font-size: var(--fs-xs); }
  .ledger .hide-sm { display: none; }
  .no-gl .stage .poster { top: var(--bar-h); height: 60svh; object-fit: cover; }
  .lbl { font-size: 10.5px; }
  .lbl-col { display: none !important; }
  .lbl-price small { display: none; }
  .gl .counts { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
}
@media (max-width: 380px) {
  .nav a:not(.btn):not(.x-link) { font-size: var(--fs-xs); }
  .brand { letter-spacing: .12em; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: y proximity; }
}