:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #141a24;
  --muted: #5b6575;
  --line: #e1e6ee;
  --line-strong: #c9d1dc;
  --accent: #2f5bd3;
  --accent-soft: #e8efff;
  --pass: #15803d;
  --fail: #b91c1c;
  --unknown: #b45309;
  --notrun: #8a9099;
  --observed: #2b5fa8;
  --proven: #b23b3b;
  --unknownstate: #b7791f;
  --response: #5b3f9e;
  --b0: #6366f1; --b1: #3b82f6; --b2: #0ea5e9; --b3: #06b6d4; --b4: #14b8a6; --b5: #f59e0b; --b6: #f97316; --b7: #a855f7;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Plus Jakarta Sans", Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 12px;
  --night: #070c1a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1020; --panel: #121a2e; --ink: #e8edf7; --muted: #9eabc4; --line: #222c44; --line-strong: #33405e;
    --accent: #8fb4ec; --accent-soft: #1b2744; --pass: #4ade80; --fail: #f87171; --unknown: #fbbf24; --notrun: #7b828c;
    --observed: #8fb4ec; --proven: #f87171; --unknownstate: #fbbf24; --response: #c4b5fd;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1020; --panel: #121a2e; --ink: #e8edf7; --muted: #9eabc4; --line: #222c44; --line-strong: #33405e;
  --accent: #8fb4ec; --accent-soft: #1b2744; --pass: #4ade80; --fail: #f87171; --unknown: #fbbf24; --notrun: #7b828c;
  --observed: #8fb4ec; --proven: #f87171; --unknownstate: #fbbf24; --response: #c4b5fd;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
code { background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 1px 4px; border-radius: 4px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 22px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: 0.88rem; }
.label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.note { border-left: 3px solid var(--unknown); padding: 8px 12px; color: var(--muted); font-size: 0.9rem; background: color-mix(in srgb, var(--unknown) 7%, transparent); border-radius: 0 6px 6px 0; }
.hidden, [hidden] { display: none !important; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ------------------------------------------------------------ header (always dark) */
header.top { position: sticky; top: 0; z-index: 20; background: rgba(7, 12, 26, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.bar { height: 60px; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #f1f5ff; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.wordmark .thin { font-weight: 500; color: #8fa3c7; }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.tabs a { padding: 7px 13px; border-radius: 8px; color: #a8b6d1; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.tabs a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.06); }
.tabs a.active { color: #fff; background: linear-gradient(90deg, rgba(99, 102, 241, 0.38), rgba(14, 165, 233, 0.26)); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.45); }
.meta { display: flex; gap: 12px; align-items: center; font-size: 0.86rem; white-space: nowrap; color: #8fa3c7; }
.meta a { color: #c7d2fe; }
.icon-btn { background: transparent; border: 1px solid rgba(148, 163, 184, 0.32); color: #cbd5e1; border-radius: 8px; padding: 3px 9px; cursor: pointer; font-size: 0.9rem; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 900px) { .bar { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 10px; } .meta { display: none; } }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 0.92rem; border: 1px solid var(--line-strong); color: var(--ink); background: var(--panel); text-decoration: none; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn.primary { color: #fff; border: 0; background: linear-gradient(135deg, #6366f1, #0ea5e9); box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35); }
.btn.ghost { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 163, 184, 0.35); }
.btn.lg { padding: 12px 20px; font-size: 1rem; }
.round { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(8, 13, 28, 0.6); color: #e2e8f0; cursor: pointer; backdrop-filter: blur(6px); font-size: 0.8rem; display: inline-grid; place-items: center; padding: 0; }
.round.lg { width: 44px; height: 44px; font-size: 1rem; flex: none; }

/* ------------------------------------------------------------ hero band */
.view { padding-bottom: 48px; }
.hero-band { position: relative; overflow: hidden; color: #e7ecf7;
  background: radial-gradient(900px 520px at 10% -10%, rgba(99, 102, 241, 0.45), transparent 62%), radial-gradient(760px 520px at 95% 15%, rgba(14, 165, 233, 0.3), transparent 60%),
    radial-gradient(800px 560px at 60% 118%, rgba(168, 85, 247, 0.34), transparent 62%), linear-gradient(180deg, #050914 0%, #091126 55%, #0c1532 100%); }
.hero-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 45% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 75% 65% at 45% 40%, #000 25%, transparent 78%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr); gap: 44px; align-items: center; padding-top: 58px; padding-bottom: 64px; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; padding-top: 36px; } }
.hero-copy h1 { font-family: var(--display); font-size: clamp(2.3rem, 4.3vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 20px 0 18px; color: #f8fafc; }
.g-plan, .g-exec, .g-assure { -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-plan { background-image: linear-gradient(92deg, #818cf8, #38bdf8); }
.g-exec { background-image: linear-gradient(92deg, #fbbf24, #fb7185); }
.g-assure { background-image: linear-gradient(92deg, #c084fc, #f472b6 55%, #34d399); }
.c-plan { color: #93c5fd; } .c-exec { color: #fdba74; } .c-assure { color: #d8b4fe; }
.hero-copy .lead { color: #c3cde2; font-size: 1.08rem; line-height: 1.65; margin: 0; max-width: 60ch; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 26px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 580px; }
.hero-stats div { padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(148, 163, 184, 0.16); }
.hero-stats b { display: block; font-family: var(--display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; background: linear-gradient(90deg, #e0e7ff, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats span { font-size: 0.76rem; color: #94a3b8; line-height: 1.25; display: block; margin-top: 2px; }
.scope-line { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; color: #7c8db0; margin: 20px 0 0; text-transform: uppercase; }

/* ------------------------------------------------------------ 3D stages */
.stage, .tour-stage { position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 105%, rgba(37, 66, 128, 0.62), rgba(6, 10, 24, 0.15) 62%), #070c1a;
  border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 40px 100px rgba(2, 6, 23, 0.62), 0 0 0 1px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.hero-stage { aspect-ratio: 1.12 / 1; min-height: 430px; }
.stage canvas, .tour-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; cursor: grab; touch-action: pan-y; }
.stage canvas.dragging, .tour-stage canvas.dragging { cursor: grabbing; }
.stage.live canvas, .tour-stage.live canvas { opacity: 1; }
.stage .poster, .tour-stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.9s ease; padding: 6% 4% 18%; }
.stage.live .poster, .tour-stage.live .poster { opacity: 0; }
.no-webgl-note { display: none; }
.stage.no-webgl .no-webgl-note { display: block; position: absolute; right: 16px; top: 52px; font-size: 0.76rem; color: #94a3b8; }
.hud { position: absolute; z-index: 2; color: #e2e8f0; font-size: 0.8rem; }
.hud-top { top: 14px; left: 14px; right: 190px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; padding: 4px 10px; border-radius: 999px; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.45); color: #fecaca; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: pulse 1.4s infinite; }
#hero-run { color: #a8b8d6; font-size: 0.7rem; background: rgba(8, 13, 28, 0.55); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(6px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-ctrl { top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; }
.speed { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(8, 13, 28, 0.6); backdrop-filter: blur(6px); }
.speed button { background: none; border: 0; color: #9fb0d0; font: 600 0.7rem var(--mono); padding: 7px 8px; cursor: pointer; }
.speed button.on { color: #0b1020; background: #93c5fd; }
.hud-bottom { left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(8, 13, 28, 0.64); border: 1px solid rgba(148, 163, 184, 0.2); backdrop-filter: blur(10px); }
.hud-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.count { color: #94a3b8; font-size: 0.68rem; }
.hud-step { display: flex; gap: 8px; align-items: center; margin: 8px 0 7px; min-height: 1.4em; font-size: 0.78rem; overflow: hidden; white-space: nowrap; }
.ack { font: 600 0.64rem var(--mono); padding: 2px 6px; border-radius: 5px; margin-left: auto; flex: none; }
.ack-ok { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.ack-error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.ack-timeout { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.hud-progress { height: 4px; border-radius: 4px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.hud-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--b0), var(--b2), var(--b6), var(--b7)); }
.hud-palette { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin-top: 8px; }
.hud-palette i, .mini-palette i { aspect-ratio: 1 / 1.6; border-radius: 3px; border: 1px solid rgba(148, 163, 184, 0.3); transition: background 0.25s; }
.hud-palette i.filled, .mini-palette i.filled { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 0 10px rgba(255, 255, 255, 0.06); }
.hud-done { position: absolute; left: 50%; top: 92px; transform: translate(-50%, -8px); opacity: 0; transition: all 0.5s; z-index: 3; padding: 8px 15px; border-radius: 999px; font-size: 0.8rem; color: #f5f3ff;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.9), rgba(16, 185, 129, 0.85)); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.42); white-space: nowrap; pointer-events: none; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.hud-done b { font-family: var(--mono); margin-right: 4px; }
.hud-done.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ overview bands */
.band { padding: 66px 0 6px; }
.band.two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .band.two { grid-template-columns: 1fr; } }
.kicker { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; font-weight: 600;
  background: linear-gradient(90deg, #6366f1, #0ea5e9 45%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
h2.title { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 10px; font-weight: 800; }
p.sub { margin: 0 0 18px; color: var(--muted); max-width: 860px; }
h2.sect { font-family: var(--display); font-size: 1.24rem; margin: 34px 0 6px; font-weight: 750; letter-spacing: -0.01em; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.demo .big-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
/* number boxes (not table cells marked num) */
.big-nums .num, .state .num { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); }
.num .v { font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.num .k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.demo .big-nums .num:nth-child(1) .v { color: var(--b1); } .demo .big-nums .num:nth-child(2) .v { color: var(--b6); }
.demo .big-nums .num:nth-child(3) .v { color: var(--fail); } .demo .big-nums .num:nth-child(4) .v { color: var(--pass); }
.questions dl { margin: 0; display: grid; gap: 12px; }
.questions dt { font-weight: 750; display: flex; align-items: center; }
.questions dd { margin: 3px 0 0 30px; color: var(--muted); font-size: 0.92rem; }
.qn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c); color: #fff; font: 700 0.72rem var(--mono); margin-right: 8px; flex: none; box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 40%, transparent); }

/* ------------------------------------------------------------ tour */
.tour-stage { aspect-ratio: 16 / 8.4; min-height: 440px; }
.tour-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 0.74rem; font-weight: 700; color: #fff; padding: 3px 9px 3px 17px; border-radius: 999px; margin: -12px 0 0 -6px;
  background: rgba(8, 13, 28, 0.74); border: 1px solid color-mix(in srgb, var(--c) 65%, transparent); transition: opacity 0.3s; opacity: 0; }
.lbl::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tour-chip { position: absolute; z-index: 3; right: 16px; top: 16px; padding: 6px 13px; border-radius: 999px; color: #fff; font-size: 0.82rem; font-weight: 700;
  background: color-mix(in srgb, var(--c, #6366f1) 78%, #0b1020); box-shadow: 0 0 24px color-mix(in srgb, var(--c, #6366f1) 55%, transparent); }
.tour-chip b { font-family: var(--mono); margin-right: 3px; }
.tour-card { position: absolute; z-index: 3; left: 18px; top: 18px; max-height: calc(100% - 36px); width: min(430px, 45%); overflow: auto; padding: 18px 18px 14px; border-radius: 16px; color: #e2e8f0; font-size: 0.88rem;
  background: rgba(8, 13, 28, 0.74); border: 1px solid color-mix(in srgb, var(--c, #6366f1) 50%, rgba(148, 163, 184, 0.2)); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); }
.tour-card.in { animation: cardIn 0.6s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tour-card h3 { font-family: var(--display); font-size: 1.12rem; margin: 0 0 8px; color: #fff; line-height: 1.25; letter-spacing: -0.01em; }
.tour-card .bn { display: inline-block; font: 700 0.72rem var(--mono); padding: 3px 7px; border-radius: 6px; background: var(--c); color: #fff; margin-right: 6px; vertical-align: 2px; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.tour-card p { color: #c3cde2; margin: 0 0 10px; }
.tour-card .muted, .tour-card .fine { color: #8fa0c2; font-size: 0.78rem; }
.tour-card table.mini { font-size: 0.74rem; margin: 6px 0 10px; width: 100%; border-collapse: collapse; }
.tour-card table.mini th { color: #8fa0c2; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding: 3px 6px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
.tour-card table.mini td { border-bottom: 1px solid rgba(148, 163, 184, 0.12); color: #dbe4f5; padding: 4px 6px; }
.tour-card tr.win td { color: #6ee7b7; }
.tour-card .btn { font-size: 0.86rem; padding: 8px 13px; }
.tour-card .row { gap: 8px; margin-top: 6px; }
.prov { font: 600 0.62rem var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(234, 179, 8, 0.15); color: #fde68a; border: 1px solid rgba(234, 179, 8, 0.35); white-space: nowrap; }
.oracle-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.76rem; color: #c3cde2; margin: 10px 0 6px; padding: 7px 9px; border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.oracle-line .o { font: 700 0.68rem var(--mono); color: #fff; background: color-mix(in srgb, var(--c) 70%, #000); padding: 2px 6px; border-radius: 5px; }
.oracle-line .chip { margin-left: auto; }
.recipe { display: grid; grid-template-columns: 34px 1fr; gap: 4px 8px; align-items: center; margin: 7px 0; }
.recipe .mono { color: #bfdbfe; font-size: 0.72rem; }
.stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.stack i { display: block; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 0.68rem; color: #9fb0d0; margin-top: 3px; grid-column: 2; }
.stack-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cand-head { font: 600 0.74rem var(--mono); color: #bae6fd; margin: 8px 0 2px; }
.gantt { position: relative; height: 46px; border-radius: 8px; background: rgba(148, 163, 184, 0.09); overflow: hidden; margin: 8px 0 4px; }
.gantt i { position: absolute; top: 9px; height: 28px; border-radius: 2px; opacity: 0.92; }
.cmds { font-family: var(--mono); font-size: 0.68rem; border-radius: 8px; background: rgba(2, 6, 23, 0.55); padding: 6px; margin: 6px 0; }
.cmd { display: grid; grid-template-columns: 44px 84px 1fr; gap: 6px; padding: 2px 4px; color: #8fa0c2; border-radius: 4px; white-space: nowrap; overflow: hidden; }
.cmd .d { overflow: hidden; text-overflow: ellipsis; }
.cmd.cur { background: rgba(245, 158, 11, 0.2); color: #fde68a; }
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 6px 0 10px; }
.counters div { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(148, 163, 184, 0.15); }
.counters b { display: block; font-family: var(--display); font-size: 1.1rem; color: #fff; font-weight: 800; }
.counters span { font-size: 0.64rem; color: #8fa0c2; }
.tour-card .step { font-size: 0.7rem; color: #fdba74; min-height: 2.4em; margin: 0 0 6px; }
.mini-palette { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 6px 0; }
.chain { display: flex; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; }
.chain i { font: 600 0.64rem var(--mono); font-style: normal; padding: 4px 6px; border-radius: 6px; color: #e9d5ff; background: rgba(168, 85, 247, 0.18); border: 1px solid rgba(168, 85, 247, 0.45); position: relative; animation: chainIn 0.5s ease both; }
.chain i:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 50%; width: 8px; height: 1px; background: rgba(168, 85, 247, 0.75); }
@keyframes chainIn { from { opacity: 0; transform: translateY(6px); } }
.tour-bar { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.tour-bar .round.lg { background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35); }
.tour-chapters { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; gap: 6px; align-items: center; font: 650 0.78rem var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--ink); background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); transition: all 0.2s; }
.pill b { font-family: var(--mono); color: var(--c); }
.pill:hover { border-color: var(--c); }
.pill.on { color: #fff; background: var(--c); border-color: var(--c); box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 45%, transparent); }
.pill.on b { color: #fff; }
.tour-progress { display: flex; gap: 3px; margin-top: 12px; cursor: pointer; }
.tour-progress span { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 20%, var(--line)); overflow: hidden; }
.tour-progress span i { display: block; height: 100%; width: 0; background: var(--c); }
.tour-caption { color: var(--muted); margin: 10px 0 0; min-height: 1.5em; font-size: 0.95rem; }
@media (max-width: 760px) { .tour-stage { aspect-ratio: auto; height: 460px; } .tour-card { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 58%; } .hud-top { right: 12px; top: 52px; } }

/* ------------------------------------------------------------ architecture diagram */
.arch-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px 18px; align-items: stretch; }
.core-col.plan { grid-column: 1 / -1; }
@media (max-width: 900px) { .arch-grid { grid-template-columns: 1fr; } }
.core-col { position: relative; border-radius: 18px; padding: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 11%, var(--panel)), var(--panel) 70%); border: 1px solid color-mix(in srgb, var(--k) 35%, var(--line)); }
.core-col.plan { --k: #4f7cf0; } .core-col.exec { --k: #f97316; } .core-col.assure { --k: #a855f7; }
@media (min-width: 901px) {
  .core-col.plan::after { content: ""; position: absolute; left: 33%; bottom: -17px; width: 12px; height: 12px; border-right: 2px solid var(--k); border-bottom: 2px solid var(--k); transform: translateX(-50%) rotate(45deg); }
  .core-col.exec::after { content: ""; position: absolute; right: -15px; top: 50%; width: 12px; height: 12px; border-top: 2px solid #f97316; border-right: 2px solid #f97316; transform: translateY(-50%) rotate(45deg); }
}
.core-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; }
.core-name { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--k) 75%, var(--ink)); }
.core-q { font-size: 0.76rem; color: var(--muted); }
.flow { display: flex; align-items: stretch; }
@media (max-width: 900px) { .flow { flex-wrap: wrap; gap: 10px; } .flow .conn { display: none; } }
.bk { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 14px 12px 10px; border-radius: 14px; background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--c) 32%, var(--line)); box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 12%, transparent); position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }
.bk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff)); }
.bk:hover { transform: translateY(-3px); box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 30%, transparent); }
@media (max-width: 900px) { .bk { flex: 1 1 210px; } }
.bk-top { display: flex; align-items: center; gap: 8px; }
.bk-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.bk-ico svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-id { font: 800 0.98rem var(--mono); color: var(--c); }
.bk-top .chip { margin-left: auto; font-size: 0.6rem; padding: 1px 7px; }
.bk-name { font-weight: 800; font-size: 0.9rem; line-height: 1.25; }
.bk-q { font-size: 0.74rem; color: var(--muted); line-height: 1.38; flex: 1; }
.bk-out { font: 500 0.68rem var(--mono); color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.bk-oracle { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: var(--muted); padding-top: 7px; border-top: 1px dashed color-mix(in srgb, var(--c) 40%, var(--line)); line-height: 1.3; }
.bk-oracle b { font: 700 0.64rem var(--mono); color: #fff; background: color-mix(in srgb, var(--c) 82%, #000); padding: 1px 5px; border-radius: 4px; flex: none; }
.bk-oracle .ov { margin-left: auto; font-style: normal; font-weight: 800; flex: none; }
.ov.PASS { color: var(--pass); } .ov.FAIL { color: var(--fail); } .ov.UNKNOWN { color: var(--unknown); } .ov.NOT_RUN { color: var(--notrun); }
.conn { flex: 0 0 22px; position: relative; align-self: center; height: 2px; margin: 0 1px; }
.conn i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--a), var(--b)); border-radius: 2px; }
.conn::after { content: ""; position: absolute; right: -3px; top: -4px; border-left: 6px solid var(--b); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.conn i::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--b); animation: flow 1.8s linear infinite; }
@keyframes flow { from { left: 0; } to { left: calc(100% - 6px); } }
.services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.svc { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.svc b { color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.chain-mini { display: inline-flex; gap: 3px; margin-left: 4px; }
.chain-mini i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); opacity: 0.25; animation: chainPulse 2.5s infinite; }
.chain-mini i:nth-child(2) { animation-delay: 0.3s; } .chain-mini i:nth-child(3) { animation-delay: 0.6s; } .chain-mini i:nth-child(4) { animation-delay: 0.9s; } .chain-mini i:nth-child(5) { animation-delay: 1.2s; }
@keyframes chainPulse { 0%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.84rem; color: var(--muted); margin-top: 12px; align-items: center; }

/* ------------------------------------------------------------ chips and badges */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; vertical-align: middle; line-height: 1.5; }
.chip.big { font-size: 0.9rem; padding: 4px 12px; }
.chip.PASS { background: #16a34a; } .chip.FAIL { background: #dc2626; } .chip.UNKNOWN { background: #d97706; } .chip.NOT_RUN { background: #6b7280; }
.badge { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.badge.sim { color: var(--unknown); border-color: var(--unknown); }
.badge.ass { color: var(--muted); }

/* ------------------------------------------------------------ forms */
label { display: block; font-size: 0.88rem; color: var(--muted); margin: 8px 0; }
label.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: 0.88rem; }
label.check input { margin-top: 3px; width: auto; }
select, input, textarea, button { font: inherit; }
select, input[type=text], input[type=number], textarea { width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); }
label.inline select { width: auto; margin: 0; }
textarea { font-family: var(--mono); font-size: 0.8rem; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; padding: 6px 10px; }
legend { font-size: 0.82rem; color: var(--muted); padding: 0 4px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.checks label { display: flex; gap: 6px; align-items: center; margin: 2px 0; font-size: 0.84rem; color: var(--ink); }
.checks input { width: auto; margin: 0; }
.inline-checks { display: inline-flex; gap: 12px; margin-top: 6px; }
button.primary { background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-weight: 700; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.28); }
button.primary[disabled] { opacity: 0.6; cursor: wait; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 2px 4px; font-size: 0.88rem; }
button.link:hover { text-decoration: underline; }
details > summary { cursor: pointer; color: var(--muted); font-size: 0.92rem; margin: 10px 0 4px; }
.editor-block { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
table.editor { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.editor th { text-align: left; font-weight: 650; color: var(--muted); font-size: 0.74rem; padding: 2px 4px; }   /* no upper-casing: it turns µL into ΜL */
table.editor td { padding: 2px 3px; }
table.editor input { margin: 0; padding: 4px 6px; font-size: 0.82rem; width: 100%; }
table.editor button { font-size: 0.8rem; }

/* ------------------------------------------------------------ workbench */
.workbench { display: grid; grid-template-columns: 430px 1fr; gap: 20px; margin-top: 26px; align-items: start; }
@media (max-width: 1000px) { .workbench { grid-template-columns: 1fr; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.panel h2 { margin: 0 0 10px; font-size: 1.12rem; font-family: var(--display); }
.panel h3 { margin: 18px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.panel h4 { margin: 10px 0 6px; font-size: 0.95rem; }
.verdict-banner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.block { display: block; text-align: left; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); min-height: 104px; cursor: pointer; }
.block:hover { border-color: var(--accent); }
.block.selected { outline: 2px solid var(--accent); }
.block .id { font-weight: 700; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; }
.block .name { font-size: 0.72rem; color: var(--muted); line-height: 1.25; min-height: 2.4em; display: block; }
.block .verdicts { font-size: 0.72rem; color: var(--muted); margin-top: 6px; display: grid; gap: 2px; }
.block .flag { font-size: 0.7rem; color: var(--fail); font-weight: 600; display: block; }
.block.gate-PASS { border-color: color-mix(in srgb, var(--pass) 45%, var(--line)); }
.block.gate-FAIL { border-color: var(--fail); }
.block.gate-UNKNOWN { border-color: var(--unknown); }
.rtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 16px 0 10px; flex-wrap: wrap; }
.rtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.rtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
.ops { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .ops { grid-template-columns: 1fr; } }
#deck svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.timeline { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.timeline table { margin: 0; }
.timeline tr { cursor: pointer; }
.timeline tr.sel { background: var(--accent-soft); }
.timeline td.st { font-weight: 700; }
.st-ok { color: var(--pass); } .st-error { color: var(--fail); } .st-timeout { color: var(--unknown); } .st-pending { color: var(--muted); }
.state { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.state .num .v { font-size: 1rem; }

/* ------------------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin: 6px 0 12px; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 650; font-size: 0.78rem; letter-spacing: 0.01em; }   /* no upper-casing: it turns µL into ΜL */
td.num, td.mono { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
tr.sel td { background: var(--accent-soft); }
.scroll { max-height: 380px; overflow: auto; }

/* ------------------------------------------------------------ diagnoses */
.diag { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--panel); }
.diag h4 { margin: 0 0 6px; font-size: 0.98rem; }
.diag .summary { margin: 0 0 8px; }
.cat { display: inline-block; min-width: 160px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cat.observed_fact { color: var(--observed); } .cat.proven_violation { color: var(--proven); }
.cat.unknown_physical_state { color: var(--unknownstate); } .cat.required_response { color: var(--response); }
.response { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--response); background: color-mix(in srgb, var(--response) 8%, transparent); font-size: 0.9rem; border-radius: 0 8px 8px 0; }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 0.76rem; overflow: auto; max-height: 440px; font-family: var(--mono); }
pre.code { position: relative; }
pre.code::before { content: attr(data-lang); position: absolute; right: 8px; top: 4px; font-size: 0.68rem; color: var(--muted); }

/* ------------------------------------------------------------ inspector */
.inspector { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .inspector { grid-template-columns: 1fr; } }
.block-list { display: grid; gap: 6px; }
.block-list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 0.86rem; }
.block-list button.selected { border-color: var(--accent); background: var(--accent-soft); }
.field { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field .k { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 650; padding-top: 2px; }
.field .v { font-size: 0.9rem; min-width: 0; overflow-x: auto; }
.field .v table { font-size: 0.82rem; }
@media (max-width: 700px) { .field { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: 0.86rem; }
.kv .k { color: var(--muted); }
.kv .v { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

/* ------------------------------------------------------------ fault investigation */
.steps { display: grid; gap: 10px; margin-top: 12px; }
.step { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--bg); }
.step h4 { margin: 0 0 4px; font-size: 0.92rem; }
.step h4 span.n { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; text-align: center; font-size: 0.78rem; line-height: 22px; margin-right: 8px; }

/* ------------------------------------------------------------ evidence graph */
.graph-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
@media (max-width: 900px) { .graph-wrap { grid-template-columns: 1fr; } }
#graph svg { width: 100%; height: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
#graph circle { cursor: pointer; }
#graph circle.sel { stroke: var(--ink); stroke-width: 2; }
.node-panel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.86rem; max-height: 480px; overflow: auto; }
.glegend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: var(--muted); margin: 6px 0; }
.glegend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

/* ------------------------------------------------------------ benchmark */
.objective p { margin: 0; font-size: 0.95rem; }
.bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 12px 0; }
.bar-chart { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.bar-chart h4 { margin: 0 0 8px; font-size: 0.86rem; }
.bar-row { display: grid; grid-template-columns: 34px 1fr 70px; align-items: center; gap: 8px; font-size: 0.8rem; margin: 4px 0; }
.bar-row .b { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #6366f1, #0ea5e9); }
.bar-row .b.alt { background: linear-gradient(90deg, #14b8a6, #22c55e); }

/* ------------------------------------------------------------ docs */
.docs { display: grid; grid-template-columns: 250px 1fr; gap: 18px; margin-top: 26px; align-items: start; }
.docs > * { min-width: 0; }   /* a long code line scrolls inside its block instead of widening the page */
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; } }
.doc-list { display: grid; gap: 4px; position: sticky; top: 76px; }
.doc-list a { padding: 7px 10px; border-radius: 8px; color: var(--muted); font-size: 0.9rem; }
.doc-list a.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.doc-list .group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 12px 10px 2px; }
.doc { max-width: 920px; }
.doc h1 { font-family: var(--display); font-size: 1.7rem; margin: 0 0 12px; letter-spacing: -0.02em; }
.doc h2 { font-family: var(--display); font-size: 1.22rem; margin: 26px 0 8px; }
.doc h3 { font-size: 1rem; margin: 18px 0 6px; }
.doc p, .doc li { font-size: 0.95rem; }
.doc blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 6px 12px; color: var(--muted); }
.doc table { font-size: 0.84rem; }
@media (max-width: 900px) { .doc table { display: block; max-width: 100%; overflow-x: auto; } }   /* wide tables scroll inside, never the page */


/* ---------------------------------------------------------------- the qualified use case */
.case-head { margin-top: 26px; }
.case-head .title { margin: 4px 0 8px; }
.case-head .lead { color: var(--muted); max-width: 980px; }
.case-verdict { margin: 14px 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 85%, var(--bg)); }
.case-verdict.ok { border-color: color-mix(in srgb, var(--pass) 45%, var(--line)); background: color-mix(in srgb, var(--pass) 9%, var(--panel)); }
.case-verdict.no { border-color: color-mix(in srgb, var(--fail) 45%, var(--line)); background: color-mix(in srgb, var(--fail) 8%, var(--panel)); }
.case-verdict.warn { border-color: color-mix(in srgb, var(--unknown) 45%, var(--line)); background: color-mix(in srgb, var(--unknown) 9%, var(--panel)); }
.ladder { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ladder li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ladder li .step { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; font: 700 0.85rem/1 var(--mono); color: #fff; background: var(--notrun); }
.ladder li.met { border-color: color-mix(in srgb, var(--pass) 50%, var(--line)); }
.ladder li.met .step { background: var(--pass); }
.ladder li .what { display: flex; flex-direction: column; gap: 2px; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.tiles .tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tiles .tile b { font: 750 1.25rem var(--display); color: var(--ink); }
.tiles .tile span { font-size: 0.8rem; color: var(--muted); }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin: 16px 0; align-items: start; }
.claims { display: flex; flex-direction: column; gap: 6px; }
.claim { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.claim summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.claim[open] { border-color: var(--line-strong); }
.crit { margin: 8px 0; padding-left: 18px; }
.crit li { margin: 3px 0; }
.case-report { margin-bottom: 30px; }
.case-report.doc { max-width: none; }
.case-report.doc > p, .case-report.doc > ul, .case-report.doc > ol, .case-report.doc > h2, .case-report.doc > h3 { max-width: 1040px; }
.md-fig { margin: 16px 0; text-align: center; }
.md-fig img { max-width: 100%; height: auto; border-radius: 10px; }
.case-teaser { margin-top: 28px; }
.case-teaser .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.rd { font: 600 0.8rem var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.rd.met { color: #fff; background: var(--pass); border-color: var(--pass); }
@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Q1, explained: the story */
.story { margin-top: 18px; }
.story-hud { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 9px 14px; border-radius: 14px; background: rgba(8, 13, 28, 0.72); backdrop-filter: blur(8px); color: #e2e8f0; font-size: 0.86rem; }
.story-hud .what { flex: 1 1 260px; }
.story-hud .drops { font: 600 0.82rem var(--mono); color: #fde68a; }
.story-hud .drops b { font-size: 1.1rem; color: #fbbf24; }
.story-hud .ack { font: 600 0.72rem var(--mono); padding: 3px 9px; border-radius: 999px; background: rgba(34, 197, 94, 0.18); color: #86efac; }
.story-hud .ack-timeout, .story-hud .ack-error { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.story-card .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(255, 255, 255, 0.35); }
.story-card ol.plan { list-style: none; padding: 0; margin: 4px 0 10px; display: flex; flex-direction: column; gap: 5px; }
.story-card .plan-step { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; align-items: baseline; opacity: 0; animation: planIn 0.5s ease forwards; color: #dbe4f5; font-size: 0.82rem; }
.story-card .plan-step b { grid-row: span 2; font: 700 0.72rem var(--mono); padding: 3px 0; text-align: center; border-radius: 6px; background: var(--c); color: #fff; }
.story-card .plan-step .ok { font-size: 0.7rem; color: #6ee7b7; }
@keyframes planIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .story-card .plan-step { animation: none; opacity: 1; } }

/* ---------------------------------------------------------------- Q1, explained: the labs */
.labs { margin-top: 26px; }
.lab { margin: 16px 0; }
.lab-head { display: flex; gap: 14px; align-items: flex-start; }
.lab-head h3 { margin: 2px 0 4px; }
.lab-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 750 1rem var(--display);
  color: #fff; background: linear-gradient(135deg, #6366f1, #0ea5e9); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-top: 12px; align-items: start; }
.lab-grid canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); }
.lab-grid .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lab-side h4 { margin: 10px 0 2px; font-size: 0.86rem; }
.lab-side .small { font-size: 0.8rem; padding: 6px 10px; margin: 6px 0; }
.sl { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 0.84rem; }
.sl span { display: flex; justify-content: space-between; color: var(--muted); }
.sl b { font-family: var(--mono); color: var(--ink); }
.sl input[type=range] { width: 100%; accent-color: #3b82f6; }
.readout { margin-top: 10px; font-size: 0.88rem; }
.readout .big { font: 750 1.25rem var(--display); display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); }
.readout .big span { font-size: 1rem; }
.readout .big.good { border-color: color-mix(in srgb, var(--pass) 50%, var(--line)); background: color-mix(in srgb, var(--pass) 9%, var(--panel)); }
.readout .big.bad { border-color: color-mix(in srgb, var(--fail) 50%, var(--line)); background: color-mix(in srgb, var(--fail) 8%, var(--panel)); }
.good { color: var(--pass); } .bad { color: var(--fail); }
.tol-tasks, .fault-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt, .fl { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 0.84rem; }
.tt b { display: block; font-size: 0.86rem; }
.tt span { display: block; color: var(--muted); font-size: 0.76rem; }
.tt.on, .fl.on { border-color: #3b82f6; box-shadow: 0 0 0 2px color-mix(in srgb, #3b82f6 35%, transparent); }
#dev-rack { width: 100%; height: auto; }
#dev-rack .rl { font: 600 13px var(--sans); fill: var(--muted); }
#dev-rack .vt { font: 700 11px var(--mono); fill: #0f172a; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, 0.75); stroke-width: 3px; }
#dev-rack .v { cursor: help; }
.chain-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; align-items: stretch; }
.cs { flex: 1 1 96px; min-width: 96px; border-radius: 10px; padding: 7px 9px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-size: 0.74rem; }
.cs b { font: 700 0.78rem var(--mono); color: var(--c); }
.cs span { color: var(--muted); }
.cs i { font-style: normal; font-weight: 700; }
.cs.pass i { color: var(--pass); }
.cs.caught { border-color: var(--fail); background: color-mix(in srgb, var(--fail) 10%, var(--panel)); }
.cs.caught i { color: var(--fail); }
.cs.hold { border-color: var(--unknown); background: color-mix(in srgb, var(--unknown) 12%, var(--panel)); }
.cs.hold i { color: var(--unknown); }
.cs.explain i { color: var(--response); }
.cs.notrun { opacity: 0.55; }
.cs.notrun i { color: var(--notrun); }
.cs-gap { flex-basis: 100%; font-size: 0.8rem; font-weight: 700; color: var(--unknown); }
.mini-rack { width: 100%; max-width: 420px; height: auto; }
.mini-rack .mx { font: 700 12px var(--sans); fill: #a855f7; }
.mini-rack .fx { font: 800 15px var(--sans); text-anchor: middle; }
.mini-rack .fx.q { fill: #d97706; }
.mini-rack .fx.w { fill: #dc2626; }
.evidence4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e4 { border: 1px solid var(--line); border-left: 4px solid var(--k); border-radius: 10px; padding: 8px 12px; }
.e4 h5 { margin: 0 0 4px; font-size: 0.8rem; color: var(--k); text-transform: uppercase; letter-spacing: 0.03em; }
.e4 p { margin: 0; font-size: 0.86rem; }
.e4.seen { --k: var(--observed); } .e4.certain { --k: var(--proven); } .e4.unknown { --k: var(--unknownstate); } .e4.todo { --k: var(--response); }
@media (max-width: 900px) {
  .lab-grid, .evidence4 { grid-template-columns: 1fr; }
  .story-hud { font-size: 0.78rem; }
}

/* ---------------------------------------------------------------- Q1, explained: the live run */
.mode-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.mode-toggle .mt { border: 0; background: none; color: var(--muted); font: 650 0.9rem var(--sans); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.mode-toggle .mt.on { color: #fff; background: linear-gradient(135deg, #6366f1, #0ea5e9); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3); }
.mode-toggle .mt[data-mode="live"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 6px #ef4444; }
.live-panel { margin-top: 14px; }
.live-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.live-controls label { margin: 0; flex: 1 1 240px; }
.live-go { display: flex; gap: 8px; flex-wrap: wrap; }
.ghost-btn { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 9px 14px; cursor: pointer; font-weight: 650; }
.ghost-btn[disabled] { opacity: 0.5; cursor: default; }
.live-play { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; }
.live-play .round.lg { background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35); }
.live-play .round.lg[disabled] { opacity: 0.45; box-shadow: none; cursor: default; }
.live-bar { position: relative; flex: 1 1 240px; height: 10px; border-radius: 5px; background: color-mix(in srgb, #22c55e 16%, var(--line)); overflow: hidden; cursor: pointer; }
.live-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #22c55e, #0ea5e9); }
.live-bar b { position: absolute; top: 0; bottom: 0; right: 0; width: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fail) 45%, transparent) 0 5px, transparent 5px 10px); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); color: var(--muted); padding: 6px 11px; font-size: 0.8rem; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.live-status { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; min-height: 1.4em; }
.story-stage.busy::after { content: "running the whole case on the server…"; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; color: #e2e8f0;
  font: 650 0.95rem var(--sans); background: rgba(8, 13, 28, 0.5); backdrop-filter: blur(2px); }
.story-hud .clock { font: 600 0.74rem var(--mono); color: #93c5fd; }
.story-hud .stop { color: #fca5a5; }
.story-hud .truth { font: 600 0.72rem var(--mono); padding: 3px 9px; border-radius: 999px; background: rgba(168, 85, 247, 0.2); color: #e9d5ff; }
.story-hud .truth::before { content: "simulator: "; color: #c4b5fd; font-weight: 500; }
.tour-card.live-card { width: min(370px, 40%); }
.tour-card.live-card .big { font: 800 1.5rem var(--display); color: #fff; margin: 2px 0 6px; }
.live-results { margin-top: 14px; }
.rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; color: var(--muted); background: var(--panel); }
.rc b { color: var(--ink); }
.rc b.good { color: var(--pass); } .rc b.bad { color: var(--fail); } .rc b.warn { color: var(--unknown); }
.vgrid { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; align-items: stretch; }
.vgrid .vh { font-size: 0.74rem; color: var(--muted); text-align: center; line-height: 1.3; padding-bottom: 2px; }
.vgrid .vh b { display: block; color: var(--ink); font-size: 0.82rem; }
.vgrid .vh .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--line-strong); }
.vgrid .rh { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; }
.vgrid .rh b { color: var(--ink); margin-right: 4px; font-weight: 650; }
.vgrid .sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 3px 0; }
.vt { position: relative; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; background: var(--panel); min-height: 52px; }
.vt .vial { position: relative; flex: none; width: 16px; height: 38px; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); border-top: 0; border-radius: 0 0 6px 6px; overflow: hidden; }
.vt .vial i { position: absolute; left: 0; right: 0; bottom: 0; }
.vt .e { font: 650 0.78rem var(--mono); }
.vt .e.wait { color: var(--muted); font: 500 0.76rem var(--sans); }
.vt .e.warn { color: var(--unknown); font: 600 0.74rem var(--sans); }
.vt.miss { border-color: color-mix(in srgb, var(--fail) 55%, var(--line)); background: color-mix(in srgb, var(--fail) 6%, var(--panel)); }
.vt.ok { border-color: color-mix(in srgb, var(--pass) 45%, var(--line)); }
.vt.now { outline: 2px solid #22c55e; outline-offset: 1px; }
.vt .b7 { position: absolute; top: 3px; right: 6px; font: 800 0.72rem var(--sans); font-style: normal; }
.vt .b7.PASS { color: var(--pass); } .vt .b7.FAIL { color: var(--fail); } .vt .b7.UNKNOWN { color: var(--unknown); }
.rexplain { margin-top: 14px; border: 1px solid var(--line); border-left: 4px solid var(--k, var(--accent)); border-radius: 12px; padding: 12px 16px; background: var(--panel); }
.rexplain.good { --k: var(--pass); } .rexplain.bad { --k: var(--fail); } .rexplain.warn { --k: var(--unknown); }
.rexplain h4 { margin: 0 0 6px; font-size: 1rem; }
.rexplain p { margin: 0 0 8px; }
.rexplain p:last-child { margin-bottom: 0; }
.rdiag { margin-top: 12px; }
.rdiag h4 { margin: 0 0 4px; font-size: 0.92rem; }
.rdiag .evidence4 { margin-top: 8px; }
@media (max-width: 700px) {
  .vgrid { grid-template-columns: 54px repeat(4, minmax(0, 1fr)); gap: 4px; }
  .vgrid .rh { font-size: 0.7rem; }
  .vt { flex-direction: column; gap: 3px; padding: 6px 3px; }
  .vt .e { font-size: 0.66rem; }
  .tour-card.live-card { width: auto; right: 18px; }
}
@media (max-width: 760px) {      /* small screens: the card above, the step line below, the robot in between */
  .story-stage { height: 560px; }
  .story-stage .tour-card { top: 54px; bottom: auto; max-height: 42%; }
  .story-hud { left: 10px; right: 10px; bottom: 10px; padding: 7px 10px; gap: 6px; }
}

/* ================================================================ 0.3: the site for newcomers */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: #0b1020; padding: 8px 14px; border-radius: 8px; font-weight: 700; transition: top 0.2s; }
.skip:focus { top: 10px; }
:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
main:focus { outline: none; }
[id] { scroll-margin-top: 120px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line-strong); }
.scroll-x { overflow-x: auto; max-width: 100%; }
a.ghost-btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }

/* header: five sections, and the pages of the current one */
.tabs a[data-section="try"]:not(.active) { color: #e0e7ff; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.42); }
.subnav { border-top: 1px solid rgba(148, 163, 184, 0.12); background: rgba(7, 12, 26, 0.55); }
.subnav-in { display: flex; gap: 4px; overflow-x: auto; padding-top: 6px; padding-bottom: 6px; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a { padding: 5px 12px; border-radius: 999px; color: #9fb0d0; font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.subnav a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.07); }
.subnav a.on { color: #0b1020; background: #c7d2fe; }

/* home: the hero */
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; padding: 7px 14px; border-radius: 999px; font-size: 0.88rem; color: #fde68a;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.38); }
.status-pill .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px #f59e0b; flex: none; }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 600px; }
.hero-stats span { font-size: 0.78rem; }
#hero-run { font-family: var(--sans); font-size: 0.76rem; }
.hud-step #hero-step { color: #e2e8f0; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }
.hud-row .hud-progress { flex: 1; }
.hud-row { margin-bottom: 2px; }

/* home: four steps, examples, readiness, verdicts */
.steps4 { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.steps4 li { position: relative; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-radius: 16px; padding: 20px 18px 18px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 10%, transparent); overflow: hidden; }
.steps4 li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.s4-n { position: absolute; right: 16px; top: 10px; font: 800 2rem var(--display); color: color-mix(in srgb, var(--c) 28%, transparent); }
.s4-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent); }
.s4-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.steps4 h3 { margin: 14px 0 6px; font: 800 1.15rem var(--display); }
.steps4 p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.more { margin: 16px 0 0; font-weight: 700; }
.ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ex-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.ex-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12); }
.ex-card h3 { margin: 2px 0; font: 800 1.1rem var(--display); }
.ex-card p { margin: 0; color: var(--muted); font-size: 0.93rem; flex: 1; }
.ex-tag { font: 600 0.7rem var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.ex-go { font-weight: 700; color: var(--accent); margin-top: 8px; }
.ex-card.first { background: linear-gradient(160deg, color-mix(in srgb, #6366f1 14%, var(--panel)), var(--panel) 62%); border-color: color-mix(in srgb, #6366f1 45%, var(--line)); }
.readiness { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.readiness li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.readiness li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.readiness li > div > span { color: var(--muted); font-size: 0.93rem; }
.readiness li > div > span.fine { font-size: 0.8rem; }
.rd-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--notrun); }
.readiness li.met { border-color: color-mix(in srgb, var(--pass) 45%, var(--line)); }
.readiness li.met .rd-mark { background: var(--pass); }
.readiness li.next .rd-mark { background: var(--unknown); }
.rd-state { font: 700 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.readiness li.met .rd-state { color: var(--pass); }
.readiness li.next .rd-state { color: var(--unknown); }
.readiness.compact li { padding: 10px 12px; grid-template-columns: 32px 1fr; }
.readiness.compact .rd-mark { width: 30px; height: 30px; }
.readiness.compact .rd-state { display: none; }
.legend4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 12px; }
.legend4 .lg { padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.legend4 .lg p { margin: 8px 0 0; font-size: 0.93rem; color: var(--muted); }
.legend4 .lg.UNKNOWN { border-color: color-mix(in srgb, var(--unknown) 45%, var(--line)); }

/* pages */
.page-head { padding: 34px 0 6px; }
.page-title { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 10px; font-weight: 800; }
.band.tight { padding-top: 46px; }

/* how it works: the map and the seven stages */
.map4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 6px; }
.m4 { padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); }
.m4 > b { display: block; font: 800 1.02rem var(--display); color: color-mix(in srgb, var(--c) 80%, var(--ink)); margin: 2px 0 8px; }
.m4-n { font: 700 0.72rem var(--mono); color: var(--muted); }
.m4-st { display: grid; gap: 6px; }
.m4-st a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--c) 8%, var(--panel)); border-left: 3px solid var(--c); }
.m4-st a i { font: 600 0.7rem var(--mono); font-style: normal; color: var(--muted); white-space: nowrap; }
.m4-st a:hover { text-decoration: none; background: color-mix(in srgb, var(--c) 16%, var(--panel)); }
.stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stages > .fine { grid-column: 1 / -1; margin: 0; }
#stage-6 { grid-column: 1 / -1; }   /* the verdict stage spans the row */
.stage-card { background: var(--panel); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); border-left: 5px solid var(--c); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 9px; }
.stage-card header { display: flex; gap: 12px; align-items: flex-start; }
.st-n { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 800 0.95rem var(--display); color: #fff; background: var(--c); }
.st-h { flex: 1; min-width: 0; }
.st-h h3 { margin: 0; font: 800 1.08rem var(--display); }
.st-b { font: 500 0.74rem var(--mono); color: var(--muted); }
.st-v { flex: none; display: flex; gap: 4px; }
.st-job { margin: 0; font-weight: 600; }
.st-qa { margin: 0; display: grid; gap: 7px; }
.st-qa div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 0.91rem; }
.st-qa dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; padding-top: 3px; }
.st-qa dd { margin: 0; }
.st-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.st-x { font-weight: 700; font-size: 0.88rem; }
.job { margin: 6px 0 2px; }

/* try VialBot: the guided run */
.stepper { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.stepper button[disabled] { cursor: default; opacity: 0.55; }
.stepper .sn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 0.88rem var(--display); background: var(--line); color: var(--muted); }
.stepper .st { display: flex; flex-direction: column; line-height: 1.2; }
.stepper .st span { font-size: 0.76rem; color: var(--muted); }
.stepper li.current button { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.stepper li.current .sn { background: linear-gradient(135deg, #6366f1, #0ea5e9); color: #fff; }
.stepper li.done .sn { background: var(--pass); color: #fff; }
.try-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.38fr); gap: 18px; align-items: start; }
.try-panel h2 { font: 800 1.38rem var(--display); margin: 4px 0 8px; letter-spacing: -0.01em; line-height: 1.2; }
.try-panel p { margin: 0 0 10px; }
.step-k { margin: 0; font: 600 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.try-stage { aspect-ratio: 16 / 10.5; min-height: 420px; }
.try-side .live-play { margin-top: 10px; }
.recipe-table { margin: 6px 0 12px; }
.promise { padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--pass) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--pass) 35%, var(--line)); }
.conditions { margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; padding: 2px 12px 8px; }
.conditions summary { font-weight: 700; color: var(--ink); }
.try-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.try-nav .primary.ready { animation: readyPulse 1.4s ease-in-out 4; }
@keyframes readyPulse { 50% { box-shadow: 0 0 0 7px rgba(59, 130, 246, 0.28); } }
.working { display: flex; gap: 7px; margin: 14px 0; }
.working i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; }
.working i:nth-child(2) { animation-delay: 0.2s; }
.working i:nth-child(3) { animation-delay: 0.4s; }
.plan-checks { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.plan-checks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.plan-checks li.ok { border-color: color-mix(in srgb, var(--pass) 40%, var(--line)); }
.plan-checks li.no { border-color: color-mix(in srgb, var(--fail) 50%, var(--line)); }
.pc-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 0.76rem var(--mono); color: #fff; background: var(--pass); }
.plan-checks li.no .pc-n { background: var(--fail); }
.pc-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pc-c { text-align: right; font-weight: 700; color: var(--pass); font-size: 0.86rem; display: flex; flex-direction: column; }
.plan-checks li.no .pc-c { color: var(--fail); }
.pc-o { font: 500 0.72rem var(--mono); color: var(--muted); }
.plan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.plan-facts div { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.plan-facts b { font: 800 1.02rem var(--display); }
.plan-facts span { font-size: 0.84rem; color: var(--muted); }
.sim-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.sim-stats div { padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.sim-stats b { display: block; font: 800 1.3rem var(--display); }
.sim-stats span { font-size: 0.76rem; color: var(--muted); }
.truth-tag { font: 600 0.74rem var(--mono); padding: 1px 7px; border-radius: 999px; background: rgba(168, 85, 247, 0.16); color: #9333ea; }
.verdict-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.vr-k { min-width: 160px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.verdict-row b { font: 800 1.2rem var(--display); }
.shows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.sh { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.sh.yes { border-color: color-mix(in srgb, var(--pass) 40%, var(--line)); background: color-mix(in srgb, var(--pass) 5%, var(--panel)); }
.sh.no { border-color: color-mix(in srgb, var(--unknown) 45%, var(--line)); background: color-mix(in srgb, var(--unknown) 6%, var(--panel)); }
.sh h5 { margin: 0 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sh ul { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.sh li { margin: 3px 0; }
.try-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#try-results { margin-top: 18px; }

/* vial tiles open the vial's record */
button.vt { font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
button.vt:hover { border-color: var(--accent); }
.vt.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.vial-detail { margin-top: 14px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 14px 16px; background: var(--panel); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); }
.vd-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.vd-head h4 { margin: 0; font: 800 1.04rem var(--display); }
.vd-swatch { width: 24px; height: 38px; border-radius: 0 0 9px 9px; border: 1.5px solid var(--line-strong); border-top: 0; flex: none; }
.vd-close { margin-left: auto; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 1.15rem; flex: none; }
.vd-table td, .vd-table th { font-size: 0.85rem; }
.vd-table tr.later td { opacity: 0.5; }
.vd-table .ack { margin-left: 0; }
.vd-table .ack-ok { color: var(--pass); background: color-mix(in srgb, var(--pass) 12%, transparent); }
.vd-table .ack-timeout { color: var(--unknown); background: color-mix(in srgb, var(--unknown) 14%, transparent); }
.vd-table .ack-error { color: var(--fail); background: color-mix(in srgb, var(--fail) 12%, transparent); }
.vd-result { display: grid; gap: 7px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.vd-result div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: baseline; font-size: 0.92rem; }
.vd-result .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }

/* evidence and results: the summary, laid out like a model card */
.ev-card { margin-top: 8px; }
.mc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.mc section h3 { margin: 0 0 8px; font: 800 1.04rem var(--display); }
.mc section p { margin: 0 0 8px; }
.mc section:nth-child(3), .mc section:nth-child(4), .mc-check { grid-column: 1 / -1; }
.mc-check { padding-top: 14px; border-top: 1px solid var(--line); }
.mc ul { margin: 0 0 8px; padding-left: 20px; }
.mc li { margin: 3px 0; }
.tested { margin: 0 0 8px; display: grid; gap: 7px; }
.tested div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; font-size: 0.93rem; }
.tested dt { font-weight: 700; }
.tested dd { margin: 0; color: var(--muted); }
.ev-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.ev-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.ev-link:hover { text-decoration: none; border-color: var(--accent); }
.ev-link span { color: var(--muted); font-size: 0.9rem; }

/* words with a plain meaning */
.term { border-bottom: 1px dotted currentColor; cursor: help; }
.term-tip { position: absolute; z-index: 60; padding: 10px 12px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: 0.86rem; line-height: 1.45;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.42); border: 1px solid rgba(148, 163, 184, 0.3); }
.term-tip b { color: #fff; margin-right: 4px; }
.term-tip a { color: #93c5fd; margin-left: 4px; white-space: nowrap; }

/* footer */
footer.site-foot { margin-top: 40px; padding: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, var(--bg)); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 22px; padding-top: 30px; padding-bottom: 14px; }
.foot-grid h4 { margin: 4px 0 8px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.foot-grid a { display: block; margin: 5px 0; font-size: 0.92rem; }
.foot-brand { color: var(--ink); margin-bottom: 8px; }
.foot-brand .wordmark .thin { color: var(--muted); }
.foot-line { padding-bottom: 32px; }

/* narrower screens */
@media (max-width: 1100px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: 1fr; }
  .try-grid { grid-template-columns: 1fr; }
  .try-side { order: -1; }
  .ev-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .map4, .legend4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc { grid-template-columns: 1fr; }
  .tested div { grid-template-columns: 1fr; gap: 2px; }
  .hero-stats { grid-template-columns: 1fr; max-width: none; }
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .stepper button { flex-direction: column; gap: 4px; text-align: center; padding: 8px 4px; }
  .stepper .st span { display: none; }
  .try-stage { min-height: 0; height: 380px; aspect-ratio: auto; }
  .readiness li { grid-template-columns: 32px 1fr; }
  .rd-state { grid-column: 2; }
}
@media (max-width: 560px) {
  .steps4, .ex-grid, .map4, .legend4, .ev-links, .plan-facts, .shows { grid-template-columns: 1fr; }
  .st-qa div, .vd-result div { grid-template-columns: 1fr; gap: 2px; }
  .sim-stats b { font-size: 1.05rem; }
}
@media (max-width: 700px) {      /* phones: every section visible in the header, the docs list as one swipeable row */
  .tabs { flex-wrap: wrap; overflow: visible; flex-basis: 100%; }      /* the sections on their own rows, under the brand */
  .tabs a { padding: 6px 10px; font-size: 0.86rem; }
  .doc-list { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: thin; }
  .doc-list .group { display: none; }
  .doc-list a { flex: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
}

/* ================================================================ 0.3.1: brand, colour, pictures */
/* inner pages: maroon headings, blue subheadings; contrast on the page background (light: #7b1d3a 9.4:1,
   #1e40af 8.1:1, #1d4ed8 6.3:1; dark: #e06b8b 6.0:1, #93c5fd 10.5:1), and at least 4.5:1 on every
   background they sit on. Homepage: navy ink, the logo's cyan, slate text (light: #0b1f33, #0e7490,
   #334155; dark: #f1f5f9, #36d3de, #c5d1df), each at least 4.5:1 on the hero and the page */
:root {
  --heading: #7b1d3a; --subhead: #1d4ed8; --lead: #1e40af; --brand-cyan: #36d3de; --brand-cyan-text: #0f7f8a;
  --hero-ink: #0b1f33; --hero-muted: #475569; --hero-grid: rgba(11, 31, 51, 0.06);
  --hero-bg: radial-gradient(900px 520px at 4% -20%, rgba(54, 211, 222, 0.12), transparent 62%), radial-gradient(760px 520px at 98% 0%, rgba(37, 99, 235, 0.07), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f1f5f9 100%);
  --hero-tile: rgba(255, 255, 255, 0.9); --hero-tile-line: #d5dee9;
  --home-ink: #0b1f33; --home-accent: #0e7490; --home-lead: #334155;
  --home-btn: #0b1f33; --home-btn-ink: #ffffff; --home-btn-shadow: 0 10px 24px rgba(11, 31, 51, 0.2);
  --stage-shadow: 0 30px 70px rgba(15, 23, 42, 0.26), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --cx-ink: #334155; --cx-soft: #eaf0f7; --cx-line: #94a3b8; --cx-glass: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --heading: #e06b8b; --subhead: #93c5fd; --lead: #b9d3fe; --brand-cyan-text: #36d3de;
    --hero-ink: #f1f5f9; --hero-muted: #9fb0c6; --hero-grid: rgba(148, 163, 184, 0.06);
    --hero-bg: radial-gradient(900px 540px at 4% -18%, rgba(54, 211, 222, 0.13), transparent 62%), radial-gradient(760px 520px at 98% 4%, rgba(37, 99, 235, 0.17), transparent 60%),
      linear-gradient(180deg, #06111e 0%, #071b2d 60%, #0a1628 100%);
    --hero-tile: rgba(255, 255, 255, 0.04); --hero-tile-line: rgba(148, 163, 184, 0.18);
    --home-ink: #f1f5f9; --home-accent: #36d3de; --home-lead: #c5d1df;
    --home-btn: #36d3de; --home-btn-ink: #04121d; --home-btn-shadow: 0 10px 28px rgba(54, 211, 222, 0.16);
    --stage-shadow: 0 40px 100px rgba(2, 6, 23, 0.62), 0 0 0 1px rgba(99, 102, 241, 0.08);
    --cx-ink: #cbd5e1; --cx-soft: #1b2540; --cx-line: #64748b; --cx-glass: #0f172a;
  }
}
:root[data-theme="dark"] {
  --heading: #e06b8b; --subhead: #93c5fd; --lead: #b9d3fe; --brand-cyan-text: #36d3de;
  --hero-ink: #f1f5f9; --hero-muted: #9fb0c6; --hero-grid: rgba(148, 163, 184, 0.06);
  --hero-bg: radial-gradient(900px 540px at 4% -18%, rgba(54, 211, 222, 0.13), transparent 62%), radial-gradient(760px 520px at 98% 4%, rgba(37, 99, 235, 0.17), transparent 60%),
    linear-gradient(180deg, #06111e 0%, #071b2d 60%, #0a1628 100%);
  --hero-tile: rgba(255, 255, 255, 0.04); --hero-tile-line: rgba(148, 163, 184, 0.18);
  --home-ink: #f1f5f9; --home-accent: #36d3de; --home-lead: #c5d1df;
  --home-btn: #36d3de; --home-btn-ink: #04121d; --home-btn-shadow: 0 10px 28px rgba(54, 211, 222, 0.16);
  --stage-shadow: 0 40px 100px rgba(2, 6, 23, 0.62), 0 0 0 1px rgba(99, 102, 241, 0.08);
  --cx-ink: #cbd5e1; --cx-soft: #1b2540; --cx-line: #64748b; --cx-glass: #0f172a;
}

/* the brand: the Neural Rail mark, Vial in white, Bot in cyan */
.brand img { border-radius: 9px; box-shadow: 0 0 0 1px rgba(54, 211, 222, 0.25); }
.wordmark .bot { color: var(--brand-cyan); }
.foot-brand .wordmark { color: var(--ink); }
.foot-brand .wordmark .bot { color: var(--brand-cyan-text); }

/* the hero follows the theme: light on light, dark on dark; the 3D stage stays a dark screen */
.hero-band { color: var(--hero-ink); background: var(--hero-bg); }
.hero-band::before { background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); }
.hero-copy h1 { color: var(--heading); letter-spacing: -0.035em; }
.hero-copy h1 i { font-style: normal; color: var(--subhead); }
.hero-copy .lead { color: var(--lead); font-size: 1.12rem; }
.hero-band .btn.ghost { color: var(--hero-ink); background: var(--hero-tile); border-color: var(--hero-tile-line); }
.hero-stats div { background: var(--hero-tile); border-color: var(--hero-tile-line); backdrop-filter: blur(6px); }
.hero-stats b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--heading); }
.hero-stats span { color: var(--hero-muted); }
.hero-stage { box-shadow: var(--stage-shadow); }

/* the homepage keeps a technical palette: the logo's navy and cyan with slate text; maroon headings and
   blue subheadings belong to the inner pages */
#view-overview { --heading: var(--home-ink); --subhead: var(--home-accent); --lead: var(--home-lead); }
#view-overview .btn.primary { color: var(--home-btn-ink); background: var(--home-btn); box-shadow: var(--home-btn-shadow); }

/* headings maroon, subheadings blue, on every page but the homepage */
h2.title, .page-title, .doc h1, .doc h2 { color: var(--heading); }
.kicker { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--subhead); }
.twice h3, .glance-head { color: var(--heading); }

/* concept pictures (concepts.js): shared parts */
.cx { display: block; width: 100%; height: auto; overflow: visible; }
.cx .ink { fill: none; stroke: var(--cx-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx .ink.thin { stroke-width: 1.4; }
.cx .soft { fill: var(--cx-soft); }
.cx .glass { fill: var(--cx-glass); }
.cx .dye { fill: #2563eb; }
.cx .water { fill: #bae6fd; }
.cx .pump { fill: #f59e0b; }
.cx .cx-t { font: 600 8px var(--sans); fill: var(--cx-ink); }
.cx .cx-t.dim { fill: var(--muted); font-weight: 500; }
.cx .cx-t.cx-mono { font-family: var(--mono); font-size: 7.5px; }
.cx .cx-t.tiny { font-size: 6.5px; font-weight: 700; }
.cx .tick { fill: none; stroke: #16a34a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx .cx-flow { stroke-dasharray: 3 4; animation: cxDash 1.2s linear infinite; }
.cx .cx-flow.back { animation-direction: reverse; }
.cx .okfill { fill: #16a34a; }
.cx .okc { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx .oktext { font: 700 9px var(--sans); fill: #fff; }
.cx .cx-badge, .cx .layer, .cx .cx-step, .cx .pv, .cx .pipfill, .cx .vfill, .cx .cx-bar { transform-box: fill-box; }
.cx .cx-badge { transform-origin: center; }
.cx .layer, .cx .cx-step, .cx .pv, .cx .pipfill, .cx .vfill { transform-origin: bottom; }
.cx .cx-bar { transform-origin: left; fill: #06b6d4; opacity: 0.85; }
@keyframes cxDash { to { stroke-dashoffset: -14; } }
/* design: ticks one after another; the target strengths breathe */
.c-design .t1 { animation: cxT1 5s infinite both; } .c-design .t2 { animation: cxT2 5s infinite both; } .c-design .t3 { animation: cxT3 5s infinite both; }
@keyframes cxT1 { 0%, 8% { opacity: 0; } 14%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cxT2 { 0%, 22% { opacity: 0; } 28%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cxT3 { 0%, 36% { opacity: 0; } 42%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.c-design .ghost { opacity: 0.6; animation: cxGhost 3s ease-in-out infinite; }
@keyframes cxGhost { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.9; } }
/* formulate: dye, then water, then they mix */
.c-formulate .l1 { animation: cxL1 5s ease-out infinite both; } .c-formulate .l2 { animation: cxL2 5s ease-out infinite both; }
.c-formulate .mixed { fill: #60a5fa; animation: cxMix 5s ease-in-out infinite both; }
@keyframes cxL1 { 0%, 6% { transform: scaleY(0); } 20%, 90% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes cxL2 { 0%, 24% { transform: scaleY(0); } 42%, 90% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes cxMix { 0%, 50% { opacity: 0; } 62%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* choose: three drops fill the pump vial step by step, the pipette empties into its vial, two checks */
.c-choose .drop { fill: #2563eb; }
.c-choose .d1 { animation: cxD1 4.5s ease-in infinite both; } .c-choose .d2 { animation: cxD2 4.5s ease-in infinite both; } .c-choose .d3 { animation: cxD3 4.5s ease-in infinite both; }
@keyframes cxD1 { 0% { transform: translateY(0); opacity: 0; } 2% { opacity: 1; } 11% { transform: translateY(40px); opacity: 1; } 12%, 100% { transform: translateY(40px); opacity: 0; } }
@keyframes cxD2 { 0%, 13% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 24% { transform: translateY(34px); opacity: 1; } 25%, 100% { transform: translateY(34px); opacity: 0; } }
@keyframes cxD3 { 0%, 26% { transform: translateY(0); opacity: 0; } 28% { opacity: 1; } 37% { transform: translateY(27px); opacity: 1; } 38%, 100% { transform: translateY(27px); opacity: 0; } }
.c-choose .s1 { animation: cxS1 4.5s infinite both; } .c-choose .s2 { animation: cxS2 4.5s infinite both; } .c-choose .s3 { animation: cxS3 4.5s infinite both; }
@keyframes cxS1 { 0%, 10% { transform: scaleY(0); } 13%, 92% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes cxS2 { 0%, 23% { transform: scaleY(0); } 26%, 92% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
@keyframes cxS3 { 0%, 36% { transform: scaleY(0); } 39%, 92% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
.c-choose .pipfill { animation: cxDrain 4.5s ease-in-out infinite both; } .c-choose .pv { animation: cxPv 4.5s ease-in-out infinite both; }
@keyframes cxDrain { 0%, 42% { transform: scaleY(1); } 58%, 92% { transform: scaleY(0.04); } 98%, 100% { transform: scaleY(1); } }
@keyframes cxPv { 0%, 42% { transform: scaleY(0); } 58%, 92% { transform: scaleY(1); } 97%, 100% { transform: scaleY(0); } }
.c-choose .cx-badge, .c-verify .cx-badge, .c-oracle .cx-badge { animation: cxPop 4.5s ease-out infinite both; }
@keyframes cxPop { 0%, 62% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 76%, 92% { transform: scale(1); opacity: 1; } 99%, 100% { transform: scale(0.6); opacity: 0; } }
/* organise: the route, the carriage on it, the frame turns green once every move fits */
.c-organise .frame { fill: none; stroke: var(--cx-line); stroke-width: 1.6; stroke-dasharray: 5 4; animation: cxFrame 5s ease-in-out infinite; }
.c-organise .route { fill: none; stroke: #06b6d4; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: 0.8; }
.c-organise .stop { fill: var(--cx-glass); stroke: #06b6d4; stroke-width: 1.6; }
.c-organise .carrier { fill: #f97316; }
.c-organise .frame-lbl { fill: #16a34a; font-size: 7.5px; animation: cxFrameLbl 5s ease-in-out infinite both; }
@keyframes cxFrame { 0%, 76% { stroke: var(--cx-line); } 82%, 96% { stroke: #16a34a; } 100% { stroke: var(--cx-line); } }
@keyframes cxFrameLbl { 0%, 76% { opacity: 0; } 82%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* instructions: commands written one by one, each checked */
.c-instructions .n1 { animation: cxN1 4.5s infinite both; } .c-instructions .n2 { animation: cxN2 4.5s infinite both; }
.c-instructions .n3 { animation: cxN3 4.5s infinite both; } .c-instructions .n4 { animation: cxN4 4.5s infinite both; }
@keyframes cxN1 { 0%, 4% { opacity: 0; } 12%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cxN2 { 0%, 18% { opacity: 0; } 26%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cxN3 { 0%, 32% { opacity: 0; } 40%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes cxN4 { 0%, 46% { opacity: 0; } 54%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* simulate: the carriage stops over each vial, the vial fills, the robot replies OK */
.c-simulate .carriage { animation: cxCarriage 6s ease-in-out infinite both; }
@keyframes cxCarriage { 0%, 22% { transform: translateX(40px); } 30%, 48% { transform: translateX(80px); } 56%, 84% { transform: translateX(120px); } 96%, 100% { transform: translateX(40px); } }
.c-simulate .f1 { animation: cxF1 6s ease-out infinite both; } .c-simulate .f2 { animation: cxF2 6s ease-out infinite both; } .c-simulate .f3 { animation: cxF3 6s ease-out infinite both; }
@keyframes cxF1 { 0%, 6% { transform: scaleY(0); } 16%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes cxF2 { 0%, 32% { transform: scaleY(0); } 42%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes cxF3 { 0%, 58% { transform: scaleY(0); } 68%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
.c-simulate .okbub rect { fill: #16a34a; }
.c-simulate .okbub text { font: 700 6.5px var(--sans); fill: #fff; }
.c-simulate .b1 { animation: cxB1 6s infinite both; } .c-simulate .b2 { animation: cxB2 6s infinite both; } .c-simulate .b3 { animation: cxB3 6s infinite both; }
@keyframes cxB1 { 0%, 16% { opacity: 0; } 19%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cxB2 { 0%, 42% { opacity: 0; } 45%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cxB3 { 0%, 68% { opacity: 0; } 71%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }
/* verify: the checker reads the sealed notebook, entry by entry */
.c-verify .hash { fill: var(--brand-cyan); }
.c-verify .link { stroke: var(--brand-cyan); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 3; }
.c-verify .lens { animation: cxLens 4.5s ease-in-out infinite both; }
@keyframes cxLens { 0% { transform: translateX(22px); } 60% { transform: translateX(128px); } 92% { transform: translateX(128px); } 100% { transform: translateX(22px); } }
/* oracle: forwards and backwards, then agreement */
.c-oracle .calc { font: 600 8.5px var(--mono); fill: var(--cx-ink); }
.c-oracle .calc.res { font: 700 8px var(--sans); fill: var(--subhead); }
.c-oracle .r1 { animation: cxR1 4.5s infinite both; } .c-oracle .r2 { animation: cxR2 4.5s infinite both; }
@keyframes cxR1 { 0%, 10% { opacity: 0; } 20%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cxR2 { 0%, 34% { opacity: 0; } 44%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
/* the four verdicts */
.cx.vi { width: 30px; height: 30px; flex: none; }
.cx .vring { fill: none; stroke-width: 2; opacity: 0.35; }
.cx .vmark { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; animation: cxDraw 3.2s ease-in-out infinite both; }
.cx .vmark.still { animation: none; stroke-dasharray: none; opacity: 0.8; }
.cx .pass { stroke: var(--pass); } .cx .fail { stroke: var(--fail); } .cx .unknown { stroke: var(--unknown); } .cx .notrun { stroke: var(--notrun); }
.cx .vwave { fill: none; stroke-width: 1.8; stroke-linecap: round; animation: cxWave 2.4s ease-out infinite both; }
.cx .vwave.w2 { animation-delay: 0.6s; }
.cx .vq { font: 800 13px var(--sans); fill: var(--unknown); }
@keyframes cxDraw { 0% { stroke-dashoffset: 32; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 32; } }
@keyframes cxWave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* where the pictures sit */
.s4-art { height: 92px; margin: -4px -4px 10px; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); }
.s4-art .cx { height: 100%; width: auto; margin: 0 auto; }
.steps4 h3 { margin-top: 4px; }
.lg-ico { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.st-body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.st-art { border-radius: 12px; padding: 4px 6px; background: color-mix(in srgb, var(--c) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); }
#stage-6 .st-body { grid-template-columns: minmax(0, 1fr) 220px; }
.twice { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: center; margin: 16px 0 4px; padding: 16px 18px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); }
.twice h3 { margin: 0 0 6px; font: 800 1.1rem var(--display); }
.twice p { margin: 0; color: var(--muted); }

/* the readiness marks come alive: met glows, the next level is on its way */
.readiness li.met .rd-mark { animation: rdGlow 2.8s ease-in-out infinite; }
.readiness li.next .rd-mark { position: relative; font-size: 0; }
.readiness li.next .rd-mark::after { content: ""; width: 18px; height: 6px; background: radial-gradient(circle, #fff 2px, transparent 2.5px) 0 50% / 6px 6px repeat-x; animation: rdDots 1.4s steps(4) infinite; }
@keyframes rdGlow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pass) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes rdDots { 0% { width: 0; } 100% { width: 24px; } }

/* the architecture diagram: a pulse runs through the blocks in the order they work */
.arch .bk { animation: bkPulse 9.6s ease-in-out infinite both; animation-delay: calc(var(--i, 0) * 1.2s); }
@keyframes bkPulse { 0%, 100% { box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 12%, transparent); } 6% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent), 0 16px 34px color-mix(in srgb, var(--c) 32%, transparent); } 14% { box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 12%, transparent); } }

/* the engine at a glance (how.js) */
.glance { margin: 18px 0 4px; padding: 10px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.glance-svg { display: block; width: 100%; height: auto; }
.gl-phase { fill: color-mix(in srgb, var(--c) 6%, transparent); stroke: color-mix(in srgb, var(--c) 30%, transparent); stroke-width: 1.4; }
.gl-ph { font: 800 17px var(--display); letter-spacing: 0.02em; }
.gl-box { fill: var(--panel); stroke: var(--c); stroke-width: 2; }
.gl-halo { fill: var(--c); opacity: 0; animation: glHalo 10.5s ease-in-out infinite both; animation-delay: calc(var(--k) * 1.5s); }
@keyframes glHalo { 0%, 100% { opacity: 0; } 4%, 10% { opacity: 0.55; } 16% { opacity: 0; } }
.gl-node { cursor: pointer; }
.gl-node:hover .gl-box, .gl-node:focus .gl-box { stroke-width: 3.5; }
.gl-num { fill: var(--c); }
.gl-numt { font: 800 12px var(--display); fill: #fff; }
.gl-t { font: 700 13.5px var(--sans); fill: var(--ink); }
.gl-b { font: 600 11px var(--mono); fill: var(--muted); }
.gl-flow { fill: none; stroke: var(--cx-line); stroke-width: 2.2; stroke-dasharray: 5 6; animation: cxDash 1s linear infinite; }
.gl-head { fill: var(--cx-line); }
.gl-oracle circle { fill: color-mix(in srgb, var(--pass) 12%, var(--panel)); stroke: var(--pass); stroke-width: 2; animation: glCheck 10.5s ease-in-out infinite both; animation-delay: calc(var(--k) * 1.5s + 0.5s); }
.gl-oracle path { fill: none; stroke: var(--pass); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes glCheck { 0%, 100% { fill: color-mix(in srgb, var(--pass) 12%, var(--panel)); } 4%, 10% { fill: color-mix(in srgb, var(--pass) 45%, var(--panel)); } 16% { fill: color-mix(in srgb, var(--pass) 12%, var(--panel)); } }
.gl-o { font: 600 11px var(--mono); fill: var(--muted); }
.gl-write { fill: none; stroke: var(--cx-line); stroke-width: 1.4; stroke-dasharray: 2 4; }
.gl-ledger { fill: color-mix(in srgb, var(--brand-cyan) 10%, var(--panel)); stroke: color-mix(in srgb, var(--brand-cyan) 60%, var(--line)); stroke-width: 1.6; }
.gl-lt { font: 700 13px var(--sans); fill: var(--brand-cyan-text); }
.gl-rec { fill: var(--brand-cyan); stroke: var(--brand-cyan-text); stroke-width: 1.2; opacity: 0.6; animation: glRec 10.5s ease-out infinite both; animation-delay: calc(var(--k) * 1.5s + 0.9s); }
@keyframes glRec { 0%, 100% { opacity: 0.6; } 3%, 12% { opacity: 1; transform: translateY(-2px); } 20% { opacity: 0.6; transform: none; } }
.gl-chain { fill: none; stroke: color-mix(in srgb, var(--brand-cyan) 70%, transparent); stroke-width: 2; stroke-dasharray: 3 4; }
.gl-read { fill: none; stroke: #a855f7; stroke-width: 2.6; }
.gl-rt { font: 700 12px var(--sans); fill: #a855f7; }
.gl-token { fill: #f97316; filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.85)); animation: glToken 10.5s ease-in-out infinite both; }
@keyframes glToken {
  0% { transform: translateX(96px); opacity: 0; } 2% { opacity: 1; }
  12% { transform: translateX(96px); } 16% { transform: translateX(268px); }
  26.3% { transform: translateX(268px); } 30.3% { transform: translateX(424px); }
  40.6% { transform: translateX(424px); } 44.6% { transform: translateX(580px); }
  54.9% { transform: translateX(580px); } 58.9% { transform: translateX(736px); }
  69.1% { transform: translateX(736px); } 73.1% { transform: translateX(904px); }
  83.4% { transform: translateX(904px); } 87.4% { transform: translateX(1070px); }
  97% { transform: translateX(1070px); opacity: 1; } 100% { transform: translateX(1070px); opacity: 0; }
}
.narrow-only { display: none; }
@media (max-width: 760px) {
  .glance { display: none; }
  .narrow-only { display: grid; }
  .twice { grid-template-columns: 1fr; }
  .st-body, #stage-6 .st-body { grid-template-columns: 1fr; }
  .st-art { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx *, .gl-halo, .gl-oracle circle, .gl-rec, .gl-token, .gl-flow, .arch .bk, .readiness .rd-mark, .readiness .rd-mark::after { animation: none !important; }
  .gl-token { display: none; }
}

/* ================================================================ 0.4.0: hardware communication
   The Hardware & deployment section: the four-stage deployment path, the communication lab (the
   link picture, the conversation played back by kind of message, the eight checks), the steps to
   connect a controller and the scope. The colours introduced here reach WCAG AA (4.5:1) on the background
   they sit on, in both themes (computed in Chrome): the kind tags at least 4.76:1 (light) and 5.49:1 (dark)
   on their tinted entries, the raw lines at least 5.69:1 and 5.22:1, white on the check pips at least 4.83:1.
   The verdict chips and the evidence categories are the site's own, shared with every section. */
:root {
  --hw-tx: #1d4ed8; --hw-rx: #15803d; --hw-ev: #0f766e; --hw-to: #9a3412; --hw-dis: #b91c1c; --hw-link: #475569; --hw-sim: #6d28d9;
  --hw-cable: #94a3b8; --hw-box: #f8fafc; --hw-raw: #475569;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hw-tx: #93c5fd; --hw-rx: #4ade80; --hw-ev: #5eead4; --hw-to: #fbbf24; --hw-dis: #f87171; --hw-link: #cbd5e1; --hw-sim: #c4b5fd;
    --hw-cable: #64748b; --hw-box: #0f172a; --hw-raw: #9eabc4;
  }
}
:root[data-theme="dark"] {
  --hw-tx: #93c5fd; --hw-rx: #4ade80; --hw-ev: #5eead4; --hw-to: #fbbf24; --hw-dis: #f87171; --hw-link: #cbd5e1; --hw-sim: #c4b5fd;
  --hw-cable: #64748b; --hw-box: #0f172a; --hw-raw: #9eabc4;
}
#view-hardware h3 { font: 800 1.02rem var(--display); margin: 0 0 8px; }
#view-hardware .hw-h { margin: 14px 0 8px; }

/* the deployment path */
.hw-track { list-style: none; margin: 16px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hw-stage { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.hw-stage::after { content: ""; position: absolute; top: 30px; right: -17px; width: 18px; height: 2px; background: var(--line-strong); }
.hw-stage:last-child::after { display: none; }
.hw-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 800 0.95rem var(--display); color: var(--muted); border: 2px solid var(--line-strong); background: var(--panel); }
.hw-stage b { font: 800 1.02rem var(--display); color: var(--ink); }
.hw-what { color: var(--muted); font-size: 0.9rem; }
.hw-state { margin-top: auto; align-self: flex-start; font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.hw-state.on { color: var(--pass); border-color: color-mix(in srgb, var(--pass) 60%, var(--line)); background: color-mix(in srgb, var(--pass) 8%, var(--panel)); }
.hw-stage.now { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.hw-stage.now .hw-num { color: var(--panel); background: var(--accent); border-color: var(--accent); }

/* the communication lab */
.hw-modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 14px; }
.hw-modebar .fine { margin: 0; flex: 1 1 320px; }
.hw-mode button { font-size: 0.88rem; padding: 8px 14px; }
.hw-mode button[disabled] { cursor: not-allowed; opacity: 0.55; }
.hw-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hw-pic { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.hw-box { fill: var(--hw-box); stroke: var(--line-strong); stroke-width: 1.5; }
.hw-box-t { font: 700 15px var(--sans); fill: var(--ink); }
.hw-box-s { font: 500 11px var(--mono); fill: var(--muted); }
.hw-cable { fill: none; stroke: var(--hw-cable); stroke-width: 4; stroke-linecap: round; }
.hw-plug { fill: var(--hw-cable); }
.hw-msg { font: 600 11px var(--mono); fill: var(--muted); }
.hw-dot { stroke: var(--panel); stroke-width: 1.5; }
.hw-dot.tx { fill: var(--hw-tx); } .hw-dot.rx { fill: var(--hw-rx); } .hw-dot.event { fill: var(--hw-ev); } .hw-dot.discard { fill: var(--hw-dis); }
.hw-light { stroke: var(--panel); stroke-width: 2; }
.hw-light.idle { fill: var(--notrun); } .hw-light.connected { fill: var(--pass); } .hw-light.lost { fill: var(--fail); }
.hw-light.waiting { fill: var(--unknown); animation: hwPulse 1s ease-in-out infinite; }
@keyframes hwPulse { 50% { opacity: 0.35; } }
.hw-light-text { text-align: center; margin: 2px 0 10px; font-size: 0.88rem; color: var(--muted); }
.hw-light-text b { color: var(--ink); }
.hw-pips-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.hw-pips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.hw-pips li { font: 600 0.72rem var(--mono); padding: 2px 7px; border-radius: 6px; border: 1px dashed var(--line-strong); color: var(--muted); }
.hw-pips li.PASS, .hw-pips li.FAIL, .hw-pips li.UNKNOWN, .hw-pips li.NOT_RUN { color: #fff; border-style: solid; }
.hw-pips li.PASS { background: #15803d; border-color: #15803d; } .hw-pips li.FAIL { background: #dc2626; border-color: #dc2626; }
.hw-pips li.UNKNOWN { background: #b45309; border-color: #b45309; } .hw-pips li.NOT_RUN { background: #6b7280; border-color: #6b7280; }
.hw-id { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 6px; }
.hw-id dt { font-size: 0.74rem; color: var(--muted); }
.hw-id dd { margin: 0; font-family: var(--mono); font-size: 0.84rem; overflow-wrap: anywhere; }
.hw-noid { margin: 0; }
.hw-controls label { margin-top: 0; }
.hw-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.hw-set-grid label { margin: 6px 0; }
.hw-settings .fine { margin: 6px 0 0; }
.hw-settings input[aria-invalid="true"] { border-color: var(--fail); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fail) 18%, transparent); }
.hw-confirm { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--unknown) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--unknown) 7%, var(--panel)); }
.hw-runrow { margin-top: 12px; }
.hw-runrow .muted { flex: 1 1 220px; font-size: 0.9rem; }

/* the conversation, played back */
.hw-conv { margin-top: 16px; }
.hw-conv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hw-conv-head .hw-h { margin-top: 0; }
.hw-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
.hw-legend b { margin-right: 5px; }
.hw-legend .lg-tx b { color: var(--hw-tx); } .hw-legend .lg-rx b { color: var(--hw-rx); } .hw-legend .lg-to b { color: var(--hw-to); }
.hw-legend .lg-dis b { color: var(--hw-dis); } .hw-legend .lg-sim b { color: var(--hw-sim); }
.hw-timeline { list-style: none; margin: 4px 0 0; padding: 0 4px 0 0; max-height: 470px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.hw-timeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hw-empty { padding: 10px 2px; }
.hw-e { --kc: var(--hw-link); display: grid; grid-template-columns: 78px 108px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 7px 10px;
  border-left: 3px solid var(--kc); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--kc) 4%, var(--panel)); }
.hw-e.in { animation: hwIn 0.28s ease-out both; }
@keyframes hwIn { from { opacity: 0; transform: translateY(4px); } }
.hw-e.k-tx { --kc: var(--hw-tx); } .hw-e.k-rx { --kc: var(--hw-rx); } .hw-e.k-event { --kc: var(--hw-ev); } .hw-e.k-timeout { --kc: var(--hw-to); }
.hw-e.k-discard, .hw-e.k-link_down { --kc: var(--hw-dis); } .hw-e.k-simulator { --kc: var(--hw-sim); }
.hw-e.k-timeout, .hw-e.k-discard, .hw-e.k-link_down { background: color-mix(in srgb, var(--kc) 10%, var(--panel)); }
.hw-e.k-simulator { border-left-style: dashed; background: color-mix(in srgb, var(--hw-sim) 9%, var(--panel)); }
.hw-e.k-simulator .hw-say { font-style: italic; }
.hw-t { display: flex; flex-direction: column; font-size: 0.74rem; color: var(--muted); }
.hw-c { font-size: 0.68rem; }
.hw-k { font-size: 0.72rem; font-weight: 700; color: var(--kc); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.hw-k b { display: inline-block; width: 1.4em; font-size: 0.95rem; }
.hw-b { min-width: 0; }
.hw-say { margin: 0; font-size: 0.9rem; color: var(--ink); }
.hw-why { display: block; font-size: 0.82rem; color: var(--muted); }
.hw-raw { display: inline-block; margin-top: 3px; font-size: 0.74rem; color: var(--hw-raw); word-break: break-all; }
.hw-rtt { margin-left: 8px; font-size: 0.74rem; color: var(--muted); font-family: var(--mono); white-space: nowrap; }

/* the results */
.hw-results { margin-top: 16px; }
#view-hardware .hw-res-h { margin-top: 0; }
.hw-res-h:focus { outline: none; }
.hw-res-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.hw-tally { margin: 0 0 10px; font-size: 0.92rem; }
.hw-playing { margin: 0; color: var(--muted); }
.hw-summary { font-size: 1.02rem; margin: 10px 0 4px; }
.hw-verdict .fine { margin: 4px 0 0; }
.badge.meas { color: var(--pass); border-color: var(--pass); }
.hw-table { max-width: 100%; overflow-x: auto; }
.hw-checks-t th[scope="row"] { color: var(--ink); font-size: 0.86rem; font-weight: 700; min-width: 160px; }
.hw-q { display: block; font-weight: 400; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.hw-checks-t td { font-size: 0.86rem; }
.hw-checks-t tr.open td { color: var(--muted); }
.hw-checks-t td:last-child { white-space: nowrap; }
.chip.hw-pend { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); font-weight: 600; }
.hw-wait { color: var(--muted); }
.hw-after h3 { margin: 18px 0 8px; }
.hw-d .cat { min-width: 0; }
.hw-evi td:first-child { width: 200px; }
.hw-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.hw-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 6px; }
.hw-stats div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.hw-stats dt { font-size: 0.74rem; color: var(--muted); }
.hw-stats dd { margin: 2px 0 0; font: 700 0.95rem var(--mono); }
.hw-scn p { margin: 0 0 8px; }
.hw-pred { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
.hw-pred.yes { border-color: color-mix(in srgb, var(--pass) 45%, var(--line)); background: color-mix(in srgb, var(--pass) 7%, var(--panel)); }
.hw-pred.no { border-color: color-mix(in srgb, var(--unknown) 45%, var(--line)); background: color-mix(in srgb, var(--unknown) 8%, var(--panel)); }
.hw-repro pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 6px; }

/* connect a controller, and the scope */
.hw-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.hw-steps { margin: 0; padding: 0; list-style: none; counter-reset: hwstep; display: flex; flex-direction: column; gap: 12px; }
.hw-steps li { counter-increment: hwstep; position: relative; padding: 14px 16px 14px 58px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.hw-steps li::before { content: counter(hwstep); position: absolute; left: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 800 0.9rem var(--display); color: var(--panel); background: var(--subhead); }
.hw-steps pre { margin: 8px 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: none; }
.hw-steps code { overflow-wrap: anywhere; }
.hw-safe ul { padding-left: 18px; margin: 0 0 8px; }
.hw-safe li { margin: 7px 0; }
.hw-lim { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.hw-lim .card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 1000px) {
  .hw-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-stage::after { display: none; }
  .hw-grid, .hw-two, .hw-more { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hw-track { grid-template-columns: 1fr; }
  .hw-e { grid-template-columns: auto minmax(0, 1fr); }
  .hw-t { flex-direction: row; gap: 8px; }
  .hw-e .hw-b { grid-column: 1 / -1; }
  .hw-id { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-set-grid { grid-template-columns: 1fr; }
  .hw-checks-t thead { display: none; }
  .hw-checks-t tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .hw-checks-t th, .hw-checks-t td { display: block; border: 0; padding: 2px 0; }
  .hw-checks-t td::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--muted); font-weight: 650; }
  .hw-checks-t td:last-child { white-space: normal; }
  .hw-evi tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .hw-evi td { display: block; border: 0; padding: 1px 0; width: auto !important; }
  .hw-steps li { padding: 50px 14px 14px; }
  .hw-steps li::before { top: 14px; left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-e.in, .hw-light.waiting { animation: none !important; }
  .hw-dot { display: none; }
}

/* seven sections in the header: up to 1380 px wide they take their own row under the brand (and wrap on
   phones), so none is hidden off the edge (they need about 860 px beside the brand and the version, more
   with a classic scrollbar or a fallback font); anchored sections stay clear of the taller sticky header */
@media (max-width: 1380px) {
  .bar { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 8px 26px; }
  .meta { margin-left: auto; }
  .tabs { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
  [id] { scroll-margin-top: 170px; }
}
@media (max-width: 700px) { [id] { scroll-margin-top: 200px; } }
@media (min-width: 701px) and (max-width: 900px) { .tabs a { padding: 7px 10px; } }

/* ================================================================ 0.4.1: the hardware qualification record */
.hw-rec-table { padding: 0; overflow: hidden; }
.hw-rec-rows { width: 100%; border-collapse: collapse; }
.hw-rec-rows th, .hw-rec-rows td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hw-rec-rows tr:last-child th, .hw-rec-rows tr:last-child td { border-bottom: 0; }
.hw-rec-rows th { width: 34%; font-weight: 700; }
.hw-rec-rows th .fine { display: block; font-weight: 400; margin-top: 2px; }
.hw-rec-none { color: var(--muted); }
.hw-rec-open { font-weight: 700; }
.hw-rec { margin-top: 14px; }
.hw-rec-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.hw-rec h4 { margin: 16px 0 6px; font-size: 0.95rem; }
.hw-rec-grid, .hw-rec-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; }
.hw-rec-setup { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.hw-rec-setup dt { font-weight: 600; color: var(--muted); }
.hw-rec-setup dd { margin: 0; }
.hw-rec-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hw-rec-checks .fine { display: block; margin: 2px 0 0 0; }
.hw-rec-comp { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hw-rec-comp th, .hw-rec-comp td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hw-rec-comp thead th { font-weight: 600; color: var(--muted); }
.hw-rec-seal { margin-top: 14px; }
.hw-rec-report { margin-top: 12px; }
.hw-rec-report summary { cursor: pointer; font-weight: 600; }
.hw-rec-report .doc { margin-top: 10px; max-height: 520px; overflow: auto; }
.hw-rec pre.code { white-space: pre-wrap; word-break: break-word; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
@media (max-width: 760px) {
  .hw-rec-grid, .hw-rec-two { grid-template-columns: 1fr; }
  .hw-rec-rows th { width: 42%; }
  .hw-rec-setup { grid-template-columns: 1fr; gap: 0; }
  .hw-rec-setup dd { margin-bottom: 8px; }
}

/* ================================================================ 0.5.0: a calm first screen, then deeper on request */
.hero-copy h1.plain-h1 { font-size: clamp(1.85rem, 3.05vw, 2.6rem); line-height: 1.12; letter-spacing: -0.025em; margin: 14px 0 14px; }
.first-exp { margin-top: 22px; padding: 18px 20px 16px; border-radius: 16px; background: var(--hero-tile); border: 1px solid var(--hero-tile-line);
  box-shadow: 0 12px 30px rgba(11, 31, 51, 0.08); max-width: 560px; }
.first-exp h2 { margin: 4px 0 12px; font-size: 1.15rem; line-height: 1.3; color: var(--hero-ink); }
.fx-tag { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--home-accent); }
.fx-virtual { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.04em; border: 1px solid var(--hero-tile-line); color: var(--hero-muted); }
.fx-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.fx-facts div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hero-tile-line); }
.fx-facts dt { font-size: 0.75rem; color: var(--hero-muted); }
.fx-facts dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; color: var(--hero-ink); font-variant-numeric: tabular-nums; }
.fx-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--hero-muted); }
.fx-more { margin: 14px 0 0; font-size: 0.95rem; }
.fx-more a { color: var(--hero-muted); text-decoration: underline; text-underline-offset: 3px; }
.fx-more a:hover { color: var(--hero-ink); }
.home-stats { margin: 4px 0 18px; max-width: none; }
.home-stats div { background: var(--panel); border: 1px solid var(--line); backdrop-filter: none; }
.home-stats b { color: var(--heading); }
.home-stats span { color: var(--muted); }
.deeper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.deeper a { display: block; padding: 16px 16px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; }
.deeper a:hover { border-color: var(--home-accent); }
.deeper b { display: block; margin-bottom: 4px; color: var(--heading); }
.deeper span { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 1100px) { .deeper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .deeper { grid-template-columns: 1fr; }
  .fx-facts { gap: 6px; }
  .fx-facts dd { font-size: 1.05rem; }
  .first-exp { padding: 14px 14px 12px; }
}

/* the guided run's three depths: the depth switch, the five-question record, technical identifiers */
.depth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--subhead) 6%, var(--panel)); border: 1px solid var(--line); }
.depth-q { font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.depth-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.depth-btns button { font: inherit; font-size: 0.86rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel);
  color: var(--ink); cursor: pointer; }
.depth-btns button.on { background: var(--subhead); border-color: var(--subhead); color: #fff; font-weight: 600; }
.depth-btns button:focus-visible { outline: 2px solid var(--subhead); outline-offset: 2px; }
.vrec { margin: 6px 0 14px; }
.vrec-h { margin: 0 0 8px; font-size: 1rem; }
.vrec dl { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vrec-row { display: grid; grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.vrec-row:last-child { border-bottom: 0; }
.vrec dt { font-weight: 700; font-size: 0.88rem; color: var(--heading); }
.vrec dd { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.vrec-limits { background: color-mix(in srgb, #f59e0b 6%, var(--panel)); }
.vrec-list { margin: 0; padding-left: 18px; }
.vrec-list li + li { margin-top: 4px; }
.vrec-sub { margin: 14px 0 6px; font-size: 0.92rem; }
.tech-ids { word-break: break-all; }
.sim-badge { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em; background: rgba(124, 58, 237, 0.88); color: #fff; pointer-events: auto; }
@media (max-width: 560px) {
  .vrec-row { grid-template-columns: 1fr; gap: 2px; }
  .depth-btns button { font-size: 0.8rem; padding: 6px 10px; }
}

/* 0.5.0 layout fixes: the depth switch on one line, technical identifiers as key/value rows, the badge clear of the chip */
.depth { flex-direction: column; align-items: stretch; gap: 8px; }
.depth-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.depth-btns button { padding: 7px 6px; font-size: 0.84rem; line-height: 1.2; text-align: center; }
.plan-checks .pc-o.plain { font-family: inherit; font-size: 0.76rem; }
table.kv-tech { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 0.84rem; }
table.kv-tech th { text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap; width: 1%; padding: 6px 14px 6px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
table.kv-tech td { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
table.kv-tech td.hash { font: 0.76rem var(--mono); overflow-wrap: anywhere; }
.sim-badge { left: 12px; right: auto; top: 12px; }
@media (max-width: 560px) { .depth-btns button { font-size: 0.78rem; padding: 7px 4px; } }
.depth-btns button.on { color: var(--bg); }   /* white on blue in light mode, dark on light blue in dark mode */

/* a link-styled button (the simple depth's "Read it in the engine's words") */
button.linkish { font: inherit; padding: 0; border: 0; background: none; color: var(--subhead); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.linkish:focus-visible { outline: 2px solid var(--subhead); outline-offset: 2px; }
@media (max-width: 560px) { .sim-badge { top: 54px; font-size: 0.66rem; } }   /* below the step chip on phones */

/* 0.5.1: the five questions everywhere (the expert inspector, the hardware record) */
.q5 { padding: 12px 0 2px; border-top: 1px solid var(--line); }
.q5:first-of-type { border-top: 0; }
.q5-h, .hw-rec h4.q5-h { margin: 0 0 4px; font-size: 0.95rem; color: var(--heading); }
#inspector .q5 .field { border-bottom: 0; padding: 6px 0; }
.hw-rec .hw-rec-sub { margin: 4px 0 6px; font-size: 0.88rem; color: var(--muted); }

/* ================================================================ VChem, the virtual laboratory (VL-001) */
.vchem-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 4px 0 8px; }
.vchem-form label, .vchem-run label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; color: var(--muted); }
.vchem-form select, .vchem-form input, .vchem-run select, .vchem-run input { font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.vchem-form button { grid-column: 1 / -1; justify-self: start; }
.vchem-h { margin: 16px 0 6px; font-size: 1rem; }
.vchem-list { margin: 0; padding-left: 20px; }
.vchem-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 3px 0; }
.vchem-run { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 6px; }
.vchem-run label.check { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.vchem-expect .vchem-vial { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 0.92rem; }
.vchem-expect .fine { display: block; margin-top: 4px; }
.vchem-expect .bad { color: var(--fail); }
.vchem-notes { margin: 6px 0 0; padding-left: 18px; color: var(--fail); font-size: 0.88rem; }
.vchem-examples { display: grid; gap: 6px; }
.vchem-ex { display: grid; gap: 2px; text-align: left; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.vchem-ex:hover, .vchem-ex.on { border-color: var(--subhead); }
.vchem-ex b { font-size: 0.9rem; }
.vchem-ex span { font-size: 0.82rem; color: var(--muted); }
.vgrid.list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vgrid.list .vcard { display: grid; gap: 4px; }
.vchem-record { margin-top: 16px; }
.vchem-rec-h { margin: 0 0 8px; font-size: 1.05rem; }
.vchem-rec-btns { margin: 8px 0 0; }
.vchem-record .vrec dd b.good { color: var(--pass); } .vchem-record .vrec dd b.bad { color: var(--fail); } .vchem-record .vrec dd b.warn { color: var(--unknown); }
@media (max-width: 560px) { .vchem-form, .vchem-run { grid-template-columns: 1fr; } }
.vchem-wait { margin: 12px 0 0; }

/* ================================================================ VL-002: the simple bench */
.vchem-step { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.vchem-step:last-of-type { border-bottom: 0; }
.vchem-step h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 2px 0 8px; }
.vchem-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--subhead); color: var(--bg); font: 800 0.9rem var(--display); }
.vchem-rack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.vchem-tube { display: grid; grid-template-rows: 30px auto; justify-items: center; gap: 2px; padding: 4px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: 700 0.72rem var(--mono); color: var(--muted); }
.vchem-tube .vial { position: relative; width: 12px; height: 28px; border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent); border-top: 0; border-radius: 0 0 5px 5px; overflow: hidden; }
.vchem-tube .vial i { position: absolute; left: 0; right: 0; bottom: 0; }
.vchem-tube.on { border-color: var(--subhead); box-shadow: 0 0 0 2px color-mix(in srgb, var(--subhead) 35%, transparent); color: var(--ink); }
.vchem-tube.full .no { color: var(--ink); }
.vchem-tube-line { margin: 8px 0 0; font-size: 0.92rem; }
.vchem-bottles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.vchem-bottle { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; text-align: center; }
.vchem-bottle .swatch { width: 22px; height: 30px; border-radius: 4px 4px 7px 7px; border: 1px solid var(--line-strong); }
.vchem-bottle b { font-size: 0.9rem; }
.vchem-bottle span:last-child { font-size: 0.74rem; color: var(--muted); }
.vchem-bottle.on { border-color: var(--subhead); box-shadow: 0 0 0 2px color-mix(in srgb, var(--subhead) 35%, transparent); }
.vchem-amount { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: end; }
.vchem-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.vchem-chips .chip { font: 600 0.8rem var(--sans); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; }
.vchem-chips .chip.on { background: var(--subhead); border-color: var(--subhead); color: var(--bg); }
.vchem-amount label { display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; color: var(--muted); }
.vchem-amount input { font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); width: 140px; }
.vchem-measure { margin-top: 8px; }
.vchem-reading { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.vchem-reading h4 { margin: 0 0 6px; font-size: 0.95rem; }
.vchem-reading p { margin: 0 0 6px; font-size: 0.92rem; }
.vchem-reading table.mini { margin: 4px 0 8px; }
.vchem-more { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 10px; }
.vchem-more summary { font-weight: 700; color: var(--ink); cursor: pointer; padding: 6px 0; }
.vchem-btns { margin: 8px 0; flex-wrap: wrap; gap: 6px; }
.vchem-record-wrap { margin-top: 16px; }
.vchem-record-wrap summary { font-weight: 700; cursor: pointer; }
.vchem-record-wrap .vchem-record { margin-top: 10px; }
table.vchem-cal td.num, table.vchem-cal th { white-space: nowrap; }
@media (max-width: 560px) { .vchem-rack { grid-template-columns: repeat(8, minmax(0, 1fr)); } .vchem-amount { grid-template-columns: 1fr; } .vchem-amount input { width: 100%; } }

/* ================================================================ VR-001: the room */
.xr-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 10px; }
.xr-row .fine { flex: 1 1 100%; margin: 0; }
.vchem-stage.room { cursor: crosshair; }
.vchem-stage.room-preview { cursor: grab; }
.vchem-stage.room-preview:active { cursor: grabbing; }
.vchem-stage.room .tour-labels, .vchem-stage.room .vchem-picks { display: none; }
.vchem-stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; min-height: 0; border-radius: 0; }
.vchem-stage:fullscreen canvas { width: 100% !important; height: 100% !important; }
.vchem-ready h2 { font-size: 1.15rem; margin: 2px 0 8px; }
.vchem-exps { display: grid; gap: 6px; }
.vchem-exp { display: grid; gap: 3px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.vchem-exp.on { border-color: var(--subhead); box-shadow: 0 0 0 2px color-mix(in srgb, var(--subhead) 35%, transparent); }
.vchem-exp .kind { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 700 0.72rem var(--sans); }
.vchem-exp .kind-complete { background: color-mix(in srgb, var(--pass) 16%, transparent); color: var(--pass); }
.vchem-exp .kind-failure { background: color-mix(in srgb, var(--fail) 16%, transparent); color: var(--fail); }
.vchem-exp-verdict { margin: 8px 0 0; font-size: 0.92rem; }
.vchem-checks { margin: 4px 0 0; padding-left: 18px; font-size: 0.86rem; color: var(--muted); }
.vchem-checks li.ko { color: var(--fail); }

/* ================================================================ VL-004: the bench keeps its state */
.vchem-start { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--subhead) 6%, var(--panel)); }
.vchem-start p { margin: 0 0 8px; }
.vchem-start .kicker { margin-bottom: 4px; }
.vchem-guide { padding: 10px 12px; border: 1px solid var(--subhead); border-radius: 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--subhead) 8%, var(--panel)); }
.vchem-guide h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.vchem-guide p { margin: 0 0 8px; }
.vchem-guide .kicker { margin-bottom: 2px; }
.vchem-tube.pending { border-style: dashed; border-color: var(--subhead); }
.vchem-steps { margin-top: 8px; }
.vchem-steplist { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.vchem-steplist li { margin: 3px 0; }
.vchem-steplist li.on > span:first-child { font-weight: 700; }
.vchem-steplist li.ko > span:first-child { text-decoration: line-through; color: var(--muted); }
.ghost-btn.tiny { padding: 1px 8px; font-size: 0.75rem; margin-left: 6px; }
table.vchem-states { margin: 4px 0 10px; }
table.vchem-states th { white-space: nowrap; }

/* ================================================================ 0.10.0: experiments without code, the report, the workflow */
.vchem-exp-templates h2 { font-size: 1.15rem; margin: 2px 0 8px; }
.vchem-templates { display: grid; gap: 8px; }
.vchem-template { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.vchem-template.on { border-color: var(--subhead); box-shadow: 0 0 0 2px color-mix(in srgb, var(--subhead) 35%, transparent); }
.vchem-template summary { font-weight: 700; cursor: pointer; }
.vchem-template .aim { margin: 6px 0 8px; font-size: 0.9rem; color: var(--muted); }
.vchem-tform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 8px; }
.vchem-tform label { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.vchem-tform input, .vchem-tform select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.vchem-template-result { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.92rem; }
.vchem-template-result ul { margin: 4px 0 8px; padding-left: 18px; }
.vchem-exports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vchem-tube.hidden-unknown .vial i { background: repeating-linear-gradient(45deg, #8b93a7 0 3px, #c3c8d6 3px 6px) !important; }
@media (max-width: 560px) { .vchem-tform { grid-template-columns: 1fr; } }

/* ================================================================ 0.11.0: the way into the 3D lab */
.vchem-3d { display: grid; gap: 4px; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; text-decoration: none; color: #e8f1ff;
  background: radial-gradient(120% 140% at 0% 0%, #1e3a8a 0%, #0f172a 55%, #0b1220 100%); border: 1px solid #1e40af; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28); }
.vchem-3d:hover, .vchem-3d:focus-visible { border-color: #38bdf8; box-shadow: 0 12px 28px rgba(14, 165, 233, 0.28); }
.vchem-3d-k { font: 700 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #7dd3fc; }
.vchem-3d b { font-size: 1.08rem; color: #fff; }
.vchem-3d span:last-child { font-size: 0.88rem; color: #c7d2fe; }