@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    interpolate-size: allow-keywords;
  }

  body {
    min-block-size: 100dvh;
    line-height: var(--my-leading-body, 1.5);
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    block-size: auto;
    max-inline-size: 100%;
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
  }

  p, h1, h2, h3, h4, h5, h6, li, dd, figcaption {
    overflow-wrap: break-word;
  }

  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *, :before, :after {
      scroll-behavior: auto !important;
      transition-duration: 0s !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer tokens {
  :root {
    --my-red-1: var(--lightningcss-light, #fffcfb) var(--lightningcss-dark, #160d0b);
    --my-red-2: var(--lightningcss-light, #fff5f4) var(--lightningcss-dark, #22110e);
    --my-red-3: var(--lightningcss-light, #ffebe7) var(--lightningcss-dark, #33130f);
    --my-red-4: var(--lightningcss-light, #ffe0da) var(--lightningcss-dark, #42140e);
    --my-red-5: var(--lightningcss-light, #ffd4cd) var(--lightningcss-dark, #52130d);
    --my-red-6: var(--lightningcss-light, #ffc6bd) var(--lightningcss-dark, #64130c);
    --my-red-7: var(--lightningcss-light, #ffb0a3) var(--lightningcss-dark, #7b170f);
    --my-red-8: var(--lightningcss-light, #d85646) var(--lightningcss-dark, #b9382b);
    --my-red-9: #d92d20;
    --my-red-10: #c71108;
    --my-red-11: var(--lightningcss-light, #ab0b04) var(--lightningcss-dark, #ffa192);
    --my-red-12: var(--lightningcss-light, #470100) var(--lightningcss-dark, #ffe9e5);
    --my-red-contrast: #fff;
    --my-green-1: var(--lightningcss-light, #f8fffa) var(--lightningcss-dark, #0c110e);
    --my-green-2: var(--lightningcss-light, #f0fbf3) var(--lightningcss-dark, #101813);
    --my-green-3: var(--lightningcss-light, #e1f6e8) var(--lightningcss-dark, #122218);
    --my-green-4: var(--lightningcss-light, #d3f0dd) var(--lightningcss-dark, #132b1d);
    --my-green-5: var(--lightningcss-light, #c5ebd2) var(--lightningcss-dark, #133422);
    --my-green-6: var(--lightningcss-light, #b5e3c5) var(--lightningcss-dark, #143f28);
    --my-green-7: var(--lightningcss-light, #a0d6b4) var(--lightningcss-dark, #194e32);
    --my-green-8: var(--lightningcss-light, #54976f) var(--lightningcss-dark, #387c56);
    --my-green-9: #16794a;
    --my-green-10: #006a3d;
    --my-green-11: var(--lightningcss-light, #176c42) var(--lightningcss-dark, #84d2a3);
    --my-green-12: var(--lightningcss-light, #022916) var(--lightningcss-dark, #d0fbdf);
    --my-green-contrast: #fff;
    --my-amber-1: var(--lightningcss-light, #fffcfb) var(--lightningcss-dark, #140e0b);
    --my-amber-2: var(--lightningcss-light, #fff6f2) var(--lightningcss-dark, #1f130e);
    --my-amber-3: var(--lightningcss-light, #ffebe4) var(--lightningcss-dark, #2d180f);
    --my-amber-4: var(--lightningcss-light, #ffe0d4) var(--lightningcss-dark, #3b1b0e);
    --my-amber-5: var(--lightningcss-light, #ffd5c5) var(--lightningcss-dark, #491f0c);
    --my-amber-6: var(--lightningcss-light, #ffc8b1) var(--lightningcss-dark, #58230a);
    --my-amber-7: var(--lightningcss-light, #ffb293) var(--lightningcss-dark, #6d2c0c);
    --my-amber-8: var(--lightningcss-light, #c36a45) var(--lightningcss-dark, #a64f29);
    --my-amber-9: #b54708;
    --my-amber-10: #a03c00;
    --my-amber-11: var(--lightningcss-light, #973800) var(--lightningcss-dark, #ffa37e);
    --my-amber-12: var(--lightningcss-light, #3d1200) var(--lightningcss-dark, #ffe9e1);
    --my-amber-contrast: #fff;
    --my-blue-1: var(--lightningcss-light, #fbfdff) var(--lightningcss-dark, #0c1016);
    --my-blue-2: var(--lightningcss-light, #f4f8ff) var(--lightningcss-dark, #0f1622);
    --my-blue-3: var(--lightningcss-light, #e8f1ff) var(--lightningcss-dark, #101e34);
    --my-blue-4: var(--lightningcss-light, #dbe9ff) var(--lightningcss-dark, #112445);
    --my-blue-5: var(--lightningcss-light, #cee1ff) var(--lightningcss-dark, #112b56);
    --my-blue-6: var(--lightningcss-light, #bfd7ff) var(--lightningcss-dark, #12326a);
    --my-blue-7: var(--lightningcss-light, #a8c9ff) var(--lightningcss-dark, #163f83);
    --my-blue-8: var(--lightningcss-light, #4d84e0) var(--lightningcss-dark, #3368c2);
    --my-blue-9: #1d63d6;
    --my-blue-10: #0853c5;
    --my-blue-11: var(--lightningcss-light, #1654b8) var(--lightningcss-dark, #98bfff);
    --my-blue-12: var(--lightningcss-light, #031e4e) var(--lightningcss-dark, #e5efff);
    --my-blue-contrast: #fff;
  }

  :root, [data-scheme="cobalt"] {
    --my-gray-1: var(--lightningcss-light, #fcfdfd) var(--lightningcss-dark, #0f0f10);
    --my-gray-2: var(--lightningcss-light, #f7f8f9) var(--lightningcss-dark, #161617);
    --my-gray-3: var(--lightningcss-light, #eff0f2) var(--lightningcss-dark, #1d1e1f);
    --my-gray-4: var(--lightningcss-light, #e6e8eb) var(--lightningcss-dark, #242527);
    --my-gray-5: var(--lightningcss-light, #dde0e3) var(--lightningcss-dark, #2b2d2f);
    --my-gray-6: var(--lightningcss-light, #d3d6da) var(--lightningcss-dark, #333539);
    --my-gray-7: var(--lightningcss-light, #c4c7cc) var(--lightningcss-dark, #404247);
    --my-gray-8: var(--lightningcss-light, #83868c) var(--lightningcss-dark, #696c71);
    --my-gray-9: var(--lightningcss-light, #727579) var(--lightningcss-dark, #83868b);
    --my-gray-10: var(--lightningcss-light, #66696e) var(--lightningcss-dark, #95989e);
    --my-gray-11: var(--lightningcss-light, #575b61) var(--lightningcss-dark, #babec5);
    --my-gray-12: var(--lightningcss-light, #202225) var(--lightningcss-dark, #eceff3);
    --my-accent-1: var(--lightningcss-light, #fcfdff) var(--lightningcss-dark, #0c0f17);
    --my-accent-2: var(--lightningcss-light, #f4f8ff) var(--lightningcss-dark, #0f1624);
    --my-accent-3: var(--lightningcss-light, #e9f0ff) var(--lightningcss-dark, #121d38);
    --my-accent-4: var(--lightningcss-light, #dde8ff) var(--lightningcss-dark, #13224a);
    --my-accent-5: var(--lightningcss-light, #d1e0ff) var(--lightningcss-dark, #15285d);
    --my-accent-6: var(--lightningcss-light, #c3d6ff) var(--lightningcss-dark, #172e73);
    --my-accent-7: var(--lightningcss-light, #aec7ff) var(--lightningcss-dark, #1d398d);
    --my-accent-8: var(--lightningcss-light, #537eef) var(--lightningcss-dark, #3a62d0);
    --my-accent-9: #2f5bea;
    --my-accent-10: #234ad8;
    --my-accent-11: var(--lightningcss-light, #254bc8) var(--lightningcss-dark, #9fbdff);
    --my-accent-12: var(--lightningcss-light, #081955) var(--lightningcss-dark, #e7efff);
    --my-accent-contrast: #fff;
  }

  :root {
    --my-space-0: 0;
    --my-space-1: .125rem;
    --my-space-2: .25rem;
    --my-space-3: .5rem;
    --my-space-4: .75rem;
    --my-space-5: 1rem;
    --my-space-6: 1.5rem;
    --my-space-7: 2rem;
    --my-space-8: 2.5rem;
    --my-space-9: 3rem;
    --my-space-10: 4rem;
    --my-space-11: 5rem;
    --my-radius-0: 0;
    --my-radius-1: .125rem;
    --my-radius-2: .25rem;
    --my-radius-3: .5rem;
    --my-radius-4: .75rem;
    --my-radius-pill: 999rem;
    --my-border-1: 1px;
    --my-border-2: 2px;
    --my-border-thick: 3px;
    --my-ease-productive: cubic-bezier(.2, 0, .38, .9);
    --my-ease-expressive: cubic-bezier(.4, .14, .3, 1);
    --my-duration-fast: .11s;
    --my-duration-moderate: .24s;
    --my-duration-slow: .4s;
    --my-shadow-1: 0 1px 2px oklch(0% 0 0 / .08), 0 1px 3px oklch(0% 0 0 / .06);
    --my-shadow-2: 0 4px 12px oklch(0% 0 0 / .1), 0 2px 4px oklch(0% 0 0 / .06);
    --my-shadow-3: 0 16px 40px oklch(0% 0 0 / .18), 0 4px 10px oklch(0% 0 0 / .08);
  }

  :root, [data-scheme] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    --my-bg: var(--my-gray-1);
    --my-layer-1: var(--my-gray-2);
    --my-layer-2: var(--lightningcss-light, #fff) var(--lightningcss-dark, var(--my-gray-3));
    --my-layer-3: var(--my-gray-3);
    --my-fill: var(--my-gray-3);
    --my-fill-hover: var(--my-gray-4);
    --my-fill-active: var(--my-gray-5);
    --my-text: var(--my-gray-12);
    --my-text-muted: var(--my-gray-11);
    --my-border-subtle: var(--my-gray-6);
    --my-border: var(--my-gray-8);
    --my-accent: var(--my-accent-9);
    --my-accent-hover: var(--my-accent-10);
    --my-accent-subtle: var(--my-accent-3);
    --my-accent-text: var(--my-accent-11);
    --my-text-on-accent: var(--my-accent-contrast);
    --my-link: var(--my-accent-11);
    --my-danger: var(--my-red-11);
    --my-danger-solid: var(--my-red-9);
    --my-danger-subtle: var(--my-red-3);
    --my-success: var(--my-green-11);
    --my-success-solid: var(--my-green-9);
    --my-success-subtle: var(--my-green-3);
    --my-warning: var(--my-amber-11);
    --my-warning-subtle: var(--my-amber-3);
    --my-info: var(--my-blue-11);
    --my-info-subtle: var(--my-blue-3);
    --my-focus-color: var(--my-accent-11);
    --my-focus-width: 3px;
    --my-focus-offset: 2px;
    --my-target-min: 2.75rem;
    --my-radius: var(--my-radius-2);
    --my-control-radius: var(--my-radius);
    --my-gap: var(--my-space-5);
  }

  @media (prefers-color-scheme: dark) {
    :root, [data-scheme] {
      --lightningcss-light: ;
      --lightningcss-dark: initial;
    }
  }

  :root[data-theme="light"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  [data-theme="light"] {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
  }

  [data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  @media (prefers-contrast: more) {
    :root {
      --my-border: var(--my-text);
      --my-border-subtle: var(--my-gray-8);
      --my-text-muted: var(--my-text);
    }
  }

  :root {
    --my-font-sans: Inter, "Noto Sans Arabic", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --my-font-display: var(--my-font-sans);
    --my-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
    --my-font-features: "cv11", "ss01";
    --my-font-features-mono: "zero";
    --my-weight-regular: 400;
    --my-weight-medium: 500;
    --my-weight-semibold: 600;
    --my-weight-bold: 700;
    --my-display-weight: 650;
    --my-measure: 68ch;
    --my-leading-body: 1.5;
    --my-leading-tight: 1.2;
    --my-leading-none: 1;
    --my-text-xs: .75rem;
    --my-leading-xs: 1rem;
    --my-tracking-xs: .01em;
    --my-text-sm: .875rem;
    --my-leading-sm: 1.25rem;
    --my-tracking-sm: .005em;
    --my-text-md: 1rem;
    --my-leading-md: 1.5rem;
    --my-tracking-md: 0;
    --my-text-lg: 1.125rem;
    --my-leading-lg: 1.75rem;
    --my-tracking-lg: -.005em;
    --my-display-1: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
    --my-display-leading-1: 1.3;
    --my-display-tracking-1: -.01em;
    --my-display-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
    --my-display-leading-2: 1.25;
    --my-display-tracking-2: -.015em;
    --my-display-3: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
    --my-display-leading-3: 1.15;
    --my-display-tracking-3: -.02em;
    --my-display-4: clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);
    --my-display-leading-4: 1.08;
    --my-display-tracking-4: -.025em;
    --my-display-5: clamp(2.75rem, 1.7rem + 4.6vw, 5rem);
    --my-display-leading-5: 1.02;
    --my-display-tracking-5: -.03em;
  }

  [data-type="hyperlegible"] {
    --my-font-sans: "Atkinson Hyperlegible Next", "Noto Sans Arabic", "Atkinson Hyperlegible Next Fallback", system-ui, sans-serif;
    --my-font-mono: "Atkinson Hyperlegible Mono", "Atkinson Hyperlegible Mono Fallback", ui-monospace, monospace;
    --my-font-features: normal;
    --my-display-weight: 700;
  }

  [data-type="editorial"] {
    --my-font-display: Fraunces, "Noto Sans Arabic", "Fraunces Fallback", Georgia, serif;
    --my-display-weight: 560;
  }

  [data-type="technical"] {
    --my-font-sans: "IBM Plex Sans", "Noto Sans Arabic", "IBM Plex Sans Fallback", system-ui, sans-serif;
    --my-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
    --my-font-features: normal;
    --my-display-weight: 600;
  }

  :lang(ar) {
    --my-font-features: normal;
    --my-leading-body: 1.7;
    --my-leading-tight: 1.35;
    --my-leading-sm: 1.5rem;
    --my-leading-md: 1.75rem;
    --my-leading-lg: 2rem;
    --my-tracking-xs: 0;
    --my-tracking-sm: 0;
    --my-tracking-md: 0;
    --my-tracking-lg: 0;
    --my-display-tracking-1: 0;
    --my-display-tracking-2: 0;
    --my-display-tracking-3: 0;
    --my-display-tracking-4: 0;
    --my-display-tracking-5: 0;
    --my-display-leading-1: 1.5;
    --my-display-leading-2: 1.45;
    --my-display-leading-3: 1.4;
    --my-display-leading-4: 1.35;
    --my-display-leading-5: 1.3;
  }
}

@layer base {
  :where(html) {
    font-family: var(--my-font-sans);
    font-feature-settings: var(--my-font-features);
    font-size-adjust: from-font;
    font-size: 100%;
    line-height: var(--my-leading-md);
    color: var(--my-text);
    background: var(--my-bg);
    hanging-punctuation: first allow-end last;
    scroll-padding-block-start: var(--my-space-9);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--my-font-display);
    font-weight: var(--my-display-weight);
    text-wrap: balance;
    font-optical-sizing: auto;
  }

  :where(h1) {
    font-size: var(--my-display-4);
    line-height: var(--my-display-leading-4);
    letter-spacing: var(--my-display-tracking-4);
  }

  :where(h2) {
    font-size: var(--my-display-3);
    line-height: var(--my-display-leading-3);
    letter-spacing: var(--my-display-tracking-3);
  }

  :where(h3) {
    font-size: var(--my-display-2);
    line-height: var(--my-display-leading-2);
    letter-spacing: var(--my-display-tracking-2);
  }

  :where(h4) {
    font-size: var(--my-display-1);
    line-height: var(--my-display-leading-1);
    letter-spacing: var(--my-display-tracking-1);
  }

  :where(h5, h6) {
    font-size: var(--my-text-md);
  }

  :where(p, li, dd, blockquote, figcaption) {
    max-inline-size: var(--my-measure);
    text-wrap: pretty;
  }

  :where(small) {
    font-size: var(--my-text-sm);
    line-height: var(--my-leading-sm);
    letter-spacing: var(--my-tracking-sm);
  }

  :where(a) {
    color: var(--my-link);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
  }

  :where(a:hover) {
    text-decoration-thickness: 2px;
  }

  :where(code, kbd, pre, samp) {
    font-family: var(--my-font-mono);
    font-feature-settings: var(--my-font-features-mono);
    font-size: .9em;
  }

  :where(pre) {
    padding: var(--my-space-5);
    background: var(--my-layer-1);
    border-radius: var(--my-radius);
    overflow-x: auto;
  }

  :where(kbd) {
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-1);
    border-block-end-width: 2px;
    padding: 0 .35em;
  }

  :where(hr) {
    border: 0;
    border-block-start: 1px solid var(--my-border-subtle);
  }

  :where(table) {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
  }

  :where(th, td) {
    padding: var(--my-space-3) var(--my-space-4);
    text-align: start;
    border-block-end: 1px solid var(--my-border-subtle);
  }

  :where(th) {
    font-weight: var(--my-weight-semibold);
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
  }

  :where() {
    background: var(--my-accent-5, var(--my-accent-subtle));
  }

  :where(:focus-visible) {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: var(--my-focus-offset);
  }

  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  @media (forced-colors: active) {
    :where(:focus-visible) {
      outline-color: highlight;
    }
  }
}

@layer layout {
  .my-stack {
    gap: var(--my-stack-gap, var(--my-gap));
    flex-direction: column;
    display: flex;
  }

  .my-cluster {
    align-items: var(--my-cluster-align, center);
    justify-content: var(--my-cluster-justify, flex-start);
    gap: var(--my-cluster-gap, var(--my-space-3));
    flex-wrap: wrap;
    display: flex;
  }

  .my-center {
    box-sizing: content-box;
    max-inline-size: var(--my-center-max, 75rem);
    padding-inline: var(--my-center-gutter, var(--my-space-5));
    margin-inline: auto;
  }

  .my-grid {
    gap: var(--my-grid-gap, var(--my-gap));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--my-grid-min, 16rem), 100%), 1fr));
    display: grid;
  }

  .my-sidebar {
    gap: var(--my-sidebar-gap, var(--my-gap));
    flex-wrap: wrap;
    display: flex;
  }

  .my-sidebar > :first-child {
    flex-basis: var(--my-sidebar-width, 16rem);
    flex-grow: 1;
  }

  .my-sidebar > :last-child {
    min-inline-size: var(--my-sidebar-content-min, 55%);
    flex-grow: 999;
    flex-basis: 0;
  }

  .my-switcher {
    gap: var(--my-gap);
    flex-wrap: wrap;
    display: flex;
  }

  .my-switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--my-switcher-at, 40rem) - 100%) * 999);
  }

  .my-cover {
    min-block-size: var(--my-cover-min, 100dvh);
    flex-direction: column;
    display: flex;
  }

  .my-cover > [data-cover-center] {
    margin-block: auto;
  }

  .my-frame {
    aspect-ratio: var(--my-frame-ratio, 16 / 9);
    place-items: center;
    display: grid;
    overflow: hidden;
  }

  .my-frame > :is(img, video) {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .my-columns {
    container-type: inline-size;
  }

  .my-columns > * {
    gap: var(--my-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
  }

  @container (width >= 42rem) {
    .my-columns > * {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

  @container (width >= 66rem) {
    .my-columns > * {
      grid-template-columns: repeat(16, minmax(0, 1fr));
    }
  }

  .my-app-shell {
    grid-template: "header"
                   "main" 1fr
                   "footer"
                   / 1fr;
    min-block-size: 100dvh;
    display: grid;
  }

  .my-app-shell > header {
    z-index: 10;
    background: var(--my-bg);
    border-block-end: 1px solid var(--my-border-subtle);
    grid-area: header;
    position: sticky;
    inset-block-start: 0;
  }

  .my-app-shell > main {
    grid-area: main;
  }

  .my-app-shell > footer {
    grid-area: footer;
  }

  .my-app-shell:has( > nav) {
    grid-template: "header header"
                   "nav main" 1fr
                   "footer footer"
                   / minmax(12rem, 16rem) 1fr;
  }

  .my-app-shell > nav {
    background: var(--my-layer-1);
    grid-area: nav;
  }

  @media (width < 48rem) {
    .my-app-shell:has( > nav) {
      grid-template: "header"
                     "nav"
                     "main" 1fr
                     "footer"
                     / 1fr;
    }
  }

  .my-docs {
    gap: var(--my-space-7);
    grid-template-columns: 1fr;
    display: grid;
  }

  @media (width >= 64rem) {
    .my-docs {
      grid-template-columns: minmax(0, 1fr) 14rem;
    }

    .my-docs > aside {
      align-self: start;
      position: sticky;
      inset-block-start: var(--my-space-9);
    }
  }

  .my-auth {
    min-block-size: 100dvh;
    padding: var(--my-space-5);
    place-items: center;
    display: grid;
  }

  .my-auth > * {
    inline-size: min(100%, 26rem);
  }
}

@layer components {
  .my-btn {
    --my-btn-bg: var(--my-accent);
    --my-btn-fg: var(--my-text-on-accent);
    --my-btn-bg-hover: var(--my-accent-hover);
    --my-btn-border: transparent;
    justify-content: center;
    align-items: center;
    gap: var(--my-space-3);
    min-block-size: var(--my-target-min);
    padding-block: 0;
    padding-inline: var(--my-space-5);
    font-weight: var(--my-weight-semibold);
    font-size: var(--my-text-md);
    letter-spacing: var(--my-tracking-md);
    line-height: var(--my-leading-tight);
    cursor: pointer;
    color: var(--my-btn-fg);
    background: var(--my-btn-bg);
    border: 1px solid var(--my-btn-border);
    border-radius: var(--my-control-radius);
    transition: background-color var(--my-duration-fast) var(--my-ease-productive);
    text-decoration: none;
    display: inline-flex;
  }

  .my-btn:hover {
    background: var(--my-btn-bg-hover);
  }

  .my-btn[data-variant="secondary"] {
    --my-btn-bg: transparent;
    --my-btn-fg: var(--my-accent-text);
    --my-btn-border: currentColor;
    --my-btn-bg-hover: var(--my-accent-subtle);
  }

  .my-btn[data-variant="ghost"] {
    --my-btn-bg: transparent;
    --my-btn-fg: var(--my-accent-text);
    --my-btn-bg-hover: var(--my-accent-subtle);
  }

  .my-btn[data-variant="danger"] {
    --my-btn-bg: var(--my-danger-solid);
    --my-btn-fg: var(--my-red-contrast);
    --my-btn-bg-hover: color-mix(in oklch, var(--my-danger-solid) 85%, black);
  }

  .my-btn[data-size="sm"] {
    min-block-size: 2rem;
    padding-inline: var(--my-space-4);
    font-size: var(--my-text-sm);
  }

  .my-btn:is(:disabled, [aria-disabled="true"]) {
    opacity: .5;
    cursor: not-allowed;
  }

  .my-btn[aria-pressed="true"] {
    --my-btn-bg: var(--my-accent-hover);
    --my-btn-fg: var(--my-text-on-accent);
    --my-btn-border: transparent;
  }

  @media (forced-colors: active) {
    .my-btn {
      border-color: buttontext;
    }
  }

  .my-field {
    gap: var(--my-space-2);
    max-inline-size: var(--my-field-max, 30rem);
    display: grid;
  }

  fieldset.my-field {
    border: 0;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
  }

  fieldset.my-field > legend {
    margin-block-end: var(--my-space-2);
    padding: 0;
  }

  .my-field > label, .my-field > legend {
    font-weight: 600;
  }

  .my-field-hint {
    color: var(--my-text-muted);
    font-size: var(--my-text-sm);
  }

  .my-field-error {
    color: var(--my-danger);
    font-weight: 600;
    font-size: var(--my-text-sm);
  }

  .my-field-error:before {
    content: "⚠ " / "";
  }

  :where(.my-field) :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    min-block-size: var(--my-target-min);
    padding: var(--my-space-3) var(--my-space-4);
    color: var(--my-text);
    background: var(--my-layer-2);
    border: 1px solid var(--my-border);
    border-radius: var(--my-control-radius);
    inline-size: 100%;
  }

  :where(.my-field) textarea {
    field-sizing: content;
    min-block-size: 6rem;
  }

  :where(.my-field) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--my-danger);
    border-width: 2px;
  }

  .my-field:has([aria-invalid="true"]) {
    border-inline-start: 4px solid var(--my-danger);
    padding-inline-start: var(--my-space-4);
  }

  @supports (appearance: base-select) {
    :where(.my-field) select {
      appearance: base-select;
    }

    :where(.my-field) select::picker(select) {
      appearance: base-select;
    }
  }

  :where(.my-field) :is(input[type="checkbox"]:not(.my-switch), input[type="radio"]) {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    accent-color: var(--my-accent);
    margin: 0;
  }

  .my-choice {
    align-items: center;
    gap: var(--my-space-3);
    min-block-size: var(--my-target-min);
    display: flex;
  }

  input.my-switch {
    appearance: none;
    border-radius: var(--my-radius-pill);
    background: var(--my-gray-8);
    cursor: pointer;
    block-size: 1.5rem;
    inline-size: 2.75rem;
    transition: background-color var(--my-duration-fast) var(--my-ease-productive);
    flex: none;
    margin: 0;
    position: relative;
  }

  input.my-switch:before {
    content: "";
    block-size: 1.125rem;
    inline-size: 1.125rem;
    box-shadow: var(--my-shadow-1);
    transition: translate var(--my-duration-fast) var(--my-ease-productive);
    background: #fff;
    border-radius: 50%;
    position: absolute;
    inset-block-start: .1875rem;
    inset-inline-start: .1875rem;
  }

  input.my-switch:checked {
    background: var(--my-accent);
  }

  input.my-switch:checked:before {
    translate: 1.25rem;
  }

  :dir(rtl) input.my-switch:checked:before {
    translate: -1.25rem;
  }

  input.my-switch:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  @media (forced-colors: active) {
    .my-switch {
      background: canvas;
      border: 2px solid canvastext;
    }

    .my-switch:before {
      background: canvastext;
      inset-block-start: .0625rem;
    }

    .my-switch:checked {
      background: highlight;
    }
  }

  .my-combobox-control {
    position: relative;
  }

  .my-combobox-control > input {
    padding-inline-end: var(--my-space-8) !important;
  }

  .my-combobox-control:after {
    content: "▾" / "";
    pointer-events: none;
    color: var(--my-text-muted);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--my-space-4);
    translate: 0 -50%;
  }

  .my-listbox {
    padding: var(--my-space-2);
    background: var(--my-layer-2);
    max-block-size: 16rem;
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-2);
    margin: 0;
    list-style: none;
    overflow-y: auto;
  }

  @supports (position-area: bottom) {
    .my-listbox {
      position-area: block-end span-inline-end;
      inline-size: anchor-size(width);
      position-try-fallbacks: flip-block;
      margin-block-start: var(--my-space-2);
    }
  }

  .my-listbox [role="option"] {
    min-block-size: 2.5rem;
    padding-inline: var(--my-space-4);
    border-radius: var(--my-radius-2);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .my-listbox [role="option"]:hover {
    background: var(--my-fill-hover);
  }

  .my-listbox [role="option"][data-active] {
    background: var(--my-accent-subtle);
    outline: 2px solid var(--my-focus-color);
    outline-offset: -2px;
  }

  .my-listbox [role="option"][aria-selected="true"] {
    font-weight: var(--my-weight-semibold);
  }

  .my-listbox [role="option"][aria-selected="true"]:after {
    content: "✓" / "";
    color: var(--my-accent-text);
  }

  .my-listbox [role="option"][hidden] {
    display: none;
  }

  .my-listbox-empty {
    padding: var(--my-space-3) var(--my-space-4);
    color: var(--my-text-muted);
  }

  .my-input-group {
    border: 1px solid var(--my-border);
    border-radius: var(--my-control-radius);
    background: var(--my-layer-2);
    align-items: stretch;
    inline-size: 100%;
    display: flex;
  }

  .my-input-group:focus-within {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: var(--my-focus-offset);
  }

  .my-input-group:has([aria-invalid="true"]) {
    border: 2px solid var(--my-danger);
  }

  :where(.my-field) .my-input-group > input, .my-input-group > input {
    background: none;
    flex: 1;
    min-inline-size: 0;
    border: 0 !important;
    outline: none !important;
  }

  .my-addon {
    align-items: center;
    gap: var(--my-space-2);
    padding-inline: var(--my-space-4);
    color: var(--my-text-muted);
    white-space: nowrap;
    display: inline-flex;
  }

  .my-addon:first-child {
    padding-inline-end: 0;
  }

  .my-addon:last-child {
    padding-inline-start: 0;
  }

  .my-input-group > button {
    margin: var(--my-space-1);
    border-radius: calc(var(--my-control-radius) - 2px);
    padding-block: 0;
    padding-inline: var(--my-space-3);
    color: var(--my-accent-text);
    font-weight: var(--my-weight-medium);
    cursor: pointer;
    background: none;
    border: 0;
  }

  .my-input-group > button:hover {
    background: var(--my-fill-hover);
  }

  .my-input-group > my-icon:first-child {
    color: var(--my-text-muted);
    align-self: center;
    margin-inline-start: var(--my-space-4);
  }

  .my-input-group input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
  }

  .my-char-count {
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .my-char-count[data-over] {
    color: var(--my-danger);
    font-weight: var(--my-weight-semibold);
  }

  .my-slider {
    appearance: none;
    inline-size: 100%;
    block-size: var(--my-target-min);
    cursor: pointer;
    --_pct: calc((var(--my-value, 50) - var(--my-min, 0)) / (var(--my-max, 100) - var(--my-min, 0)) * 100%);
    background: none;
    margin: 0;
  }

  .my-slider::-webkit-slider-runnable-track {
    border-radius: var(--my-radius-pill);
    background: linear-gradient(to right, var(--my-accent) var(--_pct), var(--my-gray-6) var(--_pct));
    block-size: .375rem;
  }

  .my-slider::-moz-range-track {
    border-radius: var(--my-radius-pill);
    background: var(--my-gray-6);
    block-size: .375rem;
  }

  .my-slider::-moz-range-progress {
    border-radius: var(--my-radius-pill);
    background: var(--my-accent);
    block-size: .375rem;
  }

  .my-slider::-webkit-slider-thumb {
    appearance: none;
    border: 2px solid var(--my-accent);
    block-size: 1.5rem;
    inline-size: 1.5rem;
    box-shadow: var(--my-shadow-1);
    background: #fff;
    border-radius: 50%;
    margin-block-start: -.5625rem;
  }

  .my-slider::-moz-range-thumb {
    border: 2px solid var(--my-accent);
    background: #fff;
    border-radius: 50%;
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  .my-slider:focus-visible {
    outline: none;
  }

  .my-slider:focus-visible::-webkit-slider-thumb {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: 2px;
  }

  .my-slider:focus-visible::-moz-range-thumb {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: 2px;
  }

  :dir(rtl) .my-slider::-webkit-slider-runnable-track {
    background: linear-gradient(to left, var(--my-accent) var(--_pct), var(--my-gray-6) var(--_pct));
  }

  .my-slider-row {
    align-items: center;
    gap: var(--my-space-4);
    display: flex;
  }

  .my-slider-row > output {
    font-variant-numeric: tabular-nums;
    min-inline-size: 3ch;
    font-weight: var(--my-weight-semibold);
    text-align: end;
  }

  .my-dropzone {
    place-items: center;
    gap: var(--my-space-2);
    min-block-size: 8rem;
    padding: var(--my-space-6);
    border: 2px dashed var(--my-border);
    border-radius: var(--my-radius-3);
    background: var(--my-layer-1);
    text-align: center;
    color: var(--my-text-muted);
    display: grid;
    position: relative;
  }

  .my-dropzone:before {
    content: "Drag files here or " / "";
  }

  .my-dropzone:after {
    content: "choose from your device" / "";
    color: var(--my-link);
    font-weight: var(--my-weight-medium);
    text-decoration: underline;
  }

  .my-dropzone > input[type="file"] {
    opacity: 0;
    cursor: pointer;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }

  .my-dropzone:has( > input:focus-visible) {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: var(--my-focus-offset);
  }

  .my-dropzone:hover, .my-dropzone[data-dragover] {
    border-color: var(--my-accent);
    background: var(--my-accent-subtle);
  }

  .my-file-list {
    gap: var(--my-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .my-file-list > li {
    align-items: center;
    gap: var(--my-space-3);
    padding: var(--my-space-3) var(--my-space-4);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-2);
    background: var(--my-layer-2);
    font-size: var(--my-text-sm);
    display: flex;
  }

  .my-file-list > li > small {
    color: var(--my-text-muted);
    font-variant-numeric: tabular-nums;
    margin-inline-start: auto;
  }

  .my-number > input {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .my-number > button {
    inline-size: 2.5rem;
    margin: var(--my-space-1);
    font-size: var(--my-text-lg);
    color: var(--my-text);
  }

  .my-number > button:disabled {
    opacity: .4;
    cursor: not-allowed;
  }

  :where(.my-field) input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
    font-variant-numeric: tabular-nums;
    max-inline-size: 16rem;
  }

  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .7;
    border-radius: var(--my-radius-1);
  }

  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: var(--my-fill-hover);
  }

  .my-date-range {
    align-items: end;
    gap: var(--my-space-4);
    border: 0;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .my-dialog {
    max-inline-size: min(var(--my-dialog-max, 36rem), calc(100vw - 2rem));
    padding: var(--my-space-6);
    color: var(--my-text);
    background: var(--my-layer-2);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    opacity: 0;
    transition: opacity var(--my-duration-moderate) var(--my-ease-expressive),
              translate var(--my-duration-moderate) var(--my-ease-expressive),
              overlay var(--my-duration-moderate) allow-discrete,
              display var(--my-duration-moderate) allow-discrete;
    translate: 0 1rem;
  }

  .my-dialog[open] {
    opacity: 1;
    translate: 0;
  }

  @starting-style {
    .my-dialog[open] {
      opacity: 0;
      translate: 0 1rem;
    }
  }

  .my-dialog::backdrop {
    background: oklch(0% 0 0 / .5);
  }

  .my-dialog[data-variant="drawer"] {
    border-radius: 0;
    block-size: 100dvh;
    max-block-size: none;
    margin-inline-end: 0;
    translate: 100%;
  }

  .my-dialog[data-variant="drawer"][open] {
    translate: 0;
  }

  :dir(rtl) .my-dialog[data-variant="drawer"]:not([open]) {
    translate: -100%;
  }

  @starting-style {
    :dir(rtl) .my-dialog[data-variant="drawer"][open] {
      translate: -100%;
    }
  }

  .my-popover {
    padding: var(--my-space-4);
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius);
    margin: 0;
  }

  @supports (position-area: bottom) {
    .my-popover {
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--my-space-2);
    }
  }

  .my-accordion > details {
    border-block-end: 1px solid var(--my-border-subtle);
  }

  .my-accordion summary {
    justify-content: space-between;
    align-items: center;
    gap: var(--my-space-3);
    min-block-size: var(--my-target-min);
    padding-inline: var(--my-space-3);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
  }

  .my-accordion summary::-webkit-details-marker {
    display: none;
  }

  .my-accordion summary:after {
    content: "+" / "";
    font-size: 1.25em;
  }

  .my-accordion details[open] > summary:after {
    content: "−" / "";
  }

  .my-accordion details::details-content {
    block-size: 0;
    transition: block-size var(--my-duration-moderate) var(--my-ease-productive), content-visibility var(--my-duration-moderate) allow-discrete;
    overflow: clip;
  }

  .my-accordion details[open]::details-content {
    block-size: auto;
  }

  .my-accordion details > :not(summary) {
    padding: var(--my-space-3);
  }

  .my-alert {
    gap: var(--my-space-2);
    padding: var(--my-space-5);
    background: var(--my-layer-1);
    border-inline-start: .5rem solid var(--my-alert-color, var(--my-accent));
    display: grid;
  }

  .my-alert[data-variant="error"] {
    --my-alert-color: var(--my-danger-solid);
    background: var(--my-danger-subtle);
  }

  .my-alert[data-variant="success"] {
    --my-alert-color: var(--my-success-solid);
    background: var(--my-success-subtle);
  }

  .my-alert[data-variant="warning"] {
    --my-alert-color: var(--my-amber-9);
    background: var(--my-warning-subtle);
  }

  .my-breadcrumb ol {
    align-items: center;
    gap: var(--my-space-2) var(--my-space-3);
    font-size: var(--my-text-sm);
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .my-breadcrumb li {
    align-items: center;
    gap: var(--my-space-3);
    display: inline-flex;
  }

  .my-breadcrumb li + li:before {
    content: "/" / "";
    color: var(--my-text-muted);
  }

  .my-breadcrumb [aria-current="page"] {
    color: var(--my-text);
    font-weight: var(--my-weight-medium);
    text-decoration: none;
  }

  .my-breadcrumb a {
    padding-block: var(--my-space-2);
    display: inline-block;
  }

  .my-pagination ul {
    align-items: center;
    gap: var(--my-space-2);
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .my-pagination a {
    white-space: nowrap;
    min-inline-size: var(--my-target-min);
    min-block-size: var(--my-target-min);
    padding-inline: var(--my-space-3);
    border-radius: var(--my-control-radius);
    color: var(--my-text);
    font-variant-numeric: tabular-nums;
    justify-content: center;
    align-items: center;
    gap: .3em;
    text-decoration: none;
    display: inline-flex;
  }

  .my-pagination a:hover {
    background: var(--my-fill-hover);
  }

  .my-pagination a[aria-current="page"] {
    background: var(--my-accent);
    color: var(--my-text-on-accent);
    font-weight: var(--my-weight-semibold);
  }

  .my-pagination a[rel="prev"], .my-pagination a[rel="next"] {
    color: var(--my-link);
  }

  .my-pagination a:not([href]):not([aria-current]) {
    color: var(--my-text-muted);
    pointer-events: none;
  }

  .my-pagination-gap {
    min-inline-size: var(--my-space-7);
    text-align: center;
    color: var(--my-text-muted);
  }

  @media (forced-colors: active) {
    .my-pagination a[aria-current="page"] {
      outline: 2px solid canvastext;
    }
  }

  .my-header {
    border-block-end: 1px solid var(--my-border-subtle);
    background: var(--my-bg);
    container: my-header / inline-size;
  }

  .my-header-inner {
    align-items: center;
    gap: var(--my-space-5);
    min-block-size: 4rem;
    max-inline-size: var(--my-center-max, 75rem);
    padding-inline: var(--my-space-5);
    margin-inline: auto;
    display: flex;
  }

  .my-header-brand {
    font-weight: var(--my-weight-bold);
    font-size: var(--my-text-lg);
    color: var(--my-text);
    margin-inline-end: auto;
    text-decoration: none;
  }

  .my-header-nav ul {
    gap: var(--my-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .my-header-nav a {
    padding: var(--my-space-3) var(--my-space-4);
    border-radius: var(--my-control-radius);
    color: var(--my-text);
    font-weight: var(--my-weight-medium);
    text-decoration: none;
    display: block;
  }

  .my-header-nav a:hover {
    background: var(--my-fill-hover);
  }

  .my-header-nav a[aria-current="page"] {
    color: var(--my-accent-text);
    box-shadow: inset 0 -2px 0 var(--my-accent);
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }

  @container my-header (width >= 48rem) {
    .my-header-toggle {
      display: none;
    }

    .my-header-nav[popover] {
      color: inherit;
      background: none;
      border: 0;
      block-size: auto;
      inline-size: auto;
      margin: 0;
      padding: 0;
      display: block;
      position: static;
      inset: auto;
      overflow: visible;
    }
  }

  @container my-header (width <= 47.99rem) {
    .my-header-nav[popover]:popover-open {
      inline-size: min(20rem, 100vw);
      padding: var(--my-space-4);
      border: 1px solid var(--my-border-subtle);
      border-radius: 0 0 0 var(--my-radius-3);
      background: var(--my-layer-2);
      box-shadow: var(--my-shadow-3);
      margin: 0;
      inset: auto;
      inset-block-start: 4rem;
      inset-inline-end: 0;
    }

    .my-header-nav ul {
      flex-direction: column;
    }

    .my-header-nav a[aria-current="page"] {
      box-shadow: inset 3px 0 0 var(--my-accent);
      border-radius: 0;
    }
  }

  .my-sidenav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .my-sidenav ul ul {
    padding-inline-start: var(--my-space-5);
  }

  .my-sidenav :is(a, summary) {
    min-block-size: 2.5rem;
    padding: var(--my-space-2) var(--my-space-4);
    border-radius: var(--my-control-radius);
    color: var(--my-text);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .my-sidenav summary {
    font-weight: var(--my-weight-semibold);
    list-style: none;
  }

  .my-sidenav summary::-webkit-details-marker {
    display: none;
  }

  .my-sidenav summary:after {
    content: "›" / "";
    transition: rotate var(--my-duration-fast) var(--my-ease-productive);
  }

  .my-sidenav details[open] > summary:after {
    rotate: 90deg;
  }

  .my-sidenav :is(a, summary):hover {
    background: var(--my-fill-hover);
  }

  .my-sidenav a[aria-current="page"] {
    background: var(--my-accent-subtle);
    color: var(--my-accent-text);
    font-weight: var(--my-weight-semibold);
    box-shadow: inset 3px 0 0 var(--my-accent);
  }

  @media (forced-colors: active) {
    .my-sidenav a[aria-current="page"] {
      border-inline-start: 3px solid highlight;
    }
  }

  .my-menu {
    min-inline-size: 12rem;
    padding: var(--my-space-2);
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-2);
    margin: 0;
  }

  @supports (position-area: bottom) {
    .my-menu {
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--my-space-2);
    }
  }

  .my-menu [role^="menuitem"] {
    align-items: center;
    gap: var(--my-space-3);
    min-block-size: 2.5rem;
    inline-size: 100%;
    padding-block: 0;
    padding-inline: var(--my-space-4);
    border-radius: var(--my-radius-2);
    color: inherit;
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    display: flex;
  }

  .my-menu [role^="menuitem"]:is(:hover, :focus) {
    background: var(--my-fill-hover);
    outline: none;
  }

  .my-menu [role^="menuitem"]:focus-visible {
    outline: 2px solid var(--my-focus-color);
    outline-offset: -2px;
  }

  .my-menu [role^="menuitem"][data-variant="danger"] {
    color: var(--my-danger);
  }

  .my-menu [role^="menuitem"][aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
  }

  .my-menu hr {
    margin-block: var(--my-space-2);
  }

  .my-toggle-group, .my-segmented {
    padding: var(--my-space-1);
    gap: var(--my-space-1);
    background: var(--my-fill);
    border-radius: calc(var(--my-control-radius) + var(--my-space-1));
    border: 0;
    margin: 0;
    display: inline-flex;
  }

  .my-toggle-group > button, .my-segmented > label {
    justify-content: center;
    align-items: center;
    gap: var(--my-space-2);
    min-block-size: 2.25rem;
    min-inline-size: 2.25rem;
    padding-inline: var(--my-space-4);
    border-radius: var(--my-control-radius);
    color: var(--my-text-muted);
    font-weight: var(--my-weight-medium);
    cursor: pointer;
    background: none;
    border: 0;
    display: inline-flex;
    position: relative;
  }

  .my-toggle-group > button:hover, .my-segmented > label:hover {
    color: var(--my-text);
  }

  .my-toggle-group > button[aria-pressed="true"], .my-segmented > label:has(input:checked) {
    background: var(--my-layer-2);
    color: var(--my-text);
    box-shadow: var(--my-shadow-1);
  }

  .my-segmented input {
    opacity: 0;
    cursor: pointer;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .my-segmented > label:has(input:focus-visible) {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: 1px;
  }

  @media (forced-colors: active) {
    .my-toggle-group > button[aria-pressed="true"], .my-segmented > label:has(input:checked) {
      outline: 2px solid highlight;
    }
  }

  .my-steps {
    --_n: 1;
    gap: var(--my-space-2);
    counter-reset: my-step;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .my-steps > li {
    counter-increment: my-step;
    gap: var(--my-space-3);
    border-block-start: .5rem solid var(--my-gray-5);
    min-inline-size: 0;
    color: var(--my-text-muted);
    font-size: var(--my-text-sm);
    flex: 1 1 0;
    padding-block-start: .5rem;
    display: grid;
  }

  .my-steps > li:before {
    content: counter(my-step) / "";
    border: 2px solid var(--my-gray-8);
    background: var(--my-bg);
    block-size: 1.75rem;
    inline-size: 1.75rem;
    font-weight: var(--my-weight-semibold);
    font-variant-numeric: tabular-nums;
    border-radius: 50%;
    place-items: center;
    display: inline-grid;
  }

  .my-steps > li[data-state="complete"] {
    border-color: var(--my-accent-text);
    color: var(--my-text);
  }

  .my-steps > li[data-state="complete"]:before {
    content: "✓" / "";
    background: var(--my-accent);
    border-color: var(--my-accent);
    color: var(--my-text-on-accent);
  }

  .my-steps > li[aria-current="step"] {
    border-color: var(--my-accent);
    color: var(--my-text);
    font-weight: var(--my-weight-semibold);
  }

  .my-steps > li[aria-current="step"]:before {
    border-color: var(--my-accent);
    color: var(--my-accent-text);
  }

  @container (width <= 30rem) {
    .my-steps > li:not([aria-current]) {
      gap: 0;
      font-size: 0;
    }

    .my-steps > li:not([aria-current]):before {
      font-size: var(--my-text-sm);
    }
  }

  @media (forced-colors: active) {
    .my-steps > li[aria-current="step"], .my-steps > li[data-state="complete"] {
      border-block-start-color: highlight;
    }
  }

  .my-link {
    align-items: center;
    gap: var(--my-space-2);
    color: var(--my-link);
    font-weight: var(--my-weight-medium);
    text-decoration: none;
    display: inline-flex;
  }

  .my-link:hover {
    text-underline-offset: .18em;
    text-decoration: underline;
  }

  .my-link[rel~="external"]:after {
    content: "↗" / "";
    font-size: .85em;
  }

  .my-link > my-icon {
    transition: translate var(--my-duration-fast) var(--my-ease-productive);
  }

  .my-link:hover > my-icon[name^="arrow-right"] {
    translate: .15em;
  }

  .my-link[data-variant="muted"] {
    color: var(--my-text-muted);
  }

  .my-link[data-variant="muted"]:hover {
    color: var(--my-text);
  }

  .my-toc {
    font-size: var(--my-text-sm);
  }

  .my-toc > :is(h2, h3, p):first-child {
    font-size: var(--my-text-xs);
    line-height: var(--my-leading-xs);
    font-weight: var(--my-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--my-text-muted);
    margin-block-end: var(--my-space-3);
  }

  .my-toc ul {
    border-inline-start: 1px solid var(--my-border-subtle);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .my-toc ul ul {
    border: 0;
    padding-inline-start: var(--my-space-4);
  }

  .my-toc a {
    padding: var(--my-space-2) var(--my-space-4);
    color: var(--my-text-muted);
    border-inline-start: 2px solid #0000;
    margin-inline-start: -1px;
    text-decoration: none;
    display: block;
  }

  .my-toc a:hover {
    color: var(--my-text);
  }

  .my-toc a[aria-current] {
    color: var(--my-accent-text);
    border-inline-start-color: var(--my-accent);
    font-weight: var(--my-weight-medium);
  }

  .my-back-to-top {
    z-index: 20;
    align-items: center;
    gap: var(--my-space-2);
    min-block-size: var(--my-target-min);
    padding-inline: var(--my-space-4);
    border-radius: var(--my-radius-pill);
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    box-shadow: var(--my-shadow-2);
    font-size: var(--my-text-sm);
    font-weight: var(--my-weight-medium);
    text-decoration: none;
    display: inline-flex;
    position: fixed;
    inset-block-end: var(--my-space-5);
    inset-inline-end: var(--my-space-5);
  }

  .my-back-to-top:before {
    content: "↑" / "";
  }

  @supports (animation-timeline: scroll()) {
    .my-back-to-top {
      animation: linear both my-reveal;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }

    .my-back-to-top:focus-visible {
      animation: none;
    }

    @keyframes my-reveal {
      from {
        opacity: 0;
        visibility: hidden;
        translate: 0 1rem;
      }

      to {
        opacity: 1;
        visibility: visible;
        translate: 0;
      }
    }
  }

  .my-footer {
    background: var(--my-layer-1);
    border-block-start: 1px solid var(--my-border-subtle);
    font-size: var(--my-text-sm);
  }

  .my-footer-inner {
    max-inline-size: var(--my-center-max, 75rem);
    padding: var(--my-space-9) var(--my-space-5) var(--my-space-6);
    gap: var(--my-space-8);
    margin-inline: auto;
    display: grid;
  }

  .my-footer nav {
    gap: var(--my-space-7);
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    display: grid;
  }

  .my-footer h2 {
    font-size: var(--my-text-sm);
    line-height: var(--my-leading-sm);
    letter-spacing: 0;
    font-family: var(--my-font-sans);
    font-weight: var(--my-weight-semibold);
    margin-block-end: var(--my-space-3);
  }

  .my-footer ul {
    gap: var(--my-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .my-footer a {
    color: var(--my-text-muted);
    padding-block: var(--my-space-1);
    text-decoration: none;
    display: inline-block;
  }

  .my-footer a:hover {
    color: var(--my-text);
    text-decoration: underline;
  }

  .my-footer-legal {
    justify-content: space-between;
    gap: var(--my-space-4);
    border-block-start: 1px solid var(--my-border-subtle);
    color: var(--my-text-muted);
    flex-wrap: wrap;
    padding-block-start: var(--my-space-5);
    display: flex;
  }

  .my-tooltip-anchor {
    anchor-scope: --my-tip;
    display: inline-flex;
    position: relative;
  }

  .my-tooltip-anchor > :first-child {
    anchor-name: --my-tip;
  }

  .my-tooltip {
    inset-block-end: calc(100% + var(--my-space-2));
    z-index: 50;
    inline-size: max-content;
    max-inline-size: 18rem;
    padding: var(--my-space-2) var(--my-space-3);
    font-size: var(--my-text-sm);
    line-height: var(--my-leading-sm);
    color: var(--my-gray-1);
    background: var(--my-gray-12);
    border-radius: var(--my-radius-2);
    box-shadow: var(--my-shadow-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--my-duration-fast) var(--my-ease-productive), visibility 0s linear var(--my-duration-fast);
    position: absolute;
    left: 50%;
    translate: -50%;
  }

  @supports (position-area: top) {
    .my-tooltip {
      position-anchor: --my-tip;
      position-area: top;
      justify-self: anchor-center;
      position-try-fallbacks: flip-block, --my-tip-start;
      margin-block-end: var(--my-space-2);
      position: fixed;
      inset: auto;
      translate: none;
    }

    @position-try --my-tip-start {
      position-area: block-start span-inline-end;
      justify-self: start;
    }
  }

  .my-tooltip:before {
    content: "";
    inset: 100% 0 calc(-1 * var(--my-space-3));
    position: absolute;
  }

  .my-tooltip-anchor:is(:hover, :has(:focus-visible)):not([data-dismissed]) .my-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .my-tooltip-anchor:hover:not(:has(:focus-visible)) .my-tooltip {
    transition-delay: .3s, 0s;
  }

  @media (forced-colors: active) {
    .my-tooltip {
      border: 1px solid canvastext;
    }
  }

  .my-toaster {
    inset: auto;
    gap: var(--my-space-3);
    background: none;
    border: 0;
    inline-size: min(24rem, 100vw - 2rem);
    margin: 0;
    padding: 0;
    display: grid;
    position: fixed;
    inset-block-end: var(--my-space-5);
    inset-inline-end: var(--my-space-5);
    overflow: visible;
  }

  .my-toaster:not(:popover-open) {
    display: none;
  }

  .my-toast {
    align-items: start;
    gap: var(--my-space-3);
    padding: var(--my-space-4) var(--my-space-4) var(--my-space-4) var(--my-space-5);
    color: var(--my-text);
    background: var(--my-layer-2);
    border: 1px solid var(--my-border-subtle);
    border-inline-start: 4px solid var(--my-toast-color, var(--my-accent));
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-3);
    transition: opacity var(--my-duration-moderate) var(--my-ease-expressive), translate var(--my-duration-moderate) var(--my-ease-expressive);
    grid-template-columns: 1fr auto;
    display: grid;
  }

  @starting-style {
    .my-toast {
      opacity: 0;
      translate: 0 1rem;
    }
  }

  .my-toast[data-leaving] {
    opacity: 0;
    translate: 1rem;
  }

  :dir(rtl) .my-toast[data-leaving] {
    translate: -1rem;
  }

  .my-toast[data-variant="success"] {
    --my-toast-color: var(--my-success-solid);
  }

  .my-toast[data-variant="warning"] {
    --my-toast-color: var(--my-amber-9);
  }

  .my-toast[data-variant="error"] {
    --my-toast-color: var(--my-danger-solid);
  }

  .my-toast-close {
    block-size: 2rem;
    inline-size: 2rem;
    margin: calc(-1 * var(--my-space-2));
    border-radius: var(--my-radius-2);
    color: var(--my-text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: var(--my-leading-none);
    background: none;
    border: 0;
  }

  .my-toast-close:hover {
    background: var(--my-fill-hover);
    color: var(--my-text);
  }

  .my-error-summary {
    padding: var(--my-space-5);
    border: var(--my-border-thick) solid var(--my-danger-solid);
    border-radius: var(--my-radius);
    background: var(--my-layer-2);
  }

  .my-error-summary h2 {
    font-size: var(--my-display-1);
    line-height: var(--my-display-leading-1);
    margin-block-end: var(--my-space-3);
  }

  .my-error-summary ul {
    margin: 0;
    padding-inline-start: var(--my-space-5);
  }

  .my-error-summary a {
    color: var(--my-danger);
    font-weight: var(--my-weight-semibold);
  }

  .my-error-summary:focus-visible {
    outline-color: var(--my-danger);
  }

  .my-progress, .my-meter {
    appearance: none;
    inline-size: 100%;
    block-size: var(--my-progress-height, .5rem);
    border-radius: var(--my-radius-pill);
    background: var(--my-fill);
    accent-color: var(--my-accent);
    border: 0;
    display: block;
    overflow: hidden;
  }

  .my-progress::-webkit-progress-bar {
    background: var(--my-fill);
  }

  .my-progress::-webkit-progress-value {
    background: var(--my-accent);
    border-radius: inherit;
    transition: inline-size var(--my-duration-moderate) var(--my-ease-productive);
  }

  .my-progress::-moz-progress-bar {
    background: var(--my-accent);
    border-radius: inherit;
  }

  .my-progress:indeterminate::-webkit-progress-bar {
    background: linear-gradient(90deg, var(--my-fill) 0 30%, var(--my-accent) 30% 60%, var(--my-fill) 60%) 0 0 / 250% 100%;
    animation: 1.4s linear infinite my-indeterminate;
  }

  .my-progress:indeterminate::-moz-progress-bar {
    background: none;
  }

  .my-progress:indeterminate {
    background: linear-gradient(90deg, var(--my-fill) 0 30%, var(--my-accent) 30% 60%, var(--my-fill) 60%) 0 0 / 250% 100%;
    animation: 1.4s linear infinite my-indeterminate;
  }

  @keyframes my-indeterminate {
    to {
      background-position: -250% 0;
    }
  }

  .my-meter::-webkit-meter-bar {
    background: var(--my-fill);
    border: 0;
    block-size: 100%;
  }

  .my-meter::-webkit-meter-optimum-value {
    background: var(--my-success-solid);
  }

  .my-meter::-webkit-meter-suboptimum-value {
    background: var(--my-amber-9);
  }

  .my-meter::-webkit-meter-even-less-good-value {
    background: var(--my-danger-solid);
  }

  .my-meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--my-success-solid);
  }

  .my-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--my-amber-9);
  }

  .my-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--my-danger-solid);
  }

  @media (forced-colors: active) {
    .my-progress, .my-meter {
      border: 1px solid canvastext;
    }
  }

  .my-spinner {
    inline-size: var(--my-spinner-size, 1.5rem);
    block-size: var(--my-spinner-size, 1.5rem);
    border: calc(var(--my-spinner-size, 1.5rem) / 8) solid var(--my-fill-active);
    border-block-start-color: var(--my-accent);
    vertical-align: middle;
    border-radius: 50%;
    animation: .8s linear infinite my-spin;
    display: inline-block;
  }

  @keyframes my-spin {
    to {
      rotate: 1turn;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .my-spinner {
      animation: 2s ease-in-out infinite my-pulse !important;
    }

    @keyframes my-pulse {
      50% {
        opacity: .4;
      }
    }
  }

  .my-skeleton {
    block-size: var(--my-skeleton-height, 1em);
    border-radius: var(--my-radius-2);
    background: linear-gradient(90deg, var(--my-fill) 0 40%, var(--my-fill-hover) 50%, var(--my-fill) 60%) 0 0 / 300% 100%;
    animation: 1.6s ease-in-out infinite my-shimmer;
    display: block;
  }

  .my-skeleton[data-shape="circle"] {
    inline-size: var(--my-skeleton-height, 2.5rem);
    block-size: var(--my-skeleton-height, 2.5rem);
    border-radius: 50%;
  }

  @keyframes my-shimmer {
    to {
      background-position: -150% 0;
    }
  }

  @media (forced-colors: active) {
    .my-skeleton {
      background: graytext;
    }
  }

  .my-banner {
    justify-content: center;
    align-items: center;
    gap: var(--my-space-4);
    padding: var(--my-space-3) var(--my-space-5);
    background: var(--my-banner-bg, var(--my-accent));
    color: var(--my-banner-fg, var(--my-text-on-accent));
    font-size: var(--my-text-sm);
    text-align: center;
    display: flex;
  }

  .my-banner a {
    color: inherit;
    font-weight: var(--my-weight-semibold);
  }

  .my-banner p {
    max-inline-size: none;
  }

  .my-banner > button {
    border-radius: var(--my-radius-2);
    block-size: 2rem;
    inline-size: 2rem;
    color: inherit;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: var(--my-leading-none);
    background: none;
    border: 0;
    flex: none;
  }

  .my-banner > button:hover {
    background: color-mix(in oklch, currentColor 15%, transparent);
  }

  .my-banner[data-variant="neutral"] {
    --my-banner-bg: var(--my-gray-12);
    --my-banner-fg: var(--my-gray-1);
  }

  .my-banner[data-variant="warning"] {
    --my-banner-bg: var(--my-warning-subtle);
    --my-banner-fg: var(--my-text);
    border-block-end: 1px solid var(--my-amber-7);
  }

  @media (forced-colors: active) {
    .my-banner {
      forced-color-adjust: none;
      color: canvastext;
      background: canvas;
      border-block-end: 1px solid canvastext;
    }

    .my-banner a {
      color: linktext;
    }
  }

  .my-toggletip {
    vertical-align: middle;
    display: inline-flex;
  }

  .my-toggletip > button {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: var(--my-accent-text);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    display: inline-grid;
  }

  .my-toggletip > button:hover {
    background: var(--my-fill-hover);
  }

  .my-toggletip-bubble {
    max-inline-size: 18rem;
    padding: var(--my-space-3) var(--my-space-4);
    font-size: var(--my-text-sm);
    line-height: var(--my-leading-sm);
    color: var(--my-gray-1);
    background: var(--my-gray-12);
    border-radius: var(--my-radius-2);
    box-shadow: var(--my-shadow-2);
    border: 0;
    margin: 0;
  }

  .my-toggletip-bubble a {
    color: inherit;
  }

  @supports (position-area: top) {
    .my-toggletip-bubble {
      position-area: top;
      justify-self: anchor-center;
      position-try-fallbacks: flip-block, --my-tip-start;
      margin-block-end: var(--my-space-2);
    }
  }

  @media (forced-colors: active) {
    .my-toggletip-bubble {
      border: 1px solid canvastext;
    }
  }

  .my-progress-circle {
    --_size: var(--my-progress-size, 4rem);
    --_track: calc(var(--_size) / 10);
    isolation: isolate;
    inline-size: var(--_size);
    block-size: var(--_size);
    font-size: calc(var(--_size) / 4);
    font-weight: var(--my-weight-semibold);
    font-variant-numeric: tabular-nums;
    background: conic-gradient(var(--my-accent) calc(var(--my-value, 0) * 1%), var(--my-fill-active) 0);
    border-radius: 50%;
    place-items: center;
    display: inline-grid;
    position: relative;
  }

  .my-progress-circle:before {
    content: "";
    inset: var(--_track);
    z-index: -1;
    background: var(--my-bg);
    border-radius: 50%;
    position: absolute;
  }

  .my-progress-circle[data-size="sm"] {
    --my-progress-size: 2.5rem;
  }

  .my-progress-circle[data-size="lg"] {
    --my-progress-size: 6rem;
  }

  @media (forced-colors: active) {
    .my-progress-circle {
      forced-color-adjust: none;
      background: conic-gradient(Highlight calc(var(--my-value, 0) * 1%), GrayText 0);
    }

    .my-progress-circle:before {
      background: canvas;
    }

    .my-progress-circle > span {
      color: canvastext;
    }
  }

  .my-popconfirm {
    max-inline-size: 20rem;
    padding: var(--my-space-4);
    gap: var(--my-space-3);
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-3);
    margin: 0;
    display: grid;
  }

  .my-popconfirm:not(:popover-open) {
    display: none;
  }

  .my-popconfirm > p {
    font-weight: var(--my-weight-medium);
  }

  .my-popconfirm > .my-cluster {
    --my-cluster-gap: var(--my-space-2);
    justify-content: flex-end;
  }

  @supports (position-area: bottom) {
    .my-popconfirm {
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--my-space-2);
    }
  }

  .my-hovercard-anchor {
    anchor-scope: --my-hc;
    display: inline-block;
    position: relative;
  }

  .my-hovercard-anchor > :first-child {
    anchor-name: --my-hc;
  }

  .my-hovercard {
    z-index: 40;
    inline-size: 18rem;
    padding: var(--my-space-4);
    gap: var(--my-space-3);
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--my-duration-fast) var(--my-ease-productive) 0s, visibility 0s linear var(--my-duration-fast);
    display: grid;
    position: absolute;
    inset-block-start: calc(100% + var(--my-space-2));
    inset-inline-start: 0;
  }

  @supports (position-area: bottom) {
    .my-hovercard {
      position-anchor: --my-hc;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-block-start: var(--my-space-2);
      position: fixed;
      inset: auto;
    }
  }

  .my-hovercard:before {
    content: "";
    inset: calc(-1 * var(--my-space-3)) 0 100%;
    position: absolute;
  }

  .my-hovercard-anchor:is(:hover, :focus-within) .my-hovercard {
    opacity: 1;
    visibility: visible;
    transition-delay: .4s, .4s;
  }

  .my-hovercard-anchor:focus-within .my-hovercard {
    transition-delay: 0s, 0s;
  }

  .my-table-wrap {
    max-block-size: var(--my-table-max-height, none);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    overflow: auto;
    container: my-table / inline-size;
  }

  .my-table {
    --my-cell-y: var(--my-space-3);
    --my-cell-x: var(--my-space-4);
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
  }

  .my-table caption {
    padding: var(--my-space-4);
    text-align: start;
    font-weight: var(--my-weight-semibold);
    caption-side: top;
  }

  .my-table :is(th, td) {
    padding: var(--my-cell-y) var(--my-cell-x);
    border-block-end: 1px solid var(--my-border-subtle);
    text-align: start;
    vertical-align: top;
  }

  .my-table thead th {
    z-index: 1;
    background: var(--my-layer-1);
    font-size: var(--my-text-sm);
    font-weight: var(--my-weight-semibold);
    color: var(--my-text-muted);
    white-space: nowrap;
    position: sticky;
    inset-block-start: 0;
  }

  .my-table tbody tr:last-child > * {
    border-block-end: 0;
  }

  .my-table tbody tr:hover {
    background: var(--my-fill);
  }

  .my-table[data-striped] tbody tr:nth-child(2n) {
    background: var(--my-layer-1);
  }

  .my-table[data-density="compact"] {
    --my-cell-y: var(--my-space-2);
    --my-cell-x: var(--my-space-3);
    font-size: var(--my-text-sm);
  }

  .my-table[data-density="relaxed"] {
    --my-cell-y: var(--my-space-5);
  }

  .my-table :is(th, td)[data-align="end"] {
    text-align: end;
  }

  .my-table tbody tr:has( > td > input[type="checkbox"]:checked) {
    background: var(--my-accent-subtle);
  }

  .my-table :is(th, td):has( > input[type="checkbox"]) {
    inline-size: 1px;
  }

  .my-table input[type="checkbox"] {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    accent-color: var(--my-accent);
    vertical-align: middle;
  }

  .my-table th > button {
    all: unset;
    align-items: center;
    gap: var(--my-space-2);
    cursor: pointer;
    border-radius: var(--my-radius-1);
    font: inherit;
    color: inherit;
    margin: calc(-1 * var(--my-space-1));
    padding: var(--my-space-1);
    display: inline-flex;
  }

  .my-table th > button:hover {
    color: var(--my-text);
  }

  .my-table th > button:focus-visible {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: 1px;
  }

  .my-table th > button:after {
    content: "↕" / "";
    opacity: .45;
    font-size: .9em;
  }

  .my-table th[aria-sort="ascending"] > button:after {
    content: "↑" / "";
    opacity: 1;
  }

  .my-table th[aria-sort="descending"] > button:after {
    content: "↓" / "";
    opacity: 1;
  }

  .my-table th[aria-sort] {
    color: var(--my-text);
  }

  @container my-table (width <= 36rem) {
    .my-table[data-stack] thead tr {
      gap: var(--my-space-2);
      padding: var(--my-space-3) var(--my-cell-x);
      background: var(--my-layer-1);
      border-block-end: 1px solid var(--my-border-subtle);
      flex-wrap: wrap;
      display: flex;
    }

    .my-table[data-stack] thead th {
      background: none;
      border: 0;
      align-items: center;
      inline-size: auto;
      padding: 0;
      display: flex;
      position: static;
    }

    .my-table[data-stack] thead th:not(:has( > button,  > input)) {
      clip-path: inset(50%);
      block-size: 1px;
      inline-size: 1px;
      position: absolute;
      overflow: hidden;
    }

    .my-table[data-stack] thead th > button {
      padding: var(--my-space-2) var(--my-space-3);
      border: 1px solid var(--my-border-subtle);
      border-radius: var(--my-radius-pill);
      background: var(--my-layer-2);
      min-block-size: 2rem;
      margin: 0;
    }

    .my-table[data-stack] thead th[aria-sort] > button {
      border-color: var(--my-accent);
      color: var(--my-accent-text);
    }

    .my-table[data-stack] tr {
      padding-block: var(--my-space-3);
      border-block-end: 1px solid var(--my-border-subtle);
      display: block;
    }

    .my-table[data-stack] td {
      gap: var(--my-space-3);
      padding-block: var(--my-space-1);
      border: 0;
      grid-template-columns: minmax(7rem, 40%) 1fr;
      display: grid;
      text-align: start !important;
    }

    .my-table[data-stack] td[data-label]:before {
      content: attr(data-label);
      font-weight: var(--my-weight-semibold);
      color: var(--my-text-muted);
      font-size: var(--my-text-sm);
    }
  }

  .my-card {
    gap: var(--my-space-3);
    padding: var(--my-card-padding, var(--my-space-5));
    background: var(--my-layer-2);
    color: var(--my-text);
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    box-shadow: var(--my-shadow-1);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .my-card > :is(img, picture, video):first-child {
    margin: calc(-1 * var(--my-card-padding, var(--my-space-5))) calc(-1 * var(--my-card-padding, var(--my-space-5))) 0;
    inline-size: calc(100% + 2 * var(--my-card-padding, var(--my-space-5)));
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-inline-size: none;
  }

  .my-card :is(h2, h3, h4) {
    font-size: var(--my-display-1);
    line-height: var(--my-display-leading-1);
  }

  .my-card > footer {
    align-items: center;
    gap: var(--my-space-3);
    flex-wrap: wrap;
    margin-block-start: auto;
    display: flex;
  }

  .my-card-link {
    color: inherit;
    text-decoration: none;
  }

  .my-card-link:after {
    content: "";
    z-index: 0;
    position: absolute;
    inset: 0;
  }

  .my-card:has(.my-card-link) :is(a, button, input, select, textarea):not(.my-card-link) {
    z-index: 1;
    position: relative;
  }

  .my-card:has(.my-card-link):hover {
    border-color: var(--my-border);
    box-shadow: var(--my-shadow-2);
  }

  .my-card:has(.my-card-link:hover) .my-card-link {
    text-underline-offset: .18em;
    text-decoration: underline;
  }

  .my-card:has(.my-card-link:focus-visible) {
    outline: var(--my-focus-width) solid var(--my-focus-color);
    outline-offset: var(--my-focus-offset);
  }

  .my-card .my-card-link:focus-visible {
    outline: none;
  }

  .my-card[data-variant="flat"] {
    box-shadow: none;
    background: var(--my-layer-1);
    border-color: #0000;
  }

  .my-badge {
    block-size: 1.25rem;
    min-inline-size: 1.25rem;
    padding-inline: var(--my-space-2);
    border-radius: var(--my-radius-pill);
    font-size: var(--my-text-xs);
    font-weight: var(--my-weight-semibold);
    line-height: var(--my-leading-none);
    font-variant-numeric: tabular-nums;
    color: var(--my-badge-fg, var(--my-text-on-accent));
    background: var(--my-badge-bg, var(--my-accent));
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .my-badge[data-variant="neutral"] {
    --my-badge-bg: var(--my-gray-11);
    --my-badge-fg: var(--my-gray-1);
  }

  .my-badge[data-variant="danger"] {
    --my-badge-bg: var(--my-danger-solid);
    --my-badge-fg: var(--my-red-contrast);
  }

  .my-badge[data-variant="success"] {
    --my-badge-bg: var(--my-success-solid);
    --my-badge-fg: var(--my-green-contrast);
  }

  .my-badge[data-dot] {
    block-size: .625rem;
    inline-size: .625rem;
    min-inline-size: 0;
    padding: 0;
  }

  @media (forced-colors: active) {
    .my-badge {
      forced-color-adjust: none;
      color: canvas;
      background: canvastext;
    }
  }

  .my-tag {
    align-items: center;
    gap: var(--my-space-2);
    min-block-size: 1.75rem;
    padding-inline: var(--my-space-3);
    border-radius: var(--my-radius-pill);
    border: 1px solid var(--my-tag-border, var(--my-border-subtle));
    font-size: var(--my-text-sm);
    color: var(--my-tag-fg, var(--my-text));
    background: var(--my-tag-bg, var(--my-fill));
    line-height: 1.2;
    display: inline-flex;
  }

  .my-tag[data-variant="accent"] {
    --my-tag-bg: var(--my-accent-subtle);
    --my-tag-fg: var(--my-accent-text);
    --my-tag-border: var(--my-accent-6);
  }

  .my-tag[data-variant="success"] {
    --my-tag-bg: var(--my-success-subtle);
    --my-tag-fg: var(--my-success);
    --my-tag-border: var(--my-green-6);
  }

  .my-tag[data-variant="warning"] {
    --my-tag-bg: var(--my-warning-subtle);
    --my-tag-fg: var(--my-warning);
    --my-tag-border: var(--my-amber-6);
  }

  .my-tag[data-variant="danger"] {
    --my-tag-bg: var(--my-danger-subtle);
    --my-tag-fg: var(--my-danger);
    --my-tag-border: var(--my-red-6);
  }

  .my-tag > button {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: var(--my-leading-none);
    background: none;
    border: 0;
    border-radius: 50%;
    place-items: center;
    margin-inline-end: calc(-1 * var(--my-space-2));
    display: inline-grid;
  }

  .my-tag > button:hover {
    background: color-mix(in oklch, currentColor 15%, transparent);
  }

  .my-dl {
    margin: 0;
    display: grid;
  }

  .my-dl > div {
    gap: var(--my-space-4);
    padding-block: var(--my-space-3);
    border-block-end: 1px solid var(--my-border-subtle);
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    display: grid;
  }

  .my-dl dt {
    color: var(--my-text-muted);
    font-weight: var(--my-weight-medium);
  }

  .my-dl dd {
    max-inline-size: none;
    margin: 0;
  }

  .my-dl[data-layout="stacked"] > div {
    gap: var(--my-space-1);
    grid-template-columns: 1fr;
  }

  @container (width <= 30rem) {
    .my-dl > div {
      gap: var(--my-space-1);
      grid-template-columns: 1fr;
    }
  }

  .my-empty {
    justify-items: center;
    gap: var(--my-space-3);
    padding: var(--my-space-9) var(--my-space-5);
    text-align: center;
    display: grid;
  }

  .my-empty > my-icon:first-child {
    --my-icon-size: 3rem;
    color: var(--my-text-muted);
    margin-block-end: var(--my-space-2);
  }

  .my-empty h2, .my-empty h3 {
    font-size: var(--my-display-1);
    line-height: var(--my-display-leading-1);
  }

  .my-empty p {
    color: var(--my-text-muted);
    max-inline-size: 40ch;
  }

  .my-empty[data-variant="success"] > my-icon:first-child {
    color: var(--my-success);
  }

  .my-empty[data-variant="error"] > my-icon:first-child {
    color: var(--my-danger);
  }

  .my-empty > .my-cluster {
    justify-content: center;
    margin-block-start: var(--my-space-3);
  }

  .my-divider {
    align-items: center;
    gap: var(--my-space-4);
    margin-block: var(--my-space-5);
    color: var(--my-text-muted);
    font-size: var(--my-text-sm);
    border: 0;
    display: flex;
  }

  hr.my-divider {
    background: var(--my-border-subtle);
    block-size: 1px;
  }

  div.my-divider:before, div.my-divider:after {
    content: "";
    background: var(--my-border-subtle);
    flex: 1;
    block-size: 1px;
  }

  .my-divider[aria-orientation="vertical"] {
    block-size: 1.25em;
    inline-size: 1px;
    margin: 0 var(--my-space-3);
    vertical-align: middle;
    background: var(--my-border-subtle);
    display: inline-block;
  }

  .my-collection {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .my-collection > li {
    gap: var(--my-space-2);
    padding-block: var(--my-space-5);
    border-block-end: 1px solid var(--my-border-subtle);
    display: grid;
  }

  .my-collection > li:first-child {
    padding-block-start: 0;
  }

  .my-collection :is(h2, h3, h4) {
    font-size: var(--my-text-lg);
    line-height: var(--my-leading-lg);
    letter-spacing: var(--my-tracking-lg);
  }

  .my-collection p {
    color: var(--my-text-muted);
  }

  .my-collection-meta {
    gap: var(--my-space-2) var(--my-space-4);
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .my-collection-meta > li + li:before {
    content: "·" / "";
    margin-inline-end: var(--my-space-4);
  }

  .my-stats {
    gap: var(--my-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    margin: 0;
    display: grid;
  }

  .my-stat {
    gap: var(--my-space-1);
    padding: var(--my-space-5);
    background: var(--my-layer-1);
    border-radius: var(--my-radius-3);
    display: grid;
  }

  .my-stat > dt {
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
  }

  .my-stat > dd {
    margin: 0;
  }

  .my-stat > dd:first-of-type {
    font-family: var(--my-font-display);
    font-size: var(--my-display-3);
    line-height: var(--my-display-leading-3);
    letter-spacing: var(--my-display-tracking-3);
    font-weight: var(--my-display-weight);
    font-variant-numeric: tabular-nums;
  }

  .my-stat-delta {
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
  }

  .my-stat-delta[data-trend="up"] {
    color: var(--my-success);
  }

  .my-stat-delta[data-trend="down"] {
    color: var(--my-danger);
  }

  .my-timeline {
    counter-reset: my-tl;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .my-timeline > li {
    gap: var(--my-space-1);
    counter-increment: my-tl;
    padding-block-end: var(--my-space-6);
    padding-inline-start: var(--my-space-7);
    display: grid;
    position: relative;
  }

  .my-timeline > li:before {
    content: "";
    background: var(--my-border-subtle);
    inline-size: 2px;
    position: absolute;
    inset-block: .75rem 0;
    inset-inline-start: .3125rem;
  }

  .my-timeline > li:last-child:before {
    display: none;
  }

  .my-timeline > li:after {
    content: "";
    background: var(--my-bg);
    border: 2px solid var(--my-accent);
    border-radius: 50%;
    block-size: .75rem;
    inline-size: .75rem;
    position: absolute;
    inset-block-start: .375rem;
    inset-inline-start: 0;
  }

  .my-timeline > li[data-state="complete"]:after {
    background: var(--my-accent);
  }

  .my-timeline time {
    font-size: var(--my-text-sm);
    color: var(--my-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .my-timeline :is(h3, h4) {
    font-size: var(--my-text-md);
    line-height: var(--my-leading-md);
    font-family: var(--my-font-sans);
    letter-spacing: 0;
    font-weight: var(--my-weight-semibold);
  }

  .my-timeline[data-variant="process"] > li {
    padding-inline-start: var(--my-space-9);
  }

  .my-timeline[data-variant="process"] > li:before {
    inset-block-start: 2.25rem;
    inset-inline-start: .9375rem;
  }

  .my-timeline[data-variant="process"] > li:after {
    content: counter(my-tl) / "";
    block-size: 2rem;
    inline-size: 2rem;
    font-weight: var(--my-weight-bold);
    color: var(--my-accent-text);
    font-variant-numeric: tabular-nums;
    place-items: center;
    display: grid;
    inset-block-start: 0;
  }

  .my-timeline[data-variant="process"] :is(h3, h4) {
    font-size: var(--my-text-lg);
    line-height: 2rem;
  }

  .my-summary {
    padding: var(--my-space-6);
    background: var(--my-accent-subtle);
    border: 1px solid var(--my-accent-6);
    border-radius: var(--my-radius-3);
  }

  .my-summary > :is(h2, h3):first-child {
    font-size: var(--my-display-1);
    line-height: var(--my-display-leading-1);
    margin-block-end: var(--my-space-3);
  }

  .my-summary ul {
    gap: var(--my-space-2);
    margin: 0;
    padding-inline-start: var(--my-space-5);
    display: grid;
  }

  .my-code {
    border: 1px solid var(--my-border-subtle);
    border-radius: var(--my-radius-3);
    background: var(--my-layer-1);
    overflow: hidden;
  }

  .my-code-bar {
    justify-content: space-between;
    align-items: center;
    gap: var(--my-space-3);
    padding: var(--my-space-2) var(--my-space-2) var(--my-space-2) var(--my-space-4);
    border-block-end: 1px solid var(--my-border-subtle);
    font-size: var(--my-text-xs);
    color: var(--my-text-muted);
    font-weight: var(--my-weight-medium);
    display: flex;
  }

  .my-code-bar > button {
    align-items: center;
    gap: var(--my-space-2);
    min-block-size: 2rem;
    padding-block: 0;
    padding-inline: var(--my-space-3);
    border-radius: var(--my-radius-2);
    color: var(--my-text-muted);
    font-size: var(--my-text-xs);
    font-weight: var(--my-weight-medium);
    cursor: pointer;
    background: none;
    border: 0;
    display: inline-flex;
  }

  .my-code-bar > button:hover {
    background: var(--my-fill-hover);
    color: var(--my-text);
  }

  .my-code-bar > button[data-copied] {
    color: var(--my-success);
  }

  .my-code > pre {
    font-size: var(--my-text-sm);
    line-height: var(--my-leading-sm);
    background: none;
    border-radius: 0;
    margin: 0;
  }

  :root {
    --my-icon-weight: regular;
  }

  [data-type="hyperlegible"] {
    --my-icon-weight: bold;
  }

  [data-type="technical"] {
    --my-icon-weight: regular;
  }

  my-icon, .my-icon {
    inline-size: var(--my-icon-size, 1.25em);
    block-size: var(--my-icon-size, 1.25em);
    vertical-align: -.25em;
    color: inherit;
    flex: none;
    display: inline-flex;
  }

  my-icon > svg, .my-icon > svg {
    block-size: 100%;
    inline-size: 100%;
  }

  my-icon[data-flip-rtl]:dir(rtl) {
    scale: -1 1;
  }

  my-icon[weight="duotone"] svg [opacity] {
    color: var(--my-icon-duotone, currentColor);
  }

  .my-btn[aria-label] > my-icon:only-child {
    --my-icon-size: 1.25rem;
  }

  .my-btn[aria-label]:has( > my-icon:only-child) {
    inline-size: var(--my-target-min);
    padding-inline: 0;
  }

  .my-avatar {
    --_size: var(--my-avatar-size, 2.5rem);
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: var(--my-avatar-radius, 50%);
    vertical-align: middle;
    background: var(--my-accent-4);
    color: var(--my-accent-12);
    font-size: calc(var(--_size) * .4);
    font-weight: var(--my-weight-semibold);
    letter-spacing: 0;
    line-height: var(--my-leading-none);
    -webkit-user-select: none;
    user-select: none;
    flex: none;
    place-items: center;
    display: inline-grid;
    overflow: hidden;
  }

  .my-avatar > :is(img, svg) {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .my-avatar[data-size="xs"] {
    --my-avatar-size: 1.5rem;
  }

  .my-avatar[data-size="sm"] {
    --my-avatar-size: 2rem;
  }

  .my-avatar[data-size="lg"] {
    --my-avatar-size: 3.5rem;
  }

  .my-avatar[data-size="xl"] {
    --my-avatar-size: 5rem;
  }

  .my-avatar[data-shape="square"] {
    --my-avatar-radius: var(--my-radius-3);
  }

  .my-avatar[data-status]:after {
    content: "";
    position: absolute;
  }

  .my-avatar-status {
    display: inline-flex;
    position: relative;
  }

  .my-avatar-status > .my-badge[data-dot] {
    box-shadow: 0 0 0 2px var(--my-bg);
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .my-avatar-group {
    flex-direction: row;
    display: inline-flex;
  }

  .my-avatar-group > .my-avatar {
    box-shadow: 0 0 0 2px var(--my-bg);
  }

  .my-avatar-group > .my-avatar + .my-avatar {
    margin-inline-start: calc(var(--my-avatar-size, 2.5rem) * -.3);
  }

  .my-avatar[data-more] {
    background: var(--my-gray-4);
    color: var(--my-gray-12);
    font-size: calc(var(--my-avatar-size, 2.5rem) * .32);
  }

  @media (forced-colors: active) {
    .my-avatar {
      border: 1px solid canvastext;
    }
  }
}

@layer utilities {
  .my-visually-hidden:not(:focus, :focus-within) {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute !important;
  }

  .my-flow > * + * {
    margin-block-start: var(--my-flow-space, 1em);
  }

  .my-truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .my-skip-link {
    padding: var(--my-space-3) var(--my-space-5);
    background: var(--my-bg);
    z-index: 100;
    position: absolute;
    inset-block-start: var(--my-space-3);
    inset-inline-start: var(--my-space-3);
    translate: 0 -200%;
  }

  .my-skip-link:focus {
    translate: 0;
  }
}

@layer theme;