@charset "UTF-8";
:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --ripple-color: currentColor;
  --ripple-opacity: 0.18;
  --ripple-duration: 550ms;
  --ripple-easing: cubic-bezier(0, 0, 0.2, 1);
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-shadow-width: 3px;
  --sidebar-width: 280px;
  --header-height: 56px;
  --container-padding-x: var(--space-xl);
  --container-max-width: 72rem;
  --container-max-width-sm: 36rem;
  --container-max-width-md: 48rem;
  --container-max-width-lg: 64rem;
  --container-max-width-xl: 80rem;
  --grid-columns: 12;
  --grid-gap: var(--space-md);
  --grid-gap-sm: var(--space-sm);
  --grid-gap-lg: var(--space-lg);
  --grid-auto-min: 10rem;
  --flex-gap: var(--space-md);
  --flex-gap-sm: var(--space-sm);
  --flex-gap-lg: var(--space-lg);
  --flex-auto-min: 10rem;
  --divider-color: var(--color-border-subtle);
  --divider-thickness: 1px;
  --divider-margin-y: var(--space-md);
  --divider-margin-x: var(--space-sm);
  --divider-text-gap: var(--space-md);
  --divider-orient-inset: 5%;
  --space-gap: var(--space-md);
  --text-size-xs: 0.75rem;
  --text-size-sm: 0.8125rem;
  --text-size-base: 0.875rem;
  --text-size-lg: 1rem;
  --text-size-xl: 1.125rem;
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-font-size: var(--text-size-base);
  --btn-font-weight: 600;
  --btn-font-weight-normal: 400;
  --btn-line-height: 1.4;
  --btn-border-width: 1px;
  --btn-gap: var(--space-sm);
  --btn-padding-y-sm: 0.3rem;
  --btn-padding-x-sm: 0.75rem;
  --btn-font-size-sm: var(--text-size-sm);
  --btn-padding-y-lg: 0.65rem;
  --btn-padding-x-lg: 1.25rem;
  --btn-font-size-lg: var(--text-size-lg);
  --btn-icon-size: 1em;
  --btn-icon-size-md: 1.125em;
  --btn-icon-size-lg: 1.25em;
  --btn-icon-size-xl: 1.375em;
  --btn-icon-only-padding: 0.5rem;
  --btn-icon-only-padding-sm: 0.35rem;
  --btn-icon-only-padding-lg: 0.65rem;
  --btn-vertical-min-width: 4.5rem;
  --btn-vertical-min-width-sm: 3.75rem;
  --btn-vertical-min-width-lg: 5.25rem;
  --btn-vertical-padding-y: 0.65rem;
  --btn-vertical-padding-x: 0.75rem;
  --btn-vertical-padding-y-sm: 0.5rem;
  --btn-vertical-padding-x-sm: 0.6rem;
  --btn-vertical-padding-y-lg: 0.85rem;
  --btn-vertical-padding-x-lg: 0.9rem;
  --btn-vertical-label-size: var(--text-size-sm);
  --btn-vertical-label-size-sm: var(--text-size-xs);
  --btn-vertical-label-size-lg: var(--text-size-base);
  --btn-vertical-label-weight: 500;
  --btn-vertical-label-line-height: 1.25;
  --btn-select-min-width: 10rem;
  --btn-select-max-width: 320px;
  --btn-select-padding-right: 0.65rem;
  --btn-select-padding-right-sm: 0.5rem;
  --btn-select-padding-right-lg: 0.85rem;
  --btn-select-text-padding-x: 0.5rem;
  --btn-select-text-padding-right: 0.35rem;
  --btn-select-text-padding-x-sm: 0.35rem;
  --btn-select-text-padding-right-sm: 0.25rem;
  --btn-select-text-padding-x-lg: 0.65rem;
  --btn-select-text-padding-right-lg: 0.45rem;
  --btn-spinner-size: 1em;
  --btn-spinner-border: 2px;
  --btn-spinner-duration: 0.6s;
  --btn-stack-text-size: var(--text-size-sm);
  --btn-stack-text-line-height: 1.5;
  --btn-group-overlap: -1px;
  --icon-size-sm: 1rem;
  --icon-size: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-xl: 2rem;
  --icon-spin-duration: 0.8s;
  --icon-circle-size: 2.25rem;
  --icon-circle-size-sm: 1.75rem;
  --icon-circle-size-lg: 2.75rem;
  --icon-pulse-duration: 1.5s;
  --input-max-width: 320px;
  --input-clear-size: 1.25rem;
  --input-clear-icon-size: 0.875rem;
  --input-clear-offset: 0.75rem;
  --input-clear-color: var(--color-text-muted);
  --input-clear-hover-color: var(--color-text);
  --input-font-masked: Verdana, "Segoe UI", Arial, sans-serif;
  --input-masked-letter-spacing: 0.08em;
  --select-padding-right: 2.25rem;
  --select-padding-right-sm: 2rem;
  --select-padding-right-lg: 2.5rem;
  --select-caret-offset: 0.65rem;
  --select-caret-offset-sm: 0.5rem;
  --select-caret-offset-lg: 0.85rem;
  --select-caret-size: 1em;
  --select-caret-size-sm: 0.875em;
  --select-caret-size-lg: 1.125em;
  --date-picker-input-padding-y: 0.5rem;
  --date-picker-input-padding-x: 0.75rem;
  --date-picker-input-font-size: var(--text-size-base);
  --date-picker-btn-size: 2.25rem;
  --date-picker-icon-size: 1rem;
  --textarea-min-height: 5rem;
  --textarea-count-inset-x: 0.75rem;
  --textarea-count-inset-y: 0.5rem;
  --form-label-width: 7.5rem;
  --form-label-width-sm: 5rem;
  --form-label-width-lg: 10rem;
  --form-field-gap: var(--space-lg);
  --form-inline-field-min-width: 8rem;
  --form-actions-gap: var(--space-sm);
  --checkbox-size: 1rem;
  --checkbox-size-sm: 0.875rem;
  --checkbox-size-lg: 1.125rem;
  --checkbox-border-width: 1px;
  --checkbox-radius: 4px;
  --checkbox-gap: var(--space-sm);
  --checkbox-gap-sm: 0.375rem;
  --checkbox-gap-lg: 0.625rem;
  --checkbox-font-size: var(--text-size-base);
  --checkbox-font-size-sm: var(--text-size-sm);
  --checkbox-font-size-lg: var(--text-size-lg);
  --checkbox-line-height: 1.5;
  --checkbox-label-weight: 400;
  --checkbox-hint-size: var(--text-size-sm);
  --checkbox-control-offset: 0.125rem;
  --checkbox-group-gap: var(--space-sm);
  --checkbox-button-padding-y: 0.35rem;
  --checkbox-button-padding-x: 0.75rem;
  --radio-size: var(--checkbox-size);
  --radio-size-sm: var(--checkbox-size-sm);
  --radio-size-lg: var(--checkbox-size-lg);
  --radio-border-width: var(--checkbox-border-width);
  --radio-gap: var(--checkbox-gap);
  --radio-gap-sm: var(--checkbox-gap-sm);
  --radio-gap-lg: var(--checkbox-gap-lg);
  --radio-font-size: var(--checkbox-font-size);
  --radio-font-size-sm: var(--checkbox-font-size-sm);
  --radio-font-size-lg: var(--checkbox-font-size-lg);
  --radio-line-height: var(--checkbox-line-height);
  --radio-label-weight: var(--checkbox-label-weight);
  --radio-hint-size: var(--checkbox-hint-size);
  --radio-control-offset: var(--checkbox-control-offset);
  --radio-group-gap: var(--checkbox-group-gap);
  --radio-button-padding-y: var(--checkbox-button-padding-y);
  --radio-button-padding-x: var(--checkbox-button-padding-x);
  --switch-width: 2.75rem;
  --switch-height: 1.5rem;
  --switch-width-sm: 2.25rem;
  --switch-height-sm: 1.25rem;
  --switch-width-lg: 3.25rem;
  --switch-height-lg: 1.75rem;
  --switch-padding: 2px;
  --switch-radius: 999px;
  --switch-gap: var(--checkbox-gap);
  --switch-gap-sm: var(--checkbox-gap-sm);
  --switch-gap-lg: var(--checkbox-gap-lg);
  --switch-font-size: var(--checkbox-font-size);
  --switch-font-size-sm: var(--checkbox-font-size-sm);
  --switch-font-size-lg: var(--checkbox-font-size-lg);
  --switch-line-height: var(--checkbox-line-height);
  --switch-label-weight: var(--checkbox-label-weight);
  --switch-hint-size: var(--checkbox-hint-size);
  --switch-group-gap: var(--checkbox-group-gap);
  --slider-track-height: 4px;
  --slider-track-height-sm: 3px;
  --slider-track-height-lg: 6px;
  --slider-thumb-size: 14px;
  --slider-thumb-size-sm: 12px;
  --slider-thumb-size-lg: 18px;
  --slider-thumb-border-width: 2px;
  --slider-radius: 999px;
  --slider-width: 100%;
  --slider-max-width: var(--input-max-width);
  --slider-gap: var(--space-sm);
  --slider-font-size: var(--checkbox-font-size);
  --slider-font-size-sm: var(--checkbox-font-size-sm);
  --slider-font-size-lg: var(--checkbox-font-size-lg);
  --slider-line-height: var(--checkbox-line-height);
  --slider-label-weight: var(--checkbox-label-weight);
  --slider-value-size: var(--text-size-sm);
  --slider-value-size-sm: var(--text-size-xs);
  --slider-value-size-lg: var(--text-size-base);
  --slider-tick-size: var(--text-size-xs);
  --slider-hint-size: var(--checkbox-hint-size);
  --slider-step-size: 2.25rem;
  --slider-step-size-sm: 1.875rem;
  --slider-step-size-lg: 2.5rem;
  --slider-step-gap: var(--space-sm);
  --slider-step-icon-size: 1rem;
  --rate-star-size: 1.25rem;
  --rate-star-size-sm: 1rem;
  --rate-star-size-lg: 1.5rem;
  --rate-star-gap: 0.125rem;
  --rate-gap: var(--space-sm);
  --rate-font-size: var(--checkbox-font-size);
  --rate-font-size-sm: var(--checkbox-font-size-sm);
  --rate-font-size-lg: var(--checkbox-font-size-lg);
  --rate-line-height: var(--checkbox-line-height);
  --rate-label-weight: var(--checkbox-label-weight);
  --rate-value-size: var(--text-size-sm);
  --rate-value-size-sm: var(--text-size-xs);
  --rate-value-size-lg: var(--text-size-base);
  --rate-hint-size: var(--checkbox-hint-size);
  --rate-clear-size: 1.5rem;
  --rate-clear-size-sm: 1.25rem;
  --rate-clear-size-lg: 1.75rem;
  --rate-clear-font-size: 1.125rem;
  --typo-title-1-size: 2.375rem;
  --typo-title-1-weight: 700;
  --typo-title-1-line-height: 1.2;
  --typo-title-1-letter-spacing: -0.02em;
  --typo-title-2-size: 1.875rem;
  --typo-title-2-weight: 700;
  --typo-title-2-line-height: 1.25;
  --typo-title-2-letter-spacing: -0.015em;
  --typo-title-3-size: 1.5rem;
  --typo-title-3-weight: 600;
  --typo-title-3-line-height: 1.3;
  --typo-title-3-letter-spacing: -0.01em;
  --typo-title-4-size: 1.25rem;
  --typo-title-4-weight: 600;
  --typo-title-4-line-height: 1.35;
  --typo-title-5-size: 1rem;
  --typo-title-5-weight: 600;
  --typo-title-5-line-height: 1.4;
  --typo-text-size: var(--text-size-base);
  --typo-text-line-height: 1.6;
  --typo-text-size-xs: var(--text-size-xs);
  --typo-text-size-sm: var(--text-size-sm);
  --typo-text-size-lg: var(--text-size-lg);
  --typo-text-size-xl: var(--text-size-xl);
  --typo-paragraph-gap: var(--space-md);
  --typo-list-gap: var(--space-xs);
  --typo-mark-bg: rgba(250, 219, 20, 0.35);
  --typo-sub-sup-size: 0.75em;
  --typo-sub-offset: -0.25em;
  --typo-sup-offset: -0.5em;
  --typo-small-size: var(--text-size-sm);
  --typo-code-padding-y: 0.1em;
  --typo-code-padding-x: 0.35em;
  --typo-code-radius: 4px;
  --typo-blockquote-border-width: 3px;
  --typo-lead-size: var(--text-size-lg);
  --typo-lead-line-height: 1.6;
  --typo-caption-size: var(--text-size-xs);
  --typo-label-size: var(--text-size-sm);
  --typo-label-weight: 600;
  --typo-overline-size: var(--text-size-xs);
  --typo-overline-weight: 600;
  --typo-overline-spacing: 0.06em;
  --typo-kbd-padding-y: 0.15em;
  --typo-kbd-padding-x: 0.4em;
  --typo-pre-padding: var(--space-md);
  --typo-pre-radius: var(--radius-md);
  --link-gap: var(--space-xs);
  --link-font-weight: 500;
  --link-underline-offset: 2px;
  --link-nav-padding-y: 0.35rem;
  --link-nav-padding-x: 0.5rem;
  --link-standalone-padding-y: 0.25rem;
  --link-standalone-padding-x: 0.15rem;
  --link-icon-only-size: 2rem;
  --navbar-height: var(--header-height);
  --navbar-height-sm: 3rem;
  --navbar-height-lg: 4rem;
  --navbar-padding-x: var(--space-lg);
  --navbar-gap: var(--space-md);
  --navbar-brand-font-size: var(--text-size-lg);
  --navbar-brand-font-weight: 700;
  --navbar-link-padding-y: 0.35rem;
  --navbar-link-padding-x: 0.5rem;
  --navbar-link-font-weight: 500;
  --navbar-search-width: 12rem;
  --navbar-search-width-lg: 16rem;
  --menu-width: 16rem;
  --menu-padding: var(--space-sm);
  --menu-gap: 2px;
  --menu-font-size: var(--text-size-sm);
  --menu-item-padding-y: 0.5rem;
  --menu-item-padding-x: 0.75rem;
  --menu-link-font-weight: 500;
  --menu-icon-size: 1rem;
  --menu-arrow-size: 0.875rem;
  --menu-submenu-indent: 1.75rem;
  --menu-divider-margin-y: var(--space-xs);
  --menu-group-padding-y: var(--space-sm);
  --menu-group-font-size: 0.6875rem;
  --dropdown-min-width: 10rem;
  --dropdown-menu-width: auto;
  --dropdown-padding: var(--space-xs);
  --dropdown-offset: var(--space-xs);
  --dropdown-item-line-height: 1.4;
  --z-dropdown: 100;
  --popover-min-width: 10rem;
  --popover-max-width: 20rem;
  --popover-padding-x: var(--space-md);
  --popover-padding-y: var(--space-md);
  --popover-title-padding-y: var(--space-sm);
  --popover-footer-padding-y: var(--space-sm);
  --popover-title-font-size: var(--text-size-sm);
  --popover-body-font-size: var(--text-size-sm);
  --popover-offset: var(--space-sm);
  --popover-offset-md: var(--space-sm);
  --popover-offset-sm: var(--space-xs);
  --popover-offset-lg: var(--space-md);
  --popover-arrow-size: 8px;
  --popover-close-size: 1.5rem;
  --popover-close-icon-size: 0.875rem;
  --z-popover: 110;
  --popover-min-width-sm: 8rem;
  --popover-max-width-sm: 16rem;
  --popover-padding-x-sm: var(--space-sm);
  --popover-padding-y-sm: var(--space-sm);
  --popover-title-padding-y-sm: var(--space-xs);
  --popover-footer-padding-y-sm: var(--space-xs);
  --popover-title-font-size-sm: var(--text-size-xs);
  --popover-body-font-size-sm: var(--text-size-xs);
  --popover-arrow-size-sm: 6px;
  --popover-min-width-lg: 12rem;
  --popover-max-width-lg: 28rem;
  --popover-padding-x-lg: var(--space-lg);
  --popover-padding-y-lg: var(--space-lg);
  --popover-title-padding-y-lg: var(--space-md);
  --popover-footer-padding-y-lg: var(--space-md);
  --popover-title-font-size-lg: var(--text-size-base);
  --popover-body-font-size-lg: var(--text-size-base);
  --popover-arrow-size-lg: 10px;
  --tooltip-max-width: 16rem;
  --tooltip-padding-x: var(--space-sm);
  --tooltip-padding-y: 0.35rem;
  --tooltip-font-size: var(--text-size-xs);
  --tooltip-offset: var(--space-xs);
  --tooltip-offset-md: var(--space-xs);
  --tooltip-offset-sm: 0.125rem;
  --tooltip-offset-lg: var(--space-sm);
  --tooltip-arrow-size: 6px;
  --tooltip-inverse-bg: var(--color-text);
  --tooltip-inverse-text: var(--color-surface);
  --tooltip-close-size: 1.25rem;
  --tooltip-close-icon-size: 0.75rem;
  --z-tooltip: 120;
  --tooltip-max-width-sm: 12rem;
  --tooltip-padding-x-sm: var(--space-xs);
  --tooltip-padding-y-sm: 0.25rem;
  --tooltip-font-size-sm: 0.6875rem;
  --tooltip-arrow-size-sm: 5px;
  --tooltip-max-width-lg: 20rem;
  --tooltip-padding-x-lg: var(--space-md);
  --tooltip-padding-y-lg: 0.5rem;
  --tooltip-font-size-lg: var(--text-size-sm);
  --tooltip-arrow-size-lg: 8px;
  --tabs-font-size: var(--text-size-sm);
  --tabs-font-weight: 500;
  --tabs-font-weight-active: 600;
  --tabs-gap: var(--space-xs);
  --tabs-tab-padding-y: 0.625rem;
  --tabs-tab-padding-x: 1rem;
  --tabs-indicator-height: 2px;
  --tabs-indicator-transition: var(--transition-base);
  --tabs-bar-gap: var(--space-md);
  --tabs-panel-padding-y: var(--space-lg);
  --tabs-icon-size: 1rem;
  --tabs-badge-gap: var(--space-xs);
  --tabs-pill-padding: 3px;
  --tabs-nav-size: 2rem;
  --tabs-font-size-sm: var(--text-size-xs);
  --tabs-tab-padding-y-sm: 0.4rem;
  --tabs-tab-padding-x-sm: 0.75rem;
  --tabs-icon-size-sm: 0.875rem;
  --tabs-font-size-lg: var(--text-size-base);
  --tabs-tab-padding-y-lg: 0.75rem;
  --tabs-tab-padding-x-lg: 1.25rem;
  --tabs-icon-size-lg: 1.125rem;
  --accordion-font-size: var(--text-size-sm);
  --accordion-trigger-font-weight: 600;
  --accordion-trigger-gap: var(--space-sm);
  --accordion-trigger-padding-y: 0.875rem;
  --accordion-trigger-padding-x: var(--space-lg);
  --accordion-content-font-size: var(--text-size-sm);
  --accordion-content-padding-y: var(--space-lg);
  --accordion-content-padding-x: var(--space-lg);
  --accordion-icon-size: 1rem;
  --accordion-card-gap: 0;
  --accordion-card-trigger-bg: var(--color-surface-raised);
  --accordion-slide-duration: 0.28s;
  --accordion-slide-easing: ease;
  --accordion-font-size-sm: var(--text-size-xs);
  --accordion-trigger-padding-y-sm: 0.625rem;
  --accordion-trigger-padding-x-sm: var(--space-md);
  --accordion-content-padding-y-sm: var(--space-md);
  --accordion-content-padding-x-sm: var(--space-md);
  --accordion-icon-size-sm: 0.875rem;
  --accordion-font-size-lg: var(--text-size-base);
  --accordion-trigger-padding-y-lg: 1rem;
  --accordion-trigger-padding-x-lg: var(--space-xl);
  --accordion-content-padding-y-lg: var(--space-xl);
  --accordion-content-padding-x-lg: var(--space-xl);
  --accordion-icon-size-lg: 1.125rem;
  --collapse-font-size: var(--text-size-sm);
  --collapse-trigger-font-weight: 600;
  --collapse-trigger-gap: var(--space-sm);
  --collapse-trigger-padding-y: 0.875rem;
  --collapse-trigger-padding-x: var(--space-lg);
  --collapse-content-font-size: var(--text-size-sm);
  --collapse-content-padding-top: var(--space-md);
  --collapse-content-padding-y: var(--space-lg);
  --collapse-content-padding-x: var(--space-lg);
  --collapse-icon-size: 1rem;
  --collapse-card-gap: var(--space-sm);
  --collapse-slide-duration: 0.28s;
  --collapse-slide-easing: ease;
  --collapse-font-size-sm: var(--text-size-xs);
  --collapse-trigger-padding-y-sm: 0.625rem;
  --collapse-trigger-padding-x-sm: var(--space-md);
  --collapse-content-padding-y-sm: var(--space-md);
  --collapse-content-padding-x-sm: var(--space-md);
  --collapse-content-padding-top-sm: var(--space-sm);
  --collapse-icon-size-sm: 0.875rem;
  --collapse-font-size-lg: var(--text-size-base);
  --collapse-trigger-padding-y-lg: 1rem;
  --collapse-trigger-padding-x-lg: var(--space-xl);
  --collapse-content-padding-y-lg: var(--space-xl);
  --collapse-content-padding-x-lg: var(--space-xl);
  --collapse-content-padding-top-lg: var(--space-lg);
  --collapse-icon-size-lg: 1.125rem;
  --modal-z-index: 300;
  --modal-margin: var(--space-md);
  --modal-width: 32rem;
  --modal-width-sm: 24rem;
  --modal-width-lg: 48rem;
  --modal-bg: var(--color-surface);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-lg);
  --modal-header-gap: var(--space-sm);
  --modal-header-padding-y: var(--space-md);
  --modal-header-padding-x: var(--space-lg);
  --modal-title-font-size: var(--text-size-lg);
  --modal-title-font-weight: 600;
  --modal-close-size: 2rem;
  --modal-close-icon-size: 1.125rem;
  --modal-body-padding-y: var(--space-lg);
  --modal-body-padding-x: var(--space-lg);
  --modal-body-font-size: var(--text-size-sm);
  --modal-footer-gap: var(--space-sm);
  --modal-footer-padding-y: var(--space-md);
  --modal-footer-padding-x: var(--space-lg);
  --drawer-z-index: 250;
  --drawer-width: 24rem;
  --drawer-width-sm: 18rem;
  --drawer-width-lg: 36rem;
  --drawer-height: 18rem;
  --drawer-height-sm: 14rem;
  --drawer-height-lg: 26rem;
  --drawer-bg: var(--color-surface);
  --drawer-shadow: var(--shadow-md);
  --drawer-header-gap: var(--space-sm);
  --drawer-header-padding-y: var(--space-md);
  --drawer-header-padding-x: var(--space-lg);
  --drawer-title-font-size: var(--text-size-lg);
  --drawer-title-font-weight: 600;
  --drawer-close-size: 2rem;
  --drawer-close-icon-size: 1.125rem;
  --drawer-body-padding-y: var(--space-lg);
  --drawer-body-padding-x: var(--space-lg);
  --drawer-body-font-size: var(--text-size-sm);
  --drawer-footer-gap: var(--space-sm);
  --drawer-footer-padding-y: var(--space-md);
  --drawer-footer-padding-x: var(--space-lg);
  --drawer-panel-duration-x: 0.32s;
  --drawer-panel-duration-y: 0.36s;
  --drawer-panel-easing-x: cubic-bezier(0.32, 0.72, 0, 1);
  --drawer-panel-easing-y: cubic-bezier(0.33, 1, 0.68, 1);
  --drawer-backdrop-duration: 0.24s;
  --drawer-handle-width: 2.5rem;
  --drawer-handle-height: 0.25rem;
  --drawer-handle-hit: 2.75rem;
  --drawer-height-expanded: 90%;
  --affix-z-index: 10;
  --affix-bar-gap: var(--space-sm);
  --affix-bar-padding-y: var(--space-sm);
  --affix-bar-padding-x: var(--space-md);
  --affix-bar-bg: var(--color-surface);
  --affix-bar-border: var(--color-border-subtle);
  --affix-bar-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
  --back-top-z-index: 20;
  --back-top-size-sm: 2rem;
  --back-top-size: 2.5rem;
  --back-top-size-lg: 3rem;
  --back-top-icon-size-sm: 1rem;
  --back-top-icon-size: 1.25rem;
  --back-top-icon-size-lg: 1.5rem;
  --back-top-offset-bottom: var(--space-lg);
  --back-top-offset-right: var(--space-lg);
  --back-top-bg: var(--color-surface);
  --back-top-bg-hover: var(--color-surface-raised);
  --back-top-border: var(--color-border-subtle);
  --back-top-border-hover: var(--color-accent);
  --back-top-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  --back-top-shadow-hover: 0 4px 12px rgb(0 0 0 / 0.16);
  --back-top-color: var(--color-text);
  --back-top-color-hover: var(--color-accent-text-hover);
  --avatar-size-sm: 1.5rem;
  --avatar-size: 2rem;
  --avatar-size-lg: 2.5rem;
  --avatar-size-xl: 3.5rem;
  --avatar-font-size-sm: var(--text-size-xs);
  --avatar-font-size: var(--text-size-sm);
  --avatar-font-size-lg: var(--text-size-base);
  --avatar-font-size-xl: var(--text-size-lg);
  --avatar-icon-size-sm: 0.75rem;
  --avatar-icon-size: 1rem;
  --avatar-icon-size-lg: 1.25rem;
  --avatar-icon-size-xl: 1.75rem;
  --avatar-group-overlap: -0.5rem;
  --avatar-badge-size-sm: 6px;
  --avatar-badge-size: 8px;
  --avatar-badge-size-lg: 10px;
  --badge-padding-y: 0.15rem;
  --badge-padding-x: 0.5rem;
  --badge-font-size: var(--text-size-xs);
  --badge-font-weight: 600;
  --badge-line-height: 1.4;
  --badge-gap: var(--space-xs);
  --badge-padding-y-sm: 0.05rem;
  --badge-padding-x-sm: 0.35rem;
  --badge-font-size-sm: 0.6875rem;
  --badge-padding-y-lg: 0.25rem;
  --badge-padding-x-lg: 0.65rem;
  --badge-font-size-lg: var(--text-size-sm);
  --badge-dot-size: 6px;
  --badge-dot-size-sm: 5px;
  --badge-dot-size-lg: 7px;
  --badge-count-min-width: 1.25rem;
  --badge-count-min-width-sm: 1rem;
  --badge-count-min-width-lg: 1.5rem;
  --badge-overlay-border: 2px;
  --alert-padding-y: var(--space-md);
  --alert-padding-x: var(--space-lg);
  --alert-gap: var(--space-md);
  --alert-font-size: var(--text-size-base);
  --alert-line-height: 1.5;
  --alert-title-weight: 600;
  --alert-title-gap: var(--space-xs);
  --alert-desc-opacity: 0.85;
  --alert-icon-size: 1.25rem;
  --alert-icon-offset: 0.1rem;
  --alert-close-size: 1.25rem;
  --alert-actions-gap: var(--space-sm);
  --alert-actions-margin-top: var(--space-sm);
  --alert-padding-y-sm: var(--space-sm);
  --alert-padding-x-sm: var(--space-md);
  --alert-font-size-sm: var(--text-size-sm);
  --alert-icon-size-sm: 1rem;
  --alert-close-size-sm: 1rem;
  --alert-padding-y-lg: var(--space-lg);
  --alert-padding-x-lg: var(--space-xl);
  --alert-font-size-lg: var(--text-size-base);
  --alert-icon-size-lg: 1.5rem;
  --alert-close-size-lg: 1.5rem;
  --tag-padding-y: 0.15rem;
  --tag-padding-x: 0.5rem;
  --tag-font-size: var(--text-size-xs);
  --tag-font-weight: 600;
  --tag-line-height: 1.4;
  --tag-gap: var(--space-xs);
  --tag-close-size: 0.875rem;
  --tag-padding-y-sm: 0.05rem;
  --tag-padding-x-sm: 0.35rem;
  --tag-font-size-sm: 0.6875rem;
  --tag-close-size-sm: 0.75rem;
  --tag-padding-y-lg: 0.25rem;
  --tag-padding-x-lg: 0.65rem;
  --tag-font-size-lg: var(--text-size-sm);
  --tag-close-size-lg: 1rem;
  --tag-icon-size: 0.875em;
  --tag-icon-size-sm: 0.8125em;
  --tag-icon-size-lg: 1em;
  --tag-add-border-style: dashed;
  --breadcrumb-font-size: var(--text-size-sm);
  --breadcrumb-font-size-sm: var(--text-size-xs);
  --breadcrumb-font-size-lg: var(--text-size-base);
  --breadcrumb-line-height: 1.5;
  --breadcrumb-gap: var(--space-xs);
  --breadcrumb-icon-gap: 0.25rem;
  --breadcrumb-link-font-weight: 500;
  --breadcrumb-current-font-weight: 600;
  --breadcrumb-link-max-width: 12rem;
  --breadcrumb-separator-color: var(--color-text-muted);
  --breadcrumb-icon-size: 1rem;
  --breadcrumb-icon-padding: 0.15rem;
  --breadcrumb-ellipsis-size: 1.5rem;
  --carousel-font-size: var(--text-size-sm);
  --carousel-height: 16rem;
  --carousel-radius: var(--radius-lg);
  --carousel-bg: var(--color-surface-raised);
  --carousel-transition: 0.35s ease;
  --carousel-nav-size: 2.25rem;
  --carousel-nav-icon-size: 0.875rem;
  --carousel-nav-offset: var(--space-md);
  --carousel-nav-bg: var(--color-surface);
  --carousel-nav-bg-hover: var(--color-surface-raised);
  --carousel-nav-border: var(--color-border);
  --carousel-nav-border-hover: var(--color-border);
  --carousel-nav-color: var(--color-text);
  --carousel-nav-color-hover: var(--color-accent-text);
  --carousel-dot-gap: 0.375rem;
  --carousel-dot-size: 0.5rem;
  --carousel-dot-size-active: 1.25rem;
  --carousel-dot-bg: var(--color-border);
  --carousel-dot-bg-hover: var(--color-text-muted);
  --carousel-dot-bg-active: var(--color-accent);
  --carousel-dots-padding-y: var(--space-md);
  --carousel-dots-padding-x: var(--space-md);
  --carousel-card-gap: var(--space-xs);
  --carousel-toggle-size: 2rem;
  --carousel-toggle-icon-size: 1rem;
  --carousel-font-size-sm: var(--text-size-xs);
  --carousel-height-sm: 11rem;
  --carousel-nav-size-sm: 1.875rem;
  --carousel-nav-icon-size-sm: 0.75rem;
  --carousel-dot-size-sm: 0.375rem;
  --carousel-dot-size-active-sm: 1rem;
  --carousel-toggle-size-sm: 1.75rem;
  --carousel-toggle-icon-size-sm: 0.875rem;
  --carousel-font-size-lg: var(--text-size-base);
  --carousel-height-lg: 20rem;
  --carousel-nav-size-lg: 2.75rem;
  --carousel-nav-icon-size-lg: 1rem;
  --carousel-dot-size-lg: 0.625rem;
  --carousel-dot-size-active-lg: 1.5rem;
  --carousel-toggle-size-lg: 2.5rem;
  --carousel-toggle-icon-size-lg: 1.125rem;
  --carousel-media-nav-top: calc(50cqi * 9 / 16);
  --pagination-gap: 0.25rem;
  --pagination-font-size: var(--text-size-sm);
  --pagination-font-size-sm: var(--text-size-xs);
  --pagination-font-size-lg: var(--text-size-base);
  --pagination-font-weight: 500;
  --pagination-font-weight-active: 600;
  --pagination-item-min-size: 2rem;
  --pagination-item-min-size-sm: 1.75rem;
  --pagination-item-min-size-lg: 2.5rem;
  --pagination-item-padding-x: 0.5rem;
  --pagination-border-radius: var(--radius-sm);
  --pagination-border-color: var(--color-border);
  --pagination-bg: var(--color-surface);
  --pagination-bg-hover: var(--color-surface-raised);
  --pagination-bg-active: var(--color-accent);
  --pagination-color: var(--color-text);
  --pagination-color-muted: var(--color-text-muted);
  --pagination-color-active: var(--color-on-accent);
  --pagination-icon-size: 1rem;
  --pagination-total-gap: var(--space-md);
  --pagination-wrap-gap: var(--space-md);
  --pagination-simple-text-min-width: 3.5rem;
  --pagination-jumper-gap: var(--space-xs);
  --pagination-jumper-input-width: 3rem;
  --pagination-jumper-input-padding-x: 0.35rem;
  --card-padding: var(--space-lg);
  --card-padding-sm: var(--space-md);
  --card-padding-lg: var(--space-xl);
  --card-gap: var(--space-md);
  --card-border-color: var(--color-border-subtle);
  --card-border-width: 1px;
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-md: var(--shadow-md);
  --card-header-bg: var(--color-surface-raised);
  --card-footer-bg: var(--color-surface-raised);
  --card-divider-color: var(--color-border-subtle);
  --card-divider-width: 1px;
  --card-title-size: var(--text-size-lg);
  --card-title-weight: 600;
  --card-title-gap: var(--space-sm);
  --card-subtitle-size: var(--text-size-sm);
  --card-body-color: var(--color-text-muted);
  --card-body-line-height: 1.6;
  --card-media-ratio: 16 / 9;
  --card-webzine-media-ratio: 3 / 2;
  --card-accent-width: 3px;
  --card-icon-size: 2.5rem;
  --card-horizontal-media-width: 7.5rem;
  --card-news-media-width: 10rem;
  --card-product-media-width: 8.5rem;
  --card-hover-translate: -2px;
  --table-cell-padding-y: 0.65rem;
  --table-cell-padding-x: 1rem;
  --table-font-size: var(--text-size-sm);
  --table-header-font-weight: 600;
  --table-cell-padding-y-compact: 0.4rem;
  --table-cell-padding-x-compact: 0.75rem;
  --table-scroll-max-height: 16rem;
  --table-sticky-shadow: 2px 0 4px -2px rgb(0 0 0 / 12%);
  --list-gap: var(--space-xs);
  --list-item-padding-y: 0.65rem;
  --list-item-padding-x: 1rem;
  --list-title-size: var(--text-size-base);
  --list-meta-size: var(--text-size-sm);
  --list-desc-size: var(--text-size-sm);
  --list-marker-padding: var(--space-lg);
  --list-marker-gap: var(--space-xs);
  --list-inline-label-width: 8rem;
  --list-inline-gap: var(--space-md);
  --stat-gap: var(--space-xs);
  --stat-label-size: var(--text-size-sm);
  --stat-value-size: 1.75rem;
  --stat-value-weight: 700;
  --stat-desc-size: var(--text-size-sm);
  --stat-group-gap: var(--space-lg);
  --stat-value-size-sm: 1.25rem;
  --stat-value-size-lg: 2.25rem;
  --stat-card-padding: var(--space-lg);
  --stat-icon-wrap-size: 2.5rem;
  --stat-horizontal-gap: var(--space-md);
  --calendar-gap: 2px;
  --calendar-cell-size: 2.25rem;
  --calendar-cell-size-sm: 1.875rem;
  --calendar-cell-size-compact: 1.75rem;
  --calendar-cell-size-lg: 2.75rem;
  --calendar-font-size: var(--text-size-sm);
  --calendar-header-size: var(--text-size-base);
  --calendar-weekday-size: var(--text-size-xs);
  --calendar-wheel-height: 13.75rem;
  --calendar-wheel-step-height: 2rem;
  --calendar-wheel-list-height: calc(var(--calendar-wheel-height) - (var(--calendar-wheel-step-height) * 2));
  --calendar-wheel-max-width: 22rem;
  --calendar-wheel-slot-count: 3;
  --calendar-wheel-row-height: 2.75rem;
  --calendar-wheel-font-size: var(--text-size-base);
  --calendar-wheel-font-selected: var(--text-size-lg);
  --calendar-agenda-gap: var(--space-md);
  --calendar-agenda-date-width: 3rem;
  --calendar-agenda-event-gap: var(--space-xs);
  --calendar-agenda-daynum-size: 1.5rem;
  --timeline-gap: var(--space-lg);
  --timeline-dot-size: 10px;
  --timeline-dot-offset: 4px;
  --timeline-line-width: 2px;
  --timeline-content-gap: var(--space-xs);
  --timeline-time-size: var(--text-size-xs);
  --timeline-title-size: var(--text-size-base);
  --timeline-desc-size: var(--text-size-sm);
  --timeline-label-width: 4.5rem;
  --upload-max-width: var(--input-max-width);
  --upload-gap: var(--space-sm);
  --upload-dropzone-padding: var(--space-xl);
  --upload-dropzone-gap: var(--space-sm);
  --upload-dropzone-icon-size: 2.5rem;
  --upload-list-gap: var(--space-xs);
  --upload-item-gap: var(--space-sm);
  --upload-item-padding-y: 0.5rem;
  --upload-item-padding-x: 0.75rem;
  --upload-item-icon-size: 1.5rem;
  --upload-progress-height: 4px;
  --upload-card-size: 6.5rem;
  --upload-card-gap: var(--space-sm);
  --upload-hint-size: var(--text-size-sm);
  --steps-gap: var(--space-md);
  --steps-head-gap: var(--space-sm);
  --steps-indicator-size: 2rem;
  --steps-indicator-font-size: var(--text-size-sm);
  --steps-indicator-font-weight: 600;
  --steps-tail-height: 2px;
  --steps-content-gap: var(--space-xs);
  --steps-title-size: var(--text-size-sm);
  --steps-title-weight: 600;
  --steps-desc-size: var(--text-size-xs);
  --steps-icon-size: 1rem;
  --steps-dot-size: 8px;
  --steps-pulse-duration: 1.5s;
  --steps-indicator-size-sm: 1.75rem;
  --steps-indicator-font-size-sm: var(--text-size-xs);
  --steps-title-size-sm: var(--text-size-xs);
  --steps-desc-size-sm: var(--text-size-xs);
  --steps-indicator-size-lg: 2.5rem;
  --steps-indicator-font-size-lg: var(--text-size-base);
  --steps-title-size-lg: var(--text-size-base);
  --steps-desc-size-lg: var(--text-size-sm);
  --progress-height: 8px;
  --progress-height-sm: 4px;
  --progress-height-lg: 12px;
  --progress-radius: var(--radius-pill);
  --progress-max-width: var(--input-max-width);
  --progress-gap: var(--space-sm);
  --progress-label-size: var(--text-size-sm);
  --progress-value-size: var(--text-size-sm);
  --progress-value-weight: 600;
  --progress-inside-size: var(--text-size-xs);
  --progress-inside-height: 1.25rem;
  --progress-inside-height-sm: 1rem;
  --progress-inside-height-lg: 1.5rem;
  --progress-circle-size: 7.5rem;
  --progress-circle-size-sm: 5rem;
  --progress-circle-size-lg: 9rem;
  --progress-circle-stroke: 6;
  --progress-circle-stroke-sm: 4;
  --progress-circle-stroke-lg: 8;
  --progress-circle-value-size: var(--text-size-lg);
  --progress-circle-value-size-sm: var(--text-size-sm);
  --progress-circle-value-size-lg: var(--text-size-xl);
  --spin-size: 2rem;
  --spin-size-sm: 1.25rem;
  --spin-size-lg: 3rem;
  --spin-border: 3px;
  --spin-border-sm: 2px;
  --spin-border-lg: 4px;
  --spin-duration: 0.8s;
  --spin-gap: var(--space-sm);
  --spin-tip-size: var(--text-size-sm);
  --spin-overlay-bg: rgba(15, 20, 25, 0.72);
  --spin-overlay-tip-color: #ffffff;
  --spin-wrap-min-height: 8rem;
  --spin-wrap-content-opacity: 0.45;
  --skeleton-bg: var(--color-surface-raised);
  --skeleton-shine: color-mix(in srgb, var(--color-surface) 65%, transparent);
  --skeleton-radius: var(--radius-sm);
  --skeleton-radius-round: 50%;
  --skeleton-text-height: 0.875rem;
  --skeleton-text-height-sm: 0.75rem;
  --skeleton-text-height-lg: 1rem;
  --skeleton-title-height: 1.125rem;
  --skeleton-title-height-sm: 1rem;
  --skeleton-title-height-lg: 1.25rem;
  --skeleton-title-width: 40%;
  --skeleton-avatar-size: var(--avatar-size);
  --skeleton-button-height: 2rem;
  --skeleton-button-height-sm: 1.75rem;
  --skeleton-button-height-lg: 2.25rem;
  --skeleton-button-width: 5rem;
  --skeleton-button-width-sm: 4rem;
  --skeleton-button-width-lg: 6rem;
  --skeleton-block-height: 4rem;
  --skeleton-image-ratio: 16 / 9;
  --skeleton-width-sm: 35%;
  --skeleton-width-md: 65%;
  --skeleton-width-lg: 85%;
  --skeleton-gap: var(--space-sm);
  --skeleton-gap-sm: 0.375rem;
  --skeleton-duration: 1.4s;
  --empty-gap: var(--space-sm);
  --empty-padding-y: var(--space-xl);
  --empty-padding-x: var(--space-md);
  --empty-image-size: 4rem;
  --empty-image-size-sm: 3rem;
  --empty-image-size-lg: 5rem;
  --empty-icon-color: var(--color-border);
  --empty-desc-size: var(--text-size-sm);
  --empty-desc-color: var(--color-text-muted);
  --empty-desc-max-width: 20rem;
  --empty-footer-gap: var(--space-sm);
  --empty-footer-offset: var(--space-xs);
  --tree-indent: 1.25rem;
  --tree-row-height: 2rem;
  --tree-font-size: var(--text-size-sm);
  --tree-toggle-size: 1.25rem;
  --tree-gap: 2px;
  --tree-line-color: var(--color-border);
}

:root,
[data-theme=light] {
  color-scheme: light;
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-raised: #eef1f6;
  --color-border: #7d8fa6;
  --color-border-subtle: #a8b3c4;
  --color-text: #1a2332;
  --color-text-muted: #4a5568;
  --color-text-disabled: #697586;
  --color-border-disabled: #7d8fa6;
  --color-surface-disabled: #eef1f6;
  --color-control-disabled: #7d8fa6;
  --color-accent-disabled: #c8d5eb;
  --color-on-accent-disabled: #3d5080;
  --color-success-disabled: #c5ddd2;
  --color-on-success-disabled: #2d5340;
  --color-danger-disabled: #eccaca;
  --color-on-danger-disabled: #7a3030;
  --color-warning-disabled: #ecd4bc;
  --color-on-warning-disabled: #6b4220;
  --color-accent: #3d66c4;
  --color-accent-hover: #3458ad;
  --color-accent-text: #3d66c4;
  --color-accent-text-hover: #2f4f9f;
  --color-accent-muted: rgba(61, 102, 196, 0.12);
  --color-on-accent: #ffffff;
  --color-success: #276749;
  --color-success-hover: #22543d;
  --color-success-text: #276749;
  --color-success-text-hover: #1f5636;
  --color-danger: #c53030;
  --color-danger-hover: #9b2c2c;
  --color-danger-text: #c53030;
  --color-danger-text-hover: #9b2c2c;
  --color-warning: #c05621;
  --color-warning-hover: #9c4221;
  --color-warning-text: #7b341e;
  --color-warning-text-hover: #9c4221;
  --color-on-warning: #ffffff;
  --color-header-bg: rgba(244, 246, 249, 0.88);
  --color-overlay: rgba(15, 20, 25, 0.4);
  --shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 20, 25, 0.1);
  --color-alert-info-text: #234e96;
  --color-alert-info-bg: rgba(61, 102, 196, 0.12);
  --color-alert-info-border: rgba(61, 102, 196, 0.28);
  --color-alert-success-text: #22543d;
  --color-alert-success-bg: rgba(39, 103, 73, 0.12);
  --color-alert-success-border: rgba(39, 103, 73, 0.28);
  --color-alert-warning-text: #7b341e;
  --color-alert-warning-bg: rgba(192, 86, 33, 0.12);
  --color-alert-warning-border: rgba(192, 86, 33, 0.28);
  --color-alert-error-text: #822727;
  --color-alert-error-bg: rgba(197, 48, 48, 0.12);
  --color-alert-error-border: rgba(197, 48, 48, 0.28);
  --color-snackbar-info-bg: #e7eefb;
  --color-snackbar-info-border: #7897c7;
  --color-snackbar-success-bg: #e7f0eb;
  --color-snackbar-success-border: #739b86;
  --color-snackbar-warning-bg: #f8eee9;
  --color-snackbar-warning-border: #bc8062;
  --color-snackbar-error-bg: #f8e7e7;
  --color-snackbar-error-border: #c77a7a;
  --color-badge-success-bg: rgba(39, 103, 73, 0.12);
  --color-badge-danger-bg: rgba(197, 48, 48, 0.12);
  --color-badge-warning-bg: rgba(192, 86, 33, 0.12);
  --color-input-error-ring: rgba(197, 48, 48, 0.25);
  --color-input-success-ring: rgba(39, 103, 73, 0.25);
}

[data-theme=dark] {
  color-scheme: dark;
  --color-bg: #0f1419;
  --color-surface: #1a2332;
  --color-surface-raised: #212d3f;
  --color-border: #637a96;
  --color-border-subtle: #4f627d;
  --color-text: #e7ecf3;
  --color-text-muted: #a8b8cf;
  --color-text-disabled: #9aa8bc;
  --color-border-disabled: #637a96;
  --color-surface-disabled: #212d3f;
  --color-control-disabled: #637a96;
  --color-accent-disabled: #2d4a75;
  --color-on-accent-disabled: #9ec5ff;
  --color-success-disabled: #2d4f3d;
  --color-on-success-disabled: #86d9a3;
  --color-danger-disabled: #5c3030;
  --color-on-danger-disabled: #fca5a5;
  --color-warning-disabled: #6b4220;
  --color-on-warning-disabled: #f6ad55;
  --color-accent: #386bc0;
  --color-accent-hover: #4a7fd6;
  --color-accent-text: #7aa3f5;
  --color-accent-text-hover: #9bb8ff;
  --color-accent-muted: rgba(122, 163, 245, 0.14);
  --color-on-accent: #ffffff;
  --color-success: #2f855a;
  --color-success-hover: #38a169;
  --color-success-text: #68d391;
  --color-success-text-hover: #7ae89f;
  --color-danger: #c53030;
  --color-danger-hover: #e53e3e;
  --color-danger-text: #f56565;
  --color-danger-text-hover: #fc8181;
  --color-warning: #dd6b20;
  --color-warning-hover: #ed8936;
  --color-warning-text: #f6ad55;
  --color-warning-text-hover: #fbd38d;
  --color-on-warning: #1a1200;
  --color-header-bg: rgba(15, 20, 25, 0.85);
  --color-overlay: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --color-alert-info-text: #9ec5ff;
  --color-alert-info-bg: rgba(122, 163, 245, 0.14);
  --color-alert-info-border: rgba(122, 163, 245, 0.32);
  --color-alert-success-text: #86d9a3;
  --color-alert-success-bg: rgba(47, 133, 90, 0.16);
  --color-alert-success-border: rgba(47, 133, 90, 0.32);
  --color-alert-warning-text: #f6ad55;
  --color-alert-warning-bg: rgba(221, 107, 32, 0.16);
  --color-alert-warning-border: rgba(221, 107, 32, 0.32);
  --color-alert-error-text: #fca5a5;
  --color-alert-error-bg: rgba(197, 48, 48, 0.16);
  --color-alert-error-border: rgba(197, 48, 48, 0.32);
  --color-snackbar-info-bg: #202e45;
  --color-snackbar-info-border: #7393c2;
  --color-snackbar-success-bg: #20372e;
  --color-snackbar-success-border: #65a17f;
  --color-snackbar-warning-bg: #3a2b22;
  --color-snackbar-warning-border: #bc8358;
  --color-snackbar-error-bg: #3b2528;
  --color-snackbar-error-border: #c8787f;
  --color-badge-success-bg: rgba(47, 133, 90, 0.18);
  --color-badge-danger-bg: rgba(197, 48, 48, 0.18);
  --color-badge-warning-bg: rgba(221, 107, 32, 0.18);
  --color-input-error-ring: rgba(252, 129, 129, 0.28);
  --color-input-success-ring: rgba(104, 211, 145, 0.28);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) {
    color-scheme: light;
    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-raised: #eef1f6;
    --color-border: #7d8fa6;
    --color-border-subtle: #a8b3c4;
    --color-text: #1a2332;
    --color-text-muted: #4a5568;
    --color-text-disabled: #697586;
    --color-border-disabled: #7d8fa6;
    --color-surface-disabled: #eef1f6;
    --color-control-disabled: #7d8fa6;
    --color-accent-disabled: #c8d5eb;
    --color-on-accent-disabled: #3d5080;
    --color-success-disabled: #c5ddd2;
    --color-on-success-disabled: #2d5340;
    --color-danger-disabled: #eccaca;
    --color-on-danger-disabled: #7a3030;
    --color-warning-disabled: #ecd4bc;
    --color-on-warning-disabled: #6b4220;
    --color-accent: #3d66c4;
    --color-accent-hover: #3458ad;
    --color-accent-text: #3d66c4;
    --color-accent-text-hover: #2f4f9f;
    --color-accent-muted: rgba(61, 102, 196, 0.12);
    --color-on-accent: #ffffff;
    --color-success: #276749;
    --color-success-hover: #22543d;
    --color-success-text: #276749;
    --color-success-text-hover: #1f5636;
    --color-danger: #c53030;
    --color-danger-hover: #9b2c2c;
    --color-danger-text: #c53030;
    --color-danger-text-hover: #9b2c2c;
    --color-warning: #c05621;
    --color-warning-hover: #9c4221;
    --color-warning-text: #7b341e;
    --color-warning-text-hover: #9c4221;
    --color-on-warning: #ffffff;
    --color-header-bg: rgba(244, 246, 249, 0.88);
    --color-overlay: rgba(15, 20, 25, 0.4);
    --shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 20, 25, 0.1);
    --color-alert-info-text: #234e96;
    --color-alert-info-bg: rgba(61, 102, 196, 0.12);
    --color-alert-info-border: rgba(61, 102, 196, 0.28);
    --color-alert-success-text: #22543d;
    --color-alert-success-bg: rgba(39, 103, 73, 0.12);
    --color-alert-success-border: rgba(39, 103, 73, 0.28);
    --color-alert-warning-text: #7b341e;
    --color-alert-warning-bg: rgba(192, 86, 33, 0.12);
    --color-alert-warning-border: rgba(192, 86, 33, 0.28);
    --color-alert-error-text: #822727;
    --color-alert-error-bg: rgba(197, 48, 48, 0.12);
    --color-alert-error-border: rgba(197, 48, 48, 0.28);
    --color-snackbar-info-bg: #e7eefb;
    --color-snackbar-info-border: #7897c7;
    --color-snackbar-success-bg: #e7f0eb;
    --color-snackbar-success-border: #739b86;
    --color-snackbar-warning-bg: #f8eee9;
    --color-snackbar-warning-border: #bc8062;
    --color-snackbar-error-bg: #f8e7e7;
    --color-snackbar-error-border: #c77a7a;
    --color-badge-success-bg: rgba(39, 103, 73, 0.12);
    --color-badge-danger-bg: rgba(197, 48, 48, 0.12);
    --color-badge-warning-bg: rgba(192, 86, 33, 0.12);
    --color-input-error-ring: rgba(197, 48, 48, 0.25);
    --color-input-success-ring: rgba(39, 103, 73, 0.25);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --color-bg: #0f1419;
    --color-surface: #1a2332;
    --color-surface-raised: #212d3f;
    --color-border: #637a96;
    --color-border-subtle: #4f627d;
    --color-text: #e7ecf3;
    --color-text-muted: #a8b8cf;
    --color-text-disabled: #9aa8bc;
    --color-border-disabled: #637a96;
    --color-surface-disabled: #212d3f;
    --color-control-disabled: #637a96;
    --color-accent-disabled: #2d4a75;
    --color-on-accent-disabled: #9ec5ff;
    --color-success-disabled: #2d4f3d;
    --color-on-success-disabled: #86d9a3;
    --color-danger-disabled: #5c3030;
    --color-on-danger-disabled: #fca5a5;
    --color-warning-disabled: #6b4220;
    --color-on-warning-disabled: #f6ad55;
    --color-accent: #386bc0;
    --color-accent-hover: #4a7fd6;
    --color-accent-text: #7aa3f5;
    --color-accent-text-hover: #9bb8ff;
    --color-accent-muted: rgba(122, 163, 245, 0.14);
    --color-on-accent: #ffffff;
    --color-success: #2f855a;
    --color-success-hover: #38a169;
    --color-success-text: #68d391;
    --color-success-text-hover: #7ae89f;
    --color-danger: #c53030;
    --color-danger-hover: #e53e3e;
    --color-danger-text: #f56565;
    --color-danger-text-hover: #fc8181;
    --color-warning: #dd6b20;
    --color-warning-hover: #ed8936;
    --color-warning-text: #f6ad55;
    --color-warning-text-hover: #fbd38d;
    --color-on-warning: #1a1200;
    --color-header-bg: rgba(15, 20, 25, 0.85);
    --color-overlay: rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
    --color-alert-info-text: #9ec5ff;
    --color-alert-info-bg: rgba(122, 163, 245, 0.14);
    --color-alert-info-border: rgba(122, 163, 245, 0.32);
    --color-alert-success-text: #86d9a3;
    --color-alert-success-bg: rgba(47, 133, 90, 0.16);
    --color-alert-success-border: rgba(47, 133, 90, 0.32);
    --color-alert-warning-text: #f6ad55;
    --color-alert-warning-bg: rgba(221, 107, 32, 0.16);
    --color-alert-warning-border: rgba(221, 107, 32, 0.32);
    --color-alert-error-text: #fca5a5;
    --color-alert-error-bg: rgba(197, 48, 48, 0.16);
    --color-alert-error-border: rgba(197, 48, 48, 0.32);
    --color-snackbar-info-bg: #202e45;
    --color-snackbar-info-border: #7393c2;
    --color-snackbar-success-bg: #20372e;
    --color-snackbar-success-border: #65a17f;
    --color-snackbar-warning-bg: #3a2b22;
    --color-snackbar-warning-border: #bc8358;
    --color-snackbar-error-bg: #3b2528;
    --color-snackbar-error-border: #c8787f;
    --color-badge-success-bg: rgba(47, 133, 90, 0.18);
    --color-badge-danger-bg: rgba(197, 48, 48, 0.18);
    --color-badge-warning-bg: rgba(221, 107, 32, 0.18);
    --color-input-error-ring: rgba(252, 129, 129, 0.28);
    --color-input-success-ring: rgba(104, 211, 145, 0.28);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: var(--text-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color var(--transition-base), color var(--transition-base);
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

.guide_layout {
  display: flex;
  min-height: 100vh;
}
.guide_layout.is-sidebar-collapsed .guide_main {
  margin-left: 0;
}
.guide_layout.is-sidebar-collapsed .guide_header-sidebar-icon-open {
  display: none;
}
.guide_layout.is-sidebar-collapsed .guide_header-sidebar-icon-closed {
  display: block;
}

.guide_main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition-base);
}

.guide_header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--header-height);
  padding: 0 var(--space-xl);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.guide_header-menu-btn, .guide_header-sidebar-btn, .guide_header-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.guide_header-menu-btn:hover, .guide_header-sidebar-btn:hover, .guide_header-theme-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-text-hover);
}
.guide_header-menu-btn {
  display: none;
}
.guide_header-sidebar-btn {
  display: inline-flex;
}
.guide_header-sidebar-icon-closed {
  display: none;
}
.guide_header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.guide_header-theme-icon-sun {
  display: none;
}
.guide_header-theme-icon-moon {
  display: block;
}
.guide_header-title {
  font-size: 1rem;
  font-weight: 600;
}

[data-theme=dark] .guide_header-theme-icon-sun {
  display: block;
}

[data-theme=dark] .guide_header-theme-icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .guide_header-theme-icon-sun {
    display: block;
  }
  :root:not([data-theme=light]) .guide_header-theme-icon-moon {
    display: none;
  }
}
.guide_content {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: var(--space-2xl) var(--space-xl);
}

.guide_overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-overlay);
}
.guide_overlay.is-visible {
  display: block;
}

@media (max-width: 1024px) {
  .guide_main {
    margin-left: 0;
  }
  .guide_header-menu-btn {
    display: inline-flex;
  }
  .guide_header-sidebar-btn {
    display: none;
  }
}
.guide_sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transform: translateX(0);
  transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
.guide_sidebar.is-hidden {
  transform: translateX(-100%);
}
.guide_sidebar-brand {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.guide_sidebar-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.guide_sidebar-back:hover {
  color: var(--color-accent-text);
}
.guide_sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.guide_sidebar-desc {
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.guide_nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) 0 var(--space-xl);
}
.guide_nav-top {
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-sm);
}
.guide_nav-link-top {
  font-weight: 600;
}
.guide_nav-group + .guide_nav-group {
  margin-top: var(--space-xs);
}
.guide_nav-group.is-collapsed .guide_nav-list {
  display: none;
}
.guide_nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.guide_nav-heading:hover {
  color: var(--color-text);
  background: var(--color-accent-muted);
}
.guide_nav-heading[aria-expanded=true] .guide_nav-chevron {
  transform: rotate(180deg);
}
.guide_nav-heading-text {
  flex: 1;
  min-width: 0;
}
.guide_nav-chevron {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform var(--transition-base);
}
.guide_nav-list {
  padding: 0 var(--space-sm);
}
.guide_nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.guide_nav-link:hover {
  color: var(--color-text);
  background: var(--color-accent-muted);
}
.guide_nav-link.is-active {
  color: var(--color-accent-text-hover);
  background: var(--color-accent-muted);
  font-weight: 600;
}
.guide_nav-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.guide_nav-badge {
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-radius: 999px;
}

@media (min-width: 1025px) {
  .guide_layout.is-sidebar-collapsed .guide_sidebar {
    transform: translateX(-100%);
  }
}
@media (max-width: 1024px) {
  .guide_sidebar {
    transform: translateX(-100%);
  }
  .guide_sidebar.is-open {
    transform: translateX(0);
  }
}
.page_intro {
  margin-bottom: var(--space-2xl);
}
.page_intro h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.page_intro .lead {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 42rem;
}

.section {
  margin-bottom: var(--space-2xl);
}
.section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.section > :where(p) {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

:where(body[data-active-nav=intro],
body[data-active-nav=getting-started],
body[data-active-nav=design-tokens]) .section > :where(p, .table_wrap, .demo_section-preview, .list, .card_grid) + :where(p, .table_wrap, .demo_section-preview, .list, .card_grid) {
  margin-top: var(--space-lg);
}
:where(body[data-active-nav=intro],
body[data-active-nav=getting-started],
body[data-active-nav=design-tokens]) .section > h3.typo_title-4 {
  margin-top: var(--space-lg);
}
:where(body[data-active-nav=intro],
body[data-active-nav=getting-started],
body[data-active-nav=design-tokens]) .section > h3.typo_title-4 + :where(.table_wrap, .demo_section-preview) {
  margin-top: var(--space-sm);
}

.card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.category_card {
  display: block;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.category_card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.category_card h3 {
  font-size: var(--text-size-lg);
  margin-bottom: var(--space-xs);
  color: var(--color-accent-text-hover);
}
.category_card p {
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.category_card .count {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
}

.component_stub {
  padding: var(--space-2xl);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.component_stub p {
  color: var(--color-text-muted);
  margin: 0;
}

.container_demo-fill,
.grid_demo-cell,
.flex_demo-cell,
.space_demo-box {
  padding: var(--space-md);
  background: var(--color-accent-muted);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
}

.container_demo-fill {
  padding: var(--space-lg);
}
.container_demo-sizes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-max-width-xl);
  margin-inline: auto;
  box-sizing: border-box;
}
.container_demo-sizes > .container {
  width: 100%;
  margin-inline: auto;
}
.container_demo-sizes > .container_sm {
  max-width: min(var(--container-max-width-sm), 45%);
}
.container_demo-sizes > .container_md {
  max-width: min(var(--container-max-width-md), 60%);
}
.container_demo-sizes > .container_lg {
  max-width: min(var(--container-max-width-lg), 80%);
}
.container_demo-sizes > .container_xl {
  max-width: min(var(--container-max-width-xl), 100%);
}
.container_demo-sizes {
  gap: var(--demo-gap-stack, var(--space-2xl));
}

.demo_section-header {
  margin-bottom: var(--space-lg);
}
.demo_section-header h2 {
  margin-bottom: var(--space-xs);
  padding-bottom: 0;
  border-bottom: none;
}
.demo_section-header p {
  margin: 0;
  font-size: var(--text-size-base);
  color: var(--color-text-muted);
}
.demo_section-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.demo_section-preview:has(.navbar_demo) {
  padding: 0;
  overflow: hidden;
}
.demo_section-preview-stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xl);
}
.demo_section-preview-start {
  flex-direction: column;
  align-items: flex-start;
}
.demo_section-preview-code {
  padding: 0;
  align-items: stretch;
  border-radius: var(--radius-lg);
}
.demo_section-preview-code .typo_pre {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
}
.demo_section-preview-code pre {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
  font-size: var(--text-size-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.demo_section-preview-code code {
  font-family: inherit;
  white-space: inherit;
}
.demo_preview-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}
.demo_section-code {
  width: 100%;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.demo_section-code-panel pre {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-surface-raised);
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--text-size-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.demo_section-code-panel code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
}
.demo_section.is-code-open .demo_section-preview {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.demo_code-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.demo_code-toggle:hover {
  color: var(--color-text);
  background: var(--color-accent-muted);
}
.demo_code-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.demo_code-toggle-icon {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.demo_code-toggle[aria-expanded=true] .demo_code-toggle-icon {
  transform: rotate(180deg);
}

.code_block {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-size-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  overflow-x: auto;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.code_block code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
}

.btn {
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  text-decoration: none;
  white-space: nowrap;
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.btn:focus-visible {
  outline-color: var(--color-accent);
}
.btn.is-loading {
  position: relative;
  cursor: wait;
  pointer-events: none;
}
.btn_sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--btn-font-size-sm);
}
.btn_lg {
  padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
  font-size: var(--btn-font-size-lg);
}
.btn_round {
  border-radius: var(--radius-pill);
}
.btn_vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: var(--btn-vertical-min-width);
  padding: var(--btn-vertical-padding-y) var(--btn-vertical-padding-x);
  white-space: normal;
  text-align: center;
}
.btn_vertical .icon {
  width: var(--btn-icon-size-lg);
  height: var(--btn-icon-size-lg);
}
.btn_vertical .btn_label {
  font-size: var(--btn-vertical-label-size);
  font-weight: var(--btn-vertical-label-weight);
  line-height: var(--btn-vertical-label-line-height);
}
.btn_vertical.btn_sm {
  min-width: var(--btn-vertical-min-width-sm);
  padding: var(--btn-vertical-padding-y-sm) var(--btn-vertical-padding-x-sm);
}
.btn_vertical.btn_sm .icon {
  width: var(--btn-icon-size-md);
  height: var(--btn-icon-size-md);
}
.btn_vertical.btn_sm .btn_label {
  font-size: var(--btn-vertical-label-size-sm);
}
.btn_vertical.btn_lg {
  min-width: var(--btn-vertical-min-width-lg);
  padding: var(--btn-vertical-padding-y-lg) var(--btn-vertical-padding-x-lg);
}
.btn_vertical.btn_lg .icon {
  width: var(--btn-icon-size-xl);
  height: var(--btn-icon-size-xl);
}
.btn_vertical.btn_lg .btn_label {
  font-size: var(--btn-vertical-label-size-lg);
}
.btn_icon-only {
  gap: 0;
  padding: var(--btn-icon-only-padding);
  aspect-ratio: 1;
}
.btn_icon-only .icon {
  width: var(--btn-icon-size-md);
  height: var(--btn-icon-size-md);
}
.btn_icon-only.btn_sm {
  padding: var(--btn-icon-only-padding-sm);
}
.btn_icon-only.btn_sm .icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}
.btn_icon-only.btn_lg {
  padding: var(--btn-icon-only-padding-lg);
}
.btn_icon-only.btn_lg .icon {
  width: var(--btn-icon-size-lg);
  height: var(--btn-icon-size-lg);
}
.btn_block {
  display: flex;
  width: 100%;
}
.btn_grow {
  flex: 1 1 0;
  min-width: 0;
}
.btn_grow-2 {
  flex: 2 1 0;
  min-width: 0;
}
.btn_fit {
  flex: 0 0 auto;
}
.btn_select {
  justify-content: space-between;
  gap: var(--btn-gap);
  min-width: var(--btn-select-min-width);
  max-width: var(--btn-select-max-width);
  padding-right: var(--btn-select-padding-right);
  font-weight: var(--btn-font-weight-normal);
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-border);
}
.btn_select:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  border-color: var(--color-accent);
}
.btn_select.is-open, .btn_select[aria-expanded=true] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--focus-shadow-width) var(--color-accent-muted);
}
.btn_select.btn_block {
  max-width: none;
}
.btn_select .btn_label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-weight: inherit;
}
.btn_select.btn_sm {
  padding-right: var(--btn-select-padding-right-sm);
}
.btn_select.btn_lg {
  padding-right: var(--btn-select-padding-right-lg);
}
.btn_select.is-open .btn_select-caret, .btn_select[aria-expanded=true] .btn_select-caret {
  transform: rotate(180deg);
}
.btn_select.is-error {
  border-color: var(--color-danger);
}
.btn_select.is-error.is-open, .btn_select.is-error[aria-expanded=true] {
  box-shadow: 0 0 0 var(--focus-shadow-width) var(--color-input-error-ring);
}
.btn_select-placeholder {
  color: var(--color-text-muted);
}
.btn_select-placeholder .btn_label {
  color: var(--color-text-muted);
}
.btn_select-caret {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex-shrink: 0;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: transform var(--transition-fast);
}
.btn_select-text {
  min-width: auto;
  max-width: none;
  padding-left: var(--btn-select-text-padding-x);
  padding-right: var(--btn-select-text-padding-right);
  color: var(--color-accent-text);
  background: transparent;
  border-color: transparent;
}
.btn_select-text:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-accent-text-hover);
  background: var(--color-accent-muted);
}
.btn_select-text.is-open, .btn_select-text[aria-expanded=true] {
  color: var(--color-accent-text-hover);
  background: var(--color-accent-muted);
  border-color: transparent;
  box-shadow: none;
}
.btn_select-text .btn_select-caret {
  color: currentColor;
}
.btn_select-text.btn_select-placeholder {
  color: var(--color-text-muted);
}
.btn_select-text.btn_select-placeholder .btn_label {
  color: var(--color-text-muted);
}
.btn_select-text.btn_select-placeholder:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.btn_select-text.btn_select-placeholder:hover:not(:disabled):not(.is-disabled):not(.is-loading) .btn_label {
  color: var(--color-text);
}
.btn_select-text.is-error {
  border-color: transparent;
  color: var(--color-danger-text);
}
.btn_select-text.is-error .btn_label {
  color: var(--color-danger-text);
}
.btn_select-text.is-error.is-open, .btn_select-text.is-error[aria-expanded=true] {
  background: var(--color-badge-danger-bg);
  box-shadow: none;
}
.btn_select-text.btn_sm {
  padding-left: var(--btn-select-text-padding-x-sm);
  padding-right: var(--btn-select-text-padding-right-sm);
}
.btn_select-text.btn_lg {
  padding-left: var(--btn-select-text-padding-x-lg);
  padding-right: var(--btn-select-text-padding-right-lg);
}
.btn_filled.color_default {
  color: var(--color-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
.btn_filled.color_default:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  border-color: var(--color-accent);
  color: var(--color-accent-text-hover);
}
.btn_filled.color_primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn_filled.color_primary:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.btn_filled.color_success {
  color: var(--color-on-accent);
  background: var(--color-success);
  border-color: var(--color-success);
}
.btn_filled.color_success:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}
.btn_filled.color_danger {
  color: var(--color-on-accent);
  background: var(--color-danger);
  border-color: var(--color-danger);
}
.btn_filled.color_danger:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}
.btn_filled.color_warning {
  color: var(--color-on-warning);
  background: var(--color-warning);
  border-color: var(--color-warning);
}
.btn_filled.color_warning:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  background: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}
.btn_ghost {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}
.btn_ghost:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-text);
  background: var(--color-accent-muted);
}
.btn_outline.color_primary {
  color: var(--color-accent-text);
  background: transparent;
  border-color: var(--color-accent);
}
.btn_outline.color_primary:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.btn_text.color_primary {
  color: var(--color-accent-text);
  background: transparent;
  border-color: transparent;
}
.btn_text.color_primary:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-accent-text-hover);
  background: var(--color-accent-muted);
}
.btn_text.color_muted {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}
.btn_text.color_muted:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.btn_text.color_danger {
  color: var(--color-danger-text);
  background: transparent;
  border-color: transparent;
}
.btn_text.color_danger:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-danger-text-hover);
  background: var(--color-badge-danger-bg);
}
.btn_text.color_success {
  color: var(--color-success-text);
  background: transparent;
  border-color: transparent;
}
.btn_text.color_success:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-success-text-hover);
  background: var(--color-badge-success-bg);
}
.btn_text.color_warning {
  color: var(--color-warning-text);
  background: transparent;
  border-color: transparent;
}
.btn_text.color_warning:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-warning-text-hover);
  background: var(--color-badge-warning-bg);
}
.btn:disabled, .btn.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled.btn_filled.color_default, .btn.is-disabled.btn_filled.color_default {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.btn:disabled.btn_filled.color_primary, .btn.is-disabled.btn_filled.color_primary {
  color: var(--color-on-accent-disabled);
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled.btn_filled.color_success, .btn.is-disabled.btn_filled.color_success {
  color: var(--color-on-success-disabled);
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled.btn_filled.color_danger, .btn.is-disabled.btn_filled.color_danger {
  color: var(--color-on-danger-disabled);
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled.btn_filled.color_warning, .btn.is-disabled.btn_filled.color_warning {
  color: var(--color-on-warning-disabled);
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn:disabled.btn_outline, .btn:disabled.btn_select, .btn.is-disabled.btn_outline, .btn.is-disabled.btn_select {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.btn:disabled.btn_outline, .btn.is-disabled.btn_outline {
  background-color: transparent;
}
.btn:disabled.btn_text, .btn:disabled.btn_ghost, .btn:disabled.btn_select-text, .btn.is-disabled.btn_text, .btn.is-disabled.btn_ghost, .btn.is-disabled.btn_select-text {
  background-color: transparent;
  border-color: transparent;
}
.btn .icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex-shrink: 0;
  pointer-events: none;
}
.btn_label {
  line-height: inherit;
}
.btn_spinner {
  width: var(--btn-spinner-size);
  height: var(--btn-spinner-size);
  border: var(--btn-spinner-border) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn_spin var(--btn-spinner-duration) linear infinite;
}
.btn_group {
  display: inline-flex;
  vertical-align: middle;
}
.btn_group .btn {
  border-radius: 0;
}
.btn_group .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn_group .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.btn_group .btn + .btn {
  margin-left: var(--btn-group-overlap);
}
.btn_group .btn:hover, .btn_group .btn:focus-visible {
  z-index: 1;
}
.btn_group-fit {
  width: auto;
}
.btn_group-align-start {
  align-self: flex-start;
}
.btn_group-align-center {
  align-self: center;
}
.btn_group-align-end {
  align-self: flex-end;
}
.btn_group-block {
  display: flex;
  width: 100%;
}
.btn_group-block .btn {
  flex: 1 1 0;
  min-width: 0;
}
.btn_group-vertical {
  flex-direction: column;
}
.btn_group-vertical .btn {
  width: 100%;
}
.btn_group-vertical .btn:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.btn_group-vertical .btn:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.btn_group-vertical .btn + .btn {
  margin-left: 0;
  margin-top: var(--btn-group-overlap);
}
.btn_group-vertical.btn_group-block .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.btn_group-round .btn {
  border-radius: 0;
}
.btn_group-round .btn:first-child {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.btn_group-round .btn:last-child {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.btn_group-round .btn:only-child {
  border-radius: var(--radius-pill);
}
.btn_group-round.btn_group-vertical .btn .btn:first-child {
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.btn_group-round.btn_group-vertical .btn .btn:last-child {
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
}
.btn_group-round.btn_group-vertical .btn .btn:only-child {
  border-radius: var(--radius-pill);
}
.btn_stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--btn-gap);
  width: 100%;
}
.btn_stack-text {
  margin: 0;
  font-size: var(--btn-stack-text-size);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--btn-stack-text-line-height);
}
.btn_stack-text a {
  color: var(--color-accent-text);
  text-decoration: none;
  font-weight: 500;
}
.btn_stack-text a:hover {
  color: var(--color-accent-text-hover);
  text-decoration: underline;
}
.btn_row {
  display: flex;
  align-items: center;
  gap: var(--btn-gap);
  width: 100%;
}
.btn_row-start {
  justify-content: flex-start;
}
.btn_row-center {
  justify-content: center;
}
.btn_row-end {
  justify-content: flex-end;
}
.btn_row-wrap {
  flex-wrap: wrap;
}
.btn_row-equal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--btn-gap);
  width: 100%;
  align-self: stretch;
}
.btn_row-equal .btn {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.btn_row-equal .btn_vertical {
  min-width: 0;
  align-self: stretch;
}

@keyframes btn_spin {
  to {
    transform: rotate(360deg);
  }
}
.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.125em;
  width: var(--icon-size);
  height: var(--icon-size);
}
.icon > img,
.icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.icon_sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}
.icon_lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}
.icon_xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}
.icon_inline {
  vertical-align: -0.2em;
}
.icon_spin {
  animation: icon-spin var(--icon-spin-duration) linear infinite;
}
.icon_circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
}
.icon_circle.color_primary {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.icon_circle.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.icon_circle.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.icon_circle-sm {
  width: var(--icon-circle-size-sm);
  height: var(--icon-circle-size-sm);
}
.icon_circle-lg {
  width: var(--icon-circle-size-lg);
  height: var(--icon-circle-size-lg);
}
.icon_square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
}
.icon_square.color_primary {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.icon_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: var(--icon-circle-size-sm);
  height: var(--icon-circle-size-sm);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.icon_button:focus-visible {
  outline-color: var(--color-accent);
}
.icon_button:hover {
  background: var(--color-surface-raised);
}
.icon_pulse {
  position: relative;
}
.icon_pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0.45;
  animation: icon-pulse var(--icon-pulse-duration) ease-out infinite;
}
.icon_group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.icon_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--space-md);
  justify-items: center;
  align-items: center;
  width: 100%;
}
.icon_grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
}

@keyframes icon-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes icon-pulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.section > .icon_grid,
.demo_section-preview .icon_grid,
.sb-demo-layout .icon_grid {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--avatar-font-size);
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.avatar:is(button, a) {
  cursor: pointer;
}
.avatar.color_default {
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
}
.avatar.color_primary {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.avatar.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.avatar.color_warning {
  color: var(--color-warning-text);
  background: var(--color-badge-warning-bg);
}
.avatar.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.avatar.color_info {
  color: var(--color-alert-info-text);
  background: var(--color-alert-info-bg);
}
.avatar_sm {
  font-size: var(--avatar-font-size-sm);
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
}
.avatar_sm .avatar_icon {
  width: var(--avatar-icon-size-sm);
  height: var(--avatar-icon-size-sm);
}
.avatar_sm .avatar_badge {
  border-width: 1.5px;
  width: var(--avatar-badge-size-sm);
  height: var(--avatar-badge-size-sm);
}
.avatar_lg {
  font-size: var(--avatar-font-size-lg);
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
}
.avatar_lg .avatar_icon {
  width: var(--avatar-icon-size-lg);
  height: var(--avatar-icon-size-lg);
}
.avatar_lg .avatar_badge {
  width: var(--avatar-badge-size-lg);
  height: var(--avatar-badge-size-lg);
}
.avatar_xl {
  font-size: var(--avatar-font-size-xl);
  width: var(--avatar-size-xl);
  height: var(--avatar-size-xl);
}
.avatar_xl .avatar_icon {
  width: var(--avatar-icon-size-xl);
  height: var(--avatar-icon-size-xl);
}
.avatar_xl .avatar_badge {
  width: var(--avatar-badge-size-lg);
  height: var(--avatar-badge-size-lg);
}
.avatar_square {
  border-radius: var(--radius-md);
}
.avatar_image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar_icon {
  width: var(--avatar-icon-size);
  height: var(--avatar-icon-size);
}
.avatar_group {
  display: inline-flex;
  align-items: center;
}
.avatar_group .avatar {
  border: 2px solid var(--color-surface);
  margin-left: var(--avatar-group-overlap);
}
.avatar_group .avatar:first-child {
  margin-left: 0;
}
.avatar_badge {
  position: absolute;
  right: 0;
  bottom: 0;
  box-sizing: content-box;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  width: var(--avatar-badge-size);
  height: var(--avatar-badge-size);
}
.avatar_badge.color_success {
  background: var(--color-success);
}
.avatar_badge.color_warning {
  background: var(--color-warning);
}
.avatar_badge.color_danger {
  background: var(--color-danger);
}
.avatar_badge.color_primary {
  background: var(--color-accent);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  vertical-align: middle;
}
.badge.color_default {
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}
.badge.color_primary {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.badge.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.badge.color_warning {
  color: var(--color-warning-text);
  background: var(--color-badge-warning-bg);
}
.badge.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.badge.color_info {
  color: var(--color-alert-info-text);
  background: var(--color-alert-info-bg);
}
.badge.badge_dot {
  gap: var(--badge-gap);
  padding-left: 0.4rem;
}
.badge.badge_dot::before {
  content: "";
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
}
.badge_sm {
  padding: var(--badge-padding-y-sm) var(--badge-padding-x-sm);
  font-size: var(--badge-font-size-sm);
}
.badge_sm.badge_dot {
  padding-left: 0.3rem;
}
.badge_sm.badge_dot::before {
  width: var(--badge-dot-size-sm);
  height: var(--badge-dot-size-sm);
}
.badge_lg {
  padding: var(--badge-padding-y-lg) var(--badge-padding-x-lg);
  font-size: var(--badge-font-size-lg);
}
.badge_lg.badge_dot {
  padding-left: 0.5rem;
}
.badge_lg.badge_dot::before {
  width: var(--badge-dot-size-lg);
  height: var(--badge-dot-size-lg);
}
.badge_count {
  min-width: var(--badge-count-min-width);
  padding-inline: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.badge_count.badge_sm {
  min-width: var(--badge-count-min-width-sm);
  padding-inline: 0.25rem;
}
.badge_count.badge_lg {
  min-width: var(--badge-count-min-width-lg);
  padding-inline: 0.45rem;
}
.badge_dot-only {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
}
.badge_dot-only.color_success {
  background: var(--color-success);
}
.badge_dot-only.color_warning {
  background: var(--color-warning);
}
.badge_dot-only.color_danger {
  background: var(--color-danger);
}
.badge_dot-only.color_primary {
  background: var(--color-accent);
}
.badge_dot-only.badge_sm {
  width: var(--badge-dot-size-sm);
  height: var(--badge-dot-size-sm);
}
.badge_dot-only.badge_lg {
  width: var(--badge-dot-size-lg);
  height: var(--badge-dot-size-lg);
}
.badge_wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.badge_wrap > .badge_count,
.badge_wrap > .badge_dot-only {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transform: translate(50%, -50%);
}
.badge_wrap > .badge_count {
  border: var(--badge-overlay-border) solid var(--color-surface);
}
.badge_wrap > .badge_count.color_danger {
  color: var(--color-on-accent);
  background: var(--color-danger);
}
.badge_wrap > .badge_count.color_primary {
  color: var(--color-on-accent);
  background: var(--color-primary);
}
.badge_wrap > .badge_count.color_success {
  color: var(--color-on-accent);
  background: var(--color-success);
}
.badge_wrap > .badge_count.color_warning {
  color: var(--color-on-warning);
  background: var(--color-warning);
}
.badge_wrap > .badge_dot-only {
  box-sizing: content-box;
  border: var(--badge-overlay-border) solid var(--color-surface);
}

.breadcrumb {
  color: var(--color-text-muted);
  font-size: var(--breadcrumb-font-size);
  line-height: var(--breadcrumb-line-height);
}
.breadcrumb .breadcrumb_item + .breadcrumb_item::before {
  content: "›";
}
.breadcrumb.breadcrumb_sep-slash .breadcrumb_item + .breadcrumb_item::before {
  content: "/";
}
.breadcrumb.breadcrumb_sep-dot .breadcrumb_item + .breadcrumb_item::before {
  content: "·";
}
.breadcrumb.breadcrumb_sm {
  font-size: var(--breadcrumb-font-size-sm);
}
.breadcrumb.breadcrumb_lg {
  font-size: var(--breadcrumb-font-size-lg);
}
.breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--breadcrumb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb_item {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  min-width: 0;
}
.breadcrumb_item + .breadcrumb_item::before {
  flex-shrink: 0;
  color: var(--breadcrumb-separator-color);
  font-weight: 400;
  user-select: none;
  pointer-events: none;
}
.breadcrumb_item.is-current {
  color: var(--color-text);
  font-weight: var(--breadcrumb-current-font-weight);
}
.breadcrumb_link {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-icon-gap);
  max-width: var(--breadcrumb-link-max-width);
  overflow: hidden;
  color: inherit;
  font-weight: var(--breadcrumb-link-font-weight);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.breadcrumb_link:hover:not(.is-disabled) {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}
.breadcrumb_link {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.breadcrumb_link:focus-visible {
  outline-color: var(--color-accent);
}
.breadcrumb_link.is-disabled, .breadcrumb_link[aria-disabled=true] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.breadcrumb_current {
  display: inline-block;
  max-width: var(--breadcrumb-link-max-width);
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb_link-icon {
  justify-content: center;
  padding: var(--breadcrumb-icon-padding);
  border-radius: var(--radius-sm);
}
.breadcrumb_link-icon:hover:not(.is-disabled) {
  text-decoration: none;
  background: var(--color-surface-raised);
}
.breadcrumb_icon {
  width: var(--breadcrumb-icon-size);
  height: var(--breadcrumb-icon-size);
  flex-shrink: 0;
  pointer-events: none;
}
.breadcrumb_ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--breadcrumb-ellipsis-size);
  height: var(--breadcrumb-ellipsis-size);
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.breadcrumb_ellipsis:hover {
  color: var(--color-accent-text);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
.breadcrumb_ellipsis {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.breadcrumb_ellipsis:focus-visible {
  outline-color: var(--color-accent);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tag-gap);
  width: fit-content;
  max-width: 100%;
  padding: var(--tag-padding-y) var(--tag-padding-x);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  line-height: var(--tag-line-height);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.tag.color_default {
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}
.tag.color_primary {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.tag.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.tag.color_warning {
  color: var(--color-warning-text);
  background: var(--color-badge-warning-bg);
}
.tag.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.tag.color_info {
  color: var(--color-alert-info-text);
  background: var(--color-alert-info-bg);
}
.tag.tag_outline {
  background: transparent;
}
.tag.tag_outline.color_default {
  border-color: var(--color-border);
}
.tag.tag_outline.color_primary {
  border-color: var(--color-accent);
}
.tag.tag_outline.color_success {
  border-color: var(--color-success);
}
.tag.tag_outline.color_danger {
  border-color: var(--color-danger);
}
.tag.tag_outline.color_warning {
  border-color: var(--color-warning);
}
.tag.tag_outline.color_info {
  border-color: var(--color-accent);
}
.tag.tag_solid.color_default {
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}
.tag.tag_solid.color_primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.tag.tag_solid.color_success {
  color: var(--color-on-accent);
  background: var(--color-success);
  border: 1px solid var(--color-success);
}
.tag.tag_solid.color_danger {
  color: var(--color-on-accent);
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.tag.tag_solid.color_warning {
  color: var(--color-on-warning);
  background: var(--color-warning);
  border: 1px solid var(--color-warning);
}
.tag.tag_solid.color_info {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.tag.tag_round {
  border-radius: var(--radius-pill);
}
.tag.tag_borderless {
  border-color: transparent;
}
.tag.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.tag.is-disabled.tag_solid.color_primary {
  color: var(--color-on-accent-disabled);
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_solid.color_success {
  color: var(--color-on-success-disabled);
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_solid.color_danger {
  color: var(--color-on-danger-disabled);
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_solid.color_warning {
  color: var(--color-on-warning-disabled);
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_solid.color_default {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.tag.is-disabled.tag_checkable.is-selected.color_primary {
  color: var(--color-on-accent-disabled);
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_checkable.is-selected.color_success {
  color: var(--color-on-success-disabled);
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_checkable.is-selected.color_danger {
  color: var(--color-on-danger-disabled);
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag.is-disabled.tag_checkable.is-selected.color_warning {
  color: var(--color-on-warning-disabled);
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tag_icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tag-icon-size);
  height: var(--tag-icon-size);
}
.tag_icon .icon,
.tag_icon svg {
  width: 100%;
  height: 100%;
}
.tag_sm {
  padding: var(--tag-padding-y-sm) var(--tag-padding-x-sm);
  font-size: var(--tag-font-size-sm);
}
.tag_sm .tag_close {
  width: var(--tag-close-size-sm);
  height: var(--tag-close-size-sm);
}
.tag_sm .tag_icon {
  width: var(--tag-icon-size-sm);
  height: var(--tag-icon-size-sm);
}
.tag_lg {
  padding: var(--tag-padding-y-lg) var(--tag-padding-x-lg);
  font-size: var(--tag-font-size-lg);
}
.tag_lg .tag_close {
  width: var(--tag-close-size-lg);
  height: var(--tag-close-size-lg);
}
.tag_lg .tag_icon {
  width: var(--tag-icon-size-lg);
  height: var(--tag-icon-size-lg);
}
.tag_close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  width: var(--tag-close-size);
  height: var(--tag-close-size);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.tag_close:focus-visible {
  outline-color: var(--color-accent);
}
.tag_close svg {
  width: 0.75em;
  height: 0.75em;
}
.tag_close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}
.tag_solid .tag_close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.tag_control {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tag_control:disabled, .tag_control[aria-disabled=true] {
  cursor: default;
}
.tag_checkable {
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.tag_checkable.color_default {
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-color: var(--color-border);
}
.tag_checkable:hover:not(.is-disabled):not(.is-selected) {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.tag_checkable.is-selected.color_default {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  border-color: var(--color-accent);
}
.tag_checkable.is-selected.color_primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.tag_checkable.is-selected.color_success {
  color: var(--color-on-accent);
  background: var(--color-success);
  border: 1px solid var(--color-success);
}
.tag_checkable.is-selected.color_danger {
  color: var(--color-on-accent);
  background: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.tag_checkable.is-selected.color_warning {
  color: var(--color-on-warning);
  background: var(--color-warning);
  border: 1px solid var(--color-warning);
}
.tag_add {
  color: var(--color-text-muted);
  background: transparent;
  border-style: var(--tag-add-border-style);
  border-color: var(--color-border);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.tag_add:hover:not(.is-disabled) {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.tag_group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.tag_group-tight {
  gap: var(--space-xs);
}

a.tag,
button.tag {
  margin: 0;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
a.tag:focus-visible,
button.tag:focus-visible {
  outline-color: var(--color-accent);
}

a.tag:hover:not(.is-disabled) {
  opacity: 0.88;
}

pre code :where(.tag),
.typo_pre code :where(.tag) {
  display: inline;
  align-items: unset;
  gap: 0;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  white-space: inherit;
  vertical-align: baseline;
}

.alert {
  display: flex;
  gap: var(--alert-gap);
  padding: var(--alert-padding-y) var(--alert-padding-x);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.alert.color_info {
  color: var(--color-alert-info-text);
  background: var(--color-alert-info-bg);
  border-color: var(--color-alert-info-border);
}
.alert.color_success {
  color: var(--color-success-text);
  background: var(--color-alert-success-bg);
  border-color: var(--color-alert-success-border);
}
.alert.color_warning {
  color: var(--color-warning-text);
  background: var(--color-alert-warning-bg);
  border-color: var(--color-alert-warning-border);
}
.alert.color_error {
  color: var(--color-alert-error-text);
  background: var(--color-alert-error-bg);
  border-color: var(--color-alert-error-border);
}
.alert_sm {
  padding: var(--alert-padding-y-sm) var(--alert-padding-x-sm);
  font-size: var(--alert-font-size-sm);
}
.alert_sm .alert_icon {
  width: var(--alert-icon-size-sm);
  height: var(--alert-icon-size-sm);
}
.alert_sm .alert_close {
  width: var(--alert-close-size-sm);
  height: var(--alert-close-size-sm);
}
.alert_lg {
  padding: var(--alert-padding-y-lg) var(--alert-padding-x-lg);
  font-size: var(--alert-font-size-lg);
}
.alert_lg .alert_icon {
  width: var(--alert-icon-size-lg);
  height: var(--alert-icon-size-lg);
}
.alert_lg .alert_close {
  width: var(--alert-close-size-lg);
  height: var(--alert-close-size-lg);
}
.alert_banner {
  border-radius: 0;
  border-inline: none;
}
.alert_icon {
  flex-shrink: 0;
  margin-top: var(--alert-icon-offset);
  width: var(--alert-icon-size);
  height: var(--alert-icon-size);
}
.alert_body {
  flex: 1;
  min-width: 0;
}
.alert_title {
  font-weight: var(--alert-title-weight);
  margin-bottom: var(--alert-title-gap);
}
.alert_desc {
  color: inherit;
  opacity: var(--alert-desc-opacity);
  margin: 0;
}
.alert_desc:only-child {
  opacity: 1;
}
.alert_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--alert-actions-gap);
  margin-top: var(--alert-actions-margin-top);
}
.alert_close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-top: calc(var(--alert-icon-offset) * -1);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  width: var(--alert-close-size);
  height: var(--alert-close-size);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.alert_close:focus-visible {
  outline-color: var(--color-accent);
}
.alert_close svg {
  width: 0.75em;
  height: 0.75em;
}
.alert_close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

[hidden].alert {
  display: none;
}

:root {
  --snackbar-min-width: 18rem;
  --snackbar-max-width: 36rem;
  --snackbar-padding-y: var(--space-sm);
  --snackbar-padding-x: var(--space-md);
  --snackbar-gap: var(--space-sm);
  --snackbar-font-size: var(--text-size-base);
  --snackbar-line-height: 1.5;
  --snackbar-icon-size: 1.25rem;
  --snackbar-close-size: 2rem;
  --snackbar-action-gap: var(--space-sm);
  --snackbar-round-padding-x: var(--space-lg);
  --snackbar-round-padding-x-sm: var(--space-md);
  --snackbar-round-padding-x-lg: var(--space-xl);
  --snackbar-padding-y-sm: var(--space-xs);
  --snackbar-padding-x-sm: var(--space-sm);
  --snackbar-font-size-sm: var(--text-size-sm);
  --snackbar-padding-y-lg: var(--space-md);
  --snackbar-padding-x-lg: var(--space-lg);
  --snackbar-font-size-lg: var(--text-size-lg);
  --snackbar-motion-duration: 200ms;
  --snackbar-motion-distance: 1rem;
  --snackbar-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --snackbar-region-offset: var(--space-md);
  --snackbar-region-gap: var(--space-sm);
  --snackbar-region-z-index: 1200;
}

.snackbar {
  --snackbar-slide-x: 0;
  --snackbar-slide-y: 0;
  display: flex;
  align-items: center;
  gap: var(--snackbar-gap);
  width: fit-content;
  min-width: min(100%, var(--snackbar-min-width));
  max-width: min(100%, var(--snackbar-max-width));
  padding: var(--snackbar-padding-y) var(--snackbar-padding-x);
  font-size: var(--snackbar-font-size);
  line-height: var(--snackbar-line-height);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.snackbar.color_info {
  color: var(--color-alert-info-text);
  background-color: var(--color-snackbar-info-bg);
  border-color: var(--color-snackbar-info-border);
}
.snackbar.color_success {
  color: var(--color-success-text);
  background-color: var(--color-snackbar-success-bg);
  border-color: var(--color-snackbar-success-border);
}
.snackbar.color_warning {
  color: var(--color-warning-text);
  background-color: var(--color-snackbar-warning-bg);
  border-color: var(--color-snackbar-warning-border);
}
.snackbar.color_error {
  color: var(--color-alert-error-text);
  background-color: var(--color-snackbar-error-bg);
  border-color: var(--color-snackbar-error-border);
}
.snackbar_sm {
  padding: var(--snackbar-padding-y-sm) var(--snackbar-padding-x-sm);
  font-size: var(--snackbar-font-size-sm);
}
.snackbar_lg {
  padding: var(--snackbar-padding-y-lg) var(--snackbar-padding-x-lg);
  font-size: var(--snackbar-font-size-lg);
}
.snackbar_round {
  padding-inline: var(--snackbar-round-padding-x);
  border-radius: var(--radius-pill);
}
.snackbar_sm.snackbar_round {
  padding-inline: var(--snackbar-round-padding-x-sm);
}
.snackbar_lg.snackbar_round {
  padding-inline: var(--snackbar-round-padding-x-lg);
}
.snackbar_placement-top-start, .snackbar_placement-top-center, .snackbar_placement-top-end {
  --snackbar-slide-y: calc(var(--snackbar-motion-distance) * -1);
}
.snackbar_placement-middle-start {
  --snackbar-slide-x: calc(var(--snackbar-motion-distance) * -1);
}
.snackbar_placement-middle-end {
  --snackbar-slide-x: var(--snackbar-motion-distance);
}
.snackbar_placement-bottom-start, .snackbar_placement-bottom-center, .snackbar_placement-bottom-end {
  --snackbar-slide-y: var(--snackbar-motion-distance);
}
.snackbar_motion-fade.is-entering {
  animation: snackbar-fade-in var(--snackbar-motion-duration) var(--snackbar-motion-easing) both;
}
.snackbar_motion-fade.is-leaving {
  animation: snackbar-fade-out var(--snackbar-motion-duration) var(--snackbar-motion-easing) both;
}
.snackbar_motion-slide.is-entering {
  animation: snackbar-slide-in var(--snackbar-motion-duration) var(--snackbar-motion-easing) both;
}
.snackbar_motion-slide.is-leaving {
  animation: snackbar-slide-out var(--snackbar-motion-duration) var(--snackbar-motion-easing) both;
}
.snackbar.is-leaving {
  pointer-events: none;
}
.snackbar_icon-wrap, .snackbar_action, .snackbar_close {
  flex-shrink: 0;
}
.snackbar_icon {
  display: block;
  width: var(--snackbar-icon-size);
  height: var(--snackbar-icon-size);
}
.snackbar_message {
  flex: 1;
  min-width: 0;
}
.snackbar_action {
  display: flex;
  align-items: center;
  gap: var(--snackbar-action-gap);
}
.snackbar_action .btn_ghost {
  color: inherit;
}
.snackbar_close {
  width: var(--snackbar-close-size);
  height: var(--snackbar-close-size);
  color: inherit;
}

.snackbar_region {
  position: fixed;
  z-index: var(--snackbar-region-z-index);
  display: flex;
  flex-direction: column;
  gap: var(--snackbar-region-gap);
  width: max-content;
  max-width: calc(100vw - var(--snackbar-region-offset) * 2);
  pointer-events: none;
}
.snackbar_region > .snackbar {
  pointer-events: auto;
}
.snackbar_region-top-start {
  inset: var(--snackbar-region-offset) auto auto var(--snackbar-region-offset);
  align-items: flex-start;
}
.snackbar_region-top-center {
  inset: var(--snackbar-region-offset) var(--snackbar-region-offset) auto;
  align-items: center;
  width: auto;
  max-width: none;
}
.snackbar_region-top-end {
  inset: var(--snackbar-region-offset) var(--snackbar-region-offset) auto auto;
  align-items: flex-end;
}
.snackbar_region-middle-start {
  inset: var(--snackbar-region-offset) auto var(--snackbar-region-offset) var(--snackbar-region-offset);
  align-items: flex-start;
  justify-content: center;
}
.snackbar_region-middle-end {
  inset: var(--snackbar-region-offset) var(--snackbar-region-offset) var(--snackbar-region-offset) auto;
  align-items: flex-end;
  justify-content: center;
}
.snackbar_region-bottom-start {
  inset: auto auto var(--snackbar-region-offset) var(--snackbar-region-offset);
  align-items: flex-start;
}
.snackbar_region-bottom-center {
  inset: auto var(--snackbar-region-offset) var(--snackbar-region-offset);
  align-items: center;
  width: auto;
  max-width: none;
}
.snackbar_region-bottom-end {
  inset: auto var(--snackbar-region-offset) var(--snackbar-region-offset) auto;
  align-items: flex-end;
}

.snackbar_playground-controls,
.snackbar_playground-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.snackbar_playground-actions {
  margin-top: var(--space-md);
}

@keyframes snackbar-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes snackbar-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes snackbar-slide-in {
  from {
    opacity: 0;
    transform: translate(var(--snackbar-slide-x), var(--snackbar-slide-y));
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes snackbar-slide-out {
  from {
    opacity: 1;
    transform: translate(0);
  }
  to {
    opacity: 0;
    transform: translate(var(--snackbar-slide-x), var(--snackbar-slide-y));
  }
}
@media (prefers-reduced-motion: reduce) {
  .snackbar {
    --snackbar-motion-duration: 1ms;
  }
}
@media (max-width: 640px) {
  .snackbar {
    min-width: 0;
    max-width: 100%;
  }
}
.input, .textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.input::placeholder, .textarea::placeholder {
  color: var(--color-text-muted);
}
.input:hover:not(:disabled):not(:read-only), .textarea:hover:not(:disabled):not(:read-only) {
  border-color: var(--color-accent);
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.input:read-only, .textarea:read-only {
  background-color: var(--color-surface);
  cursor: default;
}
.input:disabled, .textarea:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.input.is-error, .is-error.textarea {
  border-color: var(--color-danger);
}
.input.is-error:focus, .is-error.textarea:focus {
  box-shadow: 0 0 0 3px var(--color-input-error-ring);
}
.input.is-success, .is-success.textarea {
  border-color: var(--color-success);
}
.input.is-success:focus, .is-success.textarea:focus {
  box-shadow: 0 0 0 3px var(--color-input-success-ring);
}
.input_sm {
  padding: 0.3rem 0.6rem;
  font-size: var(--text-size-sm);
}
.input_lg {
  padding: 0.65rem 0.9rem;
  font-size: var(--text-size-lg);
}
.input_fit {
  width: 100%;
  max-width: var(--input-max-width);
}
.input_clearable {
  position: relative;
  display: block;
  width: 100%;
}
.input_clearable.input_fit {
  max-width: var(--input-max-width);
}
.input_clearable.is-filled .input, .input_clearable.is-filled .textarea {
  padding-right: calc(var(--input-clear-offset) + var(--input-clear-size) + var(--input-clear-offset));
}
.input_clearable.is-filled:has(> .input_sm) .input, .input_clearable.is-filled:has(> .input_sm) .textarea {
  padding-right: calc(0.6rem + var(--input-clear-size) + var(--input-clear-offset));
}
.input_clearable.is-filled:has(> .input_lg) .input, .input_clearable.is-filled:has(> .input_lg) .textarea {
  padding-right: calc(0.9rem + var(--input-clear-size) + var(--input-clear-offset));
}
.input_clearable .input[type=search]::-webkit-search-cancel-button, .input_clearable [type=search].textarea::-webkit-search-cancel-button,
.input_clearable .input[type=search]::-webkit-search-decoration,
.input_clearable [type=search].textarea::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}
.input_clear {
  position: absolute;
  top: 50%;
  right: var(--input-clear-offset, 0.5rem);
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--input-clear-color);
  cursor: pointer;
  transform: translateY(-50%);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.input_clear:focus-visible {
  outline-color: var(--color-accent);
}
.input_clear {
  width: var(--input-clear-size);
  height: var(--input-clear-size);
}
.input_clear[hidden] {
  display: none;
}
.input_clear .icon {
  width: var(--input-clear-icon-size);
  height: var(--input-clear-icon-size);
}
.input_clear.btn {
  position: absolute;
  top: 50%;
  right: var(--input-clear-offset, 0.5rem);
  bottom: auto;
  left: auto;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  line-height: 1;
  color: var(--input-clear-color);
  box-shadow: none;
  transform: translateY(-50%);
  width: var(--input-clear-size);
  height: var(--input-clear-size);
}
.input_clear.btn.btn_icon-only {
  aspect-ratio: auto;
}
.input_clear .btn_label,
.input_clear .btn_spinner {
  display: none;
}
.input_clear:hover {
  color: var(--input-clear-hover-color);
  background: transparent;
  border-color: transparent;
}
.input_clear:focus-visible {
  color: var(--input-clear-hover-color);
  background: transparent;
  border-color: transparent;
}
.input_clear.btn.btn_filled:hover:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_filled:focus-visible:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_filled:active:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_outline:hover:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_outline:focus-visible:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_outline:active:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_text:hover:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_text:focus-visible:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_text:active:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_ghost:hover:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_ghost:focus-visible:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn.btn_ghost:active:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn:hover:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn:focus-visible:not(:disabled):not(.is-disabled):not(.is-loading), .input_clear.btn:active:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--input-clear-hover-color);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.input_field {
  width: 100%;
}
.input_field + .input_field {
  margin-top: var(--space-lg);
}
.input_field_fit {
  max-width: var(--input-max-width);
}
.input_group {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input_group:is(label) {
  cursor: text;
}
.input_group.input_fit {
  max-width: var(--input-max-width);
}
.input_group > * + * {
  border-left: 1px solid var(--color-border);
}
.input_group:hover:has(> .input:hover:not(:disabled):not(:read-only), > .textarea:hover:not(:disabled):not(:read-only)) {
  border-color: var(--color-accent);
}
.input_group:focus-within:has(> .input:focus, > .textarea:focus, > select.input:focus, > select.textarea:focus) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.input_group:has(> .input.is-error, > .is-error.textarea) {
  border-color: var(--color-danger);
}
.input_group:has(> .input.is-error:focus, > .is-error.textarea:focus) {
  box-shadow: 0 0 0 3px var(--color-input-error-ring);
}
.input_group:has(> .input.is-success:focus, > .is-success.textarea:focus) {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-input-success-ring);
}
.input_group .input, .input_group .textarea,
.input_group select.input {
  flex: 1;
  min-width: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
.input_group .input:hover:not(:disabled):not(:read-only), .input_group .textarea:hover:not(:disabled):not(:read-only), .input_group .input:focus, .input_group .textarea:focus,
.input_group select.input:hover:not(:disabled):not(:read-only),
.input_group select.input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.input_group select.input, .input_group select.textarea {
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;
}
.input_group .input_group-addon {
  border: none;
  border-radius: 0;
}
.input_group .btn {
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.input_group .input_clearable {
  position: relative;
  flex: 1;
  min-width: 0;
}
.input_group .input_clearable.is-filled > .input, .input_group .input_clearable.is-filled > .textarea {
  padding-right: calc(var(--input-clear-offset) + var(--input-clear-size) + var(--input-clear-offset));
}
.input_group .input_clearable.is-filled:has(> .input_sm) > .input, .input_group .input_clearable.is-filled:has(> .input_sm) > .textarea {
  padding-right: calc(0.6rem + var(--input-clear-size) + var(--input-clear-offset));
}
.input_group .input_clearable.is-filled:has(> .input_lg) > .input, .input_group .input_clearable.is-filled:has(> .input_lg) > .textarea {
  padding-right: calc(0.9rem + var(--input-clear-size) + var(--input-clear-offset));
}
.input_group-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: var(--text-size-base);
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  white-space: nowrap;
}
.input_group-label_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.input_split {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}
.input_split.input_fit {
  max-width: var(--input-max-width);
}
.input_split .input, .input_split .textarea {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.input_split_sep {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--text-size-sm);
  line-height: 1;
  user-select: none;
}
.input_otp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  width: 100%;
}
.input_otp.input_fit {
  max-width: var(--input-max-width);
}
.input_otp .input, .input_otp .textarea {
  flex: 1 1 2.5rem;
  min-width: 2.25rem;
  max-width: 3rem;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.input_row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
}
.input_row.input_fit {
  max-width: var(--input-max-width);
}
.input_row > .form_field {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.input_row > .form_field + .form_field {
  margin-top: 0;
}
.input_row > .form_field:first-child:not(:only-child) {
  flex: 3;
}
.input_row > .form_field:last-child:not(:only-child) {
  flex: 2;
  max-width: 11rem;
}

.input.input_masked, .input_masked.textarea {
  font-family: var(--input-font-masked);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--input-masked-letter-spacing);
}

.form_field {
  width: 100%;
}
.form_field + .form_field {
  margin-top: var(--space-lg);
}
.form_field_fit {
  max-width: var(--input-max-width);
}
.form_field-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--text-size-base);
  font-weight: 500;
}
.form_field-required {
  margin-left: 0.125rem;
  color: var(--color-danger-text);
}
.form_field-hint {
  margin-top: var(--space-xs);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
}
.form_field-error {
  margin-top: var(--space-xs);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: var(--text-size-sm);
  color: var(--color-danger-text);
}
.form_field-success {
  margin-top: var(--space-xs);
  font-size: var(--text-size-sm);
  color: var(--color-success-text);
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--select-padding-right);
  cursor: pointer;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--select-caret-offset) center;
  background-size: var(--select-caret-size) var(--select-caret-size);
}
select.input::-ms-expand {
  display: none;
}
select.input:disabled {
  cursor: not-allowed;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
}
select.input.input_sm {
  padding-right: var(--select-padding-right-sm);
  background-position: right var(--select-caret-offset-sm) center;
  background-size: var(--select-caret-size-sm) var(--select-caret-size-sm);
}
select.input.input_lg {
  padding-right: var(--select-padding-right-lg);
  background-position: right var(--select-caret-offset-lg) center;
  background-size: var(--select-caret-size-lg) var(--select-caret-size-lg);
}
select.input[multiple] {
  padding-right: 0.75rem;
  min-height: 6rem;
  background-image: none;
  cursor: default;
}
select.input[multiple] option {
  padding: 0.25rem 0;
}
select.input[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
  cursor: default;
}
select.input:required:invalid {
  color: var(--color-text-muted);
}

[data-theme=dark] select.input {
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--select-caret-offset) center;
  background-size: var(--select-caret-size) var(--select-caret-size);
}
[data-theme=dark] select.input:disabled {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) select.input {
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--select-caret-offset) center;
    background-size: var(--select-caret-size) var(--select-caret-size);
  }
  :root:not([data-theme=light]) select.input:disabled {
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}
.textarea_wrap {
  position: relative;
  width: 100%;
}
.textarea_wrap_fit {
  max-width: var(--input-max-width);
}
.textarea_wrap.textarea_show-count {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.textarea_wrap.textarea_show-count:hover:has(.textarea:hover:not(:disabled):not(:read-only)) {
  border-color: var(--color-accent);
}
.textarea_wrap.textarea_show-count:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.textarea_wrap.textarea_show-count:has(.textarea.is-error) {
  border-color: var(--color-danger);
}
.textarea_wrap.textarea_show-count:has(.textarea.is-error:focus) {
  box-shadow: 0 0 0 3px var(--color-input-error-ring);
}
.textarea_wrap.textarea_show-count:has(.textarea.is-success) {
  border-color: var(--color-success);
}
.textarea_wrap.textarea_show-count:has(.textarea.is-success:focus) {
  box-shadow: 0 0 0 3px var(--color-input-success-ring);
}
.textarea_wrap.textarea_show-count:has(.textarea:disabled) {
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
}
.textarea_wrap.textarea_show-count:has(.textarea:read-only) {
  background-color: var(--color-surface);
}
.textarea_wrap.textarea_show-count .textarea {
  display: block;
  width: 100%;
  min-height: var(--textarea-min-height);
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.textarea_wrap.textarea_show-count .textarea:hover:not(:disabled):not(:read-only), .textarea_wrap.textarea_show-count .textarea:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.textarea_wrap.textarea_show-count .textarea_count {
  display: block;
  text-align: right;
  padding: 0 var(--textarea-count-inset-x) var(--textarea-count-inset-y);
}

.textarea_count {
  position: relative;
  font-size: var(--text-size-sm);
  line-height: 1;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}
.textarea_count.is-limit {
  color: var(--color-danger-text);
}
.textarea_count_visual {
  font-variant-numeric: tabular-nums;
}
.textarea_count_announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.textarea_show-count:has(.textarea_sm) .textarea_count {
  padding-right: 0.6rem;
  padding-bottom: 0.35rem;
  font-size: var(--text-size-xs);
}

.textarea_show-count:has(.textarea_lg) .textarea_count {
  padding-right: 0.9rem;
  padding-bottom: 0.6rem;
  font-size: var(--text-size-base);
}

.textarea {
  min-height: var(--textarea-min-height);
  resize: none;
}
.textarea_sm {
  padding: 0.3rem 0.6rem;
  font-size: var(--text-size-sm);
}
.textarea_lg {
  padding: 0.65rem 0.9rem;
  font-size: var(--text-size-lg);
}
.textarea_fit {
  width: 100%;
  max-width: var(--input-max-width);
}
.textarea_resize_none {
  resize: none;
}
.textarea_resize_vertical {
  resize: vertical;
}
.textarea_resize_horizontal {
  resize: horizontal;
}
.textarea_resize_both {
  resize: both;
}

.checkbox {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  align-items: flex-start;
  gap: var(--checkbox-gap);
  max-width: 100%;
  margin: 0;
  font-size: var(--checkbox-font-size);
  line-height: var(--checkbox-line-height);
  color: var(--color-text);
  user-select: none;
  vertical-align: middle;
}
.checkbox:is(label) {
  cursor: pointer;
}
.checkbox.color_primary .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.checkbox.color_primary .checkbox_input:checked + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_primary .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.checkbox.color_primary .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_primary.checkbox_button:has(.checkbox_input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.checkbox.color_success .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}
.checkbox.color_success .checkbox_input:checked + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_success .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}
.checkbox.color_success .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_success.checkbox_button:has(.checkbox_input:checked) {
  border-color: var(--color-success);
  background: var(--color-badge-success-bg);
}
.checkbox.color_danger .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.checkbox.color_danger .checkbox_input:checked + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_danger .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.checkbox.color_danger .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_danger.checkbox_button:has(.checkbox_input:checked) {
  border-color: var(--color-danger);
  background: var(--color-badge-danger-bg);
}
.checkbox.color_warning .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-on-accent);
}
.checkbox.color_warning .checkbox_input:checked + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_warning .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-on-accent);
}
.checkbox.color_warning .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox.color_warning.checkbox_button:has(.checkbox_input:checked) {
  border-color: var(--color-warning);
  background: var(--color-badge-warning-bg);
}
.checkbox:has(.checkbox_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
}
.checkbox:has(.checkbox_input:disabled) .checkbox_box {
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.checkbox:has(.checkbox_input:disabled) .checkbox_input:checked + .checkbox_box,
.checkbox:has(.checkbox_input:disabled) .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  color: var(--color-on-accent-disabled);
}
.checkbox.color_primary:has(.checkbox_input:disabled) .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  color: var(--color-on-accent-disabled);
}
.checkbox.color_primary:has(.checkbox_input:disabled) .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  color: var(--color-on-accent-disabled);
}
.checkbox.color_success:has(.checkbox_input:disabled) .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  color: var(--color-on-success-disabled);
}
.checkbox.color_success:has(.checkbox_input:disabled) .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  color: var(--color-on-success-disabled);
}
.checkbox.color_danger:has(.checkbox_input:disabled) .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  color: var(--color-on-danger-disabled);
}
.checkbox.color_danger:has(.checkbox_input:disabled) .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  color: var(--color-on-danger-disabled);
}
.checkbox.color_warning:has(.checkbox_input:disabled) .checkbox_input:checked + .checkbox_box {
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  color: var(--color-on-warning-disabled);
}
.checkbox.color_warning:has(.checkbox_input:disabled) .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  color: var(--color-on-warning-disabled);
}
.checkbox.is-error .checkbox_box {
  border-color: var(--color-danger);
}
.checkbox.is-error .checkbox_input:focus-visible + .checkbox_box {
  outline-color: var(--color-danger);
}
.checkbox_control {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  margin-top: var(--checkbox-control-offset);
  cursor: pointer;
}
.checkbox_control:has(.checkbox_input:disabled) {
  cursor: not-allowed;
}
.checkbox_input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.checkbox_input:focus-visible + .checkbox_box {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.checkbox_input:disabled {
  cursor: not-allowed;
}
.checkbox_input:checked + .checkbox_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.checkbox_input:checked + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_input:indeterminate + .checkbox_box::after {
  top: 50%;
  left: 50%;
  width: calc(var(--checkbox-size) * 0.55);
  height: 0;
  border-width: 0 0 2px 0;
  transform: translate(-50%, -50%) scale(1);
}
.checkbox_box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  pointer-events: none;
  background-color: var(--color-bg);
  border: var(--checkbox-border-width) solid var(--color-border);
  border-radius: var(--checkbox-radius);
  color: var(--color-on-accent);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.checkbox_box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--checkbox-size) * 0.28);
  height: calc(var(--checkbox-size) * 0.5);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translate(-55%, -65%) rotate(45deg) scale(0.5);
  transform-origin: center;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.checkbox_label {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: var(--checkbox-label-weight);
  cursor: pointer;
}
.checkbox_label:has(+ .checkbox_control .checkbox_input:disabled), .checkbox:has(.checkbox_input:disabled) > .checkbox_label {
  cursor: not-allowed;
}
.checkbox_hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--checkbox-hint-size);
  font-weight: 400;
  color: var(--color-text-muted);
}
.checkbox_content {
  flex: 0 1 auto;
  min-width: 0;
}
.checkbox_block {
  width: 100%;
  max-width: 100%;
}
.checkbox_block .checkbox_label,
.checkbox_block .checkbox_content {
  flex: 1 1 auto;
}
.checkbox_sm {
  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-font-size: var(--checkbox-font-size-sm);
  --checkbox-gap: var(--checkbox-gap-sm);
}
.checkbox_lg {
  --checkbox-size: var(--checkbox-size-lg);
  --checkbox-font-size: var(--checkbox-font-size-lg);
  --checkbox-gap: var(--checkbox-gap-lg);
}
.checkbox_label-end .checkbox_control {
  flex-shrink: 0;
}
.checkbox_label-end.checkbox_block, .checkbox_group_block > .checkbox_label-end {
  width: 100%;
  max-width: 100%;
}
.checkbox_label-end.checkbox_block .checkbox_control, .checkbox_group_block > .checkbox_label-end .checkbox_control {
  margin-left: auto;
}
.checkbox_label-end.checkbox_block .checkbox_label,
.checkbox_label-end.checkbox_block .checkbox_content, .checkbox_group_block > .checkbox_label-end .checkbox_label,
.checkbox_group_block > .checkbox_label-end .checkbox_content {
  flex: 1 1 auto;
}
.checkbox_button {
  position: relative;
  align-items: center;
  padding: var(--checkbox-button-padding-y) var(--checkbox-button-padding-x);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.checkbox_button .checkbox_control {
  display: none;
}
.checkbox_button .checkbox_label {
  font-weight: 500;
}
.checkbox_button:hover:not(:has(.checkbox_input:disabled)) {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.checkbox_button:has(.checkbox_input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.checkbox_button:has(.checkbox_input:focus-visible) {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.checkbox_button:has(.checkbox_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.checkbox_card {
  display: block;
  width: 100%;
  max-width: 100%;
}
.checkbox_card.color_primary .checkbox_input:checked + .checkbox_box,
.checkbox_card.color_primary .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.checkbox_card.color_primary .checkbox_input:checked + .checkbox_box::after,
.checkbox_card.color_primary .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_card.color_primary:has(.checkbox_input:checked) .card {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.checkbox_card.color_success .checkbox_input:checked + .checkbox_box,
.checkbox_card.color_success .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}
.checkbox_card.color_success .checkbox_input:checked + .checkbox_box::after,
.checkbox_card.color_success .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_card.color_success:has(.checkbox_input:checked) .card {
  border-color: var(--color-success);
  background: var(--color-badge-success-bg);
}
.checkbox_card.color_danger .checkbox_input:checked + .checkbox_box,
.checkbox_card.color_danger .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.checkbox_card.color_danger .checkbox_input:checked + .checkbox_box::after,
.checkbox_card.color_danger .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_card.color_danger:has(.checkbox_input:checked) .card {
  border-color: var(--color-danger);
  background: var(--color-badge-danger-bg);
}
.checkbox_card.color_warning .checkbox_input:checked + .checkbox_box,
.checkbox_card.color_warning .checkbox_input:indeterminate + .checkbox_box {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-on-accent);
}
.checkbox_card.color_warning .checkbox_input:checked + .checkbox_box::after,
.checkbox_card.color_warning .checkbox_input:indeterminate + .checkbox_box::after {
  opacity: 1;
  transform: translate(-55%, -65%) rotate(45deg) scale(1);
}
.checkbox_card.color_warning:has(.checkbox_input:checked) .card {
  border-color: var(--color-warning);
  background: var(--color-badge-warning-bg);
}
.checkbox_card:has(.checkbox_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.checkbox_card .card {
  width: 100%;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.checkbox_card .checkbox_control {
  margin-top: 0;
}
.checkbox_card:hover:not(:has(.checkbox_input:disabled)) .card {
  border-color: var(--color-accent);
}
.checkbox_card:has(.checkbox_input:checked) .card {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.checkbox_card:has(.checkbox_input:focus-visible) .card {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.checkbox_card-clickable {
  cursor: pointer;
}
.checkbox_card-clickable .card {
  cursor: pointer;
}
.checkbox_card-clickable:has(.checkbox_input:disabled) .card {
  cursor: not-allowed;
}
.checkbox_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--checkbox-group-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  max-width: 100%;
}
.checkbox_group_horizontal {
  flex-flow: row wrap;
  align-items: center;
}
.checkbox_group_compact {
  --checkbox-group-gap: var(--space-sm);
}
.checkbox_group_block {
  align-items: stretch;
  width: 100%;
}
.checkbox_group_block > .checkbox {
  width: 100%;
  max-width: 100%;
}
.checkbox_group-legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-xs);
  padding: 0;
  font-size: var(--text-size-base);
  font-weight: 500;
  color: var(--color-text);
}

.radio {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  align-items: flex-start;
  gap: var(--radio-gap);
  max-width: 100%;
  margin: 0;
  font-size: var(--radio-font-size);
  line-height: var(--radio-line-height);
  color: var(--color-text);
  user-select: none;
  vertical-align: middle;
}
.radio:is(label) {
  cursor: pointer;
}
.radio.color_primary .radio_input:checked + .radio_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.radio.color_primary .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio.color_primary.radio_button:has(.radio_input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.radio.color_success .radio_input:checked + .radio_box {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}
.radio.color_success .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio.color_success.radio_button:has(.radio_input:checked) {
  border-color: var(--color-success);
  background: var(--color-badge-success-bg);
}
.radio.color_danger .radio_input:checked + .radio_box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.radio.color_danger .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio.color_danger.radio_button:has(.radio_input:checked) {
  border-color: var(--color-danger);
  background: var(--color-badge-danger-bg);
}
.radio.color_warning .radio_input:checked + .radio_box {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-on-accent);
}
.radio.color_warning .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio.color_warning.radio_button:has(.radio_input:checked) {
  border-color: var(--color-warning);
  background: var(--color-badge-warning-bg);
}
.radio:has(.radio_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
}
.radio:has(.radio_input:disabled) .radio_box {
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.radio:has(.radio_input:disabled) .radio_input:checked + .radio_box {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  color: var(--color-on-accent-disabled);
}
.radio.color_primary:has(.radio_input:disabled) .radio_input:checked + .radio_box {
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  color: var(--color-on-accent-disabled);
}
.radio.color_success:has(.radio_input:disabled) .radio_input:checked + .radio_box {
  background-color: var(--color-success-disabled);
  border-color: var(--color-success-disabled);
  color: var(--color-on-success-disabled);
}
.radio.color_danger:has(.radio_input:disabled) .radio_input:checked + .radio_box {
  background-color: var(--color-danger-disabled);
  border-color: var(--color-danger-disabled);
  color: var(--color-on-danger-disabled);
}
.radio.color_warning:has(.radio_input:disabled) .radio_input:checked + .radio_box {
  background-color: var(--color-warning-disabled);
  border-color: var(--color-warning-disabled);
  color: var(--color-on-warning-disabled);
}
.radio.is-error .radio_box {
  border-color: var(--color-danger);
}
.radio.is-error .radio_input:focus-visible + .radio_box {
  outline-color: var(--color-danger);
}
.radio_control {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--radio-size);
  height: var(--radio-size);
  margin: 0;
  margin-top: var(--radio-control-offset);
  cursor: pointer;
}
.radio_control:has(.radio_input:disabled) {
  cursor: not-allowed;
}
.radio_input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.radio_input:focus-visible + .radio_box {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.radio_input:disabled {
  cursor: not-allowed;
}
.radio_input:checked + .radio_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio_box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--radio-size);
  height: var(--radio-size);
  pointer-events: none;
  background-color: var(--color-bg);
  border: var(--radio-border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-on-accent);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.radio_box::after {
  content: "";
  width: calc(var(--radio-size) * 0.45);
  height: calc(var(--radio-size) * 0.45);
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.radio_label {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: var(--radio-label-weight);
  cursor: pointer;
}
.radio_label:has(+ .radio_control .radio_input:disabled), .radio:has(.radio_input:disabled) > .radio_label {
  cursor: not-allowed;
}
.radio_hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--radio-hint-size);
  font-weight: 400;
  color: var(--color-text-muted);
}
.radio_content {
  flex: 0 1 auto;
  min-width: 0;
}
.radio_block {
  width: 100%;
  max-width: 100%;
}
.radio_block .radio_label,
.radio_block .radio_content {
  flex: 1 1 auto;
}
.radio_sm {
  --radio-size: var(--radio-size-sm);
  --radio-font-size: var(--radio-font-size-sm);
  --radio-gap: var(--radio-gap-sm);
}
.radio_lg {
  --radio-size: var(--radio-size-lg);
  --radio-font-size: var(--radio-font-size-lg);
  --radio-gap: var(--radio-gap-lg);
}
.radio_label-end .radio_control {
  flex-shrink: 0;
}
.radio_label-end.radio_block, .radio_group_block > .radio_label-end {
  width: 100%;
  max-width: 100%;
}
.radio_label-end.radio_block .radio_control, .radio_group_block > .radio_label-end .radio_control {
  margin-left: auto;
}
.radio_label-end.radio_block .radio_label,
.radio_label-end.radio_block .radio_content, .radio_group_block > .radio_label-end .radio_label,
.radio_group_block > .radio_label-end .radio_content {
  flex: 1 1 auto;
}
.radio_button {
  position: relative;
  align-items: center;
  padding: var(--radio-button-padding-y) var(--radio-button-padding-x);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.radio_button .radio_control {
  display: none;
}
.radio_button .radio_label {
  font-weight: 500;
}
.radio_button:hover:not(:has(.radio_input:disabled)) {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.radio_button:has(.radio_input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.radio_button:has(.radio_input:focus-visible) {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.radio_card {
  display: block;
  width: 100%;
  max-width: 100%;
}
.radio_card.color_primary .radio_input:checked + .radio_box {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.radio_card.color_primary .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio_card.color_primary:has(.radio_input:checked) .card {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.radio_card.color_success .radio_input:checked + .radio_box {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-on-accent);
}
.radio_card.color_success .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio_card.color_success:has(.radio_input:checked) .card {
  border-color: var(--color-success);
  background: var(--color-badge-success-bg);
}
.radio_card.color_danger .radio_input:checked + .radio_box {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}
.radio_card.color_danger .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio_card.color_danger:has(.radio_input:checked) .card {
  border-color: var(--color-danger);
  background: var(--color-badge-danger-bg);
}
.radio_card.color_warning .radio_input:checked + .radio_box {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-on-accent);
}
.radio_card.color_warning .radio_input:checked + .radio_box::after {
  opacity: 1;
  transform: scale(1);
}
.radio_card.color_warning:has(.radio_input:checked) .card {
  border-color: var(--color-warning);
  background: var(--color-badge-warning-bg);
}
.radio_card:has(.radio_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.radio_card .card {
  width: 100%;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.radio_card .radio_control {
  margin-top: 0;
}
.radio_card:hover:not(:has(.radio_input:disabled)) .card {
  border-color: var(--color-accent);
}
.radio_card:has(.radio_input:checked) .card {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.radio_card:has(.radio_input:focus-visible) .card {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.radio_card-clickable {
  cursor: pointer;
}
.radio_card-clickable .card {
  cursor: pointer;
}
.radio_card-clickable:has(.radio_input:disabled) .card {
  cursor: not-allowed;
}
.radio_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--radio-group-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  max-width: 100%;
}
.radio_group_horizontal {
  flex-flow: row wrap;
  align-items: center;
}
.radio_group_compact {
  --radio-group-gap: var(--space-sm);
}
.radio_group_block {
  align-items: stretch;
  width: 100%;
}
.radio_group_block > .radio {
  width: 100%;
  max-width: 100%;
}
.radio_group-legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-xs);
  padding: 0;
  font-size: var(--text-size-base);
  font-weight: 500;
  color: var(--color-text);
}

.switch {
  --switch-thumb-size: calc(var(--switch-height) - var(--switch-padding) * 2);
  --switch-thumb-travel: calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-padding) * 2);
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  align-items: center;
  gap: var(--switch-gap);
  max-width: 100%;
  margin: 0;
  font-size: var(--switch-font-size);
  line-height: var(--switch-line-height);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}
.switch.color_primary .switch_input:checked + .switch_track {
  background-color: var(--color-accent);
}
.switch.color_primary .switch_input:checked + .switch_track .switch_thumb {
  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
}
.switch.color_success .switch_input:checked + .switch_track {
  background-color: var(--color-success);
}
.switch.color_success .switch_input:checked + .switch_track .switch_thumb {
  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
}
.switch.color_danger .switch_input:checked + .switch_track {
  background-color: var(--color-danger);
}
.switch.color_danger .switch_input:checked + .switch_track .switch_thumb {
  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
}
.switch.color_warning .switch_input:checked + .switch_track {
  background-color: var(--color-warning);
}
.switch.color_warning .switch_input:checked + .switch_track .switch_thumb {
  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
}
.switch:has(.switch_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
}
.switch:has(.switch_input:disabled) .switch_track {
  background-color: var(--color-control-disabled);
}
.switch:has(.switch_input:disabled) .switch_input:checked + .switch_track {
  background-color: var(--color-accent-disabled);
}
.switch.color_primary:has(.switch_input:disabled) .switch_input:checked + .switch_track {
  background-color: var(--color-accent-disabled);
}
.switch.color_success:has(.switch_input:disabled) .switch_input:checked + .switch_track {
  background-color: var(--color-success-disabled);
}
.switch.color_danger:has(.switch_input:disabled) .switch_input:checked + .switch_track {
  background-color: var(--color-danger-disabled);
}
.switch.color_warning:has(.switch_input:disabled) .switch_input:checked + .switch_track {
  background-color: var(--color-warning-disabled);
}
.switch.is-error .switch_track {
  box-shadow: inset 0 0 0 1px var(--color-danger);
}
.switch.is-error .switch_input:focus-visible + .switch_track {
  outline-color: var(--color-danger);
}
.switch_control {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--switch-width);
  height: var(--switch-height);
}
.switch_input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch_input:focus-visible + .switch_track {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}
.switch_input:disabled {
  cursor: not-allowed;
}
.switch_input:checked + .switch_track {
  background-color: var(--color-accent);
}
.switch_input:checked + .switch_track .switch_thumb {
  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
}
.switch_track {
  position: relative;
  display: block;
  width: var(--switch-width);
  height: var(--switch-height);
  background-color: var(--color-border);
  border-radius: var(--switch-radius);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.switch_thumb {
  position: absolute;
  top: 50%;
  left: var(--switch-padding);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  background-color: var(--color-bg);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transform: translateY(-50%);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.switch_label {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: var(--switch-label-weight);
}
.switch_hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--switch-hint-size);
  font-weight: 400;
  color: var(--color-text-muted);
}
.switch_content {
  flex: 0 1 auto;
  min-width: 0;
}
.switch_block {
  width: 100%;
  max-width: 100%;
}
.switch_block .switch_label,
.switch_block .switch_content {
  flex: 1 1 auto;
}
.switch_sm {
  --switch-width: var(--switch-width-sm);
  --switch-height: var(--switch-height-sm);
  --switch-font-size: var(--switch-font-size-sm);
  --switch-gap: var(--switch-gap-sm);
}
.switch_lg {
  --switch-width: var(--switch-width-lg);
  --switch-height: var(--switch-height-lg);
  --switch-font-size: var(--switch-font-size-lg);
  --switch-gap: var(--switch-gap-lg);
}
.switch_label-end .switch_control {
  flex-shrink: 0;
}
.switch_label-end.switch_block, .switch_group_block > .switch_label-end {
  width: 100%;
  max-width: 100%;
}
.switch_label-end.switch_block .switch_control, .switch_group_block > .switch_label-end .switch_control {
  margin-left: auto;
}
.switch_label-end.switch_block .switch_label,
.switch_label-end.switch_block .switch_content, .switch_group_block > .switch_label-end .switch_label,
.switch_group_block > .switch_label-end .switch_content {
  flex: 1 1 auto;
}
.switch_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--switch-group-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  width: auto;
  max-width: 100%;
}
.switch_group_compact {
  --switch-group-gap: var(--space-sm);
}
.switch_group_block {
  align-items: stretch;
  width: 100%;
}
.switch_group_block > .switch {
  width: 100%;
  max-width: 100%;
}
.switch_group-legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-xs);
  padding: 0;
  font-size: var(--text-size-base);
  font-weight: 500;
  color: var(--color-text);
}

.slider {
  --slider-progress: 0%;
  --slider-thumb-color: var(--color-accent);
  display: block;
  width: var(--slider-width);
  max-width: 100%;
  font-size: var(--slider-font-size);
  line-height: var(--slider-line-height);
  color: var(--color-text);
}
.slider.color_primary {
  --slider-thumb-color: var(--color-accent);
}
.slider.color_primary .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider.color_primary .slider_input::-moz-range-progress {
  background-color: var(--color-accent);
}
.slider.color_primary .slider_input::-moz-range-thumb {
  border-color: var(--color-accent);
}
.slider.color_primary .slider_input:focus-visible::-webkit-slider-thumb {
  outline-color: var(--color-accent);
}
.slider.color_primary .slider_input:focus-visible::-moz-range-thumb {
  outline-color: var(--color-accent);
}
.slider.color_success {
  --slider-thumb-color: var(--color-success);
}
.slider.color_success .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-success) 0%, var(--color-success) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider.color_success .slider_input::-moz-range-progress {
  background-color: var(--color-success);
}
.slider.color_success .slider_input::-moz-range-thumb {
  border-color: var(--color-success);
}
.slider.color_success .slider_input:focus-visible::-webkit-slider-thumb {
  outline-color: var(--color-success);
}
.slider.color_success .slider_input:focus-visible::-moz-range-thumb {
  outline-color: var(--color-success);
}
.slider.color_danger {
  --slider-thumb-color: var(--color-danger);
}
.slider.color_danger .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-danger) 0%, var(--color-danger) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider.color_danger .slider_input::-moz-range-progress {
  background-color: var(--color-danger);
}
.slider.color_danger .slider_input::-moz-range-thumb {
  border-color: var(--color-danger);
}
.slider.color_danger .slider_input:focus-visible::-webkit-slider-thumb {
  outline-color: var(--color-danger);
}
.slider.color_danger .slider_input:focus-visible::-moz-range-thumb {
  outline-color: var(--color-danger);
}
.slider.color_warning {
  --slider-thumb-color: var(--color-warning);
}
.slider.color_warning .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-warning) 0%, var(--color-warning) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider.color_warning .slider_input::-moz-range-progress {
  background-color: var(--color-warning);
}
.slider.color_warning .slider_input::-moz-range-thumb {
  border-color: var(--color-warning);
}
.slider.color_warning .slider_input:focus-visible::-webkit-slider-thumb {
  outline-color: var(--color-warning);
}
.slider.color_warning .slider_input:focus-visible::-moz-range-thumb {
  outline-color: var(--color-warning);
}
.slider:has(.slider_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
  --slider-thumb-color: var(--color-border-disabled);
}
.slider:has(.slider_input:disabled) .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-border-disabled) 0%, var(--color-border-disabled) var(--slider-progress, 0%), var(--color-surface-disabled) var(--slider-progress, 0%), var(--color-surface-disabled) 100%);
}
.slider:has(.slider_input:disabled) .slider_input::-moz-range-progress {
  background-color: var(--color-border-disabled);
}
.slider:has(.slider_input:disabled) .slider_input::-moz-range-track {
  background-color: var(--color-surface-disabled);
}
.slider:has(.slider_input:disabled) .slider_input::-webkit-slider-thumb, .slider:has(.slider_input:disabled) .slider_input::-moz-range-thumb {
  border-color: var(--color-border-disabled);
  background-color: var(--color-surface-disabled);
}
.slider:has(.slider_input:disabled) .slider_step {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.slider.is-error {
  --slider-thumb-color: var(--color-danger);
}
.slider.is-error .slider_input::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-danger) 0%, var(--color-danger) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider.is-error .slider_input::-moz-range-progress {
  background-color: var(--color-danger);
}
.slider_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--slider-gap);
  margin-bottom: var(--space-xs);
}
.slider_label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--slider-label-weight);
}
.slider_value {
  flex-shrink: 0;
  font-size: var(--slider-value-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.slider_hint {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--slider-hint-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.slider_control {
  display: flex;
  align-items: center;
  gap: var(--slider-step-gap);
}
.slider_step {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--slider-step-size);
  height: var(--slider-step-size);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.slider_step:hover:not(:disabled) {
  border-color: var(--slider-thumb-color, var(--color-accent));
  color: var(--slider-thumb-color, var(--color-accent));
  background-color: var(--color-surface-raised);
}
.slider_step:focus-visible {
  outline: var(--focus-outline-width) solid var(--slider-thumb-color, var(--color-accent));
  outline-offset: var(--focus-outline-offset);
}
.slider_step:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.slider_step-icon {
  display: block;
  width: var(--slider-step-icon-size);
  height: var(--slider-step-icon-size);
  pointer-events: none;
}
.slider_input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--slider-thumb-size);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.slider_input:focus {
  outline: none;
}
.slider_input:focus-visible::-webkit-slider-thumb {
  outline: var(--focus-outline-width) solid var(--slider-thumb-color, var(--color-accent));
  outline-offset: var(--focus-outline-offset);
}
.slider_input:focus-visible::-moz-range-thumb {
  outline: var(--focus-outline-width) solid var(--slider-thumb-color, var(--color-accent));
  outline-offset: var(--focus-outline-offset);
}
.slider_input::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border-radius: var(--slider-radius);
  background: linear-gradient(to right, var(--slider-thumb-color, var(--color-accent)) 0%, var(--slider-thumb-color, var(--color-accent)) var(--slider-progress, 0%), var(--color-border) var(--slider-progress, 0%), var(--color-border) 100%);
}
.slider_input::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background-color: var(--slider-thumb-bg, var(--color-bg));
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-color, var(--color-accent));
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.slider_input::-moz-range-track {
  height: var(--slider-track-height);
  border-radius: var(--slider-radius);
  background-color: var(--color-border);
}
.slider_input::-moz-range-progress {
  height: var(--slider-track-height);
  border-radius: var(--slider-radius);
  background-color: var(--slider-thumb-color, var(--color-accent));
}
.slider_input::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background-color: var(--slider-thumb-bg, var(--color-bg));
  border: var(--slider-thumb-border-width) solid var(--slider-thumb-color, var(--color-accent));
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.slider_input:disabled {
  cursor: not-allowed;
}
.slider_ticks {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
  padding: 0 calc(var(--slider-thumb-size) / 2);
  font-size: var(--slider-tick-size);
  line-height: 1.2;
  color: var(--color-text-muted);
  user-select: none;
}
.slider_tick {
  flex: 0 0 auto;
  text-align: center;
}
.slider_fit {
  max-width: var(--slider-max-width);
}
.slider_block {
  width: 100%;
}
.slider_sm {
  --slider-track-height: var(--slider-track-height-sm);
  --slider-thumb-size: var(--slider-thumb-size-sm);
  --slider-font-size: var(--slider-font-size-sm);
  --slider-value-size: var(--slider-value-size-sm);
}
.slider_lg {
  --slider-track-height: var(--slider-track-height-lg);
  --slider-thumb-size: var(--slider-thumb-size-lg);
  --slider-font-size: var(--slider-font-size-lg);
  --slider-value-size: var(--slider-value-size-lg);
  --slider-step-size: var(--slider-step-size-lg);
}
@media (max-width: 768px) {
  .slider_stepper .slider_step {
    display: inline-flex;
  }
}
.slider_stepper.slider_stepper_always .slider_step {
  display: inline-flex;
}
.slider_stepper.slider_sm {
  --slider-step-size: var(--slider-step-size-sm);
}

.rate {
  --rate-color-filled: var(--color-warning);
  --rate-color-empty: var(--color-border-subtle);
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: var(--rate-font-size);
  line-height: var(--rate-line-height);
  color: var(--color-text);
}
.rate.color_primary {
  --rate-color-filled: var(--color-accent);
}
.rate.color_success {
  --rate-color-filled: var(--color-success);
}
.rate.color_danger {
  --rate-color-filled: var(--color-danger);
}
.rate.color_warning {
  --rate-color-filled: var(--color-warning);
}
.rate:has(.rate_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
  --rate-color-empty: var(--color-border-disabled);
  --rate-color-filled: var(--color-text-disabled);
}
.rate.is-error .rate_stars {
  outline: 1px solid var(--color-danger);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.rate_legend {
  display: block;
  margin-bottom: var(--rate-gap);
  padding: 0;
  font-size: inherit;
  font-weight: var(--rate-label-weight);
  line-height: inherit;
  color: inherit;
}
.rate_control {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rate-gap);
}
.rate_stars {
  display: inline-flex;
  align-items: center;
  gap: var(--rate-star-gap);
}
.rate_star {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}
.rate_star:has(.rate_input:disabled) {
  cursor: not-allowed;
}
.rate_star:hover .rate_star-icon {
  transform: scale(1.08);
}
.rate_input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rate_input:focus-visible + .rate_star-graphic {
  outline: var(--focus-outline-width) solid var(--rate-color-filled);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}
.rate_star-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rate_star-graphic {
  position: relative;
  display: block;
  width: var(--rate-star-size);
  height: var(--rate-star-size);
}
.rate_star-icon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--rate-color-empty);
  pointer-events: none;
  transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}
.rate_star-icon-filled {
  position: absolute;
  inset: 0;
  color: var(--rate-color-filled);
  opacity: 0;
}
.rate_star-icon-half {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  opacity: 0;
}
.rate_star-icon-half .rate_star-icon {
  width: var(--rate-star-size);
  height: var(--rate-star-size);
  color: var(--rate-color-filled);
}
.rate_value {
  flex-shrink: 0;
  font-size: var(--rate-value-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.rate_hint {
  display: block;
  width: 100%;
  margin-top: var(--space-xs);
  font-size: var(--rate-hint-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.rate_clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--rate-clear-size);
  height: var(--rate-clear-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.rate_clear:hover {
  color: var(--color-text);
  background-color: var(--color-surface-raised);
}
.rate_clear:focus-visible {
  outline: var(--focus-outline-width) solid var(--rate-color-filled);
  outline-offset: var(--focus-outline-offset);
}
.rate_clear-icon {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  pointer-events: none;
}
.rate_clearable:has(.rate_input:checked) .rate_clear, .rate_clearable.is-rated .rate_clear {
  display: inline-flex;
}
.rate_star-half {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 50%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rate_star-half:focus-visible {
  outline: var(--focus-outline-width) solid var(--rate-color-filled);
  outline-offset: var(--focus-outline-offset);
}
.rate_star-half-left {
  left: 0;
}
.rate_star-half-right {
  right: 0;
}
.rate_allow-half .rate_star-half {
  display: block;
}
.rate.is-readonly {
  pointer-events: none;
}
.rate.is-readonly .rate_stars {
  pointer-events: none;
}
.rate_star-readonly {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.rate_star-readonly.is-filled .rate_star-icon-filled, .rate_star-readonly.is-half .rate_star-icon-half {
  opacity: 1;
}
.rate_sm {
  --rate-star-size: var(--rate-star-size-sm);
  --rate-font-size: var(--rate-font-size-sm);
  --rate-value-size: var(--rate-value-size-sm);
  --rate-clear-size: var(--rate-clear-size-sm);
}
.rate_lg {
  --rate-star-size: var(--rate-star-size-lg);
  --rate-font-size: var(--rate-font-size-lg);
  --rate-value-size: var(--rate-value-size-lg);
  --rate-clear-size: var(--rate-clear-size-lg);
}
.rate_block {
  display: block;
  width: 100%;
}

.rate_stars:has(.rate_star:nth-child(1) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+1) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(1) .rate_input-half:checked) .rate_star:nth-child(-n+0) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(1) .rate_input-half:checked) .rate_star:nth-child(1) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(1):hover) .rate_star:nth-child(-n+1) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(1) .rate_star-half-left:hover) .rate_star:nth-child(-n+0) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(1) .rate_star-half-left:hover) .rate_star:nth-child(1) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(2) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+2) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(2) .rate_input-half:checked) .rate_star:nth-child(-n+1) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(2) .rate_input-half:checked) .rate_star:nth-child(2) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(2):hover) .rate_star:nth-child(-n+2) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(2) .rate_star-half-left:hover) .rate_star:nth-child(-n+1) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(2) .rate_star-half-left:hover) .rate_star:nth-child(2) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(3) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+3) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(3) .rate_input-half:checked) .rate_star:nth-child(-n+2) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(3) .rate_input-half:checked) .rate_star:nth-child(3) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(3):hover) .rate_star:nth-child(-n+3) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(3) .rate_star-half-left:hover) .rate_star:nth-child(-n+2) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(3) .rate_star-half-left:hover) .rate_star:nth-child(3) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(4) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+4) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(4) .rate_input-half:checked) .rate_star:nth-child(-n+3) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(4) .rate_input-half:checked) .rate_star:nth-child(4) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(4):hover) .rate_star:nth-child(-n+4) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(4) .rate_star-half-left:hover) .rate_star:nth-child(-n+3) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(4) .rate_star-half-left:hover) .rate_star:nth-child(4) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(5) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+5) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(5) .rate_input-half:checked) .rate_star:nth-child(-n+4) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(5) .rate_input-half:checked) .rate_star:nth-child(5) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(5):hover) .rate_star:nth-child(-n+5) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(5) .rate_star-half-left:hover) .rate_star:nth-child(-n+4) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(5) .rate_star-half-left:hover) .rate_star:nth-child(5) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(6) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+6) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(6) .rate_input-half:checked) .rate_star:nth-child(-n+5) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(6) .rate_input-half:checked) .rate_star:nth-child(6) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(6):hover) .rate_star:nth-child(-n+6) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(6) .rate_star-half-left:hover) .rate_star:nth-child(-n+5) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(6) .rate_star-half-left:hover) .rate_star:nth-child(6) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(7) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+7) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(7) .rate_input-half:checked) .rate_star:nth-child(-n+6) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(7) .rate_input-half:checked) .rate_star:nth-child(7) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(7):hover) .rate_star:nth-child(-n+7) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(7) .rate_star-half-left:hover) .rate_star:nth-child(-n+6) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(7) .rate_star-half-left:hover) .rate_star:nth-child(7) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(8) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+8) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(8) .rate_input-half:checked) .rate_star:nth-child(-n+7) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(8) .rate_input-half:checked) .rate_star:nth-child(8) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(8):hover) .rate_star:nth-child(-n+8) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(8) .rate_star-half-left:hover) .rate_star:nth-child(-n+7) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(8) .rate_star-half-left:hover) .rate_star:nth-child(8) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(9) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+9) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(9) .rate_input-half:checked) .rate_star:nth-child(-n+8) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(9) .rate_input-half:checked) .rate_star:nth-child(9) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(9):hover) .rate_star:nth-child(-n+9) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(9) .rate_star-half-left:hover) .rate_star:nth-child(-n+8) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(9) .rate_star-half-left:hover) .rate_star:nth-child(9) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(10) .rate_input:checked:not(.rate_input-half)) .rate_star:nth-child(-n+10) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(10) .rate_input-half:checked) .rate_star:nth-child(-n+9) .rate_star-icon-filled {
  opacity: 1;
}

.rate_stars:has(.rate_star:nth-child(10) .rate_input-half:checked) .rate_star:nth-child(10) .rate_star-icon-half {
  opacity: 1;
}

.rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(10):hover) .rate_star:nth-child(-n+10) .rate_star-icon-filled {
  opacity: 1;
}

.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(10) .rate_star-half-left:hover) .rate_star:nth-child(-n+9) .rate_star-icon-filled,
.rate_allow-half .rate_stars:not(:has(.rate_input:disabled)):not(.is-readonly):has(.rate_star:nth-child(10) .rate_star-half-left:hover) .rate_star:nth-child(10) .rate_star-icon-half {
  opacity: 1;
}

.form {
  width: 100%;
}
.form_vertical .form_field + .form_field {
  margin-top: var(--form-field-gap);
}
.form_vertical .grid .form_field + .form_field {
  margin-top: 0;
}
.form_horizontal .form_field {
  display: grid;
  grid-template-columns: var(--form-label-width) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs) var(--space-md);
  max-width: none;
}
.form_horizontal .form_field + .form_field {
  margin-top: var(--form-field-gap);
}
.form_horizontal .form_field-label {
  margin-bottom: 0;
  padding-top: 0.5rem;
  text-align: right;
}
.form_horizontal .form_field-control {
  min-width: 0;
}
.form_horizontal .form_field-control,
.form_horizontal .input,
.form_horizontal .input_group,
.form_horizontal .textarea,
.form_horizontal .textarea_wrap,
.form_horizontal select.input {
  grid-column: 2;
}
.form_horizontal .form_field-hint,
.form_horizontal .form_field-error {
  grid-column: 2;
  margin-top: 0;
}
.form_horizontal.form_label-align-start .form_field-label {
  text-align: left;
}
.form_horizontal.form_label-width-sm {
  --form-label-width: var(--form-label-width-sm);
}
.form_horizontal.form_label-width-lg {
  --form-label-width: var(--form-label-width-lg);
}
.form_inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md) var(--space-lg);
}
.form_inline .form_field {
  flex: 0 1 auto;
  width: auto;
  margin-top: 0;
  max-width: none;
}
.form_inline .form_field + .form_field {
  margin-top: 0;
}
.form_inline .input,
.form_inline .input_group,
.form_inline select.input {
  width: auto;
  min-width: var(--form-inline-field-min-width);
}
.form_fit {
  width: 100%;
  max-width: var(--input-max-width);
}
.form_fit .form_field,
.form_fit .input,
.form_fit .input_group,
.form_fit .textarea,
.form_fit select.input {
  max-width: 100%;
}
.form_fit.form_horizontal {
  max-width: none;
}
.form_fit.form_horizontal .form_field,
.form_fit.form_horizontal .input,
.form_fit.form_horizontal .input_group,
.form_fit.form_horizontal .textarea,
.form_fit.form_horizontal select.input {
  max-width: var(--input-max-width);
}
.form_fit.form_horizontal .form_field {
  grid-template-columns: var(--form-label-width) minmax(0, var(--input-max-width));
}
.form_compact {
  --form-field-gap: var(--space-md);
}
.form_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--form-actions-gap);
  margin-top: var(--form-field-gap);
}
.form_horizontal .form_actions {
  padding-left: calc(var(--form-label-width) + var(--space-md));
}
.form_inline .form_actions {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.card.card_borderless {
  border-color: transparent;
}
.card.card_shadow {
  box-shadow: var(--card-shadow-md);
}
.card.card_elevated {
  border-color: transparent;
  box-shadow: var(--card-shadow-md);
}
.card.card_ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.card.card_compact {
  --card-padding: var(--card-padding-sm);
}
.card.card_sm {
  --card-padding: var(--card-padding-sm);
}
.card.card_sm .card_title {
  font-size: var(--text-size-base);
}
.card.card_lg {
  --card-padding: var(--card-padding-lg);
}
.card.card_lg .card_title {
  font-size: var(--text-size-xl);
}
.card.card_hover:hover {
  border-color: var(--color-accent);
  box-shadow: var(--card-shadow-md);
  transform: translateY(var(--card-hover-translate));
}
.card.card_accent {
  border-left-width: var(--card-accent-width);
}
.card.card_accent.color_primary {
  border-left-color: var(--color-accent);
}
.card.card_accent.color_success {
  border-left-color: var(--color-success);
}
.card.card_accent.color_warning {
  border-left-color: var(--color-warning);
}
.card.card_accent.color_danger {
  border-left-color: var(--color-danger);
}
.card.card_accent.color_info {
  border-left-color: var(--color-accent);
}
.card.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.card_inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.card_webzine {
  --card-media-ratio: var(--card-webzine-media-ratio);
}
.card_webzine .card_title {
  font-size: var(--text-size-xl);
  line-height: 1.35;
}
.card_webzine .card_body {
  font-size: var(--text-size-lg);
}
.card_news {
  --card-padding: var(--card-padding-sm);
  --card-horizontal-media-width: var(--card-news-media-width);
}
.card_news .card_title {
  font-size: var(--text-size-base);
  line-height: 1.4;
}
.card_news .card_subtitle {
  font-size: var(--text-size-xs);
}
.card_news .card_body {
  font-size: var(--text-size-sm);
}
.card_product {
  --card-padding: var(--card-padding-sm);
  --card-horizontal-media-width: var(--card-product-media-width);
}
.card_product .card_title {
  font-size: var(--text-size-base);
  line-height: 1.4;
}
.card_product .card_body {
  font-size: var(--text-size-sm);
}
.card_horizontal, .card.card_media-left, .card.card_media-right {
  flex-direction: row;
  align-items: stretch;
}
.card_horizontal > .card_media,
.card_horizontal > .card_media-placeholder, .card.card_media-left > .card_media,
.card.card_media-left > .card_media-placeholder, .card.card_media-right > .card_media,
.card.card_media-right > .card_media-placeholder {
  width: var(--card-horizontal-media-width);
  min-width: var(--card-horizontal-media-width);
  aspect-ratio: auto;
  align-self: stretch;
  flex-shrink: 0;
  border-right: var(--card-divider-width) solid var(--card-divider-color);
}
.card_horizontal.card_media-right > .card_media,
.card_horizontal.card_media-right > .card_media-placeholder, .card.card_media-left.card_media-right > .card_media,
.card.card_media-left.card_media-right > .card_media-placeholder, .card.card_media-right.card_media-right > .card_media,
.card.card_media-right.card_media-right > .card_media-placeholder {
  border-right: none;
  border-left: var(--card-divider-width) solid var(--card-divider-color);
}
.card_horizontal > .card_inner, .card.card_media-left > .card_inner, .card.card_media-right > .card_inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.card_horizontal:not(:has(.card_inner)), .card.card_media-left:not(:has(.card_inner)), .card.card_media-right:not(:has(.card_inner)) {
  flex-wrap: wrap;
}
.card_horizontal:not(:has(.card_inner)) > .card_header,
.card_horizontal:not(:has(.card_inner)) > .card_body,
.card_horizontal:not(:has(.card_inner)) > .card_footer, .card.card_media-left:not(:has(.card_inner)) > .card_header,
.card.card_media-left:not(:has(.card_inner)) > .card_body,
.card.card_media-left:not(:has(.card_inner)) > .card_footer, .card.card_media-right:not(:has(.card_inner)) > .card_header,
.card.card_media-right:not(:has(.card_inner)) > .card_body,
.card.card_media-right:not(:has(.card_inner)) > .card_footer {
  flex-basis: 100%;
  max-width: calc(100% - var(--card-horizontal-media-width));
}
.card_horizontal .card_header, .card.card_media-left .card_header, .card.card_media-right .card_header {
  padding: var(--card-padding) var(--card-padding) 0;
  background: transparent;
  border-bottom: none;
}
.card_horizontal .card_body, .card.card_media-left .card_body, .card.card_media-right .card_body {
  flex: 1 1 auto;
  padding: var(--card-padding);
}
.card_horizontal .card_header + .card_body, .card.card_media-left .card_header + .card_body, .card.card_media-right .card_header + .card_body {
  padding-top: var(--card-title-gap);
}
.card_horizontal .card_body:has(+ .card_footer), .card.card_media-left .card_body:has(+ .card_footer), .card.card_media-right .card_body:has(+ .card_footer) {
  padding-bottom: var(--card-title-gap);
}
.card_horizontal .card_footer, .card.card_media-left .card_footer, .card.card_media-right .card_footer {
  padding: var(--space-md) var(--card-padding) var(--card-padding);
  margin-top: auto;
  background: transparent;
  border-top: var(--card-divider-width) solid var(--card-divider-color);
}
@media (max-width: 768px) {
  .card_horizontal, .card.card_media-left, .card.card_media-right {
    flex-direction: column;
  }
  .card_horizontal.card_media-right, .card.card_media-left.card_media-right, .card.card_media-right.card_media-right {
    flex-direction: column-reverse;
  }
  .card_horizontal > .card_media,
  .card_horizontal > .card_media-placeholder, .card.card_media-left > .card_media,
  .card.card_media-left > .card_media-placeholder, .card.card_media-right > .card_media,
  .card.card_media-right > .card_media-placeholder {
    width: 100%;
    min-width: 0;
    aspect-ratio: var(--card-media-ratio);
    border-left: none;
    border-right: none;
    border-bottom: var(--card-divider-width) solid var(--card-divider-color);
  }
  .card_horizontal:not(:has(.card_inner)) > .card_header,
  .card_horizontal:not(:has(.card_inner)) > .card_body,
  .card_horizontal:not(:has(.card_inner)) > .card_footer, .card.card_media-left:not(:has(.card_inner)) > .card_header,
  .card.card_media-left:not(:has(.card_inner)) > .card_body,
  .card.card_media-left:not(:has(.card_inner)) > .card_footer, .card.card_media-right:not(:has(.card_inner)) > .card_header,
  .card.card_media-right:not(:has(.card_inner)) > .card_body,
  .card.card_media-right:not(:has(.card_inner)) > .card_footer {
    flex-basis: auto;
    max-width: none;
  }
}
.card.card_media-no-divider > .card_media,
.card.card_media-no-divider > .card_media-placeholder {
  border: 0;
}
.card_news-list, .card_product-list {
  display: grid;
  gap: var(--space-md);
  width: 100%;
}
.card_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background: var(--card-header-bg);
  border-bottom: var(--card-divider-width) solid var(--card-divider-color);
}
.card_header:last-child {
  border-bottom: none;
}
.card_header-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}
.card_header-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.card_title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  margin: 0;
  color: var(--color-text);
}
.card_title:not(:last-child) {
  margin-bottom: var(--card-title-gap);
}
.card_subtitle {
  font-size: var(--card-subtitle-size);
  color: var(--color-text-muted);
  margin: calc(var(--card-title-gap) * -0.5) 0 0;
}
.card_extra {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.card_body {
  padding: var(--card-padding);
  color: var(--card-body-color);
  font-size: var(--text-size-base);
  line-height: var(--card-body-line-height);
  flex: 1 1 auto;
}
.card_body > :last-child {
  margin-bottom: 0;
}
.card_body-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card_body-clamp-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.card_body-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.card_body-clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.card_meta {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
}
.card_footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--card-padding);
  border-top: var(--card-divider-width) solid var(--card-divider-color);
  background: var(--card-footer-bg);
  margin-top: auto;
}
.card_footer-start {
  justify-content: flex-start;
}
.card_footer-center {
  justify-content: center;
}
.card_footer-end {
  justify-content: flex-end;
}
.card_footer-between {
  justify-content: space-between;
}
.card_footer-flush {
  padding: 0;
}
.card_footer-full > * {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.card_footer-ratio {
  display: grid;
  width: 100%;
}
.card_footer-ratio > * {
  min-width: 0;
}
.card_footer-ratio-1-1 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.card_footer-ratio-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.card_footer-ratio-2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.card_media {
  display: block;
  aspect-ratio: var(--card-media-ratio);
  background: var(--color-surface-raised);
  object-fit: cover;
  width: 100%;
  flex-shrink: 0;
}
.card_media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-bg) 100%);
}
.card_media-placeholder .icon,
.card_media-placeholder svg {
  width: 2rem;
  height: 2rem;
  opacity: 0.45;
}
.card_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  width: var(--card-icon-size);
  height: var(--card-icon-size);
}
.card_icon .icon,
.card_icon svg {
  width: 55%;
  height: 55%;
}
.card_icon.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.card_icon.color_warning {
  color: var(--color-warning-text);
  background: var(--color-badge-warning-bg);
}
.card_icon.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.card_avatar {
  margin-bottom: var(--space-sm);
}
.card_stat {
  margin-top: var(--space-sm);
}
.card_actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.card_price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-size-lg);
  font-weight: 700;
}
.card_price-original {
  color: var(--color-text-muted);
  font-size: var(--text-size-xs);
  font-weight: 400;
  text-decoration: line-through;
}
.card_deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
  width: 100%;
}
.card_deck-2 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card_deck-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .card_deck-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .card_deck-3 {
    grid-template-columns: 1fr;
  }
}

a.card,
button.card,
.card_clickable {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
a.card:focus-visible,
button.card:focus-visible,
.card_clickable:focus-visible {
  outline-color: var(--color-accent);
}
a.card:hover:not(.is-disabled),
button.card:hover:not(.is-disabled),
.card_clickable:hover:not(.is-disabled) {
  border-color: var(--color-accent);
  box-shadow: var(--card-shadow);
}

button.card {
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  appearance: none;
}

.table_wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.table_wrap:has(.table):not(.table_wrap-api):not(.table_wrap-scroll) {
  border: none;
  overflow-x: visible;
}
.table_wrap:has(.table):not(.table_wrap-api):not(.table_wrap-scroll) .table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table_wrap.table_wrap-scroll {
  overflow: auto;
  max-height: var(--table-scroll-max-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  -webkit-overflow-scrolling: touch;
}
.table_wrap.table_wrap-scroll .table {
  border: none;
  border-radius: 0;
  overflow: visible;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  text-align: left;
  background: var(--color-surface);
}
.table th,
.table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
.table th {
  font-weight: var(--table-header-font-weight);
  color: var(--color-text);
  background: var(--color-surface-raised);
  white-space: nowrap;
}
.table td {
  color: var(--color-text-muted);
}
.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: none;
}
.table_striped tbody tr:nth-child(even) {
  background: var(--color-surface-raised);
}
.table_bordered th,
.table_bordered td {
  border: 1px solid var(--color-border-subtle);
}
.table_bordered tbody tr:last-child th,
.table_bordered tbody tr:last-child td {
  border-bottom: 1px solid var(--color-border-subtle);
}
.table_compact:not(.table_columns) th,
.table_compact:not(.table_columns) td {
  padding: var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact);
}
.table_compact.table_columns th:nth-child(1),
.table_compact.table_columns td:nth-child(1) {
  padding: var(--table-col-1-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(2),
.table_compact.table_columns td:nth-child(2) {
  padding: var(--table-col-2-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(3),
.table_compact.table_columns td:nth-child(3) {
  padding: var(--table-col-3-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(4),
.table_compact.table_columns td:nth-child(4) {
  padding: var(--table-col-4-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(5),
.table_compact.table_columns td:nth-child(5) {
  padding: var(--table-col-5-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(6),
.table_compact.table_columns td:nth-child(6) {
  padding: var(--table-col-6-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(7),
.table_compact.table_columns td:nth-child(7) {
  padding: var(--table-col-7-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(8),
.table_compact.table_columns td:nth-child(8) {
  padding: var(--table-col-8-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(9),
.table_compact.table_columns td:nth-child(9) {
  padding: var(--table-col-9-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(10),
.table_compact.table_columns td:nth-child(10) {
  padding: var(--table-col-10-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(11),
.table_compact.table_columns td:nth-child(11) {
  padding: var(--table-col-11-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_compact.table_columns th:nth-child(12),
.table_compact.table_columns td:nth-child(12) {
  padding: var(--table-col-12-padding, var(--table-cell-padding-y-compact) var(--table-cell-padding-x-compact));
}
.table_hover tbody tr {
  transition: background-color var(--transition-fast);
}
.table_hover tbody tr:hover {
  background: var(--color-accent-muted);
}
.table_columns {
  table-layout: fixed;
}
.table_columns th:nth-child(1),
.table_columns td:nth-child(1) {
  padding: var(--table-col-1-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-1-white-space, inherit);
}
.table_columns th:nth-child(2),
.table_columns td:nth-child(2) {
  padding: var(--table-col-2-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-2-white-space, inherit);
}
.table_columns th:nth-child(3),
.table_columns td:nth-child(3) {
  padding: var(--table-col-3-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-3-white-space, inherit);
}
.table_columns th:nth-child(4),
.table_columns td:nth-child(4) {
  padding: var(--table-col-4-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-4-white-space, inherit);
}
.table_columns th:nth-child(5),
.table_columns td:nth-child(5) {
  padding: var(--table-col-5-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-5-white-space, inherit);
}
.table_columns th:nth-child(6),
.table_columns td:nth-child(6) {
  padding: var(--table-col-6-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-6-white-space, inherit);
}
.table_columns th:nth-child(7),
.table_columns td:nth-child(7) {
  padding: var(--table-col-7-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-7-white-space, inherit);
}
.table_columns th:nth-child(8),
.table_columns td:nth-child(8) {
  padding: var(--table-col-8-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-8-white-space, inherit);
}
.table_columns th:nth-child(9),
.table_columns td:nth-child(9) {
  padding: var(--table-col-9-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-9-white-space, inherit);
}
.table_columns th:nth-child(10),
.table_columns td:nth-child(10) {
  padding: var(--table-col-10-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-10-white-space, inherit);
}
.table_columns th:nth-child(11),
.table_columns td:nth-child(11) {
  padding: var(--table-col-11-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-11-white-space, inherit);
}
.table_columns th:nth-child(12),
.table_columns td:nth-child(12) {
  padding: var(--table-col-12-padding, var(--table-cell-padding-y) var(--table-cell-padding-x));
  white-space: var(--table-col-12-white-space, inherit);
}
.table_col-nowrap {
  white-space: nowrap;
}
.table_sticky-top thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-raised);
}
.table_sticky-left th,
.table_sticky-left td {
  background-clip: padding-box;
}
.table_sticky-cols-1 th:nth-child(1),
.table_sticky-cols-1 td:nth-child(1) {
  position: sticky;
  left: var(--table-sticky-left-1, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-1 thead th:nth-child(1) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-1 th:nth-child(1),
.table_sticky-cols-1 td:nth-child(1) {
  box-shadow: var(--table-sticky-shadow);
}
.table_sticky-cols-2 th:nth-child(1),
.table_sticky-cols-2 td:nth-child(1) {
  position: sticky;
  left: var(--table-sticky-left-1, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-2 thead th:nth-child(1) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-2 th:nth-child(2),
.table_sticky-cols-2 td:nth-child(2) {
  position: sticky;
  left: var(--table-sticky-left-2, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-2 thead th:nth-child(2) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-2 th:nth-child(2),
.table_sticky-cols-2 td:nth-child(2) {
  box-shadow: var(--table-sticky-shadow);
}
.table_sticky-cols-3 th:nth-child(1),
.table_sticky-cols-3 td:nth-child(1) {
  position: sticky;
  left: var(--table-sticky-left-1, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-3 thead th:nth-child(1) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-3 th:nth-child(2),
.table_sticky-cols-3 td:nth-child(2) {
  position: sticky;
  left: var(--table-sticky-left-2, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-3 thead th:nth-child(2) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-3 th:nth-child(3),
.table_sticky-cols-3 td:nth-child(3) {
  position: sticky;
  left: var(--table-sticky-left-3, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-3 thead th:nth-child(3) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-3 th:nth-child(3),
.table_sticky-cols-3 td:nth-child(3) {
  box-shadow: var(--table-sticky-shadow);
}
.table_sticky-cols-4 th:nth-child(1),
.table_sticky-cols-4 td:nth-child(1) {
  position: sticky;
  left: var(--table-sticky-left-1, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-4 thead th:nth-child(1) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-4 th:nth-child(2),
.table_sticky-cols-4 td:nth-child(2) {
  position: sticky;
  left: var(--table-sticky-left-2, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-4 thead th:nth-child(2) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-4 th:nth-child(3),
.table_sticky-cols-4 td:nth-child(3) {
  position: sticky;
  left: var(--table-sticky-left-3, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-4 thead th:nth-child(3) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-4 th:nth-child(4),
.table_sticky-cols-4 td:nth-child(4) {
  position: sticky;
  left: var(--table-sticky-left-4, 0);
  z-index: 1;
  background: var(--color-surface);
}
.table_sticky-cols-4 thead th:nth-child(4) {
  z-index: 3;
  background: var(--color-surface-raised);
}
.table_sticky-cols-4 th:nth-child(4),
.table_sticky-cols-4 td:nth-child(4) {
  box-shadow: var(--table-sticky-shadow);
}
.table_striped.table_sticky-left.table_sticky-cols-1 tbody tr:nth-child(even) th:nth-child(1),
.table_striped.table_sticky-left.table_sticky-cols-1 tbody tr:nth-child(even) td:nth-child(1) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-2 tbody tr:nth-child(even) th:nth-child(1),
.table_striped.table_sticky-left.table_sticky-cols-2 tbody tr:nth-child(even) td:nth-child(1) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-2 tbody tr:nth-child(even) th:nth-child(2),
.table_striped.table_sticky-left.table_sticky-cols-2 tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) th:nth-child(1),
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) td:nth-child(1) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) th:nth-child(2),
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) th:nth-child(3),
.table_striped.table_sticky-left.table_sticky-cols-3 tbody tr:nth-child(even) td:nth-child(3) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) th:nth-child(1),
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) td:nth-child(1) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) th:nth-child(2),
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) th:nth-child(3),
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) td:nth-child(3) {
  background: var(--color-surface-raised);
}
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) th:nth-child(4),
.table_striped.table_sticky-left.table_sticky-cols-4 tbody tr:nth-child(even) td:nth-child(4) {
  background: var(--color-surface-raised);
}
.table_hover.table_sticky-left.table_sticky-cols-1 tbody tr:hover th:nth-child(1),
.table_hover.table_sticky-left.table_sticky-cols-1 tbody tr:hover td:nth-child(1) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-2 tbody tr:hover th:nth-child(1),
.table_hover.table_sticky-left.table_sticky-cols-2 tbody tr:hover td:nth-child(1) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-2 tbody tr:hover th:nth-child(2),
.table_hover.table_sticky-left.table_sticky-cols-2 tbody tr:hover td:nth-child(2) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover th:nth-child(1),
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover td:nth-child(1) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover th:nth-child(2),
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover td:nth-child(2) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover th:nth-child(3),
.table_hover.table_sticky-left.table_sticky-cols-3 tbody tr:hover td:nth-child(3) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover th:nth-child(1),
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover td:nth-child(1) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover th:nth-child(2),
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover td:nth-child(2) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover th:nth-child(3),
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover td:nth-child(3) {
  background: var(--color-accent-muted);
}
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover th:nth-child(4),
.table_hover.table_sticky-left.table_sticky-cols-4 tbody tr:hover td:nth-child(4) {
  background: var(--color-accent-muted);
}

.list {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.list_item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--list-item-padding-y) var(--list-item-padding-x);
  border-radius: var(--radius-md);
}
.list_item:has(.list_link) {
  display: block;
  padding: 0;
}
.list_item:has(.card) {
  display: block;
  padding: 0;
}
.list_link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  margin: 0;
  padding: var(--list-item-padding-y) var(--list-item-padding-x);
  border: none;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.list_link:focus-visible {
  outline-color: var(--color-accent);
}
.list_link:hover {
  background: var(--color-surface-raised);
}
.list_content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.list_content:not(:has(.list_title)) {
  display: block;
}
.list_title {
  font-size: var(--list-title-size);
  font-weight: 500;
  color: var(--color-text);
}
.list_meta {
  font-size: var(--list-meta-size);
  color: var(--color-text-muted);
}
.list_desc {
  font-size: var(--list-desc-size);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.list_action {
  flex-shrink: 0;
  margin-left: auto;
}
.list_inline {
  width: auto;
  max-width: 100%;
}
.list_inline.list_block {
  width: 100%;
}
.list_inline:not(.list_definition) .list_item {
  width: auto;
}
.list_inline:not(.list_definition) .list_content:has(.list_title):has(.list_desc) {
  flex-direction: row;
  align-items: baseline;
  gap: var(--list-inline-gap);
}
.list_inline:not(.list_definition) .list_content .list_desc {
  margin-top: 0;
}
.list_bordered .list_item {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}
.list_bordered .list_item:has(.list_link) {
  border: none;
  background: transparent;
}
.list_bordered .list_item:has(.list_link) .list_link {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.list_compact .list_item:not(:has(.list_link)) {
  padding-block: var(--space-sm);
}
.list_compact .list_link {
  padding-block: var(--space-sm);
}
.list_divider .list_item + .list_item {
  border-top: 1px solid var(--color-border-subtle);
}
.list_divider .list_item {
  border-radius: 0;
  padding-inline: 0;
}
.list_divider .list_item:has(.list_link) {
  padding-inline: 0;
}
.list_divider .list_link {
  padding-inline: 0;
  border-radius: 0;
}
.list_bullet {
  list-style: disc;
  padding-left: var(--list-marker-padding);
}
.list_bullet .list_item {
  display: list-item;
  width: 100%;
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: 0;
}
.list_bullet .list_item:has(.list_link) {
  display: list-item;
  padding: 0;
}
.list_bullet .list_item .list_link {
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: var(--radius-sm);
}
.list_bullet .list {
  margin-top: var(--list-marker-gap);
  padding-left: var(--list-marker-padding);
}
.list_bullet-circle {
  list-style: circle;
}
.list_bullet-square {
  list-style: square;
}
.list_ordered {
  list-style: decimal;
  padding-left: var(--list-marker-padding);
}
.list_ordered .list_item {
  display: list-item;
  width: 100%;
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: 0;
}
.list_ordered .list_item:has(.list_link) {
  display: list-item;
  padding: 0;
}
.list_ordered .list_item .list_link {
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: var(--radius-sm);
}
.list_ordered .list {
  margin-top: var(--list-marker-gap);
  padding-left: var(--list-marker-padding);
}
.list_ordered-alpha {
  list-style: lower-alpha;
}
.list_ordered-roman {
  list-style: lower-roman;
}
.list_ordered-upper-alpha {
  list-style: upper-alpha;
}
.list_ordered-upper-roman {
  list-style: upper-roman;
}
.list_ordered-outline {
  list-style: none;
  counter-reset: outline;
}
.list_ordered-outline .list_item {
  counter-increment: outline;
  display: list-item;
  width: 100%;
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: 0;
}
.list_ordered-outline .list_item:has(.list_link) {
  display: list-item;
  padding: 0;
}
.list_ordered-outline .list_item .list_link {
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: var(--radius-sm);
}
.list_ordered-outline .list_item::marker {
  content: counters(outline, ".") ". ";
}
.list_ordered-outline .list {
  margin-top: var(--list-marker-gap);
  padding-left: var(--list-marker-padding);
}
.list_ordered-dash {
  list-style: none;
  counter-reset: outline;
}
.list_ordered-dash .list_item {
  counter-increment: outline;
  display: list-item;
  width: 100%;
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: 0;
}
.list_ordered-dash .list_item:has(.list_link) {
  display: list-item;
  padding: 0;
}
.list_ordered-dash .list_item .list_link {
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: var(--radius-sm);
}
.list_ordered-dash .list_item::marker {
  content: counters(outline, "-") " ";
}
.list_ordered-dash .list {
  margin-top: var(--list-marker-gap);
  padding-left: var(--list-marker-padding);
}
.list_ordered-depth {
  list-style: decimal;
  padding-left: var(--list-marker-padding);
}
.list_ordered-depth .list_item {
  display: list-item;
  width: 100%;
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: 0;
}
.list_ordered-depth .list_item:has(.list_link) {
  display: list-item;
  padding: 0;
}
.list_ordered-depth .list_item .list_link {
  padding-block: var(--list-marker-gap);
  padding-inline: 0;
  border-radius: var(--radius-sm);
}
.list_ordered-depth .list {
  margin-top: var(--list-marker-gap);
  padding-left: var(--list-marker-padding);
  list-style: lower-alpha;
}
.list_ordered-depth .list .list {
  list-style: lower-roman;
}
.list_ordered-depth .list .list .list {
  list-style: decimal;
}
.list_cards {
  gap: var(--space-md);
}
.list_cards .list_item .card {
  width: 100%;
}
.list_definition dt,
.list_definition dd {
  margin: 0;
}
.list_definition dt.list_title,
.list_definition .list_item .list_title,
.list_definition .list_title {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}
.list_definition dd.list_desc,
.list_definition .list_item .list_desc,
.list_definition .list_desc {
  display: block;
  margin-top: var(--space-xs);
  line-height: 1.5;
}
.list_definition dd.list_desc + dt.list_title,
.list_definition .list_desc + .list_title {
  margin-top: var(--space-sm);
}
.list_definition .list_item {
  display: block;
  padding: 0;
  border-radius: 0;
}
.list_definition .list_item + .list_item .list_title {
  margin-top: var(--space-sm);
}
.list_definition .list_content {
  display: block;
  gap: 0;
}
.list_definition.list_inline {
  display: grid;
  grid-template-columns: var(--list-inline-label-width) 1fr;
  column-gap: var(--list-inline-gap);
  row-gap: var(--list-gap);
}
.list_definition.list_inline dt.list_title,
.list_definition.list_inline .list_item .list_title,
.list_definition.list_inline .list_title {
  grid-column: 1;
  margin-top: 0;
}
.list_definition.list_inline dd.list_desc,
.list_definition.list_inline .list_item .list_desc,
.list_definition.list_inline .list_desc {
  grid-column: 2;
  margin-top: 0;
}
.list_definition.list_inline dd.list_desc + dt.list_title,
.list_definition.list_inline .list_desc + .list_title {
  margin-top: 0;
}
.list_definition.list_desc-right dd.list_desc,
.list_definition.list_desc-right .list_item .list_desc,
.list_definition.list_desc-right .list_desc {
  text-align: right;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--stat-gap);
  width: 100%;
}
.stat_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.stat_label {
  font-size: var(--stat-label-size);
  color: var(--color-text-muted);
}
.stat_value-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}
.stat_value {
  font-size: var(--stat-value-size);
  font-weight: var(--stat-value-weight);
  color: var(--color-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat_prefix, .stat_suffix {
  font-size: var(--stat-label-size);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.2;
}
.stat_suffix {
  font-weight: 500;
}
.stat_desc {
  font-size: var(--stat-desc-size);
  color: var(--color-text-muted);
}
.stat_trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--stat-desc-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat_trend .icon,
.stat_trend svg {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
}
.stat_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}
.stat_icon .icon,
.stat_icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.stat_icon-wrap {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  width: var(--stat-icon-wrap-size);
  height: var(--stat-icon-wrap-size);
}
.stat_icon-wrap .icon,
.stat_icon-wrap svg {
  width: 50%;
  height: 50%;
}
.stat_icon-wrap.color_success {
  color: var(--color-success-text);
  background: var(--color-badge-success-bg);
}
.stat_icon-wrap.color_warning {
  color: var(--color-warning-text);
  background: var(--color-badge-warning-bg);
}
.stat_icon-wrap.color_danger {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.stat_sm {
  --stat-value-size: var(--stat-value-size-sm);
}
.stat_sm .stat_icon-wrap {
  width: 2rem;
  height: 2rem;
}
.stat_lg {
  --stat-value-size: var(--stat-value-size-lg);
}
.stat_horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--stat-horizontal-gap);
}
.stat_inline {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.stat_inline .stat_label {
  margin-right: auto;
}
.stat_row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md);
}
.stat_row .stat_body {
  display: flex;
  flex-direction: column;
  gap: var(--stat-gap);
  flex: 1;
  min-width: 0;
}
.stat_card {
  padding: var(--stat-card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.stat_shadow {
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}
.stat_borderless {
  border-color: transparent;
  background: var(--color-surface-raised);
}
.stat_accent {
  border-left-width: 3px;
}
.stat_accent.color_primary {
  border-left-color: var(--color-accent);
}
.stat_accent.color_success {
  border-left-color: var(--color-success);
}
.stat_accent.color_warning {
  border-left-color: var(--color-warning);
}
.stat_accent.color_danger {
  border-left-color: var(--color-danger);
}
.stat_accent.color_info {
  border-left-color: var(--color-accent);
}
.stat_group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--stat-group-gap);
  width: 100%;
}
.stat_group-2 {
  grid-template-columns: repeat(2, 1fr);
}
.stat_group-3 {
  grid-template-columns: repeat(3, 1fr);
}
.stat_group-4 {
  grid-template-columns: repeat(4, 1fr);
}
.stat_group-divider .stat {
  padding-inline: var(--stat-group-gap);
}
.stat_group-divider .stat:not(:first-child) {
  border-left: 1px solid var(--color-border-subtle);
}
@media (max-width: 768px) {
  .stat_group-divider {
    grid-template-columns: 1fr;
  }
  .stat_group-divider .stat {
    padding-inline: 0;
    padding-block: var(--space-md);
  }
  .stat_group-divider .stat:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--color-border-subtle);
  }
}

@media (max-width: 768px) {
  .stat_group-3,
  .stat_group-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .stat_group-2 {
    grid-template-columns: 1fr;
  }
}
.calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  max-width: 20rem;
}
.calendar.calendar_borderless {
  border-color: transparent;
}
.calendar.calendar_ghost {
  background: transparent;
  border-color: transparent;
}
.calendar.calendar_shadow {
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}
.calendar.calendar_sm {
  --calendar-cell-size: 1.875rem;
  --calendar-font-size: var(--text-size-xs);
  padding: var(--space-sm);
}
.calendar.calendar_compact {
  --calendar-cell-size: 1.75rem;
  padding: var(--space-sm);
}
.calendar.calendar_lg {
  --calendar-cell-size: 2.75rem;
  --calendar-font-size: var(--text-size-base);
  --calendar-header-size: var(--text-size-lg);
  padding: var(--space-lg);
  max-width: 24rem;
}
.calendar.calendar_weekends .calendar_weekday:first-child {
  color: var(--color-danger-text);
}
.calendar.calendar_weekends .calendar_weekday:last-child {
  color: var(--color-accent-text);
}
.calendar.calendar_readonly .calendar_day {
  cursor: default;
  pointer-events: none;
}
.calendar.calendar_no-header {
  gap: var(--space-xs);
}
.calendar.calendar_minimal {
  gap: 0;
  padding: var(--space-sm);
  max-width: fit-content;
}
.calendar.calendar_week {
  max-width: 100%;
  width: fit-content;
  min-width: 16rem;
}
.calendar.calendar_wheel {
  --calendar-wheel-column-count: 3;
  --calendar-wheel-column-width: calc(100% / var(--calendar-wheel-slot-count));
}
.calendar.calendar_wheel:has(.calendar_wheel-columns > :only-child) {
  --calendar-wheel-column-count: 1;
}
.calendar.calendar_wheel:has(.calendar_wheel-columns > :nth-child(2):last-child) {
  --calendar-wheel-column-count: 2;
}
.calendar.calendar_wheel {
  gap: 0;
  padding: 0;
  width: 100%;
  max-width: var(--calendar-wheel-max-width);
  overflow: hidden;
}
.calendar_group > .calendar.calendar_wheel {
  flex: 0 0 auto;
  width: var(--calendar-wheel-max-width);
}
.calendar.calendar_agenda {
  gap: 0;
  padding: 0;
  max-width: 28rem;
  overflow: hidden;
}
.calendar.calendar_agenda .calendar_header {
  padding: var(--space-md) var(--space-md) var(--space-sm);
}
.calendar.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
}
.calendar_group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-start;
}
.calendar_group.calendar_group-center {
  justify-content: center;
  width: 100%;
}
.calendar_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--calendar-header-size);
  font-weight: 600;
  color: var(--color-text);
}
.calendar_title {
  flex: 1;
  text-align: center;
}
.calendar_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--calendar-header-size);
  font-weight: 600;
  color: var(--color-text);
}
.calendar_nav-label {
  flex: 1;
  text-align: center;
}
.calendar_weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--calendar-gap);
  text-align: center;
}
.calendar_weekday {
  font-size: var(--calendar-weekday-size);
  font-weight: 600;
  color: var(--color-text-muted);
  padding-block: var(--space-xs);
}
.calendar_grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--calendar-gap);
}
.calendar_grid.calendar_grid-week {
  grid-template-columns: repeat(7, 1fr);
}
.calendar_day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--calendar-font-size);
  cursor: pointer;
  width: var(--calendar-cell-size);
  height: var(--calendar-cell-size);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.calendar_day:focus-visible {
  outline-color: var(--color-accent);
}
.calendar_day:hover:not(:disabled) {
  background: var(--color-surface-raised);
}
.calendar_day.is-today {
  font-weight: 700;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
}
.calendar_day.is-selected {
  color: var(--color-on-accent);
  background: var(--color-accent);
  font-weight: 600;
}
.calendar_day.is-selected:hover {
  background: var(--color-accent-hover);
}
.calendar_day.is-in-range:not(.is-selected) {
  color: var(--color-text);
  background: var(--color-accent-muted);
  border-radius: 0;
}
.calendar_day.is-in-range:not(.is-selected):hover:not(:disabled) {
  background: var(--color-accent-muted);
}
.calendar_day.is-other-month.is-in-range:not(.is-selected) {
  color: var(--color-text-muted);
  background: var(--color-accent-muted);
}
.calendar_day.is-range-start {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.calendar_day.is-range-start.is-range-end {
  border-radius: var(--radius-sm);
}
.calendar_day.is-range-end {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.calendar_day.is-sunday:not(.is-selected):not(.is-in-range):not(.is-today):not(.is-other-month) {
  color: var(--color-danger-text);
}
.calendar_day.is-saturday:not(.is-selected):not(.is-in-range):not(.is-today):not(.is-other-month) {
  color: var(--color-accent-text);
}
.calendar_day.is-other-month:not(.is-in-range):not(.is-selected) {
  color: var(--color-text-disabled);
}
.calendar_day.has-event::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}
.calendar_day.is-selected.has-event::after, .calendar_day.is-range-start.has-event::after, .calendar_day.is-range-end.has-event::after {
  background: var(--color-on-accent);
}
.calendar_day:disabled, .calendar_day.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.calendar_day:disabled.is-selected, .calendar_day.is-disabled.is-selected {
  color: var(--color-on-accent-disabled);
  background-color: var(--color-accent-disabled);
  border-color: var(--color-accent-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.calendar_day:disabled.is-selected.has-event::after, .calendar_day:disabled.is-selected.is-range-start.has-event::after, .calendar_day:disabled.is-selected.is-range-end.has-event::after, .calendar_day.is-disabled.is-selected.has-event::after, .calendar_day.is-disabled.is-selected.is-range-start.has-event::after, .calendar_day.is-disabled.is-selected.is-range-end.has-event::after {
  background: var(--color-on-accent-disabled);
}
.calendar_day:disabled.is-today:not(.is-selected), .calendar_day.is-disabled.is-today:not(.is-selected) {
  color: var(--color-text-disabled);
  border-color: var(--color-border-disabled);
}
.calendar_day:disabled.is-in-range:not(.is-selected), .calendar_day.is-disabled.is-in-range:not(.is-selected) {
  color: var(--color-text-disabled);
  background: var(--color-surface-disabled);
}
.calendar_day:disabled.is-sunday, .calendar_day:disabled.is-saturday, .calendar_day:disabled.is-other-month, .calendar_day.is-disabled.is-sunday, .calendar_day.is-disabled.is-saturday, .calendar_day.is-disabled.is-other-month {
  color: var(--color-text-disabled);
}
.calendar_day:disabled.has-event:not(.is-selected)::after, .calendar_day.is-disabled.has-event:not(.is-selected)::after {
  background: var(--color-text-disabled);
}
.calendar_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.calendar_footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.calendar_wheel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.calendar_wheel-title {
  flex: 1;
  text-align: center;
  font-size: var(--text-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.calendar_wheel-body {
  position: relative;
  height: var(--calendar-wheel-height);
}
.calendar_wheel-highlight {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: calc(var(--calendar-wheel-column-width) * var(--calendar-wheel-column-count));
  height: var(--calendar-wheel-row-height);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.calendar_wheel-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom, var(--color-surface) 0%, transparent 28%, transparent 72%, var(--color-surface) 100%);
  pointer-events: none;
}
.calendar_wheel-columns {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.calendar_wheel-column {
  display: flex;
  flex: 0 0 var(--calendar-wheel-column-width);
  flex-direction: column;
  width: var(--calendar-wheel-column-width);
  min-width: 0;
  height: 100%;
}
.calendar_wheel-column:not(:has(.calendar_wheel-step)) .calendar_wheel-list {
  padding: calc((var(--calendar-wheel-height) - var(--calendar-wheel-row-height)) / 2) 0;
}
.calendar_wheel-column + .calendar_wheel-column {
  border-left: 1px solid var(--color-border-subtle);
}
.calendar_wheel-step {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--calendar-wheel-step-height);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.calendar_wheel-step:focus-visible {
  outline-color: var(--color-accent);
}
.calendar_wheel-step .icon {
  width: 1rem;
  height: 1rem;
}
.calendar_wheel-step:hover:not(:disabled) {
  color: var(--color-accent-text);
  background: var(--color-surface-raised);
}
.calendar_wheel-step:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.calendar_wheel-list {
  flex: 1;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: calc((var(--calendar-wheel-list-height) - var(--calendar-wheel-row-height)) / 2) 0;
  list-style: none;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.calendar_wheel-list::-webkit-scrollbar {
  display: none;
}
.calendar_wheel-list > li {
  margin: 0;
  padding: 0;
  height: var(--calendar-wheel-row-height);
}
.calendar_wheel-list.calendar_wheel-list-static {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.calendar_wheel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 var(--space-xs);
  border: none;
  background: transparent;
  font-size: var(--calendar-wheel-font-size);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  scroll-snap-align: center;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.calendar_wheel-item:focus-visible {
  outline-color: var(--color-accent);
}
.calendar_wheel-item:hover:not(:disabled) {
  color: var(--color-text);
}
.calendar_wheel-item.is-dim-1 {
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
}
.calendar_wheel-item.is-dim-2 {
  font-size: var(--text-size-xs);
  color: var(--color-text-disabled);
}
.calendar_wheel-item.is-selected {
  font-size: var(--calendar-wheel-font-selected);
  font-weight: 600;
  color: var(--color-text);
  opacity: 1;
}
.calendar_wheel-item:disabled, .calendar_wheel-item.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.calendar_wheel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}
.calendar_agenda-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.calendar_agenda-day {
  display: flex;
  gap: var(--calendar-agenda-gap);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.calendar_agenda-day:last-child {
  padding-bottom: var(--space-md);
}
.calendar_agenda-day.is-today .calendar_agenda-daynum {
  color: var(--color-on-accent);
  background: var(--color-accent);
}
.calendar_agenda-day.is-today .calendar_agenda-weekday {
  color: var(--color-accent-text);
  font-weight: 600;
}
.calendar_agenda-day.is-selected {
  background: var(--color-accent-muted);
}
.calendar_agenda-day.is-empty .calendar_agenda-body {
  justify-content: center;
}
.calendar_agenda-date {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: var(--calendar-agenda-date-width);
  text-align: center;
}
.calendar_agenda-weekday {
  font-size: var(--text-size-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.is-sunday .calendar_agenda-weekday {
  color: var(--color-danger-text);
}
.is-saturday .calendar_agenda-weekday {
  color: var(--color-accent-text);
}
.calendar_agenda-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  font-size: var(--calendar-agenda-daynum-size);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}
.calendar_agenda-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--calendar-agenda-event-gap);
  min-width: 0;
}
.calendar_agenda-events {
  display: flex;
  flex-direction: column;
  gap: var(--calendar-agenda-event-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.calendar_agenda-event {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border-left: 3px solid var(--color-border);
}
.calendar_agenda-event.color_primary {
  border-left-color: var(--color-accent);
}
.calendar_agenda-event.color_success {
  border-left-color: var(--color-success);
}
.calendar_agenda-event.color_warning {
  border-left-color: var(--color-warning);
}
.calendar_agenda-event.color_danger {
  border-left-color: var(--color-danger);
}
.calendar_agenda-event.color_info {
  border-left-color: var(--color-accent);
}
.calendar_agenda-event-time {
  flex-shrink: 0;
  min-width: 2.75rem;
  font-size: var(--text-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.calendar_agenda-event-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.calendar_agenda-event-title {
  font-size: var(--text-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.calendar_agenda-event-desc {
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar_agenda-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.calendar_agenda-empty {
  margin: 0;
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
}
.calendar_agenda_compact {
  --calendar-agenda-date-width: 2.5rem;
  --calendar-agenda-daynum-size: 1.25rem;
}
.calendar_agenda_compact .calendar_agenda-day {
  padding: var(--space-sm) var(--space-md);
}
.calendar_agenda_compact .calendar_agenda-event {
  padding: var(--space-xs) var(--space-sm);
}

.date_picker {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: var(--input-max-width);
}
.date_picker.date_picker_fit {
  width: 100%;
  max-width: var(--input-max-width);
}
.date_picker.date_picker_block {
  display: block;
  max-width: none;
}
.date_picker.date_picker_sm {
  --date-picker-input-padding-y: 0.3rem;
  --date-picker-input-padding-x: 0.6rem;
  --date-picker-input-font-size: var(--text-size-sm);
  --date-picker-btn-size: 1.75rem;
  --date-picker-icon-size: 0.875rem;
}
.date_picker.date_picker_lg {
  --date-picker-input-padding-y: 0.65rem;
  --date-picker-input-padding-x: 0.9rem;
  --date-picker-input-font-size: var(--text-size-lg);
  --date-picker-btn-size: 2.5rem;
  --date-picker-icon-size: 1.125rem;
}
.date_picker.is-open .date_picker_trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.date_picker.is-open .date_picker_panel {
  display: block;
}
.date_picker.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.date_picker.is-disabled .date_picker_trigger {
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.date_picker.is-disabled .date_picker_input {
  color: var(--color-text-disabled);
}
.date_picker.is-error .date_picker_trigger {
  border-color: var(--color-danger);
}
.date_picker.is-error.is-open .date_picker_trigger {
  box-shadow: 0 0 0 3px var(--color-input-error-ring);
}
.date_picker.is-success .date_picker_trigger {
  border-color: var(--color-success);
}
.date_picker.is-success.is-open .date_picker_trigger {
  box-shadow: 0 0 0 3px var(--color-input-success-ring);
}
.date_picker.date_picker_inline {
  max-width: none;
}
.date_picker.date_picker_inline .date_picker_trigger {
  display: none;
}
.date_picker.date_picker_inline .date_picker_panel {
  position: static;
  display: block;
  margin-top: 0;
  border: none;
  box-shadow: none;
}
.date_picker_trigger {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.date_picker_trigger:hover:not(:has(:disabled)) {
  border-color: var(--color-accent);
}
.date_picker_trigger:has(.date_picker_clear) .date_picker_input {
  padding-right: calc(var(--date-picker-input-padding-x) + 1.25rem);
}
.date_picker_trigger .date_picker_clear {
  position: absolute;
  top: 50%;
  right: calc(var(--date-picker-btn-size) + var(--space-xs));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.date_picker_trigger .date_picker_clear:focus-visible {
  outline-color: var(--color-accent);
}
.date_picker_trigger .date_picker_clear {
  width: 1.25rem;
  height: 1.25rem;
}
.date_picker_trigger .date_picker_clear .icon {
  width: 0.875rem;
  height: 0.875rem;
}
.date_picker_trigger .date_picker_clear:hover {
  color: var(--color-text);
}
.date_picker_input {
  flex: 1;
  min-width: 0;
  padding: var(--date-picker-input-padding-y) var(--date-picker-input-padding-x);
  border: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: var(--date-picker-input-font-size);
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}
.date_picker_input::placeholder {
  color: var(--color-text-muted);
}
.date_picker_input:focus {
  outline: none;
}
.date_picker_input:disabled {
  cursor: not-allowed;
}
.date_picker_input.date_picker_placeholder, .date_picker_input:placeholder-shown:not(:focus) {
  color: var(--color-text-muted);
}
.date_picker_btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--date-picker-btn-size);
  border: none;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.date_picker_btn:focus-visible {
  outline-color: var(--color-accent);
}
.date_picker_btn .icon {
  width: var(--date-picker-icon-size);
  height: var(--date-picker-icon-size);
}
.date_picker_btn:hover:not(:disabled) {
  color: var(--color-accent-text);
  background: var(--color-surface);
}
.date_picker_btn:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.date_picker_panel {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  z-index: var(--z-dropdown, 100);
  display: none;
  min-width: 100%;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.date_picker_panel .calendar {
  max-width: none;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.date_picker_panel.date_picker_panel-end {
  left: auto;
  right: 0;
}
.date_picker_panel.date_picker_panel-wide {
  min-width: auto;
  width: max-content;
}
.date_picker_range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 36rem;
}
.date_picker_range .date_picker {
  flex: 1;
  min-width: 8rem;
  max-width: none;
}
.date_picker_sep {
  flex-shrink: 0;
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  user-select: none;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline_item {
  position: relative;
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--timeline-gap);
}
.timeline_item:last-child {
  padding-bottom: 0;
}
.timeline_item:last-child::before {
  display: none;
}
.timeline_item::before {
  content: "";
  position: absolute;
  left: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
  top: calc(var(--timeline-dot-offset) + var(--timeline-dot-size));
  bottom: calc(-1 * var(--timeline-dot-offset));
  width: var(--timeline-line-width);
  background: var(--color-border-subtle);
}
.timeline_item.is-pending .timeline_dot {
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  box-sizing: border-box;
}
.timeline_item.is-pending .timeline_title {
  color: var(--color-text-muted);
  font-weight: 500;
}
.timeline_item.is-active .timeline_dot {
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.timeline_item.is-active .timeline_title {
  color: var(--color-accent-text);
}
.timeline_dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: var(--timeline-dot-offset);
  border-radius: 50%;
  background: var(--color-border);
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
}
.timeline_dot:not(.icon_circle).color_primary {
  background: var(--color-accent);
}
.timeline_dot:not(.icon_circle).color_success {
  background: var(--color-success);
}
.timeline_dot:not(.icon_circle).color_warning {
  background: var(--color-warning);
}
.timeline_dot:not(.icon_circle).color_danger {
  background: var(--color-danger);
}
.timeline_dot:not(.icon_circle).color_info {
  background: var(--color-accent);
}
.timeline_dot.timeline_dot-outline {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  box-sizing: border-box;
}
.timeline_dot.timeline_dot-outline.color_primary {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.timeline_dot.timeline_dot-outline.color_success {
  border-color: var(--color-success);
  background: var(--color-badge-success-bg);
}
.timeline_dot.timeline_dot-outline.color_warning {
  border-color: var(--color-warning);
  background: var(--color-badge-warning-bg);
}
.timeline_dot.timeline_dot-outline.color_danger {
  border-color: var(--color-danger);
  background: var(--color-badge-danger-bg);
}
.timeline_dot.timeline_dot-outline.color_info {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.timeline_dot.icon_circle {
  margin-top: 0;
  border-radius: 50%;
  background: var(--color-surface-raised);
  width: var(--icon-circle-size);
  height: var(--icon-circle-size);
}
.timeline_dot.icon_circle.icon_circle-sm {
  width: var(--icon-circle-size-sm);
  height: var(--icon-circle-size-sm);
}
.timeline_content {
  display: flex;
  flex-direction: column;
  gap: var(--timeline-content-gap);
  flex: 1;
  min-width: 0;
}
.timeline_time {
  font-size: var(--timeline-time-size);
  color: var(--color-text-muted);
}
.timeline_label {
  flex-shrink: 0;
  width: var(--timeline-label-width);
  font-size: var(--timeline-time-size);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  padding-top: 2px;
}
.timeline_title {
  font-size: var(--timeline-title-size);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.timeline_desc {
  font-size: var(--timeline-desc-size);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
.timeline_meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}
.timeline_sm {
  --timeline-gap: var(--space-md);
  --timeline-dot-size: 8px;
  --timeline-title-size: var(--text-size-sm);
  --timeline-desc-size: var(--text-size-xs);
}
.timeline_lg {
  --timeline-gap: var(--space-xl);
  --timeline-dot-size: 14px;
  --timeline-title-size: var(--text-size-lg);
  --timeline-desc-size: var(--text-size-base);
}
.timeline_card .timeline_content {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.timeline_label-col .timeline_item {
  display: grid;
  grid-template-columns: var(--timeline-label-width) var(--timeline-dot-size) 1fr;
  column-gap: var(--space-md);
  align-items: start;
}
.timeline_label-col .timeline_item::before {
  left: calc(var(--timeline-label-width) + var(--space-md) + var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
}
.timeline_label-col .timeline_item .timeline_dot {
  margin-top: var(--timeline-dot-offset);
}
@media (min-width: 768px) {
  .timeline_alternate {
    position: relative;
  }
  .timeline_alternate::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--timeline-line-width);
    transform: translateX(-50%);
    background: var(--color-border-subtle);
  }
  .timeline_alternate .timeline_item {
    width: calc(50% - var(--timeline-gap));
    padding-right: calc(var(--timeline-gap) + var(--timeline-dot-size));
  }
  .timeline_alternate .timeline_item::before {
    display: none;
  }
  .timeline_alternate .timeline_item .timeline_dot {
    position: absolute;
    right: calc(var(--timeline-gap) / -2 - var(--timeline-dot-size) / 2);
    left: auto;
  }
  .timeline_alternate .timeline_item:nth-child(even) {
    align-self: flex-end;
    padding-right: 0;
    padding-left: calc(var(--timeline-gap) + var(--timeline-dot-size));
  }
  .timeline_alternate .timeline_item:nth-child(even) .timeline_dot {
    left: calc(var(--timeline-gap) / -2 - var(--timeline-dot-size) / 2);
    right: auto;
  }
}
.timeline_horizontal {
  width: 100%;
  overflow: visible;
}
@media (min-width: 768px) {
  .timeline_horizontal {
    flex-direction: row;
    align-items: flex-start;
  }
  .timeline_horizontal .timeline_item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
    text-align: center;
    overflow: visible;
  }
  .timeline_horizontal .timeline_item::before {
    left: calc(50% + var(--timeline-dot-size) / 2);
    top: calc(var(--timeline-dot-size) / 2 - var(--timeline-line-width) / 2);
    bottom: auto;
    right: auto;
    width: calc(100% - var(--timeline-dot-size));
    height: var(--timeline-line-width);
  }
  .timeline_horizontal .timeline_item .timeline_dot {
    margin-top: 0;
  }
  .timeline_horizontal .timeline_item .timeline_content {
    align-items: center;
    padding-top: var(--space-sm);
    padding-bottom: 0;
  }
}
.timeline_icon {
  --timeline-dot-offset: 0;
  --timeline-dot-size: var(--icon-circle-size);
}
.timeline_icon .timeline_item::before {
  top: var(--icon-circle-size);
  bottom: 0;
  left: calc(var(--icon-circle-size) / 2 - var(--timeline-line-width) / 2);
}
.timeline_icon.timeline_icon-sm {
  --timeline-dot-size: var(--icon-circle-size-sm);
}
.timeline_icon.timeline_icon-sm .timeline_item::before {
  top: var(--icon-circle-size-sm);
  left: calc(var(--icon-circle-size-sm) / 2 - var(--timeline-line-width) / 2);
}

.tree {
  display: flex;
  flex-direction: column;
  gap: var(--tree-gap);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tree-font-size);
  box-sizing: border-box;
}
.tree .tree {
  margin-left: 0;
  padding-left: var(--tree-indent);
  margin-top: var(--tree-gap);
  width: 100%;
  box-sizing: border-box;
}
.tree_item {
  min-width: 0;
}
.tree_item[aria-expanded=false] > .tree {
  display: none;
}
.tree_row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  min-height: var(--tree-row-height);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background-color var(--transition-fast);
}
.tree_row:hover:not(.is-disabled) {
  background: var(--color-surface-raised);
}
.tree_row.is-selected {
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
  font-weight: 500;
}
.tree_row.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tree_link {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.tree_link:focus-visible {
  outline-color: var(--color-accent);
}
.tree_link:hover {
  color: inherit;
}
.tree_toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  width: var(--tree-toggle-size);
  height: var(--tree-toggle-size);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.tree_toggle:focus-visible {
  outline-color: var(--color-accent);
}
.tree_toggle::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform var(--transition-fast);
}
.tree_toggle[aria-expanded=true]::before {
  transform: rotate(90deg);
}
.tree_toggle-plus::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-size-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-surface);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.tree_toggle-plus[aria-expanded=true]::before {
  content: "−";
  transform: none;
}
.tree_toggle-plus:hover::before {
  border-color: var(--color-accent);
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
}
.tree_toggle_placeholder {
  visibility: hidden;
  pointer-events: none;
}
.tree_label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.tree_meta {
  flex-shrink: 0;
  font-size: var(--text-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.tree_icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.tree_icon .icon {
  width: 1rem;
  height: 1rem;
}
.tree_check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}
.tree_check input[type=checkbox] {
  margin: 0;
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.tree_bordered {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.tree_compact {
  --tree-row-height: 1.5rem;
  --tree-gap: 0;
  --tree-font-size: var(--text-size-xs);
  --tree-toggle-size: 1rem;
  --tree-indent: 1rem;
}
.tree_lines .tree_item > .tree > .tree_item {
  position: relative;
}
.tree_lines .tree_item > .tree > .tree_item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-xs) + var(--tree-toggle-size) / 2 - var(--tree-indent) - 0.5px);
  border-left: 1px solid var(--tree-line-color);
}
.tree_lines .tree_item > .tree > .tree_item:last-child::before {
  height: calc(var(--tree-row-height) / 2);
  bottom: auto;
}
.tree_lines .tree_item > .tree > .tree_item > .tree_row::before {
  content: "";
  position: absolute;
  top: calc(var(--tree-row-height) / 2);
  left: calc(var(--space-xs) + var(--tree-toggle-size) / 2 - var(--tree-indent));
  width: calc(var(--tree-indent) - var(--tree-toggle-size) / 2);
  border-top: 1px solid var(--tree-line-color);
}
.tree_lines .tree_item > .tree > .tree_item > .tree_row {
  position: relative;
}

.typo_title-1 {
  margin: 0;
  font-size: var(--typo-title-1-size);
  font-weight: var(--typo-title-1-weight);
  line-height: var(--typo-title-1-line-height);
  letter-spacing: var(--typo-title-1-letter-spacing);
}
.typo_title-2 {
  margin: 0;
  font-size: var(--typo-title-2-size);
  font-weight: var(--typo-title-2-weight);
  line-height: var(--typo-title-2-line-height);
  letter-spacing: var(--typo-title-2-letter-spacing);
}
.typo_title-3 {
  margin: 0;
  font-size: var(--typo-title-3-size);
  font-weight: var(--typo-title-3-weight);
  line-height: var(--typo-title-3-line-height);
  letter-spacing: var(--typo-title-3-letter-spacing);
}
.typo_title-4 {
  margin: 0;
  font-size: var(--typo-title-4-size);
  font-weight: var(--typo-title-4-weight);
  line-height: var(--typo-title-4-line-height);
}
.typo_title-5 {
  margin: 0;
  font-size: var(--typo-title-5-size);
  font-weight: var(--typo-title-5-weight);
  line-height: var(--typo-title-5-line-height);
}
.typo_paragraph {
  line-height: var(--typo-text-line-height);
  margin: 0 0 var(--typo-paragraph-gap);
}
.typo_paragraph:last-child {
  margin-bottom: 0;
}
.typo_strong {
  font-weight: 600;
}
.typo_italic {
  font-style: italic;
}
.typo_underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.typo_delete {
  text-decoration: line-through;
  opacity: 0.75;
}
.typo_mark {
  padding: var(--typo-code-padding-y) 0.25em;
  background: var(--typo-mark-bg);
  border-radius: var(--typo-code-radius);
}
.typo_sub, .typo_sup {
  font-size: var(--typo-sub-sup-size);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.typo_sub {
  bottom: var(--typo-sub-offset);
}
.typo_sup {
  top: var(--typo-sup-offset);
}
.typo_small {
  font-size: var(--typo-small-size);
  line-height: inherit;
  color: var(--color-text-muted);
}
.typo_code {
  display: inline;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
  font-size: 0.875em;
  padding: var(--typo-code-padding-y) var(--typo-code-padding-x);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--typo-code-radius);
  vertical-align: baseline;
  white-space: normal;
  word-break: break-word;
}
.typo_blockquote {
  margin: 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  line-height: var(--typo-text-line-height);
  border-left: var(--typo-blockquote-border-width) solid var(--color-border);
}
.typo_list, .typo_list-ordered {
  line-height: var(--typo-text-line-height);
  padding-left: var(--space-lg);
  margin: 0;
}
.typo_list li + li, .typo_list-ordered li + li {
  margin-top: var(--typo-list-gap);
}
.typo_list {
  list-style: disc;
}
.typo_list-ordered {
  list-style: decimal;
}
.typo_link {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.typo_link:hover {
  color: var(--color-accent-text-hover);
}
.typo_link:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}
.typo_stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
}
.typo_stack-lg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
}
.typo_lead {
  font-size: var(--typo-lead-size);
  line-height: var(--typo-lead-line-height);
  color: var(--color-text-muted);
  margin: 0;
}
.typo_caption {
  font-size: var(--typo-caption-size);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}
.typo_label {
  font-size: var(--typo-label-size);
  font-weight: var(--typo-label-weight);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}
.typo_overline {
  font-size: var(--typo-overline-size);
  font-weight: var(--typo-overline-weight);
  letter-spacing: var(--typo-overline-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.typo_kbd {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
  font-size: 0.8125em;
  padding: var(--typo-kbd-padding-y) var(--typo-kbd-padding-x);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  line-height: 1.3;
}
.typo_pre {
  margin: 0;
  padding: var(--typo-pre-padding);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, "Apple SD Gothic Neo", "Noto Sans KR", monospace;
  font-size: var(--text-size-sm);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--typo-pre-radius);
}
.typo_pre code {
  white-space: inherit;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--link-gap);
  font-weight: var(--link-font-weight);
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.link:focus-visible {
  outline-color: var(--color-accent);
}
.link {
  color: var(--color-accent-text);
}
.link:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-accent-text-hover);
}
.link:hover:not(.is-disabled):not([aria-disabled=true]):not(.link_no-underline) {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}
.link.color_muted {
  color: var(--color-text-muted);
}
.link.color_muted:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-text);
}
.link.color_success {
  color: var(--color-success-text);
}
.link.color_success:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-success-text-hover);
}
.link.color_warning {
  color: var(--color-warning-text);
}
.link.color_warning:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-warning-text-hover);
}
.link.color_danger {
  color: var(--color-danger-text);
}
.link.color_danger:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-danger-text-hover);
}
.link.color_info {
  color: var(--color-alert-info-text);
}
.link.color_info:hover:not(.is-disabled):not([aria-disabled=true]) {
  color: var(--color-alert-info-text);
}
.link.is-disabled, .link[aria-disabled=true] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.link_underline {
  text-decoration: underline;
  text-underline-offset: var(--link-underline-offset);
}
.link_no-underline:hover {
  text-decoration: none;
}
.link_block {
  display: flex;
  width: 100%;
}
.link_standalone {
  padding: var(--link-standalone-padding-y) var(--link-standalone-padding-x);
  border-radius: var(--radius-sm);
}
.link_nav {
  padding: var(--link-nav-padding-y) var(--link-nav-padding-x);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
}
.link_nav:hover:not(.is-disabled):not([aria-disabled=true]) {
  text-decoration: none;
  background: var(--color-surface-raised);
}
.link_nav.is-active {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  font-weight: 600;
}
.link_back {
  gap: var(--space-xs);
  font-weight: 500;
}
.link_back .link_icon {
  width: 1.125em;
  height: 1.125em;
}
.link_group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.link_group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.link_icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  width: var(--link-icon-only-size);
  height: var(--link-icon-only-size);
}
.link_icon-only .link_icon {
  width: 1.125rem;
  height: 1.125rem;
}
.link_icon-only:hover:not(.is-disabled) {
  text-decoration: none;
  background: var(--color-surface-raised);
}
.link_icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  pointer-events: none;
}
.link_media {
  display: block;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.link_row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.navbar {
  position: relative;
  width: 100%;
  color: var(--color-text);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.navbar.navbar_sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}
.navbar.navbar_borderless {
  border-bottom-color: transparent;
}
.navbar.navbar_dark {
  background: var(--color-surface);
  border-bottom-color: var(--color-border-subtle);
}
.navbar.navbar_sm .navbar_container {
  min-height: var(--navbar-height-sm);
}
.navbar.navbar_lg .navbar_container {
  min-height: var(--navbar-height-lg);
}
.navbar_container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--navbar-gap);
  width: 100%;
  max-width: var(--container-max-width);
  min-height: var(--navbar-height);
  margin: 0 auto;
  padding: 0 var(--navbar-padding-x);
}
.navbar_brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  font-size: var(--navbar-brand-font-size);
  font-weight: var(--navbar-brand-font-weight);
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.navbar_brand:focus-visible {
  outline-color: var(--color-accent);
}
.navbar_brand:hover {
  color: var(--color-accent-text-hover);
}
.navbar_brand-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent-text);
}
.navbar_toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.navbar_toggle:focus-visible {
  outline-color: var(--color-accent);
}
.navbar_toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-text-hover);
}
.navbar_toggle .navbar_toggle-icon-close {
  display: none;
}
.navbar_toggle[aria-expanded=true] .navbar_toggle-icon-open {
  display: none;
}
.navbar_toggle[aria-expanded=true] .navbar_toggle-icon-close {
  display: block;
}
.navbar_collapse {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--navbar-gap);
  min-width: 0;
}
.navbar_nav {
  flex: 1 1 auto;
  min-width: 0;
}
.navbar_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar_item {
  display: flex;
  align-items: center;
}
.navbar_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--navbar-link-padding-y) var(--navbar-link-padding-x);
  font-size: var(--text-size-base);
  font-weight: var(--navbar-link-font-weight);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.navbar_link:focus-visible {
  outline-color: var(--color-accent);
}
.navbar_link:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
  text-decoration: none;
}
.navbar_link.is-active {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  font-weight: 600;
}
.navbar_actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.navbar_search {
  flex: 0 1 var(--navbar-search-width);
  min-width: 0;
}
.navbar_search .input {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: var(--text-size-sm);
}
.navbar_demo {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.navbar_demo-scroll {
  width: auto;
  max-height: 12rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-inline: var(--space-xl);
  margin-block-end: var(--space-xl);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
@media (max-width: 768px) {
  .navbar_toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .navbar_collapse {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) 0 var(--space-sm);
    border-top: 1px solid var(--color-border-subtle);
  }
  .navbar.is-open .navbar_collapse,
  .navbar .navbar_collapse.is-open {
    display: flex;
  }
  .navbar_list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }
  .navbar_link {
    width: 100%;
  }
  .navbar_actions {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }
  .navbar_actions .btn {
    width: 100%;
  }
  .navbar_search {
    flex: 1 1 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .navbar_search {
    flex-basis: var(--navbar-search-width-lg);
  }
}

.menu {
  width: 100%;
  max-width: var(--menu-width);
  font-size: var(--menu-font-size);
  color: var(--color-text);
}
.menu_list {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu_item {
  min-width: 0;
}
.menu_item.menu_item-submenu[aria-expanded=false] > .menu_submenu {
  display: none;
}
.menu_item.is-disabled > .menu_link {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.menu_link {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  width: 100%;
  margin: 0;
  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: var(--menu-link-font-weight);
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.menu_link:focus-visible {
  outline-color: var(--color-accent);
}
.menu_link:hover:not(.is-disabled) {
  color: var(--color-text);
  background: var(--color-surface-raised);
  text-decoration: none;
}
.menu_link.is-active, .menu_link[aria-current=page] {
  color: var(--color-accent-text);
  background: var(--color-accent-muted);
  font-weight: 600;
}
.menu_link.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.menu_icon {
  flex-shrink: 0;
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  color: var(--color-text-muted);
}
.menu_link.is-active .menu_icon, .menu_link[aria-current=page] .menu_icon {
  color: var(--color-accent-text);
}
.menu_label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu_arrow {
  flex-shrink: 0;
  width: var(--menu-arrow-size);
  height: var(--menu-arrow-size);
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}
.menu_item-submenu[aria-expanded=true] > .menu_link .menu_arrow {
  transform: rotate(180deg);
}
.menu_extra {
  flex-shrink: 0;
  margin-left: auto;
}
.menu_submenu {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  margin: 0;
  padding: var(--menu-gap) 0 0 var(--menu-submenu-indent);
  list-style: none;
}
.menu_divider {
  height: 1px;
  margin: var(--menu-divider-margin-y) var(--menu-item-padding-x);
  padding: 0;
  border: none;
  background: var(--color-border-subtle);
}
.menu_group {
  padding: 0;
}
.menu_group-title {
  display: block;
  padding: var(--menu-group-padding-y) var(--menu-item-padding-x);
  font-size: var(--menu-group-font-size);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}
.menu_bordered {
  padding: var(--menu-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.menu_compact {
  --menu-item-padding-y: 0.35rem;
  --menu-item-padding-x: 0.65rem;
  --menu-font-size: var(--text-size-sm);
  --menu-icon-size: 0.875rem;
}
.menu_dark {
  background: var(--color-surface);
  border-color: var(--color-border-subtle);
}
.menu_horizontal {
  max-width: none;
}
.menu_horizontal > .menu_list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.menu_horizontal > .menu_list > .menu_item > .menu_link {
  width: auto;
}
.menu_horizontal .menu_submenu {
  padding-left: 0;
}
.menu_horizontal .menu_item-submenu {
  position: relative;
}
.menu_horizontal .menu_item-submenu > .menu_submenu {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 0;
  z-index: 10;
  min-width: 10rem;
  padding: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.menu_horizontal .menu_divider {
  width: 1px;
  height: 1.25rem;
  margin: 0 var(--space-xs);
}
.menu_horizontal .menu_group-title {
  padding-inline: var(--space-sm);
}
.menu_demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  align-items: flex-start;
}
.menu_demo-sidebar {
  flex: 0 0 var(--menu-width);
  min-width: 12rem;
}
.menu_demo-content {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: var(--text-size-sm);
}

.dropdown {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.dropdown.is-open > .dropdown_trigger[aria-expanded] {
  z-index: calc(var(--z-dropdown, 100) + 1);
}
.dropdown.is-open > .dropdown_menu {
  display: block;
}
.dropdown.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.dropdown_trigger {
  position: relative;
}
.dropdown_menu {
  position: absolute;
  top: calc(100% + var(--dropdown-offset));
  left: 0;
  z-index: var(--z-dropdown, 100);
  display: none;
  width: var(--dropdown-menu-width);
  min-width: var(--dropdown-min-width);
  padding: var(--dropdown-padding);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.dropdown_menu .menu {
  width: 100%;
  max-width: none;
}
.dropdown_menu .menu_link.color_danger {
  color: var(--color-danger-text);
}
.dropdown_menu .menu_link.color_danger:hover:not(.is-disabled) {
  color: var(--color-danger-text);
  background: var(--color-badge-danger-bg);
}
.dropdown_menu-scrollable .menu_list {
  max-height: calc(var(--dropdown-max-visible-items) * (var(--menu-item-padding-y) * 2 + var(--menu-font-size) * var(--dropdown-item-line-height)) + (var(--dropdown-max-visible-items) - 1) * var(--menu-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dropdown_menu-scrollable .menu_list::-webkit-scrollbar {
  width: 6px;
}
.dropdown_menu-scrollable .menu_list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--color-border);
}
.dropdown_placement-end .dropdown_menu {
  left: auto;
  right: 0;
}
.dropdown_placement-top .dropdown_menu {
  top: auto;
  bottom: calc(100% + var(--dropdown-offset));
}
.dropdown_block {
  display: flex;
  width: 100%;
}
.dropdown_block > .dropdown_trigger {
  width: 100%;
}
.dropdown_block .dropdown_menu {
  width: 100%;
}
.dropdown_fit > .dropdown_trigger.btn_select {
  min-width: var(--dropdown-min-width);
}
.dropdown_demo-stage {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  min-height: 14rem;
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-bg);
}
.dropdown_row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
}
.dropdown_demo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: 28rem;
  padding: var(--space-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.popover {
  --popover-offset: var(--popover-offset-md);
  --popover-offset-top: var(--popover-offset);
  --popover-offset-right: var(--popover-offset);
  --popover-offset-bottom: var(--popover-offset);
  --popover-offset-left: var(--popover-offset);
  --popover-arrow-clearance: calc(var(--popover-arrow-size) / 2);
  --popover-panel-radius: var(--radius-lg);
  --popover-arrow-edge-inset: calc(var(--popover-panel-radius) + var(--popover-arrow-size) * 0.35);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.popover.is-open > .popover_trigger[aria-expanded] {
  z-index: var(--z-popover, 110);
}
.popover.is-open > .popover_panel {
  display: block;
}
.popover.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.popover_trigger {
  position: relative;
}
.popover_panel {
  position: absolute;
  top: calc(100% + var(--popover-offset-bottom) + var(--popover-arrow-clearance));
  left: 0;
  z-index: calc(var(--z-popover, 110) + 1);
  display: none;
  min-width: var(--popover-min-width);
  max-width: var(--popover-max-width);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--popover-panel-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  text-align: left;
  overflow: visible;
}
.popover_panel-closable .popover_body {
  padding-right: calc(var(--popover-padding-x) + var(--popover-close-size) * 0.15);
}
.popover_panel[hidden] {
  display: none;
}
.popover.is-open > .popover_panel {
  display: block !important;
}
.popover.is-open > .popover_panel[hidden] {
  display: block !important;
}
.popover_arrow {
  position: absolute;
  width: var(--popover-arrow-size);
  height: var(--popover-arrow-size);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  pointer-events: none;
}
.popover_header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-right: calc(var(--popover-padding-x) - var(--space-xs));
  border-bottom: 1px solid var(--color-border-subtle);
}
.popover_header .popover_title {
  flex: 1;
  min-width: 0;
  padding-right: 0;
  border-bottom: none;
}
.popover_title {
  padding: var(--popover-title-padding-y) var(--popover-padding-x);
  font-size: var(--popover-title-font-size);
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid var(--color-border-subtle);
}
.popover_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--popover-close-size);
  height: var(--popover-close-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.popover_close:focus-visible {
  outline-color: var(--color-accent);
}
.popover_close:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.popover_panel > .btn.popover_close.popover_close-floating {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 1;
}
.popover_close-icon {
  width: var(--popover-close-icon-size);
  height: var(--popover-close-icon-size);
}
.popover_body {
  padding: var(--popover-padding-y) var(--popover-padding-x);
  font-size: var(--popover-body-font-size);
  line-height: 1.5;
  color: var(--color-text);
}
.popover_body > :first-child {
  margin-top: 0;
}
.popover_body > :last-child {
  margin-bottom: 0;
}
.popover_footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: flex-end;
  padding: var(--popover-footer-padding-y) var(--popover-padding-x);
  border-top: 1px solid var(--color-border-subtle);
}
.popover_sm {
  --popover-min-width: var(--popover-min-width-sm);
  --popover-max-width: var(--popover-max-width-sm);
  --popover-padding-x: var(--popover-padding-x-sm);
  --popover-padding-y: var(--popover-padding-y-sm);
  --popover-title-padding-y: var(--popover-title-padding-y-sm);
  --popover-footer-padding-y: var(--popover-footer-padding-y-sm);
  --popover-title-font-size: var(--popover-title-font-size-sm);
  --popover-body-font-size: var(--popover-body-font-size-sm);
  --popover-arrow-size: var(--popover-arrow-size-sm);
  --popover-panel-radius: var(--radius-md);
}
.popover_lg {
  --popover-min-width: var(--popover-min-width-lg);
  --popover-max-width: var(--popover-max-width-lg);
  --popover-padding-x: var(--popover-padding-x-lg);
  --popover-padding-y: var(--popover-padding-y-lg);
  --popover-title-padding-y: var(--popover-title-padding-y-lg);
  --popover-footer-padding-y: var(--popover-footer-padding-y-lg);
  --popover-title-font-size: var(--popover-title-font-size-lg);
  --popover-body-font-size: var(--popover-body-font-size-lg);
  --popover-arrow-size: var(--popover-arrow-size-lg);
  --popover-panel-radius: var(--radius-lg);
}
.popover_offset-none {
  --popover-offset: 0;
  --popover-arrow-clearance: 0px;
}
.popover_offset-sm {
  --popover-offset: var(--popover-offset-sm);
}
.popover_offset-lg {
  --popover-offset: var(--popover-offset-lg);
}
.popover_offset-top-none {
  --popover-offset-top: 0;
}
.popover_offset-top-sm {
  --popover-offset-top: var(--popover-offset-sm);
}
.popover_offset-top-md {
  --popover-offset-top: var(--popover-offset-md);
}
.popover_offset-top-lg {
  --popover-offset-top: var(--popover-offset-lg);
}
.popover_offset-right-none {
  --popover-offset-right: 0;
}
.popover_offset-right-sm {
  --popover-offset-right: var(--popover-offset-sm);
}
.popover_offset-right-md {
  --popover-offset-right: var(--popover-offset-md);
}
.popover_offset-right-lg {
  --popover-offset-right: var(--popover-offset-lg);
}
.popover_offset-bottom-none {
  --popover-offset-bottom: 0;
}
.popover_offset-bottom-sm {
  --popover-offset-bottom: var(--popover-offset-sm);
}
.popover_offset-bottom-md {
  --popover-offset-bottom: var(--popover-offset-md);
}
.popover_offset-bottom-lg {
  --popover-offset-bottom: var(--popover-offset-lg);
}
.popover_offset-left-none {
  --popover-offset-left: 0;
}
.popover_offset-left-sm {
  --popover-offset-left: var(--popover-offset-sm);
}
.popover_offset-left-md {
  --popover-offset-left: var(--popover-offset-md);
}
.popover_offset-left-lg {
  --popover-offset-left: var(--popover-offset-lg);
}
.popover_placement-end .popover_panel {
  left: auto;
  right: 0;
}
.popover_placement-bottom-center .popover_panel {
  left: 50%;
  transform: translateX(-50%);
}
.popover_placement-top .popover_panel {
  top: auto;
  bottom: calc(100% + var(--popover-offset-top) + var(--popover-arrow-clearance));
}
.popover_placement-top-center .popover_panel {
  top: auto;
  bottom: calc(100% + var(--popover-offset-top) + var(--popover-arrow-clearance));
  left: 50%;
  transform: translateX(-50%);
}
.popover_placement-left .popover_panel {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + var(--popover-offset-left) + var(--popover-arrow-clearance));
  transform: translateY(-50%);
}
.popover_placement-right .popover_panel {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--popover-offset-right) + var(--popover-arrow-clearance));
  transform: translateY(-50%);
}
.popover_panel-align-center:not(.popover_arrow-anchor-mixed):not(.popover_placement-left, .popover_placement-right) .popover_panel {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.popover_panel-align-center:not(.popover_arrow-anchor-mixed).popover_placement-left .popover_panel, .popover_panel-align-center:not(.popover_arrow-anchor-mixed).popover_placement-right .popover_panel {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.popover_panel-align-end:not(.popover_arrow-anchor-mixed):not(.popover_placement-left, .popover_placement-right) .popover_panel {
  left: auto;
  right: 0;
  transform: none;
}
.popover_panel-align-end:not(.popover_arrow-anchor-mixed).popover_placement-left .popover_panel, .popover_panel-align-end:not(.popover_arrow-anchor-mixed).popover_placement-right .popover_panel {
  top: auto;
  bottom: 0;
  transform: none;
}
.popover:not(.popover_placement-top, .popover_placement-top-center, .popover_placement-left, .popover_placement-right, .popover_placement-bottom-center) .popover_arrow {
  top: 0;
  left: max(var(--popover-padding-x), var(--popover-arrow-edge-inset));
  transform: translateY(-50%) rotate(45deg);
  border-right: none;
  border-bottom: none;
}
.popover_placement-end:not(.popover_placement-top, .popover_placement-top-center, .popover_placement-left, .popover_placement-right, .popover_placement-bottom-center) .popover_arrow {
  left: auto;
  right: max(var(--popover-padding-x), var(--popover-arrow-edge-inset));
}
.popover_placement-bottom-center .popover_arrow {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: none;
  border-bottom: none;
}
.popover_placement-top:not(.popover_placement-left, .popover_placement-right, .popover_placement-top-center) .popover_arrow {
  top: auto;
  bottom: 0;
  left: max(var(--popover-padding-x), var(--popover-arrow-edge-inset));
  transform: translateY(50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.popover_placement-top:not(.popover_placement-left, .popover_placement-right, .popover_placement-top-center).popover_placement-end .popover_arrow {
  left: auto;
  right: max(var(--popover-padding-x), var(--popover-arrow-edge-inset));
}
.popover_placement-top-center .popover_arrow {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.popover_placement-left .popover_arrow {
  top: clamp(var(--popover-arrow-edge-inset), 50%, 100% - var(--popover-arrow-edge-inset));
  right: 0;
  left: auto;
  transform: translate(50%, -50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
.popover_placement-right .popover_arrow {
  top: clamp(var(--popover-arrow-edge-inset), 50%, 100% - var(--popover-arrow-edge-inset));
  left: 0;
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.popover_arrow-anchor-target:not(.popover_placement-top, .popover_placement-top-center, .popover_placement-left, .popover_placement-right) .popover_arrow, .popover_arrow-anchor-mixed:not(.popover_placement-top, .popover_placement-top-center, .popover_placement-left, .popover_placement-right) .popover_arrow {
  left: clamp(var(--popover-arrow-edge-inset), var(--popover-arrow-position, 50%), 100% - var(--popover-arrow-edge-inset));
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: none;
  border-bottom: none;
}
.popover_arrow-anchor-target.popover_placement-bottom-center .popover_arrow, .popover_arrow-anchor-mixed.popover_placement-bottom-center .popover_arrow {
  left: clamp(var(--popover-arrow-edge-inset), var(--popover-arrow-position, 50%), 100% - var(--popover-arrow-edge-inset));
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
}
.popover_arrow-anchor-target.popover_placement-top:not(.popover_placement-left, .popover_placement-right) .popover_arrow, .popover_arrow-anchor-target.popover_placement-top-center .popover_arrow, .popover_arrow-anchor-mixed.popover_placement-top:not(.popover_placement-left, .popover_placement-right) .popover_arrow, .popover_arrow-anchor-mixed.popover_placement-top-center .popover_arrow {
  top: auto;
  bottom: 0;
  left: clamp(var(--popover-arrow-edge-inset), var(--popover-arrow-position, 50%), 100% - var(--popover-arrow-edge-inset));
  right: auto;
  transform: translate(-50%, 50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.popover_arrow-anchor-target.popover_placement-left .popover_arrow, .popover_arrow-anchor-mixed.popover_placement-left .popover_arrow {
  top: clamp(var(--popover-arrow-edge-inset), var(--popover-arrow-position, 50%), 100% - var(--popover-arrow-edge-inset));
  right: 0;
  left: auto;
  transform: translate(50%, -50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
.popover_arrow-anchor-target.popover_placement-right .popover_arrow, .popover_arrow-anchor-mixed.popover_placement-right .popover_arrow {
  top: clamp(var(--popover-arrow-edge-inset), var(--popover-arrow-position, 50%), 100% - var(--popover-arrow-edge-inset));
  left: 0;
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.popover_no-arrow {
  --popover-arrow-clearance: 0px;
}
.popover_no-arrow .popover_arrow {
  display: none;
}
.popover_demo-stage {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  min-height: 18rem;
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-bg);
}
.popover_row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
.popover_inline-sentence {
  line-height: 1.6;
}
.popover_demo-placement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: 14rem;
  padding: var(--space-2xl) var(--space-xl);
}
.popover_demo-placement-cell-top {
  grid-column: 2;
  grid-row: 1;
}
.popover_demo-placement-cell-left {
  grid-column: 1;
  grid-row: 2;
}
.popover_demo-placement-cell-center {
  grid-column: 2;
  grid-row: 2;
}
.popover_demo-placement-cell-right {
  grid-column: 3;
  grid-row: 2;
}

.tooltip {
  --tooltip-offset: var(--tooltip-offset-md);
  --tooltip-offset-top: var(--tooltip-offset);
  --tooltip-offset-right: var(--tooltip-offset);
  --tooltip-offset-bottom: var(--tooltip-offset);
  --tooltip-offset-left: var(--tooltip-offset);
  --tooltip-arrow-clearance: calc(var(--tooltip-arrow-size) / 2);
  --tooltip-panel-radius: var(--radius-sm);
  --tooltip-arrow-edge-inset: calc(var(--tooltip-panel-radius) + var(--tooltip-arrow-size) * 0.35);
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.tooltip[data-tooltip-trigger=click] .tooltip_bubble {
  pointer-events: auto;
}
.tooltip.is-open > .tooltip_trigger {
  z-index: var(--z-tooltip, 120);
}
.tooltip.is-open > .tooltip_bubble {
  display: block;
}
.tooltip.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tooltip_trigger {
  position: relative;
  display: inline-flex;
}
.tooltip_bubble {
  position: absolute;
  top: calc(100% + var(--tooltip-offset-bottom) + var(--tooltip-arrow-clearance));
  left: 50%;
  z-index: calc(var(--z-tooltip, 120) + 1);
  display: none;
  width: max-content;
  max-width: var(--tooltip-max-width);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--tooltip-panel-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--tooltip-font-size);
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
  overflow: visible;
}
.tooltip_bubble-closable {
  padding-right: calc(var(--tooltip-padding-x) + var(--tooltip-close-size) * 0.35);
}
.tooltip_bubble[hidden] {
  display: none;
}
.tooltip.is-open > .tooltip_bubble {
  display: block !important;
}
.tooltip.is-open > .tooltip_bubble[hidden] {
  display: block !important;
}
.tooltip_arrow {
  position: absolute;
  width: var(--tooltip-arrow-size);
  height: var(--tooltip-arrow-size);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  pointer-events: none;
}
.tooltip_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tooltip-close-size);
  height: var(--tooltip-close-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.tooltip_close:focus-visible {
  outline-color: var(--color-accent);
}
.tooltip_close:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.tooltip_bubble > .btn.tooltip_close.tooltip_close-floating {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 1;
}
.tooltip_close-icon {
  width: var(--tooltip-close-icon-size);
  height: var(--tooltip-close-icon-size);
}
.tooltip_inverse .tooltip_bubble {
  border-color: transparent;
  background: var(--tooltip-inverse-bg);
  color: var(--tooltip-inverse-text);
  box-shadow: var(--shadow-sm);
}
.tooltip_inverse .tooltip_arrow {
  background: var(--tooltip-inverse-bg);
  border-color: transparent;
}
.tooltip_inverse .tooltip_close {
  color: var(--tooltip-inverse-text);
  opacity: 0.75;
}
.tooltip_inverse .tooltip_close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
.tooltip_sm {
  --tooltip-max-width: var(--tooltip-max-width-sm);
  --tooltip-padding-x: var(--tooltip-padding-x-sm);
  --tooltip-padding-y: var(--tooltip-padding-y-sm);
  --tooltip-font-size: var(--tooltip-font-size-sm);
  --tooltip-arrow-size: var(--tooltip-arrow-size-sm);
  --tooltip-panel-radius: var(--radius-sm);
}
.tooltip_lg {
  --tooltip-max-width: var(--tooltip-max-width-lg);
  --tooltip-padding-x: var(--tooltip-padding-x-lg);
  --tooltip-padding-y: var(--tooltip-padding-y-lg);
  --tooltip-font-size: var(--tooltip-font-size-lg);
  --tooltip-arrow-size: var(--tooltip-arrow-size-lg);
  --tooltip-panel-radius: var(--radius-md);
}
.tooltip_offset-none {
  --tooltip-offset: 0;
  --tooltip-arrow-clearance: 0px;
}
.tooltip_offset-sm {
  --tooltip-offset: var(--tooltip-offset-sm);
}
.tooltip_offset-lg {
  --tooltip-offset: var(--tooltip-offset-lg);
}
.tooltip_offset-top-none {
  --tooltip-offset-top: 0;
}
.tooltip_offset-top-sm {
  --tooltip-offset-top: var(--tooltip-offset-sm);
}
.tooltip_offset-top-md {
  --tooltip-offset-top: var(--tooltip-offset-md);
}
.tooltip_offset-top-lg {
  --tooltip-offset-top: var(--tooltip-offset-lg);
}
.tooltip_offset-right-none {
  --tooltip-offset-right: 0;
}
.tooltip_offset-right-sm {
  --tooltip-offset-right: var(--tooltip-offset-sm);
}
.tooltip_offset-right-md {
  --tooltip-offset-right: var(--tooltip-offset-md);
}
.tooltip_offset-right-lg {
  --tooltip-offset-right: var(--tooltip-offset-lg);
}
.tooltip_offset-bottom-none {
  --tooltip-offset-bottom: 0;
}
.tooltip_offset-bottom-sm {
  --tooltip-offset-bottom: var(--tooltip-offset-sm);
}
.tooltip_offset-bottom-md {
  --tooltip-offset-bottom: var(--tooltip-offset-md);
}
.tooltip_offset-bottom-lg {
  --tooltip-offset-bottom: var(--tooltip-offset-lg);
}
.tooltip_offset-left-none {
  --tooltip-offset-left: 0;
}
.tooltip_offset-left-sm {
  --tooltip-offset-left: var(--tooltip-offset-sm);
}
.tooltip_offset-left-md {
  --tooltip-offset-left: var(--tooltip-offset-md);
}
.tooltip_offset-left-lg {
  --tooltip-offset-left: var(--tooltip-offset-lg);
}
.tooltip_placement-top .tooltip_bubble {
  top: auto;
  bottom: calc(100% + var(--tooltip-offset-top) + var(--tooltip-arrow-clearance));
}
.tooltip_placement-end .tooltip_bubble {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip_placement-start .tooltip_bubble {
  left: 0;
  transform: none;
}
.tooltip_placement-top-start .tooltip_bubble {
  top: auto;
  bottom: calc(100% + var(--tooltip-offset-top) + var(--tooltip-arrow-clearance));
  left: 0;
  transform: none;
}
.tooltip_placement-top-end .tooltip_bubble {
  top: auto;
  bottom: calc(100% + var(--tooltip-offset-top) + var(--tooltip-arrow-clearance));
  left: auto;
  right: 0;
  transform: none;
}
.tooltip_placement-left .tooltip_bubble {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + var(--tooltip-offset-left) + var(--tooltip-arrow-clearance));
  transform: translateY(-50%);
}
.tooltip_placement-right .tooltip_bubble {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--tooltip-offset-right) + var(--tooltip-arrow-clearance));
  transform: translateY(-50%);
}
.tooltip_panel-align-start:not(.tooltip_arrow-anchor-mixed):not(.tooltip_placement-left, .tooltip_placement-right, .tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end) .tooltip_bubble {
  left: 0;
  transform: none;
}
.tooltip_panel-align-end:not(.tooltip_arrow-anchor-mixed):not(.tooltip_placement-left, .tooltip_placement-right, .tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end) .tooltip_bubble {
  left: auto;
  right: 0;
  transform: none;
}
.tooltip_panel-align-end:not(.tooltip_arrow-anchor-mixed).tooltip_placement-left .tooltip_bubble, .tooltip_panel-align-end:not(.tooltip_arrow-anchor-mixed).tooltip_placement-right .tooltip_bubble {
  top: auto;
  bottom: 0;
  transform: none;
}
.tooltip_panel-align-center:not(.tooltip_arrow-anchor-mixed).tooltip_placement-left .tooltip_bubble, .tooltip_panel-align-center:not(.tooltip_arrow-anchor-mixed).tooltip_placement-right .tooltip_bubble {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.tooltip:not(.tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end, .tooltip_placement-left, .tooltip_placement-right) .tooltip_arrow {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: none;
  border-bottom: none;
}
.tooltip_placement-start:not(.tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end, .tooltip_placement-left, .tooltip_placement-right) .tooltip_arrow {
  left: max(var(--tooltip-padding-x), var(--tooltip-arrow-edge-inset));
  transform: translateY(-50%) rotate(45deg);
}
.tooltip_placement-end:not(.tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end, .tooltip_placement-left, .tooltip_placement-right) .tooltip_arrow {
  left: auto;
  right: max(var(--tooltip-padding-x), var(--tooltip-arrow-edge-inset));
  transform: translateY(-50%) rotate(45deg);
}
.tooltip_placement-top:not(.tooltip_placement-left, .tooltip_placement-right, .tooltip_placement-top-start, .tooltip_placement-top-end) .tooltip_arrow {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tooltip_placement-top-start .tooltip_arrow {
  top: auto;
  bottom: 0;
  left: max(var(--tooltip-padding-x), var(--tooltip-arrow-edge-inset));
  transform: translateY(50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tooltip_placement-top-end .tooltip_arrow {
  top: auto;
  bottom: 0;
  left: auto;
  right: max(var(--tooltip-padding-x), var(--tooltip-arrow-edge-inset));
  transform: translateY(50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tooltip_placement-left .tooltip_arrow {
  top: clamp(var(--tooltip-arrow-edge-inset), 50%, 100% - var(--tooltip-arrow-edge-inset));
  right: 0;
  left: auto;
  transform: translate(50%, -50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
.tooltip_placement-right .tooltip_arrow {
  top: clamp(var(--tooltip-arrow-edge-inset), 50%, 100% - var(--tooltip-arrow-edge-inset));
  left: 0;
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.tooltip_arrow-anchor-mixed .tooltip_bubble {
  left: 0;
  right: auto;
  transform: none;
}
.tooltip_arrow-anchor-target:not(.tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end, .tooltip_placement-left, .tooltip_placement-right) .tooltip_arrow, .tooltip_arrow-anchor-mixed:not(.tooltip_placement-top, .tooltip_placement-top-start, .tooltip_placement-top-end, .tooltip_placement-left, .tooltip_placement-right) .tooltip_arrow {
  left: clamp(var(--tooltip-arrow-edge-inset), var(--tooltip-arrow-position, 50%), 100% - var(--tooltip-arrow-edge-inset));
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-right: none;
  border-bottom: none;
}
.tooltip_arrow-anchor-target.tooltip_placement-top:not(.tooltip_placement-left, .tooltip_placement-right, .tooltip_placement-top-start, .tooltip_placement-top-end) .tooltip_arrow, .tooltip_arrow-anchor-target.tooltip_placement-top-start .tooltip_arrow, .tooltip_arrow-anchor-target.tooltip_placement-top-end .tooltip_arrow, .tooltip_arrow-anchor-mixed.tooltip_placement-top:not(.tooltip_placement-left, .tooltip_placement-right, .tooltip_placement-top-start, .tooltip_placement-top-end) .tooltip_arrow, .tooltip_arrow-anchor-mixed.tooltip_placement-top-start .tooltip_arrow, .tooltip_arrow-anchor-mixed.tooltip_placement-top-end .tooltip_arrow {
  top: auto;
  bottom: 0;
  left: clamp(var(--tooltip-arrow-edge-inset), var(--tooltip-arrow-position, 50%), 100% - var(--tooltip-arrow-edge-inset));
  right: auto;
  transform: translate(-50%, 50%) rotate(45deg);
  border-top: none;
  border-left: none;
}
.tooltip_arrow-anchor-target.tooltip_placement-left .tooltip_arrow, .tooltip_arrow-anchor-mixed.tooltip_placement-left .tooltip_arrow {
  top: clamp(var(--tooltip-arrow-edge-inset), var(--tooltip-arrow-position, 50%), 100% - var(--tooltip-arrow-edge-inset));
  right: 0;
  left: auto;
  transform: translate(50%, -50%) rotate(45deg);
  border-bottom: none;
  border-left: none;
}
.tooltip_arrow-anchor-target.tooltip_placement-right .tooltip_arrow, .tooltip_arrow-anchor-mixed.tooltip_placement-right .tooltip_arrow {
  top: clamp(var(--tooltip-arrow-edge-inset), var(--tooltip-arrow-position, 50%), 100% - var(--tooltip-arrow-edge-inset));
  left: 0;
  right: auto;
  transform: translate(-50%, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
}
.tooltip_no-arrow {
  --tooltip-arrow-clearance: 0px;
}
.tooltip_no-arrow .tooltip_arrow {
  display: none;
}
.tooltip_demo-stage {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  min-height: 12rem;
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--color-bg);
}
.tooltip_row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}
.tooltip_demo-placement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: 14rem;
  padding: var(--space-2xl) var(--space-xl);
}
.tooltip_demo-placement-cell-top {
  grid-column: 2;
  grid-row: 1;
}
.tooltip_demo-placement-cell-left {
  grid-column: 1;
  grid-row: 2;
}
.tooltip_demo-placement-cell-center {
  grid-column: 2;
  grid-row: 2;
}
.tooltip_demo-placement-cell-right {
  grid-column: 3;
  grid-row: 2;
}

.tabs {
  width: 100%;
  font-size: var(--tabs-font-size);
  color: var(--color-text);
}
.tabs_bar {
  display: flex;
  align-items: stretch;
  gap: var(--tabs-bar-gap);
  min-width: 0;
}
.tabs_list-wrap {
  flex: 1;
  min-width: 0;
}
.tabs_list {
  display: flex;
  align-items: stretch;
  gap: var(--tabs-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs_indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--tabs-indicator-transition);
}
.tabs_tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tabs-badge-gap);
  flex-shrink: 0;
  margin: 0;
  padding: var(--tabs-tab-padding-y) var(--tabs-tab-padding-x);
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: var(--tabs-font-weight);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.tabs_tab:focus-visible {
  outline-color: var(--color-accent);
}
.tabs_tab.btn {
  min-width: 0;
  height: auto;
  font-size: inherit;
}
.tabs_tab.btn.btn_text {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}
.tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  color: var(--color-text);
  background: transparent;
}
.tabs_tab.btn.btn_text.is-active, .tabs_tab.btn.btn_text[aria-selected=true] {
  color: var(--color-accent-text);
}
.tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  color: var(--color-accent-text);
}
.tabs_tab.btn .btn_label {
  min-width: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.tabs_tab:hover:not(.is-disabled):not(:disabled) {
  color: var(--color-text);
}
.tabs_tab.is-active, .tabs_tab[aria-selected=true] {
  color: var(--color-accent-text);
  font-weight: var(--tabs-font-weight-active);
}
.tabs_tab.is-disabled, .tabs_tab:disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.tabs_icon {
  flex-shrink: 0;
  width: var(--tabs-icon-size);
  height: var(--tabs-icon-size);
  color: currentColor;
}
.tabs_label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabs_badge {
  flex-shrink: 0;
}
.tabs_extra {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  margin-left: auto;
}
.tabs_panels {
  min-width: 0;
}
.tabs_panel {
  padding: var(--tabs-panel-padding-y) 0 0;
  color: var(--color-text);
  font-size: var(--text-size-sm);
  line-height: 1.6;
}
.tabs_panel[hidden] {
  display: none;
}
.tabs_panel-placeholder {
  margin: 0;
  padding: var(--space-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  text-align: center;
}
.tabs_indicator-slide .tabs_list {
  position: relative;
}
.tabs_indicator-slide .tabs_tab {
  position: relative;
  z-index: 1;
}
.tabs_indicator-slide.tabs_line .tabs_tab {
  border-bottom-color: transparent;
}
.tabs_indicator-slide.tabs_line .tabs_indicator {
  background: var(--color-accent-text);
}
.tabs_indicator-slide.tabs_pill .tabs_tab {
  background: var(--color-surface-raised);
}
.tabs_indicator-slide.tabs_pill .tabs_tab.is-active, .tabs_indicator-slide.tabs_pill .tabs_tab[aria-selected=true] {
  background: transparent;
  box-shadow: none;
}
.tabs_indicator-slide.tabs_pill .tabs_tab.btn.btn_text.is-active, .tabs_indicator-slide.tabs_pill .tabs_tab.btn.btn_text[aria-selected=true] {
  background: transparent;
  box-shadow: none;
}
.tabs_indicator-slide.tabs_pill .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_indicator-slide.tabs_pill .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
  box-shadow: none;
}
.tabs_indicator-slide.tabs_pill .tabs_indicator {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_indicator-slide.tabs_vertical.tabs_line .tabs_tab {
  border-right-color: transparent;
}
.tabs_indicator-slide.tabs_vertical.tabs_line .tabs_indicator {
  background: var(--color-accent-text);
}
.tabs_line .tabs_bar {
  border-bottom: 1px solid var(--color-border);
}
.tabs_line .tabs_tab {
  position: relative;
  margin-bottom: -1px;
  border-bottom: var(--tabs-indicator-height) solid transparent;
}
.tabs_line .tabs_tab.is-active, .tabs_line .tabs_tab[aria-selected=true] {
  border-bottom-color: var(--color-accent-text);
}
.tabs_line .tabs_tab.is-active:hover:not(.is-disabled):not(:disabled), .tabs_line .tabs_tab[aria-selected=true]:hover:not(.is-disabled):not(:disabled) {
  border-bottom-color: var(--color-accent-text);
}
.tabs_line .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
}
.tabs_line .tabs_tab.btn.btn_text.is-active, .tabs_line .tabs_tab.btn.btn_text[aria-selected=true] {
  background: transparent;
}
.tabs_line .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_line .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
}
.tabs_card .tabs_bar {
  gap: 0;
  border-bottom: 1px solid var(--color-border);
}
.tabs_card .tabs_list {
  gap: 0;
}
.tabs_card .tabs_tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface-raised);
}
.tabs_card .tabs_tab.is-active, .tabs_card .tabs_tab[aria-selected=true] {
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_card .tabs_tab.btn.btn_text {
  border: 1px solid transparent;
  border-bottom: none;
  background: var(--color-surface-raised);
}
.tabs_card .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: var(--color-surface-raised);
}
.tabs_card .tabs_tab.btn.btn_text.is-active, .tabs_card .tabs_tab.btn.btn_text[aria-selected=true] {
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_card .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_card .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_card .tabs_panel {
  padding: var(--tabs-panel-padding-y) var(--space-lg);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
}
.tabs_pill .tabs_list {
  padding: var(--tabs-pill-padding);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.tabs_pill .tabs_tab {
  border-radius: var(--radius-sm);
}
.tabs_pill .tabs_tab.is-active, .tabs_pill .tabs_tab[aria-selected=true] {
  color: var(--color-accent-text);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_pill .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
}
.tabs_pill .tabs_tab.btn.btn_text.is-active, .tabs_pill .tabs_tab.btn.btn_text[aria-selected=true] {
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_pill .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_pill .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_pill .tabs_panel {
  padding-top: var(--tabs-panel-padding-y);
}
.tabs_sm {
  --tabs-font-size: var(--tabs-font-size-sm);
  --tabs-tab-padding-y: var(--tabs-tab-padding-y-sm);
  --tabs-tab-padding-x: var(--tabs-tab-padding-x-sm);
  --tabs-icon-size: var(--tabs-icon-size-sm);
}
.tabs_lg {
  --tabs-font-size: var(--tabs-font-size-lg);
  --tabs-tab-padding-y: var(--tabs-tab-padding-y-lg);
  --tabs-tab-padding-x: var(--tabs-tab-padding-x-lg);
  --tabs-icon-size: var(--tabs-icon-size-lg);
}
.tabs_equal .tabs_list-wrap {
  width: 100%;
}
.tabs_equal .tabs_list {
  width: 100%;
}
.tabs_equal .tabs_tab {
  flex: 1 1 0;
  min-width: 0;
}
.tabs_equal.tabs_vertical .tabs_list {
  width: 100%;
}
.tabs_equal.tabs_vertical .tabs_tab {
  width: 100%;
}
.tabs_scroll-nav .tabs_bar {
  align-items: center;
}
.tabs_scroll-nav .tabs_scroll-viewport {
  overflow: hidden;
}
.tabs_scroll-nav .tabs_list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs_scroll-nav .tabs_list::-webkit-scrollbar {
  display: none;
}
.tabs_nav {
  flex-shrink: 0;
  width: var(--tabs-nav-size);
  min-width: var(--tabs-nav-size);
  height: var(--tabs-nav-size);
  padding: 0;
}
.tabs_nav.btn_outline.color_default {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}
.tabs_nav.btn_outline.color_default:hover:not(:disabled):not(.is-disabled):not(.is-loading) {
  color: var(--color-accent-text-hover);
  border-color: var(--color-accent);
  background-color: var(--color-surface);
}
.tabs_nav.btn_outline.color_default:disabled, .tabs_nav.btn_outline.color_default.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.tabs_scrollable .tabs_bar {
  overflow: hidden;
}
.tabs_scrollable .tabs_list-wrap {
  overflow: hidden;
}
.tabs_scrollable .tabs_list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs_scrollable .tabs_list::-webkit-scrollbar {
  height: 4px;
}
.tabs_scrollable .tabs_list::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.tabs_vertical {
  display: flex;
  gap: var(--space-lg);
  align-items: stretch;
}
.tabs_vertical .tabs_bar {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
}
.tabs_vertical .tabs_list {
  flex-direction: column;
  align-items: stretch;
  min-width: 10rem;
}
.tabs_vertical .tabs_tab {
  justify-content: flex-start;
  width: 100%;
  border-radius: var(--radius-sm);
  text-align: left;
}
.tabs_vertical .tabs_tab.btn {
  width: 100%;
  align-self: stretch;
}
.tabs_vertical .tabs_tab.btn.btn_fit {
  width: 100%;
}
.tabs_vertical .tabs_tab.btn.btn_text {
  justify-content: flex-start;
}
.tabs_vertical .tabs_panels {
  flex: 1;
  min-width: 0;
}
.tabs_vertical .tabs_panel {
  padding-top: 0;
}
.tabs_vertical.tabs_line .tabs_bar {
  border-bottom: none;
  border-right: 1px solid var(--color-border);
  padding-right: var(--space-md);
}
.tabs_vertical.tabs_line .tabs_tab {
  position: relative;
  margin-bottom: 0;
  margin-right: -1px;
  border-bottom: none;
  border-right: var(--tabs-indicator-height) solid transparent;
}
.tabs_vertical.tabs_line .tabs_tab.is-active, .tabs_vertical.tabs_line .tabs_tab[aria-selected=true] {
  border-right-color: var(--color-accent-text);
}
.tabs_vertical.tabs_line .tabs_tab.is-active:hover:not(.is-disabled):not(:disabled), .tabs_vertical.tabs_line .tabs_tab[aria-selected=true]:hover:not(.is-disabled):not(:disabled) {
  border-right-color: var(--color-accent-text);
}
.tabs_vertical.tabs_line .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
}
.tabs_vertical.tabs_line .tabs_tab.btn.btn_text.is-active, .tabs_vertical.tabs_line .tabs_tab.btn.btn_text[aria-selected=true] {
  background: transparent;
}
.tabs_vertical.tabs_line .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_vertical.tabs_line .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
  border-right-color: var(--color-accent-text);
}
.tabs_vertical.tabs_card .tabs_bar {
  gap: 0;
  border-bottom: none;
  border-right: 1px solid var(--color-border);
}
.tabs_vertical.tabs_card .tabs_list {
  gap: 0;
}
.tabs_vertical.tabs_card .tabs_tab {
  margin-right: -1px;
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-surface-raised);
}
.tabs_vertical.tabs_card .tabs_tab.is-active, .tabs_vertical.tabs_card .tabs_tab[aria-selected=true] {
  border-color: var(--color-border);
  border-right-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_vertical.tabs_card .tabs_tab.btn.btn_text {
  border: 1px solid transparent;
  border-right: none;
  background: var(--color-surface-raised);
}
.tabs_vertical.tabs_card .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: var(--color-surface-raised);
}
.tabs_vertical.tabs_card .tabs_tab.btn.btn_text.is-active, .tabs_vertical.tabs_card .tabs_tab.btn.btn_text[aria-selected=true] {
  border-color: var(--color-border);
  border-right-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_vertical.tabs_card .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_vertical.tabs_card .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  border-color: var(--color-border);
  border-right-color: var(--color-surface);
  background: var(--color-surface);
  color: var(--color-accent-text);
}
.tabs_vertical.tabs_card .tabs_panel {
  padding: var(--tabs-panel-padding-y) var(--space-lg);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-surface);
}
.tabs_vertical.tabs_pill .tabs_list {
  padding: var(--tabs-pill-padding);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}
.tabs_vertical.tabs_pill .tabs_tab.is-active, .tabs_vertical.tabs_pill .tabs_tab[aria-selected=true] {
  color: var(--color-accent-text);
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_vertical.tabs_pill .tabs_tab.btn.btn_text:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: transparent;
}
.tabs_vertical.tabs_pill .tabs_tab.btn.btn_text.is-active, .tabs_vertical.tabs_pill .tabs_tab.btn.btn_text[aria-selected=true] {
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_vertical.tabs_pill .tabs_tab.btn.btn_text.is-active:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]), .tabs_vertical.tabs_pill .tabs_tab.btn.btn_text[aria-selected=true]:hover:not(.is-disabled):not(:disabled):not([aria-disabled=true]) {
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tabs_demo-narrow {
  max-width: 20rem;
}

.carousel {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  font-size: var(--carousel-font-size);
  color: var(--color-text);
}
.carousel_demo {
  width: 100%;
  max-width: 100%;
}
.carousel .swiper {
  width: 100%;
  max-width: 100%;
  min-height: var(--carousel-height);
  border-radius: var(--carousel-radius);
  overflow: hidden;
  container-type: inline-size;
  --swiper-navigation-size: var(--carousel-nav-size);
  --swiper-navigation-color: var(--carousel-nav-color);
  --swiper-navigation-sides-offset: var(--carousel-nav-offset);
  --swiper-navigation-top-offset: 50%;
  --swiper-pagination-color: var(--carousel-dot-bg-active);
  --swiper-pagination-bullet-size: var(--carousel-dot-size);
  --swiper-pagination-bullet-horizontal-gap: var(--carousel-dot-gap);
  --swiper-pagination-bullet-inactive-color: var(--carousel-dot-bg);
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bottom: var(--carousel-dots-padding-y);
}
.carousel:has(.swiper-slide .card_media, .swiper-slide .card_media-placeholder) .swiper {
  --swiper-navigation-top-offset: var(--carousel-media-nav-top);
}
.carousel:has(.swiper-slide .card_media, .swiper-slide .card_media-placeholder) .swiper-button-prev,
.carousel:has(.swiper-slide .card_media, .swiper-slide .card_media-placeholder) .swiper-button-next {
  top: var(--carousel-media-nav-top);
}
.carousel:not(.carousel_multi) .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}
.carousel .swiper-slide {
  display: flex;
  height: auto;
  box-sizing: border-box;
}
.carousel .swiper-slide > .card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--carousel-height);
  border-radius: 0;
}
.carousel .swiper[data-swiper-space-between] .swiper-slide > .card, .carousel_multi .swiper-slide > .card {
  border-radius: var(--radius-lg);
}
.carousel .swiper-button-prev,
.carousel .swiper-button-next {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-nav-size);
  height: var(--carousel-nav-size);
  margin-top: calc(var(--carousel-nav-size) * -0.5);
  color: var(--carousel-nav-color);
  border: 1px solid var(--carousel-nav-border);
  border-radius: var(--radius-pill);
  background: var(--carousel-nav-bg);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.carousel .swiper-button-prev:focus-visible,
.carousel .swiper-button-next:focus-visible {
  outline-color: var(--color-accent);
}
.carousel .swiper-button-prev svg,
.carousel .swiper-button-prev .swiper-navigation-icon,
.carousel .swiper-button-next svg,
.carousel .swiper-button-next .swiper-navigation-icon {
  width: var(--carousel-nav-icon-size);
  height: var(--carousel-nav-icon-size);
  flex-shrink: 0;
}
.carousel .swiper-button-prev::after,
.carousel .swiper-button-next::after {
  font-size: var(--carousel-nav-icon-size);
  font-weight: 700;
}
.carousel .swiper-button-prev:hover,
.carousel .swiper-button-next:hover {
  background: var(--carousel-nav-bg-hover);
  border-color: var(--carousel-nav-border-hover);
  color: var(--carousel-nav-color-hover);
}
.carousel .swiper-button-prev.swiper-button-disabled,
.carousel .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.carousel .swiper-pagination-bullet {
  opacity: 1;
  transition: background-color var(--transition-fast), width var(--transition-fast), transform var(--transition-fast);
}
.carousel .swiper-pagination-bullet:hover {
  background: var(--carousel-dot-bg-hover);
}
.carousel .swiper-pagination-bullet-active {
  width: var(--carousel-dot-size-active);
  border-radius: var(--radius-pill);
}
.carousel .swiper-pagination-fraction {
  font-size: var(--text-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.carousel .swiper-pagination-progressbar {
  background: color-mix(in srgb, var(--carousel-dot-bg) 70%, transparent);
}
.carousel .swiper-pagination-progressbar-fill {
  background: var(--carousel-dot-bg-active);
}
.carousel_pagination-progress .swiper {
  --swiper-pagination-bottom: 0;
}
.carousel_pagination-progress .swiper-pagination-progressbar {
  top: auto;
  bottom: 0;
  height: 0.25rem;
}
.carousel_pagination-custom .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--carousel-dot-gap);
}
.carousel_pagination-custom .swiper-pagination-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 !important;
  border-radius: var(--radius-pill);
  font-size: var(--text-size-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--carousel-dot-bg);
}
.carousel_pagination-custom .swiper-pagination-bullet-active {
  width: 1.5rem;
  color: var(--color-surface);
  background: var(--carousel-dot-bg-active);
}
.carousel_coverflow {
  --carousel-coverflow-gap: 0px;
  --carousel-coverflow-aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  container-type: inline-size;
}
.carousel_coverflow .swiper {
  overflow: hidden;
  padding-block: var(--space-md);
}
.carousel_coverflow .swiper-slide {
  width: var(--carousel-coverflow-slide-width, calc((100cqi - 2 * var(--carousel-coverflow-gap)) / 3));
  height: auto !important;
  aspect-ratio: var(--carousel-coverflow-aspect-ratio);
  max-height: min(24rem, 75svh);
  flex-shrink: 0;
  box-sizing: border-box;
  align-items: stretch;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.carousel_coverflow .swiper-slide > .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.carousel_coverflow .swiper-slide .card_media,
.carousel_coverflow .swiper-slide .card_media-placeholder {
  flex: 0 0 auto;
  min-height: 0;
}
.carousel_coverflow .swiper-slide .card_header {
  flex-shrink: 0;
}
.carousel_coverflow .swiper-slide .card_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carousel_coverflow .swiper-slide .card_body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.carousel_coverflow-sides-1 .swiper-slide, .carousel_coverflow-sides-15 .swiper-slide, .carousel_coverflow-sides-auto .swiper-slide, .carousel_coverflow-sides-2 .swiper-slide {
  width: var(--carousel-coverflow-slide-width, calc((100cqi - 2 * var(--carousel-coverflow-gap)) / 3));
}
.carousel_coverflow-rise .swiper-slide {
  align-items: stretch;
  justify-content: stretch;
}
.carousel_grid .swiper {
  height: calc(var(--carousel-height) * 2 + var(--space-md));
}
.carousel_grid .swiper-slide {
  height: calc((100% - var(--space-md)) / 2) !important;
}
.carousel_grid .swiper-slide > .card {
  min-height: 0;
  height: 100%;
  border-radius: var(--radius-lg);
}
.carousel_gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  min-width: 0;
}
.carousel_thumbs {
  overflow-x: visible;
}
.carousel_thumbs .swiper {
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.carousel_thumbs .swiper-wrapper {
  justify-content: flex-start;
}
.carousel_thumbs .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.carousel_thumbs .swiper-slide > .card {
  width: 100%;
  min-height: 4.5rem;
  border-radius: var(--radius-md);
}
.carousel_thumbs .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.carousel_toggle {
  position: absolute;
  top: var(--carousel-nav-offset);
  right: var(--carousel-nav-offset);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--carousel-toggle-size);
  height: var(--carousel-toggle-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--carousel-nav-border);
  border-radius: var(--radius-pill);
  background: var(--carousel-nav-bg);
  color: var(--carousel-nav-color);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.carousel_toggle:focus-visible {
  outline-color: var(--color-accent);
}
.carousel_toggle:hover {
  background: var(--carousel-nav-bg-hover);
  border-color: var(--carousel-nav-border-hover);
  color: var(--carousel-nav-color-hover);
}
.carousel_toggle .carousel_toggle-icon-play {
  display: none;
}
.carousel_toggle[aria-pressed=false] .carousel_toggle-icon-pause {
  display: none;
}
.carousel_toggle[aria-pressed=false] .carousel_toggle-icon-play {
  display: block;
}
.carousel_toggle-icon {
  width: var(--carousel-toggle-icon-size);
  height: var(--carousel-toggle-icon-size);
  flex-shrink: 0;
}
.carousel_multi {
  max-width: 100%;
}
.carousel_multi .swiper-slide {
  width: min(18rem, 78%);
  height: auto;
}
.carousel_multi .swiper-slide > .card {
  min-height: var(--carousel-height);
  border-radius: var(--radius-lg);
}
.carousel_dots-outside .swiper {
  padding-bottom: 0;
}
.carousel_dots-outside > .swiper-pagination {
  position: static;
  width: 100%;
  margin-top: var(--space-sm);
}
.carousel_dots-outside .carousel_toggle {
  top: var(--space-sm);
  right: 0;
}
.carousel_sm {
  --carousel-height: var(--carousel-height-sm);
  --carousel-font-size: var(--carousel-font-size-sm);
  --carousel-nav-size: var(--carousel-nav-size-sm);
  --carousel-nav-icon-size: var(--carousel-nav-icon-size-sm);
  --carousel-dot-size: var(--carousel-dot-size-sm);
  --carousel-dot-size-active: var(--carousel-dot-size-active-sm);
  --carousel-toggle-size: var(--carousel-toggle-size-sm);
  --carousel-toggle-icon-size: var(--carousel-toggle-icon-size-sm);
}
.carousel_lg {
  --carousel-height: var(--carousel-height-lg);
  --carousel-font-size: var(--carousel-font-size-lg);
  --carousel-nav-size: var(--carousel-nav-size-lg);
  --carousel-nav-icon-size: var(--carousel-nav-icon-size-lg);
  --carousel-dot-size: var(--carousel-dot-size-lg);
  --carousel-dot-size-active: var(--carousel-dot-size-active-lg);
  --carousel-toggle-size: var(--carousel-toggle-size-lg);
  --carousel-toggle-icon-size: var(--carousel-toggle-icon-size-lg);
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-size: var(--accordion-font-size);
  color: var(--color-text);
}
.accordion_item {
  min-width: 0;
}
.accordion_item.is-disabled .accordion_trigger {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.accordion_heading {
  margin: 0;
  font: inherit;
  font-weight: inherit;
}
.accordion_trigger {
  display: flex;
  align-items: center;
  gap: var(--accordion-trigger-gap);
  width: 100%;
  margin: 0;
  padding: var(--accordion-trigger-padding-y) var(--accordion-trigger-padding-x);
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--accordion-trigger-font-weight);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.accordion_trigger:focus-visible {
  outline-color: var(--color-accent);
}
.accordion_trigger:hover:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-raised);
}
.accordion_trigger[aria-expanded=true] {
  color: var(--color-accent-text);
}
.accordion_trigger.btn {
  min-width: 0;
  height: auto;
  border-radius: 0;
}
.accordion_trigger.btn.btn_text {
  color: inherit;
  background: transparent;
  border-color: transparent;
}
.accordion_trigger.btn.btn_text:hover:not(.is-disabled):not(:disabled) {
  color: inherit;
  background: var(--color-surface-raised);
  border-color: transparent;
}
.accordion_trigger.btn .btn_label {
  display: contents;
}
.accordion_label {
  flex: 1;
  min-width: 0;
}
.accordion_extra {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-size-xs);
  font-weight: 400;
}
.accordion_icon {
  flex-shrink: 0;
  width: var(--accordion-icon-size);
  height: var(--accordion-icon-size);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.accordion_trigger[aria-expanded=true] .accordion_icon {
  transform: rotate(180deg);
  color: var(--color-accent-text);
}
.accordion_panel {
  min-width: 0;
}
.accordion_panel[hidden] {
  display: none;
}
.accordion[data-effect=slide] .accordion_panel {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .accordion[data-effect=slide] .accordion_panel {
    transition: none !important;
  }
}
.accordion_content {
  padding: var(--accordion-content-padding-y) var(--accordion-content-padding-x);
  color: var(--color-text);
  font-size: var(--accordion-content-font-size);
  line-height: 1.6;
}
.accordion_content > :first-child {
  margin-top: 0;
}
.accordion_content > :last-child {
  margin-bottom: 0;
}
.accordion_bordered {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.accordion_bordered .accordion_item + .accordion_item {
  border-top: 1px solid var(--color-border);
}
.accordion_bordered .accordion_trigger[aria-expanded=true] {
  background: var(--color-surface-raised);
}
.accordion_flush {
  gap: 0;
}
.accordion_flush .accordion_item + .accordion_item {
  border-top: 1px solid var(--color-border);
}
.accordion_card {
  gap: var(--accordion-card-gap);
}
.accordion_card .accordion_item {
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  overflow: hidden;
}
.accordion_card .accordion_item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.accordion_card .accordion_item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.accordion_card .accordion_item:only-child {
  border-radius: var(--radius-md);
}
.accordion_card .accordion_item + .accordion_item {
  border-top: none;
}
.accordion_card .accordion_trigger.btn.btn_text {
  background: var(--accordion-card-trigger-bg);
}
.accordion_card .accordion_trigger.btn.btn_text:hover:not(.is-disabled):not(:disabled) {
  background: var(--accordion-card-trigger-bg);
}
.accordion_card .accordion_trigger.btn.btn_text[aria-expanded=true] {
  background: var(--accordion-card-trigger-bg);
}
.accordion_card .accordion_trigger.btn.btn_text[aria-expanded=true]:hover:not(.is-disabled):not(:disabled) {
  background: var(--accordion-card-trigger-bg);
}
.accordion_card .accordion_panel {
  background: var(--color-surface);
}
.accordion_sm {
  --accordion-font-size: var(--accordion-font-size-sm);
  --accordion-trigger-padding-y: var(--accordion-trigger-padding-y-sm);
  --accordion-trigger-padding-x: var(--accordion-trigger-padding-x-sm);
  --accordion-content-padding-y: var(--accordion-content-padding-y-sm);
  --accordion-content-padding-x: var(--accordion-content-padding-x-sm);
  --accordion-icon-size: var(--accordion-icon-size-sm);
}
.accordion_lg {
  --accordion-font-size: var(--accordion-font-size-lg);
  --accordion-trigger-padding-y: var(--accordion-trigger-padding-y-lg);
  --accordion-trigger-padding-x: var(--accordion-trigger-padding-x-lg);
  --accordion-content-padding-y: var(--accordion-content-padding-y-lg);
  --accordion-content-padding-x: var(--accordion-content-padding-x-lg);
  --accordion-icon-size: var(--accordion-icon-size-lg);
}
.accordion_demo-narrow {
  width: 100%;
  max-width: 28rem;
}

.collapse {
  width: 100%;
  min-width: 0;
  font-size: var(--collapse-content-font-size);
  color: var(--color-text);
  line-height: 1.6;
}
.collapse[hidden] {
  display: none;
}
.collapse[data-effect=slide] {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .collapse[data-effect=slide] {
    transition: none !important;
  }
}
.collapse > :first-child {
  margin-top: 0;
}
.collapse > :last-child {
  margin-bottom: 0;
}
.collapse_inner {
  padding: var(--collapse-content-padding-top) var(--collapse-content-padding-x) var(--collapse-content-padding-y);
}
.collapse_group {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-size: var(--collapse-font-size);
  color: var(--color-text);
}
.collapse_panel {
  min-width: 0;
}
.collapse_panel.is-disabled .collapse_trigger {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.collapse_header {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.collapse_trigger {
  display: flex;
  align-items: center;
  gap: var(--collapse-trigger-gap);
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--collapse-trigger-padding-y) var(--collapse-trigger-padding-x);
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--collapse-trigger-font-weight);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.collapse_trigger:focus-visible {
  outline-color: var(--color-accent);
}
.collapse_trigger:hover:not(:disabled):not(.is-disabled) {
  background: var(--color-surface-raised);
}
.collapse_trigger[aria-expanded=true] {
  color: var(--color-accent-text);
}
.collapse_trigger.btn {
  min-width: 0;
  height: auto;
  border-radius: 0;
}
.collapse_trigger.btn.btn_text {
  color: inherit;
  background: transparent;
  border-color: transparent;
}
.collapse_trigger.btn.btn_text:hover:not(.is-disabled):not(:disabled) {
  color: inherit;
  background: var(--color-surface-raised);
  border-color: transparent;
}
.collapse_trigger.btn .btn_label {
  display: contents;
}
.collapse_label {
  flex: 1;
  min-width: 0;
}
.collapse_extra {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-size-xs);
  font-weight: 400;
}
.collapse_icon {
  flex-shrink: 0;
  width: var(--collapse-icon-size);
  height: var(--collapse-icon-size);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.collapse_trigger[aria-expanded=true] .collapse_icon {
  transform: rotate(180deg);
  color: var(--color-accent-text);
}
.collapse_body {
  min-width: 0;
}
.collapse_body[hidden] {
  display: none;
}
.collapse_group[data-effect=slide] .collapse_body {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .collapse_group[data-effect=slide] .collapse_body {
    transition: none !important;
  }
}
.collapse_content {
  padding: var(--collapse-content-padding-top) var(--collapse-content-padding-x) var(--collapse-content-padding-y);
  color: var(--color-text);
  font-size: var(--collapse-content-font-size);
  line-height: 1.6;
}
.collapse_content > :first-child {
  margin-top: 0;
}
.collapse_content > :last-child {
  margin-bottom: 0;
}
.collapse_bordered {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.collapse_bordered .collapse_panel + .collapse_panel {
  border-top: 1px solid var(--color-border);
}
.collapse_bordered .collapse_trigger[aria-expanded=true] {
  background: var(--color-surface-raised);
}
.collapse_ghost {
  gap: var(--space-xs);
}
.collapse_ghost .collapse_panel {
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  overflow: hidden;
}
.collapse_ghost .collapse_trigger[aria-expanded=true] {
  background: color-mix(in srgb, var(--color-accent-text) 8%, transparent);
}
.collapse_card {
  gap: var(--collapse-card-gap);
}
.collapse_card .collapse_panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.collapse_card .collapse_trigger[aria-expanded=true] {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.collapse_sm {
  --collapse-font-size: var(--collapse-font-size-sm);
  --collapse-trigger-padding-y: var(--collapse-trigger-padding-y-sm);
  --collapse-trigger-padding-x: var(--collapse-trigger-padding-x-sm);
  --collapse-content-padding-y: var(--collapse-content-padding-y-sm);
  --collapse-content-padding-x: var(--collapse-content-padding-x-sm);
  --collapse-content-padding-top: var(--collapse-content-padding-top-sm);
  --collapse-icon-size: var(--collapse-icon-size-sm);
}
.collapse_lg {
  --collapse-font-size: var(--collapse-font-size-lg);
  --collapse-trigger-padding-y: var(--collapse-trigger-padding-y-lg);
  --collapse-trigger-padding-x: var(--collapse-trigger-padding-x-lg);
  --collapse-content-padding-y: var(--collapse-content-padding-y-lg);
  --collapse-content-padding-x: var(--collapse-content-padding-x-lg);
  --collapse-content-padding-top: var(--collapse-content-padding-top-lg);
  --collapse-icon-size: var(--collapse-icon-size-lg);
}
.collapse_demo-narrow {
  width: 100%;
  max-width: 28rem;
}
.collapse_demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 28rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--modal-z-index) + var(--modal-stack-level, 0) * 10);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--modal-margin);
  pointer-events: none;
}
.modal[hidden] {
  display: none;
}
.modal.is-open {
  display: flex;
  pointer-events: auto;
}
.modal_backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--modal-z-index) + var(--modal-stack-level, 0) * 10);
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.modal.is-open .modal_backdrop {
  opacity: 1;
}
.modal.is-open.is-stack-covered .modal_backdrop {
  opacity: 0;
  pointer-events: none;
}
.modal[data-modal-backdrop=false] .modal_backdrop {
  display: none;
}
.modal_dialog {
  position: relative;
  z-index: calc(var(--modal-z-index) + var(--modal-stack-level, 0) * 10 + 1);
  display: flex;
  flex-direction: column;
  width: var(--modal-width);
  max-width: 100%;
  max-height: 100%;
  background: var(--modal-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  opacity: 0;
  transform: scale(0.96) translateY(0.5rem);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.modal.is-open .modal_dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.modal_header {
  display: flex;
  align-items: center;
  gap: var(--modal-header-gap);
  flex-shrink: 0;
  padding: var(--modal-header-padding-y) var(--modal-header-padding-x);
  border-bottom: 1px solid var(--color-border-subtle);
}
.modal .modal_title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--modal-title-font-size);
  font-weight: var(--modal-title-font-weight);
  line-height: 1.3;
}
.modal_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.modal_close:focus-visible {
  outline-color: var(--color-accent);
}
.modal_close:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.modal_close-icon {
  width: var(--modal-close-icon-size);
  height: var(--modal-close-icon-size);
}
.modal_body {
  flex: 1;
  min-height: 0;
  padding: var(--modal-body-padding-y) var(--modal-body-padding-x);
  font-size: var(--modal-body-font-size);
  line-height: 1.6;
}
.modal_body > :first-child {
  margin-top: 0;
}
.modal_body > :last-child {
  margin-bottom: 0;
}
.modal_footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--modal-footer-gap);
  flex-shrink: 0;
  padding: var(--modal-footer-padding-y) var(--modal-footer-padding-x);
  border-top: 1px solid var(--color-border-subtle);
}
.modal_footer-start {
  justify-content: flex-start;
}
.modal_footer-center {
  justify-content: center;
}
.modal_footer-end {
  justify-content: flex-end;
}
.modal_footer-between {
  justify-content: space-between;
}
.modal_footer-even > * {
  flex: 1 1 0;
  min-width: 0;
}
.modal_footer-even-1-2 > *:first-child {
  flex: 1 1 0;
}
.modal_footer-even-1-2 > *:last-child {
  flex: 2 1 0;
}
.modal_footer-even-2-1 > *:first-child {
  flex: 2 1 0;
}
.modal_footer-even-2-1 > *:last-child {
  flex: 1 1 0;
}
.modal_footer-no-pad-b {
  padding-bottom: 0;
}
.modal_footer-no-pad-b.modal_footer-even {
  padding: 0;
  gap: 0;
}
.modal_footer-no-pad-b.modal_footer-even > *:first-child {
  border-bottom-left-radius: calc(var(--modal-radius) - 1px);
}
.modal_footer-no-pad-b.modal_footer-even > *:last-child {
  border-bottom-right-radius: calc(var(--modal-radius) - 1px);
}
.modal_footer-no-pad-b.modal_footer-even > *:only-child {
  border-bottom-left-radius: calc(var(--modal-radius) - 1px);
  border-bottom-right-radius: calc(var(--modal-radius) - 1px);
}
.modal_footer-group {
  display: inline-flex;
  align-items: center;
  gap: var(--modal-footer-gap);
  min-width: 0;
}
.modal_sm {
  --modal-width: var(--modal-width-sm);
}
.modal_lg {
  --modal-width: var(--modal-width-lg);
}
.modal_fullscreen {
  --modal-width: 100%;
  --modal-margin: 0;
}
.modal_fullscreen .modal_dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border: none;
}
.modal_scrollable .modal_dialog {
  max-height: calc(100vh - var(--modal-margin) * 2);
}
.modal_scrollable .modal_body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal_scrollable.modal_fullscreen .modal_dialog {
  max-height: 100vh;
}
.modal_demo-frame {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  height: 32rem;
  min-height: 28rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}
.modal_demo-frame .modal.modal_demo-static {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--space-md);
  display: flex;
  pointer-events: none;
}
.modal_demo-frame .modal.modal_demo-static > .modal_backdrop {
  position: absolute;
  opacity: 1;
  pointer-events: none;
}
.modal_demo-frame .modal.modal_demo-static > .modal_dialog {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.modal_demo-frame .modal.modal_demo-static[data-modal-backdrop=false] > .modal_backdrop {
  display: none;
}
.modal_demo-frame .modal.modal_demo-static.modal_scrollable > .modal_dialog {
  max-height: calc(100% - var(--space-md) * 2);
}
.modal_demo-frame .modal.modal_demo-static.modal_fullscreen {
  padding: 0;
}
.modal_demo-frame .modal.modal_demo-static.modal_fullscreen > .modal_dialog {
  height: 100%;
  max-height: none;
}
.modal_demo-content {
  padding: var(--space-lg);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.modal_demo-frame-compact {
  height: 16rem;
  min-height: 14rem;
}
.modal_demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}
.modal_demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

body.is-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .modal_dialog,
  .modal_backdrop {
    transition: none;
  }
}
.drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--drawer-z-index) + var(--drawer-stack-level, 0) * 10);
  display: none;
  pointer-events: none;
}
.drawer[hidden] {
  display: none;
}
.drawer.is-open {
  display: block;
  pointer-events: auto;
}
.drawer.is-opening, .drawer.is-closing {
  display: block;
  pointer-events: none;
}
.drawer.is-opening.is-open {
  pointer-events: auto;
}
.drawer_backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--drawer-z-index) + var(--drawer-stack-level, 0) * 10);
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--drawer-backdrop-duration) ease;
}
.drawer.is-open .drawer_backdrop {
  opacity: 1;
  transition-delay: 0s;
}
.drawer.is-open.is-stack-covered .drawer_backdrop {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.drawer.is-closing .drawer_backdrop {
  opacity: 0;
  transition-delay: 0.08s;
}
.drawer[data-drawer-backdrop=false] .drawer_backdrop {
  display: none;
}
.drawer_panel {
  position: fixed;
  z-index: calc(var(--drawer-z-index) + var(--drawer-stack-level, 0) * 10 + 1);
  display: flex;
  flex-direction: column;
  width: var(--drawer-width);
  max-width: 100%;
  height: 100%;
  background: var(--drawer-bg);
  color: var(--color-text);
  box-shadow: var(--drawer-shadow);
  will-change: transform;
  transition: transform var(--drawer-panel-duration-x) var(--drawer-panel-easing-x);
}
.drawer.is-open .drawer_panel {
  transition-delay: 0.04s;
}
.drawer.is-closing .drawer_panel {
  transition-delay: 0s;
}
.drawer_header {
  display: flex;
  align-items: center;
  gap: var(--drawer-header-gap);
  flex-shrink: 0;
  padding: var(--drawer-header-padding-y) var(--drawer-header-padding-x);
  border-bottom: 1px solid var(--color-border-subtle);
}
.drawer .drawer_title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: var(--drawer-title-font-size);
  font-weight: var(--drawer-title-font-weight);
  line-height: 1.3;
}
.drawer_extra {
  display: flex;
  align-items: center;
  gap: var(--drawer-header-gap);
  flex-shrink: 0;
  margin-left: auto;
}
.drawer_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--drawer-close-size);
  height: var(--drawer-close-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.drawer_close:focus-visible {
  outline-color: var(--color-accent);
}
.drawer_close:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.drawer_close-icon {
  width: var(--drawer-close-icon-size);
  height: var(--drawer-close-icon-size);
}
.drawer_body {
  flex: 1;
  min-height: 0;
  padding: var(--drawer-body-padding-y) var(--drawer-body-padding-x);
  overflow-y: auto;
  font-size: var(--drawer-body-font-size);
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}
.drawer_body > :first-child {
  margin-top: 0;
}
.drawer_body > :last-child {
  margin-bottom: 0;
}
.drawer_footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--drawer-footer-gap);
  flex-shrink: 0;
  padding: var(--drawer-footer-padding-y) var(--drawer-footer-padding-x);
  border-top: 1px solid var(--color-border-subtle);
}
.drawer_footer-start {
  justify-content: flex-start;
}
.drawer_footer-center {
  justify-content: center;
}
.drawer_footer-end {
  justify-content: flex-end;
}
.drawer_footer-between {
  justify-content: space-between;
}
.drawer_footer-even > * {
  flex: 1 1 0;
  min-width: 0;
}
.drawer_footer-even-1-2 > *:first-child {
  flex: 1 1 0;
}
.drawer_footer-even-1-2 > *:last-child {
  flex: 2 1 0;
}
.drawer_footer-even-2-1 > *:first-child {
  flex: 2 1 0;
}
.drawer_footer-even-2-1 > *:last-child {
  flex: 1 1 0;
}
.drawer_footer-no-pad-b {
  padding-bottom: 0;
}
.drawer_footer-no-pad-b.drawer_footer-even {
  padding: 0;
  gap: 0;
}
.drawer_footer-group {
  display: inline-flex;
  align-items: center;
  gap: var(--drawer-footer-gap);
  min-width: 0;
}
.drawer_placement-left {
  top: 0;
  left: 0;
  transform: translateX(-100%);
  border-right: 1px solid var(--color-border-subtle);
}
.drawer.is-open .drawer_placement-left {
  transform: translateX(0);
}
.drawer_placement-right {
  top: 0;
  right: 0;
  left: auto;
  transform: translateX(100%);
  border-left: 1px solid var(--color-border-subtle);
}
.drawer.is-open .drawer_placement-right {
  transform: translateX(0);
}
.drawer_placement-top {
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--drawer-height);
  max-height: 100%;
  transform: translateY(-100%);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: transform var(--drawer-panel-duration-y) var(--drawer-panel-easing-y);
}
.drawer.is-open .drawer_placement-top {
  transform: translateY(0);
}
.drawer_placement-bottom {
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--drawer-height);
  max-height: 100%;
  transform: translateY(100%);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: transform var(--drawer-panel-duration-y) var(--drawer-panel-easing-y), height var(--drawer-panel-duration-y) var(--drawer-panel-easing-y);
}
.drawer_placement-bottom:not(.drawer_draggable)::before {
  content: "";
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  z-index: 1;
  width: var(--drawer-handle-width);
  height: var(--drawer-handle-height);
  border-radius: 999px;
  background: var(--color-border-subtle);
  transform: translateX(-50%);
  pointer-events: none;
}
.drawer_placement-bottom:not(.drawer_draggable) .drawer_header {
  padding-top: calc(var(--drawer-header-padding-y) + var(--space-md));
}
.drawer.is-open .drawer_placement-bottom {
  transform: translateY(0);
}
.drawer_placement-bottom.is-expanded {
  height: var(--drawer-height-expanded);
}
.drawer_placement-bottom.is-dragging {
  transition: none;
  touch-action: none;
}
.drawer_handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--drawer-handle-hit);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drawer_handle:active {
  cursor: grabbing;
}
.drawer_handle-bar {
  display: block;
  width: var(--drawer-handle-width);
  height: var(--drawer-handle-height);
  border-radius: 999px;
  background: var(--color-border);
  pointer-events: none;
}
.drawer_draggable .drawer_header {
  padding-top: var(--drawer-header-padding-y);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drawer_draggable .drawer_header:active {
  cursor: grabbing;
}
.drawer_draggable .drawer_header .drawer_close,
.drawer_draggable .drawer_header .drawer_extra,
.drawer_draggable .drawer_header a,
.drawer_draggable .drawer_header button:not(.drawer_handle) {
  cursor: pointer;
  touch-action: manipulation;
  user-select: auto;
  -webkit-user-select: auto;
}
.drawer_sm {
  --drawer-width: var(--drawer-width-sm);
  --drawer-height: var(--drawer-height-sm);
}
.drawer_lg {
  --drawer-width: var(--drawer-width-lg);
  --drawer-height: var(--drawer-height-lg);
}
.drawer_demo-frame {
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  height: 32rem;
  min-height: 28rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}
.drawer_demo-frame .drawer.drawer_demo-static {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}
.drawer_demo-frame .drawer.drawer_demo-static > .drawer_backdrop,
.drawer_demo-frame .drawer.drawer_demo-static > .drawer_panel {
  position: absolute;
}
.drawer_demo-frame .drawer.drawer_demo-static > .drawer_panel {
  pointer-events: auto;
  transform: none;
}
.drawer_demo-frame .drawer.drawer_demo-static > .drawer_backdrop {
  opacity: 1;
  pointer-events: none;
}
.drawer_demo-frame .drawer.drawer_demo-static[data-drawer-backdrop=false] > .drawer_backdrop {
  display: none;
}
.drawer_demo-content {
  padding: var(--space-lg);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.drawer_demo-frame-compact {
  height: 16rem;
  min-height: 14rem;
}
.drawer_demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
}
.drawer_demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

body.is-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .drawer_panel,
  .drawer_backdrop {
    transition: none;
  }
  .drawer.is-open .drawer_panel,
  .drawer.is-opening .drawer_panel {
    transition-delay: 0s;
  }
  .drawer.is-closing .drawer_backdrop {
    transition-delay: 0s;
  }
}
.steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  color: var(--color-text);
}
.steps_item {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--steps-content-gap);
  min-width: 0;
}
.steps_item:last-child .steps_tail {
  display: none;
}
.steps_item:only-child {
  flex: none;
  max-width: 100%;
}
.steps_item:only-child .steps_head {
  width: auto;
}
.steps_item:only-child .steps_content {
  padding-right: 0;
}
.steps_item.is-finished .steps_indicator {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.steps_item.is-finished .steps_tail {
  background: var(--color-accent);
}
.steps_item.is-finished .steps_title {
  color: var(--color-text);
}
.steps_item.is-active .steps_indicator {
  border-color: var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent-text);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.steps_item.is-active .steps_indicator::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--color-accent);
  opacity: 0.45;
  pointer-events: none;
  animation: steps-indicator-pulse var(--steps-pulse-duration) ease-out infinite;
}
.steps_item.is-active .steps_title {
  color: var(--color-accent-text);
}
.steps_item.is-wait .steps_indicator {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.steps_item.is-wait .steps_title {
  color: var(--color-text-muted);
  font-weight: 500;
}
.steps_item.is-wait .steps_desc {
  color: var(--color-text-muted);
}
.steps_item.is-error .steps_indicator {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-on-accent);
}
.steps_item.is-error .steps_title {
  color: var(--color-danger-text);
}
.steps_head {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--steps-head-gap);
}
.steps_indicator {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: var(--steps-indicator-font-size);
  font-weight: var(--steps-indicator-font-weight);
  line-height: 1;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: var(--steps-indicator-size);
  height: var(--steps-indicator-size);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.steps_index, .steps_icon {
  position: relative;
  z-index: 1;
}
.steps_index {
  line-height: 1;
}
.steps_icon {
  flex-shrink: 0;
  width: var(--steps-icon-size);
  height: var(--steps-icon-size);
}
.steps_tail {
  flex: 1;
  min-width: var(--steps-gap);
  height: var(--steps-tail-height);
  margin-right: var(--steps-head-gap);
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
}
.steps_content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: var(--steps-gap);
}
.steps_title {
  margin: 0;
  font-size: var(--steps-title-size);
  font-weight: var(--steps-title-weight);
  color: var(--color-text);
  line-height: 1.4;
}
.steps_desc {
  margin: 0;
  font-size: var(--steps-desc-size);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.steps_dot .steps_indicator {
  width: var(--steps-dot-size);
  height: var(--steps-dot-size);
  border-width: 0;
  background: var(--color-border);
}
.steps_dot .steps_item.is-finished .steps_indicator {
  background: var(--color-accent);
}
.steps_dot .steps_item.is-active .steps_indicator {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.steps_dot .steps_item.is-active .steps_indicator::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--color-accent);
  opacity: 0.45;
  pointer-events: none;
  animation: steps-indicator-pulse var(--steps-pulse-duration) ease-out infinite;
}
.steps_dot .steps_item.is-wait .steps_indicator {
  background: var(--color-border);
}
.steps_dot .steps_item.is-error .steps_indicator {
  background: var(--color-danger);
}
.steps_vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.steps_vertical .steps_item {
  flex: none;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--steps-gap);
  padding-bottom: var(--steps-gap);
}
.steps_vertical .steps_item:last-child {
  padding-bottom: 0;
}
.steps_vertical .steps_head {
  flex-direction: column;
  align-items: center;
  width: auto;
  align-self: stretch;
}
.steps_vertical .steps_tail {
  flex: 1;
  width: var(--steps-tail-height);
  min-width: 0;
  min-height: var(--steps-gap);
  height: auto;
  margin: 0;
  margin-top: var(--steps-head-gap);
}
.steps_vertical .steps_content {
  flex: 1;
  padding-top: calc((var(--steps-indicator-size) - var(--steps-title-size) * 1.4) / 2);
  padding-right: 0;
}
.steps_navigable .steps_trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--steps-content-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.steps_navigable .steps_trigger:focus-visible {
  outline-color: var(--color-accent);
}
.steps_navigable .steps_trigger:disabled, .steps_navigable .steps_trigger.is-disabled {
  cursor: default;
  pointer-events: none;
}
.steps_navigable .steps_item.is-wait .steps_trigger {
  cursor: default;
  pointer-events: none;
}
.steps_navigable .steps_item.is-finished .steps_trigger:hover .steps_title {
  color: var(--color-accent-text);
}
.steps_icon-style .steps_item.is-active .steps_indicator {
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.steps_align-center .steps_item {
  align-items: center;
  text-align: center;
}
.steps_align-center .steps_head {
  position: relative;
  justify-content: center;
}
.steps_align-center .steps_indicator {
  position: relative;
  z-index: 1;
}
.steps_align-center .steps_tail {
  position: absolute;
  top: 50%;
  left: calc(50% + var(--steps-indicator-size) / 2 + var(--steps-head-gap));
  right: calc(-50% + var(--steps-indicator-size) / 2 + var(--steps-head-gap));
  flex: none;
  width: auto;
  min-width: 0;
  margin: 0;
  transform: translateY(-50%);
}
.steps_align-center .steps_content {
  align-items: center;
  padding-right: 0;
}
.steps_align-center.steps_navigable .steps_trigger {
  align-items: center;
  text-align: center;
}
.steps_sm {
  --steps-indicator-size: var(--steps-indicator-size-sm);
  --steps-indicator-font-size: var(--steps-indicator-font-size-sm);
  --steps-title-size: var(--steps-title-size-sm);
  --steps-desc-size: var(--steps-desc-size-sm);
  --steps-gap: var(--space-sm);
}
.steps_lg {
  --steps-indicator-size: var(--steps-indicator-size-lg);
  --steps-indicator-font-size: var(--steps-indicator-font-size-lg);
  --steps-title-size: var(--steps-title-size-lg);
  --steps-desc-size: var(--steps-desc-size-lg);
  --steps-gap: var(--space-lg);
}
.steps_demo-narrow {
  max-width: 36rem;
}

@keyframes steps-indicator-pulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps_item.is-active .steps_indicator::after {
    animation: none;
    opacity: 0;
  }
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pagination-total-gap);
  color: var(--pagination-color);
  font-size: var(--pagination-font-size);
}
.pagination.pagination_align-center {
  justify-content: center;
}
.pagination.pagination_align-end {
  justify-content: flex-end;
}
.pagination.pagination_sm {
  font-size: var(--pagination-font-size-sm);
}
.pagination.pagination_sm .pagination_link,
.pagination.pagination_sm .pagination_btn,
.pagination.pagination_sm .pagination_ellipsis {
  min-width: var(--pagination-item-min-size-sm);
  height: var(--pagination-item-min-size-sm);
}
.pagination.pagination_lg {
  font-size: var(--pagination-font-size-lg);
}
.pagination.pagination_lg .pagination_link,
.pagination.pagination_lg .pagination_btn,
.pagination.pagination_lg .pagination_ellipsis {
  min-width: var(--pagination-item-min-size-lg);
  height: var(--pagination-item-min-size-lg);
}
.pagination.pagination_round .pagination_link,
.pagination.pagination_round .pagination_btn,
.pagination.pagination_round .pagination_ellipsis {
  border-radius: var(--radius-pill);
}
.pagination.pagination_minimal .pagination_link,
.pagination.pagination_minimal .pagination_btn {
  border-color: transparent;
  background: transparent;
}
.pagination.pagination_minimal .pagination_link:hover:not(:disabled):not(.is-disabled):not(.is-active):not([aria-current=page]),
.pagination.pagination_minimal .pagination_btn:hover:not(:disabled):not(.is-disabled):not(.is-active):not([aria-current=page]) {
  background: var(--pagination-bg-hover);
}
.pagination.pagination_minimal .pagination_link.is-active, .pagination.pagination_minimal .pagination_link[aria-current=page] {
  border-color: transparent;
}
.pagination.pagination_simple {
  gap: var(--pagination-gap);
}
.pagination.pagination_simple .pagination_simple-text {
  min-width: var(--pagination-simple-text-min-width);
  color: var(--pagination-color-muted);
  font-weight: var(--pagination-font-weight);
  text-align: center;
}
.pagination.pagination_simple .pagination_simple-current {
  color: var(--pagination-color);
  font-weight: var(--pagination-font-weight-active);
}
.pagination_total {
  flex-shrink: 0;
  color: var(--pagination-color-muted);
  font-size: inherit;
  white-space: nowrap;
}
.pagination_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pagination-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination_item {
  display: flex;
}
.pagination_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-min-size);
  height: var(--pagination-item-min-size);
  margin: 0;
  padding: 0 var(--pagination-item-padding-x);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  background: var(--pagination-bg);
  color: var(--pagination-color);
  font: inherit;
  font-weight: var(--pagination-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.pagination_link:focus-visible {
  outline-color: var(--color-accent);
}
.pagination_link:hover:not(:disabled):not(.is-disabled):not(.is-active):not([aria-current=page]) {
  color: var(--color-accent-text);
  background: var(--pagination-bg-hover);
  border-color: var(--color-accent);
}
.pagination_link:disabled, .pagination_link.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination_link.btn.btn_text {
  min-width: var(--pagination-item-min-size);
  height: var(--pagination-item-min-size);
  padding: 0 var(--pagination-item-padding-x);
  color: inherit;
  background: var(--pagination-bg);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  font: inherit;
  font-weight: var(--pagination-font-weight);
}
.pagination_link.btn.btn_text .btn_label {
  padding: 0;
  font: inherit;
  font-weight: inherit;
}
.pagination_link.is-active, .pagination_link[aria-current=page] {
  color: var(--pagination-color-active);
  background: var(--pagination-bg-active);
  border-color: var(--color-accent);
  font-weight: var(--pagination-font-weight-active);
  pointer-events: none;
}
.pagination_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-min-size);
  height: var(--pagination-item-min-size);
  margin: 0;
  padding: 0 var(--pagination-item-padding-x);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  background: var(--pagination-bg);
  color: var(--pagination-color);
  font: inherit;
  font-weight: var(--pagination-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.pagination_btn:focus-visible {
  outline-color: var(--color-accent);
}
.pagination_btn:hover:not(:disabled):not(.is-disabled):not(.is-active):not([aria-current=page]) {
  color: var(--color-accent-text);
  background: var(--pagination-bg-hover);
  border-color: var(--color-accent);
}
.pagination_btn:disabled, .pagination_btn.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.pagination_btn {
  padding: 0;
}
.pagination_btn.btn.btn_ghost {
  min-width: var(--pagination-item-min-size);
  height: var(--pagination-item-min-size);
  padding: 0;
  color: inherit;
  background: var(--pagination-bg);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
}
.pagination_icon {
  flex-shrink: 0;
  width: var(--pagination-icon-size);
  height: var(--pagination-icon-size);
  pointer-events: none;
}
.pagination_ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pagination-item-min-size);
  height: var(--pagination-item-min-size);
  color: var(--pagination-color-muted);
  font-weight: var(--pagination-font-weight);
  user-select: none;
  pointer-events: none;
}
.pagination_jumper {
  display: inline-flex;
  align-items: center;
  gap: var(--pagination-jumper-gap);
  color: var(--pagination-color-muted);
  font-size: inherit;
  white-space: nowrap;
}
.pagination_jumper-input {
  width: var(--pagination-jumper-input-width);
  height: var(--pagination-item-min-size);
  padding: 0 var(--pagination-jumper-input-padding-x);
  border: 1px solid var(--pagination-border-color);
  border-radius: var(--pagination-border-radius);
  background: var(--pagination-bg);
  color: var(--pagination-color);
  font: inherit;
  text-align: center;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.pagination_jumper-input:focus-visible {
  outline-color: var(--color-accent);
}
.pagination_jumper-input::-webkit-outer-spin-button, .pagination_jumper-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.pagination_jumper-input {
  appearance: textfield;
}
.pagination_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pagination-wrap-gap);
  width: 100%;
}
.pagination_wrap-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pagination-total-gap);
}

@keyframes progress-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
.progress {
  --progress-fill: var(--color-accent);
  --progress-percent: 0;
  display: block;
  width: 100%;
  max-width: var(--progress-max-width);
  font-size: var(--progress-label-size);
  line-height: 1.4;
  color: var(--color-text);
}
.progress.color_primary {
  --progress-fill: var(--color-accent);
}
.progress.color_primary .progress_bar {
  background-color: var(--color-accent);
}
.progress.color_primary.progress_circle .progress_circle-bar {
  stroke: var(--color-accent);
}
.progress.color_success {
  --progress-fill: var(--color-success);
}
.progress.color_success .progress_bar {
  background-color: var(--color-success);
}
.progress.color_success.progress_circle .progress_circle-bar {
  stroke: var(--color-success);
}
.progress.color_danger {
  --progress-fill: var(--color-danger);
}
.progress.color_danger .progress_bar {
  background-color: var(--color-danger);
}
.progress.color_danger.progress_circle .progress_circle-bar {
  stroke: var(--color-danger);
}
.progress.color_warning {
  --progress-fill: var(--color-warning);
}
.progress.color_warning .progress_bar {
  background-color: var(--color-warning);
}
.progress.color_warning.progress_circle .progress_circle-bar {
  stroke: var(--color-warning);
}
.progress_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--progress-gap);
  margin-bottom: var(--space-xs);
}
.progress_label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text);
}
.progress_value {
  flex-shrink: 0;
  font-size: var(--progress-value-size);
  font-weight: var(--progress-value-weight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.progress_track {
  position: relative;
  width: 100%;
  height: var(--progress-height);
  border-radius: var(--progress-radius);
  background: var(--color-border-subtle);
  overflow: hidden;
}
.progress_bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--progress-fill);
  transition: width var(--transition-base);
}
.progress_fit {
  max-width: var(--progress-max-width);
}
.progress_block {
  max-width: none;
}
.progress_sm {
  --progress-height: var(--progress-height-sm);
  --progress-label-size: var(--text-size-xs);
  --progress-value-size: var(--text-size-xs);
}
.progress_lg {
  --progress-height: var(--progress-height-lg);
  --progress-label-size: var(--text-size-base);
  --progress-value-size: var(--text-size-base);
}
.progress_striped .progress_bar {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}
.progress_animated.progress_striped .progress_bar {
  animation: progress-stripes 1s linear infinite;
}
.progress.is-indeterminate .progress_bar {
  width: 40% !important;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}
.progress_inside .progress_track {
  height: auto;
  min-height: var(--progress-inside-height);
  overflow: hidden;
}
.progress_inside .progress_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: auto;
  min-width: 2.5rem;
  min-height: var(--progress-inside-height);
  padding: 0.15rem var(--space-sm);
  font-size: var(--progress-inside-size);
  font-weight: var(--progress-value-weight);
  line-height: 1.2;
  color: var(--color-on-accent);
  white-space: nowrap;
}
.progress_inside.color_warning .progress_bar {
  color: var(--color-on-warning);
}
.progress_inside.progress_sm .progress_track {
  min-height: var(--progress-inside-height-sm);
}
.progress_inside.progress_sm .progress_bar {
  min-height: var(--progress-inside-height-sm);
  padding-block: 0.1rem;
  font-size: var(--text-size-xs);
}
.progress_inside.progress_lg .progress_track {
  min-height: var(--progress-inside-height-lg);
}
.progress_inside.progress_lg .progress_bar {
  min-height: var(--progress-inside-height-lg);
  padding-block: 0.25rem;
  font-size: var(--text-size-sm);
}
.progress_circle {
  --progress-circle-circumference: calc(2 * 3.14159265 * 45);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--progress-circle-size);
  height: var(--progress-circle-size);
  max-width: none;
}
.progress_circle .progress_circle-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.progress_circle .progress_circle-track {
  fill: none;
  stroke: var(--color-border-subtle);
  stroke-width: var(--progress-circle-stroke);
}
.progress_circle .progress_circle-bar {
  fill: none;
  stroke: var(--progress-fill);
  stroke-width: var(--progress-circle-stroke);
  stroke-linecap: round;
  stroke-dasharray: var(--progress-circle-circumference);
  stroke-dashoffset: calc(var(--progress-circle-circumference) * (1 - var(--progress-percent) / 100));
  transition: stroke-dashoffset var(--transition-base);
}
.progress_circle .progress_circle-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--progress-circle-value-size);
  font-weight: var(--progress-value-weight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  pointer-events: none;
}
.progress_circle.progress_sm {
  --progress-circle-size: var(--progress-circle-size-sm);
  --progress-circle-stroke: var(--progress-circle-stroke-sm);
  --progress-circle-value-size: var(--progress-circle-value-size-sm);
}
.progress_circle.progress_lg {
  --progress-circle-size: var(--progress-circle-size-lg);
  --progress-circle-stroke: var(--progress-circle-stroke-lg);
  --progress-circle-value-size: var(--progress-circle-value-size-lg);
}

@keyframes spin-rotate {
  to {
    transform: rotate(360deg);
  }
}
.spin {
  --spin-color: var(--color-accent);
  --spin-track-color: var(--color-border-subtle);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spin-gap);
  color: var(--spin-color);
  vertical-align: middle;
}
.spin.color_primary {
  --spin-color: var(--color-accent);
}
.spin.color_primary .spin_indicator {
  border-color: var(--spin-track-color);
  border-top-color: var(--color-accent);
  border-right-color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.spin.color_success {
  --spin-color: var(--color-success);
}
.spin.color_success .spin_indicator {
  border-color: var(--spin-track-color);
  border-top-color: var(--color-success);
  border-right-color: var(--color-success);
  border-bottom-color: var(--color-success);
}
.spin.color_danger {
  --spin-color: var(--color-danger);
}
.spin.color_danger .spin_indicator {
  border-color: var(--spin-track-color);
  border-top-color: var(--color-danger);
  border-right-color: var(--color-danger);
  border-bottom-color: var(--color-danger);
}
.spin.color_warning {
  --spin-color: var(--color-warning);
}
.spin.color_warning .spin_indicator {
  border-color: var(--spin-track-color);
  border-top-color: var(--color-warning);
  border-right-color: var(--color-warning);
  border-bottom-color: var(--color-warning);
}
.spin_indicator {
  width: var(--spin-size);
  height: var(--spin-size);
  flex-shrink: 0;
  border: var(--spin-border) solid var(--spin-track-color);
  border-top-color: var(--spin-color);
  border-right-color: var(--spin-color);
  border-bottom-color: var(--spin-color);
  border-radius: 50%;
  animation: spin-rotate var(--spin-duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spin_indicator {
    animation-duration: 1.5s;
  }
}
.spin_tip {
  margin: 0;
  font-size: var(--spin-tip-size);
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: center;
}
.spin_sm {
  --spin-size: var(--spin-size-sm);
  --spin-border: var(--spin-border-sm);
  --spin-tip-size: var(--text-size-xs);
}
.spin_lg {
  --spin-size: var(--spin-size-lg);
  --spin-border: var(--spin-border-lg);
  --spin-tip-size: var(--text-size-base);
}
.spin_inline {
  flex-direction: row;
  align-items: center;
}
.spin_wrap {
  position: relative;
}
.spin_wrap .spin_wrap-body {
  transition: opacity var(--transition-base);
}
.spin_wrap.is-loading .spin_wrap-body {
  opacity: var(--spin-wrap-content-opacity);
  pointer-events: none;
  user-select: none;
}
.spin_overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spin-gap);
  background: var(--spin-overlay-bg);
  border-radius: inherit;
}
.spin_overlay .spin_tip {
  color: var(--spin-overlay-tip-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.spin_wrap.is-loading > .spin_overlay {
  display: inline-flex;
}
.spin_wrap-block {
  min-height: var(--spin-wrap-min-height);
}
.spin_wrap-blur.is-loading .spin_wrap-body {
  filter: blur(2px);
}
.spin_block {
  display: flex;
  width: 100%;
  justify-content: center;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.skeleton {
  display: block;
  flex-shrink: 0;
  background: var(--skeleton-bg);
  border-radius: var(--skeleton-radius);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skeleton-shimmer var(--skeleton-duration) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}
.skeleton_text {
  height: var(--skeleton-text-height);
  width: 100%;
}
.skeleton_title {
  height: var(--skeleton-title-height);
  width: var(--skeleton-title-width);
}
.skeleton_circle {
  border-radius: var(--skeleton-radius-round);
  width: var(--skeleton-avatar-size);
  height: var(--skeleton-avatar-size);
}
.skeleton_button {
  height: var(--skeleton-button-height);
  width: var(--skeleton-button-width);
  border-radius: var(--radius-sm);
}
.skeleton_image {
  width: 100%;
  aspect-ratio: var(--skeleton-image-ratio);
  border-radius: var(--skeleton-radius);
}
.skeleton_block {
  width: 100%;
  height: var(--skeleton-block-height);
}
.skeleton_w-sm {
  width: var(--skeleton-width-sm);
}
.skeleton_w-md {
  width: var(--skeleton-width-md);
}
.skeleton_w-lg {
  width: var(--skeleton-width-lg);
}
.skeleton_sm {
  --skeleton-text-height: var(--skeleton-text-height-sm);
  --skeleton-title-height: var(--skeleton-title-height-sm);
  --skeleton-avatar-size: var(--avatar-size-sm);
  --skeleton-button-height: var(--skeleton-button-height-sm);
  --skeleton-button-width: var(--skeleton-button-width-sm);
}
.skeleton_lg {
  --skeleton-text-height: var(--skeleton-text-height-lg);
  --skeleton-title-height: var(--skeleton-title-height-lg);
  --skeleton-avatar-size: var(--avatar-size-lg);
  --skeleton-button-height: var(--skeleton-button-height-lg);
  --skeleton-button-width: var(--skeleton-button-width-lg);
}
.skeleton_group {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-gap);
  width: 100%;
}
.skeleton_row {
  display: flex;
  align-items: center;
  gap: var(--skeleton-gap);
  width: 100%;
}
.skeleton_row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--skeleton-gap-sm);
  min-width: 0;
}
.skeleton_static::after {
  animation: none;
}

.empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--empty-gap);
  padding: var(--empty-padding-y) var(--empty-padding-x);
  max-width: 100%;
  text-align: center;
}
.empty_image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--empty-image-size);
  height: var(--empty-image-size);
  color: var(--empty-icon-color);
}
.empty_image svg,
.empty_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.empty_image svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.empty_desc {
  margin: 0;
  max-width: var(--empty-desc-max-width);
  font-size: var(--empty-desc-size);
  line-height: 1.5;
  color: var(--empty-desc-color);
}
.empty_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--empty-footer-gap);
  margin-top: var(--empty-footer-offset);
}
.empty_sm {
  --empty-image-size: var(--empty-image-size-sm);
  --empty-desc-size: var(--text-size-xs);
  --empty-padding-y: var(--space-lg);
  --empty-gap: var(--space-xs);
}
.empty_lg {
  --empty-image-size: var(--empty-image-size-lg);
  --empty-desc-size: var(--text-size-base);
  --empty-padding-y: var(--space-2xl);
  --empty-gap: var(--space-md);
}
.empty_simple .empty_image {
  display: none;
}
.empty_block {
  display: flex;
  width: 100%;
}

.upload {
  display: flex;
  flex-direction: column;
  gap: var(--upload-gap);
  width: 100%;
}
.upload.upload_fit {
  max-width: var(--upload-max-width);
}
.upload.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-disabled);
}
.upload_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.upload_trigger {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--upload-gap);
  max-width: 100%;
}
.upload_trigger:has(.upload_input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
}
.upload_trigger:has(.upload_input:disabled) .btn {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.upload_hint {
  margin: 0;
  font-size: var(--upload-hint-size);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.upload_dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--upload-dropzone-gap);
  width: 100%;
  padding: var(--upload-dropzone-padding);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.upload_dropzone:focus-visible {
  outline-color: var(--color-accent);
}
.upload_dropzone:hover:not(:has(.upload_input:disabled)) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.upload_dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.upload_dropzone.is-error {
  border-color: var(--color-danger);
  background: var(--color-alert-error-bg);
  color: var(--color-danger-text);
}
.upload_dropzone:has(.upload_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
  background: var(--color-surface-disabled);
}
.upload_dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  width: var(--upload-dropzone-icon-size);
  height: var(--upload-dropzone-icon-size);
}
.upload_dropzone-title {
  font-size: var(--text-size-base);
  font-weight: 500;
  color: var(--color-text);
}
.upload_dropzone-desc {
  font-size: var(--upload-hint-size);
  color: inherit;
  line-height: 1.5;
}
.upload_sm .upload_dropzone {
  --upload-dropzone-padding: var(--space-lg);
  --upload-dropzone-icon-size: 2rem;
}
.upload_lg .upload_dropzone {
  --upload-dropzone-padding: var(--space-2xl);
  --upload-dropzone-icon-size: 3rem;
}
.upload_list {
  display: flex;
  flex-direction: column;
  gap: var(--upload-list-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.upload_item {
  display: flex;
  align-items: flex-start;
  gap: var(--upload-item-gap);
  padding: var(--upload-item-padding-y) var(--upload-item-padding-x);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.upload_item.is-error {
  border-color: var(--color-danger);
  background: var(--color-alert-error-bg);
}
.upload_item.is-done .upload_progress {
  display: none;
}
.upload_item-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-text);
  width: var(--upload-item-icon-size);
  height: var(--upload-item-icon-size);
}
.upload_item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.upload_item-name {
  font-size: var(--text-size-sm);
  font-weight: 500;
  color: var(--color-text);
}
.upload_item-meta {
  font-size: var(--upload-hint-size);
  color: var(--color-text-muted);
}
.upload_item.is-error .upload_item-meta {
  color: var(--color-danger-text);
}
.upload_item.is-done .upload_item-meta {
  color: var(--color-success-text);
}
.upload_item-action {
  flex-shrink: 0;
  margin-left: auto;
}
.upload_progress {
  width: 100%;
  height: var(--upload-progress-height);
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  overflow: hidden;
}
.upload_progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.upload_item.is-error .upload_progress-bar {
  background: var(--color-danger);
}
.upload_item.is-done .upload_progress-bar {
  background: var(--color-success);
}
.upload_cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--upload-card-gap);
}
.upload_card {
  position: relative;
  width: var(--upload-card-size);
  height: var(--upload-card-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.upload_card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload_card-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border-style: dashed;
  color: var(--color-text-muted);
  font-size: var(--upload-hint-size);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.upload_card-trigger:focus-visible {
  outline-color: var(--color-accent);
}
.upload_card-trigger:hover:not(:has(.upload_input:disabled)) {
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
  color: var(--color-accent-text);
}
.upload_card-trigger:has(.upload_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.upload_card-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.upload_card:hover .upload_card-actions, .upload_card:focus-within .upload_card-actions {
  opacity: 1;
}
.upload:has(> .upload_avatar) {
  width: auto;
  align-items: flex-start;
}
.upload_avatar {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.upload_avatar:focus-visible {
  outline-color: var(--color-accent);
}
.upload_avatar .avatar {
  display: block;
}
.upload_avatar:has(.upload_input:disabled) {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-disabled);
  border-color: var(--color-border-disabled);
}
.upload_avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--color-overlay);
  color: #fff;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.upload_avatar:hover .upload_avatar-overlay, .upload_avatar:focus-within .upload_avatar-overlay {
  opacity: 1;
}

.affix {
  position: relative;
  min-width: 0;
}
.affix_placeholder[hidden] {
  display: none;
}
.affix_target {
  min-width: 0;
}
.affix_target.is-fixed {
  z-index: var(--affix-z-index);
}
.affix_bar {
  display: flex;
  align-items: center;
  gap: var(--affix-bar-gap);
  padding: var(--affix-bar-padding-y) var(--affix-bar-padding-x);
  background: var(--affix-bar-bg);
  border: 1px solid var(--affix-bar-border);
  border-radius: var(--radius-md);
  box-shadow: var(--affix-bar-shadow);
  font-size: var(--text-size-sm);
  color: var(--color-text);
}
.affix_bar-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}
.affix_bar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.affix_anchor {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--affix-bar-padding-y) var(--affix-bar-padding-x);
  background: var(--affix-bar-bg);
  border-bottom: 1px solid var(--affix-bar-border);
  font-size: var(--text-size-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.affix_anchor .link {
  flex-shrink: 0;
  white-space: nowrap;
}
.affix_demo-scroll {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.affix_demo-content {
  padding: var(--space-lg);
}
.affix_demo-content > p {
  margin: 0 0 var(--space-md);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.affix_demo-content > p:last-child {
  margin-bottom: 0;
}
.affix_demo-page {
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.affix_demo-narrow {
  width: 100%;
  max-width: 28rem;
}

.back_top {
  position: fixed;
  z-index: var(--back-top-z-index);
  bottom: var(--back-top-offset-bottom);
  right: var(--back-top-offset-right);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.back_top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.back_top_demo-wrap .back_top {
  position: absolute;
}
.back_top_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: var(--back-top-size);
  height: var(--back-top-size);
  padding: 0;
  color: var(--back-top-color);
  background: var(--back-top-bg);
  border: 1px solid var(--back-top-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--back-top-shadow);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
}
.back_top_btn:focus-visible {
  outline-color: var(--color-accent);
}
.back_top_btn.btn {
  min-width: 0;
  min-height: 0;
  font-weight: inherit;
  line-height: inherit;
}
.back_top_btn:hover {
  color: var(--back-top-color-hover);
  background: var(--back-top-bg-hover);
  border-color: var(--back-top-border-hover);
  box-shadow: var(--back-top-shadow-hover);
}
.back_top_btn:active {
  transform: scale(0.96);
}
.back_top_btn:has(.back_top_label) {
  width: auto;
  padding-inline: var(--space-md);
}
.back_top_icon {
  width: var(--back-top-icon-size);
  height: var(--back-top-icon-size);
  flex-shrink: 0;
}
.back_top_label {
  font-size: var(--text-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.back_top_sm .back_top_btn {
  width: var(--back-top-size-sm);
  height: var(--back-top-size-sm);
}
.back_top_sm .back_top_icon {
  width: var(--back-top-icon-size-sm);
  height: var(--back-top-icon-size-sm);
}
.back_top_lg .back_top_btn {
  width: var(--back-top-size-lg);
  height: var(--back-top-size-lg);
}
.back_top_lg .back_top_icon {
  width: var(--back-top-icon-size-lg);
  height: var(--back-top-icon-size-lg);
}
.back_top_ghost .back_top_btn {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-border);
  box-shadow: none;
}
.back_top_ghost .back_top_btn:hover {
  color: var(--color-accent-text-hover);
  background: var(--color-surface-raised);
  border-color: var(--color-accent);
  box-shadow: none;
}
.back_top_primary .back_top_btn {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.back_top_primary .back_top_btn:hover {
  color: var(--color-on-accent);
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.back_top_demo-wrap {
  position: relative;
  width: 100%;
  max-width: 28rem;
}
.back_top_demo-scroll {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.back_top_demo-content {
  min-height: 34rem;
  padding: var(--space-lg);
}
.back_top_demo-content > p {
  margin: 0 0 var(--space-md);
  font-size: var(--text-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.back_top_demo-content > p:last-child {
  margin-bottom: 0;
}

@keyframes ripple-spread {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.ripple_wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--ripple-color, currentColor);
  opacity: var(--ripple-opacity);
  transform: scale(0);
  animation: ripple-spread var(--ripple-duration) var(--ripple-easing) forwards;
}

[data-ripple=surface] {
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

[data-ripple]:not([data-ripple=false]):not([data-ripple=surface]) {
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.m_xs {
  margin: var(--space-xs);
}
.m_sm {
  margin: var(--space-sm);
}
.m_md {
  margin: var(--space-md);
}
.m_lg {
  margin: var(--space-lg);
}
.m_xl {
  margin: var(--space-xl);
}

.mt_xs {
  margin-top: var(--space-xs);
}
.mt_sm {
  margin-top: var(--space-sm);
}
.mt_md {
  margin-top: var(--space-md);
}
.mt_lg {
  margin-top: var(--space-lg);
}
.mt_xl {
  margin-top: var(--space-xl);
}

.mr_xs {
  margin-right: var(--space-xs);
}
.mr_sm {
  margin-right: var(--space-sm);
}
.mr_md {
  margin-right: var(--space-md);
}
.mr_lg {
  margin-right: var(--space-lg);
}
.mr_xl {
  margin-right: var(--space-xl);
}

.mb_xs {
  margin-bottom: var(--space-xs);
}
.mb_sm {
  margin-bottom: var(--space-sm);
}
.mb_md {
  margin-bottom: var(--space-md);
}
.mb_lg {
  margin-bottom: var(--space-lg);
}
.mb_xl {
  margin-bottom: var(--space-xl);
}

.ml_xs {
  margin-left: var(--space-xs);
}
.ml_sm {
  margin-left: var(--space-sm);
}
.ml_md {
  margin-left: var(--space-md);
}
.ml_lg {
  margin-left: var(--space-lg);
}
.ml_xl {
  margin-left: var(--space-xl);
}

.mx_xs {
  margin-inline: var(--space-xs);
}
.mx_sm {
  margin-inline: var(--space-sm);
}
.mx_md {
  margin-inline: var(--space-md);
}
.mx_lg {
  margin-inline: var(--space-lg);
}
.mx_xl {
  margin-inline: var(--space-xl);
}

.my_xs {
  margin-block: var(--space-xs);
}
.my_sm {
  margin-block: var(--space-sm);
}
.my_md {
  margin-block: var(--space-md);
}
.my_lg {
  margin-block: var(--space-lg);
}
.my_xl {
  margin-block: var(--space-xl);
}

.p_xs {
  padding: var(--space-xs);
}
.p_sm {
  padding: var(--space-sm);
}
.p_md {
  padding: var(--space-md);
}
.p_lg {
  padding: var(--space-lg);
}
.p_xl {
  padding: var(--space-xl);
}

.pt_xs {
  padding-top: var(--space-xs);
}
.pt_sm {
  padding-top: var(--space-sm);
}
.pt_md {
  padding-top: var(--space-md);
}
.pt_lg {
  padding-top: var(--space-lg);
}
.pt_xl {
  padding-top: var(--space-xl);
}

.pr_xs {
  padding-right: var(--space-xs);
}
.pr_sm {
  padding-right: var(--space-sm);
}
.pr_md {
  padding-right: var(--space-md);
}
.pr_lg {
  padding-right: var(--space-lg);
}
.pr_xl {
  padding-right: var(--space-xl);
}

.pb_xs {
  padding-bottom: var(--space-xs);
}
.pb_sm {
  padding-bottom: var(--space-sm);
}
.pb_md {
  padding-bottom: var(--space-md);
}
.pb_lg {
  padding-bottom: var(--space-lg);
}
.pb_xl {
  padding-bottom: var(--space-xl);
}

.pl_xs {
  padding-left: var(--space-xs);
}
.pl_sm {
  padding-left: var(--space-sm);
}
.pl_md {
  padding-left: var(--space-md);
}
.pl_lg {
  padding-left: var(--space-lg);
}
.pl_xl {
  padding-left: var(--space-xl);
}

.px_xs {
  padding-inline: var(--space-xs);
}
.px_sm {
  padding-inline: var(--space-sm);
}
.px_md {
  padding-inline: var(--space-md);
}
.px_lg {
  padding-inline: var(--space-lg);
}
.px_xl {
  padding-inline: var(--space-xl);
}

.py_xs {
  padding-block: var(--space-xs);
}
.py_sm {
  padding-block: var(--space-sm);
}
.py_md {
  padding-block: var(--space-md);
}
.py_lg {
  padding-block: var(--space-lg);
}
.py_xl {
  padding-block: var(--space-xl);
}

.text_ellipsis {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text_ellipsis-2 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}
.text_ellipsis-3 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}
.container_sm {
  max-width: var(--container-max-width-sm);
}
.container_md {
  max-width: var(--container-max-width-md);
}
.container_lg {
  max-width: var(--container-max-width-lg);
}
.container_xl {
  max-width: var(--container-max-width-xl);
}
.container_fluid {
  max-width: none;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  width: 100%;
}
.grid > * {
  min-width: 0;
}
.grid_cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid_item-span-1 > * {
  grid-column: span 1;
}
.grid_col-span-1 {
  grid-column: span 1;
  min-width: 0;
}
.grid_cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid_item-span-2 > * {
  grid-column: span 2;
}
.grid_col-span-2 {
  grid-column: span 2;
  min-width: 0;
}
.grid_cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid_item-span-3 > * {
  grid-column: span 3;
}
.grid_col-span-3 {
  grid-column: span 3;
  min-width: 0;
}
.grid_cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid_item-span-4 > * {
  grid-column: span 4;
}
.grid_col-span-4 {
  grid-column: span 4;
  min-width: 0;
}
.grid_cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid_item-span-5 > * {
  grid-column: span 5;
}
.grid_col-span-5 {
  grid-column: span 5;
  min-width: 0;
}
.grid_cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid_item-span-6 > * {
  grid-column: span 6;
}
.grid_col-span-6 {
  grid-column: span 6;
  min-width: 0;
}
.grid_cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid_item-span-7 > * {
  grid-column: span 7;
}
.grid_col-span-7 {
  grid-column: span 7;
  min-width: 0;
}
.grid_cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid_item-span-8 > * {
  grid-column: span 8;
}
.grid_col-span-8 {
  grid-column: span 8;
  min-width: 0;
}
.grid_cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid_item-span-9 > * {
  grid-column: span 9;
}
.grid_col-span-9 {
  grid-column: span 9;
  min-width: 0;
}
.grid_cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid_item-span-10 > * {
  grid-column: span 10;
}
.grid_col-span-10 {
  grid-column: span 10;
  min-width: 0;
}
.grid_cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid_item-span-11 > * {
  grid-column: span 11;
}
.grid_col-span-11 {
  grid-column: span 11;
  min-width: 0;
}
.grid_cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid_item-span-12 > * {
  grid-column: span 12;
}
.grid_col-span-12 {
  grid-column: span 12;
  min-width: 0;
}
.grid_ratio-1-1 {
  grid-template-columns: 1fr 1fr;
}
.grid_ratio-2-1 {
  grid-template-columns: 2fr 1fr;
}
.grid_ratio-1-2 {
  grid-template-columns: 1fr 2fr;
}
.grid_ratio-3-1 {
  grid-template-columns: 3fr 1fr;
}
.grid_ratio-1-1-1 {
  grid-template-columns: repeat(3, 1fr);
}
.grid_ratio-1-2-1 {
  grid-template-columns: 1fr 2fr 1fr;
}
.grid_gap-sm {
  gap: var(--grid-gap-sm);
}
.grid_gap-lg {
  gap: var(--grid-gap-lg);
}
.grid_gap-none {
  gap: 0;
}
.grid_auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-min), 1fr));
}
.grid_auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-min), 1fr));
}
.grid_equal-columns {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.grid_align-center {
  align-items: center;
}
.grid_align-end {
  align-items: end;
}
@media (min-width: 768px) {
  .grid_cols-md-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid_item-span-md-1 > * {
    grid-column: span 1;
  }
  .grid_col-span-md-1 {
    grid-column: span 1;
  }
  .grid_cols-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid_item-span-md-2 > * {
    grid-column: span 2;
  }
  .grid_col-span-md-2 {
    grid-column: span 2;
  }
  .grid_cols-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid_item-span-md-3 > * {
    grid-column: span 3;
  }
  .grid_col-span-md-3 {
    grid-column: span 3;
  }
  .grid_cols-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid_item-span-md-4 > * {
    grid-column: span 4;
  }
  .grid_col-span-md-4 {
    grid-column: span 4;
  }
  .grid_cols-md-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid_item-span-md-5 > * {
    grid-column: span 5;
  }
  .grid_col-span-md-5 {
    grid-column: span 5;
  }
  .grid_cols-md-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid_item-span-md-6 > * {
    grid-column: span 6;
  }
  .grid_col-span-md-6 {
    grid-column: span 6;
  }
  .grid_cols-md-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid_item-span-md-7 > * {
    grid-column: span 7;
  }
  .grid_col-span-md-7 {
    grid-column: span 7;
  }
  .grid_cols-md-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid_item-span-md-8 > * {
    grid-column: span 8;
  }
  .grid_col-span-md-8 {
    grid-column: span 8;
  }
  .grid_cols-md-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid_item-span-md-9 > * {
    grid-column: span 9;
  }
  .grid_col-span-md-9 {
    grid-column: span 9;
  }
  .grid_cols-md-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid_item-span-md-10 > * {
    grid-column: span 10;
  }
  .grid_col-span-md-10 {
    grid-column: span 10;
  }
  .grid_cols-md-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid_item-span-md-11 > * {
    grid-column: span 11;
  }
  .grid_col-span-md-11 {
    grid-column: span 11;
  }
  .grid_cols-md-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid_item-span-md-12 > * {
    grid-column: span 12;
  }
  .grid_col-span-md-12 {
    grid-column: span 12;
  }
}
@media (min-width: 1024px) {
  .grid_cols-lg-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid_item-span-lg-1 > * {
    grid-column: span 1;
  }
  .grid_col-span-lg-1 {
    grid-column: span 1;
  }
  .grid_cols-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid_item-span-lg-2 > * {
    grid-column: span 2;
  }
  .grid_col-span-lg-2 {
    grid-column: span 2;
  }
  .grid_cols-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid_item-span-lg-3 > * {
    grid-column: span 3;
  }
  .grid_col-span-lg-3 {
    grid-column: span 3;
  }
  .grid_cols-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid_item-span-lg-4 > * {
    grid-column: span 4;
  }
  .grid_col-span-lg-4 {
    grid-column: span 4;
  }
  .grid_cols-lg-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid_item-span-lg-5 > * {
    grid-column: span 5;
  }
  .grid_col-span-lg-5 {
    grid-column: span 5;
  }
  .grid_cols-lg-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid_item-span-lg-6 > * {
    grid-column: span 6;
  }
  .grid_col-span-lg-6 {
    grid-column: span 6;
  }
  .grid_cols-lg-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid_item-span-lg-7 > * {
    grid-column: span 7;
  }
  .grid_col-span-lg-7 {
    grid-column: span 7;
  }
  .grid_cols-lg-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid_item-span-lg-8 > * {
    grid-column: span 8;
  }
  .grid_col-span-lg-8 {
    grid-column: span 8;
  }
  .grid_cols-lg-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .grid_item-span-lg-9 > * {
    grid-column: span 9;
  }
  .grid_col-span-lg-9 {
    grid-column: span 9;
  }
  .grid_cols-lg-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .grid_item-span-lg-10 > * {
    grid-column: span 10;
  }
  .grid_col-span-lg-10 {
    grid-column: span 10;
  }
  .grid_cols-lg-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .grid_item-span-lg-11 > * {
    grid-column: span 11;
  }
  .grid_col-span-lg-11 {
    grid-column: span 11;
  }
  .grid_cols-lg-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .grid_item-span-lg-12 > * {
    grid-column: span 12;
  }
  .grid_col-span-lg-12 {
    grid-column: span 12;
  }
}

.flex {
  --flex-current-gap: var(--flex-gap);
  display: flex;
  gap: var(--flex-current-gap);
  width: 100%;
}
.flex > * {
  min-width: 0;
}
.flex_row {
  display: flex;
  align-items: center;
}
.flex_col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.flex_wrap {
  flex-wrap: wrap;
}
.flex_gap-sm {
  --flex-current-gap: var(--flex-gap-sm);
}
.flex_gap-lg {
  --flex-current-gap: var(--flex-gap-lg);
}
.flex_gap-none {
  --flex-current-gap: 0;
}
.flex_cols-1 {
  flex-wrap: wrap;
}
.flex_cols-1 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 0) / 1);
}
.flex_item-span-1 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
}
.flex_items-span-1 {
  flex-wrap: wrap;
}
.flex_items-span-1 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
}
.flex_order-1 {
  order: 1;
}
.flex_cols-2 {
  flex-wrap: wrap;
}
.flex_cols-2 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 1) / 2);
}
.flex_item-span-2 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
}
.flex_items-span-2 {
  flex-wrap: wrap;
}
.flex_items-span-2 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
}
.flex_order-2 {
  order: 2;
}
.flex_cols-3 {
  flex-wrap: wrap;
}
.flex_cols-3 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 2) / 3);
}
.flex_item-span-3 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
}
.flex_items-span-3 {
  flex-wrap: wrap;
}
.flex_items-span-3 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
}
.flex_order-3 {
  order: 3;
}
.flex_cols-4 {
  flex-wrap: wrap;
}
.flex_cols-4 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 3) / 4);
}
.flex_item-span-4 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
}
.flex_items-span-4 {
  flex-wrap: wrap;
}
.flex_items-span-4 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
}
.flex_order-4 {
  order: 4;
}
.flex_cols-5 {
  flex-wrap: wrap;
}
.flex_cols-5 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 4) / 5);
}
.flex_item-span-5 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
}
.flex_items-span-5 {
  flex-wrap: wrap;
}
.flex_items-span-5 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
}
.flex_order-5 {
  order: 5;
}
.flex_cols-6 {
  flex-wrap: wrap;
}
.flex_cols-6 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 5) / 6);
}
.flex_item-span-6 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
}
.flex_items-span-6 {
  flex-wrap: wrap;
}
.flex_items-span-6 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
}
.flex_order-6 {
  order: 6;
}
.flex_cols-7 {
  flex-wrap: wrap;
}
.flex_cols-7 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 6) / 7);
}
.flex_item-span-7 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
}
.flex_items-span-7 {
  flex-wrap: wrap;
}
.flex_items-span-7 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
}
.flex_order-7 {
  order: 7;
}
.flex_cols-8 {
  flex-wrap: wrap;
}
.flex_cols-8 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 7) / 8);
}
.flex_item-span-8 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
}
.flex_items-span-8 {
  flex-wrap: wrap;
}
.flex_items-span-8 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
}
.flex_order-8 {
  order: 8;
}
.flex_cols-9 {
  flex-wrap: wrap;
}
.flex_cols-9 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 8) / 9);
}
.flex_item-span-9 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
}
.flex_items-span-9 {
  flex-wrap: wrap;
}
.flex_items-span-9 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
}
.flex_order-9 {
  order: 9;
}
.flex_cols-10 {
  flex-wrap: wrap;
}
.flex_cols-10 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 9) / 10);
}
.flex_item-span-10 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
}
.flex_items-span-10 {
  flex-wrap: wrap;
}
.flex_items-span-10 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
}
.flex_order-10 {
  order: 10;
}
.flex_cols-11 {
  flex-wrap: wrap;
}
.flex_cols-11 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 10) / 11);
}
.flex_item-span-11 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
}
.flex_items-span-11 {
  flex-wrap: wrap;
}
.flex_items-span-11 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
}
.flex_order-11 {
  order: 11;
}
.flex_cols-12 {
  flex-wrap: wrap;
}
.flex_cols-12 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12);
}
.flex_item-span-12 {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
}
.flex_items-span-12 {
  flex-wrap: wrap;
}
.flex_items-span-12 > * {
  flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
}
.flex_order-12 {
  order: 12;
}
.flex_ratio-1-1 > :nth-child(1) {
  flex: 1 1 0;
}
.flex_ratio-1-1 > :nth-child(2) {
  flex: 1 1 0;
}
.flex_ratio-2-1 > :nth-child(1) {
  flex: 2 1 0;
}
.flex_ratio-2-1 > :nth-child(2) {
  flex: 1 1 0;
}
.flex_ratio-1-2 > :nth-child(1) {
  flex: 1 1 0;
}
.flex_ratio-1-2 > :nth-child(2) {
  flex: 2 1 0;
}
.flex_ratio-3-1 > :nth-child(1) {
  flex: 3 1 0;
}
.flex_ratio-3-1 > :nth-child(2) {
  flex: 1 1 0;
}
.flex_ratio-1-1-1 > :nth-child(1) {
  flex: 1 1 0;
}
.flex_ratio-1-1-1 > :nth-child(2) {
  flex: 1 1 0;
}
.flex_ratio-1-1-1 > :nth-child(3) {
  flex: 1 1 0;
}
.flex_ratio-1-2-1 > :nth-child(1) {
  flex: 1 1 0;
}
.flex_ratio-1-2-1 > :nth-child(2) {
  flex: 2 1 0;
}
.flex_ratio-1-2-1 > :nth-child(3) {
  flex: 1 1 0;
}
.flex_equal > * {
  flex: 1 1 0;
}
.flex_auto-fit {
  flex-wrap: wrap;
}
.flex_auto-fit > * {
  flex: 1 1 var(--flex-auto-min);
}
.flex_align-start {
  align-items: flex-start;
}
.flex_self-start {
  align-self: flex-start;
}
.flex_align-center {
  align-items: center;
}
.flex_self-center {
  align-self: center;
}
.flex_align-end {
  align-items: flex-end;
}
.flex_self-end {
  align-self: flex-end;
}
.flex_align-stretch {
  align-items: stretch;
}
.flex_self-stretch {
  align-self: stretch;
}
.flex_align-baseline {
  align-items: baseline;
}
.flex_self-baseline {
  align-self: baseline;
}
.flex_self-auto {
  align-self: auto;
}
.flex_justify-start {
  justify-content: flex-start;
}
.flex_justify-center {
  justify-content: center;
}
.flex_justify-end {
  justify-content: flex-end;
}
.flex_justify-between {
  justify-content: space-between;
}
.flex_justify-around {
  justify-content: space-around;
}
.flex_justify-evenly {
  justify-content: space-evenly;
}
.flex_grow {
  flex: 1 1 0;
  min-width: 0;
}
.flex_grow-2 {
  flex: 2 1 0;
  min-width: 0;
}
.flex_fit {
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .flex_row-md {
    flex-direction: row;
    align-items: center;
  }
  .flex_col-md {
    flex-direction: column;
    align-items: stretch;
  }
  .flex_cols-md-1 {
    flex-wrap: wrap;
  }
  .flex_cols-md-1 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 0) / 1);
  }
  .flex_item-span-md-1 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
  }
  .flex_items-span-md-1 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-1 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
  }
  .flex_cols-md-2 {
    flex-wrap: wrap;
  }
  .flex_cols-md-2 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 1) / 2);
  }
  .flex_item-span-md-2 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
  }
  .flex_items-span-md-2 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-2 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
  }
  .flex_cols-md-3 {
    flex-wrap: wrap;
  }
  .flex_cols-md-3 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 2) / 3);
  }
  .flex_item-span-md-3 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
  }
  .flex_items-span-md-3 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-3 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
  }
  .flex_cols-md-4 {
    flex-wrap: wrap;
  }
  .flex_cols-md-4 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 3) / 4);
  }
  .flex_item-span-md-4 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
  }
  .flex_items-span-md-4 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-4 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
  }
  .flex_cols-md-5 {
    flex-wrap: wrap;
  }
  .flex_cols-md-5 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 4) / 5);
  }
  .flex_item-span-md-5 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
  }
  .flex_items-span-md-5 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-5 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
  }
  .flex_cols-md-6 {
    flex-wrap: wrap;
  }
  .flex_cols-md-6 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 5) / 6);
  }
  .flex_item-span-md-6 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
  }
  .flex_items-span-md-6 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-6 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
  }
  .flex_cols-md-7 {
    flex-wrap: wrap;
  }
  .flex_cols-md-7 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 6) / 7);
  }
  .flex_item-span-md-7 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
  }
  .flex_items-span-md-7 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-7 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
  }
  .flex_cols-md-8 {
    flex-wrap: wrap;
  }
  .flex_cols-md-8 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 7) / 8);
  }
  .flex_item-span-md-8 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
  }
  .flex_items-span-md-8 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-8 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
  }
  .flex_cols-md-9 {
    flex-wrap: wrap;
  }
  .flex_cols-md-9 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 8) / 9);
  }
  .flex_item-span-md-9 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
  }
  .flex_items-span-md-9 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-9 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
  }
  .flex_cols-md-10 {
    flex-wrap: wrap;
  }
  .flex_cols-md-10 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 9) / 10);
  }
  .flex_item-span-md-10 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
  }
  .flex_items-span-md-10 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-10 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
  }
  .flex_cols-md-11 {
    flex-wrap: wrap;
  }
  .flex_cols-md-11 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 10) / 11);
  }
  .flex_item-span-md-11 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
  }
  .flex_items-span-md-11 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-11 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
  }
  .flex_cols-md-12 {
    flex-wrap: wrap;
  }
  .flex_cols-md-12 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12);
  }
  .flex_item-span-md-12 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
  }
  .flex_items-span-md-12 {
    flex-wrap: wrap;
  }
  .flex_items-span-md-12 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
  }
}
@media (min-width: 1024px) {
  .flex_row-lg {
    flex-direction: row;
    align-items: center;
  }
  .flex_col-lg {
    flex-direction: column;
    align-items: stretch;
  }
  .flex_cols-lg-1 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-1 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 0) / 1);
  }
  .flex_item-span-lg-1 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
  }
  .flex_items-span-lg-1 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-1 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 1 + var(--flex-current-gap) * 0);
  }
  .flex_cols-lg-2 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-2 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 1) / 2);
  }
  .flex_item-span-lg-2 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
  }
  .flex_items-span-lg-2 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-2 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 2 + var(--flex-current-gap) * 1);
  }
  .flex_cols-lg-3 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-3 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 2) / 3);
  }
  .flex_item-span-lg-3 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
  }
  .flex_items-span-lg-3 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-3 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 3 + var(--flex-current-gap) * 2);
  }
  .flex_cols-lg-4 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-4 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 3) / 4);
  }
  .flex_item-span-lg-4 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
  }
  .flex_items-span-lg-4 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-4 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 4 + var(--flex-current-gap) * 3);
  }
  .flex_cols-lg-5 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-5 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 4) / 5);
  }
  .flex_item-span-lg-5 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
  }
  .flex_items-span-lg-5 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-5 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 5 + var(--flex-current-gap) * 4);
  }
  .flex_cols-lg-6 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-6 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 5) / 6);
  }
  .flex_item-span-lg-6 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
  }
  .flex_items-span-lg-6 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-6 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 6 + var(--flex-current-gap) * 5);
  }
  .flex_cols-lg-7 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-7 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 6) / 7);
  }
  .flex_item-span-lg-7 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
  }
  .flex_items-span-lg-7 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-7 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 7 + var(--flex-current-gap) * 6);
  }
  .flex_cols-lg-8 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-8 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 7) / 8);
  }
  .flex_item-span-lg-8 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
  }
  .flex_items-span-lg-8 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-8 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 8 + var(--flex-current-gap) * 7);
  }
  .flex_cols-lg-9 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-9 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 8) / 9);
  }
  .flex_item-span-lg-9 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
  }
  .flex_items-span-lg-9 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-9 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 9 + var(--flex-current-gap) * 8);
  }
  .flex_cols-lg-10 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-10 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 9) / 10);
  }
  .flex_item-span-lg-10 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
  }
  .flex_items-span-lg-10 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-10 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 10 + var(--flex-current-gap) * 9);
  }
  .flex_cols-lg-11 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-11 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 10) / 11);
  }
  .flex_item-span-lg-11 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
  }
  .flex_items-span-lg-11 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-11 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 11 + var(--flex-current-gap) * 10);
  }
  .flex_cols-lg-12 {
    flex-wrap: wrap;
  }
  .flex_cols-lg-12 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12);
  }
  .flex_item-span-lg-12 {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
  }
  .flex_items-span-lg-12 {
    flex-wrap: wrap;
  }
  .flex_items-span-lg-12 > * {
    flex: 0 0 calc((100% - var(--flex-current-gap) * 11) / 12 * 12 + var(--flex-current-gap) * 11);
  }
}

.divider {
  box-sizing: border-box;
  margin: var(--divider-margin-y) 0;
  padding: 0;
  border: none;
  border-top: var(--divider-thickness) solid var(--divider-color);
  width: 100%;
  height: 0;
  clear: both;
  color: var(--color-text-muted);
  font-size: var(--text-size-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.divider:not(:empty) {
  display: flex;
  align-items: center;
  height: auto;
  border-top: none;
}
.divider:not(:empty)::before, .divider:not(:empty)::after {
  content: "";
  flex: 1;
  border-top: var(--divider-thickness) solid var(--divider-color);
}
.divider:not(:empty)::before {
  margin-right: var(--divider-text-gap);
}
.divider:not(:empty)::after {
  margin-left: var(--divider-text-gap);
}
.divider_dashed {
  border-top-style: dashed;
}
.divider_dashed:not(:empty)::before, .divider_dashed:not(:empty)::after {
  border-top-style: dashed;
}
.divider_plain:not(:empty) {
  font-weight: 400;
}
.divider_orient-left:not(:empty)::before {
  flex: 0 0 var(--divider-orient-inset);
}
.divider_orient-right:not(:empty)::after {
  flex: 0 0 var(--divider-orient-inset);
}
.divider_vertical {
  display: inline-block;
  width: 0;
  height: auto;
  min-height: 1em;
  margin: 0 var(--divider-margin-x);
  border: none;
  border-left: var(--divider-thickness) solid var(--divider-color);
  vertical-align: middle;
  align-self: stretch;
}
.divider_vertical:not(:empty) {
  display: inline-flex;
  flex-direction: column;
  width: auto;
  height: auto;
  min-height: 1em;
  margin: var(--divider-margin-x) 0;
  border-left: none;
}
.divider_vertical:not(:empty)::before, .divider_vertical:not(:empty)::after {
  flex: 1;
  width: 0;
  margin: 0;
  border-top: none;
  border-left: var(--divider-thickness) solid var(--divider-color);
}
.divider_vertical:not(:empty)::before {
  margin-bottom: var(--divider-text-gap);
}
.divider_vertical:not(:empty)::after {
  margin-top: var(--divider-text-gap);
}
.divider_vertical.divider_dashed {
  border-top: none;
  border-left-style: dashed;
}
.divider_vertical.divider_dashed:not(:empty)::before, .divider_vertical.divider_dashed:not(:empty)::after {
  border-top: none;
  border-left-style: dashed;
}

.space {
  display: inline-flex;
  gap: var(--space-gap);
  align-items: center;
}
.space_block {
  display: flex;
  width: 100%;
}
.space_vertical {
  flex-direction: column;
}
.space_wrap {
  flex-wrap: wrap;
}
.space_gap-xs {
  gap: var(--space-xs);
}
.space_gap-sm {
  gap: var(--space-sm);
}
.space_gap-lg {
  gap: var(--space-lg);
}
.space_gap-xl {
  gap: var(--space-xl);
}
.space_align-start {
  align-items: flex-start;
}
.space_align-center {
  align-items: center;
}
.space_align-end {
  align-items: flex-end;
}
.space_align-baseline {
  align-items: baseline;
}
.space_align-stretch {
  align-items: stretch;
}
.space_justify-start {
  justify-content: flex-start;
}
.space_justify-center {
  justify-content: center;
}
.space_justify-end {
  justify-content: flex-end;
}
.space_justify-between {
  justify-content: space-between;
}

.color_default {
  color: var(--color-text);
}
.color_muted {
  color: var(--color-text-muted);
}
.color_primary {
  color: var(--color-accent-text);
}
.color_success {
  color: var(--color-success-text);
}
.color_warning {
  color: var(--color-warning-text);
}
.color_danger {
  color: var(--color-danger-text);
}
.color_info {
  color: var(--color-alert-info-text);
}
.color_error {
  color: var(--color-alert-error-text);
}

.size_xs {
  font-size: var(--text-size-xs);
}
.size_sm {
  font-size: var(--text-size-sm);
}
.size_lg {
  font-size: var(--text-size-lg);
}
.size_xl {
  font-size: var(--text-size-xl);
}
/*# sourceMappingURL=main.css.map */