/* Palette taken from the logo: black hexagon, violet → cyan rim. System fonts only, so the page loads nothing third-party. */
:root {
  --void: #000;
  --surface: #0f0f14;
  --surface-2: #17171f;
  --rim: rgba(255, 255, 255, 0.09);
  --rim-strong: rgba(255, 255, 255, 0.2);
  --text: #f1eff6;
  --muted: #9a98a8;
  --violet: #bb3bfa;
  --cyan: #14cafc;
  --ok: #3ddc97;
  --warn: #f5b700;
  --bad: #ff5c6c;
  --grad: linear-gradient(90deg, var(--violet), var(--cyan));
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 14px;
  --ok-rim: rgba(61, 220, 151, 0.35);
  --warn-rim: rgba(245, 183, 0, 0.4);
  --warn-fill: rgba(245, 183, 0, 0.06);
  --bad-rim: rgba(255, 92, 108, 0.5);
  --pick-rim: rgba(20, 202, 252, 0.45);
  --backdrop: rgba(0, 0, 0, 0.82);
  --on-grad: #000;
  --grad-glow: rgba(187, 59, 250, 0.55);
  --menu-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75);
  /* searching beam for chains with black-and-white logos */
  --mono-a: #e4e6ee;
  --mono-b: #8d92a3;
  /* split-flap tiles invert per theme: light here, dark in the light theme */
  --tile-top: #f7f7fa;
  --tile-bot: #e9e9ef;
  --tile-ink: #101016;
  --tile-dim: #8a889a;
  --hinge: #b9b8c6;
  --tile-edge: rgba(0, 0, 0, 0.25);
}

/* Light: cool paper white; logo hues darkened so text and gradients keep contrast. */
:root[data-theme="light"] {
  --void: #f4f5f9;
  --surface: #ffffff;
  --surface-2: #e9eaf1;
  --rim: rgba(16, 16, 32, 0.1);
  --rim-strong: rgba(16, 16, 32, 0.24);
  --text: #12121a;
  --muted: #5d5b6c;
  --violet: #9426d9;
  --cyan: #0590c4;
  --ok: #0f8a5a;
  --warn: #9a6400;
  --bad: #cc2236;
  --ok-rim: rgba(15, 138, 90, 0.35);
  --warn-rim: rgba(154, 100, 0, 0.35);
  --warn-fill: rgba(245, 183, 0, 0.1);
  --bad-rim: rgba(204, 34, 54, 0.45);
  --pick-rim: rgba(5, 144, 196, 0.45);
  --backdrop: rgba(18, 18, 26, 0.45);
  --on-grad: #fff;
  --grad-glow: rgba(148, 38, 217, 0.45);
  --menu-shadow: 0 18px 40px -14px rgba(16, 16, 32, 0.28);
  --mono-a: #3b3e4a;
  --mono-b: #9ca1b0;
  --tile-top: #262631;
  --tile-bot: #1d1d26;
  --tile-ink: #f4f3f8;
  --tile-dim: #7c7a8e;
  --hinge: rgba(255, 255, 255, 0.5);
  --tile-edge: rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 5px;
}

/* ---- top bar ---- */
.bar {
  flex: none; width: 100%; max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 700; letter-spacing: -0.01em;
}
.brand img { display: block; flex: none; width: 41px; height: 42px; }
.bar-right { display: flex; align-items: center; gap: 18px; }
.bar-link { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.bar-link:hover { color: var(--text); }
.sponsor-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--rim-strong); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: 0.86rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.sponsor-link svg { color: #db61a2; }
.sponsor-link:hover { border-color: #db61a2; background: color-mix(in srgb, #db61a2 10%, transparent); }
.net {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--muted);
  border: 1px solid var(--rim); border-radius: 999px; padding: 5px 11px;
}
.net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.net.online .net-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-rim); }
.net.offline { color: var(--ok); border-color: var(--ok-rim); }
.net.offline .net-dot { background: var(--ok); }
.link-btn { background: none; border: 0; cursor: pointer; padding: 0; }
.theme-toggle {
  display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--rim); border-radius: 50%;
}
.theme-toggle:hover { color: var(--text); border-color: var(--rim-strong); }
.icon-sun { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }
:root[data-theme="light"] .icon-moon { display: none; }

/* ---- stage: always one screen ---- */
.stage {
  --chain-a: var(--violet); --chain-b: var(--cyan);
  flex: 1; min-height: 0; width: 100%; max-width: 1120px; margin: 0 auto;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 0 24px max(20px, env(safe-area-inset-bottom));
}
/* ---- boot loader (grind-bot while WASM compiles) ---- */
.loading {
  margin: auto; color: var(--muted); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 24px 12px;
}
.loading.is-error .boot-bot { display: none; }
.boot-msg { margin: 0; font-size: 0.95rem; max-width: 36ch; line-height: 1.45; }
.boot-bot {
  position: relative; width: clamp(140px, 28vh, 210px); aspect-ratio: 3 / 4;
  display: grid; place-items: center; pointer-events: none; isolation: isolate;
  /* Keep the bust visible even if <img> theme swap / decode fails. */
  overflow: visible;
}
.boot-bot::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: url("grind-bot.png") center 38% / contain no-repeat;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--text) 16%, transparent));
  animation: cyborg-breathe 2.8s ease-in-out infinite alternate;
}
html[data-theme="dark"] .boot-bot::before {
  background-image: url("grind-bot-dark.png");
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 22px color-mix(in srgb, var(--violet) 30%, transparent));
}
html[data-theme="dark"] .boot-glow { opacity: 0.72; }
.boot-glow {
  position: absolute; z-index: 0; inset: 16% 12% 10%; border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--violet) 50%, transparent),
    color-mix(in srgb, var(--cyan) 30%, transparent) 48%,
    transparent 72%
  );
  filter: blur(22px); opacity: 0.6;
  animation: halo 2s ease-in-out infinite alternate, rim-spin 6s linear infinite;
}
.boot-visor {
  position: absolute; z-index: 3; left: 20%; right: 20%; top: 33.8%; height: 10.5%;
  display: grid; place-items: center;
  transform: perspective(420px) rotateX(6deg);
}
.boot-visor-scan {
  position: absolute; top: 15%; bottom: 15%; left: 0; width: 2px;
  background: color-mix(in srgb, #fff 80%, var(--cyan));
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--cyan) 60%, transparent);
  animation: cyborg-visor-sweep 1.4s linear infinite;
  mix-blend-mode: screen; opacity: 0.75;
}
.boot-visor-text {
  position: relative; z-index: 1;
  color: rgba(200, 255, 236, 0.9);
  font-size: clamp(0.58rem, 1.7vw, 0.78rem);
  font-weight: 600; letter-spacing: 0.14em;
  mix-blend-mode: plus-lighter;
  text-shadow: 0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent);
  animation: boot-blink 1.2s steps(2) infinite;
}
@supports not (mix-blend-mode: plus-lighter) {
  .boot-visor-text { mix-blend-mode: screen; }
}
@keyframes boot-blink { 50% { opacity: 0.45; } }
.boot-ear {
  position: absolute; z-index: 3; width: 10%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 50%, transparent), 0 0 12px var(--violet);
  animation: port-pulse 1s ease-in-out infinite alternate;
}
.boot-ear-l { left: 9%; top: 37%; }
.boot-ear-r { right: 9%; top: 37%; animation-delay: -0.35s; }
.boot-neck {
  position: absolute; z-index: 2; left: 40%; right: 40%; top: 76%; bottom: 15%;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 75%, transparent);
}
.boot-neck i {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--violet) 40%, #fff 52%, var(--cyan) 64%, transparent);
  background-size: 100% 38%; background-repeat: no-repeat;
  mix-blend-mode: screen; opacity: 0.9;
  animation: cyborg-neck-flow 1.5s linear infinite;
  filter: drop-shadow(0 0 3px var(--violet));
}
.boot-neck i:nth-child(1) { left: 18%; animation-duration: 1.8s; }
.boot-neck i:nth-child(2) { left: 34%; animation-duration: 1.3s; animation-direction: reverse; }
.boot-neck i:nth-child(3) { left: 50%; width: 2.5px; animation-duration: 1.1s; }
.boot-neck i:nth-child(4) { left: 66%; animation-duration: 1.5s; animation-direction: reverse; }
.boot-neck i:nth-child(5) { left: 82%; animation-duration: 1.9s; }
.composer {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4.5vh, 44px);
}
/* sit the content a third of the way down instead of dead centre, so the top isn't mostly empty */
.composer::before, .composer::after { content: ""; flex: 1 1 0; margin-block: calc(-1 * clamp(20px, 4.5vh, 44px) / 2); }
.composer::after { flex-grow: 2.5; }
.stage[data-mode="done"] .composer::before, .stage[data-mode="done"] .composer::after { display: none; }
.stage[data-mode="done"] .composer {
  justify-content: flex-start; gap: clamp(14px, 2.6vh, 26px);
  padding-top: clamp(4px, 2vh, 20px); padding-bottom: 0;
}

/* ---- the sentence is the form ---- */
/* big mark with a halo in the selected chain's colours */
.hero-mark {
  position: relative; flex: none; display: grid; place-items: center;
  width: clamp(124px, 24vh, 216px); aspect-ratio: 1;
}
.hero-mark img { position: relative; z-index: 2; width: 64%; height: auto; }
.hero-mark::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--spin), var(--chain-a), var(--chain-b), var(--chain-a));
  filter: blur(26px); opacity: 0.45;
  animation: rim-spin 8s linear infinite, halo 3.4s ease-in-out infinite alternate;
}
@keyframes halo { from { transform: scale(0.9); opacity: 0.3; } to { transform: scale(1.05); opacity: 0.6; } }

/* hexagon rings + grind-bot accents (ports, cables, bits, visor) */
.hero-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.hero-rings .stop-a { stop-color: var(--chain-a); }
.hero-rings .stop-b { stop-color: var(--chain-b); }
.hero-rings polygon { fill: none; stroke: url(#ringGrad); stroke-linejoin: round; }
.ring-track { stroke-width: 1; opacity: 0.22; }
.ring-comet {
  stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 46 200;
  filter: drop-shadow(0 0 3px var(--chain-a)) drop-shadow(0 0 7px var(--chain-b));
  animation: ring-comet 3.6s linear infinite;
}
@keyframes ring-comet { to { stroke-dashoffset: -492; } }

/* side ports — quiet at rest, pulse while grinding */
.bot-ports { opacity: 0.55; }
.port-core.port-a { fill: var(--chain-a); }
.port-core.port-b { fill: var(--chain-b); }
.port-ring { opacity: 0.7; transform-box: fill-box; transform-origin: center; }
.bot-cables { opacity: 0.35; }
.cable { stroke-dasharray: 4 8; animation: cable-flow 4.5s linear infinite; }
.cable:nth-child(2) { animation-duration: 3.8s; animation-direction: reverse; opacity: 0.8; }
.cable:nth-child(3) { animation-duration: 5.2s; animation-delay: -1.2s; }
@keyframes cable-flow { to { stroke-dashoffset: -48; } }
.bot-bits { opacity: 0.4; }
.bit { transform-box: fill-box; transform-origin: center; animation: bit-drift 5.5s ease-in-out infinite alternate; }
.bit-b { animation-duration: 4.6s; animation-delay: -1s; }
.bit-c { animation-duration: 6.2s; animation-delay: -2.1s; }
.bit-d { animation-duration: 5s; animation-delay: -0.6s; }
@keyframes bit-drift {
  from { transform: translate(0, 0); opacity: 0.35; }
  to { transform: translate(3px, -5px); opacity: 0.7; }
}

/* visor scan — only while searching */
.bot-visor {
  position: absolute; z-index: 3; pointer-events: none;
  left: 22%; right: 22%; top: 28%; height: 44%;
  border-radius: 8px; overflow: hidden; opacity: 0;
}
.bot-visor::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18%;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--chain-a) 55%, transparent),
    color-mix(in srgb, var(--chain-b) 70%, transparent),
    transparent
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--chain-a) 40%, transparent);
  animation: visor-scan 1.6s ease-in-out infinite;
}
@keyframes visor-scan {
  from { top: -10%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  to { top: 95%; opacity: 0; }
}

/* grinding: bot wakes up */
.stage[data-mode="running"] .ring-comet { animation-duration: 1.1s; }
.stage[data-mode="running"] .bot-ports { opacity: 1; }
.stage[data-mode="running"] .port-core {
  animation: port-pulse 1.1s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px var(--chain-a));
}
.stage[data-mode="running"] .port-core.port-b { filter: drop-shadow(0 0 4px var(--chain-b)); }
.stage[data-mode="running"] .port-ring { animation: port-ring 2s ease-in-out infinite; }
@keyframes port-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes port-ring {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.stage[data-mode="running"] .bot-cables { opacity: 0.85; }
.stage[data-mode="running"] .cable { animation-duration: 1.4s; stroke-width: 1.8; }
.stage[data-mode="running"] .bot-bits { opacity: 0.9; }
.stage[data-mode="running"] .bit { animation-duration: 1.8s; }
.stage[data-mode="running"] .bot-visor { opacity: 1; }
.stage[data-mode="running"] .hero-mark::before { opacity: 0.65; filter: blur(22px); }

/* Option 3: photoreal grind-bot — transparent PNG, theme-safe glow, HUD inside glasses */
.bot-cyborg {
  display: none; position: relative; flex: none;
  width: clamp(156px, 32vh, 268px); aspect-ratio: 3 / 4;
  place-items: center; pointer-events: none; isolation: isolate;
}
.cyborg-img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; object-position: center 38%;
  filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--text) 18%, transparent));
  animation: cyborg-breathe 3.2s ease-in-out infinite alternate;
}
html[data-theme="dark"] .cyborg-img.bot-img-dark {
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 22px color-mix(in srgb, var(--chain-a) 30%, transparent));
}
/* Theme swap: graded dark PNG (no live brightness/contrast — those caused face patches). */
html[data-theme="dark"] .bot-img-light { display: none !important; }
html:not([data-theme="dark"]) .bot-img-dark { display: none !important; }
html:not([data-theme="dark"]) .bot-img-light,
html[data-theme="dark"] .bot-img-dark { display: block; }
@keyframes cyborg-breathe {
  from { transform: translateY(2px) scale(0.988); }
  to { transform: translateY(-2px) scale(1.012); }
}
.cyborg-glow {
  position: absolute; z-index: 0; inset: 18% 14% 10%; border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--chain-a) 45%, transparent),
    color-mix(in srgb, var(--chain-b) 28%, transparent) 45%,
    transparent 72%
  );
  filter: blur(22px); opacity: 0.55;
  animation: halo 2.4s ease-in-out infinite alternate;
}
html[data-theme="dark"] .cyborg-glow { opacity: 0.78; }

/*
 * Meta-glasses style: HUD light projected INTO the dark lens glass.
 * No pill / card / opaque plate — only emissive text + a soft scan gleam.
 */
.cyborg-visor {
  position: absolute; z-index: 3; pointer-events: none;
  /* Match the full dark lens band on the PNG — not a thin strip in the middle. */
  left: 12%; right: 12%; top: 30.8%; height: 16.5%;
  display: grid; place-items: center;
  transform: perspective(480px) rotateX(7deg);
  transform-origin: center center;
}
.cyborg-visor-glass {
  position: relative; width: 100%; height: 100%;
  border-radius: 48% / 70%;
  overflow: hidden;
  display: grid; place-items: center;
  padding: 0 5%;
  box-sizing: border-box;
  container-type: size;
  background: none !important;
  border: 0; box-shadow: none; outline: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 84%, transparent 100%);
}
/* thin laser gleam across the lens — not a wide banner */
.cyborg-visor-scan {
  position: absolute; top: 8%; bottom: 8%; left: 0; width: 2px;
  background: color-mix(in srgb, #fff 80%, var(--chain-b));
  box-shadow:
    0 0 6px 2px color-mix(in srgb, var(--chain-b) 70%, transparent),
    0 0 14px 4px color-mix(in srgb, var(--chain-a) 45%, transparent);
  animation: cyborg-visor-sweep 1.5s linear infinite;
  opacity: 0.7;
  mix-blend-mode: screen;
}
@keyframes cyborg-visor-sweep {
  from { transform: translateX(-20%); }
  to { transform: translateX(5200%); }
}
.cyborg-visor-addr {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  max-width: 100%;
  margin: 0; padding: 0;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: none !important;
  border: 0; box-shadow: none;
  color: rgba(220, 255, 242, 0.95);
  /* Scale to the lens itself so glyphs fill the specs, not a sticker strip. */
  font-size: clamp(0.95rem, min(62cqh, 9.5cqw), 1.55rem);
  font-weight: 700; letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap; overflow: hidden;
  text-align: center;
  mix-blend-mode: plus-lighter;
  opacity: 0.98;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px color-mix(in srgb, var(--chain-b) 75%, transparent),
    0 0 18px color-mix(in srgb, var(--chain-a) 45%, transparent);
}
@supports not (mix-blend-mode: plus-lighter) {
  .cyborg-visor-addr { mix-blend-mode: screen; }
}
@supports not (font-size: 1cqh) {
  .cyborg-visor-addr { font-size: clamp(0.95rem, 3.8vw, 1.45rem); }
}
.cyborg-visor-addr .hit {
  color: rgba(255, 255, 255, 1);
  font-weight: 750;
  text-shadow:
    0 0 2px #fff,
    0 0 12px var(--chain-a),
    0 0 18px var(--chain-b);
}
.cyborg-visor-addr .spin {
  display: inline-block;
  color: rgba(170, 245, 225, 0.78);
  animation: cyborg-char-flicker 0.12s steps(2) infinite;
}
@keyframes cyborg-char-flicker {
  from { opacity: 0.25; }
  to { opacity: 0.9; }
}

.cyborg-ear {
  position: absolute; z-index: 3; width: 10%; aspect-ratio: 1; border-radius: 50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--chain-a) 50%, transparent),
    0 0 14px var(--chain-a);
  animation: port-pulse 1s ease-in-out infinite alternate;
}
.cyborg-ear-l { left: 9%; top: 37%; }
.cyborg-ear-r { right: 9%; top: 37%; animation-delay: -0.35s; }

/* neck cables only — below the chin, through the dark veins (never over the mouth) */
.cyborg-neck {
  position: absolute; z-index: 2;
  left: 40%; right: 40%; top: 76%; bottom: 15%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 75%, transparent 100%);
}
.cyborg-neck i {
  position: absolute; top: 0; bottom: 0; width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--chain-a) 55%, transparent) 35%,
    color-mix(in srgb, var(--chain-b) 85%, #fff) 50%,
    color-mix(in srgb, var(--chain-a) 55%, transparent) 65%,
    transparent 100%
  );
  background-size: 100% 38%;
  background-repeat: no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px var(--chain-a));
  mix-blend-mode: screen;
  animation: cyborg-neck-flow 1.6s linear infinite;
}
/* align with the dark cable/vein bundle under the chin */
.cyborg-neck i:nth-child(1) { left: 18%; animation-duration: 1.8s; }
.cyborg-neck i:nth-child(2) { left: 34%; animation-duration: 1.35s; animation-direction: reverse; background-image: linear-gradient(180deg, transparent, color-mix(in srgb, var(--chain-b) 70%, transparent) 40%, #fff 52%, color-mix(in srgb, var(--chain-b) 70%, transparent) 64%, transparent); }
.cyborg-neck i:nth-child(3) { left: 50%; width: 2.5px; animation-duration: 1.15s; filter: drop-shadow(0 0 5px var(--chain-b)); }
.cyborg-neck i:nth-child(4) { left: 66%; animation-duration: 1.5s; animation-direction: reverse; animation-delay: -0.4s; }
.cyborg-neck i:nth-child(5) { left: 82%; animation-duration: 1.9s; animation-delay: -0.7s; }
@keyframes cyborg-neck-flow {
  from { background-position: center -40%; }
  to { background-position: center 140%; }
}

.cyborg-bits { position: absolute; inset: 0; z-index: 2; }
.cyborg-bits i {
  position: absolute; width: 6px; height: 6px; border-radius: 2px;
  background: var(--chain-a);
  box-shadow: 0 0 8px var(--chain-a);
  animation: cyborg-bit 2.4s ease-in-out infinite;
}
.cyborg-bits i:nth-child(1) { left: 6%; top: 20%; }
.cyborg-bits i:nth-child(2) { right: 8%; top: 18%; animation-delay: -0.4s; background: var(--chain-b); }
.cyborg-bits i:nth-child(3) { left: 3%; top: 50%; animation-delay: -0.8s; width: 4px; height: 4px; }
.cyborg-bits i:nth-child(4) { right: 4%; top: 48%; animation-delay: -1.2s; background: var(--chain-b); }
.cyborg-bits i:nth-child(5) { left: 16%; bottom: 14%; animation-delay: -0.6s; width: 4px; height: 4px; }
.cyborg-bits i:nth-child(6) { right: 14%; bottom: 18%; animation-delay: -1.5s; background: var(--chain-b); width: 5px; height: 5px; }
@keyframes cyborg-bit {
  0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.2; }
  50% { transform: translate(3px, -9px) scale(1.15); opacity: 0.95; }
}
.cyborg-status {
  position: absolute; z-index: 4; left: 50%; bottom: 1.5%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text); font-size: 0.72rem; letter-spacing: 0.04em;
  border: 1px solid var(--rim);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.cyborg-status em {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--chain-a);
  box-shadow: 0 0 8px var(--chain-a);
  animation: port-pulse 0.8s ease-in-out infinite alternate;
  font-style: normal;
}

.stage[data-mode="running"] .hero-mark { display: none; }
.stage[data-mode="running"] .bot-cyborg { display: grid; }
.stage[data-mode="done"] .hero-mark,
.stage[data-mode="done"] .bot-cyborg { display: none; }
@media (max-width: 640px) {
  .bot-cyborg { width: clamp(132px, 34vw, 200px); }
  .cyborg-bits { display: none; } /* less clutter on phones */
  .bot-hud { font-size: 0.8rem; padding: 10px 12px; }
}
@media (max-height: 680px) {
  .hero-mark,
  .stage[data-mode="running"] .bot-cyborg { display: none; }
}
.sentence {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.28em 0.38em; text-align: center;
  font-size: clamp(1.45rem, 0.9rem + 2.2vw, 2.55rem);
  font-weight: 650; letter-spacing: -0.035em; line-height: 1.4;
}
.stage[data-mode="done"] .sentence { font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem); }
.words { color: var(--muted); }
.caret { flex: none; width: 0.42em; height: 0.42em; color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer;
  padding: 0.1em 0.42em 0.1em 0.14em; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--rim-strong);
  letter-spacing: -0.03em; transition: border-color .15s ease, background-color .15s ease;
}
.chip img { width: 1.05em; height: 1.05em; border-radius: 50%; flex: none; }
.chip:hover:not(:disabled) { border-color: var(--text); }

/* Keep "ends with" + word on one wrap unit so phones don't split them apart. */
.pattern {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 0.28em 0.38em; max-width: 100%;
}
.slot { position: relative; display: inline-flex; align-items: center; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 0.18em; cursor: pointer;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 2px solid var(--rim-strong);
  padding: 0 0 0.08em; font-weight: inherit; letter-spacing: -0.035em; line-height: 1.4;
}
.pick-btn:hover:not(:disabled), .pick-btn[aria-expanded="true"] { border-bottom-color: var(--text); }
.pick-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Our own menu: a native <select> popup would render at the sentence's display size. */
.menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px;
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0; line-height: 1.3; text-align: left;
  background: var(--surface); border: 1px solid var(--rim-strong); border-radius: 14px;
  box-shadow: var(--menu-shadow);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  padding: 9px 12px; border-radius: 9px; color: var(--muted);
}
.menu-item::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--rim-strong);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.menu-item[aria-selected="true"] { color: var(--text); font-weight: 600; }
.menu-item[aria-selected="true"]::before { border-color: transparent; background: var(--grad); }
/* Underline on the label — not on the input — so g/y/j/p descenders stay clear
   of the gradient and the caret sits after the typed word as usual. */
.slot.type {
  align-items: baseline;
  background: var(--grad) left bottom / 100% 3px no-repeat;
  padding-bottom: 4px;
}
.slot.type input {
  appearance: none; -webkit-appearance: none;
  box-sizing: content-box;
  min-width: 4ch; max-width: 16ch;
  margin: 0;
  padding: 0.1em 0.06em 0.28em 0;
  font-family: var(--mono); font-size: 0.86em; font-weight: 600; letter-spacing: 0;
  line-height: 1.45; height: auto;
  background: transparent; border: 0; border-radius: 0;
  caret-color: var(--cyan);
  field-sizing: content;
}
.slot.type input::placeholder { color: var(--muted); opacity: 0.45; }
.slot.type input:focus { outline: none; }
.sentence :disabled { cursor: default; opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); }
.sentence .chip:disabled { border-color: var(--rim); }
.chip:disabled .caret, .pick-btn:disabled .caret { visibility: hidden; }
.pick-btn:disabled { border-bottom-color: var(--rim); }

/* ---- split-flap board: the one moving thing on the page ---- */
.plate {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 100%; min-width: 0;
  padding: 12px 14px 14px;
  background: var(--surface); border: 1px solid var(--rim); border-radius: 14px;
  box-sizing: border-box;
}
.plate-head {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px 14px;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted);
  line-height: 1.35;
}
#plateLabel {
  min-width: 0; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#plateCount { flex: none; font-family: var(--mono); font-weight: 500; white-space: nowrap; }

/* searching: spinning gradient rim, a beam riding the tile wave, word tiles breathing */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plate {
  position: relative; overflow: clip; isolation: isolate;
}
.plate.scanning {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--spin), var(--rim) 0 55%, var(--chain-a) 72%, var(--chain-b) 86%, var(--rim) 100%) border-box;
  box-shadow: 0 14px 44px -22px color-mix(in srgb, var(--chain-a) 70%, transparent);
  animation: rim-spin 2.4s linear infinite;
}
@keyframes rim-spin { to { --spin: 360deg; } }
/* Beam only over the tiles — never wash out the "Searching…" label. */
.plate.scanning .board::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -28%; width: 28%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--chain-b) 16%, transparent) 55%,
    color-mix(in srgb, var(--chain-a) 34%, transparent) 94%,
    transparent);
  animation: beam var(--sweep, 2.6s) linear infinite;
}
@keyframes beam { to { left: 100%; } }
.plate.scanning .tile.lock { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe {
  50% { filter: brightness(1.15); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 22px -4px var(--grad-glow); }
}
.plate.scanning #plateLabel::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 0;
  border-radius: 50%; background: var(--chain-a);
  animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; transform: scale(0.7); } }
.board {
  --tile: 22px; --gap: 2px; --cols: 22;
  position: relative;
  display: grid; justify-content: center;
  justify-items: center;
  width: 100%; max-width: 100%; min-width: 0;
  min-height: calc(var(--tile) * 1.3);
  grid-template-columns: repeat(var(--cols), minmax(0, var(--tile)));
  gap: calc(var(--gap) * 2) var(--gap);
  perspective: 700px;
  overflow: hidden;
}
.tile {
  position: relative; display: grid; place-items: center;
  width: var(--tile); height: calc(var(--tile) * 1.3);
  font-family: var(--mono); font-weight: 600; font-size: calc(var(--tile) * 0.68); line-height: 1;
  color: var(--tile-ink);
  /* hinge shows only as notches at the edges so it never crosses the character */
  background:
    linear-gradient(90deg, var(--hinge) 0 16%, transparent 16% 84%, var(--hinge) 84%) center / 100% 1px no-repeat,
    linear-gradient(var(--tile-top) 0 50%, var(--tile-bot) 50% 100%);
  border-radius: calc(var(--tile) * 0.14);
  box-shadow: inset 0 0 0 1px var(--tile-edge);
  transform-origin: 50% 50%;
}
.tile.fixed { color: var(--tile-dim); }
.tile.lock {
  color: var(--on-grad);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 16%, transparent 16% 84%, rgba(0, 0, 0, 0.25) 84%) center / 100% 1px no-repeat,
    var(--grad);
  box-shadow: 0 4px 14px -6px var(--grad-glow);
}
.tile.flap-a { animation: flap-a .2s ease-out; }
.tile.flap-b { animation: flap-b .2s ease-out; }
@keyframes flap-a { 50% { transform: rotateX(-75deg); } }
@keyframes flap-b { 50% { transform: rotateX(-75deg); } }
.board.found .tile { animation: settle .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes settle { from { transform: rotateX(-90deg); opacity: 0.3; } }

/* ---- panel under the board ---- */
.panel {
  width: 100%; max-width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  box-sizing: border-box;
}
/* Keep plate + terminal the same width so the searching stack doesn't look mismatched. */
.plate, #runPanel { max-width: min(100%, 720px); margin-inline: auto; }
.meta { color: var(--muted); font-size: 0.95rem; max-width: 60ch; min-height: 3.1em; }
.meta strong { color: var(--text); font-weight: 650; }
.meta.estimate strong::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); margin-right: 8px; vertical-align: 0.12em;
}
.meta.caution strong::before { background: var(--warn); }
.meta.long strong::before, .meta.impractical strong::before { background: var(--bad); }
.error { color: var(--bad); font-size: 0.92rem; }
.row { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.row.stack { flex-direction: column; gap: 14px; }
.check { display: flex; gap: 9px; align-items: center; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.check em { font-style: normal; opacity: 0.8; }
.check input, .pledge input { accent-color: var(--cyan); width: 17px; height: 17px; flex: none; }
.note { color: var(--muted); font-size: 0.86rem; max-width: 60ch; }

/* terminal HUD — Option 2, only while searching */
.bot-hud {
  width: 100%; max-width: 100%; margin: 0; padding: 11px 14px;
  border-radius: 12px; border: 1px solid var(--rim);
  background: #12141c;
  color: #d8ffe8; font-family: var(--mono); font-size: 0.88rem; line-height: 1.45;
  overflow: hidden; text-align: left;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chain-a) 28%, transparent);
}
.bot-hud-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-hud-prompt {
  color: color-mix(in srgb, var(--chain-a) 70%, #7dffb0);
  font-weight: 700; margin-right: 0.15em;
}
.bot-hud-cursor {
  display: inline-block; margin-left: 2px; color: var(--chain-b);
  animation: hud-blink 1s step-end infinite;
}
@keyframes hud-blink { 50% { opacity: 0; } }

.meter { width: 100%; max-width: 100%; height: 3px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: var(--grad); transition: width .3s linear; }
#runPanel .meta { min-height: 0; }
.row.end { margin-top: 4px; }

/* result: the panel takes the rest of the screen and only the key list scrolls */
.panel.done { flex: 1; min-height: 0; max-width: 760px; gap: 12px; }
.panel.done .meta { min-height: 0; }
.warn-line {
  width: 100%; font-size: 0.9rem; text-align: left;
  border: 1px solid var(--warn-rim); background: var(--warn-fill);
  border-radius: 12px; padding: 10px 14px;
}
.warn-line strong { color: var(--warn); }
.secrets {
  width: 100%; flex: 0 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  overscroll-behavior: contain;
}
.secret { border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); padding: 11px 14px; }
.secret-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.secret-label { font-weight: 600; font-size: 0.9rem; }
.secret-tools { display: flex; gap: 6px; }
.secret-value {
  font-family: var(--mono); font-size: 0.84rem; overflow-wrap: anywhere;
  color: var(--text); user-select: all;
}
.secret-value.hidden { filter: blur(6px); user-select: none; }
.secret-hint { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }
.explorers {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rim);
}
.explorers-label { color: var(--muted); font-size: 0.8rem; margin-right: 2px; }
.explorer {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 0.8rem;
  background: var(--surface-2); border: 1px solid var(--rim); color: var(--text); text-decoration: none;
}
.explorer:hover { border-color: var(--rim-strong); }
.explorer:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.explorer img { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.mini {
  cursor: pointer; font-size: 0.8rem; padding: 4px 10px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--rim);
}
.mini:hover { border-color: var(--rim-strong); }
.row.actions { width: 100%; justify-content: flex-end; gap: 10px; flex: none; }
.row.actions .btn.danger { margin-right: auto; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary {
  background: var(--grad); color: var(--on-grad);
  box-shadow: 0 6px 18px -8px var(--grad-glow);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 8px 22px -8px var(--grad-glow); }
.btn.ghost { background: var(--surface); border-color: var(--rim-strong); color: var(--text); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text); }
.btn.danger { background: transparent; border-color: var(--bad-rim); color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 10%, transparent); border-color: var(--bad); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn.primary:disabled {
  background: var(--surface-2); color: var(--muted); border-color: var(--rim);
  box-shadow: none; opacity: 1;
}
.btn.go { min-width: 210px; padding: 15px 34px; font-size: 1.05rem; border-radius: 13px; }

/* ---- chain sheet ---- */
.sheet {
  margin: auto; width: min(780px, calc(100% - 32px)); max-width: none;
  max-height: min(660px, calc(100dvh - 48px));
  flex-direction: column; gap: 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rim-strong); border-radius: 20px; padding: 20px;
}
.sheet[open] { display: flex; }
.sheet::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 1.2rem; letter-spacing: -0.02em; }
.sheet-close {
  display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--rim); border-radius: 50%;
}
.sheet-close:hover { color: var(--text); border-color: var(--rim-strong); }
.search { position: relative; display: block; flex: none; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; padding: 12px 14px 12px 42px; border-radius: 12px;
  background: var(--void); border: 1px solid var(--rim);
}
.search input:focus { border-color: var(--cyan); outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.chain-grid {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  align-content: start; padding: 2px;
}
.chain-tile {
  display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; text-align: left;
  padding: 9px 11px; border-radius: 12px; background: transparent; border: 1px solid transparent;
  transition: background-color .12s ease;
}
.chain-tile:hover { background: var(--surface-2); }
.chain-tile.selected { border-color: var(--pick-rim); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.logo { flex: none; border-radius: 50%; }
.logo-text {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); font-family: var(--mono); font-size: 0.55rem; font-weight: 700;
}
.tile-text { display: flex; flex-direction: column; min-width: 0; }
.tile-title { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.tile-detail {
  font-size: 0.78rem; color: var(--muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.empty { grid-column: 1 / -1; color: var(--muted); padding: 18px 4px; }

/* ---- consent dialog ---- */
.consent {
  margin: auto; max-width: 520px; width: calc(100% - 32px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rim-strong); border-radius: 20px; padding: 30px 28px 26px;
}
.consent::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
.consent-logo { margin: 0 auto 14px; display: block; }
.consent h2 { text-align: center; font-size: 1.45rem; letter-spacing: -0.02em; }
.consent-lede { text-align: center; color: var(--muted); margin: 6px 0 22px; }
.pledge {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--rim);
  margin-bottom: 8px; font-size: 0.92rem; color: var(--muted);
}
.pledge input { margin-top: 3px; }
.pledge strong { color: var(--text); font-weight: 600; }
.pledge:has(input:checked) { border-color: var(--pick-rim); }
.consent-tip { font-size: 0.84rem; color: var(--muted); margin: 14px 2px 0; }
.consent-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm { max-width: 420px; }
.confirm .consent-lede { margin-bottom: 0; }
.confirm .consent-actions { justify-content: center; }
.confirm-icon {
  display: grid; place-items: center; width: 44px; height: 48px; margin: 0 auto 14px;
  font-weight: 800; font-size: 1.3rem; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 14%, var(--surface));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---- responsive & motion ---- */
@media (max-width: 640px) {
  .bar { padding: 10px 16px; }
  .stage {
    padding: 0 14px max(14px, env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  /* Don't clip the boot bust (drop-shadow + glow) while the engine loads. */
  .stage:has(#loading:not([hidden])) { overflow-x: visible; }
  .bar-link, .brand span { display: none; }
  .bar-link.link-btn { display: inline; }
  .bar-right { gap: 12px; }
  .sponsor-link { padding: 8px; }
  .sponsor-link span { display: none; }
  .net { white-space: nowrap; }
  .composer {
    gap: clamp(14px, 2.8vh, 24px);
    width: 100%; min-width: 0;
  }
  /* Keep the sentence wrapping cleanly — big display type overflows on phones. */
  .sentence {
    width: 100%; max-width: 100%;
    font-size: clamp(1.12rem, 0.82rem + 3.2vw, 1.48rem);
    line-height: 1.45;
    gap: 0.22em 0.3em;
    row-gap: 0.42em;
    align-items: center;
    justify-content: center;
  }
  .chip {
    max-width: 100%;
    padding: 0.12em 0.4em 0.12em 0.16em;
  }
  .chip img { width: 0.95em; height: 0.95em; }
  .pick-btn { max-width: 100%; }
  .slot.type { max-width: min(100%, 14ch); }
  .slot.type input { max-width: 100%; }
  .meta { font-size: 0.88rem; }
  .plate, .panel, .bot-hud, .meter {
    width: 100%; max-width: 100%; min-width: 0;
  }
  .plate { padding: 12px 12px 14px; gap: 10px; border-radius: 14px; }
  .plate-head {
    font-size: 0.84rem; gap: 8px 12px;
    flex-wrap: wrap;
  }
  #plateLabel { flex: 1 1 12rem; }
  #plateCount { margin-left: auto; }
  .bot-hud { font-size: 0.8rem; padding: 10px 12px; border-radius: 10px; }
  .bot-hud-line { letter-spacing: 0; }
  .cyborg-visor {
    left: 11%; right: 11%; top: 30.5%; height: 17%;
  }
  .cyborg-visor-addr { font-size: clamp(0.85rem, min(58cqh, 10cqw), 1.25rem); }
  .pattern { gap: 0.22em 0.3em; }
  .stage[data-mode="running"] .bot-cyborg {
    width: clamp(108px, 30vw, 168px);
  }
  .stage[data-mode="done"] .sentence { display: none; }
  .stage[data-mode="done"] .composer { gap: 12px; padding-top: 8px; }
  .warn-line { font-size: 0.84rem; }
  .row { flex-direction: column; gap: 14px; width: 100%; }
  .btn.go { width: 100%; }
  .row.actions { flex-direction: row; flex-wrap: wrap; }
  .row.actions .btn { flex: 1 1 auto; padding: 11px 12px; }
  .row.actions .btn.primary { flex-basis: 100%; order: -1; }
  .row.actions .btn.danger { margin-right: 0; }
  .consent-actions { flex-direction: column-reverse; }
  .sheet {
    margin: auto 0 0; width: 100%; max-height: 84dvh;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  }
  .chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .net { padding: 9px; }
  #netText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sentence {
    font-size: clamp(1.02rem, 0.72rem + 3.8vw, 1.28rem);
    row-gap: 0.38em;
  }
  .stage[data-mode="running"] .bot-cyborg {
    width: clamp(92px, 28vw, 140px);
  }
  .plate { padding: 10px 10px 12px; }
  .plate-head { font-size: 0.8rem; }
  .bot-hud { font-size: 0.76rem; padding: 9px 10px; }
  .cyborg-visor {
    left: 10%; right: 10%; top: 30.2%; height: 17.5%;
  }
  .cyborg-visor-addr {
    font-size: clamp(0.78rem, min(56cqh, 11cqw), 1.15rem);
    letter-spacing: 0.05em;
  }
}
@media (max-height: 560px) and (min-width: 641px) {
  .sentence { font-size: clamp(1.3rem, 0.8rem + 1.6vw, 2rem); }
  .composer { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}