which DO exist.
========================================================================== */
/* ── Header / TopBar – frosted glass ─────────────────────────────────── */
html.dark header,
.dark header {
background: var(--inso-bg-shell) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
border-bottom-color: var(--inso-border-subtle) !important;
}
/* ── Main content area ───────────────────────────────────────────────── */
html.dark main,
.dark main {
animation: inso-fadeIn 0.4s ease forwards;
}
/* ── Footer – frosted glass ──────────────────────────────────────────── */
html.dark footer,
.dark footer {
background: rgba(10, 10, 15, 0.70) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-top-color: var(--inso-border-subtle) !important;
}
html.dark footer a,
.dark footer a {
transition: color var(--inso-transition-fast) !important;
}
html.dark footer a:hover,
.dark footer a:hover {
color: #818cf8 !important;
}
/* ── Sidebar (best-effort div targeting) ─────────────────────────────── */
/* The sidebar Flex component often has an inline border-right style. */
/* We target it cautiously to add glass without breaking layout. */
html.dark [style*="border-right"] {
background: var(--inso-bg-shell-strong) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
/* Sidebar active navigation item */
html.dark [style*="border-right"] a[aria-current="page"],
html.dark [style*="border-right"] [data-active="true"] {
background: rgba(99, 102, 241, 0.12) !important;
color: #818cf8 !important;
}
html.dark [style*="border-right"] a:hover {
background: var(--inso-bg-hover) !important;
}
/* ==========================================================================
SECTION 5 — Tables
========================================================================== */
html.dark table,
.dark table {
border-collapse: separate !important;
border-spacing: 0 !important;
}
html.dark table thead th,
.dark table thead th {
background: rgba(255, 255, 255, 0.02) !important;
border-bottom: 1px solid var(--inso-border-default) !important;
color: rgba(255, 255, 255, 0.50) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
font-size: 0.75rem !important;
letter-spacing: 0.05em !important;
}
html.dark table td,
.dark table td {
border-bottom: 1px solid var(--inso-border-subtle) !important;
}
html.dark table tbody tr,
.dark table tbody tr {
transition: background var(--inso-transition-fast) !important;
}
html.dark table tbody tr:hover,
.dark table tbody tr:hover {
background: var(--inso-bg-hover) !important;
}
/* Staggered row entrance animation */
html.dark main table tbody tr { animation: inso-stagger 0.3s ease both; }
html.dark main table tbody tr:nth-child(1) { animation-delay: 0.02s; }
html.dark main table tbody tr:nth-child(2) { animation-delay: 0.04s; }
html.dark main table tbody tr:nth-child(3) { animation-delay: 0.06s; }
html.dark main table tbody tr:nth-child(4) { animation-delay: 0.08s; }
html.dark main table tbody tr:nth-child(5) { animation-delay: 0.10s; }
html.dark main table tbody tr:nth-child(6) { animation-delay: 0.12s; }
html.dark main table tbody tr:nth-child(7) { animation-delay: 0.14s; }
html.dark main table tbody tr:nth-child(8) { animation-delay: 0.16s; }
html.dark main table tbody tr:nth-child(9) { animation-delay: 0.18s; }
html.dark main table tbody tr:nth-child(10) { animation-delay: 0.20s; }
html.dark main table tbody tr:nth-child(11) { animation-delay: 0.22s; }
html.dark main table tbody tr:nth-child(12) { animation-delay: 0.24s; }
html.dark main table tbody tr:nth-child(13) { animation-delay: 0.26s; }
html.dark main table tbody tr:nth-child(14) { animation-delay: 0.28s; }
html.dark main table tbody tr:nth-child(15) { animation-delay: 0.30s; }
/* ==========================================================================
SECTION 6 — Buttons
========================================================================== */
/* ── Primary / solid → indigo gradient ───────────────────────────────── */
html.dark button[data-variant="solid"],
html.dark a[data-variant="solid"],
.dark button[data-variant="solid"],
.dark a[data-variant="solid"] {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
border: none !important;
color: white !important;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25) !important;
transition: all var(--inso-transition-base) !important;
}
html.dark button[data-variant="solid"]:hover,
html.dark a[data-variant="solid"]:hover,
.dark button[data-variant="solid"]:hover,
.dark a[data-variant="solid"]:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
filter: brightness(1.1) !important;
}
html.dark button[data-variant="solid"]:active,
html.dark a[data-variant="solid"]:active,
.dark button[data-variant="solid"]:active,
.dark a[data-variant="solid"]:active {
transform: translateY(0) !important;
filter: brightness(0.95) !important;
}
/* ── Outline buttons ─────────────────────────────────────────────────── */
html.dark button[data-variant="outline"],
.dark button[data-variant="outline"] {
border-color: var(--inso-border-default) !important;
background: var(--inso-bg-card) !important;
transition: all var(--inso-transition-base) !important;
}
html.dark button[data-variant="outline"]:hover,
.dark button[data-variant="outline"]:hover {
border-color: var(--inso-border-strong) !important;
background: var(--inso-bg-card-hover) !important;
}
/* ── Ghost buttons ───────────────────────────────────────────────────── */
html.dark button[data-variant="ghost"],
.dark button[data-variant="ghost"] {
transition: all var(--inso-transition-fast) !important;
}
html.dark button[data-variant="ghost"]:hover,
.dark button[data-variant="ghost"]:hover {
background: var(--inso-bg-hover) !important;
}
/* ── Subtle buttons ──────────────────────────────────────────────────── */
html.dark button[data-variant="subtle"],
.dark button[data-variant="subtle"] {
background: rgba(99, 102, 241, 0.08) !important;
color: #818cf8 !important;
transition: all var(--inso-transition-fast) !important;
}
html.dark button[data-variant="subtle"]:hover,
.dark button[data-variant="subtle"]:hover {
background: rgba(99, 102, 241, 0.14) !important;
}
/* ==========================================================================
SECTION 7 — Inputs / Search
========================================================================== */
html.dark input,
html.dark textarea,
html.dark select,
.dark input,
.dark textarea,
.dark select {
transition: border-color var(--inso-transition-fast), box-shadow var(--inso-transition-fast) !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus,
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
border-color: rgba(99, 102, 241, 0.50) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
outline: none !important;
}
/* Search input specific */
html.dark input[type="search"],
.dark input[type="search"] {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark input[type="search"]:focus,
.dark input[type="search"]:focus {
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(99, 102, 241, 0.50) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 0 20px rgba(99, 102, 241, 0.06) !important;
}
/* Read-only inputs */
html.dark input[readonly],
html.dark textarea[readonly],
.dark input[readonly],
.dark textarea[readonly] {
background: rgba(255, 255, 255, 0.02) !important;
border-color: rgba(255, 255, 255, 0.04) !important;
cursor: default !important;
}
/* Error state */
html.dark input[aria-invalid="true"],
html.dark textarea[aria-invalid="true"],
.dark input[aria-invalid="true"],
.dark textarea[aria-invalid="true"] {
border-color: rgba(239, 68, 68, 0.50) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}
/* ==========================================================================
SECTION 8 — Badges
========================================================================== */
html.dark [data-recipe="badge"],
.dark [data-recipe="badge"] {
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
font-weight: 500 !important;
transition: all var(--inso-transition-fast) !important;
}
/* Per-color overrides via data-colorpalette */
html.dark [data-colorpalette="green"],
.dark [data-colorpalette="green"] {
background: rgba(16, 185, 129, 0.12) !important;
color: #34d399 !important;
}
html.dark [data-colorpalette="red"],
.dark [data-colorpalette="red"] {
background: rgba(239, 68, 68, 0.12) !important;
color: #f87171 !important;
}
html.dark [data-colorpalette="orange"],
.dark [data-colorpalette="orange"] {
background: rgba(245, 158, 11, 0.12) !important;
color: #fbbf24 !important;
}
html.dark [data-colorpalette="yellow"],
.dark [data-colorpalette="yellow"] {
background: rgba(234, 179, 8, 0.12) !important;
color: #facc15 !important;
}
html.dark [data-colorpalette="blue"],
.dark [data-colorpalette="blue"] {
background: rgba(99, 102, 241, 0.12) !important;
color: #818cf8 !important;
}
html.dark [data-colorpalette="purple"],
.dark [data-colorpalette="purple"] {
background: rgba(139, 92, 246, 0.12) !important;
color: #a78bfa !important;
}
html.dark [data-colorpalette="pink"],
.dark [data-colorpalette="pink"] {
background: rgba(236, 72, 153, 0.12) !important;
color: #f472b6 !important;
}
html.dark [data-colorpalette="teal"],
.dark [data-colorpalette="teal"] {
background: rgba(20, 184, 166, 0.12) !important;
color: #2dd4bf !important;
}
html.dark [data-colorpalette="cyan"],
.dark [data-colorpalette="cyan"] {
background: rgba(6, 182, 212, 0.12) !important;
color: #22d3ee !important;
}
html.dark [data-colorpalette="gray"],
.dark [data-colorpalette="gray"] {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.70) !important;
}
/* ==========================================================================
SECTION 9 — Dialogs / Modals / Popovers / Menus / Tooltips / Toasts
========================================================================== */
/* ── Dialogs / Modals ────────────────────────────────────────────────── */
html.dark [data-scope="dialog"] [data-part="content"],
html.dark [role="dialog"],
.dark [data-scope="dialog"] [data-part="content"],
.dark [role="dialog"] {
background: rgba(13, 13, 18, 0.95) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-2xl) !important;
animation: inso-fadeInUp 0.25s ease forwards !important;
}
/* Dialog overlay / backdrop */
html.dark [data-scope="dialog"] [data-part="backdrop"],
html.dark [data-scope="dialog"] [data-part="positioner"]::before,
.dark [data-scope="dialog"] [data-part="backdrop"] {
background: rgba(0, 0, 0, 0.60) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
/* Dialog header/footer subtle borders */
html.dark [role="dialog"] header,
.dark [role="dialog"] header {
border-bottom-color: var(--inso-border-subtle) !important;
}
html.dark [role="dialog"] footer,
.dark [role="dialog"] footer {
border-top-color: var(--inso-border-subtle) !important;
}
/* ── Drawer ──────────────────────────────────────────────────────────── */
html.dark [data-scope="drawer"] [data-part="content"],
.dark [data-scope="drawer"] [data-part="content"] {
background: rgba(13, 13, 18, 0.95) !important;
backdrop-filter: blur(24px) saturate(150%) !important;
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
border-color: var(--inso-border-default) !important;
}
/* ── Tooltips ────────────────────────────────────────────────────────── */
html.dark [data-scope="tooltip"] [data-part="content"],
html.dark [role="tooltip"],
.dark [data-scope="tooltip"] [data-part="content"],
.dark [role="tooltip"] {
background: rgba(15, 15, 20, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-md) !important;
color: rgba(255, 255, 255, 0.92) !important;
animation: inso-slideDown 0.15s ease !important;
}
/* ── Popovers ────────────────────────────────────────────────────────── */
html.dark [data-scope="popover"] [data-part="content"],
.dark [data-scope="popover"] [data-part="content"] {
background: rgba(13, 13, 18, 0.95) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-xl) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50) !important;
}
/* ── Dropdown / Select menus ─────────────────────────────────────────── */
html.dark [data-scope="select"] [data-part="content"],
html.dark [data-scope="menu"] [data-part="content"],
html.dark [role="listbox"],
html.dark [role="menu"],
.dark [data-scope="select"] [data-part="content"],
.dark [data-scope="menu"] [data-part="content"],
.dark [role="listbox"],
.dark [role="menu"] {
background: rgba(13, 13, 18, 0.95) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-lg) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
animation: inso-slideDown 0.15s ease !important;
}
/* Menu / select items */
html.dark [role="option"],
html.dark [role="menuitem"],
.dark [role="option"],
.dark [role="menuitem"] {
transition: background var(--inso-transition-fast) !important;
border-radius: var(--inso-radius-sm) !important;
}
html.dark [role="option"]:hover,
html.dark [role="menuitem"]:hover,
.dark [role="option"]:hover,
.dark [role="menuitem"]:hover {
background: var(--inso-bg-hover) !important;
}
html.dark [role="option"][data-selected],
html.dark [role="option"][aria-selected="true"],
.dark [role="option"][data-selected],
.dark [role="option"][aria-selected="true"] {
background: rgba(99, 102, 241, 0.12) !important;
color: #818cf8 !important;
}
/* Menu group labels */
html.dark [role="group"] > [role="presentation"],
.dark [role="group"] > [role="presentation"] {
color: rgba(255, 255, 255, 0.40) !important;
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ── Toast notifications ─────────────────────────────────────────────── */
html.dark [data-scope="toast"] [data-part="root"],
.dark [data-scope="toast"] [data-part="root"] {
background: rgba(15, 15, 20, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-lg) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
}
/* Toast type indicators via left-border accent */
html.dark [data-scope="toast"][data-type="error"] [data-part="root"],
.dark [data-scope="toast"][data-type="error"] [data-part="root"] {
border-left: 3px solid #ef4444 !important;
}
html.dark [data-scope="toast"][data-type="success"] [data-part="root"],
.dark [data-scope="toast"][data-type="success"] [data-part="root"] {
border-left: 3px solid #10b981 !important;
}
html.dark [data-scope="toast"][data-type="info"] [data-part="root"],
.dark [data-scope="toast"][data-type="info"] [data-part="root"] {
border-left: 3px solid #6366f1 !important;
}
html.dark [data-scope="toast"][data-type="warning"] [data-part="root"],
.dark [data-scope="toast"][data-type="warning"] [data-part="root"] {
border-left: 3px solid #f59e0b !important;
}
html.dark [data-scope="toast"][data-type="loading"] [data-part="root"],
.dark [data-scope="toast"][data-type="loading"] [data-part="root"] {
border-left: 3px solid rgba(255, 255, 255, 0.30) !important;
}
/* ==========================================================================
SECTION 10 — Tabs
========================================================================== */
html.dark [role="tablist"],
.dark [role="tablist"] {
border-bottom-color: var(--inso-border-subtle) !important;
}
html.dark [role="tablist"] button,
.dark [role="tablist"] button {
transition: all var(--inso-transition-fast) !important;
color: rgba(255, 255, 255, 0.50) !important;
}
html.dark [role="tablist"] button:hover,
.dark [role="tablist"] button:hover {
color: rgba(255, 255, 255, 0.92) !important;
}
html.dark [role="tablist"] button[aria-selected="true"],
html.dark [role="tablist"] [data-selected],
.dark [role="tablist"] button[aria-selected="true"],
.dark [role="tablist"] [data-selected] {
color: #818cf8 !important;
border-color: #6366f1 !important;
}
/* Segmented / enclosed tabs */
html.dark [role="tablist"] button[data-selected][data-variant="enclosed"],
.dark [role="tablist"] button[data-selected][data-variant="enclosed"] {
background: rgba(99, 102, 241, 0.12) !important;
color: #818cf8 !important;
}
html.dark [role="tabpanel"],
.dark [role="tabpanel"] {
animation: inso-fadeIn 0.25s ease forwards !important;
}
/* ==========================================================================
SECTION 11 — Code blocks
========================================================================== */
html.dark pre,
.dark pre {
background: rgba(0, 0, 0, 0.40) !important;
border: 1px solid var(--inso-border-subtle) !important;
border-radius: var(--inso-radius-md) !important;
overflow-x: auto;
}
html.dark code,
.dark code {
background: rgba(99, 102, 241, 0.10) !important;
color: #818cf8 !important;
padding: 0.15rem 0.4rem !important;
border-radius: 4px !important;
font-size: 0.875em !important;
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Cascadia Code', monospace !important;
}
/* Inline code inside should reset */
html.dark pre code,
.dark pre code {
background: transparent !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.92) !important;
border-radius: 0 !important;
}
/* ==========================================================================
SECTION 12 — Pagination
========================================================================== */
html.dark [aria-label*="pagination"],
html.dark [aria-label*="Pagination"],
.dark [aria-label*="pagination"],
.dark [aria-label*="Pagination"] {
gap: 4px;
}
html.dark [aria-label*="pagination"] button,
html.dark [aria-label*="Pagination"] button,
.dark [aria-label*="pagination"] button,
.dark [aria-label*="Pagination"] button {
transition: all var(--inso-transition-fast) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark [aria-label*="pagination"] button:hover,
html.dark [aria-label*="Pagination"] button:hover,
.dark [aria-label*="pagination"] button:hover,
.dark [aria-label*="Pagination"] button:hover {
background: var(--inso-bg-hover) !important;
border-color: var(--inso-border-strong) !important;
}
html.dark [aria-label*="pagination"] button[data-selected],
html.dark [aria-label*="pagination"] button[aria-current="page"],
html.dark [aria-label*="Pagination"] button[data-selected],
html.dark [aria-label*="Pagination"] button[aria-current="page"],
.dark [aria-label*="pagination"] button[data-selected],
.dark [aria-label*="pagination"] button[aria-current="page"] {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: white !important;
border: none !important;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.30) !important;
}
/* ==========================================================================
SECTION 13 — Progress bars
========================================================================== */
html.dark [role="progressbar"],
.dark [role="progressbar"] {
background: var(--inso-bg-card) !important;
border-radius: 9999px !important;
overflow: hidden;
}
html.dark [role="progressbar"] > div,
.dark [role="progressbar"] > div {
background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
border-radius: 9999px !important;
transition: width 0.5s ease !important;
}
/* Circle progress (SVG-based) */
html.dark [role="progressbar"] svg circle:last-child,
.dark [role="progressbar"] svg circle:last-child {
stroke: #6366f1 !important;
}
/* ==========================================================================
SECTION 14 — Miscellaneous
──────────────────────────────────────────────────────────────────────────
Breadcrumbs, alerts, switches, focus rings, copy buttons, dividers
========================================================================== */
/* ── Breadcrumbs ─────────────────────────────────────────────────────── */
html.dark [aria-label="breadcrumb"] a,
.dark [aria-label="breadcrumb"] a {
transition: color var(--inso-transition-fast) !important;
color: rgba(255, 255, 255, 0.50) !important;
}
html.dark [aria-label="breadcrumb"] a:hover,
.dark [aria-label="breadcrumb"] a:hover {
color: #818cf8 !important;
}
html.dark [aria-label="breadcrumb"] li:last-child,
.dark [aria-label="breadcrumb"] li:last-child {
color: rgba(255, 255, 255, 0.92) !important;
}
/* ── Alerts ──────────────────────────────────────────────────────────── */
html.dark [role="alert"],
.dark [role="alert"] {
background: var(--inso-bg-card) !important;
border: 1px solid var(--inso-border-default) !important;
border-radius: var(--inso-radius-lg) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
html.dark [role="alert"][data-status="error"],
.dark [role="alert"][data-status="error"] {
border-left: 3px solid #ef4444 !important;
background: rgba(239, 68, 68, 0.06) !important;
}
html.dark [role="alert"][data-status="warning"],
.dark [role="alert"][data-status="warning"] {
border-left: 3px solid #f59e0b !important;
background: rgba(245, 158, 11, 0.06) !important;
}
html.dark [role="alert"][data-status="success"],
.dark [role="alert"][data-status="success"] {
border-left: 3px solid #10b981 !important;
background: rgba(16, 185, 129, 0.06) !important;
}
html.dark [role="alert"][data-status="info"],
.dark [role="alert"][data-status="info"] {
border-left: 3px solid #6366f1 !important;
background: rgba(99, 102, 241, 0.06) !important;
}
/* ── Switches / Toggles ──────────────────────────────────────────────── */
html.dark [role="switch"],
.dark [role="switch"] {
transition: background var(--inso-transition-fast) !important;
}
html.dark [role="switch"][aria-checked="true"],
.dark [role="switch"][aria-checked="true"] {
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
html.dark [role="switch"][aria-checked="false"],
.dark [role="switch"][aria-checked="false"] {
background: rgba(255, 255, 255, 0.12) !important;
}
/* ── Focus ring (accessibility) ──────────────────────────────────────── */
html.dark input:focus-visible,
html.dark button:focus-visible,
html.dark a:focus-visible,
html.dark select:focus-visible,
html.dark textarea:focus-visible,
html.dark [tabindex]:focus-visible,
.dark input:focus-visible,
.dark button:focus-visible,
.dark a:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible,
.dark [tabindex]:focus-visible {
outline: 2px solid rgba(99, 102, 241, 0.50) !important;
outline-offset: 2px !important;
}
/* ── Copy buttons ────────────────────────────────────────────────────── */
html.dark [aria-label="Copy"],
html.dark [aria-label="Copy to clipboard"],
.dark [aria-label="Copy"],
.dark [aria-label="Copy to clipboard"] {
color: rgba(255, 255, 255, 0.40) !important;
transition: color var(--inso-transition-fast) !important;
}
html.dark [aria-label="Copy"]:hover,
html.dark [aria-label="Copy to clipboard"]:hover,
.dark [aria-label="Copy"]:hover,
.dark [aria-label="Copy to clipboard"]:hover {
color: #818cf8 !important;
}
/* ── Hash / address monospace ────────────────────────────────────────── */
html.dark [data-hash],
.dark [data-hash] {
font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Cascadia Code', monospace !important;
}
/* ── Dividers /