@layer components {
  .ui-avatar {
    position: relative;
    display: inline-flex;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background:
      linear-gradient(var(--avatar-tint), var(--avatar-tint)),
      var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
    color: hsl(var(--muted-foreground));
    font-size: var(--avatar-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-avatar[data-shape="square"] {
    inline-size: var(--avatar-square-size);
    block-size: var(--avatar-square-size);
    border-radius: var(--avatar-square-radius, var(--radius));
    --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
    color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
  }

  .ui-avatar[data-appearance="tinted"] {
    --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
    color: var(--avatar-tinted-foreground, hsl(var(--text-brand, var(--primary))));
  }

  .ui-avatar[data-appearance="tinted"] svg {
    inline-size: var(--avatar-tinted-glyph-size);
    block-size: var(--avatar-tinted-glyph-size);
    flex: none;
  }

  .ui-avatar[data-size="xs"] {
    --avatar-size: var(--avatar-size-xs);
    --avatar-square-size: var(--avatar-size-xs);
    --avatar-font-size: var(--avatar-font-size-xs);
    --avatar-glyph-size: var(--avatar-glyph-size-xs);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-xs);
  }

  .ui-avatar[data-size="sm"] {
    --avatar-size: var(--avatar-size-sm);
    --avatar-square-size: var(--avatar-size-sm);
    --avatar-font-size: var(--avatar-font-size-sm);
    --avatar-glyph-size: var(--avatar-glyph-size-sm);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-sm);
  }

  .ui-avatar[data-size="lg"] {
    --avatar-size: var(--avatar-size-lg);
    --avatar-square-size: var(--avatar-size-lg);
    --avatar-font-size: var(--avatar-font-size-lg);
    --avatar-glyph-size: var(--avatar-glyph-size-lg);
    --avatar-tinted-glyph-size: var(--avatar-glyph-size-lg);
  }

  .ui-avatar[data-size] svg {
    inline-size: var(--avatar-glyph-size);
    block-size: var(--avatar-glyph-size);
    flex: none;
  }

  .ui-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ui-avatar-image[data-fit="contain"] {
    object-fit: contain;
  }

  .ui-avatar-fallback {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--avatar-background, hsl(var(--muted) / var(--avatar-background-alpha, 100%)));
  }

  .ui-avatar[data-presence] {
    overflow: visible;
  }

  .ui-avatar[data-presence] > .ui-avatar-image,
  .ui-avatar[data-presence] > .ui-avatar-fallback {
    overflow: hidden;
    border-radius: inherit;
  }

  [data-slot="avatar-presence"] {
    position: absolute;
    inset-block-end: var(--avatar-presence-inset);
    inset-inline-end: var(--avatar-presence-inset);
    display: block;
    box-sizing: border-box;
    inline-size: var(--avatar-presence-size);
    block-size: var(--avatar-presence-size);
    min-inline-size: var(--avatar-presence-min-size);
    min-block-size: var(--avatar-presence-min-size);
    border: var(--avatar-presence-stroke-width, var(--stroke-sm)) solid transparent;
    border-radius: var(--radius-pill);
    background-origin: border-box;

    box-shadow: 0 0 0 var(--avatar-presence-ring-width, var(--stroke-md))
      hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  [data-slot="avatar-presence"][data-presence="online"] {
    border-color: hsl(var(--avatar-presence-online-color, var(--success)));
    background-color: hsl(var(--avatar-presence-online-color, var(--success)));
  }

  [data-slot="avatar-presence"][data-presence="away"] {
    border-color: hsl(var(--avatar-presence-away-color, var(--warning)));
    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
    background-image: linear-gradient(
      to bottom,
      transparent 0 50%,
      hsl(var(--avatar-presence-away-color, var(--warning))) 50%
    );
  }

  [data-slot="avatar-presence"][data-presence="busy"] {
    border-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
    background-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
  }

  [data-slot="avatar-presence"][data-presence="busy"]::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: var(--avatar-presence-bar-inline-size);
    block-size: var(--avatar-presence-bar-block-size, var(--stroke-sm));
    border-radius: var(--radius-pill);
    background: hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  [data-slot="avatar-presence"][data-presence="offline"] {
    border-color: hsl(var(--avatar-presence-offline-color, var(--muted-foreground)));
    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
  }

  @media (forced-colors: active) {
    [data-slot="avatar-presence"] {
      border-color: CanvasText;
      background-color: CanvasText;
      background-image: none;
      outline: var(--avatar-presence-ring-width, var(--stroke-md)) solid Canvas;
    }

    [data-slot="avatar-presence"][data-presence="away"] {
      background-image: linear-gradient(to bottom, Canvas 0 50%, CanvasText 50%);
    }

    [data-slot="avatar-presence"][data-presence="offline"] {
      background-color: Canvas;
    }

    [data-slot="avatar-presence"][data-presence="busy"]::before {
      background: Canvas;
    }
  }

  .ui-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .ui-progress-track {
    height: var(--progress-meter-block-size);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(
      --progress-track-background,
      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
    );
  }

  .ui-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--progress-fill-background, hsl(var(--mark-primary, var(--primary))));
  }

  .ui-progress[data-tone="success"] .ui-progress-bar {
    background: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-progress[data-tone="warning"] .ui-progress-bar {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress[data-tone="destructive"] .ui-progress-bar {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress[data-over] .ui-progress-bar {
    background-color: hsl(var(--mark-destructive, var(--text-error)));
    background-image: repeating-linear-gradient(
      45deg,
      hsl(var(--destructive-foreground) / 0.4) 0,
      hsl(var(--destructive-foreground) / 0.4) 0.3rem,
      transparent 0.3rem,
      transparent 0.6rem
    );
  }

  .ui-progress[data-breakdown] .ui-progress-track {
    display: flex;
    height: var(--progress-breakdown-block-size);
    border-radius: var(--progress-breakdown-radius, var(--radius));
  }

  .ui-progress[data-size="sm"] .ui-progress-track {
    height: var(--progress-meter-block-size-sm);
  }

  .ui-progress[data-breakdown][data-size="sm"] .ui-progress-track {
    height: var(--progress-breakdown-block-size-sm);
  }

  .ui-progress-segment {
    height: 100%;
  }

  .ui-progress-segment[data-tone="success"] {
    background: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-progress-segment[data-tone="warning"] {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress-segment[data-tone="destructive"] {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress-segment[data-tone="info"] {
    background: hsl(var(--mark-info, var(--text-info)));
  }

  .ui-progress-segment[data-tone="neutral"] {
    background: hsl(var(--muted-foreground));
  }

  .ui-progress-label {
    color: hsl(var(--muted-foreground));
    font-size: var(--progress-label-font-size);
  }

  .ui-progress[data-shape="ring"] {
    display: inline-flex;
  }

  .ui-progress-ring {
    position: relative;
    display: inline-grid;
    inline-size: var(--progress-ring-size);
    block-size: var(--progress-ring-size);
    place-items: center;
  }

  .ui-progress[data-size="sm"] .ui-progress-ring {
    --progress-ring-size: var(--progress-ring-size-sm);
  }

  .ui-progress-ring-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-progress-ring-track,
  .ui-progress-ring-indicator {
    fill: none;
    stroke-width: var(--progress-ring-border-width, var(--stroke-lg));
  }

  .ui-progress-ring-track {
    stroke: var(
      --progress-track-background,
      hsl(var(--secondary) / var(--progress-track-background-alpha, 100%))
    );
  }

  .ui-progress-ring-indicator {
    stroke: var(--progress-fill-background, hsl(var(--mark-primary, var(--primary))));

    stroke-linecap: butt;
  }

  .ui-progress[data-tone="success"] .ui-progress-ring-indicator {
    stroke: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
    stroke: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-progress[data-tone="destructive"] .ui-progress-ring-indicator {
    stroke: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-progress-ring-label {
    position: relative;
    color: hsl(var(--foreground));
    font-size: var(--progress-ring-label-font-size, calc(var(--progress-ring-size) * 0.28));
    font-variant-numeric: tabular-nums;

    line-height: var(--line-height-normal);

    max-inline-size: calc(
      var(--progress-ring-size) - 2 * var(--progress-ring-border-width, var(--stroke-lg)) -
        var(--space-1)
    );
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-disclosure-chevron {
    transition: rotate var(--duration-fast) var(--ease-standard);
  }

  :is([data-state="open"], [aria-expanded="true"]) > .ui-disclosure-chevron,
  :is([data-state="open"], [aria-expanded="true"]) .ui-disclosure-chevron {
    rotate: 180deg;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-disclosure-chevron {
      transition: none;
    }
  }

  .ui-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--legend-gap);
    color: var(--legend-color, hsl(var(--muted-foreground)));
    font-size: var(--legend-font-size);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--legend-item-gap);
  }

  .ui-legend-swatch {
    flex: none;
    inline-size: var(--legend-swatch-size);
    block-size: var(--legend-swatch-size);
    border-radius: var(--legend-swatch-radius);
  }

  .ui-legend-swatch[data-color="true"] {
    background: var(--legend-swatch-color, hsl(var(--muted-foreground)));
  }

  .ui-legend-swatch[data-tone="default"] {
    background: hsl(
      var(
        --mark-primary,
        var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
      )
    );
  }

  .ui-legend-swatch[data-tone="success"] {
    background: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-legend-swatch[data-tone="warning"] {
    background: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-legend-swatch[data-tone="destructive"] {
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-legend-swatch[data-tone="info"] {
    background: hsl(var(--mark-info, var(--text-info)));
  }

  .ui-legend-swatch[data-tone="muted"],
  .ui-legend-swatch[data-tone="neutral"] {
    background: hsl(var(--muted-foreground));
  }

  .ui-swatch {
    display: inline-block;
    flex: none;

    vertical-align: middle;
    inline-size: var(--swatch-size);
    block-size: var(--swatch-size);
    border-radius: var(--swatch-radius);
    background: var(--swatch-color);
    box-shadow: inset 0 0 0 var(--swatch-border-width, var(--stroke-hairline))
      var(--swatch-border-color, hsl(var(--border)));
    forced-color-adjust: none;
  }

  .ui-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--feature-list-space-gap);
  }

  .ui-feature-list-item {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--feature-list-space-inline);
    font-size: var(--feature-list-font-size);
    line-height: var(--line-height-body);
  }

  .ui-feature-list-mark {
    display: grid;
    block-size: 1lh;
    place-items: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-feature-list-mark > svg {
    inline-size: var(--feature-list-mark-icon-size);
    block-size: var(--feature-list-mark-icon-size);
  }

  .ui-feature-list-item[data-state="included"] .ui-feature-list-mark {
    color: hsl(var(--mark-success, var(--text-success)));
  }

  .ui-feature-list-item[data-state="limited"] .ui-feature-list-mark {
    color: hsl(var(--mark-warning, var(--text-warning)));
  }

  .ui-feature-list-item[data-state="excluded"] .ui-feature-list-label {
    color: hsl(var(--muted-foreground));
  }

  .ui-feature-list-body {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;

    overflow-wrap: anywhere;
  }

  .ui-feature-list-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--feature-list-description-font-size);
  }

  .ui-text-diff {
    min-inline-size: 0;
  }

  :is(.ui-text-diff-body, .ui-text-diff-cell) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-inline-size: 0;
  }

  .ui-text-diff-removed {
    background: var(
      --surface-destructive,
      hsl(var(--destructive) / var(--text-diff-removed-background-alpha))
    );
    color: inherit;
    text-decoration-line: line-through;
    text-decoration-thickness: var(--text-diff-mark-line-width);
  }

  .ui-text-diff-added {
    background: var(
      --surface-success,
      hsl(var(--success) / var(--text-diff-added-background-alpha))
    );
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: var(--text-diff-mark-line-width);
  }

  .ui-text-diff-gap {
    display: block;
    padding-block: var(--text-diff-space-inset);
  }

  .ui-text-diff-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--text-diff-space-gap);
  }

  .ui-text-diff-split > .ui-text-diff-gap {
    grid-column: 1 / -1;
  }

  .ui-text-diff-heading {
    padding-block-end: var(--text-diff-space-inset);
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-sm, var(--font-size-base));
    font-weight: var(--font-weight-medium);
  }

  .ui-timeline {
    display: flex;
    flex-direction: column;
  }

  .ui-timeline[data-density="compact"] {
    --timeline-item-gap: var(--timeline-item-gap-compact, var(--space-stack-sm));
  }

  .ui-timeline-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: var(--timeline-item-gap, var(--space-stack-md));
  }

  .ui-timeline-body {
    padding-bottom: var(--timeline-item-gap, var(--space-stack-md));
  }

  .ui-timeline-item:last-child .ui-timeline-body {
    padding-bottom: 0;
  }

  .ui-timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ui-timeline-dot {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: var(--stroke-hairline) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--timeline-dot-done-background, hsl(var(--primary)));
    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
    font-size: var(--timeline-note-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  .ui-timeline-dot[data-status="done"] {
    background: var(--timeline-dot-done-background, hsl(var(--primary)));
    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
  }

  .ui-timeline-dot[data-status="current"],
  .ui-timeline-dot[data-current="true"] {
    background: var(--timeline-dot-current-background, hsl(var(--primary)));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 var(--timeline-dot-current-ring-width, var(--stroke-xl))
      hsl(var(--primary) / 0.2);
  }

  .ui-timeline-dot[data-status="pending"],
  .ui-timeline-dot[data-status="log"] {
    border-color: hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
  }

  .ui-timeline-dot svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .ui-timeline-pip {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: currentColor;
  }

  .ui-timeline-line {
    width: 1px;
    min-height: 2.25rem;
    flex: 1;
    background: hsl(var(--border));
  }

  .ui-timeline-line[data-completed="true"] {
    background: var(--timeline-line-completed-background, hsl(var(--primary)));
  }

  .ui-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-inline-sm);
  }

  .ui-timeline-title {

    min-inline-size: 0;
    flex: 1 1 0%;

    font-weight: var(--font-weight-medium);
  }

  .ui-timeline-title[data-current="true"] {
    color: hsl(var(--text-brand, var(--primary)));
    font-weight: var(--font-weight-semibold);
  }

  .ui-timeline-time,
  .ui-timeline-location,
  .ui-timeline-note {
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-note-font-size);
  }

  .ui-timeline-note {
    margin-top: var(--space-1);
    font-size: var(--font-size-base);
  }
}

.ui-accordion-item {
  border-bottom: var(--stroke-hairline) solid hsl(var(--border));
}
.ui-accordion-header {
  display: flex;
}
.ui-accordion-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-weight: 500;
  text-align: start;
  transition: color 0.15s ease;
}
.ui-accordion-trigger:hover {
  text-decoration: underline;
}
.ui-accordion-trigger:focus-visible {
  border-radius: var(--radius-sm, calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio)));
}
.ui-accordion-trigger:disabled,
.ui-accordion-trigger[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.ui-accordion-chevron {
  width: var(--accordion-chevron-size);
  height: var(--accordion-chevron-size);
  color: hsl(var(--muted-foreground));
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ui-accordion-trigger[data-state="open"] .ui-accordion-chevron {
  transform: rotate(180deg);
}
.ui-accordion-content {
  overflow: hidden;
  font-size: var(--font-size-base);
}
.ui-accordion-content-inner {
  padding-bottom: var(--space-4);
}

.ui-hover-card-content {
  z-index: 50;
  width: 16rem;
  border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
  border: var(--stroke-hairline) solid hsl(var(--border));
  background: hsl(var(--popover) / var(--popover-alpha, 100%));
  color: hsl(var(--popover-foreground));
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  outline: none;
}

.ui-carousel {
  position: relative;
}

.ui-carousel-viewport {
  overflow: clip;
  overflow-clip-margin: var(--focus-ring-clip-margin);
}

.ui-carousel-content {
  display: flex;
  margin-inline: calc(var(--space-4) * -1);
}

.ui-carousel-item {
  position: relative;
  flex-shrink: 0;
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: var(--space-4);
}

.ui-carousel:has(.ui-carousel-dots) {
  --carousel-dots-block-size: calc(var(--space-4) + var(--touch-target-min));
}

.ui-carousel-previous,
.ui-carousel-next {
  position: absolute;

  inset-block-start: var(
    --carousel-arrow-inset-block-start,
    calc(50% - var(--carousel-dots-block-size) / 2)
  );
  z-index: 20;
  display: grid;

  inline-size: var(--carousel-arrow-size);
  block-size: var(--carousel-arrow-size);
  place-items: center;
  border-radius: var(--radius-pill);
  background: hsl(var(--background));
  border: var(--stroke-hairline) solid hsl(var(--border));
  color: hsl(var(--foreground));
  transition: background-color 150ms ease;
  transform: translateY(-50%);
}

.ui-carousel-previous {
  inset-inline-start: var(--space-2);
}

.ui-carousel-next {
  inset-inline-end: var(--space-2);
}

.ui-carousel-previous:hover,
.ui-carousel-next:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.ui-carousel-arrow {
  display: grid;
  width: var(--carousel-arrow-icon-size);
  height: var(--carousel-arrow-icon-size);
  place-items: center;
}

.ui-carousel-arrow > * {
  width: 100%;
  height: 100%;
}

.ui-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 0;
  padding-top: var(--space-4);
}

.ui-carousel-dot {
  display: grid;
  min-inline-size: var(--touch-target-min);
  min-block-size: var(--touch-target-min);
  flex-shrink: 0;
  place-items: center;
  background: transparent;
}

.ui-carousel-dot::after {
  content: "";
  display: block;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: hsl(var(--border));
  transition:
    width 150ms ease,
    background-color 150ms ease;
}

.ui-carousel-dot:hover::after {
  background: hsl(var(--muted-foreground));
}

.ui-carousel-dot[data-active]::after {
  width: var(--space-5);
  background: hsl(var(--primary));
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-dots {
  flex-direction: column;
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-dot[data-active]::after {
  width: var(--space-2);
  height: var(--space-5);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-content {
  flex-direction: column;
  margin-inline: 0;
  margin-block: calc(var(--space-4) * -1);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-item {
  min-width: 0;
  min-height: 100%;
  padding-inline: 0;
  padding-block: var(--space-4);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-previous,
.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
  top: auto;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-previous {
  top: var(--space-2);
}

.ui-carousel[data-orientation="vertical"] .ui-carousel-next {
  bottom: var(--space-2);
}

@layer components {

  [data-slot="list-row"] {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--list-row-gap);
    padding: var(--list-row-padding-y) var(--list-row-padding-x);
    background: var(--list-row-read-background, transparent);
  }

  [data-slot="list-row"][data-unread] {
    background: var(--list-row-unread-background, hsl(var(--muted)));
  }
  [data-slot="list-row"][data-align="start"] {
    align-items: flex-start;
  }
  [data-slot="list-row"]:not(:last-child) {
    border-block-end: var(--list-row-border, var(--stroke-hairline) solid hsl(var(--border)));
  }

  [data-slot="list-row-item"] {
    display: block;
    list-style: none;
  }
  [data-slot="list-row-item"]:not(:last-child) {
    border-block-end: var(--list-row-border, var(--stroke-hairline) solid hsl(var(--border)));
  }
  [data-slot="list-row-indicator"] {
    position: relative;
    display: block;
    flex-shrink: 0;
    inline-size: var(--list-row-indicator-size);
    block-size: var(--list-row-indicator-size);
    border-radius: var(--radius-pill);

    background: transparent;
  }
  [data-slot="list-row"][data-unread] [data-slot="list-row-indicator"] {
    background: hsl(var(--list-row-indicator-color, var(--primary)));
  }
  [data-slot="list-row-leading"] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  [data-slot="list-row-leading"] > svg:not([class*="size-"]) {
    width: var(--list-row-leading-icon-size, var(--control-icon-size));
    height: var(--list-row-leading-icon-size, var(--control-icon-size));
  }
  [data-slot="list-row-body"] {
    display: flex;
    min-inline-size: min(var(--list-row-body-min-width, 12rem), 100%);
    flex: 1 1 var(--list-row-body-min-width, 12rem);
    flex-direction: column;
  }

  [data-slot="list-row"][data-overflow="wrap"] [data-slot="list-row-body"] {
    overflow-wrap: anywhere;
  }
  [data-slot="list-row"][data-density="compact"] {
    gap: var(--list-row-compact-gap, var(--space-2));
    padding: var(--list-row-compact-padding-y, var(--space-2))
      var(--list-row-compact-padding-x, var(--list-row-padding-x));
  }

  [data-slot="card-content"]:not([data-flush])
    [data-slot="list-row"]:not(
      :where([data-slot="card-content"][data-flush], [data-slot="table-cell"], td, th) *
    ) {
    padding-inline: 0;
  }

  [data-slot="list-row"]:is(:focus-visible, :has(:focus-visible))
    [data-slot="list-row-body"]
    > [data-truncated],
  [data-slot="list-row"]:is(:focus-visible, :has(:focus-visible))
    [data-slot="list-row-body"]
    > [data-truncated]
    [data-truncate] {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
    min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
    flex-basis: var(--list-row-compact-body-min-width, 6rem);
  }
  [data-slot="list-row-trailing"] {
    display: inline-flex;
    max-inline-size: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--list-row-trailing-gap, var(--space-2));
    margin-inline-start: auto;
  }

  @media (max-width: 359px) {
    [data-slot="list-row"] {
      flex-wrap: wrap;
    }

    [data-slot="list-row-trailing"] {
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }

  .ui-credential-reveal {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-sm);
  }
  .ui-credential-reveal-warning {
    margin-block-end: var(--space-1);
  }
  .ui-credential-reveal-surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .ui-credential-reveal-label {
    display: inline-block;
  }
  .ui-credential-reveal-row {
    display: flex;
    align-items: center;
    gap: var(--space-inline-sm);
    min-height: var(--control-height);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    border: var(--stroke-hairline) solid hsl(var(--border));
    border-radius: var(--control-radius);
    background: hsl(var(--muted) / 0.4);
  }
  .ui-credential-reveal-secret {
    flex: 1 1 auto;
    min-width: 0;
    letter-spacing: 0.02em;
    word-break: break-all;
  }
  .ui-credential-reveal-secret[data-state="masked"] {
    color: hsl(var(--muted-foreground));
  }
  .ui-credential-reveal-actions {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-inline-xs);
  }
  .ui-credential-reveal-footer {
    display: flex;
    justify-content: flex-end;
  }

  .ui-qr-code {
    display: block;
    inline-size: var(--qr-code-size-md);
    block-size: auto;
    max-inline-size: 100%;
    aspect-ratio: 1;
  }
  .ui-qr-code[data-size="xs"] {
    inline-size: var(--qr-code-size-xs);
  }
  .ui-qr-code[data-size="sm"] {
    inline-size: var(--qr-code-size-sm);
  }
  .ui-qr-code[data-size="lg"] {
    inline-size: var(--qr-code-size-lg);
  }
}

@layer components {
  .ui-permission-matrix-table {
    min-inline-size: var(--permission-matrix-min-width);
  }

  .ui-permission-matrix .ui-permission-matrix-pin {
    position: sticky;
    inset-inline-start: 0;

    z-index: 20;
    background-color: hsl(var(--card) / var(--card-alpha, 100%));
    border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
    inline-size: var(--permission-matrix-label-width);
    min-inline-size: var(--permission-matrix-label-width);
  }

  .ui-permission-matrix .ui-table-row[data-tone] > .ui-permission-matrix-pin {
    background-image: linear-gradient(
      var(
        --table-row-tone-surface,
        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
      ),
      var(
        --table-row-tone-surface,
        hsl(var(--table-row-tone-color) / var(--table-row-tone-wash-alpha))
      )
    );
  }

  .ui-permission-matrix tbody tr:hover > .ui-permission-matrix-pin {
    background-image: linear-gradient(
      var(
        --table-row-hover-background,
        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
      ),
      var(
        --table-row-hover-background,
        hsl(var(--accent) / var(--table-row-hover-background-alpha, 0.7))
      )
    );
  }

  .ui-permission-matrix tbody tr[data-state="selected"] > .ui-permission-matrix-pin {
    background-image: linear-gradient(
      var(
        --table-row-selected-background,
        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
      ),
      var(
        --table-row-selected-background,
        hsl(var(--primary) / var(--table-row-selected-background-alpha, 0.06))
      )
    );
  }

  .ui-permission-matrix-role {
    display: inline-flex;
    align-items: center;
    gap: var(--permission-matrix-role-space-gap);
  }

  .ui-permission-matrix-name {
    display: inline-flex;
    align-items: center;
    gap: var(--permission-matrix-name-space-gap);
  }

  .ui-permission-matrix-cell-icon {
    inline-size: var(--permission-matrix-cell-icon-size);
    block-size: var(--permission-matrix-cell-icon-size);
  }
}

@layer components {

  .ui-scroll-area {
    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
    position: relative;
    scrollbar-width: var(--scroll-area-scrollbar-width);
    scrollbar-color: var(--scroll-area-thumb-color, hsl(var(--border)))
      var(--scroll-area-track-color, transparent);
    scrollbar-gutter: var(--scroll-area-scrollbar-space);
  }

  .ui-scroll-area[data-orientation="vertical"] {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ui-scroll-area[data-orientation="horizontal"] {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ui-scroll-area[data-orientation="both"] {
    overflow: auto;
  }

  .ui-scroll-area[data-scrollbar="always"] {
    scrollbar-width: auto;
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar {
    inline-size: var(--scroll-area-always-bar-size);
    block-size: var(--scroll-area-always-bar-size);
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-track {
    background: var(--scroll-area-track-color, transparent);
  }

  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-thumb {
    background: var(--scroll-area-thumb-color, hsl(var(--border)));
    border-radius: var(--scroll-area-always-thumb-radius);
  }

  .ui-scroll-area:is([data-orientation="horizontal"], [data-orientation="both"])
    > .ui-scroll-area-content {
    inline-size: max-content;
    min-inline-size: 100%;
  }
}

@layer components {

  :is(.ui-code-block, .ui-prose pre) {
    margin: 0;
    overflow: auto;
    border-radius: var(--code-block-radius, calc(var(--radius) / var(--radius-ratio)));
    background: hsl(var(--muted));
    padding: var(--code-block-space-inset);
    color: var(--code-block-foreground, hsl(var(--foreground)));
    font-family: var(--font-family-mono);
    font-size: var(--code-block-font-size);
    line-height: var(--code-block-line-height);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
  }

  .ui-prose pre {
    font-size: var(--prose-code-block-font-size);
  }

  :is(.ui-code-block, .ui-prose pre) > code {
    font: inherit;
    background: transparent;
    padding: 0;
  }

  .ui-code-block[data-wrap="false"] {
    white-space: pre;
    overflow-wrap: normal;
  }

  .ui-code-block[data-size="xs"] {
    font-size: var(--code-block-font-size-xs);
  }

  .ui-code-block[data-max-height="sm"] {
    max-block-size: var(--code-block-max-height-sm);
  }

  .ui-code-block[data-max-height="md"] {
    max-block-size: var(--code-block-max-height-md);
  }

  .ui-code-block[data-max-height="lg"] {
    max-block-size: var(--code-block-max-height-lg);
  }

  .ui-code-block-frame {
    position: relative;
    min-inline-size: 0;
  }

  .ui-code-block[data-copyable] {
    padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-xs));
  }

  .ui-code-block[data-copyable][data-wrap="false"] {
    padding-inline-end: var(--code-block-space-inset);
    border-inline-end: calc(var(--control-height-xs) + 2 * var(--space-1)) solid transparent;
  }

  .ui-code-block-copy {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-end: var(--space-1);
  }

  @media (pointer: coarse) {
    .ui-code-block[data-copyable] {
      padding-inline-end: calc(var(--code-block-space-inset) + var(--control-height-default));
    }

    .ui-code-block[data-copyable][data-wrap="false"] {
      padding-inline-end: var(--code-block-space-inset);
      border-inline-end-width: calc(var(--control-height-default) + 2 * var(--space-1));
    }
  }

  .ui-code-block [data-code-token="comment"],
  .ui-prose pre [data-code-token="comment"] {
    color: var(--code-block-token-comment-color, hsl(var(--muted-foreground)));
  }

  .ui-code-block [data-code-token="keyword"],
  .ui-prose pre [data-code-token="keyword"] {
    color: var(--code-block-token-keyword-color, hsl(var(--text-brand, var(--primary))));
  }

  .ui-code-block [data-code-token="string"],
  .ui-prose pre [data-code-token="string"] {
    color: var(--code-block-token-string-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="string-expression"],
  .ui-prose pre [data-code-token="string-expression"] {
    color: var(--code-block-token-string-expression-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="function"],
  .ui-prose pre [data-code-token="function"] {
    color: var(--code-block-token-function-color, hsl(var(--text-info)));
  }

  .ui-code-block [data-code-token="constant"],
  .ui-prose pre [data-code-token="constant"] {
    color: var(--code-block-token-constant-color, hsl(var(--text-warning)));
  }

  .ui-code-block [data-code-token="parameter"],
  .ui-prose pre [data-code-token="parameter"] {
    color: var(--code-block-token-parameter-color, hsl(var(--foreground)));
  }

  .ui-code-block [data-code-token="punctuation"],
  .ui-prose pre [data-code-token="punctuation"] {
    color: var(--code-block-token-punctuation-color, hsl(var(--muted-foreground)));
  }

  .ui-code-block [data-code-token="link"],
  .ui-prose pre [data-code-token="link"] {
    color: var(
      --code-block-token-link-color,
      hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)))
    );
    text-decoration-line: underline;

    text-underline-offset: var(--text-link-underline-offset);
    text-decoration-skip-ink: auto;
  }

  .ui-code-block [data-code-token="inserted"],
  .ui-prose pre [data-code-token="inserted"] {
    color: var(--code-block-token-inserted-color, hsl(var(--text-success)));
  }

  .ui-code-block [data-code-token="deleted"],
  .ui-prose pre [data-code-token="deleted"] {
    color: var(--code-block-token-deleted-color, hsl(var(--text-error)));
  }

  .ui-code-block [data-code-token="changed"],
  .ui-prose pre [data-code-token="changed"] {
    color: var(--code-block-token-changed-color, hsl(var(--text-warning)));
  }

  .ui-prose {
    font-size: var(--prose-font-size);
    line-height: var(--prose-line-height);
    overflow-wrap: anywhere;
  }

  .ui-prose[data-size="sm"] {
    font-size: var(--prose-font-size-sm);
  }

  .ui-prose :is(p, li):lang(ja) {
    word-break: auto-phrase;
    line-break: strict;
  }

  .ui-prose[data-measure="narrow"] {
    max-inline-size: var(--page-measure-narrow);
  }

  .ui-prose[data-measure="medium"] {
    max-inline-size: var(--page-measure-medium);
  }

  .ui-prose[data-measure="wide"] {
    max-inline-size: var(--page-measure-wide);
  }

  .ui-prose[data-image-size="original"] {
    overflow-x: auto;
  }

  .ui-prose > * {
    margin-block: 0;
  }

  .ui-prose > * + * {
    margin-block-start: var(--prose-space-block);
  }

  .ui-prose :is(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-wrap: balance;
  }

  .ui-prose > :is(h1, h2, h3, h4, h5, h6) + * {
    margin-block-start: var(--prose-space-block);
  }

  .ui-prose > * + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--prose-heading-space-block-start);
  }

  .ui-prose h1 {
    font-size: var(--heading-h1, var(--prose-heading-h1-font-size));
  }

  .ui-prose h2 {
    font-size: var(--heading-h2, var(--prose-heading-h2-font-size));
  }

  .ui-prose h3 {
    font-size: var(--heading-h3, var(--prose-heading-h3-font-size));
  }

  .ui-prose h4 {
    font-size: var(--heading-h4, var(--prose-heading-h4-font-size));
  }

  .ui-prose :is(h5, h6) {
    font-size: inherit;
  }

  .ui-prose :is(h4, h5, h6) {
    font-weight: var(--font-weight-bold);
  }

  .ui-prose h6 {
    color: hsl(var(--muted-foreground));
  }

  .ui-prose :is(ul, ol) {
    padding-inline-start: var(--prose-list-space-inline);
  }

  .ui-prose ul {
    list-style: disc;
  }

  .ui-prose ol {
    list-style: decimal;
  }

  .ui-prose li + li {
    margin-block-start: var(--prose-list-item-space);
  }

  .ui-prose li > :is(ul, ol) {
    margin-block-start: var(--prose-list-item-space);
  }

  .ui-prose blockquote {
    border-inline-start: var(--prose-quote-border-width, var(--stroke-md)) solid hsl(var(--border));
    padding-inline-start: var(--prose-quote-space-inline);
    color: hsl(var(--muted-foreground));
  }

  .ui-prose :not(pre) > code {
    font-family: var(--font-family-mono);
    font-size: var(--prose-code-font-size);
    background: hsl(var(--muted));
    padding-inline: var(--prose-code-space-inline);
    border-radius: var(
      --prose-code-radius,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
  }

  .ui-prose a {
    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
    text-decoration-line: var(--prose-link-decoration-line);
  }

  .ui-prose table {
    inline-size: 100%;
    border-collapse: collapse;
  }

  .ui-prose .ui-prose-table-scroll {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  .ui-prose :is(th, td) {
    border: var(--stroke-hairline) solid hsl(var(--border));
    padding: var(--table-cell-padding-y) var(--table-cell-space-x, var(--space-section-active));
    text-align: start;
    vertical-align: top;

    overflow-wrap: normal;
  }

  .ui-prose th {
    font-weight: var(--font-weight-medium);
    background: hsl(var(--muted));
  }

  .ui-prose :is(th, td)[data-short] {
    white-space: nowrap;
  }

  .ui-prose :is(th, td) img {
    max-inline-size: var(--prose-cell-image-max-inline-size);
  }

  .ui-prose :is(th, td) img[width$="%"] {
    inline-size: auto;
  }

  .ui-prose .ui-prose-callout {
    margin-block: var(--callout-space-stack);
    padding-block: var(--callout-space-inset-block);
    padding-inline: var(--callout-space-inset-inline);
    border-inline-start: var(--callout-rail-width) solid hsl(var(--info));
    border-start-end-radius: var(
      --callout-radius,
      var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio))))
    );
    border-end-end-radius: var(
      --callout-radius,
      var(--alert-radius, var(--card-radius, calc(var(--radius) * var(--radius-ratio))))
    );
    background-color: var(--surface-info, hsl(var(--info) / var(--alert-bg-alpha)));
  }

  .ui-prose .ui-prose-callout[data-kind="tip"] {
    border-inline-start-color: hsl(var(--success));
    background-color: var(--surface-success, hsl(var(--success) / var(--alert-bg-alpha)));
  }

  .ui-prose .ui-prose-callout[data-kind="important"] {
    border-inline-start-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / var(--alert-bg-alpha));
  }

  .ui-prose .ui-prose-callout[data-kind="warning"] {
    border-inline-start-color: hsl(var(--warning));
    background-color: var(--surface-warning, hsl(var(--warning) / var(--alert-bg-alpha)));
  }

  .ui-prose .ui-prose-callout[data-kind="caution"] {
    border-inline-start-color: hsl(var(--destructive));
    background-color: var(--surface-destructive, hsl(var(--destructive) / var(--alert-bg-alpha)));
  }

  .ui-prose .ui-prose-callout-title {
    font-weight: var(--font-weight-medium);
  }

  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :first-child {
    margin-block-start: 0;
  }

  .ui-prose :is(.ui-prose-callout, .ui-prose-column, .ui-prose-toggle) > :last-child {
    margin-block-end: 0;
  }

  .ui-prose .ui-prose-toggle {
    margin-block: var(--prose-space-block);
  }

  .ui-prose .ui-prose-toggle-summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
  }

  .ui-prose .ui-prose-toggle[open] > .ui-prose-toggle-summary {
    margin-block-end: var(--prose-space-block);
  }

  .ui-prose .ui-prose-columns {
    display: flex;
    gap: var(--prose-columns-gap);
    margin-block: var(--prose-space-block);
  }

  .ui-prose .ui-prose-column {
    flex: var(--prose-column-grow, 1) 1 0;
    min-inline-size: 0;
  }

  @media (width < 40rem) {
    .ui-prose .ui-prose-columns {
      flex-direction: column;
    }
  }

  .ui-block-editor {
    position: relative;
    padding-inline-start: var(--block-editor-gutter-inline-size);
  }

  .ui-block-editor[data-appearance="framed"] {
    padding-block: var(--block-editor-frame-padding);
    padding-inline-end: var(--block-editor-frame-padding);
    border: var(--stroke-hairline) solid hsl(var(--input));
    border-radius: var(--control-radius, var(--radius));
    background-color: hsl(var(--background));
    transition: border-color var(--duration-fast);
  }

  .ui-block-editor[data-appearance="framed"]:focus-within {
    border-color: hsl(var(--ring));
  }

  .ui-block-editor[data-appearance="framed"][data-disabled] {
    background-color: hsl(var(--muted));
  }

  .ui-block-editor-content {
    min-block-size: var(--block-editor-min-height);
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .ui-block-editor-content .is-empty::before {
    content: attr(data-placeholder);
    float: inline-start;
    block-size: 0;
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  .ui-block-editor-handle {
    position: absolute;
    inset-inline-start: 0;
    z-index: 1;
    display: flex;
    gap: var(--space-1);
  }

  @media (width < 40rem) {
    .ui-block-editor {
      padding-inline-start: var(--block-editor-compact-gutter-inline-size);
    }

    .ui-block-editor-handle {
      inset-inline: auto var(--block-editor-compact-gutter-inline-size);
      translate: 0 -100%;
      padding: var(--stroke-hairline);
      border: var(--stroke-hairline) solid hsl(var(--border));
      border-radius: var(--popover-radius, var(--radius));
      background-color: hsl(var(--popover) / var(--popover-alpha, 100%));
    }

    .ui-block-editor-handle[data-first-block] {
      translate: none;
    }
  }

  @media (hover: hover) {
    .ui-block-editor:not(:hover):not(:focus-within) .ui-block-editor-handle {
      opacity: 0;
    }
  }

  .ui-block-editor-content .ProseMirror-selectednode {
    outline: var(--stroke-md) solid hsl(var(--ring));
    outline-offset: var(--stroke-md);
    border-radius: calc(var(--radius) / var(--radius-ratio));
  }

  .ui-block-editor-menu {
    --popover-surface-inline-size: var(--block-editor-menu-inline-size);
  }

  .ui-block-editor-menu [cmdk-list] {
    max-block-size: var(--block-editor-menu-max-block-size);
  }

  .ui-block-editor-menu-icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .ui-block-editor-menu-icon svg,
  .ui-block-editor-toolbar svg {
    inline-size: var(--control-icon-size);
    block-size: var(--control-icon-size);
  }

  .ui-block-editor-menu-text {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
  }

  .ui-block-editor-menu-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-xs, var(--font-size-sm));
  }

  .ui-block-editor-toolbar {
    z-index: var(--overlay-z-index);
    padding: var(--space-1);
    border: var(--stroke-hairline) solid hsl(var(--border));
    border-radius: var(--popover-radius, var(--radius));
    background-color: hsl(var(--popover) / var(--popover-alpha, 100%));
    color: hsl(var(--popover-foreground));
    box-shadow: var(--popover-shadow, var(--shadow-md));
  }

  .ui-block-editor-toolbar-row,
  .ui-block-editor-toolbar-link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .ui-rich-text-editor {
    border: var(--stroke-hairline) solid hsl(var(--input));
    border-radius: var(--control-radius, var(--radius));
    background-color: hsl(var(--background));
    transition: border-color var(--duration-fast);
  }

  .ui-rich-text-editor:focus-within {
    border-color: hsl(var(--ring));
  }

  .ui-rich-text-editor[data-status="error"] {
    border-color: var(--control-status-error-border-color);
  }

  .ui-rich-text-editor[data-status="warning"] {
    border-color: var(--control-status-warning-border-color, hsl(var(--text-warning)));
  }

  .ui-rich-text-editor[data-disabled] {
    background-color: hsl(var(--muted));
  }

  .ui-rich-text-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-1);
    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
  }

  .ui-rich-text-editor-toolbar svg {
    inline-size: var(--control-icon-size);
    block-size: var(--control-icon-size);
  }

  .ui-rich-text-editor .ui-block-editor-content {
    padding: var(--block-editor-frame-padding);
  }

  .ui-block-editor-wikilink {
    color: hsl(var(--prose-link-color, var(--text-link, var(--primary))));
    text-decoration-line: underline;
    text-decoration-style: dotted;
  }

  .ui-block-editor-embed-inline,
  .ui-block-editor-raw-inline {
    font-family: var(--font-family-mono);
    font-size: var(--prose-code-font-size);
  }

  .ui-block-editor-embed,
  .ui-block-editor-raw-block {
    margin-block: var(--prose-space-block);
    padding: var(--space-2) var(--space-3);
    border: var(--stroke-hairline) dashed hsl(var(--border));
    border-radius: calc(var(--radius) / var(--radius-ratio));
  }

  .ui-block-editor-raw-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .ui-block-editor .ui-block-editor-raw-block-head :is([data-slot="text"], .ui-button) {
    font-size: var(--block-editor-raw-block-head-font-size);
  }

  .ui-block-editor-raw-block-source {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family-mono);
    font-size: var(--prose-code-font-size);
  }

  .ui-block-editor-upload {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    vertical-align: middle;
  }

  .ui-block-editor-upload svg {
    inline-size: var(--control-icon-size);
    block-size: var(--control-icon-size);
  }

  .ui-block-editor-upload-spinner {
    animation: spin 1s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-block-editor-upload-spinner {
      animation: none;
    }
  }

  .ui-block-editor-status {
    margin-block-start: var(--space-2);
  }

  .ui-block-editor-callout-head,
  .ui-block-editor-columns-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-block-end: var(--space-2);
  }

  .ui-block-editor-callout-title {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-weight: var(--font-weight-medium);
  }

  .ui-block-editor-columns {
    margin-block: var(--prose-space-block);
  }

  .ui-block-editor-columns-content > [data-node-view-content-react] {
    display: flex;
    gap: var(--prose-columns-gap);
  }

  @media (width < 40rem) {
    .ui-block-editor-columns-content > [data-node-view-content-react] {
      flex-direction: column;
    }
  }

  .ui-block-editor-content [data-type="details"] {
    display: flex;
    gap: var(--space-1);
    margin-block: var(--prose-space-block);
  }

  .ui-block-editor-content [data-type="details"] > div {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .ui-block-editor-content [data-type="detailsSummary"],
  .ui-block-editor-content [data-type="details"] summary {
    font-weight: var(--font-weight-medium);
    list-style: none;
  }

  .ui-block-editor-toggle-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-height-xs);
    block-size: var(--control-height-xs);
    padding: 0;
    border: 0;
    border-radius: calc(var(--radius) / var(--radius-ratio));
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
  }

  .ui-block-editor-toggle-button::before {
    content: "";
    border-block: var(--stroke-lg) solid transparent;
    border-inline-start: calc(var(--stroke-lg) * 1.5) solid currentColor;
    transition: rotate var(--duration-fast);
  }

  [data-type="details"].is-open > .ui-block-editor-toggle-button::before {
    rotate: 90deg;
  }

  .ui-block-editor-toggle-button:hover {
    background-color: hsl(var(--accent));
  }

  .ui-prose img[data-prose-preview] {
    cursor: zoom-in;
  }

  .ui-prose img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--prose-image-radius, calc(var(--radius) / var(--radius-ratio)));
  }

  .ui-prose[data-image-size="original"] img {
    max-inline-size: none;
  }

  .ui-prose hr {
    border: 0;
    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
  }
}

@layer components {
  .ui-timeline-grid {
    overflow-x: auto;
  }

  .ui-timeline-grid-frame {
    display: grid;
    grid-template-columns:
      var(--timeline-grid-axis-width)
      repeat(var(--timeline-grid-columns, 1), minmax(var(--timeline-grid-column-min-width), 1fr));
  }

  .ui-timeline-grid-corner {
    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
  }

  .ui-timeline-grid-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-1);
    border-block-end: var(--stroke-hairline) solid hsl(var(--border));
    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
    background: hsl(var(--secondary));
    font-size: var(--timeline-grid-head-font-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-align: center;
  }

  .ui-timeline-grid-head[data-current="true"] {
    background: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.08));
  }

  .ui-timeline-grid-head-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-grid-axis-font-size);
    font-weight: var(--font-weight-normal);
  }

  .ui-timeline-grid-axis,
  .ui-timeline-grid-column {
    position: relative;
    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-hours, 24));
  }

  .ui-timeline-grid-tick {
    position: absolute;
    inset-inline-end: var(--space-1);
    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-tick-offset, 0));
    color: hsl(var(--muted-foreground));
    font-size: var(--timeline-grid-axis-font-size);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: translateY(-50%);
    white-space: nowrap;
  }

  .ui-timeline-grid-column {
    margin: 0;
    padding: 0;
    border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
    background-image: repeating-linear-gradient(
      to bottom,
      var(--timeline-grid-line-color, hsl(var(--border))) 0 1px,
      transparent 1px calc(var(--timeline-grid-hour-height) * var(--timeline-grid-interval, 1))
    );
    list-style: none;
  }

  .ui-timeline-grid-column[data-current="true"] {
    background-color: var(--timeline-grid-current-tint, hsl(var(--primary) / 0.05));
  }

  .ui-timeline-grid-event {
    position: absolute;
    inset-block-start: calc(
      var(--timeline-grid-hour-height) * var(--timeline-grid-event-offset, 0)
    );
    inset-inline-start: calc(
      var(--timeline-grid-event-lane, 0) / var(--timeline-grid-event-lanes, 1) * 100%
    );
    box-sizing: border-box;
    inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
    block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
    min-block-size: calc(
      var(--timeline-grid-hour-height) * var(--timeline-grid-event-min-height-minutes) / 60
    );
    padding-inline-end: var(--timeline-grid-event-gap);
    padding-block-end: var(--timeline-grid-event-gap);
  }

  .ui-timeline-grid-event-body {
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    padding: var(--timeline-grid-event-space-inset);
    border-inline-start: var(--timeline-grid-event-border-width, var(--stroke-md)) solid
      var(--timeline-grid-event-color, hsl(var(--primary)));
    border-radius: var(
      --timeline-grid-event-radius,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );

    background-color: color-mix(
      in srgb,
      hsl(var(--background)),
      var(--timeline-grid-event-color, hsl(var(--primary))) 12%
    );
    color: hsl(var(--foreground));
    font-size: var(--timeline-grid-event-font-size);

    line-height: var(--line-height-normal);
    text-align: start;
  }

  .ui-timeline-grid-event[data-clipped="start"] .ui-timeline-grid-event-body,
  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .ui-timeline-grid-event[data-clipped="end"] .ui-timeline-grid-event-body,
  .ui-timeline-grid-event[data-clipped="both"] .ui-timeline-grid-event-body {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .ui-timeline-grid-event-time {
    color: var(--timeline-grid-event-muted-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ui-timeline-grid-event-title {
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-timeline-grid-event-description {
    overflow: hidden;
    color: var(--timeline-grid-event-muted-color);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  button.ui-timeline-grid-event-body {
    cursor: pointer;
  }

  button.ui-timeline-grid-event-body:hover {
    background-color: color-mix(
      in srgb,
      hsl(var(--background)),
      var(--timeline-grid-event-color, hsl(var(--primary))) 20%
    );
  }

  .ui-timeline-grid-now {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-now-offset, 0));
    block-size: var(--timeline-grid-now-width, var(--stroke-sm));
    background: var(--timeline-grid-now-color, hsl(var(--destructive)));
    pointer-events: none;
  }
}

@layer components {
  a.ui-list-row {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  a.ui-list-row:hover {
    background: hsl(var(--muted));
  }
  a.ui-list-row[aria-current="page"] {

    background: hsl(var(--accent));
    box-shadow: inset var(--space-1) 0 0 hsl(var(--primary));
  }
  [dir="rtl"] a.ui-list-row[aria-current="page"] {
    box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
  }
}

@layer components {

  .ui-range-timeline {
    container-type: inline-size;
    --range-timeline-label-track: min(
      var(--range-timeline-label-width),
      var(--range-timeline-label-max-inline-size)
    );
    overflow: auto;
    border: var(--stroke-hairline) solid hsl(var(--range-timeline-border-color));
    border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
  }

  .ui-range-timeline[data-sticky="true"] {
    overflow: clip;
  }
  .ui-range-timeline-sticky-header {
    position: sticky;
    inset-block-start: var(--range-timeline-sticky-offset, 0px);
    z-index: 2;
    overflow: hidden;
  }
  .ui-range-timeline-scroller {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .ui-range-timeline-canvas {
    min-inline-size: calc(
      var(--range-timeline-label-track) + var(--range-timeline-columns, 1) *
        var(--range-timeline-unit-width)
    );
  }
  .ui-range-timeline-header,
  .ui-range-timeline-row {
    display: grid;
    grid-template-columns: var(--range-timeline-label-track) minmax(0, 1fr);
    min-block-size: var(--range-timeline-row-height);
  }
  .ui-range-timeline-header {
    background: hsl(var(--muted));
  }

  .ui-range-timeline-label-resizer {
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--range-timeline-resizer-inline-size) / -2);
    z-index: 2;
    inline-size: var(--range-timeline-resizer-inline-size);
    cursor: col-resize;
    touch-action: none;
  }
  .ui-range-timeline-label-resizer::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: var(--range-timeline-resizer-active-width);
    translate: -50% 0;
    background: transparent;
  }
  .ui-range-timeline-label-resizer:hover::after,
  .ui-range-timeline-label-resizer:focus-visible::after {
    background: hsl(var(--primary));
  }
  .ui-range-timeline-label-resizer:focus-visible {
    outline: none;
  }

  .ui-range-timeline[data-busy="true"] .ui-range-timeline-body {
    opacity: var(--range-timeline-busy-body-alpha);
  }
  .ui-range-timeline-busy {
    position: relative;
    overflow: hidden;
    block-size: var(--range-timeline-busy-line-block-size);
    background: hsl(var(--primary) / 0.2);
  }
  .ui-range-timeline-busy::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inline-size: 30%;
    background: hsl(var(--primary));
    animation: ui-range-timeline-busy var(--duration-slow, 1.2s) ease-in-out infinite;
  }
  .ui-range-timeline-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: hsl(var(--card) / var(--card-alpha, 100%));
    padding: var(--space-2);
    border-inline-end: var(--stroke-hairline) solid hsl(var(--range-timeline-border-color));
  }

  .ui-range-timeline-columns {
    display: grid;
    grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
  }

  .ui-range-timeline-column {
    min-inline-size: 0;
    overflow: hidden;
    padding: var(--space-2);
    padding-inline-start: calc(
      var(--space-2) + var(--range-timeline-grid-width, var(--stroke-hairline))
    );
    text-align: center;
    border-inline-end: var(--range-timeline-grid-width, var(--stroke-hairline)) solid
      hsl(var(--range-timeline-border-color));
  }
  .ui-range-timeline-track {
    position: relative;
    min-inline-size: 0;
  }

  .ui-range-timeline-body {
    position: relative;
    isolation: isolate;
  }
  .ui-range-timeline-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    grid-template-columns: var(--range-timeline-label-track) minmax(0, 1fr);
    pointer-events: none;
  }
  .ui-range-timeline-grid-column {
    min-inline-size: 0;
    padding-inline: var(--space-2);
    border-inline-end: var(--range-timeline-grid-width, var(--stroke-hairline)) solid transparent;
  }
  .ui-range-timeline-grid-column[data-muted="true"] {
    background: var(--range-timeline-muted-column-background, hsl(var(--muted)));
  }

  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--border)));
  }
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
  .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
    border-block-start: var(--range-timeline-grid-width, var(--stroke-hairline)) solid
      var(--range-timeline-grid-color, hsl(var(--border)));
  }

  .ui-range-timeline[data-density="compact"] {
    --range-timeline-unit-width: var(--range-timeline-unit-width-compact);
  }
  .ui-range-timeline[data-density="comfortable"] {
    --range-timeline-unit-width: var(--range-timeline-unit-width-comfortable);
  }
  .ui-range-timeline-outside {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
    color: hsl(var(--muted-foreground));
  }
  .ui-range-timeline-outside[data-direction="before"] {
    inset-inline-start: 0;
  }
  .ui-range-timeline-outside[data-direction="after"] {
    inset-inline-end: 0;
  }
  .ui-range-timeline-outside-icon {
    inline-size: var(--icon-size-sm);
    block-size: var(--icon-size-sm);
    flex-shrink: 0;
  }

  [dir="rtl"] .ui-range-timeline-outside-icon {
    transform: scaleX(-1);
  }
  .ui-range-timeline-bar {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: var(--range-timeline-bar-height);
    border-radius: var(
      --radius-sm,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    background: var(--range-timeline-bar-color, hsl(var(--primary)));
    color: var(--range-timeline-bar-ink, hsl(var(--primary-foreground)));
  }

  .ui-range-timeline-plan,
  .ui-range-timeline-overrun,
  .ui-range-timeline-early {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: var(--range-timeline-bar-height);
  }
  .ui-range-timeline-plan {
    border: var(--range-timeline-plan-border-width) dashed hsl(var(--foreground) / 0.45);
    border-radius: var(
      --radius-sm,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
  }
  .ui-range-timeline-overrun {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    pointer-events: none;
  }
  .ui-range-timeline-variance {
    position: absolute;
    inset-inline-start: 100%;
    padding-inline: var(--space-1);
    color: hsl(var(--text-error));
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  .ui-range-timeline-plan-note {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    padding-inline: var(--space-1);
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
    white-space: nowrap;
    pointer-events: none;
  }
  .ui-range-timeline-early {
    z-index: 1;
    inline-size: var(--range-timeline-early-marker-inline-size);
    background: hsl(var(--success));
    pointer-events: none;
  }
  .ui-range-timeline-bar[data-muted="true"] {
    opacity: var(--range-timeline-bar-muted-alpha);
  }
  .ui-range-timeline-bar[data-overdue="true"] {
    box-shadow: inset calc(-1 * var(--range-timeline-bar-overdue-width)) 0 0 hsl(var(--destructive));
  }
  [dir="rtl"] .ui-range-timeline-bar[data-overdue="true"] {
    box-shadow: inset var(--range-timeline-bar-overdue-width) 0 0 hsl(var(--destructive));
  }

  .ui-range-timeline-finish,
  .ui-range-timeline-plan-tick {
    position: absolute;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    block-size: var(--range-timeline-bar-height);
  }
  [dir="rtl"] .ui-range-timeline-finish,
  [dir="rtl"] .ui-range-timeline-plan-tick {
    transform: translate(50%, -50%);
  }
  .ui-range-timeline-finish {
    inline-size: var(--range-timeline-finish-inline-size);
    border-radius: var(--range-timeline-finish-inline-size);
    background: var(--range-timeline-bar-color, hsl(var(--primary)));
  }
  .ui-range-timeline-plan-tick {
    inline-size: 0;
    border-inline-start: var(--range-timeline-plan-tick-inline-size) dashed
      hsl(var(--foreground) / 0.45);
  }
  .ui-range-timeline-bar[data-open-end="true"] {
    mask-image: linear-gradient(
      to right,
      black calc(100% - var(--range-timeline-open-end-fade-inline-size)),
      transparent
    );
  }
  [dir="rtl"] .ui-range-timeline-bar[data-open-end="true"] {
    mask-image: linear-gradient(
      to left,
      black calc(100% - var(--range-timeline-open-end-fade-inline-size)),
      transparent
    );
  }
  .ui-range-timeline-bar[data-cancelled="true"],
  .ui-range-timeline-milestone[data-cancelled="true"]::before {
    background-image: repeating-linear-gradient(
      -45deg,
      transparent 0 var(--range-timeline-cancelled-hatch-gap),
      var(--range-timeline-cancelled-hatch-color, hsl(var(--foreground) / 0.45))
        var(--range-timeline-cancelled-hatch-gap)
        calc(
          var(--range-timeline-cancelled-hatch-gap) +
            var(--range-timeline-cancelled-hatch-line-width)
        )
    );
  }
  .ui-range-timeline-milestone,
  .ui-range-timeline-plan-diamond {
    position: absolute;
    inset-block-start: 50%;
    inline-size: var(--range-timeline-milestone-size);
    block-size: var(--range-timeline-milestone-size);
    transform: translate(-50%, -50%);
  }
  [dir="rtl"] .ui-range-timeline-milestone,
  [dir="rtl"] .ui-range-timeline-plan-diamond {
    transform: translate(50%, -50%);
  }
  .ui-range-timeline-milestone::before,
  .ui-range-timeline-plan-diamond::before {
    content: "";
    position: absolute;
    inset: calc(var(--range-timeline-milestone-size) * 0.15);
    rotate: 45deg;
  }
  .ui-range-timeline-milestone {
    color: var(--range-timeline-bar-ink, hsl(var(--primary-foreground)));
  }
  .ui-range-timeline-milestone::before {
    background-color: var(--range-timeline-bar-color, hsl(var(--primary)));
  }
  .ui-range-timeline-milestone[data-muted="true"] {
    opacity: var(--range-timeline-bar-muted-alpha);
  }
  .ui-range-timeline-milestone[data-overdue="true"]::before {
    box-shadow: 0 0 0 var(--range-timeline-bar-overdue-width) hsl(var(--destructive));
  }
  .ui-range-timeline-plan-diamond::before {
    border: var(--range-timeline-plan-border-width) dashed hsl(var(--foreground) / 0.45);
  }

  .ui-range-timeline-milestone > .ui-range-timeline-handle {
    inset-inline: 0;
    inline-size: 100%;
  }
  .ui-range-timeline-early-label {
    z-index: 1;
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    padding-inline: var(--space-1);
    color: hsl(var(--text-success));
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .ui-range-timeline-links {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: var(--range-timeline-label-track) minmax(0, 1fr);
    pointer-events: none;
  }
  .ui-range-timeline-links-track {
    position: relative;
    min-inline-size: 0;
  }
  .ui-range-timeline-links-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }
  .ui-range-timeline-link line {
    fill: none;
    stroke: var(--range-timeline-link-color, hsl(var(--muted-foreground)));
    stroke-width: var(--range-timeline-link-width);
  }
  .ui-range-timeline-link[data-violated="true"] line {
    stroke: hsl(var(--mark-destructive, var(--text-error)));
  }
  .ui-range-timeline-link-head path {
    fill: var(--range-timeline-link-color, hsl(var(--muted-foreground)));
  }
  .ui-range-timeline-link-head[data-violated="true"] path {
    fill: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-range-timeline-link-violation {
    position: absolute;
    inline-size: var(--range-timeline-link-violation-size);
    block-size: var(--range-timeline-link-violation-size);
    translate: -50% -50%;
    border-radius: var(--radius-full, 9999px);
    pointer-events: auto;
  }
  [dir="rtl"] .ui-range-timeline-link-violation {
    translate: 50% -50%;
  }
  .ui-range-timeline-link-violation::before {
    content: "";
    position: absolute;
    inset: calc(var(--range-timeline-link-violation-size) * 0.3);
    border-radius: inherit;
    background: hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-range-timeline-row[data-emphasis="warning"] > .ui-range-timeline-label {
    box-shadow: inset var(--range-timeline-emphasis-width) 0 0
      hsl(var(--mark-warning, var(--text-warning)));
  }
  .ui-range-timeline-row[data-emphasis="critical"] > .ui-range-timeline-label {
    box-shadow: inset var(--range-timeline-emphasis-width) 0 0
      hsl(var(--mark-destructive, var(--text-error)));
  }
  [dir="rtl"] .ui-range-timeline-row[data-emphasis="warning"] > .ui-range-timeline-label {
    box-shadow: inset calc(-1 * var(--range-timeline-emphasis-width)) 0 0
      hsl(var(--mark-warning, var(--text-warning)));
  }
  [dir="rtl"] .ui-range-timeline-row[data-emphasis="critical"] > .ui-range-timeline-label {
    box-shadow: inset calc(-1 * var(--range-timeline-emphasis-width)) 0 0
      hsl(var(--mark-destructive, var(--text-error)));
  }

  .ui-range-timeline-bar-hit {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .ui-range-timeline-handle {
    z-index: 1;
    position: absolute;
    inset-block: 0;
    min-inline-size: 0;
    inline-size: var(--control-height-sm);
    block-size: 100%;
    padding: 0;
    color: inherit;
    touch-action: none;
    cursor: ew-resize;
  }
  .ui-range-timeline-handle[data-edge="start"] {
    inset-inline-start: 0;
  }
  .ui-range-timeline-handle[data-edge="end"] {
    inset-inline-end: 0;
  }
  .ui-range-timeline-today {
    position: absolute;
    inset-block: 0;
    border-inline-start: var(--stroke-hairline) solid hsl(var(--primary));
  }

  .ui-range-timeline-label[data-nested="true"] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline-start: calc(
      var(--space-2) + var(--range-timeline-depth, 0) * var(--range-timeline-indent-width)
    );
  }
  .ui-range-timeline-label-content {
    flex: 1;
    min-inline-size: 0;
  }
  .ui-range-timeline-disclosure,
  .ui-range-timeline-disclosure-spacer {
    flex-shrink: 0;
  }
  .ui-range-timeline-disclosure-spacer {
    inline-size: var(--control-height-xs);
  }

  @media (pointer: coarse) {
    .ui-range-timeline-disclosure-spacer {
      inline-size: var(--control-height-default);
    }
  }

  [dir="rtl"] .ui-range-timeline-disclosure-collapsed {
    transform: scaleX(-1);
  }
}

@layer components {

  [data-slot="descriptions"][data-columns-responsive] {
    --descriptions-column-count: var(--descriptions-column-count-base, 1);
    grid-template-columns: repeat(var(--descriptions-column-count), minmax(0, 1fr));
  }

  [data-slot="descriptions-item"][data-span-responsive] {
    --descriptions-item-span: var(--descriptions-item-span-base, 1);
    grid-column: span var(--descriptions-item-span) / span var(--descriptions-item-span);
  }

  [data-slot="descriptions-item"][data-span="filled"] {
    grid-column: 1 / -1;
  }

  [data-slot="descriptions"]:not([data-bordered]) [data-slot="descriptions-item"] {
    border-block-end: var(--descriptions-row-border);
    min-block-size: var(--descriptions-row-min-height);

    align-content: center;
  }

  [data-slot="descriptions"][data-bordered] {
    gap: 0;
    border-inline-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
      hsl(var(--border));
    border-block-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
      hsl(var(--border));
    border-radius: var(--descriptions-border-radius, calc(var(--radius) / var(--radius-ratio)));
    overflow: hidden;
  }

  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-item"] {
    gap: 0;
    border-block-start: var(--descriptions-border-width, var(--stroke-hairline)) solid
      hsl(var(--border));
    border-inline-start: var(--descriptions-border-width, var(--stroke-hairline)) solid
      hsl(var(--border));
  }

  [data-slot="descriptions"][data-bordered]
    :is([data-slot="descriptions-label"], [data-slot="descriptions-value"]) {
    padding: var(--descriptions-cell-padding-y) var(--descriptions-cell-padding-x);
  }

  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-label"] {
    background-color: var(--descriptions-label-background, hsl(var(--muted)));
  }

  [data-slot="descriptions"][data-bordered]
    [data-slot="descriptions-item"][data-layout="horizontal"]
    [data-slot="descriptions-label"] {
    border-inline-end: var(--descriptions-border-width, var(--stroke-hairline)) solid
      hsl(var(--border));
  }
}

@layer godxjp-ui-responsive {

  @media (min-width: 640px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-sm,
        var(--descriptions-column-count-base, 1)
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-sm,
        var(--descriptions-item-span-base, 1)
      );
    }
  }

  @media (min-width: 768px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-md,
        var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-md,
        var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
      );
    }
  }

  @media (min-width: 1024px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-lg,
        var(
          --descriptions-column-count-md,
          var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
        )
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-lg,
        var(
          --descriptions-item-span-md,
          var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
        )
      );
    }
  }

  @media (min-width: 1280px) {
    [data-slot="descriptions"][data-columns-responsive] {
      --descriptions-column-count: var(
        --descriptions-column-count-xl,
        var(
          --descriptions-column-count-lg,
          var(
            --descriptions-column-count-md,
            var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
          )
        )
      );
    }

    [data-slot="descriptions-item"][data-span-responsive] {
      --descriptions-item-span: var(
        --descriptions-item-span-xl,
        var(
          --descriptions-item-span-lg,
          var(
            --descriptions-item-span-md,
            var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
          )
        )
      );
    }
  }
}

@layer components {
  .ui-text[data-decoration="line-through"] {
    text-decoration: line-through;
  }
  .ui-text[data-decoration="underline"] {
    text-decoration: underline;
  }
  .ui-text[data-decoration="none"] {
    text-decoration: none;
  }
  .ui-text[data-chip] {
    background: hsl(var(--muted));
    border-radius: var(
      --prose-code-radius,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    padding-inline: var(--prose-code-space-inline);
    font-size: var(--prose-code-font-size);
  }
}

@layer components {

  .ui-chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: var(--chat-bubble-gap);
    min-inline-size: 0;
  }

  .ui-chat-bubble[data-placement="end"] {
    flex-direction: row-reverse;
  }

  .ui-chat-bubble-avatar {
    display: inline-flex;
    flex: none;
    inline-size: var(--chat-bubble-avatar-size, var(--control-height));
    block-size: var(--chat-bubble-avatar-size, var(--control-height));
  }

  .ui-chat-bubble-avatar > .ui-avatar {
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-chat-bubble-column {
    display: flex;
    min-inline-size: 0;
    max-inline-size: min(var(--chat-bubble-max-inline-size), 100%);
    flex-direction: column;
    gap: var(--space-1);
  }

  .ui-chat-bubble[data-placement="end"] .ui-chat-bubble-column {
    align-items: flex-end;
  }

  .ui-chat-bubble-body {
    min-inline-size: 0;
    border-radius: var(--chat-bubble-radius, var(--radius));
    padding-block: var(--chat-bubble-padding-block);
    padding-inline: var(--chat-bubble-padding-inline);
    background: var(--chat-bubble-background, hsl(var(--muted)));
    color: var(--chat-bubble-foreground, hsl(var(--foreground)));

    overflow-wrap: anywhere;
  }

  .ui-chat-bubble[data-variant="outlined"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid var(--chat-bubble-border-color, hsl(var(--border)));
    background: transparent;
  }

  .ui-chat-bubble[data-variant="borderless"] .ui-chat-bubble-body {
    background: transparent;
  }

  .ui-chat-bubble[data-variant="borderless"][data-tone="default"] .ui-chat-bubble-body {
    padding-inline: 0;
  }

  .ui-chat-bubble[data-placement="end"][data-variant="filled"] .ui-chat-bubble-body {
    background: var(--chat-bubble-end-background, hsl(var(--primary) / 0.1));
    color: var(--chat-bubble-end-foreground, hsl(var(--foreground)));
  }

  .ui-chat-bubble[data-size="xs"] {
    --chat-bubble-padding-block: var(--space-1);
    --chat-bubble-padding-inline: var(--space-2);
  }

  .ui-chat-bubble[data-size="sm"] {
    --chat-bubble-padding-block: var(--space-1);
    --chat-bubble-padding-inline: var(--space-3);
  }

  .ui-chat-bubble[data-size="lg"] {
    --chat-bubble-padding-block: var(--space-3);
    --chat-bubble-padding-inline: var(--space-4);
  }

  .ui-chat-bubble[data-tone="info"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--info) / var(--chat-bubble-tone-border-alpha));
    background: var(--surface-info, hsl(var(--info) / var(--chat-bubble-tone-background-alpha)));
  }

  .ui-chat-bubble[data-tone="success"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--success) / var(--chat-bubble-tone-border-alpha));
    background: var(
      --surface-success,
      hsl(var(--success) / var(--chat-bubble-tone-background-alpha))
    );
  }

  .ui-chat-bubble[data-tone="warning"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid hsl(var(--warning) / var(--chat-bubble-tone-border-alpha));
    background: var(
      --surface-warning,
      hsl(var(--warning) / var(--chat-bubble-tone-background-alpha))
    );
  }

  .ui-chat-bubble[data-tone="destructive"] .ui-chat-bubble-body {
    border: var(--stroke-hairline) solid
      hsl(var(--destructive) / var(--chat-bubble-tone-border-alpha));
    background: var(
      --surface-destructive,
      hsl(var(--destructive) / var(--chat-bubble-tone-background-alpha))
    );
  }

  .ui-chat-bubble-caret {
    display: inline-block;
    inline-size: var(--chat-bubble-typing-caret-width, var(--stroke-md));
    block-size: var(--chat-bubble-typing-caret-height);
    margin-inline-start: var(--space-1);
    background: var(--chat-bubble-typing-caret-color, hsl(var(--muted-foreground)));
    vertical-align: text-bottom;
  }

  .ui-chat-bubble-skeleton {
    display: grid;
    grid-template-columns: minmax(0, var(--chat-bubble-max-inline-size));
    gap: var(--skeleton-row-gap);
  }

  .ui-chat-bubble-skeleton-line {
    block-size: var(--skeleton-block-height);
    inline-size: auto;
    max-inline-size: 100%;
  }

  .ui-chat-bubble-skeleton-line--short {
    inline-size: var(--chat-bubble-skeleton-short-inline-size);
  }

  .ui-chat-bubble-list {
    position: relative;
    display: flex;
    min-block-size: 0;
    flex-direction: column;

    block-size: 100%;
  }

  .ui-chat-bubble-list-scroller {
    min-block-size: 0;
    flex: 1 1 auto;
  }

  .ui-chat-bubble-list-feed {
    display: flex;
    flex-direction: column;
    gap: var(--chat-bubble-list-gap);
  }

  .ui-chat-bubble-list-jump {
    position: absolute;
    display: flex;
    inset-inline: 0;
    inset-block-end: var(--chat-bubble-list-jump-inset);
    justify-content: center;
    pointer-events: none;
  }

  .ui-chat-bubble-list-jump > * {
    pointer-events: auto;
  }
}

@layer components {
  .ui-tree {
    display: flex;
    flex-direction: column;
    font-size: var(--tree-node-font-size);
  }

  .ui-tree-node {
    display: flex;
    align-items: center;
    gap: var(--tree-node-gap);

    min-block-size: var(--tree-node-height, var(--control-height));
    border-radius: var(
      --tree-node-radius,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    padding-inline: var(--tree-node-padding-inline);

    padding-inline-start: calc(
      var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width)
    );
    cursor: pointer;
  }

  .ui-tree-node:hover {
    background: var(
      --tree-node-hover-background,
      hsl(var(--accent) / var(--tree-node-hover-background-alpha, 100%))
    );
  }

  .ui-tree-node[data-selected="true"] {
    background: var(
      --tree-node-selected-background,
      hsl(var(--accent) / var(--tree-node-selected-background-alpha, 100%))
    );
    color: var(--tree-node-selected-foreground, hsl(var(--accent-foreground)));
    font-weight: var(--font-weight-medium);
  }

  .ui-tree-node[data-disabled] {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-tree-node[draggable="true"] {
    cursor: grab;
  }

  .ui-tree-node[data-dragging="true"] {
    opacity: var(--disabled-opacity);
  }

  .ui-tree-node[data-drop-position] {
    position: relative;
  }

  .ui-tree-node[data-drop-position="before"]::after,
  .ui-tree-node[data-drop-position="after"]::after {
    content: "";
    position: absolute;
    inset-inline: calc(
        var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width)
      )
      0;
    block-size: var(--tree-drop-indicator-width, var(--stroke-md));
    background: var(--tree-drop-indicator-color, hsl(var(--primary)));
    pointer-events: none;
  }

  .ui-tree-node[data-drop-position="before"]::after {
    inset-block-start: 0;
  }

  .ui-tree-node[data-drop-position="after"]::after {
    inset-block-end: 0;
  }

  .ui-tree-node[data-drop-position="inside"] {
    box-shadow: inset 0 0 0 var(--tree-drop-indicator-width, var(--stroke-md))
      var(--tree-drop-indicator-color, hsl(var(--primary)));
  }

  .ui-tree-switcher {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--tree-switcher-size);
    block-size: var(--tree-switcher-size);
    color: var(--tree-switcher-color, hsl(var(--muted-foreground)));
  }

  .ui-tree-switcher > svg {
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
  }

  .ui-tree-switcher[data-leaf] {
    cursor: default;
  }

  .ui-tree-check {
    display: inline-flex;
    flex: none;
    align-items: center;
  }

  .ui-tree-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-tree-icon > svg {
    inline-size: var(--tree-icon-size);
    block-size: var(--tree-icon-size);
  }

  .ui-tree-label {
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-tree:not([data-virtual])
    .ui-tree-node:focus-visible
    > .ui-tree-label[data-truncated]:not(:has([data-ellipsis])) {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ui-tree-group {
    display: flex;
    flex-direction: column;
  }

  .ui-tree[data-show-line="true"] .ui-tree-group {
    position: relative;
  }

  .ui-tree[data-show-line="true"] .ui-tree-group::before {
    position: absolute;
    inset-block: 0;

    inset-inline-start: calc(
      var(--tree-node-padding-inline) + (var(--tree-node-level, 1) - 1) * var(--tree-indent-width) +
        var(--tree-switcher-size) / 2
    );
    border-inline-start: var(--stroke-hairline) solid var(--tree-line-color, hsl(var(--border)));
    content: "";
  }

  .ui-tree[data-divided="true"] .ui-tree-node {
    border-block-start: var(--stroke-hairline) solid var(--tree-divider-color, hsl(var(--border)));
  }

  .ui-tree[data-divided="true"] > .ui-tree-node:first-child {
    border-block-start-color: transparent;
  }

  .ui-tree-node[data-filter-node="true"]:not([data-disabled]) .ui-tree-label {
    color: var(--tree-node-filter-foreground, hsl(var(--text-brand, var(--primary))));
    font-weight: var(--font-weight-medium);
  }

  .ui-tree[data-virtual="true"][data-show-line="true"] .ui-tree-node {
    position: relative;
  }

  .ui-tree-rail {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(
      var(--tree-node-padding-inline) + (var(--tree-rail-level, 1) - 1) * var(--tree-indent-width) +
        var(--tree-switcher-size) / 2
    );
    border-inline-start: var(--stroke-hairline) solid var(--tree-line-color, hsl(var(--border)));
  }

  .ui-tree-spacer {
    flex: none;
  }

  .ui-tree[data-virtual="true"][data-divided="true"]
    > .ui-tree-node[aria-level="1"][aria-posinset="1"] {
    border-block-start-color: transparent;
  }

  .ui-tree-loading {
    display: flex;
    align-items: center;
    min-block-size: var(--tree-node-height, var(--control-height));
    padding-inline-start: calc(
      var(--tree-node-padding-inline) + var(--tree-node-level, 0) * var(--tree-indent-width) +
        var(--tree-switcher-size)
    );
  }

  .ui-tree-loading-bar {
    block-size: var(--tree-icon-size);
    inline-size: var(--tree-loading-bar-inline-size);
  }

  .ui-tree-empty {
    padding-block: var(--space-4);
    padding-inline: var(--tree-node-padding-inline);
    color: hsl(var(--muted-foreground));
  }

  .ui-tree[data-size="xs"] {
    --tree-node-height: var(--control-height-xs);
    --tree-node-font-size: var(
      --font-size-xs,
      calc(var(--font-size-base) / var(--font-size-ratio))
    );
  }

  .ui-tree[data-size="sm"] {
    --tree-node-height: var(--control-height-sm);
  }

  .ui-tree[data-size="lg"] {
    --tree-node-height: var(--control-height-lg);
  }

  .ui-tree[data-variant="directory"] .ui-tree-node[data-selected="true"] {
    background: var(
      --tree-node-selected-background,
      hsl(var(--primary) / var(--tree-node-selected-background-alpha, 0.12))
    );
  }
}

@layer components {

  .ui-welcome {
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    gap: var(--welcome-gap);
    border-radius: var(--welcome-radius, var(--radius));
  }

  .ui-welcome[data-variant="filled"] {
    padding-block: var(--welcome-padding-block);
    padding-inline: var(--welcome-padding-inline);
    border: var(--welcome-filled-border, var(--stroke-hairline) solid hsl(var(--border)));
    background: var(--welcome-filled-background, hsl(var(--muted)));
  }

  .ui-welcome-icon {
    display: grid;
    inline-size: var(--welcome-icon-size);
    block-size: var(--welcome-icon-size);
    flex: 0 0 auto;
    line-height: 0;
    place-items: center;
  }

  .ui-welcome-icon svg,
  .ui-welcome-icon img {
    inline-size: var(--welcome-icon-size);
    block-size: var(--welcome-icon-size);
    object-fit: contain;
  }

  .ui-welcome-content {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--welcome-content-gap);
  }

  .ui-welcome-title-row {
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--welcome-title-gap);
  }

  .ui-welcome-title {
    min-inline-size: 0;
  }

  .ui-welcome-extra {
    flex: 0 0 auto;
  }
}

@layer components {

  .ui-thought-chain {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--thought-chain-gap);
    list-style: none;
  }

  .ui-thought-chain-node {
    position: relative;
    display: flex;
    min-inline-size: 0;
    align-items: flex-start;
    gap: var(--thought-chain-node-gap);
  }

  .ui-thought-chain:not([data-line="none"]) .ui-thought-chain-node:not(:last-child)::before {
    position: absolute;
    inset-block: var(--thought-chain-icon-size) calc(-1 * var(--thought-chain-gap));
    inset-inline-start: calc(var(--thought-chain-icon-size) / 2);
    border-inline-start: var(--thought-chain-line-width, var(--stroke-hairline)) solid
      var(--thought-chain-line-color, hsl(var(--border)));
    content: "";
    translate: calc(-1 * var(--thought-chain-line-width, var(--stroke-hairline)) / 2) 0;
  }

  .ui-thought-chain[data-line="dashed"] .ui-thought-chain-node::before {
    border-inline-start-style: dashed;
  }

  .ui-thought-chain[data-line="dotted"] .ui-thought-chain-node::before {
    border-inline-start-style: dotted;
  }

  .ui-thought-chain-icon {
    position: relative;
    z-index: 1;
    display: grid;
    inline-size: var(--thought-chain-icon-size);
    block-size: var(--thought-chain-icon-size);
    flex: 0 0 auto;
    border-radius: var(--thought-chain-icon-radius);
    background: var(--thought-chain-icon-background, hsl(var(--muted)));
    color: var(--thought-chain-icon-color, hsl(var(--muted-foreground)));
    font-size: var(--thought-chain-icon-font-size);
    place-items: center;
  }

  .ui-thought-chain-icon svg {
    inline-size: var(--thought-chain-chevron-size);
    block-size: var(--thought-chain-chevron-size);
  }

  .ui-thought-chain-icon[data-status="success"] {
    color: var(--thought-chain-icon-success-color, hsl(var(--success)));
  }

  .ui-thought-chain-icon[data-status="error"] {
    color: var(--thought-chain-icon-error-color, hsl(var(--destructive)));
  }

  .ui-thought-chain-body {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--thought-chain-body-gap);
  }

  .ui-thought-chain-header {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--thought-chain-body-gap);
  }

  .ui-thought-chain-trigger {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--thought-chain-item-gap);
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: start;
  }

  .ui-thought-chain-chevron {
    inline-size: var(--thought-chain-chevron-size);
    block-size: var(--thought-chain-chevron-size);
    flex: 0 0 auto;
  }

  [dir="rtl"] .ui-thought-chain-chevron {
    scale: -1 1;
  }

  .ui-thought-chain-chevron[data-expanded="true"],
  [dir="rtl"] .ui-thought-chain-chevron[data-expanded="true"] {
    rotate: 90deg;
    scale: 1 1;
  }

  .ui-thought-chain-content {
    padding-block: var(--thought-chain-content-space-block);
  }

  @keyframes ui-thought-chain-blink {
    50% {
      opacity: 0.45;
    }
  }

  .ui-thought-chain [data-blink],
  .ui-thought-chain-item[data-blink] {
    animation: ui-thought-chain-blink var(--duration-slow) ease-in-out infinite;
  }

  .ui-thought-chain-spinner {
    animation: spin var(--duration-slow) linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-thought-chain [data-blink],
    .ui-thought-chain-item[data-blink],
    .ui-thought-chain-spinner {
      animation: none;
    }
  }

  .ui-thought-chain-item {
    display: inline-flex;
    align-items: center;
    gap: var(--thought-chain-item-gap);
    padding-block: var(--thought-chain-item-padding-block);
    padding-inline: var(--thought-chain-item-padding-inline);
    border: 0;
    border-radius: var(--thought-chain-item-radius, var(--radius));
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
  }

  .ui-thought-chain-item[data-variant="solid"] {
    background: var(--thought-chain-item-solid-background, hsl(var(--muted)));
  }

  .ui-thought-chain-item[data-variant="outlined"] {
    border: var(
      --thought-chain-item-outlined-border,
      var(--stroke-hairline) solid hsl(var(--border))
    );
  }

  button.ui-thought-chain-item {
    cursor: pointer;
  }

  button.ui-thought-chain-item:disabled {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-thought-chain-item-text {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
  }
}

@layer components {

  .ui-org-chart {
    min-inline-size: 0;
    container: org-chart / inline-size;
  }

  .ui-org-chart-scroll {
    overflow-x: auto;
    padding: var(--org-chart-padding);
  }

  .ui-org-chart-tree,
  .ui-org-chart-children {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-org-chart-tree {
    inline-size: max-content;
    min-inline-size: 100%;
  }

  .ui-org-chart-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: calc(var(--org-chart-sibling-gap) / 2);
  }

  .ui-org-chart-children {
    position: relative;
    padding-block-start: calc(var(--org-chart-level-gap) / 2);
  }

  .ui-org-chart-children::before,
  .ui-org-chart-children > .ui-org-chart-branch::before,
  .ui-org-chart-children > .ui-org-chart-branch::after {
    position: absolute;
    box-sizing: border-box;
    inset-block-start: 0;
    block-size: calc(var(--org-chart-level-gap) / 2);
    border: 0 solid var(--org-chart-line-color, hsl(var(--border)));
    content: "";
  }

  .ui-org-chart-children::before {
    inset-inline-start: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2);
    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
  }

  .ui-org-chart-children > .ui-org-chart-branch {
    padding-block-start: calc(var(--org-chart-level-gap) / 2);
  }

  .ui-org-chart-children > .ui-org-chart-branch::before {
    inset-inline: 0 50%;
    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
  }

  .ui-org-chart-children > .ui-org-chart-branch::after {
    inset-inline: calc(50% - var(--org-chart-line-width, var(--stroke-hairline)) / 2) 0;
    border-block-start-width: var(--org-chart-line-width, var(--stroke-hairline));
    border-inline-start-width: var(--org-chart-line-width, var(--stroke-hairline));
  }

  .ui-org-chart-children > .ui-org-chart-branch:first-child::before,
  .ui-org-chart-children > .ui-org-chart-branch:last-child::after {
    border-block-start-width: 0;
  }

  .ui-org-chart-node {
    position: relative;
    display: flex;
    box-sizing: border-box;
    inline-size: var(--org-chart-node-inline-size);
    align-items: flex-start;
    gap: var(--org-chart-node-gap);
    padding-block: var(--org-chart-node-padding-block);
    padding-inline: var(--org-chart-node-padding-inline);
    border: var(--org-chart-node-border-width, var(--stroke-hairline)) solid
      var(--org-chart-node-border-color, hsl(var(--border)));
    border-radius: var(--org-chart-node-radius, var(--radius));
    background: var(--org-chart-node-background, hsl(var(--card)));
    color: var(--org-chart-node-foreground, hsl(var(--card-foreground)));
    font-size: var(--org-chart-node-font-size);
    text-align: start;
  }

  .ui-org-chart-node[data-variant="agent"] {
    border-style: var(--org-chart-agent-border-style);
  }

  .ui-org-chart-avatar {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .ui-org-chart-text {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--org-chart-node-text-gap);
  }

  .ui-org-chart-name {
    font-weight: var(--font-weight-medium);
    overflow-wrap: anywhere;
  }

  .ui-org-chart-title {
    color: var(--org-chart-node-title-color, hsl(var(--muted-foreground)));
    overflow-wrap: anywhere;
  }

  .ui-org-chart-extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--org-chart-node-text-gap);
  }

  .ui-org-chart-list {
    display: none;
  }

  .ui-org-chart-list-row {
    display: inline-flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--org-chart-node-gap);
  }

  .ui-org-chart-list-row .ui-org-chart-extra {
    display: inline-flex;
  }

  @container org-chart (width < 40rem) {
    .ui-org-chart-scroll {
      display: none;
    }

    .ui-org-chart-list {
      display: block;
    }
  }
}

@layer components {

  .ui-image {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
    padding: 0;
    border-width: 0;
    border-radius: var(--image-radius, var(--radius));
    background: none;
    color: inherit;
    font: inherit;
    line-height: 0;
    vertical-align: middle;
  }

  .ui-image[data-preview] {
    cursor: zoom-in;
  }

  .ui-image-img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: inherit;
  }

  .ui-image[data-sized],
  .ui-image-tile[data-sized] {
    inline-size: var(--image-inline-size, auto);
  }

  .ui-image[data-sized] {
    block-size: var(--image-block-size, auto);
  }

  .ui-image[data-sized] > .ui-image-img {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
  }

  :is(.ui-image, .ui-image-tile)[data-size="sm"] {
    --image-block-size: var(--thumbnail-block-size-sm);
  }

  :is(.ui-image, .ui-image-tile)[data-size="md"] {
    --image-block-size: var(--thumbnail-block-size);
  }

  :is(.ui-image, .ui-image-tile)[data-size="lg"] {
    --image-block-size: var(--thumbnail-block-size-lg);
  }

  :is(.ui-image, .ui-image-tile)[data-size] {
    --image-inline-size: calc(var(--image-block-size) * var(--thumbnail-width-ratio));
  }

  .ui-image[data-fit="intrinsic"] {
    inline-size: auto;
    border: var(--thumbnail-border-width, var(--stroke-hairline)) solid hsl(var(--border));
    border-radius: var(--thumbnail-radius, var(--radius));
    background: hsl(var(--muted));
  }

  .ui-image[data-fit="intrinsic"] > .ui-image-img {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .ui-image-img[data-fit="cover"] {
    object-fit: cover;
  }

  .ui-image-img[data-fit="contain"] {
    object-fit: contain;
  }

  .ui-image-tile {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-stack-xs);
    max-inline-size: 100%;
    margin: 0;
    vertical-align: top;
  }

  .ui-image-caption {
    min-inline-size: 0;
  }

  .ui-image-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
  }

  .ui-image-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--image-mask-gap);
    border-radius: inherit;
    background: var(--image-mask-background, var(--overlay-background));
    color: var(--image-mask-foreground, hsl(var(--background)));
    font-size: var(--font-size-sm, var(--font-size-base));
    line-height: var(--line-height-normal, 1.5);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
    pointer-events: none;
  }

  .ui-image-mask-icon {
    inline-size: var(--image-preview-icon-size);
    block-size: var(--image-preview-icon-size);
  }

  .ui-image:hover .ui-image-mask,
  .ui-image:focus-visible .ui-image-mask {
    opacity: 1;
  }

  .ui-image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--overlay-z-index);
    background-color: var(--image-preview-background, var(--overlay-background));
  }

  .ui-image-preview {
    position: fixed;
    inset: 0;
    z-index: var(--overlay-z-index);
    color: var(--image-preview-foreground, hsl(var(--background)));
    outline: none;
  }

  .ui-image-preview-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: calc(var(--image-preview-button-size) + var(--image-preview-inset) * 2);
  }

  .ui-image-preview-img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .ui-image-preview-stage[data-dragging] .ui-image-preview-img {
    cursor: grabbing;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-image-preview-img,
    .ui-image-mask {
      transition: none;
    }
  }

  .ui-image-preview-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--image-preview-button-size);
    block-size: var(--image-preview-button-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(
      in srgb,
      currentColor var(--image-preview-button-background-alpha),
      transparent
    );
    color: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .ui-image-preview-button:hover:not(:disabled) {
    background: color-mix(
      in srgb,
      currentColor var(--image-preview-button-hover-background-alpha),
      transparent
    );
  }

  .ui-image-preview-button:disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .ui-image-preview-button svg {
    inline-size: var(--image-preview-icon-size);
    block-size: var(--image-preview-icon-size);
  }

  .ui-image-preview-close {
    position: absolute;
    inset-block-start: var(--image-preview-inset);
    inset-inline-end: var(--image-preview-inset);
  }

  .ui-image-preview-switch {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .ui-image-preview-switch[data-direction="previous"] {
    inset-inline-start: var(--image-preview-inset);
  }

  .ui-image-preview-switch[data-direction="next"] {
    inset-inline-end: var(--image-preview-inset);
  }

  [dir="rtl"] .ui-image-preview-switch svg {
    transform: scaleX(-1);
  }

  .ui-image-preview-footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--image-preview-inset);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--image-preview-gap);
    pointer-events: none;
  }

  .ui-image-preview-footer > * {
    pointer-events: auto;
  }

  .ui-image-preview-counter {
    font-size: var(--font-size-sm, var(--font-size-base));
    font-variant-numeric: tabular-nums;
  }

  .ui-image-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--image-preview-gap);
  }

  .ui-image-preview-icon {
    display: contents;
  }
}

@keyframes ui-range-timeline-busy {
  from {
    inset-inline-start: -30%;
  }
  to {
    inset-inline-start: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-range-timeline-busy::before {
    animation: none;
    inset-inline-start: 0;
    inline-size: 100%;
    opacity: 0.6;
  }
}