@charset "UTF-8";
:root{
  --ring-color: var(--secondary);
  --ring-width: 0px;
  --ring-offset: 0px;
  --ring-shadow: calc(-1 * var(--space-1) * var(--dir, 1)) 0 0 0 var(--secondary);
  --surface-inset: 0px;
  --palette-count: 16;
  --palette-0-primary: #8600a7;
  --palette-0-secondary: #ff757d;
  --palette-0-tertiary: #1ec8a5;
  --palette-0-name: Neo;
  --palette-0-slug: neo;
  --palette-1-primary: #FF00FF;
  --palette-1-secondary: #FFC8A5;
  --palette-1-tertiary: #1ec8a5;
  --palette-1-name: Aurora Fuchsia;
  --palette-1-slug: aurora-fuchsia;
  --palette-2-primary: #7b27d8;
  --palette-2-secondary: #f67274;
  --palette-2-tertiary: #1ec8a5;
  --palette-2-name: Aurora Violet;
  --palette-2-slug: aurora-violet;
  --palette-3-primary: #0bbcd6;
  --palette-3-secondary: #74c0fc;
  --palette-3-tertiary: #1ec8a5;
  --palette-3-name: Cyber Teal;
  --palette-3-slug: cyber-teal;
  --palette-4-primary: #2fbf71;
  --palette-4-secondary: #FFF0C8;
  --palette-4-tertiary: #00e5e5;
  --palette-4-name: Emerald Pulse;
  --palette-4-slug: emerald-pulse;
  --palette-5-primary: #495057;
  --palette-5-secondary: #868e96;
  --palette-5-tertiary: #adb5bd;
  --palette-5-name: Graphite;
  --palette-5-slug: graphite;
  --palette-6-primary: #e03a3c;
  --palette-6-secondary: #ffe4c4;
  --palette-6-tertiary: #1ec8a5;
  --palette-6-name: Imperial Rouge;
  --palette-6-slug: imperial-rouge;
  --palette-7-primary: #2b5fd9;
  --palette-7-secondary: #3bc9db;
  --palette-7-tertiary: #5c7cfa;
  --palette-7-name: Midnight Blue;
  --palette-7-slug: midnight-blue;
  --palette-8-primary: #5f3dc4;
  --palette-8-secondary: #5B5EF7;
  --palette-8-tertiary: #9775fa;
  --palette-8-name: Royal Plum;
  --palette-8-slug: royal-plum;
  --palette-9-primary: #ff6b35;
  --palette-9-secondary: #ffd43b;
  --palette-9-tertiary: #ffa94d;
  --palette-9-name: Solar Ember;
  --palette-9-slug: solar-ember;
  --palette-10-primary: #2196F3;
  --palette-10-secondary: #00BCD4;
  --palette-10-tertiary: #009688;
  --palette-10-name: Ocean;
  --palette-10-slug: ocean;
  --palette-11-primary: #FF5722;
  --palette-11-secondary: #FFC107;
  --palette-11-tertiary: #9C27B0;
  --palette-11-name: Sunset;
  --palette-11-slug: sunset;
  --palette-12-primary: #4CAF50;
  --palette-12-secondary: #8BC34A;
  --palette-12-tertiary: #795548;
  --palette-12-name: Forest;
  --palette-12-slug: forest;
  --palette-13-primary: #3F51B5;
  --palette-13-secondary: #E91E63;
  --palette-13-tertiary: #00BCD4;
  --palette-13-name: Indigo Rose;
  --palette-13-slug: indigo-rose;
  --palette-14-primary: #FF9800;
  --palette-14-secondary: #F44336;
  --palette-14-tertiary: #FFC107;
  --palette-14-name: Amber Fire;
  --palette-14-slug: amber-fire;
  --palette-15-primary: #006064;
  --palette-15-secondary: #1A237E;
  --palette-15-tertiary: #00BFA5;
  --palette-15-name: Deep Sea;
  --palette-15-slug: deep-sea;
  --viewport-phone: 0rem;
  --viewport-tablet: 37.5rem;
  --viewport-laptop: 52.5rem;
  --viewport-desktop: 75rem;
  --viewport-wall: 100rem;
  --font-code: monospace;
  --font-size-sm: clamp(0.6875rem, 0.6875rem + (0.75rem - 0.6875rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 0.75rem);
  --font-size-body: clamp(0.75rem, 0.75rem + (0.8125rem - 0.75rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 0.8125rem);
  --font-size-lg: clamp(0.8125rem, 0.8125rem + (0.875rem - 0.8125rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 0.875rem);
  --font-size-h6: clamp(0.875rem, 0.875rem + (0.9375rem - 0.875rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 0.9375rem);
  --font-size-h5: clamp(0.9375rem, 0.9375rem + (1.0625rem - 0.9375rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 1.0625rem);
  --font-size-h4: clamp(1.0625rem, 1.0625rem + (1.25rem - 1.0625rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 1.25rem);
  --font-size-h3: clamp(1.25rem, 1.25rem + (1.5rem - 1.25rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 1.5rem);
  --font-size-h2: clamp(1.5rem, 1.5rem + (1.875rem - 1.5rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 1.875rem);
  --font-size-h1: clamp(1.875rem, 1.875rem + (2.25rem - 1.875rem) * (100vw - 37.5rem) / (100rem - 37.5rem), 2.25rem);
  --font-weight-2: 400;
  --font-weight-3: 500;
  --font-weight-4: 600;
  --font-weight-5: 700;
  --font-base: 'Inter', system-ui, sans-serif;
  --layout-navbar-height: 0;
  --dir: 1;
  --border-size: 1px;
  --border-radius: 0;
  --border-style: solid;
  color-scheme: light dark;
  --surface: #ffffff;
  --scrim: #000000;
  --primary: #840884;
  --secondary: #FF385A;
  --tertiary: #0077DE;
  --success: #28a745;
  --warning: #ffc107;
  --error: #dc3545;
  --color-opacity: 100%;
  --surface-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 97%, var(--scrim)), color-mix(in srgb, var(--surface) 12%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 82%, var(--scrim)), color-mix(in srgb, var(--surface) 22%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 62%, var(--scrim)), color-mix(in srgb, var(--surface) 42%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 52%, var(--scrim)), color-mix(in srgb, var(--surface) 62%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 32%, var(--scrim)), color-mix(in srgb, var(--surface) 72%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 22%, var(--scrim)), color-mix(in srgb, var(--surface) 82%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--surface) 12%, var(--scrim)), color-mix(in srgb, var(--surface) 92%, var(--scrim)) ) var(--color-opacity), transparent);
  --surface-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --surface-scrim: color-mix(in srgb, var(--scrim) 40%, transparent);
  --primary-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 10%, white), color-mix(in srgb, var(--primary) 20%, #292929) ) var(--color-opacity), transparent);
  --primary-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 40%, white), color-mix(in srgb, var(--primary) 40%, #292929) ) var(--color-opacity), transparent);
  --primary-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 80%, white), color-mix(in srgb, var(--primary) 80%, #292929) ) var(--color-opacity), transparent);
  --primary-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 100%, white), color-mix(in srgb, var(--primary) 80%, white) ) var(--color-opacity), transparent);
  --primary-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 60%, #292929), color-mix(in srgb, var(--primary) 60%, white) ) var(--color-opacity), transparent);
  --primary-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 40%, #292929), color-mix(in srgb, var(--primary) 40%, white) ) var(--color-opacity), transparent);
  --primary-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--primary) 20%, #292929), color-mix(in srgb, var(--primary) 20%, white) ) var(--color-opacity), transparent);
  --primary-scrim: color-mix(in srgb, var(--primary) 40%, transparent);
  --secondary-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 10%, white), color-mix(in srgb, var(--secondary) 20%, #292929) ) var(--color-opacity), transparent);
  --secondary-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 40%, white), color-mix(in srgb, var(--secondary) 40%, #292929) ) var(--color-opacity), transparent);
  --secondary-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 80%, white), color-mix(in srgb, var(--secondary) 80%, #292929) ) var(--color-opacity), transparent);
  --secondary-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 100%, white), color-mix(in srgb, var(--secondary) 80%, white) ) var(--color-opacity), transparent);
  --secondary-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 60%, #292929), color-mix(in srgb, var(--secondary) 60%, white) ) var(--color-opacity), transparent);
  --secondary-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 40%, #292929), color-mix(in srgb, var(--secondary) 40%, white) ) var(--color-opacity), transparent);
  --secondary-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--secondary) 20%, #292929), color-mix(in srgb, var(--secondary) 20%, white) ) var(--color-opacity), transparent);
  --secondary-scrim: color-mix(in srgb, var(--secondary) 40%, transparent);
  --tertiary-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 10%, white), color-mix(in srgb, var(--tertiary) 20%, #292929) ) var(--color-opacity), transparent);
  --tertiary-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 40%, white), color-mix(in srgb, var(--tertiary) 40%, #292929) ) var(--color-opacity), transparent);
  --tertiary-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 80%, white), color-mix(in srgb, var(--tertiary) 80%, #292929) ) var(--color-opacity), transparent);
  --tertiary-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 100%, white), color-mix(in srgb, var(--tertiary) 80%, white) ) var(--color-opacity), transparent);
  --tertiary-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 60%, #292929), color-mix(in srgb, var(--tertiary) 60%, white) ) var(--color-opacity), transparent);
  --tertiary-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 40%, #292929), color-mix(in srgb, var(--tertiary) 40%, white) ) var(--color-opacity), transparent);
  --tertiary-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--tertiary) 20%, #292929), color-mix(in srgb, var(--tertiary) 20%, white) ) var(--color-opacity), transparent);
  --tertiary-scrim: color-mix(in srgb, var(--tertiary) 40%, transparent);
  --success-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 10%, white), color-mix(in srgb, var(--success) 20%, #292929) ) var(--color-opacity), transparent);
  --success-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 40%, white), color-mix(in srgb, var(--success) 40%, #292929) ) var(--color-opacity), transparent);
  --success-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 80%, white), color-mix(in srgb, var(--success) 80%, #292929) ) var(--color-opacity), transparent);
  --success-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 100%, white), color-mix(in srgb, var(--success) 80%, white) ) var(--color-opacity), transparent);
  --success-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 60%, #292929), color-mix(in srgb, var(--success) 60%, white) ) var(--color-opacity), transparent);
  --success-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 40%, #292929), color-mix(in srgb, var(--success) 40%, white) ) var(--color-opacity), transparent);
  --success-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--success) 20%, #292929), color-mix(in srgb, var(--success) 20%, white) ) var(--color-opacity), transparent);
  --success-scrim: color-mix(in srgb, var(--success) 40%, transparent);
  --warning-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 10%, white), color-mix(in srgb, var(--warning) 20%, #292929) ) var(--color-opacity), transparent);
  --warning-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 40%, white), color-mix(in srgb, var(--warning) 40%, #292929) ) var(--color-opacity), transparent);
  --warning-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 80%, white), color-mix(in srgb, var(--warning) 80%, #292929) ) var(--color-opacity), transparent);
  --warning-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 100%, white), color-mix(in srgb, var(--warning) 80%, white) ) var(--color-opacity), transparent);
  --warning-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 60%, #292929), color-mix(in srgb, var(--warning) 60%, white) ) var(--color-opacity), transparent);
  --warning-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 40%, #292929), color-mix(in srgb, var(--warning) 40%, white) ) var(--color-opacity), transparent);
  --warning-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--warning) 20%, #292929), color-mix(in srgb, var(--warning) 20%, white) ) var(--color-opacity), transparent);
  --warning-scrim: color-mix(in srgb, var(--warning) 40%, transparent);
  --error-light: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 10%, white), color-mix(in srgb, var(--error) 20%, #292929) ) var(--color-opacity), transparent);
  --error-subtle: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 40%, white), color-mix(in srgb, var(--error) 40%, #292929) ) var(--color-opacity), transparent);
  --error-accent: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 80%, white), color-mix(in srgb, var(--error) 80%, #292929) ) var(--color-opacity), transparent);
  --error-normal: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 100%, white), color-mix(in srgb, var(--error) 80%, white) ) var(--color-opacity), transparent);
  --error-emphasis: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 60%, #292929), color-mix(in srgb, var(--error) 60%, white) ) var(--color-opacity), transparent);
  --error-strong: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 40%, #292929), color-mix(in srgb, var(--error) 40%, white) ) var(--color-opacity), transparent);
  --error-vivid: color-mix(in srgb, light-dark( color-mix(in srgb, var(--error) 20%, #292929), color-mix(in srgb, var(--error) 20%, white) ) var(--color-opacity), transparent);
  --error-scrim: color-mix(in srgb, var(--error) 40%, transparent);
  --body-color: light-dark(var(--scrim), var(--surface));
  --body-bg: light-dark(var(--surface), color-mix(in srgb, var(--surface) 7%, var(--scrim)));
  --elevation-size: 0 0 0;
  --motion-duration: 0.2s;
  --duration-ambient: 1.5s;
  --motion-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --motion-ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --motion-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --motion-scale: 1;
  --opacity-faint: 0.25;
  --opacity-disabled: 0.5;
  --opacity-muted: 0.75;
  --size-1: calc(var(--unit) * 2);
  --size-2: calc(var(--unit) * 4);
  --size-3: calc(var(--unit) * 8);
  --size-4: calc(var(--unit) * 12);
  --size-5: calc(var(--unit) * 20);
  --scale: 0.85;
  --scale: clamp( 0.85, calc(0.85 + (1 - 0.85) * ((100vw - 37.5rem) / (100rem - 37.5rem))), 1 );
  --unit: calc(0.5rem * var(--scale));
  --space-1: calc(var(--unit) * 0.5);
  --space-2: calc(var(--unit) * 1);
  --space-3: calc(var(--unit) * 2);
  --space-4: calc(var(--unit) * 4);
  --space-5: calc(var(--unit) * 8);
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Outfit:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300..700&display=swap");
.form-tag-input:focus-within, .form-select:focus, .inline-edit:focus-visible, .inline-edit-editing:focus, .form-check-input:focus-visible, .btn-check:focus-visible + [role=button], .form-control:focus, .carousel-control:focus-visible, .carousel-indicator:focus-visible, .breadcrumb-overflow .breadcrumb-overflow-toggle:focus-visible, .skip-link:focus, body :focus-visible:where(:not(dialog, [tabindex="-1"])) {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
  box-shadow: var(--ring-shadow);
}

.navbar :is(a, button):focus-visible, .header .header-item:focus-visible, .tab:focus-visible, .curtain-panel:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: calc(-1 * var(--ring-width));
  box-shadow: var(--ring-shadow);
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within), .table-responsive thead, .btn-check, .live-region {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background-color: var(--primary);
  color: var(--body-bg);
  font-weight: var(--font-weight-4);
  text-decoration: none;
  transform: translateY(-100%);
}
.skip-link:focus {
  transform: translateY(0);
}
.sticky-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 250;
}

.sticky-bottom, .layout-navbar, .callout-consent {
  position: sticky;
  inset-block-end: 0;
  z-index: 250;
}

.fixed-top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 251;
}

.fixed-bottom {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 251;
}

.ratio-1x1 > *, .ratio-4x3 > *, .ratio-16x9 > *, .ratio-21x9 > *, .stretched-link::after, .form-dual-range input[type=range], .parallax-overlay, .parallax-gradient, .parallax-gradient-animated, .curtain-panel::after, .card-img-overlay {
  position: absolute;
  inset: 0;
}

.translate-middle, .curtain-title {
  transform: translate(-50%, -50%);
}

.translate-middle-x, .toast-top-center, .toast-bottom-center, .timeline-vertical::before, .timeline-vertical.timeline-centered::before, .tooltip-bubble::after {
  transform: translateX(-50%);
}

.translate-middle-y, .list-tasks > li::before, .form-switch > .form-check-input::after, .form-dual-range-track, .form-dual-range-fill, .form-input-action-btn, .timeline-vertical.timeline-centered .timeline-item:nth-child(odd) .timeline-body::after, .timeline-vertical.timeline-centered .timeline-item:nth-child(even) .timeline-body::after, .timeline-horizontal.timeline-centered::before, .data-grid-filter-btn {
  transform: translateY(-50%);
}

.fade, .slide-up, .slide-down, .slide-inline-start, .slide-inline-end, [popover], menu ul[popover], menu li > ul:not([popover]), .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top, .toast-dismissing, .tab-panel-fade, .curtain-content, .tooltip-bubble {
  translate: var(--motion-translate, none);
  transform: scale(var(--motion-scale-from, 1));
  opacity: var(--motion-fade-from, 1);
  transition: translate var(--motion-duration) var(--motion-ease-exit), transform var(--motion-duration) var(--motion-ease-exit), opacity var(--motion-duration) var(--motion-ease-exit), block-size var(--motion-duration) var(--motion-ease-exit), display var(--motion-duration) allow-discrete, overlay var(--motion-duration) allow-discrete;
}

.fade-in, .slide-in, [popover]:popover-open, menu ul[popover]:popover-open, menu li > [aria-expanded=true] + ul:not([popover]), .navbar:has([aria-controls=navbar-collapse][aria-expanded=true]) .navbar-collapse, .layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar, [open].navbar-collapse, [open].drawer-bottom, [open].reconnect, dialog[open], [open].layout-sidebar, [open].drawer-start, [open].drawer-end, [open].drawer-top, .toast, .tab-panel-fade.active, .curtain-panel:is(:hover, :focus-within) .curtain-content, .tooltip-bubble[aria-hidden=false] {
  translate: none;
  transform: scale(1);
  opacity: 1;
  transition: translate var(--motion-duration) var(--motion-ease-enter), transform var(--motion-duration) var(--motion-ease-enter), opacity var(--motion-duration) var(--motion-ease-enter), block-size var(--motion-duration) var(--motion-ease-enter), display var(--motion-duration) allow-discrete, overlay var(--motion-duration) allow-discrete;
}
@starting-style {
  .fade-in, .slide-in, [popover]:popover-open, menu ul[popover]:popover-open, menu li > [aria-expanded=true] + ul:not([popover]), .navbar:has([aria-controls=navbar-collapse][aria-expanded=true]) .navbar-collapse, .layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar, [open].navbar-collapse, [open].drawer-bottom, [open].reconnect, dialog[open], [open].layout-sidebar, [open].drawer-start, [open].drawer-end, [open].drawer-top, .toast, .tab-panel-fade.active, .curtain-panel:is(:hover, :focus-within) .curtain-content, .tooltip-bubble[aria-hidden=false] {
    translate: var(--motion-translate, none);
    transform: scale(var(--motion-scale-from, 1));
    opacity: var(--motion-fade-from, 1);
  }
}

.slide-inline-start, .layout-sidebar, .drawer-start {
  --motion-translate: calc(var(--motion-distance, 100%) * -1);
}
[dir=rtl] .slide-inline-start, [dir=rtl] .layout-sidebar, [dir=rtl] .drawer-start, [dir=rtl].slide-inline-start, [dir=rtl].layout-sidebar, [dir=rtl].drawer-start {
  --motion-translate: var(--motion-distance, 100%);
}

.slide-inline-end, .drawer-end {
  --motion-translate: var(--motion-distance, 100%);
}
[dir=rtl] .slide-inline-end, [dir=rtl] .drawer-end, [dir=rtl].slide-inline-end, [dir=rtl].drawer-end {
  --motion-translate: calc(var(--motion-distance, 100%) * -1);
}

.slide-down, .drawer-top {
  --motion-translate: 0 calc(var(--motion-distance, 100%) * -1);
}

.slide-up, .navbar-collapse, .drawer-bottom, .toast, .toast-dismissing, .curtain-content {
  --motion-translate: 0 var(--motion-distance, 100%);
}

details::details-content, .collapse:has(.collapse-toggler[aria-expanded=false]) > .collapse-panel {
  interpolate-size: allow-keywords;
  block-size: 0;
  padding-block: 0;
  margin-block: 0;
  border-block-width: 0;
  overflow: hidden;
  transition: block-size var(--motion-duration) var(--motion-ease-exit), padding-block var(--motion-duration) var(--motion-ease-exit), margin-block var(--motion-duration) var(--motion-ease-exit), border-block-width var(--motion-duration) var(--motion-ease-exit);
}

details[open]::details-content, .collapse:has(.collapse-toggler[aria-expanded=true]) > .collapse-panel {
  interpolate-size: allow-keywords;
  overflow: hidden;
  block-size: auto;
  transition: block-size var(--motion-duration) var(--motion-ease-enter), padding-block var(--motion-duration) var(--motion-ease-enter), margin-block var(--motion-duration) var(--motion-ease-enter), border-block-width var(--motion-duration) var(--motion-ease-enter);
}
@starting-style {
  details[open]::details-content, .collapse:has(.collapse-toggler[aria-expanded=true]) > .collapse-panel {
    block-size: 0;
    padding-block: 0;
    margin-block: 0;
    border-block-width: 0;
  }
}

[popover], menu ul[popover], menu li > ul:not([popover]), .reconnect, dialog, .tooltip-bubble {
  --motion-scale-from: var(--motion-scale);
  transform-origin: var(--motion-origin, center);
}

.fade, .fade-in, [popover], menu ul[popover], menu li > ul:not([popover]), .reconnect, dialog, .toast, .toast-dismissing, .tab-panel-fade, .curtain-content, .tooltip-bubble {
  --motion-fade-from: 0;
}

.transition {
  transition: background var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease), border-color var(--motion-duration) var(--motion-ease), outline-color var(--motion-duration) var(--motion-ease), fill var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}

.navbar-collapse::backdrop, .drawer-bottom::backdrop, .reconnect::backdrop, dialog::backdrop, .layout-sidebar::backdrop, .drawer-start::backdrop, .drawer-end::backdrop, .drawer-top::backdrop {
  opacity: 0;
  background: var(--surface-scrim);
  transition: opacity var(--motion-duration) var(--motion-ease-exit), backdrop-filter var(--motion-duration) var(--motion-ease-exit), display var(--motion-duration) allow-discrete, overlay var(--motion-duration) allow-discrete;
}

[open].navbar-collapse::backdrop, [open].drawer-bottom::backdrop, [open].reconnect::backdrop, dialog[open]::backdrop, [open].layout-sidebar::backdrop, [open].drawer-start::backdrop, [open].drawer-end::backdrop, [open].drawer-top::backdrop {
  opacity: 1;
  transition: opacity var(--motion-duration) var(--motion-ease-enter), backdrop-filter var(--motion-duration) var(--motion-ease-enter), display var(--motion-duration) allow-discrete, overlay var(--motion-duration) allow-discrete;
}
@starting-style {
  [open].navbar-collapse::backdrop, [open].drawer-bottom::backdrop, [open].reconnect::backdrop, dialog[open]::backdrop, [open].layout-sidebar::backdrop, [open].drawer-start::backdrop, [open].drawer-end::backdrop, [open].drawer-top::backdrop {
    opacity: 0;
  }
}
@starting-style {
  [data-surface=glass] [open].navbar-collapse::backdrop, [data-surface=glass] [open].drawer-bottom::backdrop, [data-surface=glass] [open].reconnect::backdrop, [data-surface=glass] dialog[open]::backdrop, [data-surface=glass] [open].layout-sidebar::backdrop, [data-surface=glass] [open].drawer-start::backdrop, [data-surface=glass] [open].drawer-end::backdrop, [data-surface=glass] [open].drawer-top::backdrop {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
.spin, .spinner {
  animation-name: spin;
  animation-duration: var(--duration-ambient);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

[popover], .error-border, .form-select[aria-invalid=true], .form-check-input[aria-invalid=true], .form-control[aria-invalid=true], .error-outline,
[role=button].error-outline, .error-emboss,
[role=button].error-emboss, .warning-border, .warning-outline,
[role=button].warning-outline, .warning-emboss,
[role=button].warning-emboss, .success-border, .form-select[aria-invalid=false], .form-check-input[aria-invalid=false], .form-control[aria-invalid=false], .success-outline,
[role=button].success-outline, .success-emboss,
[role=button].success-emboss, .tertiary-border, .tertiary-outline,
[role=button].tertiary-outline, .tertiary-emboss,
[role=button].tertiary-emboss, .secondary-border, .secondary-outline,
[role=button].secondary-outline, .secondary-emboss,
[role=button].secondary-emboss, .primary-border, menu ul[popover] > li:has(> :is(a, button)), details > summary, .collapse > .collapse-toggler, .primary-outline,
[role=button].primary-outline, .layout-footer, .primary-emboss,
[role=button].primary-emboss, .surface-border, menu ul[popover], .form-tag-input, .form-select, .form-drop-zone, .form-check-input, .form-control, .surface-outline,
[role=button].surface-outline, .surface-emboss,
[role=button].surface-emboss, .tooltip-bubble {
  border-radius: var(--border-radius);
  border: var(--border-size) var(--border-style) var(--border-color, var(--surface-subtle));
  box-shadow: var(--border-shadow);
}

.surface-border, menu ul[popover], .form-tag-input, .form-select, .form-drop-zone, .form-check-input, .form-control, .surface-outline,
[role=button].surface-outline, .surface-emboss,
[role=button].surface-emboss, .tooltip-bubble {
  --border-color: var(--surface-normal);
}

.primary-border, menu ul[popover] > li:has(> :is(a, button)), details > summary, .collapse > .collapse-toggler, .primary-outline,
[role=button].primary-outline, .layout-footer, .primary-emboss,
[role=button].primary-emboss {
  --border-color: var(--primary-normal);
}

.secondary-border, .secondary-outline,
[role=button].secondary-outline, .secondary-emboss,
[role=button].secondary-emboss {
  --border-color: var(--secondary-normal);
}

.tertiary-border, .tertiary-outline,
[role=button].tertiary-outline, .tertiary-emboss,
[role=button].tertiary-emboss {
  --border-color: var(--tertiary-normal);
}

.success-border, .form-select[aria-invalid=false], .form-check-input[aria-invalid=false], .form-control[aria-invalid=false], .success-outline,
[role=button].success-outline, .success-emboss,
[role=button].success-emboss {
  --border-color: var(--success-normal);
}

.warning-border, .warning-outline,
[role=button].warning-outline, .warning-emboss,
[role=button].warning-emboss {
  --border-color: var(--warning-normal);
}

.error-border, .form-select[aria-invalid=true], .form-check-input[aria-invalid=true], .form-control[aria-invalid=true], .error-outline,
[role=button].error-outline, .error-emboss,
[role=button].error-emboss {
  --border-color: var(--error-normal);
}

.surface-elevation, menu ul[popover], [popover], .surface-emboss,
[role=button].surface-emboss, .tooltip-bubble {
  --elevation-color: var(--surface-elevation, var(--surface-elevation));
}

.secondary-elevation, .secondary-emboss,
[role=button].secondary-emboss {
  --elevation-color: var(--secondary-elevation, var(--surface-elevation));
}

.tertiary-elevation, .tertiary-emboss,
[role=button].tertiary-emboss {
  --elevation-color: var(--tertiary-elevation, var(--surface-elevation));
}

.success-elevation, .success-emboss,
[role=button].success-emboss {
  --elevation-color: var(--success-elevation, var(--surface-elevation));
}

.warning-elevation, .warning-emboss,
[role=button].warning-emboss {
  --elevation-color: var(--warning-elevation, var(--surface-elevation));
}

.error-elevation, .error-emboss,
[role=button].error-emboss {
  --elevation-color: var(--error-elevation, var(--surface-elevation));
}

.header, details > summary, details > :not(summary), .popover-header, .popover-body, .list > li, .list-stats > li, .reconnect, .form-select, .form-file-item, .form-dropdown-item, .form-control, .form-control[type=file]::file-selector-button, .input-group-text, .wizard-step, .timeline-vertical.timeline-centered .timeline-date, .data-grid-table th, .data-grid-table td, .collapse .collapse-panel, .collapse > .collapse-toggler, .collapse-group, .collapse-group .collapse, .card-data .card-body > *, .callout-error-boundary pre,
.callout-error-boundary code,
.callout-error-boundary .callout-stack {
  padding: var(--space-2) var(--space-3);
}

[popover] *, .navbar .navbar-home *, .navbar-collapse *, .drawer-bottom *, .reconnect *, dialog *, .layout-sidebar *, .drawer-start *, .drawer-end *, .drawer-top *, .form-chip *, .form-file-item *, .form-control[readonly] *, .input-group-text *, .data-grid-table thead tr *, .collapse-group *, .callout-surface *, .callout-consent *, .callout-offline *, .surface-tone *,
[role=button].surface-tone *, .wizard-step::before *, .surface-skin *,
[role=button].surface-skin *, .surface-fill *,
[role=button].surface-fill *, .surface-emboss *,
[role=button].surface-emboss *, .tooltip-bubble * {
  --active-blur: none;
}

.form-tag-input, .form-select, .form-drop-zone, .form-check-input, .form-control, .surface-outline,
[role=button].surface-outline {
  background: transparent;
  color: rgb(from var(--surface-emphasis) r g b/1);
}
.form-tag-input:is(a, button, [role=button]):hover, .form-select:is(a, button, [role=button]):hover, .form-drop-zone:is(a, button, [role=button]):hover, .form-check-input:is(a, button, [role=button]):hover, .form-control:is(a, button, [role=button]):hover, .surface-outline:is(a, button, [role=button]):hover {
  background: var(--surface-light);
}
.form-tag-input:is(a, button, [role=button]):active, .form-select:is(a, button, [role=button]):active, .form-drop-zone:is(a, button, [role=button]):active, .form-check-input:is(a, button, [role=button]):active, .form-control:is(a, button, [role=button]):active, .surface-outline:is(a, button, [role=button]):active {
  background: var(--surface-subtle);
}
[aria-pressed=true].form-tag-input, [aria-pressed=true].form-select, [aria-pressed=true].form-drop-zone, [aria-pressed=true].form-check-input, [aria-pressed=true].form-control, [aria-pressed=true].surface-outline, [aria-expanded=true].form-tag-input, [aria-expanded=true].form-select, [aria-expanded=true].form-drop-zone, [aria-expanded=true].form-check-input, [aria-expanded=true].form-control, [aria-expanded=true].surface-outline {
  background: var(--surface-subtle);
}

[popover], .navbar .navbar-home, .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top, .form-chip, .form-file-item, .form-control[readonly], .input-group-text, .data-grid-table thead tr, .collapse-group, .callout-surface, .callout-consent, .callout-offline, .surface-tone,
[role=button].surface-tone {
  background: var(--surface-light);
  --glass-light: color-mix(in srgb, var(--surface) 15%, transparent);
  --border-color: var(--surface-emphasis);
  color: rgb(from var(--surface-emphasis) r g b/1);
}
[popover]:is(a, button, [role=button]):hover, .navbar .navbar-home:is(a, button, [role=button]):hover, .navbar-collapse:is(a, button, [role=button]):hover, .drawer-bottom:is(a, button, [role=button]):hover, .reconnect:is(a, button, [role=button]):hover, dialog:is(a, button, [role=button]):hover, .layout-sidebar:is(a, button, [role=button]):hover, .drawer-start:is(a, button, [role=button]):hover, .drawer-end:is(a, button, [role=button]):hover, .drawer-top:is(a, button, [role=button]):hover, .form-chip:is(a, button, [role=button]):hover, .form-file-item:is(a, button, [role=button]):hover, .form-control[readonly]:is(a, button, [role=button]):hover, .input-group-text:is(a, button, [role=button]):hover, .data-grid-table thead tr:is(a, button, [role=button]):hover, .collapse-group:is(a, button, [role=button]):hover, .callout-surface:is(a, button, [role=button]):hover, .callout-consent:is(a, button, [role=button]):hover, .callout-offline:is(a, button, [role=button]):hover, .surface-tone:is(a, button, [role=button]):hover {
  background: var(--surface-subtle);
}
[popover]:is(a, button, [role=button]):active, .navbar .navbar-home:is(a, button, [role=button]):active, .navbar-collapse:is(a, button, [role=button]):active, .drawer-bottom:is(a, button, [role=button]):active, .reconnect:is(a, button, [role=button]):active, dialog:is(a, button, [role=button]):active, .layout-sidebar:is(a, button, [role=button]):active, .drawer-start:is(a, button, [role=button]):active, .drawer-end:is(a, button, [role=button]):active, .drawer-top:is(a, button, [role=button]):active, .form-chip:is(a, button, [role=button]):active, .form-file-item:is(a, button, [role=button]):active, .form-control[readonly]:is(a, button, [role=button]):active, .input-group-text:is(a, button, [role=button]):active, .data-grid-table thead tr:is(a, button, [role=button]):active, .collapse-group:is(a, button, [role=button]):active, .callout-surface:is(a, button, [role=button]):active, .callout-consent:is(a, button, [role=button]):active, .callout-offline:is(a, button, [role=button]):active, .surface-tone:is(a, button, [role=button]):active {
  background: var(--surface-accent);
}
[aria-pressed=true][popover], .navbar [aria-pressed=true].navbar-home, [aria-pressed=true].navbar-collapse, [aria-pressed=true].drawer-bottom, [aria-pressed=true].reconnect, dialog[aria-pressed=true], [aria-pressed=true].layout-sidebar, [aria-pressed=true].drawer-start, [aria-pressed=true].drawer-end, [aria-pressed=true].drawer-top, [aria-pressed=true].form-chip, [aria-pressed=true].form-file-item, [aria-pressed=true].form-control[readonly], [aria-pressed=true].input-group-text, .data-grid-table thead tr[aria-pressed=true], [aria-pressed=true].collapse-group, [aria-pressed=true].callout-surface, [aria-pressed=true].callout-consent, [aria-pressed=true].callout-offline, [aria-pressed=true].surface-tone, [aria-expanded=true][popover], .navbar [aria-expanded=true].navbar-home, [aria-expanded=true].navbar-collapse, [aria-expanded=true].drawer-bottom, [aria-expanded=true].reconnect, dialog[aria-expanded=true], [aria-expanded=true].layout-sidebar, [aria-expanded=true].drawer-start, [aria-expanded=true].drawer-end, [aria-expanded=true].drawer-top, [aria-expanded=true].form-chip, [aria-expanded=true].form-file-item, [aria-expanded=true].form-control[readonly], [aria-expanded=true].input-group-text, .data-grid-table thead tr[aria-expanded=true], [aria-expanded=true].collapse-group, [aria-expanded=true].callout-surface, [aria-expanded=true].callout-consent, [aria-expanded=true].callout-offline, [aria-expanded=true].surface-tone {
  background: var(--surface-accent);
}

.wizard-step::before, .surface-skin,
[role=button].surface-skin {
  background: var(--surface-accent);
  --glass-light: color-mix(in srgb, var(--surface) 30%, transparent);
  --border-color: var(--surface-emphasis);
  color: var(--surface);
}
.wizard-step:is(a, button, [role=button]):hover::before, .surface-skin:is(a, button, [role=button]):hover {
  background: var(--surface-normal);
}
.wizard-step:is(a, button, [role=button]):active::before, .surface-skin:is(a, button, [role=button]):active {
  background: var(--surface-emphasis);
}
[aria-pressed=true].wizard-step::before, [aria-pressed=true].surface-skin, [aria-expanded=true].wizard-step::before, [aria-expanded=true].surface-skin {
  background: var(--surface-emphasis);
}

.surface-fill,
[role=button].surface-fill {
  background: var(--surface-normal);
  --glass-light: color-mix(in srgb, var(--surface) 50%, transparent);
  --border-color: var(--surface-emphasis);
  color: oklch(from var(--surface-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.surface-fill:is(a, button, [role=button]):hover {
  background: var(--surface-emphasis);
}
.surface-fill:is(a, button, [role=button]):active {
  background: var(--surface-strong);
}
[aria-pressed=true].surface-fill, [aria-expanded=true].surface-fill {
  background: var(--surface-strong);
}

.parallax-overlay, .curtain-panel::after, .carousel-control, .card-img-overlay, .surface-scrim,
[role=button].surface-scrim {
  border-radius: inherit;
  background: var(--surface-scrim);
  color: var(--surface);
}

.surface-emboss,
[role=button].surface-emboss, .tooltip-bubble {
  background: var(--surface-emphasis);
  --glass-light: color-mix(in srgb, var(--surface) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.surface-emboss:is(a, button, [role=button]):hover, .tooltip-bubble:is(a, button, [role=button]):hover {
  background: var(--surface-strong);
}
.surface-emboss:is(a, button, [role=button]):active, .tooltip-bubble:is(a, button, [role=button]):active {
  background: var(--surface-vivid);
}
[aria-pressed=true].surface-emboss, [aria-pressed=true].tooltip-bubble, [aria-expanded=true].surface-emboss, [aria-expanded=true].tooltip-bubble {
  background: var(--surface-vivid);
}

details > summary, .collapse > .collapse-toggler, .primary-outline,
[role=button].primary-outline {
  background: transparent;
  color: rgb(from var(--primary-emphasis) r g b/1);
}
details > summary:is(a, button, [role=button]):hover, .collapse > .collapse-toggler:is(a, button, [role=button]):hover, .primary-outline:is(a, button, [role=button]):hover {
  background: var(--primary-light);
}
details > summary:is(a, button, [role=button]):active, .collapse > .collapse-toggler:is(a, button, [role=button]):active, .primary-outline:is(a, button, [role=button]):active {
  background: var(--primary-subtle);
}
details > summary[aria-pressed=true], .collapse > [aria-pressed=true].collapse-toggler, [aria-pressed=true].primary-outline, details > summary[aria-expanded=true], .collapse > [aria-expanded=true].collapse-toggler, [aria-expanded=true].primary-outline {
  background: var(--primary-subtle);
}

.layout-navbar, .primary-skin,
[role=button].primary-skin {
  background: var(--primary-accent);
  --glass-light: color-mix(in srgb, var(--primary) 30%, transparent);
  --border-color: var(--primary-emphasis);
  color: var(--surface);
}
.layout-navbar:is(a, button, [role=button]):hover, .primary-skin:is(a, button, [role=button]):hover {
  background: var(--primary-normal);
}
.layout-navbar:is(a, button, [role=button]):active, .primary-skin:is(a, button, [role=button]):active {
  background: var(--primary-emphasis);
}
[aria-pressed=true].layout-navbar, [aria-pressed=true].primary-skin, [aria-expanded=true].layout-navbar, [aria-expanded=true].primary-skin {
  background: var(--primary-emphasis);
}

.time-cell.selected, .calendar-cell.selected, .form-check-input:checked, .form-check-input:indeterminate[type=checkbox], .btn-check:checked + [role=button], .wizard-step[aria-current=step]::before, .primary-fill,
[role=button].primary-fill {
  background: var(--primary-normal);
  --glass-light: color-mix(in srgb, var(--primary) 50%, transparent);
  --border-color: var(--primary-emphasis);
  color: oklch(from var(--primary-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.time-cell.selected:is(a, button, [role=button]):hover, .calendar-cell.selected:is(a, button, [role=button]):hover, .form-check-input:is(a, button, [role=button]):hover:checked, .form-check-input[type=checkbox]:is(a, button, [role=button]):hover:indeterminate, .btn-check:checked + [role=button]:is(a, button, [role=button]):hover, .wizard-step[aria-current=step]:is(a, button, [role=button]):hover::before, .primary-fill:is(a, button, [role=button]):hover {
  background: var(--primary-emphasis);
}
.time-cell.selected:is(a, button, [role=button]):active, .calendar-cell.selected:is(a, button, [role=button]):active, .form-check-input:is(a, button, [role=button]):active:checked, .form-check-input[type=checkbox]:is(a, button, [role=button]):active:indeterminate, .btn-check:checked + [role=button]:is(a, button, [role=button]):active, .wizard-step[aria-current=step]:is(a, button, [role=button]):active::before, .primary-fill:is(a, button, [role=button]):active {
  background: var(--primary-strong);
}
[aria-pressed=true].time-cell.selected, [aria-pressed=true].calendar-cell.selected, [aria-pressed=true].form-check-input:checked, [aria-pressed=true].form-check-input[type=checkbox]:indeterminate, .btn-check:checked + [aria-pressed=true][role=button], [aria-pressed=true].wizard-step[aria-current=step]::before, [aria-pressed=true].primary-fill, [aria-expanded=true].time-cell.selected, [aria-expanded=true].calendar-cell.selected, [aria-expanded=true].form-check-input:checked, [aria-expanded=true].form-check-input[type=checkbox]:indeterminate, .btn-check:checked + [aria-expanded=true][role=button], [aria-expanded=true].wizard-step[aria-current=step]::before, [aria-expanded=true].primary-fill {
  background: var(--primary-strong);
}

.primary-scrim,
[role=button].primary-scrim {
  border-radius: inherit;
  background: var(--primary-scrim);
  color: var(--surface);
}

.layout-footer, .primary-emboss,
[role=button].primary-emboss {
  background: var(--primary-emphasis);
  --glass-light: color-mix(in srgb, var(--primary) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.layout-footer:is(a, button, [role=button]):hover, .primary-emboss:is(a, button, [role=button]):hover {
  background: var(--primary-strong);
}
.layout-footer:is(a, button, [role=button]):active, .primary-emboss:is(a, button, [role=button]):active {
  background: var(--primary-vivid);
}
[aria-pressed=true].layout-footer, [aria-pressed=true].primary-emboss, [aria-expanded=true].layout-footer, [aria-expanded=true].primary-emboss {
  background: var(--primary-vivid);
}

.secondary-outline,
[role=button].secondary-outline {
  background: transparent;
  color: rgb(from var(--secondary-emphasis) r g b/1);
}
.secondary-outline:is(a, button, [role=button]):hover {
  background: var(--secondary-light);
}
.secondary-outline:is(a, button, [role=button]):active {
  background: var(--secondary-subtle);
}
[aria-pressed=true].secondary-outline, [aria-expanded=true].secondary-outline {
  background: var(--secondary-subtle);
}

.callout-secondary, .secondary-tone,
[role=button].secondary-tone {
  background: var(--secondary-light);
  --glass-light: color-mix(in srgb, var(--secondary) 15%, transparent);
  --border-color: var(--secondary-emphasis);
  color: rgb(from var(--secondary-emphasis) r g b/1);
}
.callout-secondary:is(a, button, [role=button]):hover, .secondary-tone:is(a, button, [role=button]):hover {
  background: var(--secondary-subtle);
}
.callout-secondary:is(a, button, [role=button]):active, .secondary-tone:is(a, button, [role=button]):active {
  background: var(--secondary-accent);
}
[aria-pressed=true].callout-secondary, [aria-pressed=true].secondary-tone, [aria-expanded=true].callout-secondary, [aria-expanded=true].secondary-tone {
  background: var(--secondary-accent);
}

.secondary-skin,
[role=button].secondary-skin {
  background: var(--secondary-accent);
  --glass-light: color-mix(in srgb, var(--secondary) 30%, transparent);
  --border-color: var(--secondary-emphasis);
  color: var(--surface);
}
.secondary-skin:is(a, button, [role=button]):hover {
  background: var(--secondary-normal);
}
.secondary-skin:is(a, button, [role=button]):active {
  background: var(--secondary-emphasis);
}
[aria-pressed=true].secondary-skin, [aria-expanded=true].secondary-skin {
  background: var(--secondary-emphasis);
}

.secondary-fill,
[role=button].secondary-fill {
  background: var(--secondary-normal);
  --glass-light: color-mix(in srgb, var(--secondary) 50%, transparent);
  --border-color: var(--secondary-emphasis);
  color: oklch(from var(--secondary-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.secondary-fill:is(a, button, [role=button]):hover {
  background: var(--secondary-emphasis);
}
.secondary-fill:is(a, button, [role=button]):active {
  background: var(--secondary-strong);
}
[aria-pressed=true].secondary-fill, [aria-expanded=true].secondary-fill {
  background: var(--secondary-strong);
}

.secondary-scrim,
[role=button].secondary-scrim {
  border-radius: inherit;
  background: var(--secondary-scrim);
  color: var(--surface);
}

.secondary-emboss,
[role=button].secondary-emboss {
  background: var(--secondary-emphasis);
  --glass-light: color-mix(in srgb, var(--secondary) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.secondary-emboss:is(a, button, [role=button]):hover {
  background: var(--secondary-strong);
}
.secondary-emboss:is(a, button, [role=button]):active {
  background: var(--secondary-vivid);
}
[aria-pressed=true].secondary-emboss, [aria-expanded=true].secondary-emboss {
  background: var(--secondary-vivid);
}

.tertiary-outline,
[role=button].tertiary-outline {
  background: transparent;
  color: rgb(from var(--tertiary-emphasis) r g b/1);
}
.tertiary-outline:is(a, button, [role=button]):hover {
  background: var(--tertiary-light);
}
.tertiary-outline:is(a, button, [role=button]):active {
  background: var(--tertiary-subtle);
}
[aria-pressed=true].tertiary-outline, [aria-expanded=true].tertiary-outline {
  background: var(--tertiary-subtle);
}

.callout-tertiary, .tertiary-tone,
[role=button].tertiary-tone {
  background: var(--tertiary-light);
  --glass-light: color-mix(in srgb, var(--tertiary) 15%, transparent);
  --border-color: var(--tertiary-emphasis);
  color: rgb(from var(--tertiary-emphasis) r g b/1);
}
.callout-tertiary:is(a, button, [role=button]):hover, .tertiary-tone:is(a, button, [role=button]):hover {
  background: var(--tertiary-subtle);
}
.callout-tertiary:is(a, button, [role=button]):active, .tertiary-tone:is(a, button, [role=button]):active {
  background: var(--tertiary-accent);
}
[aria-pressed=true].callout-tertiary, [aria-pressed=true].tertiary-tone, [aria-expanded=true].callout-tertiary, [aria-expanded=true].tertiary-tone {
  background: var(--tertiary-accent);
}

.tertiary-skin,
[role=button].tertiary-skin {
  background: var(--tertiary-accent);
  --glass-light: color-mix(in srgb, var(--tertiary) 30%, transparent);
  --border-color: var(--tertiary-emphasis);
  color: var(--surface);
}
.tertiary-skin:is(a, button, [role=button]):hover {
  background: var(--tertiary-normal);
}
.tertiary-skin:is(a, button, [role=button]):active {
  background: var(--tertiary-emphasis);
}
[aria-pressed=true].tertiary-skin, [aria-expanded=true].tertiary-skin {
  background: var(--tertiary-emphasis);
}

.tertiary-fill,
[role=button].tertiary-fill {
  background: var(--tertiary-normal);
  --glass-light: color-mix(in srgb, var(--tertiary) 50%, transparent);
  --border-color: var(--tertiary-emphasis);
  color: oklch(from var(--tertiary-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.tertiary-fill:is(a, button, [role=button]):hover {
  background: var(--tertiary-emphasis);
}
.tertiary-fill:is(a, button, [role=button]):active {
  background: var(--tertiary-strong);
}
[aria-pressed=true].tertiary-fill, [aria-expanded=true].tertiary-fill {
  background: var(--tertiary-strong);
}

.tertiary-scrim,
[role=button].tertiary-scrim {
  border-radius: inherit;
  background: var(--tertiary-scrim);
  color: var(--surface);
}

.tertiary-emboss,
[role=button].tertiary-emboss {
  background: var(--tertiary-emphasis);
  --glass-light: color-mix(in srgb, var(--tertiary) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.tertiary-emboss:is(a, button, [role=button]):hover {
  background: var(--tertiary-strong);
}
.tertiary-emboss:is(a, button, [role=button]):active {
  background: var(--tertiary-vivid);
}
[aria-pressed=true].tertiary-emboss, [aria-expanded=true].tertiary-emboss {
  background: var(--tertiary-vivid);
}

.form-select[aria-invalid=false], .form-check-input[aria-invalid=false], .form-control[aria-invalid=false], .success-outline,
[role=button].success-outline {
  background: transparent;
  color: rgb(from var(--success-emphasis) r g b/1);
}
.form-select[aria-invalid=false]:is(a, button, [role=button]):hover, .form-check-input[aria-invalid=false]:is(a, button, [role=button]):hover, .form-control[aria-invalid=false]:is(a, button, [role=button]):hover, .success-outline:is(a, button, [role=button]):hover {
  background: var(--success-light);
}
.form-select[aria-invalid=false]:is(a, button, [role=button]):active, .form-check-input[aria-invalid=false]:is(a, button, [role=button]):active, .form-control[aria-invalid=false]:is(a, button, [role=button]):active, .success-outline:is(a, button, [role=button]):active {
  background: var(--success-subtle);
}
[aria-pressed=true].form-select[aria-invalid=false], [aria-pressed=true].form-check-input[aria-invalid=false], [aria-pressed=true].form-control[aria-invalid=false], [aria-pressed=true].success-outline, [aria-expanded=true].form-select[aria-invalid=false], [aria-expanded=true].form-check-input[aria-invalid=false], [aria-expanded=true].form-control[aria-invalid=false], [aria-expanded=true].success-outline {
  background: var(--success-subtle);
}

.callout-success, .success-tone,
[role=button].success-tone {
  background: var(--success-light);
  --glass-light: color-mix(in srgb, var(--success) 15%, transparent);
  --border-color: var(--success-emphasis);
  color: rgb(from var(--success-emphasis) r g b/1);
}
.callout-success:is(a, button, [role=button]):hover, .success-tone:is(a, button, [role=button]):hover {
  background: var(--success-subtle);
}
.callout-success:is(a, button, [role=button]):active, .success-tone:is(a, button, [role=button]):active {
  background: var(--success-accent);
}
[aria-pressed=true].callout-success, [aria-pressed=true].success-tone, [aria-expanded=true].callout-success, [aria-expanded=true].success-tone {
  background: var(--success-accent);
}

.success-skin,
[role=button].success-skin {
  background: var(--success-accent);
  --glass-light: color-mix(in srgb, var(--success) 30%, transparent);
  --border-color: var(--success-emphasis);
  color: var(--surface);
}
.success-skin:is(a, button, [role=button]):hover {
  background: var(--success-normal);
}
.success-skin:is(a, button, [role=button]):active {
  background: var(--success-emphasis);
}
[aria-pressed=true].success-skin, [aria-expanded=true].success-skin {
  background: var(--success-emphasis);
}

.form-check-input[aria-invalid=false]:checked, .wizard-step[aria-checked=true]::before, .success-fill,
[role=button].success-fill {
  background: var(--success-normal);
  --glass-light: color-mix(in srgb, var(--success) 50%, transparent);
  --border-color: var(--success-emphasis);
  color: oklch(from var(--success-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.form-check-input[aria-invalid=false]:is(a, button, [role=button]):hover:checked, .wizard-step[aria-checked=true]:is(a, button, [role=button]):hover::before, .success-fill:is(a, button, [role=button]):hover {
  background: var(--success-emphasis);
}
.form-check-input[aria-invalid=false]:is(a, button, [role=button]):active:checked, .wizard-step[aria-checked=true]:is(a, button, [role=button]):active::before, .success-fill:is(a, button, [role=button]):active {
  background: var(--success-strong);
}
[aria-pressed=true].form-check-input[aria-invalid=false]:checked, [aria-pressed=true].wizard-step[aria-checked=true]::before, [aria-pressed=true].success-fill, [aria-expanded=true].form-check-input[aria-invalid=false]:checked, [aria-expanded=true].wizard-step[aria-checked=true]::before, [aria-expanded=true].success-fill {
  background: var(--success-strong);
}

.success-scrim,
[role=button].success-scrim {
  border-radius: inherit;
  background: var(--success-scrim);
  color: var(--surface);
}

.success-emboss,
[role=button].success-emboss {
  background: var(--success-emphasis);
  --glass-light: color-mix(in srgb, var(--success) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.success-emboss:is(a, button, [role=button]):hover {
  background: var(--success-strong);
}
.success-emboss:is(a, button, [role=button]):active {
  background: var(--success-vivid);
}
[aria-pressed=true].success-emboss, [aria-expanded=true].success-emboss {
  background: var(--success-vivid);
}

.warning-outline,
[role=button].warning-outline {
  background: transparent;
  color: rgb(from var(--warning-emphasis) r g b/1);
}
.warning-outline:is(a, button, [role=button]):hover {
  background: var(--warning-light);
}
.warning-outline:is(a, button, [role=button]):active {
  background: var(--warning-subtle);
}
[aria-pressed=true].warning-outline, [aria-expanded=true].warning-outline {
  background: var(--warning-subtle);
}

.callout-warning, .warning-tone,
[role=button].warning-tone {
  background: var(--warning-light);
  --glass-light: color-mix(in srgb, var(--warning) 15%, transparent);
  --border-color: var(--warning-emphasis);
  color: rgb(from var(--warning-emphasis) r g b/1);
}
.callout-warning:is(a, button, [role=button]):hover, .warning-tone:is(a, button, [role=button]):hover {
  background: var(--warning-subtle);
}
.callout-warning:is(a, button, [role=button]):active, .warning-tone:is(a, button, [role=button]):active {
  background: var(--warning-accent);
}
[aria-pressed=true].callout-warning, [aria-pressed=true].warning-tone, [aria-expanded=true].callout-warning, [aria-expanded=true].warning-tone {
  background: var(--warning-accent);
}

.warning-skin,
[role=button].warning-skin {
  background: var(--warning-accent);
  --glass-light: color-mix(in srgb, var(--warning) 30%, transparent);
  --border-color: var(--warning-emphasis);
  color: var(--scrim);
}
.warning-skin:is(a, button, [role=button]):hover {
  background: var(--warning-normal);
}
.warning-skin:is(a, button, [role=button]):active {
  background: var(--warning-emphasis);
}
[aria-pressed=true].warning-skin, [aria-expanded=true].warning-skin {
  background: var(--warning-emphasis);
}

.warning-fill,
[role=button].warning-fill {
  background: var(--warning-normal);
  --glass-light: color-mix(in srgb, var(--warning) 50%, transparent);
  --border-color: var(--warning-emphasis);
  color: oklch(from var(--warning-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.warning-fill:is(a, button, [role=button]):hover {
  background: var(--warning-emphasis);
}
.warning-fill:is(a, button, [role=button]):active {
  background: var(--warning-strong);
}
[aria-pressed=true].warning-fill, [aria-expanded=true].warning-fill {
  background: var(--warning-strong);
}

.warning-scrim,
[role=button].warning-scrim {
  border-radius: inherit;
  background: var(--warning-scrim);
  color: var(--scrim);
}

.warning-emboss,
[role=button].warning-emboss {
  background: var(--warning-emphasis);
  --glass-light: color-mix(in srgb, var(--warning) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.warning-emboss:is(a, button, [role=button]):hover {
  background: var(--warning-strong);
}
.warning-emboss:is(a, button, [role=button]):active {
  background: var(--warning-vivid);
}
[aria-pressed=true].warning-emboss, [aria-expanded=true].warning-emboss {
  background: var(--warning-vivid);
}

.form-select[aria-invalid=true], .form-check-input[aria-invalid=true], .form-control[aria-invalid=true], .error-outline,
[role=button].error-outline {
  background: transparent;
  color: rgb(from var(--error-emphasis) r g b/1);
}
.form-select[aria-invalid=true]:is(a, button, [role=button]):hover, .form-check-input[aria-invalid=true]:is(a, button, [role=button]):hover, .form-control[aria-invalid=true]:is(a, button, [role=button]):hover, .error-outline:is(a, button, [role=button]):hover {
  background: var(--error-light);
}
.form-select[aria-invalid=true]:is(a, button, [role=button]):active, .form-check-input[aria-invalid=true]:is(a, button, [role=button]):active, .form-control[aria-invalid=true]:is(a, button, [role=button]):active, .error-outline:is(a, button, [role=button]):active {
  background: var(--error-subtle);
}
[aria-pressed=true].form-select[aria-invalid=true], [aria-pressed=true].form-check-input[aria-invalid=true], [aria-pressed=true].form-control[aria-invalid=true], [aria-pressed=true].error-outline, [aria-expanded=true].form-select[aria-invalid=true], [aria-expanded=true].form-check-input[aria-invalid=true], [aria-expanded=true].form-control[aria-invalid=true], [aria-expanded=true].error-outline {
  background: var(--error-subtle);
}

.form-error-summary, .callout-error, .callout-error-boundary, .callout-error-boundary pre,
.callout-error-boundary code,
.callout-error-boundary .callout-stack, .error-tone,
[role=button].error-tone {
  background: var(--error-light);
  --glass-light: color-mix(in srgb, var(--error) 15%, transparent);
  --border-color: var(--error-emphasis);
  color: rgb(from var(--error-emphasis) r g b/1);
}
.form-error-summary:is(a, button, [role=button]):hover, .callout-error:is(a, button, [role=button]):hover, .callout-error-boundary:is(a, button, [role=button]):hover, .callout-error-boundary pre:is(a, button, [role=button]):hover,
.callout-error-boundary code:is(a, button, [role=button]):hover,
.callout-error-boundary .callout-stack:is(a, button, [role=button]):hover, .error-tone:is(a, button, [role=button]):hover {
  background: var(--error-subtle);
}
.form-error-summary:is(a, button, [role=button]):active, .callout-error:is(a, button, [role=button]):active, .callout-error-boundary:is(a, button, [role=button]):active, .callout-error-boundary pre:is(a, button, [role=button]):active,
.callout-error-boundary code:is(a, button, [role=button]):active,
.callout-error-boundary .callout-stack:is(a, button, [role=button]):active, .error-tone:is(a, button, [role=button]):active {
  background: var(--error-accent);
}
[aria-pressed=true].form-error-summary, [aria-pressed=true].callout-error, [aria-pressed=true].callout-error-boundary, .callout-error-boundary pre[aria-pressed=true],
.callout-error-boundary code[aria-pressed=true],
.callout-error-boundary [aria-pressed=true].callout-stack, [aria-pressed=true].error-tone, [aria-expanded=true].form-error-summary, [aria-expanded=true].callout-error, [aria-expanded=true].callout-error-boundary, .callout-error-boundary pre[aria-expanded=true],
.callout-error-boundary code[aria-expanded=true],
.callout-error-boundary [aria-expanded=true].callout-stack, [aria-expanded=true].error-tone {
  background: var(--error-accent);
}

.error-skin,
[role=button].error-skin {
  background: var(--error-accent);
  --glass-light: color-mix(in srgb, var(--error) 30%, transparent);
  --border-color: var(--error-emphasis);
  color: var(--surface);
}
.error-skin:is(a, button, [role=button]):hover {
  background: var(--error-normal);
}
.error-skin:is(a, button, [role=button]):active {
  background: var(--error-emphasis);
}
[aria-pressed=true].error-skin, [aria-expanded=true].error-skin {
  background: var(--error-emphasis);
}

.form-check-input[aria-invalid=true]:checked, .error-fill,
[role=button].error-fill {
  background: var(--error-normal);
  --glass-light: color-mix(in srgb, var(--error) 50%, transparent);
  --border-color: var(--error-emphasis);
  color: oklch(from var(--error-normal) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.form-check-input[aria-invalid=true]:is(a, button, [role=button]):hover:checked, .error-fill:is(a, button, [role=button]):hover {
  background: var(--error-emphasis);
}
.form-check-input[aria-invalid=true]:is(a, button, [role=button]):active:checked, .error-fill:is(a, button, [role=button]):active {
  background: var(--error-strong);
}
[aria-pressed=true].form-check-input[aria-invalid=true]:checked, [aria-pressed=true].error-fill, [aria-expanded=true].form-check-input[aria-invalid=true]:checked, [aria-expanded=true].error-fill {
  background: var(--error-strong);
}

.error-scrim,
[role=button].error-scrim {
  border-radius: inherit;
  background: var(--error-scrim);
  color: var(--surface);
}

.error-emboss,
[role=button].error-emboss {
  background: var(--error-emphasis);
  --glass-light: color-mix(in srgb, var(--error) 70%, transparent);
  color: rgb(from var(--body-bg) r g b/1);
}
.error-emboss:is(a, button, [role=button]):hover {
  background: var(--error-strong);
}
.error-emboss:is(a, button, [role=button]):active {
  background: var(--error-vivid);
}
[aria-pressed=true].error-emboss, [aria-expanded=true].error-emboss {
  background: var(--error-vivid);
}

.tooltip-bubble {
  position: fixed;
  z-index: 700;
  inline-size: max-content;
  max-inline-size: calc(16rem * var(--scale));
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-3);
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  pointer-events: none;
}
.tooltip-bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  border: 0.4rem solid transparent;
  border-block-start-color: var(--surface-emphasis);
  border-block-end-width: 0;
}
.tooltip-bubble.tooltip-bubble-below::after {
  inset-block-start: auto;
  inset-block-end: 100%;
  border-block-start-color: transparent;
  border-block-start-width: 0;
  border-block-end-width: 0.4rem;
  border-block-end-color: var(--surface-emphasis);
}

:root[data-palette=neo] {
  --primary: #8600a7;
  --secondary: #ff757d;
  --tertiary: #1ec8a5;
}

:root[data-palette=aurora-fuchsia] {
  --primary: #FF00FF;
  --secondary: #FFC8A5;
  --tertiary: #1ec8a5;
}

:root[data-palette=aurora-violet] {
  --primary: #7b27d8;
  --secondary: #f67274;
  --tertiary: #1ec8a5;
}

:root[data-palette=cyber-teal] {
  --primary: #0bbcd6;
  --secondary: #74c0fc;
  --tertiary: #1ec8a5;
}

:root[data-palette=emerald-pulse] {
  --primary: #2fbf71;
  --secondary: #FFF0C8;
  --tertiary: #00e5e5;
}

:root[data-palette=graphite] {
  --primary: #495057;
  --secondary: #868e96;
  --tertiary: #adb5bd;
}

:root[data-palette=imperial-rouge] {
  --primary: #e03a3c;
  --secondary: #ffe4c4;
  --tertiary: #1ec8a5;
}

:root[data-palette=midnight-blue] {
  --primary: #2b5fd9;
  --secondary: #3bc9db;
  --tertiary: #5c7cfa;
}

:root[data-palette=royal-plum] {
  --primary: #5f3dc4;
  --secondary: #5B5EF7;
  --tertiary: #9775fa;
}

:root[data-palette=solar-ember] {
  --primary: #ff6b35;
  --secondary: #ffd43b;
  --tertiary: #ffa94d;
}

:root[data-palette=ocean] {
  --primary: #2196F3;
  --secondary: #00BCD4;
  --tertiary: #009688;
}

:root[data-palette=sunset] {
  --primary: #FF5722;
  --secondary: #FFC107;
  --tertiary: #9C27B0;
}

:root[data-palette=forest] {
  --primary: #4CAF50;
  --secondary: #8BC34A;
  --tertiary: #795548;
}

:root[data-palette=indigo-rose] {
  --primary: #3F51B5;
  --secondary: #E91E63;
  --tertiary: #00BCD4;
}

:root[data-palette=amber-fire] {
  --primary: #FF9800;
  --secondary: #F44336;
  --tertiary: #FFC107;
}

:root[data-palette=deep-sea] {
  --primary: #006064;
  --secondary: #1A237E;
  --tertiary: #00BFA5;
}

.visible-phone {
  display: revert-layer;
}

.hidden-phone {
  display: none;
}

.visible-phone {
  display: none;
}

.hidden-phone {
  display: revert-layer;
}

.visible-tablet {
  display: none;
}

.hidden-tablet {
  display: revert-layer;
}

.visible-laptop {
  display: none;
}

.hidden-laptop {
  display: revert-layer;
}

.visible-desktop {
  display: none;
}

.hidden-desktop {
  display: revert-layer;
}

.visible-wall {
  display: none;
}

.hidden-wall {
  display: revert-layer;
}

@container (min-width: 37.5rem) {
  .visible-phone {
    display: none;
  }
  .hidden-phone {
    display: revert-layer;
  }
}
@container (min-width: 0rem) and (max-width: calc(37.5rem - 0.0625rem)) {
  .visible-phone {
    display: revert-layer;
  }
  .hidden-phone {
    display: none;
  }
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .visible-tablet {
    display: revert-layer;
  }
  .hidden-tablet {
    display: none;
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .visible-laptop {
    display: revert-layer;
  }
  .hidden-laptop {
    display: none;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .visible-desktop {
    display: revert-layer;
  }
  .hidden-desktop {
    display: none;
  }
}
@container (min-width: 100rem) {
  .visible-wall {
    display: revert-layer;
  }
  .hidden-wall {
    display: none;
  }
}
.list > li[aria-disabled=true], .form-select:disabled, .star-rating[aria-disabled=true] .star-rating-star, .form-range:disabled, .inline-edit.inline-edit-disabled, .calendar-cell:disabled, .form-check-input:disabled, .form-check-input:disabled + .form-check-label, .btn-check:disabled + [role=button], .btn-check[disabled] + [role=button], .form-control:disabled, .tab:disabled, .data-grid-page-btn:disabled, .header .header-item:disabled, menu .menu-header:disabled, menu a:disabled, menu button:disabled, button:disabled, [role=button]:disabled, a:disabled:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:disabled, .header [aria-disabled=true].header-item, menu [aria-disabled=true].menu-header, menu a[aria-disabled=true], menu button[aria-disabled=true], button[aria-disabled=true], [aria-disabled=true][role=button], a[aria-disabled=true]:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a[aria-disabled=true] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.header .header-item, menu .menu-header, menu a, menu button, button, [role=button], a:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--border-radius);
  background: none;
  font: inherit;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  gap: var(--space-2);
  color: inherit;
}
.header .header-item:is(a, button, [role=button]), menu .menu-header:is(a, button, [role=button]), menu a:is(a, button, [role=button]), button:is(a, button, [role=button]), [role=button]:is(a, button, [role=button]), a:is(a, button, [role=button]):where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is(a, button, [role=button]) {
  cursor: pointer;
}
.header .header-item:is(a, button, [role=button]):hover, menu .menu-header:is(a, button, [role=button]):hover, menu a:is(a, button, [role=button]):hover, button:is(a, button, [role=button]):hover, [role=button]:is(a, button, [role=button]):hover, a:is(a, button, [role=button]):hover:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is(a, button, [role=button]):hover {
  background: color-mix(in srgb, var(--body-color) 8%, transparent);
}
.header .header-item:is(a, button, [role=button]):active, menu .menu-header:is(a, button, [role=button]):active, menu a:is(a, button, [role=button]):active, button:is(a, button, [role=button]):active, [role=button]:is(a, button, [role=button]):active, a:is(a, button, [role=button]):active:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is(a, button, [role=button]):active {
  background: color-mix(in srgb, var(--body-color) 12%, transparent);
}
.header .header-item:disabled, menu .menu-header:disabled, menu a:disabled, menu button:disabled, button:disabled, [role=button]:disabled, a:disabled:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:disabled, .header [aria-disabled=true].header-item, menu [aria-disabled=true].menu-header, menu a[aria-disabled=true], menu button[aria-disabled=true], button[aria-disabled=true], [aria-disabled=true][role=button], a[aria-disabled=true]:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a[aria-disabled=true] {
  pointer-events: none;
}
.header .header-item > .graphic, menu .menu-header > .graphic, menu a > .graphic, button > .graphic, [role=button] > .graphic, a:where(:has(> .button-label), :has(> .graphic:only-child)) > .graphic, .breadcrumb-overflow .breadcrumb-overflow-menu a > .graphic {
  inline-size: calc(var(--unit) * 2.25);
  block-size: calc(var(--unit) * 2.25);
  font-size: calc(var(--unit) * 2.25);
}
.header .placement-top.header-item, menu .placement-top.menu-header, menu a.placement-top, button.placement-top, .placement-top[role=button], a.placement-top:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a.placement-top, .header .placement-bottom.header-item, menu .placement-bottom.menu-header, menu a.placement-bottom, button.placement-bottom, .placement-bottom[role=button], a.placement-bottom:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a.placement-bottom {
  flex-direction: column;
}
.header .header-item:is([aria-current=page], .active), menu .menu-header:is([aria-current=page], .active), menu a:is([aria-current=page], .active), button:is([aria-current=page], .active), [role=button]:is([aria-current=page], .active), a:is([aria-current=page], .active):where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is([aria-current=page], .active) {
  font-weight: var(--font-weight-5);
  box-shadow: inset 3px 0 0 currentcolor;
}
.header .header-item:is([aria-current=page], .active).placement-top, menu .menu-header:is([aria-current=page], .active).placement-top, menu a:is([aria-current=page], .active).placement-top, button:is([aria-current=page], .active).placement-top, [role=button]:is([aria-current=page], .active).placement-top, a:is([aria-current=page], .active).placement-top:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is([aria-current=page], .active).placement-top, .header .header-item:is([aria-current=page], .active).placement-bottom, menu .menu-header:is([aria-current=page], .active).placement-bottom, menu a:is([aria-current=page], .active).placement-bottom, button:is([aria-current=page], .active).placement-bottom, [role=button]:is([aria-current=page], .active).placement-bottom, a:is([aria-current=page], .active).placement-bottom:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is([aria-current=page], .active).placement-bottom {
  box-shadow: inset 0 -3px 0 currentcolor;
}
[data-surface] .header .header-item:is([aria-current=page], .active), .header [data-surface] .header-item:is([aria-current=page], .active), [data-surface] menu .menu-header:is([aria-current=page], .active), menu [data-surface] .menu-header:is([aria-current=page], .active), [data-surface] menu a:is([aria-current=page], .active), menu [data-surface] a:is([aria-current=page], .active), [data-surface] button:is([aria-current=page], .active), [data-surface] [role=button]:is([aria-current=page], .active), [data-surface] a:is([aria-current=page], .active):where(:has(> .button-label), :has(> .graphic:only-child)), [data-surface] .breadcrumb-overflow .breadcrumb-overflow-menu a:is([aria-current=page], .active), .breadcrumb-overflow .breadcrumb-overflow-menu [data-surface] a:is([aria-current=page], .active) {
  background-color: var(--surface-light);
  box-shadow: inset 0 -2px 10px var(--surface-light);
}
.header .header-item:is(a), menu .menu-header:is(a), menu a:is(a), button:is(a), [role=button]:is(a), a:is(a):where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is(a) {
  text-decoration: none;
}
.header .header-item:is(a):visited, menu a:is(a):visited, button:is(a):visited, [role=button]:is(a):visited, a:is(a):visited:where(:has(> .button-label), :has(> .graphic:only-child)), .breadcrumb-overflow .breadcrumb-overflow-menu a:is(a):visited {
  color: inherit;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: inherit;
  list-style: none;
}

.breadcrumb-item + .breadcrumb-item {
  padding-inline-start: var(--space-2);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: inline-start;
  padding-inline-end: var(--space-2);
  color: var(--surface-normal);
  content: var(--breadcrumb-divider, "/");
}
.breadcrumb-item[aria-current=page] {
  color: var(--surface-normal);
}

.breadcrumb-overflow {
  position: relative;
}
.breadcrumb-overflow .breadcrumb-overflow-toggle {
  padding: 0;
  letter-spacing: 0.1em;
}
.breadcrumb-overflow .breadcrumb-overflow-toggle:hover {
  color: var(--primary);
}
.breadcrumb-overflow .breadcrumb-overflow-menu {
  position: absolute;
  z-index: 260;
  display: none;
  min-inline-size: calc(12rem * var(--scale));
  padding-block: var(--space-1);
  list-style: none;
  transform-origin: top center;
}
[aria-expanded=true] + .breadcrumb-overflow .breadcrumb-overflow-menu {
  display: block;
}
.breadcrumb-overflow .breadcrumb-overflow-menu a {
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}

.callout {
  position: relative;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  margin-block-end: var(--space-3);
  border-inline-start: none;
}
.callout::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  background-color: transparent;
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
.callout a {
  font-weight: var(--font-weight-5);
}

.callout-dismissible {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.callout-dismissible .callout-dismiss {
  align-self: flex-end;
}
@container (min-width: 37.5rem) {
  .callout-dismissible {
    display: block;
    padding-inline-end: calc(var(--space-4) * 3);
  }
  .callout-dismissible .callout-dismiss {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    padding: var(--space-3) var(--space-4);
  }
}

.callout-surface::before {
  background-color: var(--surface);
}

.callout-primary::before {
  background-color: var(--primary);
}

.callout-secondary::before {
  background-color: var(--secondary);
}

.callout-tertiary::before {
  background-color: var(--tertiary);
}

.callout-success::before {
  background-color: var(--success);
}

.callout-warning::before {
  background-color: var(--warning);
}

.callout-error::before {
  background-color: var(--error);
}

.callout-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  margin-block-end: 0;
  border-radius: 0;
}
.callout-consent::before {
  display: none;
}
.callout-consent > :last-child {
  margin-inline-start: auto;
}

.callout-offline {
  text-align: center;
  padding-block: var(--space-5);
  padding-inline: var(--space-4);
}
.callout-offline::before {
  background-color: var(--surface-subtle);
}
.callout-offline .callout-icon {
  display: inline-block;
  margin-block-end: var(--space-3);
  animation: callout-pulse calc(var(--duration-ambient) * 1.33) var(--motion-ease) infinite;
}

.callout-error-boundary::before {
  background-color: var(--error);
}
.callout-error-boundary pre,
.callout-error-boundary code,
.callout-error-boundary .callout-stack {
  margin-block-start: var(--space-3);
  overflow-inline: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes callout-pulse {
  50% {
    scale: 1.1;
  }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow-wrap: break-word;
  overflow: hidden;
  background-color: var(--body-bg);
  border-radius: var(--border-radius);
}

.card-body {
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-4);
}

.card-title {
  margin-block-end: var(--space-2);
}

.card-subtitle {
  margin-block-start: calc(-0.5 * var(--space-2));
  margin-block-end: 0;
}

.card-link + .card-link {
  margin-inline-start: var(--space-4);
}

.card-header,
.card-footer {
  padding: var(--space-2) var(--space-4);
}

.card-header {
  border-block-end: var(--border-size) solid var(--surface-accent);
}
.card-header:first-child {
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}

.card-footer {
  border-block-start: var(--border-size) solid var(--surface-accent);
}
.card-footer:last-child {
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  inline-size: 100%;
}

.card-img,
.card-img-top {
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
}

.card-img-bottom {
  border-end-start-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}

.card-img-overlay {
  padding: var(--space-4);
  border-radius: var(--border-radius);
}

.card-data .card-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  padding: 0;
}
.card-data .card-body > *:nth-child(4n+3),
.card-data .card-body > *:nth-child(4n+4) {
  background-color: var(--surface-light);
}
.card-data .card-body > *:nth-child(even) {
  font-family: var(--font-code);
  text-align: end;
}

.card-kpi .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
.card-kpi .card-title {
  line-height: 1;
  margin-block-end: 0;
}
.card-kpi .card-subtitle {
  opacity: var(--opacity-muted);
  margin-block-start: 0;
}
.card-kpi [data-trend] {
  font-weight: var(--font-weight-4);
}
.card-kpi [data-trend=up] {
  color: var(--success);
}
.card-kpi [data-trend=down] {
  color: var(--error);
}

.card-group {
  display: flex;
  flex-flow: row wrap;
}
.card-group > .card {
  flex: 1 0 0%;
  margin-block-end: 0;
}
.card-group > .card:not(:last-child) {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}
.card-group > .card:not(:first-child) {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}

.card-hoverable:hover {
  translate: 0 -0.25rem;
}

.circle, .circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --border-radius: 50%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  text-align: center;
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.carousel-track {
  display: flex;
}

.carousel-slide {
  flex: 0 0 100%;
  min-inline-size: 0;
}
.carousel-slide img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline: 10%;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  color: var(--surface);
  text-align: center;
  z-index: 10;
}

.carousel-fade .carousel-track {
  display: block;
  position: relative;
}
.carousel-fade .carousel-slide {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.carousel-fade .carousel-slide[aria-hidden=false] {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

.carousel-control {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.carousel-control:hover {
  background-color: var(--surface);
}
.carousel-prev {
  inset-inline-start: var(--space-2);
}

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

.carousel-indicators {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  z-index: 10;
}

.carousel-indicator {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  min-block-size: 0;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: var(--surface-scrim);
  cursor: pointer;
}
.carousel-indicator:hover {
  background-color: var(--surface);
}
.carousel-indicator[aria-selected=true] {
  background-color: var(--surface);
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding-block: 0.35em;
  padding-inline: 0.65em;
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--border-radius);
  inline-size: fit-content;
}
.chip:empty {
  display: none;
}

.clipboard {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.clipboard:hover, .clipboard:active {
  background: transparent;
  color: var(--primary);
}

.code-block {
  overflow: hidden;
  border-radius: var(--border-radius);
}
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--border-radius);
}

pre {
  overflow: auto;
}

a > code {
  color: inherit;
}

.hljs {
  --code-block-hljs-color: #000000;
  --code-block-hljs-keyword: #0000ff;
  --code-block-hljs-string: #a31515;
  --code-block-hljs-comment: #008000;
  --code-block-hljs-number: #098658;
  --code-block-hljs-tag: #800000;
  --code-block-hljs-name: #001080;
  --code-block-hljs-type: #2b91af;
  --code-block-hljs-function: #795e26;
}

.hljs {
  color: var(--code-block-hljs-color);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-selector-pseudo,
.hljs-selector-id,
.hljs-selector-class {
  color: var(--code-block-hljs-keyword);
}

.hljs-string,
.hljs-attr,
.hljs-template-variable {
  color: var(--code-block-hljs-string);
}

.hljs-comment,
.hljs-quote {
  color: var(--code-block-hljs-comment);
  font-style: italic;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-regexp {
  color: var(--code-block-hljs-number);
}

.hljs-tag,
.hljs-built_in,
.hljs-builtin-name {
  color: var(--code-block-hljs-tag);
}

.hljs-name,
.hljs-attribute,
.hljs-property {
  color: var(--code-block-hljs-name);
}

.hljs-type,
.hljs-class,
.hljs-title.class_ {
  color: var(--code-block-hljs-type);
}

.hljs-title,
.hljs-title.function_,
.hljs-function .hljs-title {
  color: var(--code-block-hljs-function);
}

.collapse {
  display: flex;
  flex-direction: column;
}
.collapse.placement-bottom {
  flex-direction: column-reverse;
}
.collapse > .collapse-toggler {
  inline-size: 100%;
}

@container (min-width: 37.5rem) {
  .collapse.collapse-below-tablet .collapse-toggler {
    display: none;
  }
  .collapse.collapse-below-tablet:has(.collapse-toggler) > .collapse-panel {
    block-size: auto;
    padding-block: var(--space-2);
    overflow: visible;
  }
}

@container (min-width: 52.5rem) {
  .collapse.collapse-below-laptop .collapse-toggler {
    display: none;
  }
  .collapse.collapse-below-laptop:has(.collapse-toggler) > .collapse-panel {
    block-size: auto;
    padding-block: var(--space-2);
    overflow: visible;
  }
}

@container (min-width: 75rem) {
  .collapse.collapse-below-desktop .collapse-toggler {
    display: none;
  }
  .collapse.collapse-below-desktop:has(.collapse-toggler) > .collapse-panel {
    block-size: auto;
    padding-block: var(--space-2);
    overflow: visible;
  }
}

@container (min-width: 100rem) {
  .collapse.collapse-below-wall .collapse-toggler {
    display: none;
  }
  .collapse.collapse-below-wall:has(.collapse-toggler) > .collapse-panel {
    block-size: auto;
    padding-block: var(--space-2);
    overflow: visible;
  }
}

.collapse-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}
[data-surface] .collapse-group .collapse {
  overflow: hidden;
  border: none;
}
[data-surface] .collapse-group .collapse .collapse-toggler {
  overflow: hidden;
  border: none;
}

.curtain {
  display: flex;
  position: relative;
  block-size: 100dvh;
  align-items: stretch;
  justify-content: center;
}

.curtain-panel {
  flex-basis: 33.33%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  transition: flex-basis var(--motion-duration) var(--motion-ease);
}
.curtain-panel:is(:hover, :focus-within) {
  flex-basis: 50%;
}
.curtain-panel::after {
  content: "";
  transition: opacity var(--motion-duration) var(--motion-ease);
}
.curtain-panel:is(:hover, :focus-within)::after {
  opacity: var(--opacity-disabled);
}

.curtain-title {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 10;
  pointer-events: none;
  font-weight: var(--font-weight-4);
  text-align: center;
  opacity: 1;
  transition: transform var(--motion-duration) var(--motion-ease), opacity var(--motion-duration) var(--motion-ease);
}
.curtain-panel:is(:hover, :focus-within) .curtain-title {
  transform: translate(-50%, -70%);
  opacity: 0;
}

.curtain-content {
  z-index: 10;
  --motion-distance: var(--space-2);
}
@container (max-width: calc(37.5rem - 0.0625rem)) {
  .curtain {
    flex-direction: column;
    block-size: auto;
  }
  .curtain-panel {
    flex-basis: auto;
    padding: var(--space-4);
    block-size: 100dvh;
  }
  .curtain-panel:is(:hover, :focus-within) {
    flex-basis: auto;
  }
}
.data-chart {
  position: relative;
  inline-size: 100%;
}

.data-chart-svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}
.data-chart-svg text {
  font-family: inherit;
}

.data-chart-sparkline {
  inline-size: var(--size-5);
  block-size: calc(var(--unit) * 5);
  display: inline-block;
  vertical-align: middle;
}

.data-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  padding-block-start: var(--space-2);
  font-size: var(--font-size-sm);
}

.data-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--surface-strong);
}

.data-chart-legend-swatch {
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--border-radius);
}

.data-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(12rem * var(--scale));
  color: var(--surface-accent);
  font-style: italic;
}

.chevron, details > summary::after {
  --rotate: 45deg;
  display: inline-block;
  flex-shrink: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 0.1rem solid currentColor;
  border-block-end: 0.1rem solid currentColor;
  rotate: var(--rotate);
  transform: translateY(-0.125em);
  transition: rotate var(--motion-duration) var(--motion-ease);
}

.data-grid {
  inline-size: 100%;
  overflow-x: auto;
}

.data-grid-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.data-grid-table th {
  text-align: start;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-4);
  letter-spacing: 0.025em;
  border-block-end: 2px solid var(--surface-subtle);
  white-space: nowrap;
  user-select: none;
}

.data-grid-sortable {
  cursor: pointer;
}
.data-grid-sortable:hover {
  color: var(--body-color);
}
.data-grid-sortable::after {
  content: "↕";
  display: inline-block;
  margin-inline-start: var(--space-1);
  opacity: var(--opacity-faint);
  font-size: 0.625rem;
  vertical-align: middle;
  transition: opacity var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.data-grid-sortable:hover::after {
  opacity: var(--opacity-muted);
}
.data-grid-sortable[aria-sort=ascending]::after {
  content: "↑";
  opacity: 1;
}
.data-grid-sortable[aria-sort=descending]::after {
  content: "↓";
  opacity: 1;
}

.data-grid-table td {
  border-block-end: var(--border-size) solid var(--surface-light);
  vertical-align: middle;
}

.data-grid-hoverable .data-grid-table tbody tr:hover td {
  background-color: var(--surface-light);
}

.data-grid-striped .data-grid-table tbody tr:nth-child(even) td {
  background-color: var(--surface-light);
}

.data-grid-bordered .data-grid-table th, .data-grid-bordered .data-grid-table td {
  border: var(--border-size) solid var(--surface-light);
}

.data-grid-compact .data-grid-table th, .data-grid-compact .data-grid-table td {
  padding: var(--space-1) var(--space-2);
}
.data-grid-compact .data-grid-table td {
  font-size: var(--font-size-sm);
}

.data-grid-select-col {
  inline-size: calc(var(--unit) * 5);
  text-align: center;
  vertical-align: middle;
}

.data-grid-hoverable .data-grid-table tbody tr[aria-selected=true]:hover td {
  background-color: var(--primary-subtle);
}

.data-grid-filterable {
  position: relative;
  padding-inline-end: calc(var(--space-3) + 1.25rem);
}

.data-grid-col-title {
  display: inline;
}

.data-grid-filter-btn {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--surface-accent);
  cursor: pointer;
}
.data-grid-filter-btn::before {
  content: "";
  display: block;
  inline-size: 0.5rem;
  block-size: 0.4375rem;
  clip-path: polygon(0% 0%, 100% 0%, 62% 50%, 62% 100%, 38% 85%, 38% 50%);
  background-color: currentColor;
}
.data-grid-filter-btn:hover {
  color: var(--body-color);
}
.data-grid-filter-btn.data-grid-filter-btn-active {
  color: var(--primary);
}

.data-grid-filter-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-inline-size: 11rem;
  inline-size: max-content;
  z-index: 260;
  padding: var(--space-2);
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  transform-origin: top center;
}
.data-grid-filter-panel:not([hidden]) {
  display: flex;
}

.data-grid-filter-operator {
  inline-size: 100%;
  padding-block: var(--space-1);
  padding-inline: var(--space-2) var(--space-4);
  border: var(--border-size) solid var(--surface-subtle);
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--body-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - var(--space-2)) center;
}
.data-grid-filter-operator:focus {
  border-color: var(--primary);
}

.data-grid-filter-input {
  inline-size: 100%;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border: var(--border-size) solid var(--surface-subtle);
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--body-color);
  font-size: var(--font-size-sm);
}
.data-grid-filter-input::placeholder {
  color: var(--surface-accent);
}
.data-grid-filter-input:focus {
  border-color: var(--primary);
}

.data-grid-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--surface-normal);
}

.data-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  padding-inline: var(--space-1);
  gap: var(--space-2);
}

.data-grid-footer-info {
  font-size: var(--font-size-sm);
  color: var(--surface-emphasis);
}

.data-grid-footer-nav {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.data-grid-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--body-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
@container (max-width: calc(37.5rem - 0.0625rem)) {
  .data-grid-table thead {
    display: none;
  }
  .data-grid-table tbody tr {
    display: block;
    margin-block-end: var(--space-2);
  }
  .data-grid-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-block-end: var(--border-size) solid var(--surface-light);
  }
  .data-grid-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-5);
    letter-spacing: 0.025em;
    color: var(--surface-emphasis);
    margin-inline-end: var(--space-2);
  }
  .data-grid-table td:last-child {
    border-block-end: none;
  }
  .data-grid-table .data-grid-select-col {
    display: none;
  }
}

.ratio-1x1, .ratio-4x3, .ratio-16x9, .ratio-21x9, .video, .iframe {
  position: relative;
  overflow: hidden;
}

.ratio-1x1 > *, .ratio-4x3 > *, .ratio-16x9 > *, .ratio-21x9 > *, .video iframe,
.video video, .iframe iframe, .graphic-svg, .graphic-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.graphic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: currentColor;
  flex-shrink: 0;
  inline-size: var(--size-1);
  block-size: var(--size-1);
  font-size: var(--size-1);
}

.graphic-img {
  object-fit: contain;
  border-radius: inherit;
}

.graphic-standard {
  inline-size: calc(var(--unit) * 3);
  block-size: calc(var(--unit) * 3);
  font-size: calc(var(--unit) * 3);
}

.graphic-emphasis {
  inline-size: calc(var(--unit) * 4);
  block-size: calc(var(--unit) * 4);
  font-size: calc(var(--unit) * 4);
}

.graphic-feature {
  inline-size: calc(var(--unit) * 6);
  block-size: calc(var(--unit) * 6);
  font-size: calc(var(--unit) * 6);
}

.graphic-avatar {
  inline-size: calc(var(--unit) * 5);
  block-size: calc(var(--unit) * 5);
  font-size: calc(var(--unit) * 5);
  border-radius: 50%;
  overflow: hidden;
}

.graphic-avatar .graphic-img {
  object-fit: cover;
}

.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  inline-size: 100%;
  margin-block-end: var(--space-1);
}
.grid > * {
  min-inline-size: 0;
}

.grid-stack {
  display: flex;
  flex-direction: column;
}

.grid-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.grid-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.grid-sidebar {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 37.5rem) {
  .grid-sidebar {
    grid-template-columns: 2fr 1fr;
  }
}
@container (min-width: 75rem) {
  .grid-sidebar {
    grid-template-columns: 3fr 1fr;
  }
}
@container (min-width: 100rem) {
  .grid-sidebar {
    grid-template-columns: 4fr 1fr;
  }
}

.grid-bento {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 37.5rem) {
  .grid-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
  }
}

.grid-masonry {
  display: block;
  columns: 1;
}
@container (min-width: 37.5rem) {
  .grid-masonry {
    columns: 2;
  }
}
@container (min-width: 75rem) {
  .grid-masonry {
    columns: 3;
  }
}
@container (min-width: 100rem) {
  .grid-masonry {
    columns: 4;
  }
}
.grid-masonry > * {
  break-inside: avoid;
  margin-block-end: var(--space-3);
}

@container (min-width: 37.5rem) {
  .grid > .tile-fill {
    grid-column: span 2;
  }
  .grid > .tile-tall {
    grid-row: span 2;
  }
  .grid > .tile-featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}
.grid-stack > .tile-fill,
.grid-row > .tile-fill,
.grid-cluster > .tile-fill {
  flex: 1 1 auto;
  grid-column: auto;
}

.grid-stack > .tile-fixed,
.grid-row > .tile-fixed,
.grid-cluster > .tile-fixed {
  flex: 0 0 auto;
}

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

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.justify-content-start {
  justify-content: start;
}

.align-content-start {
  align-content: start;
}

.justify-content-end {
  justify-content: end;
}

.align-content-end {
  align-content: end;
}

.justify-content-center {
  justify-content: center;
}

.align-content-center {
  align-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-content-between {
  align-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.align-content-around {
  align-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-content-evenly {
  align-content: space-evenly;
}

.align-items-start {
  align-items: start;
}

.align-self-start {
  align-self: start;
}

.align-items-end {
  align-items: end;
}

.align-self-end {
  align-self: end;
}

.align-items-center {
  align-items: center;
}

.align-self-center {
  align-self: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-self-baseline {
  align-self: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-fill {
  flex: 1 1 auto;
}

.order-first {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-last {
  order: 5;
}

@container (min-width: 0rem) {
  .order-phone-first {
    order: -1;
  }
  .order-phone-0 {
    order: 0;
  }
  .order-phone-1 {
    order: 1;
  }
  .order-phone-2 {
    order: 2;
  }
  .order-phone-3 {
    order: 3;
  }
  .order-phone-4 {
    order: 4;
  }
  .order-phone-last {
    order: 5;
  }
}
@container (min-width: 37.5rem) {
  .order-tablet-first {
    order: -1;
  }
  .order-tablet-0 {
    order: 0;
  }
  .order-tablet-1 {
    order: 1;
  }
  .order-tablet-2 {
    order: 2;
  }
  .order-tablet-3 {
    order: 3;
  }
  .order-tablet-4 {
    order: 4;
  }
  .order-tablet-last {
    order: 5;
  }
}
@container (min-width: 52.5rem) {
  .order-laptop-first {
    order: -1;
  }
  .order-laptop-0 {
    order: 0;
  }
  .order-laptop-1 {
    order: 1;
  }
  .order-laptop-2 {
    order: 2;
  }
  .order-laptop-3 {
    order: 3;
  }
  .order-laptop-4 {
    order: 4;
  }
  .order-laptop-last {
    order: 5;
  }
}
@container (min-width: 75rem) {
  .order-desktop-first {
    order: -1;
  }
  .order-desktop-0 {
    order: 0;
  }
  .order-desktop-1 {
    order: 1;
  }
  .order-desktop-2 {
    order: 2;
  }
  .order-desktop-3 {
    order: 3;
  }
  .order-desktop-4 {
    order: 4;
  }
  .order-desktop-last {
    order: 5;
  }
}
@container (min-width: 100rem) {
  .order-wall-first {
    order: -1;
  }
  .order-wall-0 {
    order: 0;
  }
  .order-wall-1 {
    order: 1;
  }
  .order-wall-2 {
    order: 2;
  }
  .order-wall-3 {
    order: 3;
  }
  .order-wall-4 {
    order: 4;
  }
  .order-wall-last {
    order: 5;
  }
}
.map {
  position: relative;
  inline-size: 100%;
  min-block-size: calc(20rem * var(--scale));
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--surface-light);
}

.map-svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
}
.map-svg text {
  font-family: inherit;
}

.map-marker {
  cursor: pointer;
}
.map-marker:hover circle:first-child {
  opacity: 1;
}

.input-group, .toolbar, .pagination {
  display: inline-flex;
  max-inline-size: 100%;
  flex-wrap: wrap;
  border-radius: var(--border-radius);
}
.input-group > *, .toolbar > *, .pagination > * {
  border-radius: 0;
}
.input-group > :is(button, a), .toolbar > :is(button, a), .pagination > :is(button, a) {
  border-radius: 0;
}
[data-surface] .input-group > *, [data-surface] .toolbar > *, [data-surface] .pagination > * {
  border-radius: 0;
}
[data-surface] .input-group > :is(button, a), [data-surface] .toolbar > :is(button, a), [data-surface] .pagination > :is(button, a) {
  border-radius: 0;
}
.input-group > :first-child, .toolbar > :first-child, .pagination > :first-child {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
.input-group > :is(button, a):first-child, .toolbar > :is(button, a):first-child, .pagination > :is(button, a):first-child {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
[data-surface] .input-group > :first-child, [data-surface] .toolbar > :first-child, [data-surface] .pagination > :first-child {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
}
.input-group > :last-child, .toolbar > :last-child, .pagination > :last-child {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}
.input-group > :is(button, a):last-child, .toolbar > :is(button, a):last-child, .pagination > :is(button, a):last-child {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}
[data-surface] .input-group > :last-child, [data-surface] .toolbar > :last-child, [data-surface] .pagination > :last-child {
  border-start-end-radius: inherit;
  border-end-end-radius: inherit;
}
.input-group > * + *, .toolbar > * + *, .pagination > * + * {
  margin-inline-start: calc(var(--border-size) * -1);
}

.toolbar-vertical {
  display: inline-flex;
  flex-direction: column;
  border-radius: var(--border-radius);
}
.toolbar-vertical > * {
  border-radius: 0;
}
.toolbar-vertical > :is(button, a) {
  inline-size: 100%;
  border-radius: 0;
}
[data-surface] .toolbar-vertical > * {
  border-radius: 0;
}
[data-surface] .toolbar-vertical > :is(button, a) {
  border-radius: 0;
}
.toolbar-vertical > :first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.toolbar-vertical > :is(button, a):first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
[data-surface] .toolbar-vertical > :first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.toolbar-vertical > :last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.toolbar-vertical > :is(button, a):last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
[data-surface] .toolbar-vertical > :last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.toolbar-vertical > * + * {
  margin-block-start: calc(var(--border-size) * -1);
}

.input-group > :is(button, a), .toolbar > :is(button, a), .pagination > :is(button, a), .toolbar-vertical > :is(button, a) {
  min-inline-size: 0;
}
.input-group > :is(button, a):hover, .toolbar > :is(button, a):hover, .pagination > :is(button, a):hover, .input-group > :is(button, a):focus-visible, .toolbar > :is(button, a):focus-visible, .pagination > :is(button, a):focus-visible, .input-group > :is(button, a)[aria-pressed=true], .toolbar > :is(button, a)[aria-pressed=true], .pagination > :is(button, a)[aria-pressed=true], .input-group > :is(button, a)[aria-current=page], .toolbar > :is(button, a)[aria-current=page], .pagination > :is(button, a)[aria-current=page], .toolbar-vertical > :is(button, a):hover, .toolbar-vertical > :is(button, a):focus-visible, .toolbar-vertical > :is(button, a)[aria-pressed=true], .toolbar-vertical > :is(button, a)[aria-current=page] {
  z-index: 10;
}

.pagination > :is(button, a) {
  padding-block: var(--space-1);
}

.parallax {
  position: relative;
  display: flex;
  min-block-size: 100dvh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: center/cover no-repeat fixed;
}

.parallax-video {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 120dvh;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.parallax-content {
  position: relative;
  z-index: 10;
}

.parallax-gradient {
  inline-size: 100%;
  block-size: 100%;
}

.parallax-gradient-animated {
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(270deg, var(--primary), var(--secondary), var(--tertiary), var(--success), var(--error));
  background-size: 800% 800%;
  animation: parallax-gradient-shift calc(var(--motion-duration) * 37.5) var(--motion-ease) infinite;
}

@container (max-width: calc(37.5rem - 0.0625rem)) {
  .parallax {
    align-items: end;
  }
}
.parallax-jumbotron {
  padding-block: var(--space-5);
  padding-inline: var(--space-4);
  border-radius: var(--border-radius);
  background-color: var(--surface);
}
@container (min-width: 37.5rem) {
  .parallax-jumbotron {
    padding-block: calc(var(--space-5) * 1.5);
    padding-inline: var(--space-5);
  }
}

.parallax-jumbotron-fluid {
  padding-inline: 0;
  border-radius: var(--border-radius);
}

.parallax-jumbotron-title {
  font-weight: var(--font-weight-5);
  line-height: 1.2;
  margin-block-end: var(--space-3);
}

.parallax-jumbotron-lead {
  font-weight: var(--font-weight-2);
  color: var(--surface);
  margin-block-end: var(--space-4);
  max-inline-size: calc(40rem * var(--scale));
}

@keyframes parallax-gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}

.placeholder-item {
  display: inline-block;
  min-block-size: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: var(--opacity-disabled);
}

.placeholder-glow .placeholder-item {
  animation: placeholder-glow calc(var(--duration-ambient) * 1.33) var(--motion-ease) infinite;
}

.placeholder-wave .placeholder-item {
  mask-image: linear-gradient(130deg, currentcolor 55%, color-mix(in srgb, currentColor 80%, transparent) 75%, currentcolor 95%);
  mask-size: 200% 100%;
  animation: placeholder-wave calc(var(--duration-ambient) * 1.33) linear infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: var(--opacity-25);
  }
}
@keyframes placeholder-wave {
  from {
    mask-position: 150% center;
  }
  to {
    mask-position: -50% center;
  }
}
.ribbon {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  inline-size: 5rem;
  block-size: 5rem;
  pointer-events: none;
}
.ribbon span {
  display: block;
  inline-size: 7rem;
  padding-block: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-4);
  color: var(--body-bg);
  text-align: center;
  position: absolute;
}

.ribbon-start {
  inset-block-start: -0.3125rem;
  inset-inline-start: -0.3125rem;
}
.ribbon-start span {
  inset-block-start: 1.1875rem;
  inset-inline-start: -1.3125rem;
  transform: rotate(-45deg);
}

.ribbon-end {
  inset-block-start: -0.3125rem;
  inset-inline-end: -0.3125rem;
}
.ribbon-end span {
  inset-block-start: 1.1875rem;
  inset-inline-end: -1.3125rem;
  transform: rotate(45deg);
}

.ribbon-surface span {
  background-color: var(--surface);
}
.ribbon-surface span::before, .ribbon-surface span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--surface-emphasis);
}
.ribbon-surface span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-surface span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-primary span {
  background-color: var(--primary);
}
.ribbon-primary span::before, .ribbon-primary span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--primary-emphasis);
}
.ribbon-primary span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-primary span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-secondary span {
  background-color: var(--secondary);
}
.ribbon-secondary span::before, .ribbon-secondary span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--secondary-emphasis);
}
.ribbon-secondary span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-secondary span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-tertiary span {
  background-color: var(--tertiary);
}
.ribbon-tertiary span::before, .ribbon-tertiary span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--tertiary-emphasis);
}
.ribbon-tertiary span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-tertiary span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-success span {
  background-color: var(--success);
}
.ribbon-success span::before, .ribbon-success span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--success-emphasis);
}
.ribbon-success span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-success span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-warning span {
  background-color: var(--warning);
}
.ribbon-warning span::before, .ribbon-warning span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--warning-emphasis);
}
.ribbon-warning span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-warning span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.ribbon-error span {
  background-color: var(--error);
}
.ribbon-error span::before, .ribbon-error span::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inline-size: 3px;
  block-size: 3px;
  background-color: var(--error-emphasis);
}
.ribbon-error span::before {
  inset-inline-start: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.ribbon-error span::after {
  inset-inline-end: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.spinner {
  display: inline-block;
  inline-size: 2em;
  block-size: 2em;
  vertical-align: text-bottom;
  border: 0.15em solid currentcolor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}

.spinner-grow {
  display: inline-block;
  inline-size: 2em;
  block-size: 2em;
  vertical-align: text-bottom;
  background-color: currentcolor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-pulse calc(var(--duration-ambient) * 0.5) linear infinite;
}

.spinner-surface,
.spinner-grow.spinner-surface {
  color: var(--surface);
}

.spinner-primary,
.spinner-grow.spinner-primary {
  color: var(--primary);
}

.spinner-secondary,
.spinner-grow.spinner-secondary {
  color: var(--secondary);
}

.spinner-tertiary,
.spinner-grow.spinner-tertiary {
  color: var(--tertiary);
}

.spinner-success,
.spinner-grow.spinner-success {
  color: var(--success);
}

.spinner-warning,
.spinner-grow.spinner-warning {
  color: var(--warning);
}

.spinner-error,
.spinner-grow.spinner-error {
  color: var(--error);
}

.autosave {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875em;
  color: var(--surface-emphasis);
}

.autosave-saved {
  color: var(--success);
}

.autosave-error {
  color: var(--error);
}

@keyframes spinner-pulse {
  50% {
    opacity: 1;
  }
}
menu, menu ul, .form-file-list, ul.timeline, ol.timeline, .tabs-list[role=tablist] {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs-list {
  display: flex;
  gap: 0;
  border-block-end: 2px solid var(--body-color);
  margin-block-end: var(--space-3);
}
.tab {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  color: var(--surface-emphasis);
  font: inherit;
  font-weight: var(--font-weight-3);
  cursor: pointer;
  border-block-end: 2px solid transparent;
  margin-block-end: calc(2px * -1);
  position: relative;
  overflow: hidden;
}
.tab:hover {
  color: var(--body-color);
}
.tab[aria-selected=true] {
  color: var(--primary);
  border-block-end-color: var(--primary);
}
.tab:disabled {
  pointer-events: none;
}

.tabs-pills {
  border-block-end: none;
}
.tabs-pills .tab {
  border-radius: var(--border-radius);
  border-block-end: none;
  margin-block-end: 0;
}
.tabs-pills .tab[aria-selected=true] {
  background-color: var(--primary);
  color: var(--body-bg);
}

.tab-panel[hidden] {
  display: none;
}

.tile {
  position: relative;
  padding: var(--space-3);
  border-radius: var(--border-radius);
  margin-block-end: var(--space-3);
}
.tile .text-eyebrow {
  display: block;
  margin-block-end: var(--space-2);
}

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  --timeline-icon-size: var(--size-2);
  --timeline-icon-size-compact: var(--size-1);
  --timeline-line-width: var(--border-size, 1px);
  --timeline-line-color: var(--surface-subtle);
  --timeline-stepped-line-width: calc(var(--unit) * 0.5);
  --timeline-gap: var(--space-3);
  --timeline-gap-centered: var(--space-2);
  --timeline-date-width: var(--size-4);
}

.timeline-vertical {
  padding-block-start: var(--space-2);
}
.timeline-vertical::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: calc(var(--timeline-icon-size) / 2);
  inline-size: var(--timeline-line-width);
  background-color: var(--timeline-line-color);
  z-index: 1;
}
.timeline-vertical .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-icon-size) 1fr;
  gap: var(--timeline-gap);
  margin-block-end: var(--space-4);
}
.timeline-vertical .timeline-item:last-child {
  margin-block-end: 0;
}
.timeline-vertical .timeline-icon {
  grid-column: 1;
  justify-self: center;
  align-self: flex-start;
}
.timeline-vertical .timeline-body {
  grid-column: 2;
}

.timeline-icon {
  position: relative;
  inline-size: var(--timeline-icon-size);
  block-size: var(--timeline-icon-size);
  z-index: 10;
  box-shadow: 0 0 var(--space-2) var(--surface-light);
}
.timeline-icon:hover {
  transform: scale(1.05);
}
.timeline-icon .graphic {
  inline-size: var(--space-3);
  block-size: var(--space-3);
}

.timeline-body {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.timeline-date {
  font-weight: var(--font-weight-5);
  color: var(--surface-emphasis);
  margin-block-end: var(--space-1);
}
.timeline-date:not(.surface-fill):not([class*=-fill]) {
  padding: 0;
}

.timeline-content {
  padding: var(--space-3);
  flex: 1;
}

@container (min-width: 37.5rem) {
  .timeline-vertical.timeline-centered {
    padding-block-start: var(--space-4);
  }
  .timeline-vertical.timeline-centered::before {
    inset-inline-start: 50%;
  }
  .timeline-vertical.timeline-centered .timeline-item {
    grid-template-columns: 1fr var(--timeline-icon-size) 1fr;
    gap: var(--timeline-gap-centered);
    align-items: center;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(odd) .timeline-body {
    grid-column: 1;
    flex-direction: row-reverse;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(odd) .timeline-body::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(-1 * var(--timeline-gap-centered));
    inline-size: var(--timeline-gap-centered);
    block-size: var(--timeline-line-width);
    background-color: var(--timeline-line-color);
    z-index: 1;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(odd) .timeline-icon {
    grid-column: 2;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(even) .timeline-body {
    grid-column: 3;
    flex-direction: row;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(even) .timeline-body::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(-1 * var(--timeline-gap-centered));
    inline-size: var(--timeline-gap-centered);
    block-size: var(--timeline-line-width);
    background-color: var(--timeline-line-color);
    z-index: 1;
  }
  .timeline-vertical.timeline-centered .timeline-item:nth-child(even) .timeline-icon {
    grid-column: 2;
  }
  .timeline-vertical.timeline-centered .timeline-date {
    min-inline-size: var(--timeline-date-width);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-block-end: 0;
  }
}
@container (min-width: 37.5rem) {
  .timeline-vertical.timeline-stepped {
    padding-block-start: var(--space-4);
  }
  .timeline-vertical.timeline-stepped::before {
    display: none;
  }
  .timeline-vertical.timeline-stepped .timeline-item {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-block-end: var(--space-5);
  }
  .timeline-vertical.timeline-stepped .timeline-item::before {
    content: "";
    position: absolute;
    inset-block-start: calc(50% + var(--timeline-icon-size) / 2);
    inset-block-end: calc(-50% - var(--timeline-icon-size) / 2 - var(--space-5) / 2);
    inset-inline-start: calc(var(--timeline-icon-size) / 2);
    inset-inline-end: calc(var(--timeline-icon-size) / 2);
    z-index: 1;
  }
  .timeline-vertical.timeline-stepped .timeline-item:last-child::before {
    display: none;
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(odd) .timeline-body {
    grid-column: 1;
    margin-inline-end: var(--timeline-gap);
    text-align: end;
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(odd) .timeline-icon {
    grid-column: 2;
    justify-self: end;
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(odd)::before {
    border-inline-end: var(--timeline-stepped-line-width) solid currentColor;
    border-block-end: var(--timeline-stepped-line-width) solid currentColor;
    border-end-end-radius: var(--border-radius);
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(even) .timeline-body {
    grid-column: 2;
    margin-inline-start: var(--timeline-gap);
    text-align: start;
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(even) .timeline-icon {
    grid-column: 1;
    justify-self: start;
  }
  .timeline-vertical.timeline-stepped .timeline-item:nth-child(even)::before {
    border-inline-start: var(--timeline-stepped-line-width) solid currentColor;
    border-block-end: var(--timeline-stepped-line-width) solid currentColor;
    border-end-start-radius: var(--border-radius);
  }
}
.timeline-activity {
  --timeline-icon-size: var(--timeline-icon-size-compact);
  --timeline-gap: var(--space-2);
}
.timeline-activity .timeline-item {
  margin-block-end: var(--space-2);
}
.timeline-activity .timeline-body {
  overflow: visible;
}
.timeline-activity .timeline-content {
  padding: 0;
}
.timeline-activity .timeline-actor {
  font-weight: var(--font-weight-5);
}
.timeline-activity .timeline-action {
  color: var(--surface-emphasis);
}
.timeline-activity .timeline-timestamp {
  color: var(--surface-normal);
  font-size: var(--font-size-sm);
  margin-block-start: var(--space-1);
}

.timeline-horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--timeline-gap);
  position: relative;
  padding-block-start: var(--space-3);
  padding-block-end: var(--space-3);
  overflow-x: auto;
}
.timeline-horizontal::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: calc(var(--timeline-icon-size) / 2 + var(--space-3));
  block-size: var(--timeline-line-width);
  background-color: var(--timeline-line-color);
  z-index: 1;
}
.timeline-horizontal .timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1 0 calc(var(--unit) * 32);
  gap: var(--space-2);
}
.timeline-horizontal .timeline-icon {
  align-self: flex-start;
}
.timeline-horizontal .timeline-body {
  inline-size: 100%;
}

.timeline-horizontal.timeline-centered {
  min-block-size: calc(var(--unit) * 44);
  align-items: center;
  padding-block-start: var(--space-5);
  padding-block-end: var(--space-5);
}
.timeline-horizontal.timeline-centered::before {
  inset-block-start: 50%;
}
.timeline-horizontal.timeline-centered .timeline-item {
  block-size: 50%;
  justify-content: flex-end;
}
.timeline-horizontal.timeline-centered .timeline-item .timeline-icon {
  position: absolute;
  inset-block-start: calc(100% - var(--timeline-icon-size) / 2);
}
.timeline-horizontal.timeline-centered .timeline-item .timeline-body {
  margin-block-end: calc(var(--timeline-icon-size) / 2 + var(--space-2));
}
.timeline-horizontal.timeline-centered .timeline-item:nth-child(even) {
  margin-block-start: calc(var(--unit) * 22);
  justify-content: flex-start;
}
.timeline-horizontal.timeline-centered .timeline-item:nth-child(even) .timeline-icon {
  inset-block-start: calc(-1 * var(--timeline-icon-size) / 2);
}
.timeline-horizontal.timeline-centered .timeline-item:nth-child(even) .timeline-body {
  margin-block-start: calc(var(--timeline-icon-size) / 2 + var(--space-2));
  margin-block-end: 0;
}

.toast-container {
  position: fixed;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  pointer-events: none;
}

.toast-top-start {
  inset-block-start: 0;
  inset-inline-start: 0;
  flex-direction: column-reverse;
}

.toast-top-center {
  inset-block-start: 0;
  inset-inline-start: 50%;
  align-items: center;
  flex-direction: column-reverse;
}

.toast-top-end {
  inset-block-start: 0;
  inset-inline-end: 0;
  flex-direction: column-reverse;
}

.toast-bottom-start {
  inset-block-end: 0;
  inset-inline-start: 0;
}

.toast-bottom-center {
  inset-block-end: 0;
  inset-inline-start: 50%;
  align-items: center;
}

.toast-bottom-end {
  inset-block-end: 0;
  inset-inline-end: 0;
}

.toast {
  --toast-slide-distance: 1rem;
  pointer-events: auto;
  min-inline-size: calc(18rem * var(--scale));
  max-inline-size: calc(24rem * var(--scale));
  padding: var(--space-3) var(--space-4);
  background-color: var(--body-bg);
  --motion-distance: var(--toast-slide-distance);
}

.toast-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-1);
  font-weight: var(--font-weight-4);
}

.toast-body {
  color: var(--surface-strong);
}

.toast-surface {
  border-inline-start: 4px solid var(--surface);
}

.toast-scrim {
  border-inline-start: 4px solid var(--scrim);
}

.toast-primary {
  border-inline-start: 4px solid var(--primary);
}

.toast-secondary {
  border-inline-start: 4px solid var(--secondary);
}

.toast-tertiary {
  border-inline-start: 4px solid var(--tertiary);
}

.toast-success {
  border-inline-start: 4px solid var(--success);
}

.toast-warning {
  border-inline-start: 4px solid var(--warning);
}

.toast-error {
  border-inline-start: 4px solid var(--error);
}

.viewport-simulator-tablet, .viewport-simulator-phone {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-subtle);
  overflow: hidden;
}

.viewport-simulator-bezel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-light);
  border-block-end: var(--border-size) var(--border-style) var(--surface-subtle);
}

.viewport-simulator-notch {
  border-radius: 1rem;
  background-color: var(--surface-subtle);
}

.viewport-simulator-screen {
  flex: 1;
  container-type: inline-size;
  overflow: auto;
  background-color: var(--body-bg);
}

.viewport-simulator-phone {
  max-inline-size: 23.4375rem;
  aspect-ratio: 9/19.5;
  border-radius: 2.5rem;
}
.viewport-simulator-phone .viewport-simulator-bezel {
  padding-block: 0.5rem;
}
.viewport-simulator-phone .viewport-simulator-notch {
  inline-size: 5rem;
  block-size: 0.375rem;
}

.viewport-simulator-tablet {
  max-inline-size: 48rem;
  aspect-ratio: 4/3;
  border-radius: 1.25rem;
}
.viewport-simulator-tablet .viewport-simulator-bezel {
  padding-block: 0.375rem;
}
.viewport-simulator-tablet .viewport-simulator-notch {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
}

.wizard-steps {
  display: flex;
  gap: var(--space-1);
  margin-block-end: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.wizard-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-3);
  color: var(--surface-normal);
  counter-increment: step;
}
.wizard-step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-4);
  flex-shrink: 0;
}
.wizard-step[aria-current=step] {
  color: var(--primary);
}
.wizard-step[aria-checked=true] {
  color: var(--success);
}
.wizard-body {
  margin-block-end: var(--space-4);
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

[role=button] {
  cursor: pointer;
}

[type=search]::-webkit-search-cancel-button {
  cursor: pointer;
  filter: grayscale(1);
}

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

legend {
  display: block;
  inline-size: 100%;
  padding: 0;
  margin-block-end: var(--space-2);
  line-height: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-4);
}
legend + * {
  clear: inline-start;
}

.form-control {
  display: block;
  inline-size: 100%;
  color: var(--body-color);
  background-color: var(--body-bg);
  background-clip: padding-box;
  appearance: none;
}
.form-control::placeholder {
  color: var(--surface-normal);
}
.form-control:hover:not(:disabled):not([readonly]) {
  --border-color: var(--surface-normal);
}
.form-control:focus {
  --border-color: var(--primary);
}
.form-control[aria-invalid=true] {
  color: var(--body-color);
}
.form-control[aria-invalid=true]:focus {
  outline-color: var(--error);
}
.form-control[aria-invalid=false] {
  color: var(--body-color);
}
.form-control[aria-invalid=false]:focus {
  outline-color: var(--success);
}

textarea.form-control {
  min-block-size: calc(var(--unit) * 10);
  resize: vertical;
}
textarea.form-control.form-control-autoresize {
  field-sizing: content;
  resize: none;
}

.form-control[type=file] {
  overflow: hidden;
  cursor: pointer;
}
.form-control[type=file]::file-selector-button {
  margin-block: calc(var(--space-2) * -1);
  margin-inline-start: calc(var(--space-3) * -1);
  margin-inline-end: var(--space-3);
  color: var(--body-color);
  background-color: var(--surface-light);
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--border-size);
  border-radius: 0;
  cursor: pointer;
}
.form-control[type=file]:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--surface-subtle);
}

.form-strength-meter {
  block-size: var(--space-1);
  background: var(--surface-light);
  border-radius: var(--border-radius);
  margin-block-start: var(--space-1);
  overflow: hidden;
}

.form-strength-meter-bar {
  block-size: 100%;
  border-radius: var(--border-radius);
}
.form-strength-meter-bar[data-strength=none] {
  background: var(--surface-subtle);
}
.form-strength-meter-bar[data-strength=weak] {
  background: var(--error);
}
.form-strength-meter-bar[data-strength=fair] {
  background: var(--warning);
}
.form-strength-meter-bar[data-strength=good] {
  background: var(--tertiary);
}
.form-strength-meter-bar[data-strength=strong] {
  background: var(--success);
}

.form-input-action {
  position: relative;
}
.form-input-action .form-control {
  padding-inline-end: var(--space-4);
}

.form-input-action-btn {
  position: absolute;
  inset-inline-end: var(--space-2);
  inset-block-start: 50%;
  background: none;
  border: 0;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--surface-normal);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.form-input-action-btn:hover {
  color: var(--body-color);
}

.form-label {
  display: inline-block;
  margin-block-end: var(--space-1);
}

.col-form-label {
  display: inline-block;
  padding-block: calc(var(--space-2) + 1px);
  margin-block-end: 0;
  font-size: inherit;
  line-height: inherit;
}

.form-text {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--surface-emphasis);
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  padding-block-start: calc(var(--space-2) + var(--space-2));
  padding-block-end: var(--space-1);
}
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not(:placeholder-shown) ~ label {
  transform: scale(0.8) translateY(calc(var(--space-2) * -1));
  opacity: var(--opacity-muted);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.8) translateY(calc(var(--space-2) * -1));
  opacity: var(--opacity-muted);
}
.form-floating > .form-select ~ label {
  transform: scale(0.8) translateY(calc(var(--space-2) * -1));
  opacity: var(--opacity-muted);
}
.form-floating > label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-3);
  display: flex;
  align-items: center;
  block-size: 100%;
  padding-block: var(--space-2);
  pointer-events: none;
  transform-origin: inline-start block-start;
}
.form-floating > :disabled ~ label {
  color: var(--surface-normal);
}
.form-floating > textarea:focus ~ label::after,
.form-floating > textarea:not(:placeholder-shown) ~ label::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--space-3) * -1);
  inset-inline-end: 0;
  block-size: calc(var(--space-2) * 2 + 1em);
  background-color: var(--body-bg);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
  z-index: -1;
}
.form-floating > textarea:disabled ~ label::after {
  background-color: var(--surface-light);
}

.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  inline-size: 1%;
  min-inline-size: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 10;
}
.input-group > [role=button] {
  position: relative;
  z-index: 1;
}

.input-group-text {
  display: flex;
  align-items: center;
  font: inherit;
  white-space: nowrap;
}

.form-char-counter {
  text-align: end;
}

.valid-feedback,
.invalid-feedback {
  display: none;
  margin-block-start: var(--space-1);
}

.valid-feedback {
  color: var(--success);
}

.invalid-feedback {
  color: var(--error);
}

[aria-invalid=true] ~ .invalid-feedback,
[aria-invalid=false] ~ .valid-feedback {
  display: block;
}

.form-dropdown-anchor {
  position: relative;
}

.form-dropdown {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 260;
  background: var(--body-bg);
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) 0;
  max-block-size: calc(var(--unit) * 30);
  overflow-y: auto;
}

.form-dropdown-item {
  cursor: pointer;
}
.form-dropdown-item[aria-selected=true] {
  background: var(--primary-subtle);
}
.form-dropdown-item mark {
  background: var(--primary-accent);
  color: inherit;
  padding: 0;
  border-radius: var(--border-radius);
}

.form-cascade {
  display: flex;
  gap: var(--space-3);
}
.form-cascade > * {
  flex: 1 1 0;
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-2);
}

.form-check-input {
  flex-shrink: 0;
  inline-size: calc(var(--unit) * 2.5);
  block-size: calc(var(--unit) * 2.5);
  margin: 0;
  appearance: none;
  background-color: var(--body-bg);
  print-color-adjust: exact;
  display: grid;
}
.form-check-input::before {
  content: "";
  display: block;
  block-size: 100%;
  background-color: currentColor;
  mask: no-repeat center/contain;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:hover:not(:disabled) {
  --border-color: var(--surface-normal);
}
.form-check-input:focus-visible {
  --border-color: var(--primary);
}
.form-check-input:checked[type=checkbox]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E");
}
.form-check-input:checked[type=radio]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23000'/%3E%3C/svg%3E");
}
.form-check-input:indeterminate[type=checkbox]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E");
}
.form-check-label {
  cursor: pointer;
}
.form-check-input[aria-invalid=true] + .form-check-label {
  color: var(--error);
}
.form-check-input[aria-invalid=false] + .form-check-label {
  color: var(--success);
}

.form-check-reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.form-check-inline {
  display: inline-flex;
  margin-inline-end: var(--space-3);
}

.btn-check {
  pointer-events: none;
}
.btn-check:disabled + [role=button], .btn-check[disabled] + [role=button] {
  pointer-events: none;
}

.color-picker-panel {
  background: var(--body-bg);
  padding: var(--space-3);
  inline-size: calc(var(--unit) * 30);
}

.color-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-1);
}

.color-swatch {
  aspect-ratio: 1;
  cursor: pointer;
}
.color-swatch:hover {
  transform: scale(1.15);
}
.color-swatch.selected {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.color-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.color-preview-swatch {
  inline-size: var(--size-2);
  block-size: var(--size-2);
}

.calendar {
  inline-size: calc(var(--unit) * 35);
  background: var(--body-bg);
  padding: var(--space-3);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-2);
}

.calendar-title {
  font-weight: var(--font-weight-4);
}

.calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-radius: var(--border-radius);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-4);
  color: var(--surface-normal);
  margin-block-end: var(--space-1);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.0625rem;
}

.calendar-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 0;
  background: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}
.calendar-cell.today {
  font-weight: var(--font-weight-5);
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}
.calendar-cell.selected {
  font-weight: var(--font-weight-4);
}
.calendar-cell.outside {
  color: var(--surface-subtle);
}
.calendar-cell:disabled {
  pointer-events: none;
}
.calendar-cell.range-start {
  border-start-start-radius: var(--border-radius);
  border-end-start-radius: var(--border-radius);
}
.calendar-cell.range-end {
  border-start-end-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}

.calendar-footer {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-size) solid var(--surface-subtle);
}

.text-truncate, .form-url-preview, .timezone-list > .time-cell, .form-file-item-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.form-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  --border-style: dashed;
  cursor: pointer;
  text-align: center;
}
.form-drop-zone:hover, .form-drop-zone.drag-over {
  --border-style: dashed;
}

.form-file-list {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-file-item-name {
  flex: 1;
}

.form-file-item-size {
  color: var(--surface-normal);
  white-space: nowrap;
}

.form-file-item-remove {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--surface-accent);
}
.form-file-item-remove:hover {
  color: var(--error);
}

.form-file-preview {
  inline-size: calc(var(--unit) * 5);
  block-size: calc(var(--unit) * 5);
  object-fit: cover;
  border-radius: var(--border-radius);
}

.form-error-summary {
  padding: var(--space-3);
}
.form-error-summary p {
  margin-block-end: var(--space-2);
}
.form-error-summary ul {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: disc;
}
.form-error-summary li {
  margin-block-end: var(--space-1);
}
.form-error-summary a {
  font-weight: var(--font-weight-4);
}

.form-error-hint {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--surface-emphasis);
  margin-block-start: 0.125rem;
}

.inline-edit {
  display: inline-flex;
  align-items: center;
  min-inline-size: 4ch;
  padding-block: var(--space-1);
  padding-inline: var(--space-1);
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
  border-block-end: var(--border-size) dashed var(--surface-accent);
  border-radius: var(--border-radius);
}
.inline-edit:hover:not(.inline-edit-disabled) {
  border-block-end-color: currentcolor;
}
.inline-edit-editing {
  cursor: text;
  background-color: var(--body-bg);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
}
.inline-edit.inline-edit-disabled {
  border-block-end-style: dotted;
}

.inline-edit-placeholder {
  opacity: var(--opacity-disabled);
  font-style: italic;
}

.form-stepper {
  position: relative;
}
.form-stepper .form-control {
  padding-inline-end: var(--space-4);
}
.form-stepper .form-control::-webkit-inner-spin-button, .form-stepper .form-control::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.form-stepper .form-control {
  appearance: textfield;
}

.form-stepper-buttons {
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  display: flex;
  flex-direction: column;
  border-inline-start: var(--border-size) solid var(--surface-subtle);
}

.form-stepper-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0 var(--space-2);
  cursor: pointer;
  color: var(--surface-normal);
  font-size: var(--font-size-sm);
  line-height: 1;
}
.form-stepper-btn:hover {
  color: var(--body-color);
}
.form-stepper-btn + .form-stepper-btn {
  border-block-start: var(--border-size) solid var(--surface-subtle);
}

.star-rating {
  display: inline-flex;
  gap: var(--space-1);
}

.star-rating-star {
  cursor: pointer;
  color: var(--surface-subtle);
  line-height: 1;
  user-select: none;
  font-size: var(--font-size-lg);
}
.star-rating-star.filled {
  color: var(--warning);
}
.star-rating-star.half {
  background: linear-gradient(90deg, var(--warning) 50%, var(--surface-subtle) 50%);
  background-clip: text;
  color: transparent;
}
.star-rating-star:hover {
  transform: scale(1.15);
}

.star-rating[aria-disabled=true] .star-rating-star:hover {
  transform: none;
}

.form-range {
  inline-size: 100%;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}
.form-range::-webkit-slider-runnable-track {
  inline-size: 100%;
  block-size: var(--space-1);
  background-color: var(--surface-subtle);
  border-radius: 50rem;
}
.form-range::-webkit-slider-thumb {
  appearance: none;
  inline-size: var(--size-1);
  block-size: var(--size-1);
  border: 0;
  border-radius: 50%;
  background-color: var(--primary);
  margin-block-start: calc((var(--space-1) - var(--size-1)) / 2);
}
.form-range::-moz-range-track {
  inline-size: 100%;
  block-size: var(--space-1);
  background-color: var(--surface-subtle);
  border-radius: 50rem;
}
.form-range::-moz-range-thumb {
  inline-size: var(--size-1);
  block-size: var(--size-1);
  border: 0;
  border-radius: 50%;
  background-color: var(--primary);
}
.form-range:active::-webkit-slider-thumb {
  background-color: var(--primary-accent);
}
.form-range:active::-moz-range-thumb {
  background-color: var(--primary-accent);
}
.form-range:focus-visible {
  outline: none;
}
.form-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.125rem var(--body-bg), 0 0 0 calc(0.125rem + var(--ring-width)) var(--ring-color), var(--ring-shadow);
}
.form-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 0.125rem var(--body-bg), 0 0 0 calc(0.125rem + var(--ring-width)) var(--ring-color), var(--ring-shadow);
}
.record-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.record-form-header {
  padding-block-end: var(--space-3);
  border-block-end: var(--border-size) solid var(--surface-subtle);
}

.record-form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-size) solid var(--surface-subtle);
}

.record-form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 0;
  padding: 0;
  margin: 0;
}

.rich-text-editor {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border-block-end: var(--border-size) solid var(--surface-subtle);
}

.rich-text-toolbar-group {
  display: flex;
  gap: var(--space-1);
}
.rich-text-toolbar-group:not(:last-child) {
  padding-inline-end: var(--space-2);
  border-inline-end: var(--border-size) solid var(--surface-subtle);
}

.rich-text-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--size-2);
  min-block-size: var(--size-2);
  padding: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-4);
  user-select: none;
}
.rich-text-blocks {
  padding: var(--space-3);
  min-block-size: calc(10rem * var(--scale));
}
.rich-text-blocks > div {
  margin-block-end: var(--space-1);
}
.rich-text-blocks h1, .rich-text-blocks h2, .rich-text-blocks h3 {
  margin: 0;
}
.rich-text-blocks blockquote {
  margin: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--surface-subtle);
  color: var(--surface-emphasis);
}
.rich-text-blocks code {
  display: block;
  padding: var(--space-2);
  background: var(--surface-light);
  border-radius: var(--border-radius);
  font-family: var(--font-code);
}

.form-select {
  display: block;
  inline-size: 100%;
  padding-inline-end: calc(var(--space-3) + var(--space-4));
  color: var(--body-color);
  background-color: var(--body-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: var(--space-3);
}
.form-select:dir(rtl) {
  background-position: left var(--space-3) center;
}
.form-select {
  appearance: none;
}
.form-select:hover:not(:disabled) {
  --border-color: var(--surface-normal);
}
.form-select:focus {
  --border-color: var(--primary);
}
.form-select[aria-invalid=true] {
  color: var(--body-color);
}
.form-select[aria-invalid=true]:focus {
  outline-color: var(--error);
}
.form-select[aria-invalid=false] {
  color: var(--body-color);
}
.form-select[aria-invalid=false]:focus {
  outline-color: var(--success);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-inline-end: var(--space-3);
  background-image: none;
}

.form-dual-range {
  position: relative;
  block-size: var(--size-2);
}

.form-dual-range-track {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: var(--space-1);
  background: var(--surface-subtle);
  border-radius: var(--border-radius);
}

.form-dual-range-fill {
  position: absolute;
  inset-block-start: 50%;
  block-size: var(--space-1);
  background: var(--primary);
  border-radius: var(--border-radius);
}

.form-dual-range input[type=range] {
  margin: 0;
  pointer-events: none;
  appearance: none;
  background: none;
}
.form-dual-range input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  inline-size: var(--size-1);
  block-size: var(--size-1);
  background: var(--primary);
  border: var(--border-size) solid var(--body-bg);
  border-radius: 50%;
  cursor: pointer;
}
.form-dual-range input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  inline-size: var(--size-1);
  block-size: var(--size-1);
  background: var(--primary);
  border: var(--border-size) solid var(--body-bg);
  border-radius: 50%;
  cursor: pointer;
}

.form-switch > .form-check-input {
  inline-size: calc(var(--unit) * 5);
  border-radius: 50rem;
  background-image: none;
  position: relative;
}
.form-switch > .form-check-input::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.125rem;
  inline-size: calc(var(--unit) * 2.5 - 4px);
  block-size: calc(var(--unit) * 2.5 - 4px);
  border-radius: 50%;
  background-color: var(--surface-normal);
}
.form-switch > .form-check-input:checked::after {
  inset-inline-start: calc(100% - (var(--unit) * 2.5 - 4px) - 0.125rem);
  background-color: currentcolor;
}

.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.form-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  padding-block: 0.125rem;
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius);
  line-height: 1.5;
}

.form-chip-remove {
  all: unset;
  cursor: pointer;
  line-height: 1;
  opacity: var(--opacity-disabled);
}
.form-chip-remove:hover {
  opacity: 1;
}

.form-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  color: var(--body-color);
  background: var(--body-bg);
  cursor: text;
}
.form-tag-input:focus-within {
  --border-color: var(--primary);
}
.form-tag-input input {
  all: unset;
  flex: 1 1 auto;
  min-inline-size: calc(4rem * var(--scale));
  font: inherit;
  color: var(--body-color);
}

.time-picker-panel {
  display: flex;
  gap: var(--space-3);
  background: var(--body-bg);
  padding: var(--space-3);
}

.time-column {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  max-block-size: calc(var(--unit) * 25);
  overflow-y: auto;
}

.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  min-inline-size: calc(var(--unit) * 5);
}
.time-cell.selected {
  font-weight: var(--font-weight-4);
}

.time-separator {
  display: flex;
  align-items: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-4);
  color: var(--surface-accent);
}

.timezone-picker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-block-size: calc(20rem * var(--scale));
}

.timezone-search {
  flex-shrink: 0;
}

.timezone-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.timezone-list > .time-cell {
  text-align: start;
}

.form-url-preview {
  display: block;
  font-size: var(--font-size-sm);
  margin-block-start: var(--space-1);
  color: var(--primary);
  text-decoration: underline;
}

address, .address {
  margin-block-end: var(--space-3);
  font-style: normal;
  line-height: inherit;
}
address strong, .address strong, address a, .address a, address span, .address span {
  display: block;
}

button:where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))), [role=button]:where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))), a:where(:has(> .button-label), :has(> .graphic:only-child)):where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))) {
  min-inline-size: calc(var(--unit) * 14);
  justify-content: center;
}
button:where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))):where(:has(> .graphic)), [role=button]:where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))):where(:has(> .graphic)), a:where(:has(> .button-label), :has(> .graphic:only-child)):where(:not(:has(> .graphic):not(:has(> *:not(.graphic, .visually-hidden))))):where(:has(> .graphic)) {
  justify-content: flex-start;
}

button[aria-busy=true],
[role=button][aria-busy=true] {
  pointer-events: none;
}
button[aria-busy=true] > .graphic,
[role=button][aria-busy=true] > .graphic {
  animation-name: spin;
  animation-duration: calc(var(--duration-ambient) * 0.4);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.navbar-collapse, .drawer-bottom, .drawer-top, .drawer-end, .layout-sidebar, .drawer-start, .reconnect, dialog {
  margin: 0;
  border: none;
  max-inline-size: none;
  max-block-size: none;
  inset: auto;
  position: fixed;
  will-change: transform;
  border-radius: var(--border-radius);
}
.reconnect, dialog {
  inset: 0;
  --modal-margin: auto auto var(--space-3) auto;
  margin: var(--modal-margin);
  --modal-width: clamp(20rem, 40vi, 36rem);
  inline-size: var(--modal-width);
  --modal-height: fit-content;
  block-size: var(--modal-height);
  max-block-size: calc(100dvb - var(--space-3) * 2);
  overflow-y: auto;
}

.drawer-end, .layout-sidebar, .drawer-start {
  inset-block: 0;
  block-size: stretch;
  --drawer-width: max(17.5rem, 25%);
  inline-size: var(--drawer-width);
  overflow-y: auto;
  margin: var(--surface-inset);
}

.navbar-collapse, .drawer-bottom, .drawer-top {
  inset-inline: 0;
  inline-size: stretch;
  --drawer-height: 30dvb;
  overflow-y: auto;
  block-size: var(--drawer-height);
  margin: var(--surface-inset);
}

.layout-sidebar, .drawer-start {
  inset-inline-start: 0;
}

.drawer-end {
  inset-inline-end: 0;
}

.drawer-top {
  inset-block-start: 0;
}

.navbar-collapse, .drawer-bottom {
  inset-block-end: 0;
}

.dialog-small {
  --drawer-width: max(13rem, 20%);
  --drawer-height: 22dvb;
  --modal-width: clamp(15rem, 30vi, 26rem);
}

.dialog-medium {
  --drawer-width: max(17.5rem, 40%);
  --drawer-height: 45dvb;
  --modal-width: clamp(20rem, 60vi, 48rem);
}

.navbar-collapse, .dialog-large {
  --drawer-width: stretch;
  --drawer-height: stretch;
  --modal-width: clamp(20rem, 80vi, 64rem);
}

html:has(dialog[open]) {
  overflow-y: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-size) solid var(--surface-light);
}

.dialog-body {
  padding: var(--space-4);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-start: var(--border-size) solid var(--surface-light);
}

.modal-confirm {
  text-align: center;
}

figure, .figure {
  overflow: hidden;
}
figure > div, .figure > div {
  min-block-size: 3rem;
  background: currentcolor;
}

figure img, .figure img,
figure svg,
.figure svg {
  inline-size: 100%;
  display: block;
  margin-block-end: var(--space-1);
  line-height: 1;
}

figcaption {
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  color: currentcolor;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: var(--space-4) var(--space-2);
  line-height: 1.2;
  font-weight: var(--font-weight-5);
  text-wrap: balance;
}

h1, h2, h3 {
  padding-block-end: var(--space-1);
  border-block-end: var(--border-size) var(--border-style) var(--surface-subtle);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

a {
  color: var(--primary-emphasis);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover {
  text-decoration-thickness: 0.125em;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

.stretched-link::after {
  z-index: 1;
  content: "";
}

.iframe {
  border-radius: var(--border-radius);
}
.iframe iframe {
  border: 0;
}

.img-fluid {
  max-inline-size: 100%;
  block-size: auto;
}

ol,
ul {
  padding-inline-start: 2rem;
  margin-block-end: var(--space-2);
}

dl {
  margin-block-end: var(--space-2);
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-block-end: 0;
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding-inline-start: 0;
  margin-block: var(--space-3);
}
.list > li {
  border-radius: var(--border-radius);
}
.list > li[aria-selected=true] {
  z-index: 10;
  color: var(--body-bg);
  background-color: var(--primary);
  border-color: var(--primary);
}
.list > li[aria-disabled=true] {
  pointer-events: none;
}

.list-group {
  gap: 0;
  border-radius: var(--border-radius);
}
.list-group > li {
  border-radius: var(--border-radius);
  border: var(--border-size) solid var(--surface-subtle);
}
.list-group > li + li {
  margin-block-start: -1px;
}
.list-group > li:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.list-group > li:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.list-flush {
  gap: 0;
}
.list-flush > li {
  border-block-end: var(--border-size) solid var(--surface-subtle);
}
.list-flush > li:last-child {
  border-block-end: 0;
}

.list-numbered {
  counter-reset: list-counter;
}
.list-numbered > li {
  counter-increment: list-counter;
}
.list-numbered > li::before {
  content: counter(list-counter) ". ";
  font-weight: var(--font-weight-5);
  margin-inline-end: var(--space-2);
  color: var(--surface-emphasis);
}

.list-action {
  cursor: pointer;
}
.list-action:hover, .list-action:focus-visible {
  z-index: 10;
  filter: brightness(0.94);
}
.list-action:active {
  filter: brightness(0.88);
}

.list-sortable > li {
  cursor: grab;
  user-select: none;
}
.list-sortable > li:active {
  cursor: grabbing;
}

.list-sortable > li[aria-grabbed=true] {
  opacity: var(--opacity-disabled);
}

.list-related {
  gap: 0;
}
.list-related > li {
  border-inline-start: var(--border-size) solid var(--primary);
  padding-inline-start: var(--space-3);
}
.list-related > li + li {
  border-block-start: var(--border-size) solid var(--surface-subtle);
}
.list-related small {
  color: var(--surface-emphasis);
}

.list-stats {
  gap: 0;
}
.list-stats > li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
}
.list-stats > li + li {
  border-block-start: var(--border-size) solid var(--surface-subtle);
}
.list-stats strong {
  font-weight: var(--font-weight-5);
}
.list-stats span {
  font-weight: var(--font-weight-2);
}

.list-tasks {
  gap: 0;
}
.list-tasks > li {
  padding-inline-start: calc(var(--space-3) + 1.5rem);
  position: relative;
}
.list-tasks > li + li {
  border-block-start: var(--border-size) solid var(--surface-subtle);
}
.list-tasks > li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  inline-size: var(--size-1);
  block-size: var(--size-1);
}
.list-tasks > li[aria-checked=true] {
  text-decoration: line-through;
  opacity: var(--opacity-disabled);
}
.list-tasks > li[aria-checked=true]::before {
  background-color: var(--primary);
  border-color: var(--primary);
}

menu .menu-abbr {
  display: none;
}
menu .menu-header {
  font-weight: var(--font-weight-4);
}
menu a, menu button {
  inline-size: 100%;
}
menu ul[popover] {
  z-index: 260;
  padding: var(--space-2);
  gap: var(--space-1);
}
menu ul[popover] {
  inline-size: max-content;
  min-inline-size: calc(15rem * var(--scale));
  max-inline-size: calc(100vi - var(--surface-inset) * 2);
  flex-direction: column;
  flex-wrap: wrap;
  max-block-size: calc(50dvb - var(--surface-inset) * 2);
  overflow: auto;
  overscroll-behavior: contain;
}
menu ul[popover]:popover-open {
  display: flex;
}
menu li > ul:not([popover]) {
  interpolate-size: allow-keywords;
  block-size: 0;
  overflow: hidden;
  display: none;
}
menu li > [aria-expanded=true] + ul:not([popover]) {
  block-size: auto;
  display: block;
}
@starting-style {
  menu li > [aria-expanded=true] + ul:not([popover]) {
    block-size: 0;
  }
}
[popover] {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: auto var(--space-3) 0 var(--space-3);
  --motion-origin: bottom center;
}
.progress, progress, meter {
  display: flex;
  block-size: var(--size-1);
  overflow: hidden;
  background-color: var(--surface-light);
  border-radius: var(--border-radius);
  appearance: none;
  border: none;
}

meter {
  inline-size: 100%;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--body-bg);
  text-align: center;
  white-space: nowrap;
  background-color: var(--primary);
}

progress {
  --progress-fill: var(--primary);
  --progress-pattern: none;
}
progress::-webkit-progress-bar {
  background-color: var(--surface-light);
}
progress::-webkit-progress-value, progress::-moz-progress-bar {
  background-color: var(--progress-fill);
  background-image: var(--progress-pattern);
  background-size: var(--size-1) var(--size-1);
}

progress.progress-surface {
  --progress-fill: var(--surface);
}

progress.progress-primary {
  --progress-fill: var(--primary);
}

progress.progress-secondary {
  --progress-fill: var(--secondary);
}

progress.progress-tertiary {
  --progress-fill: var(--tertiary);
}

progress.progress-success {
  --progress-fill: var(--success);
}

progress.progress-warning {
  --progress-fill: var(--warning);
}

progress.progress-error {
  --progress-fill: var(--error);
}

progress.progress-striped,
progress.progress-animated {
  --progress-pattern: linear-gradient(
      45deg,
      var(--surface-subtle) 25%,
      transparent 25%,
      transparent 50%,
      var(--surface-subtle) 50%,
      var(--surface-subtle) 75%,
      transparent 75%,
      transparent
  );
}

progress.progress-animated::-webkit-progress-value, progress.progress-animated::-moz-progress-bar {
  animation: progress-bar-stripes calc(var(--duration-ambient) * 0.67) linear infinite;
}

.progress-striped .progress-bar,
.progress-animated .progress-bar {
  background-image: linear-gradient(45deg, var(--surface-subtle) 25%, transparent 25%, transparent 50%, var(--surface-subtle) 50%, var(--surface-subtle) 75%, transparent 75%, transparent);
  background-size: var(--size-1) var(--size-1);
}

.progress-animated .progress-bar {
  --progress-stripe-size: var(--size-1);
  animation: progress-bar-stripes calc(var(--duration-ambient) * 0.67) linear infinite;
}

.progress-surface .progress-bar {
  background-color: var(--surface);
}

.progress-primary .progress-bar {
  background-color: var(--primary);
}

.progress-secondary .progress-bar {
  background-color: var(--secondary);
}

.progress-tertiary .progress-bar {
  background-color: var(--tertiary);
}

.progress-success .progress-bar {
  background-color: var(--success);
}

.progress-warning .progress-bar {
  background-color: var(--warning);
}

.progress-error .progress-bar {
  background-color: var(--error);
}

.progress-stacked {
  display: flex;
}
.progress-stacked > .progress {
  overflow: visible;
  flex-grow: 0;
  background-color: transparent;
  border-radius: var(--border-radius);
}
.progress-stacked > .progress:first-child {
  border-start-start-radius: var(--border-radius);
  border-end-start-radius: var(--border-radius);
}
.progress-stacked > .progress:last-child {
  border-start-end-radius: var(--border-radius);
  border-end-end-radius: var(--border-radius);
}
.progress-stacked > .progress > .progress-bar {
  inline-size: 100%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: var(--size-1) 0;
  }
  to {
    background-position: 0 0;
  }
}
.section, section {
  margin-block: var(--space-2);
}

.section-page,
.section-content,
.section-fluid {
  inline-size: 100%;
  margin-inline: auto;
  padding: var(--space-3);
}

.section-page {
  max-inline-size: calc(95% - 5% * (100vw - 20rem) / 55rem);
}

.section-content {
  max-inline-size: calc(85% - 5% * (100vw - 20rem) / 55rem);
}

.section-fluid {
  max-inline-size: 100%;
  padding: var(--space-2);
}

.vr {
  display: inline-block;
  align-self: stretch;
  min-block-size: 100%;
  color: inherit;
  border-inline-start: var(--border-size) solid currentcolor;
}

hr {
  margin-inline: 0;
  color: inherit;
  border: 0;
  border-block-start: var(--border-size) solid currentcolor;
}

details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  position: relative;
  overflow: hidden;
}
details > summary::marker {
  content: "";
}
details > summary::after {
  content: "";
}

details::details-content {
  transition: block-size var(--motion-duration) var(--motion-ease-exit), content-visibility var(--motion-duration) var(--motion-ease-exit) allow-discrete;
}

details[open]::details-content {
  transition: block-size var(--motion-duration) var(--motion-ease-enter), content-visibility var(--motion-duration) var(--motion-ease-enter) allow-discrete;
}

details[open] > summary::after {
  --rotate: -135deg;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  --table-color: var(--body-color);
  --table-bg: var(--body-bg);
  --table-border-color: var(--surface-subtle);
  --table-striped-bg: var(--surface-light);
  --table-hover-bg: var(--surface-light);
  --table-active-bg: var(--surface-subtle);
  inline-size: 100%;
  margin-block-end: var(--space-3);
  vertical-align: top;
  color: var(--table-color);
  border-color: var(--table-border-color);
  border-collapse: separate;
  border-spacing: 0;
}
.table > :not(caption) > * > * {
  padding: var(--space-2);
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table > tfoot {
  vertical-align: bottom;
  font-weight: var(--font-weight-3);
}
.table > caption {
  padding-block: var(--space-2);
  color: var(--surface-emphasis);
  caption-side: bottom;
}
.table > col, .table > colgroup {
  background: transparent;
}

.caption-top > caption,
.caption-top {
  caption-side: top;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  background-color: var(--table-striped-bg);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--table-hover-bg);
}

.table-active,
.table > :not(caption) > tr.table-active > *,
.table > :not(caption) > tr > td.table-active,
.table > :not(caption) > tr > th.table-active {
  background-color: var(--table-active-bg);
}

.table-bordered {
  border: var(--border-size) solid var(--table-border-color);
  border-inline-end-width: 0;
  border-block-end-width: 0;
}
.table-bordered > :not(caption) > * > * {
  border: var(--border-size) solid var(--table-border-color);
  border-inline-start-width: 0;
  border-block-start-width: 0;
}

.table-borderless {
  border-width: 0;
}
.table-borderless > :not(caption) > * > * {
  border-width: 0;
}

.table-border-rows {
  border-width: 0;
}
.table-border-rows > :not(caption) > * > * {
  border-width: 0;
  border-block-end: var(--border-size) solid var(--table-border-color);
}

.table-border-columns {
  border-block-start-width: 0;
  border-block-end-width: 0;
  border-inline-start: var(--border-size) solid var(--table-border-color);
  border-inline-end-width: 0;
}
.table-border-columns > :not(caption) > * > * {
  border-width: 0;
  border-inline-end: var(--border-size) solid var(--table-border-color);
}

.table-group-divider {
  border-block-start: 2px solid var(--table-border-color);
}

.table-surface {
  --table-color: var(--body-color);
  --table-bg: var(--surface-light);
  --table-border-color: var(--surface-accent);
  --table-striped-bg: var(--surface-subtle);
  --table-hover-bg: var(--surface-subtle);
  --table-active-bg: var(--surface-accent);
}
.table-surface > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-primary {
  --table-color: var(--body-color);
  --table-bg: var(--primary-light);
  --table-border-color: var(--primary-accent);
  --table-striped-bg: var(--primary-subtle);
  --table-hover-bg: var(--primary-subtle);
  --table-active-bg: var(--primary-accent);
}
.table-primary > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-secondary {
  --table-color: var(--body-color);
  --table-bg: var(--secondary-light);
  --table-border-color: var(--secondary-accent);
  --table-striped-bg: var(--secondary-subtle);
  --table-hover-bg: var(--secondary-subtle);
  --table-active-bg: var(--secondary-accent);
}
.table-secondary > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-tertiary {
  --table-color: var(--body-color);
  --table-bg: var(--tertiary-light);
  --table-border-color: var(--tertiary-accent);
  --table-striped-bg: var(--tertiary-subtle);
  --table-hover-bg: var(--tertiary-subtle);
  --table-active-bg: var(--tertiary-accent);
}
.table-tertiary > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-success {
  --table-color: var(--body-color);
  --table-bg: var(--success-light);
  --table-border-color: var(--success-accent);
  --table-striped-bg: var(--success-subtle);
  --table-hover-bg: var(--success-subtle);
  --table-active-bg: var(--success-accent);
}
.table-success > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-warning {
  --table-color: var(--body-color);
  --table-bg: var(--warning-light);
  --table-border-color: var(--warning-accent);
  --table-striped-bg: var(--warning-subtle);
  --table-hover-bg: var(--warning-subtle);
  --table-active-bg: var(--warning-accent);
}
.table-warning > :not(caption) > * > * {
  background-color: var(--table-bg);
}

.table-error {
  --table-color: var(--body-color);
  --table-bg: var(--error-light);
  --table-border-color: var(--error-accent);
  --table-striped-bg: var(--error-subtle);
  --table-hover-bg: var(--error-subtle);
  --table-active-bg: var(--error-accent);
}
.table-error > :not(caption) > * > * {
  background-color: var(--table-bg);
}

@container (max-width: calc(37.5rem - 0.0625rem)) {
  .table-responsive {
    border: 0;
  }
  .table-responsive,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  .table-responsive td {
    display: flex;
    justify-content: space-between;
    padding-inline: var(--space-3);
    border: 0;
  }
  .table-responsive td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-5);
    padding-inline-end: var(--space-3);
  }
  .table-responsive td:first-child {
    font-weight: var(--font-weight-5);
  }
  .table-responsive td:last-child {
    border-block-end: var(--border-size) solid var(--table-border-color);
    margin-block-end: var(--space-3);
  }
}

body {
  font-size: var(--font-size-body);
}

p, li, dd, blockquote, figcaption {
  line-height: 1.5;
}

p {
  margin-block-end: var(--space-2);
}

blockquote {
  display: block;
}

label {
  display: inline-block;
}

small {
  font-size: 0.625em;
}

strong {
  font-weight: var(--font-weight-5);
}

b {
  font-weight: var(--font-weight-5);
}

mark {
  padding: 0.1875rem;
  background-color: var(--warning);
  color: var(--body-bg);
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

sub, sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  inset-block-end: -0.25em;
}

sup {
  inset-block-start: -0.5em;
}

dt {
  font-weight: var(--font-weight-5);
}

dd {
  margin-block-end: var(--space-1);
  margin-inline-start: 0;
}

output {
  font-family: var(--font-code);
  display: inline-block;
}

samp {
  font-family: var(--font-code);
}

kbd {
  font-size: 0.875em;
  padding: 0.1875rem 0.375rem;
  color: var(--body-bg);
  background-color: var(--body-color);
  border-radius: var(--border-radius);
}

:not(pre) > code {
  font-family: var(--font-code);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
  color: var(--error);
  border-radius: var(--border-radius);
  word-wrap: break-word;
}

.blockquote-footer {
  margin-block-start: calc(-1 * var(--space-2));
  margin-block-end: var(--space-2);
  font-size: 0.875em;
  color: var(--surface-emphasis);
}
.blockquote-footer::before {
  content: "— ";
}

.text-lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-2);
  display: block;
  margin-block: var(--space-2);
}

.text-initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.text-italic {
  font-style: italic;
}

.text-reset {
  color: inherit;
}

.text-muted {
  color: color(from currentColor srgb r g b/0.5);
}

.text-eyebrow {
  font-size: var(--font-size-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.text-normal {
  font-weight: var(--font-weight-2);
}

.text-medium {
  font-weight: var(--font-weight-3);
}

.text-semibold {
  font-weight: var(--font-weight-4);
}

.text-bold {
  font-weight: var(--font-weight-5);
}

.lh-sm {
  line-height: 1;
}

.lh-md {
  line-height: 1.25;
}

.lh-base {
  line-height: 1.5;
}

.lh-lg {
  line-height: 2;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.user-select-all {
  user-select: all;
}

.user-select-none {
  user-select: none;
}

.text-start {
  text-align: start;
}

.text-center {
  text-align: center;
}

.text-end {
  text-align: end;
}

.text-wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-inline-size: 100%;
  font-weight: var(--font-weight-5);
}

.surface-text {
  color: rgb(from var(--surface-emphasis) r g b/1);
}

.primary-text {
  color: rgb(from var(--primary-emphasis) r g b/1);
}

.secondary-text {
  color: rgb(from var(--secondary-emphasis) r g b/1);
}

.tertiary-text {
  color: rgb(from var(--tertiary-emphasis) r g b/1);
}

.success-text {
  color: rgb(from var(--success-emphasis) r g b/1);
}

.warning-text {
  color: rgb(from var(--warning-emphasis) r g b/1);
}

.error-text {
  color: rgb(from var(--error-emphasis) r g b/1);
}

.video {
  inline-size: 100%;
  border-radius: var(--border-radius);
}
.video iframe,
.video video {
  border: none;
}

.video-1x1 {
  aspect-ratio: 1/1;
}

.video-4x3 {
  aspect-ratio: 4/3;
}

.video-16x9 {
  aspect-ratio: 16/9;
}

.video-21x9 {
  aspect-ratio: 21/9;
}

[dir=rtl] {
  --dir: -1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  min-block-size: 100dvh;
}

body {
  font-family: var(--font-base);
  background-color: var(--body-bg);
  background-image: var(--body-img);
  background-attachment: fixed;
  color: var(--body-color);
  transition: background var(--motion-duration) var(--motion-ease-exit), background-color var(--motion-duration) var(--motion-ease-exit), color var(--motion-duration) var(--motion-ease-exit), scale var(--motion-duration) var(--motion-ease-exit);
}

svg {
  inline-size: var(--size-1);
}

.layout {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  container-type: inline-size;
}

.layout-header {
  order: -1;
}
@container (min-width: 37.5rem) {
  .layout-header {
    margin: var(--surface-inset);
  }
}

.layout-navbar {
  order: 1;
  padding-inline: var(--space-2);
}
@container (min-width: 37.5rem) {
  .layout-navbar {
    margin: var(--surface-inset);
    inset-block-end: var(--surface-inset);
  }
}
@container (min-width: 52.5rem) {
  .layout-navbar {
    order: -1;
    inset-block-start: var(--surface-inset);
    inset-block-end: auto;
  }
}
@container (min-width: 100rem) {
  .layout-navbar {
    inline-size: 80cqi;
    align-self: center;
    padding-inline: 5cqi;
  }
}
.layout-navbar:has([aria-controls=navbar-collapse][aria-expanded=true]) {
  z-index: 450;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.layout-sidebar {
  z-index: 450;
  inline-size: calc(100vi - var(--surface-inset) * 2);
  border-radius: var(--border-radius);
  overflow-y: auto;
  display: none;
}
.layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar {
  display: flex;
}
.layout-sidebar {
  flex-direction: column;
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .layout-sidebar {
    display: flex;
    translate: none;
    position: sticky;
    inset-block-start: var(--surface-inset);
    z-index: 225;
    block-size: calc(100dvh - var(--layout-navbar-height) - var(--surface-inset) * 2);
    z-index: 225;
    inline-size: var(--sidebar-width);
    overflow: hidden;
    transition: inline-size var(--motion-duration) var(--motion-ease-enter), margin-inline var(--motion-duration) var(--motion-ease-enter);
  }
  .layout-sidebar > .sidebar {
    inline-size: var(--sidebar-open-width);
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .layout-sidebar {
    display: flex;
    translate: none;
    position: sticky;
    inset-block-start: var(--surface-inset);
    z-index: 225;
    block-size: calc(100dvh - var(--layout-navbar-height) - var(--surface-inset) * 2);
    z-index: 225;
    inline-size: var(--sidebar-width);
    overflow: hidden;
    transition: inline-size var(--motion-duration) var(--motion-ease-enter), margin-inline var(--motion-duration) var(--motion-ease-enter);
  }
  .layout-sidebar > .sidebar {
    inline-size: var(--sidebar-open-width);
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .layout-sidebar {
    display: flex;
    translate: none;
    position: sticky;
    inset-block-start: var(--surface-inset);
    z-index: 225;
    block-size: calc(100dvh - var(--layout-navbar-height) - var(--surface-inset) * 2);
    z-index: 225;
    inline-size: var(--sidebar-width);
    overflow: hidden;
    transition: inline-size var(--motion-duration) var(--motion-ease-enter), margin-inline var(--motion-duration) var(--motion-ease-enter);
  }
  .layout-sidebar > .sidebar {
    inline-size: var(--sidebar-open-width);
  }
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar {
    --sidebar-width: 0;
    margin-inline: 0;
    transition: inline-size var(--motion-duration) var(--motion-ease-exit), margin-inline var(--motion-duration) var(--motion-ease-exit);
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar {
    --sidebar-width: 0;
    margin-inline: 0;
    transition: inline-size var(--motion-duration) var(--motion-ease-exit), margin-inline var(--motion-duration) var(--motion-ease-exit);
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .layout:has([aria-controls=layout-sidebar][aria-expanded=true]) .layout-sidebar {
    --sidebar-width: 0;
    margin-inline: 0;
    transition: inline-size var(--motion-duration) var(--motion-ease-exit), margin-inline var(--motion-duration) var(--motion-ease-exit);
  }
}
.layout-sidebar {
  inset-block-start: var(--surface-inset);
  --sidebar-open-width: clamp(16rem, 9.25rem + 9vi, 24rem);
  --sidebar-width: var(--sidebar-open-width);
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .layout-sidebar {
    --sidebar-open-width: 4rem;
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .layout-sidebar {
    inset-block-start: calc(var(--layout-navbar-height) + var(--surface-inset));
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .layout-sidebar {
    inset-block-start: calc(var(--layout-navbar-height) + var(--surface-inset));
  }
}

.layout-main {
  flex: 1;
}
@container (min-width: 37.5rem) {
  .layout-main {
    display: flex;
    flex-direction: row;
  }
}

@container (min-width: 37.5rem) {
  .layout-article {
    flex: 1;
    min-inline-size: 0;
  }
}
.layout-article.scroll-snap {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.layout-article.scroll-snap > * {
  scroll-snap-align: start;
}

.layout-footer {
  display: none;
  margin: var(--surface-inset);
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .layout-footer {
    display: block;
    order: 2;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .layout-footer {
    display: block;
    order: 2;
  }
}

#goTopButton {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 251;
  display: none;
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  #goTopButton[data-scrolled] {
    display: block;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  #goTopButton[data-scrolled] {
    display: block;
  }
}

#blazor-error-ui {
  background: var(--error);
  color: var(--body-color);
  padding: var(--space-3);
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1000;
  inline-size: 100%;
}
#blazor-error-ui .reload {
  color: var(--body-color);
}
#blazor-error-ui .dismiss {
  cursor: pointer;
}

.blazor-error-boundary {
  background: var(--error);
  color: var(--body-color);
  padding: var(--space-3);
  margin-block: var(--space-4);
}
.blazor-error-boundary::after {
  content: "Sorry, a rotten gremlin got us!";
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.layout-navbar .brand {
  display: none;
}
@container (min-width: 52.5rem) {
  .layout-navbar .brand {
    display: flex;
  }
}

.layout .brand h3 {
  margin-block: 0;
  padding-block-end: 0;
  border-block-end: 0;
  font-size: var(--font-size-lg);
  line-height: 1;
  display: none;
}
@container (min-width: 52.5rem) {
  .layout .brand h3 {
    display: block;
  }
}

.brand img {
  block-size: calc(var(--unit) * 5);
  inline-size: auto;
}

[aria-controls=navbar-collapse] {
  flex-direction: column;
  gap: var(--space-1);
  line-height: 1;
}
.navbar [aria-controls=navbar-collapse] {
  margin-inline-start: auto;
  display: flex;
}
@container (min-width: 37.5rem) {
  [aria-controls=navbar-collapse] {
    flex-direction: row;
  }
  [aria-controls=navbar-collapse] .toggle-navbar-label {
    display: none;
  }
  .navbar [aria-controls=navbar-collapse] {
    display: none;
  }
}

[aria-controls=layout-sidebar] {
  flex-direction: column;
  gap: var(--space-1);
  line-height: 1;
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .navbar [aria-controls=layout-sidebar] {
    display: none;
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  [aria-controls=layout-sidebar] .toggle-sidebar-label {
    display: none;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  [aria-controls=layout-sidebar] .toggle-sidebar-label {
    display: none;
  }
}

html:has(.loader:not([aria-hidden=true])),
html:has(.loader:not([aria-hidden=true])) body {
  overflow: hidden;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--body-bg);
  overflow: hidden;
}

.loader[aria-hidden=true] {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  inline-size: 8rem;
  block-size: 8rem;
  object-fit: contain;
}

.loader-yinyang {
  inline-size: 6rem;
  block-size: 3rem;
  box-sizing: content-box;
  background: var(--body-bg);
  border-color: var(--primary);
  border-style: solid;
  border-width: 2px 2px 3.125rem 2px;
  border-radius: 50%;
  position: relative;
  animation-name: spin;
  animation-duration: calc(var(--duration-ambient) * 1.67);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.loader-yinyang::before, .loader-yinyang::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  background: var(--body-bg);
  border: 1.125rem solid var(--primary);
  border-radius: 50%;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  box-sizing: content-box;
}
.loader-yinyang::before {
  inset-inline-start: 0;
}
.loader-yinyang::after {
  inset-inline-start: 50%;
  background: var(--primary);
  border: 1.125rem solid var(--body-bg);
}

.loader-wave {
  inline-size: 9.375rem;
  block-size: 9.375rem;
  background-color: var(--primary);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.loader-wave::before, .loader-wave::after {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 45%;
  inset-block-start: -40%;
  background-color: var(--body-bg);
  animation-name: spin;
  animation-duration: calc(var(--duration-ambient) * 2.67);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.loader-wave::before {
  border-radius: 30%;
  background: var(--surface-scrim);
}

@keyframes loader-bounce-ball {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-1.5rem);
  }
}
.loader-bounce {
  color: var(--body-color);
  position: relative;
  display: inline-block;
  margin-block-start: 2.5rem;
  font-size: 3rem;
  letter-spacing: 0.25rem;
  box-sizing: border-box;
}
.loader-bounce::after {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  position: absolute;
  inset-inline-start: 7.8125rem;
  inset-block-start: 0.125rem;
  border-radius: 50%;
  background: var(--primary);
  box-sizing: border-box;
  animation: loader-bounce-ball calc(var(--duration-ambient) * 0.5) linear infinite alternate;
}

.loader-ring {
  display: inline-block;
  font-size: 3rem;
  font-weight: var(--font-weight-5);
  color: var(--body-color);
  position: relative;
  word-spacing: 2.25rem;
}
.loader-ring::before {
  content: "";
  position: absolute;
  inset-inline-start: 2.375rem;
  inset-block-end: 0.5rem;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
  border: 5px solid var(--body-color);
  border-block-end-color: var(--primary);
  box-sizing: border-box;
  animation-name: spin;
  animation-duration: calc(var(--duration-ambient) * 0.33);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.reconnect {
  text-align: center;
}
.reconnect[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.reconnect p {
  margin: 0;
}
.reconnect .components-reconnect-first-attempt-visible,
.reconnect .components-reconnect-repeated-attempt-visible,
.reconnect .components-reconnect-failed-visible,
.reconnect .components-pause-visible,
.reconnect .components-resume-failed-visible,
.reconnect .components-rejoining-animation {
  display: none;
}
.reconnect.components-reconnect-show .components-reconnect-first-attempt-visible, .reconnect.components-reconnect-show .components-rejoining-animation, .reconnect.components-reconnect-retrying .components-reconnect-repeated-attempt-visible, .reconnect.components-reconnect-retrying .components-rejoining-animation, .reconnect.components-reconnect-failed .components-reconnect-failed-visible, .reconnect.components-reconnect-paused .components-pause-visible, .reconnect.components-reconnect-resume-failed .components-resume-failed-visible {
  display: block;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
}
.header .header-item {
  min-inline-size: 0;
}
.header .header-item {
  flex-direction: column;
  justify-content: center;
  flex: 0 0 var(--size-3);
  inline-size: var(--size-3);
  block-size: var(--size-3);
}
.header .header-item .button-label {
  display: none;
  font-size: var(--font-size-sm);
}
.header .header-item .graphic {
  inline-size: calc(var(--unit) * 3);
  block-size: calc(var(--unit) * 3);
  font-size: calc(var(--unit) * 3);
}

@container (min-width: 37.5rem) {
  .header {
    flex: initial;
    min-inline-size: auto;
    overflow: visible;
    gap: var(--space-3);
  }
  .header .header-item {
    flex: none;
    min-inline-size: 5rem;
    inline-size: auto;
    block-size: auto;
  }
  .header .header-item .button-label {
    display: block;
  }
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  padding-block: var(--space-2);
  transition: padding-block var(--motion-duration) var(--motion-ease);
}
.navbar > :is(a, button, [role=button]) {
  min-inline-size: 0;
}
.navbar .navbar-home {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(var(--unit) * 3 + env(safe-area-inset-bottom, 0px));
  translate: calc(-50% * var(--dir)) 0;
  border-radius: 50%;
  border: var(--space-1) solid var(--primary-accent);
  outline: var(--space-2) solid var(--body-bg);
}
.navbar .navbar-home > .graphic {
  inline-size: calc(var(--unit) * 3.5);
  block-size: calc(var(--unit) * 3.5);
}
@container (min-width: 52.5rem) {
  .navbar {
    padding-block: var(--space-4);
  }
  .navbar[data-scrolled] {
    padding-block: var(--space-2);
  }
}
@container (min-width: 37.5rem) {
  .navbar .navbar-home {
    display: none;
  }
}

.navbar-collapse {
  display: none;
}
.navbar:has([aria-controls=navbar-collapse][aria-expanded=true]) .navbar-collapse {
  display: flex;
}
.navbar-collapse {
  flex-direction: column;
}
@container (min-width: 37.5rem) {
  .navbar .navbar-collapse {
    all: unset;
    display: contents;
  }
}

.navbar-menu {
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.navbar-actions {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

@container (min-width: 37.5rem) {
  .navbar-collapse > .dialog-header {
    display: none;
  }
}

.page-toolbar {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-1);
  padding-inline: var(--space-5);
}
@container (max-width: calc(37.5rem - 0.0625rem)) {
  .page-toolbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 250;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  overflow-y: auto;
  flex: 1;
  min-block-size: 0;
}
.sidebar img {
  block-size: calc(var(--unit) * 5);
  inline-size: auto;
}
@container (min-width: 52.5rem) {
  .sidebar {
    padding: var(--space-2);
  }
}
@container (min-width: 37.5rem) and (max-width: calc(52.5rem - 0.0625rem)) {
  .sidebar menu > li > :is(a, button) {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding-inline: var(--space-1);
    min-inline-size: 0;
  }
  .sidebar menu > li > :is(a, button) .menu-text {
    display: none;
  }
  .sidebar menu > li > :is(a, button) .menu-abbr {
    display: inline;
  }
  .sidebar menu > .menu-header,
  .sidebar menu > [role=separator] {
    display: none;
  }
}

.layout-sidebar > .dialog-header .brand h3 {
  display: block;
}
@container (min-width: 37.5rem) {
  .layout-sidebar > .dialog-header {
    display: none;
  }
}
@container (min-width: 100rem) {
  .layout-sidebar > .dialog-header {
    display: flex;
  }
}

.footer-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.footer-brand p {
  margin-block-start: var(--space-1);
  opacity: var(--opacity-muted);
}

.footer-featured {
  margin-block-start: var(--space-2);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-3);
  opacity: var(--opacity-muted);
}

.footer, footer {
  padding: var(--space-3);
}

@container (min-width: 37.5rem) {
  .footer .footer-body {
    grid-template-columns: 1fr 1fr;
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .footer .footer-body {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer.footer-featured-layout .footer-body {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .footer .footer-body {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer.footer-featured-layout .footer-body {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.footer-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-collapse {
  padding: var(--space-3);
}

.footer-collapse .footer-bar {
  margin-block-start: 0;
  border-block-start: 0;
  opacity: 1;
}

@container (min-width: 37.5rem) {
  .footer-collapse .footer-body {
    grid-template-columns: 1fr 1fr;
  }
}
@container (min-width: 52.5rem) and (max-width: calc(75rem - 0.0625rem)) {
  .footer-collapse .footer-body {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
@container (min-width: 75rem) and (max-width: calc(100rem - 0.0625rem)) {
  .footer-collapse .footer-body {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.dashed {
  --border-style: dashed;
}

[aria-expanded=true] .chevron:not(.chevron-up):not(.chevron-left):not(.chevron-right) {
  --rotate: -135deg;
}

.chevron.chevron-up {
  --rotate: -135deg;
}

[aria-expanded=true] .chevron.chevron-up {
  --rotate: 45deg;
}

.chevron.chevron-left {
  --rotate: 135deg;
}
[dir=rtl] .chevron.chevron-left {
  --rotate: -45deg;
}

.chevron.chevron-right {
  --rotate: -45deg;
}
[dir=rtl] .chevron.chevron-right {
  --rotate: 135deg;
}

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.inline-flex {
  display: inline-flex;
}

.inline-grid {
  display: inline-grid;
}

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.float-start {
  float: inline-start;
}

.float-end {
  float: inline-end;
}

.clearfix {
  display: flow-root;
}

.h-25-dvh {
  block-size: 25dvh;
}

.h-min-25-dvh {
  min-block-size: 25dvh;
}

.h-max-25-dvh {
  max-block-size: 25dvh;
}

.h-50-dvh {
  block-size: 50dvh;
}

.h-min-50-dvh {
  min-block-size: 50dvh;
}

.h-max-50-dvh {
  max-block-size: 50dvh;
}

.h-75-dvh {
  block-size: 75dvh;
}

.h-min-75-dvh {
  min-block-size: 75dvh;
}

.h-max-75-dvh {
  max-block-size: 75dvh;
}

.h-100-dvh {
  block-size: 100dvh;
}

.h-min-100-dvh {
  min-block-size: 100dvh;
}

.h-max-100-dvh {
  max-block-size: 100dvh;
}

.h-25 {
  block-size: 25%;
}

.h-min-25 {
  min-block-size: 25%;
}

.h-max-25 {
  max-block-size: 25%;
}

.h-50 {
  block-size: 50%;
}

.h-min-50 {
  min-block-size: 50%;
}

.h-max-50 {
  max-block-size: 50%;
}

.h-75 {
  block-size: 75%;
}

.h-min-75 {
  min-block-size: 75%;
}

.h-max-75 {
  max-block-size: 75%;
}

.h-100 {
  block-size: 100%;
}

.h-min-100 {
  min-block-size: 100%;
}

.h-max-100 {
  max-block-size: 100%;
}

.h-auto {
  block-size: auto;
}

.h-min-auto {
  min-block-size: auto;
}

.h-max-auto {
  max-block-size: auto;
}

.h-content-min {
  block-size: min-content;
}

.h-content-max {
  block-size: max-content;
}

.h-content-fit {
  block-size: fit-content;
}

.h-1 {
  block-size: var(--size-1);
}

.h-2 {
  block-size: var(--size-2);
}

.h-3 {
  block-size: var(--size-3);
}

.h-4 {
  block-size: var(--size-4);
}

.h-5 {
  block-size: var(--size-5);
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-auto {
  margin: auto;
}

.mh-0 {
  margin-inline: 0;
}

.mh-1 {
  margin-inline: var(--space-1);
}

.mh-2 {
  margin-inline: var(--space-2);
}

.mh-3 {
  margin-inline: var(--space-3);
}

.mh-4 {
  margin-inline: var(--space-4);
}

.mh-5 {
  margin-inline: var(--space-5);
}

.mh-auto {
  margin-inline: auto;
}

.mv-0 {
  margin-block: 0;
}

.mv-1 {
  margin-block: var(--space-1);
}

.mv-2 {
  margin-block: var(--space-2);
}

.mv-3 {
  margin-block: var(--space-3);
}

.mv-4 {
  margin-block: var(--space-4);
}

.mv-5 {
  margin-block: var(--space-5);
}

.mv-auto {
  margin-block: auto;
}

.ms-0 {
  margin-inline-start: 0;
}

.ms-1 {
  margin-inline-start: var(--space-1);
}

.ms-2 {
  margin-inline-start: var(--space-2);
}

.ms-3 {
  margin-inline-start: var(--space-3);
}

.ms-4 {
  margin-inline-start: var(--space-4);
}

.ms-5 {
  margin-inline-start: var(--space-5);
}

.ms-auto {
  margin-inline-start: auto;
}

.me-0 {
  margin-inline-end: 0;
}

.me-1 {
  margin-inline-end: var(--space-1);
}

.me-2 {
  margin-inline-end: var(--space-2);
}

.me-3 {
  margin-inline-end: var(--space-3);
}

.me-4 {
  margin-inline-end: var(--space-4);
}

.me-5 {
  margin-inline-end: var(--space-5);
}

.me-auto {
  margin-inline-end: auto;
}

.mt-0 {
  margin-block-start: 0;
}

.mt-1 {
  margin-block-start: var(--space-1);
}

.mt-2 {
  margin-block-start: var(--space-2);
}

.mt-3 {
  margin-block-start: var(--space-3);
}

.mt-4 {
  margin-block-start: var(--space-4);
}

.mt-5 {
  margin-block-start: var(--space-5);
}

.mt-auto {
  margin-block-start: auto;
}

.mb-0 {
  margin-block-end: 0;
}

.mb-1 {
  margin-block-end: var(--space-1);
}

.mb-2 {
  margin-block-end: var(--space-2);
}

.mb-3 {
  margin-block-end: var(--space-3);
}

.mb-4 {
  margin-block-end: var(--space-4);
}

.mb-5 {
  margin-block-end: var(--space-5);
}

.mb-auto {
  margin-block-end: auto;
}

@property --motion-translate {
  syntax: "*";
  inherits: false;
}
@property --motion-scale-from {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --motion-fade-from {
  syntax: "*";
  inherits: false;
}

html[data-resizing],
html[data-resizing] *,
html[data-resizing] *::before,
html[data-resizing] *::after,
html[data-resizing] *::backdrop {
  transition: none !important;
}
.object-fit-contain {
  object-fit: contain;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-fill {
  object-fit: fill;
}

.object-fit-scale-down {
  object-fit: scale-down;
}

.object-fit-none {
  object-fit: none;
}

.opacity-faint {
  opacity: var(--opacity-faint);
}

.opacity-disabled {
  opacity: var(--opacity-disabled);
}

.opacity-muted {
  opacity: var(--opacity-muted);
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.ph-0 {
  padding-inline: 0;
}

.ph-1 {
  padding-inline: var(--space-1);
}

.ph-2 {
  padding-inline: var(--space-2);
}

.ph-3 {
  padding-inline: var(--space-3);
}

.ph-4 {
  padding-inline: var(--space-4);
}

.ph-5 {
  padding-inline: var(--space-5);
}

.pv-0 {
  padding-block: 0;
}

.pv-1 {
  padding-block: var(--space-1);
}

.pv-2 {
  padding-block: var(--space-2);
}

.pv-3 {
  padding-block: var(--space-3);
}

.pv-4 {
  padding-block: var(--space-4);
}

.pv-5 {
  padding-block: var(--space-5);
}

.ps-0 {
  padding-inline-start: 0;
}

.ps-1 {
  padding-inline-start: var(--space-1);
}

.ps-2 {
  padding-inline-start: var(--space-2);
}

.ps-3 {
  padding-inline-start: var(--space-3);
}

.ps-4 {
  padding-inline-start: var(--space-4);
}

.ps-5 {
  padding-inline-start: var(--space-5);
}

.pe-0 {
  padding-inline-end: 0;
}

.pe-1 {
  padding-inline-end: var(--space-1);
}

.pe-2 {
  padding-inline-end: var(--space-2);
}

.pe-3 {
  padding-inline-end: var(--space-3);
}

.pe-4 {
  padding-inline-end: var(--space-4);
}

.pe-5 {
  padding-inline-end: var(--space-5);
}

.pt-0 {
  padding-block-start: 0;
}

.pt-1 {
  padding-block-start: var(--space-1);
}

.pt-2 {
  padding-block-start: var(--space-2);
}

.pt-3 {
  padding-block-start: var(--space-3);
}

.pt-4 {
  padding-block-start: var(--space-4);
}

.pt-5 {
  padding-block-start: var(--space-5);
}

.pb-0 {
  padding-block-end: 0;
}

.pb-1 {
  padding-block-end: var(--space-1);
}

.pb-2 {
  padding-block-end: var(--space-2);
}

.pb-3 {
  padding-block-end: var(--space-3);
}

.pb-4 {
  padding-block-end: var(--space-4);
}

.pb-5 {
  padding-block-end: var(--space-5);
}

.pe-none {
  pointer-events: none;
}

.pe-auto {
  pointer-events: auto;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.top-0 {
  inset-block-start: 0;
}

.bottom-0 {
  inset-block-end: 0;
}

.start-0 {
  inset-inline-start: 0;
}

.end-0 {
  inset-inline-end: 0;
}

.top-50 {
  inset-block-start: 50%;
}

.bottom-50 {
  inset-block-end: 50%;
}

.start-50 {
  inset-inline-start: 50%;
}

.end-50 {
  inset-inline-end: 50%;
}

.top-100 {
  inset-block-start: 100%;
}

.bottom-100 {
  inset-block-end: 100%;
}

.start-100 {
  inset-inline-start: 100%;
}

.end-100 {
  inset-inline-end: 100%;
}

.print-only {
  display: none;
}
.ratio-1x1 {
  inline-size: 100%;
  aspect-ratio: 1/1;
}
.ratio-1x1 > img {
  object-fit: cover;
}

.ratio-4x3 {
  inline-size: 100%;
  aspect-ratio: 4/3;
}
.ratio-4x3 > img {
  object-fit: cover;
}

.ratio-16x9 {
  inline-size: 100%;
  aspect-ratio: 16/9;
}
.ratio-16x9 > img {
  object-fit: cover;
}

.ratio-21x9 {
  inline-size: 100%;
  aspect-ratio: 21/9;
}
.ratio-21x9 > img {
  object-fit: cover;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

*::-webkit-scrollbar {
  width: 0.125rem;
  height: 0.125rem;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--surface-scrim);
}
*::-webkit-scrollbar-button {
  display: none;
}

.scroll-auto {
  scroll-behavior: auto;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}
.corner {
  border-radius: var(--border-radius);
}

.pill {
  --border-radius: 50rem;
  border-radius: 50rem;
}

.circle-1 {
  inline-size: var(--size-1);
  block-size: var(--size-1);
}

.circle-2 {
  inline-size: var(--size-2);
  block-size: var(--size-2);
}

.circle-3 {
  inline-size: var(--size-3);
  block-size: var(--size-3);
}

.circle-4 {
  inline-size: var(--size-4);
  block-size: var(--size-4);
}

.circle-5 {
  inline-size: var(--size-5);
  block-size: var(--size-5);
}

.square-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-1);
  block-size: var(--size-1);
}

.square-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-2);
  block-size: var(--size-2);
}

.square-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-3);
  block-size: var(--size-3);
}

.square-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-4);
  block-size: var(--size-4);
}

.square-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-5);
  block-size: var(--size-5);
}

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

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

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

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

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

:not(.flex):has(> .spacer) {
  display: flex;
  flex-direction: column;
}

.spacer {
  flex: 1;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.w-25-vw {
  inline-size: 25vw;
}

.w-min-25-vw {
  min-inline-size: 25vw;
}

.w-max-25-vw {
  max-inline-size: 25vw;
}

.w-50-vw {
  inline-size: 50vw;
}

.w-min-50-vw {
  min-inline-size: 50vw;
}

.w-max-50-vw {
  max-inline-size: 50vw;
}

.w-75-vw {
  inline-size: 75vw;
}

.w-min-75-vw {
  min-inline-size: 75vw;
}

.w-max-75-vw {
  max-inline-size: 75vw;
}

.w-100-vw {
  inline-size: 100vw;
}

.w-min-100-vw {
  min-inline-size: 100vw;
}

.w-max-100-vw {
  max-inline-size: 100vw;
}

.w-25 {
  inline-size: 25%;
}

.w-min-25 {
  min-inline-size: 25%;
}

.w-max-25 {
  max-inline-size: 25%;
}

.w-50 {
  inline-size: 50%;
}

.w-min-50 {
  min-inline-size: 50%;
}

.w-max-50 {
  max-inline-size: 50%;
}

.w-75 {
  inline-size: 75%;
}

.w-min-75 {
  min-inline-size: 75%;
}

.w-max-75 {
  max-inline-size: 75%;
}

.w-100 {
  inline-size: 100%;
}

.w-min-100 {
  min-inline-size: 100%;
}

.w-max-100 {
  max-inline-size: 100%;
}

.w-auto {
  inline-size: auto;
}

.w-min-auto {
  min-inline-size: auto;
}

.w-max-auto {
  max-inline-size: auto;
}

.w-content-min {
  inline-size: min-content;
}

.w-content-max {
  inline-size: max-content;
}

.w-content-fit {
  inline-size: fit-content;
}

.w-1 {
  inline-size: var(--size-1);
}

.w-2 {
  inline-size: var(--size-2);
}

.w-3 {
  inline-size: var(--size-3);
}

.w-4 {
  inline-size: var(--size-4);
}

.w-5 {
  inline-size: var(--size-5);
}

.z-below {
  z-index: -1;
}

.z-base {
  z-index: 1;
}

.z-raised {
  z-index: 10;
}

.z-dropdown {
  z-index: 260;
}

.z-header {
  z-index: 200;
}

.z-sidebar {
  z-index: 225;
}

.z-sticky {
  z-index: 250;
}

.z-fixed {
  z-index: 251;
}

.z-navbar {
  z-index: 300;
}

.z-overlay {
  z-index: 400;
}

.z-backdrop {
  z-index: 425;
}

.z-drawer {
  z-index: 450;
}

.z-modal {
  z-index: 500;
}

.z-toast {
  z-index: 600;
}

.z-tooltip {
  z-index: 700;
}

.z-critical {
  z-index: 1000;
}

@media (min-width: 0rem) and (max-width: calc(37.5rem - 0.0625rem)){
  html {
    overflow-y: scroll;
  }
  * {
    scrollbar-width: none;
  }
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

@media (min-width: 37.5rem){
  .menu-horizontal {
    display: flex;
    flex-direction: row;
  }
  .menu-horizontal > li {
    flex-shrink: 0;
  }
  .menu-horizontal > li > :is(a, button) {
    justify-content: center;
    min-inline-size: 0;
  }
  .menu-horizontal > li > ul[popover],
  .menu-dropdown > li > ul[popover] {
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-block flip-inline, block-start span-all, flip-inline;
  }
  menu:not(.menu-horizontal):not(.menu-dropdown) > li > ul[popover],
  menu ul[popover] li > ul[popover] {
    position-area: inline-end span-block-end;
    position-try-fallbacks: inline-start span-block-end, inline-end span-block-start, inline-start span-block-start;
  }
  [popover] {
    inset: auto;
    margin: 0;
    --motion-origin: top center;
    --motion-scale: 0.95;
  }
}

@media (min-width: 0rem) and (max-width: calc(37.5rem - 0.0625rem)), (min-width: 100rem){
  html:has([aria-controls=layout-sidebar][aria-expanded=true]) {
    overflow-y: hidden;
  }
}

@media (forced-colors: active), (prefers-contrast: more){
  :root, [data-surface=glass] {
    --ring-color: var(--secondary);
    --ring-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce){
  :root,
  [data-surface=material],
  [data-surface=glass] {
    --motion-duration: 0.01ms;
    --motion-scale: 1;
  }
}

@media print{
  .print-hidden, .footer, footer, .sidebar, .navbar, .layout-navbar, .layout-sidebar, .layout-footer, dialog, .pagination, .breadcrumb {
    display: none;
  }
  .tile, .card {
    box-shadow: none;
    border: none;
  }
  .print-only {
    display: block;
  }
  body {
    padding: 0;
    margin: 0;
  }
}
:root[data-theme=light] {
  color-scheme: light;
}
:root[data-theme=dark] {
  color-scheme: dark;
}

.elevation, .error-elevation, .error-emboss,
[role=button].error-emboss, .warning-elevation, .warning-emboss,
[role=button].warning-emboss, .success-elevation, .success-emboss,
[role=button].success-emboss, .tertiary-elevation, .tertiary-emboss,
[role=button].tertiary-emboss, .secondary-elevation, .secondary-emboss,
[role=button].secondary-emboss, .primary-elevation, [data-surface=glass] menu ul[popover], .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top, .layout-footer, .primary-emboss,
[role=button].primary-emboss, .surface-elevation, menu ul[popover], [popover], .surface-emboss,
[role=button].surface-emboss, .tooltip-bubble {
  box-shadow: var(--border-shadow, 0 0 0 transparent), var(--elevation-size) var(--elevation-color, var(--surface-elevation)), var(--elevation-ambient, 0 0 0 transparent);
}

.primary-elevation, [data-surface=glass] menu ul[popover], .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top, .layout-footer, .primary-emboss,
[role=button].primary-emboss {
  --elevation-color: var(--primary-elevation, var(--surface-elevation));
}

.error-emboss,
[role=button].error-emboss, .form-check-input[aria-invalid=true]:checked, .error-fill,
[role=button].error-fill, .error-skin,
[role=button].error-skin, .form-error-summary, .callout-error, .callout-error-boundary, .callout-error-boundary pre,
.callout-error-boundary code,
.callout-error-boundary .callout-stack, .error-tone,
[role=button].error-tone, .form-select[aria-invalid=true], .form-check-input[aria-invalid=true], .form-control[aria-invalid=true], .error-outline,
[role=button].error-outline, .warning-emboss,
[role=button].warning-emboss, .warning-fill,
[role=button].warning-fill, .warning-skin,
[role=button].warning-skin, .callout-warning, .warning-tone,
[role=button].warning-tone, .warning-outline,
[role=button].warning-outline, .success-emboss,
[role=button].success-emboss, .form-check-input[aria-invalid=false]:checked, .wizard-step[aria-checked=true]::before, .success-fill,
[role=button].success-fill, .success-skin,
[role=button].success-skin, .callout-success, .success-tone,
[role=button].success-tone, .form-select[aria-invalid=false], .form-check-input[aria-invalid=false], .form-control[aria-invalid=false], .success-outline,
[role=button].success-outline, .tertiary-emboss,
[role=button].tertiary-emboss, .tertiary-fill,
[role=button].tertiary-fill, .tertiary-skin,
[role=button].tertiary-skin, .callout-tertiary, .tertiary-tone,
[role=button].tertiary-tone, .tertiary-outline,
[role=button].tertiary-outline, .secondary-emboss,
[role=button].secondary-emboss, .secondary-fill,
[role=button].secondary-fill, .secondary-skin,
[role=button].secondary-skin, .callout-secondary, .secondary-tone,
[role=button].secondary-tone, .secondary-outline,
[role=button].secondary-outline, .layout-footer, .primary-emboss,
[role=button].primary-emboss, .time-cell.selected, .calendar-cell.selected, .form-check-input:checked, .form-check-input:indeterminate[type=checkbox], .btn-check:checked + [role=button], .wizard-step[aria-current=step]::before, .primary-fill,
[role=button].primary-fill, .layout-navbar, .primary-skin,
[role=button].primary-skin, .popover-header, [data-surface=material] menu ul[popover] > li:has(> :is(a, button)), .layout-header, .rich-text-toolbar-btn[aria-pressed=true], .form-drop-zone:hover, .form-drop-zone.drag-over, .calendar-cell.range, .form-dropdown-item:hover, .form-dropdown-item[aria-selected=true], .data-grid-sortable[aria-sort=ascending], .data-grid-sortable[aria-sort=descending], .data-grid-table tbody tr[aria-selected=true] td, [data-surface=material] .data-grid-table thead tr, [data-surface] .collapse-group .collapse, .callout-primary, .primary-tone,
[role=button].primary-tone, details > summary, .collapse > .collapse-toggler, .primary-outline,
[role=button].primary-outline, .surface-emboss,
[role=button].surface-emboss, .tooltip-bubble, .surface-fill,
[role=button].surface-fill, .wizard-step::before, .surface-skin,
[role=button].surface-skin, [popover], .navbar .navbar-home, .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top, .form-chip, .form-file-item, .form-control[readonly], .input-group-text, .data-grid-table thead tr, .collapse-group, .callout-surface, .callout-consent, .callout-offline, .surface-tone,
[role=button].surface-tone, .form-tag-input, .form-select, .form-drop-zone, .form-check-input, .form-control, .surface-outline,
[role=button].surface-outline {
  border-radius: var(--border-radius);
}
.error-emboss a,
[role=button].error-emboss a, .form-check-input[aria-invalid=true]:checked a, .error-fill a,
[role=button].error-fill a, .error-skin a,
[role=button].error-skin a, .form-error-summary a, .callout-error a, .callout-error-boundary a, .callout-error-boundary pre a,
.callout-error-boundary code a,
.callout-error-boundary .callout-stack a, .error-tone a,
[role=button].error-tone a, .form-select[aria-invalid=true] a, .form-check-input[aria-invalid=true] a, .form-control[aria-invalid=true] a, .error-outline a,
[role=button].error-outline a, .warning-emboss a,
[role=button].warning-emboss a, .warning-fill a,
[role=button].warning-fill a, .warning-skin a,
[role=button].warning-skin a, .callout-warning a, .warning-tone a,
[role=button].warning-tone a, .warning-outline a,
[role=button].warning-outline a, .success-emboss a,
[role=button].success-emboss a, .form-check-input[aria-invalid=false]:checked a, .wizard-step[aria-checked=true]::before a, .success-fill a,
[role=button].success-fill a, .success-skin a,
[role=button].success-skin a, .callout-success a, .success-tone a,
[role=button].success-tone a, .form-select[aria-invalid=false] a, .form-check-input[aria-invalid=false] a, .form-control[aria-invalid=false] a, .success-outline a,
[role=button].success-outline a, .tertiary-emboss a,
[role=button].tertiary-emboss a, .tertiary-fill a,
[role=button].tertiary-fill a, .tertiary-skin a,
[role=button].tertiary-skin a, .callout-tertiary a, .tertiary-tone a,
[role=button].tertiary-tone a, .tertiary-outline a,
[role=button].tertiary-outline a, .secondary-emboss a,
[role=button].secondary-emboss a, .secondary-fill a,
[role=button].secondary-fill a, .secondary-skin a,
[role=button].secondary-skin a, .callout-secondary a, .secondary-tone a,
[role=button].secondary-tone a, .secondary-outline a,
[role=button].secondary-outline a, .layout-footer a, .primary-emboss a,
[role=button].primary-emboss a, .time-cell.selected a, .calendar-cell.selected a, .form-check-input:checked a, .form-check-input:indeterminate[type=checkbox] a, .btn-check:checked + [role=button] a, .wizard-step[aria-current=step]::before a, .primary-fill a,
[role=button].primary-fill a, .layout-navbar a, .primary-skin a,
[role=button].primary-skin a, .popover-header a, [data-surface=material] menu ul[popover] > li:has(> :is(a, button)) a, .layout-header a, .rich-text-toolbar-btn[aria-pressed=true] a, .form-drop-zone:hover a, .form-drop-zone.drag-over a, .calendar-cell.range a, .form-dropdown-item:hover a, .form-dropdown-item[aria-selected=true] a, .data-grid-sortable[aria-sort=ascending] a, .data-grid-sortable[aria-sort=descending] a, .data-grid-table tbody tr[aria-selected=true] td a, [data-surface=material] .data-grid-table thead tr a, [data-surface] .collapse-group .collapse a, .callout-primary a, .primary-tone a,
[role=button].primary-tone a, details > summary a, .collapse > .collapse-toggler a, .primary-outline a,
[role=button].primary-outline a, .surface-emboss a,
[role=button].surface-emboss a, .tooltip-bubble a, .surface-fill a,
[role=button].surface-fill a, .wizard-step::before a, .surface-skin a,
[role=button].surface-skin a, [popover] a, .navbar .navbar-home a, .navbar-collapse a, .drawer-bottom a, .reconnect a, dialog a, .layout-sidebar a, .drawer-start a, .drawer-end a, .drawer-top a, .form-chip a, .form-file-item a, .form-control[readonly] a, .input-group-text a, .data-grid-table thead tr a, .collapse-group a, .callout-surface a, .callout-consent a, .callout-offline a, .surface-tone a,
[role=button].surface-tone a, .form-tag-input a, .form-select a, .form-drop-zone a, .form-check-input a, .form-control a, .surface-outline a,
[role=button].surface-outline a {
  color: inherit;
}
.error-emboss:not([data-surface] *), .form-check-input[aria-invalid=true]:not([data-surface] *):checked, .error-fill:not([data-surface] *), .error-skin:not([data-surface] *), .form-error-summary:not([data-surface] *), .callout-error:not([data-surface] *), .callout-error-boundary:not([data-surface] *), .callout-error-boundary pre:not([data-surface] *),
.callout-error-boundary code:not([data-surface] *),
.callout-error-boundary .callout-stack:not([data-surface] *), .error-tone:not([data-surface] *), .form-select[aria-invalid=true]:not([data-surface] *), .form-check-input[aria-invalid=true]:not([data-surface] *), .form-control[aria-invalid=true]:not([data-surface] *), .error-outline:not([data-surface] *), .warning-emboss:not([data-surface] *), .warning-fill:not([data-surface] *), .warning-skin:not([data-surface] *), .callout-warning:not([data-surface] *), .warning-tone:not([data-surface] *), .warning-outline:not([data-surface] *), .success-emboss:not([data-surface] *), .form-check-input[aria-invalid=false]:not([data-surface] *):checked, .wizard-step[aria-checked=true]:not([data-surface] *)::before, .success-fill:not([data-surface] *), .success-skin:not([data-surface] *), .callout-success:not([data-surface] *), .success-tone:not([data-surface] *), .form-select[aria-invalid=false]:not([data-surface] *), .form-check-input[aria-invalid=false]:not([data-surface] *), .form-control[aria-invalid=false]:not([data-surface] *), .success-outline:not([data-surface] *), .tertiary-emboss:not([data-surface] *), .tertiary-fill:not([data-surface] *), .tertiary-skin:not([data-surface] *), .callout-tertiary:not([data-surface] *), .tertiary-tone:not([data-surface] *), .tertiary-outline:not([data-surface] *), .secondary-emboss:not([data-surface] *), .secondary-fill:not([data-surface] *), .secondary-skin:not([data-surface] *), .callout-secondary:not([data-surface] *), .secondary-tone:not([data-surface] *), .secondary-outline:not([data-surface] *), .layout-footer:not([data-surface] *), .primary-emboss:not([data-surface] *), .time-cell.selected:not([data-surface] *), .calendar-cell.selected:not([data-surface] *), .form-check-input:not([data-surface] *):checked, .form-check-input[type=checkbox]:not([data-surface] *):indeterminate, .btn-check:checked + [role=button]:not([data-surface] *), .wizard-step[aria-current=step]:not([data-surface] *)::before, .primary-fill:not([data-surface] *), .layout-navbar:not([data-surface] *), .primary-skin:not([data-surface] *), .popover-header:not([data-surface] *), [data-surface=material] menu ul[popover] > li:not([data-surface] *):has(> :is(a, button)), .layout-header:not([data-surface] *), .rich-text-toolbar-btn[aria-pressed=true]:not([data-surface] *), .form-drop-zone:not([data-surface] *):hover, .form-drop-zone.drag-over:not([data-surface] *), .calendar-cell.range:not([data-surface] *), .form-dropdown-item:not([data-surface] *):hover, .form-dropdown-item[aria-selected=true]:not([data-surface] *), .data-grid-sortable[aria-sort=ascending]:not([data-surface] *), .data-grid-sortable[aria-sort=descending]:not([data-surface] *), .data-grid-table tbody tr[aria-selected=true] td:not([data-surface] *), [data-surface=material] .data-grid-table thead tr:not([data-surface] *), [data-surface] .collapse-group .collapse:not([data-surface] *), .callout-primary:not([data-surface] *), .primary-tone:not([data-surface] *), details > summary:not([data-surface] *), .collapse > .collapse-toggler:not([data-surface] *), .primary-outline:not([data-surface] *), .surface-emboss:not([data-surface] *), .tooltip-bubble:not([data-surface] *), .surface-fill:not([data-surface] *), .wizard-step:not([data-surface] *)::before, .surface-skin:not([data-surface] *), [popover]:not([data-surface] *), .navbar .navbar-home:not([data-surface] *), .navbar-collapse:not([data-surface] *), .drawer-bottom:not([data-surface] *), .reconnect:not([data-surface] *), dialog:not([data-surface] *), .layout-sidebar:not([data-surface] *), .drawer-start:not([data-surface] *), .drawer-end:not([data-surface] *), .drawer-top:not([data-surface] *), .form-chip:not([data-surface] *), .form-file-item:not([data-surface] *), .form-control[readonly]:not([data-surface] *), .input-group-text:not([data-surface] *), .data-grid-table thead tr:not([data-surface] *), .collapse-group:not([data-surface] *), .callout-surface:not([data-surface] *), .callout-consent:not([data-surface] *), .callout-offline:not([data-surface] *), .surface-tone:not([data-surface] *), .form-tag-input:not([data-surface] *), .form-select:not([data-surface] *), .form-drop-zone:not([data-surface] *), .form-check-input:not([data-surface] *), .form-control:not([data-surface] *), .surface-outline:not([data-surface] *) {
  border: var(--border-size) var(--border-style) var(--border-color);
}
[data-surface=glass] .error-emboss,
[data-surface=glass] [role=button].error-emboss, [data-surface=glass] .form-check-input[aria-invalid=true]:checked, [data-surface=glass] .error-fill,
[data-surface=glass] [role=button].error-fill, [data-surface=glass] .error-skin,
[data-surface=glass] [role=button].error-skin, [data-surface=glass] .form-error-summary, [data-surface=glass] .callout-error, [data-surface=glass] .callout-error-boundary, [data-surface=glass] .callout-error-boundary pre, .callout-error-boundary [data-surface=glass] pre,
[data-surface=glass] .callout-error-boundary code,
.callout-error-boundary [data-surface=glass] code,
[data-surface=glass] .callout-error-boundary .callout-stack,
.callout-error-boundary [data-surface=glass] .callout-stack, [data-surface=glass] .error-tone,
[data-surface=glass] [role=button].error-tone, [data-surface=glass] .form-select[aria-invalid=true], [data-surface=glass] .form-check-input[aria-invalid=true], [data-surface=glass] .form-control[aria-invalid=true], [data-surface=glass] .error-outline,
[data-surface=glass] [role=button].error-outline, [data-surface=glass] .warning-emboss,
[data-surface=glass] [role=button].warning-emboss, [data-surface=glass] .warning-fill,
[data-surface=glass] [role=button].warning-fill, [data-surface=glass] .warning-skin,
[data-surface=glass] [role=button].warning-skin, [data-surface=glass] .callout-warning, [data-surface=glass] .warning-tone,
[data-surface=glass] [role=button].warning-tone, [data-surface=glass] .warning-outline,
[data-surface=glass] [role=button].warning-outline, [data-surface=glass] .success-emboss,
[data-surface=glass] [role=button].success-emboss, [data-surface=glass] .form-check-input[aria-invalid=false]:checked, [data-surface=glass] .wizard-step[aria-checked=true]::before, [data-surface=glass] .success-fill,
[data-surface=glass] [role=button].success-fill, [data-surface=glass] .success-skin,
[data-surface=glass] [role=button].success-skin, [data-surface=glass] .callout-success, [data-surface=glass] .success-tone,
[data-surface=glass] [role=button].success-tone, [data-surface=glass] .form-select[aria-invalid=false], [data-surface=glass] .form-check-input[aria-invalid=false], [data-surface=glass] .form-control[aria-invalid=false], [data-surface=glass] .success-outline,
[data-surface=glass] [role=button].success-outline, [data-surface=glass] .tertiary-emboss,
[data-surface=glass] [role=button].tertiary-emboss, [data-surface=glass] .tertiary-fill,
[data-surface=glass] [role=button].tertiary-fill, [data-surface=glass] .tertiary-skin,
[data-surface=glass] [role=button].tertiary-skin, [data-surface=glass] .callout-tertiary, [data-surface=glass] .tertiary-tone,
[data-surface=glass] [role=button].tertiary-tone, [data-surface=glass] .tertiary-outline,
[data-surface=glass] [role=button].tertiary-outline, [data-surface=glass] .secondary-emboss,
[data-surface=glass] [role=button].secondary-emboss, [data-surface=glass] .secondary-fill,
[data-surface=glass] [role=button].secondary-fill, [data-surface=glass] .secondary-skin,
[data-surface=glass] [role=button].secondary-skin, [data-surface=glass] .callout-secondary, [data-surface=glass] .secondary-tone,
[data-surface=glass] [role=button].secondary-tone, [data-surface=glass] .secondary-outline,
[data-surface=glass] [role=button].secondary-outline, [data-surface=glass] .layout-footer, [data-surface=glass] .primary-emboss,
[data-surface=glass] [role=button].primary-emboss, [data-surface=glass] .time-cell.selected, [data-surface=glass] .calendar-cell.selected, [data-surface=glass] .form-check-input:checked, [data-surface=glass] .form-check-input:indeterminate[type=checkbox], [data-surface=glass] .btn-check:checked + [role=button], [data-surface=glass] .wizard-step[aria-current=step]::before, [data-surface=glass] .primary-fill,
[data-surface=glass] [role=button].primary-fill, [data-surface=glass] .layout-navbar, [data-surface=glass] .primary-skin,
[data-surface=glass] [role=button].primary-skin, [data-surface=glass] .popover-header, [data-surface=glass] [data-surface=material] menu ul[popover] > li:has(> :is(a, button)), [data-surface=material] menu [data-surface=glass] ul[popover] > li:has(> :is(a, button)), [data-surface=glass] .layout-header, [data-surface=glass] .rich-text-toolbar-btn[aria-pressed=true], [data-surface=glass] .form-drop-zone:hover, [data-surface=glass] .form-drop-zone.drag-over, [data-surface=glass] .calendar-cell.range, [data-surface=glass] .form-dropdown-item:hover, [data-surface=glass] .form-dropdown-item[aria-selected=true], [data-surface=glass] .data-grid-sortable[aria-sort=ascending], [data-surface=glass] .data-grid-sortable[aria-sort=descending], [data-surface=glass] .data-grid-table tbody tr[aria-selected=true] td, .data-grid-table tbody tr[aria-selected=true] [data-surface=glass] td, [data-surface=glass] [data-surface=material] .data-grid-table thead tr, [data-surface=material] .data-grid-table thead [data-surface=glass] tr, [data-surface=glass] [data-surface] .collapse-group .collapse, [data-surface] .collapse-group [data-surface=glass] .collapse, [data-surface=glass] .callout-primary, [data-surface=glass] .primary-tone,
[data-surface=glass] [role=button].primary-tone, [data-surface=glass] details > summary, [data-surface=glass] .collapse > .collapse-toggler, [data-surface=glass] .primary-outline,
[data-surface=glass] [role=button].primary-outline, [data-surface=glass] .surface-emboss,
[data-surface=glass] [role=button].surface-emboss, [data-surface=glass] .tooltip-bubble, [data-surface=glass] .surface-fill,
[data-surface=glass] [role=button].surface-fill, [data-surface=glass] .wizard-step::before, [data-surface=glass] .surface-skin,
[data-surface=glass] [role=button].surface-skin, [data-surface=glass] [popover], [data-surface=glass] .navbar .navbar-home, .navbar [data-surface=glass] .navbar-home, [data-surface=glass] .navbar-collapse, [data-surface=glass] .drawer-bottom, [data-surface=glass] .reconnect, [data-surface=glass] dialog, [data-surface=glass] .layout-sidebar, [data-surface=glass] .drawer-start, [data-surface=glass] .drawer-end, [data-surface=glass] .drawer-top, [data-surface=glass] .form-chip, [data-surface=glass] .form-file-item, [data-surface=glass] .form-control[readonly], [data-surface=glass] .input-group-text, [data-surface=glass] .data-grid-table thead tr, .data-grid-table thead [data-surface=glass] tr, [data-surface=glass] .collapse-group, [data-surface=glass] .callout-surface, [data-surface=glass] .callout-consent, [data-surface=glass] .callout-offline, [data-surface=glass] .surface-tone,
[data-surface=glass] [role=button].surface-tone, [data-surface=glass] .form-tag-input, [data-surface=glass] .form-select, [data-surface=glass] .form-drop-zone, [data-surface=glass] .form-check-input, [data-surface=glass] .form-control, [data-surface=glass] .surface-outline,
[data-surface=glass] [role=button].surface-outline {
  --glass-blur: blur(1rem);
  backdrop-filter: var(--active-blur, var(--glass-blur));
  -webkit-backdrop-filter: var(--active-blur, var(--glass-blur));
  background-color: transparent;
  background-image: radial-gradient(140% 140% at 20% 0%, var(--glass-light, transparent), rgba(255, 255, 255, 0.1) 75%);
  color: var(--body-color);
}

.popover-header, [data-surface=material] menu ul[popover] > li:has(> :is(a, button)), .layout-header, .rich-text-toolbar-btn[aria-pressed=true], .form-drop-zone:hover, .form-drop-zone.drag-over, .calendar-cell.range, .form-dropdown-item:hover, .form-dropdown-item[aria-selected=true], .data-grid-sortable[aria-sort=ascending], .data-grid-sortable[aria-sort=descending], .data-grid-table tbody tr[aria-selected=true] td, [data-surface=material] .data-grid-table thead tr, [data-surface] .collapse-group .collapse, .callout-primary, .primary-tone,
[role=button].primary-tone {
  background: var(--primary-light);
  --glass-light: color-mix(in srgb, var(--primary) 15%, transparent);
  --border-color: var(--primary-emphasis);
  color: rgb(from var(--primary-emphasis) r g b/1);
}
.popover-header:is(a, button, [role=button]):hover, [data-surface=material] menu ul[popover] > li:is(a, button, [role=button]):hover:has(> :is(a, button)), .layout-header:is(a, button, [role=button]):hover, .rich-text-toolbar-btn[aria-pressed=true]:is(a, button, [role=button]):hover, .form-drop-zone:is(a, button, [role=button]):hover, .calendar-cell.range:is(a, button, [role=button]):hover, .form-dropdown-item:is(a, button, [role=button]):hover, .data-grid-sortable[aria-sort=ascending]:is(a, button, [role=button]):hover, .data-grid-sortable[aria-sort=descending]:is(a, button, [role=button]):hover, .data-grid-table tbody tr[aria-selected=true] td:is(a, button, [role=button]):hover, [data-surface=material] .data-grid-table thead tr:is(a, button, [role=button]):hover, [data-surface] .collapse-group .collapse:is(a, button, [role=button]):hover, .callout-primary:is(a, button, [role=button]):hover, .primary-tone:is(a, button, [role=button]):hover {
  background: var(--primary-subtle);
}
.popover-header:is(a, button, [role=button]):active, [data-surface=material] menu ul[popover] > li:is(a, button, [role=button]):active:has(> :is(a, button)), .layout-header:is(a, button, [role=button]):active, .rich-text-toolbar-btn[aria-pressed=true]:is(a, button, [role=button]):active, .form-drop-zone:is(a, button, [role=button]):active:hover, .form-drop-zone.drag-over:is(a, button, [role=button]):active, .calendar-cell.range:is(a, button, [role=button]):active, .form-dropdown-item:is(a, button, [role=button]):active:hover, .form-dropdown-item[aria-selected=true]:is(a, button, [role=button]):active, .data-grid-sortable[aria-sort=ascending]:is(a, button, [role=button]):active, .data-grid-sortable[aria-sort=descending]:is(a, button, [role=button]):active, .data-grid-table tbody tr[aria-selected=true] td:is(a, button, [role=button]):active, [data-surface=material] .data-grid-table thead tr:is(a, button, [role=button]):active, [data-surface] .collapse-group .collapse:is(a, button, [role=button]):active, .callout-primary:is(a, button, [role=button]):active, .primary-tone:is(a, button, [role=button]):active {
  background: var(--primary-accent);
}
[aria-pressed=true].popover-header, [data-surface=material] menu ul[popover] > li[aria-pressed=true]:has(> :is(a, button)), [aria-pressed=true].layout-header, [aria-pressed=true].rich-text-toolbar-btn, [aria-pressed=true].form-drop-zone:hover, [aria-pressed=true].form-drop-zone.drag-over, [aria-pressed=true].calendar-cell.range, [aria-pressed=true].form-dropdown-item:hover, [aria-pressed=true].form-dropdown-item[aria-selected=true], [aria-pressed=true].data-grid-sortable[aria-sort=ascending], [aria-pressed=true].data-grid-sortable[aria-sort=descending], .data-grid-table tbody tr[aria-selected=true] td[aria-pressed=true], [data-surface=material] .data-grid-table thead tr[aria-pressed=true], [data-surface] .collapse-group [aria-pressed=true].collapse, [aria-pressed=true].callout-primary, [aria-pressed=true].primary-tone, [aria-expanded=true].popover-header, [data-surface=material] menu ul[popover] > li[aria-expanded=true]:has(> :is(a, button)), [aria-expanded=true].layout-header, [aria-expanded=true].form-drop-zone:hover, [aria-expanded=true].form-drop-zone.drag-over, [aria-expanded=true].calendar-cell.range, [aria-expanded=true].form-dropdown-item:hover, [aria-expanded=true].form-dropdown-item[aria-selected=true], [aria-expanded=true].data-grid-sortable[aria-sort=ascending], [aria-expanded=true].data-grid-sortable[aria-sort=descending], .data-grid-table tbody tr[aria-selected=true] td[aria-expanded=true], [data-surface=material] .data-grid-table thead tr[aria-expanded=true], [data-surface] .collapse-group [aria-expanded=true].collapse, [aria-expanded=true].callout-primary, [aria-expanded=true].primary-tone {
  background: var(--primary-accent);
}

[data-surface=material],
[data-surface=glass] {
  --surface-inset: var(--space-3);
}

[data-surface=material] .table:not(.table-bordered):not(.table-border-rows):not(.table-border-columns) > :not(caption) > * > *,
[data-surface=glass] .table:not(.table-bordered):not(.table-border-rows):not(.table-border-columns) > :not(caption) > * > * {
  border-block-end: var(--border-size) solid var(--table-border-color);
}

[data-theme="dark"]{

.hljs {
  --code-block-hljs-color: #d4d4d4;
  --code-block-hljs-keyword: #569cd6;
  --code-block-hljs-string: #ce9178;
  --code-block-hljs-comment: #6a9955;
  --code-block-hljs-number: #b5cea8;
  --code-block-hljs-tag: #569cd6;
  --code-block-hljs-name: #9cdcfe;
  --code-block-hljs-type: #4ec9b0;
  --code-block-hljs-function: #dcdcaa;
}
}

[data-surface="material"]{
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring-shadow: 0 0 0 0 transparent;
  --font-base: 'Roboto Flex', system-ui, sans-serif;
  --border-size: 1.25px;
  --border-radius: 1.25rem;
  --surface: color-mix(in srgb, var(--primary) 15%, white);
  --body-bg: light-dark( color-mix(in srgb, var(--primary) 10%, white), color-mix(in srgb, var(--primary) 10%, #292929) );
  --surface-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --primary-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --secondary-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --tertiary-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --success-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --warning-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --error-elevation: color-mix(in srgb, var(--body-color) var(--elevation-mix), transparent);
  --elevation-size: 0 0.125rem 0.25rem;
  --elevation-mix: 12%;
  --motion-duration: 0.5s;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --motion-scale: 0.92;

.raised, .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top {
  --elevation-size: 0 0.25rem 0.5rem;
}

.card {
  border: none;
}
.card-header, .card-footer {
  border-color: var(--surface-subtle);
}
.card-hoverable:hover {
  translate: 0 -0.125rem;
}
.card-group > .card:not(:first-child) {
  border-inline-start: var(--border-size) solid var(--surface-subtle);
}

.data-grid {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.graphic-svg {
  filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 12%, transparent));
}

.toolbar, .toolbar-vertical {
  border: none;
  background: transparent;
  box-shadow: none;
}
.toolbar > :is(button, a), .toolbar-vertical > :is(button, a) {
  box-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: var(--space-4) var(--space-2);
  padding-block-end: 0;
  border-block-end: 0;
  line-height: 1.25;
}
h1, h2, h3 {
  font-weight: var(--font-weight-3);
}
h4, h5, h6 {
  font-weight: var(--font-weight-4);
}
menu ul[popover] {
  background: none;
  border: none;
  box-shadow: none;
}
menu ul[popover] > li:has(> :is(a, button)) {
  border: none;
}

.table {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.table:not(.table-surface):not(.table-primary):not(.table-secondary):not(.table-tertiary):not(.table-success):not(.table-warning):not(.table-error) {
  --table-striped-bg: var(--surface-light);
  --table-hover-bg: var(--surface-subtle);
  --table-active-bg: var(--surface-subtle);
}

.loader-logo {
  filter: drop-shadow(0 0.5rem 1rem var(--surface-elevation));
}
}

[data-surface="glass"]{
  --ring-shadow: 0 0 0.75rem var(--secondary);
  --font-base: 'Outfit', sans-serif;
  --border-size: 1px;
  --border-radius: 0.5rem;
  --border-shadow: inset 0 0.5px 0 rgb(255 255 255 / 50%);
  border-block-end-color: var(--surface-scrim);
  --color-opacity: 50%;
  --surface-elevation: color-mix(in srgb, var(--surface) var(--elevation-mix), transparent);
  --primary-elevation: color-mix(in srgb, var(--primary) var(--elevation-mix), transparent);
  --secondary-elevation: color-mix(in srgb, var(--secondary) var(--elevation-mix), transparent);
  --tertiary-elevation: color-mix(in srgb, var(--tertiary) var(--elevation-mix), transparent);
  --success-elevation: color-mix(in srgb, var(--success) var(--elevation-mix), transparent);
  --warning-elevation: color-mix(in srgb, var(--warning) var(--elevation-mix), transparent);
  --error-elevation: color-mix(in srgb, var(--error) var(--elevation-mix), transparent);
  --body-bg: light-dark(var(--surface), var(--scrim));
  --body-img-1: radial-gradient(at 20% 30%, color-mix(in srgb, var(--primary) 60%, transparent) 0%, transparent 50%);
  --body-img-2: radial-gradient(at 80% 20%, color-mix(in srgb, var(--secondary) 60%, transparent) 0%, transparent 45%);
  --body-img-3: radial-gradient(at 70% 80%, color-mix(in srgb, var(--primary) 60%, transparent) 0%, transparent 50%);
  --body-img-4: radial-gradient(at 30% 90%, color-mix(in srgb, var(--tertiary) 60%, transparent) 0%, transparent 50%);
  --body-img: var(--body-img-1), var(--body-img-2), var(--body-img-3), var(--body-img-4);
  --elevation-size: 0 0.25rem 0.75rem;
  --elevation-ambient: 0 4px 16px color-mix(in srgb, black 8%, transparent);
  --elevation-mix: 35%;
  --motion-duration: 0.4s;
  --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-ease-enter: linear(0, .762 31%, 1.02 68%, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 0.7, 0.1);
  --motion-scale: 1.15;
.navbar-collapse::backdrop, .drawer-bottom::backdrop, .reconnect::backdrop, dialog::backdrop, .layout-sidebar::backdrop, .drawer-start::backdrop, .drawer-end::backdrop, .drawer-top::backdrop {
  background: var(--surface-scrim);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
[open].navbar-collapse::backdrop, [open].drawer-bottom::backdrop, [open].reconnect::backdrop, dialog[open]::backdrop, [open].layout-sidebar::backdrop, [open].drawer-start::backdrop, [open].drawer-end::backdrop, [open].drawer-top::backdrop {
  backdrop-filter: var(--active-blur, var(--glass-blur));
  -webkit-backdrop-filter: var(--active-blur, var(--glass-blur));
}
.raised, .navbar-collapse, .drawer-bottom, .reconnect, dialog, .layout-sidebar, .drawer-start, .drawer-end, .drawer-top {
  --elevation-size: 0 0.5rem 1.25rem;
}

.card {
  border-color: var(--surface-light);
}
.card-header, .card-footer {
  background-color: var(--surface-light);
  border-color: var(--surface-light);
}
.card-hoverable:hover {
  background: var(--surface-light);
  backdrop-filter: var(--glass-blur) saturate(160%);
}
.card-group > .card:not(:first-child) {
  border-inline-start: var(--border-size) solid var(--surface-subtle);
}
.data-grid {
  overflow: hidden;
}

.graphic {
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.graphic-svg {
  filter: drop-shadow(0 0 0.25rem color-mix(in srgb, currentColor 25%, transparent));
}
.input-group > :first-child, .toolbar > :first-child, .pagination > :first-child {
  border-start-start-radius: calc(var(--border-radius) - var(--border-size));
  border-end-start-radius: calc(var(--border-radius) - var(--border-size));
}
.input-group > :last-child, .toolbar > :last-child, .pagination > :last-child {
  border-start-end-radius: calc(var(--border-radius) - var(--border-size));
  border-end-end-radius: calc(var(--border-radius) - var(--border-size));
}
.input-group > * + *, .toolbar > * + *, .pagination > * + * {
  margin-inline-start: 0;
  border-inline-start: var(--border-size) var(--border-style) color-mix(in srgb, currentColor 15%, transparent);
}
.toolbar-vertical > :first-child {
  border-start-start-radius: calc(var(--border-radius) - var(--border-size));
  border-start-end-radius: calc(var(--border-radius) - var(--border-size));
}
.toolbar-vertical > :last-child {
  border-end-start-radius: calc(var(--border-radius) - var(--border-size));
  border-end-end-radius: calc(var(--border-radius) - var(--border-size));
}
.toolbar-vertical > * + * {
  margin-block-start: 0;
  border-block-start: var(--border-size) var(--border-style) color-mix(in srgb, currentColor 15%, transparent);
}
.input-group > :is(button, a), .toolbar > :is(button, a), .pagination > :is(button, a), .toolbar-vertical > :is(button, a) {
  border: none;
  box-shadow: none;
}

.toast {
  border-color: var(--surface-subtle);
}

h1, h2, h3, h4, h5, h6 {
  margin-block: var(--space-5) var(--space-4);
  padding-block-end: 0;
  border-block-end: 0;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--tertiary) 100%);
  background-clip: text;
  color: transparent;
}

.list-group > li {
  border-color: var(--surface-subtle);
}
menu ul[popover] {
  --active-blur: initial;
}

.table {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.table:not(.table-surface):not(.table-primary):not(.table-secondary):not(.table-tertiary):not(.table-success):not(.table-warning):not(.table-error) {
  --table-striped-bg: var(--surface-light);
  --table-hover-bg: var(--surface-subtle);
  --table-active-bg: var(--surface-subtle);
}

.loader {
  background-image: var(--body-img);
  background-attachment: fixed;
}

.loader-logo {
  filter: drop-shadow(0 0.5rem 1.5rem var(--primary-elevation));
}

.surface-border {
  border-block-start-color: var(--surface-elevation);
  border-inline-color: var(--surface-elevation);
}
.primary-border {
  border-block-start-color: var(--primary-elevation);
  border-inline-color: var(--primary-elevation);
}
.secondary-border {
  border-block-start-color: var(--secondary-elevation);
  border-inline-color: var(--secondary-elevation);
}
.tertiary-border {
  border-block-start-color: var(--tertiary-elevation);
  border-inline-color: var(--tertiary-elevation);
}
.success-border {
  border-block-start-color: var(--success-elevation);
  border-inline-color: var(--success-elevation);
}
.warning-border {
  border-block-start-color: var(--warning-elevation);
  border-inline-color: var(--warning-elevation);
}
.error-border {
  border-block-start-color: var(--error-elevation);
  border-inline-color: var(--error-elevation);
}
}