/* Lumen UI
 * Standalone component CSS for Astro, React, and Web Components.
 * Import once with: import "@santi020k/lumen/styles.css"
 */

/* Cascade layers: consumer (unlayered) CSS always wins over Lumen styles.
 * Layer order also guarantees glass variants beat component base styles. */
@layer lumen.tokens, lumen.base, lumen.components, lumen.glass;

@layer lumen.tokens {
:root,
[data-theme="light"],
[data-theme="lumen-light"] {
  color-scheme: light;
  --canvas: 210 24% 98%;
  --surface: 0 0% 100%;
  --surface-muted: 210 22% 95%;
  --surface-strong: 213 18% 88%;
  --line: 214 17% 84%;
  --ink: 216 28% 12%;
  --ink-soft: 215 14% 35%;
  --ink-muted: 215 10% 50%;
  --brand: 201 96% 32%;
  --brand-solid: 201 96% 28%;
  --brand-soft: 198 64% 92%;
  --on-brand: 0 0% 100%;
  --accent: 169 78% 33%;
  --success: 142 76% 36%;
  --warning: 38 92% 50%;
  --danger: 0 84% 60%;
  --on-danger: 0 0% 0%;
  --chart-axis: var(--ink-muted);
  --chart-diverging-mid: 213 18% 88%;
  --chart-diverging-negative: 0 84% 60%;
  --chart-diverging-positive: 201 96% 32%;
  --chart-grid: var(--line);
  --chart-reference: var(--ink-soft);
  --chart-selection: var(--brand);
  --chart-sequential-high: 201 96% 24%;
  --chart-sequential-low: 198 64% 92%;
  --chart-sequential-mid: 201 80% 58%;
  --chart-series-1: 201 96% 32%;
  --chart-series-2: 169 78% 33%;
  --chart-series-3: 280 72% 56%;
  --chart-series-4: 25 95% 53%;
  --chart-series-5: 340 82% 55%;
  --chart-series-6: 190 82% 42%;
  --chart-series-7: 52 92% 45%;
  --chart-series-8: 215 16% 47%;
  --chart-tooltip-background: var(--ink);
  --chart-tooltip-foreground: var(--surface);
  --ui-on-danger: var(--on-danger);
  --ui-radius: 0.625rem;
  --ui-radius-sm: 0.375rem;
  --ui-radius-lg: 0.75rem;
  --ui-shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.06);
  --ui-shadow-md: 0 8px 24px hsl(222 47% 11% / 0.08);
  --ui-shadow-lg: 0 24px 64px hsl(222 47% 11% / 0.14);
  --glass-bg: 0 0% 100% / 0.55;
  --glass-bg-subtle: 0 0% 100% / 0.38;
  --glass-bg-strong: 0 0% 100% / 0.72;
  --glass-border: 220 30% 100% / 0.55;
  --glass-highlight: 0 0% 100% / 0.85;
  --glass-blur: 22px;
  --glass-saturate: 1.7;
  --glass-brightness: 1.05;
  --glass-edge: 0 0% 100% / 0.9;
  --glass-edge-soft: 0 0% 100% / 0.34;
  --glass-shade: 222 47% 11% / 0.07;
  --glass-refraction: 201 96% 32% / 0.08;
  --glass-shadow:
    0 1px 2px hsl(222 47% 11% / 0.08),
    0 12px 32px hsl(222 47% 11% / 0.12),
    0 32px 80px hsl(222 47% 11% / 0.14);
  --ui-font: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --ui-duration-fast: 120ms;
  --ui-duration: 160ms;
  --ui-duration-slow: 300ms;
  --ui-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"],
[data-theme="lumen-dark"] {
  color-scheme: dark;
  --canvas: 224 24% 8%;
  --surface: 224 18% 11%;
  --surface-muted: 223 16% 15%;
  --surface-strong: 222 14% 22%;
  --line: 222 14% 26%;
  --ink: 210 20% 96%;
  --ink-soft: 214 14% 77%;
  --ink-muted: 216 10% 62%;
  --brand: 199 91% 56%;
  --brand-solid: 199 91% 36%;
  --brand-soft: 199 84% 16%;
  --on-brand: 0 0% 100%;
  --accent: 166 76% 43%;
  --success: 142 69% 45%;
  --warning: 38 92% 55%;
  --danger: 0 84% 65%;
  --on-danger: 224 24% 8%;
  --chart-axis: var(--ink-muted);
  --chart-diverging-mid: 222 14% 22%;
  --chart-diverging-negative: 0 84% 65%;
  --chart-diverging-positive: 199 91% 56%;
  --chart-grid: var(--line);
  --chart-reference: var(--ink-soft);
  --chart-selection: var(--brand);
  --chart-sequential-high: 199 91% 66%;
  --chart-sequential-low: 199 84% 16%;
  --chart-sequential-mid: 199 72% 42%;
  --chart-series-1: 199 91% 56%;
  --chart-series-2: 166 76% 43%;
  --chart-series-3: 285 82% 72%;
  --chart-series-4: 31 96% 62%;
  --chart-series-5: 342 88% 68%;
  --chart-series-6: 188 86% 54%;
  --chart-series-7: 52 94% 58%;
  --chart-series-8: 215 18% 68%;
  --chart-tooltip-background: var(--ink);
  --chart-tooltip-foreground: var(--canvas);
  --ui-on-danger: var(--canvas);
  --ui-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.18);
  --ui-shadow-md: 0 12px 32px hsl(0 0% 0% / 0.24);
  --ui-shadow-lg: 0 28px 80px hsl(0 0% 0% / 0.36);
  --glass-bg: 224 20% 13% / 0.78;
  --glass-bg-subtle: 224 20% 13% / 0.64;
  --glass-bg-strong: 224 20% 13% / 0.9;
  --glass-border: 210 30% 92% / 0.24;
  --glass-highlight: 210 30% 96% / 0.1;
  --glass-brightness: 1;
  --glass-edge: 210 40% 98% / 0.24;
  --glass-edge-soft: 210 40% 98% / 0.08;
  --glass-shade: 240 40% 3% / 0.3;
  --glass-refraction: 199 91% 56% / 0.1;
  --glass-shadow:
    0 1px 2px hsl(0 0% 0% / 0.3),
    0 16px 40px hsl(0 0% 0% / 0.34),
    0 40px 96px hsl(0 0% 0% / 0.38);
}

[data-theme$="-dark"] {
  --on-danger: var(--canvas);
  --ui-on-danger: var(--canvas);
}
}

@layer lumen.base {
@keyframes ui-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ui-animated-logo-reveal {
  from {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-animated-logo-pop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes ui-animated-logo-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ui-animated-logo-slide {
  from {
    opacity: 0;
    transform: translateX(-0.625rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ui-graphic-orbit {
  to {
    transform: rotate(1turn);
  }
}

.ui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(
  .ui-accordion,
  .ui-alert,
  .ui-agenda,
  .ui-animated-logo,
  .ui-animated-number,
  .ui-aspect-ratio,
  .ui-attachment,
  .ui-autocomplete,
  .ui-avatar,
  .ui-backdrop,
  .ui-back-to-top,
  .ui-badge,
  .ui-bubble,
  .ui-button,
  .ui-button-group,
  .ui-calendar,
  .ui-card,
  .ui-carousel,
  .ui-chart,
  .ui-checkbox,
  .ui-collapsible,
  .ui-combobox,
  .ui-code,
  .ui-command,
  .ui-context-navigation,
  .ui-callout,
  .ui-color-picker,
  .ui-dialog,
  .ui-drawer,
  .ui-date-range-picker,
  .ui-empty,
  .ui-error-state,
  .ui-eyebrow,
  .ui-field,
  .ui-floating-badge,
  .ui-formatted-date,
  .ui-gradient-divider,
  .ui-graphic,
  .ui-icon,
  .ui-input,
  .ui-input-group,
  .ui-input-otp-field,
  .ui-input-otp,
  .ui-image,
  .ui-illustration,
  .ui-item,
  .ui-kbd,
  .ui-label,
  .ui-language-toggle,
  .ui-link,
  .ui-menu,
  .ui-menubar,
  .ui-message,
  .ui-message-scroller,
  .ui-navigation-menu,
  .ui-pagination,
  .ui-particles,
  .ui-pill,
  .ui-popover,
  .ui-progress,
  .ui-prose,
  .ui-radio-group,
  .ui-resizable,
  .ui-rich-text-editor,
  .ui-scroll-area,
  .ui-scroll-reveal,
  .ui-reveal-group,
  .ui-schedule,
  .ui-search-field,
  .ui-select,
  .ui-select-field,
  .ui-separator,
  .ui-sheet,
  .ui-sidebar,
  .ui-skip-link,
  .ui-skeleton,
  .ui-slider,
  .ui-tvp,
  .ui-sparkline,
  .ui-spinner,
  .ui-switch,
  .ui-table-wrap,
  .ui-tabs,
  .ui-tag-group,
  .ui-textarea,
  .ui-theme-builder,
  .ui-time-field,
  .ui-toast,
  .ui-toggle,
  .ui-toggle-group,
  .ui-tooltip,
  .ui-tree,
  .ui-tree-grid,
  .ui-typography,
  .ui-virtual-list
) {
  box-sizing: border-box;
  font-family: var(--ui-font);
}

:where(.ui-button, .ui-back-to-top, .ui-code__copy, .ui-input, .ui-language-toggle, .ui-link, .ui-select, .ui-skip-link, .ui-textarea, .ui-checkbox, .ui-switch, .ui-toggle, .ui-theme-toggle, .ui-slider, .ui-color-picker, .ui-resizable__handle):focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 2px;
}
}

@layer lumen.components {
.ui-animated-logo {
  display: inline-flex;
  line-height: 0;
}

.ui-animated-logo > svg {
  animation: ui-animated-logo-reveal var(--ui-animated-logo-duration, 700ms)
    cubic-bezier(0.22, 1, 0.36, 1) var(--ui-animated-logo-delay, 0ms) both;
  display: block;
  flex: none;
  height: 100%;
  max-width: 100%;
  transform-origin: center;
  width: auto;
}

.ui-animated-logo[data-animation="sequence"] > svg {
  animation: none;
}

.ui-animated-logo[data-animation="sequence"] [data-ui-logo-pop] {
  animation: ui-animated-logo-pop var(--ui-logo-duration, 500ms)
    cubic-bezier(0.34, 1.56, 0.64, 1) var(--ui-logo-delay, 0ms) both;
  transform-box: fill-box;
  transform-origin: center;
}

.ui-animated-logo[data-animation="sequence"] [data-ui-logo-draw] {
  animation: ui-animated-logo-draw var(--ui-logo-duration, 600ms)
    ease var(--ui-logo-delay, 0ms) both;
  stroke-dasharray: var(--ui-logo-path-length, 100);
  stroke-dashoffset: var(--ui-logo-path-length, 100);
}

.ui-animated-logo[data-animation="sequence"] [data-ui-logo-reveal] {
  animation: ui-animated-logo-slide var(--ui-logo-duration, 500ms)
    ease var(--ui-logo-delay, 0ms) both;
}

.ui-animated-portrait {
  animation: ui-animated-portrait-reveal 400ms ease-out both;
  isolation: isolate;
  margin-inline: auto;
  max-width: 22rem;
  position: relative;
  width: 100%;
}

.ui-animated-portrait__glow,
.ui-animated-portrait__orbit,
.ui-animated-portrait__grid,
.ui-animated-portrait__wash {
  pointer-events: none;
  position: absolute;
}

.ui-animated-portrait__glow {
  animation: ui-animated-portrait-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: radial-gradient(
    circle,
    hsl(var(--brand) / 0.18),
    hsl(var(--accent) / 0.08),
    transparent 70%
  );
  border-radius: 2rem;
  filter: blur(3rem);
  inset: 5%;
  z-index: -2;
}

.ui-animated-portrait__orbit {
  border-radius: 50%;
  padding: 1px;
  z-index: -1;
  background: conic-gradient(
    from 30deg,
    transparent,
    hsl(var(--brand) / 0.28),
    hsl(var(--accent) / 0.16),
    transparent 72%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.ui-animated-portrait__orbit--outer {
  animation: ui-animated-portrait-spin 24s linear infinite;
  inset: -10%;
  padding: 2px;
}

.ui-animated-portrait__orbit--inner {
  animation: ui-animated-portrait-spin-reverse 18s linear infinite;
  background: conic-gradient(
    from 210deg,
    transparent,
    hsl(var(--accent) / 0.2),
    hsl(var(--brand) / 0.12),
    transparent 72%
  );
  inset: 8%;
}

.ui-animated-portrait__card {
  border-radius: 2.25rem;
  overflow: hidden;
  padding: 0.75rem;
  position: relative;
  transition: box-shadow 500ms ease;
  z-index: 0;
}

.ui-animated-portrait__card:hover {
  box-shadow: 0 20px 60px -15px hsl(var(--brand) / 0.15);
}

.ui-animated-portrait__grid {
  background-image:
    linear-gradient(hsl(var(--line) / 0.2) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--line) / 0.2) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem;
  inset: 0;
  opacity: 0.2;
  z-index: 1;
}

.ui-animated-portrait__wash {
  background: linear-gradient(
    135deg,
    hsl(var(--brand) / 0.05),
    transparent 50%,
    hsl(var(--accent) / 0.08)
  );
  inset: 0;
  z-index: 2;
}

.ui-animated-portrait__image {
  aspect-ratio: 4 / 5;
  border-radius: 1.7rem;
  display: block;
  object-fit: cover;
  object-position: top;
  position: relative;
  width: 100%;
  z-index: 0;
}

.ui-animated-portrait__badge {
  animation: ui-animated-portrait-float 6s ease-in-out infinite;
  backdrop-filter: blur(10px);
  background: linear-gradient(
    135deg,
    hsl(var(--surface) / 0.9),
    hsl(var(--surface-muted) / 0.78)
  );
  border: 1px solid hsl(var(--line) / 0.6);
  border-radius: 1rem;
  box-shadow:
    0 10px 28px hsl(var(--ink) / 0.08),
    inset 0 1px 0 hsl(0 0% 100% / 0.18);
  display: none;
  max-width: calc(100% - 1rem);
  padding: 1rem 1.125rem;
  position: absolute;
  z-index: 3;
}

.ui-animated-portrait__badge--location {
  border-left: 4px solid hsl(var(--brand) / 0.55);
  bottom: 2rem;
  left: -1rem;
  min-width: 10rem;
}

.ui-animated-portrait__badge--experience {
  animation-delay: -3s;
  border-right: 4px solid hsl(var(--accent) / 0.55);
  min-width: 8rem;
  right: -1rem;
  top: 2rem;
}

.ui-animated-portrait__label {
  color: hsl(var(--ink-muted));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1rem;
  margin: 0;
  text-transform: uppercase;
}

.ui-animated-portrait__label--location {
  align-items: center;
  display: flex;
  gap: 0.375rem;
}

.ui-animated-portrait__status {
  animation: ui-animated-portrait-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  background: hsl(var(--brand));
  border-radius: 9999px;
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
}

.ui-animated-portrait__location,
.ui-animated-portrait__experience {
  margin: 0.5rem 0 0;
}

.ui-animated-portrait__location {
  color: hsl(var(--ink));
  font-size: 0.875rem;
  line-height: 1.5rem;
  white-space: nowrap;
}

.ui-animated-portrait__experience {
  color: hsl(var(--ink));
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

@media (min-width: 640px) {
  .ui-animated-portrait__card {
    padding: 1rem;
  }

  .ui-animated-portrait__badge {
    display: block;
  }

  .ui-animated-portrait__badge--location {
    left: -2rem;
  }

  .ui-animated-portrait__badge--experience {
    right: -2rem;
  }
}

@keyframes ui-animated-portrait-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
}

@keyframes ui-animated-portrait-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes ui-animated-portrait-reveal {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-animated-portrait-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ui-animated-portrait-spin-reverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-animated-portrait,
  .ui-animated-portrait__glow,
  .ui-animated-portrait__orbit,
  .ui-animated-portrait__badge,
  .ui-animated-portrait__status {
    animation: none;
  }

  .ui-animated-portrait__card {
    transition: none;
  }
}

.panel-surface {
  background: hsl(var(--surface) / 0.96);
  border: 1px solid hsl(var(--line));
  box-shadow: var(--ui-shadow-md);
}

.panel-card,
.ui-card {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-sm);
  color: hsl(var(--ink));
}

.card-interactive,
.ui-card--interactive {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.card-interactive:hover,
.ui-card--interactive:hover {
  border-color: hsl(var(--brand) / 0.36);
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-1px);
}

.shadow-inset-soft {
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.04);
}

.ui-card {
  --ui-card-gap: 1rem;
  --ui-card-padding: 1.25rem;
  --ui-card-section-gap: 0.375rem;

  padding: var(--ui-card-padding);
}

.ui-card__header {
  display: grid;
  gap: var(--ui-card-section-gap);
}

.ui-card__title {
  color: hsl(var(--ink));
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ui-card__description {
  color: hsl(var(--ink-muted));
  font-size: 0.875rem;
  line-height: 1.55;
}

.ui-card__content {
  color: hsl(var(--ink-soft));
}

.ui-card__footer {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.ui-card > :where(
  .ui-card__content,
  .ui-card__footer
) {
  margin-block-start: var(--ui-card-gap);
}

.ui-card--muted {
  background: hsl(var(--surface-muted) / 0.72);
}

.ui-card--unstyled,
.ui-button-link--unstyled {
  all: revert-layer;
}

.ui-card--glass.ui-card--interactive:hover,
.ui-card--glass.card-interactive:hover {
  border-color: hsl(var(--glass-edge));
  background:
    radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 48%),
    radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 50%),
    hsl(var(--glass-bg-strong));
  transform: translateY(-2px);
}

.ui-button {
  --ui-button-font-size: 0.875rem;
  --ui-button-font-weight: 600;
  --ui-button-gap: 0.5rem;
  --ui-button-min-height: 2.5rem;
  --ui-button-padding: 0.5rem 1rem;
  --ui-button-radius: var(--ui-radius-sm);

  display: inline-flex;
  min-height: var(--ui-button-min-height);
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-gap);
  border: 1px solid transparent;
  border-radius: var(--ui-button-radius);
  padding: var(--ui-button-padding);
  cursor: pointer;
  font-size: var(--ui-button-font-size);
  font-weight: var(--ui-button-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
  user-select: none;
}

.ui-button:hover {
  transform: translateY(-1px);
}

.ui-button:active {
  transform: translateY(0);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-button--disabled {
  pointer-events: none;
  opacity: 0.52;
}

.ui-button--default {
  background: hsl(var(--brand-solid));
  border-color: hsl(var(--brand-solid));
  color: hsl(var(--on-brand));
  box-shadow: 0 8px 20px hsl(var(--brand) / 0.22);
}

.ui-button--default:hover {
  background: hsl(var(--brand-solid));
  border-color: hsl(var(--brand-solid));
}

.ui-button--primary {
  background: hsl(var(--brand-solid));
  border-color: hsl(var(--brand-solid));
  color: hsl(var(--on-brand));
  box-shadow: 0 8px 20px hsl(var(--brand) / 0.22);
}

.ui-button--primary:hover {
  background: hsl(var(--brand-solid));
  border-color: hsl(var(--brand-solid));
}

.ui-button--secondary {
  background: hsl(var(--surface-muted));
  border-color: hsl(var(--line));
  color: hsl(var(--ink));
}

.ui-button--secondary:hover {
  background: hsl(var(--surface-strong));
}

.ui-button--outline {
  background: hsl(var(--surface) / 0.76);
  border-color: hsl(var(--line));
  color: hsl(var(--ink));
}

.ui-button--outline:hover {
  border-color: hsl(var(--brand) / 0.48);
  color: hsl(var(--brand));
}

.ui-button--ghost {
  background: transparent;
  color: hsl(var(--ink-soft));
}

.ui-button--ghost:hover {
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink));
}

.ui-button--destructive {
  background: hsl(var(--danger));
  border-color: hsl(var(--danger));
  color: hsl(var(--on-danger));
}

.ui-button--destructive:hover {
  background: hsl(var(--danger) / 0.9);
}

.ui-button--link {
  min-height: auto;
  border-color: transparent;
  background: transparent;
  padding: 0;
  color: hsl(var(--brand));
  text-underline-offset: 0.25rem;
}

.ui-button--link:hover {
  text-decoration: underline;
  transform: none;
}

.ui-button--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
}

.ui-button--default-size {
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
}

.ui-button--lg {
  min-height: 3rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.9375rem;
}

.ui-button--icon {
  width: 2.5rem;
  padding: 0;
}

.ui-back-to-top,
.ui-language-toggle {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ui-back-to-top {
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
}

.ui-language-toggle {
  min-width: 2.5rem;
  padding: 0.5rem;
}

.ui-back-to-top:hover,
.ui-language-toggle:hover {
  border-color: hsl(var(--brand) / 0.52);
  color: hsl(var(--brand));
  transform: translateY(-1px);
}

.ui-callout {
  display: grid;
  gap: 0.375rem;
  padding: 1rem 1.125rem;
  border: 1px solid hsl(var(--line));
  border-left: 0.25rem solid hsl(var(--brand));
  border-radius: var(--ui-radius);
  background: hsl(var(--brand-soft) / 0.52);
  color: hsl(var(--ink-soft));
  line-height: 1.6;
}

.ui-callout :where(strong, b) {
  color: hsl(var(--ink));
}

.ui-callout :where(p) {
  margin: 0;
}

.ui-eyebrow {
  margin: 0;
  color: hsl(var(--brand));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ui-floating-badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border: 2px solid hsl(var(--canvas));
  border-radius: 999px;
  background: hsl(var(--danger));
  color: hsl(var(--ui-on-danger));
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--ui-shadow-sm);
}

.ui-formatted-date {
  color: hsl(var(--ink-soft));
  font-variant-numeric: tabular-nums;
}

.ui-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--ui-radius-lg);
  object-fit: cover;
}

.ui-image--fit-contain { object-fit: contain; }
.ui-image--fit-cover { object-fit: cover; }
.ui-image--radius-none { border-radius: 0; }
.ui-image--radius-sm { border-radius: var(--ui-radius-sm); }
.ui-image--radius-md { border-radius: var(--ui-radius-md); }
.ui-image--radius-lg { border-radius: var(--ui-radius-lg); }
.ui-image--radius-full { border-radius: 9999px; }

:where([data-theme="dark"], [data-theme$="-dark"], .dark) .ui-image--invert-dark {
  filter: invert(1) hue-rotate(180deg);
}

.ui-link {
  --ui-link-font-weight: 600;
  --ui-link-underline-offset: 0.2em;

  color: hsl(var(--brand));
  font-weight: var(--ui-link-font-weight);
  text-decoration-thickness: 0.08em;
  text-underline-offset: var(--ui-link-underline-offset);
}

.ui-link:hover {
  color: hsl(var(--brand-solid));
}

.ui-link--inherit {
  color: inherit;
  font-weight: inherit;
}

.ui-link--inherit:hover {
  color: inherit;
}

.ui-prose {
  max-width: 65ch;
  color: hsl(var(--ink-soft));
  line-height: 1.7;
}

.ui-prose :where(h1, h2, h3, h4, strong) {
  color: hsl(var(--ink));
}

.ui-prose :where(h1, h2, h3, h4, p, ul, ol) {
  margin-block: 0 0.75em;
}

.ui-prose :where(ul, ol) {
  padding-inline-start: 1.25rem;
}

.ui-skip-link {
  position: fixed;
  z-index: 100000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--ink));
  color: hsl(var(--canvas));
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 160ms ease;
}

.ui-skip-link:focus {
  transform: translateY(0);
}

.ui-gradient-divider {
  display: flex;
  width: 100%;
  justify-content: center;
  pointer-events: none;
}

.ui-gradient-divider__line {
  width: 100%;
  max-width: 64rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--brand) / 0.4),
    transparent
  );
}

.ui-backdrop {
  --ui-backdrop-color: var(--brand);
  --ui-backdrop-secondary: var(--accent);
  --ui-backdrop-opacity: 0.68;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.ui-backdrop::before {
  content: '';
  inset: 0;
  opacity: var(--ui-backdrop-opacity);
  pointer-events: none;
  position: absolute;
}

.ui-backdrop__content,
.ui-backdrop > * {
  position: relative;
  z-index: 1;
}

.ui-backdrop--subtle { --ui-backdrop-opacity: 0.4; }
.ui-backdrop--strong { --ui-backdrop-opacity: 1; }
.ui-backdrop--accent { --ui-backdrop-color: var(--accent); --ui-backdrop-secondary: var(--brand); }
.ui-backdrop--neutral { --ui-backdrop-color: var(--ink-muted); --ui-backdrop-secondary: var(--ink-soft); }

.ui-backdrop--aurora::before {
  background:
    radial-gradient(ellipse at 18% 8%, hsl(var(--ui-backdrop-color) / 0.28), transparent 46%),
    radial-gradient(ellipse at 86% 92%, hsl(var(--ui-backdrop-secondary) / 0.2), transparent 48%);
}

.ui-backdrop--dots::before {
  background-image: radial-gradient(circle, hsl(var(--ui-backdrop-color) / 0.28) 1px, transparent 1.5px);
  background-size: 1.25rem 1.25rem;
  mask-image: radial-gradient(ellipse, black 12%, transparent 76%);
}

.ui-backdrop--grid::before {
  background-image:
    linear-gradient(hsl(var(--ui-backdrop-color) / 0.14) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ui-backdrop-color) / 0.14) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(black, transparent 92%);
}

.ui-backdrop--rays::before {
  background: repeating-conic-gradient(from 210deg at 50% 0%, hsl(var(--ui-backdrop-color) / 0.12) 0 4deg, transparent 4deg 13deg);
  mask-image: linear-gradient(black, transparent 88%);
}

.ui-illustration {
  --ui-illustration-color: var(--brand);
  color: hsl(var(--ui-illustration-color));
  display: inline-grid;
  place-items: center;
  width: var(--ui-illustration-size, 8rem);
}

.ui-illustration svg { display: block; height: auto; overflow: visible; width: 100%; }
.ui-illustration :where(path, circle) { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ui-illustration__wash { fill: hsl(var(--ui-illustration-color) / 0.1); stroke: none !important; }
.ui-illustration--sm { --ui-illustration-size: 6rem; }
.ui-illustration--lg { --ui-illustration-size: 11rem; }
.ui-illustration--auto.ui-illustration--success { --ui-illustration-color: var(--success); }
.ui-illustration--auto.ui-illustration--error { --ui-illustration-color: var(--danger); }
.ui-illustration--auto.ui-illustration--offline { --ui-illustration-color: var(--ink-muted); }
.ui-illustration--accent { --ui-illustration-color: var(--accent); }
.ui-illustration--neutral { --ui-illustration-color: var(--ink-muted); }

.ui-graphic {
  --ui-graphic-color: var(--brand);
  --ui-graphic-secondary: var(--accent);
  aspect-ratio: 1;
  display: grid;
  isolation: isolate;
  max-width: 100%;
  overflow: hidden;
  place-items: center;
  position: relative;
  width: var(--ui-graphic-size, 15rem);
}

.ui-graphic::before,
.ui-graphic::after {
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.ui-graphic > *,
.ui-graphic__content {
  position: relative;
  z-index: 1;
}

.ui-graphic--sm {
  --ui-graphic-size: 10rem;
}

.ui-graphic--md {
  --ui-graphic-size: 15rem;
}

.ui-graphic--lg {
  --ui-graphic-size: 20rem;
}

.ui-graphic--accent {
  --ui-graphic-color: var(--accent);
  --ui-graphic-secondary: var(--brand);
}

.ui-graphic--neutral {
  --ui-graphic-color: var(--ink-muted);
  --ui-graphic-secondary: var(--ink-soft);
}

.ui-graphic--glow::before {
  background: radial-gradient(
    circle,
    hsl(var(--ui-graphic-color) / 0.3),
    hsl(var(--ui-graphic-secondary) / 0.12) 38%,
    transparent 70%
  );
  filter: blur(0.75rem);
}

.ui-graphic--grid::before {
  background-image:
    linear-gradient(hsl(var(--ui-graphic-color) / 0.13) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--ui-graphic-color) / 0.13) 1px, transparent 1px),
    radial-gradient(circle, hsl(var(--ui-graphic-secondary) / 0.18), transparent 66%);
  background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, 100% 100%;
  mask-image: radial-gradient(circle, black 20%, transparent 74%);
}

.ui-graphic--orbit::before {
  background:
    linear-gradient(90deg, transparent 49.75%, hsl(var(--ui-graphic-color) / 0.16) 50%, transparent 50.25%),
    linear-gradient(transparent 49.75%, hsl(var(--ui-graphic-color) / 0.16) 50%, transparent 50.25%),
    radial-gradient(circle, transparent 0 17%, hsl(var(--ui-graphic-color) / 0.22) 17.4% 17.8%, transparent 18.2% 31%, hsl(var(--ui-graphic-color) / 0.28) 31.4% 31.8%, transparent 32.2% 45%, hsl(var(--ui-graphic-color) / 0.18) 45.4% 45.8%, transparent 46.2% 49%, hsl(var(--ui-graphic-secondary) / 0.28) 49.4% 49.8%, transparent 50.2%),
    radial-gradient(circle, hsl(var(--ui-graphic-color) / 0.18), transparent 68%);
}

.ui-graphic--orbit::after {
  animation: ui-graphic-orbit 18s linear infinite;
  background: conic-gradient(
    from 0deg,
    transparent 0 72%,
    hsl(var(--ui-graphic-color) / 0.42) 82%,
    transparent 92%
  );
  inset: 8%;
  mask-image: radial-gradient(circle, transparent 0 42%, black 42.5% 49%, transparent 49.5%);
}

.ui-particles {
  position: relative;
  display: block;
  min-height: 12rem;
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  background: transparent;
}

.ui-particles__particle {
  position: absolute;
  top: var(--ui-particle-top);
  left: var(--ui-particle-left);
  width: var(--ui-particle-size);
  height: var(--ui-particle-size);
  border-radius: 50%;
  background: hsl(var(--ui-particle-tone) / 0.25);
  box-shadow: 0 0 var(--ui-particle-size) hsl(var(--ui-particle-tone) / 0.15);
  opacity: 0;
  animation: ui-particle-drift var(--ui-particle-duration) ease-in-out var(--ui-particle-delay) infinite;
}

.ui-motion-duration-fast {
  --ui-motion-duration: var(--ui-duration-fast);
}

.ui-motion-duration-standard {
  --ui-motion-duration: var(--ui-duration);
}

.ui-motion-duration-slow {
  --ui-motion-duration: var(--ui-duration-slow);
}

.ui-animated-number {
  display: inline;
  font-variant-numeric: tabular-nums;
}

.ui-scroll-reveal {
  display: block;
}

.ui-scroll-reveal[data-ui-scroll-reveal-bound="true"] {
  opacity: 0;
  transition:
    opacity var(--ui-motion-duration, var(--ui-duration-slow)) var(--ui-ease-emphasized)
      var(--ui-reveal-delay, 0ms),
    transform var(--ui-motion-duration, var(--ui-duration-slow)) var(--ui-ease-emphasized)
      var(--ui-reveal-delay, 0ms);
}

.ui-scroll-reveal-fade[data-ui-scroll-reveal-bound="true"] {
  transform: none;
}

.ui-scroll-reveal-slide-up[data-ui-scroll-reveal-bound="true"] {
  transform: translateY(1.5rem);
}

.ui-scroll-reveal-scale[data-ui-scroll-reveal-bound="true"] {
  transform: scale(0.96);
}

.ui-scroll-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.ui-reveal-group[data-ui-scroll-reveal-bound="true"] > * {
  opacity: 0;
  transition:
    opacity var(--ui-motion-duration, var(--ui-duration-slow)) var(--ui-ease-emphasized)
      calc(
        var(--ui-reveal-delay, 0ms)
        + var(--ui-reveal-index, 0) * var(--ui-reveal-stagger, 80ms)
      ),
    transform var(--ui-motion-duration, var(--ui-duration-slow)) var(--ui-ease-emphasized)
      calc(
        var(--ui-reveal-delay, 0ms)
        + var(--ui-reveal-index, 0) * var(--ui-reveal-stagger, 80ms)
      );
}

.ui-reveal-group-fade[data-ui-scroll-reveal-bound="true"] > * {
  transform: none;
}

.ui-reveal-group-slide-up[data-ui-scroll-reveal-bound="true"] > * {
  transform: translateY(1.5rem);
}

.ui-reveal-group-scale[data-ui-scroll-reveal-bound="true"] > * {
  transform: scale(0.96);
}

.ui-reveal-group.is-revealed > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-animated-logo > svg,
  .ui-animated-logo[data-animation="sequence"] [data-ui-logo-pop],
  .ui-animated-logo[data-animation="sequence"] [data-ui-logo-draw],
  .ui-animated-logo[data-animation="sequence"] [data-ui-logo-reveal] {
    animation: none;
  }

  .ui-graphic--orbit::after {
    animation: none;
  }

  .ui-scroll-reveal[data-ui-scroll-reveal-bound="true"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ui-reveal-group[data-ui-scroll-reveal-bound="true"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.ui-alert,
.ui-toast {
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  font-size: 0.875rem;
  line-height: 1.55;
  box-shadow: var(--ui-shadow-sm);
}

.ui-toast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
}

.ui-alert {
  padding: 0.875rem 1rem;
}

.ui-alert > :first-child,
.ui-toast > :first-child {
  color: hsl(var(--ink));
}

.ui-alert > * + *,
.ui-toast > * + * {
  margin-block-start: 0.25rem;
}

.ui-toast__body {
  min-width: 0;
}

.ui-toast__body > * {
  margin: 0;
}

.ui-toast__body > * + * {
  margin-block-start: 0.25rem;
}

.ui-toast__action {
  align-self: center;
  margin: 0;
}

.ui-toast > .ui-toast__action,
.ui-toast > .ui-toast__dismiss {
  margin-block-start: 0;
}

.ui-toast__dismiss {
  align-self: start;
  border: 0;
  background: transparent;
  color: hsl(var(--ink-muted));
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.15rem;
}

.ui-toast__dismiss:hover {
  color: hsl(var(--ink));
}

.ui-alert--destructive,
.ui-toast--destructive {
  border-color: hsl(var(--danger) / 0.36);
  background: hsl(var(--danger) / 0.08);
  color: hsl(var(--danger));
}

.ui-alert--success,
.ui-toast--success {
  border-color: hsl(var(--success) / 0.36);
  background: hsl(var(--success) / 0.08);
  color: hsl(var(--success));
}

.ui-alert--warning,
.ui-toast--warning {
  border-color: hsl(var(--warning) / 0.42);
  background: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
}

.ui-badge {
  display: inline-flex;
  min-height: 1.5rem;
  max-width: 100%;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.ui-badge--default {
  background: hsl(var(--brand-solid));
  color: white;
}

.ui-badge--secondary {
  background: hsl(var(--surface-muted));
  border-color: hsl(var(--line));
  color: hsl(var(--ink-soft));
}

.ui-badge--outline {
  background: transparent;
  border-color: hsl(var(--line));
  color: hsl(var(--ink-soft));
}

.ui-badge--destructive {
  background: hsl(var(--danger) / 0.1);
  border-color: hsl(var(--danger) / 0.32);
  color: hsl(var(--danger));
}

.ui-badge--success {
  background: hsl(var(--success) / 0.1);
  border-color: hsl(var(--success) / 0.32);
  color: hsl(var(--success));
}

.ui-badge--warning {
  background: hsl(var(--warning) / 0.12);
  border-color: hsl(var(--warning) / 0.36);
  color: hsl(var(--ink));
}

.ui-input,
.ui-textarea,
.ui-select,
.ui-input-otp {
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: inset 0 1px 2px hsl(222 47% 11% / 0.04);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ui-input,
.ui-select,
.ui-input-otp {
  height: 2.75rem;
  padding: 0 0.75rem;
}

.ui-textarea {
  min-height: 7rem;
  padding: 0.65rem 0.75rem;
  resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: hsl(var(--ink-muted));
}

.ui-input:hover,
.ui-textarea:hover,
.ui-select:hover,
.ui-input-otp:hover {
  border-color: hsl(var(--brand) / 0.42);
}

.ui-input:disabled,
.ui-textarea:disabled,
.ui-select:disabled,
.ui-input-otp:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, hsl(var(--ink-muted)) 50%),
    linear-gradient(135deg, hsl(var(--ink-muted)) 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - 0.72rem) 50%;
  background-size:
    0.32rem 0.32rem,
    0.32rem 0.32rem;
  background-repeat: no-repeat;
}

.ui-label {
  color: hsl(var(--ink));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.ui-field,
.ui-combobox,
.ui-select-field {
  display: grid;
  gap: 0.45rem;
}

.ui-combobox,
.ui-date-picker-field,
.ui-select-field {
  position: relative;
  width: min(100%, 34rem);
}

.ui-combobox > .ui-input {
  width: 100%;
}

.ui-date-picker__control,
.ui-select__control {
  position: relative;
  width: 100%;
}

.ui-date-picker__control[hidden],
.ui-select__control[hidden] {
  display: none;
}

.ui-date-picker__native[data-ui-enhanced="true"],
.ui-select__native[data-ui-enhanced="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.ui-date-picker__trigger,
.ui-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: start;
}

.ui-date-picker__trigger {
  min-height: 2.75rem;
  gap: 0.75rem;
  padding-inline: 0.9rem 0.75rem;
}

.ui-date-picker-field[data-placeholder="true"] .ui-date-picker__trigger {
  color: hsl(var(--ink-muted));
}

.ui-date-picker__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: hsl(var(--ink-muted));
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ui-date-picker__trigger[aria-expanded="true"] {
  border-color: hsl(var(--brand) / 0.65);
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12);
}

.ui-select__trigger > [data-ui-select-value] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-field[data-placeholder="true"] .ui-select__trigger {
  color: hsl(var(--ink-muted));
}

.ui-combobox__list,
.ui-date-picker__popover,
.ui-select__list {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  width: 100%;
  max-height: min(16rem, 50vh);
  overflow-y: auto;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-md);
  padding: 0.35rem;
}

.ui-date-picker__popover {
  width: min(21rem, calc(100vw - 2rem));
  max-height: none;
  overflow: visible;
  border-radius: var(--ui-radius-lg);
  padding: 0;
  transform-origin: top left;
  animation: ui-date-picker-enter 140ms ease-out;
}

.ui-date-picker__popover > .ui-calendar {
  border: 0;
  box-shadow: none;
}

@keyframes ui-date-picker-enter {
  from {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ui-combobox__list[hidden],
.ui-date-picker__popover[hidden],
.ui-select__list[hidden] {
  display: none;
}

.ui-combobox__list [role="option"],
.ui-select__list [role="option"] {
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
  padding: 0.65rem 0.75rem;
  text-align: start;
}

.ui-select__list [role="option"][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-combobox__list [role="option"]:is(:hover, :focus-visible),
.ui-combobox__list [role="option"][aria-selected="true"],
.ui-select__list [role="option"]:is(:hover, :focus-visible),
.ui-select__list [role="option"][aria-selected="true"] {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
  outline: none;
}

.ui-field > p,
.ui-field > small {
  margin: 0;
  color: hsl(var(--ink-soft));
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-input-group {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  box-shadow: inset 0 1px 2px hsl(222 47% 11% / 0.04);
  font-size: 0.875rem;
}

.ui-input-group:focus-within {
  border-color: hsl(var(--brand));
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.18);
}

.ui-input-group > :where(span, strong):not(.ui-icon) {
  padding-inline: 0.75rem 0;
  white-space: nowrap;
}

.ui-input-group > .ui-icon {
  margin-inline-start: 0.75rem;
}

.ui-input-group > .ui-input {
  min-height: calc(2.75rem - 2px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ui-input-group > .ui-button {
  margin-inline-end: 0.25rem;
}

.ui-phone-input {
  padding: 0;
}
.ui-phone-input > .ui-phone-input__country {
  flex: 0 0 auto;
  width: auto;
  min-height: calc(2.75rem - 2px);
  border: 0;
  border-radius: 0;
  border-inline-end: 1px solid hsl(var(--line));
  box-shadow: none;
}
.ui-phone-input > .ui-phone-input__number {
  flex: 1 1 auto;
  min-height: calc(2.75rem - 2px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ui-phone-input[data-invalid="true"],
.ui-phone-input:has(.ui-phone-input__number[aria-invalid="true"]) {
  border-color: hsl(var(--danger));
}

.ui-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
  appearance: none;
  border: 1px solid hsl(var(--line));
  border-radius: 0.25rem;
  background: hsl(var(--surface));
  cursor: pointer;
  vertical-align: -0.125em;
}

.ui-checkbox:checked {
  border-color: hsl(var(--brand-solid));
  background-color: hsl(var(--brand-solid));
  /* Lucide check */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.78rem 0.78rem;
}

.ui-radio-group {
  display: grid;
  gap: 0.7rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  padding: 0.9rem;
}

.ui-radio-group legend {
  padding-inline: 0.2rem;
  color: hsl(var(--ink));
  font-weight: 650;
}

.ui-radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--ink-soft));
  font-size: 0.875rem;
}

.ui-radio-group input[type="radio"] {
  accent-color: hsl(var(--brand));
}

.ui-switch {
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  appearance: none;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  background: hsl(var(--surface-strong));
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
  vertical-align: -0.25em;
}

.ui-switch::before {
  position: absolute;
  top: 0.16rem;
  left: 0.16rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: hsl(var(--surface));
  box-shadow: 0 1px 3px hsl(222 47% 11% / 0.22);
  content: "";
  transition: transform 160ms ease;
}

.ui-switch:checked {
  border-color: hsl(var(--brand-solid));
  background: hsl(var(--brand-solid));
}

.ui-switch:checked::before {
  transform: translateX(1.1rem);
}

.ui-slider {
  width: 100%;
  accent-color: hsl(var(--brand));
  cursor: pointer;
}

.ui-progress {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: hsl(var(--surface-strong));
}

.ui-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: hsl(var(--brand-solid));
  transition: width 260ms ease;
}

.ui-copy-button[data-state="copied"] {
  border-color: hsl(var(--success));
  color: hsl(var(--success));
}

.ui-copy-button[data-state="error"] {
  border-color: hsl(var(--danger));
  color: hsl(var(--danger));
}

.ui-copy-button [data-slot^="copy-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
}

.ui-copy-button [hidden] {
  display: none;
}

.ui-skeleton {
  min-height: 1rem;
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(
    90deg,
    hsl(var(--surface-muted)),
    hsl(var(--surface-strong)),
    hsl(var(--surface-muted))
  );
  background-size: 200% 100%;
  animation: ui-shimmer 2.2s linear infinite;
}

.ui-icon {
  --ui-icon-size: 1em;
  display: inline-flex;
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 1;
  vertical-align: -0.125em;
}

.ui-icon--sm {
  --ui-icon-size: 0.875rem;
}

.ui-icon--lg {
  --ui-icon-size: 1.25rem;
}

.ui-icon--xl {
  --ui-icon-size: 1.5rem;
}

.ui-icon :where(svg),
.ui-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  color: inherit;
  pointer-events: none;
}

.ui-spinner {
  box-sizing: border-box;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid hsl(var(--line));
  border-top-color: currentColor;
  border-radius: 50%;
  color: hsl(var(--brand));
  animation: ui-spin 700ms linear infinite;
  vertical-align: -0.15em;
}

.ui-button .ui-spinner {
  border-color: currentColor;
  border-top-color: transparent;
  color: currentColor;
}

.ui-separator {
  display: block;
  flex-shrink: 0;
  border: 0;
  background: hsl(var(--line));
}

.ui-separator--horizontal {
  width: 100%;
  height: 1px;
}

.ui-separator--vertical {
  width: 1px;
  min-height: 1.5rem;
  height: 100%;
}

.ui-accordion {
  display: grid;
  gap: 0.75rem;
}

.ui-accordion details,
.ui-collapsible {
  overflow: clip;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  box-shadow: var(--ui-shadow-sm);
  transition:
    border-color var(--ui-duration-fast) var(--ui-ease),
    box-shadow var(--ui-duration-fast) var(--ui-ease);
}

.ui-accordion details[open],
.ui-collapsible[open] {
  border-color: hsl(var(--brand) / 0.38);
  box-shadow:
    0 0 0 1px hsl(var(--brand) / 0.08),
    var(--ui-shadow-sm);
}

.ui-accordion--flush {
  gap: 0;
  border-top: 1px solid hsl(var(--line));
}

.ui-accordion--flush details {
  overflow: visible;
  border: 0;
  border-bottom: 1px solid hsl(var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-accordion--flush details[open] {
  border-color: hsl(var(--line));
  background: transparent;
  box-shadow: none;
}

.ui-accordion summary,
.ui-collapsible summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  color: hsl(var(--ink));
  font-weight: 650;
  line-height: 1.35;
  min-height: 3.5rem;
  padding: 1rem 1.125rem;
  transition:
    background-color var(--ui-duration-fast) var(--ui-ease),
    color var(--ui-duration-fast) var(--ui-ease);
}

.ui-accordion summary:hover,
.ui-collapsible summary:hover {
  background: hsl(var(--surface-muted));
}

.ui-accordion details[open] > summary,
.ui-collapsible[open] > summary {
  color: hsl(var(--brand));
}

.ui-accordion details[open],
.ui-collapsible[open] {
  padding-block-end: 1rem;
}

.ui-accordion details > :not(summary),
.ui-collapsible > :not(summary) {
  margin-inline: 1.125rem;
}

.ui-accordion summary::-webkit-details-marker,
.ui-collapsible summary::-webkit-details-marker {
  display: none;
}

.ui-accordion summary::after,
.ui-collapsible summary::after {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid hsl(var(--ink-muted));
  border-bottom: 1.5px solid hsl(var(--ink-muted));
  content: "";
  border-radius: 1px;
  box-shadow: 0 0 0 0.45rem hsl(var(--surface-muted));
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition:
    border-color var(--ui-duration-fast) var(--ui-ease),
    box-shadow var(--ui-duration-fast) var(--ui-ease),
    transform var(--ui-duration-fast) var(--ui-ease);
}

.ui-accordion details[open] > summary::after,
.ui-collapsible[open] > summary::after {
  border-color: hsl(var(--brand));
  box-shadow: 0 0 0 0.45rem hsl(var(--brand-soft));
  transform: rotate(225deg) translate(-0.1rem, -0.1rem);
}

.ui-accordion summary:hover::after,
.ui-collapsible summary:hover::after {
  border-color: hsl(var(--brand));
  box-shadow: 0 0 0 0.45rem hsl(var(--brand-soft));
}

.ui-accordion summary:focus-visible,
.ui-collapsible summary:focus-visible {
  border-radius: calc(var(--ui-radius-lg) - 1px);
  outline: 2px solid hsl(var(--brand));
  outline-offset: -3px;
}

.ui-accordion--flush details[open] {
  padding-block-end: 1.25rem;
}

.ui-accordion--flush summary {
  min-height: 4rem;
  padding: 1.125rem 0.25rem;
}

.ui-accordion--flush summary:hover {
  border-radius: var(--ui-radius);
  background: hsl(var(--surface-muted) / 0.72);
  box-shadow: 0 0 0 0.625rem hsl(var(--surface-muted) / 0.72);
}

.ui-accordion--flush details[open] > summary {
  color: hsl(var(--ink));
}

.ui-accordion--flush details > :not(summary) {
  margin-inline: 0.25rem;
}

.ui-accordion--flush details[open] > summary::before {
  width: 0.2rem;
  height: 1.25rem;
  border-radius: 999px;
  background: hsl(var(--brand));
  content: "";
  position: absolute;
  inset-inline-start: -0.875rem;
}

.ui-accordion--flush summary {
  position: relative;
}

.ui-accordion p,
.ui-collapsible p {
  color: hsl(var(--ink-soft));
  margin-block-end: 0;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .ui-accordion details,
  .ui-collapsible,
  .ui-accordion summary,
  .ui-collapsible summary,
  .ui-accordion summary::after,
  .ui-collapsible summary::after {
    transition: none;
  }
}

.ui-dialog,
.ui-alert-dialog,
.ui-drawer,
.ui-sheet {
  width: min(100% - 2rem, 34rem);
  max-width: 34rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: var(--ui-shadow-lg);
  padding: 1.25rem;
}

.ui-dialog,
.ui-alert-dialog {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  max-height: calc(100dvh - 2rem);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
}

.ui-dialog--fullscreen {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  transform: none;
}

.ui-dialog::backdrop,
.ui-alert-dialog::backdrop,
.ui-drawer::backdrop,
.ui-sheet::backdrop {
  background: hsl(222 47% 11% / 0.56);
  backdrop-filter: blur(4px);
}

.ui-dialog > * + *,
.ui-alert-dialog > * + *,
.ui-drawer > * + *,
.ui-sheet > * + * {
  margin-block-start: 0.9rem;
}

.ui-dialog footer,
.ui-alert-dialog footer,
.ui-drawer footer,
.ui-sheet footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ui-alert-dialog {
  max-width: 28rem;
}

.ui-drawer {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 42rem);
  max-width: none;
  margin: auto auto 0;
  border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
}

.ui-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 28rem);
  height: 100%;
  max-height: none;
  margin: 0 0 0 auto;
  border-radius: 0;
  border-block: 0;
  border-inline-end: 0;
}

.ui-popover,
.ui-hover-card,
.ui-menu[data-ui-dropdown-menu] {
  position: relative;
  display: inline-grid;
  gap: 0.5rem;
  align-items: start;
}

.ui-popover > :where(div, section, article, form, [role="dialog"]),
.ui-hover-card > :where(div, section, article, [role="tooltip"]),
.ui-menu[data-ui-dropdown-menu] > [role="menu"] {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: min(18rem, calc(100vw - 2rem));
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  box-shadow: var(--ui-shadow-md);
  padding: 0.75rem;
}

.ui-hover-card > :where(div, section, article, [role="tooltip"]) {
  min-width: 14rem;
}

.ui-tooltip {
  display: inline-grid;
  position: relative;
  gap: 0.35rem;
  width: fit-content;
}

.ui-tooltip [role="tooltip"] {
  position: absolute;
  z-index: 50;
  bottom: calc(100% + 0.45rem);
  left: 50%;
  width: max-content;
  max-width: 16rem;
  transform: translateX(-50%);
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--ink));
  color: hsl(var(--canvas));
  box-shadow: var(--ui-shadow-md);
  padding: 0.35rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--ui-duration-fast) var(--ui-ease),
    visibility var(--ui-duration-fast) var(--ui-ease);
  visibility: hidden;
}

.ui-tooltip:is(:hover, :focus-within) [role="tooltip"] {
  opacity: 1;
  visibility: visible;
}

.ui-menu {
  margin: 0;
  list-style: none;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-md);
  padding: 0.35rem;
  color: hsl(var(--ink));
  font-size: 0.875rem;
}

.ui-menu[data-ui-dropdown-menu] {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ui-menu :where(a, button, [role="menuitem"]) {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
  padding: 0.55rem 0.65rem;
  text-align: start;
  text-decoration: none;
}

.ui-menu :where(a, button, [role="menuitem"]):hover {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand));
}

.ui-menu :where(a, button, [role="menuitem"]):is(:disabled, [aria-disabled="true"]) {
  color: hsl(var(--ink-muted));
  cursor: not-allowed;
  opacity: 0.62;
  pointer-events: none;
}

.ui-menu__item-label {
  min-width: 0;
  flex: 1;
}

.ui-menu__item-status {
  color: hsl(var(--ink-muted));
  font-size: 0.75rem;
  font-weight: 600;
}

.ui-menu__separator,
.ui-menu [role="separator"] {
  height: 1px;
  margin: 0.35rem 0.25rem;
  border: 0;
  background: hsl(var(--line));
}

.ui-context-navigation {
  --ui-context-navigation-gap: 1rem;
  --ui-context-navigation-min-height: 3.25rem;
  --ui-context-navigation-padding: 0.5rem 1rem;

  display: flex;
  min-width: 0;
  min-height: var(--ui-context-navigation-min-height);
  align-items: center;
  gap: var(--ui-context-navigation-gap);
  border-block: 1px solid hsl(var(--line));
  background: hsl(var(--surface));
  padding: var(--ui-context-navigation-padding);
}

.ui-context-navigation__context,
.ui-context-navigation > [slot="context"] {
  display: flex;
  min-width: max-content;
  flex: 0 0 auto;
  align-items: center;
  padding-inline-end: var(--ui-context-navigation-gap);
  border-inline-end: 1px solid hsl(var(--line));
}

.ui-context-navigation > :where(.ui-navigation-menu, lumen-navigation-menu) {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.ui-context-navigation > :where(.ui-navigation-menu, lumen-navigation-menu)::-webkit-scrollbar {
  display: none;
}

.ui-context-navigation--unstyled {
  border: 0;
  background: transparent;
  padding: 0;
}

.ui-menubar,
.ui-navigation-menu,
.ui-button-group,
.ui-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  padding: 0.25rem;
}

.ui-navigation-menu {
  --ui-navigation-menu-gap: 0.25rem;
  --ui-navigation-menu-item-padding: 0.5rem 0.7rem;

  gap: var(--ui-navigation-menu-gap);
}

.ui-menubar :where(a, button),
.ui-navigation-menu :where(a, button) {
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--ui-navigation-menu-item-padding);
  text-decoration: none;
}

.ui-menubar :where(a, button):hover,
.ui-navigation-menu :where(a, button):hover,
.ui-menubar :where(a, button)[aria-current="page"],
.ui-navigation-menu :where(a, button)[aria-current="page"] {
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink));
}

.ui-navigation-menu--unstyled {
  all: revert-layer;
}

.ui-navigation-menu--unstyled :where(a, button) {
  all: revert-layer;
}

.ui-navigation-menu--unstyled :where(a, button):hover,
.ui-navigation-menu--unstyled :where(a, button)[aria-current="page"] {
  all: revert-layer;
}

.ui-breadcrumb {
  color: hsl(var(--ink-muted));
  font-size: 0.875rem;
  line-height: 1.5;
}

.ui-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-breadcrumb li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.ui-breadcrumb li + li::before {
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: 0.7rem 0.75rem;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  content: "";
  opacity: 0.7;
  transform: rotate(45deg);
}

.ui-breadcrumb a {
  border-radius: var(--ui-radius-sm);
  color: hsl(var(--ink-soft));
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}

.ui-breadcrumb a:hover {
  color: hsl(var(--brand));
  text-decoration: underline;
  text-decoration-color: hsl(var(--brand) / 0.45);
}

.ui-breadcrumb a:focus-visible {
  outline: 2px solid hsl(var(--brand) / 0.72);
  outline-offset: 0.2rem;
}

.ui-breadcrumb [aria-current="page"] {
  color: hsl(var(--ink));
  font-weight: 650;
}

.ui-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.ui-pagination :where(a, button) {
  display: inline-flex;
  min-width: 2.25rem;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.ui-pagination :where(a, button):hover,
.ui-pagination [aria-current="page"] {
  border-color: hsl(var(--brand) / 0.42);
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand));
}

.ui-toggle {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.ui-toggle:hover,
.ui-toggle--pressed,
.ui-toggle[aria-pressed="true"] {
  border-color: hsl(var(--brand) / 0.28);
  background: hsl(var(--brand-soft));
  color: hsl(var(--ink));
}

.ui-tabs {
  display: grid;
  gap: 1rem;
}

.ui-tabs [role="tablist"] {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface-muted));
  padding: 0.25rem;
  scrollbar-width: thin;
}

.ui-tabs [role="tablist"][aria-orientation="vertical"] {
  overflow-x: visible;
}

.ui-tabs [role="tab"] {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  padding: 0.45rem 0.75rem;
}

.ui-tabs [role="tab"][aria-selected="true"] {
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: var(--ui-shadow-sm);
}

.ui-tabs [role="tabpanel"] {
  color: hsl(var(--ink-soft));
}

.ui-code-tabs {
  --ui-code-tabs-list-padding: 0.375rem;
  --ui-code-tabs-tab-padding: 0.5rem 0.875rem;

  display: block;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface-muted));
}

.ui-code-tabs .ui-code-tabs__list {
  display: flex;
  width: auto;
  gap: 0.25rem;
  border: 0;
  border-bottom: 1px solid hsl(var(--line));
  border-radius: 0;
  background: hsl(var(--surface));
  padding: var(--ui-code-tabs-list-padding);
}

.ui-code-tabs .ui-code-tabs__tab {
  min-width: 4.25rem;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-muted));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: var(--ui-code-tabs-tab-padding);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.ui-code-tabs .ui-code-tabs__tab:hover {
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink));
}

.ui-code-tabs .ui-code-tabs__tab[aria-selected="true"] {
  background: hsl(var(--brand-soft));
  box-shadow: none;
  color: hsl(var(--brand));
}

.ui-code-tabs .ui-code-tabs__tab:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 1px;
}

.ui-code-tabs .ui-code-tabs__panel {
  color: hsl(var(--ink));
}

.ui-code-tabs .ui-code--block {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-code-tabs .ui-code__header {
  position: absolute;
  z-index: 1;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  display: block;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.ui-code-tabs .ui-code__dots,
.ui-code-tabs .ui-code__meta {
  display: none;
}

.ui-code-tabs .ui-code--block :where(pre) {
  min-height: 3.5rem;
  padding: 1rem 3.75rem 1rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .ui-code-tabs .ui-code-tabs__tab {
    transition: none;
  }
}

.ui-table-wrap,
.ui-data-table {
  --ui-table-cell-padding: 0.75rem 1rem;

  width: 100%;
  overflow-x: auto;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
}

.ui-table-wrap table,
.ui-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Mobile record labels are aria-hidden; retain explicit table roles. */
.ui-table__label {
  display: none;
}

@media (max-width: 48rem) {
  .ui-table-wrap--records table,
  .ui-table-wrap--records tbody {
    display: block;
    min-width: 0;
  }

  .ui-table-wrap--records thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ui-table-wrap--records tbody tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1rem;
    padding: 1rem;
  }

  .ui-table-wrap--records tbody tr + tr {
    border-top: 1px solid hsl(var(--line));
  }

  .ui-table-wrap--records tbody td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: start;
  }

  .ui-table-wrap--records .ui-table__label {
    display: block;
    margin-bottom: 0.25rem;
    color: hsl(var(--ink-soft));
    font-size: 0.75rem;
    font-weight: 600;
  }

  .ui-table-wrap--records .ui-table__cell--wide {
    grid-column: 1 / -1;
  }
}

.ui-table-wrap th,
.ui-data-table th {
  border-bottom: 1px solid hsl(var(--line));
  color: hsl(var(--ink));
  font-weight: 650;
  padding: var(--ui-table-cell-padding);
  text-align: start;
}

.ui-data-table th[aria-sort] {
  padding: 0;
}

.ui-data-table__sort {
  display: inline-flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  padding: var(--ui-table-cell-padding);
  text-align: inherit;
}

.ui-data-table__sort:hover {
  background: hsl(var(--surface-muted));
}

.ui-data-table__sort:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: -2px;
}

.ui-data-table__sort::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  background-color: hsl(var(--ink-muted));
  /* Lucide chevrons-up-down */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ui-data-table th[aria-sort="ascending"] .ui-data-table__sort::after {
  background-color: hsl(var(--brand-solid));
  /* Lucide chevron-up */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.ui-data-table th[aria-sort="descending"] .ui-data-table__sort::after {
  background-color: hsl(var(--brand-solid));
  /* Lucide chevron-down */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.ui-table-wrap td,
.ui-data-table td {
  border-bottom: 1px solid hsl(var(--line) / 0.72);
  color: hsl(var(--ink-soft));
  padding: var(--ui-table-cell-padding);
}

.ui-data-table__selection {
  width: 2.75rem;
  min-width: 2.75rem;
  padding-inline: 0.875rem;
  text-align: center;
}

.ui-data-table th.ui-data-table__selection {
  padding-block: 0.75rem;
}

.ui-data-table__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--brand-solid));
}

.ui-data-table tbody tr[data-state="selected"] {
  background: hsl(var(--brand-soft));
}

.ui-data-table tbody tr[data-state="selected"] td {
  color: hsl(var(--ink));
}

.ui-table-wrap tr:last-child td,
.ui-data-table tr:last-child td {
  border-bottom: 0;
}

.ui-scroll-area {
  max-height: min(18rem, 60vh);
  overflow: auto;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  padding: 1rem;
}

.ui-resizable {
  display: flex;
  min-height: 12rem;
  min-width: 14rem;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
}

.ui-resizable--vertical {
  min-height: 16rem;
  flex-direction: column;
}

.ui-resizable > :where(:not(.ui-resizable__handle)) {
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  overflow: auto;
  padding: 1rem;
}

.ui-resizable[data-ui-resizable-enhanced="true"] > [data-ui-resizable-panel] {
  flex: 0 0 var(--ui-resizable-size, auto);
}

.ui-resizable__handle {
  position: relative;
  flex: 0 0 0.75rem;
  align-self: stretch;
  border: 0;
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink-muted));
  cursor: col-resize;
  padding: 0;
  touch-action: none;
}

.ui-resizable__handle::before {
  position: absolute;
  inset: 0.75rem calc(50% - 1px);
  border-radius: 999px;
  background: hsl(var(--line));
  content: "";
}

.ui-resizable__handle:is(:hover, [data-active="true"])::before {
  background: hsl(var(--brand));
}

.ui-resizable--vertical > .ui-resizable__handle {
  flex-basis: 0.75rem;
  cursor: row-resize;
}

.ui-resizable--vertical > .ui-resizable__handle::before {
  inset: calc(50% - 1px) 0.75rem;
}

.ui-sidebar {
  --ui-sidebar-gap: 0.35rem;
  --ui-sidebar-padding: 0.75rem;
  --ui-sidebar-width: 18rem;

  display: flex;
  min-height: 100%;
  width: min(var(--ui-sidebar-width), 100%);
  flex-direction: column;
  gap: var(--ui-sidebar-gap);
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-sm);
  padding: var(--ui-sidebar-padding);
}

.ui-sidebar a {
  border-radius: var(--ui-radius-sm);
  color: hsl(var(--ink-soft));
  padding: 0.55rem 0.7rem;
  text-decoration: none;
}

.ui-sidebar a:hover,
.ui-sidebar a[aria-current="page"] {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}

.ui-sidebar--unstyled {
  all: revert-layer;
}

.ui-sidebar--unstyled a,
.ui-sidebar--unstyled a:hover,
.ui-sidebar--unstyled a[aria-current="page"] {
  all: revert-layer;
}

.ui-empty {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  border: 1px dashed hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface-muted) / 0.55);
  color: hsl(var(--ink-soft));
  padding: 2rem;
  text-align: center;
}

.ui-empty--compact {
  gap: 0.35rem;
  border-radius: var(--ui-radius);
  padding: 0.75rem;
  font-size: 0.8125rem;
}

.ui-empty > * {
  margin: 0;
}

.ui-error-state {
  --ui-error-state-tone: var(--danger);
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 1.25rem;
  border: 1px solid hsl(var(--ui-error-state-tone) / 0.28);
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--ui-error-state-tone) / 0.055);
  color: hsl(var(--ink-soft));
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.ui-error-state--offline {
  --ui-error-state-tone: var(--ink-muted);
}

.ui-error-state--compact {
  gap: 0.75rem;
  border-radius: var(--ui-radius);
  padding: 1.25rem;
}

.ui-error-state--page {
  min-block-size: min(70vh, 40rem);
  border-color: transparent;
  background: transparent;
}

.ui-error-state__graphic,
.ui-error-state > [data-slot="error-state-graphic"] {
  display: grid;
  color: hsl(var(--ui-error-state-tone));
  place-items: center;
}

.ui-error-state__content,
.ui-error-state > [data-slot="error-state-content"] {
  display: grid;
  max-width: 42rem;
  gap: 0.5rem;
  justify-items: center;
}

.ui-error-state__title,
.ui-error-state [data-slot="error-state-title"] {
  margin: 0;
  color: hsl(var(--ink));
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.25;
}

.ui-error-state__description,
.ui-error-state__details,
.ui-error-state__reference,
.ui-error-state [data-slot="error-state-description"],
.ui-error-state [data-slot="error-state-details"],
.ui-error-state [data-slot="error-state-reference"] {
  margin: 0;
}

.ui-error-state__description,
.ui-error-state [data-slot="error-state-description"] {
  max-width: 60ch;
}

.ui-error-state__details,
.ui-error-state [data-slot="error-state-details"] {
  color: hsl(var(--ink-muted));
  font-size: 0.875rem;
}

.ui-error-state__reference,
.ui-error-state [data-slot="error-state-reference"] {
  color: hsl(var(--ink-muted));
  font-size: 0.75rem;
}

.ui-error-state__reference code,
.ui-error-state [data-slot="error-state-reference"] code {
  color: hsl(var(--ink-soft));
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.ui-error-state__actions,
.ui-error-state > [data-slot="error-state-actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.ui-error-state--compact .ui-illustration {
  --ui-illustration-size: 5rem;
}

.ui-kanban {
  --ui-kanban-column-width: clamp(18rem, 28vw, 22rem);
  --ui-kanban-column-min-height: 28rem;
  --ui-kanban-gap: 0.875rem;
  display: grid;
  min-width: 0;
  grid-auto-columns: var(--ui-kanban-column-width);
  grid-auto-flow: column;
  gap: var(--ui-kanban-gap);
  padding: 0.25rem 0.25rem 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-gutter: stable;
}

.ui-kanban:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 2px;
}

.ui-kanban__column {
  min-width: 0;
  min-height: var(--ui-kanban-column-min-height);
  padding: 0.875rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface-muted));
  scroll-snap-align: start;
  transition:
    border-color var(--ui-duration) var(--ui-ease),
    background var(--ui-duration) var(--ui-ease);
}

.ui-kanban__column[data-state="drop-target"] {
  border-color: hsl(var(--brand));
  background: hsl(var(--brand-soft));
}

[data-ui-kanban-item][data-state="dragging"] {
  opacity: 0.6;
}

[data-ui-kanban-item][aria-busy="true"] {
  cursor: progress;
}

[data-ui-kanban-handle] {
  touch-action: none;
  cursor: grab;
}

[data-ui-kanban-handle]:active {
  cursor: grabbing;
}

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

.ui-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--ui-radius);
  color: hsl(var(--ink-soft));
  padding: 0.65rem 0.75rem;
}

.ui-item > :first-child {
  color: hsl(var(--ink));
}

.ui-code {
  --ui-code-bg: hsl(var(--surface-muted));
  --ui-code-border: hsl(var(--line));
  --ui-code-copy-bg: hsl(var(--surface) / 0.6);
  --ui-code-fg: hsl(var(--ink));
  --ui-code-header-bg: hsl(var(--surface) / 0.72);
  --ui-code-inline-bg: hsl(var(--brand-soft));
  --ui-code-inline-fg: hsl(var(--brand-solid));
  --ui-code-muted: hsl(var(--ink-muted));
  --ui-code-token-accent: hsl(var(--accent));
  --ui-code-token-comment: hsl(var(--ink-muted));
  --ui-code-token-keyword: hsl(var(--brand));
  --ui-code-token-string: hsl(var(--success));
  --ui-code-token-symbol: hsl(var(--warning));
  --ui-code-token-type: hsl(var(--brand-solid));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root[data-theme="santi020k-light"] .ui-code[data-code-theme="auto"],
.ui-code[data-code-theme="santi020k"] {
  --ui-code-bg: hsl(268 30% 97%);
  --ui-code-border: hsl(264 30% 86%);
  --ui-code-copy-bg: hsl(268 36% 100% / 0.7);
  --ui-code-fg: hsl(268 15% 18%);
  --ui-code-header-bg: hsl(268 28% 95% / 0.78);
  --ui-code-inline-bg: hsl(264 66% 94%);
  --ui-code-inline-fg: hsl(264 92% 38%);
  --ui-code-muted: hsl(268 8% 42%);
  --ui-code-token-accent: hsl(264 95% 45%);
  --ui-code-token-comment: hsl(268 8% 46%);
  --ui-code-token-keyword: hsl(264 92% 42%);
  --ui-code-token-string: hsl(134 61% 34%);
  --ui-code-token-symbol: hsl(35 85% 36%);
  --ui-code-token-type: hsl(264 76% 36%);
}

:root[data-theme="dark"] .ui-code[data-code-theme="santi020k"],
:root[data-theme="lumen-dark"] .ui-code[data-code-theme="santi020k"],
:root[data-theme="santi020k-dark"] .ui-code[data-code-theme="auto"],
:root[data-theme="santi020k-dark"] .ui-code[data-code-theme="santi020k"] {
  --ui-code-bg: hsl(260 43% 8%);
  --ui-code-border: hsl(260 15% 28%);
  --ui-code-copy-bg: hsl(260 26% 14% / 0.72);
  --ui-code-fg: hsl(260 10% 88%);
  --ui-code-header-bg: hsl(260 30% 12% / 0.82);
  --ui-code-inline-bg: hsl(264 45% 18%);
  --ui-code-inline-fg: hsl(264 90% 76%);
  --ui-code-muted: hsl(260 7% 62%);
  --ui-code-token-accent: hsl(264 90% 72%);
  --ui-code-token-comment: hsl(260 8% 58%);
  --ui-code-token-keyword: hsl(264 90% 68%);
  --ui-code-token-string: hsl(169 34% 64%);
  --ui-code-token-symbol: hsl(40 88% 68%);
  --ui-code-token-type: hsl(264 95% 78%);
}

:root[data-theme="dark"] .ui-code[data-code-theme="auto"],
:root[data-theme="lumen-dark"] .ui-code[data-code-theme="auto"] {
  --ui-code-bg: hsl(224 24% 8%);
  --ui-code-border: hsl(222 14% 26%);
  --ui-code-copy-bg: hsl(224 18% 12% / 0.72);
  --ui-code-fg: hsl(210 20% 96%);
  --ui-code-header-bg: hsl(224 18% 11% / 0.82);
  --ui-code-inline-bg: hsl(199 84% 16%);
  --ui-code-inline-fg: hsl(199 91% 74%);
  --ui-code-muted: hsl(216 10% 62%);
  --ui-code-token-accent: hsl(166 76% 58%);
  --ui-code-token-comment: hsl(216 10% 58%);
  --ui-code-token-keyword: hsl(199 91% 64%);
  --ui-code-token-string: hsl(142 69% 64%);
  --ui-code-token-symbol: hsl(38 92% 68%);
  --ui-code-token-type: hsl(199 91% 72%);
}

.ui-code[data-code-theme="lumen"] {
  --ui-code-bg: hsl(var(--surface-muted));
  --ui-code-border: hsl(var(--line));
  --ui-code-copy-bg: hsl(var(--surface) / 0.6);
  --ui-code-fg: hsl(var(--ink));
  --ui-code-header-bg: hsl(var(--surface) / 0.72);
  --ui-code-inline-bg: hsl(var(--brand-soft));
  --ui-code-inline-fg: hsl(var(--brand-solid));
  --ui-code-muted: hsl(var(--ink-muted));
  --ui-code-token-accent: hsl(var(--accent));
  --ui-code-token-comment: hsl(var(--ink-muted));
  --ui-code-token-keyword: hsl(var(--brand));
  --ui-code-token-string: hsl(var(--success));
  --ui-code-token-symbol: hsl(var(--warning));
  --ui-code-token-type: hsl(var(--brand-solid));
}

.ui-code--inline {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ui-code-border);
  border-radius: 0.35rem;
  background: var(--ui-code-inline-bg);
  color: var(--ui-code-inline-fg);
  font-size: 0.86em;
  font-weight: 650;
  line-height: 1.25;
  padding: 0.08em 0.34em;
  vertical-align: baseline;
}

.ui-code--block {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--ui-code-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-code-bg);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-code-fg);
}

.ui-code__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 2.35rem;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ui-code-border);
  background: var(--ui-code-header-bg);
  padding: 0.55rem 0.85rem;
}

.ui-code__dots {
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.ui-code__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  opacity: 0.72;
}

.ui-code__dot--red {
  background: #ff5f56;
}

.ui-code__dot--yellow {
  background: #ffbd2e;
}

.ui-code__dot--green {
  background: #27c93f;
}

.ui-code__meta {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
  color: var(--ui-code-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.ui-code__language {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--ui-code-token-keyword), transparent 70%);
  border-radius: 0.3rem;
  background: color-mix(in srgb, var(--ui-code-token-keyword), transparent 90%);
  color: var(--ui-code-token-keyword);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0.1rem 0.45rem;
  text-transform: uppercase;
}

.ui-code__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-code__copy {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ui-code-border), transparent 20%);
  border-radius: 0.4rem;
  background: var(--ui-code-copy-bg);
  color: var(--ui-code-muted);
  cursor: pointer;
  padding: 0.35rem;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.ui-code__copy:hover {
  border-color: color-mix(in srgb, var(--ui-code-token-keyword), transparent 48%);
  color: var(--ui-code-token-keyword);
  transform: scale(1.04);
}

.ui-code__copy:active {
  transform: scale(0.96);
}

.ui-code__copy svg {
  width: 1rem;
  height: 1rem;
}

.ui-code__check-icon,
.ui-code__copy--copied .ui-code__copy-icon {
  display: none;
}

.ui-code__copy--copied {
  border-color: color-mix(in srgb, var(--success), transparent 40%);
  background: hsl(var(--success) / 0.12);
  color: hsl(var(--success));
}

.ui-code__copy--copied .ui-code__check-icon {
  display: block;
}

.ui-code--block :where(pre) {
  margin: 0;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: var(--ui-code-bg);
  padding: 1rem 1.25rem;
}

.ui-code--block :where(pre:focus-visible) {
  outline: 2px solid hsl(var(--brand));
  outline-offset: -2px;
}

.ui-code--block :where(code) {
  display: block;
  min-width: 100%;
  background: transparent;
  color: var(--shiki-light, var(--ui-code-fg));
  font-family: inherit;
  font-size: 0.875rem;
  font-variant-ligatures: none;
  line-height: 1.65;
  white-space: pre;
}

.ui-code--wrap :where(pre) {
  overflow-x: hidden;
}

.ui-code--wrap :where(code) {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ui-code--block :where(code span) {
  color: var(--shiki-light, var(--ui-code-token, var(--ui-code-fg)));
  font-style: var(--shiki-light-font-style, var(--ui-code-token-font-style, normal));
  font-weight: var(--shiki-light-font-weight, inherit);
  text-decoration: var(--shiki-light-text-decoration, none);
}

:root[data-theme="dark"] .ui-code--block :where(code),
:root[data-theme="dark"] .ui-code--block :where(code span),
:root[data-theme="lumen-dark"] .ui-code--block :where(code),
:root[data-theme="lumen-dark"] .ui-code--block :where(code span),
:root[data-theme="santi020k-dark"] .ui-code--block :where(code),
:root[data-theme="santi020k-dark"] .ui-code--block :where(code span) {
  color: var(--shiki-dark, var(--shiki-light, var(--ui-code-token, var(--ui-code-fg))));
  font-style: var(--shiki-dark-font-style, var(--shiki-light-font-style, var(--ui-code-token-font-style, normal)));
  font-weight: var(--shiki-dark-font-weight, var(--shiki-light-font-weight, inherit));
  text-decoration: var(--shiki-dark-text-decoration, var(--shiki-light-text-decoration, none));
}

.ui-code__token--accent {
  --ui-code-token: var(--ui-code-token-accent);
}

.ui-code__token--comment {
  --ui-code-token: var(--ui-code-token-comment);
  --ui-code-token-font-style: italic;
}

.ui-code__token--keyword {
  --ui-code-token: var(--ui-code-token-keyword);
}

.ui-code__token--string {
  --ui-code-token: var(--ui-code-token-string);
}

.ui-code__token--symbol {
  --ui-code-token: var(--ui-code-token-symbol);
}

.ui-code__token--type {
  --ui-code-token: var(--ui-code-token-type);
}

.ui-kbd {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  border: 1px solid hsl(var(--line));
  border-radius: 0.35rem;
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
}

.ui-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: hsl(var(--ink-soft));
  font-size: 0.875rem;
  font-weight: 600;
}

.ui-marker::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: hsl(var(--brand));
  content: "";
}

.ui-marker--success::before {
  background: hsl(var(--success));
}

.ui-marker--warning::before {
  background: hsl(var(--warning));
}

.ui-marker--danger::before {
  background: hsl(var(--danger));
}

.ui-avatar {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink));
  font-size: 0.875rem;
  font-weight: 700;
  vertical-align: middle;
}

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

.ui-aspect-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ui-radius);
}

.ui-aspect-ratio > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-attachment {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  padding: 0.75rem;
  text-decoration: none;
}

.ui-attachment:hover {
  border-color: hsl(var(--brand) / 0.42);
}

.ui-bubble {
  max-width: min(42rem, 100%);
  border: 1px solid hsl(var(--line));
  border-radius: 1rem;
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  padding: 0.75rem 0.95rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.ui-bubble--user {
  margin-inline-start: auto;
  border-color: hsl(var(--brand) / 0.28);
  background: hsl(var(--brand-soft));
  color: hsl(var(--ink));
}

.ui-message {
  display: flex;
  width: fit-content;
  max-width: min(44rem, 100%);
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid hsl(var(--line) / 0.34);
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface-muted) / 0.62);
  color: hsl(var(--ink-soft));
  padding: 0.75rem;
  font-size: 0.875rem;
}

.ui-message--user {
  flex-direction: row-reverse;
  margin-inline-start: auto;
  border-color: hsl(var(--brand) / 0.16);
  background: hsl(var(--brand) / 0.07);
}

.ui-message--assistant {
  margin-inline-end: auto;
}

.ui-message > .ui-avatar {
  flex: 0 0 auto;
}

.ui-message > .ui-bubble {
  min-width: 0;
  margin-inline-start: 0;
}

.ui-message--user > .ui-bubble {
  border-color: hsl(var(--brand) / 0.34);
  background: hsl(var(--surface) / 0.88);
  color: hsl(var(--ink));
}

.ui-message-scroller {
  display: flex;
  max-height: min(42rem, 70vh);
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  padding: 0.75rem;
}

.ui-command {
  display: grid;
  gap: 0.5rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-md);
  padding: 0.75rem;
}

.ui-command :where(button, [data-ui-command-item], [role="option"]) {
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
  padding: 0.65rem 0.75rem;
  text-align: start;
}

.ui-command :where(button, [data-ui-command-item], [role="option"]):hover {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}

.ui-calendar {
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  box-shadow: var(--ui-shadow-sm);
  color: hsl(var(--ink-soft));
  padding: 1rem;
  user-select: none;
}

.ui-calendar__header {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
}

.ui-calendar__label {
  color: hsl(var(--ink));
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.ui-calendar__nav {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font: inherit;
}

.ui-calendar__nav:hover:not(:disabled) {
  border-color: hsl(var(--brand) / 0.42);
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}

.ui-calendar__nav:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 2px;
}

.ui-calendar__nav:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-calendar table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: 0.75rem;
  text-align: center;
}

.ui-calendar th {
  color: hsl(var(--ink-muted));
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem;
}

.ui-calendar td {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--ui-radius-sm);
  color: hsl(var(--ink-soft));
  cursor: pointer;
  padding: 0;
}

.ui-calendar td:hover:not([aria-disabled="true"]) {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}

.ui-calendar td:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 2px;
}

.ui-calendar td[data-outside="true"] {
  color: hsl(var(--ink-muted));
}

.ui-calendar td[data-today="true"] {
  box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.58);
  color: hsl(var(--ink));
  font-weight: 700;
}

.ui-calendar td[aria-selected="true"] {
  background: hsl(var(--brand-solid));
  box-shadow: 0 0 0 1px hsl(var(--brand-solid));
  color: white;
  font-weight: 700;
}

.ui-calendar td[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}

.ui-date-picker {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .ui-date-picker__popover {
    animation: none;
  }
}

.ui-direction {
  display: contents;
}

.ui-input-otp-field {
  position: relative;
  display: inline-grid;
  width: min(100%, max-content);
}

.ui-input-otp {
  max-width: 16rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-align: center;
}

.ui-input-otp__native[data-ui-enhanced="true"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.ui-input-otp__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ui-input-otp__segments[hidden] {
  display: none;
}

.ui-input-otp__segment {
  display: inline-grid;
  width: 2.5rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: inset 0 1px 2px hsl(222 47% 11% / 0.04);
  cursor: text;
  font: 600 1rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding: 0;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ui-input-otp-field:focus-within .ui-input-otp__segment[data-active="true"] {
  border-color: hsl(var(--brand));
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.18);
}

.ui-input-otp-field[data-disabled="true"] .ui-input-otp__segment {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-input-otp-field[data-invalid="true"] .ui-input-otp__segment {
  border-color: hsl(var(--danger) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--danger) / 0.14);
}

.ui-carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  padding: 0.75rem;
}

.ui-carousel [data-ui-carousel-viewport] {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.ui-carousel [data-ui-carousel-viewport] > * {
  min-width: min(18rem, 82%);
  scroll-snap-align: start;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface-muted));
  padding: 1rem;
}

.ui-carousel footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.ui-chart {
  position: relative;
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3.2rem,
      hsl(var(--line) / 0.55) 3.25rem
    ),
    linear-gradient(180deg, hsl(var(--surface)), hsl(var(--surface-muted) / 0.72));
  color: hsl(var(--ink));
  box-shadow: var(--ui-shadow-sm);
  padding: 1rem;
}

.ui-chart--bare {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ui-chart > header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.ui-chart__heading {
  display: grid;
  gap: 0.25rem;
}

.ui-chart h2,
.ui-chart h3,
.ui-chart p {
  margin: 0;
}

.ui-chart [data-ui-chart-value] {
  color: hsl(var(--ink));
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
}

.ui-chart svg {
  display: block;
  width: 100%;
  min-height: 12rem;
  color: hsl(var(--brand));
}

.ui-chart__plot {
  min-width: 0;
  overflow-x: auto;
}

.ui-chart__empty {
  min-height: 10rem;
  display: grid;
  margin: 0;
  color: hsl(var(--ink-muted));
  place-items: center;
  text-align: center;
}

.ui-chart__plot > svg {
  min-width: 32rem;
}

.ui-chart svg :where(path, polyline, line) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-chart figcaption {
  color: hsl(var(--ink-muted));
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  color: hsl(var(--ink-soft));
  font-size: 0.75rem;
  list-style: none;
}

.ui-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ui-chart__legend li > span {
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--ui-chart-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-chart-color) 30%, transparent);
}

.ui-chart__grid line {
  stroke: hsl(var(--chart-grid) / 0.72);
  stroke-width: 1;
}

.ui-chart__grid text,
.ui-chart__axis-labels text {
  fill: hsl(var(--chart-axis));
  font-size: 0.6875rem;
}

.ui-chart__grid text {
  dominant-baseline: middle;
  text-anchor: end;
}

.ui-chart__reference {
  stroke: hsl(var(--ink-muted));
  stroke-dasharray: 5 5;
  stroke-width: 1.5;
}

.ui-chart__data {
  border-top: 1px solid hsl(var(--line));
  color: hsl(var(--ink-soft));
  font-size: 0.8125rem;
  padding-block-start: 0.75rem;
}

.ui-chart__data summary {
  width: fit-content;
  border-radius: var(--ui-radius-sm);
  color: hsl(var(--brand));
  cursor: pointer;
  font-weight: 700;
}

.ui-chart__data summary:focus-visible {
  outline: 2px solid hsl(var(--brand) / 0.72);
  outline-offset: 0.2rem;
}

.ui-chart__data > div {
  overflow-x: auto;
  margin-block-start: 0.75rem;
}

.ui-chart__data table {
  width: 100%;
  border-collapse: collapse;
}

.ui-chart__data :where(th, td) {
  border-bottom: 1px solid hsl(var(--line));
  padding: 0.5rem;
  text-align: end;
  white-space: nowrap;
}

.ui-chart__data :where(th, td):first-child {
  text-align: start;
}

.ui-chart__data th {
  color: hsl(var(--ink));
  font-weight: 700;
}

.ui-chart-tone--series-1 {
  --ui-chart-color: hsl(var(--chart-series-1));
}

.ui-chart-tone--series-2 {
  --ui-chart-color: hsl(var(--chart-series-2));
}

.ui-chart-tone--series-3 {
  --ui-chart-color: hsl(var(--chart-series-3));
}

.ui-chart-tone--series-4 {
  --ui-chart-color: hsl(var(--chart-series-4));
}

.ui-chart-tone--series-5 {
  --ui-chart-color: hsl(var(--chart-series-5));
}

.ui-chart-tone--series-6 {
  --ui-chart-color: hsl(var(--chart-series-6));
}

.ui-chart-tone--series-7 {
  --ui-chart-color: hsl(var(--chart-series-7));
}

.ui-chart-tone--series-8 {
  --ui-chart-color: hsl(var(--chart-series-8));
}

.ui-chart-tone--brand {
  --ui-chart-color: hsl(var(--brand));
}

.ui-chart-tone--accent {
  --ui-chart-color: hsl(var(--accent));
}

.ui-chart-tone--success {
  --ui-chart-color: hsl(var(--success));
}

.ui-chart-tone--warning {
  --ui-chart-color: hsl(var(--warning));
}

.ui-chart-tone--danger {
  --ui-chart-color: hsl(var(--danger));
}

.ui-chart-tone--neutral {
  --ui-chart-color: hsl(var(--ink-muted));
}

.ui-bar-chart__marks rect {
  fill: var(--ui-chart-color);
}

.ui-scatter-chart__marks circle {
  fill: color-mix(in srgb, var(--ui-chart-color) 72%, transparent);
  stroke: var(--ui-chart-color);
  stroke-width: var(--chart-stroke-selected, 3px);
}

.ui-heatmap__cells rect {
  fill: hsl(var(--chart-sequential-high));
  stroke: hsl(var(--canvas));
  stroke-width: 1px;
}

.ui-range-chart__area {
  fill: color-mix(in srgb, var(--ui-chart-color) 18%, transparent);
  stroke: var(--ui-chart-color);
  stroke-width: var(--chart-stroke-series, 2px);
}

.ui-range-chart__interval {
  stroke: var(--ui-chart-color);
  stroke-width: var(--chart-stroke-reference, 2px);
}

.ui-pie-chart__plot {
  position: relative;
  display: grid;
  overflow: visible;
  place-items: center;
}

.ui-pie-chart__plot > svg {
  z-index: 0;
  grid-area: 1 / 1;
  width: min(100%, 20rem);
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
}

.ui-pie-chart__slices path {
  fill: var(--ui-chart-color);
  stroke: hsl(var(--surface));
  stroke-width: 2;
}

.ui-pie-chart__center {
  z-index: 1;
  display: grid;
  grid-area: 1 / 1;
  max-width: 7rem;
  gap: 0.2rem;
  place-items: center;
  text-align: center;
  pointer-events: none;
}

.ui-pie-chart__center strong {
  color: hsl(var(--ink));
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1;
}

.ui-pie-chart__center span {
  color: hsl(var(--ink-muted));
  font-size: 0.75rem;
  line-height: 1.25;
}

.ui-line-chart__line,
.ui-sparkline__line {
  fill: none;
  stroke: var(--ui-chart-color);
  stroke-width: 2.5;
}

.ui-line-chart__area,
.ui-sparkline__area {
  fill: color-mix(in srgb, var(--ui-chart-color) 18%, transparent);
  stroke: none;
}

.ui-line-chart__point,
.ui-sparkline__endpoint {
  fill: hsl(var(--surface));
  stroke: var(--ui-chart-color);
  stroke-width: 2;
}

.ui-line-chart__series.ui-chart-tone--series-2 .ui-line-chart__line {
  stroke-dasharray: 8 5;
}

.ui-line-chart__series.ui-chart-tone--series-3 .ui-line-chart__line {
  stroke-dasharray: 3 4;
}

.ui-line-chart__series.ui-chart-tone--series-4 .ui-line-chart__line {
  stroke-dasharray: 10 4 2 4;
}

.ui-line-chart__series:is(
  .ui-chart-tone--series-5,
  .ui-chart-tone--series-6,
  .ui-chart-tone--series-7,
  .ui-chart-tone--series-8
) .ui-line-chart__line {
  stroke-dasharray: 2 5;
}

.ui-sparkline {
  display: inline-flex;
  width: 8rem;
  height: 2.5rem;
  color: hsl(var(--ink));
}

.ui-sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-pie-chart__slices path {
    transition:
      opacity var(--ui-duration-fast) var(--ui-ease),
      transform var(--ui-duration-fast) var(--ui-ease);
    transform-box: fill-box;
    transform-origin: center;
  }

  .ui-pie-chart__slices path:hover {
    transform: scale(1.025);
  }
}

.ui-tvp {
  position: fixed;
  z-index: 50;
  display: grid;
  width: min(24rem, calc(100vw - 2rem));
  gap: 0.5rem;
  pointer-events: none;
}

.ui-tvp > .ui-toast {
  pointer-events: auto;
}

.ui-tvp[data-placement^="top"] {
  top: 1rem;
}

.ui-tvp[data-placement^="bottom"] {
  bottom: 1rem;
}

.ui-tvp[data-placement$="left"] {
  left: 1rem;
}

.ui-tvp[data-placement$="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.ui-tvp[data-placement$="right"] {
  right: 1rem;
}

.ui-toast {
  padding: 1rem;
}

.ui-typography {
  color: hsl(var(--ink-soft));
  line-height: 1.75;
}

.ui-typography :where(h1, h2, h3, h4, h5, h6) {
  color: hsl(var(--ink));
  line-height: 1.2;
  margin-block: 1.5em 0.45em;
}

.ui-typography :where(p, ul, ol, blockquote) {
  margin-block: 0.85em;
}

.ui-typography :where(a) {
  color: hsl(var(--brand-solid));
  text-underline-offset: 0.25rem;
}

.ui-agenda,
.ui-schedule,
.ui-rich-text-editor,
.ui-theme-builder,
.ui-tree,
.ui-tree-grid,
.ui-virtual-list,
.ui-date-range-picker {
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-lg);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: var(--ui-shadow-sm);
}

.ui-theme-toggle {
  --ui-theme-toggle-size: 2.75rem;

  position: relative;
  display: flex;
  height: var(--ui-theme-toggle-size);
  width: var(--ui-theme-toggle-size);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid hsl(var(--line) / 0.5);
  background-color: hsl(var(--surface) / 0.68);
  color: hsl(var(--ink-soft));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease;
}

.ui-agenda,
.ui-schedule,
.ui-rich-text-editor {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

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

.ui-theme-toggle::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    hsl(var(--line) / 0.15) 0%,
    hsl(var(--line) / 0.15) 60%,
    hsl(var(--brand) / 0.6) 75%,
    hsl(var(--glow) / 0.7) 83%,
    hsl(var(--brand) / 0.6) 91%,
    hsl(var(--line) / 0.15) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-theme-toggle:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background-color: hsl(var(--brand-soft) / 0.35);
    color: hsl(var(--brand));
    box-shadow:
      0 8px 24px hsl(230 30% 8% / 0.08),
      0 0 16px color-mix(in srgb, hsl(var(--brand)) 14%, transparent),
      inset 0 1px 0 hsl(0 0% 100% / 0.1);
  }

  .ui-theme-toggle:hover::before {
    opacity: 1;
    animation: lumen-border-spin 3s linear infinite;
  }

  .ui-theme-toggle:active {
    transform: scale(0.93);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-theme-toggle:hover {
    border-color: hsl(var(--brand) / 0.35);
    color: hsl(var(--brand));
  }
}

.ui-theme-toggle__sun,
.ui-theme-toggle__moon {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.25rem;
  width: 1.25rem;
  margin-top: -0.625rem;
  margin-left: -0.625rem;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ui-theme-toggle__sun,
  .ui-theme-toggle__moon {
    transition: none;
  }
}

.ui-theme-toggle__sun {
  transform: scale(1) rotate(0);
  opacity: 1;
}

:where([data-theme="dark"], [data-theme$="-dark"], .dark) .ui-theme-toggle__sun {
  transform: scale(0) rotate(90deg);
  opacity: 0;
}

.ui-theme-toggle__moon {
  transform: scale(0) rotate(-90deg);
  opacity: 0;
  transition-delay: 30ms;
}

:where([data-theme="dark"], [data-theme$="-dark"], .dark) .ui-theme-toggle__moon {
  transform: scale(1) rotate(0);
  opacity: 1;
}

.ui-theme-builder {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.ui-agenda :where(header, [data-ui-agenda-header]),
.ui-schedule :where(header, [data-ui-schedule-header]),
.ui-rich-text-editor :where([role="toolbar"], [data-ui-editor-toolbar]),
.ui-theme-builder :where(header, [data-ui-theme-header]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ui-rich-text-editor :where([role="toolbar"], [data-ui-editor-toolbar]) > :where(.ui-button-group, [data-ui-editor-group]) {
  flex: 0 0 auto;
}

.ui-rich-text-editor [data-ui-editor-command][aria-pressed="true"] {
  border-color: hsl(var(--brand) / 0.4);
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}

.ui-rich-text-editor select[data-ui-editor-command] {
  min-height: 3rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  cursor: pointer;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  font: inherit;
}

.ui-rich-text-editor .ui-button-group > select[data-ui-editor-command] {
  min-height: 2.5rem;
  border: 0;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  padding-block: 0.375rem;
}

.ui-rich-text-editor select[data-ui-editor-command]:hover {
  background: hsl(var(--surface-muted));
}

.ui-rich-text-editor select[data-ui-editor-command]:focus-visible {
  outline: 2px solid hsl(var(--brand) / 0.72);
  outline-offset: 1px;
}

.ui-agenda :where(ol, ul),
.ui-schedule :where(ol, ul),
.ui-tag-group {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.ui-agenda :where(li, [data-ui-agenda-item]),
.ui-schedule :where(li, [data-ui-schedule-event]),
.ui-schedule :where([data-ui-schedule-slot]),
.ui-tree-grid :where([role="row"]),
.ui-virtual-list > * {
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface-muted) / 0.52);
  padding: 0.75rem;
}

.ui-agenda :where(li, [data-ui-agenda-item]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ui-schedule :where([data-ui-schedule-slot]) {
  min-height: 5rem;
}

.ui-schedule :where([data-ui-schedule-slot][data-state="drag-over"]) {
  border-color: hsl(var(--brand) / 0.58);
  background: hsl(var(--brand-soft));
}

.ui-schedule :where([data-ui-schedule-event][draggable="true"]) {
  cursor: grab;
}

.ui-schedule {
  overflow: auto;
}

.ui-schedule :where([data-ui-schedule-grid]) {
  display: grid;
  min-width: 42rem;
  grid-template-columns: repeat(var(--ui-schedule-columns, 7), minmax(7rem, 1fr));
  gap: 0.5rem;
}

  .ui-date-range-picker {
    display: grid;
    width: min(100%, 44rem);
    grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem;
  }

  .ui-date-range-picker::before {
    content: "→";
    display: grid;
    min-width: 2rem;
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    color: hsl(var(--ink-muted));
    font-size: 1rem;
    font-weight: 700;
  }

  .ui-date-range-picker > [data-range-part="start"] {
    grid-column: 1;
  }

  .ui-date-range-picker > [data-range-part="end"] {
    grid-column: 3;
  }

  .ui-date-range-picker .ui-date-picker-field,
  .ui-date-range-picker .ui-date-picker__control {
    width: 100%;
    min-width: 0;
  }

  .ui-date-range-picker .ui-date-picker__trigger {
    min-width: 0;
    background: hsl(var(--surface));
  }

  .ui-date-range-picker[data-range-state="selecting-end"]::before {
    color: hsl(var(--brand-solid));
  }

  @media (max-width: 40rem) {
    .ui-date-range-picker {
      grid-template-columns: minmax(0, 1fr);
    }

    .ui-date-range-picker::before {
      content: "↓";
      grid-column: 1;
      grid-row: 2;
      min-height: 1.25rem;
    }

    .ui-date-range-picker > [data-range-part="start"] {
      grid-column: 1;
      grid-row: 1;
    }

    .ui-date-range-picker > [data-range-part="end"] {
      grid-column: 1;
      grid-row: 3;
    }
  }

.ui-color-picker {
  width: 2.75rem;
  height: 2.5rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--surface));
  padding: 0.2rem;
  cursor: pointer;
}

.ui-autocomplete,
.ui-number-field,
.ui-search-field,
.ui-time-field {
  min-width: 0;
}

.ui-tag-group {
  display: flex;
  flex-wrap: wrap;
}

.ui-tag-group :where([role="listitem"], [data-ui-tag]) {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  background: hsl(var(--brand-soft));
  color: hsl(var(--ink));
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ui-tag-group :where([data-ui-tag-remove]) {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--ink) / 0.1);
  color: hsl(var(--ink-soft));
  cursor: pointer;
  font-size: 0;
}

.ui-tag-group :where([data-ui-tag-remove])::after {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ui-rich-text-editor :where([contenteditable="true"], textarea, [data-ui-editor-content]) {
  min-height: 12rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--canvas));
  padding: 1rem;
  line-height: 1.65;
}

.ui-rich-text-editor :where([contenteditable="true"], [data-ui-editor-content]):focus-visible {
  border-color: hsl(var(--brand) / 0.72);
  outline: 3px solid hsl(var(--brand) / 0.2);
  outline-offset: 2px;
}

.ui-rich-text-editor :where([contenteditable="true"], [data-ui-editor-content]) :where(blockquote, pre) {
  margin-inline: 0;
  border-inline-start: 3px solid hsl(var(--brand) / 0.55);
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  background: hsl(var(--surface-muted) / 0.72);
  padding: 0.75rem 1rem;
}

.ui-rich-text-editor :where([contenteditable="true"], [data-ui-editor-content]) pre {
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.ui-theme-builder :where([data-ui-swatch]) {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  background: var(--ui-swatch, hsl(var(--brand)));
}

.ui-theme-builder :where([data-ui-theme-output]) {
  width: 100%;
  min-height: 8rem;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius-sm);
  background: hsl(var(--canvas));
  color: hsl(var(--ink));
  padding: 0.75rem;
  font: 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.ui-tree-grid,
.ui-virtual-list {
  display: grid;
  gap: 0.35rem;
  max-height: var(--ui-list-height, 22rem);
  overflow: auto;
  padding: 0.5rem;
}

.ui-tree {
  display: grid;
  gap: 0.125rem;
  max-height: var(--ui-list-height, 22rem);
  overflow: auto;
  padding: 0.375rem;
}

.ui-tree :where([role="treeitem"]) {
  position: relative;
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: transparent;
  color: hsl(var(--ink-soft));
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.ui-tree > :where([role="treeitem"]:not([aria-expanded])) {
  padding-inline-start: 1.975rem;
}

.ui-tree :where([role="treeitem"]):is(:hover, :focus-visible) {
  border-color: hsl(var(--line) / 0.72);
  background: hsl(var(--surface-muted) / 0.72);
  color: hsl(var(--ink));
}

.ui-tree :where([role="treeitem"]):focus-visible {
  outline: 2px solid hsl(var(--brand) / 0.58);
  outline-offset: -2px;
}

.ui-tree :where([role="group"]) {
  position: relative;
  display: grid;
  gap: 0.125rem;
  margin: 0.0625rem 0 0.25rem 0.625rem;
  padding-inline-start: 1.35rem;
}

.ui-tree :where([role="group"])::before {
  content: "";
  position: absolute;
  inset-block: 0.125rem;
  inset-inline-start: 0.5rem;
  width: 1px;
  border-radius: 999px;
  background: hsl(var(--line) / 0.8);
}

.ui-tree :where([aria-selected="true"], [data-selected="true"]),
.ui-tree-grid :where([aria-selected="true"], [data-selected="true"]) {
  border-color: hsl(var(--brand) / 0.44);
  background: hsl(var(--brand-soft));
}

.ui-tree :where([aria-selected="true"], [data-selected="true"]) {
  color: hsl(var(--ink));
  font-weight: 600;
}

.ui-tree :where([role="treeitem"][aria-expanded]) {
  gap: 0.35rem;
  color: hsl(var(--ink));
  font-weight: 600;
}

.ui-tree :where([role="treeitem"][aria-expanded])::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  background-color: hsl(var(--ink-muted));
  /* Lucide chevron-right */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ui-tree :where([role="treeitem"][aria-expanded="true"])::before {
  /* Lucide chevron-down */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
}

@layer lumen.glass {
/* ---------------------------------------------------------------------------
 * Liquid Glass layer
 * Declared after component base styles so glass variants win the cascade.
 * Recipe: frosted fill + specular top edge + inner ring + soft bottom shading
 * + refraction tint + layered depth shadows + saturated backdrop blur.
 * ------------------------------------------------------------------------- */

.ui-glass,
.ui-glass-subtle,
.ui-glass-strong,
.ui-alert--glass,
.ui-agenda--glass,
.ui-attachment--glass,
.ui-bubble--glass,
.ui-calendar--glass,
.ui-card--glass,
.ui-carousel--glass,
.ui-chart--glass,
.ui-command--glass,
.ui-data-table--glass,
.ui-dialog--glass,
.ui-drawer--glass,
.ui-empty--glass,
.ui-field--glass,
.ui-sheet--glass,
.ui-popover--glass > :where(div, section, article, form, [role="dialog"]),
.ui-hover-card--glass > :where(div, section, article, [role="tooltip"]),
.ui-item--glass,
.ui-menu--glass,
.ui-menu--glass[data-ui-dropdown-menu] > [role="menu"],
.ui-menubar--glass,
.ui-message-scroller--glass,
.ui-navigation-menu--glass,
.ui-rich-text-editor--glass,
.ui-scroll-area--glass,
.ui-schedule--glass,
.ui-date-picker-field--glass .ui-date-picker__popover,
.ui-select-field--glass .ui-select__list,
.ui-sidebar--glass,
.ui-stat--glass,
.ui-table-wrap--glass,
.ui-tabs--glass,
.ui-theme-builder--glass,
.ui-toast--glass,
.ui-tree--glass,
.ui-tree-grid--glass,
.ui-virtual-list--glass {
  border-color: hsl(var(--glass-border));
  background:
    radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 42%),
    radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 44%),
    hsl(var(--glass-bg));
  box-shadow:
    inset 0 1px 0 hsl(var(--glass-edge)),
    inset 0 0 0 1px hsl(var(--glass-edge-soft)),
    inset 0 -20px 32px -20px hsl(var(--glass-shade)),
    var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
}

.ui-glass-subtle {
  background:
    radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 38%),
    radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 40%),
    hsl(var(--glass-bg-subtle));
}

.ui-glass-strong {
  background:
    radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 46%),
    radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 48%),
    hsl(var(--glass-bg-strong));
}

/* Floating glass surfaces read better slightly lighter than anchored panels. */
.ui-popover--glass > :where(div, section, article, form, [role="dialog"]),
.ui-hover-card--glass > :where(div, section, article, [role="tooltip"]),
.ui-menu--glass[data-ui-dropdown-menu] > [role="menu"],
.ui-date-picker-field--glass .ui-date-picker__popover,
.ui-select-field--glass .ui-select__list,
.ui-toast--glass {
  background:
    radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 42%),
    radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 44%),
    hsl(var(--glass-bg-strong));
}

/* Modal glass: deepen the backdrop so the pane reads as a lens over the page. */
.ui-dialog--glass::backdrop,
.ui-drawer--glass::backdrop,
.ui-sheet--glass::backdrop {
  background:
    radial-gradient(80% 60% at 50% 0%, hsl(var(--brand) / 0.12), transparent 70%),
    hsl(222 47% 11% / 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* Nested chrome inside glass panels goes translucent instead of opaque. */
.ui-tabs--glass [role="tablist"] {
  border-color: hsl(var(--glass-border));
  background: hsl(var(--glass-bg-subtle));
}

.ui-tabs--glass [role="tab"][aria-selected="true"] {
  background:
    linear-gradient(180deg, hsl(var(--glass-highlight)), transparent 80%),
    hsl(var(--glass-bg-strong));
  box-shadow:
    inset 0 1px 0 hsl(var(--glass-edge)),
    0 2px 8px hsl(222 47% 11% / 0.1);
}

.ui-sidebar--glass a:hover,
.ui-sidebar--glass a[aria-current="page"],
.ui-menu--glass :where(a, button, [role="menuitem"]):hover,
.ui-command--glass :where(button, [data-ui-command-item], [role="option"]):hover,
.ui-select-field--glass .ui-select__list [role="option"]:is(:hover, :focus-visible),
.ui-select-field--glass .ui-select__list [role="option"][aria-selected="true"],
.ui-menubar--glass :where(a, button):hover,
.ui-navigation-menu--glass :where(a, button):hover,
.ui-menubar--glass :where(a, button)[aria-current="page"],
.ui-navigation-menu--glass :where(a, button)[aria-current="page"] {
  background: hsl(var(--glass-highlight));
  color: hsl(var(--ink));
}

.ui-field--glass :where(.ui-input, .ui-textarea, .ui-select, .ui-input-otp),
.ui-date-picker-field--glass :where(.ui-date-picker),
.ui-select-field--glass :where(.ui-select),
.ui-rich-text-editor--glass :where([contenteditable="true"], textarea, [data-ui-editor-content]) {
  border-color: hsl(var(--glass-border));
  background: hsl(var(--glass-bg-subtle));
  box-shadow: inset 0 1px 2px hsl(var(--glass-shade));
}

.ui-date-picker-field--glass .ui-date-picker__popover > .ui-calendar {
  background: transparent;
}

.ui-table-wrap--glass :where(th, td),
.ui-data-table--glass :where(th, td) {
  border-color: hsl(var(--glass-border));
}

.ui-carousel--glass [data-ui-carousel-viewport] > *,
.ui-agenda--glass :where(li, [data-ui-agenda-item]),
.ui-schedule--glass :where(li, [data-ui-schedule-event], [data-ui-schedule-slot]),
.ui-tree-grid--glass :where([role="row"]),
.ui-virtual-list--glass > * {
  border-color: hsl(var(--glass-border));
  background:
    linear-gradient(180deg, hsl(var(--glass-highlight)) -60%, transparent 55%),
    hsl(var(--glass-bg-subtle));
}

.ui-tree--glass :where([role="treeitem"]) {
  border-color: transparent;
  background: transparent;
}

.ui-tree--glass :where([role="treeitem"]):is(:hover, :focus-visible) {
  border-color: hsl(var(--glass-border));
  background: hsl(var(--glass-highlight));
}

.ui-tree--glass :where([role="group"])::before {
  background: hsl(var(--glass-border));
}

.ui-message-scroller--glass .ui-bubble {
  border-color: hsl(var(--glass-border));
  background: hsl(var(--glass-bg-strong));
}

.ui-calendar--glass td:hover:not([aria-disabled="true"]) {
  background: hsl(var(--glass-highlight));
  color: hsl(var(--ink));
}

@media (prefers-reduced-transparency: reduce) {
  .ui-glass,
  .ui-glass-subtle,
  .ui-glass-strong,
  [class*="--glass"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: hsl(var(--surface) / 0.97);
  }

  .ui-date-picker-field--glass,
  .ui-select-field--glass {
    background: none;
  }

  .ui-date-picker-field--glass .ui-date-picker__popover,
  .ui-select-field--glass .ui-select__list {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: hsl(var(--surface) / 0.97);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-glass,
  .ui-glass-subtle,
  .ui-glass-strong,
  .ui-alert--glass,
  .ui-agenda--glass,
  .ui-attachment--glass,
  .ui-bubble--glass,
  .ui-calendar--glass,
  .ui-card--glass,
  .ui-carousel--glass,
  .ui-chart--glass,
  .ui-command--glass,
  .ui-data-table--glass,
  .ui-dialog--glass,
  .ui-drawer--glass,
  .ui-empty--glass,
  .ui-field--glass,
  .ui-sheet--glass,
  .ui-popover--glass > :where(div, section, article, form, [role="dialog"]),
  .ui-hover-card--glass > :where(div, section, article, [role="tooltip"]),
  .ui-item--glass,
  .ui-menu--glass,
  .ui-menu--glass[data-ui-dropdown-menu] > [role="menu"],
  .ui-menubar--glass,
  .ui-message-scroller--glass,
  .ui-navigation-menu--glass,
  .ui-rich-text-editor--glass,
  .ui-scroll-area--glass,
  .ui-schedule--glass,
  .ui-date-picker-field--glass .ui-date-picker__popover,
  .ui-select-field--glass .ui-select__list,
  .ui-sidebar--glass,
  .ui-stat--glass,
  .ui-table-wrap--glass,
  .ui-tabs--glass,
  .ui-theme-builder--glass,
  .ui-toast--glass,
  .ui-tree--glass,
  .ui-tree-grid--glass,
  .ui-virtual-list--glass {
    border-color: hsl(var(--line));
    background: hsl(var(--surface) / 0.94);
    box-shadow: var(--ui-shadow-lg);
  }

  .ui-date-picker-field--glass .ui-date-picker__popover > .ui-calendar {
    background: transparent;
  }
}
}

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

  .ui-button:hover,
  .card-interactive:hover,
  .ui-card--interactive:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Motion: overlay entry/exit animations
 * Uses @starting-style + allow-discrete; prefers-reduced-motion collapses
 * every transition via the global override at the end of this file.
 * ------------------------------------------------------------------------- */

@layer lumen.components {
  .ui-dialog,
  .ui-alert-dialog {
    transition:
      opacity var(--ui-duration) var(--ui-ease),
      transform var(--ui-duration-slow) var(--ui-ease-emphasized),
      overlay var(--ui-duration-slow) var(--ui-ease) allow-discrete,
      display var(--ui-duration-slow) var(--ui-ease) allow-discrete;
  }

  .ui-dialog:not([open]),
  .ui-alert-dialog:not([open]) {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 0.75rem)) scale(0.97);
  }

  @starting-style {
    .ui-dialog[open],
    .ui-alert-dialog[open] {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 0.75rem)) scale(0.97);
    }
  }

  .ui-dialog--fullscreen:not([open]) {
    transform: none;
  }

  @starting-style {
    .ui-dialog--fullscreen[open] {
      transform: none;
    }
  }

  .ui-drawer {
    transition:
      opacity var(--ui-duration) var(--ui-ease),
      transform var(--ui-duration-slow) var(--ui-ease-emphasized),
      overlay var(--ui-duration-slow) var(--ui-ease) allow-discrete,
      display var(--ui-duration-slow) var(--ui-ease) allow-discrete;
  }

  .ui-drawer:not([open]) {
    opacity: 0;
    transform: translateY(100%);
  }

  @starting-style {
    .ui-drawer[open] {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .ui-sheet {
    transition:
      opacity var(--ui-duration) var(--ui-ease),
      transform var(--ui-duration-slow) var(--ui-ease-emphasized),
      overlay var(--ui-duration-slow) var(--ui-ease) allow-discrete,
      display var(--ui-duration-slow) var(--ui-ease) allow-discrete;
  }

  .ui-sheet:not([open]) {
    opacity: 0;
    transform: translateX(100%);
  }

  @starting-style {
    .ui-sheet[open] {
      opacity: 0;
      transform: translateX(100%);
    }
  }

  .ui-dialog::backdrop,
  .ui-alert-dialog::backdrop,
  .ui-drawer::backdrop,
  .ui-sheet::backdrop {
    transition:
      opacity var(--ui-duration) var(--ui-ease),
      overlay var(--ui-duration-slow) var(--ui-ease) allow-discrete,
      display var(--ui-duration-slow) var(--ui-ease) allow-discrete;
  }

  :is(.ui-dialog, .ui-alert-dialog, .ui-drawer, .ui-sheet):not([open])::backdrop {
    opacity: 0;
  }

  @starting-style {
    :is(.ui-dialog, .ui-alert-dialog, .ui-drawer, .ui-sheet)[open]::backdrop {
      opacity: 0;
    }
  }

  .ui-popover > :where(div, section, article, form, [role="dialog"]),
  .ui-hover-card > :where(div, section, article, [role="tooltip"]),
  .ui-menu[data-ui-dropdown-menu] > [role="menu"],
  .ui-combobox__list,
  .ui-select__list {
    transition:
      opacity var(--ui-duration-fast) var(--ui-ease),
      transform var(--ui-duration) var(--ui-ease-emphasized),
      display var(--ui-duration) var(--ui-ease) allow-discrete;
  }

  .ui-popover > :where(div, section, article, form, [role="dialog"])[data-state="closed"],
  .ui-hover-card > :where(div, section, article, [role="tooltip"])[data-state="closed"],
  .ui-menu[data-ui-dropdown-menu] > [role="menu"][data-state="closed"],
  .ui-combobox__list[data-state="closed"],
  .ui-select__list[data-state="closed"] {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }

  @starting-style {
    .ui-popover > :where(div, section, article, form, [role="dialog"])[data-state="open"],
    .ui-hover-card > :where(div, section, article, [role="tooltip"])[data-state="open"],
    .ui-menu[data-ui-dropdown-menu] > [role="menu"][data-state="open"],
    .ui-combobox__list[data-state="open"],
    .ui-select__list[data-state="open"] {
      opacity: 0;
      transform: translateY(-0.25rem) scale(0.98);
    }
  }

  .ui-tvp .ui-toast {
    transition:
      opacity var(--ui-duration) var(--ui-ease),
      transform var(--ui-duration-slow) var(--ui-ease-emphasized),
      display var(--ui-duration-slow) var(--ui-ease) allow-discrete;
  }

  .ui-tvp .ui-toast[data-state="closed"] {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }

  .ui-tvp[data-placement^="top"] .ui-toast[data-state="closed"] {
    transform: translateY(-0.5rem) scale(0.98);
  }

  @starting-style {
    .ui-tvp .ui-toast {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    .ui-tvp[data-placement^="top"] .ui-toast {
      transform: translateY(-0.75rem);
    }
  }
}

/* ---------------------------------------------------------------------------
 * States and sizes
 * ------------------------------------------------------------------------- */

@layer lumen.components {
  .ui-input[aria-invalid="true"],
  .ui-textarea[aria-invalid="true"],
  .ui-select[aria-invalid="true"],
  .ui-input-otp[aria-invalid="true"] {
    border-color: hsl(var(--danger) / 0.6);
    box-shadow:
      inset 0 1px 2px hsl(222 47% 11% / 0.04),
      0 0 0 3px hsl(var(--danger) / 0.14);
  }

  .ui-input[aria-invalid="true"]:focus-visible,
  .ui-textarea[aria-invalid="true"]:focus-visible,
  .ui-select[aria-invalid="true"]:focus-visible {
    outline-color: hsl(var(--danger));
  }

  .ui-input-group:has(> [aria-invalid="true"]) {
    border-color: hsl(var(--danger) / 0.6);
  }

  .ui-field > [data-ui-field-error],
  .ui-field__error {
    margin: 0;
    color: hsl(var(--danger));
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .ui-checkbox:indeterminate {
    border-color: hsl(var(--brand-solid));
    background-color: hsl(var(--brand-solid));
    /* Lucide minus */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.78rem 0.78rem;
  }

  .ui-button[aria-busy="true"],
  .ui-button--loading {
    pointer-events: none;
    opacity: 0.8;
  }

  .ui-input--sm,
  .ui-select--sm {
    min-height: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }

  .ui-input--lg,
  .ui-select--lg {
    min-height: 3.25rem;
    height: 3.25rem;
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Container queries: components respond to their container, not the viewport
 * ------------------------------------------------------------------------- */

@layer lumen.components {
  .ui-sidebar {
    container: ui-sidebar / inline-size;
  }

  @container ui-sidebar (max-width: 13rem) {
    a {
      padding: 0.45rem 0.5rem;
      font-size: 0.8125rem;
    }
  }

  .ui-schedule {
    container: ui-schedule / inline-size;
  }

  @container ui-schedule (max-width: 40rem) {
    [data-ui-schedule-grid] {
      min-width: 100%;
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .ui-carousel {
    container: ui-carousel / inline-size;
  }

  @container ui-carousel (max-width: 24rem) {
    [data-ui-carousel-viewport] > * {
      min-width: 100%;
    }
  }
}

/* ---------------------------------------------------------------------------
 * Top-layer mode for floating surfaces
 * The runtime promotes panels to [popover] and wires anchor-name /
 * position-anchor inline when the browser supports CSS anchor positioning.
 * Unsupported browsers keep the absolute-position fallback above.
 * ------------------------------------------------------------------------- */

@layer lumen.components {
  .ui-popover > [popover],
  .ui-hover-card > [popover],
  .ui-cascader > [popover],
  .ui-tree-select > [popover],
  .ui-menu[data-ui-dropdown-menu] > [popover][role="menu"] {
    position: fixed;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    inset: auto;
    width: max-content;
    margin: 0.5rem 0 0;
  }

  .ui-popover > [popover]:not(:popover-open),
  .ui-hover-card > [popover]:not(:popover-open),
  .ui-cascader > [popover]:not(:popover-open),
  .ui-tree-select > [popover]:not(:popover-open),
  .ui-menu[data-ui-dropdown-menu] > [popover][role="menu"]:not(:popover-open) {
    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
  }

  .ui-tooltip [role="tooltip"][popover] {
    position: fixed;
    position-area: block-start;
    position-try-fallbacks: flip-block;
    inset: auto;
    margin: 0 0 0.45rem;
    transform: none;
    transition:
      opacity var(--ui-duration-fast) var(--ui-ease),
      display var(--ui-duration-fast) var(--ui-ease) allow-discrete;
  }

  .ui-tooltip [role="tooltip"][popover]:popover-open {
    opacity: 1;
    visibility: visible;
  }

  @starting-style {
    .ui-tooltip [role="tooltip"][popover]:popover-open {
      opacity: 0;
    }
  }
}

/* ---------------------------------------------------------------------------
 * Glass extensions: intensity on wrapper components + pointer-tracked
 * specular highlight (opt-in via data-ui-glass-track).
 * ------------------------------------------------------------------------- */

@layer lumen.glass {
  .ui-popover--glass:is(.ui-glass-subtle, .ui-glass-strong),
  .ui-hover-card--glass:is(.ui-glass-subtle, .ui-glass-strong),
  .ui-menu--glass[data-ui-dropdown-menu]:is(.ui-glass-subtle, .ui-glass-strong),
  .ui-date-picker-field--glass:is(.ui-glass-subtle, .ui-glass-strong),
  .ui-select-field--glass:is(.ui-glass-subtle, .ui-glass-strong) {
    border-color: transparent;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ui-popover--glass.ui-glass-subtle > :where(div, section, article, form, [role="dialog"]),
  .ui-hover-card--glass.ui-glass-subtle > :where(div, section, article, [role="tooltip"]),
  .ui-menu--glass.ui-glass-subtle[data-ui-dropdown-menu] > [role="menu"],
  .ui-date-picker-field--glass.ui-glass-subtle .ui-date-picker__popover,
  .ui-select-field--glass.ui-glass-subtle .ui-select__list {
    background:
      radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 38%),
      radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 40%),
      hsl(var(--glass-bg-subtle));
  }

  .ui-popover--glass.ui-glass-strong > :where(div, section, article, form, [role="dialog"]),
  .ui-hover-card--glass.ui-glass-strong > :where(div, section, article, [role="tooltip"]),
  .ui-menu--glass.ui-glass-strong[data-ui-dropdown-menu] > [role="menu"],
  .ui-date-picker-field--glass.ui-glass-strong .ui-date-picker__popover,
  .ui-select-field--glass.ui-glass-strong .ui-select__list {
    background:
      radial-gradient(140% 100% at 12% -8%, hsl(var(--glass-highlight)) 0%, transparent 46%),
      radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 48%),
      hsl(var(--glass-bg-strong));
  }

  :is(.ui-glass, .ui-glass-subtle, .ui-glass-strong, [class*="--glass"])[data-ui-glass-track]:not(.ui-date-picker-field--glass):not(.ui-select-field--glass),
  .ui-date-picker-field--glass[data-ui-glass-track] .ui-date-picker__popover,
  .ui-select-field--glass[data-ui-glass-track] .ui-select__list {
    background:
      radial-gradient(24rem 24rem at var(--glass-x, 12%) var(--glass-y, -8%), hsl(var(--glass-highlight)) 0%, transparent 42%),
      radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 44%),
      hsl(var(--glass-bg));
  }

  .ui-glass-subtle[data-ui-glass-track]:not(.ui-date-picker-field--glass):not(.ui-select-field--glass),
  .ui-date-picker-field--glass.ui-glass-subtle[data-ui-glass-track] .ui-date-picker__popover,
  .ui-select-field--glass.ui-glass-subtle[data-ui-glass-track] .ui-select__list {
    background:
      radial-gradient(24rem 24rem at var(--glass-x, 12%) var(--glass-y, -8%), hsl(var(--glass-highlight)) 0%, transparent 38%),
      radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 40%),
      hsl(var(--glass-bg-subtle));
  }

  .ui-glass-strong[data-ui-glass-track]:not(.ui-date-picker-field--glass):not(.ui-select-field--glass),
  .ui-date-picker-field--glass.ui-glass-strong[data-ui-glass-track] .ui-date-picker__popover,
  .ui-select-field--glass.ui-glass-strong[data-ui-glass-track] .ui-select__list {
    background:
      radial-gradient(24rem 24rem at var(--glass-x, 12%) var(--glass-y, -8%), hsl(var(--glass-highlight)) 0%, transparent 46%),
      radial-gradient(120% 90% at 88% 110%, hsl(var(--glass-refraction)) 0%, transparent 48%),
      hsl(var(--glass-bg-strong));
  }

  @media (prefers-reduced-transparency: reduce) {
    :is(.ui-glass, .ui-glass-subtle, .ui-glass-strong, [class*="--glass"])[data-ui-glass-track],
    .ui-date-picker-field--glass .ui-date-picker__popover,
    .ui-select-field--glass .ui-select__list {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: hsl(var(--surface) / 0.97);
    }

    .ui-date-picker-field--glass,
    .ui-select-field--glass {
      background: none;
    }
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.ui-glass, .ui-glass-subtle, .ui-glass-strong, [class*="--glass"])[data-ui-glass-track],
    .ui-date-picker-field--glass .ui-date-picker__popover,
    .ui-select-field--glass .ui-select__list {
      background: hsl(var(--surface) / 0.94);
    }

    .ui-date-picker-field--glass,
    .ui-select-field--glass {
      background: none;
    }
  }
}

/* ---------------------------------------------------------------------------
 * Particles, ScrollReveal, Stat, Rating, Note, Meter, Timeline
 * ------------------------------------------------------------------------- */

@keyframes ui-particle-drift {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100vh) translateX(20px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-particles__particle {
    display: none;
    animation: none;
  }
}

.ui-stat {
  --ui-stat-gap: 0.25rem;
  --ui-stat-padding: 1rem;

  display: flex;
  flex-direction: column;
  gap: var(--ui-stat-gap);
  padding: var(--ui-stat-padding);
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  border-radius: 0.5rem;
}

.ui-stat--accent,
.ui-stat--glass {
  --ui-stat-gap: 0.5rem;
  --ui-stat-padding: 1.25rem;

  border-radius: var(--ui-radius-lg);
}

.ui-stat--bare {
  --ui-stat-padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
}

.ui-stat--accent {
  border-color: hsl(var(--brand) / 0.2);
  background: linear-gradient(145deg, hsl(var(--surface)), hsl(var(--brand-soft) / 0.28));
  box-shadow: var(--ui-shadow-sm);
}

.ui-stat--accent .ui-stat-value,
.ui-stat--glass .ui-stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.ui-stat--accent .ui-stat-value {
  color: hsl(var(--brand));
}

.ui-stat-label {
  font-size: 0.875rem;
  color: hsl(var(--ink-muted));
}
.ui-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--ink));
}

.ui-stat-description {
  color: hsl(var(--ink-soft));
  font-size: 0.875rem;
  line-height: 1.5;
}

.ui-stat-icon {
  align-items: center;
  color: hsl(var(--brand));
  display: inline-flex;
  justify-content: center;
}

.ui-stat-trend {
  align-items: center;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 650;
  gap: 0.25rem;
}

.ui-stat-trend--neutral {
  color: hsl(var(--ink-muted));
}

.ui-stat-trend--success {
  color: hsl(var(--success));
}

.ui-stat-trend--warning {
  color: hsl(var(--warning));
}

.ui-stat-trend--danger {
  color: hsl(var(--danger));
}

.ui-rating {
  display: flex;
  gap: 0.25rem;
}
.ui-rating__star {
  color: hsl(var(--line));
  transition: color 0.2s ease;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.ui-rating__star[data-active="true"] {
  color: hsl(var(--warning));
}
.ui-rating:not(.ui-rating--readonly) .ui-rating__star:hover {
  color: hsl(var(--warning));
}
.ui-rating--readonly .ui-rating__star {
  cursor: default;
}

.ui-note {
  padding: 1rem;
  background: hsl(var(--surface-muted));
  border-left: 4px solid hsl(var(--brand));
  border-radius: 0.25rem;
}
.ui-note__label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.ui-meter {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border: 0;
  background: hsl(var(--surface-strong));
  border-radius: 9999px;
  overflow: hidden;
}
.ui-meter::-webkit-meter-bar {
  border: 0;
  background: hsl(var(--surface-strong));
  border-radius: inherit;
}
.ui-meter::-webkit-meter-optimum-value {
  background: hsl(var(--brand-solid));
  border-radius: inherit;
}
.ui-meter::-webkit-meter-suboptimum-value {
  background: hsl(var(--warning));
  border-radius: inherit;
}
.ui-meter::-webkit-meter-even-less-good-value {
  background: hsl(var(--danger));
  border-radius: inherit;
}
.ui-meter::-moz-meter-bar {
  border: 0;
  background: hsl(var(--brand-solid));
  border-radius: inherit;
}

.ui-timeline {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ui-timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

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

.ui-timeline-item__tail {
  position: absolute;
  top: 1.25rem;
  left: 5px;
  width: 2px;
  height: calc(100% - 1.25rem);
  background-color: hsl(var(--line));
}

.ui-timeline-item:last-child > .ui-timeline-item__tail {
  display: none;
}

.ui-timeline-item__dot {
  position: absolute;
  top: 0.25rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--surface));
  z-index: 1;
}

.ui-timeline-item__dot:empty {
  width: 12px;
  height: 12px;
  border: 2px solid hsl(var(--brand));
  border-radius: 50%;
  left: 0;
  top: 0.375rem;
}

.ui-timeline-item__dot:not(:empty) {
  color: hsl(var(--brand));
  transform: translateX(6px) translateX(-50%);
}

.ui-timeline-item__content {
  margin-left: 1.5rem;
}

/* Note border-position variants */
.ui-note--border-left {
  border-left: 4px solid hsl(var(--brand));
  border-right-width: 0;
}
.ui-note--border-right {
  border-left-width: 0;
  border-right: 4px solid hsl(var(--accent));
}
.ui-note--border-none {
  border-left-width: 0;
  border-right-width: 0;
}

.ui-pill {
  display: inline-flex;
  min-height: 1.75rem;
  max-width: 100%;
  align-items: center;
  border: 1px solid hsl(var(--line));
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  background: hsl(var(--surface-muted));
  color: hsl(var(--ink-soft));
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.ui-pill--brand {
  border-color: hsl(var(--brand) / 0.34);
  background: hsl(var(--brand-soft) / 0.72);
  color: hsl(var(--brand));
}

.ui-pill--outline {
  background: transparent;
  color: hsl(var(--ink-soft));
}

.ui-pill__count {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid hsl(var(--line));
  font-size: 0.75rem;
  line-height: 1;
  color: hsl(var(--ink-muted));
  font-variant-numeric: tabular-nums;
}

a.ui-pill {
  cursor: pointer;
  min-height: 2.75rem;
  text-decoration: none;
}

a.ui-pill:hover {
  border-color: hsl(var(--brand) / 0.42);
  color: hsl(var(--brand-solid));
}

a.ui-pill--brand:hover {
  border-color: hsl(var(--brand) / 0.6);
  background: hsl(var(--brand-solid));
  color: hsl(var(--canvas));
}

a.ui-pill:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 2px;
}

.ui-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  height: 0.1875rem;
  overflow: hidden;
  pointer-events: none;
  background: hsl(var(--surface-strong) / 0.48);
}

.ui-scroll-progress--bottom {
  inset: auto 0 0;
}

.ui-scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: hsl(var(--brand-solid));
  will-change: transform;
}

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

/* CoverImage hover lift + bottom gradient overlay */
.ui-cover-image--hover {
  transition: transform 300ms ease;
}
.ui-cover-image--hover:hover {
  transform: translateY(-0.25rem);
}
.ui-cover-image__bottom-gradient {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to top, hsl(var(--canvas)), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .ui-cover-image--hover {
    transition: none;
  }
  .ui-cover-image--hover:hover {
    transform: none;
  }
}

.ui-button-link--icon {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Parity components (Stepper, FileUpload, Tour, Anchor, Segmented, Toolbar,
   Descriptions, Popconfirm, Transfer, Cascader, TreeSelect, Mentions, QRCode,
   Watermark, Affix, SpeedDial)
   ========================================================================== */

/* Stepper */
.ui-stepper {
  --ui-stepper-marker-size: 1.75rem;
  display: flex;
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ui-stepper--vertical {
  flex-direction: column;
}
.ui-stepper__step {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  color: hsl(var(--ink-muted));
}
.ui-stepper__step:last-child {
  flex: 0 0 auto;
}
.ui-stepper--vertical .ui-stepper__step {
  position: relative;
  flex: 0 0 auto;
  min-height: 3.5rem;
  padding-bottom: 1rem;
}
.ui-stepper__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-stepper-marker-size);
  height: var(--ui-stepper-marker-size);
  flex: 0 0 auto;
  border-radius: 9999px;
  border: 2px solid hsl(var(--line));
  background: hsl(var(--surface));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  transition:
    border-color var(--ui-duration) var(--ui-ease),
    background-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease);
}
.ui-stepper__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1875rem;
  padding: 0.0625rem 0 0 0.5rem;
}
.ui-stepper__title {
  color: hsl(var(--ink-muted));
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.ui-stepper__description {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: hsl(var(--ink-muted));
}
.ui-stepper__step[data-state="complete"] .ui-stepper__title {
  color: hsl(var(--ink-soft));
}
.ui-stepper__step[data-state="current"] .ui-stepper__title {
  color: hsl(var(--ink));
}
.ui-stepper__step[data-state="current"] .ui-stepper__marker {
  border-color: hsl(var(--brand));
  background: hsl(var(--brand-soft));
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.1);
  color: hsl(var(--brand-solid));
}
.ui-stepper__step[data-state="complete"] .ui-stepper__marker {
  border-color: hsl(var(--brand-solid));
  background: hsl(var(--brand-solid));
  color: hsl(var(--canvas));
}
.ui-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  min-width: 1rem;
  margin: calc(var(--ui-stepper-marker-size) / 2 - 1px) 0.625rem 0;
  border-radius: 9999px;
  background: hsl(var(--line));
}
.ui-stepper__step[data-state="complete"]:not(:last-child)::after {
  background: hsl(var(--brand-solid));
}
.ui-stepper--vertical .ui-stepper__step:not(:last-child)::after {
  position: absolute;
  top: calc(var(--ui-stepper-marker-size) + 0.375rem);
  bottom: 0.375rem;
  left: calc(var(--ui-stepper-marker-size) / 2 - 1px);
  display: block;
  width: 2px;
  height: auto;
  min-width: 0;
  margin: 0;
}

@media (max-width: 40rem) {
  .ui-stepper:not(.ui-stepper--vertical) {
    flex-direction: column;
  }

  .ui-stepper:not(.ui-stepper--vertical) .ui-stepper__step {
    position: relative;
    flex: 0 0 auto;
    min-height: 3.5rem;
    padding-bottom: 1rem;
  }

  .ui-stepper:not(.ui-stepper--vertical) .ui-stepper__step:not(:last-child)::after {
    position: absolute;
    top: calc(var(--ui-stepper-marker-size) + 0.375rem);
    bottom: 0.375rem;
    left: calc(var(--ui-stepper-marker-size) / 2 - 1px);
    display: block;
    width: 2px;
    height: auto;
    min-width: 0;
    margin: 0;
  }
}

/* FileUpload */
.ui-file-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 10rem;
  padding: 2rem;
  overflow: hidden;
  text-align: center;
  border: 2px dashed hsl(var(--line));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 0%, hsl(var(--brand-soft) / 0.45), transparent 55%),
    hsl(var(--surface));
  color: hsl(var(--ink-muted));
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ui-file-upload:hover,
.ui-file-upload[data-state="drag-over"] {
  border-color: hsl(var(--brand));
  background: hsl(var(--brand-soft));
}
.ui-file-upload:focus-within {
  border-color: hsl(var(--brand));
  outline: 3px solid hsl(var(--brand) / 0.22);
  outline-offset: 3px;
}
.ui-file-upload[data-state="drag-over"] {
  border-style: solid;
  box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.25);
}
.ui-file-upload:has(.ui-file-upload__input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.ui-file-upload__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  cursor: pointer;
}
.ui-file-upload__input:disabled {
  cursor: not-allowed;
}
.ui-file-upload__input::file-selector-button {
  display: none;
}
.ui-file-upload__icon {
  box-sizing: content-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand));
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.ui-file-upload:hover .ui-file-upload__icon,
.ui-file-upload[data-state="drag-over"] .ui-file-upload__icon {
  transform: translateY(-0.125rem);
  background: hsl(var(--surface));
}
.ui-file-upload__prompt {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--ink));
}
.ui-file-upload__hint {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.ui-file-upload__files:empty {
  display: none;
}
.ui-file-upload__files {
  max-width: min(100%, 28rem);
  padding: 0.3125rem 0.625rem;
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: hsl(var(--surface-strong));
  color: hsl(var(--ink));
}
@media (prefers-reduced-motion: reduce) {
  .ui-file-upload,
  .ui-file-upload__icon {
    transition: none;
  }
}

/* Tour */
.ui-tour {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.ui-tour[hidden] {
  display: none;
}
.ui-tour__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, hsl(var(--ink)) 45%, transparent);
}
.ui-tour__popover {
  position: absolute;
  max-width: 20rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  box-shadow: 0 12px 32px color-mix(in srgb, hsl(var(--ink)) 22%, transparent);
  color: hsl(var(--ink));
}
.ui-tour__title {
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.ui-tour__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Anchor / ScrollSpy */
.ui-anchor {
  border-left: 2px solid hsl(var(--line));
}
.ui-anchor ol,
.ui-anchor ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ui-anchor a {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: hsl(var(--ink-muted));
  text-decoration: none;
  font-size: 0.875rem;
}
.ui-anchor__content {
  display: grid;
  gap: 0.125rem;
}
.ui-anchor__index,
.ui-anchor__description {
  color: hsl(var(--ink-muted));
  font-size: var(--ui-text-xs);
}
.ui-anchor__index {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
.ui-anchor a[data-depth="3"] {
  padding-inline-start: 1.5rem;
  font-size: 0.8125rem;
}
.ui-anchor a[data-depth="4"],
.ui-anchor a[data-depth="5"],
.ui-anchor a[data-depth="6"] {
  padding-inline-start: 2.25rem;
  font-size: 0.8125rem;
}
.ui-anchor a:hover {
  color: hsl(var(--ink));
}
.ui-anchor a[data-active="true"],
.ui-anchor a[aria-current="location"] {
  color: hsl(var(--brand));
  border-left-color: hsl(var(--brand));
  font-weight: 600;
}

/* Segmented */
.ui-segmented {
  display: inline-flex;
  padding: 0.1875rem;
  gap: 0.1875rem;
  border-radius: 0.5rem;
  background: hsl(var(--surface-strong));
  border: 1px solid hsl(var(--line));
}
.ui-segmented__option {
  position: relative;
  display: inline-flex;
}
.ui-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ui-segmented__label {
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--ink-soft));
  transition: background 0.15s ease, color 0.15s ease;
}
.ui-segmented__input:checked + .ui-segmented__label {
  background: hsl(var(--surface));
  color: hsl(var(--ink));
  box-shadow: 0 1px 2px color-mix(in srgb, hsl(var(--ink)) 12%, transparent);
}
.ui-segmented__input:focus-visible + .ui-segmented__label {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 1px;
}
.ui-segmented__input:disabled + .ui-segmented__label {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-segmented--sm .ui-segmented__label {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
}
.ui-segmented--lg .ui-segmented__label {
  padding: 0.5rem 1.125rem;
  font-size: 1rem;
}

/* Toolbar */
.ui-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--line));
  background: hsl(var(--surface));
}
.ui-toolbar--vertical {
  flex-direction: column;
  align-items: stretch;
  width: max-content;
}

/* Descriptions */
.ui-descriptions {
  display: grid;
  grid-template-columns: repeat(var(--ui-descriptions-columns, 1), minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid hsl(var(--line));
  border-radius: 0.5rem;
  overflow: hidden;
  background: hsl(var(--line));
}
.ui-descriptions__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--surface));
}
.ui-descriptions__term {
  font-size: 0.8125rem;
  color: hsl(var(--ink-muted));
}
.ui-descriptions__detail {
  margin: 0;
  color: hsl(var(--ink));
}

/* Popconfirm */
.ui-popconfirm {
  position: relative;
  display: inline-block;
}
.ui-popover__panel,
.ui-popconfirm__panel {
  position: absolute;
  z-index: 40;
  margin-top: 0.5rem;
  min-width: 15rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
}
.ui-popconfirm__panel[hidden] {
  display: none;
}
.ui-popconfirm__message {
  margin: 0 0 0.75rem;
  color: hsl(var(--ink));
}
.ui-popconfirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Transfer */
.ui-transfer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  max-width: var(--ui-transfer-max-width, 48rem);
  margin-inline: auto;
  gap: 1rem;
  align-items: stretch;
}
.ui-transfer__panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid hsl(var(--line));
  border-radius: var(--ui-radius);
  overflow: hidden;
  background: hsl(var(--surface));
  box-shadow: 0 1px 2px hsl(var(--ink) / 0.04);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.ui-transfer__panel:focus-within {
  border-color: hsl(var(--brand) / 0.48);
  box-shadow: 0 0 0 3px hsl(var(--brand) / 0.1);
}
.ui-transfer__title {
  margin: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: hsl(var(--ink-soft));
  background: hsl(var(--surface-muted));
  border-bottom: 1px solid hsl(var(--line));
}
.ui-transfer__list {
  flex: 1 1 auto;
  min-height: 10rem;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  overflow-y: auto;
}
.ui-transfer__list:not(:has(.ui-transfer__item)) {
  display: grid;
  place-items: center;
}
.ui-transfer__list:not(:has(.ui-transfer__item))::after {
  content: 'No items';
  display: grid;
  min-height: 100%;
  padding: 1rem;
  place-items: center;
  text-align: center;
  color: hsl(var(--ink-muted));
  font-size: 0.8125rem;
  font-style: italic;
}
.ui-transfer__item {
  list-style: none;
}
.ui-transfer__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem;
  border-radius: 0.375rem;
  color: hsl(var(--ink));
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}
.ui-transfer__option:hover {
  background: hsl(var(--surface-muted));
}
.ui-transfer__option:has(.ui-checkbox:checked) {
  background: hsl(var(--brand-soft) / 0.72);
  color: hsl(var(--brand-solid));
}
.ui-transfer__option > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-transfer__controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.ui-transfer__controls .ui-button {
  box-shadow: 0 1px 2px hsl(var(--ink) / 0.05);
}
.ui-transfer__controls .ui-button + .ui-button {
  margin: 0;
}

@media (max-width: 40rem) {
  .ui-transfer {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .ui-transfer__controls {
    flex-direction: row;
  }

  .ui-transfer__controls .ui-icon {
    transform: rotate(90deg);
  }
}

/* Cascader + TreeSelect */
.ui-cascader,
.ui-tree-select {
  position: relative;
  display: inline-block;
}
.ui-cascader__trigger,
.ui-tree-select__trigger {
  min-width: 12rem;
  justify-content: space-between;
}
.ui-cascader__panel,
.ui-tree-select__panel {
  position: absolute;
  z-index: 40;
  margin-top: 0.375rem;
  min-width: 14rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
}
.ui-cascader__panel[hidden],
.ui-tree-select__panel[hidden] {
  display: none;
}
.ui-cascader__panel {
  display: flex;
  gap: 0.25rem;
}
.ui-cascader__column {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 8rem;
}
.ui-cascader__column[hidden] {
  display: none;
}
.ui-cascader__option {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: hsl(var(--ink));
  text-align: left;
  cursor: pointer;
}
.ui-cascader__option:hover,
.ui-cascader__option[data-active="true"] {
  background: hsl(var(--surface-muted));
}

/* Mentions */
.ui-mentions {
  position: relative;
  display: block;
}
.ui-mentions__input {
  width: 100%;
}
.ui-mentions__list {
  position: absolute;
  z-index: 40;
  min-width: 12rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  border-radius: 0.5rem;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--line));
  box-shadow: 0 10px 28px color-mix(in srgb, hsl(var(--ink)) 18%, transparent);
}
.ui-mentions__list[hidden] {
  display: none;
}
.ui-mentions__option {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: hsl(var(--ink));
  text-align: left;
  cursor: pointer;
}
.ui-mentions__option:hover,
.ui-mentions__option[data-active="true"] {
  background: hsl(var(--surface-muted));
}

/* QRCode */
.ui-qr-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.ui-qr-code__frame {
  display: inline-flex;
  padding: 0.75rem;
  width: var(--ui-qr-code-size, 160px);
  height: var(--ui-qr-code-size, 160px);
  box-sizing: content-box;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--line));
  background: #fff;
}
.ui-qr-code__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ui-qr-code__value {
  font-size: 0.8125rem;
  color: hsl(var(--ink-muted));
  font-variant-numeric: tabular-nums;
}

/* Watermark */
.ui-watermark {
  position: relative;
}
.ui-watermark__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: hsl(var(--ink) / 0.12);
  -webkit-mask-image: var(--ui-watermark-image);
  mask-image: var(--ui-watermark-image);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--ui-watermark-gap, 120px) var(--ui-watermark-gap, 120px);
  mask-size: var(--ui-watermark-gap, 120px) var(--ui-watermark-gap, 120px);
}

/* Affix */
.ui-affix {
  position: sticky;
  top: var(--ui-affix-offset, 0);
  z-index: 30;
}
.ui-affix--bottom {
  top: auto;
  bottom: var(--ui-affix-offset, 0);
}

/* SpeedDial */
.ui-speed-dial {
  --ui-speed-dial-gap: 0.625rem;
  position: relative;
  display: inline-flex;
  width: max-content;
  isolation: isolate;
}
.ui-speed-dial__trigger {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--brand) / 0.62);
  background: hsl(var(--brand-solid));
  color: white;
  cursor: pointer;
  box-shadow:
    0 1px 2px hsl(var(--ink) / 0.14),
    0 10px 24px hsl(var(--brand) / 0.28);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    box-shadow var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
}
.ui-speed-dial__trigger:hover {
  background: hsl(var(--brand));
  box-shadow:
    0 2px 4px hsl(var(--ink) / 0.12),
    0 14px 30px hsl(var(--brand) / 0.32);
  transform: translateY(-2px);
}
.ui-speed-dial__trigger:active {
  transform: translateY(0) scale(0.97);
}
.ui-speed-dial__trigger:focus-visible,
.ui-speed-dial__action:focus-visible {
  outline: 2px solid hsl(var(--brand));
  outline-offset: 3px;
}
.ui-speed-dial__icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--ui-duration-slow) var(--ui-ease-emphasized);
}
.ui-speed-dial__icon::before,
.ui-speed-dial__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.ui-speed-dial__icon::before {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.ui-speed-dial__icon::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.ui-speed-dial[data-state="open"] .ui-speed-dial__icon {
  transform: rotate(45deg);
}
.ui-speed-dial__actions {
  position: absolute;
  display: flex;
  z-index: 2;
  gap: var(--ui-speed-dial-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: scale(0.96);
  transform-origin: var(--ui-speed-dial-origin, center);
  transition:
    opacity var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration-slow) var(--ui-ease-emphasized),
    visibility 0s linear var(--ui-duration);
}
.ui-speed-dial:not([data-ui-bound="true"]):hover .ui-speed-dial__actions,
.ui-speed-dial:not([data-ui-bound="true"]):focus-within .ui-speed-dial__actions,
.ui-speed-dial[data-state="open"] .ui-speed-dial__actions {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  visibility: visible;
  transition-delay: 0s;
}
.ui-speed-dial--up .ui-speed-dial__actions {
  --ui-speed-dial-origin: bottom center;
  flex-direction: column-reverse;
  bottom: calc(100% + var(--ui-speed-dial-gap));
  left: 50%;
  align-items: flex-end;
  translate: -50% 0;
}
.ui-speed-dial--down .ui-speed-dial__actions {
  --ui-speed-dial-origin: top center;
  flex-direction: column;
  top: calc(100% + var(--ui-speed-dial-gap));
  left: 50%;
  align-items: flex-end;
  translate: -50% 0;
}
.ui-speed-dial--left .ui-speed-dial__actions {
  --ui-speed-dial-origin: center right;
  flex-direction: row-reverse;
  right: calc(100% + var(--ui-speed-dial-gap));
  top: 50%;
  align-items: center;
  translate: 0 -50%;
}
.ui-speed-dial--right .ui-speed-dial__actions {
  --ui-speed-dial-origin: center left;
  flex-direction: row;
  left: calc(100% + var(--ui-speed-dial-gap));
  top: 50%;
  align-items: center;
  translate: 0 -50%;
}
@media (prefers-reduced-motion: reduce) {
  .ui-speed-dial__trigger,
  .ui-speed-dial__icon,
  .ui-speed-dial__actions,
  .ui-speed-dial__actions li {
    transition: none;
  }
}
.ui-speed-dial__actions li {
  list-style: none;
  opacity: 0;
  transform: translateY(0.25rem) scale(0.97);
  transition:
    opacity var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration-slow) var(--ui-ease-emphasized);
  transition-delay: calc(var(--ui-speed-dial-index, 0) * 35ms);
}
.ui-speed-dial[data-state="open"] .ui-speed-dial__actions li,
.ui-speed-dial:not([data-ui-bound="true"]):hover .ui-speed-dial__actions li,
.ui-speed-dial:not([data-ui-bound="true"]):focus-within .ui-speed-dial__actions li {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ui-speed-dial__action {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--line));
  background: hsl(var(--surface) / 0.96);
  color: hsl(var(--ink));
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 1px 2px hsl(var(--ink) / 0.08),
    0 8px 20px hsl(var(--ink) / 0.12);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease),
    color var(--ui-duration) var(--ui-ease),
    transform var(--ui-duration) var(--ui-ease);
}
.ui-speed-dial__action:hover {
  border-color: hsl(var(--brand) / 0.38);
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
  transform: translateY(-1px);
}
.ui-speed-dial__action-icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-solid));
}
.ui-speed-dial__action-icon :where(svg) {
  width: 1rem;
  height: 1rem;
}
.ui-speed-dial__action-label {
  line-height: 1.2;
}

/* Popconfirm trigger */
.ui-popconfirm__trigger {
  display: inline-flex;
  cursor: pointer;
}

/* Tour step content */
.ui-tour__step[hidden] {
  display: none;
}
.ui-tour__content {
  margin: 0;
  color: hsl(var(--ink-soft));
}

/* TreeSelect tree */
.ui-tree-select__tree {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.ui-tree-select__option {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  padding-left: calc(0.5rem + var(--ui-tree-depth, 0) * 1rem);
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: hsl(var(--ink));
  text-align: left;
  cursor: pointer;
}
.ui-tree-select__option:hover,
.ui-tree-select__option[data-active="true"] {
  background: hsl(var(--surface-muted));
}

/* ---------------------------------------------------------------------------
 * Form foundations and layout primitives
 * ------------------------------------------------------------------------- */

@layer lumen.components {
  .ui-form {
    display: grid;
    gap: 1rem;
  }

  .ui-form[aria-busy="true"] {
    cursor: progress;
  }

  .ui-field-error {
    margin: 0;
    color: hsl(var(--danger));
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .ui-error-summary {
    display: grid;
    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid hsl(var(--danger) / 0.45);
    border-inline-start-width: 0.25rem;
    border-radius: var(--ui-radius);
    background: hsl(var(--danger) / 0.06);
    color: hsl(var(--ink));
  }

  .ui-error-summary:focus-visible {
    outline: 2px solid hsl(var(--danger));
    outline-offset: 2px;
  }

  .ui-error-summary > :where(h2, h3) {
    margin: 0;
    font-size: 1rem;
  }

  .ui-error-summary ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  .ui-error-summary a {
    color: hsl(var(--danger));
    font-weight: 650;
    text-underline-offset: 0.18em;
  }

  .ui-checkbox-group {
    display: flex;
    min-width: 0;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    margin: 0;
  }

  .ui-checkbox-group--vertical {
    flex-direction: column;
  }

  .ui-checkbox-group--horizontal {
    flex-flow: row wrap;
    align-items: center;
  }

  .ui-checkbox-group > legend {
    padding: 0;
    margin-block-end: 0.25rem;
    color: hsl(var(--ink));
    font-size: 0.875rem;
    font-weight: 650;
  }

  .ui-checkbox-group[aria-invalid="true"],
  .ui-checkbox-group[data-invalid="true"] {
    color: hsl(var(--danger));
  }

  .ui-password-field__control {
    position: relative;
    display: grid;
    align-items: center;
  }

  .ui-password-field__control > .ui-input {
    grid-area: 1 / 1;
    padding-inline-end: 3.25rem;
  }

  .ui-password-field__control > .ui-button {
    z-index: 1;
    grid-area: 1 / 1;
    justify-self: end;
    margin-inline-end: 0.25rem;
  }

  .ui-password-field__control > .ui-button span {
    font-size: 0.6875rem;
  }

  .ui-list-box {
    display: grid;
    gap: 0.375rem;
  }

  .ui-list-box__native[data-ui-enhanced],
  .ui-list-box__native[data-ui-list-box-enhanced="true"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ui-list-box__list {
    display: grid;
    max-height: 18rem;
    overflow: auto;
    padding: 0.25rem;
    border: 1px solid hsl(var(--line));
    border-radius: var(--ui-radius);
    background: hsl(var(--surface));
    box-shadow: var(--ui-shadow-sm);
  }

  .ui-list-box__list:focus-visible {
    outline: 2px solid hsl(var(--brand));
    outline-offset: 2px;
  }

  .ui-list-box__section {
    padding: 0.5rem 0.625rem 0.25rem;
    color: hsl(var(--ink-muted));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ui-list-box__empty,
  .ui-list-box__status {
    padding: 0.75rem 0.625rem;
    color: hsl(var(--ink-muted));
    font-size: 0.875rem;
  }

  .ui-list-box__option,
  [data-ui-list-box-option] {
    padding: 0.5rem 0.625rem;
    border-radius: var(--ui-radius-sm);
    color: hsl(var(--ink));
    cursor: default;
    font-size: 0.875rem;
  }

  .ui-list-box__option--active,
  [data-ui-list-box-option][data-active="true"] {
    background: hsl(var(--surface-muted));
  }

  .ui-list-box__option[aria-selected="true"],
  [data-ui-list-box-option][aria-selected="true"] {
    background: hsl(var(--brand-soft));
    color: hsl(var(--brand-solid));
    font-weight: 650;
  }

  .ui-list-box__option[aria-disabled="true"],
  [data-ui-list-box-option][aria-disabled="true"] {
    opacity: 0.5;
  }

  .ui-container {
    width: min(100% - 2rem, var(--ui-container-max, 72rem));
    margin-inline: auto;
  }

  .ui-container--sm {
    --ui-container-max: 40rem;
  }

  .ui-container--md {
    --ui-container-max: 56rem;
  }

  .ui-container--lg {
    --ui-container-max: 72rem;
  }

  .ui-container--full {
    width: 100%;
    max-width: none;
  }

  .ui-stack {
    display: flex;
    min-width: 0;
    gap: var(--ui-stack-gap, 1rem);
  }

  .ui-stack--vertical {
    flex-direction: column;
  }

  .ui-stack--horizontal {
    flex-direction: row;
  }

  .ui-stack--wrap {
    flex-wrap: wrap;
  }

  .ui-stack--gap-none,
  .ui-grid--gap-none {
    --ui-stack-gap: 0;
    --ui-grid-gap: 0;
  }

  .ui-stack--gap-sm,
  .ui-grid--gap-sm {
    --ui-stack-gap: 0.5rem;
    --ui-grid-gap: 0.5rem;
  }

  .ui-stack--gap-md,
  .ui-grid--gap-md {
    --ui-stack-gap: 1rem;
    --ui-grid-gap: 1rem;
  }

  .ui-stack--gap-lg,
  .ui-grid--gap-lg {
    --ui-stack-gap: 1.5rem;
    --ui-grid-gap: 1.5rem;
  }

  .ui-stack--gap-xl,
  .ui-grid--gap-xl {
    --ui-stack-gap: 2rem;
    --ui-grid-gap: 2rem;
  }

  .ui-stack--align-start {
    align-items: flex-start;
  }

  .ui-stack--align-center {
    align-items: center;
  }

  .ui-stack--align-end {
    align-items: flex-end;
  }

  .ui-stack--align-stretch {
    align-items: stretch;
  }

  .ui-stack--justify-start {
    justify-content: flex-start;
  }

  .ui-stack--justify-center {
    justify-content: center;
  }

  .ui-stack--justify-end {
    justify-content: flex-end;
  }

  .ui-stack--justify-between {
    justify-content: space-between;
  }

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

  .ui-grid--columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .ui-grid--columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-grid--columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ui-grid--columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-grid--columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ui-grid--columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ui-visually-hidden--focusable:focus,
  .ui-visually-hidden--focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}