/* Blackglass components. Load after tokens.css. Every class starts with b-. */

/* ---------- Motion (no token family for motion; these are the only values) ---------- */
:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='.8'%3E%3Cpath d='m0 150 150-150 150 150-150 150zm-150 0L0 0l150 150L0 300zm300 0L300 0l150 150-150 150z'/%3E%3Cpath d='M150 0v300M0 150h300' stroke-dasharray='2 6' stroke-opacity='.15'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
.b-canvas {
  margin: 0;
  background: var(--bg-050);
  color: var(--ink-100);
  font: 400 15px/1.65 var(--font-sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
/* The reset uses :where() so every component class below wins over it. */
:where(.b-canvas) *,
:where(.b-canvas) *::before,
:where(.b-canvas) *::after { box-sizing: border-box; }
:where(.b-canvas) ::selection { background: var(--signal-deep); color: var(--ink-100); }
:where(.b-canvas) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:where(.b-canvas) :where(h1, h2, h3, h4, h5, p, figure, dl, dd) { margin: 0; }
:where(.b-canvas) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.b-canvas) :where(a) { color: inherit; }
:where(.b-canvas) :where(button) { font: inherit; color: inherit; }

.b-icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.b-icon--sm { width: 18px; height: 18px; }
.b-icon--lg { width: 32px; height: 32px; stroke-width: 1.2; }
.b-arrow {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease-out);
}
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Logo ---------- */
.b-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 22px/1 var(--font-sans);
  letter-spacing: -0.045em;
  color: var(--ink-100);
  text-decoration: none;
}
.b-logo--sm { font-size: 17px; gap: 7px; }
.b-logo--sm .b-mark { --m: 7px; }
.b-mark {
  --m: 9px;
  display: grid;
  grid-template-columns: repeat(2, var(--m));
  gap: calc(var(--m) * 0.22);
  flex: none;
}
.b-mark i { width: var(--m); height: var(--m); background: currentColor; }
.b-mark i:last-child { background: var(--signal); }
.b-emblem {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--bg-100);
  border: 1px solid var(--line-200);
  color: var(--ink-100);
  box-shadow: var(--shadow-edge), var(--shadow-offset);
  transform: rotate(-7deg);
}
.b-emblem .b-mark { --m: 11px; transform: rotate(7deg); }

/* ---------- Actions ---------- */
.b-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.b-btn {
  --h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-100);
  font: 450 13.5px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.b-btn:hover .b-arrow { transform: translate(2px, -2px); }
.b-btn--primary {
  background: var(--ink-100);
  color: var(--on-ink);
  box-shadow: inset 0 -1px 0 #0000001f, 0 1px 2px #00000040;
}
.b-btn--primary:hover { background: var(--ink-050); }
.b-btn--secondary {
  background: var(--bg-100);
  border-color: var(--line-300);
  box-shadow: var(--shadow-edge);
}
.b-btn--secondary:hover { background: var(--bg-150); }
.b-btn--quiet { padding-inline: 10px; color: var(--ink-200); }
.b-btn--quiet:hover { color: var(--ink-100); background: var(--bg-150); }
.b-btn--sm { --h: 34px; padding: 0 12px; gap: 10px; border-radius: var(--radius-sm); font-size: 12.5px; }
.b-btn--icon { --h: 34px; width: var(--h); padding: 0; border-radius: var(--radius-sm); }
.b-btn--icon .b-icon { width: 16px; height: 16px; stroke-width: 1.6; }
.b-btn[disabled], .b-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.b-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink-100);
  font: 450 13px/1.3 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.b-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 21px;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.b-link:hover { color: var(--signal-hover); }
.b-link:hover::after { transform: scaleX(1); }
.b-link:hover .b-arrow { transform: translate(2px, -2px); }
.b-link--muted { color: var(--ink-200); }

/* ---------- Eyebrow, headings ---------- */
.b-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-300);
  font: 450 13px/1.2 var(--font-sans);
  letter-spacing: -0.005em;
}
.b-eyebrow::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--signal); }
.b-eyebrow--index {
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.b-eyebrow--index::before { display: none; }
.b-eyebrow--index { gap: 0; }
.b-eyebrow b { font-weight: 500; color: var(--ink-100); }

.b-heading { display: grid; gap: var(--space-5); max-width: 900px; }
.b-heading__title {
  font: 450 38px/1.12 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--ink-100);
  text-wrap: balance;
}
.b-heading__title span { color: var(--ink-300); }
.b-heading__intro {
  margin-top: 4px;
  max-width: 56ch;
  color: var(--ink-200);
  font: 400 17px/1.6 var(--font-sans);
  letter-spacing: -0.011em;
  text-wrap: pretty;
}
.b-heading--display .b-heading__title { font-size: 48px; line-height: 1.05; letter-spacing: -0.035em; }
.b-heading--center { justify-items: center; text-align: center; margin-inline: auto; }
.b-heading--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  column-gap: 64px;
  max-width: none;
}
.b-heading--split .b-eyebrow { grid-column: 1 / -1; }
.b-heading--split .b-heading__intro { max-width: 44ch; }
.b-lede {
  max-width: 34em;
  color: var(--ink-300);
  font: 400 26px/1.42 var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.b-lede strong { font-weight: 450; color: var(--ink-100); }

/* ---------- Frame, section, divider, viewfinder ---------- */
.b-frame {
  max-width: var(--page-width);
  margin-inline: auto;
  border-inline: 1px solid var(--line-200);
}
.b-section { padding: var(--page-gutter); }
.b-section + .b-section { border-top: 1px solid var(--line-200); }
.b-divider {
  position: relative;
  display: grid;
  place-items: center;
  height: 80px;
  border-block: 1px solid var(--line-200);
}
.b-divider::before,
.b-divider::after { content: ""; position: absolute; background: var(--line-200); }
.b-divider::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.b-divider::after { left: 0; right: 0; top: 50%; height: 1px; }
.b-divider > span {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  background: var(--bg-050);
  border: 1px solid var(--line-300);
}
.b-divider--signal > span::after { content: ""; position: absolute; inset: 4px; background: var(--signal); }
.b-ticks {
  --t: 12px;
  --c: var(--line-300);
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--t);
  background-repeat: no-repeat;
}

/* ---------- Stage and capture ---------- */
.b-stage {
  --stage: var(--stage-scope);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 56px 40px;
  background: radial-gradient(120% 70% at 50% 0%, #ffffff08, transparent 65%), var(--stage);
  border: 1px solid var(--line-200);
}
.b-stage::before,
.b-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.b-stage::before { background: var(--lattice) center / 300px; opacity: var(--lattice-opacity); }
.b-stage::after { background: var(--grain); mix-blend-mode: overlay; opacity: var(--grain-opacity); }
.b-stage--scope { --stage: var(--stage-scope); }
.b-stage--investigate { --stage: var(--stage-investigate); }
.b-stage--verify { --stage: var(--stage-verify); }
.b-stage--share { --stage: var(--stage-share); }
.b-stage--flush { border: 0; }
.b-stage__label,
.b-stage__index {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-300);
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.b-stage__label { top: 22px; left: 24px; }
.b-stage__label::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.b-stage__label--text { font: 450 13px/1.3 var(--font-sans); letter-spacing: -0.005em; text-transform: none; color: var(--ink-200); }
.b-stage__index { bottom: 16px; left: 18px; }
.b-stage__note {
  position: absolute;
  bottom: 18px;
  left: 24px;
  right: 24px;
  color: var(--ink-300);
  font: 400 12px/1.4 var(--font-sans);
  text-align: center;
}

.b-capture {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-100);
  box-shadow: var(--shadow-capture);
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease-out);
}
.b-capture img { width: 100%; height: auto; }
.b-capture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #ffffff17, inset 0 1px 0 #ffffff1f;
  pointer-events: none;
}
.b-capture--lg { border-radius: var(--radius-lg); }
.b-capture--sm { border-radius: var(--radius-sm); }
.b-capture:hover { transform: translateY(-2px); }
.b-capture__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-sm);
  background: var(--bg-veil);
  color: var(--ink-100);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.b-capture:hover .b-capture__zoom,
.b-capture:focus-visible .b-capture__zoom { opacity: 1; transform: none; }
.b-figure { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.b-figure figcaption { color: var(--ink-300); font: 400 12px/1.5 var(--font-sans); text-align: center; }

/* ---------- Badge ---------- */
.b-badge {
  --tone: var(--ink-200);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  color: var(--tone);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.b-badge::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.b-badge--hold { --tone: var(--signal); }
.b-badge--ship, .b-badge--verified { --tone: var(--status-verified); }
.b-badge--critical { --tone: var(--status-critical); }
.b-badge--high { --tone: var(--status-high); }
.b-badge--medium { --tone: var(--status-medium); }
.b-badge--low { --tone: var(--status-low); }
.b-badge--live::before { animation: b-blink 1.6s var(--ease-in-out) infinite; }
@keyframes b-blink { 50% { opacity: 0.25; } }

/* ---------- Tabs ---------- */
.b-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  background: var(--bg-000);
}
.b-tab {
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-200);
  font: 450 13px/1.3 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.b-tab:hover { color: var(--ink-100); }
.b-tab[aria-selected="true"] { background: var(--bg-200); color: var(--ink-100); box-shadow: var(--shadow-edge), 0 1px 2px #00000066; }
.b-tabs--line {
  gap: 24px;
  width: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-200);
  border-radius: 0;
  background: none;
}
.b-tabs--line .b-tab { position: relative; padding: 10px 0 12px; border-radius: 0; }
.b-tabs--line .b-tab[aria-selected="true"] { background: none; box-shadow: none; }
.b-tabs--line .b-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--signal); }

/* ---------- Viewer ---------- */
.b-viewer {
  width: min(960px, 100%);
  padding: 0;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-050);
  color: var(--ink-100);
  box-shadow: var(--shadow-dialog);
}
.b-viewer::backdrop { background: #030405d9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.b-viewer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--line-200);
  background: var(--bg-veil);
}
.b-viewer__kicker { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-viewer__title { margin-top: 4px; font: 450 16px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-viewer__image { display: grid; place-items: center; padding: 28px; background: var(--bg-000); }
.b-viewer__image img { width: auto; max-width: 100%; max-height: min(70vh, 560px); object-fit: contain; border-radius: var(--radius-sm); }
.b-viewer__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 20px; border-top: 1px solid var(--line-100); color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.b-viewer__pos { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

/* ---------- Chips and switch ---------- */
.b-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.b-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  background: var(--bg-100);
  color: var(--ink-200);
  font: 450 12.5px/1 var(--font-sans);
  white-space: nowrap;
}
.b-chip .b-icon { width: 15px; height: 15px; stroke-width: 1.6; color: var(--ink-300); }
.b-chip--optional { border-style: dashed; color: var(--ink-300); }
.b-switch {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-pill);
  background: var(--bg-000);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.b-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-300);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.b-switch[aria-checked="true"] { background: var(--ink-100); border-color: var(--ink-100); }
.b-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-ink); }
.b-switch[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }

/* ---------- Masthead ---------- */
.b-masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-veil);
  border-bottom: 1px solid var(--line-200);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.b-masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  max-width: var(--page-width);
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: 20px;
}
.b-masthead__nav {
  position: relative;
  display: flex;
  padding: 4px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-pill);
  background: var(--bg-100);
  box-shadow: var(--shadow-edge);
}
.b-masthead__nav a {
  position: relative;
  z-index: 1;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-200);
  font: 450 13px/1.2 var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.b-masthead__nav a:hover, .b-masthead__nav a[aria-current] { color: var(--ink-100); }
.b-masthead__nav:not(.is-ready) a[aria-current] { background: var(--bg-200); }
.b-masthead__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--w, 0);
  border-radius: var(--radius-pill);
  background: var(--bg-200);
  box-shadow: var(--shadow-edge);
  transform: translateX(var(--x, 0));
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.b-masthead__end { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.b-masthead__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.b-masthead__progress span { display: block; height: 100%; background: var(--signal); transform: scaleX(var(--p, 0)); transform-origin: left; }
.b-masthead__menu { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; place-items: center; }
.b-masthead__menu span { display: block; width: 20px; height: 1px; background: var(--ink-100); box-shadow: 0 6px 0 var(--ink-100); transform: translateY(-3px); }

/* ---------- Chapter rail ---------- */
.b-rail { --progress: 0; }
.b-rail ol { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.b-rail ol::before,
.b-rail ol::after { content: ""; position: absolute; left: 3px; top: 18px; width: 1px; }
.b-rail ol::before { bottom: 18px; background: var(--line-200); }
.b-rail ol::after { height: calc((100% - 36px) * var(--progress)); background: var(--signal); transition: height var(--dur-slow) var(--ease-out); }
.b-rail a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 12px 0 12px 26px;
  color: var(--ink-300);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.b-rail a::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 15px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-300);
  background: var(--bg-050);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.b-rail a:hover { color: var(--ink-100); }
.b-rail__num { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.b-rail__name { font: 450 15px/1.35 var(--font-sans); letter-spacing: -0.01em; }
.b-rail__hint { display: none; grid-column: 2; margin-top: 4px; color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); }
.b-rail a[data-state="done"] { color: var(--ink-200); }
.b-rail a[data-state="done"]::before { background: var(--ink-200); border-color: var(--ink-200); }
.b-rail a[aria-current] { color: var(--ink-100); }
.b-rail a[aria-current]::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); }
.b-rail a[aria-current] .b-rail__hint { display: block; }

/* ---------- Hero ---------- */
.b-hero { border-bottom: 1px solid var(--line-200); }
.b-hero__head { padding: 88px var(--page-gutter) 56px; }
.b-hero__title { margin-top: 28px; font: 450 76px/0.98 var(--font-sans); letter-spacing: -0.045em; text-wrap: balance; }
.b-hero__title span { display: block; color: var(--ink-300); }
.b-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); border-top: 1px solid var(--line-200); }
.b-hero__copy { display: flex; flex-direction: column; gap: 32px; padding: 48px 40px 48px var(--page-gutter); }
.b-hero__lead { max-width: 40ch; color: var(--ink-200); font: 400 17px/1.6 var(--font-sans); letter-spacing: -0.011em; }
.b-hero__assesses { display: grid; gap: 12px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line-200); }
.b-hero__assesses > p { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-hero__stage.b-stage { place-items: start; padding: 48px 0 48px 48px; border: 0; border-left: 1px solid var(--line-200); }
.b-hero__stage .b-console { width: calc(100% + 24px); padding-right: 24px; }

/* ---------- Run console ---------- */
.b-console {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--line-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-100);
  box-shadow: var(--shadow-edge), var(--shadow-capture);
}
.b-console__head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-200); }
.b-console__title { font: 450 14px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-console__target { color: var(--ink-300); font: 400 12px/1.3 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-console__head .b-badge { margin-left: auto; }
.b-console__phases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line-100);
  list-style: none;
  background: var(--bg-000);
}
.b-console__phases li { display: grid; gap: 8px; color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-console__phases li::before { content: ""; height: 3px; border-radius: 2px; background: var(--line-200); transition: background-color var(--dur-base) var(--ease-out); }
.b-console__phases li[data-state="done"] { color: var(--ink-200); }
.b-console__phases li[data-state="done"]::before { background: var(--ink-300); }
.b-console__phases li[data-state="active"] { color: var(--ink-100); }
.b-console__phases li[data-state="active"]::before { background: var(--signal); }
.b-console__log { margin: 0; padding: 8px 0; list-style: none; background: var(--bg-000); }
.b-console__row {
  --k: var(--ink-400);
  display: grid;
  grid-template-columns: 44px 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 7px 18px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.b-console__time { color: var(--ink-300); font: 400 12px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-console__agent { display: flex; align-items: center; gap: 8px; color: var(--ink-200); font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-console__agent::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--k); }
.b-console__msg { min-width: 0; color: var(--ink-100); font: 400 13px/1.45 var(--font-sans); }
.b-console__msg code { color: var(--ink-200); font: 400 12px/1.45 var(--font-mono); }
.b-console__row[data-kind="map"] { --k: var(--ink-300); }
.b-console__row[data-kind="probe"] { --k: var(--ink-200); }
.b-console__row[data-kind="candidate"] { --k: var(--signal); background: linear-gradient(90deg, var(--signal-wash), transparent 75%); }
.b-console__row[data-kind="replay"] { --k: var(--status-verified); }
.b-console__row[data-kind="report"] { --k: var(--ink-100); }
.b-console__row.is-hidden { opacity: 0; transform: translateY(4px); }
.b-console__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--line-200); transition: opacity var(--dur-base) var(--ease-out); }
.b-console__verdict-title { font: 450 15px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-console__verdict-note { margin-top: 2px; color: var(--ink-300); font: 400 12.5px/1.45 var(--font-sans); }
.b-console__verdict-note code { color: var(--ink-200); font: 400 12px/1.45 var(--font-mono); }
.b-console.is-running .b-console__verdict { opacity: 0.35; }

/* ---------- Scope manifest ---------- */
.b-manifest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border: 1px solid var(--line-200); background: var(--bg-100); }
.b-manifest__inputs { margin: 0; padding: 0; list-style: none; }
.b-manifest__input { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line-200); }
.b-manifest__input:last-child { border-bottom: 0; }
.b-manifest__input .b-icon { color: var(--ink-300); transition: color var(--dur-base) var(--ease-out); }
.b-manifest__input.is-on .b-icon { color: var(--ink-100); }
.b-manifest__label { color: var(--ink-100); font: 450 15px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-manifest__desc { display: block; margin-top: 3px; color: var(--ink-300); font: 400 12.5px/1.45 var(--font-sans); letter-spacing: 0; }
.b-manifest__doc { min-width: 0; padding: 0 0 16px; border-left: 1px solid var(--line-200); background: var(--bg-000); overflow-x: auto; }
.b-manifest__doc-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; margin-bottom: 10px; border-bottom: 1px solid var(--line-100); color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-manifest__lines { margin: 0; padding: 0; list-style: none; counter-reset: ln; }
.b-manifest__line {
  display: grid;
  grid-template-columns: 28px 104px minmax(0, 1fr);
  padding: 0 20px;
  font: 400 12.5px/2 var(--font-mono);
  white-space: nowrap;
  transition: background-color var(--dur-slow) var(--ease-out);
}
.b-manifest__line::before { counter-increment: ln; content: counter(ln, decimal-leading-zero); color: var(--ink-300); }
.b-manifest__key { color: var(--ink-300); }
.b-manifest__val { color: var(--ink-100); }
.b-manifest__val i { font-style: normal; color: var(--ink-300); }
.b-manifest__val.is-off { color: var(--ink-300); }
.b-manifest__line.is-changed { background: var(--signal-wash); }

/* ---------- Specimen cards ---------- */
.b-specimens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-200); border: 1px solid var(--line-200); }
.b-specimen { display: flex; flex-direction: column; min-width: 0; background: var(--bg-050); }
.b-specimen__view {
  position: relative;
  display: grid;
  place-items: center;
  height: 232px;
  padding: 28px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-200);
  background: radial-gradient(circle at 1px 1px, var(--line-200) 1px, transparent 0) 0 0 / 16px 16px, var(--bg-000);
}
.b-specimen__body { display: grid; justify-items: start; gap: 10px; padding: 24px 28px 28px; }
.b-specimen__index { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-specimen__title { font: 450 20px/1.3 var(--font-sans); letter-spacing: -0.015em; }
.b-specimen__text { max-width: 36ch; color: var(--ink-200); font: 400 13.5px/1.6 var(--font-sans); letter-spacing: 0; }
.b-specimen__body > .b-link { margin-top: 6px; }
.b-mini { width: 100%; max-width: 320px; border: 1px solid var(--line-300); border-radius: var(--radius-md); background: var(--bg-100); box-shadow: var(--shadow-edge), var(--shadow-float); }
.b-mini__row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-100); }
.b-mini__row:first-child { border-top: 0; }
.b-mini__key { color: var(--ink-300); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-mini__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-100); font: 400 12px/1.4 var(--font-mono); }
.b-mini__eq { color: var(--status-verified); font: 500 13px/1 var(--font-mono); }
.b-mini__ok { width: 8px; height: 8px; background: var(--status-verified); }
.b-track { position: relative; width: 100%; max-width: 340px; padding-top: 22px; }
.b-track__phases { display: flex; gap: 3px; height: 40px; }
.b-track__phases span { flex: var(--f, 1); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 6px 6px 0; border-radius: 2px; background: var(--bg-150); color: var(--ink-300); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.b-track__tick { position: absolute; top: 22px; left: var(--at); width: 2px; height: 14px; background: var(--ink-200); }
.b-track__tick--candidate { width: 8px; height: 8px; margin: -1px 0 0 -3px; background: var(--signal); transform: rotate(45deg); }
.b-track__tick--verified { width: 8px; height: 8px; margin: -1px 0 0 -3px; background: var(--status-verified); }
.b-track__head { position: absolute; top: 0; bottom: -18px; left: 66%; width: 1px; background: var(--ink-100); transition: left 0.9s var(--ease-in-out); }
.b-track__head::before { content: "04:39"; position: absolute; top: 0; left: 6px; color: var(--ink-100); font: 500 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-specimen:hover .b-track__head, .b-specimen:focus-within .b-track__head { left: 74%; }
.b-specimen:hover .b-track__head::before, .b-specimen:focus-within .b-track__head::before { content: "05:12"; }
.b-track__scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-300); font: 400 10.5px/1 var(--font-mono); }

/* ---------- Probe card ---------- */
.b-probe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 1px solid var(--line-200); background: var(--bg-100); }
.b-probe__ask { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 32px; border-right: 1px solid var(--line-200); }
.b-probe__kicker { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-probe__q { font: 450 26px/1.25 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.b-probe__d { color: var(--ink-200); font: 400 14px/1.65 var(--font-sans); letter-spacing: 0; }
.b-probe__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-200); color: var(--ink-300); font: 400 12px/1.5 var(--font-sans); }
.b-probe__run { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 28px 32px; background: var(--bg-000); }
.b-probe__steps { margin: 0; padding: 0; list-style: none; }
.b-probe__step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; transition: opacity var(--dur-base) var(--ease-out); }
.b-probe__step + .b-probe__step { border-top: 1px dashed var(--line-200); }
.b-probe__node { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-300); background: var(--bg-100); }
.b-probe__node::after { content: ""; width: 6px; height: 6px; background: var(--ink-200); transition: background-color var(--dur-base) var(--ease-out); }
.b-probe__kind { display: block; color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-probe__val { display: block; margin-top: 5px; color: var(--ink-100); font: 450 15px/1.35 var(--font-sans); letter-spacing: -0.01em; }
.b-probe__status { color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-probe__step--boundary .b-probe__node { border-color: var(--signal-edge); background: linear-gradient(var(--signal-wash), var(--signal-wash)), var(--bg-100); }
.b-probe__step--boundary .b-probe__node::after { background: var(--signal); }
.b-probe__step--boundary .b-probe__status { color: var(--signal); }
.b-probe__step.is-pending { opacity: 0.4; }
.b-probe__step.is-pending .b-probe__node::after { background: transparent; }
.b-probe__outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line-200); color: var(--ink-200); font: 400 13px/1.5 var(--font-sans); transition: opacity var(--dur-base) var(--ease-out); }
.b-probe.is-running .b-probe__outcome { opacity: 0.35; }

/* ---------- Replay diff ---------- */
.b-diff { border: 1px solid var(--line-200); background: var(--bg-100); }
.b-diff__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--line-200); }
.b-diff__id { color: var(--ink-200); font: 400 12px/1.3 var(--font-mono); }
.b-diff__table { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px minmax(0, 1fr); }
.b-diff__table > *, .b-diff__rows > * { padding: 14px 18px; border-top: 1px solid var(--line-100); }
.b-diff__rows { display: contents; }
.b-diff__table > .b-diff__colhead { padding-block: 12px; border-top: 0; color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-diff__key { color: var(--ink-300); font: 500 11px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-diff__cell { min-width: 0; color: var(--ink-100); font: 400 13.5px/1.45 var(--font-sans); letter-spacing: 0; }
.b-diff__cell code { color: var(--ink-200); font: 400 12px/1.45 var(--font-mono); }
.b-diff__cell--replay { background: var(--bg-150); }
.b-diff__table > .b-diff__colhead--replay { background: var(--bg-150); color: var(--ink-200); }
.b-diff__match { display: grid; place-items: center; padding-inline: 0; color: var(--status-verified); font: 500 15px/1 var(--font-mono); }
.b-diff__match[data-match="false"] { color: var(--signal); }
.b-diff__verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--line-200); background: var(--bg-000); color: var(--ink-200); font: 400 13.5px/1.5 var(--font-sans); }
.b-diff__verdict strong { color: var(--ink-100); font-weight: 450; }

/* ---------- Lifecycle accordion ---------- */
.b-lifecycle { display: flex; gap: 1px; min-height: 480px; border: 1px solid var(--line-200); background: var(--line-200); }
.b-lifecycle__panel {
  --stage: var(--stage-scope);
  position: relative;
  display: flex;
  flex: 0 0 84px;
  min-width: 0;
  background: var(--stage);
  transition: flex-grow var(--dur-slow) var(--ease-out), flex-basis var(--dur-slow) var(--ease-out);
}
.b-lifecycle__panel--investigate { --stage: var(--stage-investigate); }
.b-lifecycle__panel--verify { --stage: var(--stage-verify); }
.b-lifecycle__panel--share { --stage: var(--stage-share); }
.b-lifecycle__panel.is-open { flex: 1 1 0; }
.b-lifecycle__tab {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  width: 84px;
  padding: 24px 0 28px;
  border: 0;
  background: none;
  color: var(--ink-300);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.b-lifecycle__tab:hover { color: var(--ink-100); }
.b-lifecycle__num { font: 500 12px/1 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.b-lifecycle__name { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font: 450 22px/1 var(--font-sans); letter-spacing: -0.02em; }
.b-lifecycle__panel.is-open .b-lifecycle__tab { color: var(--ink-100); }
.b-lifecycle__panel.is-open .b-lifecycle__num { color: var(--signal); }
.b-lifecycle__content { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; flex: 1; min-width: 0; padding: 24px 32px 32px 0; }
.b-lifecycle__content[hidden] { display: none; }
.b-lifecycle__text { display: grid; gap: 8px; max-width: 52ch; }
.b-lifecycle__text h3 { font: 450 24px/1.25 var(--font-sans); letter-spacing: -0.02em; }
.b-lifecycle__text p { color: var(--ink-200); font: 400 14px/1.65 var(--font-sans); letter-spacing: 0; }
.b-lifecycle__view { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 0; padding: 24px; overflow: hidden; border: 1px solid var(--line-200); background: var(--bg-000); }
.b-lifecycle__view::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lattice) center / 300px; opacity: var(--lattice-opacity); }
.b-lifecycle__view .b-capture { width: auto; }
.b-lifecycle__view .b-capture img { width: auto; max-width: 100%; max-height: 300px; }

/* ---------- Tour rail ---------- */
.b-tour { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); border: 1px solid var(--line-200); background: var(--bg-100); }
.b-tour__list { display: flex; flex-direction: column; border-right: 1px solid var(--line-200); }
.b-tour__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-bottom: 1px solid var(--line-200);
  background: none;
  color: var(--ink-300);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.b-tour__item:hover { color: var(--ink-100); }
.b-tour__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.b-tour__title { font: 450 16px/1.35 var(--font-sans); letter-spacing: -0.01em; }
.b-tour__num { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.b-tour__text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.b-tour__text > span { overflow: hidden; }
.b-tour__text > span > span { display: block; padding-top: 8px; color: var(--ink-200); font: 400 13.5px/1.6 var(--font-sans); letter-spacing: 0; }
.b-tour__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.b-tour__bar::after { content: ""; display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.b-tour__item[aria-selected="true"] { color: var(--ink-100); background: var(--bg-150); }
.b-tour__item[aria-selected="true"] .b-tour__num { color: var(--signal); }
.b-tour__item[aria-selected="true"] .b-tour__text { grid-template-rows: 1fr; }
.b-tour__item[aria-selected="true"] .b-tour__bar::after { animation: b-fill var(--tour-dur, 7s) linear forwards; }
.b-tour.is-paused .b-tour__bar::after { animation-play-state: paused; }
@keyframes b-fill { to { transform: scaleX(1); } }
.b-tour__view.b-stage { min-height: 480px; padding: 0; border: 0; transition: background-color var(--dur-slow) var(--ease-out); }
.b-tour__slide { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow); }
.b-tour__slide.is-active { opacity: 1; visibility: visible; }
.b-tour__slide .b-capture { width: auto; }
.b-tour__slide .b-capture img { width: auto; max-width: 100%; max-height: 380px; }
.b-tour__pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; }

/* ---------- Cadence strip ---------- */
.b-cadence { min-width: 0; border: 1px solid var(--line-200); background: var(--bg-100); }
.b-cadence__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-200); }
.b-cadence__title { font: 450 16px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-cadence__title small { display: block; margin-top: 2px; color: var(--ink-300); font: 400 12.5px/1.4 var(--font-sans); }
.b-cadence__scroll { overflow-x: auto; }
.b-cadence__grid { --days: 14; position: relative; display: grid; grid-template-columns: 112px repeat(var(--days), minmax(36px, 1fr)); min-width: 680px; padding: 0 20px 4px; }
.b-cadence__day { padding: 14px 0 10px; border-bottom: 1px solid var(--line-200); color: var(--ink-300); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.b-cadence__day b { display: block; margin-top: 3px; color: var(--ink-200); font: 400 13px/1.2 var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.b-cadence__day--today { color: var(--signal); }
.b-cadence__day--today b { color: var(--ink-100); }
.b-cadence__day--weekend { background: var(--bg-000); }
.b-cadence__label { grid-column: 1; align-self: center; color: var(--ink-300); font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-cadence__lane { grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: repeat(var(--days), minmax(36px, 1fr)); align-items: center; height: 60px; border-bottom: 1px solid var(--line-100); }
.b-cadence__lane:last-of-type { border-bottom: 0; }
.b-cadence__mark { grid-column: var(--d); grid-row: 1; justify-self: center; position: relative; width: 12px; height: 12px; background: var(--ink-100); }
.b-cadence__mark--release { transform: rotate(45deg); }
.b-cadence__mark--held { background: transparent; border: 1px dashed var(--ink-300); }
.b-cadence__mark[data-label]::after { content: attr(data-label); position: absolute; top: -20px; left: 50%; color: var(--ink-200); font: 400 10.5px/1 var(--font-mono); white-space: nowrap; transform: translateX(-50%); }
.b-cadence__mark--release[data-label]::after { top: -18px; left: -12px; transform: rotate(-45deg); }
.b-cadence__span { grid-column: var(--from) / var(--to); grid-row: 1; display: flex; align-items: center; height: 26px; margin-inline: 4px; padding: 0 10px; border-radius: var(--radius-xs); font: 450 12px/1 var(--font-sans); white-space: nowrap; overflow: hidden; }
.b-cadence__span--auth { border: 1px solid var(--signal-edge); background: var(--signal-wash); color: var(--ink-100); }
.b-cadence__span--renew { border: 1px dashed var(--line-300); color: var(--ink-300); }
.b-cadence__now { position: absolute; top: 46px; bottom: 4px; left: calc(20px + 112px + (100% - 152px) * (var(--t) - 0.5) / var(--days)); width: 1px; background: var(--signal); pointer-events: none; }
.b-cadence[data-mode="schedule"] [data-only="release"],
.b-cadence[data-mode="release"] [data-only="schedule"] { display: none; }
.b-cadence__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 20px; border-top: 1px solid var(--line-200); color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.b-cadence__legend span { display: inline-flex; align-items: center; gap: 8px; }
.b-cadence__legend i { display: inline-block; width: 9px; height: 9px; background: var(--ink-100); }
.b-cadence__legend i.r { transform: rotate(45deg); }
.b-cadence__legend i.h { background: transparent; border: 1px dashed var(--ink-300); }
.b-cadence__legend i.a { width: 16px; border: 1px solid var(--signal-edge); background: var(--signal-wash); }

/* ---------- Boundary frames ---------- */
.b-bounds { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.b-bounds__figure { position: relative; display: grid; gap: 16px; min-width: 0; margin: 0; padding-right: 136px; }
.b-bounds__frame { position: relative; padding: 46px 28px 28px; border: 1px solid var(--line-300); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.b-bounds__frame--limits { border-style: dashed; }
.b-bounds__frame--identities { background: var(--bg-100); }
.b-bounds__frame--origin { display: grid; place-items: center; gap: 12px; min-height: 150px; padding: 46px 20px 28px; background: var(--stage-scope); }
.b-bounds__tag { position: absolute; top: 15px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--dur-base) var(--ease-out); }
.b-bounds__tag b { color: var(--ink-200); font-weight: 500; letter-spacing: 0.04em; }
.b-bounds__origin { color: var(--ink-100); font: 400 14px/1.3 var(--font-mono); }
.b-bounds__out { position: absolute; top: 46px; left: calc(100% + 18px); display: grid; justify-items: start; gap: 8px; }
.b-bounds__out span { position: relative; }
.b-bounds__out span::before { content: ""; position: absolute; top: 50%; right: 100%; width: 18px; border-top: 1px dashed var(--line-300); }
.b-bounds__out span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-050); color: var(--ink-300); font: 400 11.5px/1 var(--font-mono); white-space: nowrap; text-decoration: line-through; text-decoration-color: var(--ink-400); }
.b-bounds__decision { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line-300); color: var(--ink-200); font: 400 13px/1.4 var(--font-sans); transition: border-color var(--dur-base) var(--ease-out); }
.b-bounds__decision b { color: var(--ink-100); font-weight: 450; }
.b-bounds[data-focus="origin"] .b-bounds__frame--origin,
.b-bounds[data-focus="limits"] .b-bounds__frame--limits,
.b-bounds[data-focus="decision"] .b-bounds__decision { border-color: var(--signal); }
.b-bounds[data-focus="origin"] .b-bounds__frame--origin > .b-bounds__tag,
.b-bounds[data-focus="limits"] .b-bounds__frame--limits > .b-bounds__tag { color: var(--signal); }
.b-bounds__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-200); }
.b-bounds__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; width: 100%; padding: 22px 0; border: 0; border-bottom: 1px solid var(--line-200); background: none; color: var(--ink-200); text-align: left; cursor: pointer; }
.b-bounds__item .b-icon { width: 28px; height: 28px; stroke-width: 1.2; color: var(--ink-300); transition: color var(--dur-base) var(--ease-out); }
.b-bounds__item-title { display: block; color: var(--ink-200); font: 450 18px/1.3 var(--font-sans); letter-spacing: -0.015em; transition: color var(--dur-base) var(--ease-out); }
.b-bounds__item-text { display: block; margin-top: 6px; color: var(--ink-200); font: 400 13.5px/1.6 var(--font-sans); letter-spacing: 0; }
.b-bounds__item[aria-pressed="true"] .b-bounds__item-title { color: var(--ink-100); }
.b-bounds__item[aria-pressed="true"] .b-icon { color: var(--signal); }

/* ---------- Role lens ---------- */
.b-lens { border: 1px solid var(--line-200); background: var(--bg-100); }
.b-lens__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 20px 24px; border-bottom: 1px solid var(--line-200); }
.b-lens__question { font: 450 20px/1.3 var(--font-sans); letter-spacing: -0.015em; }
.b-lens__record { padding: 24px; }
.b-lens__id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.b-lens__id code { color: var(--ink-300); font: 400 12px/1 var(--font-mono); }
.b-lens__title { flex: 1 1 280px; color: var(--ink-100); font: 450 17px/1.35 var(--font-sans); letter-spacing: -0.01em; }
.b-lens__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; border: 1px solid var(--line-200); background: var(--line-200); }
.b-lens__field { position: relative; padding: 18px; background: var(--bg-050); transition: background-color var(--dur-base) var(--ease-out); }
.b-lens__field dt { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-lens__field dd { margin: 8px 0 0; color: var(--ink-300); font: 400 13.5px/1.55 var(--font-sans); letter-spacing: 0; transition: color var(--dur-base) var(--ease-out); }
.b-lens__field.is-on { background: var(--bg-150); }
.b-lens__field.is-on dt { color: var(--signal); }
.b-lens__field.is-on dd { color: var(--ink-100); }
.b-lens__field.is-on::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); }

/* ---------- Report binder ---------- */
.b-binder { display: grid; grid-template-columns: minmax(0, 1fr) 36px; width: 100%; max-width: 500px; }
.b-binder__stack { position: relative; }
.b-binder__stack::before,
.b-binder__stack::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xs); background: var(--paper-100); }
.b-binder__stack::before { transform: translate(10px, 10px); opacity: 0.55; }
.b-binder__stack::after { transform: translate(5px, 5px); }
.b-binder__page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1.22;
  padding: 26px 28px 22px;
  border-radius: var(--radius-xs);
  background: var(--paper-050);
  color: var(--on-ink);
  box-shadow: var(--shadow-capture);
}
.b-binder__page[hidden] { display: none; }
.b-binder__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--paper-100); color: var(--paper-muted); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-binder__top .b-logo { color: var(--on-ink); text-transform: none; }
.b-binder__lede { margin-top: 14px; max-width: 38ch; color: var(--paper-muted); font: 400 13px/1.55 var(--font-sans); }
.b-binder__title { margin-top: 26px; font: 450 24px/1.15 var(--font-sans); letter-spacing: -0.025em; }
.b-binder__rule { width: 28px; height: 2px; margin-top: 16px; background: var(--signal); }
.b-binder__rows { display: grid; margin: 20px 0 0; }
.b-binder__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--paper-100); font: 400 12.5px/1.45 var(--font-sans); }
.b-binder__row dt { color: var(--paper-muted); font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-binder__row dd { margin: 0; min-width: 0; }
.b-binder__row code { font: 400 11.5px/1.45 var(--font-mono); }
.b-binder__sev { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-binder__sev::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.b-binder__list { display: grid; gap: 10px; margin: 20px 0 0; padding: 0 0 0 16px; font: 400 12.5px/1.5 var(--font-sans); }
.b-binder__foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--paper-100); color: var(--paper-muted); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.b-binder__tabs { position: relative; z-index: 2; display: grid; align-content: start; gap: 4px; padding-top: 56px; }
.b-binder__tab {
  display: grid;
  place-items: center;
  width: 30px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--paper-100);
  color: var(--on-ink);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.b-binder__tab span { writing-mode: vertical-rl; }
.b-binder__tab:hover { width: 34px; }
.b-binder__tab[aria-selected="true"] { width: 36px; background: var(--paper-050); box-shadow: inset 2px 0 0 var(--signal); }

/* ---------- Question index ---------- */
.b-qindex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border: 1px solid var(--line-200); background: var(--bg-100); }
.b-qindex__list { display: grid; align-content: start; gap: 2px; padding: 8px; border-right: 1px solid var(--line-200); }
.b-qindex__q { display: grid; grid-template-columns: 30px minmax(0, 1fr) 12px; align-items: baseline; gap: 8px; width: 100%; padding: 14px 14px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-200); font: 450 15px/1.4 var(--font-sans); letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.b-qindex__q:hover { color: var(--ink-100); }
.b-qindex__num { color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.b-qindex__q .b-arrow { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.b-qindex__q[aria-selected="true"] { background: var(--bg-150); color: var(--ink-100); }
.b-qindex__q[aria-selected="true"] .b-qindex__num { color: var(--signal); }
.b-qindex__q[aria-selected="true"] .b-arrow { opacity: 1; }
.b-qindex__panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 40px; }
.b-qindex__panel[hidden] { display: none; }
.b-qindex__answer-q { font: 450 26px/1.25 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.b-qindex__answer { max-width: 46ch; color: var(--ink-200); font: 400 17px/1.6 var(--font-sans); letter-spacing: -0.011em; }
.b-qindex__answer strong { color: var(--ink-100); font-weight: 450; }
.b-qindex__meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-200); color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Case strip ---------- */
.b-case { display: grid; grid-template-columns: minmax(0, 1.3fr) 1px minmax(0, 1.2fr) auto; align-items: center; border: 1px solid var(--line-200); background: var(--bg-100); }
.b-case__file { display: grid; gap: 8px; min-width: 0; padding: 22px 28px; }
.b-case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.b-case__meta code { color: var(--ink-300); font: 400 12px/1 var(--font-mono); }
.b-case__title { color: var(--ink-100); font: 450 17px/1.35 var(--font-sans); letter-spacing: -0.015em; }
.b-case__perf { position: relative; align-self: stretch; width: 1px; background: repeating-linear-gradient(var(--line-300) 0 4px, transparent 4px 9px); }
.b-case__perf::before,
.b-case__perf::after { content: ""; position: absolute; left: -9px; width: 18px; height: 18px; border: 1px solid var(--line-200); border-radius: 50%; background: var(--bg-050); }
.b-case__perf::before { top: -10px; clip-path: inset(9px 0 0 0); }
.b-case__perf::after { bottom: -10px; clip-path: inset(0 0 9px 0); }
.b-case__trail { display: flex; align-items: flex-start; min-width: 0; margin: 0; padding: 22px 28px; list-style: none; }
.b-case__step { display: grid; justify-items: center; gap: 7px; color: var(--ink-200); font: 450 12.5px/1.2 var(--font-sans); text-align: center; white-space: nowrap; }
.b-case__step::before { content: ""; width: 8px; height: 8px; background: var(--ink-100); }
.b-case__step time { color: var(--ink-300); font: 400 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-case__step--verified::before { background: var(--status-verified); }
.b-case__wire { flex: 1; min-width: 20px; height: 1px; margin: 4px 8px 0; background: var(--line-300); }
.b-case > .b-link { margin-right: 28px; white-space: nowrap; }

/* ---------- Mark CTA ---------- */
.b-markcta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.b-markcta__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--line-200);
  background: var(--bg-100);
  color: var(--ink-100);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
a.b-markcta__tile:hover, button.b-markcta__tile:hover { background: var(--bg-150); border-color: var(--line-300); }
button.b-markcta__tile { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.b-markcta__tile--statement { justify-content: flex-end; background: var(--bg-050); }
.b-markcta__statement { font: 450 48px/1.04 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; }
.b-markcta__statement span { color: var(--ink-300); }
.b-markcta__kicker { color: var(--ink-300); font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-markcta__label { display: block; font: 450 22px/1.25 var(--font-sans); letter-spacing: -0.02em; }
.b-markcta__hint { display: block; margin-top: 8px; max-width: 34ch; color: var(--ink-200); font: 400 13.5px/1.55 var(--font-sans); letter-spacing: 0; }
.b-markcta__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.b-markcta__arrow { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-out); }
.b-markcta__tile:hover .b-markcta__arrow { transform: translate(3px, -3px); }
.b-markcta__tile--signal { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
a.b-markcta__tile--signal:hover { background: var(--signal-hover); border-color: var(--signal-hover); }
.b-markcta__tile--signal .b-markcta__kicker,
.b-markcta__tile--signal .b-markcta__hint { color: var(--on-signal); }

/* ---------- Footer ---------- */
.b-foot { border-top: 1px solid var(--line-200); }
.b-foot__statement { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 64px var(--page-gutter) 48px; }
.b-foot__statement p { max-width: 16em; font: 450 40px/1.08 var(--font-sans); letter-spacing: -0.035em; }
.b-foot__statement p span { display: block; color: var(--ink-300); }
.b-foot__statement .b-mark { --m: 22px; color: var(--ink-100); }
.b-foot__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 16px var(--page-gutter); border-top: 1px solid var(--line-100); }
.b-foot__row h3 { color: var(--ink-300); font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-foot__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.b-foot__links a,
.b-foot__links button { padding: 0; border: 0; background: none; color: var(--ink-200); font: 400 14px/1.5 var(--font-sans); text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.b-foot__links a:hover, .b-foot__links button:hover { color: var(--ink-100); }
.b-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding: 20px var(--page-gutter); border-top: 1px solid var(--line-200); color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.b-foot__base code { font: 400 11.5px/1.4 var(--font-mono); }
.b-foot__base a { color: var(--ink-300); text-decoration: none; }
.b-foot__base a:hover { color: var(--ink-100); }

/* ---------- Annotated capture ---------- */
.b-annotated { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border: 1px solid var(--line-200); background: var(--bg-100); }
.b-annotated > .b-stage { padding: 48px 44px; border: 0; border-right: 1px solid var(--line-200); }
.b-annotated__shot { position: relative; width: 100%; max-width: 420px; }
.b-pin {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 1px solid var(--signal);
  border-radius: 50%;
  background: var(--bg-050);
  color: var(--ink-100);
  font: 500 11px/1 var(--font-mono);
  cursor: pointer;
  box-shadow: 0 0 0 4px #0b0c0d99;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.b-pin.is-active { background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 6px var(--signal-wash); }
.b-annotated__notes { display: grid; align-content: center; gap: 2px; margin: 0; padding: 16px; list-style: none; }
.b-annotated__note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease-out); }
.b-annotated__num { color: var(--ink-300); font: 500 11px/1.6 var(--font-mono); letter-spacing: 0.06em; }
.b-annotated__title { color: var(--ink-100); font: 500 15px/1.4 var(--font-sans); letter-spacing: -0.01em; }
.b-annotated__text { margin-top: 4px; color: var(--ink-200); font: 400 13.5px/1.6 var(--font-sans); letter-spacing: 0; }
.b-annotated__note.is-active { background: var(--bg-150); }
.b-annotated__note.is-active .b-annotated__num { color: var(--signal); }

/* ---------- Product surfaces ---------- */
/* Designed recreations of the Blackglass workspace. Every surface sits in a b-window and adapts to the
   window's width with container queries, so the same markup works in a narrow slot and in the viewer. */

/* App window */
.b-window {
  position: relative;
  width: 100%;
  min-width: 0;
  container: win / inline-size;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-050);
  box-shadow: var(--shadow-capture);
  color: var(--ink-100);
  font: 400 13px/1.5 var(--font-sans);
  letter-spacing: -0.003em;
  text-align: left;
}
.b-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #ffffff17, inset 0 1px 0 #ffffff1f;
  pointer-events: none;
}
.b-window__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line-200); background: var(--bg-100); }
.b-window__bar .b-mark { --m: 6px; color: var(--ink-100); }
.b-window__crumbs { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.b-window__crumbs li { overflow: hidden; text-overflow: ellipsis; }
.b-window__crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--ink-400); }
.b-window__crumbs [aria-current] { color: var(--ink-100); }
.b-window__meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.b-window__expand { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-xs); background: none; color: var(--ink-300); cursor: zoom-in; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.b-window__expand:hover { border-color: var(--line-300); background: var(--bg-150); color: var(--ink-100); }
.b-window__expand .b-icon { width: 14px; height: 14px; stroke-width: 1.8; }
.b-window__main { display: grid; grid-template-columns: minmax(0, 1fr); }
.b-window--nav .b-window__main { grid-template-columns: 52px minmax(0, 1fr); }
.b-window__nav { display: none; }
.b-window--nav .b-window__nav { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-right: 1px solid var(--line-200); background: var(--bg-000); }
.b-window__nav span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--ink-400); }
.b-window__nav span.is-current { background: var(--bg-150); color: var(--ink-100); box-shadow: var(--shadow-edge); }
.b-window__nav .b-icon { width: 16px; height: 16px; stroke-width: 1.6; }
.b-window__body { position: relative; min-width: 0; }
.b-window--peek .b-window__body { max-height: var(--peek, 420px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-300) transparent; }
.b-window--peek .b-window__body::after { content: ""; position: sticky; bottom: 0; display: block; height: 40px; margin-top: -40px; background: linear-gradient(#0b0c0d00, var(--bg-050)); pointer-events: none; }
@container win (max-width: 640px) {
  .b-window--nav .b-window__main { grid-template-columns: minmax(0, 1fr); }
  .b-window--nav .b-window__nav { display: none; }
}

/* Every surface is a single column that never grows past its window (scrolling tab rows included). */
:is(.b-overview, .b-context, .b-proof, .b-launch, .b-hunt, .b-ledger, .b-queue, .b-finding, .b-ask, .b-brief, .b-report, .b-schedule) { grid-template-columns: minmax(0, 1fr); }

/* Surface kit: shared parts inside every surface */
.b-ui-label { color: var(--ink-300); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-ui-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-200); }
.b-ui-head .b-ui-label { color: var(--ink-100); }
.b-ui-head .b-ui-count { color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.b-ui-head > :last-child:not(:first-child) { margin-left: auto; }
.b-ui-card { min-width: 0; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-100); }
.b-sev { --tone: var(--ink-300); display: inline-flex; align-items: flex-end; gap: 1.5px; color: var(--tone); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.b-sev i { width: 3px; background: var(--line-300); }
.b-sev i:nth-child(1) { height: 4px; }
.b-sev i:nth-child(2) { height: 6px; }
.b-sev i:nth-child(3) { height: 8px; }
.b-sev i:nth-child(4) { height: 10px; margin-right: 7px; }
.b-sev[data-sev="critical"] { --tone: var(--status-critical); }
.b-sev[data-sev="high"] { --tone: var(--status-high); }
.b-sev[data-sev="medium"] { --tone: var(--status-medium); }
.b-sev[data-sev="low"] { --tone: var(--status-low); }
.b-sev[data-sev="critical"] i,
.b-sev[data-sev="high"] i:nth-child(-n+3),
.b-sev[data-sev="medium"] i:nth-child(-n+2),
.b-sev[data-sev="low"] i:nth-child(1) { background: currentColor; }
.b-avatar { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-200); color: var(--ink-100); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.04em; }
.b-avatar--lg { width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 12px; }
.b-avatar--signal { border-color: var(--signal-edge); background: var(--signal-deep); }
.b-kv { display: grid; margin: 0; }
.b-kv > div { display: grid; grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-100); }
.b-kv > div:first-child { border-top: 0; }
.b-kv dt { padding-top: 2px; color: var(--ink-300); font: 500 10.5px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-kv dd { min-width: 0; margin: 0; color: var(--ink-100); font: 400 13px/1.45 var(--font-sans); overflow-wrap: anywhere; }
.b-kv code, .b-ui-mono { font: 400 12px/1.45 var(--font-mono); letter-spacing: 0; }
.b-kv--stack > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.b-status { --tone: var(--ink-300); display: inline-flex; align-items: center; gap: 7px; color: var(--tone); font: 400 12.5px/1.3 var(--font-sans); white-space: nowrap; }
.b-status::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.b-status[data-tone="verified"] { --tone: var(--status-verified); }
.b-status[data-tone="signal"] { --tone: var(--signal); }
.b-status[data-tone="attention"] { --tone: var(--status-medium); }
.b-status[data-tone="muted"] { --tone: var(--ink-400); }
.b-status[data-tone="live"] { --tone: var(--signal); }
.b-status[data-tone="live"]::before { animation: b-blink 1.6s var(--ease-in-out) infinite; }
.b-kind { --tone: var(--ink-300); display: inline-grid; place-items: center; min-width: 76px; height: 20px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line-200)); border-radius: var(--radius-xs); color: var(--tone); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.b-kind[data-kind="candidate"] { --tone: var(--signal); }
.b-kind[data-kind="replay"], .b-kind[data-kind="complete"] { --tone: var(--status-verified); }
.b-kind[data-kind="evidence"] { --tone: var(--ink-200); }
.b-kind[data-kind="attention"] { --tone: var(--status-medium); }
.b-ref { padding: 0; border: 0; border-bottom: 1px dotted var(--ink-400); background: none; color: var(--ink-100); font: 400 12px/1.4 var(--font-mono); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; }
.b-ref:hover { border-bottom-color: var(--signal); color: var(--signal-hover); }
.b-code { margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-000); color: var(--ink-200); font: 400 11.5px/1.7 var(--font-mono); letter-spacing: 0; white-space: pre; tab-size: 2; scrollbar-width: thin; }
.b-code b { color: var(--ink-100); font-weight: 500; }
.b-code i { color: var(--ink-400); font-style: normal; }
.b-code em { color: var(--status-verified); font-style: normal; }
.b-code mark { padding: 1px 3px; margin: 0 -3px; border-radius: 2px; background: var(--signal-wash); box-shadow: inset 0 -1px 0 var(--signal); color: var(--signal-hover); }
.b-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-200); font: 400 12.5px/1.5 var(--font-sans); cursor: pointer; }
.b-check input { appearance: none; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin: 1px 0 0; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-000); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.b-check input::after { content: ""; width: 8px; height: 4px; border: solid var(--on-ink); border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.b-check input:checked { border-color: var(--ink-100); background: var(--ink-100); }
.b-check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.b-check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-check b { color: var(--ink-100); font-weight: 450; }
.b-tabs--sm { padding: 2px; border-radius: var(--radius-sm); }
.b-tabs--sm .b-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--radius-xs); font-size: 12px; }
.b-tabs--sm .b-tab small { color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.b-tabs--sm .b-tab[aria-selected="true"] small, .b-tabs--sm .b-tab[aria-pressed="true"] small { color: var(--ink-200); }
.b-tabs--sm .b-tab[aria-pressed="true"] { background: var(--bg-200); color: var(--ink-100); box-shadow: var(--shadow-edge), 0 1px 2px #00000066; }
.b-ui-meter { display: flex; gap: 2px; height: 6px; }
.b-ui-meter i { flex: 1; background: var(--line-300); }
.b-ui-meter i.is-on { background: var(--ink-100); }
.b-ui-meter i.is-signal { background: var(--signal); }
.b-ui-meter i.is-attention { background: var(--status-medium); }
.b-ui-meter i.is-verified { background: var(--status-verified); }
.b-ui-progress { position: relative; height: 3px; overflow: hidden; background: var(--line-200); }
.b-ui-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 40%); background: var(--signal); }
.b-ui-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-200); background: var(--bg-100); }
.b-ui-foot .b-ui-push { margin-left: auto; }
.b-ui-foot .b-btn .b-icon { width: 14px; height: 14px; stroke-width: 1.7; }
.b-ui-foot .b-btn { gap: 8px; }
.b-ui-note { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-300); font: 400 12px/1.5 var(--font-sans); }
.b-ui-note .b-icon { width: 15px; height: 15px; margin-top: 1px; stroke-width: 1.6; }
.b-ui-title { font: 450 22px/1.2 var(--font-sans); letter-spacing: -0.025em; }
.b-ui-title span { color: var(--ink-300); }
.b-ui-kicker { display: flex; align-items: center; gap: 10px; color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-ui-kicker b { color: var(--signal); font-weight: 500; }
.b-ui-more { color: var(--ink-300); font: 450 12px/1 var(--font-sans); white-space: nowrap; }
.b-avatar--empty { border-style: dashed; background: none; color: var(--ink-400); }
.b-ui-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.b-ui-empty .b-icon { width: 28px; height: 28px; stroke-width: 1.2; color: var(--ink-300); }
.b-ui-empty h5 { font: 450 16px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-ui-empty p { max-width: 40ch; color: var(--ink-300); font: 400 12.5px/1.55 var(--font-sans); }
.b-ui-kicker i { width: 22px; height: 1px; background: var(--line-300); }

/* Workspace overview */
.b-overview { display: grid; gap: 18px; padding: 20px 22px 22px; }
.b-overview__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.b-overview__head > div { display: grid; gap: 10px; }
.b-overview__sub { color: var(--ink-200); font: 400 13px/1.4 var(--font-sans); }
.b-overview__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-100); }
.b-overview__stat { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-left: 1px solid var(--line-200); }
.b-overview__stat:first-child { border-left: 0; }
.b-overview__num { font: 400 34px/1 var(--font-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.b-overview__stat small { color: var(--ink-300); font: 400 12px/1.3 var(--font-sans); }
.b-overview__stat[data-tone="live"] .b-overview__num { color: var(--signal); }
.b-overview__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.b-overview__queue { margin: 0; padding: 0; list-style: none; }
.b-overview__queue li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-100); }
.b-overview__queue li:first-child { border-top: 0; }
.b-overview__queue p { font: 400 13px/1.4 var(--font-sans); }
.b-overview__queue small { display: block; margin-top: 3px; color: var(--ink-300); font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.02em; }
.b-overview__queue .b-icon { width: 14px; height: 14px; color: var(--ink-400); }
.b-overview__live { display: grid; gap: 14px; padding: 16px; }
.b-overview__live-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.b-overview__live h4 { font: 450 17px/1.25 var(--font-sans); letter-spacing: -0.015em; }
.b-overview__live h4 span { color: var(--ink-300); }
.b-overview__live .b-ui-progress { --p: 41%; }
.b-overview__live-row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-300); font: 400 11px/1 var(--font-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.b-overview__live-row b { color: var(--ink-100); font-weight: 500; }
.b-overview__phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.b-overview__phases li { padding-top: 7px; border-top: 2px solid var(--line-300); color: var(--ink-400); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.b-overview__phases li.is-done { border-top-color: var(--ink-200); color: var(--ink-300); }
.b-overview__phases li.is-now { border-top-color: var(--signal); color: var(--ink-100); }
@container win (max-width: 760px) {
  .b-overview__queue li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .b-overview__queue .b-sev { font-size: 0; }
  .b-overview__phases li:not(.is-now) { color: transparent; }
  .b-overview__live-row { flex-wrap: wrap; row-gap: 6px; }
  .b-overview__live-row span { white-space: nowrap; }
}
@container win (max-width: 600px) {
  .b-overview { padding: 18px 16px 20px; }
  .b-overview__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-overview__stat:nth-child(3) { border-left: 0; }
  .b-overview__stat:nth-child(n+3) { border-top: 1px solid var(--line-200); }
  .b-overview__grid { grid-template-columns: minmax(0, 1fr); }
  .b-overview__head > .b-ui-label { display: none; }
}
@container win (max-width: 420px) {
  .b-overview__queue li { grid-template-columns: minmax(0, 1fr) auto; }
  .b-overview__queue .b-sev { grid-column: 1 / -1; font-size: 10.5px; }
}

/* Saved context */
.b-context { display: grid; gap: 16px; padding: 20px; }
.b-context__head { display: flex; align-items: center; gap: 14px; }
.b-context__head > div { min-width: 0; }
.b-context__name { font: 450 19px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.b-context__desc { margin-top: 3px; color: var(--ink-300); font: 400 12.5px/1.4 var(--font-sans); }
.b-context__head .b-badge { margin-left: auto; }
.b-context__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.b-context__list { margin: 0; padding: 0; list-style: none; }
.b-context__item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-100); }
.b-context__item:first-child { border-top: 0; }
.b-context__item > .b-icon { width: 17px; height: 17px; stroke-width: 1.5; color: var(--ink-300); }
.b-context__item p { font: 400 13px/1.35 var(--font-sans); overflow-wrap: anywhere; }
.b-context__item small { display: block; margin-top: 2px; color: var(--ink-300); font: 400 11.5px/1.35 var(--font-mono); letter-spacing: 0; }
.b-context__item--empty p { color: var(--ink-200); }
.b-context__item--empty > .b-icon { color: var(--ink-400); }
.b-context__lock { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-200); color: var(--ink-300); font: 400 11.5px/1.4 var(--font-sans); }
.b-context__lock .b-icon { width: 14px; height: 14px; stroke-width: 1.7; }
.b-context__wide { grid-column: 1 / -1; }
.b-context__bounds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.b-context__bounds > div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--line-100); }
.b-context__bounds > div:first-child { border-left: 0; }
.b-context__bounds dd { margin: 0; font: 400 13px/1.35 var(--font-sans); }
@container win (max-width: 640px) {
  .b-context { padding: 16px; }
  .b-context__grid { grid-template-columns: minmax(0, 1fr); }
  .b-context__bounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-context__bounds > div:nth-child(3) { border-left: 0; }
  .b-context__bounds > div:nth-child(n+3) { border-top: 1px solid var(--line-100); }
}
@container win (max-width: 420px) {
  .b-context__head { flex-wrap: wrap; }
  .b-context__head .b-badge { margin-left: 50px; }
}

/* Ownership proof */
.b-proof { display: grid; gap: 18px; padding: 20px; }
.b-proof__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.b-proof__head > div:first-child { display: grid; gap: 6px; }
.b-proof__head h4 { font: 450 19px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.b-proof__head p:not(.b-ui-kicker) { color: var(--ink-300); font: 400 12.5px/1.45 var(--font-sans); }
.b-proof__head code { color: var(--ink-100); font: 400 12px/1 var(--font-mono); }
.b-proof__record { display: grid; }
.b-proof__record[hidden] { display: none; }
.b-proof__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line-100); }
.b-proof__row:first-child { border-top: 0; }
.b-proof__row code { min-width: 0; overflow: hidden; color: var(--ink-100); font: 400 12px/1.4 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.b-proof__copy { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-150); color: var(--ink-200); font: 450 11.5px/1 var(--font-sans); cursor: pointer; }
.b-proof__copy:hover { color: var(--ink-100); }
.b-proof__copy .b-icon { width: 12px; height: 12px; stroke-width: 1.8; }
.b-proof__copy.is-done { border-color: var(--status-verified); color: var(--status-verified); }
.b-proof__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.b-proof__step { position: relative; display: grid; gap: 6px; padding: 14px 16px 0 0; border-top: 2px solid var(--line-300); color: var(--ink-300); font: 400 12px/1.45 var(--font-sans); counter-increment: step; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.b-proof__step b { color: var(--ink-200); font: 450 13px/1.3 var(--font-sans); letter-spacing: -0.005em; }
.b-proof__step::before { content: "0" counter(step); color: var(--ink-400); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.06em; }
.b-proof__step.is-done { border-top-color: var(--ink-200); }
.b-proof__step.is-done b { color: var(--ink-100); }
.b-proof__step.is-active { border-top-color: var(--signal); }
.b-proof__step.is-active::before { color: var(--signal); }
.b-proof__step.is-verified { border-top-color: var(--status-verified); }
.b-proof__step.is-verified b { color: var(--status-verified); }
.b-proof__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-000); }
.b-proof__result small { color: var(--ink-300); font: 400 11.5px/1.4 var(--font-sans); }
.b-proof[data-state="checking"] .b-proof__result .b-status { --tone: var(--signal); }
.b-proof[data-state="checking"] .b-proof__result .b-status::before { animation: b-blink 0.8s var(--ease-in-out) infinite; }
@container win (max-width: 480px) {
  .b-proof { padding: 16px; }
  .b-proof__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .b-proof__row > .b-ui-label { grid-column: 1 / -1; }
  .b-proof__steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .b-proof__step { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 0 0; }
  .b-proof__step::before { grid-row: span 2; padding-top: 2px; }
}

/* Launch review */
.b-launch { display: grid; }
.b-launch__top { display: grid; gap: 14px; padding: 20px 20px 16px; }
.b-launch__steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--ink-400); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-launch__steps li { display: flex; align-items: center; gap: 8px; }
.b-launch__steps li::before { content: ""; width: 14px; height: 2px; background: var(--line-300); }
.b-launch__steps li.is-done { color: var(--ink-300); }
.b-launch__steps li.is-done::before { background: var(--ink-200); }
.b-launch__steps li[aria-current] { color: var(--ink-100); }
.b-launch__steps li[aria-current]::before { background: var(--signal); }
.b-launch__rows { margin: 0 20px; padding: 0; list-style: none; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-100); }
.b-launch__row { display: grid; grid-template-columns: 18px 112px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line-100); }
.b-launch__row:first-child { border-top: 0; }
.b-launch__row > .b-icon { width: 16px; height: 16px; stroke-width: 1.5; color: var(--ink-300); }
.b-launch__row > div { min-width: 0; }
.b-launch__row p { overflow-wrap: anywhere; font: 400 13px/1.4 var(--font-sans); }
.b-launch__row p code { font: 400 12px/1.4 var(--font-mono); }
.b-launch__row small { display: block; margin-top: 2px; color: var(--ink-300); font: 400 11.5px/1.4 var(--font-sans); }
.b-launch__row--off p { color: var(--ink-300); }
.b-launch__paths { display: flex; flex-wrap: wrap; gap: 4px; }
.b-launch__paths code { padding: 2px 6px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); color: var(--ink-200); font: 400 11px/1.4 var(--font-mono); text-decoration: line-through; text-decoration-color: var(--ink-400); }
.b-launch__includes { display: grid; gap: 10px; padding: 16px 20px; }
.b-launch__includes .b-chips { gap: 5px; }
.b-launch__includes .b-chip { height: 26px; font-size: 12px; }
.b-launch__includes .b-chip .b-icon { width: 13px; height: 13px; color: var(--status-verified); }
.b-launch__includes .b-chip--optional .b-icon { color: var(--ink-400); }
.b-launch .b-ui-foot { padding: 14px 20px; }
.b-launch .b-check { max-width: 46ch; }
@container win (max-width: 600px) {
  .b-launch__top, .b-launch__includes { padding-inline: 16px; }
  .b-launch__rows { margin-inline: 16px; }
  .b-launch__row { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 3px; }
  .b-launch__row > .b-ui-label { grid-column: 2 / -1; }
  .b-launch__row > div { grid-column: 2; }
  .b-launch .b-ui-foot { padding-inline: 16px; }
}
@container win (max-width: 420px) {
  .b-launch__row { grid-template-columns: 18px minmax(0, 1fr); }
  .b-launch__row > :last-child { grid-column: 2; }
  .b-launch__row > :last-child:empty { display: none; }
}

/* Hunt timeline */
.b-hunt { --label: 96px; --pad: 18px; --p: 0.664; display: grid; }
.b-hunt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.b-hunt__head .b-ui-label { color: var(--ink-100); }
.b-hunt__head p { color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.b-hunt__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 0 auto; padding: 0; list-style: none; color: var(--ink-300); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-hunt__legend li { display: flex; align-items: center; gap: 6px; }
.b-hunt__legend li::before { content: ""; width: 7px; height: 7px; background: var(--tone, var(--ink-200)); transform: rotate(45deg); }
.b-hunt__legend li[data-kind="candidate"] { --tone: var(--signal); }
.b-hunt__legend li[data-kind="replay"] { --tone: var(--status-verified); }
.b-hunt__legend li[data-kind="attention"] { --tone: var(--status-medium); }
.b-hunt__legend li[data-kind="evidence"]::before { transform: none; background: none; border: 1px solid var(--ink-200); }
.b-hunt__body { position: relative; display: grid; grid-template-columns: var(--label) minmax(0, 1fr); padding-right: var(--pad); background: var(--bg-000); touch-action: pan-y; }
.b-hunt__name { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-top: 1px solid var(--line-100); color: var(--ink-300); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-hunt__name::before { content: ""; width: 5px; height: 5px; background: var(--ink-400); }
.b-hunt__name--ruler::before { display: none; }
.b-hunt__lane { position: relative; min-width: 0; border-top: 1px solid var(--line-100); background-image: linear-gradient(90deg, var(--line-100) 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.b-hunt__name--ruler, .b-hunt__lane--ruler { height: 30px; border-top: 0; }
.b-hunt__lane--ruler { background: none; }
.b-hunt__lane--ruler span { position: absolute; top: 10px; left: calc(var(--t) * 100%); color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.b-hunt__lane--ruler span:first-child { transform: none; }
.b-hunt__lane--ruler span:last-child { transform: translateX(-100%); }
.b-hunt__lane--phase { height: 34px; }
.b-hunt__lane--moments { height: 44px; }
.b-hunt__lane--evidence { height: 28px; }
.b-hunt__lane--activity { display: flex; align-items: flex-end; gap: 2px; height: 40px; padding-block: 6px 4px; }
.b-hunt__lane--agents { height: 34px; }
.b-hunt__name--phase { height: 34px; }
.b-hunt__name--moments { height: 44px; }
.b-hunt__name--evidence { height: 28px; }
.b-hunt__name--activity { height: 40px; }
.b-hunt__name--agents { height: 34px; }
.b-hunt__name--moments::before { background: var(--signal); }
.b-hunt__name--evidence::before { background: none; border: 1px solid var(--ink-300); }
.b-hunt__name--agents::before { background: var(--status-verified); }
.b-hunt__band { position: absolute; top: 7px; bottom: 7px; left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100% - 2px); display: flex; align-items: center; padding: 0 8px; overflow: hidden; border: 1px solid var(--line-300); background: var(--bg-100); color: var(--ink-300); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.b-hunt__band.is-now { border-color: var(--signal-edge); background: var(--bg-150); color: var(--ink-100); }
.b-hunt__moment { --tone: var(--ink-200); position: absolute; z-index: 2; top: 50%; left: calc(var(--t) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: none; cursor: pointer; }
.b-hunt__moment::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--tone); background: color-mix(in srgb, var(--tone) 70%, var(--bg-000)); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.b-hunt__moment:hover::before, .b-hunt__moment.is-current::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent); transform: rotate(45deg) scale(1.15); }
.b-hunt__moment[data-kind="candidate"] { --tone: var(--signal); }
.b-hunt__moment[data-kind="replay"], .b-hunt__moment[data-kind="complete"] { --tone: var(--status-verified); }
.b-hunt__moment[data-kind="attention"] { --tone: var(--status-medium); }
.b-hunt__moment.is-later::before { background: var(--bg-000); opacity: 0.55; }
.b-hunt__evidence { position: absolute; top: 50%; left: calc(var(--t) * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1px solid var(--ink-200); background: var(--bg-000); }
.b-hunt__evidence.is-later { opacity: 0.35; }
.b-hunt__lane--activity i { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); background: var(--ink-300); opacity: 0.7; }
.b-hunt__lane--activity i.is-later { opacity: 0.2; }
.b-hunt__agents { position: absolute; inset: 6px 0; width: 100%; height: calc(100% - 12px); overflow: visible; }
.b-hunt__agents path { fill: none; stroke: var(--status-verified); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.b-hunt__later { position: absolute; z-index: 1; top: 30px; bottom: 0; left: calc(var(--label) + (100% - var(--label) - var(--pad)) * var(--p)); right: 0; background: #08090a8c; pointer-events: none; }
.b-hunt__playhead { position: absolute; z-index: 3; top: 22px; bottom: 0; left: calc(var(--label) + (100% - var(--label) - var(--pad)) * var(--p)); width: 1px; background: var(--ink-100); pointer-events: none; }
.b-hunt__playhead::before { content: ""; position: absolute; top: -2px; left: -5px; width: 11px; height: 11px; border-radius: 2px; background: var(--ink-100); box-shadow: 0 0 0 3px #08090acc; }
.b-hunt__scrub { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--label); right: var(--pad); cursor: ew-resize; }
.b-hunt__scrub:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.b-hunt__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line-200); }
.b-hunt__controls .b-btn .b-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.b-hunt__controls .b-btn--sm { gap: 8px; }
.b-hunt__clock { margin-left: auto; color: var(--ink-300); font: 400 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-hunt__clock b { margin-right: 4px; color: var(--ink-100); font: 400 22px/1 var(--font-mono); letter-spacing: -0.02em; }
.b-hunt__speed { margin-left: 6px; }
.b-hunt__state { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-top: 1px solid var(--line-200); }
.b-hunt__events { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 16px 14px; }
.b-hunt__log { display: grid; gap: 2px; min-height: 82px; margin: 0; padding: 0; list-style: none; }
.b-hunt__log li { display: none; grid-template-columns: 40px 56px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 3px 0; color: var(--ink-200); font: 400 12px/1.45 var(--font-sans); }
.b-hunt__log li.is-shown { display: grid; }
.b-hunt__log li.is-latest { color: var(--ink-100); }
.b-hunt__log time, .b-hunt__log .b-hunt__agent { color: var(--ink-300); font: 400 11px/1.45 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-hunt__log li[data-kind="candidate"] .b-hunt__msg { color: var(--signal-hover); }
.b-hunt__log li[data-kind="replay"] .b-hunt__msg, .b-hunt__log li[data-kind="complete"] .b-hunt__msg { color: var(--status-verified); }
.b-hunt__log li[data-kind="attention"] .b-hunt__msg { color: var(--status-medium); }
.b-hunt__known { display: grid; align-content: start; gap: 10px; padding: 12px 16px 16px; border-left: 1px solid var(--line-200); background: var(--bg-100); }
.b-hunt__known-empty { color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); }
.b-hunt__known-card { display: none; gap: 8px; }
.b-hunt__known[data-state="candidate"] .b-hunt__known-card, .b-hunt__known[data-state="verified"] .b-hunt__known-card { display: grid; }
.b-hunt__known[data-state="candidate"] .b-hunt__known-empty, .b-hunt__known[data-state="verified"] .b-hunt__known-empty { display: none; }
.b-hunt__known-card p { font: 450 13.5px/1.4 var(--font-sans); letter-spacing: -0.008em; }
.b-hunt__known-card small { color: var(--ink-300); font: 400 11px/1.4 var(--font-mono); }
.b-hunt__known .b-badge { justify-self: start; }
.b-hunt__known [data-when="verified"] { display: none; }
.b-hunt__known[data-state="verified"] [data-when="verified"] { display: inline-flex; }
.b-hunt__known[data-state="verified"] [data-when="candidate"] { display: none; }
@container win (max-width: 680px) {
  .b-hunt { --label: 70px; --pad: 14px; }
  .b-hunt__name { padding-left: 12px; font-size: 8.5px; }
  .b-hunt__name::before { display: none; }
  .b-hunt__lane--ruler span:nth-child(even) { display: none; }
  .b-hunt__legend { display: none; }
  .b-hunt__band { padding: 0 5px; font-size: 8.5px; }
}
@container win (max-width: 560px) {
  .b-hunt__state { grid-template-columns: minmax(0, 1fr); }
  .b-hunt__known { border-left: 0; border-top: 1px solid var(--line-200); }
}
@container win (max-width: 460px) {
  .b-hunt__name--agents, .b-hunt__lane--agents, .b-hunt__name--evidence, .b-hunt__lane--evidence { display: none; }
  .b-hunt__speed, .b-hunt__controls [data-step] { display: none; }
  .b-hunt__log li { grid-template-columns: 40px minmax(0, 1fr); }
  .b-hunt__log .b-hunt__agent { display: none; }
}

/* Run ledger */
.b-ledger { display: grid; }
.b-ledger__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.b-ledger__cols, .b-ledger__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 132px 112px 44px; align-items: center; gap: 14px; padding: 0 16px; }
.b-ledger__cols { height: 32px; border-bottom: 1px solid var(--line-200); background: var(--bg-100); }
.b-ledger__cols span:last-child, .b-ledger__row > :last-child { text-align: right; }
.b-ledger__list { margin: 0; padding: 0; list-style: none; }
.b-ledger__row { min-height: 56px; padding-block: 10px; border-top: 1px solid var(--line-100); }
.b-ledger__row:first-child { border-top: 0; }
.b-ledger__row[hidden] { display: none; }
.b-ledger__id { color: var(--ink-300); font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.02em; }
.b-ledger__row p { overflow: hidden; font: 400 13px/1.35 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.b-ledger__row small { display: block; margin-top: 2px; color: var(--ink-300); font: 400 11.5px/1.35 var(--font-sans); }
.b-ledger__row small.is-error { color: var(--status-critical); }
.b-ledger__spark { display: flex; align-items: flex-end; gap: 1.5px; height: 18px; }
.b-ledger__spark i { flex: 1; height: calc(var(--h) * 100%); min-height: 1px; background: var(--ink-300); }
.b-ledger__row[data-status="running"] .b-ledger__spark i:last-child { background: var(--signal); }
.b-ledger__row[data-status="failed"] .b-ledger__spark i { background: var(--ink-400); }
.b-ledger__count { color: var(--ink-200); font: 400 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.b-ledger__count.is-signal { color: var(--signal); }
.b-ledger .b-badge { justify-self: start; height: 22px; padding: 0 7px; font-size: 10px; }
.b-ledger__row[data-status="failed"] .b-badge { --tone: var(--status-critical); }
.b-ledger__row[data-status="cancelled"] .b-badge { --tone: var(--ink-300); }
@container win (max-width: 640px) {
  .b-ledger__cols { display: none; }
  .b-ledger__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .b-ledger__id { grid-column: 1 / -1; }
  .b-ledger__spark, .b-ledger__count { display: none; }
  .b-ledger__row > div { grid-row: 2; }
  .b-ledger__row .b-badge { grid-row: 2; }
}

/* Review queue */
.b-queue { display: grid; }
.b-queue__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.b-queue__search { display: flex; align-items: center; gap: 8px; width: 200px; height: 30px; padding: 0 10px; border: 1px solid var(--line-200); border-radius: var(--radius-sm); background: var(--bg-000); color: var(--ink-400); font: 400 12px/1 var(--font-sans); }
.b-queue__search .b-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.b-queue__list { margin: 0; padding: 0; list-style: none; }
.b-queue__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 118px 24px 14px; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line-100); transition: background-color var(--dur-fast) var(--ease-out); }
.b-queue__row:first-child { border-top: 0; }
.b-queue__row[hidden] { display: none; }
.b-queue__row:hover { background: var(--bg-100); }
.b-queue__row p { font: 400 13px/1.4 var(--font-sans); }
.b-queue__row small { display: block; margin-top: 3px; color: var(--ink-300); font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.02em; }
.b-queue__row .b-badge { justify-self: start; height: 22px; padding: 0 7px; font-size: 10px; }
.b-queue__row .b-badge[data-status="progress"] { --tone: var(--ink-100); }
.b-queue__row .b-badge[data-status="retest"] { --tone: var(--status-low); }
.b-queue__row .b-badge[data-status="fixed"] { --tone: var(--status-verified); }
.b-queue__row .b-badge[data-status="accepted"] { --tone: var(--ink-300); }
.b-queue__row > .b-icon { width: 14px; height: 14px; color: var(--ink-400); }
.b-queue__empty { padding: 24px 16px; color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); text-align: center; }
@container win (max-width: 680px) {
  .b-queue__search { display: none; }
  .b-queue__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .b-queue__row > div { grid-column: 1 / -1; grid-row: 2; }
  .b-queue__row .b-avatar, .b-queue__row > .b-icon { display: none; }
  .b-queue__bar .b-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* Finding sheet */
.b-finding { display: grid; }
.b-finding__head { display: grid; gap: 10px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line-200); }
.b-finding__id { display: flex; align-items: center; gap: 10px; color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-finding__id b { color: var(--signal); font-weight: 500; }
.b-finding__id i { width: 18px; height: 1px; background: var(--line-300); }
.b-finding__title { font: 450 19px/1.3 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.b-finding__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.b-finding__tags .b-badge { height: 22px; padding: 0 7px; font-size: 10px; }
.b-finding__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 4px; margin: 0; padding: 14px 20px 0; list-style: none; }
.b-finding__flow button { display: block; width: 100%; padding: 9px 0 0; border: 0; border-top: 2px solid var(--line-300); background: none; color: var(--ink-400); font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.08em; text-align: left; text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.b-finding__flow button:hover { color: var(--ink-100); }
.b-finding__flow button.is-done { border-top-color: var(--ink-300); color: var(--ink-300); }
.b-finding__flow button[aria-current] { border-top-color: var(--signal); color: var(--ink-100); }
.b-finding__flow li:last-child { padding-left: 14px; }
.b-finding__flow .b-link { padding: 0; font-size: 12px; color: var(--ink-300); }
.b-finding__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.b-finding__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; padding: 18px 20px 20px; }
.b-finding__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; padding: 18px 20px 20px; border-left: 1px solid var(--line-200); }
.b-finding__section { display: grid; gap: 8px; }
.b-finding__section > p:not(.b-ui-label) { color: var(--ink-200); font: 400 13px/1.6 var(--font-sans); }
.b-finding__evidence { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.b-finding__panel { min-width: 0; }
.b-finding__panel[hidden] { display: none; }
.b-finding__panel ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.b-finding__panel ol li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: var(--ink-200); font: 400 12.5px/1.55 var(--font-sans); counter-increment: s; }
.b-finding__panel ol li::before { content: counter(s, decimal-leading-zero); color: var(--ink-400); font: 500 10.5px/1.9 var(--font-mono); }
.b-finding__panel code { color: var(--ink-100); font: 400 11.5px/1.4 var(--font-mono); }
.b-finding__panel > p { color: var(--ink-200); font: 400 12.5px/1.6 var(--font-sans); }
.b-finding__panel .b-ui-note { margin-top: 10px; }
.b-finding__owner { display: flex; align-items: center; gap: 10px; }
.b-finding__owner p { font: 400 13px/1.3 var(--font-sans); }
.b-finding__owner small { display: block; color: var(--ink-300); font: 400 11.5px/1.3 var(--font-sans); }
.b-finding__history { display: grid; gap: 10px; margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 1px solid var(--line-300); }
.b-finding__history li { position: relative; color: var(--ink-200); font: 400 12px/1.4 var(--font-sans); }
.b-finding__history li::before { content: ""; position: absolute; top: 6px; left: -15.5px; width: 6px; height: 6px; background: var(--ink-400); }
.b-finding__history li:first-child::before { background: var(--signal); }
.b-finding__history small { display: block; color: var(--ink-300); font: 400 10.5px/1.4 var(--font-mono); }
.b-finding .b-kv > div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 0; }
@container win (max-width: 720px) {
  .b-finding__body { grid-template-columns: minmax(0, 1fr); }
  .b-finding__side { border-left: 0; border-top: 1px solid var(--line-200); }
}
@container win (max-width: 520px) {
  .b-finding__head, .b-finding__main, .b-finding__side { padding-inline: 16px; }
  .b-finding__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 16px; }
  .b-finding__flow li:last-child { grid-column: 1 / -1; padding: 6px 0 0; }
  .b-finding__flow button { font-size: 8.5px; }
}

/* Ask panel */
.b-ask { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; height: var(--ask-h, 540px); }
.b-ask__thread { display: grid; align-content: start; gap: 16px; min-height: 0; padding: 18px 18px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-300) transparent; }
.b-ask__thread:focus-visible { outline-offset: -2px; }
.b-ask__thread { -webkit-mask-image: linear-gradient(transparent, #000 32px); mask-image: linear-gradient(transparent, #000 32px); }
.b-ask__msg { display: grid; gap: 8px; max-width: 64ch; color: var(--ink-200); font: 400 13px/1.6 var(--font-sans); }
.b-ask__msg b { color: var(--ink-100); font-weight: 450; }
.b-ask__from { display: flex; align-items: center; gap: 8px; color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-ask__from .b-mark { --m: 5px; color: var(--ink-100); }
.b-ask__msg--you { justify-self: end; max-width: 46ch; padding: 9px 12px; border: 1px solid var(--line-300); border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); background: var(--bg-150); color: var(--ink-100); }
.b-ask__msg.is-typing p::after { content: "▍"; margin-left: 2px; color: var(--signal); animation: b-blink 0.9s steps(1) infinite; }
.b-ask__draft { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-100); box-shadow: var(--shadow-edge); }
.b-ask__draft-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.b-ask__draft h5 { color: var(--ink-100); font: 450 15px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-ask__draft ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.b-ask__draft li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; color: var(--ink-200); font: 400 12.5px/1.5 var(--font-sans); }
.b-ask__draft li::before { content: ""; width: 5px; height: 5px; margin-top: 8px; background: var(--ink-400); }
.b-ask__draft-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.b-ask__draft-actions .b-btn { --h: 28px; padding: 0 10px; font-size: 12px; }
.b-ask__suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.b-ask__suggest button { height: 28px; padding: 0 10px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: none; color: var(--ink-200); font: 400 12px/1 var(--font-sans); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.b-ask__suggest button:hover { border-color: var(--ink-300); background: var(--bg-150); color: var(--ink-100); }
.b-ask__suggest button[disabled] { opacity: 0.4; cursor: default; }
.b-ask__composer { display: grid; gap: 10px; margin: 0 14px 14px; padding: 12px; border: 1px solid var(--line-300); border-radius: var(--radius-md); background: var(--bg-100); }
.b-ask__composer p { color: var(--ink-400); font: 400 13px/1.4 var(--font-sans); }
.b-ask__composer-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.b-ask__context { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); color: var(--ink-300); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-ask__context .b-icon { width: 11px; height: 11px; stroke-width: 2; }
.b-ask__send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--ink-100); color: var(--on-ink); }
.b-ask__send .b-icon { width: 14px; height: 14px; stroke-width: 2; }
.b-ask__foot { padding: 0 14px 12px; color: var(--ink-400); font: 500 9px/1 var(--font-mono); letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }

/* Security brief */
.b-brief { display: grid; padding: 22px 24px 18px; background: var(--bg-050); }
.b-brief__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-200); color: var(--ink-300); font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-brief__sec { position: relative; display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line-100); }
.b-brief__sec:last-of-type { border-bottom: 0; }
.b-brief__decision { display: flex; align-items: center; gap: 12px; }
.b-brief__decision h4 { font: 450 24px/1.15 var(--font-sans); letter-spacing: -0.03em; }
.b-brief__sec > p:not(.b-ui-label) { color: var(--ink-200); font: 400 13px/1.6 var(--font-sans); }
.b-brief__finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-200); border-left: 2px solid var(--status-critical); border-radius: var(--radius-xs); background: var(--bg-100); }
.b-brief__finding p { font: 450 13px/1.4 var(--font-sans); }
.b-brief__finding small { grid-column: 2; color: var(--ink-300); font: 400 11.5px/1.4 var(--font-sans); }
.b-brief__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.b-brief__steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; color: var(--ink-100); font: 400 13px/1.45 var(--font-sans); counter-increment: n; }
.b-brief__steps li::before { content: counter(n, decimal-leading-zero); color: var(--ink-400); font: 500 10.5px/1 var(--font-mono); }
.b-brief__steps small { color: var(--ink-300); font: 400 11px/1 var(--font-mono); white-space: nowrap; }
.b-brief__foot { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line-200); }
.b-brief__foot small { color: var(--ink-300); font: 400 11px/1.4 var(--font-mono); }
.b-brief__foot .b-actions { gap: 6px; }
.b-brief__foot .b-btn { --h: 28px; gap: 6px; padding: 0 10px; font-size: 12px; }
.b-brief__foot .b-btn .b-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.b-brief .b-pin { --x: -24px; --y: 26px; }
.b-brief__foot .b-pin { --y: 28px; }
@container win (max-width: 420px) {
  .b-brief { padding-inline: 18px; }
  .b-brief__steps li { grid-template-columns: 22px minmax(0, 1fr); }
  .b-brief__steps small { grid-column: 2; }
}

/* Report sheet */
.b-report { display: grid; }
.b-report__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; }
.b-report__top > div:first-child { display: grid; gap: 8px; }
.b-report__top h4 { font: 450 20px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.b-report__top h4 span { color: var(--ink-300); }
.b-report__export { display: flex; flex-wrap: wrap; gap: 6px; }
.b-report__export .b-btn { gap: 6px; }
.b-report__export .b-btn .b-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.b-report__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(3, auto); align-items: center; gap: 12px 24px; margin: 0 20px; padding: 14px 16px; border: 1px solid var(--signal-edge); border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--signal-wash), transparent 70%), var(--bg-100); }
.b-report__verdict p { font: 450 15px/1.35 var(--font-sans); letter-spacing: -0.01em; }
.b-report__verdict small { display: block; color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); letter-spacing: 0; }
.b-report__stat { display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid var(--line-300); }
.b-report__stat b { font: 400 20px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.b-report__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 16px; border-top: 1px solid var(--line-200); }
.b-report__col { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px 20px 18px; }
.b-report__col + .b-report__col { border-left: 1px solid var(--line-200); }
.b-report__cover { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.b-report__cover li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--ink-100); font: 400 12.5px/1.45 var(--font-sans); }
.b-report__cover li .b-icon { width: 14px; height: 14px; margin-top: 2px; stroke-width: 1.8; color: var(--status-verified); }
.b-report__cover li.is-out { color: var(--ink-300); }
.b-report__cover li.is-out .b-icon { color: var(--ink-400); }
.b-report__cover small { color: var(--ink-400); }
.b-report__index { margin: 0; padding: 0; list-style: none; }
.b-report__index li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-100); font: 400 12.5px/1.4 var(--font-sans); }
.b-report__index li:first-child { border-top: 0; }
.b-report__index b { color: var(--ink-300); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.04em; }
.b-report__index code { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-300); font: 400 10.5px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.b-report__index time { color: var(--ink-300); font: 400 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
@container win (max-width: 680px) {
  .b-report__verdict { grid-template-columns: auto minmax(0, 1fr); }
  .b-report__stat { grid-row: 2; padding-left: 0; border-left: 0; }
  .b-report__stat:nth-of-type(1) { grid-column: 1 / -1; }
  .b-report__stat:nth-of-type(n+2) { display: none; }
  .b-report__grid { grid-template-columns: minmax(0, 1fr); }
  .b-report__col + .b-report__col { border-left: 0; border-top: 1px solid var(--line-200); }
}
@container win (max-width: 460px) {
  .b-report__top { padding-inline: 16px; }
  .b-report__verdict { margin-inline: 16px; }
  .b-report__col { padding-inline: 16px; }
}

/* Schedule form */
.b-schedule { display: grid; }
.b-schedule__top { display: grid; gap: 6px; padding: 20px 20px 16px; border-bottom: 1px solid var(--line-200); }
.b-schedule__top h4 { font: 450 19px/1.2 var(--font-sans); letter-spacing: -0.02em; }
.b-schedule__top p:not(.b-ui-kicker) { color: var(--ink-300); font: 400 12.5px/1.45 var(--font-sans); }
.b-schedule__fields { display: grid; gap: 0; }
.b-schedule__field { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: start; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-100); }
.b-schedule__field:first-child { border-top: 0; }
.b-schedule__field > .b-ui-label { padding-top: 8px; }
.b-schedule__field > div { display: grid; gap: 10px; min-width: 0; }
.b-schedule__field[hidden] { display: none; }
.b-schedule__input { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-000); color: var(--ink-100); font: 400 12.5px/1.3 var(--font-sans); }
.b-schedule__input code { font: 400 12px/1 var(--font-mono); }
.b-schedule__input .b-icon { width: 14px; height: 14px; stroke-width: 1.7; color: var(--ink-300); }
.b-schedule__input small { margin-left: auto; color: var(--ink-300); font: 400 11px/1 var(--font-mono); }
.b-schedule__days { display: flex; gap: 4px; }
.b-schedule__days button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-000); color: var(--ink-300); font: 500 11px/1 var(--font-mono); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.b-schedule__days button[aria-pressed="true"] { border-color: var(--ink-100); background: var(--ink-100); color: var(--on-ink); }
.b-schedule__dests { display: grid; gap: 8px; }
.b-schedule__auth { display: grid; gap: 10px; margin: 0 20px 16px; padding: 14px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-100); }
.b-schedule__auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.b-schedule__auth-row p { font: 450 13px/1.4 var(--font-sans); }
.b-schedule__auth-row small { display: block; color: var(--ink-300); font: 400 12px/1.4 var(--font-sans); }
.b-schedule__expiry { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-300); font: 400 11px/1 var(--font-mono); letter-spacing: 0.02em; }
.b-schedule__auth .b-ui-meter i.is-on { background: var(--status-verified); }
.b-schedule__auth.is-off .b-ui-meter i.is-on { background: var(--line-300); }
.b-schedule__auth.is-off .b-schedule__expiry span:last-child { color: var(--signal); }
@container win (max-width: 600px) {
  .b-schedule__top { padding-inline: 16px; }
  .b-schedule__field { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-inline: 16px; }
  .b-schedule__field > .b-ui-label { padding-top: 0; }
  .b-schedule__auth { margin-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-ask__msg.is-typing p::after { animation: none; }
}
/* Surfaces in other components */
.b-lifecycle__view > .b-window { align-self: start; }
.b-tour__slide > .b-window { max-width: 780px; }
.b-annotated__shot > .b-window { box-shadow: var(--shadow-capture), var(--shadow-offset); }
.b-annotated__shot:has(> .b-window) { max-width: 470px; }
.b-annotated .b-brief { padding-left: 48px; }
.b-viewer:has(.b-viewer__stage) { width: min(1120px, 100%); }
.b-viewer__stage { position: relative; isolation: isolate; display: grid; justify-items: center; padding: 28px; background: var(--bg-000); }
.b-viewer__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lattice) center / 300px; opacity: var(--lattice-opacity); }
.b-viewer__stage > .b-window { max-width: 1040px; }
.b-viewer__stage > .b-window:has(.b-brief), .b-viewer__stage > .b-window:has(.b-ask) { max-width: 720px; }
.b-viewer .b-window--peek .b-window__body { max-height: none; overflow: visible; }
.b-viewer .b-window--peek .b-window__body::after, .b-viewer .b-window__expand { display: none; }
.b-viewer .b-ask { --ask-h: min(640px, calc(100dvh - 220px)); }
/* ---------- End product surfaces ---------- */

/* ---------- Showcase ---------- */
/* Ways to present product surfaces on the page. Each composes AppWindows; the surfaces inside keep their own container queries. */

@keyframes b-show-in { from { opacity: 0; transform: translateY(6px); } }

/* Integrations page (used by WorkspaceDemo) */
.b-integ { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 24px 24px; }
.b-integ__head { display: grid; gap: 6px; }
.b-integ__head > p:last-child { max-width: 60ch; color: var(--ink-300); font: 400 13px/1.55 var(--font-sans); }
.b-integ__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.b-integ__card { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.b-integ__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px 0; }
.b-integ__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-300); border-radius: var(--radius-sm); background: var(--bg-150); color: var(--ink-100); }
.b-integ__icon .b-icon { width: 16px; height: 16px; stroke-width: 1.6; }
.b-integ__copy { display: grid; align-content: start; gap: 4px; padding: 12px 16px 14px; }
.b-integ__copy h5 { color: var(--ink-100); font: 450 15px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-integ__copy p { color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); }
.b-integ__list { margin: 0; padding: 0; list-style: none; }
.b-integ__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line-100); }
.b-integ__list li:first-child { border-top: 0; }
.b-integ__list p { color: var(--ink-100); font: 450 13px/1.3 var(--font-sans); }
.b-integ__list small { color: var(--ink-300); font: 400 11.5px/1.4 var(--font-mono); }
@container win (max-width: 560px) {
  .b-integ { padding: 18px 16px; }
  .b-integ__grid { grid-template-columns: minmax(0, 1fr); }
}

/* WorkspaceDemo: one window whose sidebar works */
.b-wsdemo { display: grid; gap: 14px; }
.b-wsdemo__window { --peek: 600px; }
.b-wsdemo__nav { gap: 6px; }
.b-wsdemo__nav button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-400); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.b-wsdemo__nav button:hover { background: var(--bg-100); color: var(--ink-100); }
.b-wsdemo__nav button[aria-selected="true"] { background: var(--bg-150); color: var(--ink-100); box-shadow: var(--shadow-edge); }
.b-wsdemo__nav button[aria-selected="true"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -10px; width: 2px; background: var(--signal); }
.b-wsdemo__nav button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.b-wsdemo__tip { position: absolute; top: 50%; left: calc(100% + 12px); z-index: 6; padding: 6px 8px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-150); color: var(--ink-100); font: 500 10px/1 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-4px, -50%); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.b-wsdemo__nav button:hover .b-wsdemo__tip,
.b-wsdemo__nav button:focus-visible .b-wsdemo__tip { opacity: 1; transform: translate(0, -50%); }
.b-wsdemo__page:not([hidden]) { animation: b-show-in var(--dur-slow) var(--ease-out); }
.b-wsdemo__hint { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-wsdemo__hint i { width: 6px; height: 6px; background: var(--signal); animation: b-blink 1.6s var(--ease-in-out) infinite; }
.b-wsdemo__caption { display: flex; align-items: baseline; gap: 16px; padding: 0 4px; }
.b-wsdemo__num { flex: none; color: var(--signal); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; }
.b-wsdemo__caption p { color: var(--ink-300); font: 400 14px/1.5 var(--font-sans); }
.b-wsdemo__caption b { color: var(--ink-100); font-weight: 450; }
.b-wsdemo__keys { margin-left: auto; color: var(--ink-400); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
@container win (max-width: 640px) {
  .b-wsdemo .b-window__main { grid-template-columns: minmax(0, 1fr); }
  .b-wsdemo .b-wsdemo__nav { display: flex; flex-direction: row; justify-content: space-between; padding: 6px 12px; border-right: 0; border-bottom: 1px solid var(--line-200); }
  .b-wsdemo__nav button[aria-selected="true"]::before { top: auto; right: 6px; bottom: -7px; left: 6px; width: auto; height: 2px; }
  .b-wsdemo__tip, .b-wsdemo__hint { display: none; }
}

/* RunStory: the narrative scrolls, the timeline follows */
.b-runstory { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); grid-template-areas: "steps view"; align-items: start; gap: 56px; }
.b-runstory__view { grid-area: view; position: sticky; top: calc(var(--header-height) + 32px); }
.b-runstory__steps { grid-area: steps; position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; }
.b-runstory__steps::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 5px; width: 1px; background: var(--line-300); }
.b-runstory__step { display: grid; align-content: center; justify-items: start; gap: 12px; min-height: 46vh; padding: 24px 0; }
.b-runstory__step:first-child { min-height: 40vh; }
.b-runstory__step:last-child { min-height: 48vh; }
.b-runstory__time { position: relative; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-100); color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; cursor: pointer; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.b-runstory__time::before { content: ""; position: absolute; top: 50%; left: -30px; width: 9px; height: 9px; margin-top: -5px; border: 1px solid var(--line-300); background: var(--bg-000); transform: rotate(45deg); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.b-runstory__time:hover { color: var(--ink-100); border-color: var(--ink-300); }
.b-runstory__step h3 { color: var(--ink-300); font: 450 28px/1.12 var(--font-sans); letter-spacing: -0.022em; transition: color var(--dur-base) var(--ease-out); }
.b-runstory__step p { max-width: 40ch; color: var(--ink-400); font: 400 15px/1.6 var(--font-sans); transition: color var(--dur-base) var(--ease-out); }
.b-runstory__step code { color: inherit; font: 400 0.88em/1 var(--font-mono); }
.b-runstory__step.is-past .b-runstory__time::before { border-color: var(--signal-edge); background: var(--signal-deep); }
.b-runstory__step.is-active h3 { color: var(--ink-050); }
.b-runstory__step.is-active p { color: var(--ink-200); }
.b-runstory__step.is-active .b-runstory__time { border-color: var(--signal-edge); background: var(--signal-wash); color: var(--signal); }
.b-runstory__step.is-active .b-runstory__time::before { border-color: var(--signal); background: var(--signal); }

/* GuidedDemo: an autoplaying click-through with a cursor */
.b-guided { display: grid; gap: 16px; }
.b-guided__window { --peek: 560px; }
.b-guided__page:not([hidden]) { animation: b-show-in var(--dur-slow) var(--ease-out); }
.b-guided__rec { display: inline-flex; align-items: center; gap: 8px; padding-right: 6px; color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.b-guided__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: b-blink 1.6s var(--ease-in-out) infinite; }
.b-guided.is-idle .b-guided__rec i { animation: none; background: var(--ink-400); }
.b-guided__cursor { position: absolute; top: 0; left: 0; z-index: 6; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: transform 0.9s var(--ease-in-out), opacity var(--dur-base) var(--ease-out); }
.b-guided.is-aimed .b-guided__cursor { opacity: 1; }
.b-guided__cursor svg { display: block; width: 22px; height: 22px; fill: var(--ink-050); stroke: var(--bg-000); stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 3px 6px #000000a6); }
.b-guided__cursor i { position: absolute; top: -12px; left: -10px; width: 30px; height: 30px; border: 2px solid var(--signal); border-radius: 50%; opacity: 0; }
.b-guided.is-clicking .b-guided__cursor i { animation: b-guided-click 0.7s var(--ease-out); }
@keyframes b-guided-click { from { opacity: 1; transform: scale(0.35); } to { opacity: 0; transform: scale(1.5); } }
.b-guided .is-pressed { border-radius: var(--radius-xs); outline: 1px solid var(--signal); outline-offset: 3px; background-color: var(--signal-wash); transition: background-color var(--dur-base) var(--ease-out); }
.b-guided__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; }
.b-guided__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.b-guided__step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 10px; padding: 0 0 4px; border: 0; background: none; color: var(--ink-300); font: 400 13px/1.45 var(--font-sans); text-align: left; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.b-guided__step:hover { color: var(--ink-100); }
.b-guided__step b { color: var(--ink-400); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; }
.b-guided__bar { grid-column: 1 / -1; height: 2px; margin-bottom: 6px; overflow: hidden; background: var(--line-300); }
.b-guided__bar i { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.b-guided__step.is-done .b-guided__bar i { background: var(--ink-300); transform: none; }
.b-guided__step[aria-pressed="true"] { color: var(--ink-050); }
.b-guided__step[aria-pressed="true"] b { color: var(--signal); }
.b-guided__step[aria-pressed="true"] .b-guided__bar i { animation: b-guided-bar var(--guided-dur, 4600ms) linear forwards; }
.b-guided.is-idle .b-guided__step[aria-pressed="true"] .b-guided__bar i { animation: none; transform: none; }
@keyframes b-guided-bar { to { transform: none; } }

/* FeatureRow: copy that drives the surface beside it */
.b-features { display: grid; gap: 96px; }
.b-feature { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "text shot"; align-items: center; gap: 64px; }
.b-feature--flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); grid-template-areas: "shot text"; }
.b-feature__text { grid-area: text; display: grid; align-content: center; gap: 18px; min-width: 0; }
.b-feature__shot { grid-area: shot; min-width: 0; padding: 40px 36px; border-radius: var(--radius-lg); }
.b-feature__shot .b-window { --peek: 500px; max-width: 660px; }
.b-feature__index { display: flex; align-items: center; gap: 10px; color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.b-feature__index b { color: var(--signal); font-weight: 500; }
.b-feature__title { color: var(--ink-050); font: 450 32px/1.12 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.b-feature__title span { color: var(--ink-300); }
.b-feature__lead { max-width: 44ch; color: var(--ink-200); font: 400 15px/1.65 var(--font-sans); }
.b-feature__drive { display: grid; margin-top: 6px; border-top: 1px solid var(--line-200); }
.b-feature__drive button { position: relative; display: grid; gap: 4px; padding: 14px 0 14px 22px; border: 0; border-bottom: 1px solid var(--line-200); background: none; color: var(--ink-400); text-align: left; cursor: pointer; }
.b-feature__drive button::before { content: ""; position: absolute; top: 20px; left: 1px; width: 7px; height: 7px; border: 1px solid var(--ink-400); transform: rotate(45deg); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.b-feature__drive b { color: var(--ink-200); font: 450 15px/1.35 var(--font-sans); transition: color var(--dur-fast) var(--ease-out); }
.b-feature__drive span { font: 400 13px/1.5 var(--font-sans); transition: color var(--dur-fast) var(--ease-out); }
.b-feature__drive button:hover b { color: var(--ink-050); }
.b-feature__drive button[aria-pressed="true"] b { color: var(--ink-050); }
.b-feature__drive button[aria-pressed="true"] span { color: var(--ink-200); }
.b-feature__drive button[aria-pressed="true"]::before { border-color: var(--signal); background: var(--signal); }
.b-feature .is-spot { border-radius: var(--radius-xs); outline: 1px solid var(--signal); outline-offset: -1px; }

/* CitedAnswer: an answer whose sources light up in the surface */
.b-cited { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 32px; }
.b-cited__answer { position: sticky; top: calc(var(--header-height) + 32px); display: grid; gap: 14px; min-width: 0; }
.b-cited__card { background: var(--bg-050); box-shadow: var(--shadow-capture); }
.b-cited__thread { display: grid; gap: 16px; padding: 18px; }
.b-cited__thread .b-ask__msg { max-width: none; font-size: 14px; line-height: 1.8; }
.b-cited__thread code { color: var(--ink-100); font: 400 0.88em/1 var(--font-mono); }
.b-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px; padding: 0 4px; border: 1px solid var(--signal-edge); border-radius: var(--radius-xs); background: var(--signal-wash); color: var(--signal); font: 600 10px/1 var(--font-mono); vertical-align: 2px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.b-cite[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); color: var(--on-signal); }
.b-cited__sources { display: grid; gap: 8px; padding: 14px 10px 12px; border-top: 1px solid var(--line-200); }
.b-cited__sources > .b-ui-label { padding: 0 8px; }
.b-cited__sources ol { display: grid; margin: 0; padding: 0; list-style: none; }
.b-cited__sources button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-300); font: 400 12.5px/1.4 var(--font-sans); text-align: left; cursor: pointer; }
.b-cited__sources button b { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); color: var(--ink-200); font: 600 10px/1 var(--font-mono); }
.b-cited__sources time { color: var(--ink-400); font: 500 10.5px/1 var(--font-mono); }
.b-cited__sources button:hover { background: var(--bg-100); color: var(--ink-100); }
.b-cited__sources button[aria-pressed="true"] { background: var(--bg-150); color: var(--ink-100); }
.b-cited__sources button[aria-pressed="true"] b { border-color: var(--signal); background: var(--signal); color: var(--on-signal); }
.b-cited__note { display: flex; align-items: center; gap: 8px; color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); }
.b-cited__note .b-icon { flex: none; width: 14px; height: 14px; color: var(--signal); }
.b-cited__view { min-width: 0; }
.b-cited__view .b-window { --peek: 620px; }
.b-cited .is-cited { border-radius: 3px; background-color: var(--signal-wash); box-shadow: 0 0 0 1px var(--signal), 0 0 0 4px var(--signal-wash); animation: b-cite-in 0.6s var(--ease-out); }
@keyframes b-cite-in { from { box-shadow: 0 0 0 1px var(--signal), 0 0 0 14px #f2764800; } }

/* DistillSlider: 312 events on one side, one decision on the other */
.b-distill { display: grid; gap: 14px; }
.b-distill__frame { --split: 50%; position: relative; display: grid; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.b-distill__layer--raw { position: absolute; inset: 0; padding: 58px 20px 0; background: var(--bg-000); -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.b-distill__log { margin: 0; padding: 0; list-style: none; columns: 3 230px; column-gap: 28px; color: var(--ink-400); font: 400 10.5px/1.8 var(--font-mono); }
.b-distill__log li { display: grid; grid-template-columns: 40px 54px minmax(0, 1fr); gap: 6px; break-inside: avoid; white-space: nowrap; }
.b-distill__log span { color: var(--ink-400); }
.b-distill__log i { overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.b-distill__log [data-kind] { color: var(--ink-100); }
.b-distill__log [data-kind="candidate"] { color: var(--signal); }
.b-distill__log [data-kind="replay"], .b-distill__log [data-kind="complete"] { color: var(--status-verified); }
.b-distill__log [data-kind="attention"] { color: var(--status-high); }
.b-distill__layer--brief { position: relative; z-index: 1; display: grid; place-items: center; min-height: 580px; padding: 60px 24px 28px; background: radial-gradient(90% 70% at 50% 25%, #ffffff0a, transparent 70%), var(--stage-share); clip-path: inset(0 0 0 var(--split)); }
.b-distill__layer--brief .b-brief { width: 100%; max-width: 520px; border: 1px solid var(--line-300); border-radius: var(--radius-md); box-shadow: var(--shadow-capture); }
@media (min-width: 1100px) { .b-distill__layer--brief { justify-items: end; padding-right: 32px; } }
.b-distill__frame.is-gliding .b-distill__layer--brief { transition: clip-path 0.7s var(--ease-out); }
.b-distill__handle { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 3; width: 0; outline: none; }
.b-distill__frame.is-gliding .b-distill__handle { transition: left 0.7s var(--ease-out); }
.b-distill__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.b-distill__grip { position: absolute; top: 50%; left: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--signal); border-radius: 50%; background: var(--bg-050); color: var(--signal); transform: translate(-50%, -50%); }
.b-distill__grip .b-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.b-distill__handle:focus-visible .b-distill__grip { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.b-distill__tag { position: absolute; top: 16px; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); background: var(--bg-veil); color: var(--ink-200); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.b-distill__tag--raw { left: 16px; }
.b-distill__tag--brief { right: 16px; border-color: var(--signal-edge); color: var(--signal); }
.b-distill__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.b-distill__foot p { max-width: 56ch; color: var(--ink-300); font: 400 13px/1.5 var(--font-sans); }

/* HandoffChain: what each step hands to the next */
.b-handoff { --mid: 212px; display: grid; gap: 18px; }
.b-handoff__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(380px, 84vw); gap: 56px; margin: 0; padding: 4px 2px 12px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.b-handoff__track::-webkit-scrollbar { display: none; }
.b-handoff__track:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.b-handoff__node { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; min-width: 0; scroll-snap-align: start; }
.b-handoff__node + .b-handoff__node::before { content: ""; position: absolute; top: var(--mid); left: -56px; width: 56px; height: 1px; background: linear-gradient(90deg, var(--line-300), var(--signal-edge)); }
.b-handoff__node + .b-handoff__node::after { content: ""; position: absolute; top: calc(var(--mid) - 3px); left: -52px; width: 7px; height: 7px; background: var(--signal); transform: rotate(45deg); animation: b-handoff-dot 2.6s var(--ease-in-out) infinite; }
@keyframes b-handoff-dot { 0% { left: -54px; opacity: 0; } 25%, 75% { opacity: 1; } 100% { left: -10px; opacity: 0; } }
.b-handoff__head { display: flex; align-items: baseline; gap: 10px; }
.b-handoff__head span { color: var(--signal); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; }
.b-handoff__head h3 { color: var(--ink-100); font: 450 17px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.b-handoff__shot .b-window { --peek: 300px; }
.b-handoff__note { color: var(--ink-300); font: 400 13.5px/1.55 var(--font-sans); }
.b-handoff__carry { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--line-300); color: var(--ink-300); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.b-handoff__carry b { color: var(--ink-100); font-weight: 500; }
.b-handoff__carry .b-icon { flex: none; width: 13px; height: 13px; stroke-width: 2; color: var(--signal); }
.b-handoff__carry--end .b-icon { color: var(--status-verified); }
.b-handoff__controls { display: flex; align-items: center; gap: 8px; }
.b-handoff__progress { flex: 1; height: 1px; margin-right: 12px; background: var(--line-300); }
.b-handoff__progress i { display: block; height: 100%; background: var(--signal); transform: scaleX(0.2); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.b-handoff__pos { margin-right: 8px; color: var(--ink-300); font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; }
.b-handoff.is-static .b-handoff__controls { display: none; }

/* ReleaseGate: a release lands, Blackglass decides, the team hears */
.b-gate { display: grid; gap: 20px; }
.b-gate__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.b-gate__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.b-gate__stage { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.b-gate__label { display: flex; align-items: center; gap: 10px; color: var(--ink-200); font: 450 14px/1.3 var(--font-sans); white-space: nowrap; }
.b-gate__label b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); color: var(--ink-300); font: 500 10px/1 var(--font-mono); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.b-gate__label::after { content: ""; flex: 1; height: 1px; margin-right: -28px; background: linear-gradient(90deg, var(--signal) 50%, var(--line-300) 50%) 100% 0 / 200% 100%; transition: background-position 0.6s var(--ease-out); }
.b-gate__stage:last-child .b-gate__label::after { display: none; }
.b-gate__stage[data-state="done"] .b-gate__label::after { background-position: 0 0; }
.b-gate__stage[data-state="done"] .b-gate__label b { border-color: var(--signal-edge); color: var(--signal); }
.b-gate__stage[data-state="active"] .b-gate__label b { border-color: var(--signal); background: var(--signal); color: var(--on-signal); }
.b-gate__card { background: var(--bg-050); box-shadow: var(--shadow-float); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.b-gate__stage[data-state="idle"] .b-gate__card { opacity: 0.3; transform: translateY(6px); }
.b-gate__stage[data-state="active"] .b-gate__card { border-color: var(--signal-edge); }
.b-gate__body { display: grid; align-content: start; gap: 12px; padding: 14px 16px 16px; }
.b-gate__title { color: var(--ink-100); font: 450 14px/1.4 var(--font-sans); }
.b-gate__title code { color: var(--signal); font: 500 12px/1 var(--font-mono); }
.b-gate__checks { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.b-gate__checks li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ink-200); font: 400 12.5px/1.4 var(--font-sans); }
.b-gate__checks .b-icon { width: 13px; height: 13px; stroke-width: 2.2; color: var(--ink-400); transition: color var(--dur-base) var(--ease-out); }
.b-gate__checks small { color: var(--ink-300); font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.b-gate__checks .is-on .b-icon { color: var(--status-verified); }
.b-gate__run { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-200); }
.b-gate__phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.b-gate__phases i { height: 4px; background: var(--line-300); transition: background-color var(--dur-base) var(--ease-out); }
.b-gate__phases .is-done { background: var(--ink-200); }
.b-gate__phases .is-now { background: var(--signal); }
.b-gate__run p { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-300); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; }
.b-gate__run p span:first-child { color: var(--ink-100); }
.b-gate__decision .b-badge { justify-self: start; }
.b-gate__decision h4 { color: var(--ink-050); font: 450 20px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.b-gate__decision p { color: var(--ink-300); font: 400 12.5px/1.5 var(--font-sans); }
.b-gate__finding { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line-200); }
.b-gate__msg { display: grid; gap: 8px; padding: 12px; border-left: 2px solid var(--signal); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--bg-100); color: var(--ink-200); font: 400 12.5px/1.55 var(--font-sans); }
.b-gate[data-scenario="ready"] .b-gate__msg { border-left-color: var(--status-verified); }
.b-gate__msg b { color: var(--ink-100); font-weight: 500; }
.b-gate__stage[data-state="active"] .b-gate__msg { animation: b-show-in var(--dur-slow) var(--ease-out); }
.b-gate__attach { display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--line-300); border-radius: var(--radius-xs); color: var(--ink-200); font: 500 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.b-gate__attach .b-icon { width: 12px; height: 12px; }
.b-gate[data-scenario="hold"] [data-when="ready"],
.b-gate[data-scenario="ready"] [data-when="hold"] { display: none; }

/* WindowStack: three linked windows, any one brought forward */
.b-wstack { display: grid; gap: 20px; }
.b-wstack__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.b-wstack__caption { color: var(--ink-300); font: 400 13.5px/1.5 var(--font-sans); }
.b-wstack__scene { position: relative; height: 630px; }
.b-wstack__layer { position: absolute; filter: brightness(0.5) saturate(0.7); transform: scale(0.97); transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out); }
.b-wstack__layer[data-layer="0"] { --peek: 430px; top: 0; left: 0; width: 62%; transform-origin: 0 0; }
.b-wstack__layer[data-layer="1"] { --peek: 440px; top: 128px; left: 18%; width: 56%; transform-origin: 50% 0; }
.b-wstack__layer[data-layer="2"] { --peek: 480px; top: 60px; right: 0; width: 34%; transform-origin: 100% 0; }
.b-wstack__layer.is-front { filter: none; transform: none; }
.b-wstack__layer:not(.is-front):hover { filter: brightness(0.72) saturate(0.85); }
.b-wstack__raise { position: absolute; inset: 0; z-index: 5; width: 100%; padding: 0; border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; }
.b-wstack__layer.is-front .b-wstack__raise { display: none; }

/* SurfaceWall: a drifting wall of the product behind a statement */
.b-wall { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 680px; overflow: hidden; border: 1px solid var(--line-200); border-radius: var(--radius-lg); background: var(--bg-000); }
.b-wall::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46% 52% at 50% 50%, var(--bg-000) 25%, #08090abf 58%, #08090a33 100%); pointer-events: none; }
.b-wall__scene { position: absolute; inset: 0; z-index: -2; perspective: 1800px; -webkit-mask-image: radial-gradient(85% 80% at 50% 50%, #000 40%, transparent 92%); mask-image: radial-gradient(85% 80% at 50% 50%, #000 40%, transparent 92%); }
.b-wall__plane { position: absolute; top: 50%; left: 50%; display: grid; grid-template-columns: repeat(4, 380px); align-items: start; gap: 28px; transform: translate(-50%, -50%) rotateX(32deg) rotateZ(-16deg); }
.b-wall__run { display: grid; gap: 28px; animation: b-wall-drift calc(80s + var(--i) * 14s) linear infinite; }
.b-wall__col:nth-child(even) .b-wall__run { animation-direction: reverse; }
.b-wall__run .b-window { box-shadow: var(--shadow-float); }
@keyframes b-wall-drift { to { transform: translateY(calc(-50% - 14px)); } }
.b-wall.is-paused .b-wall__run { animation-play-state: paused; }
.b-wall__copy { display: grid; justify-items: center; gap: 20px; max-width: 640px; padding: 56px 24px; text-align: center; }
.b-wall__title { color: var(--ink-050); font: 450 44px/1.06 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; }
.b-wall__title span { color: var(--ink-300); }
.b-wall__copy > p:not(.b-eyebrow) { max-width: 48ch; color: var(--ink-200); font: 400 15px/1.65 var(--font-sans); }
.b-wall__copy .b-actions { justify-content: center; }
.b-wall__pause { position: absolute; right: 16px; bottom: 16px; }

@media (max-width: 1100px) {
  .b-gate__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .b-gate__label::after { margin-right: -24px; }
  .b-gate__stage:nth-child(2n) .b-gate__label::after { display: none; }
}
@media (max-width: 960px) {
  .b-feature, .b-feature--flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "shot"; gap: 28px; }
  .b-features { gap: 72px; }
  .b-cited { grid-template-columns: minmax(0, 1fr); }
  .b-cited__answer { position: static; }
  .b-cited__view .b-window { --peek: 520px; }
}
@media (max-width: 900px) {
  .b-runstory { grid-template-columns: minmax(0, 1fr); grid-template-areas: "view" "steps"; gap: 16px; }
  .b-runstory__view { position: static; }
  .b-runstory__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; padding: 0 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .b-runstory__steps::before, .b-runstory__time::before { display: none; }
  .b-runstory__step, .b-runstory__step:first-child, .b-runstory__step:last-child { align-content: start; min-height: 0; padding: 16px; border: 1px solid var(--line-200); border-radius: var(--radius-md); background: var(--bg-050); scroll-snap-align: start; }
  .b-runstory__step.is-active { border-color: var(--line-300); background: var(--bg-100); }
  .b-runstory__step h3 { font-size: 19px; }
  .b-runstory__step p { font-size: 13.5px; }
  .b-wstack__scene { height: auto; }
  .b-wstack__scene .b-wstack__layer { position: static; width: auto; filter: none; transform: none; }
  .b-wstack__scene .b-wstack__layer:not(.is-front) { display: none; }
}
@media (max-width: 760px) {
  .b-guided__controls { grid-template-columns: minmax(0, 1fr); }
  .b-guided__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .b-guided__pause { justify-self: start; grid-row: 1; }
  .b-wsdemo__keys { display: none; }
}
@media (max-width: 640px) {
  .b-gate__flow { grid-template-columns: minmax(0, 1fr); }
  .b-gate__label::after { display: none; }
}
@media (max-width: 600px) {
  .b-feature__shot { padding: 20px 12px; }
  .b-feature__title { font-size: 26px; }
  .b-distill__layer--brief { min-height: 540px; padding: 56px 12px 16px; }
  .b-distill__layer--raw { padding: 54px 12px 0; }
  .b-wall { min-height: 560px; }
  .b-wall__plane { grid-template-columns: repeat(4, 300px); gap: 20px; }
  .b-wall__title { font-size: 32px; }
}
@media (hover: none) {
  .b-wsdemo__keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-wsdemo__page:not([hidden]), .b-guided__page:not([hidden]), .b-gate__stage[data-state="active"] .b-gate__msg, .b-cited .is-cited { animation: none; }
  .b-wsdemo__hint i, .b-guided__rec i { animation: none; }
  .b-guided__cursor { transition: none; }
  .b-handoff__node + .b-handoff__node::after { animation: none; left: -31px; }
  .b-wall__run { animation: none; }
  .b-wall__pause { display: none; }
  .b-runstory__step h3, .b-runstory__step p, .b-wstack__layer { transition: none; }
}
/* ---------- End showcase ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .b-heading--split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
}
@media (max-width: 1300px) {
  :root { --page-gutter: var(--page-gutter-md); }
}
@media (max-width: 900px) {
  .b-masthead__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .b-masthead__nav, .b-masthead__end .b-link { display: none; }
  .b-masthead__menu { display: grid; }
  .b-hero__title { font-size: 56px; }
  .b-hero__body, .b-manifest, .b-specimens, .b-probe, .b-tour, .b-bounds, .b-qindex, .b-annotated, .b-markcta { grid-template-columns: minmax(0, 1fr); }
  .b-hero__copy { padding: 40px var(--page-gutter); }
  .b-hero__stage.b-stage { padding: 32px 0 32px var(--page-gutter); border-left: 0; border-top: 1px solid var(--line-200); }
  .b-manifest__doc { border-left: 0; border-top: 1px solid var(--line-200); }
  .b-probe__ask, .b-qindex__list, .b-tour__list { border-right: 0; border-bottom: 1px solid var(--line-200); }
  .b-annotated > .b-stage { border-right: 0; border-bottom: 1px solid var(--line-200); }
  .b-tour__view.b-stage { min-height: 380px; }
  .b-lifecycle { flex-direction: column; min-height: 0; }
  .b-lifecycle__panel { flex: none; flex-direction: column; }
  .b-lifecycle__panel.is-open { flex: none; }
  .b-lifecycle__tab { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 16px; width: 100%; padding: 18px 20px; }
  .b-lifecycle__name { writing-mode: horizontal-tb; transform: none; align-self: auto; font-size: 20px; }
  .b-lifecycle__content { padding: 0 20px 24px; }
  .b-bounds { gap: 32px; }
  .b-lens__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-case { grid-template-columns: minmax(0, 1fr); }
  .b-case__perf { width: auto; height: 1px; background: repeating-linear-gradient(90deg, var(--line-300) 0 4px, transparent 4px 9px); }
  .b-case__perf::before, .b-case__perf::after { display: none; }
  .b-case > .b-link { margin: 0 28px 22px; }
  .b-foot__statement p { font-size: 32px; }
}
@media (max-width: 600px) {
  :root { --page-gutter: var(--page-gutter-sm); }
  .b-hero__head { padding-block: 56px 40px; }
  .b-hero__title { font-size: 42px; }
  .b-heading__title { font-size: 30px; }
  .b-heading--display .b-heading__title, .b-markcta__statement { font-size: 36px; }
  .b-lede { font-size: 21px; }
  .b-console__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
  .b-console__agent { grid-column: 2; grid-row: 1; }
  .b-console__msg { grid-column: 1 / -1; }
  .b-console__row .b-badge { grid-column: 1 / -1; justify-self: start; }
  .b-console__phases li { font-size: 0; gap: 0; }
  .b-console__verdict { grid-template-columns: auto minmax(0, 1fr); }
  .b-console__verdict .b-btn { grid-column: 1 / -1; justify-self: start; }
  .b-manifest__input { padding: 16px; }
  .b-diff__table { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
  .b-diff__table > .b-diff__corner { display: none; }
  .b-diff__key { grid-column: 1 / -1; padding-bottom: 0; }
  .b-diff__key + * , .b-diff__key + * + *, .b-diff__key + * + * + * { border-top: 0; }
  .b-lens__fields { grid-template-columns: minmax(0, 1fr); }
  .b-qindex__panel, .b-probe__ask, .b-probe__run { padding: 24px; }
  .b-bounds__figure { padding-right: 0; }
  .b-bounds__out { position: static; display: flex; flex-wrap: wrap; margin-top: 16px; }
  .b-bounds__out span::before { display: none; }
  .b-case__trail { padding-inline: 20px; }
  .b-foot__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.b-canvas) *, :where(.b-canvas) *::before, :where(.b-canvas) *::after { transition: none !important; animation: none !important; }
}