/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 720px;
  --sidebar-width: 280px;
  --page-width: 100vw;
  --logo-height: 40px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #ececec;
  --accent-2: #e7e7e7;
  --accent-3: #dededd;
  --accent-4: #d5d5d4;
  --accent-5: #cccccb;
  --accent-6: #c3c3c3;
  --accent-7: #b8b8b7;
  --accent-8: #a5a5a3;
  --accent-9: #1a1a18;
  --accent-10: #31312f;
  --accent-11: #50504e;
  --accent-12: #1f1f1d;

  --accent-a1: #b5c8ff19;
  --accent-a2: #0931ab0c;
  --accent-a3: #0b205416;
  --accent-a4: #0412351f;
  --accent-a5: #06112a29;
  --accent-a6: #020b2432;
  --accent-a7: #040a193e;
  --accent-a8: #03070d52;
  --accent-a9: #010200e5;
  --accent-a10: #010100cc;
  --accent-a11: #000202ab;
  --accent-a12: #020201e0;

  --accent-contrast: #fff;
  --accent-surface: #e5e5e6cc;
  --accent-indicator: #1a1a18;
  --accent-track: #1a1a18;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(94.4% 0.0008 106.7);
      --accent-2: oklch(92.8% 0.0008 106.7);
      --accent-3: oklch(89.9% 0.0011 106.7);
      --accent-4: oklch(87.1% 0.0011 106.7);
      --accent-5: oklch(84.6% 0.0013 106.7);
      --accent-6: oklch(81.8% 0.0013 106.7);
      --accent-7: oklch(78.1% 0.0014 106.7);
      --accent-8: oklch(72% 0.0017 106.7);
      --accent-9: oklch(21.7% 0.0038 106.7);
      --accent-10: oklch(31.2% 0.0038 106.7);
      --accent-11: oklch(43.1% 0.0025 106.7);
      --accent-12: oklch(24% 0.0038 106.7);

      --accent-a1: color(display-p3 0.4824 0.6275 1 / 0.05);
      --accent-a2: color(display-p3 0.0118 0.1765 0.5843 / 0.046);
      --accent-a3: color(display-p3 0.0078 0.0941 0.2627 / 0.083);
      --accent-a4: color(display-p3 0.0039 0.0627 0.1725 / 0.12);
      --accent-a5: color(display-p3 0.0078 0.051 0.1294 / 0.158);
      --accent-a6: color(display-p3 0.0039 0.0392 0.1176 / 0.195);
      --accent-a7: color(display-p3 0.0039 0.0275 0.0706 / 0.24);
      --accent-a8: color(display-p3 0.0039 0.0196 0.0392 / 0.319);
      --accent-a9: color(display-p3 0.0039 0.0078 0 / 0.898);
      --accent-a10: color(display-p3 0.0039 0.0039 0 / 0.8);
      --accent-a11: color(display-p3 0 0.0078 0 / 0.67);
      --accent-a12: color(display-p3 0.0039 0.0039 0 / 0.877);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.898 0.898 0.902 / 0.8);
      --accent-indicator: oklch(21.7% 0.0038 106.7);
      --accent-track: oklch(21.7% 0.0038 106.7);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #151411;
  --accent-2: #1c1b18;
  --accent-3: #242320;
  --accent-4: #2b2a27;
  --accent-5: #32312e;
  --accent-6: #3c3b37;
  --accent-7: #494844;
  --accent-8: #62615d;
  --accent-9: #faf9f6;
  --accent-10: #f1f0ed;
  --accent-11: #b5b4b0;
  --accent-12: #efeeeb;

  --accent-a1: #94140002;
  --accent-a2: #f7dbbd09;
  --accent-a3: #f7e9d912;
  --accent-a4: #fff5e919;
  --accent-a5: #fcf5eb21;
  --accent-a6: #fcf6e92c;
  --accent-a7: #fef9ee3a;
  --accent-a8: #fefbf355;
  --accent-a9: #fffefbfa;
  --accent-a10: #fffefbf0;
  --accent-a11: #fffef8af;
  --accent-a12: #fffefbee;

  --accent-contrast: #292109;
  --accent-surface: #24221e80;
  --accent-indicator: #faf9f6;
  --accent-track: #faf9f6;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(19% 0.0062 91.45);
      --accent-2: oklch(22.1% 0.0062 91.45);
      --accent-3: oklch(25.7% 0.0062 91.45);
      --accent-4: oklch(28.6% 0.0062 91.45);
      --accent-5: oklch(31.4% 0.0062 91.45);
      --accent-6: oklch(35% 0.0062 91.45);
      --accent-7: oklch(40.2% 0.0062 91.45);
      --accent-8: oklch(49.2% 0.0062 91.45);
      --accent-9: oklch(98.2% 0.0041 91.45);
      --accent-10: oklch(95.4% 0.0041 91.45);
      --accent-11: oklch(77% 0.0062 91.45);
      --accent-12: oklch(94.9% 0.0041 91.45);

      --accent-a1: color(display-p3 0.8667 0.0824 0 / 0.005);
      --accent-a2: color(display-p3 0.9765 0.8627 0.7451 / 0.035);
      --accent-a3: color(display-p3 0.9882 0.9333 0.8667 / 0.069);
      --accent-a4: color(display-p3 1 0.9608 0.9137 / 0.098);
      --accent-a5: color(display-p3 1 0.9686 0.9294 / 0.128);
      --accent-a6: color(display-p3 0.9961 0.9725 0.9216 / 0.171);
      --accent-a7: color(display-p3 1 0.9843 0.9412 / 0.226);
      --accent-a8: color(display-p3 1 0.9882 0.9569 / 0.332);
      --accent-a9: color(display-p3 1 0.9961 0.9843 / 0.979);
      --accent-a10: color(display-p3 1 0.9961 0.9843 / 0.941);
      --accent-a11: color(display-p3 1 0.9961 0.9725 / 0.686);
      --accent-a12: color(display-p3 1 0.9961 0.9843 / 0.932);

      --accent-contrast: #292109;
      --accent-surface: color(display-p3 0.1412 0.1333 0.1176 / 0.5);
      --accent-indicator: oklch(98.2% 0.0041 91.45);
      --accent-track: oklch(98.2% 0.0041 91.45);
    }
  }
}


.dark {
  --grayscale-1: #111210;
  --grayscale-2: #181917;
  --grayscale-3: #212220;
  --grayscale-4: #282a27;
  --grayscale-5: #2f312e;
  --grayscale-6: #383a36;
  --grayscale-7: #454843;
  --grayscale-8: #5c625b;
  --grayscale-9: #687066;
  --grayscale-10: #767d74;
  --grayscale-11: #afb5ad;
  --grayscale-12: #eceeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f1f2f008;
  --grayscale-a3: #f4f5f312;
  --grayscale-a4: #f3fef21a;
  --grayscale-a5: #f2fbf122;
  --grayscale-a6: #f4faed2c;
  --grayscale-a7: #f2fced3b;
  --grayscale-a8: #edfdeb57;
  --grayscale-a9: #ebfde766;
  --grayscale-a10: #f0fdec74;
  --grayscale-a11: #f6fef4b0;
  --grayscale-a12: #fdfffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #687066;
  --grayscale-track: #687066;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.07 0.063);
      --grayscale-2: color(display-p3 0.095 0.098 0.091);
      --grayscale-3: color(display-p3 0.131 0.135 0.126);
      --grayscale-4: color(display-p3 0.158 0.163 0.153);
      --grayscale-5: color(display-p3 0.186 0.192 0.18);
      --grayscale-6: color(display-p3 0.221 0.229 0.215);
      --grayscale-7: color(display-p3 0.273 0.284 0.266);
      --grayscale-8: color(display-p3 0.365 0.382 0.359);
      --grayscale-9: color(display-p3 0.414 0.438 0.404);
      --grayscale-10: color(display-p3 0.467 0.49 0.458);
      --grayscale-11: color(display-p3 0.69 0.709 0.682);
      --grayscale-12: color(display-p3 0.927 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f1f2f008;
      --grayscale-a3: #f4f5f312;
      --grayscale-a4: #f3fef21a;
      --grayscale-a5: #f2fbf122;
      --grayscale-a6: #f4faed2c;
      --grayscale-a7: #f2fced3b;
      --grayscale-a8: #edfdeb57;
      --grayscale-a9: #ebfde766;
      --grayscale-a10: #f0fdec74;
      --grayscale-a11: #f6fef4b0;
      --grayscale-a12: #fdfffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.414 0.438 0.404);
      --grayscale-track: color(display-p3 0.414 0.438 0.404);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(26, 26, 24, 1);
  --background: rgba(242, 240, 234, 1);
  --border: rgba(232, 230, 223, 1);
  --sidebar-background: rgba(250, 249, 246, 1);
  --header-background: rgba(250, 249, 246, 1);
  --card-background: rgba(250, 249, 246, 1);
  --theme-color: #f2f0ea;
}

.dark {
  color-scheme: dark;
  --accent: rgba(250, 249, 246, 1);
  --background: rgba(20, 20, 18, 1);
  --border: rgba(42, 42, 38, 1);
  --sidebar-background: rgba(26, 26, 24, 1);
  --header-background: rgba(26, 26, 24, 1);
  --card-background: rgba(30, 30, 28, 1);
  --theme-color: #141412;
}

/* Canvas Body Theme */
:root [data-body-theme="canvas"] .canvas-wrapper {
  display: flex;
  width: 100%;
  overflow: auto;
  height: 100%;
  border-radius: 16px 16px 16px 16px;
  justify-content: center;
  align-items: flex-start;
  margin-right: 12px;
  margin-bottom: 12px;
  height: calc(100vh - var(--header-height-real) - 12px);
  border: 1px solid var(--border);
  background-color: var(--card-background);
}

:root [data-body-theme="canvas"] body {
  overflow: hidden;
}


:root [data-body-theme="canvas"] #fern-toc {
  position: sticky;
  max-height: calc(100vh - var(--header-height-real) - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
}

:root [data-body-theme="canvas"] #fern-toc:has(> *) {
  margin-right: 12px;
}

:root [data-body-theme="canvas"] .fern-layout-guide,
:root [data-body-theme="canvas"] .fern-layout-overview {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

:root [data-body-theme="canvas"] .fern-layout-reference {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

/* The sticky changelog day label offsets its top by the header height by default
   (window scroll). On canvas the scroll container already starts below the fixed
   header, so zero the offset to keep the date from pinning too early. */
:root [data-body-theme="canvas"] {
  --fern-changelog-sticky-top: 0px;
}

/* Bubble Tabs Theme */
:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item]::after {
  display: none;
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item] {
  position: relative;
  isolation: isolate;
  transition: color 0.15s ease-in-out;
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item]::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  border-radius: 9999px;
  z-index: -1;
  transition: background-color 0.15s ease-in-out;
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"] {
  color: var(--accent-a11);
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"]::before {
  background-color: var(--accent-a3);
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"] > span {
  -webkit-text-stroke: 0.5px currentcolor;
}

:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="inactive"]:hover::before {
  background-color: var(--grayscale-a3);
}
:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="inactive"]:focus-visible::before {
  background-color: var(--grayscale-a3);
}

.dark [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"] {
  color: var(--accent-a11);
}

.dark [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"]::before {
  background-color: var(--accent-a3);
}

.dark [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="inactive"]:hover::before {
  background-color: var(--grayscale-a3);
}
.dark [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="inactive"]:focus-visible::before {
  background-color: var(--grayscale-a3);
}

/* Bubble theme: reset parent bg on active+focus-visible to avoid stacked alpha with the ::before pill */
:root [data-tabs-theme="bubble"] #fern-header [data-radix-collection-item][data-state="active"]:focus-visible {
  background: transparent;
}

/* Load Chaser's fonts from Fontshare CDN */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600&f[]=gambetta@400,500&f[]=azeret-mono@300,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap");

/* ─── Chaser Docs — Custom Theme ─────────────────────────────────── */
/* Aligns Fern docs visual identity with chaser.sh                   */

/* ── Base Overrides ─────────────────────────────────────────────── */

/* Warm canvas background + grayscale tint */
:root,
.light {
    --background: #f2f0ea;
    --card-background: #faf9f6;
    --sidebar-background: #faf9f6;
    --header-background: rgba(250, 249, 246, 0.85);
    --border: rgba(26, 26, 24, 0.06);

    /* Warm grayscale — alabaster/parchment tinted, not neutral grey */
    --grayscale-1: #fdfcfa;
    --grayscale-2: #faf9f6;
    --grayscale-3: #f5f3ed;
    --grayscale-4: #f0eee7;
    --grayscale-5: #e8e6df;
    --grayscale-6: #dedbd3;
    --grayscale-7: #ccc9c0;
    --grayscale-8: #a8a59c;
    --grayscale-9: #8a877f;
    --grayscale-10: #706d66;
    --grayscale-11: #52504a;
    --grayscale-12: #1a1a18;

    /* Warm alpha variants */
    --grayscale-a1: rgba(26, 26, 24, 0.01);
    --grayscale-a2: rgba(26, 26, 24, 0.02);
    --grayscale-a3: rgba(26, 26, 24, 0.04);
    --grayscale-a4: rgba(26, 26, 24, 0.06);
    --grayscale-a5: rgba(26, 26, 24, 0.08);
    --grayscale-a6: rgba(26, 26, 24, 0.12);
    --grayscale-a7: rgba(26, 26, 24, 0.18);
    --grayscale-a8: rgba(26, 26, 24, 0.3);
    --grayscale-a9: rgba(26, 26, 24, 0.45);
    --grayscale-a10: rgba(26, 26, 24, 0.55);
    --grayscale-a11: rgba(26, 26, 24, 0.7);
    --grayscale-a12: rgba(26, 26, 24, 0.93);
}

.dark {
    --background: #141412;
    --card-background: #1a1a18;
    --sidebar-background: #1a1a18;
    --header-background: rgba(20, 20, 18, 0.85);
    --border: rgba(250, 249, 246, 0.06);

    /* Warm dark grayscale — inverted parchment tones */
    --grayscale-1: #171715;
    --grayscale-2: #1a1a18;
    --grayscale-3: #22221f;
    --grayscale-4: #2a2a26;
    --grayscale-5: #33332d;
    --grayscale-6: #3d3d36;
    --grayscale-7: #52504a;
    --grayscale-8: #706d66;
    --grayscale-9: #8a877f;
    --grayscale-10: #a8a59c;
    --grayscale-11: #ccc9c0;
    --grayscale-12: #faf9f6;

    /* Warm dark alpha variants */
    --grayscale-a1: rgba(250, 249, 246, 0.01);
    --grayscale-a2: rgba(250, 249, 246, 0.03);
    --grayscale-a3: rgba(250, 249, 246, 0.05);
    --grayscale-a4: rgba(250, 249, 246, 0.08);
    --grayscale-a5: rgba(250, 249, 246, 0.12);
    --grayscale-a6: rgba(250, 249, 246, 0.16);
    --grayscale-a7: rgba(250, 249, 246, 0.25);
    --grayscale-a8: rgba(250, 249, 246, 0.38);
    --grayscale-a9: rgba(250, 249, 246, 0.5);
    --grayscale-a10: rgba(250, 249, 246, 0.62);
    --grayscale-a11: rgba(250, 249, 246, 0.78);
    --grayscale-a12: rgba(250, 249, 246, 0.95);
}

/* ── Header ─────────────────────────────────────────────────────── */

/* Frosted glass header to match chaser.sh's floating pill bar */
.fern-header {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Logo right-text — Spline Sans Mono to match chaser.sh */
.fern-header .fern-logo-text {
    font-family: "Spline Sans Mono", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Sidebar ────────────────────────────────────────────────────── */

/* Cleaner sidebar section labels — monospace, uppercase, like Chaser dashboard */
.fern-sidebar-heading {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Active nav item indicator bar */
.fern-sidebar-link[data-state="active"] {
    position: relative;
    font-weight: 500;
}

/* ── Content ────────────────────────────────────────────────────── */

/* Headings: Gambetta-style serif with tight tracking */
h1,
h2,
h3,
h4 {
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Inline code: subtle warm background */
:not(pre) > code {
    background: rgba(26, 26, 24, 0.04);
    border: 1px solid rgba(26, 26, 24, 0.06);
    border-radius: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.875em;
}

.dark :not(pre) > code {
    background: rgba(250, 249, 246, 0.06);
    border-color: rgba(250, 249, 246, 0.08);
}

/* ── Code Blocks ────────────────────────────────────────────────── */

/* Warm-toned code blocks matching the Chaser surface panel aesthetic */
pre {
    border-radius: 0.75rem;
    border: 1px solid rgba(26, 26, 24, 0.04);
}

.dark pre {
    border-color: rgba(250, 249, 246, 0.04);
}

/* ── Cards & Callouts ───────────────────────────────────────────── */

/* Surface panel style for cards */
.fern-card {
    border-radius: 1rem;
    border: 1px solid rgba(26, 26, 24, 0.04);
    transition:
        box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fern-card:hover {
    box-shadow: 0 8px 24px -4px rgba(26, 26, 24, 0.06);
    transform: translateY(-1px);
}
.fern-card:focus-visible {
    box-shadow: 0 8px 24px -4px rgba(26, 26, 24, 0.06);
    transform: translateY(-1px);
}

.dark .fern-card:hover {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
}
.dark .fern-card:focus-visible {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3);
}

/* ── Buttons ────────────────────────────────────────────────────── */

/* Smooth micro-interactions on all interactive elements */
.fern-button,
.fern-tab,
.fern-sidebar-link {
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fern-button:active {
    transform: scale(0.97);
}

/* ── Selection ──────────────────────────────────────────────────── */

::selection {
    background-color: #1a1a18;
    color: #faf9f6;
}

.dark ::selection {
    background-color: #faf9f6;
    color: #1a1a18;
}

/* ── Scrollbar ──────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(26, 26, 24, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 24, 0.2);
}
::-webkit-scrollbar-thumb:focus-visible {
    background: rgba(26, 26, 24, 0.2);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(250, 249, 246, 0.1);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 249, 246, 0.2);
}
.dark ::-webkit-scrollbar-thumb:focus-visible {
    background: rgba(250, 249, 246, 0.2);
}