/**
 * Studio themes — Royal Purple (default, v1 port) + Graphite (B&W sketch).
 * Tokens + shell overrides: builder stripes, scrollbars, q000, q200, builder tools.
 *
 * UI “white” = --oss-ui-white (#f5f5f5, Osbard sails). #ffffff = plastic pop — use sparingly.
 * Art canvas / paper = --bg-canvas (#ffffff).
 */

:root {
  --oss-ui-white: #f5f5f5;
  /** Universal UI prose until Storybook Prose LM ships. */
  --oss-font-ui: Lexend, sans-serif;
}

/* Lexend everywhere UI prose runs — popups, cards, rails, form controls. */
body.oss-body,
body.oss-body :is(
  button,
  input,
  select,
  textarea,
  optgroup,
  .oss-dropdown,
  .oss-hud,
  .oss-hpp-lobby,
  .q400-tool-popup,
  .q100-canvas-popup,
  .q300-script-popup,
  .q300-shapes-popup,
  .drawing-settings-popup-panel,
  .oss-opacity-popup,
  .oss-image-preresize-dialog
) {
  font-family: var(--oss-font-ui);
}

.oss-hpp-card__label,
.oss-hpp-card__text,
.oss-hpp-lobby__row-title,
.q400-tool-popup__title,
.q400-tool-popup__opt span,
.q400-tool-popup__section-label,
.q400-zone-label,
.q100-canvas-popup__title,
.canvas-size-opt,
.popup-save-as-label {
  font-family: var(--oss-font-ui);
}

/* ── Royal Purple ── */
body.theme-royal-purple {
  --bg-primary: #160c2b;
  --bg-dark: #160c2b;
  --bg-canvas: #ffffff;
  --oss-builder-odd-bg: #3a236b;
  --oss-builder-even-bg: #231245;
  --oss-builder-odd-stripe-glass: color-mix(in srgb, var(--oss-builder-odd-bg) 58%, transparent);
  --oss-builder-even-stripe-glass: color-mix(in srgb, var(--oss-builder-even-bg) 38%, transparent);
  --oss-ui-white: #f5f5f5;
  --oss-accent: #a98cff;
  --oss-slider-accent: #0087f9;
  --oss-slider-track: rgba(255, 255, 255, 0.22);
  --ui-primary: #8c67d9;
  --ui-light: #a98cff;
  --ui-dark: #5836b5;
  --text-light: #a98cff;
  --text-fg: #f5f5f5;
  --border-medium: rgba(169, 140, 255, 0.4);
  --border-strong: rgba(140, 103, 217, 0.65);
  --toolbar-bg: #231245;
  --toolbar-fg: #f5f5f5;
  --toolbar-arrow-bg: rgba(169, 140, 255, 0.24);
  --toolbar-arrow-hover: rgba(140, 103, 217, 0.42);
  --bg-panel: #3a236b;
  --q200-stage-bg: #160c2b; /* fallback — current stage-bg.webp ≈ AJ palette, not exact */
  --q200-stage-bg-image: url('../img/stage-bg.webp');
  --oss-stage-spotlight-overlay-image: url('../img/stage-spotlights-overlay.webp');
  --oss-rail-edge: #3a236b;
  --oss-rail-border: rgba(169, 140, 255, 0.28);
  --oss-scrollbar-thumb: #f5f5f5;
  --oss-scrollbar-thumb-hover: #a98cff;
  --oss-scrollbar-track: #160c2b;
  --oss-scrollbar-track-stage: rgba(0, 0, 0, 0.15);
  /* HUD + popups — tuned to rail purples (#231245 / #8c67d9), not brown-magenta */
  --oss-hud-bg-rgb: 35, 18, 69;
  --oss-hud-border-rgb: 140, 103, 217;
  /* Peeka! — Standard 90% locked · Glass 30% rest · 90% hover (oss-chrome-surface.css) */
  --oss-chrome-alpha-solid: 0.9;
  --oss-chrome-alpha-hover: 0.9;
  --oss-chrome-alpha-rest: 0.3;
  --oss-hud-border-alpha: 0.45;
  --oss-hud-border-alpha-hover: 0.72;
  --block-min-empty-bg: rgba(90, 60, 140, 0.45);
  --block-min-empty-border: rgba(169, 140, 255, 0.45);
  --block-min-has-bg: #f5f5f5;
  --block-min-has-border: rgba(245, 245, 245, 0.92);
  --oss-thumb-outline-hover-color: rgba(169, 140, 255, 0.65);
  --oss-block-add-bg: rgba(20, 10, 40, 0.5);
  --oss-block-add-bg-hover: rgba(90, 60, 140, 0.55);
  --oss-block-add-bg-hover-open: rgba(90, 60, 140, 0.65);
  --oss-block-add-border: rgba(169, 140, 255, 0.45);
  --oss-block-add-border-hover: rgba(169, 140, 255, 0.75);
  --oss-block-add-text: #d8c8ff;
  --oss-block-add-text-hover: #f0e8ff;
  --oss-block-has-shadow: rgba(140, 103, 217, 0.35);
  --oss-block-has-border-hover: rgba(169, 140, 255, 0.85);
  --oss-block-has-text: #2a1840;
  --oss-block-icon-bg: rgba(20, 10, 40, 0.85);
  --oss-block-icon-hover-bg: rgba(169, 140, 255, 0.14);
  --oss-block-collapse-bg: rgba(20, 10, 40, 0.72);
  --oss-block-collapse-border: rgba(169, 140, 255, 0.55);
  --oss-block-collapse-hover-bg: rgba(90, 60, 140, 0.88);
  /* Popups — HUD purple tint, steady ~97% opacity (not HUD 0.32 fade) */
  --oss-popup-shell-alpha: 0.97;
  --oss-popup-shell-alpha-soft: 0.95;
  --oss-popup-shell-bg: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-popup-shell-bg-soft: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha-soft));
  --oss-popup-border: rgba(var(--oss-hud-border-rgb), var(--oss-hud-border-alpha-hover));
  --oss-popup-border-muted: rgba(169, 140, 255, 0.35);
  --oss-popup-border-medium: rgba(169, 140, 255, 0.45);
  --oss-popup-border-strong: rgba(169, 140, 255, 0.85);
  --oss-popup-border-divider: rgba(169, 140, 255, 0.25);
  --oss-popup-opt-bg: rgba(50, 30, 80, 0.55);
  --oss-popup-opt-bg-hover: rgba(70, 45, 110, 0.72);
  --oss-popup-opt-bg-active: rgba(88, 54, 181, 0.85);
  --oss-popup-opt-bg-active-soft: rgba(88, 54, 181, 0.55);
  --oss-popup-opt-ring: rgba(169, 140, 255, 0.9);
  --oss-popup-input-bg: rgba(20, 10, 40, 0.85);
  --oss-popup-input-bg-dark: rgba(10, 6, 20, 0.55);
  --oss-popup-input-border: rgba(169, 140, 255, 0.4);
  --oss-popup-btn-bg: rgba(140, 103, 217, 0.35);
  --oss-popup-btn-bg-hover: rgba(140, 103, 217, 0.55);
  --oss-popup-btn-border: rgba(169, 140, 255, 0.65);
  --oss-popup-title-text: rgba(235, 225, 255, 0.92);
  --oss-popup-label-text: rgba(235, 225, 255, 0.88);
  --oss-popup-body-text: #f0e8ff;
  --oss-drag-outline: rgba(169, 140, 255, 0.75);
  --oss-drop-tail-border: rgba(169, 140, 255, 0.65);
  --oss-drop-tail-bg: rgba(90, 60, 140, 0.25);
  --oss-sidebar-divider: rgba(169, 140, 255, 0.12);
  --oss-builder-tools-bg: rgba(20, 10, 40, 0.72);
  --oss-footer-border: rgba(169, 140, 255, 0.25);
  --oss-toolbar-divider-fg: rgba(169, 140, 255, 0.55);
  --oss-note-flyout-bg: rgba(60, 32, 100, 0.88);
  --oss-note-flyout-border: #a98cff;
  --oss-dialog-scrim: rgba(8, 4, 18, 0.72);
  --oss-dialog-panel-bg: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-dialog-panel-border: rgba(var(--oss-hud-border-rgb), var(--oss-hud-border-alpha-hover));
  --oss-dialog-btn-bg: #1e1430;
  --oss-dialog-btn-border: #5a4088;
  --oss-dialog-btn-primary-bg: #5836b5;
  --oss-dialog-btn-primary-border: #9b7ad4;
  --oss-pct-opt-bg: rgba(88, 54, 181, 0.45);
  --oss-pct-opt-hover: rgba(140, 103, 217, 0.55);
  --oss-pct-popup-arrow: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-pct-panel-divider: rgba(169, 140, 255, 0.15);
}

body.theme-royal-purple.oss-body {
  background: var(--bg-primary);
  color: var(--text-fg);
}

/* q100/q300 shell opacity — oss-chrome-surface.css (same stack as HUDs); scrollbars only here */
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q100,
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q300,
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q100,
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q300 {
  border-color: var(--oss-rail-border);
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track);
}

body.theme-royal-purple #q200.oss-stage {
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track-stage);
}

body.theme-royal-purple .oss-stage-viewport-scroll {
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track-stage);
}

body.theme-royal-purple .sidebar-block h2,
body.theme-royal-purple .oss-q100-heading {
  font-size: 0.87rem;
}

/* Royal purple builder stripes — #3a236b odd · #231245 even (Peeka Standard + Glass) */
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(odd),
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(odd) {
  background: var(--oss-builder-odd-bg) !important;
}

body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(even),
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(even) {
  background: var(--oss-builder-even-bg) !important;
}

body.oss-chrome-glass:not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(odd),
body.oss-chrome-glass:not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(odd),
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(odd),
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(odd) {
  background: var(--oss-builder-odd-stripe-glass) !important;
}

body.oss-chrome-glass:not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(even),
body.oss-chrome-glass:not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(even),
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q100 .sidebar-block:nth-child(even),
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-royal-purple #q300 .sidebar-block:nth-child(even) {
  background: var(--oss-builder-even-stripe-glass) !important;
}

body.theme-royal-purple #q100 .oss-builder-tools button,
body.theme-royal-purple #q300 .oss-builder-tools button {
  background: transparent;
}

body.theme-royal-purple #q100 .oss-builder-tools button i,
body.theme-royal-purple #q300 .oss-builder-tools button i {
  color: var(--oss-ui-white);
  opacity: 1;
}

body.theme-royal-purple #q100 .oss-builder-tools button:hover,
body.theme-royal-purple #q300 .oss-builder-tools button:hover {
  transform: scale(1.25);
  filter: none;
  box-shadow: none;
}

body.theme-royal-purple #q100 .oss-builder-tools button.active,
body.theme-royal-purple #q300 .oss-builder-tools button.active {
  box-shadow: 0 0 0 2px var(--ui-primary);
  filter: none;
}

body.theme-royal-purple #q100 .oss-builder-tools button.active i,
body.theme-royal-purple #q300 .oss-builder-tools button.active i {
  color: var(--oss-ui-white);
}

body.theme-royal-purple #q100::-webkit-scrollbar-track,
body.theme-royal-purple #q300::-webkit-scrollbar-track {
  background: var(--oss-scrollbar-track);
}

body.theme-royal-purple #q100::-webkit-scrollbar-thumb,
body.theme-royal-purple #q300::-webkit-scrollbar-thumb,
body.theme-royal-purple #oss-stage-scroll::-webkit-scrollbar-thumb,
body.theme-royal-purple .oss-stage-viewport-scroll::-webkit-scrollbar-thumb {
  background: var(--oss-scrollbar-thumb);
}

body.theme-royal-purple #q100::-webkit-scrollbar-thumb:hover,
body.theme-royal-purple #q300::-webkit-scrollbar-thumb:hover,
body.theme-royal-purple #oss-stage-scroll::-webkit-scrollbar-thumb:hover,
body.theme-royal-purple .oss-stage-viewport-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--oss-scrollbar-thumb-hover);
}

body.theme-royal-purple .oss-hpp-title {
  color: var(--oss-ui-white);
}

body.theme-royal-purple {
  /* HPP lobby — dark / light / dark = builder even / odd / even */
  --hpp-lobby-bg: var(--oss-builder-odd-bg);
  --hpp-lobby-head-bg: var(--oss-builder-even-bg);
  --hpp-lobby-foot-bg: var(--oss-builder-even-bg);
  --hpp-lobby-border: var(--oss-rail-border);
  --hpp-lobby-text: var(--oss-ui-white);
  --hpp-lobby-close-fg: var(--oss-ui-white);
  --hpp-lobby-scrim: var(--oss-dialog-scrim);
}

/* ── Graphite ── */
body.theme-graphite {
  --bg-dark: #0a0a0a;
  --bg-canvas: #ffffff;
  --oss-builder-odd-bg: #252525;
  --oss-builder-even-bg: #0f0f0f;
  --oss-ui-white: #f5f5f5;
  --oss-accent: #b8b8b8;
  --oss-slider-accent: #6eb5ff;
  --oss-slider-track: rgba(255, 255, 255, 0.18);
  --ui-primary: #e0e0e0;
  --ui-dark: #f5f5f5;
  --ui-light: #b8b8b8;
  --text-light: #f5f5f5;
  --text-fg: #f5f5f5;
  --border-medium: rgba(255, 255, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.45);
  --toolbar-bg: #0f0f0f;
  --toolbar-fg: #f5f5f5;
  --toolbar-arrow-bg: rgba(255, 255, 255, 0.1);
  --toolbar-arrow-hover: rgba(255, 255, 255, 0.2);
  --bg-panel: #2d2d2d;
  --q200-stage-bg: #5d5d5d; /* fallback — current graphite stage-bg ≈ AJ, not exact */
  --q200-stage-bg-image: url('../img/stage-bg-graphite.webp');
  --oss-stage-spotlight-overlay-image: url('../img/stage-spotlights-overlay-graphite.webp');
  --oss-rail-edge: rgba(255, 255, 255, 0.15);
  --oss-rail-border: rgba(255, 255, 255, 0.15);
  --oss-scrollbar-thumb: #f0f0f0;
  --oss-scrollbar-thumb-hover: #f5f5f5;
  --oss-scrollbar-track: #0a0a0a;
  --oss-scrollbar-track-stage: rgba(0, 0, 0, 0.25);
  --footer-gap: 1rem;
  /* HPP lobby — dark / light / dark = builder even / odd / even */
  --hpp-lobby-bg: var(--oss-builder-odd-bg);
  --hpp-lobby-head-bg: var(--oss-builder-even-bg);
  --hpp-lobby-foot-bg: var(--oss-builder-even-bg);
  --hpp-lobby-border: var(--oss-rail-border);
  --hpp-lobby-text: var(--oss-ui-white);
  --hpp-lobby-close-fg: var(--oss-ui-white);
  --hpp-lobby-scrim: var(--oss-dialog-scrim);
  /* HUD + popups + block bars — graphite chrome (same alphas, neutral rgb) */
  --oss-hud-bg-rgb: 32, 32, 32;
  --oss-hud-border-rgb: 160, 160, 160;
  /* Peeka! — Standard 90% locked · Glass 30% rest · 90% hover (oss-chrome-surface.css) */
  --oss-chrome-alpha-solid: 0.9;
  --oss-chrome-alpha-hover: 0.9;
  --oss-chrome-alpha-rest: 0.3;
  --oss-hud-border-alpha: 0.45;
  --oss-hud-border-alpha-hover: 0.72;
  --block-min-empty-bg: rgba(70, 70, 70, 0.55);
  --block-min-empty-border: rgba(255, 255, 255, 0.35);
  --block-min-has-bg: #f5f5f5;
  --block-min-has-border: rgba(245, 245, 245, 0.92);
  --oss-thumb-outline-hover-color: rgba(255, 255, 255, 0.5);
  --oss-block-add-bg: rgba(20, 20, 20, 0.55);
  --oss-block-add-bg-hover: rgba(90, 90, 90, 0.55);
  --oss-block-add-bg-hover-open: rgba(100, 100, 100, 0.65);
  --oss-block-add-border: rgba(255, 255, 255, 0.35);
  --oss-block-add-border-hover: rgba(255, 255, 255, 0.55);
  --oss-block-add-text: #e0e0e0;
  --oss-block-add-text-hover: #f5f5f5;
  --oss-block-has-shadow: rgba(255, 255, 255, 0.2);
  --oss-block-has-border-hover: rgba(255, 255, 255, 0.75);
  --oss-block-has-text: #1a1a1a;
  --oss-block-icon-bg: rgba(20, 20, 20, 0.85);
  --oss-block-icon-hover-bg: rgba(255, 255, 255, 0.12);
  --oss-block-collapse-bg: rgba(20, 20, 20, 0.72);
  --oss-block-collapse-border: rgba(255, 255, 255, 0.4);
  --oss-block-collapse-hover-bg: rgba(90, 90, 90, 0.88);
  --oss-popup-shell-alpha: 0.97;
  --oss-popup-shell-alpha-soft: 0.95;
  --oss-popup-shell-bg: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-popup-shell-bg-soft: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha-soft));
  --oss-popup-border: rgba(var(--oss-hud-border-rgb), var(--oss-hud-border-alpha-hover));
  --oss-popup-border-muted: rgba(255, 255, 255, 0.25);
  --oss-popup-border-medium: rgba(255, 255, 255, 0.35);
  --oss-popup-border-strong: rgba(255, 255, 255, 0.55);
  --oss-popup-border-divider: rgba(255, 255, 255, 0.18);
  --oss-popup-opt-bg: rgba(55, 55, 55, 0.55);
  --oss-popup-opt-bg-hover: rgba(80, 80, 80, 0.72);
  --oss-popup-opt-bg-active: rgba(110, 110, 110, 0.85);
  --oss-popup-opt-bg-active-soft: rgba(100, 100, 100, 0.55);
  --oss-popup-opt-ring: rgba(255, 255, 255, 0.75);
  --oss-popup-input-bg: rgba(18, 18, 18, 0.85);
  --oss-popup-input-bg-dark: rgba(10, 10, 10, 0.55);
  --oss-popup-input-border: rgba(255, 255, 255, 0.35);
  --oss-popup-btn-bg: rgba(100, 100, 100, 0.45);
  --oss-popup-btn-bg-hover: rgba(130, 130, 130, 0.55);
  --oss-popup-btn-border: rgba(255, 255, 255, 0.45);
  --oss-popup-title-text: rgba(240, 240, 240, 0.92);
  --oss-popup-label-text: rgba(235, 235, 235, 0.88);
  --oss-popup-body-text: #f0f0f0;
  --oss-drag-outline: rgba(255, 255, 255, 0.55);
  --oss-drop-tail-border: rgba(255, 255, 255, 0.45);
  --oss-drop-tail-bg: rgba(120, 120, 120, 0.25);
  --oss-sidebar-divider: rgba(255, 255, 255, 0.1);
  --oss-builder-tools-bg: rgba(20, 20, 20, 0.72);
  --checker-active: #d8d8d8;
  --checker-active-cell: #888888;
  --oss-footer-border: rgba(255, 255, 255, 0.18);
  --oss-toolbar-divider-fg: rgba(255, 255, 255, 0.35);
  --oss-note-flyout-bg: rgba(45, 45, 45, 0.88);
  --oss-note-flyout-border: rgba(255, 255, 255, 0.45);
  --oss-dialog-scrim: rgba(0, 0, 0, 0.72);
  --oss-dialog-panel-bg: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-dialog-panel-border: rgba(var(--oss-hud-border-rgb), var(--oss-hud-border-alpha-hover));
  --oss-dialog-btn-bg: #1a1a1a;
  --oss-dialog-btn-border: rgba(255, 255, 255, 0.35);
  --oss-dialog-btn-primary-bg: #666666;
  --oss-dialog-btn-primary-border: rgba(255, 255, 255, 0.55);
  --oss-pct-opt-bg: rgba(100, 100, 100, 0.45);
  --oss-pct-opt-hover: rgba(130, 130, 130, 0.55);
  --oss-pct-popup-arrow: rgba(var(--oss-hud-bg-rgb), var(--oss-popup-shell-alpha));
  --oss-pct-panel-divider: rgba(255, 255, 255, 0.15);
}

body.theme-graphite.oss-body {
  background: var(--bg-dark);
  color: var(--text-fg);
}

body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-graphite #q100,
body.oss-chrome-opaque:not(.oss-chrome-collapsed).theme-graphite #q300,
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-graphite #q100,
body:not(.oss-chrome-opaque):not(.oss-chrome-collapsed).theme-graphite #q300 {
  border-color: var(--oss-rail-border);
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track);
}

body.theme-graphite #q200.oss-stage {
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track-stage);
}

body.theme-graphite .oss-stage-viewport-scroll {
  scrollbar-color: var(--oss-scrollbar-thumb) var(--oss-scrollbar-track-stage);
}

body.theme-graphite #q100 .oss-builder-tools button,
body.theme-graphite #q300 .oss-builder-tools button {
  background: transparent;
}

body.theme-graphite #q100 .oss-builder-tools button i,
body.theme-graphite #q300 .oss-builder-tools button i {
  color: var(--oss-ui-white);
  opacity: 1;
}

body.theme-graphite #q100 .oss-builder-tools button.active,
body.theme-graphite #q300 .oss-builder-tools button.active {
  box-shadow: 0 0 0 2px var(--ui-primary);
}

body.theme-graphite #q100::-webkit-scrollbar-track,
body.theme-graphite #q300::-webkit-scrollbar-track {
  background: var(--oss-scrollbar-track);
}

body.theme-graphite #q100::-webkit-scrollbar-thumb,
body.theme-graphite #q300::-webkit-scrollbar-thumb,
body.theme-graphite #oss-stage-scroll::-webkit-scrollbar-thumb,
body.theme-graphite .oss-stage-viewport-scroll::-webkit-scrollbar-thumb {
  background: var(--oss-scrollbar-thumb);
}

body.theme-graphite #q100::-webkit-scrollbar-thumb:hover,
body.theme-graphite #q300::-webkit-scrollbar-thumb:hover,
body.theme-graphite #oss-stage-scroll::-webkit-scrollbar-thumb:hover,
body.theme-graphite .oss-stage-viewport-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--oss-scrollbar-thumb-hover);
}

body.theme-graphite .sidebar-block h2,
body.theme-graphite .oss-q100-heading {
  font-size: 0.87rem;
}

body.theme-graphite .oss-hpp-title {
  color: var(--oss-ui-white);
}