/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 20px;
  --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: #fcfcff;
  --accent-2: #f9f8ff;
  --accent-3: #f3f0ff;
  --accent-4: #eae3ff;
  --accent-5: #e0d7ff;
  --accent-6: #d4c6ff;
  --accent-7: #c3b0ff;
  --accent-8: #ad91ff;
  --accent-9: #7c3aed;
  --accent-10: #6d34d1;
  --accent-11: #7139d6;
  --accent-12: #37196e;

  --accent-a1: #0000ff03;
  --accent-a2: #2500ff07;
  --accent-a3: #3300ff0f;
  --accent-a4: #4000ff1c;
  --accent-a5: #3a00ff28;
  --accent-a6: #3f00ff39;
  --accent-a7: #3e00ff4f;
  --accent-a8: #4100ff6e;
  --accent-a9: #5600e8c5;
  --accent-a10: #4800c5cb;
  --accent-a11: #4800cac6;
  --accent-a12: #21005ee6;

  --accent-contrast: #fff;
  --accent-surface: #f8f6ffcc;
  --accent-indicator: #7c3aed;
  --accent-track: #7c3aed;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.2% 0.0041 293);
      --accent-2: oklch(98.3% 0.0124 293);
      --accent-3: oklch(96.2% 0.0272 293);
      --accent-4: oklch(93.4% 0.0537 293);
      --accent-5: oklch(90.3% 0.0774 293);
      --accent-6: oklch(86.3% 0.099 293);
      --accent-7: oklch(80.6% 0.1245 293);
      --accent-8: oklch(73% 0.1644 293);
      --accent-9: oklch(54.1% 0.2466 293);
      --accent-10: oklch(49.5% 0.222 293);
      --accent-11: oklch(50.9% 0.222 293);
      --accent-12: oklch(31.4% 0.1368 293);

      --accent-a1: color(display-p3 0.0235 0.0235 1 / 0.012);
      --accent-a2: color(display-p3 0.1608 0.0235 0.8627 / 0.028);
      --accent-a3: color(display-p3 0.1373 0.0039 0.9373 / 0.059);
      --accent-a4: color(display-p3 0.2157 0.0039 0.9294 / 0.11);
      --accent-a5: color(display-p3 0.1765 0.0039 0.9255 / 0.157);
      --accent-a6: color(display-p3 0.2157 0.0039 0.9333 / 0.224);
      --accent-a7: color(display-p3 0.1961 0.0039 0.9255 / 0.306);
      --accent-a8: color(display-p3 0.2039 0.0039 0.9373 / 0.428);
      --accent-a9: color(display-p3 0.2784 0 0.8588 / 0.757);
      --accent-a10: color(display-p3 0.2353 0 0.7294 / 0.785);
      --accent-a11: color(display-p3 0.2353 0 0.749 / 0.765);
      --accent-a12: color(display-p3 0.1059 0 0.3451 / 0.895);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9725 0.9686 1 / 0.8);
      --accent-indicator: oklch(54.1% 0.2466 293);
      --accent-track: oklch(54.1% 0.2466 293);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

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


.dark {
  --accent-1: #0b0717;
  --accent-2: #181329;
  --accent-3: #29194c;
  --accent-4: #351c68;
  --accent-5: #3f2477;
  --accent-6: #4a2f86;
  --accent-7: #5a3d9e;
  --accent-8: #704cc5;
  --accent-9: #7c3aed;
  --accent-10: #6f26dd;
  --accent-11: #bba4ff;
  --accent-12: #e3dbff;

  --accent-a1: #1d00f70e;
  --accent-a2: #7750fa21;
  --accent-a3: #7d42fe45;
  --accent-a4: #7a39ff62;
  --accent-a5: #8044fd72;
  --accent-a6: #8853fe82;
  --accent-a7: #8e5efe9b;
  --accent-a8: #9061ffc3;
  --accent-a9: #843dfeed;
  --accent-a10: #802bffdc;
  --accent-a11: #bba4ff;
  --accent-a12: #e3dbff;

  --accent-contrast: #fff;
  --accent-surface: #261c4880;
  --accent-indicator: #7c3aed;
  --accent-track: #7c3aed;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.5% 0.0347 293);
      --accent-2: oklch(20.4% 0.0433 293);
      --accent-3: oklch(26.6% 0.09 293);
      --accent-4: oklch(30.9% 0.1251 293);
      --accent-5: oklch(34.7% 0.1337 293);
      --accent-6: oklch(38.9% 0.1389 293);
      --accent-7: oklch(44.5% 0.1517 293);
      --accent-8: oklch(52% 0.1799 293);
      --accent-9: oklch(54.1% 0.2466 293);
      --accent-10: oklch(49.5% 0.2466 293);
      --accent-11: oklch(77.9% 0.1924 293);
      --accent-12: oklch(91.1% 0.0628 293);

      --accent-a1: color(display-p3 0.0392 0 1 / 0.049);
      --accent-a2: color(display-p3 0.4549 0.3294 0.9961 / 0.123);
      --accent-a3: color(display-p3 0.4824 0.2863 1 / 0.258);
      --accent-a4: color(display-p3 0.4667 0.2431 1 / 0.368);
      --accent-a5: color(display-p3 0.4863 0.2863 1 / 0.429);
      --accent-a6: color(display-p3 0.5255 0.349 1 / 0.486);
      --accent-a7: color(display-p3 0.5529 0.3922 1 / 0.584);
      --accent-a8: color(display-p3 0.5569 0.4 1 / 0.735);
      --accent-a9: color(display-p3 0.5059 0.2706 1 / 0.89);
      --accent-a10: color(display-p3 0.4745 0.1961 1 / 0.829);
      --accent-a11: color(display-p3 0.7373 0.6627 1 / 0.976);
      --accent-a12: color(display-p3 0.898 0.8706 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1412 0.1098 0.2667 / 0.5);
      --accent-indicator: oklch(54.1% 0.2466 293);
      --accent-track: oklch(54.1% 0.2466 293);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(124, 58, 237, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(229, 231, 235, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(124, 58, 237, 1);
  --background: rgba(10, 10, 10, 1);
  --border: rgba(39, 39, 42, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #0a0a0a;
}

/* Custom styles for Atomicwork Docs */

/* ==========================================================================
   Typography
   Fern renders headings, subtitles and body copy at a single inherited color
   (--color-body), so a page reads as one flat block of text. The tokens below
   split that into three levels of emphasis and are layered on Fern's own
   grayscale ramp, which already inverts for dark mode.
   ========================================================================== */

:root {
  --aw-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /*
   * Three levels of emphasis, darkest to lightest. Headings carry nearly all
   * the contrast; body copy sits well below them and secondary text below
   * that, so the eye can find the structure of a page at a glance.
   */
  --aw-text-heading: var(--grayscale-12);
  --aw-text-body: color-mix(in srgb, var(--grayscale-12) 25%, var(--grayscale-11));
  --aw-text-muted: var(--grayscale-11);

  /* Fern reads both sets of font variables depending on the surface */
  --font-body: var(--aw-font-sans);
  --font-heading: var(--aw-font-sans);
  --typography-body-font-family: var(--aw-font-sans);
  --typography-heading-font-family: var(--aw-font-sans);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Page header ---------------------------------------------------------- */

.fern-page-heading {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--aw-text-heading);
}

/*
 * Fern only tints the subtitle through a prose-p: variant, which misses
 * subtitles that aren't wrapped in a paragraph. Color the container itself so
 * every page gets the muted treatment.
 */
.fern-page-subtitle,
.fern-page-subtitle p {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--aw-text-muted);
}

.fern-breadcrumb,
.fern-breadcrumb-item {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--aw-text-muted);
}

.fern-breadcrumb-item:hover {
  color: var(--accent-a11);
}
.fern-breadcrumb-item:focus-visible {
  color: var(--accent-a11);
}

/* --- Section headings ----------------------------------------------------- */

.fern-prose h1,
.fern-prose h2,
.fern-prose h3,
.fern-prose h4,
.fern-prose h5,
.fern-prose h6 {
  color: var(--aw-text-heading);
  font-family: var(--aw-font-sans);
}

.fern-prose h2 {
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.fern-prose h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.fern-prose h4 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* --- Body copy ------------------------------------------------------------ */

.fern-prose {
  color: var(--aw-text-body);
}

.fern-prose p,
.fern-prose li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--aw-text-body);
}

.fern-prose p {
  margin-bottom: 1.25rem;
}

.fern-prose li::marker {
  color: var(--aw-text-muted);
}

/* Bold text steps up to heading emphasis rather than repeating body weight */
.fern-prose strong,
.fern-prose b {
  font-weight: 600;
  color: var(--aw-text-heading);
}

.fern-prose blockquote {
  color: var(--aw-text-muted);
  font-style: normal;
}

/* --- Tables --------------------------------------------------------------- */

.fern-prose th {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--aw-text-heading);
}

.fern-prose td {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--aw-text-body);
}

/* --- Sidebar -------------------------------------------------------------- */

/* Section titles read as labels, not as links of equal weight */
.fern-sidebar-heading-content {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--aw-text-heading);
}

/*
 * Page links default to near-black (--grayscale-a12), which puts them at the
 * same weight as the section titles above them and flattens the whole nav.
 * Drop them to secondary text so the section titles lead.
 */
#fern-sidebar .fern-sidebar-link,
#fern-sidebar .fern-sidebar-link-title,
#fern-sidebar .fern-sidebar-link-title-inner {
  color: var(--aw-text-muted);
  font-weight: 400;
}

/*
 * The current page keeps its accent color, but at the same weight as its
 * siblings — a link that also grows bolder when selected makes the row jump.
 */
#fern-sidebar a.fern-sidebar-link[data-state="active"],
#fern-sidebar a.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title,
#fern-sidebar a.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner {
  color: var(--accent-a11);
  font-weight: 400;
}

/*
 * Fern marks the current page with a filled, outlined pill. At the width of
 * the nav that box is a heavy block of accent color that pulls the eye away
 * from the page itself, so drop the fill, the ring and the border and let the
 * accent text carry the state.
 */
#fern-sidebar a.fern-sidebar-link[data-state="active"],
#fern-sidebar a.fern-sidebar-link[data-state="active"]:hover {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#fern-sidebar a.fern-sidebar-link[data-state="active"]:focus-visible {
  position: relative;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/*
 * In place of the pill, tint the segment of the group's indent rule that sits
 * beside the current page — the same marker the nested links already line up
 * against, so nothing shifts when the selection moves.
 *
 * Fern draws that rule as a 1px border-left on the group's <ul>, which sits
 * just outside the link box; the offsets below put the accent bar on top of
 * it. Top-level links have no rule, so they keep the accent text alone.
 */
#fern-sidebar a.fern-sidebar-link.nested[data-state="active"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background-color: var(--accent-a11);
}

/* From lg up Fern also pads the group list (lg:pl-1), moving the rule out. */
@media (min-width: 1024px) {

  #fern-sidebar a.fern-sidebar-link.nested[data-state="active"]::before {
    left: -5px;
  }

}

/*
 * Expandable group headers (Atom, Build the Model, Patterns…) are buttons, not
 * page links. Fern tints them with the accent when the open page lives inside
 * them, so a single collapsed group renders purple while every other group
 * stays neutral. Keep them looking like the rest of the nav; the highlighted
 * page link is what marks the current location.
 */
#fern-sidebar button.fern-sidebar-link,
#fern-sidebar button.fern-sidebar-link[data-state="active"],
#fern-sidebar button.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title,
#fern-sidebar button.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner {
  color: var(--aw-text-muted);
  font-weight: 400;
  background-color: transparent;
}

/* Hide Ask AI button in header */
#fern-ask-ai-button {
  display: none !important;
}

/* Hide "Ask a question" button and its separator in page toolbar */
.fern-page-actions > button:first-child,
.fern-page-actions > button:first-child + span {
  display: none !important;
}

/* Support CTA modal (see docs/scripts/meta.js) */
.atomicwork-support-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.atomicwork-support-modal-overlay[hidden] {
  display: none;
}

.atomicwork-support-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 28px 32px;
  border-radius: 12px;
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: inherit;
}

.atomicwork-support-modal h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.atomicwork-support-modal p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

.atomicwork-support-modal-email {
  display: inline-block;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
}

.atomicwork-support-modal-email:hover {
  text-decoration: underline;
}
.atomicwork-support-modal-email:focus-visible {
  text-decoration: underline;
}

.atomicwork-support-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
}

.atomicwork-support-modal-close:hover {
  opacity: 1;
}
.atomicwork-support-modal-close:focus-visible {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {

  .atomicwork-support-modal {
    background: #18181b;
    color: #fafafa;
  }

}

html.dark .atomicwork-support-modal {
  background: #18181b;
  color: #fafafa;
}

/* Plain callouts (full-size text, no icon) */
.aw-note,
.aw-warning {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
}

.aw-note p,
.aw-warning p {
  margin: 0;
}

.aw-note p + p,
.aw-warning p + p {
  margin-top: 8px;
}

.aw-note {
  background: #efeafc;
  border-color: #d6c9f4;
}

.aw-warning {
  background: #fff8ef;
  border-color: #f3d7a3;
}

@media (prefers-color-scheme: dark) {

  .aw-note {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
  }
  .aw-warning {
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.35);
  }

}

html.dark .aw-note {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.4);
}

html.dark .aw-warning {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.35);
}

/* Sample email addresses — styled like a link but not clickable */
.aw-email {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--accent-primary, #7c3aed);
}