.fpga-visual {
  --fv-ground: var(--ground, #f6f3eb);
  --fv-surface: var(--surface, #fff);
  --fv-ink: var(--ink, #29332d);
  --fv-muted: var(--ink-2, #615d56);
  --fv-line: var(--line, #e3e1dd);
  --fv-edge: var(--line-strong, #c6c4be);
  --fv-live: var(--live, #ac452a);
  --fv-live-ink: var(--live-ink, #82351f);
  --fv-live-soft: var(--live-soft, #f2e4d8);
  --fv-pass: var(--pass, #04773b);
  --fv-fail: var(--fail, #b02b27);
  --fv-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color-scheme: light;
  color: var(--fv-ink);
  background: var(--fv-ground);
  font: 400 17px/1.58 var(--font-text, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  border: 1px solid var(--fv-edge);
  border-radius: 8px;
  padding: 24px;
  overflow-wrap: break-word;
  text-align: left;
}
.fpga-visual *, .fpga-visual *::before, .fpga-visual *::after { box-sizing: border-box; }
.fv-announcer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fpga-visual p { margin: 0 0 12px; }
.fpga-visual h3, .fpga-visual h4 { color: var(--fv-ink); font-family: inherit; font-weight: 500; margin: 0; letter-spacing: -.02em; }
.fpga-visual h3 { font-size: 26px; line-height: 1.24; }
.fpga-visual h4 { font-size: 17px; line-height: 1.35; }
.fpga-visual b, .fpga-visual strong { font-weight: 500; }
.fpga-visual button, .fpga-visual select, .fpga-visual input { font: inherit; color: inherit; }
.fpga-visual button, .fpga-visual select { font-size: 14px; min-height: 44px; border: 1px solid var(--fv-edge); border-radius: 4px; background: var(--fv-surface); padding: 10px 14px; }
.fpga-visual button { cursor: pointer; line-height: 1.35; }
.fpga-visual button:hover:not(:disabled) { border-color: var(--fv-ink); }
.fpga-visual button.fv-primary { background: var(--fv-ink); color: var(--fv-surface); border-color: var(--fv-ink); }
.fpga-visual button:disabled { opacity: .5; cursor: default; }
.fpga-visual :focus-visible { outline: 3px solid var(--fv-live); outline-offset: 3px; }
.fv-heading { display: flex; gap: 16px; margin-bottom: 8px; }
.fv-heading p { color: var(--fv-muted); font-size: 17px; line-height: 1.5; margin: 8px 0 0; }
.fv-number { font: 400 14px/1.6 var(--fv-mono); padding-top: 4px; color: var(--fv-muted); }
.fv-scope { font-size: 12px; line-height: 1.5; color: var(--fv-muted); padding-left: 34px; margin-bottom: 24px !important; }
.fv-architecture { margin: 20px -4px 0; }
.fv-architecture-row { padding: 20px 4px; display: grid; grid-template-columns: minmax(145px, .85fr) minmax(0, 2fr) 70px; align-items: center; gap: 20px; border-top: 1px solid var(--fv-edge); }
.fv-row-title p { font-size: 14px; line-height: 1.5; color: var(--fv-muted); margin: 5px 0 0; }
.fv-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.fv-stage { position: relative; min-height: 92px; padding: 10px 8px; background: var(--fv-surface); border: 1px solid var(--fv-edge); border-radius: 4px; }
.fv-stage:not(:last-child)::after { content: '›'; position: absolute; right: -8px; top: 34px; font-size: 20px; line-height: 1; z-index: 1; color: var(--fv-muted); }
.fv-stage-label { display: block; font-size: 12px; line-height: 1.35; color: var(--fv-muted); margin-bottom: 9px; white-space: nowrap; }
.fv-active { border-color: var(--fv-live); background: var(--fv-live-soft); }
.fv-active .fv-stage-label { color: var(--fv-live-ink); }
.fv-tokens { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; }
.fv-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 28px; background: var(--fv-ink); color: var(--fv-surface); font: 400 12px/1.3 var(--fv-mono); padding: 5px; border-radius: 2px; }
.fv-active .fv-chip { background: var(--fv-live-ink); }
.fv-empty { font: 400 14px/1.5 var(--fv-mono); color: var(--fv-muted); }
.fv-count { text-align: right; }
.fv-count output { display: block; font: 400 32px/1.1 var(--fv-mono); font-variant-numeric: tabular-nums; }
.fv-count small { font: 400 12px/1.3 var(--fv-mono); color: var(--fv-muted); }
.fv-count > span { display: block; color: var(--fv-muted); font-size: 12px; line-height: 1.5; margin-top: 5px; }
.fv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding-top: 20px; border-top: 1px solid var(--fv-edge); }
.fv-tick { display: flex; align-items: baseline; gap: 8px; color: var(--fv-muted); font-size: 14px; margin-right: auto; }
.fv-tick output { color: var(--fv-ink); font: 400 26px/1.2 var(--fv-mono); font-variant-numeric: tabular-nums; }
.fv-tick > span { font-size: 12px; }
.fv-prediction { min-width: 0; border: 0; border-top: 1px solid var(--fv-edge); margin: 24px 0 0; padding: 20px 0 0; }
.fv-prediction legend { float: left; width: 100%; margin: 0 0 10px; font-weight: 500; font-size: 17px; padding: 0; }
.fv-prediction > p { clear: both; font-size: 17px; line-height: 1.58; }
.fv-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.fv-choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--fv-edge); background: var(--fv-surface); border-radius: 4px; padding: 10px 12px; min-height: 48px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.fv-choice:has(input:checked) { border-color: var(--fv-ink); box-shadow: inset 0 0 0 1px var(--fv-ink); }
.fv-choice input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--fv-ink); }
.fv-choice:has(input:disabled) { cursor: default; }
.fv-saved { color: var(--fv-muted); font-size: 14px !important; margin-bottom: 0 !important; }
.fv-past-prediction { margin-top: 20px; color: var(--fv-muted); font-size: 14px; }
.fv-past-prediction summary { cursor: pointer; min-height: 32px; }
.fv-past-prediction p { margin-top: 8px; }
.fv-save-error { margin-top: 18px !important; padding: 16px; border-left: 3px solid var(--fv-fail); background: var(--fv-surface); color: var(--fv-fail); }
.fv-scroll-hint { display: none; font-size: 12px; color: var(--fv-muted); }
.fv-result:empty { display: none; }
.fv-feedback { margin: 20px 0 0 !important; padding: 16px 18px; background: var(--fv-surface); border-left: 3px solid var(--fv-edge); font-size: 17px; line-height: 1.58; }
.fv-feedback span { display: block; font-weight: 500; margin-bottom: 4px; }
.fv-correct { border-left-color: var(--fv-pass); }
.fv-correct span { color: var(--fv-pass); }
.fv-repair { border-left-color: var(--fv-fail); }
.fv-repair span { color: var(--fv-fail); }
.fv-metric-notes { display: grid; grid-template-columns: 1fr 1.8fr; gap: 20px; margin-top: 16px; font-size: 14px; }
.fv-metric-notes > p > span { display: block; font-weight: 500; margin-bottom: 4px; }
.fv-details { border-top: 1px solid var(--fv-edge); padding-top: 16px; margin-top: 24px; }
.fv-details summary { font-size: 14px; cursor: pointer; min-height: 32px; }
.fv-details p { font-size: 14px; line-height: 1.6; margin-top: 12px; }
.fv-footnote { font-size: 14px; color: var(--fv-muted); line-height: 1.6; margin-top: 18px !important; }
.fv-register-chain { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; margin: 24px 0 12px; align-items: center; }
.fv-register { display: flex; flex-direction: column; align-items: center; background: var(--fv-surface); border: 1px solid var(--fv-edge); padding: 18px 12px; border-radius: 4px; min-height: 184px; text-align: center; }
.fv-register > span { font-size: 14px; }
.fv-register output { display: block; font: 400 48px/1.3 var(--fv-mono); font-variant-numeric: tabular-nums; margin: 7px 0 0; }
.fv-register code { font: 400 14px/1.5 var(--fv-mono); color: var(--fv-muted); }
.fv-register small { font-size: 12px; color: var(--fv-muted); line-height: 1.5; margin-top: 12px; }
.fv-input { border-color: var(--fv-live); background: var(--fv-live-soft); color: var(--fv-live-ink); }
.fv-input code, .fv-input small { color: var(--fv-live-ink); }
.fv-arrow { font-size: 26px; color: var(--fv-muted); text-align: center; }
.fv-clock-line { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 8px; }
.fv-clock-line svg { display: block; width: 55%; max-width: 360px; min-height: 46px; overflow: visible; }
.fv-clock-line path { stroke: var(--fv-edge); stroke-width: 2; fill: none; }
.fv-clock-line .fv-clock-marker { stroke: var(--fv-ink); }
.fv-clock-line text { fill: var(--fv-ink); font: 12px var(--font-text, sans-serif); }
.fv-clock-line > span { font-size: 12px; color: var(--fv-muted); }
.fv-select { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fv-select + .fv-tick { margin-left: auto; margin-right: 0; }
.fv-state { font-size: 14px; line-height: 1.6; padding: 12px 16px; background: var(--fv-surface); border: 1px solid var(--fv-line); }
.fv-table-wrap { overflow-x: auto; margin-top: 10px; border: 1px solid var(--fv-edge); border-radius: 4px; background: var(--fv-surface); }
.fpga-visual table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 12px; line-height: 1.5; margin: 0; }
.fpga-visual caption { text-align: left; padding: 12px; color: var(--fv-muted); font-size: 12px; }
.fpga-visual th, .fpga-visual td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--fv-line); white-space: nowrap; }
.fpga-visual th { font-weight: 500; }
.fpga-visual tbody td, .fpga-visual tbody th { font-family: var(--fv-mono); font-variant-numeric: tabular-nums; }
.fv-mode { border-top: 1px solid var(--fv-edge); padding-top: 18px; margin-top: 20px; }
.fv-mode label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.fv-mode p { font-size: 14px; color: var(--fv-muted); margin-top: 8px; }
.fv-fifo-flow { display: grid; grid-template-columns: minmax(88px, .8fr) 18px minmax(0, 2fr) 18px minmax(90px, .8fr); gap: 8px; align-items: center; margin-top: 24px; }
.fv-endpoint { text-align: center; padding: 8px 0; }
.fv-endpoint > span, .fv-endpoint small { font-size: 12px; display: block; color: var(--fv-muted); }
.fv-endpoint output { display: block; font: 400 20px/1.4 var(--fv-mono); margin: 10px 0; }
.fv-queue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; position: relative; padding: 14px 10px 42px; border: 1px solid var(--fv-edge); border-radius: 4px; background: var(--fv-surface); }
.fv-slot { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; min-height: 80px; padding: 8px 4px; background: var(--fv-ground); border: 1px solid var(--fv-edge); border-radius: 2px; }
.fv-slot > span:first-child { font-size: 12px; color: var(--fv-muted); text-align: center; line-height: 1.35; }
.fv-slot .fv-chip { min-width: 35px; }
.fv-queue-label { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--fv-muted); }
.fv-meter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fv-edge); margin: 20px 0 0; padding-bottom: 16px; }
.fv-meter-row > div { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.fv-meter-row > div + div { border-left: 1px solid var(--fv-edge); }
.fv-meter-row span { font-size: 12px; color: var(--fv-muted); }
.fv-meter-row output { font: 400 26px/1.3 var(--fv-mono); font-variant-numeric: tabular-nums; }
.fv-check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }
.fv-check input { accent-color: var(--fv-ink); width: 18px; height: 18px; }
.fv-path-caption { font-size: 14px; border-top: 1px solid var(--fv-edge); padding-top: 18px; margin-top: 24px; }
.fv-connection-path { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fv-connection-path li { position: relative; padding: 14px 12px; border: 1px solid var(--fv-edge); border-radius: 4px; background: var(--fv-surface); }
.fv-connection-path li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 41%; color: var(--fv-muted); z-index: 1; }
.fv-connection-path li > span { font: 400 12px/1.5 var(--fv-mono); color: var(--fv-muted); }
.fv-connection-path h4 { font-size: 14px; margin: 12px 0 8px; }
.fv-connection-path p { font-size: 14px; line-height: 1.5; margin: 0; }
.fv-response { margin-top: 14px !important; font-size: 14px; color: var(--fv-muted); }
.fv-response > span { font-size: 22px; padding-right: 8px; }
.fv-configuration { border: 1px dashed var(--fv-edge); border-radius: 4px; padding: 18px; margin-top: 20px; }
.fv-configuration > span { display: block; font-size: 12px; color: var(--fv-muted); margin-bottom: 12px; }
.fv-configuration p { font-size: 14px; line-height: 1.6; }
.fv-configuration p:last-child { margin: 0; color: var(--fv-muted); }
.fv-applications { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 10px; }
.fv-applications p > span { display: block; font-weight: 500; color: var(--fv-ink); }
.fv-timing-logic { display: grid; grid-template-columns: 3fr 24px 2fr 24px 4fr 24px 2fr; align-items: center; gap: 6px; margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--fv-edge); }
.fv-delay-block { min-width: 0; padding: 16px 8px; background: var(--fv-surface); border: 1px solid var(--fv-edge); border-radius: 4px; text-align: center; }
.fv-delay-block > span { font-size: 14px; }
.fv-delay-block output { display: block; font: 400 32px/1.2 var(--fv-mono); margin-top: 8px; font-variant-numeric: tabular-nums; }
.fv-delay-block small { display: block; font: 400 12px/1.5 var(--fv-mono); color: var(--fv-muted); }
.fv-cut-mark { text-align: center; font-size: 17px; color: var(--fv-muted); }
.fv-cut-register { border-right: 2px solid var(--fv-ink); border-left: 2px solid var(--fv-ink); padding: 12px 0; font: 400 12px/1 var(--fv-mono); color: var(--fv-ink); }
.fv-register-captured { border-color: var(--fv-live); color: var(--fv-live-ink); background: var(--fv-live-soft); }
.fv-cut-controls { display: flex; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 8px; }
.fv-timing-rule { border-left: 2px solid var(--fv-edge); padding-left: 16px; margin-top: 20px; }
.fv-timing-rule p { font-size: 14px; margin: 4px 0; }
.fv-latency-input { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 14px; margin: 16px 0; }
.fv-latency-input input { width: 92px; min-height: 44px; border: 1px solid var(--fv-edge); background: var(--fv-surface); border-radius: 4px; padding: 8px 12px; font: 400 17px/1.4 var(--fv-mono); }
.fv-timing-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; }
.fv-timing-metrics > div + div { border-left: 1px solid var(--fv-edge); padding-left: 24px; }
.fv-timing-metrics > div > span { display: block; font-size: 14px; }
.fv-timing-metrics output { display: block; font: 400 36px/1.5 var(--fv-mono); font-variant-numeric: tabular-nums; }
.fv-timing-metrics small { font-size: 14px; }
.fv-timing-metrics p { font-size: 14px; color: var(--fv-muted); margin-bottom: 0; }
.fv-budget { padding-top: 16px; border-top: 1px solid var(--fv-edge); }
.fv-budget h4 { margin-bottom: 16px; }
.fv-budget-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 110px; align-items: center; gap: 12px; margin: 12px 0; font: 400 12px/1.5 var(--fv-mono); }
.fv-budget-track { position: relative; min-height: 20px; background: var(--sunk, #ebe9e5); }
.fv-budget-bar { position: absolute; height: 100%; background: var(--fv-ink); left: 0; top: 0; }
.fv-budget-3 { width: 25%; }.fv-budget-4 { width: 33.333333%; }.fv-budget-5 { width: 41.666667%; }.fv-budget-6 { width: 50%; }.fv-budget-7 { width: 58.333333%; }.fv-budget-9 { width: 75%; }.fv-budget-10 { width: 83.333333%; }.fv-budget-12 { width: 100%; }
.fv-target-mark { position: absolute; left: 58.333333%; top: -4px; bottom: -4px; border-left: 2px dashed var(--fv-ink); }
.fv-budget > p { font-size: 12px; color: var(--fv-muted); margin-top: 18px; }
.fpga-visual table.fv-dot-inputs { min-width: 0; table-layout: fixed; border: 1px solid var(--fv-edge); background: var(--fv-surface); margin-top: 24px; }
.fv-dot-inputs th, .fv-dot-inputs td { padding: 8px; }
.fv-dot-inputs th:first-child { width: 55px; }
.fv-dot-inputs input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--fv-edge); border-radius: 4px; padding: 6px; background: var(--fv-ground); text-align: center; font: 400 17px/1.4 var(--fv-mono); }
.fv-dot-inputs input[aria-invalid="true"] { border-color: var(--fv-fail); }
.fv-dot-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.fv-dot-settings > label { font-size: 14px; min-width: 0; }
.fv-dot-settings select { display: block; width: 100%; margin-top: 8px; }
.fv-dot-settings .fv-check { grid-column: 1 / -1; }
.fv-dot-phases { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fv-dot-phases li { position: relative; padding: 14px 10px; background: var(--fv-surface); border: 1px solid var(--fv-edge); border-radius: 4px; text-align: center; }
.fv-dot-phases li:not(:last-child)::after { content: '›'; position: absolute; right: -10px; top: 40%; color: var(--fv-muted); }
.fv-dot-phases li > span { display: block; font-size: 14px; }
.fv-dot-phases output { display: block; font: 400 32px/1.6 var(--fv-mono); }
.fv-dot-phases small { display: block; font-size: 12px; color: var(--fv-muted); }
.fv-dot-phases .fv-phase-current { border-color: var(--fv-live); background: var(--fv-live-soft); color: var(--fv-live-ink); }
.fv-dot-phases .fv-phase-current small { color: var(--fv-live-ink); }
.fv-dot-work { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.fv-dot-work article { min-width: 0; border-top: 1px solid var(--fv-edge); padding-top: 16px; }
.fv-dot-work h4 { font-size: 14px; }
.fv-dot-sum { display: block; font: 400 36px/1.5 var(--fv-mono); }
.fv-dot-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fv-dot-products > span { display: flex; flex-direction: column; text-align: center; padding: 8px 4px; border: 1px solid var(--fv-edge); background: var(--fv-surface); }
.fv-dot-products small { color: var(--fv-muted); font-size: 12px; }
.fv-dot-products code { font: 400 14px/1.5 var(--fv-mono); }
.fv-dot-work p { font-size: 12px; margin-top: 8px; color: var(--fv-muted); }
.fv-dot-resources { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 16px; margin-top: 24px; border-top: 1px solid var(--fv-edge); padding-top: 20px; }
.fv-dot-resources p { font-size: 14px; }
.fv-dot-resources p > span { display: block; font-weight: 500; margin-bottom: 8px; }
.fpga-visual .fv-dot-trace td:last-child { white-space: normal; min-width: 240px; }
@media (max-width: 700px) {
  .fv-scroll-hint { display: block; margin: 8px 0 !important; }
  .fv-dot-settings, .fv-dot-resources { grid-template-columns: 1fr; }
  .fpga-visual { padding: 20px 16px; }
  .fv-heading { gap: 12px; }
  .fv-heading h3 { font-size: 23px; }
  .fv-scope { padding-left: 30px; }
  .fv-architecture-row { grid-template-columns: minmax(0, 1fr) 60px; gap: 12px; }
  .fv-row-title { grid-column: 1; }
  .fv-stages { grid-column: 1; grid-row: 2; }
  .fv-count { grid-column: 2; grid-row: 1 / span 2; }
  .fv-register { padding: 14px 6px; min-height: 178px; }
  .fv-register-chain { gap: 4px; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); }
  .fv-register > span { font-size: 12px; }
  .fv-register output { font-size: 36px; }
  .fv-arrow { font-size: 20px; }
  .fv-clock-line { gap: 12px; }
  .fv-fifo-flow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fv-fifo-flow > .fv-endpoint:first-child { grid-column: 1; grid-row: 1; }
  .fv-fifo-flow > .fv-arrow:nth-child(2) { grid-column: 1; grid-row: 2; transform: rotate(90deg); }
  .fv-fifo-flow > .fv-queue { grid-column: 1; grid-row: 3; }
  .fv-fifo-flow > .fv-arrow:nth-child(4) { display: block; grid-column: 1; grid-row: 4; transform: rotate(90deg); }
  .fv-fifo-flow > .fv-endpoint:last-child { grid-column: 1; grid-row: 5; }
  .fv-fifo-flow > .fv-endpoint { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 8px; }
  .fv-fifo-flow > .fv-endpoint output { margin: 0; }
  .fv-mode label { display: block; }
  .fv-mode select { display: block; margin-top: 8px; width: 100%; }
  .fv-meter-row > div { flex-direction: column; align-items: center; gap: 4px; }
  .fv-connection-path { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fv-connection-path li:nth-child(2)::after { content: '↓'; right: 46%; top: auto; bottom: -22px; }
  .fv-connection-path li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .fv-connection-path li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .fv-connection-path li:nth-child(3)::after { content: '←'; left: -17px; right: auto; }
}
@media (max-width: 420px) {
  .fv-dot-inputs th, .fv-dot-inputs td { padding: 6px 3px; }
  .fv-dot-inputs th:first-child { width: 42px; }
  .fv-dot-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-dot-work { gap: 12px; }
  .fv-dot-phases { gap: 8px; }
  .fv-dot-phases li { padding: 12px 4px; }
  .fpga-visual { padding: 18px 12px; }
  .fv-architecture-row { gap: 10px; grid-template-columns: minmax(0, 1fr) 48px; }
  .fv-stage { padding: 8px 4px; }
  .fv-stage-label { font-size: 12px; white-space: normal; min-height: 32px; }
  .fv-chip { min-width: 23px; padding: 5px 3px; font-size: 12px; }
  .fv-timing-logic { grid-template-columns: 3fr 14px 2fr 14px 4fr 14px 2fr; gap: 3px; }
  .fv-delay-block { padding: 12px 3px; }
  .fv-delay-block > span { font-size: 12px; }
  .fv-delay-block output { font-size: 26px; }
  .fv-cut-controls { gap: 4px 16px; }
  .fv-timing-metrics { gap: 12px; }
  .fv-timing-metrics > div + div { padding-left: 12px; }
  .fv-timing-metrics output { font-size: 30px; }
  .fv-budget-row { grid-template-columns: 28px minmax(0, 1fr) 96px; gap: 8px; }
  .fv-count output { font-size: 26px; }
  .fv-count > span { font-size: 12px; }
  .fv-count small { font-size: 12px; }
  .fv-choices, .fv-metric-notes, .fv-applications { grid-template-columns: 1fr; }
  .fv-clock-line { display: block; }
  .fv-clock-line svg { width: 100%; }
  .fv-clock-line > span { display: block; text-align: center; }
  .fv-register small { font-size: 12px; }
  .fv-toolbar { gap: 10px; }
  .fv-toolbar > .fv-tick { width: 100%; }
  .fv-select + .fv-tick { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fpga-visual *, .fpga-visual *::before, .fpga-visual *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}