{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frame12-styles",
  "title": "FRAME/12 Styles & Tokens",
  "description": "FRAME/12 CSS custom properties, panel grammar, screentone fills, and motion on twos.",
  "files": [
    {
      "path": "styles/frame12.css",
      "content": "/* FRAME/12 Design System — Tokens, Panel Grammar, Screentone, and Motion on Twos.\n   Works standalone without Tailwind. All rules are scoped to .f12-* classes. */\n\n/* @tokens:start */\n/* Generated by @frame12/tokens — generated, do not edit by hand. */\n/* Cross-platform metric-matched fallbacks for Dela Gothic One, Zen Kaku Gothic New, and\n   M PLUS 1 Code across macOS, Windows, Linux (Liberation/DejaVu/Noto), and Android (Roboto)\n   so cold-network .woff2 swaps do not reflow headings, controls, paragraphs, or tables. */\n@font-face {\n  font-family: \"f12DisplayFallback\";\n  src: local(\"Arial\"), local(\"Helvetica Neue\"), local(\"Helvetica\"), local(\"Liberation Sans\"), local(\"Arimo\"), local(\"Nimbus Sans\"), local(\"Nimbus Sans L\"), local(\"Roboto\"), local(\"Noto Sans\"), local(\"FreeSans\");\n  font-weight: 400;\n  size-adjust: 131.74%;\n  ascent-override: 88.05%;\n  descent-override: 21.86%;\n  line-gap-override: 0%;\n}\n\n@font-face {\n  font-family: \"f12DisplayFallbackDejaVu\";\n  src: local(\"DejaVu Sans\"), local(\"Bitstream Vera Sans\"), local(\"Verdana\");\n  font-weight: 400;\n  size-adjust: 120.3%;\n  ascent-override: 96.4%;\n  descent-override: 23.9%;\n  line-gap-override: 0%;\n}\n\n@font-face {\n  font-family: \"f12BodyFallback\";\n  src: local(\"Arial\"), local(\"Helvetica Neue\"), local(\"Helvetica\"), local(\"Liberation Sans\"), local(\"Arimo\"), local(\"Nimbus Sans\"), local(\"Nimbus Sans L\"), local(\"Roboto\"), local(\"Noto Sans\"), local(\"FreeSans\");\n  font-weight: 400;\n  size-adjust: 99.1%;\n  ascent-override: 117.05%;\n  descent-override: 29.06%;\n  line-gap-override: 0%;\n}\n\n@font-face {\n  font-family: \"f12BodyFallbackDejaVu\";\n  src: local(\"DejaVu Sans\"), local(\"Bitstream Vera Sans\"), local(\"Verdana\");\n  font-weight: 400;\n  size-adjust: 90.5%;\n  ascent-override: 128.17%;\n  descent-override: 31.82%;\n  line-gap-override: 0%;\n}\n\n@font-face {\n  font-family: \"f12MonoFallbackConsolas\";\n  src: local(\"Consolas\");\n  font-weight: 400;\n  size-adjust: 90.91%;\n  ascent-override: 110%;\n  descent-override: 25.85%;\n  line-gap-override: 0%;\n}\n\n@font-face {\n  font-family: \"f12MonoFallback\";\n  src: local(\"Menlo\"), local(\"DejaVu Sans Mono\"), local(\"Courier New\"), local(\"Liberation Mono\"), local(\"Cousine\"), local(\"Noto Sans Mono\"), local(\"Droid Sans Mono\");\n  font-weight: 400;\n  size-adjust: 83.19%;\n  ascent-override: 120.21%;\n  descent-override: 28.25%;\n  line-gap-override: 0%;\n}\n\n:where(:root) {\n  --font-f-display: var(--font-dela-gothic-one, \"Dela Gothic One\"), \"f12DisplayFallback\", \"f12DisplayFallbackDejaVu\", \"Arial Black\", \"Helvetica Neue\", sans-serif;\n  --font-f-body: var(--font-zen-kaku-gothic-new, \"Zen Kaku Gothic New\"), \"f12BodyFallback\", \"f12BodyFallbackDejaVu\", \"Hiragino Sans\", \"Helvetica Neue\", \"Arial\", sans-serif;\n  --font-f-mono: var(--font-m-plus-1-code, \"M PLUS 1 Code\"), \"f12MonoFallbackConsolas\", \"f12MonoFallback\", ui-monospace, \"SF Mono\", \"Menlo\", monospace;\n\n  --f-gutter-pair: 12px;\n  --f-gutter-scene: 20px;\n  --f-gutter-change: 32px;\n\n  --f-stroke: 2.5px;\n  --f-pose: 83.33ms;\n  --f-fps: 12;\n\n  --f-shadow-sheet: 0 1px 0 rgba(0, 0, 0, 0.05), 0 18px 40px -26px rgba(0, 0, 0, 0.5);\n  --f-shadow-peg: inset 0 1px 2px rgba(0, 0, 0, 0.25);\n  --f-backdrop: rgba(12, 12, 12, 0.78);\n  --f-diff: #ffffff;\n}\n\n:where(:root),\n:root[data-theme=\"light\"],\n.f12-theme-light {\n  --f-desk: #e2e3e5;\n  --f-sheet: #ffffff;\n  --f-panel: #ffffff;\n  --f-ink: #121212;\n  --f-ink-2: #4b4b4b;\n  --f-rule: #121212;\n  --f-tone: #121212;\n  --f-grid: #e3e3e3;\n  --f-marker: #ffd60a;\n  --f-marker-ink: #121212;\n  --f-hole: #e2e3e5;\n  color-scheme: light;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]):not(.f12-theme-light) {\n    --f-desk: #000000;\n    --f-sheet: #050505;\n    --f-panel: #19191a;\n    --f-ink: #f1f0ea;\n    --f-ink-2: #b9b8b1;\n    --f-rule: #f1f0ea;\n    --f-tone: #f1f0ea;\n    --f-grid: #2c2c2d;\n    --f-marker: #ffd60a;\n    --f-marker-ink: #121212;\n    --f-hole: #000000;\n    color-scheme: dark;\n  }\n}\n\n:root[data-theme=\"dark\"],\n.f12-theme-dark {\n  --f-desk: #000000;\n  --f-sheet: #050505;\n  --f-panel: #19191a;\n  --f-ink: #f1f0ea;\n  --f-ink-2: #b9b8b1;\n  --f-rule: #f1f0ea;\n  --f-tone: #f1f0ea;\n  --f-grid: #2c2c2d;\n  --f-marker: #ffd60a;\n  --f-marker-ink: #121212;\n  --f-hole: #000000;\n  color-scheme: dark;\n}\n/* @tokens:end */\n\n/* ===================================================================== Scoped Base & Reset */\n.f12-dash,\n.f12-sheet,\n.f12-scene,\n.f12-panel,\n.f12-pair,\n.f12-rng,\n.f12-metric,\n.f12-chart,\n.f12-ints,\n.f12-btn,\n.f12-field,\n.f12-input,\n.f12-textarea,\n.f12-check-field,\n.f12-checkbox-control,\n.f12-checkbox-input,\n.f12-radio-group,\n.f12-radio-item,\n.f12-radio-control,\n.f12-radio-input,\n.f12-switch,\n.f12-switch-input,\n.f12-switch-track,\n.f12-switch-thumb,\n.f12-tabs,\n.f12-tabs-list,\n.f12-tabs-trigger,\n.f12-tabs-content,\n.f12-dialog,\n.f12-select,\n.f12-select-content,\n.f12-tooltip-wrap,\n.f12-menu-wrap,\n.f12-menu,\n.f12-table-wrap,\n.f12-balloon,\n.f12-balloon-standalone,\n.f12-tag,\n.f12-badge,\n.f12-ghost-wire,\n.f12-receipt,\n.f12-receipt-list {\n  box-sizing: border-box;\n}\n\n.f12-dash *,\n.f12-dash *::before,\n.f12-dash *::after,\n.f12-sheet *,\n.f12-sheet *::before,\n.f12-sheet *::after,\n.f12-panel *,\n.f12-panel *::before,\n.f12-panel *::after,\n.f12-field *,\n.f12-check-field *,\n.f12-radio-group *,\n.f12-tabs *,\n.f12-dialog *,\n.f12-select *,\n.f12-select-content *,\n.f12-menu *,\n.f12-table-wrap *,\n.f12-ghost-wire *,\n.f12-receipt *,\n.f12-receipt-list * {\n  box-sizing: border-box;\n}\n\n.f12-sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:where(.f12-frame button, .f12-sheet button, .f12-dialog button, button[class*=\"f12-\"]) {\n  font: inherit;\n  color: inherit;\n}\n\n.f12-frame :focus-visible,\n.f12-sheet :focus-visible,\n.f12-dialog :focus-visible,\n[class*=\"f12-\"]:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n\n/* ===================================================================== Sheet & Pegs */\n.f12-dash {\n  container-type: inline-size;\n  position: relative;\n}\n.f12-dash :where(h2, h3, p, ul) {\n  margin: 0;\n}\n.f12-dash :where(ul) {\n  list-style: none;\n  padding: 0;\n}\n\n.f12-frame {\n  background: var(--f-desk);\n  color: var(--f-ink);\n  font-family: var(--font-f-body);\n  padding: 20px;\n  border-radius: 4px;\n}\n\n.f12-sheet {\n  position: relative;\n  background: var(--f-sheet);\n  color: var(--f-ink);\n  font-family: var(--font-f-body);\n  padding: 44px 28px 28px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-change); /* 32px = scene change */\n  box-shadow: var(--f-shadow-sheet);\n  counter-reset: f12-cut;\n}\n\n.f12-pegs {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 26px;\n  align-items: center;\n}\n.f12-peg {\n  display: block;\n  background: var(--f-hole);\n  border: 1px solid var(--f-grid);\n  box-shadow: var(--f-shadow-peg);\n}\n.f12-peg.round {\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n}\n.f12-peg.slot {\n  width: 26px;\n  height: 8px;\n  border-radius: 4px;\n}\n\n.f12-hd {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px 24px;\n  align-items: flex-end;\n  justify-content: space-between;\n}\n/* Let the text column shrink below its longest unbreakable token so long titles/IDs wrap (or,\n   failing that, overflow inside the sheet) instead of widening the page on narrow screens. */\n.f12-hd > .f12-hd-text {\n  min-width: 0;\n}\n.f12-eyebrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n/* Eyebrow chips (file paths, IDs) may be one unbreakable token: let them shrink and break\n   rather than push a narrow sheet wider than the viewport. */\n.f12-eyebrow > :is(.f12-tag, .f12-badge) {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n.f12-title {\n  font-family: var(--font-f-display);\n  font-weight: 400;\n  font-size: clamp(30px, 5.2cqi, 46px);\n  line-height: 1.02;\n  margin-top: 10px;\n  letter-spacing: 0.005em;\n  text-wrap: balance;\n}\n/* Programmatic focus target only (e.g. after a breadcrumb steps up a level); not operable, so\n   no ring — the heading itself is the visible landmark. */\n.f12-title[tabindex='-1']:focus {\n  outline: none;\n}\n.f12-sub {\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  color: var(--f-ink-2);\n  margin-top: 8px;\n  letter-spacing: 0.04em;\n}\n\n/* ===================================================================== Scene & Gutter Grammar\n   12px = pair, 20px = same scene, 32px = scene change */\n.f12-scene {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n  gap: var(--f-gutter-scene);\n  min-width: 0;\n}\n.f12-scene.f12-scene-split {\n  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n}\n.f12-scene.f12-scene-stack {\n  grid-template-columns: minmax(0, 1fr);\n}\n.f12-scene.f12-scene-equal {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.f12-scene.f12-scene-three {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.f12-scene.f12-scene-areas {\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-areas: none;\n}\n.f12-scene.f12-scene-areas > [data-area],\n.f12-scene-area {\n  min-width: 0;\n  grid-area: auto;\n}\n.f12-scene-area {\n  display: flex;\n  flex-direction: column;\n}\n.f12-scene-area > .f12-panel {\n  flex: 1;\n}\n@media (min-width: 860px) {\n  .f12-scene.f12-scene-areas:not([data-scene-bp]) {\n    grid-template-columns: repeat(var(--f12-scene-cols, 12), minmax(0, 1fr));\n    grid-template-areas: var(--f12-scene-areas);\n  }\n  .f12-scene.f12-scene-areas:not([data-scene-bp]) > [data-area] {\n    grid-area: var(--f12-area);\n  }\n}\n.f12-scene.f12-scene-pair {\n  gap: var(--f-gutter-pair);\n}\n.f12-scene.f12-scene-scene {\n  gap: var(--f-gutter-scene);\n}\n.f12-scene.f12-scene-change {\n  gap: var(--f-gutter-change);\n}\n\n.f12-pair {\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-pair);\n  min-width: 0;\n}\n.f12-pair > .f12-panel {\n  flex: 1;\n}\n\n/* ===================================================================== Panel */\n.f12-panel {\n  position: relative;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  color: var(--f-ink);\n  font-family: var(--font-f-body);\n}\n.f12-panel-frame {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n}\n.f12-panel-frame polygon {\n  fill: var(--f-panel);\n  stroke: var(--f-rule);\n  stroke-width: var(--f-stroke);\n  stroke-linejoin: miter;\n}\n.f12-panel-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 24px 22px 22px;\n}\n.f12-panel.f12-slant-bottom > .f12-panel-body {\n  padding-bottom: 36px;\n}\n.f12-panel.f12-slant-top > .f12-panel-body {\n  padding-top: 36px;\n}\n.f12-cut {\n  position: absolute;\n  top: -8px;\n  left: 16px;\n  z-index: 1;\n  padding: 0 6px;\n  line-height: 16px;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.12em;\n  background: var(--f-sheet);\n  color: var(--f-ink);\n}\n.f12-cut[data-autocut] {\n  display: var(--f12-autocut-display, none);\n  counter-increment: f12-cut;\n}\n.f12-cut[data-autocut]::before {\n  content: \"C-\" counter(f12-cut, decimal-leading-zero);\n}\n.f12-panel.f12-slant-top > .f12-cut {\n  top: 8px;\n}\n.f12-panel.f12-panel-quiet {\n  background: var(--f-panel);\n  border: 1px solid var(--f-rule);\n}\n.f12-panel.f12-panel-quiet:not(.f12-rect) {\n  background: none;\n  border: 0;\n}\n.f12-panel.f12-panel-quiet > .f12-panel-frame > polygon {\n  stroke-width: 1;\n}\n.f12-panel.f12-panel-quiet > .f12-panel-body {\n  padding: 16px 18px;\n}\n.f12-panel.f12-panel-quiet.f12-slant-bottom > .f12-panel-body {\n  padding-bottom: 32px;\n}\n.f12-panel.f12-panel-quiet.f12-slant-top > .f12-panel-body {\n  padding-top: 32px;\n}\n\n/* ===================================================================== Tag & Badge */\n.f12-tag {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 100%;\n  overflow-wrap: break-word;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-marker-ink);\n  background: var(--f-marker);\n  padding: 1px 6px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n.f12-tag-stamp {\n  font-family: var(--font-f-display);\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.25;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  padding: 2px 8px;\n  border: 2px solid var(--f-rule);\n  background: var(--f-panel);\n  color: var(--f-ink);\n  transform: rotate(-3deg);\n  transform-origin: center;\n}\n\n.f12-badge {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 100%;\n  overflow-wrap: break-word;\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  padding: 2px 7px;\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n  border: 2px solid var(--f-rule);\n}\n.f12-badge-t {\n  position: relative;\n  z-index: 1;\n}\n.f12-tag svg,\n.f12-badge-t svg {\n  display: inline-block;\n  vertical-align: middle;\n  margin-inline-end: 4px;\n}\n.f12-status-glyph {\n  margin-inline-end: 4px;\n  font-weight: 700;\n  letter-spacing: 0;\n  text-transform: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.f12-status-neutral {\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 1px solid var(--f-rule);\n}\n.f12-status-info {\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 1.5px solid var(--f-rule);\n}\n.f12-status-success {\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  border-inline-start: 5px solid var(--f-rule);\n  font-weight: 700;\n}\n.f12-status-warning {\n  background-color: var(--f-panel);\n  background-image: repeating-linear-gradient(\n    -45deg,\n    transparent 0 5px,\n    var(--f-grid) 5px 6.5px\n  );\n  color: var(--f-ink);\n  border: 2px dashed var(--f-rule);\n  font-weight: 700;\n}\n.f12-status-warning .f12-status-glyph {\n  color: var(--f-ink);\n}\n.f12-status-danger {\n  background: var(--f-ink);\n  color: var(--f-panel);\n  border: 2px solid var(--f-rule);\n  box-shadow: inset 0 0 0 1.5px var(--f-panel);\n  font-weight: 700;\n}\n.f12-status-danger .f12-status-glyph {\n  color: var(--f-panel);\n}\n.f12-tag-stamp.f12-status-neutral,\n.f12-tag-stamp.f12-status-info {\n  border-width: 2px;\n}\n.f12-tag-stamp.f12-status-success,\n.f12-tag-stamp.f12-status-warning,\n.f12-tag-stamp.f12-status-danger {\n  font-weight: 400;\n}\n\n/* ===================================================================== GhostWire & Receipt */\n.f12-ghost-wire {\n  display: grid;\n  grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) minmax(0, max-content);\n  align-items: center;\n  gap: var(--f-gutter-pair);\n  min-width: 0;\n  max-width: 100%;\n  color: var(--f-ink);\n  font-family: var(--font-f-mono);\n}\n.f12-ghost-wire.f12-ghost-wire-vertical,\n.f12-ghost-wire[data-orientation=\"vertical\"] {\n  grid-template-columns: minmax(0, 1fr);\n  justify-items: start;\n}\n.f12-ghost-wire-endpoint {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  max-width: 100%;\n  padding: 4px 10px;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  line-height: 1.35;\n  color: var(--f-ink);\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-ghost-wire-from {\n  border: 2px solid var(--f-rule);\n  background: var(--f-panel);\n  font-weight: 700;\n}\n.f12-ghost-wire-to {\n  border: 2px dashed var(--f-rule);\n  background: var(--f-sheet);\n  font-weight: 500;\n}\n.f12-ghost-wire-connector {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  min-width: 24px;\n  width: 100%;\n}\n.f12-ghost-wire.f12-ghost-wire-vertical .f12-ghost-wire-connector,\n.f12-ghost-wire[data-orientation=\"vertical\"] .f12-ghost-wire-connector {\n  flex-direction: row;\n  justify-content: flex-start;\n  min-width: 0;\n  width: auto;\n  padding-inline-start: 14px;\n}\n.f12-ghost-wire-svg {\n  display: block;\n  width: 100%;\n  height: 12px;\n  overflow: visible;\n  flex-shrink: 0;\n}\n.f12-ghost-wire.f12-ghost-wire-vertical .f12-ghost-wire-svg,\n.f12-ghost-wire[data-orientation=\"vertical\"] .f12-ghost-wire-svg {\n  width: 12px;\n  height: 28px;\n}\n.f12-ghost-wire-line {\n  stroke: var(--f-rule);\n  stroke-width: 2;\n  vector-effect: non-scaling-stroke;\n  fill: none;\n}\n.f12-ghost-wire-reveal {\n  stroke: #fff;\n  stroke-width: 12;\n  fill: none;\n}\n.f12-ghost-wire-label {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  line-height: 1.3;\n  color: var(--f-ink-2);\n  text-align: center;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-ghost-wire.f12-ghost-wire-vertical .f12-ghost-wire-label,\n.f12-ghost-wire[data-orientation=\"vertical\"] .f12-ghost-wire-label {\n  text-align: start;\n}\n\n.f12-receipt-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--f-gutter-pair);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  max-width: 100%;\n}\n.f12-receipt-item {\n  min-width: 0;\n  max-width: 100%;\n  display: inline-flex;\n}\n.f12-receipt {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 6px;\n  min-width: 0;\n  max-width: 100%;\n  padding: 3px 8px;\n  border: 1.5px solid var(--f-rule);\n  background: var(--f-panel);\n  color: var(--f-ink);\n  font-family: var(--font-f-body);\n  font-size: 12px;\n  line-height: 1.4;\n}\n.f12-receipt-origin {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--f-ink);\n}\n.f12-receipt-origin .f12-status-glyph {\n  margin-inline-end: 0;\n}\n.f12-receipt-value {\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--f-ink);\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-receipt-code {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  color: inherit;\n  background: none;\n  padding: 0;\n}\n.f12-receipt-link {\n  color: var(--f-ink);\n  text-decoration: underline;\n  text-decoration-thickness: 1.5px;\n  text-underline-offset: 2px;\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-receipt-link:hover {\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n}\n.f12-receipt-title {\n  font-family: var(--font-f-body);\n  font-size: 12px;\n  color: var(--f-ink);\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-receipt-date {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-ink-2);\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-burst {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 150%;\n  height: auto;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  pointer-events: none;\n}\n.f12-burst line {\n  stroke: var(--f-ink);\n  stroke-width: 2;\n  stroke-linecap: square;\n}\n\n/* ===================================================================== SegmentedControl (RangeTabs) */\n.f12-rng {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  isolation: isolate;\n  border: var(--f-stroke) solid var(--f-rule);\n  background: var(--f-panel);\n}\n.f12-rng-ind {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  background: var(--f-diff);\n  mix-blend-mode: difference;\n  pointer-events: none;\n}\n.f12-rng-btn {\n  cursor: pointer;\n  background: none;\n  border: 0;\n  display: grid;\n  justify-items: center;\n  padding: 6px 16px 5px;\n  color: var(--f-ink);\n  min-width: 64px;\n}\n.f12-rng-btn + .f12-rng-btn {\n  border-left: 2px solid var(--f-rule);\n}\n.f12-rng:not(:has(.f12-rng-ind)) .f12-rng-btn[aria-pressed=\"true\"] {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-rng-n {\n  font-family: var(--font-f-display);\n  font-size: 18px;\n  line-height: 1;\n}\n.f12-rng-u {\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n.f12-rng-btn:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: -6px;\n}\n.f12-rng:not(:has(.f12-rng-ind)) .f12-rng-btn[aria-pressed=\"true\"]:focus-visible {\n  outline-color: currentColor;\n}\n\n/* ===================================================================== Button & Input */\n.f12-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--font-f-mono);\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  border: var(--f-stroke) solid var(--f-rule);\n  background: var(--f-panel);\n  color: var(--f-ink);\n  padding: 8px 16px;\n  font-size: 12px;\n  line-height: 1.2;\n}\n.f12-btn-sm {\n  padding: 5px 10px;\n  font-size: 11px;\n}\n.f12-btn-md {\n  padding: 8px 16px;\n  font-size: 12px;\n}\n.f12-btn-lg {\n  padding: 12px 22px;\n  font-size: 13px;\n}\n.f12-btn-primary {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-btn-secondary {\n  background: var(--f-panel);\n  color: var(--f-ink);\n}\n.f12-btn-marker {\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n}\n.f12-btn:hover:not(:disabled) {\n  box-shadow: 3px 3px 0 var(--f-rule);\n}\n.f12-btn:active:not(:disabled) {\n  box-shadow: none;\n}\n.f12-btn:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-btn:disabled {\n  cursor: not-allowed;\n  border-style: dashed;\n  color: var(--f-ink-2);\n  background: var(--f-panel);\n}\n\n.f12-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--font-f-body);\n  color: var(--f-ink);\n}\n.f12-label {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n.f12-field-req {\n  color: var(--f-ink);\n  font-weight: 700;\n}\n.f12-input {\n  width: 100%;\n  padding: 9px 12px;\n  font-family: var(--font-f-body);\n  font-size: 14px;\n  line-height: 1.4;\n  color: var(--f-ink);\n  background: var(--f-panel);\n  border: var(--f-stroke) solid var(--f-rule);\n  border-radius: 0;\n}\n.f12-input::placeholder {\n  color: var(--f-ink-2);\n}\n.f12-input:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-input:disabled {\n  cursor: not-allowed;\n  border-style: dashed;\n  color: var(--f-ink-2);\n  background: var(--f-panel);\n}\n.f12-field.f12-field-compact {\n  gap: 4px;\n}\n.f12-input.f12-input-compact {\n  padding: 6px 10px;\n  font-size: 13px;\n  border-width: 1.5px;\n}\n.f12-textarea {\n  width: 100%;\n  min-height: 84px;\n  padding: 9px 12px;\n  font-family: var(--font-f-body);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--f-ink);\n  background: var(--f-panel);\n  border: var(--f-stroke) solid var(--f-rule);\n  border-radius: 0;\n  resize: vertical;\n}\n.f12-textarea::placeholder {\n  color: var(--f-ink-2);\n}\n.f12-textarea:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-textarea:disabled {\n  cursor: not-allowed;\n  border-style: dashed;\n  color: var(--f-ink-2);\n  background: var(--f-panel);\n}\n.f12-textarea.f12-textarea-compact {\n  min-height: 68px;\n  padding: 6px 10px;\n  font-size: 13px;\n  line-height: 1.4;\n  border-width: 1.5px;\n}\n.f12-hint {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-ink-2);\n  margin: 0;\n}\n.f12-error {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-ink);\n  margin: 0;\n}\n.f12-error-flag {\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n  padding: 0 4px;\n  font-weight: 700;\n}\n\n/* ===================================================================== Checkbox, RadioGroup, Switch & Tabs */\n.f12-check-field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--font-f-body);\n  color: var(--f-ink);\n}\n.f12-check-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.f12-check-label {\n  font-family: var(--font-f-body);\n  font-size: 14px;\n  line-height: 1.4;\n  color: var(--f-ink);\n  cursor: pointer;\n  user-select: none;\n}\n.f12-check-field-compact .f12-check-label,\n.f12-field-compact .f12-check-label,\n.f12-radio-item-compact .f12-check-label {\n  font-size: 13px;\n}\n[data-disabled] .f12-check-label {\n  color: var(--f-ink-2);\n  cursor: not-allowed;\n}\n.f12-check-meta {\n  padding-inline-start: 34px;\n}\n\n.f12-checkbox-control,\n.f12-radio-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex: none;\n}\n.f12-checkbox-input,\n.f12-radio-input {\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0;\n  width: 24px;\n  height: 24px;\n  background: var(--f-panel);\n  border: var(--f-stroke) solid var(--f-rule);\n  cursor: pointer;\n  display: block;\n}\n.f12-checkbox-input {\n  border-radius: 0;\n}\n.f12-radio-input {\n  border-radius: 50%;\n}\n.f12-checkbox-input.f12-checkbox-compact,\n.f12-radio-input.f12-radio-compact {\n  border-width: 1.5px;\n}\n.f12-checkbox-input:focus-visible,\n.f12-radio-input:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-checkbox-input:disabled,\n.f12-radio-input:disabled {\n  cursor: not-allowed;\n  border-style: dashed;\n  opacity: 0.6;\n}\n.f12-checkbox-input:checked,\n.f12-checkbox-input:indeterminate,\n.f12-checkbox-input.f12-checkbox-indeterminate,\n.f12-checkbox-input[data-indeterminate=\"true\"] {\n  background: var(--f-ink);\n}\n.f12-checkbox-mark,\n.f12-radio-mark {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n  margin: auto;\n  pointer-events: none;\n  opacity: 0;\n}\n.f12-checkbox-mark {\n  color: var(--f-panel);\n}\n.f12-radio-mark {\n  color: var(--f-ink);\n}\n.f12-checkbox-input:checked + .f12-checkbox-mark,\n.f12-checkbox-input:indeterminate + .f12-checkbox-mark,\n.f12-checkbox-input.f12-checkbox-indeterminate + .f12-checkbox-mark,\n.f12-checkbox-input[data-indeterminate=\"true\"] + .f12-checkbox-mark,\n.f12-radio-input:checked + .f12-radio-mark {\n  opacity: 1;\n}\n\n.f12-radio-group {\n  border: 0;\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-family: var(--font-f-body);\n  color: var(--f-ink);\n}\n.f12-radio-group.f12-radio-group-compact {\n  gap: 6px;\n}\n.f12-radio-legend {\n  padding: 0;\n  margin-bottom: 6px;\n}\n.f12-radio-items {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.f12-radio-group.f12-radio-group-compact .f12-radio-items {\n  gap: 6px;\n}\n.f12-radio-group.f12-radio-group-horizontal .f12-radio-items {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px 18px;\n}\n.f12-radio-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.f12-switch {\n  position: relative;\n  display: inline-grid;\n  flex: none;\n  min-width: 54px;\n  width: max-content;\n  height: 28px;\n}\n.f12-switch.f12-switch-compact {\n  min-width: 48px;\n  height: 24px;\n}\n.f12-switch-input {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  -webkit-appearance: none;\n  appearance: none;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--f-panel);\n  border: var(--f-stroke) solid var(--f-rule);\n  border-radius: 0;\n  cursor: pointer;\n  display: block;\n}\n.f12-switch-input.f12-switch-input-compact {\n  border-width: 1.5px;\n}\n.f12-switch-input:checked {\n  background: var(--f-ink);\n}\n.f12-switch-input:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-switch-input:disabled {\n  cursor: not-allowed;\n  border-style: dashed;\n  opacity: 0.6;\n}\n.f12-switch-track {\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  display: inline-grid;\n  align-items: center;\n  overflow: hidden;\n  background: var(--f-panel);\n  border: var(--f-stroke) solid var(--f-rule);\n  box-sizing: border-box;\n}\n.f12-switch-input.f12-switch-input-compact + .f12-switch-track {\n  border-width: 1.5px;\n}\n.f12-switch-input:checked + .f12-switch-track {\n  background: var(--f-ink);\n}\n.f12-switch-input:disabled + .f12-switch-track {\n  border-style: dashed;\n  opacity: 0.6;\n}\n.f12-switch-glyph {\n  grid-area: 1 / 1;\n  font-family: var(--font-f-mono);\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  line-height: 1;\n  text-transform: uppercase;\n  white-space: nowrap;\n  user-select: none;\n}\n.f12-switch-glyph-on {\n  justify-self: start;\n  padding-inline-start: 4px;\n  padding-inline-end: 22px;\n  color: var(--f-panel);\n  opacity: 0;\n}\n.f12-switch-glyph-off {\n  justify-self: end;\n  padding-inline-start: 22px;\n  padding-inline-end: 4px;\n  color: var(--f-ink-2);\n  opacity: 1;\n}\n.f12-switch.f12-switch-compact .f12-switch-glyph-on {\n  padding-inline-start: 4px;\n  padding-inline-end: 20px;\n}\n.f12-switch.f12-switch-compact .f12-switch-glyph-off {\n  padding-inline-start: 20px;\n  padding-inline-end: 4px;\n}\n.f12-switch-input:checked + .f12-switch-track .f12-switch-glyph-on {\n  opacity: 1;\n}\n.f12-switch-input:checked + .f12-switch-track .f12-switch-glyph-off {\n  opacity: 0;\n}\n.f12-switch-thumb {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  width: 16px;\n  inset-inline-start: 2px;\n  background: var(--f-ink);\n  border: 1.5px solid var(--f-rule);\n}\n.f12-switch.f12-switch-compact .f12-switch-thumb {\n  top: 2px;\n  bottom: 2px;\n  width: 14px;\n  inset-inline-start: 2px;\n}\n.f12-switch-input:checked + .f12-switch-track .f12-switch-thumb {\n  inset-inline-start: calc(100% - 18px);\n  background: var(--f-panel);\n  border-color: var(--f-panel);\n}\n.f12-switch.f12-switch-compact .f12-switch-input:checked + .f12-switch-track .f12-switch-thumb {\n  inset-inline-start: calc(100% - 16px);\n}\n\n.f12-tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n  font-family: var(--font-f-body);\n  color: var(--f-ink);\n}\n.f12-tabs.f12-tabs-compact {\n  gap: 10px;\n}\n.f12-tabs.f12-tabs-vertical {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 18px;\n}\n.f12-tabs-list {\n  display: flex;\n  flex-wrap: wrap;\n  border: var(--f-stroke) solid var(--f-rule);\n  background: var(--f-panel);\n  width: fit-content;\n  max-width: 100%;\n  /* Breathing room when a block scrolls its section tabs into view (breadcrumb navigation). */\n  scroll-margin-block-start: var(--f-gutter-scene);\n}\n.f12-tabs-list.f12-tabs-list-compact {\n  border-width: 1.5px;\n}\n.f12-tabs.f12-tabs-vertical > .f12-tabs-list {\n  flex-direction: column;\n  flex: none;\n}\n.f12-tabs-trigger {\n  flex: 1 1 auto;\n  cursor: pointer;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 0;\n  padding: 8px 16px;\n  min-height: 36px;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  line-height: 1.2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n.f12-tabs-trigger + .f12-tabs-trigger {\n  border-inline-start: 2px solid var(--f-rule);\n}\n.f12-tabs.f12-tabs-vertical > .f12-tabs-list .f12-tabs-trigger + .f12-tabs-trigger {\n  border-inline-start: 0;\n  border-top: 2px solid var(--f-rule);\n}\n.f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger {\n  padding: 5px 12px;\n  min-height: 28px;\n  font-size: 11px;\n}\n.f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n  border-inline-start-width: 1.5px;\n}\n.f12-tabs.f12-tabs-vertical > .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n  border-inline-start-width: 0;\n  border-top-width: 1.5px;\n}\n.f12-tabs-trigger[aria-selected=\"true\"] {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-tabs-trigger:disabled {\n  cursor: not-allowed;\n  color: var(--f-ink-2);\n  opacity: 0.55;\n}\n.f12-tabs-trigger:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: -5px;\n}\n.f12-tabs-trigger[aria-selected=\"true\"]:focus-visible {\n  outline-color: var(--f-panel);\n}\n.f12-tabs-content {\n  min-width: 0;\n  flex: 1;\n  width: 100%;\n  --f12-autocut-display: none;\n}\n.f12-tabs-content[hidden] {\n  display: none;\n}\n.f12-tabs-content .f12-cut[data-autocut] {\n  display: none;\n  counter-increment: none;\n}\n.f12-tabs-content:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n\n/* ===================================================================== Alert, Notice, Toast, Skeleton, EmptyState, Breadcrumb & Pagination */\n.f12-alert {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--f-gutter-pair);\n  padding: 14px 16px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  font-family: var(--font-f-body);\n  min-width: 0;\n}\n.f12-alert-neutral {\n  border: 1.5px solid var(--f-rule);\n}\n.f12-alert-info {\n  border: 2px solid var(--f-rule);\n}\n.f12-alert-success {\n  border: 2px solid var(--f-rule);\n  border-inline-start: 6px solid var(--f-rule);\n}\n.f12-alert-warning {\n  border: 2px dashed var(--f-rule);\n  background-color: var(--f-panel);\n  background-image: repeating-linear-gradient(\n    -45deg,\n    transparent 0 8px,\n    var(--f-grid) 8px 9.5px\n  );\n}\n.f12-alert-danger {\n  border: 3px double var(--f-rule);\n  border-inline-start: 6px solid var(--f-rule);\n}\n.f12-alert-glyph {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  margin: 0;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--f-ink);\n  background: var(--f-panel);\n  border: 1.5px solid var(--f-rule);\n}\n.f12-alert-success .f12-alert-glyph {\n  border-inline-start-width: 4px;\n}\n.f12-alert-warning .f12-alert-glyph {\n  border-style: dashed;\n}\n.f12-alert-danger .f12-alert-glyph {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-alert-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.f12-alert-title {\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  line-height: 1.3;\n  color: var(--f-ink);\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-alert-description {\n  font-family: var(--font-f-body);\n  font-size: 13px;\n  line-height: 1.45;\n  color: var(--f-ink);\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-alert-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  margin-top: 6px;\n}\n.f12-alert-dismiss {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 2px 6px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 1.5px solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: pointer;\n}\n.f12-alert-dismiss:hover {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-alert-dismiss:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-alert.f12-alert-compact {\n  padding: 10px 12px;\n}\n.f12-alert.f12-alert-compact .f12-alert-title {\n  font-size: 11px;\n}\n.f12-alert.f12-alert-compact .f12-alert-description {\n  font-size: 12px;\n}\n.f12-alert.f12-alert-compact .f12-alert-dismiss {\n  min-width: 24px;\n  min-height: 24px;\n}\n\n.f12-toast-viewport {\n  position: fixed;\n  inset-inline-end: 20px;\n  bottom: 20px;\n  z-index: 60;\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-pair);\n  width: min(380px, calc(100vw - 24px));\n  max-width: 100%;\n  max-height: calc(100vh - 32px);\n  max-height: calc(100dvh - 32px);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0 6px 6px 0;\n  box-sizing: border-box;\n  pointer-events: auto;\n  font-family: var(--font-f-body);\n}\n.f12-toast-viewport:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-toast-viewport:empty {\n  display: none;\n  pointer-events: none;\n}\n.f12-toast-viewport.f12-toast-viewport-compact {\n  width: min(340px, calc(100vw - 24px));\n}\n@media (max-width: 480px) {\n  .f12-toast-viewport,\n  .f12-toast-viewport.f12-toast-viewport-compact {\n    inset-inline-end: 12px;\n    bottom: 12px;\n    width: calc(100vw - 24px);\n    max-height: calc(100vh - 24px);\n    max-height: calc(100dvh - 24px);\n  }\n}\n.f12-toast {\n  pointer-events: auto;\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  align-items: flex-start;\n  gap: var(--f-gutter-pair);\n  padding: 12px 14px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  box-shadow: 4px 4px 0 var(--f-rule);\n  min-width: 0;\n}\n.f12-toast-neutral {\n  border: 1.5px solid var(--f-rule);\n}\n.f12-toast-info {\n  border: 2px solid var(--f-rule);\n}\n.f12-toast-success {\n  border: 2px solid var(--f-rule);\n  border-inline-start: 6px solid var(--f-rule);\n}\n.f12-toast-warning {\n  border: 2px dashed var(--f-rule);\n  background-color: var(--f-panel);\n  background-image: repeating-linear-gradient(\n    -45deg,\n    transparent 0 8px,\n    var(--f-grid) 8px 9.5px\n  );\n}\n.f12-toast-danger {\n  border: 3px double var(--f-rule);\n  border-inline-start: 6px solid var(--f-rule);\n}\n.f12-toast-glyph {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  margin: 0;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--f-ink);\n  background: var(--f-panel);\n  border: 1.5px solid var(--f-rule);\n}\n.f12-toast-success .f12-toast-glyph {\n  border-inline-start-width: 4px;\n}\n.f12-toast-warning .f12-toast-glyph {\n  border-style: dashed;\n}\n.f12-toast-danger .f12-toast-glyph {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-toast-body {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.f12-toast-title {\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  line-height: 1.3;\n  color: var(--f-ink);\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-toast-description {\n  font-family: var(--font-f-body);\n  font-size: 13px;\n  line-height: 1.4;\n  color: var(--f-ink);\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-toast-controls {\n  flex: none;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.f12-toast-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 28px;\n  min-width: 28px;\n  padding: 4px 10px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 1.5px solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  line-height: 1.1;\n  cursor: pointer;\n}\n.f12-toast-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 2px 6px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 1.5px solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n  cursor: pointer;\n}\n.f12-toast-action:hover,\n.f12-toast-close:hover {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-toast-action:focus-visible,\n.f12-toast-close:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-toast-queue-badge {\n  pointer-events: auto;\n  flex-shrink: 0;\n  align-self: flex-end;\n  padding: 3px 8px;\n  background: var(--f-ink);\n  color: var(--f-panel);\n  border: 1.5px solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n.f12-toast.f12-toast-compact {\n  padding: 9px 12px;\n  box-shadow: 3px 3px 0 var(--f-rule);\n}\n.f12-toast.f12-toast-compact .f12-toast-title {\n  font-size: 11px;\n}\n.f12-toast.f12-toast-compact .f12-toast-description {\n  font-size: 12px;\n}\n.f12-toast.f12-toast-compact .f12-toast-action,\n.f12-toast.f12-toast-compact .f12-toast-close {\n  min-height: 24px;\n  min-width: 24px;\n}\n\n.f12-skeleton {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: 20px;\n  background-color: var(--f-panel);\n  background-image: radial-gradient(circle, var(--f-tone) 1.15px, transparent 1.45px);\n  background-size: 6px 6px;\n  border: 1.5px dashed var(--f-rule);\n  border-radius: 0;\n}\n.f12-skeleton-line {\n  height: 14px;\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--f-grid);\n}\n.f12-skeleton-circle {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  flex: none;\n}\n.f12-skeleton-metric {\n  height: 44px;\n  max-width: 180px;\n  border: 2px solid var(--f-rule);\n}\n.f12-skeleton-panel {\n  min-height: 120px;\n  border: 2px dashed var(--f-rule);\n}\n.f12-skeleton.f12-skeleton-compact {\n  height: 16px;\n}\n.f12-skeleton-line.f12-skeleton-compact {\n  height: 12px;\n}\n.f12-skeleton-circle.f12-skeleton-compact {\n  width: 28px;\n  height: 28px;\n}\n.f12-skeleton-metric.f12-skeleton-compact {\n  height: 32px;\n}\n.f12-skeleton-panel.f12-skeleton-compact {\n  min-height: 88px;\n}\n.f12-skeleton-text {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n.f12-skeleton-text.f12-skeleton-text-compact {\n  gap: 6px;\n}\n\n.f12-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 10px;\n  padding: 32px 20px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px dashed var(--f-rule);\n  font-family: var(--font-f-body);\n  min-width: 0;\n}\n.f12-empty.f12-empty-quiet {\n  border: 1px solid var(--f-rule);\n  padding: 24px 18px;\n}\n.f12-empty.f12-empty-compact {\n  padding: 20px 16px;\n  gap: 8px;\n}\n.f12-empty-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 10px;\n  font-family: var(--font-f-mono);\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  color: var(--f-ink);\n  background-color: var(--f-panel);\n  background-image: radial-gradient(circle, var(--f-tone) 1px, transparent 1.3px);\n  background-size: 5px 5px;\n  border: 1.5px solid var(--f-rule);\n}\n.f12-empty-code {\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n.f12-empty-title {\n  font-family: var(--font-f-display);\n  font-weight: 400;\n  font-size: 22px;\n  line-height: 1.15;\n  letter-spacing: 0.02em;\n  color: var(--f-ink);\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-empty.f12-empty-compact .f12-empty-title {\n  font-size: 18px;\n}\n.f12-empty-description {\n  font-family: var(--font-f-body);\n  font-size: 13px;\n  line-height: 1.45;\n  color: var(--f-ink-2);\n  max-width: 23.2em;\n  margin: 0;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-empty.f12-empty-compact .f12-empty-description {\n  font-size: 12px;\n}\n.f12-empty-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--f-gutter-pair);\n  margin-top: 6px;\n}\n\n.f12-breadcrumb {\n  display: block;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n  min-width: 0;\n}\n.f12-breadcrumb-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 4px 8px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.f12-breadcrumb-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.f12-breadcrumb-link {\n  display: inline-flex;\n  align-items: center;\n  min-height: 24px;\n  padding: 2px 4px;\n  color: var(--f-ink-2);\n  /* Non-colour cue: actionable crumbs and plain ancestor text share --f-ink-2 (WCAG 1.4.1). */\n  text-decoration: underline dotted 1px;\n  text-underline-offset: 3px;\n  cursor: pointer;\n}\n.f12-breadcrumb-link:hover {\n  color: var(--f-ink);\n  text-decoration-style: solid;\n}\n/* <BreadcrumbButton>: in-page action crumb rendered with link chrome. */\nbutton.f12-breadcrumb-link {\n  appearance: none;\n  margin: 0;\n  border: 0;\n  border-radius: 0;\n  background: none;\n  font: inherit;\n  letter-spacing: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n}\n.f12-breadcrumb-link:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n  color: var(--f-ink);\n}\n.f12-breadcrumb-page {\n  display: inline-flex;\n  align-items: center;\n  min-height: 24px;\n  padding: 2px 6px;\n  font-weight: 700;\n  color: var(--f-ink);\n  border-bottom: 2px solid var(--f-rule);\n}\n.f12-breadcrumb-page:not([aria-current]) {\n  font-weight: 500;\n  color: var(--f-ink-2);\n  border-bottom: 0;\n}\n.f12-breadcrumb-separator {\n  display: inline-flex;\n  align-items: center;\n  color: var(--f-ink-2);\n  user-select: none;\n}\n.f12-breadcrumb-ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  min-height: 24px;\n  padding: 0 4px;\n  color: var(--f-ink-2);\n  border: 1px dashed var(--f-rule);\n}\n.f12-breadcrumb.f12-breadcrumb-compact {\n  font-size: 10px;\n}\n.f12-breadcrumb.f12-breadcrumb-compact .f12-breadcrumb-list {\n  gap: 2px 6px;\n}\n/* Sheet header: give the path its own line above the eyebrow (the current-item rule otherwise\n   lands on the eyebrow tags) and pull the first crumb's padding back onto the text edge. */\n.f12-hd-text > .f12-breadcrumb:not(:last-child) {\n  margin-bottom: 14px;\n}\n.f12-hd-text > .f12-breadcrumb .f12-breadcrumb-item:first-child > .f12-breadcrumb-link {\n  margin-inline-start: -4px;\n}\n.f12-hd-text > .f12-breadcrumb .f12-breadcrumb-item:first-child > .f12-breadcrumb-page {\n  margin-inline-start: -6px;\n}\n\n.f12-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  font-family: var(--font-f-mono);\n  color: var(--f-ink);\n  min-width: 0;\n}\n.f12-pagination-summary {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  font-variant-numeric: tabular-nums;\n  color: var(--f-ink-2);\n}\n.f12-pagination-list {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.f12-pagination-item {\n  display: inline-flex;\n  align-items: center;\n}\n.f12-pagination-link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: 34px;\n  min-height: 34px;\n  padding: 6px 10px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  font-variant-numeric: tabular-nums;\n  line-height: 1;\n  text-decoration: none;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.f12-pagination-link:hover:not(:disabled):not([aria-disabled=\"true\"]):not(.f12-pagination-link-active) {\n  box-shadow: 2px 2px 0 var(--f-rule);\n}\n.f12-pagination-link:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-pagination-link-active,\n.f12-pagination-link[aria-current=\"page\"] {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-pagination-link:disabled,\n.f12-pagination-link-disabled,\n.f12-pagination-link[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  border-style: dashed;\n  color: var(--f-ink-2);\n  opacity: 0.6;\n  box-shadow: none;\n}\n.f12-pagination-prev,\n.f12-pagination-next {\n  padding: 6px 12px;\n}\n.f12-pagination-arrow {\n  font-size: 14px;\n  line-height: 1;\n}\n.f12-pagination-ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  min-height: 34px;\n  padding: 0 4px;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  color: var(--f-ink-2);\n  user-select: none;\n}\n.f12-pagination.f12-pagination-compact .f12-pagination-list {\n  gap: 4px;\n}\n.f12-pagination-link.f12-pagination-link-compact,\n.f12-pagination.f12-pagination-compact .f12-pagination-link {\n  min-width: 28px;\n  min-height: 28px;\n  padding: 4px 8px;\n  font-size: 11px;\n  border-width: 1.5px;\n}\n.f12-pagination.f12-pagination-compact .f12-pagination-ellipsis {\n  min-width: 24px;\n  min-height: 28px;\n  font-size: 11px;\n}\n\n/* ===================================================================== Metric, Delta & Spark */\n.f12-metric {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n.f12-m-label {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n  margin: 0;\n}\n.f12-m-value {\n  font-family: var(--font-f-display);\n  font-weight: 400;\n  font-size: 34px;\n  line-height: 1.22;\n  padding-bottom: 2px;\n  margin: 10px 0 0;\n  font-variant-numeric: tabular-nums;\n  letter-spacing: 0.01em;\n  color: var(--f-ink);\n}\n/* Expressive hero: sized to its own column, not the sheet. --f12-m-chars (set by <Metric> from\n   the final formatted value) and ~0.8em per display-font glyph keep the longest value inside\n   its panel; 14cqi caps short values so they don't balloon in wide columns. */\n.f12-metric.big {\n  container-type: inline-size;\n  min-width: min(100%, 12rem);\n}\n.f12-metric.big .f12-m-value {\n  font-size: clamp(20px, min(14cqi, 100cqi / (var(--f12-m-chars, 8) * 0.8)), 56px);\n  line-height: 1.1;\n  font-variant-numeric: proportional-nums;\n  overflow-wrap: anywhere;\n}\n.f12-metric.f12-metric-quiet .f12-m-value {\n  font-family: var(--font-f-mono);\n  font-weight: 700;\n  font-size: 22px;\n  line-height: 1.2;\n  margin-top: 6px;\n  letter-spacing: -0.01em;\n  font-variant-numeric: tabular-nums;\n}\n.f12-metric.f12-metric-quiet .f12-delta {\n  margin-top: 8px;\n  font-size: 11px;\n}\n.f12-metric.f12-metric-quiet .f12-m-note {\n  font-size: 12px;\n  margin-top: 4px;\n}\n.f12-delta {\n  display: flex;\n  align-items: baseline;\n  gap: 6px;\n  flex-wrap: wrap;\n  font-variant-numeric: tabular-nums;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  margin: 14px 0 0;\n  letter-spacing: 0.02em;\n  color: var(--f-ink);\n}\n.f12-delta-sym {\n  font-size: 10px;\n}\n.f12-delta.up .f12-delta-sym,\n.f12-delta.down .f12-delta-sym {\n  color: var(--f-marker-ink);\n  background: var(--f-marker);\n  padding: 0 3px;\n}\n.f12-delta-ref {\n  color: var(--f-ink-2);\n}\n.f12-m-note {\n  font-size: 13px;\n  color: var(--f-ink-2);\n  margin: 6px 0 0;\n  max-width: 15.1em;\n}\n\n.f12-spark {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: auto;\n  padding-top: 16px;\n}\n.f12-spark svg {\n  display: block;\n  width: 100%;\n  border-bottom: 2px solid var(--f-rule);\n  overflow: visible;\n}\n.f12-spark-l {\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n  margin: 0;\n}\n.f12-spark-bar {\n  stroke: var(--f-ink);\n  stroke-width: 1;\n}\n\n/* ===================================================================== Chart, Balloon & Data Table */\n.f12-c01-hd {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: flex-end;\n  gap: 12px 24px;\n  margin-bottom: 4px;\n}\n.f12-c01-hd > .f12-metric {\n  flex: 1 1 220px;\n}\n.f12-legend,\n.f12-legend-hint {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px 16px;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  color: var(--f-ink-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.f12-legend li {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.f12-legend-hint {\n  max-width: 13em;\n}\n.f12-sw {\n  display: inline-block;\n  width: 14px;\n  height: 0;\n  border-top-width: 2px;\n  border-top-style: solid;\n  flex: none;\n}\n.f12-sw-total {\n  border-color: var(--f-ink);\n  border-top-width: var(--f-stroke);\n}\n.f12-sw-focus {\n  border-color: var(--f-ink);\n  border-top-style: dashed;\n}\n\n.f12-chart {\n  position: relative;\n  width: 100%;\n  touch-action: pan-y;\n}\n.f12-chart-svg {\n  display: block;\n  width: 100%;\n  overflow: visible;\n}\n.f12-chart-svg:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 4px;\n}\n.f12-chart text {\n  fill: var(--f-ink-2);\n  font-family: var(--font-f-mono);\n  font-size: 10.5px;\n  font-variant-numeric: tabular-nums;\n}\n.f12-grid {\n  stroke: var(--f-grid);\n}\n.f12-baseline {\n  stroke: var(--f-rule);\n  stroke-width: 2;\n}\n.f12-sheet-ticks line {\n  stroke: var(--f-rule);\n  stroke-width: 1;\n}\n.f12-tone-dot {\n  fill: var(--f-tone);\n}\n.f12-l-total {\n  stroke: var(--f-ink);\n  stroke-width: var(--f-stroke);\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n.f12-l-focus {\n  stroke: var(--f-ink);\n  stroke-width: 2;\n  stroke-dasharray: 6 4;\n  stroke-linejoin: round;\n}\n.f12-tail {\n  fill: var(--f-panel);\n  stroke: var(--f-rule);\n  stroke-width: 2;\n  stroke-linejoin: miter;\n}\n.f12-g-tag {\n  fill: var(--f-marker);\n}\n.f12-peak-dot {\n  fill: var(--f-marker);\n  stroke: var(--f-rule);\n  stroke-width: 2;\n}\n.f12-balloon {\n  position: absolute;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  min-height: 28px;\n  max-width: calc(100% - 60px);\n  min-width: 0;\n  padding: 3px 12px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  border-radius: 14px;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.02em;\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-balloon-gap {\n  position: absolute;\n  bottom: -2px;\n  width: 10px;\n  height: 3px;\n  background: var(--f-panel);\n}\n.f12-balloon-standalone {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 100%;\n  min-width: 0;\n}\n.f12-balloon-standalone .f12-balloon {\n  position: relative;\n  max-width: 100%;\n  min-height: 28px;\n}\n.f12-balloon-standalone-svg {\n  display: block;\n  overflow: visible;\n  margin-top: -1px;\n}\n\n.f12-cross line {\n  stroke: var(--f-ink);\n  stroke-width: 1;\n}\n.f12-cross-dot {\n  fill: var(--f-marker);\n  stroke: var(--f-rule);\n  stroke-width: 2;\n}\n.f12-compare-pt,\n.f12-cross-dot2 {\n  fill: var(--f-panel);\n  stroke: var(--f-rule);\n  stroke-width: 2;\n}\n.f12-tip {\n  position: absolute;\n  z-index: 3;\n  pointer-events: none;\n  display: grid;\n  gap: 2px;\n  min-width: 160px;\n  padding: 8px 10px;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  background: var(--f-panel);\n  border: 2px solid var(--f-rule);\n  color: var(--f-ink);\n  font-family: var(--font-f-mono);\n  box-shadow: 4px 4px 0 var(--f-rule);\n}\n.f12-tip span {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.f12-tbl {\n  margin-top: 10px;\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  color: var(--f-ink);\n}\n.f12-tbl summary {\n  cursor: pointer;\n  width: fit-content;\n  max-width: 100%;\n  padding: 4px 0;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.f12-tbl-scroll {\n  max-height: 240px;\n  overflow: auto;\n  margin-top: 6px;\n}\n.f12-tbl table {\n  border-collapse: collapse;\n  width: 100%;\n  font-variant-numeric: tabular-nums;\n}\n.f12-tbl th,\n.f12-tbl td {\n  text-align: left;\n  padding: 5px 10px 5px 0;\n  white-space: nowrap;\n}\n.f12-tbl th {\n  color: var(--f-ink-2);\n  font-weight: 500;\n  border-bottom: 2px solid var(--f-rule);\n}\n.f12-tbl td {\n  border-bottom: 1px solid var(--f-grid);\n}\n\n/* ===================================================================== ToneBarList (Interventions) */\n.f12-ints-hd {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 6px 16px;\n  margin-bottom: 14px;\n}\n.f12-ints-sub {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-ink-2);\n  letter-spacing: 0.04em;\n  margin: 0;\n}\n.f12-ints-list {\n  display: grid;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.f12-ints-list li + li {\n  border-top: 1px solid var(--f-grid);\n}\n.f12-int-row {\n  all: unset;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: grid;\n  width: 100%;\n  align-items: center;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto;\n  gap: 16px;\n  padding: 12px 8px;\n  color: var(--f-ink);\n}\n.f12-int-row:hover .f12-int-name {\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.f12-int-row:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: -3px;\n}\n.f12-int-name {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex-wrap: wrap;\n  font-size: 15px;\n  font-weight: 700;\n}\n.f12-int-bar {\n  position: relative;\n  display: block;\n  height: 16px;\n  border: 2px solid var(--f-rule);\n}\n.f12-int-fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background-image: radial-gradient(circle, var(--f-tone) 1.1px, transparent 1.4px);\n  background-size: 5px 5px;\n  border-right: 2px solid var(--f-rule);\n}\n.f12-int-fill-hatch {\n  background-image: repeating-linear-gradient(\n    -45deg,\n    var(--f-tone) 0,\n    var(--f-tone) 1.25px,\n    transparent 1.25px,\n    transparent 5px\n  );\n  background-size: auto;\n}\n.f12-int-fill-dense {\n  background-image: radial-gradient(circle, var(--f-tone) 1.55px, transparent 1.85px);\n  background-size: 4px 4px;\n}\n.f12-ints.f12-ints-compact .f12-int-row {\n  padding: 7px 6px;\n  gap: 12px;\n}\n.f12-ints.f12-ints-compact .f12-int-name {\n  font-size: 13px;\n}\n.f12-ints.f12-ints-compact .f12-int-bar {\n  height: 12px;\n  border-width: 1.5px;\n}\n.f12-int-row[aria-pressed=\"true\"] {\n  background: var(--f-ink);\n  color: var(--f-panel);\n}\n.f12-int-row[aria-pressed=\"true\"]:focus-visible {\n  outline-color: var(--f-panel);\n}\n.f12-int-row[aria-pressed=\"true\"] .f12-int-bar {\n  border-color: var(--f-panel);\n}\n.f12-int-row[aria-pressed=\"true\"] .f12-int-fill {\n  background: var(--f-marker);\n  border-right-color: var(--f-panel);\n}\n.f12-int-row[aria-pressed=\"true\"] .f12-int-share {\n  color: var(--f-panel);\n}\n.f12-int-row[aria-pressed=\"true\"] .f12-badge {\n  border-color: var(--f-panel);\n}\n.f12-int-val {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  font-family: var(--font-f-mono);\n  font-size: 13px;\n  font-weight: 500;\n}\n.f12-int-share {\n  min-width: 3ch;\n  text-align: right;\n  color: var(--f-ink-2);\n}\n\n/* ===================================================================== Adapters: Dialog, Select, Tooltip, DropdownMenu, Table */\n\n/* Dialog */\ndialog.f12-dialog {\n  margin: auto;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: var(--f-stroke) solid var(--f-rule);\n  box-shadow: 6px 6px 0 var(--f-rule);\n  padding: 34px 22px 22px;\n  max-width: 480px;\n  width: calc(100% - 32px);\n  font-family: var(--font-f-body);\n}\ndialog.f12-dialog:modal {\n  overscroll-behavior: contain;\n}\ndialog.f12-dialog::backdrop {\n  overflow: hidden;\n  overscroll-behavior: contain;\n  background-color: var(--f-backdrop);\n  background-image: radial-gradient(circle, rgba(18, 18, 18, 0.35) 0.85px, transparent 1.35px);\n  background-size: 8px 8px;\n}\ndialog.f12-dialog > .f12-cut {\n  top: 8px;\n  left: 22px;\n  padding: 1px 6px;\n  background: var(--f-sheet);\n  border: 1.5px solid var(--f-rule);\n}\n.f12-dialog-header {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 16px;\n}\n.f12-dialog-title {\n  font-family: var(--font-f-display);\n  font-weight: 400;\n  font-size: 24px;\n  line-height: 1.1;\n  color: var(--f-ink);\n  margin: 0;\n}\n.f12-dialog-description {\n  font-size: 14px;\n  color: var(--f-ink-2);\n  margin: 0;\n}\n.f12-dialog-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--f-gutter-pair);\n  margin-top: 20px;\n}\n\n/* Select */\n.f12-select {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 180px;\n  font-family: var(--font-f-body);\n}\n.f12-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  width: 100%;\n  padding: 8px 12px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: var(--f-stroke) solid var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: left;\n}\n.f12-select-trigger:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-select.f12-select-compact {\n  gap: 4px;\n}\n.f12-select.f12-select-compact .f12-select-trigger {\n  padding: 6px 10px;\n  font-size: 13px;\n  line-height: 1.4;\n  border-width: 1.5px;\n}\n.f12-select-caret {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 10px;\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n  border: 1.5px solid var(--f-rule);\n  line-height: 1;\n}\n.f12-select-content {\n  z-index: 50;\n  min-width: var(--radix-select-trigger-width, 180px);\n  max-height: var(--radix-select-content-available-height, 300px);\n  overflow-y: auto;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: var(--f-stroke) solid var(--f-rule);\n  box-shadow: 4px 4px 0 var(--f-rule);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.f12-select-viewport {\n  padding: 0;\n}\n.f12-select-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 8px 12px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 0;\n  border-bottom: 1px solid var(--f-grid);\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  cursor: pointer;\n  text-align: left;\n  user-select: none;\n}\n.f12-select-item:last-child {\n  border-bottom: 0;\n}\n.f12-select-item:hover,\n.f12-select-item[data-highlighted],\n.f12-select-item[aria-selected=\"true\"],\n.f12-select-item[data-state=\"checked\"] {\n  background: var(--f-ink);\n  color: var(--f-panel);\n  outline: none;\n}\n.f12-select-item:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: -3px;\n}\n.f12-select-item[data-highlighted]:focus-visible,\n.f12-select-item[aria-selected=\"true\"]:focus-visible,\n.f12-select-item[data-state=\"checked\"]:focus-visible {\n  outline: 2px solid var(--f-panel);\n  outline-offset: -4px;\n}\n.f12-select-item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.f12-select-check {\n  background: var(--f-marker);\n  color: var(--f-marker-ink);\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: 700;\n}\n.f12-select-label {\n  padding: 6px 12px 4px;\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n.f12-select-sep {\n  height: 1px;\n  background: var(--f-grid);\n  margin: 4px 0;\n}\n\n/* Tooltip */\n.f12-tooltip-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.f12-tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 50;\n  white-space: nowrap;\n  padding: 5px 10px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 2px solid var(--f-rule);\n  box-shadow: 3px 3px 0 var(--f-rule);\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  pointer-events: none;\n}\n\n/* DropdownMenu */\n.f12-menu-wrap {\n  position: relative;\n  display: inline-block;\n}\n.f12-menu {\n  z-index: 50;\n  min-width: 180px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: var(--f-stroke) solid var(--f-rule);\n  box-shadow: 4px 4px 0 var(--f-rule);\n  padding: 4px 0;\n}\n.f12-menu-label {\n  padding: 6px 12px 4px;\n  font-family: var(--font-f-mono);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n.f12-menu-sep {\n  height: 1px;\n  background: var(--f-grid);\n  margin: 4px 0;\n}\n.f12-menu-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 7px 12px;\n  background: var(--f-panel);\n  color: var(--f-ink);\n  border: 0;\n  font-family: var(--font-f-body);\n  font-size: 13px;\n  cursor: pointer;\n  text-align: left;\n  user-select: none;\n}\n.f12-menu-item:hover,\n.f12-menu-item[data-highlighted],\n.f12-menu-item:focus-visible {\n  background: var(--f-ink);\n  color: var(--f-panel);\n  outline: none;\n}\n.f12-menu-item:focus-visible {\n  outline: 2px solid var(--f-panel);\n  outline-offset: -4px;\n}\n.f12-menu-item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Table */\n.f12-table-wrap {\n  width: 100%;\n  overflow-x: auto;\n}\n.f12-table-wrap:focus-visible {\n  outline: 3px solid var(--f-ink);\n  outline-offset: 2px;\n}\n.f12-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-family: var(--font-f-body);\n  font-size: 13px;\n  color: var(--f-ink);\n  font-variant-numeric: tabular-nums;\n}\n.f12-table caption {\n  caption-side: bottom;\n  padding-top: 8px;\n  text-align: left;\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  color: var(--f-ink-2);\n}\n.f12-table th,\n.f12-table td {\n  text-align: left;\n  padding: 8px 12px 8px 0;\n  border-bottom: 1px solid var(--f-grid);\n}\n.f12-table thead th {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 500;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n  border-bottom: var(--f-stroke) solid var(--f-rule);\n}\n.f12-table tfoot td,\n.f12-table tfoot th {\n  font-family: var(--font-f-mono);\n  font-weight: 700;\n  border-top: 2px solid var(--f-rule);\n  border-bottom: 0;\n}\n.f12-table.f12-table-compact {\n  font-size: 13px;\n}\n.f12-table.f12-table-compact th,\n.f12-table.f12-table-compact td {\n  padding: 5px 10px 5px 0;\n}\n.f12-table.f12-table-compact thead th {\n  border-bottom-width: 1.5px;\n}\n\n/* ===================================================================== Application Block & Layout Utilities */\n.f12-stack-pair {\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-pair);\n  min-width: 0;\n}\n.f12-stack-scene {\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-scene);\n  min-width: 0;\n}\n.f12-row-pair {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--f-gutter-pair);\n}\n.f12-row-between {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair) var(--f-gutter-scene);\n}\n.f12-section-title {\n  margin: 0;\n  font-family: var(--font-f-display);\n  font-weight: 400;\n  font-size: clamp(20px, 3vw, 28px);\n  line-height: 1.1;\n  color: var(--f-ink);\n}\n.f12-body-copy {\n  margin: 0;\n  font-size: 15px;\n  line-height: 1.55;\n  color: var(--f-ink);\n  max-width: 34.25em;\n}\n.f12-muted-copy {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--f-ink-2);\n  max-width: 33.25em;\n}\n.f12-mono-note {\n  margin: 0;\n  font-family: var(--font-f-mono);\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--f-ink-2);\n}\n.f12-code-inline {\n  font-family: var(--font-f-mono);\n  font-size: 0.92em;\n  padding: 1px 5px;\n  border: 1px solid var(--f-grid);\n  background-color: var(--f-sheet);\n  color: var(--f-ink);\n  overflow-wrap: anywhere;\n}\n.f12-nowrap {\n  white-space: nowrap;\n}\n\n.f12-console .f12-hd > .f12-hd-text {\n  flex: 1 1 540px;\n}\n.f12-console .f12-sub {\n  max-width: 64ch;\n  font-size: 13px;\n  line-height: 1.5;\n  margin-top: 6px;\n}\n.f12-console-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair) var(--f-gutter-scene);\n  min-width: 0;\n}\n/* Sheet-header toolbar: sit the environment Select beside the range SegmentedControl at the\n   same 44px height and rule weight, packed left like the other blocks' header control rows. */\n.f12-console-hd-toolbar {\n  justify-content: flex-start;\n}\n.f12-console-hd-toolbar .f12-select-trigger {\n  min-height: 44px;\n}\n.f12-console-filters {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n  gap: var(--f-gutter-pair);\n  align-items: end;\n  min-width: 0;\n}\n.f12-console-grid-2 {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--f-gutter-pair);\n  min-width: 0;\n}\n.f12-console .f12-int-row {\n  grid-template-columns: minmax(220px, 1.75fr) minmax(52px, 1fr) minmax(0, auto);\n  gap: var(--f-gutter-pair);\n}\n.f12-console .f12-int-name {\n  font-size: 13px;\n  line-height: 1.35;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.f12-console .f12-int-val {\n  font-size: 13px;\n  min-width: 0;\n}\n.f12-console-kpi-scene > .f12-panel > .f12-panel-body {\n  padding: 20px 18px 16px;\n}\n.f12-console-kpi-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  height: 100%;\n  min-width: 0;\n}\n.f12-console-kpi-card .f12-m-value {\n  margin-top: 4px;\n  line-height: 1.08;\n}\n.f12-console-kpi-card .f12-delta {\n  margin-top: 8px;\n  font-size: 12.5px;\n}\n.f12-console-kpi-spark {\n  margin-top: auto;\n}\n.f12-console-kpi-spark .f12-spark {\n  margin-top: 0;\n  padding-top: 4px;\n}\n.f12-console-kpi-spark .f12-spark-l {\n  font-size: 11px;\n  line-height: 1.35;\n  letter-spacing: 0.1em;\n}\n.f12-console-kpi-spark .f12-spark svg {\n  height: 38px;\n}\n.f12-console-kv-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: var(--f-gutter-pair);\n  margin: 0;\n  min-width: 0;\n}\n.f12-console-kv-list.f12-console-kpi-foot {\n  margin-top: auto;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.f12-console-kv-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: 8px 11px;\n  border: 1px solid var(--f-grid);\n  background: var(--f-sheet);\n}\n.f12-console-kpi-foot .f12-console-kv-item {\n  padding: 7px 10px;\n}\n.f12-console-kv-label {\n  font-family: var(--font-f-mono);\n  font-size: 11.5px;\n  line-height: 1.35;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--f-ink-2);\n}\n.f12-console-kpi-foot .f12-console-kv-label {\n  font-size: 11px;\n  letter-spacing: 0.06em;\n}\n.f12-console-kv-value {\n  margin-top: 3px;\n  font-family: var(--font-f-mono);\n  font-size: 13.5px;\n  line-height: 1.4;\n  font-weight: 700;\n  color: var(--f-ink);\n  font-variant-numeric: tabular-nums;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.f12-console-kpi-foot .f12-console-kv-value {\n  font-size: 13px;\n}\n.f12-console-chart-meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  min-width: 0;\n}\n.f12-console-kbd-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  padding: 3px 8px;\n  border: 1px dashed var(--f-rule);\n  background: var(--f-sheet);\n  font-family: var(--font-f-mono);\n  font-size: 11.5px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--f-ink);\n  white-space: nowrap;\n}\n.f12-console-kbd-hint kbd {\n  font-family: var(--font-f-mono);\n  font-size: 11px;\n  font-weight: 700;\n  padding: 0 4px;\n  margin-inline-end: 4px;\n  border: 1px solid var(--f-rule);\n  background: var(--f-panel);\n  color: var(--f-ink);\n}\n.f12-console-investigate-bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  padding-top: 4px;\n  border-top: 1px solid var(--f-grid);\n  min-width: 0;\n}\n.f12-console-investigate-bar > .f12-mono-note {\n  flex: 1 1 240px;\n}\n.f12-console-code {\n  margin: 0;\n  padding: 10px 12px;\n  border: 1.5px solid var(--f-rule);\n  background: var(--f-sheet);\n  color: var(--f-ink);\n  font-family: var(--font-f-mono);\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  overflow-x: auto;\n}\n.f12-console-feed {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.f12-console-feed-item {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair);\n  padding: 8px 0;\n  border-bottom: 1px solid var(--f-grid);\n  font-size: 13.5px;\n}\n.f12-console-feed-item:last-child {\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n.f12-console-quiet-title {\n  margin: 0;\n  font-family: var(--font-f-mono);\n  font-size: 12.5px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--f-ink);\n}\n.f12-console-quiet-sub {\n  margin: 0;\n  font-family: var(--font-f-body);\n  font-size: 13.5px;\n  line-height: 1.5;\n  color: var(--f-ink-2);\n}\n\n.f12-settings .f12-settings-posture-panel > .f12-panel-body {\n  padding: 16px 18px 14px;\n}\n.f12-settings .f12-settings-posture-panel .f12-m-value {\n  font-size: clamp(22px, 2.8vw, 30px);\n}\n.f12-settings .f12-settings-posture-panel .f12-console-kv-list {\n  flex: 1 1 520px;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n.f12-settings td code.f12-code-inline {\n  white-space: nowrap;\n}\n.f12-settings[data-high-contrast-rules=\"true\"] .f12-panel.f12-panel-quiet,\n.f12-settings[data-high-contrast-rules=\"true\"] .f12-console-kv-item,\n.f12-settings[data-high-contrast-rules=\"true\"] .f12-settings-bar,\n.f12-settings[data-high-contrast-rules=\"true\"] .f12-settings-specimen {\n  border-width: 2px;\n  border-color: var(--f-rule);\n}\n.f12-settings[data-high-contrast-rules=\"true\"] .f12-settings-danger-row {\n  border-bottom-width: 2px;\n  border-bottom-color: var(--f-rule);\n}\n.f12-settings-bar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair) var(--f-gutter-scene);\n  padding: 10px 14px;\n  border: 1.5px solid var(--f-rule);\n  background: var(--f-panel);\n  min-width: 0;\n}\n.f12-settings-bar[data-dirty=\"true\"] {\n  border-inline-start: 6px solid var(--f-rule);\n  background-color: var(--f-sheet);\n}\n.f12-settings-specimen {\n  display: flex;\n  flex-direction: column;\n  gap: var(--f-gutter-pair);\n  padding: 12px 14px;\n  border: 1px dashed var(--f-rule);\n  background: var(--f-sheet);\n  min-width: 0;\n}\n.f12-settings-danger-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--f-gutter-pair) var(--f-gutter-scene);\n  padding: 12px 0;\n  border-bottom: 1px solid var(--f-grid);\n  min-width: 0;\n}\n.f12-settings-danger-row > .f12-stack-pair {\n  flex: 1 1 320px;\n}\n.f12-settings-danger-row:last-child {\n  border-bottom: 0;\n  padding-bottom: 0;\n}\n.f12-settings .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger {\n  padding: 6px 10px;\n}\n\n@media (max-width: 960px) {\n  .f12-settings .f12-tabs-list {\n    flex-direction: column;\n    width: 100%;\n  }\n  .f12-settings .f12-tabs-trigger,\n  .f12-settings .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger {\n    width: 100%;\n    justify-content: flex-start;\n    min-height: 34px;\n    padding: 6px 10px;\n  }\n  .f12-settings .f12-tabs-trigger + .f12-tabs-trigger,\n  .f12-settings .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top: 1.5px solid var(--f-rule);\n  }\n}\n\n@container (max-width: 1180px) {\n  .f12-console .f12-int-row {\n    grid-template-columns: minmax(0, 1fr) minmax(0, auto);\n    grid-template-areas:\n      \"name val\"\n      \"bar bar\";\n    gap: 6px 12px;\n  }\n  .f12-console .f12-int-name {\n    grid-area: name;\n    white-space: normal;\n  }\n  .f12-console .f12-int-val {\n    grid-area: val;\n    white-space: normal;\n    text-align: end;\n  }\n  .f12-console .f12-int-bar {\n    grid-area: bar;\n  }\n}\n\n@container (max-width: 1080px) {\n  .f12-console-overview-scene.f12-scene.f12-scene-equal,\n  .f12-console-kv-list.f12-console-kpi-foot {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n@container (max-width: 900px) {\n  .f12-settings .f12-tabs-list {\n    flex-direction: column;\n    width: 100%;\n  }\n  .f12-settings .f12-tabs-trigger,\n  .f12-settings .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger {\n    width: 100%;\n    justify-content: flex-start;\n    min-height: 34px;\n    padding: 6px 10px;\n  }\n  .f12-settings .f12-tabs-trigger + .f12-tabs-trigger,\n  .f12-settings .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top: 1.5px solid var(--f-rule);\n  }\n}\n\n/* ===================================================================== Responsive Container Rules */\n@media (max-width: 760px) {\n  .f12-frame {\n    padding: 6px;\n  }\n}\n\n@container (max-width: 760px) {\n  .f12-frame {\n    padding: 6px;\n  }\n  .f12-sheet {\n    padding: 40px 14px 18px;\n    gap: 24px;\n  }\n  .f12-scene,\n  .f12-scene.f12-scene-split,\n  .f12-scene.f12-scene-equal,\n  .f12-scene.f12-scene-three,\n  .f12-scene.f12-scene-areas:not([data-scene-bp]),\n  .f12-console-filters,\n  .f12-console-grid-2,\n  .f12-console-kv-list,\n  .f12-console-kv-list.f12-console-kpi-foot,\n  .f12-settings .f12-settings-posture-panel .f12-console-kv-list {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .f12-scene.f12-scene-areas:not([data-scene-bp]) {\n    grid-template-areas: none;\n  }\n  .f12-scene.f12-scene-areas:not([data-scene-bp]) > [data-area] {\n    grid-area: auto;\n  }\n  .f12-rng-btn {\n    padding: 6px 10px 5px;\n    min-width: 52px;\n  }\n  .f12-panel-body {\n    padding: 22px 14px 18px;\n  }\n  .f12-panel.f12-panel-quiet > .f12-panel-body {\n    padding: 14px 12px;\n  }\n  .f12-panel.f12-panel-quiet.f12-slant-bottom > .f12-panel-body {\n    padding-bottom: 32px;\n  }\n  .f12-panel.f12-panel-quiet.f12-slant-top > .f12-panel-body {\n    padding-top: 32px;\n  }\n  .f12-int-row,\n  .f12-console .f12-int-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas: \"name val\" \"bar bar\";\n    gap: 8px 12px;\n  }\n  .f12-int-name,\n  .f12-console .f12-int-name {\n    grid-area: name;\n    white-space: normal;\n  }\n  .f12-int-val {\n    grid-area: val;\n  }\n  .f12-int-bar {\n    grid-area: bar;\n  }\n  .f12-m-value {\n    font-size: 30px;\n  }\n  .f12-tabs.f12-tabs-vertical {\n    flex-direction: column;\n  }\n  .f12-tabs.f12-tabs-vertical > .f12-tabs-list {\n    width: 100%;\n  }\n}\n\n@media (max-width: 640px) {\n  .f12-tabs-list {\n    flex-direction: column;\n    width: 100%;\n  }\n  .f12-tabs-trigger {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top: 2px solid var(--f-rule);\n  }\n  .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top-width: 1.5px;\n  }\n  .f12-analytics-seg-desc {\n    display: none;\n  }\n}\n\n@container (max-width: 640px) {\n  .f12-tabs-list {\n    flex-direction: column;\n    width: 100%;\n  }\n  .f12-tabs-trigger {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top: 2px solid var(--f-rule);\n  }\n  .f12-tabs-list.f12-tabs-list-compact .f12-tabs-trigger + .f12-tabs-trigger {\n    border-inline-start: 0;\n    border-top-width: 1.5px;\n  }\n  .f12-analytics-seg-desc {\n    display: none;\n  }\n}\n\n@container (max-width: 360px) {\n  .f12-rng {\n    max-width: 100%;\n  }\n  .f12-rng-btn {\n    padding: 5px 6px 4px;\n    min-width: 44px;\n  }\n  .f12-rng-n {\n    font-size: 15px;\n  }\n  .f12-console .f12-rng-btn {\n    padding: 5px 5px 4px;\n    min-width: 40px;\n  }\n  .f12-console .f12-rng-n {\n    font-size: 13px;\n  }\n  .f12-rng-u {\n    font-size: 9px;\n    letter-spacing: 0.08em;\n  }\n  .f12-tabs-trigger {\n    padding: 6px 10px;\n    font-size: 11px;\n  }\n  .f12-alert {\n    padding: 10px 12px;\n  }\n  .f12-pagination-link {\n    min-width: 28px;\n    min-height: 28px;\n    padding: 4px 7px;\n    font-size: 11px;\n  }\n}\n\n/* ===================================================================== Motion Grammar\n   smooth  = continuous easing\n   stepped = poses held on twos: 12 drawings/s, each pose 83.33ms\n   cut     = instant, editorial hard cut */\n.f12-m-smooth {\n  --f12-rng-ind-transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), width 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n  --f12-switch-thumb-transition: inset-inline-start 220ms cubic-bezier(0.2, 0.8, 0.2, 1);\n  --f12-skeleton-animation: f12SkeletonSmooth 1400ms ease-in-out infinite;\n  --f12-enter-animation: f12EnterSmooth 260ms cubic-bezier(0.2, 0.8, 0.2, 1);\n  --f12-pop-animation: f12PopSmooth 240ms cubic-bezier(0.2, 0.9, 0.3, 1.25);\n  --f12-burst-animation: f12BurstSmooth 320ms ease-out;\n}\n.f12-m-stepped {\n  --f12-rng-ind-transition: transform 250ms steps(3, end), width 250ms steps(3, end);\n  --f12-switch-thumb-transition: inset-inline-start 250ms steps(3, end);\n  --f12-skeleton-animation: f12SkeletonStep 333ms steps(4, end) infinite;\n  --f12-enter-animation: f12EnterStep 250ms step-end;\n  --f12-pop-animation: f12PopStep 333ms step-end;\n  --f12-burst-animation: f12BurstStep 250ms step-end;\n}\n.f12-m-cut {\n  --f12-rng-ind-transition: none;\n  --f12-switch-thumb-transition: none;\n  --f12-skeleton-animation: none;\n  --f12-enter-animation: none;\n  --f12-pop-animation: none;\n  --f12-burst-animation: none;\n}\n.f12-rng-ind {\n  transition: var(--f12-rng-ind-transition, none);\n}\n.f12-switch-thumb {\n  transition: var(--f12-switch-thumb-transition, none);\n}\n.f12-skeleton-animated {\n  animation: var(--f12-skeleton-animation, f12SkeletonStep 333ms steps(4, end) infinite);\n}\n@keyframes f12SkeletonSmooth {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.55;\n  }\n}\n@keyframes f12SkeletonStep {\n  0% {\n    background-position: 0 0;\n    opacity: 1;\n  }\n  50% {\n    background-position: 6px 3px;\n    opacity: 0.68;\n  }\n  100% {\n    background-position: 12px 6px;\n    opacity: 1;\n  }\n}\n\n.f12-enter {\n  animation: var(--f12-enter-animation, none);\n}\n@keyframes f12EnterSmooth {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes f12EnterStep {\n  0% {\n    opacity: 0.35;\n    transform: translateY(10px);\n  }\n  33% {\n    opacity: 0.8;\n    transform: translateY(4px);\n  }\n  66% {\n    opacity: 1;\n    transform: translateY(1px);\n  }\n  100% {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n.f12-pop {\n  animation: var(--f12-pop-animation, none);\n}\n@keyframes f12PopSmooth {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes f12PopStep {\n  0% {\n    transform: scale(0.5);\n  }\n  25% {\n    transform: scale(1.22);\n  }\n  50% {\n    transform: scale(0.94);\n  }\n  75% {\n    transform: scale(1);\n  }\n  100% {\n    transform: none;\n  }\n}\n.f12-pop .f12-burst {\n  animation: var(--f12-burst-animation, none);\n}\n@keyframes f12BurstStep {\n  0% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(0.85);\n  }\n  33% {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1.08);\n  }\n  66%,\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes f12BurstSmooth {\n  from {\n    opacity: 0.9;\n    transform: translate(-50%, -50%) scale(0.85);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(1.15);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root,\n  .f12-m-smooth,\n  .f12-m-stepped,\n  .f12-m-cut {\n    --f12-rng-ind-transition: none;\n    --f12-switch-thumb-transition: none;\n    --f12-skeleton-animation: none;\n    --f12-enter-animation: none;\n    --f12-pop-animation: none;\n    --f12-burst-animation: none;\n  }\n  .f12-dash *,\n  .f12-dash *::before,\n  .f12-dash *::after,\n  .f12-sheet *,\n  .f12-sheet *::before,\n  .f12-sheet *::after,\n  .f12-toast-viewport *,\n  .f12-toast,\n  .f12-rng-ind,\n  .f12-switch-thumb,\n  .f12-enter,\n  .f12-pop,\n  .f12-pop .f12-burst,\n  .f12-skeleton-animated {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n/* ===================================================================== Forced Colors (High Contrast) */\n@media (forced-colors: active) {\n  .f12-panel-frame polygon {\n    fill: Canvas;\n    stroke: CanvasText;\n  }\n  .f12-panel.f12-panel-quiet,\n  .f12-console-kv-item,\n  .f12-console-code,\n  .f12-settings-bar,\n  .f12-settings-specimen {\n    border-color: CanvasText;\n  }\n  .f12-tag,\n  .f12-badge,\n  .f12-alert,\n  .f12-toast,\n  .f12-ghost-wire-from,\n  .f12-receipt {\n    border: 1px solid CanvasText;\n    background-image: none;\n  }\n  .f12-ghost-wire-to {\n    border: 2px dashed CanvasText;\n  }\n  .f12-ghost-wire-line {\n    stroke: CanvasText;\n  }\n  .f12-ghost-wire-reveal {\n    forced-color-adjust: none;\n    stroke: #fff;\n  }\n  .f12-status-neutral,\n  .f12-alert-neutral,\n  .f12-toast-neutral {\n    border: 1px solid CanvasText;\n  }\n  .f12-status-info,\n  .f12-alert-info,\n  .f12-toast-info {\n    border: 1.5px solid CanvasText;\n  }\n  .f12-status-success,\n  .f12-alert-success,\n  .f12-toast-success {\n    border: 2px solid CanvasText;\n    border-inline-start-width: 6px;\n  }\n  .f12-status-warning,\n  .f12-alert-warning,\n  .f12-toast-warning {\n    border: 2px dashed CanvasText;\n  }\n  .f12-status-danger,\n  .f12-alert-danger,\n  .f12-toast-danger {\n    border: 3px double CanvasText;\n    border-inline-start-width: 6px;\n  }\n  .f12-alert-glyph,\n  .f12-toast-glyph {\n    border: 1.5px solid CanvasText;\n  }\n  .f12-alert-danger .f12-alert-glyph,\n  .f12-toast-danger .f12-toast-glyph {\n    forced-color-adjust: none;\n    background: Highlight;\n    color: HighlightText;\n    border-color: Highlight;\n  }\n  .f12-skeleton,\n  .f12-empty-icon {\n    background-image: none;\n    border: 1.5px dashed GrayText;\n  }\n  .f12-empty {\n    border-color: CanvasText;\n  }\n  .f12-l-total,\n  .f12-l-focus,\n  .f12-spark-bar,\n  .f12-tail,\n  .f12-baseline,\n  .f12-sheet-ticks line {\n    stroke: CanvasText;\n  }\n  .f12-grid {\n    stroke: GrayText;\n  }\n  .f12-tone-dot,\n  .f12-peak-dot,\n  .f12-cross-dot {\n    fill: CanvasText;\n    stroke: CanvasText;\n  }\n  .f12-compare-pt,\n  .f12-cross-dot2 {\n    fill: Canvas;\n    stroke: CanvasText;\n  }\n  .f12-int-fill {\n    background: Highlight;\n    forced-color-adjust: none;\n  }\n  .f12-rng-ind {\n    mix-blend-mode: normal;\n    background: transparent;\n    border: 2px solid Highlight;\n  }\n  .f12-rng-btn[aria-pressed=\"true\"],\n  .f12-int-row[aria-pressed=\"true\"],\n  .f12-select-item[data-state=\"checked\"],\n  .f12-tabs-trigger[aria-selected=\"true\"],\n  .f12-pagination-link[aria-current=\"page\"],\n  .f12-pagination-link-active {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n  .f12-checkbox-input,\n  .f12-radio-input,\n  .f12-switch-input,\n  .f12-switch-track {\n    forced-color-adjust: none;\n    background: Canvas;\n    border-color: CanvasText;\n  }\n  .f12-checkbox-input:checked,\n  .f12-checkbox-input:indeterminate,\n  .f12-checkbox-input.f12-checkbox-indeterminate,\n  .f12-checkbox-input[data-indeterminate=\"true\"],\n  .f12-switch-input:checked,\n  .f12-switch-input:checked + .f12-switch-track {\n    background: Highlight;\n    border-color: Highlight;\n  }\n  .f12-checkbox-mark {\n    forced-color-adjust: none;\n    color: HighlightText;\n  }\n  .f12-radio-input:checked {\n    border-color: Highlight;\n  }\n  .f12-radio-mark {\n    forced-color-adjust: none;\n    color: Highlight;\n  }\n  .f12-switch-thumb {\n    forced-color-adjust: none;\n    background: CanvasText;\n    border-color: Canvas;\n  }\n  .f12-switch-input:checked + .f12-switch-track .f12-switch-thumb {\n    background: HighlightText;\n    border-color: Highlight;\n  }\n  .f12-switch-glyph-on {\n    forced-color-adjust: none;\n    color: HighlightText;\n  }\n  .f12-switch-glyph-off {\n    forced-color-adjust: none;\n    color: CanvasText;\n  }\n  .f12-checkbox-input:disabled,\n  .f12-radio-input:disabled,\n  .f12-switch-input:disabled,\n  .f12-switch-input:disabled + .f12-switch-track,\n  .f12-input:disabled,\n  .f12-textarea:disabled,\n  .f12-select-trigger:disabled,\n  .f12-pagination-link:disabled,\n  .f12-pagination-link[aria-disabled=\"true\"] {\n    border-color: GrayText;\n  }\n  .f12-input:disabled,\n  .f12-textarea:disabled,\n  .f12-select-trigger:disabled,\n  .f12-tabs-trigger:disabled,\n  .f12-pagination-link:disabled,\n  .f12-pagination-link[aria-disabled=\"true\"],\n  [data-disabled] .f12-check-label,\n  .f12-switch-input:disabled + .f12-switch-track .f12-switch-glyph-off {\n    color: GrayText;\n  }\n  .f12-frame :focus-visible,\n  .f12-sheet :focus-visible,\n  .f12-dialog :focus-visible,\n  [class*=\"f12-\"]:focus-visible {\n    outline: 3px solid Highlight;\n  }\n}\n\n/* ===================================================================== Print */\n@media print {\n  .f12-toast-viewport {\n    display: none !important;\n  }\n  .f12-tag,\n  .f12-badge,\n  .f12-status-warning,\n  .f12-status-danger,\n  .f12-alert,\n  .f12-alert-glyph,\n  .f12-checkbox-input,\n  .f12-checkbox-mark,\n  .f12-radio-input,\n  .f12-radio-mark,\n  .f12-switch-input,\n  .f12-switch-track,\n  .f12-switch-thumb,\n  .f12-tabs-trigger[aria-selected=\"true\"],\n  .f12-pagination-link[aria-current=\"page\"] {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n  .f12-status-danger {\n    border: 3px double var(--f-rule);\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/frame12.css"
    },
    {
      "path": "styles/frame12-tailwind.css",
      "content": "/* Optional Tailwind v4 @theme mapping for FRAME/12 tokens and gutter grammar.\n   Import alongside frame12.css when using Tailwind CSS v4. */\n\n@import \"./frame12.css\";\n\n@theme inline {\n  --color-f-desk: var(--f-desk);\n  --color-f-sheet: var(--f-sheet);\n  --color-f-panel: var(--f-panel);\n  --color-f-ink: var(--f-ink);\n  --color-f-ink-2: var(--f-ink-2);\n  --color-f-rule: var(--f-rule);\n  --color-f-tone: var(--f-tone);\n  --color-f-grid: var(--f-grid);\n  --color-f-marker: var(--f-marker);\n  --color-f-marker-ink: var(--f-marker-ink);\n  --color-f-hole: var(--f-hole);\n\n  --font-f12-display: var(--font-f-display);\n  --font-f12-body: var(--font-f-body);\n  --font-f12-mono: var(--font-f-mono);\n\n  --spacing-gutter-pair: var(--f-gutter-pair);\n  --spacing-gutter-scene: var(--f-gutter-scene);\n  --spacing-gutter-change: var(--f-gutter-change);\n}\n",
      "type": "registry:file",
      "target": "styles/frame12-tailwind.css"
    }
  ],
  "type": "registry:ui"
}