Constant SHARED_CSS 

const SHARED_CSS: &str = "/* Dark theme aligned with apps/portal globals.css.\n *\n * The portal uses oklch with hue ~270 (cool slightly-purple navy) and a warm\n * amber primary (oklch(0.77 0.16 70)). Bulma 1\'s component variables derive\n * from HSL lightness channels, so we override both the HSL scheme variables\n * (so Bulma derives boxes/tables/buttons/tags correctly) AND a handful of\n * surface variables in oklch directly to match the portal exactly.\n *\n * Reference: apps/portal/src/app/globals.css `.dark` block. */\n\n:root {\n  /* Direct copy of apps/portal/src/app/globals.css `.dark` tokens so this\n   * report visually matches the portal exactly. */\n  --wl-primary: oklch(0.77 0.16 70);\n  --wl-primary-hover: oklch(0.82 0.17 70);\n  --wl-bg: oklch(0.145 0.014 270);\n  --wl-bg-card: oklch(0.17 0.016 270);\n  --wl-bg-popover: oklch(0.21 0.02 270);\n  --wl-bg-muted: oklch(0.195 0.018 270);\n  --wl-bg-accent: oklch(0.23 0.022 270);\n  --wl-fg: oklch(0.985 0.005 270);\n  --wl-fg-muted: oklch(0.72 0.022 270);\n  --wl-border: oklch(0.985 0.005 270 / 0.12);\n  --wl-border-strong: oklch(0.985 0.005 270 / 0.18);\n  --wl-destructive: oklch(0.704 0.191 22.216);\n  --wl-success: oklch(0.72 0.13 154);\n  --wl-radius: 0.625rem;\n}\n\n[data-theme=\"dark\"] {\n  /* HSL approximations of the portal palette so Bulma\'s HSL-derived\n   * components (button, tag, table) inherit correctly. Hue 270, low\n   * saturation, dark lightness. */\n  --bulma-scheme-h: 270;\n  --bulma-scheme-s: 8%;\n  --bulma-scheme-main-l: 11%;\n  --bulma-scheme-main-bis-l: 14%;\n  --bulma-scheme-main-ter-l: 17%;\n  --bulma-background-l: 14%;\n  --bulma-background-h: 270;\n  --bulma-background-s: 8%;\n\n  --bulma-text-l: 97%;\n  --bulma-text-strong-l: 100%;\n  --bulma-text-weak-l: 70%;\n\n  --bulma-border-l: 22%;\n  --bulma-border-weak-l: 17%;\n\n  /* Brand link / primary = warm amber (portal --primary in dark mode). */\n  --bulma-link-h: 70;\n  --bulma-link-s: 70%;\n  --bulma-link-l: 65%;\n  --bulma-info-h: 70;\n  --bulma-info-s: 70%;\n  --bulma-info-l: 65%;\n\n  --bulma-hover-background-l-delta: 5%;\n  --bulma-active-background-l-delta: 10%;\n\n  /* Surface overrides that go to oklch directly. */\n  --bulma-body-background-color: var(--wl-bg);\n  --bulma-body-color: var(--wl-fg);\n\n  /* Box: subtle 1px border on a card-tinted background. Removes Bulma\'s\n   * default elevation shadow that made boxes feel \"lifted\" away from the\n   * portal\'s flat dark style. */\n  --bulma-box-background-color: var(--wl-bg-card);\n  --bulma-box-shadow: none;\n  --bulma-box-color: var(--wl-fg);\n  --bulma-box-radius: var(--wl-radius);\n\n  --bulma-table-background-color: transparent;\n  --bulma-table-cell-border-color: var(--wl-border);\n  --bulma-table-row-hover-background-color: oklch(1 0 0 / 0.03);\n  --bulma-table-striped-row-even-background-color: oklch(1 0 0 / 0.015);\n  --bulma-table-color: var(--wl-fg);\n\n  --bulma-footer-background-color: transparent;\n  --bulma-footer-padding: 0.75rem 1.5rem;\n\n  /* Code spans in the footer. */\n  --bulma-code-background: var(--wl-bg-popover);\n  --bulma-code-color: var(--wl-fg);\n\n  /* Tag/button addons used by the meta bar in the bench report. */\n  --bulma-tag-background-color: var(--wl-bg-popover);\n  --bulma-tag-color: var(--wl-fg-muted);\n}\n\n/* Bulma\'s default `.box` has a 6px-radius pill, the portal uses 10px (0.625rem).\n * Apply explicitly so the box matches the portal\'s card radius. */\n.box {\n  border-radius: var(--wl-radius);\n  border: 1px solid var(--wl-border);\n}\n\nhtml,\nbody {\n  background-color: var(--wl-bg);\n  color: var(--wl-fg);\n}\n\n/* Reusable weak text helper that meets 4.5:1 against the dark scheme. */\n.has-text-weak {\n  color: var(--wl-fg-muted);\n}\n\n/* Tabular numerics throughout the tables \u{2014} easier to scan numbers. */\n.table {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: \"tnum\";\n  font-size: 13px;\n}\n.table thead th {\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: hsl(240, 8%, 60%);\n}\n.table td.has-text-right,\n.table th.has-text-right {\n  font-family: \"Geist Mono\", ui-monospace, monospace;\n}\n.table td:first-child {\n  font-family: \"Geist Mono\", ui-monospace, monospace;\n}\n\n/* Defensive: the HTML `hidden` attribute should map to display:none via the\n * UA stylesheet, but Bulma\'s heavy-handed component rules sometimes win the\n * cascade. Force it. */\n[hidden] {\n  display: none !important;\n}\n\n/* Visually-hidden caption for accessibility. */\n.is-sr-only {\n  position: absolute !important;\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}\n\n/* ---------- Chart containers ---------- */\n\n.chart {\n  width: 100%;\n  height: 420px;\n}\n.chart-tall {\n  width: 100%;\n  height: 560px;\n}\n\n/* Detail box to the right of the items spec chart: clamp its height to the\n * chart\'s so the scroll area doesn\'t push the page. Sticky thead keeps the\n * column headers visible while scrolling through items. */\n.spec-detail {\n  max-height: 560px;\n  display: flex;\n  flex-direction: column;\n}\n.spec-detail .table-container {\n  flex: 1;\n  overflow-y: auto;\n}\n.spec-detail thead th {\n  position: sticky;\n  top: 0;\n  background-color: var(--wl-bg-elevated);\n  z-index: 1;\n}\n.chart-label {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: hsl(240, 8%, 60%);\n  margin: 0 0 12px 0;\n}\n\n/* Bar chart cursor. The chart is clickable (opens item inspect URL). */\n[data-chart^=\"items-bars\"] {\n  cursor: pointer;\n}\n\n/* ---------- Delta tier classes (matrix cells + ranking pct column) ---------- */\n\n.pos {\n  color: var(--wl-success);\n  font-weight: 600;\n}\n.neg {\n  color: var(--wl-destructive);\n  font-weight: 600;\n}\n\n.matrix-table {\n  font-size: 12px;\n}\n.matrix-table th.matrix-spec {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  text-align: left;\n  white-space: nowrap;\n  padding: 8px 4px;\n  font-family: \"Geist Mono\", ui-monospace, monospace;\n  text-transform: none;\n  letter-spacing: 0;\n  font-size: 11px;\n}\n.matrix-table td.matrix-cell {\n  font-family: \"Geist Mono\", ui-monospace, monospace;\n  text-align: right;\n  padding: 4px 6px;\n  min-width: 56px;\n}\n.matrix-table td.matrix-item {\n  white-space: nowrap;\n  font-family: \"Geist Mono\", ui-monospace, monospace;\n  font-size: 11px;\n}\n.matrix-cell.tier-best {\n  background-color: oklch(0.72 0.13 154 / 0.18);\n  color: oklch(0.78 0.13 154);\n  font-weight: 700;\n}\n.matrix-cell.tier-good {\n  background-color: oklch(0.72 0.13 154 / 0.08);\n  color: oklch(0.82 0.12 154);\n}\n.matrix-cell.tier-meh {\n  color: var(--wl-fg-muted);\n}\n.matrix-cell.tier-bad {\n  color: var(--wl-destructive);\n}\n.matrix-cell.tier-na {\n  color: oklch(0.72 0.022 270 / 0.5);\n}\n\n/* ---------- Reduced motion ---------- */\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    transition-duration: 0s !important;\n    animation-duration: 0s !important;\n  }\n}\n\n/* ---------- Selection + scrollbars ---------- */\n\n::selection {\n  background: hsla(38, 70%, 55%, 0.2);\n}\n* {\n  scrollbar-width: thin;\n  scrollbar-color: hsla(0, 0%, 100%, 0.1) transparent;\n}\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n::-webkit-scrollbar-thumb {\n  background: hsla(0, 0%, 100%, 0.1);\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb:hover {\n  background: hsla(0, 0%, 100%, 0.2);\n}\n";