:root.fo-style-link-hoarder {
  --fo-font-ui: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
  --fo-font-mono: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
  --fo-font-condensed: "FO Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
  --fo-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

:where(.lh-product-document, .ui2-document) {
  color-scheme: light;
  --ui-canvas: var(--fo-canvas);
  --ui-frame: var(--fo-paper);
  --ui-panel: var(--fo-paper);
  --ui-panel-soft: var(--fo-paper-soft);
  --ui-raised: var(--fo-paper-raised);
  --ui-hover: color-mix(in srgb, var(--fo-ink) 7%, var(--fo-paper));
  --ui-input: var(--fo-paper-raised);
  --ui-line: var(--fo-line);
  --ui-line-strong: var(--fo-line-strong);
  --ui-line-dark: rgb(255 255 255 / .1);
  --ui-ink: var(--fo-ink);
  --ui-muted: var(--fo-muted);
  --ui-faint: var(--fo-faint);
  --ui-inverse: var(--fo-inverse);
  --ui-inverse-muted: var(--fo-inverse-muted);
  --ui-coral: var(--fo-coral);
  --ui-coral-soft: var(--fo-coral-soft);
  --ui-mint: var(--fo-green);
  --ui-mint-soft: var(--fo-green-soft);
  --ui-blue: var(--fo-blue);
  --ui-blue-soft: var(--fo-blue-soft);
  --ui-violet: var(--fo-violet);
  --ui-violet-soft: var(--fo-violet-soft);
  --ui-amber: var(--fo-amber);
  --ui-amber-soft: var(--fo-amber-soft);
  --ui-accent: var(--fo-violet);
  --ui-accent-soft: var(--fo-violet-soft);
  --ui-cyan: var(--fo-blue);
  --ui-rail: var(--fo-graphite-2);
  --ui-nav: var(--fo-graphite);
  --ui-popover: var(--fo-paper-raised);
  --ui-meter-track: var(--fo-line-soft);
  --ui-button-primary-bg: var(--fo-violet);
  --ui-button-primary-hover: color-mix(in srgb, var(--fo-violet) 86%, white);
  --ui-button-primary-ink: white;
  --ui-button-secondary-bg: var(--fo-paper-raised);
  --ui-button-secondary-hover: color-mix(in srgb, var(--fo-ink) 7%, var(--fo-paper-raised));
  --ui-button-border: var(--fo-line);
  --ui-preview-base: var(--fo-paper-soft);
  --ui-preview-blue: var(--fo-blue-soft);
  --ui-preview-mint: var(--fo-green-soft);
  --ui-preview-violet: var(--fo-violet-soft);
  --ui-glow: var(--fo-paper-raised);
  --ui-highlight: rgb(255 255 255 / .72);
  --ui-control-shadow: var(--fo-shadow-control);
  --ui-frame-shadow: var(--fo-shadow-float);
  --ui-radius-control: var(--fo-radius-control);
  --ui-radius-panel: var(--fo-radius-surface);
  --ui-radius-frame: var(--fo-radius-frame);
  --ui-shadow-popover: var(--fo-shadow-float);
  --ui-ease-out: var(--fo-ease-out);
  --ui-type-caption: 10px;
  --ui-type-small: 11px;
  --ui-type-body: 12px;
  --ui-type-label: 13px;
  --ui-font: var(--fo-font-ui);
  --mono-font: var(--fo-font-mono);
  --canvas: var(--ui-canvas);
  --ink: var(--ui-ink);
  --body: var(--ui-muted);
  --surface-soft: var(--ui-panel-soft);
  --surface-card: var(--ui-raised);
  --surface-raised: var(--ui-panel);
  --hairline: var(--ui-line);
  --hairline-strong: var(--ui-line-strong);
  --focus: var(--ui-accent);
  --danger: var(--ui-coral);
  --success: var(--ui-mint);
  --warning: var(--ui-amber);
  --backdrop: var(--fo-backdrop);
  --radius-sm: var(--ui-radius-control);
  --radius-md: var(--ui-radius-panel);
  --font-xs: var(--ui-type-caption);
  --font-sm: var(--ui-type-small);
  --font-md: var(--ui-type-body);
  --font-lg: var(--ui-type-label);
  --lh-accent: var(--ui-accent);
  --lh-danger: var(--ui-coral);
  --lh-success: var(--ui-mint);
  --lh-warning: var(--ui-amber);
  --lh-ink: var(--ui-ink);
  --lh-ink-muted: var(--ui-muted);
  --lh-line: var(--ui-line);
  --lh-line-strong: var(--ui-line-strong);
  --lh-paper: var(--ui-canvas);
  --lh-paper-raised: var(--ui-panel);
  --accent-color: 116, 103, 239;
  --lh-theme-toggle-bg: var(--ui-button-secondary-bg);
  --lh-theme-toggle-hover-bg: var(--ui-button-secondary-hover);
  --lh-theme-toggle-hover-ink: var(--ui-ink);
  --lh-theme-toggle-shadow: var(--ui-control-shadow);
}

:root.theme-dark :where(.lh-product-document, .ui2-document) {
  color-scheme: dark;
  --ui-line-dark: rgb(255 255 255 / .08);
  --ui-highlight: rgb(255 255 255 / .07);
  --ui-button-primary-hover: color-mix(in srgb, var(--fo-violet) 86%, white);
  --accent-color: 151, 142, 255;
}

:where(.lh-product-document, .ui2-document) .lh-bg {
  opacity: .1;
  filter: saturate(.45) contrast(1.08);
  transition: opacity 180ms var(--fo-ease-out);
}

:where(.lh-product-document, .ui2-document) .lh-bg[data-animating] {
  opacity: .28;
}

@media (prefers-reduced-motion: reduce) {
  :where(.lh-product-document, .ui2-document) .lh-bg {
    transition: none;
  }
}