Spaces:

thegovind
/

blink

Sleeping

blink / style.css
Computer use: show where the boxes come from and everything blink is sent
9297e22 verified 27 days ago
169 kB
/* blink — one quiet system: white paper, hairlines, one cobalt for blink and the action that runs it,
   and one lime flash for the box blink picks on a screenshot.
   Geist loads from app.py's head; the static build falls back to Inter or the system face.
   Gradio copies every top-level rule with a scoped prefix (.gradio-container.gradio-container-X .contain),
   and inside @media it keeps only that scoped copy. So rules inside a media query name only what sits
   inside the app (never .gradio-container, html or body), and no declaration value may wrap a line. */

:root {
  /* the palette */
  --color-canvas: #ffffff;
  --color-paper: #ffffff;
  --color-surface-alt: #f7f8fa;
  --color-sunken: #f1f3f6;
  --color-ink: #0b0d12;
  --color-ink-soft: #272c36;
  --color-mid-gray: #5a6170;
  --color-mid-gray-canvas: #5a6170;
  --color-faint: #8a909c;
  --color-hairline: #e4e7ec;
  --color-hairline-strong: #cfd4dc;
  /* blink: the brand, the model in use, what it outputs, and the action that runs it */
  --color-blink: #2447f5;
  --color-blink-hover: #1b3ce2;
  --color-blink-deep: #15237a;
  --color-blink-light: #a6b5fa;
  --color-blink-tint: #eef1fe;
  --color-blink-line: #c7d1fd;
  --color-blink-ink: #1c38d0;
  /* flash: the box blink picks on a screenshot */
  --color-flash: #d4f55c;
  --color-flash-ink: #0b0d12;
  /* every other system stays gray, so the colours above carry meaning */
  --color-ref: #6b7280;
  --color-other: #9aa1ad;
  /* red is for errors only; amber asks a person to look */
  --color-error: #b42318;
  --color-error-bg: #fef3f2;
  --color-error-line: #fecdca;
  --color-review: #9a4a07;
  --color-review-bg: #fff8eb;
  --color-review-line: #f9d58e;

  --canvas: var(--color-canvas);
  --paper: var(--color-paper);
  --alt: var(--color-surface-alt);
  --sunken: var(--color-sunken);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --mid: var(--color-mid-gray);
  --mid-c: var(--color-mid-gray-canvas);
  --faint: var(--color-faint);
  --line: var(--color-hairline);
  --line-strong: var(--color-hairline-strong);
  --track: #eceff3;
  --grid: #eceff3;
  --blink: var(--color-blink);
  --blink-light: var(--color-blink-light);
  --blink-tint: var(--color-blink-tint);
  --blink-line: var(--color-blink-line);
  --blink-ink: var(--color-blink-ink);
  --flash: var(--color-flash);

  --font-geist: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* one type scale */
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-body-lg: 15px;
  --text-title: 17px;
  --text-heading-sm: 20px;
  --text-heading: 24px;
  --text-display: 36px;

  /* restrained radii: controls 8, cards 12, tags round */
  --radius-xs: 4px;
  --radius-small: 6px;
  --radius-control: 8px;
  --radius-nested: 8px;
  --radius-cards: 12px;
  --radius-pill: 8px;
  --radius-round: 999px;
  --shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-control: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 32px -10px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.06);
  --ring: 0 0 0 3px rgba(36, 71, 245, 0.2);
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* --- the page ---------------------------------------------------------------------- */

html,
body,
gradio-app {
  background: var(--canvas) !important;
  color-scheme: light !important;
}

/* one centred column, one gutter; every block inside aligns to its edges */
gradio-app {
  display: block;
}

.gradio-container {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 clamp(16px, 4vw, 32px) 8px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: var(--ink);
  font-family: var(--font-geist) !important;
  font-size: var(--text-body);
  line-height: 1.5;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* the gutter above is the only one: gradio's fillable app adds 32px more on each side */
.gradio-container > .main,
.gradio-container .main.app {
  padding: 0 !important;
}

.gradio-container .contain {
  gap: 0 !important;
}

.gradio-container ::selection {
  background: var(--blink-tint);
  color: var(--ink);
}

footer {
  display: none !important;
}

/* one ring for everything a keyboard can reach; text fields draw theirs as a border */
.gradio-container :focus-visible {
  outline: 2px solid var(--blink) !important;
  outline-offset: 2px !important;
}

/* --- gradio's blocks: no boxes of their own --------------------------------------- */

.gradio-container .block,
.gradio-container .form,
.gradio-container .html-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Gradio makes every block and form an overflow:auto scroll container. A closed accordion whose
   toggle reaches a few pixels past it then draws a scrollbar on systems with classic scrollbars.
   Nothing here scrolls at the block level; editors, tables and the JSON viewer scroll inside. */
.gradio-container .block:not([data-testid="json"]),
.gradio-container .form {
  overflow: visible !important;
}

.gradio-container .html-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.gradio-container .styler {
  background: transparent !important;
}

/* a loading veil gradio lays over a block while it waits: quiet, never a coloured slab */
.gradio-container .wrap.default:not(.hide),
.gradio-container .wrap.center:not(.hide) {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
}

.gradio-container .wrap.default:not(.hide) .eta-bar {
  background: var(--blink-tint) !important;
}

.gradio-container .wrap .progress-text,
.gradio-container .wrap .meta-text,
.gradio-container .wrap .meta-text-center {
  font-family: var(--font-geist) !important;
  font-size: var(--text-caption) !important;
  color: var(--mid) !important;
}

/* prose: gradio inks every element in it; here an element inherits unless a rule says otherwise,
   so a note's link, a tag's icon and a label's parts take their parent's colour */
.gradio-container .prose {
  font-size: var(--text-body);
  line-height: 1.5;
}

.prose * {
  color: inherit;
}

.prose a {
  color: var(--blink-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--blink);
}

/* --- labels ------------------------------------------------------------------------- */

.gradio-container span[data-testid="block-info"],
.gradio-container .block > label > span:first-child:not(.sr-only),
.gradio-container label[data-testid="block-label"] {
  display: block;
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-small) !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
}

/* File, Code and JSON hang their label as a floating badge with an icon; here it is a label */
.gradio-container label[data-testid="block-label"] {
  position: static !important;
  display: flex !important;
  align-items: center;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.gradio-container label[data-testid="block-label"] > span:first-child:has(svg) {
  display: none !important;
}

.gradio-container [data-testid="block-info"] + div > .info,
.gradio-container .block .info,
.gradio-container span.info {
  margin: -2px 0 8px !important;
  font-size: var(--text-caption) !important;
  line-height: 1.45 !important;
  color: var(--mid) !important;
}

/* --- text fields ---------------------------------------------------------------------- */

.gradio-container textarea,
.gradio-container input[type="text"],
.gradio-container input[type="number"],
.gradio-container input[type="search"] {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-control) !important;
  color: var(--ink) !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  line-height: 1.5 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.gradio-container textarea {
  padding: 9px 12px !important;
}

.gradio-container input[type="text"],
.gradio-container input[type="number"],
.gradio-container input[type="search"] {
  min-height: 40px;
  padding: 8px 12px !important;
}

.gradio-container textarea::placeholder,
.gradio-container input::placeholder {
  color: var(--faint) !important;
  opacity: 1;
}

.gradio-container textarea:hover:not(:disabled):not(:focus),
.gradio-container input[type="text"]:hover:not(:disabled):not(:focus) {
  border-color: #b8bfca !important;
}

.gradio-container textarea:focus,
.gradio-container input[type="text"]:focus,
.gradio-container input[type="number"]:focus,
.gradio-container input[type="search"]:focus {
  border-color: var(--blink) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* read-only text is a surface to read, not a field to fill */
.gradio-container textarea:disabled,
.gradio-container input:disabled,
.gradio-container textarea[readonly] {
  color: var(--ink-soft) !important;
  background: var(--alt) !important;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--ink-soft);
}

/* --- dropdowns ------------------------------------------------------------------------ */

.gradio-container .wrap:has(> .wrap-inner) {
  min-height: 40px;
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-control) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gradio-container .wrap:has(> .wrap-inner):hover {
  border-color: #b8bfca !important;
}

.gradio-container .wrap:has(> .wrap-inner):focus-within {
  border-color: var(--blink) !important;
  box-shadow: var(--ring) !important;
}

.gradio-container .wrap-inner {
  min-height: 38px;
  padding: 0 10px 0 12px !important;
  align-items: center;
}

.gradio-container .wrap-inner input[role="combobox"],
.gradio-container .secondary-wrap input {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  color: var(--ink) !important;
  cursor: pointer;
}

/* the field's frame draws the focus ring; the input inside it draws none of its own */
.gradio-container .wrap-inner input:focus,
.gradio-container .wrap-inner input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.gradio-container .wrap-inner .icon-wrap {
  color: var(--mid) !important;
}

.gradio-container .wrap-inner .icon-wrap svg {
  width: 16px;
  height: 16px;
}

.gradio-container ul.options {
  min-width: 140px !important;
  padding: 4px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-pop) !important;
}

.gradio-container ul.options li {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: var(--radius-small) !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  line-height: 20px !important;
  color: var(--ink) !important;
  white-space: nowrap;
}

.gradio-container ul.options li:hover,
.gradio-container ul.options li.active {
  background: var(--sunken) !important;
}

.gradio-container ul.options li.selected {
  background: var(--blink-tint) !important;
  color: var(--blink-ink) !important;
  font-weight: 500;
}

.gradio-container ul.options li .inner-item {
  display: none;
}

/* --- choices: every radio is a segmented control ------------------------------------- */

.gradio-container fieldset.block {
  margin: 0 !important;
  min-width: 0 !important;
}

.gradio-container fieldset > .wrap:has(> label > input[type="radio"]) {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 2px !important;
  max-width: 100%;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--sunken) !important;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.03);
}

.gradio-container fieldset > .wrap > label:has(> input[type="radio"]) {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-height: 32px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mid) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* the radio dot is the label's job here; the input stays focusable for the keyboard */
.gradio-container fieldset > .wrap > label > input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.gradio-container fieldset > .wrap > label:has(> input[type="radio"]) > span {
  margin: 0 !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-small) !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  white-space: nowrap;
}

.gradio-container fieldset > .wrap > label:has(> input[type="radio"]):hover {
  color: var(--ink) !important;
}

.gradio-container fieldset > .wrap > label.selected:has(> input[type="radio"]) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(16, 24, 40, 0.06) !important;
}

.gradio-container fieldset > .wrap > label:has(> input[type="radio"]:focus-visible) {
  outline: 2px solid var(--blink);
  outline-offset: 1px;
}

.gradio-container fieldset > .wrap > label:has(> input[type="radio"]:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- checkboxes ----------------------------------------------------------------------- */

.gradio-container label.checkbox-container {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.gradio-container label.checkbox-container input[type="checkbox"] {
  flex: none;
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-xs) !important;
  background-color: var(--paper) !important;
  box-shadow: var(--shadow-control) !important;
}

.gradio-container label.checkbox-container input[type="checkbox"]:checked {
  border-color: var(--blink) !important;
  background-color: var(--blink) !important;
}

.gradio-container label.checkbox-container .label-text,
.gradio-container label.checkbox-container > span {
  margin: 0 !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  color: var(--ink-soft) !important;
}

/* --- buttons -------------------------------------------------------------------------- */

.gradio-container button.lg,
.gradio-container button.md,
.gradio-container button.sm,
.gradio-container button.primary,
.gradio-container button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-control) !important;
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gradio-container button.lg {
  min-height: 40px;
  padding: 0 18px !important;
}

.gradio-container button.md {
  min-height: 36px;
  padding: 0 14px !important;
}

.gradio-container button.sm {
  min-height: 32px;
  padding: 0 12px !important;
  font-size: var(--text-small) !important;
}

.gradio-container button.secondary:hover:not(:disabled) {
  background: var(--alt) !important;
  border-color: #b8bfca !important;
}

/* the one filled colour in a workspace is the action that runs blink */
.gradio-container button.primary {
  background: var(--blink) !important;
  border-color: var(--blink) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(36, 71, 245, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.gradio-container button.primary:hover:not(:disabled) {
  background: var(--color-blink-hover) !important;
  border-color: var(--color-blink-hover) !important;
}

.gradio-container button.primary:active:not(:disabled) {
  background: var(--color-blink-deep) !important;
}

.gradio-container button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* a row of samples or presets: compact secondary buttons that wrap as a whole */
.blk-chips {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.blk-chips > * {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.blk-chips button {
  white-space: nowrap;
  min-width: 0 !important;
}

/* --- disclosure: one row, one chevron, for every fold on every tab ------------------------ */

/* gradio's accordions */
.gradio-container .gr-accordion {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--paper) !important;
}

.gradio-container .gr-accordion > button.label-wrap {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 40px 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-align: left;
  cursor: pointer;
}

.gradio-container .gr-accordion > button.label-wrap > span:first-child {
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  color: inherit !important;
}

.gradio-container .gr-accordion > button.label-wrap:hover {
  background: var(--alt) !important;
}

.gradio-container .gr-accordion > button.label-wrap.open {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* gradio's toggle is a rotated text triangle that reaches past the row; a drawn chevron stays inside */
.gradio-container .gr-accordion > button.label-wrap > .icon {
  display: none !important;
}

.gradio-container .gr-accordion > button.label-wrap::after,
details.blk-d > summary::after,
details.blk-more > summary::after,
details.doc-method > summary::after,
details.doc-seg > summary::after,
details.blk-model-info > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border: solid var(--mid);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease), margin-top 0.2s var(--ease);
}

.gradio-container .gr-accordion > button.label-wrap.open::after,
details.blk-d[open] > summary::after,
details.blk-more[open] > summary::after,
details.doc-method[open] > summary::after,
details.doc-seg[open] > summary::after,
details.blk-model-info[open] > summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.gradio-container .gr-accordion > [data-testid="accordion-content"] {
  padding: 4px 14px 14px !important;
}

.gradio-container .gr-accordion > [data-testid="accordion-content"] > .column {
  gap: 12px !important;
}

/* the page's own folds */
details.blk-d {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

/* folds that follow one another read as one list */
details.blk-d + details.blk-d {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

details.blk-d:has(+ details.blk-d) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details.blk-d > summary,
details.blk-more > summary,
details.doc-method > summary,
details.blk-model-info > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 40px 0 14px;
  list-style: none;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

details.blk-d > summary:hover {
  background: var(--alt);
}

details.blk-d + details.blk-d > summary {
  border-radius: 0;
}

details.blk-d:last-child > summary,
details.blk-d:not(:has(+ details.blk-d)) > summary {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

details.blk-d[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::marker {
  content: "";
}

/* what a fold holds: the same inset as its summary, the space at the bottom as padding, since
   gradio zeroes the last child's margin */
details.blk-d > :not(summary) {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

details.blk-d > p,
details.blk-d > ul,
details.blk-d > ol {
  max-width: 720px;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}

details.blk-d > :nth-child(2) {
  margin-top: 4px !important;
}

details.blk-d[open] {
  padding-bottom: 6px;
}

details.blk-d > .blk-links {
  margin-bottom: 12px !important;
}

/* inside a card a fold is a row of the card: a hairline above, no box of its own */
details.blk-more,
details.doc-method {
  margin: 0;
  border-top: 1px solid var(--line);
}

details.blk-more > summary,
details.doc-method > summary {
  min-height: 40px;
  padding: 0 32px 0 0;
  border-radius: 0;
  font-size: var(--text-small);
  color: var(--ink-soft);
}

details.blk-more > summary::after,
details.doc-method > summary::after {
  right: 4px;
}

details.blk-more > summary:hover,
details.doc-method > summary:hover {
  color: var(--ink);
}

details.blk-more[open],
details.doc-method[open] {
  padding-bottom: 12px;
}

details.blk-more > p,
details.doc-method > p {
  max-width: 720px;
  margin: 0 0 10px !important;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- code and data -------------------------------------------------------------------- */

.blk-pre {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--alt);
  color: var(--ink-soft);
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
  tab-size: 4;
}

.blk-pre b {
  color: var(--ink);
  font-weight: 600;
}

.gradio-container .cm-editor {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-control) !important;
  overflow: hidden;
  font-size: 12.5px;
}

.gradio-container .cm-editor.cm-focused {
  border-color: var(--blink) !important;
  box-shadow: var(--ring);
  outline: none !important;
}

.gradio-container .cm-editor .cm-content,
.gradio-container .cm-editor .cm-gutters {
  font-family: var(--font-geist-mono) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

/* one ink for the JSON in either colour scheme: the editor's own palettes are too pale on paper */
.gradio-container .cm-content,
.gradio-container .cm-content span {
  color: var(--ink-soft) !important;
  caret-color: var(--ink);
}

.gradio-container .cm-cursor {
  border-left-color: var(--ink) !important;
}

.gradio-container .cm-selectionBackground,
.gradio-container .cm-focused .cm-selectionBackground {
  background: var(--blink-tint) !important;
}

.gradio-container .cm-gutters {
  background: var(--alt) !important;
  border-right: 1px solid var(--line) !important;
  color: var(--faint) !important;
}

.gradio-container .cm-activeLine,
.gradio-container .cm-activeLineGutter {
  background: transparent !important;
}

/* the copy and download buttons gradio pins to an editor's corner */
.gradio-container .icon-button-wrapper.top-panel {
  top: 30px !important;
  right: 6px !important;
  padding: 2px !important;
  gap: 2px;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-small) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-control) !important;
}

.gradio-container .icon-button-wrapper.top-panel button.icon-button {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-xs) !important;
  color: var(--mid) !important;
}

/* the JSON viewer */
.gradio-container [data-testid="json"] {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  background: var(--alt) !important;
}

.gradio-container [data-testid="json"] > div:first-child:has(label) {
  padding: 10px 12px 0 !important;
}

.gradio-container .json-holder {
  padding: 6px 12px 12px !important;
  font-family: var(--font-geist-mono) !important;
  font-size: 12.5px !important;
}

.gradio-container .json-holder * {
  font-family: var(--font-geist-mono) !important;
  font-size: 12.5px !important;
  line-height: 20px !important;
}

/* a long value wraps inside the viewer rather than pushing it sideways */
.gradio-container .json-holder .content {
  flex-wrap: wrap;
  min-width: 0;
}

.gradio-container .json-holder .value {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- files ----------------------------------------------------------------------------- */

/* a drop zone: one dashed box, the words centred */
.gradio-container button.upload-container {
  height: auto !important;
  min-height: 132px !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 10px !important;
  background: var(--alt) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gradio-container button.upload-container:hover {
  border-color: var(--blink) !important;
  background: var(--blink-tint) !important;
}

.gradio-container button.upload-container .wrap {
  padding: 0 !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  line-height: 1.5 !important;
  color: var(--mid) !important;
}

.gradio-container button.upload-container .icon-wrap svg {
  width: 22px;
  height: 22px;
  color: var(--blink);
}

.gradio-container button.upload-container .or {
  color: var(--faint) !important;
}

/* a list of files: name, size and the link to fetch it, one row each */
.gradio-container .file-preview-holder {
  overflow: visible !important;
}

.gradio-container table.file-preview {
  width: 100%;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control);
  overflow: hidden;
}

.gradio-container table.file-preview tbody,
.gradio-container table.file-preview tr {
  border: 0 !important;
}

.gradio-container table.file-preview tr.file {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
}

.gradio-container table.file-preview tr.file:first-child {
  border-top: 0 !important;
}

.gradio-container table.file-preview td {
  border: 0 !important;
  padding: 0 12px !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  color: var(--ink) !important;
}

.gradio-container table.file-preview td.filename {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.gradio-container table.file-preview td.download {
  flex: none;
  margin-left: auto;
}

.gradio-container table.file-preview a.download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blink-ink) !important;
  font-size: var(--text-small) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
}

.gradio-container table.file-preview a.download-link:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* an uploaded file's row leaves room for the Clear button gradio pins to its corner */
#doc-upload table.file-preview td.download {
  padding-right: 52px !important;
}

/* a download list offers files; it has nothing to remove */
#doc-downloads .label-clear-button,
#doc-downloads td:has(> .label-clear-button) {
  display: none !important;
}

/* --- navigation: three levels, three looks ---------------------------------------------
   Gradio measures a hidden copy of each strip's buttons to decide what fits and moves the rest
   into a menu, so both copies get the same size, and spacing is padding, never gap or margin.
   1. The app's five places: text tabs on a hairline, the one in view underlined in cobalt.
   2. Explore's five pages: quiet pill tabs, the one in view tinted.
   3. The use cases: smaller text tabs on their own hairline. */

.gradio-container .tab-wrapper {
  height: auto !important;
  padding: 0 !important;
}

.gradio-container .tab-container {
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.gradio-container .tab-container > button {
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-geist) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--mid) !important;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.gradio-container .tab-container > button:hover:not(.selected) {
  color: var(--ink) !important;
  background: transparent !important;
}

.gradio-container .tab-container > button.selected {
  color: var(--ink) !important;
}

.gradio-container .tab-container > button:focus-visible {
  outline-offset: -3px !important;
  border-radius: var(--radius-small) !important;
}

#blink-navigation > .tab-wrapper {
  margin: 0 0 28px !important;
}

#blink-navigation > .tab-wrapper > .tab-container {
  height: 44px !important;
}

#blink-navigation > .tab-wrapper > .tab-container::after {
  height: 1px;
  background-color: var(--line) !important;
}

#blink-navigation > .tab-wrapper > .tab-container > button {
  padding: 0 12px !important;
  font-size: var(--text-body) !important;
  line-height: 20px !important;
}

#blink-navigation > .tab-wrapper > .tab-container > button.selected::after,
#blink-cases > .tab-wrapper > .tab-container > button.selected::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  width: auto !important;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-color: var(--blink) !important;
  animation: none !important;
}

#blink-explore > .tab-wrapper {
  margin: -8px 0 24px !important;
}

#blink-explore > .tab-wrapper > .tab-container {
  height: 34px !important;
}

#blink-explore > .tab-wrapper > .tab-container::after,
#blink-explore > .tab-wrapper > .tab-container > button::after {
  display: none !important;
}

#blink-explore > .tab-wrapper > .tab-container > button {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-control) !important;
  font-size: var(--text-small) !important;
  line-height: 18px !important;
}

#blink-explore > .tab-wrapper > .tab-container > button:hover:not(.selected) {
  background: var(--sunken) !important;
}

#blink-explore > .tab-wrapper > .tab-container > button.selected {
  background: var(--blink-tint) !important;
  color: var(--blink-ink) !important;
}

#blink-cases > .tab-wrapper {
  margin: 0 0 20px !important;
}

#blink-cases > .tab-wrapper > .tab-container {
  height: 38px !important;
}

#blink-cases > .tab-wrapper > .tab-container::after {
  height: 1px;
  background-color: var(--line) !important;
}

#blink-cases > .tab-wrapper > .tab-container > button {
  padding: 0 12px !important;
  font-size: var(--text-small) !important;
  line-height: 18px !important;
}

/* what does not fit waits behind one button */
.gradio-container .overflow-menu {
  margin-left: 6px !important;
}

.gradio-container .overflow-menu > button {
  height: 32px !important;
  min-width: 36px !important;
  padding: 0 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  background: var(--paper) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-control) !important;
}

.gradio-container .overflow-menu > button:hover {
  background: var(--alt) !important;
}

.gradio-container .overflow-dropdown {
  padding: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-pop) !important;
}

.gradio-container .overflow-dropdown button {
  height: auto !important;
  padding: 8px 10px !important;
  border-radius: var(--radius-small) !important;
  font-family: var(--font-geist) !important;
  font-size: var(--text-body) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: transparent !important;
}

.gradio-container .overflow-dropdown button:hover,
.gradio-container .overflow-dropdown button.overflow-item-selected {
  background: var(--sunken) !important;
}

.gradio-container .tabitem {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* --- masthead: one row of name, claim, model and links ------------------------------- */

.blk-top {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "brand lede model info links";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding: 20px 0 14px;
}

body:has(#huggingface-space-header) .blk-top {
  padding-top: 64px;
}

.blk-toprow {
  display: contents;
}

.blk-top h1 {
  grid-area: brand;
  margin: 0 !important;
  font-family: var(--font-geist);
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* the name, and after it one cobalt dot that blinks once when the page opens */
.blk-top h1 .blk-word {
  position: relative;
  display: inline-block;
  padding-right: 0.3em;
}

.blk-top h1 em.blk-mark {
  position: absolute;
  right: 0.03em;
  bottom: 0.06em;
  width: 0.21em;
  height: 0.21em;
  border-radius: 50%;
  background: var(--blink);
  transform-origin: 50% 50%;
  animation: blk-lid 0.42s ease-in-out 0.55s 1 both;
}

.blk-top .blk-lede {
  grid-area: lede;
  max-width: 600px;
  margin: 0 !important;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--mid);
}

.blk-meta {
  grid-area: model;
  display: flex;
  min-width: 0;
}

/* which blink is answering the panel in view */
.blk-meta span.key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--blink-line);
  border-radius: var(--radius-round);
  background: var(--blink-tint);
  color: var(--blink-ink);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: blk-pop 0.4s var(--ease) both;
}

.blk-meta span.key::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blink);
}

/* the base model, one click away, over the page rather than pushing it down */
details.blk-model-info {
  grid-area: info;
  position: static;
}

details.blk-model-info > summary {
  min-height: 28px;
  padding: 0 22px 0 4px;
  border-radius: var(--radius-small);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--mid);
}

details.blk-model-info > summary:hover {
  color: var(--ink);
}

details.blk-model-info > summary::after {
  right: 6px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
}

details.blk-model-info[open] > summary::after {
  margin-top: -1px;
}

details.blk-model-info > p {
  position: absolute;
  top: calc(100% - 6px);
  right: 0;
  z-index: 20;
  width: max-content;
  max-width: min(360px, 80vw);
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  box-shadow: var(--shadow-pop);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

.blk-toplinks {
  grid-area: links;
  display: flex;
  align-items: center;
  gap: 2px;
}

.blk-toplinks a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  color: var(--mid) !important;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.blk-toplinks a:hover {
  background: var(--sunken);
  color: var(--ink) !important;
}

/* the links a page points to: quiet outlined buttons */
.blk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.blk-links a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  box-shadow: var(--shadow-control);
  color: var(--ink) !important;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.blk-links a::after {
  content: "\2197";
  margin-left: 6px;
  font-size: 12px;
  color: var(--mid);
}

.blk-links a:hover {
  background: var(--alt);
  border-color: #b8bfca;
}

.blk-foot {
  margin: 56px 0 0 !important;
  padding: 16px 0 8px;
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--mid);
}

/* --- words ------------------------------------------------------------------------------ */

.blk-note {
  max-width: 720px;
  margin: 0 0 4px !important;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--mid);
}

.blk-eyebrow {
  margin: 0 0 10px !important;
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

.blk-h2,
.doc-intro h2,
.blk-cuax-title {
  margin: 0 0 6px !important;
  font-family: var(--font-geist);
  font-size: var(--text-heading);
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* a section inside a page: its title, then a note, then what it holds */
.blk-section {
  margin: 0 0 4px !important;
  font-family: var(--font-geist);
  font-size: var(--text-title) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.blk-section + .blk-cuax-cards {
  margin-top: 12px;
}

.blk-label {
  display: block;
  margin: 0 0 6px;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 18px;
  color: var(--ink-soft);
}

.blk-form-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 !important;
}

.blk-form-head span {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--mid);
}

.blk-hint {
  color: var(--mid);
}

.blk-demo {
  max-width: 62ch;
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--mid);
}

/* --- tags: small, round, one line ------------------------------------------------------- */

.blk-tag,
.blk-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--paper);
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--mid);
  white-space: nowrap;
  vertical-align: middle;
}

.blk-kind {
  height: 20px;
  border-color: transparent;
  background: var(--sunken);
  color: var(--ink-soft);
}

/* where an answer came from: a saved run of the model, a live run with its time, or the mock */
.blk-tag.blk-from {
  cursor: help;
}

.blk-tag.blk-from::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--mid);
}

.blk-tag.blk-from.saved {
  color: var(--ink-soft);
}

.blk-tag.blk-from.live {
  border-color: var(--blink-line);
  background: var(--blink-tint);
  color: var(--blink-ink);
}

.blk-tag.blk-from.live::before {
  background: var(--blink);
  box-shadow: none;
}

.blk-tag.blk-from.mock {
  border-style: dashed;
  border-color: var(--line-strong);
}

/* --- notices ----------------------------------------------------------------------------- */

/* an error, and only an error, is red */
.blk-warn {
  margin: 0 0 12px !important;
  padding: 10px 12px;
  border: 1px solid var(--color-error-line);
  border-radius: var(--radius-control);
  background: var(--color-error-bg);
  color: var(--color-error) !important;
  font-size: var(--text-small);
  line-height: 1.5;
}

/* mock mode is a fact about the numbers, not a failure */
.blk-warn.blk-mock,
.blk-warn.blk-synthetic {
  border-color: var(--line);
  background: var(--alt);
  color: var(--ink-soft) !important;
}

.blk-warn.blk-mock::before {
  content: "Mock";
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}

.blk-notice,
.blk-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--alt);
  animation: blk-rise 0.4s var(--ease) both;
}

.blk-empty {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--paper);
}

.blk-notice p,
.blk-empty p {
  max-width: 62ch;
  margin: 0 !important;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink-soft);
}

.blk-dotmark {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--faint);
  animation: blk-lid 0.42s ease-in-out 0.2s 1 both;
}

.blk-problems {
  display: grid;
  gap: 2px;
  margin: 0 !important;
  padding: 10px 12px !important;
  list-style: none;
  border: 1px solid var(--color-error-line);
  border-radius: var(--radius-control);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--text-small);
  line-height: 1.6;
}

.blk-problems li {
  margin: 0 !important;
  color: var(--color-error) !important;
}

.blk-locked {
  margin: 6px 0 0 !important;
  font-size: var(--text-caption);
  color: var(--mid);
}

/* an empty problem strip takes no room at all */
.blk-trouble:has(.prose:empty),
.blk-trouble:has(.html-container:empty) {
  display: none !important;
}

/* --- waiting on the model -------------------------------------------------------------- */

.blk-sk-card {
  animation: blk-rise 0.35s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* a flat tone that breathes while the model runs; no gradient */
.blk-sk {
  background: #eef0f3;
  border-radius: var(--radius-small);
  animation: blk-shimmer 1.4s ease-in-out infinite;
}

.blk-sk-kicker {
  width: 34%;
  height: 12px;
  margin-bottom: 14px;
}

.blk-sk-head {
  width: 46%;
  height: 26px;
  margin-bottom: 18px;
}

.blk-sk-row {
  height: 8px;
  margin-bottom: 12px;
  border-radius: var(--radius-round);
  animation-delay: calc(var(--i, 0) * 120ms);
}

.blk-sk-row:nth-child(3) {
  width: 92%;
}

.blk-sk-row:nth-child(4) {
  width: 76%;
}

.blk-sk-row:nth-child(5) {
  width: 84%;
  margin-bottom: 0;
}

.blk-run::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--blink);
  vertical-align: 1px;
  animation: blk-pulse 1.2s ease-in-out infinite;
}

/* --- probabilities: name, bar, number ---------------------------------------------------- */

.blk-opts {
  display: grid;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-opt {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 60px;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 18px;
}

.blk-opt .k {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mid) !important;
}

.blk-opt.win .k {
  color: var(--ink) !important;
  font-weight: 600;
}

.blk-opt .track {
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--track);
  overflow: hidden;
}

/* every bar is blink's own probability; the one it picked is the full cobalt */
.blk-opt .track i {
  display: block;
  height: 100%;
  border-radius: var(--radius-round);
  background: var(--blink-light);
  transform-origin: left center;
  animation: blk-wipe 0.5s var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + var(--i, 0) * 40ms);
}

.blk-opt.win .track i {
  background: var(--blink);
}

.blk-opt .v {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--mid) !important;
}

.blk-opt.win .v {
  color: var(--ink) !important;
  font-weight: 600;
}

/* --- facts about a run: a quiet line, numbers inked ----------------------------------- */

.blk-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 20px;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

.blk-stats b {
  color: var(--ink);
  font-weight: 600;
}

/* the blink that answered, tagged as the masthead tags it */
.blk-stats span.blk-by {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-round);
  background: var(--blink-tint);
}

.blk-stats span.blk-by b {
  color: var(--blink-ink);
  font-weight: 500;
}

/* --- a result: one card, its parts divided by hairlines ---------------------------------- */

.blk-result,
.blk-q,
.blk-verdict {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
}

.blk-result {
  overflow: hidden;
  animation: blk-rise 0.4s var(--ease) both;
}

.blk-q,
.blk-verdict {
  padding: 18px 20px;
}

.blk-answers {
  display: grid;
  gap: 12px;
}

.blk-result .blk-answers {
  gap: 0;
}

.blk-result .blk-q,
.blk-result > .blk-verdict {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.blk-result .blk-q + .blk-q,
.blk-result > .blk-verdict + .blk-answers {
  border-top: 1px solid var(--line);
}

.blk-result > .blk-warn.blk-mock {
  margin: 0 !important;
  padding: 9px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--text-small);
}

.blk-q {
  animation: blk-rise 0.42s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

/* a question reads as a question: what it asks first, its name and type quietly under it */
.blk-q-head {
  display: grid;
  gap: 6px;
}

.blk-q-head p {
  margin: 0 !important;
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink) !important;
  overflow-wrap: anywhere;
}

.blk-q-head p:empty {
  display: none;
}

.blk-q-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.blk-q-head h4,
.blk-q-meta b {
  margin: 0 !important;
  font-family: var(--font-geist-mono) !important;
  font-size: var(--text-caption) !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: var(--mid) !important;
}

/* the answer, large; what it means, small beside it */
.blk-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 14px 0 0;
}

.blk-headline b {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  overflow-wrap: anywhere;
}

.blk-headline .blk-sub {
  font-size: var(--text-small);
  color: var(--mid) !important;
  font-variant-numeric: tabular-nums;
}

/* the policy's reading of the answers: one mark, one line */
.blk-verdict {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 12px;
  animation: blk-rise 0.4s var(--ease) both;
}

.blk-result > .blk-verdict {
  margin: 0;
  background: linear-gradient(180deg, var(--alt), var(--paper));
}

/* go is blink's cobalt; hold is an open ring; stop is a filled square */
.blk-verdict .blk-dotmark {
  width: 12px;
  height: 12px;
  margin-top: 8px;
  background: var(--faint);
  animation: blk-lid 0.42s ease-in-out 0.35s 1 both;
}

.blk-verdict.go .blk-dotmark {
  background: var(--blink);
}

.blk-verdict.hold .blk-dotmark {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--ink-soft);
}

.blk-verdict.stop .blk-dotmark {
  border-radius: 3px;
  background: var(--ink-soft);
}

.blk-verdict h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm) !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
}

.blk-verdict p {
  margin: 4px 0 0 !important;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--mid) !important;
}

/* the run's facts, then its folds, along the card's foot */
.blk-answer-foot {
  margin: 12px 0 0;
}

.blk-result .blk-answer-foot {
  margin: 0;
  padding: 12px 20px 0;
  border-top: 1px solid var(--line);
  background: var(--alt);
}

.blk-answer-foot .blk-stats {
  margin: 0 0 12px !important;
}

.blk-result .blk-answer-foot details.blk-more {
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.blk-result .blk-answer-foot details.blk-more > summary::after {
  right: 4px;
}

.blk-result .blk-answer-foot .blk-pre {
  background: var(--paper);
}

.blk-drafted {
  margin: 0 0 12px !important;
  font-size: var(--text-caption);
  color: var(--mid);
}

/* while the model runs the card keeps its place, with a quiet line along its foot */
.blk-pending .blk-stats {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--alt);
}

/* --- a workspace: inputs on the left, the result on the right --------------------------- */

.row:has(> .blk-side) {
  gap: 28px !important;
  align-items: flex-start !important;
}

.blk-side {
  gap: 14px !important;
  min-width: 0 !important;
}

.blk-side > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.blk-main {
  gap: 12px !important;
  min-width: 0 !important;
}

/* the questions and the rule behind a use case, folded under its action */
.blk-side details.blk-d > summary {
  font-size: var(--text-body);
}

/* a label belongs to the field under it, not to the gap above it */
.blk-head {
  min-height: 0 !important;
  margin-bottom: -4px !important;
  padding: 0 !important;
}

/* --- ask ----------------------------------------------------------------------------- */

.blk-askrow {
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  max-width: 720px;
}

.blk-askrow > * {
  min-width: 0 !important;
}

.blk-askrow > button.blk-askgo {
  flex: 0 0 auto !important;
  min-width: 88px !important;
  align-self: stretch !important;
}

.blk-ask input,
.blk-ask textarea {
  min-height: 44px;
  font-size: var(--text-body-lg) !important;
}

.blk-askout {
  margin-top: 4px;
}

/* the note keeps its own small room so the drafting state does not shift the page */
.blk-asknote {
  min-height: 0 !important;
  padding: 0 !important;
}

.blk-ask-note {
  min-height: 1.2em;
  margin: 0 !important;
  font-size: var(--text-small);
  color: var(--mid);
}

.blk-ask-note .blk-run::before {
  vertical-align: 0;
}

.blk-ask-bad {
  max-width: 720px;
  padding: 10px 12px;
  border: 1px solid var(--color-error-line);
  border-radius: var(--radius-control);
  background: var(--color-error-bg);
  color: var(--color-error) !important;
  font-size: var(--text-small);
  line-height: 1.55;
  box-sizing: border-box;
}

/* the drafted questions, read only: what each asks, its name and type, its options */
.blk-draft {
  display: grid;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

.blk-draft-q {
  margin: 0 !important;
  padding: 16px 18px;
  animation: blk-rise 0.4s var(--ease) both;
}

.blk-draft-q + .blk-draft-q {
  border-top: 1px solid var(--line);
}

.blk-draft-q ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-draft-q ul li {
  margin: 0 !important;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: var(--sunken);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 20px;
  color: var(--ink-soft) !important;
}

button.blk-handoff {
  align-self: flex-start;
  width: auto !important;
  margin-top: 4px !important;
}

/* --- groups: gradio paints a group in its border colour with 1px gaps; here a group is only a frame */

.gradio-container .gr-group {
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.gradio-container .gr-group > .styler {
  overflow: visible !important;
}

/* --- the question form ---------------------------------------------------------------- */

.blk-qblock {
  padding: 0 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-cards) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-subtle) !important;
}

/* gradio renders a group as two nested divs that both carry the class; the inner copy stays flat */
.blk-qblock .blk-qblock,
.blk-qrow .blk-qrow {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.blk-qrow {
  padding: 14px 0 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
}

.blk-qrow:first-of-type {
  border-top: 0 !important;
}

/* one question, stacked tight: gradio's own gaps and block paddings go */
.blk-qrow .styler,
.blk-qhead,
.blk-qhead .form {
  gap: 4px !important;
}

.blk-qrow .block {
  min-height: 0 !important;
  padding: 0 !important;
}

.blk-qhead > * {
  min-width: 0 !important;
}

/* the question itself: words first, a field only once it is edited. The field reaches past the
   words by its own padding so they line up with everything under them */
.blk-qask textarea {
  width: calc(100% + 18px) !important;
  max-width: none !important;
  margin: 0 -9px !important;
  padding: 4px 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-control) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--text-body-lg) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  resize: none !important;
}

.blk-qask textarea:hover:not(:disabled):not(:focus),
.blk-qname input:hover:not(:disabled):not(:focus) {
  border-color: transparent !important;
  background: var(--alt) !important;
}

.blk-qask textarea:focus,
.blk-qname input:focus,
.blk-qopts textarea:focus {
  border-color: var(--blink) !important;
  background: var(--paper) !important;
  box-shadow: var(--ring) !important;
}

/* its name and type: quiet metadata on one line */
.blk-qmeta {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* gradio sizes these blocks as a scale-0 flex of zero; they take their content's width */
.blk-qmeta > *,
.blk-qmeta .form,
.blk-qmeta .form > .block {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

.blk-qmeta .form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.blk-qname input {
  min-width: 6ch;
  max-width: 24ch;
  height: 26px;
  min-height: 0 !important;
  margin-left: -9px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-small) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-geist-mono) !important;
  font-size: var(--text-caption) !important;
  font-weight: 500 !important;
  line-height: 1.33 !important;
  color: var(--mid) !important;
}

/* the name's wrappers take the field's width, not the other way round */
.blk-qname label,
.blk-qname .input-container {
  width: max-content !important;
  max-width: 100%;
}

/* the type: a soft badge that opens the three kinds */
.blk-qtype .wrap:has(> .wrap-inner) {
  min-height: 24px;
  border: 1px solid transparent !important;
  border-radius: var(--radius-small) !important;
  background: var(--sunken) !important;
  box-shadow: none !important;
}

.blk-qtype .wrap:has(> .wrap-inner):hover {
  border-color: var(--line-strong) !important;
}

.blk-qtype .wrap-inner,
.blk-qtype .secondary-wrap {
  min-height: 24px;
  padding: 0 !important;
}

.blk-qtype .secondary-wrap input,
.blk-qtype input {
  width: 78px !important;
  height: 24px;
  margin: 0 !important;
  padding: 0 22px 0 8px !important;
  box-sizing: border-box;
  font-size: var(--text-caption) !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
}

.blk-qtype .icon-wrap {
  right: 6px !important;
  width: 12px !important;
}

.blk-qtype .icon-wrap svg {
  width: 12px;
  height: 12px;
}

/* the options, at a glance, before anything is opened */
.blk-chipslot,
.blk-chipslot .html-container {
  min-height: 0 !important;
  padding: 0 !important;
}

.blk-optchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-optchips:empty {
  display: none;
}

.blk-optchips li {
  margin: 0 !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-small);
  background: var(--sunken);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 20px;
  color: var(--ink-soft) !important;
  overflow-wrap: anywhere;
  animation: blk-fade 0.3s ease-out both;
}

/* a score's levels carry their number */
.blk-optchips li i {
  margin-right: 6px;
  font-style: normal;
  color: var(--mid) !important;
}

/* editing the options is one step further in: the box and Remove show while the toggle is open */
.blk-qmore {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.blk-qmore > button.label-wrap {
  min-height: 26px;
  padding: 0 16px 0 0 !important;
  border-radius: var(--radius-xs) !important;
  justify-content: flex-start !important;
  color: var(--mid) !important;
}

.blk-qmore > button.label-wrap > span:first-child {
  font-size: var(--text-caption) !important;
  font-weight: 500 !important;
  white-space: nowrap;
}

.blk-qmore > button.label-wrap:hover {
  background: transparent !important;
  color: var(--ink) !important;
}

.blk-qmore > button.label-wrap::after {
  right: 3px;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-color: currentColor;
  border-width: 0 1.5px 1.5px 0;
}

.blk-qmore > button.label-wrap.open::after {
  margin-top: -1px;
}

.blk-qmore [data-testid="accordion-content"] {
  display: none !important;
}

.blk-qrow .blk-qopts,
.blk-qrow .blk-qdrop {
  display: none !important;
}

.blk-qrow:has(.blk-qmore button.label-wrap.open) .blk-qopts,
.blk-qrow:has(.blk-qmore button.label-wrap.open) .blk-qdrop {
  display: block !important;
}

.blk-qopts textarea {
  margin-top: 6px;
  border-color: var(--line) !important;
  background: var(--alt) !important;
  box-shadow: none !important;
  font-family: var(--font-geist-mono) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

/* a request the rows cannot hold is shown, not edited */
.blk-qrow textarea:disabled,
.blk-qrow input:disabled {
  background: transparent !important;
  color: var(--ink-soft) !important;
  cursor: default;
}

/* removing a question is the one destructive act here */
button.blk-qdrop {
  align-self: flex-start !important;
  width: auto !important;
  min-height: 28px;
  margin: 8px 0 2px !important;
  padding: 0 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--text-caption) !important;
  color: var(--mid) !important;
  white-space: nowrap;
}

button.blk-qdrop:hover:not(:disabled) {
  border-color: var(--color-error-line) !important;
  background: var(--color-error-bg) !important;
  color: var(--color-error) !important;
}

button.blk-qadd {
  border-style: dashed !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-soft) !important;
}

button.blk-qadd:hover:not(:disabled) {
  border-color: var(--blink) !important;
  background: var(--blink-tint) !important;
  color: var(--blink-ink) !important;
}

/* --- the playground ----------------------------------------------------------------------
   Unprefixed on purpose: gradio adds a scoped copy of each rule, and only an unprefixed selector
   outranks the scoped copies of the rules it adjusts. */

/* Decide leads the answers: beside the inputs on a desk, right under them on a phone */
.blk-play button.blk-decide {
  align-self: flex-start;
  width: auto !important;
  min-width: 168px !important;
  margin: 0 !important;
  padding: 0 32px !important;
}

.blk-play .blk-side {
  gap: 12px !important;
}

.blk-play .blk-state {
  padding: 0 !important;
}

.blk-play .blk-qblock {
  padding: 0 16px !important;
}

.blk-play .blk-qrow {
  padding: 12px 0 10px !important;
}

.blk-play .blk-qblock .blk-qblock,
.blk-play .blk-qrow .blk-qrow {
  padding: 0 !important;
}

/* the options toggle closes the name-and-type line instead of taking a line of its own */
.blk-play .blk-qrow .styler {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: center;
}

.blk-play .blk-qrow .styler > *,
.blk-play .blk-qhead > * {
  grid-column: 1 / -1;
}

.blk-play .blk-qhead {
  display: contents !important;
}

.blk-play .blk-qhead > .blk-qmeta {
  grid-column: 1;
  grid-row: 2;
}

.blk-play .blk-qrow .styler > .blk-qmore {
  grid-column: 2;
  grid-row: 2;
  margin: 0 !important;
}

.blk-play .blk-optchips {
  margin: 2px 0 0 !important;
}

.blk-play button.blk-qadd {
  margin-top: 0 !important;
}

.blk-play .blk-acc .cm-editor {
  max-height: 420px;
}

/* --- home ------------------------------------------------------------------------------- */

.home-intro {
  padding: 8px 0 4px;
}

.home-intro h2 {
  max-width: 18ch;
  margin: 0 0 12px !important;
  font-size: clamp(30px, 4.2vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.blk-home-lede {
  max-width: 52ch;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--mid) !important;
}

/* the four places to start: one card each, the whole card is the button */
.row.blk-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  align-items: stretch !important;
  gap: 12px !important;
  margin: 28px 0 36px !important;
}

.blk-tilewrap {
  position: relative;
  min-width: 0 !important;
  gap: 0 !important;
}

.blk-tilewrap > .block {
  flex: 1 1 auto;
}

.blk-tilewrap .block,
.blk-tilewrap .html-container,
.blk-tilewrap .prose {
  height: 100%;
}

.blk-face {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 4px 12px;
  height: 100%;
  min-height: 148px;
  padding: 18px 18px 20px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  color: var(--ink) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.blk-face-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: var(--radius-control);
  background: var(--blink-tint);
  color: var(--blink);
}

.blk-face-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk-face b {
  grid-column: 1 / -1;
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink) !important;
}

.blk-face > span:not(.blk-face-icon) {
  grid-column: 1 / -1;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--mid) !important;
}

.blk-face em {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  color: var(--mid) !important;
  white-space: nowrap;
}

.blk-face em::after {
  content: "\2192";
  font-size: 14px;
  transition: transform 0.15s ease;
}

.blk-tilewrap:hover .blk-face {
  border-color: var(--blink-line);
  box-shadow: 0 8px 24px -14px rgba(16, 24, 40, 0.28), var(--shadow-subtle);
}

.blk-tilewrap:hover .blk-face em {
  color: var(--blink-ink) !important;
}

.blk-tilewrap:hover .blk-face em::after {
  transform: translateX(2px);
}

.blk-tilewrap:focus-within .blk-face {
  border-color: var(--blink);
  box-shadow: var(--ring);
}

/* an in-app card is a real button wearing the card: the click is a gradio event, so it works the
   same at every width */
button.blk-tile-hit {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-cards) !important;
  opacity: 0;
  cursor: pointer;
}

/* outside links: the quieter variant, inside their fold */
.blk-cards.out {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 8px;
  margin: 4px 0 8px;
}

a.blk-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  text-align: left;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.blk-tile:hover {
  border-color: var(--blink-line);
  background: var(--alt);
}

.blk-tile b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-tile span {
  grid-column: 1 / -1;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--mid) !important;
}

.blk-tile em {
  grid-row: 1;
  grid-column: 2;
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  color: var(--mid) !important;
}

.blk-tile em::after {
  content: " \2197";
}

details.home-fold[open] {
  padding-bottom: 16px;
}

/* inside the fold a section label sits a section away from what came before */
details.home-fold > .blk-eyebrow:not(:nth-child(2)) {
  margin-top: 20px !important;
}

details.home-fold .blk-pair .blk-eyebrow {
  margin-top: 4px !important;
}

/* a computer-use run, inside its fold: the run looping beside where to watch and try it */
.blk-cua {
  gap: 24px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
}

.blk-cua-shot {
  margin: 0 !important;
}

.blk-cua-shot img,
.blk-cua-shot video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px var(--line);
  background: #0b0d12;
}

.blk-cua-shot figcaption {
  margin-top: 8px;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cua-pitch {
  margin: 0 0 8px !important;
  font-size: var(--text-heading-sm) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.blk-cua-go {
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 6px;
}

.blk-cua-go button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* the headline figures, side by side, stacking when there is no room */
.blk-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 16px 24px;
  align-items: start;
}

.blk-pair .blk-half > .blk-note {
  margin-bottom: 0 !important;
  font-size: var(--text-small);
}

.blk-half .blk-figure {
  margin-bottom: 12px;
}

.blk-narrowfig {
  max-width: 680px;
}

/* --- documents ------------------------------------------------------------------------ */

.doc-intro {
  margin: 0;
}

.doc-intro .blk-note {
  margin: 0 !important;
}

.doc-workspace {
  gap: 32px !important;
  align-items: flex-start !important;
  margin-top: 24px !important;
}

.doc-col {
  gap: 14px !important;
  min-width: 0 !important;
}

.doc-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.doc-step > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blink-tint);
  color: var(--blink-ink) !important;
  font-size: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* the result's heading is a section away from the run button */
.doc-col-task .block:has(.doc-runnote) + .doc-stephead {
  margin-top: 18px !important;
}

.doc-caption {
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--mid);
}

/* the PDF in view: its name, its pages and how they were read */
.doc-source {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--alt);
}

.doc-file {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--blink);
}

.doc-file svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-source p {
  margin: 0 !important;
}

.doc-source > p:first-of-type {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}

.doc-source b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
  overflow-wrap: anywhere;
}

.doc-source > p > span {
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.doc-source .doc-caption {
  grid-column: 2;
  font-size: var(--text-caption);
}

/* the original page, as paper on a quiet desk */
.doc-preview {
  margin: 0 !important;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: #f2f4f7;
}

.doc-sheet {
  max-width: 520px;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 2px 10px rgba(16, 24, 40, 0.08);
}

.doc-preview img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  border-radius: 0;
}

.doc-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 520px;
  margin: 12px auto 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft) !important;
  font-variant-numeric: tabular-nums;
}

.doc-preview figcaption .doc-how {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--paper);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--mid) !important;
}

.doc-empty {
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-cards);
  background: var(--paper);
}

.doc-empty p {
  margin: 0 !important;
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--mid) !important;
}

#doc-text textarea {
  font-size: var(--text-small) !important;
  line-height: 1.6 !important;
}

/* the result: one panel, its parts divided by hairlines */
#doc-outputs {
  gap: 0 !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

#doc-outputs.doc-stale {
  display: none !important;
}

#doc-outputs > .form,
#doc-outputs > .block:not(.gr-accordion):not(#doc-result) {
  padding: 16px 20px 0 !important;
}

#doc-outputs > .form:has(#doc-inspect) {
  border-top: 1px solid var(--line) !important;
}

/* the JSON fold keeps a gap from whatever sits above it in the panel */
#doc-outputs > .gr-accordion:not(:first-child) {
  margin-top: 20px !important;
}

/* inside the panel the JSON fold is the panel's last row */
#doc-outputs > .gr-accordion {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
}

#doc-outputs > .gr-accordion > button.label-wrap {
  min-height: 48px;
  padding: 0 44px 0 20px !important;
  border-radius: 0 !important;
}

#doc-outputs > .gr-accordion > button.label-wrap::after {
  right: 22px;
}

#doc-outputs > .gr-accordion > [data-testid="accordion-content"] {
  padding: 0 20px 20px !important;
}

#doc-result .doc-empty,
#doc-result .blk-warn {
  margin: 20px 20px 0 !important;
}

.doc-result {
  min-width: 0;
}

.doc-result-head {
  padding: 18px 20px 18px;
}

.doc-provenance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px !important;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft) !important;
}

.doc-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blink);
}

.doc-result.saved .doc-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--blink);
}

.doc-result.mock .doc-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--mid);
}

.doc-result h3 {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.doc-verdict-note {
  margin: 4px 0 0 !important;
  font-size: var(--text-body);
  color: var(--mid) !important;
}

/* the packet in page order, each document as wide as its pages */
.doc-timeline {
  display: flex;
  gap: 4px;
  margin: 0 20px 20px !important;
  padding: 0 !important;
  list-style: none !important;
}

.doc-timeline li {
  display: flex;
  flex: var(--pages) 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0 !important;
  padding: 8px 8px 9px;
  overflow: hidden;
  border-top: 3px solid var(--blink);
  border-radius: 2px 2px var(--radius-small) var(--radius-small);
  background: var(--blink-tint);
}

.doc-timeline li.flag {
  border-top-color: var(--color-review);
  background: var(--color-review-bg);
}

.doc-timeline b {
  overflow: hidden;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.3;
  color: var(--blink-ink) !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-timeline span {
  font-size: var(--text-caption);
  color: var(--mid) !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.doc-list-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 !important;
  padding: 0 44px 8px 20px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--mid) !important;
}

.doc-segments {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--line);
}

.doc-segment {
  margin: 0 !important;
  border-bottom: 1px solid var(--line);
}

.doc-segment:last-child {
  border-bottom: 0;
}

details.doc-seg > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 44px 6px 20px;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

details.doc-seg > summary:hover {
  background: var(--alt);
}

details.doc-seg > summary::after {
  right: 22px;
}

.doc-seg-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}

.doc-seg-name b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.doc-seg-name span {
  font-size: var(--text-small);
  color: var(--mid) !important;
  font-variant-numeric: tabular-nums;
}

.doc-review {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--color-review-line);
  border-radius: var(--radius-round);
  background: var(--color-review-bg);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  color: var(--color-review) !important;
}

.doc-seg-p {
  flex: none;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.doc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

details.doc-seg > .blk-opts {
  margin: 0 !important;
  padding: 4px 20px 16px !important;
}

.doc-review-reasons {
  margin: 0 !important;
  padding: 0 20px 12px 38px !important;
  list-style: disc !important;
  font-size: var(--text-small);
  line-height: 1.55;
}

.doc-review-reasons li {
  margin: 0 0 2px !important;
  color: var(--color-review) !important;
}

/* one label: its scores in full, no fold */
.doc-scores {
  margin: 0 20px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}

.doc-scores .doc-list-head {
  padding: 0;
}

.doc-scores .blk-opts {
  margin-top: 10px !important;
}

.doc-scores .doc-review-reasons {
  padding: 12px 0 0 18px !important;
}

.doc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.doc-metrics > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-caption);
  color: var(--mid) !important;
}

.doc-metrics b {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.doc-result details.doc-method {
  padding: 0 20px;
}

.doc-result details.doc-method > summary::after {
  right: 2px;
}

.doc-result details.doc-method[open] {
  padding-bottom: 14px;
}

/* the second model's answer to the same pages, as its own card */
.doc-compare-head {
  margin: 0 0 8px !important;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-soft) !important;
}

#doc-comparison .doc-result {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

#doc-comparison .doc-result h3 {
  font-size: var(--text-heading-sm) !important;
}

.doc-stale-notice {
  display: none;
  margin: 0 !important;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-cards);
  font-size: var(--text-body);
  color: var(--mid) !important;
}

.doc-col-task:has(#doc-outputs.doc-stale) .doc-stale-notice {
  display: block;
}

/* --- screen click: a screenshot, the box blink picks, and two checks --------------------- */

/* a probability the marks and rings animate between answers */
@property --sp {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* which model reads the screenshot: blink's own tag, worn where a switch sits elsewhere */
.blk-eyechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 12px 0 10px;
  height: 30px;
  border: 1px solid var(--blink-line);
  border-radius: var(--radius-round);
  background: var(--blink-tint);
  color: var(--blink-ink) !important;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1;
}

.blk-eyechip span {
  color: inherit !important;
}

.blk-eyechip svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the visitor's own screenshot: its grid and boxes, together under the task */
.blk-upgroup {
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-cards) !important;
  background: var(--alt) !important;
}

.blk-upgroup .blk-upgroup,
.blk-upgroup .styler {
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.blk-upgroup button.blk-clear {
  align-self: flex-start;
  width: auto !important;
}

.blk-livenote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--mid) !important;
}

.blk-livedot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--blink);
  animation: blk-beat 2.4s ease-in-out infinite;
}

/* how the screenshot is read: a fold with one visible line */
details.blk-howread > summary {
  min-height: 0;
  padding-top: 11px;
  padding-bottom: 11px;
}

.blk-howread summary > span {
  display: block;
}

.blk-howline {
  display: block;
  margin-top: 2px;
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--mid) !important;
}

.blk-howsteps {
  margin: 0 14px 12px !important;
  padding-left: 20px !important;
  font-size: var(--text-small);
  line-height: 1.55;
}

.blk-howsteps li {
  margin: 0 0 4px !important;
  color: var(--ink-soft) !important;
}

.blk-scr {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* the verdict: one mark, one line */
.blk-sv {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 18px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  animation: blk-rise 0.4s var(--ease) both;
  transition: opacity 0.2s ease;
}

.blk-sv-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--flash);
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.12);
  color: var(--color-flash-ink) !important;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  animation: blk-pop 0.45s var(--ease) 0.1s both;
}

.blk-sv-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: blk-draw 0.5s var(--ease) 0.3s forwards;
}

/* hold: an open mark */
.blk-sv[data-act="ask"] .blk-sv-mark,
.blk-sv[data-act="unsure"] .blk-sv-mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-soft);
  color: var(--ink) !important;
}

.blk-sv-text {
  min-width: 0;
}

.blk-sv h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 !important;
  font-family: var(--font-geist);
  font-size: var(--text-heading-sm) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  color: var(--ink) !important;
}

.blk-sv p {
  margin: 2px 0 0 !important;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--mid) !important;
  overflow-wrap: anywhere;
}

.blk-sv-wait .blk-sv-mark {
  background: var(--track);
  box-shadow: none;
  animation: blk-shimmer 1.2s ease-in-out infinite;
}

/* before an answer: an open mark and one quiet line, at the verdict's own height */
.blk-sv-idle {
  box-shadow: none;
}

.blk-sv-idle .blk-sv-mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line-strong);
  animation: none;
}

.blk-sv-idle p {
  margin: 0 !important;
  font-size: var(--text-body);
  color: var(--mid) !important;
}

/* the screenshot, exactly as blink reads it, with the page's own marks laid on top */
.blk-shot {
  margin: 0 !important;
  min-width: 0;
}

.blk-shot-frame {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  width: 100%;
  border-radius: 10px;
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-subtle);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.blk-shot-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0 !important;
  object-fit: fill;
  border-radius: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.blk-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* every mark sits on the box blink reads; answered, it glows by its probability */
.blk-som {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--sw);
  height: var(--sh);
  z-index: 2;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--blink), 0 0 0 1px rgba(255, 255, 255, 0.9);
  transition: --sp 0.7s var(--ease), box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
}

.blk-shot.answered .blk-som {
  background: rgba(36, 71, 245, calc(var(--sp) * 0.12));
  box-shadow: inset 0 0 0 2px var(--blink), 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 calc(2px + var(--sp) * 5px) rgba(36, 71, 245, calc(0.08 + var(--sp) * 0.3)), 0 0 calc(6px + var(--sp) * 30px) calc(var(--sp) * 6px) rgba(36, 71, 245, calc(var(--sp) * 0.55));
  animation: blk-fill 0.9s var(--ease) 0.1s backwards;
}

/* the one blink picked: lit in the flash colour, the rest of the screen dimmed a little */
.blk-shot.answered .blk-som.win {
  z-index: 1;
  background: rgba(212, 245, 92, 0.18);
  box-shadow: inset 0 0 0 2px var(--blink), 0 0 0 3px var(--flash), 0 0 0 4px rgba(11, 13, 18, 0.32), 0 0 28px 6px rgba(212, 245, 92, 0.85), 0 0 0 200vmax rgba(11, 13, 18, 0.07);
}

.blk-shot.answered .blk-som.win::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  border: 2px solid var(--flash);
  opacity: 0;
  animation: blk-ping 1s var(--ease) 0.35s both;
}

/* a finished task: nothing is lit, the marks fade back */
.blk-shot[data-act="done"] .blk-som {
  opacity: 0.55;
}

.blk-som.cell {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(36, 71, 245, 0.45);
}

/* a grid answers as a heat map */
.blk-shot.answered .blk-som.cell {
  background: rgba(36, 71, 245, calc(var(--sp) * 0.42));
  box-shadow: inset 0 0 0 1px rgba(36, 71, 245, 0.45);
}

.blk-shot.answered .blk-som.cell.win {
  background: rgba(212, 245, 92, 0.3);
  box-shadow: inset 0 0 0 3px var(--flash), inset 0 0 0 4px rgba(11, 13, 18, 0.45);
}

.blk-shot.answered .blk-som.cell.win::after {
  display: none;
}

/* where the run was expected to act, when blink picked another box */
.blk-shot.answered .blk-som.expect {
  box-shadow: inset 0 0 0 2px var(--blink), 0 0 0 3px #ffffff, 0 0 0 5px var(--ink-soft);
  outline: 2px dashed #ffffff;
  outline-offset: 3px;
}

/* each number covers the one burned into the image and grows away from its box to stay legible;
   its drawn size is known (--tc characters of a monospaced face), so it never leaves the screenshot */
.blk-somtag {
  --w: max(var(--tw), 22px, calc(12px + var(--tc, 1) * 1ch + var(--tg, 0px)));
  --h: max(var(--th), 20px);
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: var(--w);
  height: var(--h);
  padding: 0 6px;
  border-radius: 4px;
  background: var(--blink);
  color: #ffffff !important;
  font-family: var(--font-geist-mono);
  font-size: clamp(12px, calc(var(--tr) * 64cqw), 15px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.blk-somtag b,
.blk-somtag i {
  color: inherit !important;
}

.blk-somtag.above {
  left: clamp(0px, var(--tx), calc(100% - var(--w)));
  top: max(0px, calc(var(--ty) + var(--th) - var(--h)));
}

.blk-somtag.left {
  left: max(0px, calc(var(--tx) + var(--tw) - var(--w)));
  top: clamp(0px, var(--ty), calc(100% - var(--h)));
}

.blk-somtag.inside {
  left: clamp(0px, var(--tx), calc(100% - var(--w)));
  top: clamp(0px, var(--ty), calc(100% - var(--h)));
}

.blk-somtag i {
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}

.blk-somtag.win {
  background: var(--flash);
  color: var(--color-flash-ink) !important;
  box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.5);
  animation: blk-flash 0.5s ease-out 0.38s both;
}

.blk-somtag.win i {
  opacity: 1;
}

.blk-shot-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 2px 10px;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08), var(--shadow-subtle);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-soft) !important;
  pointer-events: none;
}

/* while blink reads: a sweep down the screenshot, the marks breathing */
.blk-shot.busy .blk-shot-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 71, 245, 0) 0%, rgba(36, 71, 245, 0.08) 40%, rgba(36, 71, 245, 0.26) 49.5%, rgba(36, 71, 245, 0) 50.5%);
  background-size: 100% 200%;
  animation: blk-scan 1.6s linear infinite;
}

.blk-shot.busy .blk-som {
  animation: blk-shimmer 1.2s ease-in-out infinite;
}

.blk-scr.busy .blk-sv:not(.blk-sv-wait),
.blk-scr.busy .blk-meters,
.blk-scr.busy .blk-answer-foot {
  opacity: 0.45;
}

/* drawing on a visitor's own screenshot */
.blk-shot[data-draw="1"] .blk-shot-frame {
  cursor: crosshair;
}

.blk-shot[data-draw="1"] .blk-somtag:not(.cell) {
  pointer-events: auto;
  cursor: pointer;
}

.blk-shot[data-draw="1"] .blk-somtag:not(.cell):hover {
  background: var(--ink);
  color: #ffffff !important;
}

.blk-ghost {
  position: absolute;
  z-index: 4;
  border: 2px dashed var(--blink);
  border-radius: 3px;
  background: rgba(36, 71, 245, 0.1);
  pointer-events: none;
}

.blk-ghost.sent {
  animation: blk-shimmer 1s ease-in-out infinite;
}

.blk-corner {
  position: absolute;
  z-index: 4;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--flash);
  box-shadow: 0 0 0 2px var(--blink), 0 0 0 6px rgba(36, 71, 245, 0.2);
  pointer-events: none;
  animation: blk-pop 0.25s var(--ease) both;
}

/* the two checks, as rings with their names */
.blk-meters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  transition: opacity 0.2s ease;
}

.blk-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-round);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  animation: blk-rise 0.4s var(--ease) 0.15s both;
}

.blk-ring {
  --ring: var(--blink-light);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--sp) * 1turn), var(--track) 0);
  transition: --sp 0.8s var(--ease);
  animation: blk-fill 0.9s var(--ease) 0.2s backwards;
}

.blk-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--paper);
}

.blk-ring b {
  position: relative;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.blk-meter .k {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft) !important;
}

.blk-meter.empty {
  box-shadow: none;
  animation: none;
}

.blk-meter.empty .blk-ring b,
.blk-meter.empty .k {
  color: var(--mid) !important;
}

.blk-meter.on[data-kind="done"] .blk-ring {
  --ring: var(--color-blink-deep);
}

.blk-meter.on[data-kind="done"] {
  border-color: var(--flash);
  box-shadow: 0 0 0 2px var(--flash);
}

.blk-meter.on[data-kind="risky"] .blk-ring {
  --ring: var(--ink);
}

.blk-meter.on[data-kind="risky"] {
  border-color: var(--ink-soft);
}

/* the screenshot's facts and folds, as an answer's foot, outside a card */
.blk-scr > .blk-answer-foot {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.blk-read {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 4px 0 0 !important;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-scr > .blk-runit {
  margin: 0;
}

/* --- computer use: real runs first, then how, then try --------------------------------- */

.blk-cuax {
  display: block;
  min-width: 0;
}

.blk-cuax-pitch {
  margin: 0 0 20px !important;
}

/* the stage: a strip of real runs, or one run in the player */
.blk-cuax-stage {
  container-type: inline-size;
  scroll-margin-top: 12px;
}

/* three reels fill the row exactly: two screens and a phone, or three screens */
.blk-cuax-strip {
  --fit: 3.8;
  --reel-h: clamp(190px, calc((100cqw - 28px) / var(--fit)), 330px);
  display: flex;
  gap: 14px;
  height: var(--reel-h);
  margin: 0 -2px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.blk-cuax-strip.wide {
  --fit: 5;
}

.blk-cuax-strip::-webkit-scrollbar {
  display: none;
}

a.blk-cuax-reel {
  position: relative;
  display: block;
  flex: none;
  height: 100%;
  aspect-ratio: var(--ar);
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-cards);
  background: #0b0d12;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-subtle);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  animation: blk-rise 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 90ms);
  transition: box-shadow 0.2s var(--ease);
}

a.blk-cuax-reel:hover {
  box-shadow: 0 0 0 2px var(--blink), 0 10px 30px -14px rgba(11, 13, 18, 0.4);
}

.blk-cuax-reel video,
.blk-cuax-reel img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
}

.blk-cuax-cap {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 5px 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.06), 0 2px 8px rgba(11, 13, 18, 0.12);
  font-size: var(--text-small);
  line-height: 1.3;
  white-space: nowrap;
}

.blk-cuax-cap b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cuax-cap em {
  font-style: normal;
  color: var(--mid) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cuax-reel.tall .blk-cuax-cap {
  right: 8px;
  left: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 5px 8px;
  white-space: normal;
}

/* the headline numbers, as stat blocks */
.blk-cuax-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 16px 0 32px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.blk-cuax-stats span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid var(--line);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--mid) !important;
  animation: blk-rise 0.45s var(--ease) both;
  animation-delay: calc(200ms + var(--i) * 80ms);
}

.blk-cuax-stats span:first-child {
  padding-left: 0;
  border-left: 0;
}

.blk-cuax-stats b {
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

/* the scenarios: a poster each, its name, and every run it had */
.blk-cuax-gl {
  margin-top: 0 !important;
}

.blk-cuax-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 8px;
}

a.blk-cuax-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  color: var(--ink);
  text-decoration: none;
  animation: blk-rise 0.45s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.blk-cuax-card:hover {
  border-color: var(--blink-line);
  box-shadow: 0 8px 24px -14px rgba(16, 24, 40, 0.3);
}

a.blk-cuax-card.on {
  border-color: var(--blink);
  box-shadow: 0 0 0 1px var(--blink);
}

.blk-cuax-thumb {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cuax-thumb video,
.blk-cuax-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
}

.blk-cuax-thumb.tall {
  background: linear-gradient(180deg, var(--blink-tint), var(--alt));
}

.blk-cuax-thumb.tall video,
.blk-cuax-thumb.tall img {
  width: 42%;
  margin: 0 auto !important;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgba(11, 13, 18, 0.4);
}

.blk-cuax-kind {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.08);
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  color: var(--ink-soft) !important;
}

a.blk-cuax-card > b {
  display: -webkit-box;
  padding: 4px 4px 0;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink) !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.blk-cuax-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cuax-rate > span:last-child {
  color: inherit !important;
  white-space: nowrap;
}

.blk-cuax-by {
  padding: 0 4px;
  font-size: var(--text-caption);
  color: var(--mid) !important;
}

/* one dot per run: filled when it finished, open when it did not; none is left out */
.blk-cuax-dots {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 120px;
}

.blk-cuax-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blink);
}

.blk-cuax-dots i.no {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--mid);
}

/* --- the player ------------------------------------------------------------------------- */

.blk-cuax-player {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  outline: none;
  animation: blk-rise 0.4s var(--ease) both;
}

.blk-cuax-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.blk-cuax-x {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  box-shadow: var(--shadow-control);
  color: var(--ink-soft);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
}

.blk-cuax-x:hover {
  background: var(--alt);
}

.blk-cuax-x svg,
.blk-cuax-step svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk-cuax-name {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-title) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.blk-cuax-who {
  flex: none;
  margin-left: auto;
  padding: 0 10px;
  border-radius: var(--radius-round);
  background: var(--blink-tint);
  color: var(--blink-ink) !important;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 24px;
}

.blk-cuax-task {
  margin: 0 !important;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-soft) !important;
}

.blk-cuax-task span {
  display: inline-block;
  margin-right: 8px;
  padding: 0 7px;
  border-radius: var(--radius-xs);
  background: var(--sunken);
  color: var(--mid) !important;
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 20px;
}

.blk-cuax-body {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  grid-template-areas: "screen side" "nav side";
  grid-template-rows: auto 1fr;
  gap: 12px 20px;
  align-items: start;
}

.blk-cuax-player.tall .blk-cuax-body {
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
}

/* under a phone's narrow screen, Video or Steps takes a line of its own above the steps */
.blk-cuax-player.tall .blk-cuax-nav {
  flex-direction: column;
  align-items: stretch;
}

.blk-cuax-player.tall .blk-cuax-views {
  justify-content: center;
}

.blk-cuax-player.tall .blk-cuax-views button {
  flex: 1 1 0;
}

.blk-cuax-screen {
  grid-area: screen;
  min-width: 0;
}

.blk-cuax-nav {
  grid-area: nav;
}

.blk-cuax-vid {
  overflow: hidden;
  border-radius: 10px;
  background: #0b0d12;
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cuax-vid video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: contain;
  border-radius: 0;
}

.blk-cuax-vid.wait img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: contain;
  opacity: 0.55;
  border-radius: 0;
}

.blk-cuax-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  animation: blk-fade 0.3s ease both;
}

.blk-cuax-side .blk-sv {
  min-height: 64px;
  padding: 10px 14px;
  box-shadow: none;
}

.blk-cuax-side .blk-sv h3 {
  font-size: var(--text-title) !important;
}

.blk-cuax-side .blk-sv-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  font-size: 15px;
}

.blk-cuax-side .blk-opts {
  margin: 0 !important;
}

.blk-cuax-side .blk-opt {
  grid-template-columns: minmax(0, 1fr) minmax(48px, 0.7fr) 52px;
  gap: 10px;
}

.blk-cuax-side .blk-meter {
  box-shadow: none;
}

.blk-cuax-stepn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 !important;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-stepn b {
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cuax-stepn span {
  color: var(--mid) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cuax-miss {
  margin: -4px 0 0 !important;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-miss::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px -1px 0;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 3px;
}

.blk-cuax-outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-outcome span {
  padding: 3px 12px;
  border-radius: var(--radius-round);
  background: var(--flash);
  color: var(--color-flash-ink) !important;
  font-weight: 600;
  animation: blk-pop 0.4s var(--ease) both;
}

.blk-cuax-outcome.no span {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-soft);
  color: var(--ink) !important;
}

.blk-cuax-outcome em {
  font-style: normal;
  color: var(--mid) !important;
}

.blk-cuax-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 !important;
  font-size: var(--text-small);
  color: var(--ink-soft) !important;
}

.blk-cuax-facts span {
  color: inherit !important;
}

.blk-cuax-facts span + span::before {
  content: "\00b7";
  margin: 0 8px;
  color: var(--faint);
}

.blk-cuax-runs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-runs b {
  font-weight: 600;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cuax-runs span {
  color: var(--mid) !important;
}

.blk-cuax-acc {
  margin: -4px 0 0 !important;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-alt {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blink-ink);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

ul.blk-cuax-cmp {
  display: grid;
  gap: 2px;
  margin: -4px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-cuax-cmp li {
  margin: 0 !important;
}

.blk-cuax-cmp button {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--text-small);
  text-align: left;
  cursor: pointer;
}

.blk-cuax-cmp button:hover {
  background: var(--alt);
}

.blk-cuax-cmp li.on button {
  background: var(--blink-tint);
  color: var(--blink-ink);
}

.blk-cuax-cmp span {
  font-size: var(--text-caption);
  color: inherit !important;
}

.blk-cuax-cmp i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--track);
}

.blk-cuax-cmp i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: var(--radius-round);
  background: var(--blink-light);
  transform-origin: left center;
  animation: blk-wipe 0.6s var(--ease) both;
}

.blk-cuax-cmp li.on i::after {
  background: var(--blink);
}

.blk-cuax-cmp b {
  font-weight: 600;
  color: inherit !important;
  font-variant-numeric: tabular-nums;
}

/* Video or Steps, then the steps themselves, on one line that never wraps */
.blk-cuax-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.blk-cuax-walk {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.blk-cuax-views {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--sunken);
}

.blk-cuax-views button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--mid);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.blk-cuax-views button:hover {
  color: var(--ink);
}

.blk-cuax-views button.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px rgba(16, 24, 40, 0.06);
}

.blk-cuax-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  box-shadow: var(--shadow-control);
  color: var(--ink-soft);
  cursor: pointer;
}

.blk-cuax-step:hover {
  background: var(--alt);
}

/* play the steps: the one control drawn filled, since it moves on its own */
.blk-cuax-autoplay {
  border-color: var(--blink);
  color: var(--blink);
}

.blk-cuax-autoplay svg {
  fill: currentColor;
  stroke-width: 0;
}

.blk-cuax-autoplay[aria-pressed="true"] {
  background: var(--blink);
  color: #ffffff;
}

.blk-cuax-autoplay[aria-pressed="true"] svg {
  fill: none;
  stroke-width: 2.6;
}

/* the steps scroll under the arrows on a narrow screen; the step in view is always brought into it */
ol.blk-cuax-rail {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  margin: 0 !important;
  padding: 3px 2px !important;
  overflow-x: auto;
  list-style: none !important;
  scrollbar-width: none;
}

ol.blk-cuax-rail::-webkit-scrollbar {
  display: none;
}

.blk-cuax-rail li {
  flex: none;
  margin: 0 !important;
}

.blk-cuax-rail button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--blink-light);
  color: var(--ink-soft);
  font-size: var(--text-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blk-cuax-rail button:hover {
  box-shadow: inset 0 0 0 1.5px var(--blink);
}

.blk-cuax-rail button.miss {
  box-shadow: inset 0 0 0 1.5px var(--faint);
  color: var(--mid);
}

.blk-cuax-rail button.gate {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.blk-cuax-rail button.done {
  background: var(--flash);
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.3);
  color: var(--color-flash-ink);
}

.blk-cuax-rail button.on {
  background: var(--blink);
  box-shadow: none;
  color: #ffffff;
}

.blk-cuax-load {
  display: flex;
  gap: 6px;
  margin: 8px 0 !important;
}

.blk-cuax-load i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blink-light);
  animation: blk-pulse 1s ease-in-out infinite;
}

.blk-cuax-load i:nth-child(2) {
  animation-delay: 0.15s;
}

.blk-cuax-load i:nth-child(3) {
  animation-delay: 0.3s;
}

/* --- how a screenshot is read: six nodes, told in order once on screen ------------------------ */

.blk-cx {
  margin: 36px 0 0;
}

.blk-cx ol.blk-cx-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-cx-flow > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 !important;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--mid);
}

/* the thread from one node to the next */
.blk-cx-flow > li + li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 54px;
  width: 12px;
  height: 2px;
  background: var(--blink-line);
  transform-origin: left center;
}

.blk-cx-flow > li > b {
  margin-top: 8px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cx-flow > li > .blk-cx-cap {
  color: var(--mid) !important;
}

.blk-cx-flow > li > code {
  display: block;
  margin-top: 4px;
  padding: 0;
  background: none;
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.45;
  color: var(--blink-ink) !important;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.blk-cx-n {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--faint) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cx-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 84px;
  margin-top: 12px;
}

/* 1: the numbered screenshot, with the sweep that reads it */
.blk-cx-shot,
.blk-cx-grid {
  position: relative;
  display: block;
  height: 72px;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cx-shot img,
.blk-cx-grid img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}

.blk-cx-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 71, 245, 0) 0%, rgba(36, 71, 245, 0.08) 40%, rgba(36, 71, 245, 0.3) 49.5%, rgba(36, 71, 245, 0) 50.5%);
  background-size: 100% 200%;
  opacity: 0;
}

/* 2: the encoder's blocks, lit one after another */
.blk-cx-enc {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 1px;
  height: 72px;
  padding: 0 6px;
}

.blk-cx-enc i {
  display: block;
  width: 64px;
  height: 1.6px;
  border-radius: 1px;
  background: var(--blink);
  opacity: 0.85;
}

/* 3: the screenshot cut into the patches that become image tokens */
.blk-cx-cells {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(36, 71, 245, 0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(36, 71, 245, 0.55) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
  background-color: rgba(36, 71, 245, 0.1);
}

.blk-cx-count,
.blk-cxp-tally {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: var(--blink);
  color: #ffffff !important;
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* 4: three typed questions */
.blk-cx-qs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.blk-cx-qs em {
  padding: 0 8px;
  border-radius: var(--radius-round);
  background: var(--blink-tint);
  box-shadow: inset 0 0 0 1px var(--blink-line);
  color: var(--blink-ink) !important;
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

/* 5: a probability for every offered answer */
ul.blk-cx-bars {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-cx-bars li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 0;
  font-size: var(--text-caption);
  line-height: 14px;
  color: var(--mid);
}

.blk-cx-bars span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mid) !important;
}

.blk-cx-bars i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--track);
}

.blk-cx-bars i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: var(--radius-round);
  background: var(--blink-light);
  transform-origin: left center;
}

.blk-cx-bars li.win i::after {
  background: var(--blink);
}

.blk-cx-bars b {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 500;
  text-align: right;
  color: var(--ink-soft) !important;
  font-variant-numeric: tabular-nums;
}

/* 6: the action, in the flash colour */
.blk-cx-act b {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  background: var(--flash);
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.2);
  color: var(--color-flash-ink) !important;
  font-size: 15px;
  font-weight: 600;
}

/* told in order once it is on screen; without the script it simply stands still */
.blk-cx.arm:not(.on) .blk-cx-flow > li {
  opacity: 0;
}

.blk-cx.on .blk-cx-flow > li {
  animation: blk-rise 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 420ms);
}

.blk-cx.on .blk-cx-flow > li + li::before {
  animation: blk-wipe 0.35s var(--ease) both;
  animation-delay: calc(var(--i) * 420ms - 120ms);
}

.blk-cx.on .blk-cx-shot::after {
  opacity: 1;
  animation: blk-scan 1.1s linear 0.2s 2 both;
}

.blk-cx.on .blk-cx-enc i {
  animation: blk-cx-layer 0.5s var(--ease) both;
  animation-delay: calc(420ms + var(--k) * 26ms);
}

.blk-cx.on .blk-cx-cells {
  animation: blk-cx-sweep 1.3s var(--ease) 0.9s both;
}

.blk-cx.on .blk-cx-qs em {
  animation: blk-pop 0.35s var(--ease) both;
  animation-delay: calc(1260ms + var(--k) * 140ms);
}

.blk-cx.on .blk-cx-bars i::after {
  animation: blk-wipe 0.7s var(--ease) both;
  animation-delay: calc(1700ms + var(--i) * 90ms);
}

.blk-cx.on .blk-cx-act b {
  animation: blk-pop 0.45s var(--ease) 2.2s both, blk-flash 0.6s ease-out 2.4s both;
}

/* --- how one step works: a recorded step from its raw screen to blink's decision --------------
   Two rows of four: the browser's work (no model) with the real screens large, then blink's.
   Told in order once the first row is on screen, a little quicker than the six-node version. */

.blk-cuax-howbtn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--blink-ink) !important;
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.blk-cuax-howbtn:hover {
  color: var(--color-blink-hover) !important;
}

.blk-cuax-howbtn:focus-visible,
.blk-cxp-open:focus-visible,
a.blk-cxp-shot:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.blk-cuax-side > .blk-cuax-howbtn {
  align-self: flex-start;
  margin: 0;
  font-size: var(--text-small);
}

.blk-cxp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.blk-cxp-head .blk-section {
  margin: 0 !important;
}

.blk-cxp-open {
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  box-shadow: var(--shadow-control);
  color: var(--ink-soft);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
}

.blk-cxp-open:hover {
  background: var(--alt);
}

.blk-cxp > .blk-note {
  margin-top: 4px !important;
}

p.blk-eyebrow.blk-cxp-row {
  margin: 20px 0 0 !important;
}

.blk-cx ol.blk-cx-flow.blk-cx-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px !important;
}

/* the browser's row: the real screens, as large as the cards allow */
.blk-cxp-big > li > .blk-cx-art {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.blk-cx-flow.blk-cxp-big > li + li::before {
  display: none;
}

.blk-cxp-big > li + li > .blk-cx-art::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--blink-line);
  transform-origin: left center;
}

.blk-cxp-shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line);
}

a.blk-cxp-shot {
  transition: box-shadow 0.15s ease;
}

a.blk-cxp-shot:hover {
  box-shadow: 0 0 0 1px var(--blink-line), var(--shadow-control);
}

.blk-cxp-shot img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}

/* 2: what the DOM listed, outlined where it sits; no numbers yet */
.blk-cxp-boxes {
  position: absolute;
  inset: 0;
}

.blk-cxp-boxes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  box-sizing: border-box;
  border: 1.5px dashed var(--blink);
  border-radius: 2px;
  background: rgba(36, 71, 245, 0.08);
}

/* 4: the request's own fields, one line each */
.blk-cxp-req {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 5 / 3;
  padding: 10px 12px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 1.4;
}

.blk-cxp-req > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-soft) !important;
}

.blk-cxp-req i {
  font-style: normal;
  color: var(--blink-ink) !important;
}

.blk-cxp-req em {
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--blink-tint);
  box-shadow: inset 0 0 0 1px var(--blink-line);
  font-style: normal;
  color: var(--blink-ink) !important;
}

/* where the boxes come from, in every app */
.blk-cxp-src {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--alt);
}

.blk-cxp-src > p.blk-eyebrow {
  margin: 0 0 8px !important;
}

.blk-cxp-src ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-cxp-src li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 !important;
  font-size: var(--text-small);
  line-height: 1.45;
}

.blk-cxp-src li b {
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cxp-src li span {
  color: var(--mid) !important;
}

.blk-cxp-none {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cxp-none::before {
  content: "";
  flex: none;
  width: 5px;
  height: 10px;
  margin: -3px 2px 0 5px;
  border: solid var(--blink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.blk-cxp-time {
  max-width: 880px;
  margin: 10px 0 0 !important;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mid) !important;
}

.blk-cxp-folds {
  margin: 16px 0 0;
}

.blk-cxp-folds details.blk-d > .blk-pre {
  max-height: 440px;
  margin-bottom: 12px !important;
}

.blk-cxp-folds details.blk-d > .blk-tablewrap {
  margin-bottom: 12px !important;
}

table.blk-cxp-table th:nth-child(2),
table.blk-cxp-table td:nth-child(2),
table.blk-cxp-table th:nth-child(3),
table.blk-cxp-table td:nth-child(3) {
  text-align: left;
}

table.blk-cxp-table td:nth-child(3) {
  width: 100%;
  white-space: normal;
}

table.blk-cxp-table td:last-child {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
}

.blk-cxp.on .blk-cx-flow > li {
  animation-delay: calc(var(--i) * 300ms);
}

.blk-cxp.on .blk-cx-flow > li + li::before,
.blk-cxp.on .blk-cxp-big > li + li > .blk-cx-art::before {
  animation: blk-wipe 0.35s var(--ease) both;
  animation-delay: calc(var(--i) * 300ms - 100ms);
}

.blk-cxp.on .blk-cxp-boxes i {
  animation: blk-pop 0.3s var(--ease) both;
  animation-delay: calc(450ms + var(--k) * 40ms);
}

.blk-cxp.on .blk-cx-cells {
  animation: blk-cx-sweep 1.3s var(--ease) 1.4s both;
}

.blk-cxp.on .blk-cx-qs em {
  animation: blk-pop 0.35s var(--ease) both;
  animation-delay: calc(1650ms + var(--k) * 140ms);
}

.blk-cxp.on .blk-cx-bars i::after {
  animation: blk-wipe 0.7s var(--ease) both;
  animation-delay: calc(1950ms + var(--i) * 90ms);
}

.blk-cxp.on .blk-cx-act b {
  animation: blk-pop 0.45s var(--ease) 2.25s both, blk-flash 0.6s ease-out 2.45s both;
}

/* the player: what blink was sent at a step, under what it answered */
details.blk-cuax-got {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--alt);
}

details.blk-cuax-got > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 36px 0 12px;
  list-style: none;
  border-radius: 10px;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid) !important;
  cursor: pointer;
}

details.blk-cuax-got > summary:hover {
  color: var(--ink) !important;
}

details.blk-cuax-got > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border: solid var(--mid);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease), margin-top 0.2s var(--ease);
}

details.blk-cuax-got[open] > summary::after {
  margin-top: -1px;
  transform: rotate(-135deg);
}

details.blk-cuax-got > dl {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0 12px 10px !important;
  font-size: var(--text-small);
  line-height: 1.45;
}

.blk-cuax-got dt {
  margin: 0 !important;
  font-weight: 600;
  color: var(--ink-soft) !important;
}

.blk-cuax-got dd {
  min-width: 0;
  margin: 0 !important;
  color: var(--ink-soft) !important;
}

.blk-cuax-got dd ol {
  display: grid;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-cuax-got dd li {
  margin: 0 !important;
  overflow-wrap: anywhere;
  color: var(--ink-soft) !important;
}

.blk-cuax-got dd li.more {
  color: var(--faint) !important;
}

.blk-cuax-got dd li .opts {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--mid) !important;
}

.blk-cuax-got dd li .opts b {
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cuax-got dd em {
  padding: 0 6px;
  border-radius: var(--radius-round);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--text-caption);
  font-style: normal;
  white-space: nowrap;
  color: var(--mid) !important;
}

p.blk-cuax-gotn {
  margin: 0 12px 8px !important;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mid) !important;
}

details.blk-cuax-json {
  margin: 0 12px 10px;
}

details.blk-cuax-json > summary {
  display: inline-block;
  list-style: none;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--blink-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

details.blk-cuax-json .blk-pre {
  max-height: 360px;
  margin: 8px 0 4px !important;
  font-size: var(--text-caption);
}

details.blk-cuax-json > p.blk-cuax-gotn {
  margin: 8px 0 0 !important;
}

details.blk-cuax-got > .blk-cuax-howbtn {
  display: inline-block;
  margin: 0 12px 12px;
  font-size: var(--text-small);
}

/* --- try it, and beyond clicks -------------------------------------------------------------- */

.blk-cuax-try {
  margin: 40px 0 4px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 12px;
}

.blk-cuax-try .blk-note {
  margin: 0 !important;
}

.blk-cuax-try h3 {
  margin: 0 !important;
  font-size: var(--text-heading-sm) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.blk-cuax-more {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.blk-cuax-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.blk-cuax-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  animation: blk-rise 0.45s var(--ease) both;
  animation-delay: calc(var(--i) * 60ms);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blk-cuax-tile:hover {
  border-color: var(--blink-line);
}

.blk-cuax-tile.on {
  border-color: var(--blink);
  box-shadow: 0 0 0 1px var(--blink);
}

.blk-cuax-still {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--alt);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cuax-still img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0;
}

.blk-cuax-play {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(11, 13, 18, 0.25);
}

.blk-cuax-play::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ink);
}

.blk-cuax-tile > b {
  padding: 4px 4px 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-cuax-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 4px;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

.blk-cuax-metric strong {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.blk-cuax-open {
  margin-top: 14px;
}

.blk-cuax-pane {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  animation: blk-rise 0.35s var(--ease) both;
}

.blk-cuax-pane h4 {
  margin: 0 !important;
  font-size: var(--text-title) !important;
  font-weight: 600 !important;
  color: var(--ink);
}

.blk-cuax-pane .blk-note {
  margin: -6px 0 0 !important;
}

.blk-cuax-pane video,
.blk-cuax-pane .blk-cuax-chart {
  display: block;
  width: 100%;
  max-height: 70vh;
  margin: 0 !important;
  border-radius: var(--radius-control);
  background: #0b0d12;
  object-fit: contain;
}

.blk-cuax-pane .blk-cuax-chart {
  max-width: 880px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cuax-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.blk-cuax-imgs img {
  display: block;
  width: 100%;
  margin: 0 !important;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-cuax-sound {
  margin: -4px 0 0 !important;
  font-size: var(--text-small);
  color: var(--mid) !important;
}

/* --- results: each figure a card, its numbers drawn by results.py ----------------------------- */

.blk-figure {
  margin: 0 0 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  animation: blk-rise 0.45s var(--ease) both;
}

.blk-figure.blk-bare {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.blk-figure figcaption {
  margin: 0 0 12px;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft) !important;
}

.blk-fig {
  display: block;
  overflow: visible;
  font-family: var(--font-geist);
}

.blk-grid {
  stroke: var(--grid);
  stroke-width: 1;
}

.blk-ref {
  stroke: var(--color-ref);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}

.blk-ax {
  font-family: var(--font-geist);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  fill: var(--mid);
}

.blk-cap {
  font-family: var(--font-geist);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--mid);
}

.blk-name {
  font-family: var(--font-geist);
  font-size: 13px;
  fill: var(--mid);
}

.blk-name.on {
  fill: var(--ink);
  font-weight: 600;
}

.blk-val {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--mid);
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.blk-val.on {
  fill: var(--ink);
  font-weight: 600;
}

.blk-ring-lab {
  font-family: var(--font-geist);
  font-size: 10px;
  fill: var(--mid);
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.blk-grow {
  transform-box: fill-box;
  transform-origin: left center;
  animation: blk-wipe 0.6s var(--ease) both;
}

.blk-fig .blk-ring {
  fill: none;
  stroke: var(--grid);
  stroke-width: 1;
}

.blk-spoke {
  stroke: var(--line);
  stroke-width: 1;
}

.blk-radar {
  transform-box: fill-box;
  transform-origin: center;
  animation: blk-pop 0.55s var(--ease) both;
}

.blk-dot,
.blk-pt {
  animation: blk-pop 0.45s var(--ease) both;
}

/* the frontier is a fact about every system, so it is drawn in neutral ink */
.blk-halo {
  fill: var(--ink);
  fill-opacity: 0.06;
  animation: blk-pop 0.5s var(--ease) both;
}

.blk-front {
  fill: none;
  stroke: var(--color-ref);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: blk-draw 1.4s cubic-bezier(0.3, 0.7, 0.3, 1) 0.15s forwards;
}

/* 11px keeps Geist's taller line box inside the room results.py leaves around a label
   (11 above the baseline, 4 below); the figure scales it to about 12px on screen */
.blk-pt-lab {
  font-family: var(--font-geist);
  font-size: 11px;
  fill: var(--mid);
  stroke: var(--paper);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.blk-pt-lab.on {
  fill: var(--ink);
  font-weight: 600;
}

.blk-lead {
  fill: none;
  stroke: var(--color-other);
  stroke-width: 1;
}

/* an interval is drawn twice: a dark outline that reads on the card, a light core
   that reads on the bar */
.blk-whisk-edge {
  stroke: var(--ink);
  stroke-width: 3.6;
  stroke-linecap: round;
}

.blk-whisk {
  stroke: var(--paper);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* systems as rows: a swatch, the name, the number */
.blk-rows {
  display: grid;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.blk-row.on {
  border-color: var(--blink-line);
  background: var(--blink-tint);
}

.blk-row b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--ink) !important;
}

.blk-row b::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.blk-row strong {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.blk-row .blk-axvals {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--text-caption);
  color: var(--ink-soft) !important;
  font-variant-numeric: tabular-nums;
}

.blk-row .blk-axvals i {
  margin-right: 6px;
  font-style: normal;
  color: var(--mid) !important;
}

.blk-row.quiet {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
}

.blk-row.quiet b,
.blk-row.quiet strong {
  color: var(--mid) !important;
}

/* the no-score tag is long: where it can't sit beside the name it takes the next line, whole */
.blk-row.quiet b {
  flex-wrap: wrap;
}

/* the public-item proxies as stat blocks: the name small, the number large */
.blk-headline-rows {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px !important;
  max-width: 600px;
  margin-bottom: 12px !important;
}

.blk-headline-rows .blk-row {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius-cards);
}

.blk-headline-rows .blk-row b {
  font-size: var(--text-small);
  color: var(--ink-soft) !important;
}

.blk-headline-rows .blk-row strong {
  font-size: 32px;
  line-height: 1.1;
}

/* two groups that must never be read as one scale */
.blk-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-bottom: 20px;
}

.blk-group {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
}

.blk-group-t {
  margin: 0 !important;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.43;
  color: var(--ink) !important;
}

.blk-group-s {
  min-height: 3em;
  margin: 4px 0 8px !important;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--mid) !important;
}

.blk-group .blk-figure {
  margin: 0 0 8px;
}

/* tables: hairlines and a quiet head */
.blk-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.blk-mini {
  max-width: 680px;
  margin: 0 0 6px;
}

.blk-undertable {
  margin: 8px 0 22px !important;
  font-size: var(--text-small);
}

table.blk-table {
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

table.blk-table tr {
  border: 0 !important;
}

table.blk-table th,
table.blk-table td {
  padding: 9px 14px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  text-align: right;
  white-space: nowrap;
}

table.blk-table th:first-child,
table.blk-table td:first-child {
  text-align: left;
}

table.blk-table.ranked th:nth-child(2),
table.blk-table.ranked td:nth-child(2) {
  text-align: left;
}

table.blk-table thead th {
  background: var(--alt);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--mid) !important;
}

table.blk-table td {
  color: var(--ink-soft) !important;
}

table.blk-table tbody tr:last-child td,
table.blk-table tbody tr:last-child th {
  border-bottom: 0 !important;
}

/* blink's own rows wear its tint */
table.blk-table tr.on td {
  background: var(--blink-tint);
  color: var(--ink) !important;
  font-weight: 500;
}

/* the same numbers as text: the figure leads, the table takes over on a phone */
.blk-narrow {
  display: none;
}

table.blk-nums {
  width: 100%;
  max-width: 680px;
  margin: 0 0 4px !important;
  border: 1px solid var(--line) !important;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: var(--paper);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

table.blk-nums tr {
  border: 0 !important;
}

.blk-nums thead th:first-child {
  border-top-left-radius: 9px;
}

.blk-nums thead th:last-child {
  border-top-right-radius: 9px;
}

.blk-nums caption {
  caption-side: bottom;
  padding-top: 8px;
  text-align: left;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mid) !important;
}

table.blk-nums th,
table.blk-nums td {
  padding: 8px 12px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  text-align: right;
  white-space: nowrap;
}

table.blk-nums tbody tr:last-child th,
table.blk-nums tbody tr:last-child td {
  border-bottom: 0 !important;
}

table.blk-nums thead th {
  background: var(--alt);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--mid) !important;
}

table.blk-nums thead th:first-child,
table.blk-nums tbody th {
  text-align: left;
}

table.blk-nums tbody th {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink) !important;
}

table.blk-nums tbody td {
  color: var(--ink-soft) !important;
}

/* on a phone the figures above become their own numbers: a table, a list, steps */
.blk-narrow .blk-nums {
  max-width: none;
  margin-bottom: 16px !important;
}

table.blk-nums tr.on th,
table.blk-nums tr.on td {
  background: var(--blink-tint);
}

.blk-narrowhead {
  margin: 4px 0 8px !important;
}

ul.blk-arealist {
  margin: 0 0 16px !important;
  padding: 0 !important;
  list-style: none !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.blk-arealist li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0 !important;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
  line-height: 1.5;
}

.blk-arealist li:first-child {
  border-top: 0;
}

.blk-arealist li.on {
  background: var(--blink-tint);
}

.blk-arealist b {
  flex: 1 0 100%;
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-arealist span {
  white-space: nowrap;
  color: var(--mid) !important;
}

.blk-arealist i {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-soft) !important;
  font-variant-numeric: tabular-nums;
}

ol.blk-steplist {
  display: grid;
  gap: 8px;
  margin: 0 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: blk-pipe;
}

.blk-steplist li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0 !important;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  counter-increment: blk-pipe;
}

.blk-steplist li::before {
  content: counter(blk-pipe);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blink-tint);
  color: var(--blink-ink);
  font-size: var(--text-caption);
  font-weight: 600;
}

.blk-steplist b {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-steplist span {
  font-size: var(--text-small);
  color: var(--mid) !important;
}

/* latency, where it is shown, reads as a row of stat blocks */
.blk-figure .blk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 16px;
  margin: 0 0 8px !important;
  font-size: var(--text-small);
}

.blk-figure .blk-stats b {
  display: block;
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* the pipeline: four stages on the page itself */
.blk-card {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1;
}

.blk-stage {
  animation: blk-rise 0.5s var(--ease) both;
}

.blk-stage-n {
  font-family: var(--font-geist);
  font-size: 12px;
  font-weight: 600;
  fill: var(--blink);
}

.blk-stage-t {
  font-family: var(--font-geist);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  fill: var(--ink);
}

.blk-stage-s {
  font-family: var(--font-geist);
  font-size: 12.5px;
  fill: var(--mid);
}

.blk-bare .blk-ax {
  fill: var(--mid);
}

.blk-flow {
  fill: none;
  stroke: var(--color-other);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: blk-draw 0.5s ease-out both;
}

.blk-flow-head {
  fill: none;
  stroke: var(--color-other);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: blk-fade 0.35s ease-out both;
}

/* a section of a long page: a title, its note, then its figure */
.block:not(:first-child):has(> .html-container > .prose > .blk-h2:first-child) {
  margin-top: 24px;
}

/* --- how it works: the screenshot path ------------------------------------------------------ */

.blk-vsec {
  margin: 20px 0 8px;
}

.blk-vsec ol.blk-vpipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

.blk-vpipe li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 !important;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--mid);
  animation: blk-rise 0.4s var(--ease) both;
  animation-delay: calc(var(--i) * 90ms);
}

.blk-vpipe li > span:not(.blk-vp-art):not(.blk-vp-n) {
  color: var(--mid) !important;
}

.blk-vpipe li + li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 36px;
  width: 12px;
  height: 2px;
  background: var(--blink-line);
}

.blk-vpipe b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-vp-art {
  display: flex;
  align-items: center;
  height: 48px;
  margin: 8px 0 6px;
}

.blk-vp-art img {
  width: auto;
  max-height: 48px;
  margin: 0 !important;
  border-radius: var(--radius-small);
  box-shadow: 0 0 0 1px var(--line);
}

.blk-vp-art svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--blink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk-vp-n {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--faint) !important;
}

.blk-vp-fact {
  display: block;
  margin-top: 4px;
  padding: 0;
  background: none;
  font-family: var(--font-geist);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.5;
  color: var(--blink-ink) !important;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.blk-vsec > .blk-vp-fact {
  font-family: var(--font-geist-mono);
  color: var(--mid) !important;
}

.blk-good {
  margin-top: 18px !important;
}

.blk-goodlist {
  margin: 6px 0 8px !important;
  padding-left: 18px !important;
  list-style: disc !important;
  font-size: var(--text-body);
  line-height: 1.6;
}

.blk-goodlist li {
  margin: 0 0 2px !important;
  color: var(--ink-soft) !important;
}

/* --- api: TypeSafe API clients, a blink server and this Space ---------------------------------- */

.blk-copytag {
  margin-left: 8px;
  border-style: dashed;
  border-color: var(--blink-line);
  background: var(--blink-tint);
  color: var(--blink-ink) !important;
}

/* gradio's prose draws a text-coloured border on every table and row; these keep only the hairlines */
.blk-apifig table.blk-apitable,
.blk-apifig table.blk-apitable tr,
table.blk-apitext,
table.blk-apitext tr {
  margin: 0 !important;
  border: 0 !important;
}

.blk-apifig table.blk-apitable th,
.blk-apifig table.blk-apitable td {
  min-width: 140px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.blk-apifig table.blk-apitable th:first-child,
.blk-apifig table.blk-apitable td:first-child {
  min-width: 0;
}

.blk-apifig table.blk-apitable tbody th {
  background: transparent;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink) !important;
  white-space: nowrap;
}

.blk-apifig table.blk-apitable td > span {
  color: var(--ink-soft) !important;
}

/* the comparison is a table card: its caption, the table edge to edge, the legend along the foot */
.blk-figure.blk-apifig {
  padding: 0;
  overflow: hidden;
}

.blk-apifig figcaption {
  margin: 0;
  padding: 16px 20px 12px;
}

.blk-apifig .blk-tablewrap {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.blk-apifig .blk-apilegend {
  margin: 0 !important;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
}

/* a mark says how a cell compares; its shape tells them apart as much as its colour */
.blk-mk {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  vertical-align: middle;
}

.blk-mk.same {
  background: var(--blink);
}

.blk-mk.adds {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--blink);
}

.blk-mk.differs {
  background: var(--color-ref);
}

.blk-mk.none {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.blk-apilegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0 !important;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--mid) !important;
}

.blk-apilegend span {
  display: inline-flex;
  align-items: center;
  color: var(--mid) !important;
}

.blk-apifig code,
.blk-steps code {
  padding: 1px 6px;
  word-break: normal;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--alt);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft) !important;
  white-space: normal;
  overflow-wrap: break-word;
}

.blk-apifig code::before,
.blk-apifig code::after,
.blk-steps code::before,
.blk-steps code::after {
  content: none;
}

/* three steps, one row each: the number, what to do, then the command on one line */
.blk-steps {
  display: grid;
  gap: 0;
  margin: 0 0 24px !important;
  padding: 0 !important;
  list-style: none !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--paper);
  box-shadow: var(--shadow-subtle);
  counter-reset: blk-step;
  overflow: hidden;
}

.blk-steps li {
  display: grid;
  grid-template-columns: 24px minmax(160px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin: 0 !important;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  counter-increment: blk-step;
}

.blk-steps li:first-child {
  border-top: 0;
}

.blk-steps li::before {
  content: counter(blk-step);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blink-tint);
  color: var(--blink-ink);
  font-size: var(--text-caption);
  font-weight: 600;
}

.blk-steps b {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink) !important;
}

.blk-steps code {
  display: block;
  justify-self: stretch;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-small);
}



/* the steps' label, with the source and the docs at the end of its line */
.blk-stepshead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 8px 0 12px;
}

.blk-stepshead > .blk-eyebrow,
.blk-stepshead > .blk-links {
  margin: 0 !important;
}

.blk-apilabel {
  margin: 16px 0 6px !important;
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid) !important;
}

.blk-api details.blk-d ul {
  max-width: 720px;
  margin-bottom: 12px !important;
  padding-left: 18px !important;
}

.blk-api details.blk-d li {
  margin: 0 0 6px !important;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft) !important;
}

.blk-apimini {
  max-width: 780px;
  margin: 4px 0 12px;
}

table.blk-apitext th,
table.blk-apitext td {
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

table.blk-apitext td:first-child {
  font-family: var(--font-geist-mono);
  white-space: nowrap;
}

/* --- static shell (build_static.py; the gradio app supplies its own) ------------------------- */

body {
  margin: 0;
}

.blk-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 64px;
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

.blk-shell .blk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line);
}

.blk-shell .blk-tabs.sub {
  margin: 8px 0 2px;
}

.blk-tabs button {
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  box-shadow: inset 0 -2px 0 transparent;
  color: var(--mid);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}

.blk-tabs.sub button {
  height: 36px;
  font-size: var(--text-small);
}

.blk-tabs button:hover {
  color: var(--ink);
}

.blk-tabs button[aria-selected="true"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--blink);
}

.blk-tabs button:focus-visible,
.blk-chip:focus-visible,
.blk-go:focus-visible {
  outline: 2px solid var(--blink);
  outline-offset: 2px;
}

.blk-pane {
  display: none;
  padding-top: 24px;
}

.blk-pane.on {
  display: block;
}

.blk-shell .blk-pane > h2.blk-h2 {
  margin-top: 36px;
}

.blk-shell .blk-pane > h2.blk-h2:first-child,
.blk-shell .blk-pane > p.blk-eyebrow + h2.blk-h2 {
  margin-top: 0;
}

.blk-cols {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 28px;
}

.blk-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.blk-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.blk-chip:hover {
  background: var(--alt);
}

.blk-chip.on {
  border-color: var(--blink);
  background: var(--blink-tint);
  color: var(--blink-ink);
}

.blk-field {
  margin-bottom: 14px;
}

.blk-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blk-field textarea:focus {
  border-color: var(--blink);
  box-shadow: var(--ring);
  outline: none;
}

.blk-field textarea.blk-mono {
  font-family: var(--font-geist-mono);
  font-size: 12.5px;
}

.blk-go {
  width: 100%;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--blink);
  border-radius: var(--radius-control);
  background: var(--blink);
  color: #ffffff;
  font-family: var(--font-geist);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.blk-go:hover {
  background: var(--color-blink-hover);
}

.blk-out {
  display: none;
}

.blk-out.on {
  display: block;
}

.blk-synthetic {
  margin: 14px 0 0 !important;
}

/* --- narrower windows ----------------------------------------------------------------------
   Inside a media query gradio keeps only the scoped copy of each rule, so these name only what
   sits inside the app: .row, .tab-container, never .gradio-container. */

@media (max-width: 1100px) {
  .blk-cx .blk-cx-flow,
  .blk-vsec ol.blk-vpipe {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .blk-cx-flow > li:nth-child(3n + 1)::before,
  .blk-vpipe li:nth-child(3n + 1)::before {
    display: none !important;
  }

  /* how one step works: four nodes a row become two */
  .blk-cx .blk-cx-flow.blk-cx-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .blk-cx-flow.blk-cxp-model > li:nth-child(2n)::before {
    display: block !important;
  }

  .blk-cx-flow.blk-cxp-model > li:nth-child(2n + 1)::before,
  .blk-cxp-big > li:nth-child(2n + 1) > .blk-cx-art::before {
    display: none !important;
  }

  .blk-cuax-reel.tall .blk-cuax-cap b {
    display: none;
  }
}

@media (max-width: 860px) {
  /* a workspace stacks: inputs, then the action, then the result */
  .row:has(> .blk-side),
  .row.doc-workspace {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .row:has(> .blk-side) > .column,
  .row.doc-workspace > .column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .row.blk-play button.blk-decide {
    align-self: stretch;
    width: 100% !important;
  }

  .row.blk-cua {
    flex-direction: column !important;
  }

  .row.blk-cua > .column {
    width: 100% !important;
  }

  /* the masthead: the name and the links, then the claim, then the model */
  .blk-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand . links" "lede lede lede" "model info info";
    column-gap: 8px;
    padding: 16px 0 12px;
  }

  .blk-top .blk-lede {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }

  .blk-meta,
  details.blk-model-info {
    justify-self: start;
  }

  details.blk-model-info > p {
    left: 0;
    right: auto;
    max-width: 100%;
  }

  /* a probability: the name and its number on one line, the bar under them */
  .blk-opt {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 12px !important;
  }

  .blk-opt .track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .blk-cuax-body,
  .blk-cuax-player.tall .blk-cuax-body {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "screen" "nav" "side" !important;
    grid-template-rows: auto !important;
  }

  .blk-cuax-player.tall .blk-cuax-screen {
    justify-self: center;
    width: min(100%, 340px);
  }

  .blk-duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .blk-table th,
  .blk-table td {
    padding: 8px 10px !important;
  }
}

/* a phone: every tab still fits its strip, figures keep their own width and scroll inside their
   card, and the same numbers as a table take over where a figure cannot fit */
@media (max-width: 720px) {
  #blink-navigation > .tab-wrapper > .tab-container > button {
    padding: 0 7px !important;
    font-size: 13px !important;
  }

  #blink-navigation > .tab-wrapper > .tab-container > button.selected::after,
  #blink-cases > .tab-wrapper > .tab-container > button.selected::after {
    left: 7px;
    right: 7px;
  }

  #blink-navigation > .tab-wrapper {
    margin-bottom: 20px !important;
  }

  #blink-explore > .tab-wrapper > .tab-container > button,
  #blink-cases > .tab-wrapper > .tab-container > button {
    padding: 0 6px !important;
  }

  .blk-top h1 {
    font-size: 24px !important;
  }

  .blk-wide {
    display: none;
  }

  .blk-narrow {
    display: block;
    overflow: visible;
  }

  /* a table fits the phone: words wrap, a number has nowhere to break */
  .blk-table th,
  .blk-table td {
    padding: 7px 4px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }

  .blk-table th:first-child,
  .blk-table td:first-child {
    padding-left: 8px !important;
  }

  .blk-figure,
  .blk-group,
  .blk-q,
  .blk-verdict,
  .blk-result .blk-q,
  .blk-result > .blk-verdict {
    padding: 16px;
  }

  .blk-result .blk-answer-foot {
    padding: 12px 16px 0;
  }

  .blk-result .blk-answer-foot details.blk-more {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .blk-result > .blk-warn.blk-mock {
    padding: 9px 16px;
  }

  .blk-headline b {
    font-size: 22px;
  }

  .blk-headline-rows .blk-row strong {
    font-size: 26px;
  }

  .blk-nums {
    font-size: 12px;
  }

  .blk-nums th,
  .blk-nums td {
    padding: 7px 8px !important;
    white-space: normal !important;
  }

  .blk-nums thead th {
    font-size: 12px !important;
  }

  .blk-nums tbody th {
    font-size: 13px !important;
    overflow-wrap: anywhere;
  }

  /* a measurement never breaks across lines */
  .blk-nums tbody td {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* too narrow for the options toggle beside a long name: each question stacks again */
  .blk-play .blk-qrow .styler,
  .blk-play .blk-qhead {
    display: flex !important;
    align-items: stretch !important;
  }

  .blk-play .blk-qrow .styler > .blk-qmore {
    align-self: flex-start;
  }

  /* the state grows to eight lines here and scrolls past them */
  .blk-play .blk-state textarea {
    max-height: 188px !important;
    overflow-y: auto !important;
  }

  .home-intro h2 {
    font-size: 30px !important;
  }

  .blk-home-lede {
    font-size: 16px !important;
  }

  .row.blk-cards {
    margin: 20px 0 28px !important;
  }

  .blk-face {
    min-height: 0;
  }

  /* documents: the packet as a slim page map; the list under it names each document */
  .doc-timeline li {
    height: 8px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--blink) !important;
  }

  .doc-timeline li:nth-child(even) {
    background: var(--blink-light) !important;
  }

  .doc-timeline li.flag {
    background: var(--color-review) !important;
  }

  .doc-timeline b,
  .doc-timeline span {
    display: none !important;
  }

  .doc-result-head {
    padding: 16px 16px 14px;
  }

  .doc-timeline {
    margin: 0 16px 16px !important;
  }

  .doc-list-head,
  .doc-metrics {
    padding-left: 16px;
    padding-right: 16px;
  }

  details.doc-seg > summary {
    padding-left: 16px;
  }

  details.doc-seg > .blk-opts {
    padding: 4px 16px 14px !important;
  }

  .doc-scores {
    margin: 0 16px;
  }

  .doc-result details.doc-method {
    padding: 0 16px;
  }

  #doc-outputs > .form,
  #doc-outputs > .block:not(.gr-accordion):not(#doc-result) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #doc-outputs > .gr-accordion > button.label-wrap {
    padding-left: 16px !important;
  }

  #doc-outputs > .gr-accordion > [data-testid="accordion-content"] {
    padding: 0 16px 16px !important;
  }

  .doc-preview {
    padding: 12px 12px 10px;
  }

  /* computer use */
  .blk-cuax-strip {
    --reel-h: 180px;
    gap: 10px;
  }

  .blk-cuax-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }

  .blk-cuax-stats span {
    padding: 0 12px !important;
  }

  .blk-cuax-stats span:nth-child(odd) {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  .blk-cuax-stats b {
    font-size: 22px !important;
  }

  .blk-cuax-cards,
  .blk-cuax-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .blk-cuax-player {
    padding: 12px !important;
  }

  .blk-cuax-bar {
    flex-wrap: wrap;
  }

  .blk-cuax-name {
    order: 3;
    flex-basis: 100%;
  }

  .blk-cuax-nav {
    flex-direction: column;
    align-items: stretch !important;
  }

  .blk-cuax-views {
    justify-content: center;
  }

  .blk-cuax-views button {
    flex: 1 1 0;
  }

  .blk-cuax-cmp button {
    grid-template-columns: 100px minmax(0, 1fr) auto !important;
  }

  .blk-cx .blk-cx-flow,
  .blk-vsec ol.blk-vpipe {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .blk-cx-flow > li {
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 12px;
  }

  .blk-cx-flow > li > .blk-cx-art {
    grid-row: 1 / span 3;
    height: 76px;
  }

  .blk-cx-flow > li > b {
    margin-top: 0 !important;
  }

  .blk-cx-flow > li + li::before,
  .blk-vpipe li + li::before {
    display: block !important;
    left: 28px !important;
    top: -11px !important;
    width: 2px !important;
    height: 10px !important;
  }

  .blk-cx-shot,
  .blk-cx-grid {
    height: 64px !important;
  }

  /* how one step works: one node a line; the real screens keep the card's full width */
  .blk-cx .blk-cx-flow.blk-cx-four {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .blk-cx-flow.blk-cxp-model > li:nth-child(n + 2)::before {
    display: block !important;
  }

  .blk-cx-flow.blk-cxp-big > li {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
  }

  .blk-cx-flow.blk-cxp-big > li > .blk-cx-art {
    width: 100%;
    min-width: 0;
    height: auto !important;
    margin-top: 12px;
  }

  .blk-cx-flow.blk-cxp-big > li > b {
    margin-top: 8px !important;
  }

  .blk-cxp-big > li + li > .blk-cx-art::before {
    display: none !important;
  }

  .blk-cxp-src ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* api: a table row stacks its name, then one labelled line per column */
  .blk-steps li {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .blk-steps li code {
    grid-column: 1 / -1;
  }

  .blk-apifig table.blk-apitable thead {
    display: none;
  }

  .blk-apifig table.blk-apitable,
  .blk-apifig table.blk-apitable tbody,
  .blk-apifig table.blk-apitable tr {
    display: block;
    width: 100%;
  }

  .blk-apifig table.blk-apitable tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line) !important;
  }

  .blk-apifig table.blk-apitable tr:last-child {
    border-bottom: 0 !important;
  }

  .blk-apifig table.blk-apitable th,
  .blk-apifig table.blk-apitable td {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    min-width: 0 !important;
    padding: 3px 0 !important;
    border: 0 !important;
  }

  .blk-apifig table.blk-apitable tbody th {
    display: block !important;
    padding: 0 0 4px !important;
  }

  .blk-apifig table.blk-apitable td::before {
    content: attr(data-col);
    font-size: 12px;
    color: var(--mid);
  }

  .blk-figure.blk-apifig {
    overflow-x: visible;
  }
}

/* below a desk's width a wide figure's labels would shrink past reading size, so the same numbers
   as text take over there (the phone's own rules are above) */
@media (max-width: 900px) {
  .blk-wide {
    display: none;
  }

  .blk-narrow {
    display: block;
  }
}

/* --- motion ------------------------------------------------------------------------------------ */

@keyframes blk-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* the blink: a lid closes over the dot and opens again, once */
@keyframes blk-lid {
  0%,
  100% {
    transform: scaleY(1);
  }
  45%,
  55% {
    transform: scaleY(0.1);
  }
}

/* the skeleton breathes on a flat tone while the model runs */
@keyframes blk-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes blk-wipe {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes blk-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blk-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blk-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes blk-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* a probability fills in from nothing, once */
@keyframes blk-fill {
  from {
    --sp: 0;
  }
}

/* the picked mark sends one ring out */
@keyframes blk-ping {
  from {
    inset: -2px;
    opacity: 0.95;
  }
  to {
    inset: -16px;
    opacity: 0;
  }
}

/* the reading sweep, top to bottom */
@keyframes blk-scan {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 0;
  }
}

/* the picked number comes on, blinks, and stays */
@keyframes blk-flash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.3;
  }
  80%,
  100% {
    opacity: 1;
  }
}

@keyframes blk-beat {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(36, 71, 245, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(36, 71, 245, 0);
  }
}

@keyframes blk-cx-layer {
  from {
    opacity: 0.12;
    transform: scaleX(0.35);
  }
  to {
    opacity: 0.85;
    transform: none;
  }
}

@keyframes blk-cx-sweep {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* everything lands in its final state at once; nothing repeats */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .blk-cx.arm:not(.on) .blk-cx-flow > li {
    opacity: 1;
  }
}