/* === Theme tokens ===
   One definition per token: light-dark() resolves against the root's color-scheme, which is
   the only thing the runtime sets (apply_theme_to_dom / the app.html bootstrap / widgets).
   :host covers widgets whose styles are adopted into a shadow root. Tokens that equal another
   in every theme alias it with var(). The white and black high-contrast variants override only
   the tokens that differ from light and dark. */
:root,
:host {
  color-scheme: light dark;
  --page-bg: light-dark(#f1f3f5, #18171c);
  --text-color: light-dark(#374151, #eee);
  --surface-bg: light-dark(rgb(237, 238, 239), rgb(33, 36, 43));
  --border-color: light-dark(#d1d5db, #404040);
  --accent-color: light-dark(#4f46e5, cornflowerblue);
  --surface-bg-hover: light-dark(#e5e7eb, #3a3a3a);
  --accent-hover-color: light-dark(#3730a3, #3b82f6);
  --code-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
  --pre-bg: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --error-btn-bg: light-dark(#dc2626, #7f1d1d);
  --error-btn-bg-hover: light-dark(#b91c1c, #991b1b);
  --error-border: light-dark(1px solid #fca5a5, 1px solid #dc2626);
  --text-color-muted: light-dark(#6b7280, #9ca3af);
  /* svelte-widgets names (SubpageGrid reads both) */
  --text-muted: var(--text-color-muted);
  --main-max-width: 1100px;
  --btn-bg: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.09));
  --btn-bg-hover: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.17));
  --btn-disabled-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.04));
  --tooltip-bg: light-dark(rgba(243, 244, 246, 0.95), rgba(0, 40, 60, 0.95));
  --canvas-tooltip-bg: light-dark(rgba(226, 232, 240, 0.96), rgba(15, 23, 42, 0.96));
  --canvas-tooltip-text-color: light-dark(#0f172a, #f8fafc);
  --tooltip-border: var(--pane-border);
  --plot-bg: transparent;
  --struct-bg: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.07));
  --struct-bg-fullscreen: var(--page-bg);
  --pane-bg: light-dark(rgb(229, 231, 235), rgb(28 29 33));
  --pane-border: light-dark(
    1px solid rgba(0, 0, 0, 0.15),
    1px solid rgba(255, 255, 255, 0.15)
  );
  --pane-bg-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
  --dropzone-border: light-dark(1px solid #9ca3af, 1px solid #4a5568);
  --dropzone-bg: light-dark(rgba(0, 0, 0, 0.02), rgba(45, 55, 72, 0.5));
  --dragover-border: light-dark(1px solid #4f46e5, 1px solid #007acc);
  --dragover-bg: light-dark(rgba(79, 70, 229, 0.1), rgba(0, 122, 204, 0.1));
  --nav-link-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15));
  --nav-link-bg-hover: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2));
  --nav-link-active-color: light-dark(darkseagreen, mediumseagreen);
  --plot-legend-bg-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.2));
  --plot-legend-border: light-dark(
    1px solid rgba(0, 0, 0, 0.2),
    1px solid rgba(255, 255, 255, 0.2)
  );
  --plot-legend-item-color: var(--text-color);
  --plot-legend-item-hover-bg-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  --github-corner-color: var(--page-bg);
  --github-corner-bg: var(--text-color);
  --github-corner-bg-hover: light-dark(#1e40af, #60a5fa);
}
:root[data-theme='white'],
:host([data-theme='white']) {
  --page-bg: #ffffff;
  --text-color: #000000;
  --surface-bg: rgb(250, 250, 250);
  --accent-color: #2563eb;
  --surface-bg-hover: #f3f3f3;
  --accent-hover-color: #1d4ed8;
  --code-bg: rgba(0, 0, 0, 0.02);
  --pre-bg: rgba(0, 0, 0, 0.02);
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;
  --error-btn-bg: #b91c1c;
  --error-btn-bg-hover: #991b1b;
  --error-border: 1px solid #fecaca;
  --text-color-muted: #374151;
  --tooltip-bg: rgba(255, 255, 255, 0.98);
  --canvas-tooltip-bg: rgba(241, 245, 249, 0.98);
  --struct-bg: rgba(0, 0, 0, 0.025);
  --pane-bg: rgb(248, 250, 252);
  --pane-border: 1px solid rgba(0, 0, 0, 0.075);
  --pane-bg-hover: rgba(0, 0, 0, 0.03);
  --dropzone-border: 1px solid #e5e7eb;
  --dropzone-bg: rgba(0, 0, 0, 0.01);
  --dragover-border: 1px solid #2563eb;
  --dragover-bg: rgba(37, 99, 235, 0.05);
  --nav-link-active-color: coral;
  --plot-legend-bg-color: rgba(255, 255, 255, 0.9);
  --plot-legend-border: 1px solid rgba(0, 0, 0, 0.1);
  --github-corner-bg-hover: #1e3a8a;
}
:root[data-theme='black'],
:host([data-theme='black']) {
  --page-bg: #000000;
  --text-color: #f5f5f5;
  --surface-bg: rgb(19, 19, 19);
  --surface-bg-hover: #1f1f1f;
  --accent-hover-color: #0ea5e9;
  --pre-bg: rgba(255, 255, 255, 0.1);
  --success-color: #34d399;
  --warning-color: #fbbf24;
  --error-color: #f87171;
  --error-btn-bg: #991b1b;
  --error-btn-bg-hover: #7f1d1d;
  --error-border: 1px solid #991b1b;
  --text-color-muted: #d1d5db;
  --tooltip-bg: rgba(20, 20, 20, 0.98);
  --canvas-tooltip-bg: rgba(20, 20, 20, 0.98);
  --struct-bg: rgba(255, 255, 255, 0.1);
  --pane-bg: rgb(26, 26, 26);
  --pane-border: 1px solid rgba(255, 255, 255, 0.075);
  --dropzone-border: 1px solid #374151;
  --dropzone-bg: rgba(15, 15, 15, 0.7);
  --dragover-border: 1px solid #0ea5e9;
  --dragover-bg: rgba(14, 165, 233, 0.05);
  --nav-link-active-color: lightseagreen;
  --plot-legend-bg-color: rgba(0, 0, 0, 0.3);
  --plot-legend-border: 1px solid rgba(255, 255, 255, 0.1);
  --github-corner-bg-hover: #38bdf8;
}

/* CSS variables are unlayered so they're available to both layers and to
   components that reference them via var(). Custom properties inherit
   naturally regardless of layer ordering. */
:root {
  --theme-transition-duration: 0.3s;
  --max-text-width: 50em;

  --sms-max-width: 20em;
  --sms-min-height: 19pt;
  --sms-text-color: var(--text-color);

  /* Svelte MultiSelect */
  --sms-options-bg: var(--page-bg);
  --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
  --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
  --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
  --border-radius: 3pt;

  /* Popup menu chrome (view-mode dropdowns, legend menus, context menus, structure popup).
     Ink is paired with the background rather than inherited: a light menu hosted in a dark
     app would otherwise take that app's near-white --text-color onto its options. Each menu
     still exposes its own --*-bg/-color/-border var, defaulting to these. */
  --menu-bg: light-dark(#fff, #2f3137);
  --menu-color: light-dark(#1a1a1a, #eee);
  --menu-border: light-dark(#d0d0d4, #44474f);
  --menu-option-hover-bg: light-dark(#ececef, #3a3d45);
  --menu-option-selected-color: light-dark(#2563eb, #6ea8ff);

  /* DraggablePane chrome. svelte-widgets sets --pane-bg from --page-bg but does not set
     color; without a paired ink token, a light pane inherits a host's light --text-color
     (or an inline VS Code foreground) and becomes unreadable. */
  --pane-bg: var(--page-bg, light-dark(#f1f3f5, #18171c));
  --pane-color: var(--text-color, light-dark(#374151, #eee));
  --pane-muted-color: var(--text-color-muted, light-dark(#6b7280, #a0a0a0));

  /* Single source of truth for viewer control-button icon size, shared by all viewer chromes
     (Structure/Brillouin/Fermi/ConvexHull/Trajectory). Scales with the container but is capped so
     toolbar icons don't grow oversized in fullscreen. Uses rem (not em) so the size is consistent
     across viewers regardless of their local font-size (e.g. Trajectory's controls run at 0.85em).
     Override per viewer by setting this on its wrapper. */
  --ctrl-btn-icon-size: clamp(0.7rem, 2cqmin, 0.85rem);
  --viewer-chrome-icon-size: clamp(0.91rem, 2cqmin, 1rem);

  /* In-viewer overlay stack (inside one viewer container, above its 3D
     canvas): 1 viewport labels · 2 glass chips · 4–6 carousel chrome
     (legend/resize-handle/pager) · 10 draggable panes · 100 dropdowns +
     toasts · 1000 canvas tooltips + error banners. Components fall back to
     these tiers; override per instance via their dedicated --*-z-index vars.
     NOTE (WKWebView/Tauri): overlays that can overlap a 3D canvas also
     need their own compositing layer (will-change: transform) — after hiding
     and re-showing the window, WebKit reattaches canvas layers above
     non-composited overlays regardless of z-index. */
  --z-index-viewer-label: 1;
  --z-index-viewer-chip: 2;
  --z-index-viewer-pane: 10;
  --pane-z-index: var(--z-index-viewer-pane);
  --z-index-viewer-dropdown: 100;
  --z-index-viewer-tooltip: 1000;

  /* App-wide overlay stack: controls < fullscreen/nav < dialogs < floating options.
     These must exceed Threlte HTML overlays, which use very high z-index values. */
  --z-index-overlay-controls: 100000000;
  --z-index-overlay-nav: 100000001;
  --z-index-overlay-dialog: 100000002;
  --z-index-overlay-options: 100000003;
}

/* === Draggable pane chrome ===
   DraggablePane comes from svelte-widgets, so these rules cannot live in a
   matterviz component's scoped <style>. Deliberately unlayered: they used to be
   Svelte component styles, which are unlayered too, and putting them in
   @layer matterviz-components would let any unlayered host rule beat them. */
.draggable-pane {
  /* own compositing layer, or WKWebView paints the canvas over this */
  will-change: transform;
  /* Pair ink with the pane surface (see --pane-bg/--pane-color above). */
  color: var(--pane-color);
  background: var(--pane-bg);
}
.hover-visible:has(.draggable-pane.pane-open) {
  opacity: 1;
  pointer-events: auto;
}
/* Touch devices have no hover, so viewer controls that only fade in while the pointer is over
   the viewer would never appear. Keep them shown there; !important beats the hashed
   component selectors that hide them. */
@media (hover: none) {
  .hover-visible,
  .header-controls,
  .pane-toggle {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
/* Range tracks render ~7px tall; on touch the thumb needs a finger-sized strip to land on
   (amplitude, opacity, slice-depth sliders in viewer panes and toolbars) */
@media (pointer: coarse) {
  input[type='range'] {
    min-height: 24px;
  }
  /* plot chrome (pane toggles, fullscreen button) is ~20px on pointer screens, too small to
     hit reliably; the icons keep their size, the hit area grows */
  .header-controls {
    font-size: 1.2rem;
    --pane-toggle-font-size: 1.1rem;
    --pane-toggle-padding: 5pt;
    --fullscreen-btn-padding: 7pt;
  }
}
body.fullscreen .draggable-pane {
  position: fixed !important; /* In fullscreen, we want viewport-relative positioning */
  top: 3.3em !important;
  right: 1em !important;
  left: auto !important;
}
.draggable-pane h4 {
  margin: var(--pane-h4-margin, 2pt 0);
  font-size: var(--pane-h4-font-size, 0.95em);
}
.draggable-pane hr {
  border: none;
  background: var(--pane-hr-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
  margin: var(--pane-hr-margin, 4pt 0);
  height: 1px;
}
.draggable-pane :where(label) {
  display: inline-flex;
  align-items: center;
  gap: var(--pane-label-gap, 2pt);
}
.draggable-pane :where(input[type='text']) {
  flex: 1;
  padding: var(--pane-input-padding, 4px 6px);
  margin: var(--pane-input-margin, 0 0 0 5pt);
}
.draggable-pane input[type='text'].invalid {
  border-color: var(--error-color, #ff6b6b);
  background: rgba(255, 107, 107, 0.1);
}
.draggable-pane input[type='text'].invalid:focus {
  outline-color: var(--error-color, #ff6b6b);
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}
.draggable-pane input[type='range'] {
  margin-left: 4pt;
  width: 100px;
  flex-shrink: 0;
  flex: 1;
  min-width: 60px;
}
.draggable-pane input[type='color'] {
  width: 2.5em;
  height: 1.3em;
  margin: 0 5pt;
}
.draggable-pane input[type='number'] {
  box-sizing: border-box;
  text-align: center;
  width: 3.5em;
  margin: 0 3pt;
  flex-shrink: 0;
}
.draggable-pane input::-webkit-inner-spin-button {
  display: none;
}
.draggable-pane :where(button) {
  background-color: var(
    --pane-btn-bg,
    var(--btn-bg, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.1)))
  );
}
.draggable-pane .pane-content :where(button) {
  font-size: 1em;
  padding: var(--pane-btn-padding, 3px 6px);
}
.draggable-pane :where(button:hover) {
  background-color: var(
    --pane-btn-bg-hover,
    var(--btn-bg-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.2)))
  );
}
.draggable-pane select {
  margin: 0 0 0 5pt;
  flex: 1;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.8em;
}
.draggable-pane .pane-row {
  display: flex;
  gap: 4pt;
  align-items: center;
}
.draggable-pane .pane-grid {
  display: grid;
  gap: 4pt;
  align-items: center;
}
.draggable-pane .control-group {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
}
.draggable-pane details.settings-group > summary {
  padding: 2pt;
}
/* DraggablePane reserves an 8px inline padding-right for the resize grip, which
   stacks on --pane-padding and makes the right side look looser than the left.
   Drop that extra gutter; the grip still sits on the border. */
.draggable-pane[data-resize='both'],
.draggable-pane[data-resize='width'] {
  padding-right: 0 !important;
}
/* Labels containing range inputs should fill available width */
.draggable-pane label:has(input[type='range']) {
  flex: 1;
}

/* Plot control panes: full-width section titles, related fields sharing a row
   so X/Y (or Mode/Frequency) sit side by side instead of stacked. */
.draggable-pane.compact-settings {
  --pane-h4-margin: 0;
  --pane-h4-font-size: 0.9em;
  --ctrl-value-w: 3.2em;
  --ctrl-gap: 6pt;
  --settings-row-gap: 4pt;
}
.draggable-pane.compact-settings .pane-content {
  font-size: 0.9em;
}
.draggable-pane.compact-settings .settings-section-heading {
  margin: 8pt 0 2pt;
}
.draggable-pane.compact-settings .pane-content > .settings-section-heading:first-child {
  margin-top: 0;
}
.draggable-pane.compact-settings section.flow:not(.ctrl-line):not(.axis-fields) {
  display: flex;
  flex-direction: column;
  gap: 6pt;
  min-width: 0;
}
.draggable-pane.compact-settings .ctrl-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6pt 12pt;
  min-width: 0;
}
.draggable-pane.compact-settings .ctrl-line > :is(label, .setting) {
  display: inline-flex;
  align-items: center;
  gap: 6pt;
  margin: 0;
  min-height: 1.6em;
  flex: 1 1 8.5em;
  min-width: 0;
}
.draggable-pane.compact-settings
  .ctrl-line
  :is(select, input[type='text'], input[type='number']) {
  width: auto;
  min-width: 5em;
  margin: 0;
  flex: 1;
}
.draggable-pane.compact-settings .ctrl-line input[type='color'] {
  margin: 0;
}
.draggable-pane.compact-settings .axis-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  gap: 6pt 12pt;
  align-items: center;
}
.draggable-pane.compact-settings .axis-fields > :is(label, .setting) {
  display: inline-flex;
  align-items: center;
  gap: 6pt;
  margin: 0;
  min-width: 0;
}
.draggable-pane.compact-settings .axis-fields select {
  min-width: 0;
  flex: 1;
}
.draggable-pane.compact-settings .formats > label {
  flex: 1;
  min-width: 8em;
}
.draggable-pane.compact-settings .formats input[type='text'] {
  flex: 1;
  width: 100%;
  min-width: 5em;
}
.draggable-pane.compact-settings .style-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6pt 10pt;
  min-width: 0;
}
.draggable-pane.compact-settings
  :is(.style-row, section.flow)
  > :is(label, .setting):has(input[type='range']) {
  display: grid;
  grid-template-columns: 4.5em var(--ctrl-value-w, 3.2em) minmax(4em, 1fr);
  align-items: center;
  column-gap: 6pt;
  flex: none;
  min-width: 0;
  margin: 0;
}
.draggable-pane.compact-settings .style-row > :is(label, .setting):has(input[type='range']) {
  flex: 1 1 14em;
}
.draggable-pane.compact-settings
  .style-row
  > :is(label, .setting):not(:has(input[type='range'])) {
  display: inline-flex;
  align-items: center;
  gap: 6pt;
  flex: none;
}
.draggable-pane.compact-settings .range-pair {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4pt;
  min-width: 0;
  flex: 1;
}
.draggable-pane.compact-settings .range-pair input[type='number'] {
  width: auto;
  min-width: 3.5em;
  flex: 1;
  margin: 0;
}

/* App-shell styles: page layout, typography, headings, navigation.
   These are only needed by the standalone matterviz demo site.
   When embedded in a host framework, its unlayered CSS takes precedence. */
@layer matterviz-shell {
  /* Targeted theme transitions for performance */
  :where(body, main, button, a, code, kbd, pre, blockquote, textarea, table, input),
  :where(select, label, .theme-control, .toc, svg, path, circle, rect, text),
  :where(.info-pane, .pane-header, .pane-content, .close-button),
  :where(nav > a),
  :where(.theme-control, .theme-control label, .theme-control select) {
    transition:
      background-color var(--theme-transition-duration) ease,
      color var(--theme-transition-duration) ease,
      border-color var(--theme-transition-duration) ease,
      fill var(--theme-transition-duration) ease,
      stroke var(--theme-transition-duration) ease,
      box-shadow var(--theme-transition-duration) ease;
  }
  body {
    background: var(--page-bg);
    padding: 5vh 3vw 3vh;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    margin: auto;
    color: var(--text-color);
    line-height: 1.5;
    /* Sticky footer: footer stays at bottom when content is short */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
  }
  main {
    margin: auto;
    width: 100%;
    max-width: var(--max-text-width);
    container-type: inline-size;
    flex: 1; /* Grow to fill available space (sticky footer) */
  }
  a {
    color: var(--accent-color, cornflowerblue);
    text-decoration: none;
  }
  a:hover {
    color: var(--accent-hover-color, orange);
  }
  blockquote {
    border-left: 3pt solid var(--accent-color, cornflowerblue);
    padding: 3pt 7pt;
    background: rgba(255, 255, 255, 0.2);
    margin: 1em 0;
  }
  blockquote p:first-child {
    margin-top: 0;
  }
  blockquote p:last-child {
    margin-bottom: 0;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: 100px;
  }
  :where(h1, h2, h3, h4, h5, h6):target {
    color: var(--accent-color, cornflowerblue);
  }
  body main > :where(h1, h2, h3, h4, h5, h6) {
    text-align: center;
  }
  /* style heading anchors added by heading_anchors attachment from svelte-widgets */
  :where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
    transition: 0.3s;
    margin-left: 4pt;
    opacity: 0;
  }
  :where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
    opacity: 1;
  }
  .full-bleed {
    --margin: 5vw;
    width: calc(100vw - 2 * var(--margin)) !important;
    margin-left: calc(-50vw + 50% + var(--margin));
    max-width: none !important;
  }
  .bleed-1400 {
    --margin: 5vw;
    width: min(1400px, calc(100vw - 2 * var(--margin))) !important;
    margin-left: calc(-50vw + 50% + max(var(--margin), (100vw - 1400px) / 2));
    max-width: none !important;
  }
}

/* Component base styles: form controls, tables, code blocks.
   MatterViz components (Structure, ConvexHull, plots, etc.) depend on
   these for consistent appearance. Also layered so host frameworks
   can override if needed, but these target elements that typically
   only appear inside MatterViz component trees. */
@layer matterviz-components {
  button,
  a.btn {
    color: var(--text-color);
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius);
    padding: 2pt 4pt;
  }
  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  code,
  kbd {
    overflow-wrap: break-word;
    padding: 1pt 3pt;
    border-radius: var(--border-radius);
    background-color: var(--code-bg);
  }
  kbd {
    font-size: larger;
  }
  pre code {
    background-color: transparent;
    display: inline-block;
    padding: 0;
    width: 100%;
  }
  pre {
    position: relative;
    border-radius: var(--border-radius);
    font-size: 0.95em;
    background-color: var(--pre-bg);
    padding: 1ex 1em;
    overflow-x: auto;
  }
  textarea {
    display: block;
    width: 100%;
    min-height: 100px;
    box-sizing: border-box;
    margin: 1em auto;
  }
  /* Theme-aware form controls (works consistently in notebooks and VSCode/Cursor webviews) */
  :is(
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
    textarea,
    select
  ) {
    background-color: var(--surface-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2px 6px;
  }
  :is(
    input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
    textarea,
    select
  ):focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
  }
  :is(input, textarea)::placeholder {
    color: var(--text-color-muted);
  }
  select option {
    background-color: var(--surface-bg);
    color: var(--text-color);
  }
  /* Modern flat input styling — only reset border for non-text inputs */
  input:is([type='checkbox'], [type='radio'], [type='range'], [type='color']) {
    border: none;
  }
  input[type='range'] {
    --range-track-bg: var(--range-track-bg-override, var(--surface-bg, #2a2f3a));
    --range-track-border: var(--range-track-border-override, var(--border-color, #404040));
    --range-thumb-bg: var(--range-thumb-bg-override, var(--accent-color, #4a9eff));
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    accent-color: var(--range-thumb-bg);
    cursor: pointer;
  }
  input[type='range']::-webkit-slider-runnable-track {
    height: var(--range-track-height, 0.45rem);
    border-radius: 999px;
    background: var(--range-track-bg);
    box-shadow: inset 0 0 0 1px var(--range-track-border);
  }
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    inline-size: var(--range-thumb-size, 0.9rem);
    block-size: var(--range-thumb-size, 0.9rem);
    margin-top: calc(
      (var(--range-track-height, 0.45rem) - var(--range-thumb-size, 0.9rem)) / 2
    );
    border-radius: 50%;
    background: var(--range-thumb-bg);
    box-shadow: 0 0 0 1px var(--surface-bg, #1f242d);
  }
  input[type='range']::-moz-range-track {
    height: var(--range-track-height, 0.45rem);
    border-radius: 999px;
    background: var(--range-track-bg);
    box-shadow: inset 0 0 0 1px var(--range-track-border);
  }
  input[type='range']::-moz-range-progress {
    height: var(--range-track-height, 0.45rem);
    border-radius: 999px;
    background: var(--range-thumb-bg);
  }
  input[type='range']::-moz-range-thumb {
    inline-size: var(--range-thumb-size, 0.9rem);
    block-size: var(--range-thumb-size, 0.9rem);
    border: 0;
    border-radius: 50%;
    background: var(--range-thumb-bg);
    box-shadow: 0 0 0 1px var(--surface-bg, #1f242d);
  }
  input[type='number'] {
    min-width: 40px;
    width: auto;
  }
  input[type='color'] {
    border: none;
    padding: 0;
    outline: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
  }
  input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type='color']::-webkit-color-swatch {
    border: none;
  }
  table {
    display: block;
    max-width: 100%;
    overflow: auto;
    border-collapse: collapse;
  }
  table :is(td, th) {
    border: 1px solid var(--border-color, gray);
    padding: 3pt 12pt;
  }
  table.roomy :is(td, th) {
    padding: 5pt 9pt;
  }
  tbody tr:nth-child(odd) {
    background: color-mix(in hsl, var(--page-bg, black), var(--text-color) 2%);
  }
  :where(ul.selected > li button, button.remove-all) {
    background-color: transparent !important;
  }
}