/* Host layout and semantic palette; the imported sheets own SVG geometry. */
@font-face { font-family: "Overused Grotesk"; src: url("/fonts/OverusedGrotesk-VF.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-VF.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--color-panel, Canvas);
  --panel: var(--color-panel, Canvas);
  --panel-2: var(--color-panel-muted, Canvas);
  --ink: var(--color-fg, CanvasText);
  --ink-2: var(--color-fg-muted, CanvasText);
  --ink-3: var(--color-fg-subtle, GrayText);
  --rule: var(--color-stroke, GrayText);
  --rule-2: var(--color-stroke, GrayText);
  --grid: var(--color-stroke, GrayText);
  --accent: var(--color-accent, Highlight);
  --ok: var(--color-success, Highlight);
  --font-sans: "Overused Grotesk", sans-serif;
  --font-heading: "Space Grotesk", sans-serif;
  --font-mono: ui-monospace, monospace;
}
html, body { width: 100%; min-width: 0; margin: 0; padding: 0; background: var(--panel); }
/* Auto-sizing must not toggle a vertical scrollbar and retrigger SVG layouts. */
html[data-embedded="true"] { overflow-y: hidden; }
body { font-family: var(--font-sans); }
#research-figure { display: flow-root; min-width: 0; padding: 8px; }
#research-figure > .visual, #research-figure > .motion-slot {
  position: static; width: 100%; max-width: 100%; min-width: 0; margin: 0;
  transform: none; border: 0; box-shadow: none;
}
#research-figure .figscroll { max-width: 100%; overflow-x: auto; }
#research-figure .figure-stage { margin-inline: auto; }
.figure-scroll-hint { margin: 8px; color: var(--ink-2); font-size: 13px; }
.figure-scroll-hint[hidden] { display: none; }
#research-figure .motion-slot .fl-root { border: 0; box-shadow: none; }
#research-figure .fl-root { --fl-sans: var(--font-sans); --fl-mono: var(--font-mono); }
#research-figure .copy-ai-fix-wrap { margin: 0; padding: 12px; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus, Highlight); outline-offset: 2px; }
@media (max-width: 600px) {
  #research-figure { padding: 4px; }
  #research-figure .fix-contract-grid { grid-template-columns: minmax(0, 1fr); padding-inline: 8px; }
  #research-figure .fix-column-label-instruction { grid-column: 1; grid-row: 1; }
  #research-figure .fix-contract-steps { grid-column: 1; grid-row: 2; }
  #research-figure .fix-column-label-code { grid-column: 1; grid-row: 3; margin-top: 12px; }
  #research-figure .fix-code-panel { position: static; grid-column: 1; grid-row: 4; }
  #research-figure .fix-contract-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}