/* Amphigents: machine-readable field. Two inks only. Frogs are the single source of colour. */

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/MartianMono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --k: #000;
  --w: #fff;
  --pad: clamp(16px, 2.2vw, 32px);
  --bar-h: 56px;
  --f: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 0.6875rem;
  --t-s: 0.8125rem;
  --t-m: 1rem;
  --t-xl: clamp(1.9rem, 4.6vw, 4rem);
  --t-d: min(13.2vw, 19svh);
  --fs: 10; /* frog scale: whole multiples of the 32px grid only */
  --gap-sec: clamp(88px, 11vw, 168px);
  /* 1px checkerboard: the only "mid tone" this world has */
  --dither: repeating-conic-gradient(var(--w) 0 25%, transparent 0 50%) 0 0 / 2px 2px;
  /* irregular barcode ticks, drawn in the current ink */
  --ticks: linear-gradient(90deg,
    currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px,
    currentColor 8px 11px, transparent 11px 12px, currentColor 12px 13px, transparent 13px 16px,
    currentColor 16px 18px, transparent 18px 19px, currentColor 19px 20px, transparent 20px 23px,
    currentColor 23px 26px, transparent 26px 27px, currentColor 27px 28px);
  color-scheme: dark;
}

.inv { --k: #fff; --w: #000; color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: #000;
  scrollbar-color: #fff #000;
  scrollbar-width: thin;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
html.flash { filter: invert(1); }

body {
  margin: 0;
  background: var(--k);
  color: var(--w);
  font-family: var(--f);
  font-size: var(--t-s);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

::selection { background: var(--w); color: var(--k); }
.inv ::selection, .inv::selection { background: #000; color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #fff; border: 3px solid #000; }

:focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
b, strong { font-weight: 700; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; image-rendering: pixelated; }
canvas { display: block; }
code { font: inherit; }
button, input { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: 0; }

.skip { position: absolute; left: var(--pad); top: -80px; z-index: 50; background: var(--w); color: var(--k); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 8px; }

/* Running sentences are set in sentence case: caps are for labels, headings and controls. */
.offer, .sec-head p, .station > p, .note, .ch-list label, .ch-result, .foot p span + span {
  text-transform: none; letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--pad);
  background: var(--k);
  border-bottom: 1px solid var(--w);
}
.mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 800; font-stretch: 112.5%; letter-spacing: 0.14em; text-decoration: none; font-size: var(--t-s);
  min-height: 44px;
}
.ticks { display: block; width: 28px; height: 20px; background: var(--ticks); }
.telemetry { display: flex; gap: 28px; margin-right: auto; font-size: var(--t-xs); line-height: 1.35; }
.telemetry dt { font-weight: 300; }
.telemetry dd { font-weight: 700; }
.bar nav { display: flex; align-items: stretch; height: 100%; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; }
.bar nav a {
  display: flex; align-items: center; padding: 0 14px; text-decoration: none;
  border-left: 1px solid var(--w);
}
.bar nav a:last-child { border-right: 1px solid var(--w); }
.bar nav a:hover, .bar nav a[aria-current="true"] { background: var(--w); color: var(--k); }
.bar nav a:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 0 16px;
  border: 1px solid var(--w); background: var(--k); color: var(--w);
  font-size: var(--t-s); font-weight: 700; letter-spacing: 0.12em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.btn::before, .btn::after { content: ""; flex: none; width: 28px; height: 18px; background: var(--ticks); }
.btn::after { transform: scaleX(-1); }
.btn.primary { background: var(--w); color: var(--k); }
.btn:hover { background: var(--w); color: var(--k); }
.btn.primary:hover { background: var(--k); color: var(--w); }
.btn:hover::before, .btn:hover::after { animation: tick 0.48s steps(4) infinite; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[disabled]:hover { background: var(--k); color: var(--w); border-style: dashed; font-weight: 300; cursor: not-allowed; }
.btn[disabled]::before, .btn[disabled]::after { visibility: hidden; }
@keyframes tick { to { background-position: 28px 0; } }

/* ------------------------------------------------------------------ hero */
.hero {
  min-height: calc(100svh - var(--bar-h));
  display: grid; grid-template-rows: auto 1fr auto auto;
}
.tape { width: 100%; height: 80px; border-bottom: 1px solid var(--w); cursor: ew-resize; touch-action: pan-y; }
.tape:focus-visible { outline-offset: -4px; }
.tape-low { height: 40px; border-bottom: 0; border-top: 1px solid var(--w); cursor: default; }
.tape-foot { height: 56px; cursor: default; }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px);
  align-items: end;
  padding: clamp(20px, 3.2svh, 40px) var(--pad);
}
h1 {
  font-size: var(--t-d);
  font-weight: 800; font-stretch: 75%;
  line-height: 0.84; letter-spacing: -0.02em;
  margin-left: -0.04em;
}
.offer { max-width: 60ch; margin-top: clamp(16px, 2.6svh, 28px); font-size: var(--t-s); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 2.6svh, 28px); }

/* hero background: the 1-bit frog world (pixel scene x3, seamless 14.4 s loop) */
.hero-grid { position: relative; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; image-rendering: pixelated; display: block; }
/* a soft fade on the left edge only, so the white ripple lines don't cut through the copy */
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,0) 60%); }
/* text sits straight on the video; a tight black halo keeps it legible over the white ripple dashes */
.pitch h1, .pitch .offer { text-shadow: 0 0 2px #000, 0 0 6px #000, 0 0 14px #000; }
/* headline takes the Pond frog green from the collection palette (frogs carry the colour) */
.pitch h1 { color: #6cc24a; }
.offer { font-size: var(--t-m); line-height: 1.65; }
.offer b { font-weight: 800; }
.pitch .offer { text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 6px #000, 0 0 10px #000, 0 0 18px #000, 0 0 28px #000; }
.offer .hl { color: #6cc24a; }
.offer .hl-burn { color: #ff5c8a; }

.scan { border: 1px solid var(--w); display: grid; align-self: end; background: var(--k); }
.scan-head, .scan-foot {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px;
  font-size: var(--t-xs); font-weight: 300; line-height: 1.4;
}
.scan-head b, .scan-foot b { font-weight: 700; }
.scan-head { border-bottom: 1px solid var(--w); }
.scan-foot { border-top: 1px solid var(--w); }
.scan-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.scan-frog { border-right: 1px solid var(--w); background: var(--k); line-height: 0; }
/* frogs are ASCII art (text glyphs): scale smoothly, never pixelated */
.scan-frog img { width: calc(32px * var(--fs)); height: auto; aspect-ratio: 1; image-rendering: auto; }
.scan-traits { width: 100%; min-width: 264px; height: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.scan-traits tr + tr { border-top: 1px solid var(--w); }
.scan-traits th { text-align: left; font-weight: 300; padding: 0 12px; white-space: nowrap; }
.scan-traits td { text-align: right; font-weight: 700; padding: 0 12px; white-space: nowrap; }
.scan-wave { width: 100%; height: clamp(56px, 9svh, 88px); border-top: 1px solid var(--w); }

.status {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--w);
}
.status > div { padding: 12px var(--pad); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.status > div + div { border-left: 1px solid var(--w); }
.status dt { font-size: var(--t-xs); font-weight: 300; }
.status dd { font-size: var(--t-m); font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------------ sections */
.sec { padding: var(--gap-sec) var(--pad) 0; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px);
  align-items: end; padding-bottom: clamp(28px, 4vw, 56px);
}
h2 {
  font-size: var(--t-xl); font-weight: 800; font-stretch: 75%;
  line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; max-width: 16ch;
}
.sec-head p { max-width: 58ch; line-height: 1.75; }
.note { margin-top: 20px; font-size: var(--t-s); font-weight: 400; max-width: 80ch; text-wrap: pretty; }

/* ------------------------------------------------------------------ how to mint */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--w); }
.steps li { padding: 20px 18px 24px; display: grid; align-content: start; gap: 12px; }
.steps li + li { border-left: 1px solid var(--w); }
.step-n { font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; font-stretch: 75%; line-height: 0.9; letter-spacing: -0.02em; }
.steps h3 { font-size: var(--t-m); letter-spacing: 0.06em; }
.steps p { text-transform: none; letter-spacing: 0.01em; line-height: 1.7; max-width: 38ch; }
.steps a { font-weight: 700; }
.steps li:last-child { background: var(--w); color: var(--k); }
.try-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: end;
  padding: clamp(48px, 6vw, 88px) 0 20px; }
.try-head p { text-transform: none; letter-spacing: 0.01em; line-height: 1.7; max-width: 58ch; }

/* ------------------------------------------------------------------ challenge */
.challenge { border: 1px solid var(--w); }
.ch-meter {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--w); font-size: var(--t-xs);
}
.ch-meter b { font-weight: 700; }
.ch-bar { display: block; height: 18px; background: var(--dither); }
.ch-bar i { display: block; height: 100%; width: 100%; background: var(--w); transform-origin: left; }
.ch-list li {
  display: grid; grid-template-columns: 56px minmax(0, 7fr) minmax(0, 5fr); align-items: stretch;
  border-bottom: 1px solid var(--w); counter-increment: q;
}
.ch-list { counter-reset: q; }
.ch-list li::before {
  content: "Q" counter(q); display: grid; place-items: center; font-weight: 700; border-right: 1px solid var(--w);
}
.ch-list label { padding: 18px 16px; font-size: var(--t-m); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.ch-list input {
  width: 100%; min-height: 60px; padding: 0 16px; background: var(--k); border: 0; border-left: 1px solid var(--w);
  font-size: var(--t-m); font-weight: 700; caret-color: var(--w); text-transform: none; letter-spacing: 0.06em;
}
.ch-list input::placeholder { color: var(--w); font-weight: 300; text-transform: uppercase; }
.ch-list input:focus { outline: 0; background: var(--w); color: var(--k); caret-color: var(--k); }
.ch-list input:focus::placeholder { color: var(--k); }
.ch-list input[disabled] { font-weight: 300; border-left-style: dashed; cursor: not-allowed; }
.ch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.ch-result { flex: 1 1 28ch; font-size: var(--t-s); line-height: 1.6; margin-left: 4px; text-wrap: pretty; }
.sec-head p, .try-head p, .offer, .steps p { text-wrap: pretty; }
.ch-result[data-state="ok"], .ch-result[data-state="bad"] { font-size: var(--t-s); font-weight: 700; }

/* ------------------------------------------------------------------ protocol */
.strip { width: 100%; height: 64px; border: 1px solid var(--w); border-bottom: 0; }
.stations { border: 1px solid var(--w); }
.station {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 7fr); gap: 0;
  align-items: stretch;
}
.station + .station { border-top: 1px solid var(--w); }
.st-id { padding: 20px 16px; display: flex; gap: 14px; align-items: baseline; border-right: 1px solid var(--w); }
.st-n { font-weight: 300; }
h3 { font-size: var(--t-m); font-weight: 800; font-stretch: 100%; letter-spacing: 0.1em; }
.station > p { padding: 20px 16px; line-height: 1.7; max-width: 44ch; }
.run {
  margin: 0; padding: 20px 16px; border-left: 1px solid var(--w);
  font-family: var(--f); font-size: var(--t-xs); line-height: 1.9; letter-spacing: 0.02em;
  text-transform: none; white-space: pre; overflow-x: auto; font-weight: 300;
}
.run .cmd { font-weight: 800; }
.station.on .st-id { background: var(--w); color: var(--k); }
.station.on .run { background: var(--w); color: var(--k); font-weight: 500; }
.run:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ specimens */
.readout {
  display: flex; flex-wrap: wrap; gap: 0; min-height: 42px;
  border: 1px solid var(--w); border-bottom: 0; font-size: var(--t-xs);
}
.readout span { padding: 11px 14px; border-right: 1px solid var(--w); white-space: nowrap; }
.readout span b { font-weight: 700; margin-left: 8px; }
.readout .one { background: var(--w); color: var(--k); font-weight: 800; }
.grid {
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 1px;
  background: var(--w); border: 1px solid var(--w);
}
.cell { display: block; padding: 0; border: 0; background: #000; cursor: crosshair; line-height: 0; position: relative; }
.cell img { width: 100%; height: auto; aspect-ratio: 1; image-rendering: auto; filter: grayscale(1) brightness(2.4) contrast(1.5); }
.cell.on img { filter: none; }
.cell.on { z-index: 1; outline: 3px solid #fff; outline-offset: 0; }
.cell:focus-visible { z-index: 2; outline: 3px solid #fff; outline-offset: 0; }

/* ------------------------------------------------------------------ ledger */
.ledger-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.matrix-wrap { border: 1px solid var(--w); }
.matrix { width: 100%; height: auto; aspect-ratio: 101 / 66; }
.legend { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--w); font-size: var(--t-xs); }
.lg-open, .lg-full { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--w); }
.lg-open { background: var(--dither); }
.lg-full { background: var(--w); margin-left: 12px; }
.lg-src { margin-left: auto; font-weight: 700; text-align: right; }
.feed table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); border: 1px solid var(--w); }
caption { text-align: left; font-weight: 800; letter-spacing: 0.12em; padding: 0 0 10px; font-size: var(--t-xs); }
.feed th, .feed td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--w); white-space: nowrap; }
.feed th { font-weight: 300; }
.feed td { font-weight: 600; }
.feed .num { text-align: right; }
.feed tr.empty td { padding: 40px 12px; font-weight: 300; white-space: normal; }
.feed tr.new td { background: var(--w); color: var(--k); }
.lg-stats { margin-top: 24px; font-size: var(--t-s); }
.lg-stats div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--w); }
.lg-stats div:first-child { border-top: 1px solid var(--w); }
.lg-stats dt { font-weight: 300; }
.lg-stats dd { font-weight: 700; }

/* ------------------------------------------------------------------ setup (inverted) */
.closer { background: var(--k); color: var(--w); margin-top: var(--gap-sec); padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.closer .actions { margin-top: 0; }
.setup-block { padding-top: clamp(48px, 6vw, 88px); }
.setup-block .try-head { padding-top: 0; }
.prelaunch-tag { color: #ff5c8a; font-weight: 800; }
/* hero: honest state + phone path */
.state-line { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: var(--t-s); text-transform: none; letter-spacing: 0.01em; text-shadow: 0 0 2px #000, 0 0 8px #000; }
.state-line .dot { width: 10px; height: 10px; flex: none; background: #ff5c8a; animation: blink 1.2s steps(2) infinite; }
.state-line.live .dot { background: #6cc24a; }
@keyframes blink { 50% { opacity: 0; } }
.phone-note { display: none; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.kit { border: 1px solid var(--w); min-width: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--w); }
.tabs button {
  flex: 1; min-height: 48px; padding: 0 12px; background: var(--k); border: 0; border-right: 1px solid var(--w);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; cursor: pointer;
}
.tabs button:last-child { border-right: 0; }
.tabs button[aria-selected="true"] { background: var(--w); color: var(--k); }
.tabs button:hover { background: var(--w); color: var(--k); }
.tabs button:focus-visible { outline-offset: -4px; }
.pane {
  margin: 0; padding: 20px 16px; min-height: 248px; max-height: 420px; overflow: auto;
  font-family: var(--f); font-size: var(--t-s); line-height: 1.8; letter-spacing: 0.01em;
  text-transform: none; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400;
}
.pane:focus-visible { outline-offset: -4px; }
.kit-actions { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--w); }
.copy-status { font-size: var(--t-xs); font-weight: 700; }
.facts { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.facts tr { border-bottom: 1px solid var(--w); }
.facts tr:first-child { border-top: 1px solid var(--w); }
.facts th { text-align: left; font-weight: 300; padding: 11px 0; }
.facts td { text-align: right; font-weight: 700; padding: 11px 0; }

.foot { background: var(--k); color: var(--w); }
.foot p {
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: space-between;
  padding: 20px var(--pad) 28px; font-size: var(--t-xs);
}
.foot p span:first-child { font-weight: 800; font-stretch: 112.5%; letter-spacing: 0.14em; }
.foot a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ narrower */
@media (min-width: 1600px) and (min-height: 1000px) { :root { --fs: 12; } }
@media (max-height: 800px) and (min-width: 821px) { :root { --fs: 8; } }

@media (max-width: 1100px) {
  :root { --fs: 8; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--w); }
  .scan-traits { min-width: 220px; }
  .telemetry div:nth-child(3) { display: none; }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .station { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .station > p { grid-column: 2; grid-row: 1; }
  .st-id { grid-row: 1 / span 2; }
  .station .run { grid-column: 2; border-left: 0; border-top: 1px solid var(--w); }
}

@media (max-width: 820px) {
  :root { --t-d: 25.6vw; --bar-h: 52px; --fs: 5; }
  .scan-traits { min-width: 0; }
  .telemetry { display: none; }
  .bar { justify-content: space-between; gap: 12px; }
  .bar nav a { display: none; }
  .bar nav a.nav-setup { display: flex; border-right: 1px solid var(--w); }
  .tape { height: 64px; }
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 28px; padding-bottom: 28px; }
  /* phone: the frog world sits on top as a full-width band, the pitch reads below it */
  .hero-media { position: relative; inset: auto; z-index: auto; height: 66vw; margin: -28px calc(-1 * var(--pad)) 8px; }
  .hero-media video { object-position: 78% 70%; }
  .hero-media::after { display: none; }
  .pitch { background: none; padding: 0; margin-left: 0; }
  h1 { line-height: 0.86; }
  .actions .btn { flex: 1 1 100%; }
  .scan-traits th, .scan-traits td { padding: 0 10px; }
  .status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status > div { border-left: 0 !important; border-bottom: 1px solid var(--w); padding-block: 10px; }
  .status > div:nth-child(even) { border-left: 1px solid var(--w) !important; }
  .status > div:first-child { grid-column: 1 / -1; }
  .status > div:nth-child(2), .status > div:nth-child(4) { border-left: 0 !important; }
  .status > div:nth-child(3), .status > div:nth-child(5) { border-left: 1px solid var(--w) !important; }
  .status > div:nth-child(n+4) { border-bottom: 0; }
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li + li { border-left: 0; border-top: 1px solid var(--w); }
  .steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .steps li .step-n { grid-row: 1 / span 2; font-size: 2.6rem; }
  .try-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ch-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .ch-list li::before { grid-row: 1 / span 2; }
  .ch-list input { grid-column: 2; border-left: 0; border-top: 1px solid var(--w); }
  .ch-actions .btn { flex: 1 1 100%; }
  .station { grid-template-columns: minmax(0, 1fr); }
  .st-id { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--w); padding: 14px 16px; }
  .station > p { grid-column: 1; grid-row: auto; padding: 16px; }
  .station .run { grid-column: 1; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .readout { min-height: 76px; }
  .ledger-grid, .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .phone-note { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--w); }
  .phone-note p { text-transform: none; letter-spacing: 0.01em; font-size: var(--t-s); }
  .phone-note .btn { width: 100%; }
  /* phone first screen: keep offer + button in view */
  .hero-media { height: 46vw; }
  :root { --t-d: 17vw; }
  .offer { font-size: var(--t-s); line-height: 1.6; margin-top: 14px; }
  .state-line { font-size: var(--t-xs); margin-top: 10px; }
  .actions { margin-top: 14px; gap: 10px; }
  .feed th:nth-child(4), .feed td:nth-child(4) { display: none; }
  .tabs button { padding: 0 6px; letter-spacing: 0.06em; }
  .pane { font-size: var(--t-xs); }
}

@media (max-width: 420px) {
  .scan-body { grid-template-columns: minmax(0, 1fr); }
  .scan-frog { border-right: 0; border-bottom: 1px solid var(--w); display: grid; place-items: center; }
  .scan-frog { --fs: 6; }
  .scan-traits tr { height: 34px; }
  .scan-head span:last-child, .scan-foot span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::before, .btn:hover::after { animation: none; }
  html.flash { filter: none; }
}