.doc-demo {
  @layer ariane.theme {
    & {
      --ar-color-primary-05: oklch(14% .05 275);
      --ar-color-primary-10: oklch(19% .07 275);
      --ar-color-primary-20: oklch(25% .09 275);
      --ar-color-primary-30: oklch(31% .11 275);
      --ar-color-primary-40: oklch(37% .13 275);
      --ar-color-primary-50: oklch(43% .15 275);
      --ar-color-primary-60: oklch(70% .09 275);
      --ar-color-primary-70: oklch(50% .16 275);
      --ar-color-primary-80: oklch(82% .045 275);
      --ar-color-primary-90: oklch(88% .03 275);
      --ar-color-primary-95: oklch(95% .014 275);
      --ar-color-vault: var(--ar-color-neutral-10);
      --ar-color-vault-deep: var(--ar-color-neutral-05);
      --ar-color-white: oklch(100% 0 0);
      --ar-color-neutral-05: oklch(15.79% .002 90);
      --ar-color-neutral-10: oklch(20.46% .002 90);
      --ar-color-neutral-20: oklch(29.82% .002 90);
      --ar-color-neutral-30: oklch(39.17% .002 90);
      --ar-color-neutral-40: oklch(47.94% .002 90);
      --ar-color-neutral-50: oklch(63.89% .002 90);
      --ar-color-neutral-60: oklch(71.11% .002 90);
      --ar-color-neutral-70: oklch(78.34% .002 90);
      --ar-color-neutral-80: oklch(85.56% .002 90);
      --ar-color-neutral-90: oklch(92.86% .002 90);
      --ar-color-neutral-95: oklch(97.1% .002 90);
      --ar-color-green-05: oklch(17.74% .037 165.47);
      --ar-color-green-10: oklch(22.71% .047 165.92);
      --ar-color-green-20: oklch(30.89% .065 165.46);
      --ar-color-green-30: oklch(38.23% .08 164.89);
      --ar-color-green-40: oklch(45.24% .095 164.51);
      --ar-color-green-50: oklch(54.74% .113 164.94);
      --ar-color-green-60: oklch(65.11% .13 166.01);
      --ar-color-green-70: oklch(73.49% .142 166.89);
      --ar-color-green-80: oklch(81.85% .149 168.5);
      --ar-color-green-90: oklch(91.42% .072 172.95);
      --ar-color-green-95: oklch(96.01% .035 174.15);
      --ar-color-yellow-05: oklch(18.39% .039 71.95);
      --ar-color-yellow-10: oklch(23.51% .05 68.78);
      --ar-color-yellow-20: oklch(32.32% .069 69.3);
      --ar-color-yellow-30: oklch(39.73% .085 68.82);
      --ar-color-yellow-40: oklch(46.87% .099 70.54);
      --ar-color-yellow-50: oklch(57.03% .123 69.45);
      --ar-color-yellow-60: oklch(67.67% .147 69.48);
      --ar-color-yellow-70: oklch(76.13% .164 70.48);
      --ar-color-yellow-80: oklch(84.07% .169 83.45);
      --ar-color-yellow-90: oklch(92.18% .131 96.09);
      --ar-color-yellow-95: oklch(96.32% .068 97.5);
      --ar-color-red-05: oklch(19.17% .079 29.23);
      --ar-color-red-10: oklch(24.55% .1 27.41);
      --ar-color-red-20: oklch(33.45% .124 26.78);
      --ar-color-red-30: oklch(40.91% .141 26.45);
      --ar-color-red-40: oklch(48.27% .158 25.74);
      --ar-color-red-50: oklch(58.51% .177 25.15);
      --ar-color-red-60: oklch(69.08% .18 23.79);
      --ar-color-red-70: oklch(76.9% .137 19.63);
      --ar-color-red-80: oklch(84.65% .084 18.96);
      --ar-color-red-90: oklch(92.57% .038 17.86);
      --ar-color-red-95: oklch(96.48% .017 17.46);
      --ar-color-blue-05: oklch(18.05% .045 253.25);
      --ar-color-blue-10: oklch(23.25% .059 252.8);
      --ar-color-blue-20: oklch(31.79% .079 253.15);
      --ar-color-blue-30: oklch(39.27% .095 252.36);
      --ar-color-blue-40: oklch(46.27% .113 253.15);
      --ar-color-blue-50: oklch(56.35% .132 251.63);
      --ar-color-blue-60: oklch(66.7% .136 249.55);
      --ar-color-blue-70: oklch(74.85% .137 245.56);
      --ar-color-blue-80: oklch(83.32% .091 242.3);
      --ar-color-blue-90: oklch(92.32% .041 240.38);
      --ar-color-blue-95: oklch(96.27% .02 238.66);
      --ar-color-success-05: var(--ar-color-green-05);
      --ar-color-success-10: var(--ar-color-green-10);
      --ar-color-success-20: var(--ar-color-green-20);
      --ar-color-success-30: var(--ar-color-green-30);
      --ar-color-success-40: var(--ar-color-green-40);
      --ar-color-success-50: var(--ar-color-green-50);
      --ar-color-success-60: var(--ar-color-green-60);
      --ar-color-success-70: var(--ar-color-green-70);
      --ar-color-success-80: var(--ar-color-green-80);
      --ar-color-success-90: var(--ar-color-green-90);
      --ar-color-success-95: var(--ar-color-green-95);
      --ar-color-warning-05: var(--ar-color-yellow-05);
      --ar-color-warning-10: var(--ar-color-yellow-10);
      --ar-color-warning-20: var(--ar-color-yellow-20);
      --ar-color-warning-30: var(--ar-color-yellow-30);
      --ar-color-warning-40: var(--ar-color-yellow-40);
      --ar-color-warning-50: var(--ar-color-yellow-50);
      --ar-color-warning-60: var(--ar-color-yellow-60);
      --ar-color-warning-70: var(--ar-color-yellow-70);
      --ar-color-warning-80: var(--ar-color-yellow-80);
      --ar-color-warning-90: var(--ar-color-yellow-90);
      --ar-color-warning-95: var(--ar-color-yellow-95);
      --ar-color-danger-05: var(--ar-color-red-05);
      --ar-color-danger-10: var(--ar-color-red-10);
      --ar-color-danger-20: var(--ar-color-red-20);
      --ar-color-danger-30: var(--ar-color-red-30);
      --ar-color-danger-40: var(--ar-color-red-40);
      --ar-color-danger-50: var(--ar-color-red-50);
      --ar-color-danger-60: var(--ar-color-red-60);
      --ar-color-danger-70: var(--ar-color-red-70);
      --ar-color-danger-80: var(--ar-color-red-80);
      --ar-color-danger-90: var(--ar-color-red-90);
      --ar-color-danger-95: var(--ar-color-red-95);
      --ar-color-info-05: var(--ar-color-blue-05);
      --ar-color-info-10: var(--ar-color-blue-10);
      --ar-color-info-20: var(--ar-color-blue-20);
      --ar-color-info-30: var(--ar-color-blue-30);
      --ar-color-info-40: var(--ar-color-blue-40);
      --ar-color-info-50: var(--ar-color-blue-50);
      --ar-color-info-60: var(--ar-color-blue-60);
      --ar-color-info-70: var(--ar-color-blue-70);
      --ar-color-info-80: var(--ar-color-blue-80);
      --ar-color-info-90: var(--ar-color-blue-90);
      --ar-color-info-95: var(--ar-color-blue-95);
      --ar-color-interactive: light-dark(var(--ar-color-primary-40), var(--ar-color-primary-70));
      --ar-color-interactive-hover: light-dark(var(--ar-color-primary-30), var(--ar-color-primary-80));
      --ar-color-interactive-active: light-dark(var(--ar-color-primary-20), var(--ar-color-primary-80));
      --ar-color-interactive-subtle: light-dark(var(--ar-color-primary-60), var(--ar-color-primary-40));
      --ar-color-text: light-dark(var(--ar-color-neutral-20), var(--ar-color-neutral-95));
      --ar-color-text-muted: light-dark(var(--ar-color-neutral-40), var(--ar-color-neutral-80));
      --ar-color-text-inverse: light-dark(var(--ar-color-white), var(--ar-color-neutral-10));
      --ar-color-bg: light-dark(var(--ar-color-white), var(--ar-color-vault));
      --ar-color-bg-subtle: light-dark(var(--ar-color-neutral-95), color-mix(in oklab, var(--ar-color-vault), white 20%));
      --ar-color-border: light-dark(var(--ar-color-neutral-90), var(--ar-color-neutral-40));
      --ar-color-border-strong: light-dark(var(--ar-color-neutral-50), oklch(54% .002 90));
      --ar-focus-ring-color: var(--ar-color-interactive);
      --ar-focus-ring-offset: 2px;
      --ar-color-success-bg: light-dark(var(--ar-color-success-95), var(--ar-color-success-10));
      --ar-color-success-text: light-dark(var(--ar-color-success-40), var(--ar-color-success-70));
      --ar-color-success-border: light-dark(var(--ar-color-success-90), var(--ar-color-success-40));
      --ar-color-warning-bg: light-dark(var(--ar-color-warning-95), var(--ar-color-warning-10));
      --ar-color-warning-text: light-dark(var(--ar-color-warning-40), var(--ar-color-warning-70));
      --ar-color-warning-border: light-dark(var(--ar-color-warning-90), var(--ar-color-warning-40));
      --ar-color-danger-bg: light-dark(var(--ar-color-danger-95), var(--ar-color-danger-10));
      --ar-color-danger-text: light-dark(var(--ar-color-danger-40), var(--ar-color-danger-70));
      --ar-color-danger-border: light-dark(var(--ar-color-danger-90), var(--ar-color-danger-40));
      --ar-color-info-bg: light-dark(var(--ar-color-info-95), var(--ar-color-info-10));
      --ar-color-info-text: light-dark(var(--ar-color-info-40), var(--ar-color-info-70));
      --ar-color-info-border: light-dark(var(--ar-color-info-90), var(--ar-color-info-40));
      color-scheme: light dark;
      --ar-font-size-sm: .875rem;
      --ar-font-size-md: 1rem;
      --ar-font-size-lg: 1.125rem;
      --ar-font-weight-normal: 400;
      --ar-font-weight-medium: 500;
      --ar-font-weight-bold: 700;
      --ar-spacing-xs: .25rem;
      --ar-spacing-sm: .5rem;
      --ar-spacing-md: 1rem;
      --ar-spacing-lg: 1.5rem;
      --ar-spacing-xl: 2rem;
      --ar-border-radius-sm: .25rem;
      --ar-border-radius-md: .375rem;
      --ar-border-radius-lg: .5rem;
      --ar-border-radius-xl: .75rem;
      --ar-border-radius-full: 9999px;
      --ar-button-primary-bg: var(--ar-color-primary-70);
      --ar-button-primary-bg-hover: color-mix(in oklab, var(--ar-button-primary-bg), black 12%);
      --ar-button-primary-bg-active: color-mix(in oklab, var(--ar-button-primary-bg), black 22%);
      --ar-button-primary-color: var(--ar-color-white);
      --ar-button-primary-border-color: var(--ar-color-primary-70);
      --ar-button-danger-bg: var(--ar-color-danger-50);
      --ar-button-danger-color: var(--ar-color-white);
      --ar-button-secondary-bg: var(--ar-color-bg);
      --ar-button-secondary-border-hover: light-dark(var(--ar-color-neutral-20), var(--ar-color-neutral-90));
      --ar-button-secondary-bg-hover: var(--ar-color-bg-subtle);
      --ar-button-disabled-bg: light-dark(var(--ar-color-neutral-90), var(--ar-color-neutral-30));
      --ar-button-disabled-border: light-dark(var(--ar-color-neutral-80), var(--ar-color-neutral-40));
      --ar-button-disabled-color: var(--ar-color-neutral-50);
      --ar-button-disabled-icon-color: var(--ar-color-neutral-60);
      --ar-button-tertiary-bg: light-dark(#1a1a1a0d, #ffffff1a);
      --ar-button-tertiary-bg-hover: light-dark(#1a1a1ab3, #ffffff26);
      --ar-button-tertiary-bg-active: light-dark(#1a1a1acc, #fff3);
      --ar-button-tertiary-bg-focus: light-dark(#1a1a1a0d, #ffffff14);
      --ar-button-tertiary-active-shadow: 0 1px 4px 0 #00000040;
      --ar-button-link-color: var(--ar-color-interactive);
      --ar-button-focus-ring-color: light-dark(var(--ar-color-neutral-20), var(--ar-color-neutral-80));
      --ar-button-border-radius: var(--ar-border-radius-sm);
      --ar-button-font-weight: var(--ar-font-weight-medium);
      --ar-button-height: 2.5rem;
      --ar-button-padding-x: 1rem;
      --ar-button-ratio-square-width: 2.5rem;
      --ar-button-transition-duration: .15s;
      --ar-input-border-color: var(--ar-color-border-strong);
      --ar-input-radius: var(--ar-border-radius-md);
      --ar-input-bg: var(--ar-color-bg);
      --ar-input-color: var(--ar-color-text);
      --ar-input-font-size: var(--ar-font-size-md);
      --ar-input-focus-ring-color: var(--ar-focus-ring-color);
      --ar-input-disabled-color: var(--ar-color-neutral-50);
      --ar-input-disabled-bg: light-dark(var(--ar-color-neutral-95), color-mix(in oklab, var(--ar-color-vault), white 10%));
      --ar-input-readonly-bg: var(--ar-color-bg-subtle);
      --ar-input-error-color: var(--ar-color-danger-text);
      --ar-input-error-border-color: light-dark(var(--ar-color-danger-50), var(--ar-color-danger-70));
      --ar-input-inactive-border-color: var(--ar-button-disabled-border);
      --ar-field-gap: .5rem;
    }

    &[data-theme="dark"], & [data-theme="dark"] {
      color-scheme: dark;
    }

    &[data-theme="light"], & [data-theme="light"] {
      color-scheme: light;
    }

    & {
      --ar-panel-bg: var(--ar-color-bg);
      --ar-panel-text: var(--ar-color-text);
      --ar-panel-border-color: var(--ar-color-border);
      --ar-panel-radius: var(--ar-border-radius-md);
      --ar-panel-shadow: 0 4px 6px -1px #0000001a, 0 10px 15px -3px #00000012;
      --ar-panel-padding: .25rem;
      --ar-panel-min-width: 18rem;
      --ar-panel-max-width: 18rem;
      --ar-panel-show-duration: .2s;
      --ar-anchor-distance: 4px;
      --ar-anchor-offset: 0px;
    }

    & :state(has-error) {
      &::part(input), &::part(input):read-only, &::part(input):disabled, &::part(input):focus-visible {
        border-color: var(--ar-input-error-border-color);
      }

      &::part(label) {
        color: var(--ar-input-error-color);
      }
    }

    & {
      --ar-alert-color: var(--ar-color-text);
      --ar-alert-close-size: 2rem;
      --ar-alert-close-transition-duration: var(--ar-button-transition-duration);
      --ar-alert-hide-transition-duration: .33s;
    }

    & ar-alert {
      border-radius: var(--ar-border-radius-lg);
      border-style: solid;
      border-width: 1px;
      column-gap: .75rem;
      padding: 1rem;

      &::part(close-button) {
        border-radius: var(--ar-border-radius-sm);
        color: currentColor;
        background-color: color-mix(in srgb, currentColor 8%, transparent);
        opacity: .75;
        top: -.2rem;
        position: relative;
        inset-inline-end: -.2rem;
      }

      &::part(close-button):hover {
        background-color: color-mix(in srgb, currentColor 20%, transparent);
        opacity: 1;
      }

      &::part(close-button):focus-visible {
        opacity: 1;
      }

      &::part(icon) {
        font-size: 1.5em;
      }

      &:state(hiding) {
        opacity: 0;
        transform: scale(.75);
      }

      &[variant="info"] {
        --ar-alert-bg: var(--ar-color-info-bg);
        --ar-alert-border: var(--ar-color-info-border);
        --ar-alert-icon: var(--ar-color-info-text);
      }

      &[variant="warning"] {
        --ar-alert-bg: var(--ar-color-warning-bg);
        --ar-alert-border: var(--ar-color-warning-border);
        --ar-alert-icon: var(--ar-color-warning-text);
      }

      &[variant="error"] {
        --ar-alert-bg: var(--ar-color-danger-bg);
        --ar-alert-border: var(--ar-color-danger-border);
        --ar-alert-icon: var(--ar-color-danger-text);
      }

      &[variant="success"] {
        --ar-alert-bg: var(--ar-color-success-bg);
        --ar-alert-border: var(--ar-color-success-border);
        --ar-alert-icon: var(--ar-color-success-text);
      }
    }

    & {
      --ar-breadcrumb-distance: var(--ar-anchor-distance);
      --ar-breadcrumb-offset: var(--ar-anchor-offset);
      --ar-breadcrumb-toggle-min-size: 2.5rem;
    }

    & ar-breadcrumb {
      &::part(list) {
        color: var(--ar-color-text);
      }

      --ar-theme-breadcrumb-indicator-size: .75rem;
      --ar-theme-breadcrumb-indicator-margin-block: .35rem;
      --ar-theme-breadcrumb-indicator-margin-inline: .75rem;
      --ar-theme-breadcrumb-panel-padding: .75rem;

      &::part(panel) {
        --ar-panel-max-width: auto;
        min-width: 14rem;
        padding: var(--ar-theme-breadcrumb-panel-padding);
      }

      &::part(connector) {
        width: calc(var(--ar-theme-breadcrumb-indicator-margin-inline) * 2 + var(--ar-theme-breadcrumb-indicator-size));
        top: calc(var(--ar-theme-breadcrumb-indicator-size) + var(--ar-theme-breadcrumb-indicator-margin-block) * 2 + var(--ar-theme-breadcrumb-panel-padding));
        inset-inline-start: var(--ar-theme-breadcrumb-panel-padding);
        bottom: var(--ar-theme-breadcrumb-panel-padding);
        background-image: linear-gradient(var(--ar-color-neutral-80) 25%, transparent 0);
        background-position: 50% 3px;
        background-repeat: repeat-y;
        background-size: 2px 8px;
        display: block;
      }

      &::part(list--mobile) {
        gap: .75rem;
        display: flex;
      }

      &::part(home), &::part(trigger) {
        border-radius: var(--ar-border-radius-md);
        cursor: pointer;
        font-size: var(--ar-font-size-md);
        color: var(--ar-color-text);
        background-color: light-dark(#1a1a1a0d, #ffffff1a);
        border: none;
        gap: .375rem;
        font-weight: 500;
        line-height: 1;
        transition: background-color .15s;
      }

      &::part(home):focus-visible, &::part(trigger):focus-visible {
        outline-offset: 2px;
        background-color: light-dark(#1a1a1a0d, #ffffff14);
        outline: 2px solid;
      }

      &::part(home):hover, &::part(trigger):hover {
        color: var(--ar-color-white);
        background-color: light-dark(#1a1a1ab3, #ffffff26);
      }

      &::part(home):active, &::part(trigger):active, &:state(open)::part(trigger), &:state(open)::part(trigger):hover {
        color: var(--ar-color-white);
        background-color: light-dark(#1a1a1acc, #fff3);
      }

      &:state(open)::part(trigger), &:state(open)::part(trigger):hover, &::part(trigger):active {
        transform: scale(.985);
      }

      &::part(home) {
        padding: 0 1rem;
        text-decoration: none;
      }

      &::part(trigger) {
        margin-inline-start: .5rem;
      }

      @media (prefers-reduced-motion: reduce) {
        &::part(home), &::part(trigger) {
          transition: none;
        }
      }
    }

    & ar-breadcrumb-item {
      --ar-theme-breadcrumb-indicator-bg: var(--ar-color-neutral-80);

      &::part(control) {
        min-height: auto;
      }

      &::part(link) {
        color: inherit;
      }

      &::part(link):hover {
        --ar-theme-breadcrumb-indicator-bg: var(--ar-color-text-muted);
        text-decoration: none;
      }

      &::part(current) {
        font-weight: 700;
        position: relative;
      }

      &::part(separator) {
        color: var(--ar-color-neutral-80);
      }

      &::part(indicator) {
        width: var(--ar-theme-breadcrumb-indicator-size);
        height: var(--ar-theme-breadcrumb-indicator-size);
        border-radius: var(--ar-border-radius-full);
        background-color: var(--ar-theme-breadcrumb-indicator-bg);
        box-shadow: 0 0 0 2px var(--ar-panel-bg);
        margin-block-start: var(--ar-theme-breadcrumb-indicator-margin-block);
        margin-inline: .75rem 1.25rem;
      }

      &::part(indicator--current) {
        background-color: var(--ar-color-interactive);
      }
    }

    & ar-breadcrumb:state(open) {
      & ar-breadcrumb-item::part(current) {
        background-color: var(--ar-panel-bg);
      }
    }

    & {
      --ar-charcounter-warning-weight: 600;
      --ar-charcounter-error-weight: 700;
    }

    & ar-charcounter {
      &::part(count) {
        color: var(--ar-color-text-muted);
        font-size: .875rem;
      }

      &::part(count--warning) {
        color: var(--ar-color-warning-text);
      }

      &::part(count--error) {
        color: var(--ar-color-danger-text);
      }
    }

    & {
      --ar-collapse-duration: .4s;
      --ar-collapse-easing: ease;
      --ar-datepicker-distance: var(--ar-anchor-distance);
      --ar-datepicker-offset: var(--ar-anchor-offset);
      --ar-datepicker-panel-max-width: 25rem;
      --ar-datepicker-nav-button-border-color: transparent;
      --ar-datepicker-nav-button-focus-ring-color: var(--ar-focus-ring-color);
      --ar-datepicker-footer-button-border-color: var(--ar-color-border-strong);
      --ar-datepicker-footer-button-focus-ring-color: var(--ar-focus-ring-color);
      --ar-datepicker-day-size: 2.5rem;
      --ar-datepicker-day-other-month-color: var(--ar-color-neutral-50);
      --ar-datepicker-day-color: var(--ar-color-text);
      --ar-datepicker-day-bg: transparent;
      --ar-datepicker-day-border-color: transparent;
      --ar-datepicker-day-today-color: var(--ar-color-text);
      --ar-datepicker-day-today-border: light-dark(var(--ar-color-neutral-50), var(--ar-color-neutral-60));
      --ar-datepicker-day-today-bg: transparent;
      --ar-datepicker-day-hover-bg: light-dark(var(--ar-color-neutral-90), color-mix(in oklab, var(--ar-color-vault), white 20%));
      --ar-datepicker-day-hover-color: var(--ar-color-text);
      --ar-datepicker-day-focus-ring-color: var(--ar-focus-ring-color);
      --ar-datepicker-day-focus-ring-width: 2px;
      --ar-datepicker-day-focus-ring-offset: 0;
      --ar-datepicker-day-focus-border-color: var(--ar-panel-bg);
      --ar-datepicker-day-selected-bg: var(--ar-color-primary-70);
      --ar-datepicker-day-selected-color: var(--ar-color-white);
    }

    & ar-datepicker {
      &::part(datepicker) {
        gap: var(--ar-field-gap);
      }

      &:state(pending)::part(panel) {
        cursor: progress;
      }

      &::part(panel) {
        width: 21.5rem;
        padding: 1rem;
      }

      &::part(grid) {
        border-collapse: separate;
      }

      &::part(nav-button) {
        width: 2rem;
        height: 2rem;
        color: var(--ar-color-text);
        border-radius: var(--ar-border-radius-sm);
        background: none;
        border-width: 0;
      }

      &::part(nav-button):hover {
        background: color-mix(in srgb, var(--ar-color-text) 8%, transparent);
      }

      &::part(nav-button):active {
        background: color-mix(in srgb, var(--ar-color-text) 14%, transparent);
      }

      &::part(nav-button):focus-visible {
        outline-offset: var(--ar-focus-ring-offset);
      }

      &::part(footer) {
        background: none;
        gap: .5rem;
        margin: 0;
        padding: .75rem 0 0;
      }

      &::part(footer-button) {
        background-color: var(--ar-button-secondary-bg);
        color: var(--ar-color-text);
        border-radius: var(--ar-border-radius-md);
        border-width: 1px;
        padding: .375rem .75rem;
      }

      &::part(footer-button):hover {
        border-color: var(--ar-button-secondary-border-hover);
      }

      &::part(footer-button):active {
        border-color: var(--ar-button-secondary-border-hover);
        transform: scale(.985);
      }

      &::part(footer-button):focus-visible {
        outline-offset: var(--ar-focus-ring-offset);
      }

      &::part(header) {
        background: none;
        border-radius: 0;
        gap: .25rem;
        margin: 0;
        padding: 0 0 .75rem;
        font-size: 1rem;
      }

      &::part(label) {
        font-size: var(--ar-font-size-sm);
        font-weight: var(--ar-font-weight-medium);
        color: var(--ar-color-text);
      }

      &::part(hint) {
        font-size: var(--ar-font-size-sm);
        color: var(--ar-color-text-muted);
      }

      &::part(error) {
        font-size: var(--ar-font-size-sm);
        color: var(--ar-input-error-color);
      }

      &::part(input) {
        height: var(--ar-button-height);
        box-sizing: border-box;
        background: var(--ar-input-bg);
        color: var(--ar-input-color);
        font-size: var(--ar-input-font-size);
        border-style: solid;
        border-width: 1px;
        border-inline-end: none;
        border-color: var(--ar-input-border-color);
        border-start-start-radius: var(--ar-input-radius);
        border-end-start-radius: var(--ar-input-radius);
        outline: none;
        padding: 0 .75rem;
        font-family: inherit;
        transition: border-color .15s;
      }

      &::part(input):read-only {
        border-color: var(--ar-input-inactive-border-color);
        background: var(--ar-input-readonly-bg);
        cursor: default;
      }

      &::part(input):disabled {
        border-color: var(--ar-input-inactive-border-color);
        color: var(--ar-input-disabled-color);
        background: var(--ar-input-disabled-bg);
        cursor: not-allowed;
      }

      &::part(input):focus-visible {
        outline: 2px solid var(--ar-input-focus-ring-color);
        outline-offset: var(--ar-focus-ring-offset);
        border-color: var(--ar-color-interactive);
      }

      &::part(trigger) {
        width: var(--ar-button-height);
        height: var(--ar-button-height);
        background: var(--ar-button-primary-bg);
        color: var(--ar-button-primary-color);
        border: 1px solid var(--ar-button-primary-border-color);
        cursor: pointer;
        border-start-end-radius: var(--ar-border-radius-md);
        border-end-end-radius: var(--ar-border-radius-md);
        transition: background .15s, border-color .15s;
      }

      &::part(trigger):not(:disabled):hover {
        background: var(--ar-button-primary-bg-hover);
        border-color: var(--ar-button-primary-bg-hover);
      }

      &::part(trigger):not(:disabled):active, &:state(open)::part(trigger):hover, &:state(open)::part(trigger) {
        background: var(--ar-button-primary-bg-active);
        border-color: var(--ar-button-primary-bg-active);
        color: var(--ar-color-white);
        transform: scale(.985);
      }

      &::part(trigger):focus-visible {
        outline: 2px solid var(--ar-focus-ring-color);
        outline-offset: var(--ar-focus-ring-offset);
      }

      &::part(trigger):disabled {
        background-color: var(--ar-button-disabled-bg);
        border-color: var(--ar-button-disabled-border);
        color: var(--ar-button-disabled-color);
        cursor: not-allowed;
      }

      &::part(weekday) {
        color: var(--ar-color-neutral-50);
        text-align: center;
        text-transform: uppercase;
        padding-block: .5rem;
        font-size: .75rem;
        font-weight: normal;
      }

      &::part(day) {
        border-radius: var(--ar-border-radius-md);
        border-width: 2px;
        font-size: 1rem;
      }
    }

    & {
      --ar-dialog-spacing: 1.25rem;
      --ar-dialog-backdrop: #00000080;
      --ar-dialog-bg: var(--ar-color-bg);
      --ar-dialog-color: var(--ar-color-text);
      --ar-dialog-close-size: 2.5rem;
      --ar-dialog-close-transition-duration: var(--ar-button-transition-duration);
      --ar-dialog-shake-outline-color: var(--ar-color-danger-text);
    }

    & ar-dialog {
      &:state(pending)::part(dialog) {
        cursor: progress;
      }

      &::part(dialog) {
        box-shadow: 0 4px 6px -1px #0000001a, 0 20px 50px -8px #0003;
      }

      &:not([mode="drawer"])::part(dialog) {
        border-radius: var(--ar-border-radius-lg);
      }

      &::part(close-button) {
        border-radius: var(--ar-border-radius-md);
        color: currentColor;
        background-color: color-mix(in srgb, currentColor 8%, transparent);
      }

      &::part(close-button):hover {
        background-color: color-mix(in srgb, currentColor 20%, transparent);
      }

      &::part(title) {
        font-size: var(--ar-font-size-md);
      }

      &::part(header) {
        gap: .75rem;
        padding: 1.25rem 1.25rem 0;
      }

      &::part(footer) {
        gap: .75rem;
        padding: 0 1.25rem 1.25rem;
      }

      &[size="sm"] {
        --ar-dialog-width: 360px;
      }

      &[size="lg"] {
        --ar-dialog-width: 800px;
      }

      &[size="xl"] {
        --ar-dialog-width: 1140px;
      }

      &[mode="drawer"][size="sm"] {
        --ar-dialog-width: 360px;
      }

      &[mode="drawer"][size="lg"] {
        --ar-dialog-width: 960px;
      }

      &[mode="drawer"][size="xl"] {
        --ar-dialog-width: 1440px;
      }
    }

    & {
      --ar-dropdown-distance: var(--ar-anchor-distance);
      --ar-dropdown-offset: var(--ar-anchor-offset);
    }

    & ar-dropdown {
      &::part(panel) {
        min-width: 10rem;
      }
    }

    & ar-dropdown-item {
      & :is(button, a):not(:disabled):not([aria-disabled="true"]) {
        width: 100%;
        font: inherit;
        color: var(--ar-color-text);
        text-align: left;
        cursor: pointer;
        border-radius: var(--ar-border-radius-sm);
        transition: background-color var(--ar-button-transition-duration);
        background: none;
        border: none;
        padding: .5rem .75rem;
        display: block;

        &:hover {
          background-color: var(--ar-color-bg-subtle);
        }

        &:focus-visible {
          outline: 2px solid var(--ar-focus-ring-color);
          outline-offset: var(--ar-focus-ring-offset);
        }
      }
    }

    & {
      --ar-pagination-button-size: 2.5rem;
      --ar-pagination-transition-duration: var(--ar-button-transition-duration);
    }

    & ar-pagination {
      &:not([compact])::part(list) {
        column-gap: .25rem;
      }

      &::part(page-label) {
        padding-right: .5rem;
      }

      &:state(pending)::part(pagination) {
        cursor: progress;
      }

      &::part(link), &::part(prev), &::part(next) {
        background-color: var(--ar-button-tertiary-bg);
        color: var(--ar-color-text);
      }

      &::part(link), &::part(current), &::part(prev), &::part(next), &::part(select) {
        border-radius: var(--ar-border-radius-md);
      }

      &[compact]::part(prev) {
        border-radius: var(--ar-border-radius-md) 0 0 var(--ar-border-radius-md);
        border-right: 1px solid var(--ar-color-neutral-80);
      }

      &[compact]::part(next) {
        border-radius: 0 var(--ar-border-radius-md) var(--ar-border-radius-md) 0;
      }

      &::part(link):focus-visible, &::part(prev):focus-visible, &::part(next):focus-visible, &::part(select):focus-visible {
        background-color: var(--ar-button-tertiary-bg-focus);
      }

      &::part(link):hover, &::part(prev):hover, &::part(next):hover, &::part(select):hover {
        background-color: var(--ar-button-tertiary-bg-hover);
        color: var(--ar-color-white);
      }

      &::part(link):active, &::part(prev):active, &::part(next):active, &::part(select):active {
        background-color: var(--ar-button-tertiary-bg-active);
        color: var(--ar-color-white);
      }

      &::part(nav-button--disabled), &::part(nav-button--disabled):hover, &::part(nav-button--disabled):active, &::part(nav-button--disabled):focus-visible {
        background-color: var(--ar-button-disabled-bg);
        color: var(--ar-button-disabled-color);
      }

      &::part(select) {
        background-color: var(--ar-button-tertiary-bg);
        color: var(--ar-color-text);
        background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
        background-position: calc(100% - 1.1rem), calc(100% - .75rem);
        background-repeat: no-repeat;
        background-size: .35rem .35rem;
        padding: 0 2rem 0 .75rem;
      }

      &::part(select):open {
        background-image: linear-gradient(225deg, #0000 50%, currentColor 50%), linear-gradient(315deg, currentColor 50%, #0000 50%);
        background-position: calc(100% - .75rem), calc(100% - 1.1rem);
      }

      &::part(label) {
        color: var(--ar-color-text);
      }

      &::part(current) {
        background-color: var(--ar-color-bg);
        color: var(--ar-color-interactive);
        border: 1px solid var(--ar-color-interactive);
        font-weight: 700;
      }

      &::part(ellipsis) {
        color: var(--ar-color-text-muted);
        cursor: default;
      }

      &::part(link), &::part(current), &::part(ellipsis) {
        padding: 0 .75rem;
      }
    }

    & {
      --ar-progressbar-track-color: light-dark(var(--ar-color-neutral-90), color-mix(in oklab, var(--ar-color-vault), white 20%));
      --ar-progressbar-fill-color: var(--ar-color-primary-70);
      --ar-progressbar-max-width: 500px;
    }

    & ar-progressbar {
      &::part(progressbar) {
        row-gap: .75rem;
      }

      &::part(label) {
        column-gap: 2rem;
      }

      &::part(percent) {
        color: var(--ar-color-text-muted);
      }

      &::part(track), &::part(bar) {
        border-radius: var(--ar-border-radius-full);
      }
    }

    & {
      --ar-spinner-stroke-color: currentColor;
      --ar-stepper-distance: var(--ar-anchor-distance);
      --ar-stepper-offset: var(--ar-anchor-offset);
      --ar-stepper-toggle-min-size: 2.5rem;
      --ar-stepper-item-label-color: var(--ar-color-text-muted);
      --ar-stepper-item-link-hover-label-color: var(--ar-color-text);
      --ar-stepper-item-link-focus-outline-color: var(--ar-color-interactive);
      --ar-stepper-item-current-header-color: var(--ar-color-interactive);
    }

    & ar-stepper {
      &:state(pending)::part(stepper) {
        cursor: progress;
      }

      &::part(trigger) {
        background-color: var(--ar-button-secondary-bg);
        color: var(--ar-color-text);
        padding: var(--ar-button-padding-x);
        min-height: var(--ar-button-height);
        border: 1px solid var(--ar-color-border-strong);
        border-radius: var(--ar-button-border-radius);
        font-family: inherit;
        font-size: var(--ar-font-size-sm);
        font-weight: var(--ar-button-font-weight);
        cursor: pointer;
        transition: background-color var(--ar-button-transition-duration),
        color var(--ar-button-transition-duration),
        border-color var(--ar-button-transition-duration);
        justify-content: center;
        gap: 1.25rem;
        line-height: 1;
        text-decoration: none;
        display: inline-flex;
      }

      &::part(trigger):disabled {
        background-color: var(--ar-button-disabled-bg);
        border-color: var(--ar-button-disabled-border);
        color: var(--ar-button-disabled-color);
        cursor: not-allowed;
      }

      &::part(trigger):not(:disabled):active, &:state(open)::part(trigger):not(:disabled) {
        border-color: var(--ar-button-secondary-border-hover);
        background-color: var(--ar-button-secondary-bg-hover);
        transform: scale(.985);
      }

      &::part(trigger):focus-visible {
        outline: 2px solid var(--ar-button-focus-ring-color);
        outline-offset: 2px;
      }

      &::part(trigger):not(:disabled):hover {
        border-color: var(--ar-button-secondary-border-hover);
        background-color: var(--ar-button-secondary-bg-hover);
      }

      &::part(trigger-label) {
        color: var(--ar-color-interactive);
        margin-top: .5rem;
        font-weight: 700;
      }

      &::part(trigger-icon) {
        transition: transform .35s;
      }

      &:state(open)::part(trigger-icon) {
        transform: rotate(180deg);
      }

      @media (prefers-reduced-motion: reduce) {
        &::part(trigger-icon) {
          transition: none;
        }
      }

      &::part(panel) {
        padding: .75rem;
      }
    }

    & ar-stepper-item {
      --ar-theme-stepper-indicator-color: var(--ar-color-text);
      --ar-theme-stepper-indicator-bg: var(--ar-color-interactive-subtle);

      &::part(step-link) {
        color: var(--ar-color-text);
        text-decoration: none;
      }

      &::part(step-link):hover, &::part(step-link):focus {
        color: var(--ar-color-text-muted);
        --ar-theme-stepper-indicator-bg: var(--ar-color-text-muted);
        --ar-theme-stepper-indicator-color: var(--ar-color-text-inverse);
      }

      &::part(step-link):focus {
        border-radius: .125rem;
      }

      &::part(label--link) {
        text-decoration: underline;
      }

      &::part(indicator) {
        border-radius: var(--ar-border-radius-full);
        background-color: var(--ar-theme-stepper-indicator-bg);
        width: 2.25rem;
        height: 2.25rem;
        color: var(--ar-theme-stepper-indicator-color);
      }

      &::part(indicator--current) {
        background-color: var(--ar-color-interactive);
        color: var(--ar-color-text-inverse);
      }

      & > ar-stepper-item::part(indicator) {
        width: .75rem;
        height: .75rem;
        margin-inline: .75rem 1.25rem;
      }
    }

    & ar-stepper[reverse-align] ar-stepper-item > ar-stepper-item::part(indicator) {
      margin-inline: 1.25rem .75rem;
    }

    & ar-stepper > ar-stepper-item:not(:last-child):after, & ar-stepper-item > ar-stepper-item:before {
      content: "";
      background-image: linear-gradient(var(--ar-color-neutral-80) 25%, transparent 0);
      background-repeat: repeat-y;
      background-size: 2px 8px;
      align-self: flex-start;
      width: 2.25rem;
      display: block;
    }

    & ar-stepper > ar-stepper-item:not(:last-child):after {
      background-position: 50% 3px;
      height: 1.5rem;
    }

    & ar-stepper-item > ar-stepper-item:before {
      background-position: 50% 4px;
      height: 1rem;
    }

    & ar-stepper[reverse-align] > ar-stepper-item:not(:last-child):after, & ar-stepper[reverse-align] ar-stepper-item > ar-stepper-item:before {
      align-self: flex-end;
    }

    & {
      --ar-tab-padding-x: 1.5rem;
      --ar-tab-padding-y: 1rem;
      --ar-tab-active-shadow: inset 0 -2px 0 var(--ar-color-primary-70);
      --ar-tab-focus-ring-offset: -2px;
      --ar-tab-focus-ring-color: var(--ar-focus-ring-color);
      --ar-tab-group-border-color: var(--ar-color-border);
      --ar-tab-group-border-top-width: 0;
      --ar-tab-group-border-bottom-width: 1px;
    }

    & ar-tab-group {
      &::part(tab-group) {
        gap: 0;
      }

      &.has-overflow-start:not(.has-overflow-end)::part(nav) {
        mask-image: linear-gradient(to right, #0000, #000 3rem);
      }

      &.has-overflow-end:not(.has-overflow-start)::part(nav) {
        mask-image: linear-gradient(to left, #0000, #000 3rem);
      }

      &.has-overflow-start.has-overflow-end::part(nav) {
        mask-image: linear-gradient(to right, #0000, #000 3rem calc(100% - 3rem), #0000);
      }
    }

    & ar-tab {
      font-weight: var(--ar-font-weight-normal);
      border-radius: 0;

      &::part(tab) {
        color: var(--ar-color-text-muted);
        background: none;
        justify-content: center;
        align-items: center;
        transition: color .35s;
        display: flex;
      }

      &::part(tab--selected) {
        color: var(--ar-color-text);
        font-weight: var(--ar-font-weight-bold);
        background: none;
      }

      &:hover:not(:state(disabled)):not(:state(active))::part(tab) {
        color: var(--ar-color-text);
        box-shadow: inset 0 -2px 0 var(--ar-color-text);
        background: none;
      }
    }

    & ar-tab:state(disabled)::part(tab) {
      color: light-dark(var(--ar-color-neutral-60), color-mix(in oklab, var(--ar-color-vault), white 20%));
    }

    & {
      --ar-table-sort-indicator-size: .65rem;
      --ar-table-sort-indicator-color: var(--ar-color-text-muted);
      --ar-table-sort-indicator-active-color: var(--ar-color-primary-70);
      --ar-table-sort-indicator-pending-color: var(--ar-color-text-muted);
    }

    & ar-table-sort {
      &::part(sort-button) {
        gap: .375rem;
      }

      &:state(pending)::part(sort-button) {
        cursor: wait;
      }

      &::part(indicator) {
        gap: 3px;
      }
    }

    & {
      --ar-tooltip-distance: 10px;
      --ar-tooltip-offset: var(--ar-anchor-offset);
      --ar-tooltip-bg: light-dark(var(--ar-color-neutral-20), var(--ar-color-neutral-80));
      --ar-tooltip-color: light-dark(var(--ar-color-white), var(--ar-color-neutral-10));
      --ar-tooltip-arrow-size: 6px;
      --ar-tooltip-show-duration: var(--ar-panel-show-duration);
      --ar-tooltip-radius: var(--ar-border-radius-sm);
      --ar-tooltip-padding: .375rem .625rem;
      --ar-tooltip-font-size: .8125rem;
      --ar-tooltip-line-height: 1.4;
    }
  }
}

.doc-demo {
    color-scheme: inherit;
}