/* Signer Census, version 3: a data "case file". Dark charcoal by default, paper as the light alternative.
   One accent (coral) for FastAuth/Sweat and key highlights; green only for bridges in data; hatched grey = suspected benchmark; everything else grey.
   Type: Geist (text and headlines), Geist Mono (micro-labels, numbers, accounts), Doto (dot-matrix counters). All OFL, self-hosted.
   Robustness rules learned in v2: content is visible by default (animations only play INTO the visible state, animation-fill backwards),
   and every color-mix() has a plain fallback declaration before it. */
@font-face { font-family: "Geist"; src: url("../vendor/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../vendor/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Doto"; src: url("../vendor/fonts/doto-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1012; --tile: #16181b; --tile-2: #1c1f23; --line: #26292e; --line-strong: #3a3e44;
  --ink: #ededea; --muted: #959ba2; --faint: #5f656c; --dotoff: #24272b;
  --accent: #ec6a33; --accent-text: #f07a45; --on-accent: #141414; --focus: #7db0f0;
  --fastauth: #ec6a33; --bridge-dark: #2fa874; --bridge-mid: #46b585; --bridge-light: #86d3ae;
  --c-base: #8a939c; --c-muted: #3e464d; --hatch-bg: #262c31; --hatch-line: #8b97a3;
  --text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dots: "Doto", "Geist Mono", ui-monospace, monospace;
  --wide: 96rem; --gut: clamp(16px, 4vw, 64px); --radius: 14px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #ebeae6; --tile: #f6f5f2; --tile-2: #efeeea; --line: #dcdad4; --line-strong: #c2bfb8;
  --ink: #141414; --muted: #5d5c58; --faint: #9a9892; --dotoff: #d9d7d1;
  --accent: #d4501e; --accent-text: #b4421a; --on-accent: #141414; --focus: #1f62c2;
  --fastauth: #d4501e; --bridge-dark: #17734a; --bridge-mid: #2f9e6f; --bridge-light: #7cc7a2;
  --c-base: #68737e; --c-muted: #c3c8cd; --hatch-bg: #e3e6e9; --hatch-line: #6a7682;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; counter-reset: ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; top: 0; left: 0; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 40; transform: translateY(-120%); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code, .mono { font-family: var(--mono); font-variant-ligatures: none; }
code { font-size: 0.85em; overflow-wrap: anywhere; }
.micro { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tip, .scroll, .chart2 .ytick, .chart2 .xtick, .rk .val, .vresult, .counters dd, .bignum { font-variant-numeric: tabular-nums lining-nums; }

/* nothing is shown before the data is in (a timer in index.html removes this if the script ever fails) */
.js main, .js .foot { opacity: 0; }
.js[data-ready] main, .js[data-ready] .foot { opacity: 1; transition: opacity 0.4s ease; }

/* top bar */
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar { display: flex; align-items: center; gap: 1.6rem; height: 3.2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 0.95rem var(--text); letter-spacing: -0.01em; text-decoration: none; flex: none; }
.pip { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.top nav { flex: 1; min-width: 0; display: flex; gap: 1.3rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { text-decoration: none; color: var(--muted); padding: 1.1rem 0; flex: none; border-bottom: 1px solid transparent; }
.top nav a:hover, .top nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
#theme { flex: none; background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; font: 500 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#theme:hover { color: var(--ink); border-color: var(--ink); }

/* two-tone headlines: first sentence ink, the rest muted */
h1, h2, h3 { margin: 0; font-family: var(--text); text-wrap: balance; }
.two-tone .t1 { color: var(--ink); } .two-tone .t2 { color: var(--muted); }
.two-tone > span { display: block; }
h1 { font-size: clamp(2.5rem, 4.6vw, 4.8rem); line-height: 0.96; font-weight: 500; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1; font-weight: 500; letter-spacing: -0.04em; max-width: 22ch; }
h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }

/* hero */
.hero { padding-block: 1.4rem clamp(2rem, 4vw, 3rem); }
.statusline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--tile); font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.statusline b { color: var(--ink); font-weight: 500; }
.statusline .pip { display: inline-block; margin-right: 0.6rem; vertical-align: 0.05em; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(1.5rem, 4vw, 3rem); }
.deck { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; color: var(--muted); max-width: 34rem; margin: 1.6rem 0 0; }
.counters { margin: clamp(1.6rem, 3vw, 2.6rem) 0 0; max-width: 34rem; border-top: 1px solid var(--line-strong); }
.counters > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.counters dt { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.counters dd { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--dots); letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.dp { font-family: var(--mono); font-weight: 400; margin: 0 0.02em; }
.ap { font-family: var(--mono); font-weight: 400; font-size: 0.6em; margin-right: 0.15em; color: var(--muted); }
.counters .count { display: inline-grid; }
.counters .count > span { grid-area: 1 / 1; text-align: right; }
.counters .count .ghost { visibility: hidden; }
.hero-field { position: relative; min-width: 0; align-self: start; }
.hero .more { margin-top: 1rem; }

/* the dot field */
.dotfield { position: relative; width: 100%; }
.dotfield svg { display: block; overflow: visible; }
.bgdots circle { fill: var(--dotoff); }
.cl { cursor: default; outline: none; }
.cl .d { fill: var(--c); transition: opacity 0.2s; }
.cl.t-muted .d { fill: var(--c-base); }
.cl.t-hatch .d.h0 { fill: var(--hatch-line); }
.cl.t-hatch .d.h1 { fill: none; stroke: var(--hatch-line); stroke-width: 1.2; }
.cl .lead { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.8; }
.cl .ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.dotfield.dim .cl:not(.hot) .d { opacity: 0.35; }
.cl:focus-visible .d { stroke: var(--focus); stroke-width: 1.5; }
.dtag { position: absolute; transform: translate(-50%, -100%); pointer-events: none; background: var(--tile); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.25rem 0.5rem; font: 500 0.68rem var(--mono); letter-spacing: 0.06em; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.dtag.on { opacity: 1; }
.dotfield.settle .cl .d { animation: settle 0.7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(min(var(--j), 400) * 2.5ms + 150ms); }
.dotfield.settle .bgdots { animation: fadein 0.8s ease backwards; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }
@keyframes fadein { from { opacity: 0; } }
.casecard { position: absolute; top: 0; right: 0; z-index: 2; width: min(20rem, 92%); background: var(--tile); border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.9rem 1rem 1rem; font-size: 0.85rem; }
.casecard .ch-line { display: flex; justify-content: space-between; gap: 0.6rem; }
.casecard .flag { font: 600 0.62rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 4px; padding: 0.12rem 0.4rem; white-space: nowrap; }
.casecard .big { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.5rem 0 0.4rem; font: 700 2.4rem/1 var(--dots); }
.casecard .big small { font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.casecard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.casecard dt, .casecard dd { margin: 0; padding: 0.42rem 0; border-top: 1px dashed var(--line-strong); font: 0.74rem/1.35 var(--mono); }
.casecard dt { color: var(--muted); padding-right: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }
.casecard dd { text-align: right; }
.casecard a { color: var(--accent-text); }

/* chapters and bento tiles */
.chapter { padding-top: clamp(3rem, 7vw, 6rem); }
.chapter:last-of-type { padding-bottom: clamp(2rem, 5vw, 4rem); }
.ch-head { display: grid; gap: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ch-head .micro::before { counter-increment: ch; content: counter(ch, decimal-leading-zero) " · "; color: var(--accent-text); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.tile { grid-column: span 12; min-width: 0; background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); }
.span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-3 { grid-column: span 3; }
.tile.stack { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.tile.stack > * { padding: clamp(1rem, 2vw, 1.5rem); }
.tile.stack > * + * { border-top: 1px solid var(--line); }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.numtile .bignum, .bignum { margin: 0.6rem 0 0; font: 700 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--dots); letter-spacing: 0.02em; }
.numtile .sub { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.85rem; }
.tile.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); display: flex; flex-direction: column; justify-content: space-between; min-height: 16rem; }
.tile.accent .micro { color: var(--on-accent); opacity: 0.8; }
.tile.accent .huge .ap, .tile.accent .huge .dp { color: inherit; }
.tile.accent .huge { font: 700 clamp(4rem, 8vw, 7rem)/0.9 var(--dots); margin: 0; letter-spacing: 0.01em; }
.tile.accent .line { font: 500 1.2rem/1.25 var(--text); letter-spacing: -0.02em; margin: 0.8rem 0 0; max-width: 16ch; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.check input { width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--accent); }

/* three-step story as status steps */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps3 li { padding: 0.2rem 1.4rem 0.4rem; border-left: 1px solid var(--line); }
.steps3 li:first-child { border-left: 0; padding-left: 0; }
.steps3 .st { font: 500 0.68rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.steps3 .st i { display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; margin-right: 0.5rem; background: var(--faint); }
.steps3 li.on .st i { background: var(--accent); }
.steps3 h3 { margin: 0.6rem 0 0.3rem; }
.steps3 p { margin: 0; color: var(--muted); font: 0.78rem/1.45 var(--mono); }

/* charts (kit from charts.js) */
.chartfig { margin: 0; }
.chart2 { position: relative; width: 100%; outline-offset: 4px; }
.chart2 svg { display: block; overflow: visible; touch-action: pan-y; }
.chart2 .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 3; }
.chart2 .grid.zero { stroke: var(--line-strong); stroke-dasharray: none; }
.chart2 .ytick, .chart2 .xtick { fill: var(--muted); font: 0.66rem var(--mono); letter-spacing: 0.04em; }
.t-base { --c: var(--c-base); } .t-fastauth { --c: var(--fastauth); } .t-muted { --c: var(--c-muted); } .t-hatch { --c: var(--hatch-line); }
.t-bridge-dark { --c: var(--bridge-dark); } .t-bridge-mid { --c: var(--bridge-mid); } .t-bridge-light { --c: var(--bridge-light); }
.t-near { --c: var(--ink); } .t-other { --c: var(--bridge-dark); } .t-unknown { --c: var(--c-muted); } .t-ink { --c: var(--ink); }
.chart2 .bar { fill: var(--c); } .chart2 .bar.partial { opacity: 0.5; }
.chart2 .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart2 .line.dashed { stroke-dasharray: 5 5; }
.chart2 .tail { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.chart2 .band { fill: var(--c); opacity: 0.3; }
.chart2 .hatch-bg { fill: var(--hatch-bg); } .chart2 .hatch-line { fill: var(--hatch-line); }
.chart2 .hoverband { fill: var(--line); fill-opacity: 0.6; }
.chart2 .cross { stroke: var(--ink); stroke-width: 1; opacity: 0.5; }
.chart2 .pt { fill: var(--c); stroke: var(--tile); stroke-width: 2; }
.chart2 .dlline { fill: none; stroke: var(--faint); stroke-width: 1; }
.ann-layer { position: absolute; inset: 0; pointer-events: none; }
.ann-layer .ev, .ann-layer .dl { position: absolute; font: 500 0.66rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transition: opacity 0.5s 0.15s; white-space: nowrap; }
.ann-layer.on .ev, .ann-layer.on .dl, .ann-layer .ev.on { opacity: 1; }
.ann-layer .ev.end { text-align: right; }
.ann-layer .ev b { display: block; font-weight: 500; color: var(--ink); }
.ann-layer .ev span { display: none; }
.ann-layer .ev a { pointer-events: auto; text-decoration-color: var(--faint); }
.ann-layer .dl { transform: translateY(-50%); display: flex; align-items: center; gap: 0.4rem; color: var(--ink); }
.evline { stroke: var(--faint); stroke-width: 1; }
.evdot { fill: var(--accent); }
.sw { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c); flex: none; }
.t-hatch .sw, .t-hatch.sw { background: repeating-linear-gradient(45deg, var(--hatch-bg) 0 2px, var(--hatch-line) 2px 3px); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--tile-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.5rem 0.65rem; font: 0.72rem/1.4 var(--mono); min-width: 11rem; max-width: 19rem; color: var(--ink); }
.tt-title { font-weight: 600; margin-bottom: 0.3rem; }
.tt-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.5rem; align-items: baseline; }
.tt-row small { grid-column: 2 / 4; color: var(--muted); text-align: right; font-size: 0.66rem; }
.tt-foot { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--line); color: var(--muted); }
.key { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font: 500 0.66rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.key li { display: inline-flex; align-items: center; gap: 0.45rem; }
.chart2.has-dl + .key { display: none; }
.chartfig.short .chart2 { min-height: 150px; }
.tableview, .more { font-size: 0.85rem; }
.tableview { margin-top: 0.6rem; }
.more { margin-top: 1rem; }
.tableview summary, .more summary { cursor: pointer; color: var(--muted); width: max-content; max-width: 100%; padding-block: 0.3rem; list-style: none; font: 500 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.tableview summary::-webkit-details-marker, .more summary::-webkit-details-marker { display: none; }
.tableview summary::before, .more summary::before { content: "+ "; }
.tableview[open] summary::before, .more[open] summary::before { content: "− "; }
.tableview summary:hover, .more summary:hover { color: var(--ink); }
.scroll { overflow-x: auto; max-width: 100%; margin-top: 0.5rem; border-top: 1px solid var(--line-strong); }
.scroll table { border-collapse: collapse; font: 0.74rem var(--mono); min-width: 100%; }
.scroll th, .scroll td { padding: 0.35rem 0.8rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 400; }
.scroll th:first-child, .scroll td:first-child { text-align: left; position: sticky; left: 0; background: var(--tile); padding-left: 0; }
.scroll thead th { font-weight: 600; }
.more[open] > summary { margin-bottom: 0.5rem; }
.more .body { max-width: 44rem; color: var(--muted); }
.more .body p { margin: 0.4rem 0; }
.more .body ul { padding-left: 1.1rem; margin: 0.4rem 0; }
.ch-body, .more, .more .body { min-width: 0; overflow-wrap: anywhere; }

/* who: dot-matrix waffle and the ranking */
.waffle { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.4rem clamp(1.4rem, 3vw, 3rem); align-items: start; }
.wf-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: 100%; max-width: 20rem; aspect-ratio: 1; }
.sq { display: block; background: var(--c); border-radius: 3px; opacity: 1; transition: opacity 0.2s; }
.sq.t-hatch { background: repeating-linear-gradient(45deg, var(--hatch-bg) 0 2px, var(--hatch-line) 2px 3px); box-shadow: inset 0 0 0 1px var(--hatch-line); }
.sq.t-muted { background: var(--c-muted); }
.wf-grid.bygroup .sq { animation: sqin 0.32s ease backwards; animation-delay: calc(var(--g) * 220ms + var(--j) * 6ms); }
@keyframes sqin { from { opacity: 0; transform: scale(0.4); } }
.waffle.dim .sq:not(.hot), .waffle.dim .wf-legend li:not(.hot) { opacity: 0.4; }
.sq.hot { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.wf-legend { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.wf-legend li { display: grid; grid-template-columns: auto 1fr auto; gap: 0 0.7rem; align-items: baseline; padding: 0.5rem 0.4rem; border-top: 1px solid var(--line); cursor: pointer; transition: opacity 0.2s; border-radius: 4px; }
.wf-legend li:last-child { border-bottom: 1px solid var(--line); }
.wf-legend .sw { align-self: center; }
.wf-name { font-weight: 500; } .wf-val { font: 600 0.85rem var(--mono); }
.wf-sub { grid-column: 2 / 4; font: 0.66rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.wf-legend li.hot { background: var(--tile-2); }
.wf-foot { grid-column: 1 / -1; margin: 0; max-width: 44rem; font-size: 0.75rem; color: var(--muted); }
.ranked { display: grid; }
.rk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 8.5rem 4.6rem; gap: 0.15rem 1.4rem; align-items: center; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.rk > * { min-width: 0; }
.rk .who { min-width: 0; }
.rk .nm { display: block; font-weight: 500; line-height: 1.25; }
.rk .acct { display: block; font: 0.68rem var(--mono); color: var(--muted); overflow-wrap: anywhere; margin-top: 0.1rem; }
.rk .track { position: relative; height: 1.1rem; }
.rk .fill { position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; background: var(--c); width: var(--w); border-radius: 2px; }
.rk.play .fill { animation: grow 0.9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes grow { from { width: 0; } }
.rk .fill.t-hatch { background: repeating-linear-gradient(45deg, var(--hatch-bg) 0 3px, var(--hatch-line) 3px 4px); }
.rk .whisk { position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo)); }
.rk.play .whisk { animation: fadein 0.4s 0.7s ease backwards; }
.rk .whisk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.rk .whisk::after { content: ""; position: absolute; left: 0; right: 0; top: 0.25rem; bottom: 0.25rem; border-inline: 1px solid var(--ink); }
.spk { line-height: 0; }
.spark { display: block; overflow: visible; }
.sp-base { stroke: var(--line); stroke-width: 1; fill: none; }
.sp-line { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sp-tail { fill: none; stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 1.5 3; }
.sp-pk { fill: var(--c); }
.spk.t-muted { --c: var(--c-base); }
.rk .val { text-align: right; font: 600 0.95rem var(--mono); }
.rk .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.2rem; font-size: 0.78rem; color: var(--muted); }
.rk .meta > * { min-width: 0; max-width: 100%; }
.rk details { font-size: 0.78rem; overflow-wrap: anywhere; }
.rk details summary { cursor: pointer; color: var(--muted); padding-block: 0.1rem; }
.rk details > div { margin-top: 0.4rem; max-width: 44rem; color: var(--ink); }
.rk details ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.rk details li { margin-bottom: 0.4rem; }
.rk-more { margin-top: 0.4rem; }

/* scenario: "your scenario, live" card */
.live { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(1.4rem, 4vw, 3.5rem); }
.live-title { font: 500 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 var(--text); letter-spacing: -0.035em; margin: 0.5rem 0 1.6rem; }
.sliders { display: grid; gap: 1.5rem; }
.sl label { display: flex; justify-content: space-between; gap: 1rem; font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.sl output { font: 600 0.85rem var(--mono); letter-spacing: 0; color: var(--ink); text-transform: none; }
.sl output.acc { color: var(--accent-text); }
.sl label.check { justify-content: flex-start; margin: 0; }
.sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.4rem; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.sl input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--line-strong); background: linear-gradient(90deg, var(--accent) var(--p), var(--line-strong) var(--p)); }
.sl input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line-strong); }
.sl input[type=range]::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--accent); }
.sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--ink); border: 4px solid var(--tile); box-shadow: 0 0 0 1px var(--accent); }
.sl input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 4px solid var(--tile); box-shadow: 0 0 0 1px var(--accent); }
.sl input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.live-result .ap { color: inherit; }
.live-result { margin: 0; font: 700 clamp(2rem, 4vw, 3.4rem)/1 var(--dots); color: var(--accent-text); letter-spacing: 0.01em; text-align: right; }
.live-sub { text-align: right; margin: 0.6rem 0 1rem; }

/* proof: case files */
.cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case { grid-column: span 1; display: flex; flex-direction: column; gap: 0.8rem; }
.case .status { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.case .status i { width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; }
.case h3 { font-size: 1.2rem; }
.case ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font: 0.74rem/1.45 var(--mono); color: var(--muted); }
.case ul li::before { content: "› "; color: var(--accent-text); }
.case .count { margin-top: auto; padding-top: 0.8rem; border-top: 1px dashed var(--line-strong); display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.case .count b { font: 700 2.6rem/1 var(--dots); }
.view { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.view li strong:first-child { display: block; color: var(--ink); }

/* verify */
.verify-tile { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.vbtn { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 10px; padding: 0.85rem 1.3rem; font: 500 0.95rem var(--text); cursor: pointer; }
.vbtn::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.vbtn:hover { opacity: 0.88; }
.vbtn[disabled] { opacity: 0.5; cursor: progress; }
.vresult { min-height: 1.5rem; }
.vcase { border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.9rem 1rem; background: var(--tile-2); }
.vcase .ch-line { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.vcase .flag { font: 600 0.62rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; padding: 0.12rem 0.45rem; }
.vcase .flag.ok { background: var(--bridge-dark); color: #fff; } .vcase .flag.bad { background: var(--accent); color: var(--on-accent); }
.vresult table { border-collapse: collapse; width: 100%; font: 0.74rem var(--mono); }
.vresult th, .vresult td { text-align: left; padding: 0.5rem 0.8rem 0.5rem 0; border-top: 1px dashed var(--line-strong); font-weight: 400; vertical-align: top; overflow-wrap: anywhere; }
.vresult thead th { border-top: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; }
.vresult tbody th { color: var(--muted); width: 9rem; }
.vresult .ok { color: var(--bridge-light); font-weight: 600; } .vresult .bad { color: var(--accent-text); font-weight: 600; }
:root[data-theme="light"] .vresult .ok { color: var(--bridge-dark); }
.vresult p { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* re-run */
.step { grid-column: span 6; }
.step .cmd { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.step code { font-size: 0.9rem; color: var(--ink); overflow-x: auto; white-space: pre; }
.step button { flex: none; background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.15rem 0.7rem; font: 500 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.step button:hover { color: var(--ink); border-color: var(--ink); }
.step p { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.85rem; }
.honest { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 52rem; overflow-wrap: anywhere; }
.honest details { border-top: 1px solid var(--line); padding: 0.8rem 0; }
.honest details:last-child { border-bottom: 1px solid var(--line); }
.honest summary { cursor: pointer; font: 500 1rem/1.35 var(--text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); }
.honest summary::-webkit-details-marker { display: none; }
.honest summary::after { content: "+"; font-family: var(--mono); color: var(--muted); }
.honest details[open] summary::after { content: "−"; }
.honest .body { margin-top: 0.7rem; font-size: 0.92rem; color: var(--muted); }
.honest ul { padding-left: 1.2rem; }
.honest li { margin-bottom: 0.5rem; }
.families { display: grid; gap: 0.45rem; max-width: 36rem; }
.families .row { display: grid; grid-template-columns: 7rem 1fr 8rem; align-items: center; gap: 0.8rem; font: 0.74rem var(--mono); }
.families .bar { height: 0.4rem; background: var(--line); position: relative; border-radius: 2px; }
.families .bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 2px; }
.families .row span:last-child { text-align: right; }
.foot { margin-top: clamp(2rem, 5vw, 4rem); padding-block: 1.4rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font: 0.7rem/1.6 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; }

/* tiles reveal on scroll: hidden only while still below the fold (class set by JS), never otherwise */
.js [data-reveal] { transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal].pending { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].pending { opacity: 1; transform: none; transition: none; }
  .wf-grid.bygroup .sq, .rk.play .fill, .rk.play .whisk, .rk.play .sp-line, .dotcols.settle .col, .ann-layer.on .ev, .tile.accent.sweep::before, .tile.accent.sweep > *, .cases.deal .case, .cases.deal .g-now, .scenario-form.nudge input, .sliders.nudge input[type=range], .pulse, .statusline .pip, .pulse-soft, .intro .casecard .row, .intro .casecard, .card-lead, .typing::after, .vlog li.wait::after, .stamp, .tick, tr.filled td, .lines-in .li { animation: none !important; }
  .tile::after { display: none; }
  .tile, .tile:hover { transition: border-color 0.2s; background: var(--tile); }
  .ann-layer .ev, .ann-layer .dl, .js[data-ready] main, .dtag { transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .span-8, .span-4 { grid-column: span 12; }
  .tile.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.stack > * + * { border-top: 0; border-left: 1px solid var(--line); }
  .tile.stack > .tableview { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live, .verify-tile { grid-template-columns: minmax(0, 1fr); }
  .live-result, .live-sub { text-align: left; }
}
@media (max-width: 640px) {
  .waffle { grid-template-columns: minmax(0, 1fr); }
  .wf-grid { max-width: 18rem; }
  .tile.stack { display: flex; }
  .tile.stack > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  .steps3 li, .steps3 li:first-child { border-left: 0; padding: 0.9rem 0; border-top: 1px solid var(--line); }
  .steps3 li:first-child { border-top: 0; padding-top: 0; }
  .step { grid-column: span 12; }
  .rk { grid-template-columns: minmax(0, 1fr) 4.4rem; }
  .rk .track { grid-column: 1 / -1; order: 3; }
  .rk .spk { grid-column: 1 / -1; order: 4; }
  .rk .spk .spark { width: 100%; height: 30px; }
  .rk .val { order: 2; }
  .rk .meta { order: 5; }
  .families .row { grid-template-columns: 5.5rem 1fr 6.4rem; }
  .statusline { font-size: 0.6rem; }
  .casecard { position: static; width: 100%; margin-top: 1rem; }
  .counters dd { font-size: 1.7rem; }
}
@media print { .top, .controls, .sliders { display: none; } .js main, .js .foot { opacity: 1; } .js [data-reveal].pending { opacity: 1; } }


/* ===================================================================== round 2 additions */
/* global: tile hover — lighter tile, stronger border with a thin accent edge, a soft light spot under the pointer */
.tile { position: relative; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.06), transparent 70%); }
:root[data-theme="light"] .tile::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.7), transparent 70%); }
.tile:hover, .tile.touched { background: var(--tile-2); border-color: var(--line-strong); box-shadow: inset 0 1px 0 var(--accent); }
.tile:hover::after, .tile.touched::after { opacity: 1; }
.tile.accent:hover, .tile.accent.touched { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.tile > * { position: relative; z-index: 1; }

/* global: text motion */
.lines-in .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lines-in .li { display: block; animation: lineup 0.65s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--l) * 90ms); }
@keyframes lineup { from { transform: translateY(105%); } }
.typing::after { content: "▌"; margin-left: 0.1em; color: var(--accent-text); animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.statusline .pip { animation: pip 2.4s ease-in-out infinite; }
@keyframes pip { 50% { opacity: 0.35; transform: scale(0.8); } }
.pulse-soft { animation: soft 2.8s ease-in-out infinite; }
@keyframes soft { 50% { opacity: 0.72; } }

/* hero: dot-matrix columns */
.dotcols { position: relative; width: 100%; }
.dotcols svg { display: block; overflow: visible; }
.dc { fill: var(--c); }
.dc.t-muted { fill: var(--c-base); }
.dc.hollow { fill: none; stroke: var(--hatch-line); stroke-width: 1.2; }
.dc.off { fill: var(--dotoff); }
.col.partial .dc:not(.off) { opacity: 0.45; }
.dotcols .xt { fill: var(--muted); font: 0.62rem var(--mono); letter-spacing: 0.06em; }
.dotcols.settle .col { animation: colin 0.55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--c) * 45ms + 120ms); }
@keyframes colin { from { opacity: 0; transform: translateY(8px); } }
.hero-field .casecard { top: 0; left: 0; right: auto; }
.card-lead { position: absolute; z-index: 1; pointer-events: none; }
.card-lead svg { display: block; overflow: visible; }
.card-lead path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 4; }
.card-lead circle { fill: var(--accent); }
.intro .card-lead { animation: fadein 0.6s ease backwards; animation-delay: 1.6s; }
.intro .casecard { animation: fadein 0.5s ease backwards; animation-delay: 1.1s; }
.intro .casecard .row { animation: fadein 0.35s ease backwards; }
.intro .casecard .row:nth-child(1) { animation-delay: 1.35s; } .intro .casecard .row:nth-child(2) { animation-delay: 1.5s; }
.intro .casecard .row:nth-child(3) { animation-delay: 1.65s; } .intro .casecard .row:nth-child(4) { animation-delay: 1.8s; }
.casecard dl .row { display: contents; }
.hero-key { margin-top: 0.8rem; }
.hero-key .unit { color: var(--ink); }

/* charts: drop-in markers, extra tones, hatched "not known" band, low-volume veil, crossover pulse */
.ann-layer.on .ev { animation: drop 0.45s cubic-bezier(.2,.8,.2,1.2) backwards; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
.t-relay { --c: #c9cfd5; } :root[data-theme="light"] .t-relay { --c: #3f464d; }
.t-ghost { --c: var(--c-base); }
.chart2 .bar.t-ghost { fill-opacity: 0.28; stroke: var(--c-base); stroke-width: 1; stroke-dasharray: 2 2; }
.t-ghost .sw, .t-ghost.sw { background: transparent; border: 1px dashed var(--c-base); }
.t-trend { --c: var(--ink); }
.chart2 .line.t-trend { stroke-width: 1.2; opacity: 0.7; }
.chart2 .band.hatched { opacity: 1; }
.hatch-light { fill: var(--faint); opacity: 0.55; }
.t-unknown .sw, .t-unknown.sw { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--faint) 3px 4px); border: 1px solid var(--line-strong); }
.chart2 .shade-edge { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.chart2 .dim { opacity: 0.35; }
.shade-label, .area-label { position: absolute; font: 500 0.6rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.area-label { transform: translate(-50%, -50%); color: var(--ink); background: var(--tile); padding: 0.05rem 0.3rem; border-radius: 3px; }
.chart2 .pulse { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 1.1s ease-out 1 both; }
@keyframes ring { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0.85; transform: scale(1); } }

/* who: account ids, ranking motion and hover */
.acct-short { position: relative; cursor: help; outline-offset: 2px; }
.acct-full { display: none; position: absolute; left: 0; top: 100%; z-index: 6; margin-top: 4px; white-space: nowrap; background: var(--tile-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.2rem 0.45rem; color: var(--ink); }
.acct-short:hover .acct-full, .acct-short:focus .acct-full { display: block; }
.sp-line { stroke-dasharray: 1; }
.rk.play .sp-line { animation: draw 0.9s ease backwards; animation-delay: calc(var(--i, 0) * 110ms + 0.3s); }
@keyframes draw { from { stroke-dashoffset: 1; } }
.ranked .rk { transition: opacity 0.2s ease; }
.ranked:hover .rk:not(:hover) { opacity: 0.55; }
.rk:hover .fill { filter: brightness(1.2) saturate(1.1); }
.rk:hover .whisk::before { height: 2px; } .rk:hover .whisk::after { border-inline-width: 2px; }

/* boom: scroll-driven scene (desktop); a plain list otherwise */
.scene { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 12px; align-items: start; }
.scene-steps { display: grid; gap: 12px; }
.scroll-scene .scene-chart { position: sticky; top: 4.4rem; }
.scroll-scene .steps3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.scroll-scene .step-card { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile); padding: 1.3rem; opacity: 0.45; transition: opacity 0.3s ease, border-color 0.3s ease; }
.scroll-scene .step-card.on { opacity: 1; border-color: var(--line-strong); }
.scroll-scene .step-card:last-child { margin-bottom: 20vh; }
.scene .steps3 { grid-template-columns: minmax(0, 1fr); }
.scene .steps3 li { border-left: 0; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.scroll-scene .steps3 li, .scroll-scene .steps3 li:first-child { border-top: 1px solid var(--line); padding: 1.3rem; }
.step-card.on .st i { background: var(--accent); }
.stepcount { color: var(--accent-text); font-family: var(--mono); display: inline-block; min-width: 4.2em; font-variant-numeric: tabular-nums; }
/* the orange tile: the number flips first, then the coral sweeps in from the bottom */
.tile.accent { overflow: hidden; }
.tile.accent::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: bottom; z-index: 0; }
.tile.accent.sweep { animation: tileback 1.3s ease backwards; }
.tile.accent.sweep::before { animation: sweepup 0.6s cubic-bezier(.3,.7,.2,1) 0.7s backwards; }
.tile.accent.sweep > * { animation: inkback 0.6s ease 0.7s backwards; }
@keyframes tileback { from { background-color: var(--tile); border-color: var(--line); } }
@keyframes sweepup { from { transform: scaleY(0); } }
@keyframes inkback { from { color: var(--ink); } }

/* scenario: presets, bipolar slider, nudge */
.sl-ends { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.58rem; }
.sl.bipolar input[type=range]::-webkit-slider-runnable-track { background: var(--line-strong); background: linear-gradient(90deg, var(--line-strong) var(--a, 50%), var(--accent) var(--a, 50%), var(--accent) var(--b, 50%), var(--line-strong) var(--b, 50%)); }
.sl.bipolar input[type=range]::-moz-range-progress { background: var(--accent); } /* Firefox: a plain fill from the left (no centre fill there) */
.sl.bipolar { position: relative; }
.sliders.nudge input[type=range] { animation: nudge 0.9s ease 1; }
@keyframes nudge { 30% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.presets { margin-top: 1.6rem; }
.preset-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 0.6rem; }
.preset { text-align: left; background: var(--tile-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.7rem; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.preset b { display: block; font: 500 0.9rem var(--text); }
.preset span { display: block; font: 0.62rem/1.35 var(--mono); color: var(--muted); margin-top: 0.2rem; }
.preset:hover { border-color: var(--line-strong); }
.preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* proof: one countdown, gauges, cards deal in */
.countdown { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.2rem; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile); }
.countdown .cd { display: flex; align-items: baseline; gap: 0.8rem; margin: 0; }
.countdown .bignum { margin: 0; }
.gauges { margin-top: auto; padding-top: 0.8rem; border-top: 1px dashed var(--line-strong); display: grid; gap: 0.8rem; }
.gauge .g-txt { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.35rem; font: 0.66rem var(--mono); color: var(--muted); }
.gauge .g-txt span:first-child { color: var(--ink); }
.g-bar { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.g-zone { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: repeating-linear-gradient(45deg, transparent 0 3px, var(--accent) 3px 4px); opacity: 0.45; }
.g-zone.left { left: 0; width: var(--t); } .g-zone.right { left: var(--t); right: 0; }
.g-thr { position: absolute; top: -3px; bottom: -3px; left: var(--t); width: 2px; background: var(--accent); }
.g-now { position: absolute; top: 50%; left: var(--v); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--tile); }
.cases.deal .case { animation: deal 0.5s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--d) * 140ms); }
.cases.deal .g-now { animation: slide 0.9s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: calc(var(--d) * 140ms + 0.4s); }
@keyframes deal { from { opacity: 0; transform: translateY(14px) rotate(-0.6deg); } }
@keyframes slide { from { left: 0; } }

/* verify: live log, skeleton, filled rows, stamp */
.vlog { list-style: none; margin: 1rem 0 0; padding: 0; font: 0.74rem/1.6 var(--mono); color: var(--muted); min-height: 5.5em; overflow-wrap: anywhere; }
.vlog li.wait::after { content: "▌"; margin-left: 0.2em; color: var(--accent-text); animation: blink 0.8s steps(1) infinite; }
.vcount { margin-top: 0.6rem; }
.vcase .flag.idle { border: 1px dashed var(--line-strong); color: var(--muted); }
.vcase.fading { opacity: 0.25; transition: opacity 0.2s; }
tr.filled td { animation: fadein 0.3s ease backwards; }
.tick { display: inline-block; animation: tick 0.35s cubic-bezier(.2,.8,.2,1.4) backwards 0.1s; }
@keyframes tick { from { transform: scale(0); } }
.stamp { animation: stamp 0.45s cubic-bezier(.2,.8,.2,1.3) backwards; }
@keyframes stamp { from { transform: scale(1.8) rotate(-6deg); opacity: 0; } }

/* re-run: the "+" field, expected output lines, copied state */
.rerun { position: relative; }
.has-field { position: relative; isolation: isolate; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.step .expect { margin: 0.6rem 0 0; color: var(--bridge-light); font-size: 0.76rem; overflow-wrap: anywhere; }
:root[data-theme="light"] .step .expect { color: var(--bridge-dark); }
.step.first { grid-column: span 12; }
.step button.done { color: var(--bridge-light); border-color: var(--bridge-dark); }
@media (max-width: 1000px) {
  .scene { grid-template-columns: minmax(0, 1fr); }
  .preset-row { grid-template-columns: minmax(0, 1fr); }
}
.scene-steps > *, .scroll-scene .steps3 { width: 100%; min-width: 0; }

.gh { flex: none; font: 500 0.68rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.gh:hover { color: var(--ink); }
.xcheck { margin: 0.9rem 0 0; font-size: 0.85rem; }
.case .note { margin: 0; font-size: 0.78rem; }