@import "https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500&display=swap";.product-field,.product-slider-field {
    gap: var(--alpy-ui-component-text-input-stack-gap-label-to-field);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.product-field-label {
    color: var(--alpy-ui-component-text-input-styles-label-default);
    font-family: var(--alpy-ui-component-text-input-text-label-fontFamily);
    font-size: var(--alpy-ui-component-text-input-text-label-fontSize);
    font-weight: var(--alpy-ui-component-text-input-text-label-fontWeight);
    letter-spacing: var(--alpy-ui-component-text-input-text-label-letterSpacing);
    line-height: var(--alpy-ui-component-text-input-text-label-lineHeight)
}

.product-field-label-row {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.product-slider-label-row {
    justify-content: space-between
}

.product-field-label-main,.product-field-label-action {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: inline-flex
}

.product-field-label-end {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-component-text-input-text-label-fontFamily);
    font-size: var(--alpy-ui-component-text-input-text-label-fontSize);
    font-weight: var(--alpy-ui-component-text-input-text-label-fontWeight);
    letter-spacing: var(--alpy-ui-component-text-input-text-label-letterSpacing);
    line-height: var(--alpy-ui-component-text-input-text-label-lineHeight)
}

.product-field-label.is-visually-hidden {
    height: var(--alpy-ui-size-1);
    margin: calc(var(--alpy-ui-size-1) * -1);
    white-space: nowrap;
    width: var(--alpy-ui-size-1);
    position: absolute;
    overflow: hidden
}

.product-text-input-shell,.product-select-search-shell {
    background: var(--alpy-ui-component-text-input-styles-background-default);
    border: var(--alpy-ui-component-text-input-field-border-width) solid var(--alpy-ui-component-text-input-styles-border-default);
    border-radius: var(--alpy-ui-component-text-input-field-shape-radius);
    box-sizing: border-box;
    color: var(--alpy-ui-component-text-input-styles-text-default);
    align-items: center;
    gap: var(--alpy-ui-component-text-input-field-gap);
    height: var(--alpy-ui-component-text-input-field-size-height);
    padding: var(--alpy-ui-component-text-input-field-space-padding-y) var(--alpy-ui-component-text-input-field-space-padding-x);
    display: flex
}

.product-text-input-shell:focus-within,.product-select-search-shell:focus-within {
    border-color: var(--alpy-ui-component-text-input-styles-border-focused)
}

.product-text-input,.product-select-search-shell input {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: inherit;
    font-family: var(--alpy-ui-component-text-input-text-field-fontFamily);
    font-size: var(--alpy-ui-component-text-input-text-field-fontSize);
    font-weight: var(--alpy-ui-component-text-input-text-field-fontWeight);
    letter-spacing: var(--alpy-ui-component-text-input-text-field-letterSpacing);
    line-height: var(--alpy-ui-component-text-input-text-field-lineHeight);
    min-height: var(--alpy-ui-component-text-input-text-field-lineHeight);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    outline: none;
    width: 100%
}

.product-select-control {
    min-width: var(--alpy-ui-size-0);
    position: relative
}

.product-select-trigger,.product-dropdown-button {
    background: var(--alpy-ui-component-dropdown-styles-trigger-background-default);
    border: var(--alpy-ui-component-dropdown-trigger-border-width) solid var(--alpy-ui-component-dropdown-styles-trigger-border-default);
    border-radius: var(--alpy-ui-component-dropdown-trigger-shape-radius);
    box-sizing: border-box;
    color: var(--alpy-ui-component-dropdown-styles-trigger-text-default);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-component-dropdown-trigger-gap);
    height: var(--alpy-ui-component-dropdown-trigger-size-height);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-component-dropdown-trigger-space-padding-y) var(--alpy-ui-component-dropdown-trigger-space-padding-x);
    text-align: left;
    display: inline-flex
}

.product-select-trigger {
    justify-content: space-between;
    width: 100%
}

.product-select-trigger-lead {
    align-items: center;
    gap: var(--alpy-ui-component-dropdown-trigger-gap);
    min-width: var(--alpy-ui-size-0);
    display: inline-flex
}

.product-select-trigger:hover,.product-dropdown-button:hover {
    background: var(--alpy-ui-component-dropdown-styles-trigger-background-hover);
    border-color: var(--alpy-ui-component-dropdown-styles-trigger-border-hover)
}

.product-select-trigger:focus-visible,.product-select-trigger[aria-expanded=true],.product-dropdown-button:focus-visible {
    border-color: var(--alpy-ui-component-dropdown-styles-trigger-border-focus);
    outline: none
}

.product-select-trigger span,.product-dropdown-button span {
    font-family: var(--product-control-trigger-font-family,var(--alpy-ui-component-dropdown-text-trigger-fontFamily));
    font-size: var(--product-control-trigger-font-size,var(--alpy-ui-component-dropdown-text-trigger-fontSize));
    font-weight: var(--product-control-trigger-font-weight,var(--alpy-ui-component-dropdown-text-trigger-fontWeight));
    letter-spacing: var(--product-control-trigger-letter-spacing,var(--alpy-ui-component-dropdown-text-trigger-letterSpacing));
    line-height: var(--product-control-trigger-line-height,var(--alpy-ui-component-dropdown-text-trigger-lineHeight));
    min-width: var(--alpy-ui-size-0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.product-select-menu {
    background: var(--alpy-ui-component-dropdown-styles-menu-background-default);
    border: var(--alpy-ui-component-dropdown-menu-content-border-width) solid var(--alpy-ui-component-dropdown-styles-menu-border-default);
    border-radius: var(--alpy-ui-component-dropdown-menu-content-shape-radius);
    box-sizing: border-box;
    left: var(--alpy-ui-space-0);
    max-width: calc(100vw - var(--alpy-ui-space-32));
    min-width: max(100%, var(--alpy-ui-component-dropdown-menu-content-size-width));
    padding: var(--alpy-ui-component-dropdown-menu-content-space-padding);
    top: calc(100% + var(--alpy-ui-space-4));
    z-index: 2;
    width: max-content;
    display: grid;
    position: absolute;
    overflow: visible auto
}

.product-select-menu.is-align-right {
    left: auto;
    right: var(--alpy-ui-space-0)
}

.product-select-control:has(.product-select-menu) {
    z-index: 2
}

.product-select-search {
    background: var(--alpy-ui-component-dropdown-styles-menu-background-default);
    gap: var(--alpy-ui-component-text-input-stack-gap-label-to-field);
    padding-bottom: var(--alpy-ui-space-4);
    top: var(--alpy-ui-space-0);
    z-index: 1;
    display: grid;
    position: sticky
}

.product-select-search-shell {
    height: var(--alpy-ui-component-text-input-field-size-height)
}

.product-select-search-shell input::-webkit-search-cancel-button {
    appearance: none
}

.product-select-options {
    display: grid
}

.product-select-option {
    background: var(--alpy-ui-component-dropdown-styles-menu-item-background-default);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-component-dropdown-menu-item-shape-radius-hover);
    color: var(--alpy-ui-component-dropdown-styles-menu-item-text-default);
    cursor: pointer;
    font-family: var(--alpy-ui-component-dropdown-text-item-fontFamily);
    font-size: var(--alpy-ui-component-dropdown-text-item-fontSize);
    font-weight: var(--alpy-ui-component-dropdown-text-item-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-component-dropdown-menu-item-gap);
    grid-template-columns: var(--alpy-ui-component-dropdown-menu-item-size-icon) minmax(var(--alpy-ui-size-0), max-content);
    letter-spacing: var(--alpy-ui-component-dropdown-text-item-letterSpacing);
    line-height: var(--alpy-ui-component-dropdown-text-item-lineHeight);
    min-height: var(--alpy-ui-component-dropdown-menu-item-size-height);
    padding: var(--alpy-ui-component-dropdown-menu-item-space-padding-y) var(--alpy-ui-component-dropdown-menu-item-space-padding-right) var(--alpy-ui-component-dropdown-menu-item-space-padding-y) var(--alpy-ui-component-dropdown-menu-item-space-padding-left);
    text-align: left;
    white-space: nowrap;
    width: 100%;
    display: grid
}

.product-select-option.has-icon {
    grid-template-columns: var(--alpy-ui-component-dropdown-menu-item-size-icon) var(--alpy-ui-component-dropdown-menu-item-size-icon) minmax(var(--alpy-ui-size-0), max-content)
}

.product-select-option:hover,.product-select-option.is-active,.product-select-option:focus-visible {
    background: var(--alpy-ui-component-dropdown-styles-menu-item-background-hover);
    color: var(--alpy-ui-component-dropdown-styles-menu-item-text-hover);
    outline: none
}

.product-select-option.is-selected {
    background: var(--alpy-ui-component-dropdown-styles-menu-item-background-selected);
    color: var(--alpy-ui-component-dropdown-styles-menu-item-text-selected)
}

.product-select-option span:last-child {
    min-width: var(--alpy-ui-size-0);
    white-space: nowrap
}

.product-select-check {
    border-bottom: var(--alpy-ui-border-width-1-5) solid var(--alpy-ui-component-dropdown-styles-menu-item-icon-selected);
    border-right: var(--alpy-ui-border-width-1-5) solid var(--alpy-ui-component-dropdown-styles-menu-item-icon-selected);
    height: var(--alpy-ui-size-8);
    visibility: hidden;
    width: var(--alpy-ui-size-4);
    justify-self: center;
    display: block;
    transform: rotate(45deg)
}

.product-select-option.is-selected .product-select-check {
    visibility: visible
}

.product-select-option-icon {
    justify-self: center;
    display: inline-flex
}

.product-select-option-icon .product-ui-icon {
    --product-icon-size: var(--alpy-ui-component-dropdown-menu-item-size-icon)
}

.product-select-empty {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-component-dropdown-text-item-fontFamily);
    font-size: var(--alpy-ui-component-dropdown-text-item-fontSize);
    font-weight: var(--alpy-ui-component-dropdown-text-item-fontWeight);
    letter-spacing: var(--alpy-ui-component-dropdown-text-item-letterSpacing);
    line-height: var(--alpy-ui-component-dropdown-text-item-lineHeight);
    min-height: var(--alpy-ui-component-dropdown-menu-item-size-height);
    padding: var(--alpy-ui-component-dropdown-menu-item-space-padding-y) var(--alpy-ui-component-dropdown-menu-item-space-padding-right) var(--alpy-ui-component-dropdown-menu-item-space-padding-y) var(--alpy-ui-component-dropdown-menu-item-space-padding-left)
}

.product-slider-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr) auto;
    display: grid
}

.product-slider {
    accent-color: var(--alpy-ui-color-text-brand-color-one-accent);
    width: 100%
}

.product-button {
    --product-button-border-width: var(--alpy-ui-component-button-size-md-borderWidth);
    --product-button-radius: var(--alpy-ui-component-button-size-md-radius);
    --product-button-font-family: var(--alpy-ui-component-button-size-md-text-fontFamily);
    --product-button-font-size: var(--alpy-ui-component-button-size-md-text-fontSize);
    --product-button-font-weight: var(--alpy-ui-component-button-size-md-text-fontWeight);
    --product-button-gap: var(--alpy-ui-component-button-size-md-gap);
    --product-button-icon-size: var(--alpy-ui-component-button-size-md-iconSize);
    --product-button-letter-spacing: var(--alpy-ui-component-button-size-md-text-letterSpacing);
    --product-button-line-height: var(--alpy-ui-component-button-size-md-text-lineHeight);
    --product-button-min-height: var(--alpy-ui-component-button-size-md-minHeight);
    --product-button-padding-x: var(--alpy-ui-component-button-size-md-paddingX);
    --product-button-padding-y: var(--alpy-ui-component-button-size-md-paddingY);
    appearance: none;
    border-radius: var(--product-button-radius);
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--product-button-font-family);
    font-size: var(--product-button-font-size);
    font-weight: var(--product-button-font-weight);
    align-items: center;
    gap: var(--product-button-gap);
    height: var(--product-button-min-height);
    letter-spacing: var(--product-button-letter-spacing);
    line-height: var(--product-button-line-height);
    min-height: var(--product-button-min-height);
    padding: var(--product-button-padding-y) var(--product-button-padding-x);
    white-space: nowrap;
    justify-content: center;
    display: inline-flex
}

.product-button.is-sm {
    --product-button-border-width: var(--alpy-ui-component-button-size-sm-borderWidth);
    --product-button-radius: var(--alpy-ui-component-button-size-sm-radius);
    --product-button-font-family: var(--alpy-ui-component-button-size-sm-text-fontFamily);
    --product-button-font-size: var(--alpy-ui-component-button-size-sm-text-fontSize);
    --product-button-font-weight: var(--alpy-ui-component-button-size-sm-text-fontWeight);
    --product-button-gap: var(--alpy-ui-component-button-size-sm-gap);
    --product-button-icon-size: var(--alpy-ui-component-button-size-sm-iconSize);
    --product-button-letter-spacing: var(--alpy-ui-component-button-size-sm-text-letterSpacing);
    --product-button-line-height: var(--alpy-ui-component-button-size-sm-text-lineHeight);
    --product-button-min-height: var(--alpy-ui-component-button-size-sm-minHeight);
    --product-button-padding-x: var(--alpy-ui-component-button-size-sm-paddingX);
    --product-button-padding-y: var(--alpy-ui-component-button-size-sm-paddingY)
}

.product-button.is-lg {
    --product-button-border-width: var(--alpy-ui-component-button-size-lg-borderWidth);
    --product-button-radius: var(--alpy-ui-component-button-size-lg-radius);
    --product-button-font-family: var(--alpy-ui-component-button-size-lg-text-fontFamily);
    --product-button-font-size: var(--alpy-ui-component-button-size-lg-text-fontSize);
    --product-button-font-weight: var(--alpy-ui-component-button-size-lg-text-fontWeight);
    --product-button-gap: var(--alpy-ui-component-button-size-lg-gap);
    --product-button-icon-size: var(--alpy-ui-component-button-size-lg-iconSize);
    --product-button-letter-spacing: var(--alpy-ui-component-button-size-lg-text-letterSpacing);
    --product-button-line-height: var(--alpy-ui-component-button-size-lg-text-lineHeight);
    --product-button-min-height: var(--alpy-ui-component-button-size-lg-minHeight);
    --product-button-padding-x: var(--alpy-ui-component-button-size-lg-paddingX);
    --product-button-padding-y: var(--alpy-ui-component-button-size-lg-paddingY)
}

.product-button.is-link {
    background: var(--alpy-ui-component-button-variant-link-bg-default);
    border: var(--product-button-border-width) solid var(--alpy-ui-component-button-variant-link-border-default);
    color: var(--alpy-ui-component-button-variant-link-text-default)
}

.product-button.is-link:hover {
    background: var(--alpy-ui-component-button-variant-link-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-link-border-hover);
    color: var(--alpy-ui-component-button-variant-link-text-hover)
}

.product-button.is-link:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-link-focusRing-color);
    outline: none
}

.product-button.is-link:active {
    background: var(--alpy-ui-component-button-variant-link-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-link-border-pressed);
    color: var(--alpy-ui-component-button-variant-link-text-pressed)
}

.product-button.is-nav {
    background: var(--alpy-ui-component-button-variant-link-bg-default);
    border: var(--product-button-border-width) solid var(--alpy-ui-component-button-variant-link-border-default);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.product-button.is-nav:hover {
    background: var(--alpy-ui-component-button-variant-link-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-link-border-hover);
    color: var(--alpy-ui-color-text-heading)
}

.product-button.is-nav:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-link-focusRing-color);
    outline: none
}

.product-button.is-nav:active {
    background: var(--alpy-ui-component-button-variant-link-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-link-border-pressed);
    color: var(--alpy-ui-color-text-heading)
}

.product-button.is-outline {
    background: var(--alpy-ui-component-button-variant-outline-bg-default);
    border: var(--product-button-border-width) solid var(--alpy-ui-component-button-variant-outline-border-default);
    color: var(--alpy-ui-component-button-variant-outline-text-default)
}

.product-button.is-outline:hover {
    background: var(--alpy-ui-component-button-variant-outline-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-outline-border-hover);
    color: var(--alpy-ui-component-button-variant-outline-text-hover)
}

.product-button.is-outline:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-outline-focusRing-color);
    outline: none
}

.product-button.is-outline:active {
    background: var(--alpy-ui-component-button-variant-outline-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-outline-border-pressed);
    color: var(--alpy-ui-component-button-variant-outline-text-pressed)
}

.product-button.is-primary {
    background: var(--alpy-ui-component-button-variant-primary-bg-default);
    border: var(--product-button-border-width) solid var(--alpy-ui-component-button-variant-primary-border-default);
    color: var(--alpy-ui-component-button-variant-primary-text-default)
}

.product-button.is-primary:hover {
    background: var(--alpy-ui-component-button-variant-primary-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-primary-border-hover);
    color: var(--alpy-ui-component-button-variant-primary-text-hover)
}

.product-button.is-primary:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-primary-focusRing-color);
    outline: none
}

.product-button.is-primary:active {
    background: var(--alpy-ui-component-button-variant-primary-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-primary-border-pressed);
    color: var(--alpy-ui-component-button-variant-primary-text-pressed)
}

.product-button.is-secondary {
    background: var(--alpy-ui-component-button-variant-secondary-bg-default);
    border: var(--product-button-border-width) solid var(--alpy-ui-component-button-variant-secondary-border-default);
    color: var(--alpy-ui-component-button-variant-secondary-text-default)
}

.product-button.is-secondary .product-ui-icon {
    color: var(--alpy-ui-component-button-variant-secondary-icon-default)
}

.product-button.is-secondary:hover {
    background: var(--alpy-ui-component-button-variant-secondary-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-secondary-border-hover);
    color: var(--alpy-ui-component-button-variant-secondary-text-hover)
}

.product-button.is-secondary:hover .product-ui-icon {
    color: var(--alpy-ui-component-button-variant-secondary-icon-hover)
}

.product-button.is-secondary:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-secondary-focusRing-color);
    outline: none
}

.product-button.is-secondary:active {
    background: var(--alpy-ui-component-button-variant-secondary-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-secondary-border-pressed);
    color: var(--alpy-ui-component-button-variant-secondary-text-pressed)
}

.product-button.is-secondary:active .product-ui-icon {
    color: var(--alpy-ui-component-button-variant-secondary-icon-pressed)
}

.product-button:disabled {
    cursor: not-allowed
}

.product-button.is-link:disabled {
    background: var(--alpy-ui-component-button-variant-link-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-link-border-disabled);
    color: var(--alpy-ui-component-button-variant-link-text-disabled)
}

.product-button.is-nav:disabled {
    background: var(--alpy-ui-component-button-variant-link-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-link-border-disabled);
    color: var(--alpy-ui-color-text-body-subtle)
}

.product-button.is-outline:disabled {
    background: var(--alpy-ui-component-button-variant-outline-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-outline-border-disabled);
    color: var(--alpy-ui-component-button-variant-outline-text-disabled)
}

.product-button.is-primary:disabled {
    background: var(--alpy-ui-component-button-variant-primary-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-primary-border-disabled);
    color: var(--alpy-ui-component-button-variant-primary-text-disabled)
}

.product-button.is-secondary:disabled {
    background: var(--alpy-ui-component-button-variant-secondary-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-secondary-border-disabled);
    color: var(--alpy-ui-component-button-variant-secondary-text-disabled)
}

.product-button.is-secondary:disabled .product-ui-icon {
    color: var(--alpy-ui-component-button-variant-secondary-icon-disabled)
}

.product-tabs {
    background: var(--alpy-ui-component-tabs-styles-basic-container);
    border-radius: var(--alpy-ui-component-tabs-basic-horizontal-shape-container-radius);
    gap: var(--alpy-ui-component-tabs-basic-horizontal-gap);
    grid-auto-columns: minmax(var(--alpy-ui-size-0), 1fr);
    padding: var(--alpy-ui-component-tabs-basic-horizontal-space-group-padding);
    grid-auto-flow: column;
    display: grid
}

.product-tab {
    background: var(--alpy-ui-component-tabs-styles-basic-item-background-inactive);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-component-tabs-basic-horizontal-shape-item-radius);
    color: var(--alpy-ui-component-tabs-styles-basic-text-inactive);
    cursor: pointer;
    font-family: var(--alpy-ui-component-tabs-text-label-fontFamily);
    font-size: var(--alpy-ui-component-tabs-text-label-fontSize);
    font-weight: var(--alpy-ui-component-tabs-text-label-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-component-tabs-basic-horizontal-space-icon-gap);
    letter-spacing: var(--alpy-ui-component-tabs-text-label-letterSpacing);
    line-height: var(--alpy-ui-component-tabs-text-label-lineHeight);
    min-height: var(--alpy-ui-component-tabs-basic-horizontal-size-min-height);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-component-tabs-basic-horizontal-space-item-padding-y) var(--alpy-ui-component-tabs-basic-horizontal-space-item-padding-x);
    justify-content: center;
    display: inline-flex
}

.product-tab:hover {
    color: var(--alpy-ui-component-tabs-styles-basic-text-hover)
}

.product-tab:focus-visible {
    outline: var(--alpy-ui-component-tabs-line-horizontal-border-indicator-width) solid var(--alpy-ui-component-tabs-styles-line-indicator);
    outline-offset: calc(var(--alpy-ui-size-1) * -1)
}

.product-tab.is-active {
    background: var(--alpy-ui-component-tabs-styles-basic-item-background-selected);
    color: var(--alpy-ui-component-tabs-styles-basic-text-selected)
}

.product-toggle {
    --product-toggle-thumb-size: var(--alpy-ui-component-toggle-control-size-thumb-md);
    --product-toggle-track-height: var(--alpy-ui-component-toggle-control-size-trackHeight-md);
    --product-toggle-track-width: var(--alpy-ui-component-toggle-control-size-trackWidth-md);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-component-toggle-styles-default-label);
    cursor: pointer;
    font-family: var(--alpy-ui-component-toggle-text-label-md-fontFamily);
    font-size: var(--alpy-ui-component-toggle-text-label-md-fontSize);
    font-weight: var(--alpy-ui-component-toggle-text-label-md-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-component-toggle-control-gap-trackToLabel);
    letter-spacing: var(--alpy-ui-component-toggle-text-label-md-letterSpacing);
    line-height: var(--alpy-ui-component-toggle-text-label-md-lineHeight);
    padding: var(--alpy-ui-space-0);
    display: inline-flex
}

.product-toggle.is-sm {
    --product-toggle-thumb-size: var(--alpy-ui-component-toggle-control-size-thumb-sm);
    --product-toggle-track-height: var(--alpy-ui-component-toggle-control-size-trackHeight-sm);
    --product-toggle-track-width: var(--alpy-ui-component-toggle-control-size-trackWidth-sm);
    font-family: var(--alpy-ui-component-toggle-text-label-sm-fontFamily);
    font-size: var(--alpy-ui-component-toggle-text-label-sm-fontSize);
    font-weight: var(--alpy-ui-component-toggle-text-label-sm-fontWeight);
    letter-spacing: var(--alpy-ui-component-toggle-text-label-sm-letterSpacing);
    line-height: var(--alpy-ui-component-toggle-text-label-sm-lineHeight)
}

.product-toggle.is-lg {
    --product-toggle-thumb-size: var(--alpy-ui-component-toggle-control-size-thumb-lg);
    --product-toggle-track-height: var(--alpy-ui-component-toggle-control-size-trackHeight-lg);
    --product-toggle-track-width: var(--alpy-ui-component-toggle-control-size-trackWidth-lg);
    font-family: var(--alpy-ui-component-toggle-text-label-lg-fontFamily);
    font-size: var(--alpy-ui-component-toggle-text-label-lg-fontSize);
    font-weight: var(--alpy-ui-component-toggle-text-label-lg-fontWeight);
    letter-spacing: var(--alpy-ui-component-toggle-text-label-lg-letterSpacing);
    line-height: var(--alpy-ui-component-toggle-text-label-lg-lineHeight)
}

.product-toggle-track {
    background: var(--alpy-ui-component-toggle-styles-default-track-bg);
    border: var(--alpy-ui-component-toggle-control-border-width) solid var(--alpy-ui-component-toggle-styles-default-track-border);
    border-radius: var(--alpy-ui-component-toggle-control-shape-radius);
    box-sizing: border-box;
    height: var(--product-toggle-track-height);
    padding: var(--alpy-ui-component-toggle-control-border-width);
    width: var(--product-toggle-track-width);
    justify-content: flex-start;
    align-items: center;
    display: flex
}

.product-toggle-thumb {
    background: var(--alpy-ui-component-toggle-styles-default-thumb-bg);
    border-radius: var(--alpy-ui-component-toggle-control-shape-radius);
    height: var(--product-toggle-thumb-size);
    width: var(--product-toggle-thumb-size);
    display: block
}

.product-toggle.is-checked {
    color: var(--alpy-ui-component-toggle-styles-checked-label)
}

.product-toggle.is-checked .product-toggle-track {
    background: var(--alpy-ui-component-toggle-styles-checked-track-bg);
    border-color: var(--alpy-ui-component-toggle-styles-checked-track-border);
    justify-content: flex-end
}

.product-toggle.is-checked .product-toggle-thumb {
    background: var(--alpy-ui-component-toggle-styles-checked-thumb-bg)
}

.product-toggle:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid var(--alpy-ui-component-tabs-styles-line-indicator);
    outline-offset: var(--alpy-ui-space-2)
}

.product-toggle:disabled {
    color: var(--alpy-ui-component-toggle-styles-default-label-disabled);
    cursor: not-allowed
}

.product-toggle:disabled .product-toggle-track {
    background: var(--alpy-ui-component-toggle-styles-default-track-bg-disabled);
    border-color: var(--alpy-ui-component-toggle-styles-default-track-border-disabled)
}

.product-toggle:disabled .product-toggle-thumb {
    background: var(--alpy-ui-component-toggle-styles-default-thumb-bg-disabled)
}

.product-toggle.is-checked:disabled {
    color: var(--alpy-ui-component-toggle-styles-checked-label-disabled)
}

.product-toggle.is-checked:disabled .product-toggle-track {
    background: var(--alpy-ui-component-toggle-styles-checked-track-bg-disabled);
    border-color: var(--alpy-ui-component-toggle-styles-checked-track-border-disabled)
}

.product-toggle.is-checked:disabled .product-toggle-thumb {
    background: var(--alpy-ui-component-toggle-styles-checked-thumb-bg-disabled)
}

.product-reset-button {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    box-sizing: border-box;
    color: var(--alpy-ui-color-functional-danger);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.product-reset-button.is-button {
    background: var(--alpy-ui-color-functional-danger-subtle);
    border: var(--alpy-ui-component-button-size-sm-borderWidth) solid var(--alpy-ui-color-border-functional-danger);
    border-radius: var(--alpy-ui-component-button-size-sm-radius);
    font-family: var(--alpy-ui-component-button-size-sm-text-fontFamily);
    font-size: var(--alpy-ui-component-button-size-sm-text-fontSize);
    font-weight: var(--alpy-ui-component-button-size-sm-text-fontWeight);
    gap: var(--alpy-ui-component-button-size-sm-gap);
    letter-spacing: var(--alpy-ui-component-button-size-sm-text-letterSpacing);
    line-height: var(--alpy-ui-component-button-size-sm-text-lineHeight);
    min-height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-12);
    white-space: nowrap
}

.product-reset-button.is-button:hover,.product-reset-button.is-button:active,.product-reset-button.is-button:focus-visible {
    background: var(--alpy-ui-color-functional-danger-subtle);
    border-color: var(--alpy-ui-color-border-functional-danger);
    color: var(--alpy-ui-color-text-functional-danger);
    outline: none
}

.product-reset-button-anchor {
    min-width: var(--alpy-ui-size-0);
    display: inline-flex;
    position: relative
}

.product-reset-button.is-icon {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    height: var(--alpy-ui-icon-size-20);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-icon-size-20)
}

.product-reset-button.is-icon:hover,.product-reset-button.is-icon:active {
    background: var(--alpy-ui-color-system-transparent);
    color: var(--alpy-ui-color-text-functional-danger)
}

.product-reset-button.is-icon:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-2)
}

.product-modal-backdrop {
    background: color-mix(in srgb, var(--alpy-ui-color-system-black) 32%, var(--alpy-ui-color-system-transparent));
    inset: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16);
    z-index: 5;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed
}

.product-modal {
    background: var(--alpy-ui-component-modal-background-default);
    border: var(--alpy-ui-component-modal-container-border-width) solid var(--alpy-ui-component-modal-border-default);
    border-radius: var(--alpy-ui-component-modal-container-shape-radius);
    box-sizing: border-box;
    color: var(--alpy-ui-component-modal-body-default);
    gap: var(--alpy-ui-component-modal-stack-gap-sections);
    max-height: calc(100dvh - var(--alpy-ui-space-32));
    padding: var(--alpy-ui-component-modal-container-space-padding-y) var(--alpy-ui-component-modal-container-space-padding-x);
    width: min(calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192)), calc(100vw - var(--alpy-ui-space-32)));
    display: grid;
    overflow: auto
}

.product-modal-header {
    align-items: start;
    gap: var(--alpy-ui-component-modal-header-gap-icon-to-headline);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    display: grid
}

.product-modal-copy,.product-modal-body {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.product-modal-title,.product-modal-description {
    margin: var(--alpy-ui-space-0)
}

.product-modal-title {
    color: var(--alpy-ui-component-modal-headline-default);
    font-family: var(--alpy-ui-component-modal-text-headline-fontFamily);
    font-size: var(--alpy-ui-component-modal-text-headline-fontSize);
    font-weight: var(--alpy-ui-component-modal-text-headline-fontWeight);
    letter-spacing: var(--alpy-ui-component-modal-text-headline-letterSpacing);
    line-height: var(--alpy-ui-component-modal-text-headline-lineHeight)
}

.product-modal-description,.product-modal-body {
    color: var(--alpy-ui-component-modal-body-default);
    font-family: var(--alpy-ui-component-modal-text-body-fontFamily);
    font-size: var(--alpy-ui-component-modal-text-body-fontSize);
    font-weight: var(--alpy-ui-component-modal-text-body-fontWeight);
    letter-spacing: var(--alpy-ui-component-modal-text-body-letterSpacing);
    line-height: var(--alpy-ui-component-modal-text-body-lineHeight)
}

.product-modal-close {
    --product-icon-size: var(--alpy-ui-component-modal-header-size-close);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-component-modal-close-default);
    cursor: pointer;
    height: var(--alpy-ui-component-modal-header-size-icon);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-component-modal-header-size-icon);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.product-modal-close:hover,.product-modal-close:active {
    color: var(--alpy-ui-component-modal-icon-default)
}

.product-modal-close:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-2)
}

.product-modal-actions {
    gap: var(--alpy-ui-component-modal-cta-gap-buttons);
    flex-wrap: wrap;
    justify-content: flex-end;
    display: flex
}

.product-tooltip {
    --product-tooltip-caret-color: var(--alpy-ui-component-tooltip-styles-hover-card-caret);
    --product-tooltip-caret-height: var(--alpy-ui-component-tooltip-hover-card-size-caret-height);
    --product-tooltip-caret-width: var(--alpy-ui-component-tooltip-hover-card-size-caret-width);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .12s,transform .12s;
    position: absolute
}

.product-tooltip.is-hover-card {
    --product-tooltip-caret-color: var(--alpy-ui-component-tooltip-styles-hover-card-caret);
    --product-tooltip-caret-height: var(--alpy-ui-component-tooltip-hover-card-size-caret-height);
    --product-tooltip-caret-width: var(--alpy-ui-component-tooltip-hover-card-size-caret-width);
    background: var(--alpy-ui-component-tooltip-styles-hover-card-background);
    border-radius: var(--alpy-ui-component-tooltip-hover-card-shape-radius);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-8) var(--alpy-ui-size-24) color-mix(in srgb, var(--alpy-ui-color-system-black) 18%, var(--alpy-ui-color-system-transparent));
    color: var(--alpy-ui-component-tooltip-styles-hover-card-description);
    font-family: var(--alpy-ui-component-tooltip-text-description-fontFamily);
    font-size: var(--alpy-ui-component-tooltip-text-headline-fontSize);
    font-weight: var(--alpy-ui-component-tooltip-text-description-fontWeight);
    letter-spacing: var(--alpy-ui-component-tooltip-text-headline-letterSpacing);
    line-height: var(--alpy-ui-component-tooltip-text-headline-lineHeight);
    max-width: min(calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-200) + var(--alpy-ui-space-40)), calc(100vw - var(--alpy-ui-space-32)));
    min-width: min(calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-120)), calc(100vw - var(--alpy-ui-space-32)));
    padding: var(--alpy-ui-component-tooltip-hover-card-space-padding-y) var(--alpy-ui-component-tooltip-hover-card-space-padding-x);
    white-space: normal
}

.product-tooltip.is-basic {
    --product-tooltip-caret-color: var(--alpy-ui-component-tooltip-styles-basic-caret);
    --product-tooltip-caret-height: var(--alpy-ui-component-tooltip-basic-size-caret-height);
    --product-tooltip-caret-width: var(--alpy-ui-component-tooltip-basic-size-caret-width);
    background: var(--alpy-ui-component-tooltip-styles-basic-background);
    border-radius: var(--alpy-ui-component-tooltip-basic-shape-radius);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-8) var(--alpy-ui-size-24) color-mix(in srgb, var(--alpy-ui-color-system-black) 14%, var(--alpy-ui-color-system-transparent));
    color: var(--alpy-ui-component-tooltip-styles-basic-text);
    font-family: var(--alpy-ui-component-tooltip-text-label-fontFamily);
    font-size: var(--alpy-ui-component-tooltip-text-label-fontSize);
    font-weight: var(--alpy-ui-component-tooltip-text-label-fontWeight);
    letter-spacing: var(--alpy-ui-component-tooltip-text-label-letterSpacing);
    line-height: var(--alpy-ui-component-tooltip-text-label-lineHeight);
    padding: var(--alpy-ui-component-tooltip-basic-space-padding-y) var(--alpy-ui-component-tooltip-basic-space-padding-x);
    white-space: nowrap
}

.product-tooltip.is-floating {
    transform: translate(-50%, var(--alpy-ui-space-4));
    z-index: 4;
    position: fixed
}

.product-tooltip-caret {
    color: var(--product-tooltip-caret-color);
    height: var(--product-tooltip-caret-height);
    pointer-events: none;
    width: var(--product-tooltip-caret-width);
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.product-tooltip-caret:before {
    content: "";
    background: currentColor;
    width: 100%;
    height: 100%;
    display: block
}

.product-tooltip[data-floating-placement=top] .product-tooltip-caret {
    bottom: calc(var(--product-tooltip-caret-height) * -1)
}

.product-tooltip[data-floating-placement=top] .product-tooltip-caret:before {
    clip-path: polygon(0 0,100% 0,50% 100%)
}

.product-tooltip[data-floating-placement=bottom] .product-tooltip-caret {
    top: calc(var(--product-tooltip-caret-height) * -1)
}

.product-tooltip[data-floating-placement=bottom] .product-tooltip-caret:before {
    clip-path: polygon(50% 0,0 100%,100% 100%)
}

.product-reset-button-anchor:hover .product-tooltip.is-floating,.product-reset-button.is-icon:focus+.product-tooltip.is-floating,.product-reset-button.is-icon:focus-visible+.product-tooltip.is-floating {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.app-shell[data-products-menu-open=true] .product-tooltip.is-floating {
    opacity: 0;
    transform: translate(-50%, var(--alpy-ui-space-4));
    visibility: hidden
}

.section-panel.is-type-panel .product-tooltip.is-floating,.section-panel.is-color-panel .product-tooltip.is-floating {
    max-width: min(calc(var(--alpy-ui-size-192) + var(--alpy-ui-space-28)), calc(100vw - var(--alpy-ui-space-32)));
    min-width: min(calc(var(--alpy-ui-size-192) + var(--alpy-ui-space-28)), calc(100vw - var(--alpy-ui-space-32)))
}

.product-tooltip-content,.product-tooltip-list {
    gap: var(--alpy-ui-component-tooltip-hover-card-gap-stack);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.product-tooltip-heading {
    color: var(--alpy-ui-component-tooltip-styles-hover-card-headline);
    font-weight: var(--alpy-ui-font-weight-medium)
}

.product-tooltip-list-item {
    gap: var(--alpy-ui-space-6);
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    display: grid
}

.product-tooltip-list-item:before {
    content: "•"
}

.product-icon-button {
    background: var(--alpy-ui-component-button-variant-link-bg-default);
    border: var(--alpy-ui-component-button-size-sm-borderWidth) solid var(--alpy-ui-component-button-variant-link-border-default);
    border-radius: var(--alpy-ui-component-button-size-sm-radius);
    box-sizing: border-box;
    color: var(--alpy-ui-component-button-variant-link-icon-default);
    cursor: pointer;
    height: var(--alpy-ui-component-button-content-iconOnly-sm-height);
    padding: var(--alpy-ui-component-button-size-sm-paddingY);
    width: var(--alpy-ui-component-button-content-iconOnly-sm-width);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.product-icon-button.is-current {
    color: currentColor
}

.product-icon-button:hover {
    background: var(--alpy-ui-component-button-variant-link-bg-hover);
    border-color: var(--alpy-ui-component-button-variant-link-border-hover);
    color: var(--alpy-ui-component-button-variant-link-icon-hover)
}

.product-icon-button:focus-visible {
    border-color: var(--alpy-ui-component-button-variant-link-focusRing-color);
    outline: none
}

.product-icon-button:active {
    background: var(--alpy-ui-component-button-variant-link-bg-pressed);
    border-color: var(--alpy-ui-component-button-variant-link-border-pressed);
    color: var(--alpy-ui-component-button-variant-link-icon-pressed)
}

.product-icon-button:disabled {
    background: var(--alpy-ui-component-button-variant-link-bg-disabled);
    border-color: var(--alpy-ui-component-button-variant-link-border-disabled);
    color: var(--alpy-ui-component-button-variant-link-icon-disabled);
    cursor: not-allowed
}

.product-icon-button.is-current:hover {
    color: currentColor
}

.product-slider-row .product-icon-button {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-color: var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-heading)
}

.product-slider-row .product-icon-button:hover {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-color: var(--alpy-ui-color-border-neutral-subtle-three);
    color: var(--alpy-ui-color-text-heading)
}

.product-slider-row .product-icon-button:active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-color: var(--alpy-ui-color-border-neutral-strong-one);
    color: var(--alpy-ui-color-text-heading)
}

.product-slider-row .product-icon-button:disabled {
    background: var(--alpy-ui-color-surface-interaction-disabled);
    border-color: var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-body-subtle)
}

.product-ui-icon {
    color: currentColor;
    height: var(--product-icon-size,var(--alpy-ui-icon-size-20));
    width: var(--product-icon-size,var(--alpy-ui-icon-size-20));
    flex: none;
    display: inline-flex
}

.product-slider-field.has-compact-icons .product-slider-row .product-ui-icon {
    --product-icon-size: var(--alpy-ui-icon-size-12)
}

.product-ui-icon svg {
    width: 100%;
    height: 100%;
    display: block
}

.product-ui-icon [fill]:not([fill=none]) {
    fill: currentColor!important
}

.product-ui-icon [stroke]:not([stroke=none]) {
    stroke-width: var(--alpy-ui-border-width-1-5);
    stroke: currentColor!important
}

.product-text-input-shell .product-ui-icon {
    --product-icon-size: var(--alpy-ui-component-text-input-field-size-icon);
    color: var(--alpy-ui-component-text-input-styles-icon-default)
}

.product-select-trigger .product-ui-icon,.product-dropdown-button .product-ui-icon {
    --product-icon-size: var(--alpy-ui-component-dropdown-trigger-size-icon);
    color: var(--product-control-trigger-icon-color,var(--alpy-ui-component-dropdown-styles-trigger-icon-default))
}

.product-button .product-ui-icon {
    --product-icon-size: var(--product-button-icon-size);
    color: currentColor
}

.product-modal-backdrop:has(.pricing-modal) {
    align-items: center
}

.product-modal.pricing-modal {
    height: auto;
    max-height: calc(100dvh - var(--alpy-ui-space-32));
    padding: var(--alpy-ui-space-32);
    width: min(calc(100vw - var(--alpy-ui-space-32)), calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-100) + var(--alpy-ui-size-80)));
    position: relative;
    overflow: auto
}

.product-modal.pricing-modal .product-modal-header {
    z-index: 1;
    position: absolute;
    inset-block-start: var(--alpy-ui-space-16);
    inset-inline-end: var(--alpy-ui-space-16)
}

.product-modal.pricing-modal .product-modal-copy {
    block-size: var(--alpy-ui-size-1);
    clip-path: inset(50%);
    inline-size: var(--alpy-ui-size-1);
    white-space: nowrap;
    position: absolute;
    overflow: hidden
}

.pricing-modal-body {
    gap: var(--alpy-ui-space-16);
    flex-direction: column;
    width: 100%;
    display: flex
}

.product-modal.pricing-modal .lp-pricing-cards {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(var(--pricing-modal-plan-count,3), minmax(var(--alpy-ui-size-0), 1fr));
    margin: var(--alpy-ui-size-0);
    max-width: none
}

.product-modal.pricing-modal .lp-pricing-cards.is-1-plans {
    --pricing-modal-plan-count: 1
}

.product-modal.pricing-modal .lp-pricing-cards.is-2-plans {
    --pricing-modal-plan-count: 2
}

.product-modal.pricing-modal .lp-pricing-card-headline {
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight)
}

.pricing-modal-notice {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.pricing-modal-button--full {
    width: 100%
}

@media (width<=1024px) {
    .product-modal.pricing-modal .lp-pricing-cards {
        gap: var(--alpy-ui-space-12)
    }

    .product-modal.pricing-modal .lp-pricing-card {
        gap: var(--alpy-ui-space-20);
        padding: var(--alpy-ui-space-20)
    }

    .product-modal.pricing-modal .lp-pricing-card--free {
        padding-inline:var(--alpy-ui-size-0)}

    .product-modal.pricing-modal .lp-pricing-card-headline,.product-modal.pricing-modal .lp-pricing-card-name {
        font-size: var(--alpy-ui-font-heading-small-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
        line-height: var(--alpy-ui-font-heading-small-lineHeight)
    }

    .product-modal.pricing-modal .lp-price-amount {
        font-size: var(--alpy-ui-font-heading-large-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-large-letterSpacing);
        line-height: var(--alpy-ui-font-heading-large-lineHeight)
    }
}

@media (width<=744px) {
    .product-modal.pricing-modal {
        padding: var(--alpy-ui-space-20)
    }

    .product-modal.pricing-modal .lp-pricing-cards,.product-modal.pricing-modal .lp-pricing-cards.is-1-plans,.product-modal.pricing-modal .lp-pricing-cards.is-2-plans {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .product-modal.pricing-modal .lp-pricing-card {
        padding: var(--alpy-ui-space-24)
    }
}

.section-panel.is-color-panel {
    padding: var(--alpy-ui-space-0)
}

.color-palette-panel {
    gap: var(--alpy-ui-space-0);
    min-width: 0;
    display: grid
}

.color-panel-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-height: var(--alpy-ui-size-64);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.section-panel.is-color-panel .color-panel-header h2,.color-preview-panel h2,.color-fine-tuning-header h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.color-palette-groups {
    gap: var(--alpy-ui-space-4);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-8);
    display: grid
}

.color-palette-group {
    gap: var(--alpy-ui-space-4);
    display: grid
}

.section-panel.is-color-panel .color-group-toggle {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-heading);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-4);
    min-height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-8);
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    display: inline-flex
}

.color-group-toggle-icon {
    --product-icon-size: var(--alpy-ui-component-accordion-basic-size-icon-size);
    display: inline-flex
}

.section-panel.is-color-panel .color-group-toggle[aria-expanded=false] .color-group-toggle-icon {
    transform: rotate(-90deg)
}

.section-panel.is-color-panel .color-group-toggle span:last-child {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.color-palette-list {
    gap: var(--alpy-ui-space-0);
    display: grid
}

.section-panel.is-color-panel .color-palette-row {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    align-items: center;
    column-gap: var(--alpy-ui-space-4);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: var(--alpy-ui-size-64);
    min-width: 0;
    padding: var(--alpy-ui-space-8);
    text-align: left;
    width: 100%;
    display: grid
}

.section-panel.is-color-panel .color-palette-row:hover,.section-panel.is-color-panel .color-palette-row.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one)
}

.section-panel.is-color-panel .color-palette-row-select {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: inherit;
    cursor: pointer;
    min-width: 0;
    padding: var(--alpy-ui-space-0);
    text-align: left;
    justify-items: start;
    width: 100%;
    display: grid
}

.section-panel.is-color-panel .color-palette-row-select:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.section-panel.is-color-panel .color-palette-delete-button {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    color: var(--alpy-ui-color-text-body-subtle);
    justify-self: end
}

.section-panel.is-color-panel .color-palette-delete-button:hover {
    color: var(--alpy-ui-color-text-functional-danger)
}

.color-palette-row-copy {
    gap: var(--alpy-ui-space-2);
    min-width: 0;
    display: grid
}

.color-palette-row-name {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.color-mini-ramp {
    border-radius: var(--alpy-ui-radius-medium);
    box-shadow: inset 0 0 0 var(--alpy-ui-border-width-1) var(--alpy-ui-color-border-neutral-subtle-two);
    height: var(--alpy-ui-size-24);
    line-height: var(--alpy-ui-size-0);
    align-items: stretch;
    max-width: 100%;
    display: inline-flex;
    overflow: hidden
}

.color-mini-swatch {
    background: var(--color-mini-swatch);
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-size-20);
    display: block
}

.color-mini-swatch.is-transparent-swatch {
    background: linear-gradient(45deg, var(--alpy-ui-color-shades-neutral-subtle-one) 25%, var(--alpy-ui-color-system-transparent) 25%) 0 0 / var(--alpy-ui-size-8) var(--alpy-ui-size-8), linear-gradient(45deg, var(--alpy-ui-color-system-transparent) 75%, var(--alpy-ui-color-shades-neutral-subtle-one) 75%) 0 0 / var(--alpy-ui-size-8) var(--alpy-ui-size-8), var(--alpy-ui-color-system-white)
}

.color-delete-token-list {
    margin: var(--alpy-ui-space-0)
}

.color-delete-token-empty {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.color-delete-token-list {
    max-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-96));
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid;
    overflow: auto
}

.color-delete-token-row {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-width: 0;
    padding: var(--alpy-ui-space-8);
    display: grid
}

.color-delete-token-row span,.color-delete-token-row code {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: 0
}

.color-delete-token-row code {
    color: var(--alpy-ui-color-text-body);
    overflow-wrap: anywhere
}

.color-page {
    gap: var(--alpy-ui-space-24);
    min-width: 0;
    display: grid
}

.color-workspace-grid {
    --color-control-panel-width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-108));
    align-items: start;
    gap: var(--alpy-ui-space-0);
    grid-template-columns: minmax(var(--alpy-ui-size-0), var(--color-control-panel-width)) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: 0;
    display: grid
}

.color-control-panel {
    box-sizing: border-box;
    gap: var(--alpy-ui-space-16);
    min-width: 0;
    max-width: 100%;
    padding-right: var(--alpy-ui-space-16);
    width: var(--color-control-panel-width);
    display: grid
}

.color-preview-panel {
    border-left: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-20);
    min-width: 0;
    padding-left: var(--alpy-ui-space-28);
    display: grid
}

.color-preview-heading {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    justify-content: space-between;
    min-width: 0;
    display: flex
}

.color-reset-all-shades-button {
    flex: none
}

.color-control-section {
    gap: var(--alpy-ui-space-12);
    min-width: 0;
    display: grid
}

.color-control-section+.color-control-section {
    margin-top: var(--alpy-ui-space-8)
}

.color-base-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), calc(var(--alpy-ui-size-80) + var(--alpy-ui-size-80))) auto;
    justify-content: start;
    display: grid
}

.color-base-picker-anchor {
    position: relative
}

.color-base-swatch {
    background: var(--color-base-swatch);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    cursor: pointer;
    height: var(--alpy-ui-size-48);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-48)
}

.color-floating-picker {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-8) var(--alpy-ui-size-24) color-mix(in srgb, var(--alpy-ui-color-system-black) 16%, var(--alpy-ui-color-system-transparent));
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-body);
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-12);
    width: min(var(--color-control-panel-width), calc(100vw - var(--alpy-ui-space-32)));
    z-index: 20;
    display: grid;
    position: absolute
}

.color-base-floating-picker {
    inset-block-start: calc(100% + var(--alpy-ui-space-8));
    inset-inline-start: var(--alpy-ui-space-0)
}

.color-floating-picker-header {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    justify-content: space-between;
    min-width: 0;
    display: flex
}

.color-floating-picker-header span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden
}

.color-floating-picker-actions {
    align-items: center;
    gap: var(--alpy-ui-space-4);
    flex: none;
    display: inline-flex
}

.color-floating-picker-close {
    --product-icon-size: var(--alpy-ui-icon-size-12)
}

.color-picker-popover {
    box-sizing: border-box;
    gap: var(--alpy-ui-space-12);
    max-width: 100%;
    display: grid
}

.color-picker-sv {
    background: linear-gradient(to top, var(--alpy-ui-color-system-black), var(--alpy-ui-color-system-transparent)), linear-gradient(to right, var(--alpy-ui-color-system-white), var(--color-picker-hue));
    border-radius: var(--alpy-ui-radius-medium);
    cursor: crosshair;
    min-height: var(--alpy-ui-size-192);
    touch-action: none;
    position: relative;
    overflow: hidden
}

.color-picker-sv:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.color-picker-sv-marker {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-system-white);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--alpy-ui-size-24);
    left: var(--color-picker-marker-x);
    outline: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-system-black);
    top: var(--color-picker-marker-y);
    width: var(--alpy-ui-size-24);
    position: absolute;
    transform: translate(-50%,-50%)
}

.color-picker-hue {
    --color-picker-hue-gradient: linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
    appearance: none;
    background: var(--alpy-ui-color-system-transparent);
    cursor: pointer;
    min-height: var(--alpy-ui-size-32);
    width: 100%
}

.color-picker-hue:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.color-picker-hue::-webkit-slider-runnable-track {
    background: var(--color-picker-hue-gradient);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--alpy-ui-size-20)
}

.color-picker-hue::-webkit-slider-thumb {
    appearance: none;
    background: var(--color-picker-hue);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-system-white);
    border-radius: var(--alpy-ui-radius-full);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-border-width-1) var(--alpy-ui-color-system-black);
    height: var(--alpy-ui-size-32);
    margin-top: calc((var(--alpy-ui-size-20) - var(--alpy-ui-size-32)) / 2);
    width: var(--alpy-ui-size-32)
}

.color-picker-hue::-moz-range-track {
    background: var(--color-picker-hue-gradient);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--alpy-ui-size-20)
}

.color-picker-hue::-moz-range-thumb {
    background: var(--color-picker-hue);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-system-white);
    border-radius: var(--alpy-ui-radius-full);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-border-width-1) var(--alpy-ui-color-system-black);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32)
}

.color-picker-tabs {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    gap: var(--alpy-ui-space-0);
    grid-template-columns: repeat(3, minmax(var(--alpy-ui-size-0), 1fr));
    padding: var(--alpy-ui-space-4);
    display: grid
}

.color-picker-tab {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-32)
}

.color-picker-tab.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-link)
}

.color-input-error {
    color: var(--alpy-ui-color-text-functional-danger);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.color-picker-contrast {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-space-0);
    padding-top: var(--alpy-ui-space-12);
    display: grid
}

.color-picker-contrast div {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    justify-content: space-between;
    display: flex
}

.color-picker-contrast dt,.color-picker-contrast dd {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.color-fine-tuning-section {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-20);
    padding-top: var(--alpy-ui-space-24)
}

.color-fine-tuning-header {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    justify-content: space-between;
    display: flex
}

.color-shade-list {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.color-shade-card {
    background: var(--library-color-shade-background);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--library-color-shade-ink);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: calc(var(--alpy-ui-size-96) + var(--alpy-ui-size-8));
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-20);
    display: grid;
    position: relative
}

.color-shade-card.is-transparent-shade {
    --library-color-shade-background: var(--alpy-ui-color-system-white);
    --library-color-shade-ink: var(--alpy-ui-color-system-black);
    background: linear-gradient(45deg, var(--alpy-ui-color-shades-neutral-subtle-one) 25%, var(--alpy-ui-color-system-transparent) 25%) 0 0 / var(--alpy-ui-size-16) var(--alpy-ui-size-16), linear-gradient(45deg, var(--alpy-ui-color-system-transparent) 75%, var(--alpy-ui-color-shades-neutral-subtle-one) 75%) 0 0 / var(--alpy-ui-size-16) var(--alpy-ui-size-16), var(--alpy-ui-color-system-white);
    color: var(--alpy-ui-color-system-black)
}

.color-shade-info {
    gap: var(--alpy-ui-space-8);
    min-width: 0;
    display: grid
}

.color-shade-info h3 {
    color: inherit;
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.color-shade-value-row {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    min-width: 0;
    display: flex
}

.color-shade-hex-value {
    color: inherit;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.color-shade-copy-control {
    align-items: center;
    gap: var(--alpy-ui-space-4);
    min-height: var(--alpy-ui-size-32);
    display: inline-flex
}

.color-shade-copy-cue {
    border: var(--alpy-ui-border-width-1) solid currentColor;
    border-radius: var(--alpy-ui-radius-full);
    color: inherit;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-2) var(--alpy-ui-space-8)
}

.color-shade-editor {
    inset-block-start: calc(var(--alpy-ui-size-64) + var(--alpy-ui-space-8));
    inset-inline-start: var(--alpy-ui-space-20)
}

.color-contrast-stack {
    gap: var(--alpy-ui-space-4);
    justify-items: end;
    display: grid
}

.color-contrast-row {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    white-space: nowrap;
    justify-content: flex-end;
    display: flex
}

.color-contrast-row.is-white {
    color: var(--alpy-ui-color-system-white)
}

.color-contrast-row.is-black {
    color: var(--alpy-ui-color-system-black)
}

.color-contrast-readout {
    color: inherit;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.color-contrast-badge {
    border: var(--alpy-ui-border-width-1) solid currentColor;
    border-radius: var(--alpy-ui-radius-full);
    color: inherit;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: var(--alpy-ui-size-48);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    justify-content: center;
    display: inline-flex
}

@media (width<=960px) {
    .color-fine-tuning-header {
        flex-direction: column;
        align-items: stretch
    }

    .color-shade-card {
        grid-template-columns: 1fr;
        align-items: stretch
    }

    .color-workspace-grid {
        grid-template-columns: 1fr
    }

    .color-control-panel {
        width: 100%
    }

    .color-preview-panel {
        border-left: var(--alpy-ui-border-width-0);
        border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        padding-left: var(--alpy-ui-space-0);
        padding-top: var(--alpy-ui-space-24)
    }

    .color-contrast-stack {
        justify-items: start
    }

    .color-contrast-row {
        justify-content: flex-start
    }

    .shell-body.is-color-route {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-rows: repeat(3,max-content);
        overflow-y: auto
    }

    .shell-body.is-color-route>.rail {
        grid-row: 1
    }

    .shell-body.is-color-route>.section-panel {
        grid-row: 2
    }

    .shell-body.is-color-route>.main-content {
        grid-row: 3
    }

    .shell-body.is-color-route>.rail {
        background: var(--alpy-ui-color-surface-canvas);
        top: var(--alpy-ui-size-0);
        z-index: 1;
        position: sticky
    }

    .shell-body.is-color-route>.main-content {
        block-size: auto;
        overflow: visible
    }

    .section-panel.is-color-panel {
        block-size: auto;
        max-height: none;
        overflow: visible
    }
}

.page-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding-bottom: var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.page-header>div:first-child {
    min-inline-size: 0
}

.page-header h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.page-header p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-4) var(--alpy-ui-space-0) var(--alpy-ui-space-0)
}

.page-header-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-shrink: 0;
    display: flex
}

.page-header-library-select,.page-header-theme-select {
    inline-size: var(--alpy-ui-size-160);
    max-inline-size: 100%
}

@media (width<=960px) {
    .page-header,.page-header-actions {
        flex-direction: column;
        align-items: stretch
    }

    .page-header-library-select,.page-header-theme-select {
        inline-size: 100%
    }
}

.section-panel.is-type-panel {
    padding: var(--alpy-ui-space-0)
}

.type-control-panel {
    gap: var(--alpy-ui-space-0);
    display: grid
}

.type-control-section {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-20);
    padding: var(--alpy-ui-space-20);
    display: grid
}

.type-control-grid {
    gap: var(--alpy-ui-space-12);
    display: grid
}

.type-control-grid-two {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.type-scale-settings-grid {
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr))
}

.type-page {
    gap: var(--alpy-ui-space-24);
    min-width: 0;
    display: grid
}

.type-scale-list {
    display: grid
}

.type-row {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-0);
    display: grid
}

.type-row-meta {
    --type-scale-row-label-font-size: var(--alpy-ui-size-12);
    --type-scale-row-label-line-height: var(--alpy-ui-size-16);
    color: var(--alpy-ui-color-text-body-subtle);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    display: flex
}

.type-row-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--type-scale-row-label-font-size);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--type-scale-row-label-line-height);
    min-width: var(--alpy-ui-size-28)
}

.type-row-divider {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-border-width-1);
    display: inline-block
}

.type-size-link,.type-binding {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-component-button-variant-link-text-default);
    cursor: pointer;
    font-family: var(--alpy-ui-component-button-size-sm-text-fontFamily);
    font-size: var(--type-scale-row-label-font-size);
    font-weight: var(--alpy-ui-component-button-size-sm-text-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-component-button-size-sm-gap);
    letter-spacing: var(--alpy-ui-component-button-size-sm-text-letterSpacing);
    line-height: var(--type-scale-row-label-line-height);
    padding: var(--alpy-ui-space-0);
    display: inline-flex
}

.type-size-editor-anchor {
    align-items: center;
    gap: var(--alpy-ui-component-button-size-sm-gap);
    display: inline-flex;
    position: relative
}

.type-size-editor-anchor:has(.type-size-popover) {
    z-index: 3
}

.type-size-popover {
    background: var(--alpy-ui-component-popover-styles-with-cta-background);
    border: var(--alpy-ui-component-popover-with-cta-border-width) solid var(--alpy-ui-component-popover-styles-with-cta-border);
    border-radius: var(--alpy-ui-component-popover-with-cta-shape-radius);
    box-sizing: border-box;
    color: var(--alpy-ui-component-popover-styles-with-cta-description);
    gap: var(--alpy-ui-component-popover-with-cta-gap-cta);
    left: var(--alpy-ui-space-0);
    max-width: calc(100vw - var(--alpy-ui-space-32));
    padding: var(--alpy-ui-component-popover-with-cta-space-padding-y) var(--alpy-ui-component-popover-with-cta-space-padding-x);
    top: calc(100% + var(--alpy-ui-space-4));
    width: min(calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-100)), calc(100vw - var(--alpy-ui-space-32)));
    z-index: 3;
    display: grid;
    position: absolute
}

.type-size-popover-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    justify-content: flex-end;
    display: flex
}

.type-size-popover-cancel,.type-size-popover-save {
    flex: none
}

.type-binding {
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: default
}

.type-metric {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--type-scale-row-label-font-size);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--type-scale-row-label-line-height)
}

.type-weight-field {
    --product-control-trigger-font-size: var(--type-scale-row-label-font-size);
    --product-control-trigger-line-height: var(--type-scale-row-label-line-height);
    width: max-content
}

.type-weight-trigger {
    border-width: var(--alpy-ui-border-width-0);
    padding: var(--alpy-ui-space-0)
}

.type-weight-trigger:hover,.type-weight-trigger:focus-visible,.type-weight-trigger[aria-expanded=true] {
    --product-control-trigger-icon-color: var(--alpy-ui-color-icon-interaction-hover);
    background: var(--alpy-ui-color-system-transparent);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.type-guidance {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    cursor: help;
    align-items: center;
    gap: var(--alpy-ui-space-4);
    margin-left: var(--alpy-ui-space-0);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--type-scale-row-label-font-size);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--type-scale-row-label-line-height);
    outline: none;
    display: inline-flex;
    position: relative
}

.type-guidance.is-success {
    color: var(--alpy-ui-color-functional-success)
}

.type-guidance.is-danger {
    color: var(--alpy-ui-color-functional-danger)
}

.type-guidance:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-4)
}

.type-guidance-label {
    white-space: nowrap
}

.type-guidance [role=tooltip] {
    min-width: 340px;
    max-width: 440px;
    right: 0;
    top: calc(100% + var(--alpy-ui-space-8));
    transform: translateY(var(--alpy-ui-space-4));
    z-index: 3
}

.type-guidance:hover [role=tooltip],.type-guidance:focus [role=tooltip],.type-guidance:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translateY(var(--alpy-ui-size-0));
    visibility: visible
}

.type-sample {
    color: var(--library-type-ink);
    font-family: var(--library-type-font-family);
    font-size: var(--library-type-font-size);
    font-weight: var(--library-type-font-weight);
    letter-spacing: var(--library-type-letter-spacing);
    line-height: var(--library-type-line-height);
    max-width: var(--shell-content-width);
    margin: 0
}

.type-sample[data-library-preview-state=unresolved] {
    color: canvastext;
    outline-offset: 4px;
    outline: 1px dashed
}

@media (width<=960px) {
    .type-control-grid-two {
        grid-template-columns: 1fr
    }

    .type-guidance {
        margin-left: var(--alpy-ui-space-0)
    }

    .shell-body.is-type-route {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-rows: repeat(3,max-content);
        overflow-y: auto
    }

    .shell-body.is-type-route>.rail {
        grid-row: 1
    }

    .shell-body.is-type-route>.section-panel {
        grid-row: 2
    }

    .shell-body.is-type-route>.main-content {
        grid-row: 3
    }

    .shell-body.is-type-route>.rail {
        background: var(--alpy-ui-color-surface-canvas);
        top: var(--alpy-ui-size-0);
        z-index: 1;
        position: sticky
    }

    .shell-body.is-type-route>.main-content {
        block-size: auto;
        padding: var(--alpy-ui-space-16);
        overflow: visible
    }

    .section-panel.is-type-panel {
        block-size: auto;
        max-height: none;
        overflow: visible
    }

    .type-scale-list .type-row:last-child {
        border-bottom: var(--alpy-ui-border-width-0)
    }
}

.section-panel.is-components-panel {
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-8)
}

.components-panel {
    gap: var(--alpy-ui-space-0);
    min-width: 0;
    display: grid
}

.components-check {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    background: var(--alpy-ui-color-functional-success);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-onColor);
    height: var(--alpy-ui-size-16);
    right: var(--components-check-right,calc(var(--alpy-ui-space-4) * -1));
    top: var(--components-check-top,calc(var(--alpy-ui-space-4) * -1));
    width: var(--alpy-ui-size-16);
    z-index: 1;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute
}

.components-panel-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-height: var(--alpy-ui-size-64);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.components-panel-header h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-panel-library {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-8);
    display: grid
}

.components-panel-library-list {
    gap: var(--alpy-ui-space-4);
    display: grid
}

.components-panel-library-row {
    border-radius: var(--alpy-ui-radius-small);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    display: grid
}

.components-panel-library-row.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one)
}

.components-panel-library-row.is-active .components-panel-item.is-library-item {
    background: var(--alpy-ui-color-system-transparent)
}

.components-panel-library-actions {
    gap: var(--alpy-ui-space-2);
    display: inline-flex
}

.components-panel-library-form {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-panel-library-form p,.components-panel-library-notice {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-panel-library-notice {
    color: var(--alpy-ui-color-functional-warning)
}

.components-panel-list {
    gap: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-8);
    display: grid
}

.components-panel-group {
    gap: var(--alpy-ui-space-4);
    display: grid
}

.components-panel-group+.components-panel-group {
    padding-top: var(--alpy-ui-space-12)
}

.components-panel-group+.components-panel-group:before {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    content: "";
    margin-bottom: var(--alpy-ui-space-12);
    display: block
}

.components-panel-group-heading {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-8);
    width: 100%;
    display: inline-flex
}

.components-panel-group-label {
    min-width: var(--alpy-ui-size-0)
}

.components-panel-group-disclosure {
    --product-icon-size: var(--alpy-ui-component-accordion-basic-size-icon-size);
    width: var(--alpy-ui-size-16);
    justify-content: center;
    transition: transform .12s;
    display: inline-flex
}

.components-panel-group-heading[data-expanded=false] .components-panel-group-disclosure {
    transform: rotate(-90deg)
}

.components-panel-items,.components-panel-item-tree,.components-panel-children {
    gap: var(--alpy-ui-space-0);
    display: grid
}

.components-panel-item {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-8);
    text-align: left;
    width: 100%;
    display: inline-flex
}

.components-panel-disclosure-button,.components-panel-disclosure-spacer,.components-panel-label-button {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: var(--alpy-ui-space-0);
    min-height: inherit;
    padding: var(--alpy-ui-space-0);
    align-items: center;
    display: inline-flex
}

.components-panel-disclosure-button,.components-panel-disclosure-spacer {
    width: var(--alpy-ui-size-16);
    justify-content: center
}

.components-panel-disclosure-spacer {
    cursor: default;
    flex: 0 0 var(--alpy-ui-size-16)
}

.components-panel-label-button {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    text-align: left;
    flex: 1
}

.components-panel-component-icon {
    flex: 0 0 var(--alpy-ui-size-16);
    height: var(--alpy-ui-size-16);
    -webkit-mask: var(--components-panel-component-icon-url) center / contain no-repeat;
    -webkit-mask: var(--components-panel-component-icon-url) center / contain no-repeat;
    mask: var(--components-panel-component-icon-url) center / contain no-repeat;
    opacity: .82;
    width: var(--alpy-ui-size-16);
    background: currentColor;
    display: inline-flex
}

.components-panel-label-text {
    min-width: var(--alpy-ui-size-0)
}

.components-panel-item[data-level]:not([data-level="0"]) {
    color: var(--alpy-ui-color-text-body-subtle)
}

.components-panel-item[data-level="1"] {
    padding-left: var(--alpy-ui-space-20)
}

.components-panel-item[data-level="2"] {
    padding-left: var(--alpy-ui-space-32)
}

.components-panel-item[data-level="3"] {
    padding-left: var(--alpy-ui-space-40)
}

.components-panel-disclosure {
    --product-icon-size: var(--alpy-ui-component-accordion-basic-size-icon-size);
    transition: transform .12s;
    display: inline-flex
}

.components-panel-item[data-expanded=false] .components-panel-disclosure {
    transform: rotate(-90deg)
}

.components-panel-item:hover,.components-panel-item.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one)
}

.components-panel-item.is-library-item {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-medium)
}

.components-page {
    gap: var(--alpy-ui-space-0);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
    height: 100%;
    margin: var(--alpy-ui-space-0);
    max-width: none;
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    width: 100%;
    display: grid
}

.components-content {
    margin: var(--alpy-ui-space-0);
    max-width: var(--shell-content-width);
    width: 100%;
    min-width: 0;
    display: grid
}

.components-content.is-component-workspace-content {
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    margin-inline:auto}

@media (width>=1681px) {
    .components-content.is-component-workspace-content {
        max-width: none
    }
}

.components-tabs {
    border-left: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-right: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-4);
    min-height: 56px;
    display: flex;
    overflow-x: auto
}

.components-tab {
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-weight: 500;
    line-height: var(--alpy-ui-font-body-lineHeight);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    background: 0 0;
    border-bottom: 2px solid #0000;
    justify-content: center;
    margin-bottom: -1px;
    transition: color .12s ease-out,border-color .12s ease-out;
    display: inline-flex
}

.components-tab:hover {
    color: var(--alpy-ui-color-text-heading)
}

.components-tab.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-bottom-color: var(--alpy-ui-color-text-brand-color-one-accent);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: 600
}

.components-tab:focus-visible {
    border-radius: var(--alpy-ui-radius-small);
    outline: 2px solid var(--alpy-ui-color-text-link,var(--alpy-ui-color-shades-brand-color-one-strong-one));
    outline-offset: 2px
}

.components-workspace {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: 0 0 var(--alpy-ui-radius-medium) var(--alpy-ui-radius-medium);
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    overflow: hidden
}

.components-workspace[data-active-tab=documentation],.components-workspace[data-active-tab=accessibility] {
    height: auto;
    overflow: visible
}

:is(.components-content.is-component-workspace-content:has(>.components-workspace[data-active-tab=documentation]),.components-content.is-component-workspace-content:has(>.components-workspace[data-active-tab=accessibility])),:is(.components-page:has(.components-workspace[data-active-tab=documentation]),.components-page:has(.components-workspace[data-active-tab=accessibility])) {
    grid-template-rows: auto auto;
    height: auto
}

.components-demo {
    --components-preview-panel-width: 400px;
    --components-token-panel-width: var(--components-preview-panel-width);
    grid-template-rows: minmax(var(--alpy-ui-size-0), 1fr);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    display: grid
}

.components-demo[data-preview-panel=open] {
    grid-template-columns: minmax(calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-32)), var(--components-preview-panel-width)) minmax(var(--alpy-ui-size-0), 1fr)
}

.components-demo[data-preview-panel=open][data-preview-panel-kind=tokens] {
    grid-template-columns: minmax(calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128)), var(--components-token-panel-width)) minmax(var(--alpy-ui-size-0), 1fr)
}

@media (width<=1680px) {
    .components-demo[data-component-layout=wide][data-preview-panel=open][data-preview-panel-kind] {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-rows: minmax(var(--alpy-ui-size-192), max-content) minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-areas: "canvas""panel"
    }

    .components-demo[data-component-layout=wide][data-preview-panel=open][data-preview-panel-kind] .components-preview-panel {
        border-block-start:var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);inline-size: auto;
        max-inline-size: none;
        border-inline-end:none;grid-area: panel;
        width: auto
    }

    .components-demo[data-component-layout=wide][data-preview-panel=open][data-preview-panel-kind] .components-demo-canvas {
        grid-area: canvas
    }
}

.components-demo .components-demo-canvas .components-canonical-table {
    width: auto;
    max-width: 100%
}

.components-preview-controls {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-20);
    display: flex;
    overflow-x: auto
}

.components-preview-control {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-0);
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    position: relative
}

.components-preview-control-label {
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-preview-control.is-active,.components-preview-control:hover {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-preview-control.is-active .components-preview-control-label:after {
    bottom: var(--alpy-ui-space-0);
    content: "";
    height: var(--alpy-ui-border-width-2);
    left: var(--alpy-ui-space-0);
    right: var(--alpy-ui-space-0);
    background: currentColor;
    position: absolute
}

.components-preview-panel {
    border-right: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--alpy-ui-size-0);
    min-width: 0;
    width: var(--components-preview-panel-width);
    display: grid;
    overflow: hidden
}

.components-preview-panel.is-token-panel {
    max-width: 100%;
    height: 100%
}

.components-preview-panel-body {
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-16);
    overflow: auto
}

.components-preview-panel.is-token-panel .components-preview-panel-body {
    padding: var(--alpy-ui-space-0);
    scrollbar-gutter: stable
}

.components-icon-grid {
    gap: var(--alpy-ui-space-12);
    grid-template-columns: repeat(6, minmax(var(--alpy-ui-size-0), 1fr));
    display: grid
}

.components-icon-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-icon-default);
    cursor: pointer;
    height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-icon-option:hover {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-button-icon-gallery .components-icon-option:hover {
    color: var(--alpy-ui-color-icon-default)
}

.components-icon-control-list {
    align-items: flex-start;
    gap: var(--alpy-ui-space-32);
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex
}

.components-icon-control-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-icon-default);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    display: inline-flex;
    position: relative
}

.components-icon-control-option:hover,.components-icon-control-option.is-selected {
    background: var(--alpy-ui-color-system-transparent)
}

.components-icon-control-option.is-selected {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-icon-control-artwork {
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-icon-control-artwork-content,.components-icon-control-artwork-content svg {
    height: var(--alpy-ui-size-64);
    width: var(--alpy-ui-size-64);
    display: block
}

.components-icon-control-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-alert-variant-list {
    gap: var(--alpy-ui-space-4);
    padding-top: var(--alpy-ui-space-8);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
}

.components-alert-variant-list::-webkit-scrollbar {
    display: none
}

.components-alert-variant-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    flex: 0 0 var(--alpy-ui-size-72);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0);
    justify-items: center;
    display: grid;
    position: relative
}

.components-alert-variant-glyph {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    border: var(--alpy-ui-border-width-1) solid currentColor;
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-system-black);
    height: var(--alpy-ui-size-48);
    width: var(--alpy-ui-size-48);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-alert-variant-option[data-alert-variant-option=info] .components-alert-variant-glyph {
    color: var(--alpy-ui-color-functional-info)
}

.components-alert-variant-option[data-alert-variant-option=success] .components-alert-variant-glyph {
    color: var(--alpy-ui-color-functional-success)
}

.components-alert-variant-option[data-alert-variant-option=warning] .components-alert-variant-glyph {
    color: var(--alpy-ui-color-functional-warning)
}

.components-alert-variant-option[data-alert-variant-option=danger] .components-alert-variant-glyph {
    color: var(--alpy-ui-color-functional-danger)
}

.components-alert-variant-option[data-alert-variant-option=basic] .components-alert-variant-glyph {
    color: var(--alpy-ui-color-system-black)
}

.components-alert-variant-label {
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 500;
    line-height: var(--alpy-ui-font-body-lineHeight);
    text-align: center
}

.components-alert-variant-option .components-check {
    --components-check-right: var(--alpy-ui-space-0);
    --components-check-top: calc(var(--alpy-ui-space-8) * -1)
}

.components-badge-variant-list {
    align-items: center;
    column-gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(4, minmax(var(--alpy-ui-size-0), 1fr));
    padding-top: var(--alpy-ui-space-16);
    row-gap: var(--alpy-ui-space-32);
    display: grid
}

.components-badge-variant-option {
    cursor: pointer;
    justify-self: center;
    width: max-content;
    max-width: none;
    position: relative
}

.components-badge-variant-option .components-check {
    --components-check-right: calc(var(--alpy-ui-space-8) * -1);
    --components-check-top: calc(var(--alpy-ui-space-12) * -1)
}

.components-button-control-panel {
    gap: var(--alpy-ui-space-20);
    display: grid
}

.components-button-control-section {
    gap: var(--alpy-ui-space-12);
    display: grid
}

.components-button-control-list {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    flex-wrap: nowrap;
    display: flex
}

.components-button-control-button {
    flex: 1 1 var(--alpy-ui-size-72);
    min-width: var(--alpy-ui-size-0);
    width: auto;
    position: relative
}

.components-button-control-button>span {
    min-width: var(--alpy-ui-size-0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.components-button-control-list .components-button-control-button.is-icon-only,.components-button-control-button[data-button-variant=link] {
    flex: none
}

.components-button-control-button:focus-visible {
    outline-style: solid;
    outline-width: var(--alpy-ui-border-width-2);
    outline-offset: var(--alpy-ui-space-2)
}

.components-button-control-panel h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-checkbox-control-panel {
    gap: var(--alpy-ui-space-16);
    flex-direction: column;
    display: flex
}

.components-checkbox-control-list {
    align-items: flex-start;
    gap: var(--alpy-ui-space-32);
    flex-wrap: nowrap;
    justify-content: flex-start;
    display: flex
}

.components-checkbox-control-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    display: inline-flex;
    position: relative
}

.components-checkbox-control-option:hover {
    background: var(--alpy-ui-color-system-transparent)
}

.components-checkbox-control-option.is-selected {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    box-shadow: none;
    padding: var(--alpy-ui-space-0)
}

.components-checkbox-control-artwork {
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-checkbox-control-artwork-content {
    transform-origin: 50%;
    display: inline-flex;
    transform: scale(.84)
}

.components-checkbox-variant-artwork,.components-checkbox-variant-artwork svg {
    height: var(--alpy-ui-size-64);
    width: var(--alpy-ui-size-64);
    display: block
}

.components-checkbox-control-artwork .components-canonical-checkbox-group-heading,.components-checkbox-control-artwork .components-canonical-checkbox-copy {
    display: none
}

.components-checkbox-control-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-radio-control-panel {
    gap: var(--alpy-ui-space-16);
    flex-direction: column;
    display: flex
}

.components-radio-control-list {
    align-items: flex-start;
    gap: var(--alpy-ui-space-32);
    flex-wrap: nowrap;
    justify-content: flex-start;
    display: flex
}

.components-radio-control-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    display: inline-flex;
    position: relative
}

.components-radio-control-option:hover {
    background: var(--alpy-ui-color-system-transparent)
}

.components-radio-control-option.is-selected {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    box-shadow: none;
    padding: var(--alpy-ui-space-0)
}

.components-radio-control-artwork {
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-radio-control-artwork-content {
    transform-origin: 50%;
    display: inline-flex;
    transform: scale(.84)
}

.components-radio-control-panel.is-state-menu .components-radio-control-artwork-content {
    transform: scale(1)
}

.components-radio-variant-artwork,.components-radio-variant-artwork svg {
    height: var(--alpy-ui-size-64);
    width: var(--alpy-ui-size-64);
    display: block
}

.components-radio-control-artwork .components-canonical-radio-group-heading,.components-radio-control-artwork .components-canonical-radio-copy {
    display: none
}

.components-radio-control-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-toggle-control-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-toggle-control-list {
    gap: var(--alpy-ui-space-20);
    flex-wrap: wrap;
    display: flex
}

.components-toggle-control-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    display: inline-flex;
    position: relative
}

.components-toggle-control-option:hover,.components-toggle-control-option.is-selected {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    box-shadow: none
}

.components-toggle-control-artwork {
    height: var(--alpy-ui-size-64);
    width: var(--alpy-ui-size-64);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-toggle-control-artwork-content {
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-toggle-control-artwork .components-canonical-toggle-label {
    display: none
}

.components-toggle-control-label,.components-toggle-label-copy {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-toggle-label-panel {
    gap: var(--alpy-ui-space-24);
    justify-items: start;
    display: grid
}

.components-toggle-label-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    display: inline-flex
}

.components-date-picker-controller-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-date-picker-icon-tabs {
    width: 100%
}

.components-date-picker-toggle-row {
    justify-content: flex-start;
    align-items: center;
    display: flex
}

.components-accordion-variant-panel {
    gap: var(--alpy-ui-space-16);
    flex-direction: column;
    display: flex
}

.components-accordion-icon-panel {
    gap: var(--alpy-ui-space-32);
    display: grid
}

.components-accordion-icon-toggle-row {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    color: var(--alpy-ui-component-toggle-styles-default-label);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-56);
    padding-bottom: var(--alpy-ui-space-16);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-accordion-icon-gallery-stack,.components-accordion-icon-gallery-section {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-accordion-icon-gallery-section {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    padding-bottom: var(--alpy-ui-space-16)
}

.components-accordion-icon-gallery-section h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-alert-controller-panel {
    gap: var(--alpy-ui-space-24);
    display: grid
}

.components-alert-controller-panel h3,.components-alert-toggle-row>span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-badge-controller-panel {
    gap: var(--alpy-ui-space-24);
    display: grid
}

.components-badge-icon-toggle-label {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-badge-icon-header {
    align-items: start;
    gap: var(--alpy-ui-space-12);
    grid-template-columns: 1fr auto;
    display: grid
}

.components-badge-icon-toggle-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-height: var(--alpy-ui-size-32);
    display: flex
}

.components-badge-icon-position {
    align-self: start;
    gap: var(--alpy-ui-space-8);
    justify-items: end;
    display: grid
}

.components-badge-icon-position-buttons {
    gap: var(--alpy-ui-space-8);
    display: flex
}

.components-badge-icon-position-button {
    --product-icon-size: var(--alpy-ui-icon-size-32);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-icon-default);
    cursor: pointer;
    height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-badge-icon-position-button [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    transform: translate(-50%, var(--alpy-ui-space-4));
    z-index: 2;
    left: 50%
}

.components-badge-icon-position-button:hover [role=tooltip],.components-badge-icon-position-button:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.components-badge-icon-position-button:hover {
    color: var(--alpy-ui-color-text-heading)
}

.components-dropdown-controller-panel,.components-pagination-controller-panel,.components-progress-bar-panel,.components-progress-indicator-panel {
    gap: var(--alpy-ui-space-24);
    display: grid
}

.components-progress-indicator-panel.is-steps {
    gap: var(--alpy-ui-space-40)
}

.components-progress-indicator-panel.is-steps .product-field {
    gap: var(--alpy-ui-space-16)
}

.components-progress-indicator-panel.is-steps .product-field-label,.components-progress-indicator-panel.is-steps .components-control-helper {
    color: var(--alpy-ui-color-text-heading);
    font-size: var(--alpy-ui-font-size-16);
    font-weight: 500;
    line-height: var(--alpy-ui-line-height-24)
}

.components-progress-bar-toggle-row {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-control-helper {
    color: var(--alpy-ui-color-text-muted);
    font-size: var(--alpy-ui-font-size-12);
    line-height: var(--alpy-ui-line-height-16)
}

.components-progress-indicator-control-group {
    gap: var(--alpy-ui-space-12);
    display: grid
}

.components-progress-indicator-step-picker {
    gap: var(--alpy-ui-space-12);
    flex-wrap: wrap;
    display: flex
}

.components-progress-indicator-step-dot {
    background: var(--alpy-ui-color-system-white);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body);
    font: inherit;
    font-size: var(--alpy-ui-font-size-16);
    height: var(--alpy-ui-size-32);
    font-weight: 500;
    line-height: var(--alpy-ui-line-height-16);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: relative
}

.components-progress-indicator-step-dot.is-selected {
    background: var(--alpy-ui-color-system-white);
    border-color: var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-heading)
}

.components-progress-indicator-step-dot .components-check {
    --components-check-right: calc(var(--alpy-ui-space-4) * -1);
    --components-check-top: calc(var(--alpy-ui-space-8) * -1)
}

.components-progress-indicator-state-list {
    grid-template-columns: minmax(var(--alpy-ui-size-40), max-content) minmax(var(--alpy-ui-size-48), 1fr) minmax(var(--alpy-ui-size-40), max-content) minmax(var(--alpy-ui-size-48), 1fr) minmax(var(--alpy-ui-size-40), max-content);
    align-items: start;
    display: grid
}

.components-progress-indicator-state-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-0);
    justify-items: center;
    display: grid
}

.components-progress-indicator-state-option:hover .components-progress-indicator-state-label,.components-progress-indicator-state-option.is-selected .components-progress-indicator-state-label {
    color: var(--alpy-ui-color-text-heading)
}

.components-progress-indicator-state-glyph {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    background: var(--alpy-ui-color-shades-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-heading);
    font-size: var(--alpy-ui-font-size-16);
    height: var(--alpy-ui-size-40);
    font-weight: 600;
    line-height: var(--alpy-ui-line-height-20);
    width: var(--alpy-ui-size-40);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-progress-indicator-state-option.is-active .components-progress-indicator-state-glyph {
    background: var(--alpy-ui-color-shades-brand-color-one-strong-one);
    color: var(--alpy-ui-color-text-onColor)
}

.components-progress-indicator-state-option.is-completed .components-progress-indicator-state-glyph {
    background: var(--alpy-ui-color-functional-success);
    color: var(--alpy-ui-color-text-onColor)
}

.components-progress-indicator-state-glyph .components-check {
    --components-check-right: calc(var(--alpy-ui-space-4) * -1);
    --components-check-top: calc(var(--alpy-ui-space-4) * -1)
}

.components-progress-indicator-state-label {
    color: var(--alpy-ui-color-text-muted);
    font-size: var(--alpy-ui-font-size-14);
    font-weight: 400;
    line-height: var(--alpy-ui-line-height-20);
    text-align: center
}

.components-progress-indicator-state-connector {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--alpy-ui-size-4);
    margin: calc((var(--alpy-ui-size-40) - var(--alpy-ui-size-4)) / 2) var(--alpy-ui-space-16) var(--alpy-ui-space-0);
    align-self: start;
    display: block
}

.components-progress-indicator-icon-gallery {
    column-gap: var(--alpy-ui-space-24);
    row-gap: var(--alpy-ui-space-20)
}

.components-progress-indicator-icon-gallery .components-icon-option {
    color: var(--alpy-ui-color-system-black);
    height: var(--alpy-ui-size-40);
    width: var(--alpy-ui-size-40)
}

.components-progress-indicator-icon-gallery .components-check {
    --components-check-right: calc(var(--alpy-ui-space-4) * -1);
    --components-check-top: calc(var(--alpy-ui-space-4) * -1)
}

.components-pagination-icon-control-list {
    column-gap: var(--alpy-ui-space-32)
}

.components-popover-controller-panel.is-rotation .components-icon-control-list,.components-tooltip-controller-panel.is-rotation .components-icon-control-list {
    column-gap: var(--alpy-ui-space-8);
    flex-wrap: nowrap
}

.components-popover-controller-panel.is-rotation .components-icon-control-option,.components-tooltip-controller-panel.is-rotation .components-icon-control-option {
    flex: 0 0 calc(var(--alpy-ui-size-64) + var(--alpy-ui-space-16))
}

.components-breadcrumb-controller-panel {
    gap: var(--alpy-ui-space-16);
    flex-direction: column;
    display: flex
}

.components-dropdown-toggle-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-height: var(--alpy-ui-size-40);
    justify-content: space-between;
    display: flex
}

.components-dropdown-toggle-row>span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-dropdown-icon-tabs {
    max-width: 100%
}

.components-alert-cta-header {
    justify-content: space-between;
    align-items: start;
    display: flex
}

.components-alert-toggle-row,.components-alert-cta-toggle {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    display: flex
}

.components-alert-cta-mode,.components-alert-cta-button-variants {
    gap: var(--alpy-ui-space-12);
    display: grid
}

.components-alert-cta-mode {
    justify-items: end
}

.components-alert-cta-mode-buttons {
    gap: var(--alpy-ui-space-8);
    display: flex
}

.components-alert-cta-mode-button {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-system-transparent);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-subtle);
    cursor: pointer;
    height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-alert-cta-mode-button:hover {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-alert-cta-mode-button:disabled {
    cursor: default;
    opacity: .48
}

.components-token-table,.components-audit-list,.components-documentation {
    gap: var(--alpy-ui-space-12);
    display: grid
}

.components-demo-canvas {
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-64) var(--alpy-ui-space-40) var(--alpy-ui-space-40);
    align-content: start;
    justify-items: center;
    display: grid;
    overflow: auto
}

.components-workspace-detail {
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-16);
    align-content: start;
    display: grid;
    overflow: auto
}

.components-demo-canvas[data-library-preview-state=unresolved] {
    opacity: .72
}

.components-canonical-icon {
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-icon-glyph {
    color: var(--library-component-icon-color,var(--alpy-ui-color-icon-default));
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-icon-svg {
    display: block
}

.components-canonical-icon .components-canonical-icon-svg {
    height: var(--alpy-ui-size-56);
    width: var(--alpy-ui-size-56)
}

.components-canonical-button {
    box-sizing: border-box;
    cursor: pointer;
    border-style: solid;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-button:focus-visible {
    outline-style: solid;
    outline-width: var(--alpy-ui-border-width-2);
    outline-offset: var(--alpy-ui-space-2)
}

.components-canonical-button.is-icon-only {
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0)
}

.components-canonical-button-icon {
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-text-input {
    gap: var(--library-component-text-input-stack-gap);
    width: min(360px,100%);
    display: grid
}

.components-canonical-text-input-label {
    color: var(--library-component-text-input-label);
    font-family: var(--library-component-text-input-label-font-family);
    font-size: var(--library-component-text-input-label-font-size);
    font-weight: var(--library-component-text-input-label-font-weight);
    letter-spacing: var(--library-component-text-input-label-letter-spacing);
    line-height: var(--library-component-text-input-label-line-height)
}

.components-canonical-text-input-row {
    align-items: stretch;
    gap: var(--library-component-text-input-compound-gap);
    width: 100%;
    display: flex
}

.components-canonical-text-input-field {
    background: var(--library-component-text-input-background);
    border: var(--library-component-text-input-border-width) solid var(--library-component-text-input-border);
    border-radius: var(--library-component-text-input-radius);
    box-sizing: border-box;
    color: var(--library-component-text-input-text);
    align-items: center;
    gap: var(--library-component-text-input-field-gap);
    height: var(--library-component-text-input-field-height);
    padding: var(--library-component-text-input-padding-y) var(--library-component-text-input-padding-x);
    flex: auto;
    display: flex
}

.components-canonical-text-input-field-input {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--library-component-text-input-text);
    font-family: var(--library-component-text-input-field-font-family);
    font-size: var(--library-component-text-input-field-font-size);
    font-weight: var(--library-component-text-input-field-font-weight);
    letter-spacing: var(--library-component-text-input-field-letter-spacing);
    line-height: var(--library-component-text-input-field-line-height);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    outline: none;
    flex: auto
}

.components-canonical-text-input-field-input:disabled {
    cursor: default
}

.components-canonical-text-input-icon {
    color: var(--library-component-text-input-icon);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-text-input-icon .components-canonical-icon-svg {
    height: var(--library-component-text-input-icon-size);
    width: var(--library-component-text-input-icon-size)
}

.components-canonical-text-input-description {
    color: var(--library-component-text-input-description);
    font-family: var(--library-component-text-input-description-font-family);
    font-size: var(--library-component-text-input-description-font-size);
    font-weight: var(--library-component-text-input-description-font-weight);
    letter-spacing: var(--library-component-text-input-description-letter-spacing);
    line-height: var(--library-component-text-input-description-line-height)
}

.components-canonical-text-input-action {
    flex: none
}

.components-text-input-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-text-input-panel.is-state .components-icon-control-list {
    flex-wrap: nowrap
}

.components-text-input-toggle-row {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-canonical-textarea {
    gap: var(--library-component-textarea-stack-gap);
    width: min(420px,100%);
    display: grid
}

.components-canonical-textarea-label {
    color: var(--library-component-textarea-label);
    font-family: var(--library-component-textarea-label-font-family);
    font-size: var(--library-component-textarea-label-font-size);
    font-weight: var(--library-component-textarea-label-font-weight);
    letter-spacing: var(--library-component-textarea-label-letter-spacing);
    line-height: var(--library-component-textarea-label-line-height)
}

.components-canonical-textarea-field {
    background: var(--library-component-textarea-background);
    border: var(--library-component-textarea-border-width) solid var(--library-component-textarea-border);
    border-radius: var(--library-component-textarea-radius);
    box-sizing: border-box;
    min-height: var(--library-component-textarea-field-height);
    padding: var(--library-component-textarea-padding-y) var(--library-component-textarea-padding-x);
    display: block;
    position: relative;
    overflow: hidden
}

.components-canonical-textarea-input {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    box-sizing: border-box;
    color: var(--library-component-textarea-text);
    font-family: var(--library-component-textarea-field-font-family);
    font-size: var(--library-component-textarea-field-font-size);
    font-weight: var(--library-component-textarea-field-font-weight);
    height: 100%;
    letter-spacing: var(--library-component-textarea-field-letter-spacing);
    line-height: var(--library-component-textarea-field-line-height);
    min-height: max(var(--alpy-ui-size-0), calc(var(--library-component-textarea-field-height) - var(--library-component-textarea-padding-y) - var(--library-component-textarea-padding-y)));
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    resize: none;
    outline: none;
    width: 100%;
    display: block;
    overflow: hidden
}

.components-canonical-textarea-input:disabled {
    cursor: default
}

.components-canonical-textarea-resize-handle {
    bottom: var(--alpy-ui-space-2);
    cursor: nwse-resize;
    height: var(--alpy-ui-space-20);
    right: var(--alpy-ui-space-2);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    width: var(--alpy-ui-space-20);
    display: block;
    position: absolute
}

.components-canonical-textarea-resize-handle[data-textarea-resize-direction=vertical] .components-canonical-textarea-resize-line:first-child {
    bottom: calc(var(--alpy-ui-space-4) + var(--alpy-ui-space-1));
    right: var(--alpy-ui-space-1);
    width: calc(var(--library-component-textarea-resize-line-width) * .58)
}

.components-canonical-textarea-resize-handle[data-textarea-resize-direction=vertical] .components-canonical-textarea-resize-line:last-child {
    bottom: var(--alpy-ui-space-8);
    right: var(--alpy-ui-space-2);
    width: var(--library-component-textarea-resize-line-width)
}

.components-canonical-textarea[data-textarea-state=disabled] .components-canonical-textarea-resize-handle {
    cursor: default
}

.components-canonical-textarea-resize-line {
    background: var(--library-component-textarea-resize);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--library-component-textarea-resize-line-height);
    transform: rotate(var(--library-component-textarea-resize-rotation));
    transform-origin: 100%;
    display: block;
    position: absolute
}

.components-canonical-textarea-description {
    color: var(--library-component-textarea-description);
    font-family: var(--library-component-textarea-description-font-family);
    font-size: var(--library-component-textarea-description-font-size);
    font-weight: var(--library-component-textarea-description-font-weight);
    letter-spacing: var(--library-component-textarea-description-letter-spacing);
    line-height: var(--library-component-textarea-description-line-height)
}

.components-textarea-control-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-textarea-toggle-row {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-canonical-checkbox,.components-canonical-checkbox-items {
    display: grid
}

.components-canonical-checkbox-item {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    cursor: pointer;
    padding: var(--alpy-ui-space-0);
    text-align: left;
    align-items: start;
    display: inline-flex
}

.components-canonical-checkbox-item[data-disabled=true] {
    cursor: default
}

.components-canonical-checkbox-item[data-description=false] {
    align-items: center
}

.components-canonical-checkbox-control {
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-canonical-checkbox-focus-ring {
    box-sizing: border-box;
    border-style: solid;
    position: absolute
}

.components-canonical-checkbox-box {
    box-sizing: border-box;
    border-style: solid;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-checkbox-copy {
    display: grid
}

.components-canonical-checkbox-group-heading {
    margin: var(--alpy-ui-space-0)
}

.components-canonical-radio {
    gap: var(--library-component-radio-group-header-to-items-gap);
    display: grid
}

.components-canonical-radio-items {
    gap: var(--library-component-radio-group-item-to-item-gap);
    display: grid
}

.components-canonical-radio-item {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--library-component-radio-label);
    cursor: pointer;
    align-items: start;
    gap: var(--library-component-radio-control-to-text-gap);
    padding: var(--alpy-ui-space-0);
    text-align: left;
    display: inline-flex
}

.components-canonical-radio-item[data-disabled=true] {
    cursor: default
}

.components-canonical-radio-item[data-description=false] {
    align-items: center
}

.components-canonical-radio-control {
    flex: 0 0 var(--library-component-radio-control-size);
    height: var(--library-component-radio-control-size);
    width: var(--library-component-radio-control-size);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-canonical-radio-hit-area-carrier {
    height: var(--library-component-radio-hit-area);
    pointer-events: none;
    visibility: hidden;
    width: var(--library-component-radio-hit-area);
    position: absolute
}

.components-canonical-radio-focus-ring {
    border: var(--library-component-radio-focus-ring-width) solid var(--library-component-radio-focus-ring);
    border-radius: var(--library-component-radio-radius);
    box-sizing: border-box;
    height: var(--library-component-radio-focus-ring-size);
    width: var(--library-component-radio-focus-ring-size);
    position: absolute
}

.components-canonical-radio-button {
    background: var(--library-component-radio-control-background);
    border: var(--library-component-radio-control-border-width) solid var(--library-component-radio-control-border);
    border-radius: var(--library-component-radio-radius);
    box-sizing: border-box;
    height: var(--library-component-radio-button-size);
    width: var(--library-component-radio-button-size);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-radio-dot {
    background: var(--library-component-radio-dot);
    border-radius: var(--library-component-radio-radius);
    height: var(--library-component-radio-dot-size);
    width: var(--library-component-radio-dot-size);
    display: block
}

.components-canonical-radio-copy {
    gap: var(--library-component-radio-label-to-description-gap);
    display: grid
}

.components-canonical-radio-label,.components-canonical-radio-group-heading {
    color: var(--library-component-radio-label);
    font-family: var(--library-component-radio-label-font-family);
    font-size: var(--library-component-radio-label-font-size);
    font-weight: var(--library-component-radio-label-font-weight);
    letter-spacing: var(--library-component-radio-label-letter-spacing);
    line-height: var(--library-component-radio-label-line-height)
}

.components-canonical-radio-description {
    color: var(--library-component-radio-description);
    font-family: var(--library-component-radio-description-font-family);
    font-size: var(--library-component-radio-description-font-size);
    font-weight: var(--library-component-radio-description-font-weight);
    letter-spacing: var(--library-component-radio-description-letter-spacing);
    line-height: var(--library-component-radio-description-line-height)
}

.components-canonical-radio-group-heading {
    font-family: var(--library-component-radio-group-heading-font-family);
    font-size: var(--library-component-radio-group-heading-font-size);
    font-weight: var(--library-component-radio-group-heading-font-weight);
    letter-spacing: var(--library-component-radio-group-heading-letter-spacing);
    line-height: var(--library-component-radio-group-heading-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-toggle {
    align-items: var(--library-component-toggle-root-align);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--library-component-toggle-label);
    cursor: pointer;
    flex-direction: var(--library-component-toggle-root-direction);
    gap: var(--library-component-toggle-gap);
    padding: var(--alpy-ui-space-0);
    display: inline-flex
}

.components-canonical-toggle:disabled,.components-canonical-toggle[data-toggle-state=disabled] {
    cursor: default
}

.components-canonical-toggle-track {
    align-items: var(--library-component-toggle-track-align);
    background: var(--library-component-toggle-track-bg);
    border: var(--library-component-toggle-border-width) solid var(--library-component-toggle-track-border);
    border-radius: var(--library-component-toggle-radius);
    box-sizing: border-box;
    flex-direction: var(--library-component-toggle-track-direction);
    height: var(--library-component-toggle-track-height);
    justify-content: var(--library-component-toggle-track-justify);
    width: var(--library-component-toggle-track-width);
    display: inline-flex
}

.components-canonical-toggle-thumb-slot {
    align-items: var(--library-component-toggle-thumb-slot-align);
    flex-direction: var(--library-component-toggle-thumb-slot-direction);
    height: var(--library-component-toggle-track-height);
    justify-content: var(--library-component-toggle-thumb-slot-justify);
    width: var(--library-component-toggle-track-height);
    display: inline-flex
}

.components-canonical-toggle-thumb {
    background: var(--library-component-toggle-thumb-bg);
    border-radius: var(--library-component-toggle-radius);
    height: var(--library-component-toggle-thumb-size);
    width: var(--library-component-toggle-thumb-size);
    display: block
}

.components-canonical-toggle-label {
    color: var(--library-component-toggle-label);
    font-family: var(--library-component-toggle-label-font-family);
    font-size: var(--library-component-toggle-label-font-size);
    font-weight: var(--library-component-toggle-label-font-weight);
    letter-spacing: var(--library-component-toggle-label-letter-spacing);
    line-height: var(--library-component-toggle-label-line-height)
}

.components-canonical-date-picker {
    background: var(--library-component-date-picker-panel-background);
    border: var(--library-component-date-picker-number-panel-border-width) solid var(--library-component-date-picker-panel-border);
    border-radius: var(--library-component-date-picker-number-panel-shape-radius);
    box-sizing: border-box;
    align-items: stretch;
    gap: var(--library-component-date-picker-number-panel-gap-sections);
    padding: var(--library-component-date-picker-number-panel-space-padding);
    justify-items: stretch;
    display: grid
}

.components-canonical-date-picker-header {
    grid-template-columns: var(--library-component-date-picker-number-header-size-icon) 1fr var(--library-component-date-picker-number-header-size-icon);
    min-height: var(--library-component-date-picker-number-header-size-height);
    padding-left: var(--library-component-date-picker-number-header-space-padding-x);
    padding-right: var(--library-component-date-picker-number-header-space-padding-x);
    align-items: center;
    display: grid
}

.components-canonical-date-picker-nav,.components-canonical-date-picker-month,.components-canonical-date-picker-day {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: inherit;
    cursor: pointer;
    padding: var(--alpy-ui-space-0)
}

.components-canonical-date-picker-nav {
    color: var(--library-component-date-picker-header-icon);
    height: var(--library-component-date-picker-number-header-size-icon);
    width: var(--library-component-date-picker-number-header-size-icon);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-date-picker-nav .components-canonical-icon-svg {
    height: var(--library-component-date-picker-number-header-size-icon);
    width: var(--library-component-date-picker-number-header-size-icon)
}

.components-canonical-date-picker-month {
    color: var(--library-component-date-picker-header-text);
    font-family: var(--library-component-date-picker-typography-text-month-font-family);
    font-size: var(--library-component-date-picker-typography-text-month-font-size);
    font-weight: var(--library-component-date-picker-typography-text-month-font-weight);
    align-items: center;
    gap: var(--library-component-date-picker-number-header-gap-month-picker);
    letter-spacing: var(--library-component-date-picker-typography-text-month-letter-spacing);
    line-height: var(--library-component-date-picker-typography-text-month-line-height);
    justify-self: center;
    display: inline-flex
}

.components-canonical-date-picker-month .components-canonical-icon-svg {
    color: var(--library-component-date-picker-header-icon);
    height: var(--library-component-date-picker-number-header-size-month-picker-icon);
    width: var(--library-component-date-picker-number-header-size-month-picker-icon)
}

.components-canonical-date-picker-weekdays {
    min-height: var(--library-component-date-picker-number-weekday-size-height);
    padding-left: var(--library-component-date-picker-number-weekday-space-padding-x);
    padding-right: var(--library-component-date-picker-number-weekday-space-padding-x);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex
}

.components-canonical-date-picker-weekday {
    color: var(--library-component-date-picker-weekday-text);
    font-family: var(--library-component-date-picker-typography-text-weekday-font-family);
    font-size: var(--library-component-date-picker-typography-text-weekday-font-size);
    font-weight: var(--library-component-date-picker-typography-text-weekday-font-weight);
    height: var(--library-component-date-picker-number-weekday-size-height);
    letter-spacing: var(--library-component-date-picker-typography-text-weekday-letter-spacing);
    line-height: var(--library-component-date-picker-typography-text-weekday-line-height);
    width: var(--library-component-date-picker-number-weekday-size-cell);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-date-picker-grid {
    gap: var(--library-component-date-picker-number-grid-gap-rows);
    padding-left: var(--library-component-date-picker-number-grid-space-padding-x);
    padding-right: var(--library-component-date-picker-number-grid-space-padding-x);
    display: grid
}

.components-canonical-date-picker-week {
    gap: var(--library-component-date-picker-number-grid-gap-columns);
    grid-template-columns: repeat(7, var(--library-component-date-picker-number-grid-size-day));
    display: grid
}

.components-canonical-date-picker-day {
    border-radius: var(--library-component-date-picker-number-grid-shape-active-day-radius);
    color: var(--library-component-date-picker-day-text);
    font-family: var(--library-component-date-picker-typography-text-day-font-family);
    font-size: var(--library-component-date-picker-typography-text-day-font-size);
    font-weight: var(--library-component-date-picker-typography-text-day-font-weight);
    height: var(--library-component-date-picker-number-grid-size-day);
    letter-spacing: var(--library-component-date-picker-typography-text-day-letter-spacing);
    line-height: var(--library-component-date-picker-typography-text-day-line-height);
    width: var(--library-component-date-picker-number-grid-size-day);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-date-picker-day[data-active=true],.components-canonical-date-picker-day:not(.is-empty):not(:disabled):hover {
    background: var(--library-component-date-picker-active-day-background);
    color: var(--library-component-date-picker-active-day-text)
}

.components-canonical-date-picker-grid:hover .components-canonical-date-picker-day[data-active=true]:not(:hover) {
    background: var(--alpy-ui-color-system-transparent);
    color: var(--library-component-date-picker-day-text)
}

.components-canonical-date-picker-day.is-empty {
    cursor: default
}

.components-canonical-date-picker-divider {
    background: var(--library-component-date-picker-divider);
    height: var(--library-component-date-picker-number-footer-border-divider-width);
    display: block
}

.components-canonical-date-picker-footer {
    min-height: var(--library-component-date-picker-number-footer-size-height);
    padding-left: var(--library-component-date-picker-number-footer-space-padding-x);
    padding-right: var(--library-component-date-picker-number-footer-space-padding-x);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-canonical-date-picker-time-label {
    color: var(--library-component-date-picker-footer-label);
    font-family: var(--library-component-date-picker-typography-text-footer-label-font-family);
    font-size: var(--library-component-date-picker-typography-text-footer-label-font-size);
    font-weight: var(--library-component-date-picker-typography-text-footer-label-font-weight);
    letter-spacing: var(--library-component-date-picker-typography-text-footer-label-letter-spacing);
    line-height: var(--library-component-date-picker-typography-text-footer-label-line-height)
}

.components-canonical-date-picker-time-badge {
    flex: none
}

.components-canonical-badge {
    box-sizing: border-box;
    white-space: nowrap;
    border-style: solid;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    display: inline-flex
}

.components-canonical-badge:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.components-canonical-badge-icon {
    color: currentColor;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-breadcrumb {
    gap: var(--library-component-breadcrumb-menu-offset-y);
    justify-items: start;
    max-width: 100%;
    display: grid
}

.components-canonical-breadcrumb-row {
    align-items: center;
    gap: var(--library-component-breadcrumb-gap);
    flex-wrap: wrap;
    max-width: 100%;
    display: inline-flex
}

.components-canonical-breadcrumb-link,.components-canonical-breadcrumb-current {
    font-family: var(--library-component-breadcrumb-link-font-family);
    font-size: var(--library-component-breadcrumb-link-font-size);
    font-weight: var(--library-component-breadcrumb-link-font-weight);
    letter-spacing: var(--library-component-breadcrumb-link-letter-spacing);
    line-height: var(--library-component-breadcrumb-link-line-height)
}

.components-canonical-breadcrumb-link {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--library-component-breadcrumb-link-text);
    cursor: pointer;
    padding: var(--alpy-ui-space-0)
}

.components-canonical-breadcrumb-current {
    color: var(--library-component-breadcrumb-current-text);
    font-family: var(--library-component-breadcrumb-current-font-family);
    font-size: var(--library-component-breadcrumb-current-font-size);
    font-weight: var(--library-component-breadcrumb-current-font-weight);
    letter-spacing: var(--library-component-breadcrumb-current-letter-spacing);
    line-height: var(--library-component-breadcrumb-current-line-height)
}

.components-canonical-breadcrumb-separator {
    color: var(--library-component-breadcrumb-separator-icon);
    flex: none;
    align-items: center;
    display: inline-flex
}

.components-canonical-breadcrumb-separator .components-canonical-icon-svg {
    height: var(--library-component-breadcrumb-separator-icon-size);
    width: var(--library-component-breadcrumb-separator-icon-size)
}

.components-canonical-breadcrumb-ellipsis {
    background: var(--library-component-breadcrumb-ellipsis-background);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--library-component-breadcrumb-ellipsis-radius);
    color: var(--library-component-breadcrumb-ellipsis-text);
    cursor: pointer;
    font-family: var(--library-component-breadcrumb-link-font-family);
    font-size: var(--library-component-breadcrumb-link-font-size);
    font-weight: var(--library-component-breadcrumb-link-font-weight);
    height: var(--library-component-breadcrumb-ellipsis-size);
    letter-spacing: var(--library-component-breadcrumb-link-letter-spacing);
    line-height: var(--library-component-breadcrumb-link-line-height);
    padding: var(--alpy-ui-space-0);
    width: var(--library-component-breadcrumb-ellipsis-size);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-breadcrumb-menu-row {
    align-items: center;
    gap: var(--library-component-breadcrumb-gap);
    max-width: 100%;
    display: inline-flex
}

.components-canonical-breadcrumb-anchor-spacer {
    align-items: center;
    gap: var(--library-component-breadcrumb-gap);
    opacity: 0;
    pointer-events: none;
    flex: none;
    display: inline-flex
}

.components-canonical-breadcrumb-menu {
    max-width: 100%
}

.components-canonical-dropdown-trigger {
    box-sizing: border-box;
    cursor: pointer;
    border-style: solid;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    display: inline-flex
}

.components-canonical-dropdown-icon {
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-dropdown-stack {
    align-items: start;
    gap: var(--alpy-ui-space-4);
    justify-items: start;
    width: max-content;
    max-width: 100%;
    display: grid
}

.components-canonical-dropdown-menu {
    box-sizing: border-box;
    border-style: solid;
    max-width: 100%;
    display: grid
}

.components-canonical-dropdown-menu-item {
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    border-style: solid;
    justify-content: space-between;
    align-items: center;
    display: flex
}

.components-canonical-dropdown-menu-item:focus-visible {
    outline: var(--alpy-ui-border-width-0)
}

.components-canonical-dropdown-menu-item-label {
    align-items: center;
    gap: inherit;
    overflow-wrap: anywhere;
    flex: auto;
    display: inline-flex
}

.components-canonical-pagination {
    color: var(--library-component-pagination-item-text);
    max-width: 100%
}

.components-canonical-pagination[data-pagination-layout=chrome] {
    width: 100%
}

.components-canonical-pagination-pager,.components-canonical-pagination-compact,.components-canonical-pagination-chrome {
    align-items: center;
    display: inline-flex
}

.components-canonical-pagination-pager {
    gap: var(--library-component-pagination-gap);
    flex-wrap: wrap;
    max-width: 100%
}

.components-canonical-pagination-item {
    background: var(--library-component-pagination-item-background);
    border: var(--library-component-pagination-item-border-width) solid var(--library-component-pagination-item-border);
    border-radius: var(--library-component-pagination-item-radius);
    box-sizing: border-box;
    color: var(--library-component-pagination-item-text);
    cursor: pointer;
    font-family: var(--library-component-pagination-page-font-family);
    font-size: var(--library-component-pagination-page-font-size);
    font-weight: var(--library-component-pagination-page-font-weight);
    align-items: center;
    gap: var(--library-component-pagination-item-gap);
    height: var(--library-component-pagination-item-height);
    letter-spacing: var(--library-component-pagination-page-letter-spacing);
    line-height: var(--library-component-pagination-page-line-height);
    min-width: var(--library-component-pagination-item-min-width);
    padding: var(--library-component-pagination-item-padding-y) var(--library-component-pagination-item-padding-x);
    justify-content: center;
    display: inline-flex
}

.components-canonical-pagination-item:not(.is-action) {
    width: var(--library-component-pagination-item-width)
}

.components-canonical-pagination-item.is-current {
    background: var(--library-component-pagination-current-background);
    border-color: var(--library-component-pagination-current-border);
    color: var(--library-component-pagination-current-text)
}

.components-canonical-pagination-item .components-canonical-icon-svg {
    color: var(--library-component-pagination-item-icon)
}

.components-canonical-pagination-ellipsis {
    color: var(--library-component-pagination-item-text);
    font-family: var(--library-component-pagination-page-font-family);
    font-size: var(--library-component-pagination-page-font-size);
    font-weight: var(--library-component-pagination-page-font-weight);
    letter-spacing: var(--library-component-pagination-page-letter-spacing);
    line-height: var(--library-component-pagination-page-line-height)
}

.components-canonical-pagination-compact {
    gap: var(--library-component-pagination-compact-segment-gap)
}

.components-canonical-pagination-compact-button {
    background: var(--library-component-pagination-button-background);
    border: var(--library-component-pagination-compact-border-width) solid var(--library-component-pagination-button-border);
    border-radius: var(--library-component-pagination-compact-radius);
    color: var(--library-component-pagination-button-icon);
    cursor: pointer;
    height: var(--library-component-pagination-button-height);
    padding-left: var(--library-component-pagination-compact-padding-x);
    padding-right: var(--library-component-pagination-compact-padding-x);
    width: var(--library-component-pagination-button-width);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-pagination-compact-value {
    background: var(--library-component-pagination-value-background);
    border: var(--library-component-pagination-compact-border-width) solid var(--library-component-pagination-value-border);
    border-radius: var(--library-component-pagination-compact-radius);
    color: var(--library-component-pagination-value-text);
    font-family: var(--library-component-pagination-page-font-family);
    font-size: var(--library-component-pagination-page-font-size);
    font-weight: var(--library-component-pagination-page-font-weight);
    align-items: center;
    gap: var(--library-component-pagination-value-gap);
    height: var(--library-component-pagination-button-height);
    letter-spacing: var(--library-component-pagination-page-letter-spacing);
    line-height: var(--library-component-pagination-page-line-height);
    padding-left: var(--library-component-pagination-compact-padding-x);
    padding-right: var(--library-component-pagination-compact-padding-x);
    display: inline-flex
}

.components-canonical-pagination-compact-value span:last-child {
    color: var(--library-component-pagination-value-text-muted)
}

.components-canonical-pagination-chrome {
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.components-canonical-pagination-summary,.components-canonical-pagination-select-label {
    color: var(--library-component-pagination-chrome-meta);
    font-family: var(--library-component-pagination-meta-font-family);
    font-size: var(--library-component-pagination-meta-font-size);
    font-weight: var(--library-component-pagination-meta-font-weight);
    letter-spacing: var(--library-component-pagination-meta-letter-spacing);
    line-height: var(--library-component-pagination-meta-line-height)
}

.components-canonical-pagination-select {
    align-items: center;
    gap: var(--library-component-pagination-select-gap);
    flex-wrap: wrap;
    justify-content: flex-end;
    display: inline-flex;
    position: relative
}

.components-canonical-pagination-select-stack {
    justify-items: end;
    display: grid;
    position: relative
}

.components-pagination-rows-dropdown-menu {
    min-width: 100%;
    right: 0;
    top: calc(100% + var(--library-component-pagination-select-gap));
    z-index: 1;
    position: absolute
}

.components-canonical-pagination-select-trigger {
    background: var(--library-component-pagination-select-trigger-background);
    border: var(--library-component-pagination-select-trigger-border-width) solid var(--library-component-pagination-select-trigger-border);
    border-radius: var(--library-component-pagination-select-trigger-radius);
    box-sizing: border-box;
    color: var(--library-component-pagination-select-trigger-text);
    font-family: var(--library-component-pagination-page-font-family);
    font-size: var(--library-component-pagination-page-font-size);
    font-weight: var(--library-component-pagination-page-font-weight);
    align-items: center;
    gap: var(--library-component-pagination-select-gap);
    height: var(--library-component-pagination-select-trigger-height);
    letter-spacing: var(--library-component-pagination-page-letter-spacing);
    line-height: var(--library-component-pagination-page-line-height);
    padding: var(--library-component-pagination-select-trigger-padding-y) var(--library-component-pagination-select-trigger-padding-x);
    justify-content: center;
    display: inline-flex
}

.components-canonical-pagination-select-icon {
    color: var(--library-component-pagination-select-trigger-icon);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-progress-bar {
    box-sizing: border-box;
    flex-direction: column;
    width: min(100%,360px);
    max-width: 100%;
    display: flex
}

.components-canonical-progress-bar[data-progress-bar-variant=default] {
    gap: var(--library-component-progress-bar-track-to-status-gap);
    width: min(100%,320px)
}

.components-canonical-progress-bar[data-progress-bar-variant=with-label] {
    gap: var(--library-component-progress-bar-header-to-track-gap)
}

.components-canonical-progress-bar[data-progress-bar-variant=with-file-upload] {
    align-items: center;
    gap: var(--library-component-progress-bar-header-to-track-gap);
    flex-direction: row;
    width: min(100%,520px)
}

.components-canonical-progress-bar-header,.components-canonical-progress-bar-file-group,.components-canonical-progress-bar-label-group,.components-canonical-progress-bar-progress-group {
    align-items: center;
    display: flex
}

.components-canonical-progress-bar-header {
    justify-content: space-between;
    width: 100%
}

.components-canonical-progress-bar-header.is-status-only {
    justify-content: flex-end
}

.components-canonical-progress-bar-label-group,.components-canonical-progress-bar-file-group {
    gap: var(--library-component-progress-bar-icon-to-label-gap)
}

.components-canonical-progress-bar-progress-group {
    gap: var(--library-component-progress-bar-track-to-meta-gap);
    flex: auto
}

.components-canonical-progress-bar[data-progress-bar-variant=with-label] .components-canonical-progress-bar-progress-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%
}

.components-canonical-progress-bar-track {
    background: var(--library-component-progress-bar-track);
    border-radius: var(--library-component-progress-bar-track-radius);
    height: var(--library-component-progress-bar-track-height);
    flex: auto;
    width: 100%;
    display: block;
    position: relative
}

.components-canonical-progress-bar-fill {
    background: var(--library-component-progress-bar-fill);
    border-radius: inherit;
    height: 100%;
    width: var(--library-component-progress-bar-percent);
    display: block
}

.components-canonical-progress-bar-controller {
    background: var(--library-component-progress-bar-controller-fill);
    border: var(--library-component-progress-bar-controller-border-width) solid var(--library-component-progress-bar-controller-border);
    border-radius: var(--library-component-progress-bar-controller-radius);
    box-sizing: border-box;
    height: var(--library-component-progress-bar-controller-diameter);
    left: var(--library-component-progress-bar-controller-left);
    top: var(--library-component-progress-bar-controller-top);
    transform: var(--library-component-progress-bar-controller-transform);
    width: var(--library-component-progress-bar-controller-diameter);
    z-index: 1;
    display: block;
    position: absolute
}

.components-canonical-progress-bar-status-group {
    align-items: center;
    gap: var(--library-component-progress-bar-status-to-icon-gap);
    display: inline-flex
}

.components-canonical-progress-bar-status,.components-canonical-progress-bar-headline {
    overflow-wrap: anywhere
}

.components-canonical-progress-bar-status {
    color: var(--library-component-progress-bar-status);
    font-family: var(--library-component-progress-bar-status-font-family);
    font-size: var(--library-component-progress-bar-status-font-size);
    font-weight: var(--library-component-progress-bar-status-font-weight);
    letter-spacing: var(--library-component-progress-bar-status-letter-spacing);
    line-height: var(--library-component-progress-bar-status-line-height)
}

.components-canonical-progress-bar-headline {
    color: var(--library-component-progress-bar-headline);
    font-family: var(--library-component-progress-bar-headline-font-family);
    font-size: var(--library-component-progress-bar-headline-font-size);
    font-weight: var(--library-component-progress-bar-headline-font-weight);
    letter-spacing: var(--library-component-progress-bar-headline-letter-spacing);
    line-height: var(--library-component-progress-bar-headline-line-height)
}

.components-canonical-progress-bar-meta {
    color: var(--library-component-progress-bar-meta);
    font-family: var(--library-component-progress-bar-meta-font-family);
    font-size: var(--library-component-progress-bar-meta-font-size);
    font-weight: var(--library-component-progress-bar-meta-font-weight);
    letter-spacing: var(--library-component-progress-bar-meta-letter-spacing);
    line-height: var(--library-component-progress-bar-meta-line-height);
    white-space: nowrap;
    flex: none
}

.components-canonical-progress-bar-icon,.components-canonical-progress-bar-status-icon {
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-progress-bar-icon {
    color: var(--library-component-progress-bar-icon);
    height: var(--library-component-progress-bar-icon-size);
    width: var(--library-component-progress-bar-icon-size)
}

.components-canonical-progress-bar-status-icon {
    color: var(--library-component-progress-bar-status-icon);
    height: var(--library-component-progress-bar-status-icon-size);
    width: var(--library-component-progress-bar-status-icon-size)
}

.components-canonical-table {
    background: var(--library-component-table-surface-background);
    box-sizing: border-box;
    max-width: 100%;
    width: min(100%, calc(var(--alpy-ui-size-192) * 4));
    overflow-x: auto
}

.components-canonical-table-columns {
    width: max-content;
    display: flex
}

.components-canonical-table-column {
    flex: none;
    display: grid
}

.components-canonical-table-column[data-table-column-width=fill] {
    flex: 1 1 calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-32))
}

.components-canonical-table-cell {
    background: var(--library-component-table-row-background);
    border-bottom: var(--library-component-table-row-border-width) solid var(--library-component-table-row-border);
    box-sizing: border-box;
    color: var(--library-component-table-body-text);
    font-family: var(--library-component-table-body-font-family);
    font-size: var(--library-component-table-body-font-size);
    font-weight: var(--library-component-table-body-font-weight);
    letter-spacing: var(--library-component-table-body-letter-spacing);
    line-height: var(--library-component-table-body-line-height);
    min-height: var(--library-component-table-cell-row-height);
    padding-left: var(--library-component-table-cell-padding-x);
    padding-right: var(--library-component-table-cell-padding-x);
    white-space: nowrap;
    align-items: center;
    display: flex
}

.components-canonical-table-cell[data-table-cell-width=fill] {
    width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-32))
}

.components-canonical-table-cell[data-table-region=header] {
    background: var(--library-component-table-header-background)
}

.components-canonical-table-cell[data-table-tone=header] {
    color: var(--library-component-table-header-text);
    font-family: var(--library-component-table-header-font-family);
    font-size: var(--library-component-table-header-font-size);
    font-weight: var(--library-component-table-header-font-weight);
    letter-spacing: var(--library-component-table-header-letter-spacing);
    line-height: var(--library-component-table-header-line-height)
}

.components-canonical-table-column[data-table-first-column=true] .components-canonical-table-cell[data-table-region=header] {
    border-top-left-radius: var(--library-component-table-header-radius)
}

.components-canonical-table-column[data-table-last-column=true] .components-canonical-table-cell[data-table-region=header] {
    border-top-right-radius: var(--library-component-table-header-radius)
}

.components-canonical-table-cell[data-table-last-row=true] {
    border-bottom: var(--alpy-ui-border-width-0)
}

.components-canonical-table-cell[data-table-hover-row=true][data-table-region=body] {
    background: var(--library-component-table-row-hover-background)
}

.components-canonical-table-cell-content {
    align-items: center;
    gap: var(--library-component-table-cell-content-gap);
    max-width: 100%;
    display: inline-flex
}

.components-canonical-table-cell-label {
    text-overflow: ellipsis;
    overflow: hidden
}

.components-canonical-table-icon {
    color: var(--library-component-table-icon-color);
    height: var(--library-component-table-icon-size);
    width: var(--library-component-table-icon-size);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-table-cell[data-table-tone=header] .components-canonical-table-icon {
    color: var(--library-component-table-header-icon)
}

.components-canonical-table-sort {
    color: var(--library-component-table-header-icon);
    height: calc(var(--library-component-table-sort-icon-size) * 2);
    width: var(--library-component-table-sort-icon-size);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-table-checkbox {
    cursor: default;
    flex: none
}

.components-canonical-table-badge {
    flex: none
}

.components-table-panel,.components-table-toggle-row {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-table-toggle-row {
    grid-template-columns: 1fr auto;
    align-items: center
}

.components-table-toggle-row span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-canonical-tabs {
    background: var(--library-component-tabs-container);
    border-radius: var(--library-component-tabs-container-radius);
    box-sizing: border-box;
    align-items: center;
    gap: var(--library-component-tabs-gap);
    max-width: 100%;
    padding: var(--library-component-tabs-group-padding);
    flex-direction: row;
    display: inline-flex
}

.components-canonical-tabs[data-tabs-orientation=vertical] {
    flex-direction: column;
    align-items: stretch
}

.components-canonical-tabs[data-tabs-variant=icon-only] {
    align-items: center
}

.components-canonical-tabs[data-tabs-variant=line] {
    border-radius: 0;
    align-items: stretch;
    gap: 0;
    padding: 0
}

.components-canonical-tabs[data-tabs-variant=line][data-tabs-orientation=horizontal] {
    flex-direction: column
}

.components-canonical-tabs[data-tabs-variant=line][data-tabs-orientation=vertical] {
    flex-direction: row
}

.components-canonical-tabs-list {
    align-items: center;
    gap: var(--library-component-tabs-gap);
    padding: var(--library-component-tabs-group-padding);
    flex-direction: row;
    display: flex
}

.components-canonical-tabs[data-tabs-orientation=vertical] .components-canonical-tabs-list {
    flex-direction: column;
    align-items: stretch
}

.components-canonical-tabs-item {
    background: var(--library-component-tabs-item-background);
    border-radius: var(--library-component-tabs-item-radius);
    color: var(--library-component-tabs-text-color);
    cursor: pointer;
    font: inherit;
    border: 0;
    flex-direction: column;
    flex: none;
    align-items: stretch;
    gap: 0;
    padding: 0;
    display: inline-flex
}

.components-canonical-tabs[data-tabs-variant=line] .components-canonical-tabs-item {
    background: 0 0;
    border-radius: 0
}

.components-canonical-tabs[data-tabs-variant=line][data-tabs-orientation=vertical] .components-canonical-tabs-item {
    flex-direction: row
}

.components-canonical-tabs-content {
    box-sizing: border-box;
    align-items: center;
    gap: var(--library-component-tabs-icon-gap);
    min-height: var(--library-component-tabs-min-height);
    padding: var(--library-component-tabs-item-padding-y) var(--library-component-tabs-item-padding-x);
    flex: none;
    justify-content: center;
    display: inline-flex
}

.components-canonical-tabs[data-tabs-variant=icon-only] .components-canonical-tabs-content {
    height: var(--library-component-tabs-height);
    width: var(--library-component-tabs-width);
    padding: 0
}

.components-canonical-tabs[data-tabs-orientation=vertical] .components-canonical-tabs-content {
    justify-content: flex-start
}

.components-canonical-tabs[data-tabs-variant=icon-only][data-tabs-orientation=vertical] .components-canonical-tabs-content {
    justify-content: center
}

.components-canonical-tabs-label {
    color: var(--library-component-tabs-text-color);
    font-family: var(--library-component-tabs-label-font-family);
    font-size: var(--library-component-tabs-label-font-size);
    font-weight: var(--library-component-tabs-label-font-weight);
    letter-spacing: var(--library-component-tabs-label-letter-spacing);
    line-height: var(--library-component-tabs-label-line-height);
    white-space: nowrap
}

.components-canonical-tabs-icon {
    color: var(--library-component-tabs-icon-color);
    height: var(--library-component-tabs-icon-size);
    width: var(--library-component-tabs-icon-size);
    flex: none;
    display: inline-flex
}

.components-canonical-tabs-indicator {
    background: var(--library-component-tabs-indicator-color);
    flex: none;
    display: block
}

.components-canonical-tabs-indicator[data-tabs-axis=horizontal] {
    height: var(--library-component-tabs-indicator-width);
    width: 100%
}

.components-canonical-tabs-indicator[data-tabs-axis=vertical] {
    height: auto;
    width: var(--library-component-tabs-indicator-width)
}

.components-canonical-tabs-divider {
    background: var(--library-component-tabs-divider);
    flex: none;
    display: block
}

.components-canonical-tabs[data-tabs-orientation=horizontal] .components-canonical-tabs-divider {
    height: var(--library-component-tabs-divider-width);
    width: 100%
}

.components-canonical-tabs[data-tabs-orientation=vertical] .components-canonical-tabs-divider {
    width: var(--library-component-tabs-divider-width);
    align-self: stretch
}

.components-tabs-panel,.components-tabs-toggle-row {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-tabs-toggle-row {
    grid-template-columns: max-content auto;
    justify-content: start;
    align-items: center
}

.components-tabs-toggle-row span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-canonical-progress-indicator {
    box-sizing: border-box;
    width: min(100%,600px);
    max-width: 100%;
    display: flex
}

.components-canonical-progress-indicator[data-progress-indicator-variant=stacked] {
    align-items: flex-start;
    gap: var(--library-component-progress-indicator-step-to-connector-gap)
}

.components-canonical-progress-indicator[data-progress-indicator-variant=inline] {
    align-items: center;
    gap: var(--library-component-progress-indicator-step-to-connector-gap)
}

.components-canonical-progress-indicator[data-progress-indicator-variant=segmented] {
    align-items: flex-start;
    gap: var(--library-component-progress-indicator-segment-gap)
}

.components-canonical-progress-indicator-step {
    flex: none;
    align-items: center;
    display: flex
}

.components-canonical-progress-indicator[data-progress-indicator-variant=stacked] .components-canonical-progress-indicator-step {
    gap: var(--library-component-progress-indicator-marker-to-label-gap);
    flex-direction: column
}

.components-canonical-progress-indicator[data-progress-indicator-variant=inline] .components-canonical-progress-indicator-step {
    gap: var(--library-component-progress-indicator-marker-to-label-gap);
    flex-direction: row
}

.components-canonical-progress-indicator[data-progress-indicator-variant=segmented] .components-canonical-progress-indicator-step {
    align-items: stretch;
    gap: var(--library-component-progress-indicator-segment-to-label-gap);
    flex-direction: column;
    flex: 1 1 0
}

.components-canonical-progress-indicator-marker {
    background: var(--library-component-progress-indicator-marker-background);
    border-radius: var(--library-component-progress-indicator-marker-radius);
    color: var(--library-component-progress-indicator-marker-icon);
    height: var(--library-component-progress-indicator-marker-diameter);
    width: var(--library-component-progress-indicator-marker-diameter);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-progress-indicator-number {
    color: var(--library-component-progress-indicator-marker-text);
    font-family: var(--library-component-progress-indicator-number-font-family);
    font-size: var(--library-component-progress-indicator-number-font-size);
    font-weight: var(--library-component-progress-indicator-number-font-weight);
    letter-spacing: var(--library-component-progress-indicator-number-letter-spacing);
    line-height: var(--library-component-progress-indicator-number-line-height)
}

.components-canonical-progress-indicator-label,.components-canonical-progress-indicator-label-row {
    color: var(--library-component-progress-indicator-label);
    align-items: center;
    display: inline-flex
}

.components-canonical-progress-indicator-label {
    font-family: var(--library-component-progress-indicator-label-font-family);
    font-size: var(--library-component-progress-indicator-label-font-size);
    font-weight: var(--library-component-progress-indicator-label-font-weight);
    letter-spacing: var(--library-component-progress-indicator-label-letter-spacing);
    line-height: var(--library-component-progress-indicator-label-line-height);
    overflow-wrap: anywhere;
    text-align: center
}

.components-canonical-progress-indicator-label-row {
    gap: var(--library-component-progress-indicator-icon-to-label-gap);
    justify-content: center
}

.components-canonical-progress-indicator-icon {
    color: var(--library-component-progress-indicator-icon);
    height: var(--library-component-progress-indicator-icon-size);
    width: var(--library-component-progress-indicator-icon-size);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-progress-indicator-marker .components-canonical-progress-indicator-icon {
    color: var(--library-component-progress-indicator-marker-icon)
}

.components-canonical-progress-indicator-segment {
    background: var(--library-component-progress-indicator-segment);
    border-radius: var(--library-component-progress-indicator-segment-radius);
    height: var(--library-component-progress-indicator-segment-height);
    width: 100%;
    display: block
}

.components-canonical-progress-indicator-connector {
    height: var(--library-component-progress-indicator-marker-diameter);
    flex: auto;
    align-self: flex-start;
    align-items: center;
    display: flex
}

.components-canonical-progress-indicator[data-progress-indicator-variant=inline] .components-canonical-progress-indicator-connector {
    align-self: center
}

.components-canonical-progress-indicator-connector:before {
    background: var(--library-component-progress-indicator-connector);
    content: "";
    height: var(--library-component-progress-indicator-connector-height);
    width: 100%;
    display: block
}

.components-canonical-popover {
    align-items: center;
    max-width: min(100%,360px);
    display: inline-flex
}

.components-canonical-popover[data-popover-rotation=top],.components-canonical-popover[data-popover-rotation=bottom] {
    flex-direction: column
}

.components-canonical-popover[data-popover-rotation=left],.components-canonical-popover[data-popover-rotation=right] {
    flex-direction: row
}

.components-canonical-popover-surface {
    background: var(--library-component-popover-background);
    border: var(--library-component-popover-border-width) solid var(--library-component-popover-border);
    border-radius: var(--library-component-popover-radius);
    box-sizing: border-box;
    gap: var(--library-component-popover-stack-gap);
    max-width: 100%;
    padding: var(--library-component-popover-padding-y) var(--library-component-popover-padding-x);
    z-index: 1;
    flex-direction: column;
    display: flex;
    position: relative
}

.components-canonical-popover[data-popover-variant=with-cta] .components-canonical-popover-surface {
    gap: var(--library-component-popover-cta-gap)
}

.components-canonical-popover-copy {
    gap: var(--library-component-popover-stack-gap);
    flex-direction: column;
    display: flex
}

.components-canonical-popover h2,.components-canonical-popover p {
    overflow-wrap: anywhere;
    margin: 0
}

.components-canonical-popover h2 {
    color: var(--library-component-popover-headline);
    font-family: var(--library-component-popover-headline-font-family);
    font-size: var(--library-component-popover-headline-font-size);
    font-weight: var(--library-component-popover-headline-font-weight);
    letter-spacing: var(--library-component-popover-headline-letter-spacing);
    line-height: var(--library-component-popover-headline-line-height)
}

.components-canonical-popover p {
    color: var(--library-component-popover-description);
    font-family: var(--library-component-popover-description-font-family);
    font-size: var(--library-component-popover-description-font-size);
    font-weight: var(--library-component-popover-description-font-weight);
    letter-spacing: var(--library-component-popover-description-letter-spacing);
    line-height: var(--library-component-popover-description-line-height)
}

.components-canonical-popover-caret {
    height: var(--library-component-popover-caret-height);
    width: var(--library-component-popover-caret-width);
    z-index: 0;
    flex: none;
    display: block;
    position: relative;
    overflow: visible
}

.components-canonical-popover-caret[data-popover-rotation=left],.components-canonical-popover-caret[data-popover-rotation=right] {
    height: var(--library-component-popover-caret-width);
    width: var(--library-component-popover-caret-height)
}

.components-canonical-popover-caret path {
    fill: var(--library-component-popover-caret);
    stroke: var(--library-component-popover-border);
    stroke-width: var(--library-component-popover-border-width)
}

.components-canonical-popover-caret[data-popover-rotation=right] {
    margin-left: -1px
}

.components-canonical-popover-caret[data-popover-rotation=bottom] {
    margin-top: -1px
}

.components-canonical-popover-caret[data-popover-rotation=left] {
    margin-right: -1px
}

.components-canonical-popover-caret[data-popover-rotation=top] {
    margin-bottom: -1px
}

.components-canonical-popover-cta-row {
    display: flex
}

.components-canonical-tooltip {
    align-items: center;
    max-width: min(100%,320px);
    display: inline-flex
}

.components-canonical-tooltip[data-tooltip-rotation=top],.components-canonical-tooltip[data-tooltip-rotation=bottom] {
    flex-direction: column
}

.components-canonical-tooltip[data-tooltip-rotation=left],.components-canonical-tooltip[data-tooltip-rotation=right] {
    flex-direction: row
}

.components-canonical-tooltip-surface {
    background: var(--library-component-tooltip-background);
    border-radius: var(--library-component-tooltip-radius);
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--library-component-tooltip-padding-y) var(--library-component-tooltip-padding-x);
    z-index: 1;
    display: inline-flex;
    position: relative
}

.components-canonical-tooltip[data-tooltip-variant=hover-card] .components-canonical-tooltip-surface {
    align-items: flex-start;
    gap: var(--library-component-tooltip-cta-gap);
    flex-direction: column
}

.components-canonical-tooltip-copy {
    gap: var(--library-component-tooltip-stack-gap);
    flex-direction: column;
    display: flex
}

.components-canonical-tooltip h2,.components-canonical-tooltip p {
    overflow-wrap: anywhere;
    margin: 0
}

.components-canonical-tooltip h2 {
    color: var(--library-component-tooltip-headline);
    font-family: var(--library-component-tooltip-headline-font-family);
    font-size: var(--library-component-tooltip-headline-font-size);
    font-weight: var(--library-component-tooltip-headline-font-weight);
    letter-spacing: var(--library-component-tooltip-headline-letter-spacing);
    line-height: var(--library-component-tooltip-headline-line-height)
}

.components-canonical-tooltip p {
    color: var(--library-component-tooltip-description);
    font-family: var(--library-component-tooltip-description-font-family);
    font-size: var(--library-component-tooltip-description-font-size);
    font-weight: var(--library-component-tooltip-description-font-weight);
    letter-spacing: var(--library-component-tooltip-description-letter-spacing);
    line-height: var(--library-component-tooltip-description-line-height)
}

.components-canonical-tooltip-label {
    color: var(--library-component-tooltip-label);
    font-family: var(--library-component-tooltip-label-font-family);
    font-size: var(--library-component-tooltip-label-font-size);
    font-weight: var(--library-component-tooltip-label-font-weight);
    letter-spacing: var(--library-component-tooltip-label-letter-spacing);
    line-height: var(--library-component-tooltip-label-line-height);
    overflow-wrap: anywhere;
    margin: 0
}

.components-canonical-tooltip-caret {
    height: var(--library-component-tooltip-caret-height);
    width: var(--library-component-tooltip-caret-width);
    z-index: 0;
    flex: none;
    display: block;
    position: relative;
    overflow: visible
}

.components-canonical-tooltip-caret[data-tooltip-rotation=left],.components-canonical-tooltip-caret[data-tooltip-rotation=right] {
    height: var(--library-component-tooltip-caret-width);
    width: var(--library-component-tooltip-caret-height)
}

.components-canonical-tooltip-caret path {
    fill: var(--library-component-tooltip-caret)
}

.components-canonical-tooltip-cta-row {
    display: flex
}

.components-canonical-alert {
    background: var(--library-component-alert-background);
    border: var(--library-component-alert-number-border-width) solid var(--library-component-alert-border);
    border-radius: var(--library-component-alert-number-shape-radius);
    box-sizing: border-box;
    color: var(--library-component-alert-body);
    gap: var(--library-component-alert-number-gap);
    max-width: 100%;
    padding: var(--library-component-alert-number-space-padding-y) var(--library-component-alert-number-space-padding-x);
    width: min(100%, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-96)));
    display: flex
}

.components-canonical-alert-icon {
    border: var(--library-component-alert-number-border-icon-border-width) solid var(--library-component-alert-icon-border);
    border-radius: var(--library-component-alert-number-shape-icon-radius);
    box-sizing: border-box;
    color: var(--library-component-alert-icon);
    flex: 0 0 var(--library-component-alert-number-size-icon-size);
    height: var(--library-component-alert-number-size-icon-size);
    width: var(--library-component-alert-number-size-icon-size);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-alert-content {
    gap: var(--library-component-alert-number-gap-content);
    min-width: var(--alpy-ui-size-0);
    flex: auto;
    display: grid
}

.components-canonical-alert-copy {
    gap: var(--library-component-alert-number-gap-content);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-canonical-alert h2 {
    color: var(--library-component-alert-title);
    font-family: var(--library-component-alert-typography-text-heading-font-family);
    font-size: var(--library-component-alert-typography-text-heading-font-size);
    font-weight: var(--library-component-alert-typography-text-heading-font-weight);
    letter-spacing: var(--library-component-alert-typography-text-heading-letter-spacing);
    line-height: var(--library-component-alert-typography-text-heading-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-alert p {
    color: var(--library-component-alert-body);
    font-family: var(--library-component-alert-typography-text-body-font-family);
    font-size: var(--library-component-alert-typography-text-body-font-size);
    font-weight: var(--library-component-alert-typography-text-body-font-weight);
    letter-spacing: var(--library-component-alert-typography-text-body-letter-spacing);
    line-height: var(--library-component-alert-typography-text-body-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-alert-cta-row {
    gap: var(--library-component-alert-number-gap-cta-buttons);
    padding-top: var(--library-component-alert-number-gap-cta);
    flex-wrap: wrap;
    display: flex
}

.components-alert-cta-button {
    flex: none
}

.components-modal-controller-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-modal-controller-divider {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    height: var(--alpy-ui-border-width-1)
}

.components-modal-icon-gallery {
    max-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-96))
}

.components-canonical-modal-stage,.components-canonical-modal-closed {
    place-items: center;
    width: 100%;
    max-width: 100%;
    display: grid
}

.components-canonical-modal {
    background: var(--component-modal-background-default);
    border: var(--component-modal-container-border-width) solid var(--component-modal-border-default);
    border-radius: var(--component-modal-container-shape-radius);
    box-sizing: border-box;
    color: var(--component-modal-body-default);
    gap: var(--component-modal-stack-gap-sections);
    max-width: 100%;
    padding: var(--component-modal-container-space-padding-y) var(--component-modal-container-space-padding-x);
    width: min(100%, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-96)));
    display: grid;
    position: relative
}

.components-canonical-modal-content-row {
    align-items: start;
    gap: var(--component-modal-stack-gap-sections);
    min-width: var(--alpy-ui-size-0);
    padding-right: calc(var(--component-modal-header-size-close) + var(--alpy-ui-size-24) + var(--component-modal-header-gap-icon-to-headline));
    justify-content: space-between;
    display: flex
}

.components-canonical-modal-content-stack {
    gap: var(--component-modal-stack-gap-sections);
    min-width: var(--alpy-ui-size-0);
    flex: auto;
    display: grid
}

.components-canonical-modal-headline-row {
    align-items: center;
    gap: var(--component-modal-header-gap-icon-to-headline);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.components-canonical-modal-headline-icon {
    color: var(--component-modal-icon-default);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-modal-headline-icon .components-canonical-icon-svg {
    height: var(--component-modal-header-size-icon);
    width: var(--component-modal-header-size-icon)
}

.components-canonical-modal h2 {
    color: var(--component-modal-headline-default);
    font-family: var(--component-modal-text-headline-font-family);
    font-size: var(--component-modal-text-headline-font-size);
    font-weight: var(--component-modal-text-headline-font-weight);
    letter-spacing: var(--component-modal-text-headline-letter-spacing);
    line-height: var(--component-modal-text-headline-line-height);
    margin: var(--alpy-ui-space-0);
    overflow-wrap: anywhere
}

.components-canonical-modal p {
    color: var(--component-modal-body-default);
    font-family: var(--component-modal-text-body-font-family);
    font-size: var(--component-modal-text-body-font-size);
    font-weight: var(--component-modal-text-body-font-weight);
    letter-spacing: var(--component-modal-text-body-letter-spacing);
    line-height: var(--component-modal-text-body-line-height);
    margin: var(--alpy-ui-space-0);
    overflow-wrap: anywhere
}

.components-canonical-modal-close {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--component-modal-close-default);
    cursor: pointer;
    height: calc(var(--component-modal-header-size-close) + var(--alpy-ui-size-32));
    padding: var(--alpy-ui-space-0);
    right: calc(var(--component-modal-container-space-padding-x) - ((var(--alpy-ui-size-24) + var(--component-modal-header-size-close)) / 2));
    top: calc(var(--component-modal-container-space-padding-y) - ((var(--alpy-ui-size-24) + var(--component-modal-header-size-close)) / 2));
    width: calc(var(--component-modal-header-size-close) + var(--alpy-ui-size-32));
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute
}

.components-canonical-modal-close .components-canonical-icon-svg {
    height: var(--component-modal-header-size-close);
    width: var(--component-modal-header-size-close)
}

.components-canonical-modal-close:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.components-canonical-modal-cta-row {
    gap: var(--component-modal-cta-gap-buttons);
    flex-wrap: wrap;
    justify-content: end;
    display: flex
}

.components-modal-cta-button,.components-modal-open-button {
    flex: none
}

.components-card-controller-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-card-controller-panel h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 400;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.components-card-toggle-row {
    align-items: center;
    display: flex
}

.components-card-inline-toggle {
    flex-direction: row-reverse
}

.components-card-image-header {
    justify-content: space-between;
    align-items: start;
    display: flex
}

.components-card-image-position-control {
    justify-items: start;
    display: grid
}

.components-card-image-position-buttons {
    gap: var(--alpy-ui-space-8);
    display: flex
}

.components-card-image-position-button {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-system-transparent);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-subtle);
    cursor: pointer;
    height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-card-image-position-button [role=tooltip] {
    opacity: 0;
    pointer-events: none;
    left: 50%;
    top: calc(100% + var(--alpy-ui-space-8));
    z-index: 2;
    position: absolute;
    transform: translate(-50%)
}

.components-card-image-position-button:hover [role=tooltip],.components-card-image-position-button:focus-visible [role=tooltip] {
    opacity: 1
}

.components-card-image-position-button:hover {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-card-image-ratio-grid {
    gap: var(--alpy-ui-space-32) var(--alpy-ui-space-8);
    grid-template-columns: repeat(4, minmax(var(--alpy-ui-size-0), 1fr));
    padding-top: var(--alpy-ui-space-32);
    display: grid
}

.components-card-image-ratio-option {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-0);
    justify-items: center;
    display: grid;
    position: relative
}

.components-card-image-ratio-shape {
    aspect-ratio: var(--components-card-image-ratio);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    box-shadow: inset 0 0 0 var(--alpy-ui-border-width-1) var(--alpy-ui-color-border-neutral-subtle-one);
    height: var(--components-card-image-ratio-height);
    width: var(--components-card-image-ratio-width);
    display: block
}

.components-card-image-ratio-label {
    color: currentColor;
    font-family: var(--alpy-ui-font-body-fontFamily);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    font-size: 14px;
    font-weight: 700;
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-canonical-accordion-shell {
    box-sizing: border-box;
    color: var(--library-component-accordion-content-text);
    max-width: 100%;
    width: min(100%, calc(var(--alpy-ui-size-192) * 3));
    display: grid
}

.components-canonical-accordion-shell[data-accordion-variant=inCard] {
    border: var(--library-component-accordion-border-width) solid var(--library-component-accordion-border);
    border-radius: var(--library-component-accordion-card-radius);
    padding: var(--library-component-accordion-card-padding);
    overflow: hidden
}

.components-canonical-accordion-card-header {
    gap: var(--library-component-accordion-card-header-gap);
    padding-bottom: var(--library-component-accordion-card-padding);
    display: grid
}

.components-canonical-accordion-card-header h2 {
    color: var(--library-component-accordion-card-title-color);
    font-family: var(--library-component-accordion-card-title-font-family);
    font-size: var(--library-component-accordion-card-title-font-size);
    font-weight: var(--library-component-accordion-card-title-font-weight);
    letter-spacing: var(--library-component-accordion-card-title-letter-spacing);
    line-height: var(--library-component-accordion-card-title-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-accordion-card-header p {
    color: var(--library-component-accordion-card-description-color);
    font-family: var(--library-component-accordion-card-description-font-family);
    font-size: var(--library-component-accordion-card-description-font-size);
    font-weight: var(--library-component-accordion-card-description-font-weight);
    letter-spacing: var(--library-component-accordion-card-description-letter-spacing);
    line-height: var(--library-component-accordion-card-description-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-accordion {
    gap: var(--library-component-accordion-gap);
    width: 100%;
    display: grid
}

.components-canonical-accordion-shell[data-accordion-variant=basic] .components-canonical-accordion {
    border-radius: var(--library-component-accordion-radius);
    overflow: hidden
}

.components-canonical-accordion-shell[data-accordion-variant=withBorders] .components-canonical-accordion {
    gap: var(--library-component-accordion-item-gap)
}

.components-canonical-accordion-item {
    background: var(--library-component-accordion-content-background);
    box-sizing: border-box;
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.components-canonical-accordion-shell[data-accordion-variant=withBorders] .components-canonical-accordion-item {
    border: var(--library-component-accordion-border-width) solid var(--library-component-accordion-border);
    border-radius: var(--library-component-accordion-radius)
}

.components-canonical-accordion-trigger {
    background: var(--library-component-accordion-header-background);
    border: var(--alpy-ui-border-width-0);
    box-sizing: border-box;
    color: var(--library-component-accordion-header-text);
    cursor: pointer;
    font-family: var(--library-component-accordion-header-font-family);
    font-size: var(--library-component-accordion-header-font-size);
    font-weight: var(--library-component-accordion-header-font-weight);
    align-items: center;
    gap: var(--library-component-accordion-gap);
    letter-spacing: var(--library-component-accordion-header-letter-spacing);
    line-height: var(--library-component-accordion-header-line-height);
    min-height: var(--library-component-accordion-header-height);
    padding: var(--library-component-accordion-header-padding-y) 0;
    text-align: left;
    width: 100%;
    display: flex
}

.components-canonical-accordion-shell[data-accordion-variant=basic] .components-canonical-accordion-trigger,.components-canonical-accordion-shell[data-accordion-variant=withBorders] .components-canonical-accordion-trigger {
    padding-left: var(--library-component-accordion-header-padding-x);
    padding-right: var(--library-component-accordion-header-padding-x)
}

.components-canonical-accordion-trigger:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--library-component-accordion-focus-ring);
    outline-offset: calc(-1 * var(--alpy-ui-border-width-2))
}

.components-canonical-accordion-trigger:disabled {
    cursor: default
}

.components-canonical-accordion-trigger>span:not(.components-canonical-accordion-icon) {
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    flex: auto
}

.components-canonical-accordion-icon {
    color: var(--library-component-accordion-icon);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-canonical-accordion-icon .components-canonical-icon-svg {
    height: var(--library-component-accordion-icon-size);
    width: var(--library-component-accordion-icon-size)
}

.components-canonical-accordion-panel {
    background: var(--library-component-accordion-content-background);
    color: var(--library-component-accordion-content-text);
    padding: var(--alpy-ui-space-0) 0 var(--library-component-accordion-content-padding-bottom)
}

.components-canonical-accordion-shell[data-accordion-variant=basic] .components-canonical-accordion-panel,.components-canonical-accordion-shell[data-accordion-variant=withBorders] .components-canonical-accordion-panel {
    padding-left: var(--library-component-accordion-content-padding-x);
    padding-right: var(--library-component-accordion-content-padding-x)
}

.components-canonical-accordion-panel p {
    font-family: var(--library-component-accordion-content-font-family);
    font-size: var(--library-component-accordion-content-font-size);
    font-weight: var(--library-component-accordion-content-font-weight);
    letter-spacing: var(--library-component-accordion-content-letter-spacing);
    line-height: var(--library-component-accordion-content-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-accordion-shell[data-accordion-variant=basic] .components-canonical-accordion-item:not(:last-child),.components-canonical-accordion-shell[data-accordion-variant=inCard] .components-canonical-accordion-item:not(:last-child) {
    border-bottom: var(--library-component-accordion-divider-width) solid var(--library-component-accordion-divider)
}

.components-canonical-card {
    background: var(--library-component-card-background);
    border: var(--library-component-card-border-width) solid var(--library-component-card-border);
    border-radius: var(--library-component-card-border-radius);
    box-shadow: none;
    color: var(--library-component-card-description);
    max-width: 100%;
    width: min(100%, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-40)));
    display: grid;
    overflow: hidden
}

.components-card-media-region {
    border-radius: var(--library-component-card-image-region-border-radius);
    display: block;
    overflow: hidden
}

.components-canonical-image-frame {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    cursor: pointer;
    max-width: min(100%, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-40)));
    padding: var(--alpy-ui-space-0);
    width: 100%;
    display: block
}

.components-canonical-image-frame:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-4)
}

.components-canonical-image {
    aspect-ratio: var(--library-component-image-aspect-ratio);
    background-color: var(--library-component-image-placeholder);
    background-image: var(--components-canonical-image-thumb);
    border-radius: var(--library-component-image-border-radius);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
    overflow: hidden
}

.components-card-body {
    gap: var(--library-component-card-content-gap);
    padding: var(--library-component-card-content-padding);
    display: grid
}

.components-card-header {
    gap: var(--library-component-card-header-gap);
    display: grid
}

.components-card-heading {
    align-items: center;
    gap: var(--library-component-card-title-row-gap);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.components-card-content {
    gap: var(--library-component-card-body-gap);
    display: grid
}

.components-card-eyebrow {
    color: var(--library-component-card-description);
    font-family: var(--library-component-card-caption-font-family);
    font-size: var(--library-component-card-caption-font-size);
    font-weight: var(--library-component-card-caption-font-weight);
    letter-spacing: var(--library-component-card-caption-letter-spacing);
    line-height: var(--library-component-card-caption-line-height)
}

.components-card-icon {
    color: var(--library-component-card-header-icon);
    display: inline-flex
}

.components-card-icon svg {
    height: var(--library-component-card-icon-size);
    width: var(--library-component-card-icon-size)
}

.components-canonical-card h2 {
    color: var(--library-component-card-title);
    font-family: var(--library-component-card-title-font-family);
    font-size: var(--library-component-card-title-font-size);
    font-weight: var(--library-component-card-title-font-weight);
    letter-spacing: var(--library-component-card-title-letter-spacing);
    line-height: var(--library-component-card-title-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-canonical-card p {
    color: var(--library-component-card-description);
    font-family: var(--library-component-card-body-font-family);
    font-size: var(--library-component-card-body-font-size);
    font-weight: var(--library-component-card-body-font-weight);
    letter-spacing: var(--library-component-card-body-letter-spacing);
    line-height: var(--library-component-card-body-line-height);
    margin: var(--alpy-ui-space-0)
}

.components-card-footer {
    gap: var(--library-component-card-footer-gap);
    flex-wrap: wrap;
    display: flex
}

.components-card-cta-button {
    flex: none
}

.components-unresolved {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-token-table,.components-audit,.components-documentation {
    align-content: start;
    gap: var(--alpy-ui-space-4);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-20);
    justify-items: stretch;
    display: grid
}

.components-token-table.is-token-list {
    gap: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-0);
    width: 100%
}

.components-token-row,.components-audit-row,.components-documentation>div {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small)
}

.components-token-table.is-token-list .components-token-row {
    background: var(--alpy-ui-color-system-transparent);
    border-color: var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-none);
    border-style: solid;
    border-width: var(--alpy-ui-border-width-0) var(--alpy-ui-border-width-0) var(--alpy-ui-border-width-1);
    grid-template-columns: var(--alpy-ui-size-48) minmax(var(--alpy-ui-size-0), 1fr);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-24);
    justify-items: start
}

.components-token-row-accordion {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-token-row-accordion.is-expanded .components-token-row {
    border-bottom-color: var(--alpy-ui-color-system-transparent)
}

.components-token-table.is-token-list .token-swatch {
    height: var(--alpy-ui-size-48);
    width: var(--alpy-ui-size-48)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-row {
    border-width: var(--alpy-ui-border-width-0);
    gap: var(--alpy-ui-space-12);
    grid-template-columns: var(--alpy-ui-size-40) minmax(var(--alpy-ui-size-0), 1fr);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-16)
}

.components-token-table.is-token-list.is-demo-token-list .token-swatch,.components-token-table.is-token-list.is-demo-token-list .token-swatch-surface {
    height: var(--alpy-ui-size-40);
    width: var(--alpy-ui-size-40)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-row-body {
    align-content: center;
    gap: var(--alpy-ui-space-4)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-row strong,.components-token-table.is-token-list.is-demo-token-list .components-token-row-detail>span {
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere
}

.components-token-group-divider {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24) var(--alpy-ui-space-4);
    display: flex
}

.components-token-group-divider:after {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    content: "";
    flex: auto
}

.components-token-category {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    min-width: var(--alpy-ui-size-0)
}

.components-token-category-summary {
    color: var(--alpy-ui-color-text-heading);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-4);
    grid-template-columns: var(--alpy-ui-size-16) minmax(var(--alpy-ui-size-0), 1fr) minmax(var(--alpy-ui-size-24), max-content);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    list-style: none;
    display: grid
}

.components-token-category-summary::-webkit-details-marker {
    display: none
}

.components-token-category-label {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    min-width: var(--alpy-ui-size-0)
}

.components-token-category-icon {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    color: var(--alpy-ui-color-icon-subtle);
    height: var(--alpy-ui-icon-size-16);
    width: var(--alpy-ui-icon-size-16);
    justify-content: center;
    align-items: center;
    transition: transform .12s;
    display: inline-flex;
    transform: rotate(-90deg)
}

.components-token-category[open]>.components-token-category-summary .components-token-category-icon {
    transform: rotate(0)
}

.components-token-category-count {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: var(--alpy-ui-size-24);
    padding: var(--alpy-ui-space-2) var(--alpy-ui-space-8);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-token-category-body {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-token-category[data-depth="1"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-40)
}

.components-token-category[data-depth="2"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-56)
}

.components-token-category[data-depth="3"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-72)
}

.components-token-category[data-depth="1"] .components-token-row {
    padding-left: var(--alpy-ui-space-40)
}

.components-token-category[data-depth="2"] .components-token-row {
    padding-left: var(--alpy-ui-space-56)
}

.components-token-category[data-depth="3"] .components-token-row {
    padding-left: var(--alpy-ui-space-72)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category-summary {
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-16)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category-label {
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="1"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-24)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="2"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-32)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="3"] .components-token-category-summary {
    padding-left: var(--alpy-ui-space-40)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="1"] .components-token-row {
    padding-left: var(--alpy-ui-space-32)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="2"] .components-token-row {
    padding-left: var(--alpy-ui-space-40)
}

.components-token-table.is-token-list.is-demo-token-list .components-token-category[data-depth="3"] .components-token-row {
    padding-left: var(--alpy-ui-space-48)
}

.components-token-table.is-token-list .components-token-row strong {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

.components-token-table.is-token-list .components-token-row-detail>span {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-token-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    grid-template-columns: var(--alpy-ui-size-32) minmax(var(--alpy-ui-size-0), 1fr) minmax(calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-32)), max-content) minmax(var(--alpy-ui-size-96), max-content);
    padding: var(--alpy-ui-space-12);
    display: grid;
    position: relative
}

.components-token-row.is-clickable {
    cursor: pointer
}

.components-token-row>div {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-token-row-title {
    font-size: var(--alpy-ui-font-body-fontSize);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: inline-flex
}

.components-token-row-detail {
    align-items: center;
    gap: var(--alpy-ui-space-56);
    flex-wrap: wrap;
    display: flex
}

.components-token-table.is-token-list.is-demo-token-list .components-token-row-detail {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0)
}

.components-token-inline-actions {
    align-items: center;
    gap: var(--alpy-ui-space-4);
    display: inline-flex
}

.components-token-row-title .product-reset-button-anchor {
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-token-icon-action {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-system-black);
    cursor: pointer;
    height: var(--alpy-ui-size-24);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.components-token-reset-action.product-reset-button.is-icon {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-size-24)
}

.components-token-icon-action:hover,.components-token-icon-action:focus-visible,.components-token-icon-action.is-active {
    color: var(--alpy-ui-color-system-black)
}

.components-token-icon-action:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-2)
}

.components-token-icon-action [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    transform: translate(-50%, var(--alpy-ui-space-4));
    z-index: 2;
    width: max-content;
    left: 50%
}

.components-token-icon-action:hover [role=tooltip],.components-token-icon-action:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.components-style-override-panel {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    gap: var(--alpy-ui-space-16);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24) var(--alpy-ui-space-20);
    display: grid
}

.components-style-override-tabs {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    align-items: stretch;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--alpy-ui-size-32) minmax(var(--alpy-ui-size-0), 1fr) var(--alpy-ui-size-32);
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.components-style-override-tab-arrow {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-icon-subtle);
    cursor: pointer;
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-style-override-tab-arrow.is-previous .product-ui-icon {
    transform: rotate(90deg)
}

.components-style-override-tab-arrow.is-next .product-ui-icon {
    transform: rotate(-90deg)
}

.components-style-override-tab-arrow:hover,.components-style-override-tab-arrow:focus-visible {
    color: var(--alpy-ui-color-icon-default)
}

.components-style-override-tab-arrow:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: calc(var(--alpy-ui-space-2) * -1)
}

.components-style-override-tab-list {
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto
}

.components-style-override-tab-list::-webkit-scrollbar {
    display: none
}

.components-style-override-tab {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-8);
    white-space: nowrap;
    flex: none
}

.components-style-override-tab:hover,.components-style-override-tab:focus-visible {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-style-override-tab.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-16)
}

.components-style-override-info,.components-style-override-swatch-section {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-style-override-info p {
    color: var(--alpy-ui-color-text-body);
    gap: var(--alpy-ui-space-4);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-style-override-info strong,.components-style-override-swatch-section>strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-style-override-info span,.components-style-override-info code {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere
}

.components-style-override-swatch-list {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    scrollbar-width: none;
    flex-wrap: nowrap;
    display: flex;
    overflow-x: auto
}

.components-style-override-swatch-list::-webkit-scrollbar {
    display: none
}

.components-style-override-swatch {
    appearance: none;
    background: var(--components-style-override-swatch);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    cursor: pointer;
    height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-32);
    flex: none;
    display: inline-flex
}

.components-style-override-swatch.is-selected {
    border-color: var(--alpy-ui-color-border-interaction-focused)
}

.components-style-override-swatch:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.components-token-row-detail .components-token-row-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    flex-flow: row;
    min-width: max-content;
    transition: opacity .12s;
    display: inline-flex
}

.components-token-table.is-token-list.is-demo-token-list .components-token-row-detail .components-token-row-actions {
    right: var(--alpy-ui-space-12);
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.components-token-row:hover .components-token-row-actions,.components-token-row:focus-within .components-token-row-actions {
    opacity: 1;
    pointer-events: auto
}

.components-token-row-accordion.is-expanded .components-token-row-actions {
    display: none
}

.components-token-chip {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-brand-color-one-strong-one);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-brand-color-one-accent-strong);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    white-space: nowrap;
    display: inline-flex;
    position: relative
}

.components-token-chip .product-ui-icon {
    color: currentColor;
    height: var(--alpy-ui-size-16);
    width: var(--alpy-ui-size-16)
}

.components-token-chip.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-color: var(--alpy-ui-color-border-interaction-focused);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-token-chip [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    transform: translate(-50%, var(--alpy-ui-space-4));
    z-index: 2;
    left: 50%
}

.components-preview-panel.is-token-panel .components-token-chip [role=tooltip] {
    box-sizing: border-box;
    max-width: min(calc(var(--components-token-panel-width) - var(--alpy-ui-space-32)), calc(100vw - var(--alpy-ui-space-32)));
    overflow-wrap: anywhere;
    left: auto;
    right: var(--alpy-ui-space-0);
    text-align: left;
    transform: translateY(var(--alpy-ui-space-4));
    white-space: normal;
    width: max-content
}

.components-token-chip:hover [role=tooltip],.components-token-chip:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.components-preview-panel.is-token-panel .components-token-chip:hover [role=tooltip],.components-preview-panel.is-token-panel .components-token-chip:focus-visible [role=tooltip] {
    transform: translateY(var(--alpy-ui-size-0))
}

.components-color-binding-panel,.components-number-binding-panel,.components-type-binding-panel {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-none);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    gap: var(--alpy-ui-space-12);
    margin: var(--alpy-ui-space-0) var(--alpy-ui-space-24) var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-0);
    display: grid
}

.components-color-binding-grid {
    gap: var(--alpy-ui-space-8);
    grid-template-columns: repeat(auto-fill, var(--alpy-ui-size-40));
    max-height: calc(var(--alpy-ui-size-96) * 4);
    display: grid;
    overflow: auto
}

.components-color-binding-tabs,.components-type-binding-tabs {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    gap: var(--alpy-ui-space-0);
    grid-auto-columns: minmax(var(--alpy-ui-size-96), 1fr);
    grid-auto-flow: column;
    display: grid;
    overflow: hidden
}

.components-color-binding-tabs.is-child,.components-type-binding-tabs.is-child {
    border-color: var(--alpy-ui-color-border-neutral-subtle-two)
}

.components-color-binding-tab,.components-type-binding-tab {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: clamp(14px, var(--alpy-ui-font-body-small-fontSize), 18px);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-height: var(--alpy-ui-size-32);
    padding: var(--alpy-ui-space-6) var(--alpy-ui-space-8)
}

.components-color-binding-tab:hover,.components-color-binding-tab:focus-visible,.components-color-binding-tab.is-active,.components-type-binding-tab:hover,.components-type-binding-tab:focus-visible,.components-type-binding-tab.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.components-type-binding-list {
    gap: var(--alpy-ui-space-0);
    display: grid
}

.components-type-binding-row {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-24);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) minmax(calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128)), max-content);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-0);
    display: grid
}

.components-type-binding-row:last-child {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.components-type-binding-copy {
    gap: var(--alpy-ui-space-4);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-type-binding-copy strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: clamp(14px, var(--alpy-ui-font-heading-small-fontSize), 18px);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight)
}

.components-type-binding-copy span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.components-type-binding-controls {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-128), 1fr));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-type-binding-select {
    min-width: var(--alpy-ui-size-0)
}

.components-color-binding-info,.components-color-binding-swatch-section {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-color-binding-info p {
    color: var(--alpy-ui-color-text-body);
    align-items: baseline;
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-space-0);
    display: flex
}

.components-color-binding-info.is-resolved {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    display: flex
}

.components-color-binding-info.is-resolved p {
    min-width: var(--alpy-ui-size-0)
}

.components-color-binding-info.is-token {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    display: flex
}

.components-color-binding-info.is-token p {
    min-width: var(--alpy-ui-size-0)
}

.components-color-binding-info strong,.components-color-binding-swatch-section>strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-color-binding-info span,.components-color-binding-info code {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-color-binding-swatch {
    background: var(--components-color-binding-swatch);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    cursor: pointer;
    height: var(--alpy-ui-size-40);
    min-width: var(--alpy-ui-size-40);
    width: var(--alpy-ui-size-40)
}

.components-color-binding-swatch:hover,.components-color-binding-swatch:focus-visible,.components-color-binding-swatch.is-selected {
    border-color: var(--alpy-ui-color-border-interaction-focused)
}

.components-color-binding-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    padding-top: var(--alpy-ui-space-12);
    justify-content: flex-start;
    display: flex
}

.components-token-row code,.components-audit-row span,.components-audit-row p,.components-documentation span,.components-documentation strong {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-token-row-detail>span,.components-audit-row span,.components-documentation span {
    color: var(--alpy-ui-color-text-body-subtle)
}

.components-token-table.is-token-list .components-token-row .components-token-chip .components-token-chip-label {
    color: inherit;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-token-row code,.components-token-row strong,.components-audit-row p,.components-documentation strong {
    color: var(--alpy-ui-color-text-heading)
}

.components-audit {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.components-audit-heading {
    background: linear-gradient(135deg, var(--alpy-ui-color-shades-neutral-subtle-one), var(--alpy-ui-color-shades-neutral-subtle-one));
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    min-height: var(--alpy-ui-size-84);
    padding: var(--alpy-ui-space-16);
    display: flex
}

.components-audit-heading-icon {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-interaction);
    flex: 0 0 var(--alpy-ui-size-48);
    height: var(--alpy-ui-size-48);
    width: var(--alpy-ui-size-48);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-audit-heading-icon svg path {
    fill: var(--alpy-ui-color-icon-interaction)
}

.components-audit-heading-summary {
    gap: var(--alpy-ui-space-4);
    max-width: 360px;
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.components-audit-heading-summary strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.components-audit-heading-summary span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.components-audit-failure-summary {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0);
    flex-wrap: wrap;
    margin-left: auto;
    display: flex
}

.components-audit-failure-total {
    color: var(--alpy-ui-color-text-body)
}

.components-audit-failure-total-value {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-audit-failure-total-label {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.components-audit-mode-summary {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    display: flex
}

.components-audit-mode-chip {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    align-items: baseline;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-12);
    display: inline-flex
}

.components-audit-mode-chip strong {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.components-audit-mode-chip.is-fail {
    color: var(--alpy-ui-color-text-functional-danger)
}

.components-audit-list {
    column-gap: var(--alpy-ui-space-8);
    grid-template-columns: repeat(8, minmax(var(--alpy-ui-size-0), 1fr));
    row-gap: var(--alpy-ui-space-0);
    min-width: 760px;
    overflow-x: auto
}

.components-audit-row {
    background: var(--alpy-ui-color-system-transparent);
    border-color: var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-none);
    border-style: solid;
    border-width: var(--alpy-ui-border-width-0) var(--alpy-ui-border-width-0) var(--alpy-ui-border-width-1)
}

.components-audit-table-head,.components-audit-row,.components-audit-row-summary {
    grid-column: 1/-1;
    grid-template-columns: subgrid;
    align-items: center;
    display: grid
}

.components-audit-table-head {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-12)
}

.components-audit-row {
    color: var(--alpy-ui-color-text-body);
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: left
}

.components-audit-row.is-empty,.components-audit-row-summary {
    padding: var(--alpy-ui-space-12)
}

.components-audit-row-summary {
    cursor: pointer;
    list-style: none
}

.components-audit-row-summary::-webkit-details-marker {
    display: none
}

.components-audit-row-summary::marker {
    content: ""
}

.components-audit-row-summary:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: calc(-1 * var(--alpy-ui-border-width-2))
}

.components-audit-cell,.components-audit-color-ref,.components-audit-ratio,.components-audit-status {
    min-width: var(--alpy-ui-size-0)
}

.components-audit-cell,.components-audit-ratio {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.components-audit-cell.is-primary {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    display: inline-flex
}

.components-audit-row-chevron {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    color: var(--alpy-ui-color-text-body-subtle);
    justify-content: center;
    align-items: center;
    transition: transform .15s;
    display: inline-flex;
    transform: rotate(-90deg)
}

.components-audit-row[open] .components-audit-row-chevron {
    transform: rotate(0)
}

.components-audit-cell.is-mode {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    display: inline-flex
}

.components-audit-cell.is-primary strong {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-audit-row>.components-audit-cell:not(.is-primary),.components-audit-row-summary>.components-audit-cell:not(.is-primary) {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.components-audit-color-ref {
    cursor: help;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    display: inline-flex
}

.components-audit-color-ref:focus-visible {
    border-radius: var(--alpy-ui-radius-small);
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-interaction-focused);
    outline-offset: var(--alpy-ui-space-2)
}

.components-audit-color-ref:hover .product-tooltip.is-floating,.components-audit-color-ref:focus-visible .product-tooltip.is-floating {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.components-audit-color-ref .product-tooltip.is-hover-card {
    min-width: var(--alpy-ui-size-0);
    width: max-content
}

.components-audit-swatch {
    background: var(--components-audit-swatch,var(--alpy-ui-color-system-transparent));
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    flex: 0 0 var(--alpy-ui-size-20);
    height: var(--alpy-ui-size-20);
    width: var(--alpy-ui-size-20)
}

.components-audit-ratio {
    color: var(--alpy-ui-color-text-functional-danger);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

@media (width<=760px) {
    .components-audit-heading {
        flex-direction: column;
        align-items: flex-start
    }

    .components-audit-failure-summary {
        margin-left: var(--alpy-ui-space-0)
    }

    .components-audit-list {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        min-width: var(--alpy-ui-size-0);
        justify-content: stretch;
        overflow-x: visible
    }

    .components-audit-table-head {
        display: none
    }

    .components-audit-row,.components-audit-row-summary {
        grid-column: auto;
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        min-width: var(--alpy-ui-size-0)
    }

    .components-audit-row {
        gap: var(--alpy-ui-space-4)
    }

    .components-audit-row>.components-audit-cell,.components-audit-row>.components-audit-ratio,.components-audit-row>.components-audit-status,.components-audit-row>.components-audit-color-ref,.components-audit-row-summary>.components-audit-cell,.components-audit-row-summary>.components-audit-ratio,.components-audit-row-summary>.components-audit-status,.components-audit-row-summary>.components-audit-color-ref {
        align-items: center;
        gap: var(--alpy-ui-space-8);
        text-overflow: clip;
        white-space: normal;
        display: flex;
        overflow: visible
    }

    .components-audit-row>.components-audit-cell:before,.components-audit-row>.components-audit-ratio:before,.components-audit-row>.components-audit-status:before,.components-audit-row>.components-audit-color-ref:before,.components-audit-row-summary>.components-audit-cell:before,.components-audit-row-summary>.components-audit-ratio:before,.components-audit-row-summary>.components-audit-status:before,.components-audit-row-summary>.components-audit-color-ref:before {
        color: var(--alpy-ui-color-text-body-subtle);
        content: attr(data-label);
        font-family: var(--alpy-ui-font-body-medium-fontFamily);
        font-size: var(--alpy-ui-font-body-medium-fontSize);
        font-weight: var(--alpy-ui-font-weight-medium);
        letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
        line-height: var(--alpy-ui-font-body-medium-lineHeight);
        flex: none;
        margin-right: auto
    }
}

.components-audit-row .components-audit-status {
    color: var(--alpy-ui-color-text-functional-danger);
    font-weight: var(--alpy-ui-font-weight-semiBold)
}

.components-audit-row.is-pass .components-audit-ratio,.components-audit-row.is-pass .components-audit-status {
    color: var(--alpy-ui-color-text-functional-success)
}

.components-audit-webaim {
    border-color: var(--alpy-ui-color-border-neutral-subtle-one);
    border-style: solid;
    border-width: var(--alpy-ui-border-width-1) var(--alpy-ui-border-width-0);
    gap: var(--alpy-ui-space-24);
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr));
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-12) var(--alpy-ui-space-24);
    display: grid
}

.components-audit-row[open] {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.components-audit-row:not([open])+.components-audit-webaim {
    display: none
}

.components-audit-webaim-section {
    align-content: start;
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.components-audit-webaim-section>strong {
    color: var(--alpy-ui-color-text-functional-danger);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-text-functional-danger);
    padding-bottom: var(--alpy-ui-space-8)
}

.components-audit-webaim-results {
    align-items: center;
    column-gap: var(--alpy-ui-space-16);
    row-gap: var(--alpy-ui-space-8);
    grid-template-columns: max-content max-content;
    display: grid
}

.components-audit-webaim-results span {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.components-audit-webaim-result {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.components-audit-webaim-result.is-pass {
    background: var(--alpy-ui-color-text-functional-success);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-onColor);
    padding: var(--alpy-ui-space-2) var(--alpy-ui-space-12)
}

.components-audit-webaim-result.is-fail,.components-audit-webaim-result.is-pending {
    color: var(--alpy-ui-color-text-functional-danger)
}

.components-audit-webaim-sample {
    background: var(--components-audit-webaim-background,var(--alpy-ui-color-surface-canvas));
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    color: var(--components-audit-webaim-text,var(--alpy-ui-color-text-body));
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden
}

.components-audit-webaim-sample.is-large {
    font-size: 18.667px;
    font-weight: var(--alpy-ui-font-weight-semiBold);
    line-height: 28px
}

@media (width<=900px) {
    .components-audit-webaim {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .components-audit-webaim-results {
        grid-template-columns: max-content max-content
    }
}

.components-documentation>div {
    gap: var(--alpy-ui-space-4);
    padding: var(--alpy-ui-space-12);
    display: grid
}

@media (width<=960px) {
    .components-tabs,.components-demo,.components-demo[data-preview-panel=open][data-preview-panel-kind] {
        grid-template-columns: 1fr
    }

    .components-demo {
        grid-template-rows: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .components-demo[data-preview-panel=open][data-preview-panel-kind] {
        grid-template-rows: auto auto;
        grid-template-areas: "canvas""panel"
    }

    .components-demo[data-preview-panel=open][data-preview-panel-kind] .components-preview-panel {
        grid-area: panel
    }

    .components-demo[data-preview-panel=open][data-preview-panel-kind] .components-demo-canvas {
        min-height: var(--alpy-ui-size-256);
        grid-area: canvas
    }

    .components-workspace[data-active-tab=demo] {
        height: auto;
        overflow: visible
    }

    .components-content.is-component-workspace-content:has(>.components-workspace[data-active-tab=demo]) {
        grid-template-rows: auto auto;
        height: auto
    }

    .components-page:has(.components-workspace[data-active-tab=demo]) {
        grid-template-rows: auto auto;
        height: auto
    }

    .components-tabs {
        grid-auto-columns: auto;
        grid-auto-flow: row
    }

    .components-preview-panel {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        border-right: var(--alpy-ui-border-width-0);
        overflow: visible
    }

    .components-preview-panel.is-token-panel {
        width: 100%;
        height: auto
    }

    .components-preview-panel-body {
        overflow: visible
    }

    .components-icon-grid {
        grid-template-columns: repeat(8, minmax(var(--alpy-ui-size-0), 1fr))
    }

    .components-token-row {
        grid-template-columns: var(--alpy-ui-size-32) minmax(var(--alpy-ui-size-0), 1fr)
    }

    .components-type-binding-row,.components-type-binding-controls {
        grid-template-columns: 1fr
    }
}

@media (width<=640px) {
    .components-tabs {
        grid-template-columns: 1fr
    }

    .components-demo-canvas {
        padding: var(--alpy-ui-space-20)
    }

    .components-demo[data-preview-panel=open] {
        grid-template-rows: minmax(var(--alpy-ui-size-96), .45fr) minmax(var(--alpy-ui-size-128), 1fr)
    }
}

.components-workspace:has(>.cdoc) {
    overflow: visible
}

.cdoc {
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    gap: var(--alpy-ui-space-16);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-40) var(--alpy-ui-space-24);
    grid-template-columns: minmax(0,192px) minmax(0,1fr);
    width: 100%;
    display: grid
}

.cdoc h2,.cdoc h3,.cdoc h4,.cdoc h5 {
    color: var(--alpy-ui-color-text-heading);
    margin: 0
}

.cdoc p {
    margin: 0
}

.cdoc code {
    font-family: ui-monospace,SF Mono,Menlo,Consolas,monospace
}

.cdoc-empty {
    align-content: start;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: minmax(0,1fr);
    display: grid
}

.cdoc-sidebar {
    align-self: start;
    gap: var(--alpy-ui-space-32);
    max-height: calc(100vh - var(--alpy-ui-space-48));
    min-width: var(--alpy-ui-size-0);
    top: var(--alpy-ui-space-24);
    display: grid;
    position: sticky;
    overflow-y: auto
}

.cdoc-sidebar-heading {
    gap: var(--alpy-ui-space-4);
    padding: 0 var(--alpy-ui-space-16);
    display: grid
}

.cdoc-sidebar-heading h2 {
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.cdoc-sidebar-heading span {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.cdoc-sidebar-nav ul {
    gap: var(--alpy-ui-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-sidebar-link {
    border-radius: var(--alpy-ui-radius-xlarge);
    color: var(--alpy-ui-color-text-body-subtle);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    text-decoration: none;
    transition: background-color .12s ease-out,color .12s ease-out;
    display: flex
}

.cdoc-sidebar-link:hover,.cdoc-sidebar-link:focus-visible {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    color: var(--alpy-ui-color-text-heading);
    outline: none
}

.cdoc-sidebar-link-label {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    font-weight: 500;
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.cdoc-main {
    gap: var(--alpy-ui-space-64);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.cdoc-stats {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(auto-fit,minmax(136px,1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-stats-card {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-xlarge);
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-20);
    display: grid
}

.cdoc-stats-value {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    font-weight: 700;
    line-height: 1
}

.cdoc-stats-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    letter-spacing: .04em;
    font-weight: 500;
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.cdoc-section {
    gap: var(--alpy-ui-space-20);
    display: grid
}

.cdoc-section-header {
    align-items: center;
    display: flex
}

.cdoc-section-title {
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    font-weight: 700;
    line-height: 1.2
}

.cdoc-section-description {
    color: var(--alpy-ui-color-text-body-subtle);
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    max-width: 72ch
}

.cdoc-section-body {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.cdoc-table-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-xlarge);
    overflow: hidden
}

.cdoc-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

.cdoc-table thead th {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-20);
    text-align: left;
    font-weight: 500
}

.cdoc-table thead th:first-child {
    width: 22%
}

.cdoc-table thead th:nth-child(2) {
    width: 32%
}

.cdoc-table thead th:nth-child(3) {
    width: 18%
}

.cdoc-table thead th:nth-child(4) {
    width: 28%
}

.cdoc-table tbody td,.cdoc-table tbody th {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    font-weight: inherit;
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-20);
    text-align: left;
    vertical-align: middle
}

.cdoc-table tbody tr:last-child td,.cdoc-table tbody tr:last-child th {
    border-bottom: 0
}

.cdoc-table-prop code {
    color: var(--alpy-ui-color-text-heading);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: 600
}

.cdoc-table-type {
    color: var(--alpy-ui-color-text-body-subtle)
}

.cdoc-token-list {
    gap: var(--alpy-ui-space-4);
    flex-wrap: wrap;
    display: inline-flex
}

.cdoc .components-canonical-badge[data-badge-variant=brandThree] {
    background: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    border-color: var(--alpy-ui-color-border-brand-color-three-strong-two);
    border-radius: var(--alpy-ui-radius-full);
    border-width: var(--alpy-ui-border-width-1);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8)
}

.cdoc-default-value {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: ui-monospace,SF Mono,Menlo,Consolas,monospace;
    font-size: var(--alpy-ui-font-body-small-fontSize)
}

.cdoc-table-empty {
    color: var(--alpy-ui-color-text-body-muted)
}

.cdoc-table-description {
    color: var(--alpy-ui-color-text-body-subtle)
}

.cdoc-feature-list {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-feature-row {
    gap: var(--alpy-ui-space-8);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-24);
    grid-template-columns: minmax(0,1fr);
    display: grid
}

.cdoc-feature-row+.cdoc-feature-row {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one)
}

.cdoc-feature-title,.cdoc-behavior-row h4 {
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    font-weight: 700;
    line-height: 1.3
}

.cdoc-feature-title {
    max-width: 36ch
}

.cdoc-feature-description {
    color: var(--alpy-ui-color-text-body-subtle);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    max-width: 72ch;
    line-height: 1.55
}

.cdoc-example-list {
    gap: var(--alpy-ui-space-16);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-example-card {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    border-radius: var(--alpy-ui-radius-xlarge);
    gap: var(--alpy-ui-space-24);
    padding: var(--alpy-ui-space-32);
    grid-template-columns: minmax(0,280px) minmax(0,1fr);
    display: grid
}

.cdoc-example-lead {
    gap: var(--alpy-ui-space-8);
    grid-auto-rows: max-content;
    display: grid
}

.cdoc-example-icon {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-brand-color-one-accent-strong);
    height: var(--alpy-ui-space-40);
    margin-bottom: var(--alpy-ui-space-12);
    width: var(--alpy-ui-space-40);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cdoc-example-icon svg {
    height: var(--alpy-ui-space-20);
    width: var(--alpy-ui-space-20)
}

.cdoc-example-lead h4 {
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    font-weight: 700;
    line-height: 1.3
}

.cdoc-example-eyebrow {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-xsmall-fontSize);
    letter-spacing: .1em;
    font-weight: 700;
    line-height: var(--alpy-ui-font-body-xsmall-lineHeight);
    margin-top: var(--alpy-ui-space-8);
    text-transform: uppercase
}

.cdoc-example-usecase {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    line-height: 1.55
}

.cdoc-example-body {
    border-left: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    gap: var(--alpy-ui-space-16);
    padding-left: var(--alpy-ui-space-24);
    display: grid
}

.cdoc-example-description {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    line-height: 1.55
}

.cdoc-example-features {
    gap: var(--alpy-ui-space-8);
    display: grid
}

.cdoc-example-features-label {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: 700;
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.cdoc-chip-list {
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.cdoc-chip {
    background: var(--alpy-ui-color-surface-canvas);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    height: var(--alpy-ui-space-24);
    padding: 0 var(--alpy-ui-space-12);
    align-items: center;
    font-weight: 500;
    line-height: 1;
    display: inline-flex
}

.cdoc-behavior-list {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    gap: var(--alpy-ui-space-2);
    padding: var(--alpy-ui-space-2);
    margin: 0;
    list-style: none;
    display: grid
}

.cdoc-behavior-row {
    background: var(--alpy-ui-color-surface-canvas);
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-24);
    grid-template-columns: minmax(0,1fr);
    display: grid
}

.cdoc-behavior-row:first-child {
    border-radius: var(--alpy-ui-radius-medium) var(--alpy-ui-radius-medium) 0 0
}

.cdoc-behavior-row:last-child {
    border-radius: 0 0 var(--alpy-ui-radius-medium) var(--alpy-ui-radius-medium)
}

.cdoc-behavior-row:only-child {
    border-radius: var(--alpy-ui-radius-medium)
}

.cdoc-behavior-heading {
    align-items: baseline;
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.cdoc-behavior-copy {
    gap: var(--alpy-ui-space-12);
    max-width: 76ch;
    display: grid
}

.cdoc-behavior-copy p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    line-height: 1.55
}

.cdoc-practices {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(2,minmax(0,1fr));
    display: grid
}

.cdoc-practice {
    border: var(--alpy-ui-border-width-1) solid;
    border-radius: var(--alpy-ui-radius-xlarge);
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-24);
    display: grid
}

.cdoc-practice[data-kind=do] {
    background: var(--alpy-ui-color-shades-brand-color-two-subtle-one);
    border-color: var(--alpy-ui-color-shades-brand-color-two-subtle-two)
}

.cdoc-practice[data-kind=dont] {
    background: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    border-color: var(--alpy-ui-color-shades-brand-color-three-subtle-two)
}

.cdoc-practice header {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    display: flex
}

.cdoc-practice header h4 {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    font-weight: 700
}

.cdoc-practice-badge {
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-heading-onColor);
    height: var(--alpy-ui-space-24);
    width: var(--alpy-ui-space-24);
    flex: none;
    justify-content: center;
    align-items: center;
    line-height: 0;
    display: inline-flex
}

.cdoc-practice-badge .cdoc-canonical-glyph {
    height: var(--alpy-ui-space-16);
    width: var(--alpy-ui-space-16);
    display: block
}

.cdoc-practice[data-kind=do] .cdoc-practice-badge {
    background: var(--alpy-ui-color-shades-brand-color-two-subtle-three)
}

.cdoc-practice[data-kind=dont] .cdoc-practice-badge {
    background: var(--alpy-ui-color-shades-brand-color-three-subtle-three)
}

.cdoc-practice ul {
    gap: var(--alpy-ui-space-12);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-practice li {
    color: var(--alpy-ui-color-text-body);
    align-items: start;
    gap: var(--alpy-ui-space-8);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    grid-template-columns: max-content minmax(0,1fr);
    line-height: 1.55;
    display: grid
}

.cdoc-practice-marker {
    height: var(--alpy-ui-font-body-medium-lineHeight);
    width: var(--alpy-ui-space-16);
    flex: none;
    justify-content: center;
    align-items: center;
    line-height: 0;
    display: inline-flex
}

.cdoc-practice-marker .cdoc-canonical-glyph {
    height: var(--alpy-ui-space-16);
    width: var(--alpy-ui-space-16);
    display: block
}

.cdoc-practice[data-kind=do] .cdoc-practice-marker {
    color: var(--alpy-ui-color-text-brand-color-two-accent-strong)
}

.cdoc-practice[data-kind=dont] .cdoc-practice-marker {
    color: var(--alpy-ui-color-text-brand-color-three-accent-strong)
}

.cdoc-changelog {
    gap: var(--alpy-ui-space-16);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-changelog-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-xlarge);
    gap: var(--alpy-ui-space-20);
    padding: var(--alpy-ui-space-24);
    display: grid
}

.cdoc-changelog-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    align-items: flex-start;
    gap: var(--alpy-ui-space-16);
    padding-bottom: var(--alpy-ui-space-20);
    justify-content: space-between;
    display: flex
}

.cdoc-changelog-meta {
    gap: var(--alpy-ui-space-8);
    min-width: 0;
    display: grid
}

.cdoc-changelog-meta h4 {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    font-weight: 700;
    line-height: 1.3
}

.cdoc-changelog-icon {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-default);
    height: var(--alpy-ui-space-40);
    width: var(--alpy-ui-space-40);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cdoc-changelog-icon svg {
    height: var(--alpy-ui-space-20);
    width: var(--alpy-ui-space-20)
}

.cdoc-changelog-changes {
    gap: var(--alpy-ui-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
}

.cdoc-changelog-changes li {
    color: var(--alpy-ui-color-text-body-subtle);
    align-items: start;
    gap: var(--alpy-ui-space-12);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    grid-template-columns: max-content minmax(0,1fr);
    line-height: 1.55;
    display: grid
}

.cdoc-changelog-bullet {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    height: var(--alpy-ui-space-8);
    margin-top: var(--alpy-ui-space-8);
    width: var(--alpy-ui-space-8);
    display: inline-block
}

.cdoc-changelog-migration {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-large);
    gap: var(--alpy-ui-space-4);
    padding: var(--alpy-ui-space-16);
    display: grid
}

.cdoc-changelog-migration header {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    display: flex
}

.cdoc-changelog-migration-icon {
    color: var(--alpy-ui-color-icon-default);
    height: var(--alpy-ui-space-16);
    width: var(--alpy-ui-space-16);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cdoc-changelog-migration-icon svg {
    height: var(--alpy-ui-space-16);
    width: var(--alpy-ui-space-16)
}

.cdoc-changelog-migration h5 {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    font-weight: 700;
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.cdoc-changelog-migration p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    line-height: 1.55
}

.cdoc-empty-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) dashed var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-xlarge);
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-32);
    text-align: center;
    justify-items: center;
    display: grid
}

.cdoc-empty-icon {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-subtle);
    height: var(--alpy-ui-space-40);
    width: var(--alpy-ui-space-40);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.cdoc-empty-icon svg {
    height: var(--alpy-ui-space-20);
    width: var(--alpy-ui-space-20)
}

.cdoc-empty-card h3 {
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight)
}

.cdoc-empty-card p {
    color: var(--alpy-ui-color-text-body-subtle);
    max-width: 56ch
}

@media (width<=1080px) {
    .cdoc {
        gap: var(--alpy-ui-space-32);
        grid-template-columns: minmax(0,1fr)
    }

    .cdoc-sidebar {
        position: static
    }

    .cdoc-sidebar-nav ul {
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        overflow-x: auto
    }

    .cdoc-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (width<=720px) {
    .cdoc {
        padding: var(--alpy-ui-space-24) var(--alpy-ui-space-16)
    }

    .cdoc-practices {
        grid-template-columns: minmax(0,1fr)
    }

    .cdoc-feature-row,.cdoc-behavior-row {
        gap: var(--alpy-ui-space-12);
        padding: var(--alpy-ui-space-16);
        grid-template-columns: minmax(0,1fr)
    }

    .cdoc-example-card {
        grid-template-columns: minmax(0,1fr)
    }

    .cdoc-example-body {
        border-left: 0;
        border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-shades-brand-color-one-subtle-two);
        padding-left: 0;
        padding-top: var(--alpy-ui-space-16)
    }

    .cdoc-table thead {
        display: none
    }

    .cdoc-table tbody td,.cdoc-table tbody th {
        padding: var(--alpy-ui-space-4) var(--alpy-ui-space-16);
        border-bottom: 0;
        display: block
    }

    .cdoc-table tbody tr {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
        padding: var(--alpy-ui-space-12) var(--alpy-ui-space-4);
        display: block
    }

    .cdoc-table tbody tr:last-child {
        border-bottom: 0
    }
}

.token-swatch {
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    flex: none;
    display: inline-flex;
    position: relative
}

.token-swatch-surface {
    background: var(--alpy-ui-color-system-black);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    height: 100%;
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: inline-flex;
    overflow: hidden
}

.token-swatch[data-token-swatch-type=color] .token-swatch-surface {
    background: var(--token-swatch-color)
}

.token-swatch[data-token-swatch-type=typography] .token-swatch-surface {
    font-family: var(--token-swatch-font-family);
    font-size: var(--token-swatch-font-size);
    font-weight: var(--token-swatch-font-weight)
}

.token-swatch[data-token-swatch-type=fontWeight] .token-swatch-surface {
    font-weight: var(--token-swatch-font-weight)
}

.token-swatch-icon,.token-swatch-glyph {
    color: #c7d2ff;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: inline-flex
}

.token-swatch-icon svg {
    width: 100%;
    height: 100%;
    display: block
}

.token-swatch-icon [fill]:not([fill=none]) {
    fill: currentColor
}

.token-swatch-icon [stroke]:not([stroke=none]) {
    stroke: currentColor
}

.token-swatch-glyph {
    font-size: var(--token-swatch-font-size,var(--alpy-ui-size-12));
    line-height: 14px
}

.token-swatch[data-token-swatch-type=unresolved] .token-swatch-surface {
    background: var(--alpy-ui-color-surface-canvas)
}

.token-swatch[data-token-bound=true]:after {
    background-color: var(--alpy-ui-color-text-brand-color-one-accent);
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: var(--alpy-ui-size-8) var(--alpy-ui-size-8);
    border-radius: var(--alpy-ui-radius-full);
    bottom: calc(var(--alpy-ui-size-4) * -1);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-border-width-1) var(--alpy-ui-size-4) color-mix(in srgb, var(--alpy-ui-color-system-black) 30%, var(--alpy-ui-color-system-transparent));
    content: "";
    height: var(--alpy-ui-size-16);
    right: calc(var(--alpy-ui-size-4) * -1);
    width: var(--alpy-ui-size-16);
    position: absolute
}

.cta-banner {
    background: var(--lp-bg-cta,var(--alpy-ui-color-shades-neutral-subtle-one));
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-size-24);
    box-sizing: border-box;
    align-items: center;
    gap: var(--alpy-ui-space-32);
    margin: var(--alpy-ui-space-16) auto var(--alpy-ui-space-0);
    max-width: var(--lp-content-max,calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-100) + var(--alpy-ui-size-80)));
    padding: var(--alpy-ui-space-64) var(--alpy-ui-space-20);
    text-align: center;
    width: calc(100% - 2 * var(--lp-section-inset,var(--alpy-ui-space-24)));
    flex-direction: column;
    display: flex
}

.cta-banner-title {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family,"Satoshi", ui-sans-serif, system-ui, sans-serif);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.cta-banner-body {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

.cta-banner-body p {
    margin: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-space-8)
}

.cta-banner-body p:last-child {
    margin: var(--alpy-ui-size-0)
}

@media (width<=744px) {
    .cta-banner {
        padding: var(--alpy-ui-space-48) var(--alpy-ui-space-32);
        width: calc(100% - 2 * var(--alpy-ui-space-20))
    }
}

@media (width<=600px) {
    .cta-banner-title {
        font-size: var(--alpy-ui-font-heading-large-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-large-letterSpacing);
        line-height: var(--alpy-ui-font-heading-large-lineHeight)
    }

    .cta-banner {
        padding: var(--alpy-ui-space-40) var(--alpy-ui-space-24);
        width: calc(100% - 2 * var(--alpy-ui-space-20));
        margin-block-end:var(--alpy-ui-size-0)}
}

.shell-body.is-ai-ready-route {
    grid-template-columns: var(--shell-rail-width) minmax(var(--alpy-ui-size-0), 1fr)
}

.main-content.is-ai-ready-main {
    padding: var(--alpy-ui-space-0)
}

.ai-ready-panel,.ai-ready-page {
    --ai-ready-content-max: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-128) + var(--alpy-ui-size-52))
}

.ai-ready-panel *,.ai-ready-page *,.ai-ready-panel :before,.ai-ready-page :before,.ai-ready-panel :after,.ai-ready-page :after {
    box-sizing: border-box
}

.ai-ready-panel {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    grid-template-rows: var(--shell-top-bar-height) auto minmax(var(--alpy-ui-size-0), 1fr);
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-panel-scroll {
    align-content: start;
    gap: var(--alpy-ui-space-28);
    inline-size: 100%;
    max-inline-size: 100%;
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-28) var(--alpy-ui-space-24) var(--alpy-ui-space-32);
    grid-auto-rows: max-content;
    display: grid;
    overflow-y: auto
}

.ai-ready-panel-section {
    align-content: start;
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    grid-auto-rows: max-content;
    display: grid
}

.ai-ready-kicker,.ai-ready-file-list small {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.ai-ready-kicker {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: var(--alpy-ui-font-weight-medium);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-panel-readiness-helper {
    color: var(--alpy-ui-color-text-body);
    align-items: start;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    justify-content: space-between;
    display: flex
}

.ai-ready-panel-readiness-helper p {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0) var(--alpy-ui-space-0) var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0)
}

.ai-ready-panel-readiness-actions {
    min-width: var(--alpy-ui-size-0);
    flex: none
}

.ai-ready-panel-readiness-actions .product-select-field {
    min-width: calc(var(--alpy-ui-size-120) + var(--alpy-ui-size-16))
}

.ai-ready-panel-steps {
    gap: var(--alpy-ui-space-0);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-0);
    grid-auto-rows: max-content;
    list-style: none;
    display: grid
}

.ai-ready-panel-step {
    align-items: start;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: var(--alpy-ui-size-40) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    padding-bottom: var(--alpy-ui-space-20);
    display: grid;
    position: relative
}

.ai-ready-panel-step:last-child {
    padding-bottom: var(--alpy-ui-space-0)
}

.ai-ready-panel-step:not(:last-child):before {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    bottom: var(--alpy-ui-space-4);
    content: "";
    inset-inline-start: calc(var(--alpy-ui-size-20) - var(--alpy-ui-border-width-1));
    top: var(--alpy-ui-size-40);
    width: var(--alpy-ui-border-width-2);
    position: absolute
}

.ai-ready-panel-step.is-complete:not(:last-child):before {
    background: var(--alpy-ui-color-functional-success-soft)
}

.ai-ready-panel-step-marker {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body);
    height: var(--alpy-ui-size-40);
    width: var(--alpy-ui-size-40);
    z-index: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.ai-ready-panel-step.is-complete .ai-ready-panel-step-marker {
    background: var(--alpy-ui-color-functional-success);
    border-color: var(--alpy-ui-color-functional-success);
    color: var(--alpy-ui-color-text-onColor)
}

.ai-ready-panel-step.is-active .ai-ready-panel-step-marker {
    border-color: var(--alpy-ui-color-text-brand-color-one-accent);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    animation: 1.4s ease-in-out infinite ai-ready-step-pulse
}

.ai-ready-panel-step.is-active .ai-ready-panel-step-marker .product-ui-icon svg {
    animation: .8s linear infinite ai-ready-spin
}

.ai-ready-panel-step.is-warning .ai-ready-panel-step-marker {
    background: var(--alpy-ui-color-functional-danger-subtle);
    border-color: var(--alpy-ui-color-functional-danger-soft);
    color: var(--alpy-ui-color-text-functional-danger)
}

.ai-ready-panel-step.is-pending .ai-ready-panel-step-marker {
    color: var(--alpy-ui-color-text-body);
    opacity: .6
}

.ai-ready-panel-step-body {
    align-content: start;
    gap: var(--alpy-ui-space-2);
    min-width: var(--alpy-ui-size-0);
    grid-auto-rows: max-content;
    padding-block-start:var(--alpy-ui-space-2);display: grid
}

.ai-ready-panel-step-number {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    opacity: .7
}

.ai-ready-panel-step strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-panel-step.is-pending strong {
    color: var(--alpy-ui-color-text-body);
    opacity: .85
}

.ai-ready-panel-step-status,.ai-ready-panel-step-detail {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    white-space: normal
}

.ai-ready-panel-step-status {
    font-weight: var(--alpy-ui-font-weight-medium)
}

.ai-ready-panel-step.is-complete .ai-ready-panel-step-status {
    color: var(--alpy-ui-color-text-functional-success)
}

.ai-ready-panel-step.is-active .ai-ready-panel-step-status {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.ai-ready-panel-step-detail {
    color: var(--alpy-ui-color-text-body);
    font-weight: var(--alpy-ui-font-weight-regular)
}

.ai-ready-panel-step.is-warning .ai-ready-panel-step-detail {
    color: var(--alpy-ui-color-text-functional-danger)
}

.ai-ready-panel-step.is-pending .ai-ready-panel-step-detail {
    opacity: .85
}

@keyframes ai-ready-step-pulse {
    0%,to {
        box-shadow: 0 0 0 0 var(--alpy-ui-color-shades-brand-color-one-subtle-two)
    }

    50% {
        box-shadow: 0 0 0 var(--alpy-ui-space-4) var(--alpy-ui-color-shades-brand-color-one-subtle-one)
    }
}

.ai-ready-panel-check-label {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: inline-flex
}

.ai-ready-panel-validation-count {
    font-weight: var(--alpy-ui-font-weight-regular)
}

.ai-ready-panel-info {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body);
    cursor: help;
    height: var(--alpy-ui-size-20);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-20);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.ai-ready-panel-info:hover,.ai-ready-panel-info:focus-visible {
    border-color: var(--alpy-ui-color-border-interaction-focused);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.ai-ready-panel-info [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    max-width: calc(var(--alpy-ui-size-192) - var(--alpy-ui-space-12));
    min-width: calc(var(--alpy-ui-size-192) - var(--alpy-ui-space-12));
    right: var(--alpy-ui-space-0);
    text-align: left;
    transform: translateY(var(--alpy-ui-space-4));
    z-index: 3;
    top: auto
}

.ai-ready-panel-info:hover [role=tooltip],.ai-ready-panel-info:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translateY(var(--alpy-ui-size-0));
    visibility: visible
}

.ai-ready-panel-info .product-tooltip-list-item {
    column-gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--alpy-ui-size-8) minmax(var(--alpy-ui-size-0), 1fr)
}

.ai-ready-panel-check p {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    white-space: normal
}

.ai-ready-panel-check-list {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-6) var(--alpy-ui-space-0) var(--alpy-ui-space-0) var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0);
    list-style-position: outside;
    display: grid
}

.ai-ready-panel-check-list li {
    overflow-wrap: anywhere
}

.ai-ready-panel-sign-in-link {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: var(--alpy-ui-font-weight-semibold);
    text-underline-offset: var(--alpy-ui-space-2);
    text-decoration: underline
}

.ai-ready-panel-sign-in-link:focus-visible {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-2)
}

.ai-ready-panel-cta {
    justify-content: center;
    width: 100%
}

.ai-ready-panel-cta.is-complete {
    cursor: default
}

.ai-ready-panel-download-anchor {
    margin-block-start:var(--alpy-ui-space-16);display: block;
    position: relative
}

.ai-ready-panel-download-anchor [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    max-width: min(calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-80)), calc(100vw - var(--alpy-ui-space-32)));
    text-align: center;
    transform: translate(-50%, var(--alpy-ui-space-4));
    white-space: normal;
    z-index: 3;
    top: auto;
    left: 50%
}

.ai-ready-panel-download-anchor.has-tooltip:hover [role=tooltip],.ai-ready-panel-download-anchor.has-tooltip:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.ai-ready-panel-download-anchor.has-tooltip:focus-visible .ai-ready-panel-download {
    outline: var(--alpy-ui-border-width-1-5) solid currentColor;
    outline-offset: var(--alpy-ui-space-2)
}

.ai-ready-panel-download {
    width: 100%
}

.ai-ready-panel.is-running .ai-ready-panel-cta .product-ui-icon {
    animation: 1s linear infinite ai-ready-spin
}

.ai-ready-panel.is-hero {
    background: var(--alpy-ui-color-system-transparent);
    grid-template-rows: minmax(var(--alpy-ui-size-0), 1fr);
    height: auto;
    min-height: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-panel.is-hero .ai-ready-panel-scroll {
    gap: var(--alpy-ui-space-0);
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    overflow: visible
}

.ai-ready-panel.is-hero .ai-ready-panel-section {
    gap: var(--alpy-ui-space-40)
}

.ai-ready-panel.is-hero .ai-ready-panel-cta {
    margin-block-start:var(--alpy-ui-space-16)}

.ai-ready-page {
    color: var(--alpy-ui-color-text-body);
    min-height: calc(100dvh - var(--shell-top-bar-height));
    width: 100%
}

.ai-ready-page>.page-header {
    margin-inline:var(--alpy-ui-space-24);margin-top: var(--alpy-ui-space-24)
}

.ai-ready-page {
    display: flow-root
}

.ai-ready-main {
    gap: var(--alpy-ui-space-56);
    max-width: min(var(--ai-ready-content-max), 100%);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    margin-inline:auto;display: grid
}

.ai-ready-hero {
    min-width: var(--alpy-ui-size-0);
    padding-block:var(--alpy-ui-space-24) var(--alpy-ui-space-0);display: grid
}

.ai-ready-hero-card {
    background-color: var(--alpy-ui-color-surface-canvas);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--alpy-ui-color-shades-brand-color-one-subtle-one) 60%, transparent) 0%, var(--alpy-ui-color-surface-canvas) 44%);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-large);
    gap: var(--alpy-ui-space-0);
    grid-template-columns: minmax(var(--alpy-ui-size-0), .48fr) minmax(var(--alpy-ui-size-0), .52fr);
    min-width: var(--alpy-ui-size-0);
    display: grid;
    position: relative;
    overflow: hidden
}

.ai-ready-hero-copy {
    align-content: start;
    gap: var(--alpy-ui-space-24);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48);
    justify-items: start;
    padding-block-start:calc(var(--alpy-ui-space-48) + var(--alpy-ui-space-8));display: grid
}

.ai-ready-hero h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-heading-large-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-large-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: 730px
}

.ai-ready-hero h1>span {
    font-weight: var(--alpy-ui-font-weight-regular);
    display: block
}

.ai-ready-hero h1 strong {
    color: var(--alpy-ui-color-text-heading);
    font: inherit
}

.ai-ready-hero-copy>p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: 540px
}

.ai-ready-hero-generator {
    border-inline-start:var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48);
    padding-inline-start:var(--alpy-ui-space-48)}

.ai-ready-file-code {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.ai-ready-preview-section {
    gap: var(--alpy-ui-space-32);
    height: min(620px, calc(100dvh - var(--shell-top-bar-height) - var(--alpy-ui-space-64)));
    min-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192));
    min-width: var(--alpy-ui-size-0);
    grid-column: 1/-1;
    display: grid
}

.ai-ready-hero-flow {
    gap: var(--alpy-ui-space-16);
    max-width: 560px;
    min-width: var(--alpy-ui-size-0);
    margin-block-start:var(--alpy-ui-space-8);display: grid
}

.ai-ready-hero-flow>h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-hero-steps {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.ai-ready-hero-step {
    align-content: start;
    gap: var(--alpy-ui-space-4);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    display: grid
}

.ai-ready-hero-step h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-hero-step p {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-preview-section {
    gap: var(--alpy-ui-space-0)
}

.ai-ready-package-browser {
    --ai-ready-preview-background: var(--alpy-ui-color-system-black);
    --ai-ready-preview-border: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 16%, transparent);
    --ai-ready-preview-hover: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 8%, transparent);
    --ai-ready-preview-selected: color-mix(in srgb, var(--alpy-ui-color-text-brand-color-one-accent) 28%, transparent);
    --ai-ready-preview-text: var(--alpy-ui-color-text-onColor);
    --ai-ready-preview-text-muted: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 64%, transparent);
    background: var(--ai-ready-preview-background);
    border: var(--alpy-ui-border-width-1) solid var(--ai-ready-preview-border);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--ai-ready-preview-text);
    grid-template-columns: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-100)) minmax(var(--alpy-ui-size-0), 1fr);
    min-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-40));
    display: grid;
    overflow: hidden
}

.ai-ready-hero-card>.ai-ready-preview-section .ai-ready-package-browser {
    border-block-end-width:var(--alpy-ui-border-width-0);border-inline-width: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-none);
    min-height: 100%
}

.ai-ready-package-browser.is-locked .ai-ready-file-code code {
    min-width: var(--alpy-ui-size-0)
}

.ai-ready-package-browser.is-locked .ai-ready-file-code-line-content {
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.ai-ready-file-list {
    background: var(--ai-ready-preview-background);
    border-right: var(--alpy-ui-border-width-1) solid var(--ai-ready-preview-border);
    align-content: start;
    gap: var(--alpy-ui-space-0);
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-0) var(--alpy-ui-space-16);
    display: grid;
    overflow: hidden
}

.ai-ready-file-list .ai-ready-file-select {
    display: none
}

.ai-ready-file-list-items {
    gap: var(--alpy-ui-space-2);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-12) var(--alpy-ui-space-0);
    display: grid;
    overflow: visible
}

.ai-ready-file-list button {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0) solid var(--alpy-ui-color-system-transparent);
    border-radius: var(--alpy-ui-radius-medium);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-12);
    inline-size: 100%;
    padding: var(--alpy-ui-space-8);
    text-align: left;
    display: flex;
    overflow: hidden
}

.ai-ready-file-list button.is-active {
    background: var(--ai-ready-preview-selected);
    color: var(--ai-ready-preview-text);
    outline: none
}

.ai-ready-file-list button:hover:not(.is-active),.ai-ready-file-list button:focus-visible:not(.is-active) {
    background: var(--ai-ready-preview-hover);
    color: inherit;
    outline: none
}

.ai-ready-file-icon {
    color: var(--alpy-ui-color-border-neutral-subtle-three);
    flex: 0 0 var(--alpy-ui-size-32);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: flex
}

.ai-ready-file-icon .product-ui-icon {
    --product-icon-size: var(--alpy-ui-size-32)
}

.ai-ready-file-info {
    gap: var(--alpy-ui-space-2);
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.ai-ready-file-name {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.ai-ready-file-list small {
    color: var(--ai-ready-preview-text-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.ai-ready-code-preview {
    --ai-ready-code-background: var(--ai-ready-preview-background);
    --ai-ready-code-line-number: var(--alpy-ui-color-shades-neutral-subtle-three);
    --ai-ready-code-text: var(--ai-ready-preview-text);
    background: var(--ai-ready-preview-background);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-code-preview-header {
    background: var(--ai-ready-preview-background);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--ai-ready-preview-border);
    color: var(--ai-ready-preview-text);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.ai-ready-code-preview-title {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.ai-ready-code-preview-title>span {
    min-width: var(--alpy-ui-size-0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.ai-ready-code-copy-link.product-button.is-link,.ai-ready-code-copy-link.product-button.is-link:hover,.ai-ready-code-copy-link.product-button.is-link:active,.ai-ready-code-copy-link.product-button.is-link:focus-visible {
    color: var(--ai-ready-preview-text)
}

.ai-ready-code-preview-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex: none;
    display: flex
}

.ai-ready-locked-preview-warning {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    background: var(--ai-ready-preview-background);
    border-top: var(--alpy-ui-border-width-1) solid var(--ai-ready-preview-border);
    color: var(--ai-ready-preview-text-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    display: flex
}

.ai-ready-file-code {
    background: var(--ai-ready-code-background);
    color: var(--ai-ready-code-text);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: inherit;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-24) var(--alpy-ui-space-20);
    overflow: auto
}

.ai-ready-file-code code {
    min-width: max-content;
    font-family: inherit;
    display: grid
}

.ai-ready-file-code-line {
    gap: var(--alpy-ui-space-20);
    grid-template-columns: 4ch minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--alpy-ui-size-24);
    display: grid
}

.ai-ready-file-code-line-number {
    color: var(--ai-ready-code-line-number);
    text-align: right;
    -webkit-user-select: none;
    user-select: none
}

.ai-ready-file-code-line-content {
    white-space: pre
}

.ai-ready-overview-section {
    gap: var(--alpy-ui-space-24);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-overview-heading {
    gap: var(--alpy-ui-space-16);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-200));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-overview-heading h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-overview-heading p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-overview-table-wrap {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-0);
    overflow: auto hidden
}

.ai-ready-overview-table {
    background: var(--alpy-ui-color-surface-canvas);
    border-collapse: collapse;
    color: var(--alpy-ui-color-text-body);
    min-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-128));
    table-layout: fixed;
    width: 100%
}

.ai-ready-overview-table th,.ai-ready-overview-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-28);
    text-align: left;
    vertical-align: top
}

.ai-ready-overview-table thead th {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.ai-ready-overview-table tbody tr:last-child th,.ai-ready-overview-table tbody tr:last-child td {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.ai-ready-overview-table tbody th {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    width: 28%
}

.ai-ready-overview-table tbody td {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.ai-ready-overview-table thead th:nth-child(2),.ai-ready-overview-table thead th:nth-child(3),.ai-ready-overview-table tbody td {
    width: 36%
}

.ai-ready-overview-area {
    align-items: center;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: var(--alpy-ui-size-28) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-overview-icon {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ai-ready-context-choice {
    gap: var(--alpy-ui-space-28);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-context-choice-heading {
    gap: var(--alpy-ui-space-16);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-200));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-context-choice-heading h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-medium-fontFamily);
    font-size: var(--alpy-ui-font-heading-medium-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-context-choice-heading p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.ai-ready-context-choice-cards {
    gap: var(--alpy-ui-space-24);
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-context-choice-card {
    --ai-ready-context-accent: var(--alpy-ui-color-text-brand-color-one-accent);
    --ai-ready-context-accent-soft: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --ai-ready-context-chip-bg: var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    --ai-ready-context-border: var(--alpy-ui-color-border-neutral-subtle-two);
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--ai-ready-context-border);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-0);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

.ai-ready-context-choice-card.is-live {
    --ai-ready-context-accent: var(--alpy-ui-color-text-brand-color-one-accent);
    --ai-ready-context-accent-soft: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --ai-ready-context-chip-bg: var(--alpy-ui-color-shades-brand-color-one-subtle-two)
}

.ai-ready-context-choice-card.is-portable {
    --ai-ready-context-accent: var(--alpy-ui-color-text-brand-color-three-accent);
    --ai-ready-context-accent-soft: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    --ai-ready-context-chip-bg: var(--alpy-ui-color-shades-brand-color-three-subtle-two)
}

.ai-ready-context-choice-card-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ai-ready-context-accent-soft) 40%, transparent), var(--alpy-ui-color-surface-canvas));
    border-bottom: var(--alpy-ui-border-width-1) solid var(--ai-ready-context-border);
    align-items: center;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 7fr) minmax(var(--alpy-ui-size-0), 3fr);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    display: grid
}

.ai-ready-context-choice-card-copy {
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-context-choice-chip {
    background: var(--ai-ready-context-chip-bg);
    border: var(--alpy-ui-border-width-1) solid var(--ai-ready-context-border);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: 12px;
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    margin: var(--alpy-ui-space-0);
    opacity: .5;
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-12);
    text-transform: uppercase;
    white-space: nowrap;
    place-self: start;
    line-height: 16px;
    display: inline-flex
}

.ai-ready-context-choice-title-row {
    min-width: var(--alpy-ui-size-0)
}

.ai-ready-context-choice-item-icon {
    color: var(--ai-ready-context-accent);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.ai-ready-context-choice-card h3,.ai-ready-context-choice-card-hero p:not(.ai-ready-context-choice-chip),.ai-ready-context-choice-item-copy strong,.ai-ready-context-choice-item-copy span {
    margin: var(--alpy-ui-space-0)
}

.ai-ready-context-choice-card h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.ai-ready-context-choice-card-hero p:not(.ai-ready-context-choice-chip) {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.ai-ready-context-choice-visual {
    block-size: calc((var(--alpy-ui-size-128) + var(--alpy-ui-size-32)) * .7);
    min-width: var(--alpy-ui-size-0);
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

.ai-ready-context-choice-svg {
    object-fit: contain;
    block-size: 100%;
    inline-size: auto;
    max-inline-size: 100%;
    display: block
}

.ai-ready-context-choice-card.is-portable .ai-ready-context-choice-svg {
    transform: translateX(var(--alpy-ui-space-16))
}

.ai-ready-context-choice-card ul {
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-28) var(--alpy-ui-space-24);
    list-style: none;
    display: grid
}

.ai-ready-context-choice-card li {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: start;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-0);
    display: flex
}

.ai-ready-context-choice-card li:last-child {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.ai-ready-context-choice-item-icon {
    --product-icon-size: var(--alpy-ui-icon-size-32);
    block-size: var(--alpy-ui-size-32);
    inline-size: var(--alpy-ui-size-32)
}

.ai-ready-context-choice-item-copy {
    gap: var(--alpy-ui-space-2);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.ai-ready-context-choice-item-copy strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.ai-ready-context-choice-item-copy span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

@keyframes ai-ready-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .ai-ready-panel.is-running .ai-ready-panel-cta .product-ui-icon {
        animation: none
    }
}

@media (width<=1280px) {
    .shell-body.is-ai-ready-route {
        grid-template-columns: var(--shell-rail-width) minmax(var(--alpy-ui-size-0), 1fr)
    }

    .ai-ready-main {
        padding-inline:var(--alpy-ui-space-24)}
}

@media (width<=980px) {
    .shell-body.is-ai-ready-route {
        grid-template-columns: var(--shell-rail-width) minmax(var(--alpy-ui-size-0), 1fr)
    }

    .ai-ready-main {
        gap: var(--alpy-ui-space-40);
        padding-block-start:var(--alpy-ui-space-24)}

    .ai-ready-hero {
        gap: var(--alpy-ui-space-32);
        padding-block-start:var(--alpy-ui-space-24)}

    .ai-ready-hero-card {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .ai-ready-hero-copy,.ai-ready-hero-generator {
        padding: var(--alpy-ui-space-36);
        padding-block-start:var(--alpy-ui-space-36)}

    .ai-ready-hero-generator {
        border-left: var(--alpy-ui-border-width-0);
        border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
    }

    .ai-ready-package-browser {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        overflow: visible
    }

    .ai-ready-code-preview {
        border-end-end-radius: var(--alpy-ui-radius-medium);
        border-end-start-radius: var(--alpy-ui-radius-medium);
        overflow: hidden
    }

    .ai-ready-preview-section {
        height: auto
    }

    .ai-ready-file-list {
        background: var(--ai-ready-preview-background);
        border-bottom: var(--alpy-ui-border-width-1) solid var(--ai-ready-preview-border);
        border-right: var(--alpy-ui-border-width-0);
        max-height: none;
        padding-block-end:var(--alpy-ui-space-16);overflow: visible
    }

    .ai-ready-file-list-items {
        display: none
    }

    .ai-ready-file-list .ai-ready-file-select {
        padding-inline:var(--alpy-ui-space-16);display: grid
    }
}

@media (width<=960px) {
    .shell-body.is-ai-ready-route {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }
}

@media (width<=760px) {
    .ai-ready-main {
        gap: var(--alpy-ui-space-48);
        padding: var(--alpy-ui-space-24) var(--alpy-ui-space-16) var(--alpy-ui-space-0)
    }

    .ai-ready-hero {
        gap: var(--alpy-ui-space-24);
        padding-block:var(--alpy-ui-space-0)}

    .ai-ready-hero-copy,.ai-ready-hero-generator {
        padding: var(--alpy-ui-space-28);
        padding-block-start:var(--alpy-ui-space-28)}

    .ai-ready-code-preview-header {
        flex-direction: column;
        align-items: stretch
    }

    .ai-ready-code-preview-title {
        justify-content: space-between
    }

    .ai-ready-code-preview-actions {
        flex-wrap: wrap
    }

    .ai-ready-hero h1 {
        font-family: var(--alpy-ui-font-heading-medium-fontFamily);
        font-size: var(--alpy-ui-font-heading-medium-fontSize);
        line-height: var(--alpy-ui-font-heading-medium-lineHeight)
    }

    .ai-ready-panel-readiness-helper {
        flex-direction: column;
        align-items: stretch
    }

    .ai-ready-panel-readiness-helper p {
        margin-block-end:var(--alpy-ui-space-0)}

    .ai-ready-panel-readiness-actions .product-select-field {
        min-width: var(--alpy-ui-size-0)
    }

    .ai-ready-code-preview {
        overflow: visible
    }

    .ai-ready-file-code {
        overflow: auto visible
    }

    .ai-ready-overview-heading p {
        font-family: var(--alpy-ui-font-body-fontFamily);
        font-size: var(--alpy-ui-font-body-fontSize);
        line-height: var(--alpy-ui-font-body-lineHeight)
    }

    .ai-ready-overview-table-wrap {
        overflow: hidden
    }

    .ai-ready-overview-table,.ai-ready-overview-table thead,.ai-ready-overview-table tbody,.ai-ready-overview-table tr,.ai-ready-overview-table th,.ai-ready-overview-table td {
        min-width: var(--alpy-ui-size-0);
        width: 100%;
        display: block
    }

    .ai-ready-overview-table thead {
        display: none
    }

    .ai-ready-overview-table tbody tr {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        padding: var(--alpy-ui-space-24)
    }

    .ai-ready-overview-table tbody tr:last-child {
        border-bottom-width: var(--alpy-ui-border-width-0)
    }

    .ai-ready-overview-table th,.ai-ready-overview-table td,.ai-ready-overview-table tbody tr:last-child th,.ai-ready-overview-table tbody tr:last-child td {
        border-bottom-width: var(--alpy-ui-border-width-0);
        padding: var(--alpy-ui-space-0)
    }

    .ai-ready-overview-table tbody td {
        margin-top: var(--alpy-ui-space-16)
    }

    .ai-ready-overview-table tbody td:before {
        color: var(--alpy-ui-color-text-heading);
        content: attr(data-label);
        font-family: var(--alpy-ui-font-body-small-fontFamily);
        font-size: var(--alpy-ui-font-body-small-fontSize);
        font-weight: var(--alpy-ui-font-weight-bold);
        line-height: var(--alpy-ui-font-body-small-lineHeight);
        margin-bottom: var(--alpy-ui-space-4);
        text-transform: uppercase;
        display: block
    }

    .ai-ready-context-choice-cards {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .ai-ready-context-choice-card {
        padding: var(--alpy-ui-space-28)
    }
}

@media (width<=600px) {
    .ai-ready-page>.page-header {
        display: none
    }
}

.shell-body.is-export-route {
    grid-template-columns: var(--shell-rail-width) minmax(var(--alpy-ui-size-0), 1fr)
}

.main-content.is-export-main,.section-panel.is-export-panel {
    padding: var(--alpy-ui-space-0)
}

.main-content.is-export-main {
    overflow-x: hidden
}

.section-panel.is-export-panel {
    block-size: calc(100dvh - var(--shell-top-bar-height));
    overflow: hidden
}

.export-panel *,.export-page *,.export-panel :before,.export-page :before,.export-panel :after,.export-page :after {
    box-sizing: border-box
}

.export-page {
    --export-preview-max-width: var(--shell-content-width)
}

.export-panel {
    background: var(--alpy-ui-color-surface-canvas);
    block-size: calc(100dvh - var(--shell-top-bar-height));
    color: var(--alpy-ui-color-text-body);
    grid-template-rows: minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--alpy-ui-size-0);
    display: grid;
    position: relative
}

.export-panel-section h3,.export-panel-section small {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.export-panel-scroll {
    align-content: start;
    gap: var(--alpy-ui-space-40);
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-0);
    grid-auto-rows: max-content;
    display: grid;
    overflow: hidden auto
}

.export-panel-control-stack {
    gap: var(--alpy-ui-space-20);
    min-width: var(--alpy-ui-size-0);
    padding-inline:var(--alpy-ui-space-20);display: grid
}

.export-panel-section {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-action-stack {
    gap: var(--alpy-ui-space-32);
    inline-size: 100%;
    max-inline-size: 100%;
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-panel-section h3 {
    color: var(--alpy-ui-component-text-input-styles-label-default);
    font-family: var(--alpy-ui-component-text-input-text-label-fontFamily);
    font-size: max(var(--alpy-ui-component-text-input-text-label-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-component-text-input-text-label-fontWeight);
    letter-spacing: var(--alpy-ui-component-text-input-text-label-letterSpacing);
    line-height: var(--alpy-ui-component-text-input-text-label-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-panel .product-field-label,.export-panel .product-field-label-end {
    font-size: max(var(--alpy-ui-component-text-input-text-label-fontSize), var(--alpy-ui-size-12))
}

.export-panel .product-select-trigger span {
    font-size: max(var(--alpy-ui-component-dropdown-text-trigger-fontSize), var(--alpy-ui-size-12))
}

.export-panel .product-select-option,.export-panel .product-select-empty {
    font-size: max(var(--alpy-ui-component-dropdown-text-item-fontSize), var(--alpy-ui-size-12))
}

.export-select-field {
    min-width: var(--alpy-ui-size-0)
}

.export-validation-summary {
    --export-validation-icon-column: var(--alpy-ui-size-24);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-none);
    align-content: start;
    gap: var(--alpy-ui-space-16);
    inline-size: 100%;
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16);
    display: grid
}

.export-validation-summary.is-warning,.export-validation-summary.is-blocked {
    background: var(--alpy-ui-component-alert-styles-warning-bg-default)
}

.export-validation-heading {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--export-validation-icon-column) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-validation-shield {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    color: var(--alpy-ui-component-alert-styles-success-icon-default);
    height: var(--export-validation-icon-column);
    width: var(--export-validation-icon-column);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.export-validation-summary.is-warning .export-validation-shield,.export-validation-summary.is-blocked .export-validation-shield {
    color: var(--alpy-ui-color-text-functional-danger)
}

.export-validation-heading h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-validation-list {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-validation-findings {
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-validation-finding-section {
    gap: var(--alpy-ui-space-10);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-validation-finding-section h4 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-validation-finding-list {
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.export-validation-finding-list li {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    gap: var(--alpy-ui-space-4);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12);
    display: grid
}

.export-validation-finding-section.is-blocked .export-validation-finding-list li {
    border-color: var(--alpy-ui-color-border-functional-danger)
}

.export-validation-finding-section.is-warning .export-validation-finding-list li {
    border-color: var(--alpy-ui-component-alert-styles-warning-border-default)
}

.export-validation-finding-message,.export-validation-finding-meta {
    margin: var(--alpy-ui-space-0)
}

.export-validation-finding-message {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.export-validation-finding-meta {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.export-validation-row {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--export-validation-icon-column) minmax(var(--alpy-ui-size-0), 1fr);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-0);
    display: grid
}

.export-validation-status {
    border-radius: var(--alpy-ui-radius-full);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: max(var(--alpy-ui-font-body-small-fontSize), var(--alpy-ui-size-12));
    font-weight: var(--alpy-ui-font-weight-bold);
    height: var(--alpy-ui-size-20);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: var(--alpy-ui-size-20);
    width: var(--alpy-ui-size-20);
    justify-content: center;
    justify-self: center;
    align-items: center;
    display: inline-flex
}

.export-validation-status.is-clear {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-component-alert-styles-success-iconBorder-default);
    color: var(--alpy-ui-component-alert-styles-success-icon-default)
}

.export-validation-status.is-issue {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-functional-danger);
    color: var(--alpy-ui-color-text-functional-danger)
}

.export-generate-button {
    inline-size: 100%;
    max-inline-size: 100%;
    min-width: var(--alpy-ui-size-0);
    justify-content: center
}

.export-download-feedback {
    --product-icon-size: var(--alpy-ui-icon-size-14);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-6);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-8) var(--alpy-ui-space-20) var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.export-download-feedback.is-success {
    color: var(--alpy-ui-color-text-functional-success)
}

.export-download-feedback.is-error {
    color: var(--alpy-ui-color-text-functional-danger)
}

.export-download-feedback-icon {
    flex: none;
    display: inline-flex
}

.export-page {
    --export-preview-max-width: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-128) + var(--alpy-ui-size-52));
    color: var(--alpy-ui-color-text-body);
    max-width: 100%;
    min-height: calc(100dvh - var(--shell-top-bar-height));
    min-width: var(--alpy-ui-size-0);
    width: 100%
}

.export-main {
    gap: var(--alpy-ui-space-56);
    max-width: min(var(--export-preview-max-width), 100%);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    width: 100%;
    margin-inline:auto;display: grid
}

.export-hero {
    min-width: var(--alpy-ui-size-0);
    padding-block:var(--alpy-ui-space-24) var(--alpy-ui-space-0);display: grid
}

.export-hero-card {
    background-color: var(--alpy-ui-color-surface-canvas);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--alpy-ui-color-shades-brand-color-one-subtle-one) 60%, transparent) 0%, var(--alpy-ui-color-surface-canvas) 44%);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-large);
    gap: var(--alpy-ui-space-0);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 3fr) minmax(var(--alpy-ui-size-0), 2fr);
    min-width: var(--alpy-ui-size-0);
    display: grid;
    position: relative;
    overflow: hidden
}

.export-hero-top {
    grid-column: 1/-1;
    grid-template-columns: minmax(var(--alpy-ui-size-0), 3fr) minmax(var(--alpy-ui-size-0), 2fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-hero-copy {
    align-content: start;
    gap: var(--alpy-ui-space-24);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48);
    justify-items: start;
    padding-block-start:calc(var(--alpy-ui-space-48) + var(--alpy-ui-space-8));display: grid
}

.export-hero-copy h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-heading-large-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-large-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: calc(var(--alpy-ui-size-750) - var(--alpy-ui-size-20))
}

.export-hero-copy>p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-28))
}

.export-hero-generator {
    border-inline-start:var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);align-content: start;
    gap: var(--alpy-ui-space-40);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48);
    padding-inline-start:var(--alpy-ui-space-48);display: grid
}

.export-hero-generator .export-panel {
    background: var(--alpy-ui-color-system-transparent);
    block-size: auto;
    min-height: var(--alpy-ui-size-0)
}

.export-hero-generator .export-panel-scroll {
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0);
    overflow: visible
}

.export-hero-generator .export-panel-control-stack {
    padding-inline:var(--alpy-ui-space-0)}

.export-panel-library-actions,.export-panel-library-actions .page-header-actions,.export-panel-library-actions .page-header-library-select,.export-panel-library-actions .product-select-field {
    inline-size: 100%;
    max-inline-size: 100%;
    min-width: var(--alpy-ui-size-0)
}

.export-panel-library-actions .page-header-actions {
    align-items: stretch;
    display: grid
}

.export-hero-generator .export-download-feedback {
    margin-inline:var(--alpy-ui-space-0)}

.export-hero-generator .export-validation-summary {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
}

.export-install-section {
    gap: var(--alpy-ui-space-24);
    inline-size: 100%;
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    margin-block-start:var(--alpy-ui-space-12);display: grid
}

.export-install-layout {
    gap: var(--alpy-ui-space-24);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-install-command,.export-install-steps {
    align-content: start;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-command-card {
    inline-size: 100%;
    max-inline-size: 100%;
    min-width: var(--alpy-ui-size-0);
    justify-self: stretch;
    display: grid;
    position: relative
}

.export-command,.export-command-placeholder {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-body);
    margin: var(--alpy-ui-space-0);
    max-inline-size: 100%;
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-20);
    width: 100%;
    overflow-x: visible
}

.export-command-placeholder {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.export-command code {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal
}

.export-install-note {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-install-step-list {
    gap: var(--alpy-ui-space-12);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.export-install-step-list li {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: var(--alpy-ui-size-36) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-install-step-number {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    height: var(--alpy-ui-size-28);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    width: var(--alpy-ui-size-28);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.export-install-step-list li>span:last-child {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    min-width: var(--alpy-ui-size-0)
}

.export-overview-section {
    gap: var(--alpy-ui-space-24);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-overview-heading {
    gap: var(--alpy-ui-space-8);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-128));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-overview-heading h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-medium-fontFamily);
    font-size: var(--alpy-ui-font-heading-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-overview-heading p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-overview-table {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-collapse: separate;
    border-radius: var(--alpy-ui-radius-medium);
    border-spacing: var(--alpy-ui-space-0);
    color: var(--alpy-ui-color-text-body);
    table-layout: fixed;
    width: 100%;
    overflow: hidden
}

.export-overview-table th,.export-overview-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-28);
    text-align: left;
    vertical-align: top
}

.export-overview-table thead th {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.export-overview-table tbody tr:last-child th,.export-overview-table tbody tr:last-child td {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.export-overview-table tbody th {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    width: 28%
}

.export-overview-table tbody td {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    overflow-wrap: anywhere
}

.export-overview-table thead th:nth-child(2),.export-overview-table thead th:nth-child(3),.export-overview-table tbody td {
    width: 36%
}

.export-overview-area {
    align-items: center;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: var(--alpy-ui-size-28) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-overview-icon {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.export-overview-logo {
    block-size: var(--alpy-ui-icon-size-24);
    inline-size: var(--alpy-ui-icon-size-24);
    -webkit-mask-image: var(--export-overview-logo-url);
    mask-image: var(--export-overview-logo-url);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--export-overview-logo-url);
    background: currentColor;
    display: block;
    -webkit-mask-position: 50%;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat
}

.export-overview-cell {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-overview-cell p {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: var(--alpy-ui-space-0)
}

.export-preview-section {
    gap: var(--alpy-ui-space-0);
    height: min(calc(var(--alpy-ui-size-750) - var(--alpy-ui-size-128) - var(--alpy-ui-size-2)), calc(100dvh - var(--shell-top-bar-height) - var(--alpy-ui-space-64)));
    min-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-hero-card>.export-preview-section {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    grid-column: 1/-1
}

.export-package-browser {
    --export-preview-background: var(--alpy-ui-color-system-black);
    --export-preview-border: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 16%, transparent);
    --export-preview-hover: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 8%, transparent);
    --export-preview-selected: color-mix(in srgb, var(--alpy-ui-color-text-brand-color-one-accent) 28%, transparent);
    --export-preview-text: var(--alpy-ui-color-text-onColor);
    --export-preview-text-muted: color-mix(in srgb, var(--alpy-ui-color-text-onColor) 64%, transparent);
    background: var(--export-preview-background);
    border: var(--alpy-ui-border-width-1) solid var(--export-preview-border);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--export-preview-text);
    grid-template-columns: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-100)) minmax(var(--alpy-ui-size-0), 1fr);
    min-height: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-40));
    display: grid;
    overflow: hidden
}

.export-hero-card .export-package-browser {
    border-block-end-width:var(--alpy-ui-border-width-0);border-inline-width: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-none);
    min-height: 100%
}

.export-file-list {
    background: var(--export-preview-background);
    border-right: var(--alpy-ui-border-width-1) solid var(--export-preview-border);
    align-content: start;
    gap: var(--alpy-ui-space-0);
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-0) var(--alpy-ui-space-16);
    display: grid;
    overflow: hidden auto
}

.export-file-list .export-file-select {
    display: none
}

.export-file-list-items {
    gap: var(--alpy-ui-space-2);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-12) var(--alpy-ui-space-0);
    display: grid
}

.export-file-list button {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0) solid transparent;
    border-radius: var(--alpy-ui-radius-medium);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-12);
    inline-size: 100%;
    padding: var(--alpy-ui-space-8);
    text-align: left;
    display: flex;
    overflow: hidden
}

.export-file-list button.is-active {
    background: var(--export-preview-selected);
    color: var(--export-preview-text);
    outline: none
}

.export-file-list button:hover:not(.is-active),.export-file-list button:focus-visible:not(.is-active) {
    background: var(--export-preview-hover);
    color: inherit;
    outline: none
}

.export-file-icon {
    --product-icon-size: var(--alpy-ui-size-32);
    color: var(--alpy-ui-color-border-neutral-subtle-three);
    flex: 0 0 var(--alpy-ui-size-32);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    display: flex
}

.export-file-info {
    gap: var(--alpy-ui-space-2);
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.export-file-name {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.export-file-list small {
    color: var(--export-preview-text-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    opacity: .65;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.export-file-list em {
    color: var(--alpy-ui-color-text-body-subtle);
    flex: none;
    font-style: normal
}

.export-code-preview {
    --export-code-background: var(--alpy-ui-color-system-black);
    --export-code-text: var(--alpy-ui-color-text-onColor);
    --export-code-line-number: var(--export-preview-text-muted);
    --export-code-keyword: var(--alpy-ui-color-text-onColor);
    --export-code-type: var(--alpy-ui-color-text-onColor);
    --export-code-string: var(--alpy-ui-color-text-onColor);
    --export-code-literal: var(--alpy-ui-color-text-onColor);
    --export-code-number: var(--alpy-ui-color-text-onColor);
    --export-code-punctuation: var(--export-preview-text-muted);
    --export-code-comment: var(--export-preview-text-muted);
    background: var(--export-preview-background);
    color: var(--export-preview-text);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.export-code-preview-header {
    background: var(--export-preview-background);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--export-preview-border);
    color: var(--export-preview-text);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.export-code-preview-title {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.export-code-preview-title>span {
    min-width: var(--alpy-ui-size-0);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.export-code-copy-link.product-button.is-link,.export-code-copy-link.product-button.is-link:hover,.export-code-copy-link.product-button.is-link:active,.export-code-copy-link.product-button.is-link:focus-visible {
    color: var(--export-preview-text)
}

.export-code-preview-actions {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex: none;
    display: flex
}

.export-code-preview-body {
    background: var(--export-code-background);
    color: var(--export-code-text);
    font-family: ui-monospace,SF Mono,Menlo,Consolas,monospace;
    font-size: var(--alpy-ui-font-body-small-fontSize);
    align-content: start;
    gap: var(--alpy-ui-space-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    display: grid;
    overflow: hidden
}

.export-code-preview-body h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-file-code {
    background: var(--export-code-background);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    min-height: 100%;
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-24);
    overflow: auto
}

.export-file-code code {
    min-width: max-content;
    font-family: inherit;
    display: grid
}

.export-file-code-line {
    gap: var(--alpy-ui-space-20);
    grid-template-columns: 4ch minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--alpy-ui-size-24);
    display: grid
}

.export-file-code-line-number {
    color: var(--export-code-line-number);
    text-align: right;
    -webkit-user-select: none;
    user-select: none
}

.export-file-code-line-content {
    white-space: pre
}

.export-file-code-token.is-keyword {
    color: var(--export-code-keyword)
}

.export-file-code-token.is-type {
    color: var(--export-code-type)
}

.export-file-code-token.is-string {
    color: var(--export-code-string)
}

.export-file-code-token.is-literal {
    color: var(--export-code-literal)
}

.export-file-code-token.is-number {
    color: var(--export-code-number)
}

.export-file-code-token.is-punctuation {
    color: var(--export-code-punctuation)
}

.export-file-code-token.is-comment {
    color: var(--export-code-comment)
}

.export-file-code-token.is-identifier {
    color: inherit
}

.export-code-preview-body section {
    gap: var(--alpy-ui-space-10);
    display: grid
}

.export-code-preview-body h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.export-code-preview-body p,.export-code-preview-body ul {
    margin: var(--alpy-ui-space-0)
}

.export-code-preview-body ul {
    gap: var(--alpy-ui-space-4);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.export-code-preview-body li {
    align-items: start;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr);
    display: grid
}

.export-code-preview-body li:before {
    background: var(--alpy-ui-color-text-body-subtle);
    border-radius: var(--alpy-ui-radius-full);
    content: "";
    height: var(--alpy-ui-size-4);
    width: var(--alpy-ui-size-4);
    margin-block-start:var(--alpy-ui-space-8)}

.export-locked-preview-warning {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    border-top: var(--alpy-ui-border-width-1) solid var(--export-preview-border);
    color: var(--export-preview-text-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    opacity: .65;
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    display: flex
}

@media (width<=1100px) {
    .export-main {
        gap: var(--alpy-ui-space-40);
        padding-block-start:var(--alpy-ui-space-24)}

    .export-hero {
        gap: var(--alpy-ui-space-32);
        padding-block-start:var(--alpy-ui-space-24)}

    .export-hero-card,.export-hero-top {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .export-hero-copy,.export-hero-generator {
        padding: var(--alpy-ui-space-36);
        padding-block-start:var(--alpy-ui-space-36)}

    .export-hero-generator {
        border-inline-start-width: var(--alpy-ui-border-width-0);
        border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
    }

    .export-overview-table,.export-overview-table thead,.export-overview-table tbody,.export-overview-table tr,.export-overview-table th,.export-overview-table td {
        min-width: var(--alpy-ui-size-0);
        width: 100%;
        display: block
    }

    .export-overview-table thead {
        display: none
    }

    .export-overview-table tbody tr {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        padding: var(--alpy-ui-space-24)
    }

    .export-overview-table tbody tr:last-child {
        border-bottom-width: var(--alpy-ui-border-width-0)
    }

    .export-overview-table th,.export-overview-table td,.export-overview-table tbody tr:last-child th,.export-overview-table tbody tr:last-child td {
        border-bottom-width: var(--alpy-ui-border-width-0);
        padding: var(--alpy-ui-space-0)
    }

    .export-overview-table tbody td {
        margin-top: var(--alpy-ui-space-16)
    }

    .export-overview-table tbody td:before {
        color: var(--alpy-ui-color-text-heading);
        content: attr(data-label);
        font-family: var(--alpy-ui-font-body-small-fontFamily);
        font-size: var(--alpy-ui-font-body-small-fontSize);
        font-weight: var(--alpy-ui-font-weight-bold);
        line-height: var(--alpy-ui-font-body-small-lineHeight);
        margin-bottom: var(--alpy-ui-space-4);
        text-transform: uppercase;
        display: block
    }

    .export-preview-section {
        height: auto
    }

    .export-package-browser {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
        overflow: visible
    }

    .export-code-preview {
        border-end-end-radius: var(--alpy-ui-radius-medium);
        border-end-start-radius: var(--alpy-ui-radius-medium);
        overflow: hidden
    }

    .export-file-list {
        background: var(--export-preview-background);
        border-bottom: var(--alpy-ui-border-width-1) solid var(--export-preview-border);
        border-right: var(--alpy-ui-border-width-0);
        max-height: none;
        overflow: visible
    }

    .export-file-list-items {
        display: none
    }

    .export-file-list .export-file-select {
        padding-inline:var(--alpy-ui-space-16);padding-block-end: var(--alpy-ui-space-16);
        display: grid
    }

    .export-code-preview-header {
        flex-direction: column;
        align-items: stretch
    }

    .export-code-preview-title {
        justify-content: space-between
    }

    .export-code-preview-actions {
        flex-wrap: wrap
    }
}

@media (width<=960px) {
    .shell-body.is-export-route {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        grid-template-rows: max-content max-content max-content;
        overflow-y: auto
    }

    .shell-body.is-export-route>.rail {
        background: var(--alpy-ui-color-surface-canvas);
        top: var(--alpy-ui-size-0);
        z-index: 1;
        position: sticky
    }

    .main-content.is-export-main {
        block-size: auto;
        overflow: visible
    }

    .section-panel.is-export-panel,.export-panel {
        block-size: auto
    }

    .section-panel.is-export-panel {
        max-height: none;
        overflow: visible
    }

    .export-panel-scroll {
        overflow: visible
    }
}

@media (width<=760px) {
    .export-main {
        gap: var(--alpy-ui-space-48);
        padding: var(--alpy-ui-space-24) var(--alpy-ui-space-16) var(--alpy-ui-space-0)
    }

    .export-hero {
        gap: var(--alpy-ui-space-24);
        padding-block:var(--alpy-ui-space-0)}

    .export-hero-copy,.export-hero-generator {
        padding: var(--alpy-ui-space-28);
        padding-block-start:var(--alpy-ui-space-28)}

    .export-overview-heading h2 {
        font-family: var(--alpy-ui-font-heading-small-fontFamily);
        font-size: var(--alpy-ui-font-heading-small-fontSize);
        line-height: var(--alpy-ui-font-heading-small-lineHeight)
    }

    .export-hero-copy h1 {
        font-family: var(--alpy-ui-font-heading-medium-fontFamily);
        font-size: var(--alpy-ui-font-heading-medium-fontSize);
        line-height: var(--alpy-ui-font-heading-medium-lineHeight)
    }
}

.export-review-page {
    color: #1a1a1a;
    background: #f5f5f7;
    grid-template-columns: 260px 1fr;
    width: 100vw;
    height: 100vh;
    font-family: system-ui,-apple-system,Segoe UI,sans-serif;
    display: grid
}

.export-review-sidebar {
    background: #fff;
    border-right: 1px solid #e4e4e7;
    flex-direction: column;
    display: flex;
    overflow-y: auto
}

.export-review-sidebar-header {
    border-bottom: 1px solid #e4e4e7;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    display: flex
}

.export-review-sidebar-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600
}

.export-review-kicker {
    color: #6b7280;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
    font-size: 11px;
    font-weight: 700
}

.export-review-meta {
    color: #6b7280;
    margin: 0;
    font-size: 12px
}

.export-review-framework-switch {
    gap: 4px;
    margin-top: 8px;
    display: flex
}

.export-review-framework-switch a {
    color: #1a1a1a;
    background: #f1f1f4;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none
}

.export-review-framework-switch a[aria-current=page] {
    color: #fff;
    background: #1a1a1a
}

.export-review-component-list {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 8px;
    list-style: none;
    display: flex
}

.export-review-component-list button {
    color: #1a1a1a;
    cursor: pointer;
    text-align: left;
    background: 0 0;
    border: none;
    border-radius: 6px;
    width: 100%;
    padding: 7px 12px;
    font-size: 13px
}

.export-review-component-list button:hover {
    background: #f1f1f4
}

.export-review-component-list button[aria-current=true] {
    color: #fff;
    background: #1a1a1a
}

.export-review-main {
    flex-direction: column;
    display: flex;
    overflow-y: auto
}

.export-review-main-header {
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid #e4e4e7;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    display: flex;
    position: sticky;
    top: 0
}

.export-review-main-heading h2 {
    margin: 0 0 2px;
    font-size: 22px;
    font-weight: 600
}

.export-review-mode-toggle {
    background: #f1f1f4;
    border-radius: 8px;
    gap: 2px;
    padding: 2px;
    display: flex
}

.export-review-mode-toggle button {
    color: #1a1a1a;
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500
}

.export-review-mode-toggle button[aria-checked=true] {
    background: #fff;
    box-shadow: 0 1px 2px #00000014
}

.export-review-case-list {
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 32px;
    display: flex
}

.export-review-case-list-headers {
    color: #6b7280;
    letter-spacing: .08em;
    text-transform: uppercase;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    display: grid
}

.export-review-case {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    grid-template-columns: 200px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px;
    display: grid
}

.export-review-case-label {
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 500
}

.export-review-render {
    background: #fafafb;
    border: 1px solid #ececef;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    padding: 14px;
    display: flex;
    position: relative
}

.export-review-render[data-alpy-mode=dark] {
    background: #1a1a1a;
    border-color: #2a2a2e
}

.export-review-vue-mount {
    display: contents
}

.export-review-button-sections {
    flex-direction: column;
    gap: 20px;
    padding: 16px 24px 32px;
    display: flex
}

.export-review-button-section {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 18px 20px 20px
}

.export-review-button-section-header {
    border-bottom: 1px solid #f1f1f4;
    margin: 0 0 14px;
    padding-bottom: 10px
}

.export-review-button-section-header h3 {
    color: #6b7280;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-size-blocks {
    flex-direction: column;
    gap: 64px;
    display: flex
}

.export-review-button-size-block {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.export-review-button-size-block-header {
    align-items: center;
    gap: 10px;
    display: flex
}

.export-review-button-size-block-header:after {
    content: "";
    background: #e4e4e7;
    flex: 1;
    height: 1px
}

.export-review-button-size-label {
    color: #fff;
    letter-spacing: .04em;
    text-transform: lowercase;
    background: #1a1a1a;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: ui-monospace,SF Mono,Menlo,monospace;
    font-size: 12px;
    font-weight: 600
}

.export-review-button-grid {
    align-items: start;
    gap: 2px 32px;
    display: grid
}

.export-review-button-grid:has(.export-review-accordion-cell) {
    row-gap: 64px
}

.export-review-button-grid .export-review-accordion-cell,.export-review-button-grid .export-review-alert-cell {
    align-self: stretch;
    display: block
}

.export-review-alert-grid {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    display: grid
}

.export-review-alert-card {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.export-review-alert-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-alert-card-label {
    color: #9ca3af
}

.export-review-alert-card .export-review-alert-cell {
    padding: 0
}

.export-review-badge-grid {
    flex-wrap: wrap;
    gap: 48px;
    display: flex
}

.export-review-badge-card {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex
}

.export-review-badge-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-badge-card-label {
    color: #9ca3af
}

.export-review-badge-cell {
    padding: 0
}

.export-review-card-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 24px;
    display: grid
}

.export-review-card-card {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    display: flex
}

.export-review-card-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-date-picker-grid {
    grid-template-columns: repeat(auto-fit,minmax(480px,1fr));
    gap: 24px;
    display: grid
}

.export-review-date-picker-card {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.export-review-date-picker-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-date-picker-card-label {
    color: #9ca3af
}

.export-review-date-picker-cell {
    padding: 0
}

.export-review-modal-grid {
    grid-template-columns: repeat(auto-fit,minmax(420px,1fr));
    gap: 24px;
    display: grid
}

.export-review-modal-card {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.export-review-modal-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-modal-card-label {
    color: #9ca3af
}

.export-review-modal-cell {
    align-self: stretch;
    padding: 0;
    display: block
}

.export-review-popover-grid {
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 24px;
    display: grid
}

.export-review-popover-card {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.export-review-popover-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-popover-card-label {
    color: #9ca3af
}

.export-review-popover-cell {
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex
}

.export-review-popover-cell dialog {
    position: relative;
    inset: auto
}

.export-review-progress-indicator-cell {
    justify-content: stretch;
    align-self: stretch;
    align-items: stretch;
    min-width: 0;
    padding: 8px 0;
    display: block
}

.export-review-textarea-grid {
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap: 24px;
    display: grid
}

.export-review-textarea-card {
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    display: flex
}

.export-review-textarea-card-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-textarea-card-label {
    color: #9ca3af
}

.export-review-textarea-cell {
    align-self: stretch;
    padding: 0;
    display: block
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-card-card-label {
    color: #9ca3af
}

.export-review-card-cell {
    align-self: stretch;
    padding: 0;
    display: block
}

.export-review-button-grid-corner {
    min-height: 1px
}

.export-review-button-grid-col-label {
    color: #6b7280;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 4px;
    font-size: 11px;
    font-weight: 700
}

.export-review-button-grid-row-label {
    color: #6b7280;
    text-align: right;
    white-space: nowrap;
    padding-right: 12px;
    font-family: ui-monospace,SF Mono,Menlo,monospace;
    font-size: 11px
}

.export-review-button-grid-cell {
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    display: flex
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-button-section {
    background: #1a1a1a;
    border-color: #2a2a2e
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-button-section-header {
    border-bottom-color: #2a2a2e
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-button-section-header h3,.export-review-button-sections[data-alpy-mode=dark] .export-review-button-grid-col-label,.export-review-button-sections[data-alpy-mode=dark] .export-review-button-grid-row-label {
    color: #9ca3af
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-button-size-block-header:after {
    background: #2a2a2e
}

.export-review-button-sections[data-alpy-mode=dark] .export-review-button-size-label {
    color: #1a1a1a;
    background: #fff
}

.export-review-image-cell {
    max-width: 320px
}

.lp-root {
    --lp-font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
    --lp-bg-card-blue: var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    --lp-bg-card-green: var(--alpy-ui-color-shades-brand-color-two-subtle-two);
    --lp-bg-card-yellow: var(--alpy-ui-color-shades-brand-color-three-subtle-two);
    --lp-bg-showcase-panel: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --lp-bg-showcase-body: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --lp-bg-pricing-paid: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    --lp-bg-cta: var(--alpy-ui-color-shades-neutral-subtle-one);
    --lp-bg-video: var(--alpy-ui-color-shades-neutral-strong-three);
    --lp-shadow-frame: 0 var(--alpy-ui-size-4) var(--alpy-ui-size-32) color-mix(in srgb, var(--alpy-ui-color-border-neutral-strong-three) 10%, transparent);
    --lp-shadow-screenshot: calc(-1 * var(--alpy-ui-size-20)) var(--alpy-ui-size-20) var(--alpy-ui-size-48) color-mix(in srgb, var(--alpy-ui-color-border-neutral-strong-three) 15%, transparent);
    --lp-shadow-overlay: 0 var(--alpy-ui-size-4) var(--alpy-ui-size-32) color-mix(in srgb, var(--alpy-ui-color-border-brand-color-one-strong-three) 10%, transparent);
    --lp-shadow-modal: calc(-1 * var(--alpy-ui-size-12)) var(--alpy-ui-size-16) var(--alpy-ui-size-32) color-mix(in srgb, var(--alpy-ui-color-border-brand-color-one-strong-three) 10%, transparent);
    --lp-radius-card-img: calc(var(--alpy-ui-size-12) + var(--alpy-ui-size-2));
    --lp-radius-overlay: calc(var(--alpy-ui-size-8) + var(--alpy-ui-size-1));
    --lp-hero-content-max: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-8) + var(--alpy-ui-size-2));
    --lp-hero-body-max: calc(3 * var(--alpy-ui-size-200));
    --lp-section-body-max: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-80));
    --lp-section-inset: var(--alpy-ui-size-76);
    --lp-content-max: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-100) + var(--alpy-ui-size-80));
    --lp-video-max: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-200) + var(--alpy-ui-size-60));
    --lp-video-height: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-72) + var(--alpy-ui-size-2));
    --lp-video-pad-top: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-32));
    --lp-video-pad-bottom: var(--alpy-ui-size-200);
    --lp-gallery-height: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-48) + var(--alpy-ui-size-2));
    --lp-gallery-track-w: calc(2 * var(--alpy-ui-size-1020) + var(--alpy-ui-size-750) + var(--alpy-ui-size-2));
    --lp-gallery-bl-w: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-88) + var(--alpy-ui-size-2));
    --lp-gallery-bl-h: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-2));
    --lp-gallery-br-w: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-88) + var(--alpy-ui-size-1));
    --lp-gallery-br-h: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-2));
    --lp-gallery-center-w: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-76) + var(--alpy-ui-size-1));
    --lp-gallery-center-h: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-36));
    --lp-card-height: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-4) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-max: calc((var(--lp-content-max) - var(--alpy-ui-space-32)) / 2);
    --lp-card-min: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-100));
    --lp-card-wide-height: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-4) + var(--alpy-ui-size-1));
    --lp-card-body-height: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-112) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-body-inset: calc(var(--alpy-ui-size-44) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-wide-body-left: calc(var(--alpy-ui-size-56) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-wide-body-w: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-20));
    --lp-showcase-panel-h: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-192) + var(--alpy-ui-size-1));
    --lp-showcase-team-w: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-36));
    --lp-showcase-team-h: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-48));
    --lp-showcase-card-left: calc(var(--alpy-ui-size-52) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-showcase-card-bottom: var(--alpy-ui-size-36);
    --lp-showcase-card-w: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-80));
    --lp-showcase-card-h: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-40) + var(--alpy-ui-size-2));
    --lp-showcase-modal-right: calc(var(--alpy-ui-size-44) + var(--alpy-ui-size-2));
    --lp-showcase-modal-top: calc(var(--alpy-ui-size-88) + var(--alpy-ui-size-2));
    --lp-showcase-modal-w: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-44) + var(--alpy-ui-size-1));
    --lp-showcase-modal-h: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-32) + var(--alpy-ui-size-2));
    --lp-showcase-heading-w: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-16));
    --lp-showcase-gap: calc(var(--alpy-ui-size-60) + var(--alpy-ui-size-1));
    --lp-card-img-type-bottom: calc(-1 * var(--alpy-ui-size-200));
    --lp-card-img-type-left: calc(var(--alpy-ui-size-44) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-img-type-right: calc(-1 * (var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-12)));
    --lp-card-img-color-bottom: calc(-1 * var(--alpy-ui-size-200));
    --lp-card-img-color-left: calc(var(--alpy-ui-size-44) + var(--alpy-ui-size-2) + var(--alpy-ui-size-1));
    --lp-card-img-color-right: calc(-1 * (var(--alpy-ui-size-200) + var(--alpy-ui-size-80) + var(--alpy-ui-size-4)));
    --lp-card-img-comp-top: calc(var(--alpy-ui-size-80) + var(--alpy-ui-size-4));
    --lp-card-img-comp-right: calc(-1 * (var(--alpy-ui-size-128) + var(--alpy-ui-size-32) + var(--alpy-ui-size-2)));
    --lp-card-img-comp-h: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-112));
    --lp-card-img-comp-w: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-4));
    --lp-price-gap: calc(var(--alpy-ui-size-4) + var(--alpy-ui-size-2));
    --lp-ai-ready-panel-max: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-40));
    background: var(--alpy-ui-color-surface-canvas);
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-body);
    font-family: var(--lp-font-family);
    font-weight: var(--alpy-ui-font-weight-medium);
    flex-direction: column;
    width: 100%;
    display: flex;
    overflow-x: clip
}

.lp-root *,.lp-root :before,.lp-root :after {
    box-sizing: border-box
}

.lp-block {
    display: block
}

.lp-product-button--full {
    width: 100%
}

.lp-hero-cta-row {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
    margin-top: var(--alpy-ui-space-16);
}


.lp-hero-cta-row .product-button {
    text-decoration: none
}

.lp-hero-pin {
    height: 175dvh;
    position: relative
}

.lp-hero-pin-inner {
    height: calc(100dvh - var(--shell-top-bar-height));
    position: sticky;
    top: 0
}

@media (width<=744px) {
    .lp-hero-pin {
        height: auto
    }

    .lp-hero-pin-inner {
        height: auto;
        position: static
    }

    .lp-hero-pin+.lp-section-header {
        padding-top: var(--alpy-ui-size-0)
    }

    .lp-hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%
    }

    .lp-hero-cta-row .product-button {
        justify-content: center;
        width: 100%
    }
}

.lp-hero {
    align-items: center;
    gap: var(--alpy-ui-space-40);
    padding: var(--alpy-ui-space-64) var(--alpy-ui-space-20) var(--alpy-ui-size-0);
    flex-direction: column;
    display: flex
}

.lp-hero-content {
    align-items: center;
    gap: var(--alpy-ui-space-32);
    max-width: var(--lp-hero-content-max);
    text-align: center;
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-hero-headlines {
    text-align: center;
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-hero-h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-hero-h1-light {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-hero-body {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: var(--lp-hero-body-max)
}

.lp-hero-gallery {
    height: var(--lp-gallery-height);
    width: 100%;
    position: relative;
    overflow: visible
}

.lp-hero-gallery-track {
    height: var(--lp-gallery-height);
    left: 50%;
    top: var(--alpy-ui-size-0);
    width: var(--lp-gallery-track-w);
    position: absolute;
    transform: translate(-50%)
}

.lp-hero-shot {
    position: absolute
}

.lp-hero-shot-frame {
    border-radius: var(--alpy-ui-size-16);
    box-shadow: var(--lp-shadow-frame);
    overflow: hidden
}

.lp-hero-shot-frame img {
    width: 100%;
    display: block
}

.lp-hero-shot--bl {
    bottom: var(--alpy-ui-size-0);
    left: var(--alpy-ui-size-0);
    width: var(--lp-gallery-bl-w)
}

.lp-hero-shot--bl .lp-hero-shot-frame {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none
}

.lp-hero-shot--br {
    bottom: var(--alpy-ui-size-0);
    right: var(--alpy-ui-size-0);
    width: var(--lp-gallery-br-w)
}

.lp-hero-shot--br .lp-hero-shot-frame {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none
}

.lp-hero-shot--center {
    bottom: var(--alpy-ui-size-0);
    height: auto;
    width: var(--lp-gallery-center-w);
    left: 50%;
    transform: translate(-50%)
}

.lp-hero-shot--center .lp-hero-shot-frame {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none
}

main.is-home-main {
    scroll-timeline-name: --lp-page-scroll
}

@media (width<=744px) {
    .main-content.is-home-main {
        scrollbar-width: none
    }

    .main-content.is-home-main::-webkit-scrollbar {
        width: 0;
        height: 0
    }
}

@keyframes lp-hero-shot-bl-parallax {
    to {
        transform: translate(-40px,-180px)rotate(-1.5deg)
    }
}

@keyframes lp-hero-shot-br-parallax {
    to {
        transform: translate(40px,-180px)rotate(1.5deg)
    }
}

@keyframes lp-hero-shot-center-parallax {
    to {
        transform: translate(-50%,-80px)scale(1.025)
    }
}

@supports (animation-timeline:scroll()) {
    .lp-hero-shot--bl,.lp-hero-shot--br,.lp-hero-shot--center {
        animation-duration: auto;
        will-change: transform;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: --lp-page-scroll;
        animation-range: 0 100vh
    }

    .lp-hero-shot--bl {
        animation-name: lp-hero-shot-bl-parallax
    }

    .lp-hero-shot--br {
        animation-name: lp-hero-shot-br-parallax
    }

    .lp-hero-shot--center {
        animation-name: lp-hero-shot-center-parallax
    }
}

@media (prefers-reduced-motion:reduce) {
    .lp-hero-shot--bl,.lp-hero-shot--br,.lp-hero-shot--center {
        animation: none!important
    }
}

.lp-video-section {
    background: var(--alpy-ui-color-surface-canvas);
    align-items: center;
    gap: var(--alpy-ui-space-40);
    padding: var(--lp-video-pad-top) var(--alpy-ui-space-20) var(--lp-video-pad-bottom);
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-video-wrap {
    background: var(--lp-bg-video);
    border-radius: var(--alpy-ui-size-4);
    height: var(--lp-video-height);
    max-width: var(--lp-video-max);
    width: 100%;
    overflow: hidden
}

.lp-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.lp-video-heading {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-heading-xlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xlarge-lineHeight);
    margin: var(--alpy-ui-size-0);
    text-align: center
}

.lp-section-header {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-20) var(--alpy-ui-space-48);
    text-align: center;
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-section-header--benefits {
    padding-bottom: var(--alpy-ui-space-24)
}

.lp-section-header--benefits .lp-section-body {
    max-width: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-100) + var(--alpy-ui-size-8) + var(--alpy-ui-size-2))
}

.lp-section-title {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: var(--lp-content-max)
}

.lp-rotate {
    perspective: 600px;
    display: inline-block;
    position: relative
}

.lp-rotate-word {
    backface-visibility: hidden;
    transform-origin: 50%;
    display: inline-block
}

.lp-rotate-word-text {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    text-decoration: underline;
    -webkit-text-decoration-color: var(--alpy-ui-color-text-brand-color-three-accent);
    text-decoration-color: var(--alpy-ui-color-text-brand-color-three-accent);
    text-underline-offset: .08em;
    text-decoration-thickness: 2px
}

.lp-rotate-word--in {
    animation: .6s cubic-bezier(.65,0,.35,1) both lp-flip-in
}

.lp-rotate-word--out {
    animation: .6s cubic-bezier(.65,0,.35,1) both lp-flip-out;
    position: absolute;
    top: 0;
    left: 0
}

@keyframes lp-flip-in {
    0% {
        opacity: 0;
        transform: rotateX(-90deg)
    }

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

@keyframes lp-flip-out {
    0% {
        opacity: 1;
        transform: rotateX(0)
    }

    to {
        opacity: 0;
        transform: rotateX(90deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .lp-rotate-word--in,.lp-rotate-word--out {
        animation: none
    }
}

.lp-section-body {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: var(--lp-section-body-max)
}

.lp-section-body--stack {
    gap: var(--alpy-ui-space-12);
    flex-direction: column;
    display: flex
}

.lp-section-body--stack p {
    margin: var(--alpy-ui-size-0)
}

.lp-feature-row {
    gap: var(--alpy-ui-space-32);
    padding: var(--alpy-ui-size-0) var(--lp-section-inset) var(--alpy-ui-space-32);
    justify-content: center;
    width: 100%;
    display: flex
}

.lp-feature-row-full {
    padding: var(--alpy-ui-size-0) var(--lp-section-inset) var(--alpy-ui-space-16);
    justify-content: center;
    width: 100%;
    display: flex
}

.lp-feature-card {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-size-24);
    min-height: var(--lp-card-height);
    max-width: var(--lp-card-max);
    min-width: var(--lp-card-min);
    flex: 1;
    position: relative;
    overflow: hidden
}

.lp-feature-card--blue {
    background: var(--lp-bg-card-blue)
}

.lp-feature-card--green {
    background: var(--lp-bg-card-green)
}

.lp-feature-card--yellow {
    background: var(--lp-bg-card-yellow)
}

.lp-feature-card--wide {
    flex: unset;
    min-height: var(--lp-card-wide-height);
    max-width: none;
    width: var(--lp-content-max)
}

.lp-feature-card-body {
    align-items: flex-start;
    gap: var(--alpy-ui-space-48);
    min-height: var(--lp-card-body-height);
    left: var(--lp-card-body-inset);
    padding-top: var(--lp-card-body-inset);
    right: var(--lp-card-body-inset);
    top: var(--alpy-ui-size-0);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    position: absolute
}

.lp-feature-card-body--wide {
    gap: var(--alpy-ui-space-48);
    height: auto;
    bottom: auto;
    left: var(--lp-card-wide-body-left);
    padding-top: var(--alpy-ui-size-0);
    width: var(--lp-card-wide-body-w);
    justify-content: flex-start;
    top: 50%;
    right: auto;
    transform: translateY(-50%)
}

.lp-feature-card-text h3,.lp-feature-card-h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-heading-xlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xlarge-lineHeight);
    margin: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-size-16)
}

.lp-feature-card-text p {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-feature-card--wide .lp-feature-card-h3 {
    white-space: normal
}

.lp-export-logos {
    gap: var(--alpy-ui-space-12);
    margin: var(--alpy-ui-space-24) var(--alpy-ui-size-0) var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    grid-template-columns: repeat(8,1fr);
    list-style: none;
    display: grid
}

.lp-export-logo {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-direction: column;
    justify-content: flex-start;
    display: flex
}

.lp-export-logo img {
    height: var(--alpy-ui-size-32);
    width: auto;
    display: block
}

.lp-export-logo-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-align: center
}

.lp-feature-card-img {
    position: absolute
}

.lp-feature-card-img img {
    border-radius: var(--lp-radius-card-img);
    box-shadow: var(--lp-shadow-screenshot);
    width: 100%;
    display: block
}

.lp-feature-card-img--type {
    bottom: var(--lp-card-img-type-bottom);
    left: var(--lp-card-img-type-left);
    right: var(--lp-card-img-type-right)
}

.lp-feature-card-img--type img {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none
}

.lp-feature-card-img--color {
    bottom: var(--lp-card-img-color-bottom);
    left: var(--lp-card-img-color-left);
    right: var(--lp-card-img-color-right)
}

.lp-feature-card-img--color img {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none
}

.lp-feature-card-img--components {
    height: var(--lp-card-img-comp-h);
    right: var(--lp-card-img-comp-right);
    top: var(--lp-card-img-comp-top);
    width: var(--lp-card-img-comp-w)
}

.lp-feature-card-img--components img {
    border-radius: var(--alpy-ui-size-0);
    box-shadow: none;
    object-fit: cover;
    object-position: left top;
    width: 100%;
    height: 100%;
    display: block
}

.lp-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
    transform: translateY(150px)
}

.lp-reveal.is-revealed {
    opacity: 1;
    transform: translate(0,0)
}

@media (prefers-reduced-motion:reduce) {
    .lp-reveal {
        opacity: 1;
        transition: none;
        transform: none
    }
}

@media (width<=744px) {
    .lp-feature-row,.lp-feature-row-full {
        padding: var(--alpy-ui-size-0) var(--alpy-ui-space-20) var(--alpy-ui-space-16);
        flex-direction: column;
        align-items: center
    }

    .lp-feature-row {
        gap: var(--alpy-ui-space-20)
    }

    .lp-feature-card,.lp-feature-card--wide {
        flex: unset;
        max-width: var(--lp-content-max);
        width: 100%;
        min-width: 0;
        min-height: 0
    }

    .lp-feature-card-body,.lp-feature-card-body--wide {
        height: auto;
        min-height: 0;
        padding: var(--lp-card-body-inset);
        width: 100%;
        position: relative;
        inset: auto;
        transform: none
    }

    .lp-feature-card-img,.lp-feature-card-img--type,.lp-feature-card-img--color,.lp-feature-card-img--components {
        height: auto;
        margin-top: var(--alpy-ui-space-20);
        padding: var(--alpy-ui-size-0) var(--lp-card-body-inset) var(--lp-card-body-inset);
        width: 100%;
        position: relative;
        inset: auto
    }

    .lp-feature-card-img img {
        box-shadow: none;
        object-fit: contain;
        object-position: left top;
        max-width: 100%;
        height: auto
    }
}

.lp-connect-flow {
    background: var(--alpy-ui-color-surface-canvas);
    width: 100%;
    position: relative
}

.lp-connect-flow-pin {
    height: 850dvh
}

.lp-connect-flow-pin-inner {
    padding: var(--alpy-ui-space-20);
    justify-content: center;
    align-items: center;
    display: flex
}

.lp-connect-flow-pin .lp-connect-flow-pin-inner {
    height: 100dvh;
    padding-top: var(--alpy-ui-space-80);
    position: sticky;
    top: 0;
    overflow: hidden
}

.lp-connect-flow-pin .lp-connect-flow-pin-inner:before {
    background: var(--alpy-ui-color-shades-brand-color-one-strong-one);
    content: "";
    height: var(--alpy-ui-space-80);
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.lp-connect-flow-stage {
    --lp-folder-up: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-20) + var(--alpy-ui-size-2));
    --lp-library-height: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128));
    --lp-connect-monitor-width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-12) + 50px);
    --lp-connect-monitor-body-end: 158px;
    --lp-trunk-start: calc(var(--lp-library-height) - var(--lp-folder-up));
    --lp-trunk-end: calc(var(--lp-library-height) + var(--alpy-ui-space-40) + var(--lp-connect-monitor-body-end));
    max-width: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-80));
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative
}

.lp-connect-flow-pin .lp-connect-flow-stage {
    left: 50%;
    top: calc(var(--alpy-ui-space-80) + var(--lp-stage-offset-y,0px));
    transform: translateX(-50%) scale(var(--lp-fit,1));
    transform-origin: top;
    position: absolute
}

.lp-connect-flow-stage:before {
    border-left: var(--alpy-ui-border-width-2) dashed var(--alpy-ui-color-border-neutral-subtle-two);
    content: "";
    height: calc(var(--lp-trunk-end) - var(--lp-trunk-start));
    left: 50%;
    top: var(--lp-trunk-start);
    position: absolute;
    transform: translate(-1px)
}

.lp-connect-flow-library {
    z-index: 1;
    position: relative
}

.lp-connect-flow-connect {
    z-index: 3;
    position: relative
}

.lp-connect-flow-library {
    height: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128));
    width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-128))
}

.lp-connect-flow-folder {
    bottom: var(--lp-folder-up);
    height: auto;
    width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-12));
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.lp-connect-flow-folder--back {
    z-index: 1
}

.lp-connect-flow-folder--front {
    z-index: 3
}

.lp-connect-flow-library-logo {
    aspect-ratio: 167/148;
    pointer-events: none;
    left: 50%;
    top: calc((2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128)) - var(--lp-folder-up) - (var(--alpy-ui-size-100) + var(--alpy-ui-size-88)));
    width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-12));
    z-index: 2;
    position: absolute
}

.lp-connect-flow-library-logo-img {
    width: 100%;
    height: 100%;
    display: block
}

.lp-connect-flow-library-logo-check {
    border-radius: var(--alpy-ui-size-4);
    color: var(--alpy-ui-color-functional-success);
    background: #fff;
    justify-content: center;
    align-items: center;
    width: 16%;
    height: 16%;
    transition: opacity .12s linear;
    display: flex;
    position: absolute;
    top: 52%;
    left: 42%
}

.lp-connect-flow-library-logo-check>svg {
    width: 80%;
    height: auto;
    display: block
}

.lp-connect-flow-pills {
    bottom: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-44) + var(--lp-folder-up));
    z-index: 2;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%
}

.lp-connect-flow-pill {
    color: #fff;
    pointer-events: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}

.lp-connect-flow-pill>svg {
    width: 55%;
    height: 55%;
    display: block
}

.lp-connect-flow-pill--blue {
    background: #2255c2
}

.lp-connect-flow-pill--green {
    background: #2e9e5b
}

.lp-connect-flow-pill--amber {
    background: #f59e0b
}

.lp-connect-flow-connect {
    aspect-ratio: 174/132;
    margin-top: var(--alpy-ui-space-40);
    width: var(--lp-connect-monitor-width)
}

.lp-connect-flow-illus {
    width: 100%;
    height: 100%;
    display: block
}

.lp-connect-flow-check {
    background: var(--alpy-ui-color-surface-canvas);
    border-radius: var(--alpy-ui-size-4);
    color: var(--alpy-ui-color-functional-success);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    transition: opacity .12s linear;
    display: flex;
    position: absolute
}

.lp-connect-flow-check--connect {
    width: 22%;
    height: 26%;
    top: 8%;
    left: 39%
}

.lp-connect-flow-check-glyph {
    width: 70%;
    height: auto;
    display: block
}

.lp-connect-flow-fan {
    margin-top: calc(-1 * var(--alpy-ui-space-4));
    z-index: 1;
    width: 100%
}

.lp-connect-flow-fan svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.lp-connect-flow-line {
    fill: none;
    stroke: var(--alpy-ui-color-functional-success-soft);
    stroke-linecap: round;
    stroke-width: 2px;
    transition: stroke-dashoffset .12s linear
}

.lp-connect-flow-logos {
    align-items: start;
    gap: var(--alpy-ui-space-16);
    margin: var(--alpy-ui-space-24) var(--alpy-ui-size-0) var(--alpy-ui-size-0);
    opacity: 0;
    padding: var(--alpy-ui-size-0);
    transform: translateY(var(--alpy-ui-space-8));
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    list-style: none;
    transition: opacity .28s,transform .28s;
    display: grid
}

.lp-connect-flow-logos.is-visible {
    opacity: 1;
    transform: translateY(var(--alpy-ui-size-0))
}

.lp-connect-flow-logo {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-direction: column;
    display: flex
}

.lp-connect-flow-logo img {
    height: var(--alpy-ui-size-64);
    width: auto;
    display: block
}

.lp-connect-flow-logo-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    opacity: .75;
    text-align: center
}

.lp-connect-flow-cta {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-size-56) var(--alpy-ui-size-0) var(--alpy-ui-space-32) var(--alpy-ui-size-0);
    flex-wrap: wrap;
    justify-content: center;
    display: flex
}

.lp-connect-flow-cta .product-button {
    text-decoration: none
}

.lp-how-to-use-intro {
    --lp-how-to-intro-helper-y: calc(3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-40));
    --lp-how-to-intro-gap: clamp(var(--alpy-ui-space-64), 7%, var(--alpy-ui-space-128));
    --lp-how-to-intro-inline: clamp(var(--alpy-ui-space-24), 3%, var(--alpy-ui-space-56));
    --lp-how-to-intro-min-gap: var(--alpy-ui-space-100);
    --lp-how-to-intro-slider-gap: calc(var(--alpy-ui-size-100) + var(--alpy-ui-size-80));
    --lp-how-to-intro-title-y: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-200));
    background: var(--alpy-ui-color-surface-canvas);
    align-content: start;
    align-items: start;
    column-gap: var(--lp-how-to-intro-gap);
    grid-template-columns: minmax(var(--alpy-ui-size-0), .9fr) minmax(var(--alpy-ui-size-0), 1.05fr);
    min-height: auto;
    padding: var(--alpy-ui-size-0) var(--lp-how-to-intro-inline) calc(var(--lp-how-to-intro-slider-gap) + var(--lp-how-to-intro-helper-y));
    row-gap: var(--alpy-ui-space-100);
    margin-block-start:calc(-1 * var(--alpy-ui-space-48));display: grid;
    container-type: inline-size
}

.lp-how-to-use-intro h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xxlarge-fontFamily);
    font-size: clamp(var(--alpy-ui-font-heading-xxlarge-fontSize), 9cqw, calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-48)));
    font-weight: var(--alpy-ui-font-heading-xxlarge-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    margin: var(--alpy-ui-size-0);
    max-width: none;
    transform: translate3d(0, var(--lp-how-to-intro-title-y), 0);
    white-space: nowrap;
    will-change: transform;
    grid-column: 1/-1;
    line-height: .92
}

.lp-how-to-use-intro p {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: clamp(var(--alpy-ui-font-heading-small-fontSize), 2.3cqw, var(--alpy-ui-size-48));
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    margin: var(--alpy-ui-size-0);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-200) + var(--alpy-ui-size-8) + var(--alpy-ui-size-2));
    transform: translate3d(0, var(--lp-how-to-intro-helper-y), 0);
    will-change: transform;
    grid-column: 2;
    align-self: start;
    padding-block-start:var(--alpy-ui-size-0);line-height: 1.05
}

.lp-how-to-use {
    --lp-how-to-column-gap: clamp(var(--alpy-ui-space-48), 7cqw, calc(var(--alpy-ui-space-80) + var(--alpy-ui-space-40)));
    --lp-how-to-inline: clamp(var(--alpy-ui-space-24), 3cqw, var(--alpy-ui-space-56));
    --lp-how-to-media-column-base: calc(2 * var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-48) + var(--alpy-ui-border-width-1));
    --lp-how-to-media-column: max(var(--lp-how-to-media-column-base), 43cqw);
    --lp-how-to-progress: 0;
    --lp-how-to-row-gap: clamp(var(--alpy-ui-space-56), 6vh, var(--alpy-ui-space-112));
    --lp-how-to-step-width: calc(100vw - var(--shell-rail-width));
    --lp-how-to-title-size: clamp(var(--alpy-ui-font-heading-xlarge-fontSize), 4.65cqw, calc(var(--alpy-ui-font-heading-xxlarge-fontSize) + var(--alpy-ui-size-64)));
    --lp-how-to-track-enter-x: var(--lp-how-to-step-width);
    --lp-how-to-track-x: var(--lp-how-to-track-enter-x);
    background: var(--alpy-ui-color-surface-canvas);
    height: 600dvh;
    position: relative;
    container-type: inline-size
}

.lp-how-to-use-sticky {
    min-height: 100dvh;
    padding: clamp(var(--alpy-ui-space-24), 4vh, var(--alpy-ui-space-64)) var(--alpy-ui-size-0);
    align-content: center;
    display: grid;
    position: sticky;
    top: 0;
    overflow: hidden
}

.lp-how-to-use-track {
    gap: calc(var(--lp-how-to-inline) * 2);
    margin: var(--alpy-ui-size-0);
    padding-inline:var(--lp-how-to-inline);transform: translateX(var(--lp-how-to-track-x));
    width: max-content;
    list-style: none;
    transition: transform 80ms linear;
    display: flex
}

.lp-how-to-use-step {
    --lp-how-to-content-opacity: 0;
    --lp-how-to-content-progress: 0;
    --lp-how-to-content-start-y: var(--alpy-ui-space-24);
    --lp-how-to-content-y: var(--lp-how-to-content-start-y);
    --lp-how-to-headline-opacity: 0;
    --lp-how-to-headline-progress: 0;
    --lp-how-to-headline-start-x: var(--alpy-ui-space-40);
    --lp-how-to-headline-x: var(--lp-how-to-headline-start-x);
    --lp-how-to-media-progress: 0;
    --lp-how-to-media-start-x: 100%;
    --lp-how-to-media-x: var(--lp-how-to-media-start-x);
    flex: 0 0 calc(var(--lp-how-to-step-width) - (var(--lp-how-to-inline) * 2))
}

.lp-how-to-use-step article {
    align-items: start;
    gap: var(--lp-how-to-row-gap) var(--lp-how-to-column-gap);
    grid-template-columns: minmax(var(--alpy-ui-size-0), var(--lp-how-to-media-column)) minmax(var(--alpy-ui-size-0), 1fr);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
    display: grid
}

.lp-how-to-use-layer {
    opacity: 1;
    transform: translate3d(var(--lp-how-to-layer-x,var(--alpy-ui-size-0)), var(--lp-how-to-layer-y,var(--alpy-ui-size-0)), 0);
    will-change: opacity, transform;
    transition: opacity 80ms linear,transform 80ms linear
}

.lp-how-to-use-layer--headline {
    --lp-how-to-layer-x: var(--lp-how-to-headline-x);
    opacity: var(--lp-how-to-headline-opacity)
}

.lp-how-to-use-layer--media {
    --lp-how-to-layer-x: var(--lp-how-to-media-x)
}

.lp-how-to-use-layer--support {
    --lp-how-to-layer-x: var(--alpy-ui-size-0);
    --lp-how-to-layer-y: var(--lp-how-to-content-y);
    opacity: var(--lp-how-to-content-opacity)
}

.lp-how-to-use-step-head {
    align-items: start;
    gap: var(--alpy-ui-space-24);
    min-width: var(--alpy-ui-size-0);
    grid-column: 1/-1;
    display: flex
}

.lp-how-to-use-step h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xxlarge-fontFamily);
    font-size: var(--lp-how-to-title-size);
    font-weight: var(--alpy-ui-font-heading-xxlarge-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    margin: var(--alpy-ui-size-0);
    min-width: var(--alpy-ui-size-0);
    line-height: 1
}

.lp-how-to-use-placeholder {
    aspect-ratio: 16/9;
    background: var(--alpy-ui-color-surface-panel);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body-subtle);
    grid-area: 2/1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden
}

.lp-how-to-use-placeholder span {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.lp-how-to-use-placeholder img,.lp-how-to-use-placeholder video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.lp-how-to-use-preview-trigger {
    appearance: none;
    color: inherit;
    cursor: zoom-in;
    height: 100%;
    padding: var(--alpy-ui-size-0);
    z-index: 1;
    background: 0 0;
    border: 0;
    width: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.lp-how-to-use-preview-trigger:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-brand-color-one-strong-three);
    outline-offset: calc(-1 * var(--alpy-ui-border-width-2))
}

.lp-how-to-use-lightbox {
    background: color-mix(in srgb, var(--alpy-ui-color-system-black) 88%, transparent);
    padding: var(--alpy-ui-space-40);
    z-index: 300;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0
}

.lp-how-to-use-lightbox-frame {
    max-height: calc(100dvh - var(--alpy-ui-size-128));
    max-width: calc(100vw - var(--alpy-ui-size-128));
    justify-content: center;
    align-items: center;
    display: flex
}

.lp-how-to-use-lightbox-frame img,.lp-how-to-use-lightbox-frame video {
    border-radius: var(--alpy-ui-radius-small);
    max-height: calc(100dvh - var(--alpy-ui-size-128));
    max-width: calc(100vw - var(--alpy-ui-size-128));
    object-fit: contain;
    display: block
}

.lp-how-to-use-lightbox-close {
    appearance: none;
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-heading);
    cursor: pointer;
    height: var(--alpy-ui-size-48);
    padding: var(--alpy-ui-size-0);
    right: var(--alpy-ui-space-24);
    top: var(--alpy-ui-space-24);
    width: var(--alpy-ui-size-48);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: fixed
}

.lp-how-to-use-lightbox-close:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-brand-color-one-strong-three);
    outline-offset: var(--alpy-ui-size-2)
}

.lp-how-to-use-lightbox-close svg {
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-size-24)
}

.lp-how-to-use-support {
    align-self: start;
    gap: var(--alpy-ui-space-64);
    flex-direction: column;
    grid-area: 2/2;
    display: flex
}

.lp-how-to-use-support p {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-heading-medium-fontFamily);
    font-size: clamp(var(--alpy-ui-font-heading-xsmall-fontSize), 2.3cqw, var(--alpy-ui-font-heading-medium-fontSize));
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-medium-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: calc(4 * var(--alpy-ui-size-200))
}

.lp-how-to-use-step-cta {
    width: fit-content
}

.lp-how-to-use-step-cta .product-button {
    text-decoration: none
}

@media (width<=744px) {
    .lp-connect-flow-cta {
        flex-direction: column
    }

    .lp-how-to-use-intro {
        gap: var(--alpy-ui-space-32);
        min-height: auto;
        padding: var(--alpy-ui-space-80) var(--alpy-ui-space-20) var(--alpy-ui-space-48);
        grid-template-columns: 1fr;
        margin-block-start:var(--alpy-ui-size-0)}

    .lp-how-to-use-intro h2 {
        font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
        line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
        white-space: normal
    }

    .lp-how-to-use-intro p {
        font-size: var(--alpy-ui-font-heading-small-fontSize);
        line-height: var(--alpy-ui-font-heading-small-lineHeight);
        grid-column: 1;
        padding-block-start:var(--alpy-ui-size-0)}

    .lp-how-to-use {
        --lp-how-to-track-enter-x: var(--alpy-ui-size-0);
        --lp-how-to-step-width: 100vw;
        height: auto;
        transform: none
    }

    .lp-how-to-use-sticky {
        min-height: auto;
        padding: var(--alpy-ui-space-80) var(--alpy-ui-size-0);
        position: relative;
        overflow: visible
    }

    .lp-how-to-use-track {
        align-items: stretch;
        gap: var(--alpy-ui-space-48);
        padding-inline:var(--alpy-ui-space-20);flex-direction: column;
        width: 100%;
        transform: none
    }

    .lp-how-to-use-step {
        flex-basis: auto;
        width: 100%
    }

    .lp-how-to-use-step article {
        gap: var(--alpy-ui-space-32);
        grid-template-columns: 1fr;
        min-height: auto
    }

    .lp-how-to-use-layer {
        opacity: 1;
        transform: none
    }

    .lp-how-to-use-step-head {
        grid-template-columns: 1fr;
        align-items: start
    }

    .lp-how-to-use-step h3 {
        font-size: var(--alpy-ui-font-heading-xlarge-fontSize);
        line-height: var(--alpy-ui-font-heading-xlarge-lineHeight)
    }

    .lp-how-to-use-placeholder,.lp-how-to-use-support,.lp-how-to-use-step-cta {
        grid-area: auto/1
    }

    .lp-how-to-use-lightbox {
        padding: var(--alpy-ui-space-20)
    }

    .lp-how-to-use-lightbox-frame,.lp-how-to-use-lightbox-frame img,.lp-how-to-use-lightbox-frame video {
        max-height: calc(100dvh - var(--alpy-ui-size-96));
        max-width: calc(100vw - var(--alpy-ui-size-40))
    }
}

.lp-ai-ready {
    padding: var(--alpy-ui-space-80) var(--alpy-ui-space-20) var(--alpy-ui-space-16);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex
}

.lp-section-header--ai-ready {
    padding-bottom: var(--alpy-ui-space-24);
    padding-top: var(--alpy-ui-size-0)
}

.lp-ai-ready-panel {
    background: var(--alpy-ui-color-surface-canvas);
    border-radius: var(--alpy-ui-size-24);
    gap: var(--alpy-ui-space-24);
    max-width: var(--lp-ai-ready-panel-max);
    padding: var(--alpy-ui-space-40);
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-ai-ready-panel .ai-ready-panel-readiness-helper {
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0);
    text-align: center
}

.lp-ai-ready-panel .ai-ready-panel-steps {
    align-items: stretch;
    gap: var(--alpy-ui-space-0);
    max-width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-64));
    flex-direction: column;
    width: 100%;
    margin-inline:auto;display: flex
}

.lp-ai-ready-panel .ai-ready-panel-step {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-size-12);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    margin-bottom: var(--alpy-ui-space-24);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-20);
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    transition: background .18s,border-color .18s;
    display: flex
}

.lp-ai-ready-panel .ai-ready-panel-step:last-child {
    margin-bottom: var(--alpy-ui-space-0);
    padding-bottom: var(--alpy-ui-space-16)
}

.lp-ai-ready-panel .ai-ready-panel-step.is-complete {
    background: color-mix(in srgb, var(--alpy-ui-color-functional-success-soft) 30%, transparent);
    border-color: var(--alpy-ui-color-functional-success-soft)
}

.lp-ai-ready-panel .ai-ready-panel-step:not(:last-child):before {
    background: 0 0
}

.lp-ai-ready-panel .ai-ready-panel-step:not(:last-child):after {
    background: var(--alpy-ui-color-border-neutral-subtle-two);
    bottom: calc(-1 * var(--alpy-ui-space-24));
    content: "";
    height: var(--alpy-ui-space-24);
    width: var(--alpy-ui-border-width-2);
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.lp-ai-ready-panel .ai-ready-panel-step.is-complete:not(:last-child):after {
    background: var(--alpy-ui-color-functional-success-soft)
}

.lp-ai-ready-panel .ai-ready-panel-step-marker {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    color: var(--alpy-ui-color-text-body);
    background: 0 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    animation: none;
    display: inline-flex
}

.lp-ai-ready-panel .ai-ready-panel-step-status-row {
    align-items: center;
    gap: var(--alpy-ui-space-6);
    justify-content: center;
    display: inline-flex
}

.lp-ai-ready-panel .ai-ready-panel-step-status-row p {
    margin: var(--alpy-ui-space-0)
}

.lp-ai-ready-panel .ai-ready-panel-step.is-complete .ai-ready-panel-step-marker {
    color: var(--alpy-ui-color-functional-success);
    background: 0 0;
    border: none
}

.lp-ai-ready-panel .ai-ready-panel-step.is-active .ai-ready-panel-step-marker {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    background: 0 0;
    border: none;
    animation: none
}

.lp-ai-ready-panel .ai-ready-panel-step.is-pending .ai-ready-panel-step-marker {
    color: var(--alpy-ui-color-text-body);
    opacity: .45
}

.lp-ai-ready-panel .ai-ready-panel-step-body {
    align-items: center;
    gap: var(--alpy-ui-space-2);
    padding: var(--alpy-ui-space-0);
    text-align: center;
    background: 0 0;
    border: none;
    border-radius: 0;
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-ai-ready-panel .ai-ready-panel-step strong {
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

.lp-ai-ready-cta {
    width: 100%;
    display: none
}

.lp-ai-ready-panel .ai-ready-panel-connect {
    margin-top: calc(var(--alpy-ui-space-24) * -1);
    width: 100%;
    display: block
}

.lp-ai-ready-panel .ai-ready-panel-connect svg {
    width: 100%;
    height: auto;
    display: block
}

.lp-ai-ready-panel .ai-ready-panel-connect-line {
    fill: none;
    stroke: var(--alpy-ui-color-functional-success-soft);
    stroke-linecap: round;
    stroke-width: 2px;
    transition: stroke-dashoffset .12s linear
}

.lp-ai-ready-panel .ai-ready-panel-logos {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    margin: var(--alpy-ui-space-0);
    opacity: 0;
    padding: var(--alpy-ui-space-0);
    transform: translateY(var(--alpy-ui-space-8));
    grid-template-columns: repeat(4,1fr);
    list-style: none;
    transition: opacity .28s,transform .28s;
    display: grid
}

.lp-ai-ready-panel .ai-ready-panel-logos.is-visible {
    opacity: 1;
    transform: translateY(var(--alpy-ui-space-0))
}

.lp-ai-ready-panel .ai-ready-panel-logo {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-direction: column;
    justify-content: flex-start;
    display: flex
}

.lp-ai-ready-panel .ai-ready-panel-logo img {
    height: var(--alpy-ui-size-40);
    width: auto;
    display: block
}

.lp-ai-ready-panel .ai-ready-panel-logo-label {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    opacity: .75;
    text-align: center
}

.lp-showcase {
    padding: var(--alpy-ui-space-16) var(--lp-section-inset);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex
}

.lp-showcase-image-panel {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-size-24) var(--alpy-ui-size-24) var(--alpy-ui-size-0) var(--alpy-ui-size-0);
    height: var(--lp-showcase-panel-h);
    max-width: var(--lp-content-max);
    width: 100%;
    position: relative;
    overflow: hidden
}

.lp-showcase-team {
    border-radius: var(--alpy-ui-size-24);
    height: var(--lp-showcase-team-h);
    width: var(--lp-showcase-team-w);
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%,-50%)
}

.lp-showcase-team img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.lp-showcase-card-overlay {
    aspect-ratio: 1400/978;
    border-radius: var(--lp-radius-overlay);
    bottom: var(--lp-showcase-card-bottom);
    box-shadow: var(--lp-shadow-overlay);
    height: auto;
    left: var(--lp-showcase-card-left);
    width: var(--lp-showcase-card-w);
    position: absolute;
    overflow: hidden
}

.lp-showcase-card-overlay img,.lp-showcase-modal-overlay img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.lp-showcase-modal-overlay {
    aspect-ratio: 1234/694;
    border-radius: var(--alpy-ui-size-8);
    box-shadow: var(--lp-shadow-modal);
    height: auto;
    right: var(--lp-showcase-modal-right);
    top: var(--lp-showcase-modal-top);
    width: var(--lp-showcase-modal-w);
    position: absolute;
    overflow: hidden
}

.lp-showcase-body {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-size-24) var(--alpy-ui-size-24);
    gap: var(--lp-showcase-gap);
    max-width: var(--lp-content-max);
    padding: var(--alpy-ui-space-60);
    width: 100%;
    display: flex
}

.lp-showcase-heading {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-xlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-heading-xlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xlarge-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: var(--lp-showcase-heading-w);
    flex-shrink: 0;
    width: 100%
}

.lp-showcase-benefits {
    gap: var(--alpy-ui-space-32);
    flex-direction: column;
    flex: 1;
    display: flex
}

.lp-benefit h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--lp-font-family);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-size-16)
}

.lp-benefit p {
    color: var(--alpy-ui-color-text-body);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0)
}

@media (width<=1200px) {
    .lp-showcase-body {
        gap: var(--alpy-ui-space-32);
        flex-direction: column
    }

    .lp-showcase-heading {
        flex-shrink: 1;
        width: 100%;
        max-width: none
    }
}

@media (width<=900px) {
    .lp-showcase-image-panel {
        aspect-ratio: 16/9;
        height: auto
    }

    .lp-showcase-card-overlay,.lp-showcase-modal-overlay {
        display: none
    }
}

@media (width<=744px) {
    .lp-showcase {
        padding: var(--alpy-ui-space-16) var(--alpy-ui-space-20)
    }

    .lp-showcase-body {
        padding: var(--alpy-ui-space-32)
    }
}

.lp-pricing {
    align-items: center;
    gap: var(--alpy-ui-space-40);
    padding: var(--alpy-ui-space-120) var(--lp-section-inset) var(--alpy-ui-space-80);
    flex-direction: column;
    width: 100%;
    display: flex
}

.lp-pricing-header {
    gap: var(--alpy-ui-space-16);
    max-width: var(--lp-content-max);
    width: 100%;
    display: grid
}

.lp-pricing-title {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xxlarge-fontFamily);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-heading-xxlarge-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-pricing-lead {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-128))
}

.lp-pricing-cards {
    gap: var(--alpy-ui-space-32);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-128) + var(--alpy-ui-size-32))), 1fr));
    margin: var(--alpy-ui-size-0) auto;
    max-width: var(--lp-content-max);
    padding: var(--alpy-ui-size-0);
    width: 100%;
    list-style: none;
    display: grid
}

.lp-pricing-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    display: grid;
    overflow: hidden
}

.lp-pricing-card--one-library,.lp-pricing-card--pro {
    border-color: var(--alpy-ui-color-border-brand-color-one-subtle-two)
}

.lp-pricing-card-header,.lp-pricing-card-body,.lp-pricing-card-actions,.lp-pricing-matrix-header {
    padding: var(--alpy-ui-space-24)
}

.lp-pricing-card-header,.lp-pricing-matrix-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
}

.lp-pricing-card-header,.lp-pricing-card-body {
    align-content: start;
    gap: var(--alpy-ui-space-24);
    display: grid
}

.lp-pricing-card-actions {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
}

.lp-pricing-card-plan {
    align-items: start;
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    justify-content: space-between;
    display: flex
}

.lp-pricing-card-badge {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-brand-color-one-subtle-two);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    white-space: nowrap;
    flex: none
}

.lp-pricing-notice {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-16) var(--alpy-ui-size-0) var(--alpy-ui-size-0);
    max-width: var(--lp-content-max);
    width: 100%
}

.lp-pricing-faq-section {
    align-items: start;
    gap: var(--alpy-ui-space-48);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 4fr) minmax(var(--alpy-ui-size-0), 8fr);
    max-width: var(--lp-content-max);
    width: 100%;
    margin-block-start:var(--alpy-ui-space-80);display: grid
}

.lp-pricing-faq-intro {
    gap: var(--alpy-ui-space-32);
    min-width: var(--alpy-ui-size-0);
    flex-direction: column;
    display: flex
}

.lp-pricing-faq-title {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xlarge-fontFamily);
    font-size: var(--alpy-ui-font-heading-xlarge-fontSize);
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-xlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xlarge-lineHeight);
    margin: var(--alpy-ui-size-0);
    text-transform: uppercase
}

.lp-pricing-faq-description {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-pricing-faq-intro .product-button {
    align-self: start
}

.lp-pricing-faq.components-canonical-accordion-shell {
    --library-component-accordion-border: var(--alpy-ui-color-border-neutral-subtle-two);
    --library-component-accordion-border-width: var(--alpy-ui-border-width-1);
    --library-component-accordion-content-background: var(--alpy-ui-color-surface-canvas);
    --library-component-accordion-content-font-family: var(--alpy-ui-font-body-fontFamily);
    --library-component-accordion-content-font-size: var(--alpy-ui-font-body-fontSize);
    --library-component-accordion-content-font-weight: var(--alpy-ui-font-body-fontWeight);
    --library-component-accordion-content-letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    --library-component-accordion-content-line-height: var(--alpy-ui-font-body-lineHeight);
    --library-component-accordion-content-padding-bottom: var(--alpy-ui-space-20);
    --library-component-accordion-content-padding-x: var(--alpy-ui-space-20);
    --library-component-accordion-content-text: var(--alpy-ui-color-text-body);
    --library-component-accordion-focus-ring: var(--alpy-ui-color-border-brand-color-one-strong-three);
    --library-component-accordion-gap: var(--alpy-ui-space-12);
    --library-component-accordion-header-background: var(--alpy-ui-color-surface-canvas);
    --library-component-accordion-header-font-family: var(--alpy-ui-font-body-large-fontFamily);
    --library-component-accordion-header-font-size: var(--alpy-ui-font-body-large-fontSize);
    --library-component-accordion-header-font-weight: var(--alpy-ui-font-body-large-fontWeight);
    --library-component-accordion-header-height: var(--alpy-ui-size-64);
    --library-component-accordion-header-letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    --library-component-accordion-header-line-height: var(--alpy-ui-font-body-large-lineHeight);
    --library-component-accordion-header-padding-x: var(--alpy-ui-space-20);
    --library-component-accordion-header-padding-y: var(--alpy-ui-space-16);
    --library-component-accordion-header-text: var(--alpy-ui-color-text-heading);
    --library-component-accordion-icon: var(--alpy-ui-color-text-body-subtle);
    --library-component-accordion-icon-size: var(--alpy-ui-icon-size-20);
    --library-component-accordion-item-gap: var(--alpy-ui-space-12);
    --library-component-accordion-radius: var(--alpy-ui-size-8);
    box-sizing: border-box;
    color: var(--library-component-accordion-content-text);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    width: 100%;
    display: grid
}

.lp-pricing-faq .components-canonical-accordion {
    gap: var(--library-component-accordion-item-gap);
    width: 100%;
    display: grid
}

.lp-pricing-faq .components-canonical-accordion-item {
    background: var(--library-component-accordion-content-background);
    border: var(--library-component-accordion-border-width) solid var(--library-component-accordion-border);
    border-radius: var(--library-component-accordion-radius);
    box-sizing: border-box;
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.lp-pricing-faq .components-canonical-accordion-trigger {
    background: var(--library-component-accordion-header-background);
    border: var(--alpy-ui-border-width-0);
    box-sizing: border-box;
    color: var(--library-component-accordion-header-text);
    cursor: pointer;
    font-family: var(--library-component-accordion-header-font-family);
    font-size: var(--library-component-accordion-header-font-size);
    font-weight: var(--library-component-accordion-header-font-weight);
    align-items: center;
    gap: var(--library-component-accordion-gap);
    letter-spacing: var(--library-component-accordion-header-letter-spacing);
    line-height: var(--library-component-accordion-header-line-height);
    min-height: var(--library-component-accordion-header-height);
    padding: var(--library-component-accordion-header-padding-y) var(--library-component-accordion-header-padding-x);
    text-align: left;
    width: 100%;
    display: flex
}

.lp-pricing-faq .components-canonical-accordion-trigger:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--library-component-accordion-focus-ring);
    outline-offset: calc(-1 * var(--alpy-ui-border-width-2))
}

.lp-pricing-faq .components-canonical-accordion-trigger>span:not(.components-canonical-accordion-icon) {
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    flex: auto
}

.lp-pricing-faq .components-canonical-accordion-icon {
    --product-icon-size: var(--library-component-accordion-icon-size);
    color: var(--library-component-accordion-icon);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.lp-pricing-faq .components-canonical-accordion-panel {
    background: var(--library-component-accordion-content-background);
    color: var(--library-component-accordion-content-text);
    gap: var(--alpy-ui-space-16);
    padding: var(--alpy-ui-space-0) var(--library-component-accordion-content-padding-x) var(--library-component-accordion-content-padding-bottom);
    display: grid
}

.lp-pricing-faq .components-canonical-accordion-panel p {
    font-family: var(--library-component-accordion-content-font-family);
    font-size: var(--library-component-accordion-content-font-size);
    font-weight: var(--library-component-accordion-content-font-weight);
    letter-spacing: var(--library-component-accordion-content-letter-spacing);
    line-height: var(--library-component-accordion-content-line-height);
    margin: var(--alpy-ui-space-0)
}

.lp-pricing-faq-panel-action {
    justify-self: start
}

.lp-pricing-card-headline,.lp-pricing-card-name {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-medium-fontFamily);
    font-size: var(--alpy-ui-font-heading-medium-fontSize);
    font-weight: var(--alpy-ui-font-heading-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-medium-letterSpacing);
    line-height: var(--alpy-ui-font-heading-medium-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-pricing-card-desc {
    color: var(--alpy-ui-color-text-subheading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-price {
    align-items: baseline;
    column-gap: var(--alpy-ui-space-8);
    row-gap: var(--alpy-ui-space-4);
    flex-wrap: wrap;
    display: flex
}

.lp-price-amount {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-large-letterSpacing);
    line-height: var(--alpy-ui-font-heading-large-lineHeight)
}

.lp-price-amount--crossed {
    -webkit-text-decoration-color: var(--alpy-ui-color-border-functional-danger);
    text-decoration-color: var(--alpy-ui-color-border-functional-danger);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-decoration-line: line-through;
    text-decoration-thickness: var(--alpy-ui-border-width-4)
}

.lp-price-separator {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    line-height: var(--alpy-ui-font-heading-large-lineHeight);
    transform: translateY(-.02em)
}

.lp-price-period {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.lp-price-term-stack {
    align-self: center;
    gap: var(--alpy-ui-space-2);
    display: grid
}

.lp-price-note {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.lp-pricing-feature-section {
    align-content: start;
    gap: var(--alpy-ui-space-12);
    display: grid
}

.lp-pricing-feature-label {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-feature-list {
    align-content: start;
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-size-0);
    list-style: none;
    display: grid
}

.lp-feature-item {
    align-items: start;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--alpy-ui-icon-size-20) minmax(var(--alpy-ui-size-0), 1fr);
    display: grid
}

.lp-feature-check {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    color: var(--alpy-ui-color-text-body);
    flex-shrink: 0;
    align-items: center;
    margin-block-start:var(--alpy-ui-space-2);display: inline-flex
}

.lp-feature-item>span:last-child {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.lp-pricing-matrix {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    max-width: var(--lp-content-max);
    width: 100%;
    display: grid;
    overflow: hidden
}

.lp-pricing-matrix-header {
    gap: var(--alpy-ui-space-8);
    display: grid
}

.lp-pricing-matrix-header h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-pricing-matrix-header p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-size-0)
}

.lp-pricing-matrix-scroll {
    width: 100%;
    overflow-x: auto
}

.lp-pricing-matrix-table {
    border-collapse: collapse;
    min-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-128) + var(--alpy-ui-size-40));
    width: 100%
}

.lp-pricing-matrix-table th,.lp-pricing-matrix-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-regular);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    text-align: left;
    vertical-align: top
}

.lp-pricing-matrix-table thead th {
    background: var(--alpy-ui-color-surface-interaction-disabled);
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-semiBold)
}

.lp-pricing-matrix-table tbody tr:last-child th,.lp-pricing-matrix-table tbody tr:last-child td {
    border-bottom: var(--alpy-ui-border-width-0)
}

.lp-pricing-matrix-group td {
    background: var(--alpy-ui-color-surface-interaction-disabled);
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-semiBold)
}

.lp-pricing-matrix-table .lp-pricing-matrix-feature {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-regular)
}

.lp-pricing-matrix-link {
    color: var(--alpy-ui-color-text-link);
    font: inherit;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--alpy-ui-border-width-1);
    text-underline-offset: var(--alpy-ui-space-2)
}

.lp-pricing-matrix-status {
    border-radius: var(--alpy-ui-radius-full);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    display: inline-flex
}

.lp-pricing-matrix-status.is-yes {
    background: var(--alpy-ui-color-functional-success-subtle);
    color: var(--alpy-ui-color-text-functional-success-strong)
}

.lp-pricing-matrix-status.is-no {
    background: var(--alpy-ui-color-functional-danger-subtle);
    color: var(--alpy-ui-color-text-functional-danger)
}

@media (width<=1024px) {
    .lp-pricing-faq-section {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        margin-block-start:var(--alpy-ui-space-48)}
}

@media (width<=744px) {
    .lp-export-logos {
        grid-template-columns: repeat(4,1fr)
    }
}

@media (width<=600px) {
    .lp-hero-h1,.lp-hero-h1-light,.lp-section-title {
        font-size: var(--alpy-ui-font-heading-large-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-large-letterSpacing);
        line-height: var(--alpy-ui-font-heading-large-lineHeight)
    }

    .lp-feature-card-text h3,.lp-feature-card-h3,.lp-showcase-heading {
        font-size: var(--alpy-ui-font-heading-medium-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-medium-letterSpacing);
        line-height: var(--alpy-ui-font-heading-medium-lineHeight)
    }

    .lp-pricing-card-headline,.lp-pricing-card-name {
        font-size: var(--alpy-ui-font-heading-small-fontSize);
        letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
        line-height: var(--alpy-ui-font-heading-small-lineHeight)
    }

    .lp-section-header {
        padding: var(--alpy-ui-space-48) var(--alpy-ui-space-20) var(--alpy-ui-space-32)
    }

    .lp-feature-card-body,.lp-feature-card-body--wide {
        padding: var(--alpy-ui-space-24)
    }

    .lp-feature-card-img,.lp-feature-card-img--type,.lp-feature-card-img--color,.lp-feature-card-img--components {
        padding: var(--alpy-ui-size-0) var(--alpy-ui-space-24) var(--alpy-ui-space-24)
    }

    .lp-showcase-body {
        padding: var(--alpy-ui-space-24)
    }

    .lp-hero {
        padding-top: var(--alpy-ui-space-32)
    }

    .lp-pricing,.lp-showcase {
        padding-inline:var(--alpy-ui-space-20)}

    .lp-hero,.lp-hero-content,.lp-hero-headlines {
        text-align: left;
        align-items: flex-start
    }

    .lp-hero-gallery {
        height: auto
    }

    .lp-hero-gallery-track {
        gap: var(--alpy-ui-space-16);
        flex-direction: column;
        width: 100%;
        height: auto;
        display: flex;
        position: relative;
        left: auto;
        transform: none
    }

    .lp-hero-shot,.lp-hero-shot--bl,.lp-hero-shot--br,.lp-hero-shot--center {
        width: 100%;
        height: auto;
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none
    }

    .lp-hero-shot-frame img {
        width: 100%;
        height: auto
    }

    .lp-hero-shot--bl,.lp-hero-shot--br,.lp-hero-shot--center {
        animation: none!important
    }

    .lp-section-header {
        text-align: left;
        align-items: flex-start
    }

    .lp-ai-ready-panel {
        padding: var(--alpy-ui-space-24)
    }

    .lp-feature-row-full {
        padding-bottom: var(--alpy-ui-size-0)
    }

    .lp-ai-ready {
        padding-block:var(--alpy-ui-space-24) var(--alpy-ui-size-0)}

    .lp-section-header--ai-ready {
        padding-top: var(--alpy-ui-size-0)
    }

    .lp-section-header--benefits {
        padding-top: var(--alpy-ui-space-24)
    }

    .lp-pricing {
        padding-block:var(--alpy-ui-size-0) var(--alpy-ui-space-16)}
}

@property --hpx-progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0
}

.hpx-hero {
    --hpx-scale: min(calc(100vw / 1440px), calc((100dvh - var(--shell-top-bar-height) - var(--alpy-ui-border-width-1)) / 760px));
    min-height: calc(100dvh - var(--shell-top-bar-height) - var(--alpy-ui-border-width-1));
    padding: var(--alpy-ui-space-32) var(--alpy-ui-space-20) calc(var(--alpy-ui-space-60) + var(--shell-top-bar-height));
    place-items: center;
    display: grid;
    position: relative;
    overflow: hidden;
    top: 100px;
}

.hpx-stage {
    height: calc(675px * var(--hpx-scale));
    width: calc(1200px * var(--hpx-scale));
    grid-area: 1/1;
    position: relative;
    overflow: visible
}

.hpx-rings {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: visible
}

.hpx-ring {
    stroke: url(#hpx-ring-fade);
    stroke-width: 1px
}

.hpx-ring-accent {
    stroke: url(#hpx-accent-gradient);
    stroke-linecap: round;
    stroke-width: 1.75px
}

.hpx-logo {
    --hpx-a-now: calc(var(--hpx-a) + var(--hpx-progress,0) * 8deg * var(--hpx-direction,1));
    background: var(--alpy-ui-color-surface-canvas);
    box-shadow: 0 calc(20px * var(--hpx-scale)) calc(48px * var(--hpx-scale)) color-mix(in srgb, currentColor 9%, transparent), 0 calc(6px * var(--hpx-scale)) calc(16px * var(--hpx-scale)) color-mix(in srgb, currentColor 6%, transparent), 0 calc(1px * var(--hpx-scale)) calc(3px * var(--hpx-scale)) color-mix(in srgb, currentColor 5%, transparent);
    color: var(--alpy-ui-color-text-body);
    height: calc(var(--hpx-size) * var(--hpx-scale));
    left: calc(50% + var(--hpx-r) * var(--hpx-scale) * cos(var(--hpx-a-now)) - var(--hpx-size) * var(--hpx-scale) / 2);
    top: calc(50% + var(--hpx-r) * var(--hpx-scale) * sin(var(--hpx-a-now)) - var(--hpx-size) * var(--hpx-scale) / 2 - 16px * var(--hpx-scale));
    width: calc(var(--hpx-size) * var(--hpx-scale));
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute
}

.hpx-logo-img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block
}

.hpx-logo-img--logo {
    opacity: clamp(0, calc((var(--hpx-swap-start,0) + .3 - var(--hpx-progress,0)) / .3), 1)
}

.hpx-logo-img--token {
    background-color: var(--alpy-ui-color-shades-brand-color-one-strong-one);
    height: 55%;
    -webkit-mask-image: var(--hpx-token-icon);
    mask-image: var(--hpx-token-icon);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--hpx-token-icon);
    width: 55%;
    opacity: clamp(0, calc((var(--hpx-progress,0) - var(--hpx-swap-start,0)) / .3), 1);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-mask-position: 50%;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat
}

.hpx-logo:hover .product-tooltip.is-floating,.hpx-logo:focus-within .product-tooltip.is-floating,.hpx-logo.is-auto-tooltip-active .product-tooltip.is-floating {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.hpx-logo .product-tooltip.is-hover-card.is-floating {
    width: 300px;
    min-width: 300px;
    max-width: 300px
}

.hpx-content {
    align-items: center;
    gap: calc(var(--alpy-ui-space-32) * var(--hpx-scale));
    max-width: calc((3 * var(--alpy-ui-size-200) + var(--alpy-ui-size-40)) * var(--hpx-scale));
    text-align: center;
    z-index: 1;
    flex-direction: column;
    grid-area: 1/1;
    width: 100%;
    display: flex;
    position: relative
}

.hpx-headlines {
    text-align: center;
    flex-direction: column;
    width: 100%;
    display: flex
}

.hpx-h1 {
    color: var(--alpy-ui-color-text-heading);
    font-size: calc(var(--alpy-ui-font-heading-xxlarge-fontSize) * var(--hpx-scale));
    font-weight: var(--alpy-ui-font-weight-black);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: calc(var(--alpy-ui-font-heading-xxlarge-lineHeight) * var(--hpx-scale));
    margin: 0
}

.hpx-h1-light {
    color: var(--alpy-ui-color-text-heading);
    font-size: calc(var(--alpy-ui-font-heading-xxlarge-fontSize) * var(--hpx-scale));
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: calc(var(--alpy-ui-font-heading-xxlarge-lineHeight) * var(--hpx-scale));
    margin: 0
}

.hpx-body {
    color: var(--alpy-ui-color-text-body);
    font-size: calc(var(--alpy-ui-font-body-large-fontSize) * var(--hpx-scale));
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: calc(var(--alpy-ui-font-body-large-lineHeight) * var(--hpx-scale));
    max-width: calc(3 * var(--alpy-ui-size-200) * var(--hpx-scale));
    margin: 0
}

@media (width<=744px) {
    .hpx-stage {
        display: none
    }

    .hpx-hero {
        min-height: 0;
        padding-block:var(--alpy-ui-space-32)}

    .hpx-content {
        align-items: flex-start;
        gap: var(--alpy-ui-space-24);
        text-align: left;
        max-width: 100%
    }

    .hpx-headlines {
        text-align: left;
        width: 100%
    }

    .hpx-h1,.hpx-h1-light {
        font-size: var(--alpy-ui-font-heading-large-fontSize);
        line-height: var(--alpy-ui-font-heading-large-lineHeight)
    }

    .hpx-body {
        font-size: var(--alpy-ui-font-body-large-fontSize);
        line-height: var(--alpy-ui-font-body-large-lineHeight);
        text-align: left;
        max-width: 100%
    }
}

.flow {
    position: relative
}

.flow-pin {
    height: 950dvh
}

.flow-pin-inner {
    height: 100dvh;
    position: sticky;
    top: 0;
    overflow: hidden
}

.flow-scale {
    width: 1440px;
    height: 900px;
    transform: translate(-50%, -50%) scale(var(--flow-fit,1));
    transform-origin: 50%;
    flex-direction: column;
    align-items: center;
    padding-top: 96px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%
}

.flow-toolbar {
    z-index: 3;
    background: #fff;
    border: 1px solid #e7e9ef;
    border-radius: 16px;
    gap: 6px;
    padding: 8px;
    display: inline-flex;
    box-shadow: 0 12px 32px #0f172a1a
}

.flow-toolbar-btn {
    color: #0b1020;
    width: 56px;
    height: 56px;
    transform: translateY(calc(var(--active,0) * -1px));
    background: #fff;
    border: 1px solid #eceef3;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.flow-toolbar-btn:after {
    content: "";
    opacity: var(--active,0);
    pointer-events: none;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    position: absolute;
    inset: -1px;
    box-shadow: 0 0 0 3px #6366f12e
}

.flow-toolbar-btn :is(svg,img) {
    z-index: 1;
    width: 26px;
    height: 26px;
    position: relative
}

.flow-stage {
    flex: 1;
    width: 100%;
    margin-top: 36px;
    position: relative
}

.flow-slot {
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 360px;
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

.flow-card {
    background: #fff;
    border: 1px solid #e7e9ef;
    border-radius: 16px;
    width: 100%;
    padding: 4px;
    box-shadow: 0 18px 44px #0f172a1f
}

.flow-card--color {
    width: 280px;
    padding: 14px
}

.flow-card--type .type-control-panel>.type-control-section:nth-child(n+3),.flow-card--type .product-reset-button-anchor {
    display: none
}

.flow-card--type .type-control-panel>.type-control-section:nth-child(2) {
    border-bottom: none
}

.flow-card--type .flow-desc-wrap--inset {
    padding-left: var(--alpy-ui-space-20);
    padding-right: var(--alpy-ui-space-20)
}

.flow-desc-wrap {
    flex-direction: column;
    align-items: center;
    width: 360px;
    display: flex
}

.flow-desc-wrap--inset {
    width: 100%;
    overflow: hidden
}

.flow-desc {
    color: #fff;
    background: #2440d8;
    border-radius: 14px;
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.5
}

.flow-card--color .color-picker-contrast {
    display: none
}

.flow-hand {
    left: var(--hand-x,50%);
    top: var(--hand-y,50%);
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px #0f172a47);
    width: 28px;
    height: 28px;
    position: absolute;
    transform: translate(-50%,-50%)
}

.flow-hand-icon {
    transform-origin: 43% 12%;
    transform: scale(var(--press,1));
    display: block
}

.flow-hand-ring {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    transform: scale(var(--ring-scale,.25));
    opacity: var(--ring-opacity,0);
    background: #2255c22e;
    border: 3px solid #2255c2f2;
    border-radius: 50%;
    margin: -14px 0 0 -14px;
    position: absolute;
    top: 12%;
    left: 43%
}

.flow[data-compact=true].flow-pin {
    height: 820dvh
}

.flow[data-compact=true] .flow-scale {
    width: 390px;
    height: 900px;
    padding-top: 72px
}

.flow[data-compact=true] .flow-toolbar {
    border-radius: 14px;
    gap: 4px;
    padding: 6px
}

.flow[data-compact=true] .flow-toolbar-btn {
    border-radius: 10px;
    width: 48px;
    height: 48px
}

.flow[data-compact=true] .flow-toolbar-btn :is(svg,img) {
    width: 23px;
    height: 23px
}

.flow[data-compact=true] .flow-stage {
    margin-top: 28px
}

.flow[data-compact=true] .flow-slot {
    width: 360px
}

.flow[data-compact=true] .flow-card {
    box-shadow: 0 18px 44px #0f172a1f
}

.flow-connector-layer {
    pointer-events: none;
    position: fixed;
    inset: 0
}

.flow-connector-line {
    background: repeating-linear-gradient(#c2c8d6 0 7px,#0000 7px 15px);
    position: absolute
}

.flow-connector-reveal {
    pointer-events: none;
    position: absolute;
    inset: 23% 0 0
}

.flow-connector-dot {
    background: #2440d8;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%)
}

@media (prefers-reduced-motion:reduce) {
    .flow-hand {
        display: none
    }
}

.comp-showcase {
    color: #fff;
    position: relative
}

.comp-showcase-pin {
    height: 260dvh;
    margin-top: var(--comp-overlap,-320px);
    --comp-card-size: clamp(11px, 1.04vw, 20px)
}

.comp-showcase-inner {
    top: var(--comp-sticky-top,0px);
    box-sizing: border-box;
    background: var(--alpy-ui-color-shades-brand-color-one-strong-one);
    flex-direction: column;
    padding-block:100px;display: flex;
    position: sticky;
    overflow: hidden
}

.comp-showcase-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
    padding: 0 24px;
    display: flex
}

.comp-showcase .lp-section-title {
    color: #fff;
    font-weight: var(--alpy-ui-font-weight-bold)
}

.comp-showcase .lp-rotate-word-text {
    color: #fff;
    text-decoration-color: #ffffffeb
}

.comp-showcase-helper {
    color: #ffffffd1;
    max-width: 640px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 1.5
}

.comp-showcase-rows {
    flex-direction: column;
    gap: 22px;
    display: flex
}

.comp-showcase-row {
    width: 100%;
    position: relative
}

.comp-showcase-strip {
    will-change: transform;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
    display: inline-flex;
    position: relative;
    left: 50%
}

.comp-showcase[data-compact=true].comp-showcase-pin {
    --comp-card-size: 12px;
    height: 240dvh
}

.comp-showcase[data-compact=true] .comp-showcase-inner {
    padding-block:64px}

.comp-showcase[data-compact=true] .comp-showcase-head {
    margin-bottom: 40px;
    padding-inline:20px}

.comp-showcase[data-compact=true] .comp-showcase-helper {
    max-width: 320px;
    font-size: 14px
}

.comp-showcase[data-compact=true] .comp-showcase-rows {
    gap: 14px
}

.comp-card {
    font-size: var(--comp-card-size,15px);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    background: #fff;
    border: 1px solid #e7e9ef;
    border-radius: .933em;
    align-items: center;
    gap: .8em;
    padding: .667em 1.2em .667em .667em;
    display: inline-flex;
    box-shadow: 0 .667em 1.733em #0f172a1f
}

.comp-card-tile {
    color: #fff;
    border-radius: .667em;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 2.667em;
    height: 2.667em;
    display: inline-flex
}

.comp-card-tile svg {
    width: 1.467em;
    height: 1.467em;
    display: block
}

.comp-card-tile[data-tone=blue] {
    background: #2255c2
}

.comp-card-tile[data-tone=green] {
    background: #2e9e5b
}

.comp-card-tile[data-tone=amber] {
    background: #f59e0b
}

.comp-card-label {
    color: #0b1020;
    font-size: 1em;
    font-weight: 600;
    line-height: 1
}

body:has(.hpx-root) .app-footer {
    display: none
}

.hpx-root {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    min-height: calc(100dvh - var(--shell-top-bar-height) - var(--alpy-ui-border-width-1));
    width: 100%
}

.main-content.is-alpy-mcp-main {
    padding: var(--alpy-ui-space-0)
}

.alpy-mcp-page {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    min-height: calc(100dvh - var(--shell-top-bar-height));
    width: 100%;
    display: flow-root
}

.alpy-mcp-layout {
    max-width: var(--shell-content-width);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-80) var(--alpy-ui-space-24) var(--alpy-ui-space-24);
    width: 100%;
    margin-inline:auto}

.alpy-mcp-main {
    gap: var(--alpy-ui-space-64);
    min-width: var(--alpy-ui-size-0);
    width: 100%;
    display: grid
}

.alpy-mcp-page a {
    text-decoration: underline;
    text-decoration-thickness: var(--alpy-ui-border-width-1);
    text-underline-offset: var(--alpy-ui-space-4)
}

.alpy-mcp-connect-card {
    background-color: var(--alpy-ui-color-surface-canvas);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--alpy-ui-color-shades-brand-color-one-subtle-one) 60%, transparent) 0%, var(--alpy-ui-color-surface-canvas) 44%);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-large);
    gap: var(--alpy-ui-space-48);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48);
    display: grid;
    position: relative;
    overflow: hidden
}

.alpy-mcp-connect-overview {
    gap: var(--alpy-ui-space-48);
    grid-template-areas: "intro apps";
    grid-template-columns: minmax(var(--alpy-ui-size-0), .48fr) minmax(var(--alpy-ui-size-0), .52fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-connect-intro,.alpy-mcp-connect-copy,.alpy-mcp-activation,.alpy-mcp-activation-copy,.alpy-mcp-connect-tools,.alpy-mcp-connect-tools ul,.alpy-mcp-terminal-setup,.alpy-mcp-terminal-grid,.alpy-mcp-app-panel,.alpy-mcp-ai-tool-helper,.alpy-mcp-content-section,.alpy-mcp-section-heading,.alpy-mcp-section-body {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-connect-intro {
    align-content: start;
    gap: var(--alpy-ui-space-32);
    grid-area: intro
}

.alpy-mcp-connect-copy {
    gap: var(--alpy-ui-space-24)
}

.alpy-mcp-connect-copy h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-heading-large-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-connect-subheading {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-connect-body {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-connect-copy strong {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: var(--alpy-ui-font-weight-bold)
}

.alpy-mcp-connect-actions {
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    flex-wrap: wrap;
    display: flex
}

.alpy-mcp-connect-actions .product-button {
    justify-content: center
}

.alpy-mcp-connect-button.is-connected.product-button,.alpy-mcp-connect-button.is-connected.product-button:hover,.alpy-mcp-connect-button.is-connected.product-button:active,.alpy-mcp-connect-button.is-connected.product-button:focus-visible {
    background: var(--alpy-ui-color-functional-success-strong);
    border-color: var(--alpy-ui-color-border-functional-success);
    color: var(--alpy-ui-color-text-inverse);
    cursor: default
}

.alpy-mcp-app-panel {
    border-inline-start:var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);align-content: start;
    gap: var(--alpy-ui-space-24);
    grid-area: apps;
    padding-inline-start:var(--alpy-ui-space-48)}

.alpy-mcp-app-panel h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-activation {
    align-content: start;
    gap: var(--alpy-ui-space-24)
}

.alpy-mcp-activation-copy {
    gap: var(--alpy-ui-space-12)
}

.alpy-mcp-connect-tools {
    align-content: start;
    gap: var(--alpy-ui-space-24)
}

.alpy-mcp-activation h3,.alpy-mcp-connect-tools h3 {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    text-transform: uppercase
}

.alpy-mcp-activation-copy p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-connect-tools ul {
    align-items: center;
    gap: var(--alpy-ui-space-20);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-0);
    flex-wrap: wrap;
    list-style: none;
    display: flex
}

.alpy-mcp-connect-tools li {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    grid-template-columns: var(--alpy-ui-size-28) auto;
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-tool-logo {
    height: var(--alpy-ui-size-28);
    width: var(--alpy-ui-size-28);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.alpy-mcp-tool-logo img {
    max-width: 100%;
    max-height: 100%;
    display: block
}

.alpy-mcp-steps {
    gap: var(--alpy-ui-space-12);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.alpy-mcp-steps li {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: var(--alpy-ui-size-36) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-step-number {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    height: var(--alpy-ui-size-28);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    width: var(--alpy-ui-size-28);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.alpy-mcp-steps li>span:last-child {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-terminal-setup {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    gap: var(--alpy-ui-space-32);
    padding-top: var(--alpy-ui-space-48)
}

.alpy-mcp-install-layout {
    gap: var(--alpy-ui-space-48);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-install-command,.alpy-mcp-install-steps {
    min-width: var(--alpy-ui-size-0);
    align-content: start;
    gap: var(--alpy-ui-space-20);
    display: grid
}

.alpy-mcp-content-section {
    gap: var(--alpy-ui-space-24);
    scroll-margin-top: calc(var(--alpy-ui-size-64) + var(--alpy-ui-space-32))
}

.alpy-mcp-section-heading {
    gap: var(--alpy-ui-space-12);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-128))
}

.alpy-mcp-section-heading h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-section-heading p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-section-body {
    gap: var(--alpy-ui-space-24)
}

.alpy-mcp-overview-table-wrap {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-0);
    overflow: hidden
}

.alpy-mcp-overview-table {
    background: var(--alpy-ui-color-surface-canvas);
    border-collapse: collapse;
    color: var(--alpy-ui-color-text-body);
    table-layout: fixed;
    width: 100%
}

.alpy-mcp-overview-table th,.alpy-mcp-overview-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-28);
    text-align: left;
    vertical-align: top
}

.alpy-mcp-overview-table thead th {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.alpy-mcp-overview-table tbody tr:last-child th,.alpy-mcp-overview-table tbody tr:last-child td {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.alpy-mcp-overview-table tbody th {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    width: 28%
}

.alpy-mcp-overview-table tbody td {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    overflow-wrap: anywhere
}

.alpy-mcp-overview-table thead th:nth-child(2),.alpy-mcp-overview-table thead th:nth-child(3),.alpy-mcp-overview-table tbody td {
    width: 36%
}

.alpy-mcp-overview-area {
    align-items: center;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: var(--alpy-ui-size-28) minmax(var(--alpy-ui-size-0), 1fr);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-overview-icon {
    --product-icon-size: var(--alpy-ui-icon-size-24);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.alpy-mcp-overview-cell,.alpy-mcp-overview-tools {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-overview-cell p {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-overview-cell a {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: inherit
}

.alpy-mcp-overview-tools {
    margin-top: var(--alpy-ui-space-8)
}

.alpy-mcp-overview-tools>span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.alpy-mcp-context-choice {
    gap: var(--alpy-ui-space-28);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-context-choice-heading {
    gap: var(--alpy-ui-space-16);
    max-width: calc(var(--alpy-ui-size-750) + var(--alpy-ui-size-200));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-context-choice-heading h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-medium-fontFamily);
    font-size: var(--alpy-ui-font-heading-medium-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-context-choice-heading p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-context-choice-cards {
    gap: var(--alpy-ui-space-24);
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-context-choice-card {
    --alpy-mcp-context-accent: var(--alpy-ui-color-text-brand-color-one-accent);
    --alpy-mcp-context-accent-soft: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --alpy-mcp-context-chip-bg: var(--alpy-ui-color-shades-brand-color-one-subtle-two);
    --alpy-mcp-context-border: var(--alpy-ui-color-border-neutral-subtle-two);
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-mcp-context-border);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-0);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

.alpy-mcp-context-choice-card.is-live {
    --alpy-mcp-context-accent: var(--alpy-ui-color-text-brand-color-one-accent);
    --alpy-mcp-context-accent-soft: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    --alpy-mcp-context-chip-bg: var(--alpy-ui-color-shades-brand-color-one-subtle-two)
}

.alpy-mcp-context-choice-card.is-portable {
    --alpy-mcp-context-accent: var(--alpy-ui-color-text-brand-color-three-accent);
    --alpy-mcp-context-accent-soft: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    --alpy-mcp-context-chip-bg: var(--alpy-ui-color-shades-brand-color-three-subtle-two)
}

.alpy-mcp-context-choice-card-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--alpy-mcp-context-accent-soft) 40%, transparent), var(--alpy-ui-color-surface-canvas));
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-mcp-context-border);
    align-items: center;
    gap: var(--alpy-ui-space-20);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 7fr) minmax(var(--alpy-ui-size-0), 3fr);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-24);
    display: grid
}

.alpy-mcp-context-choice-card-copy {
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-context-choice-chip {
    background: var(--alpy-mcp-context-chip-bg);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-mcp-context-border);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0);
    opacity: .5;
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-12);
    text-transform: uppercase;
    white-space: nowrap;
    place-self: start;
    display: inline-flex
}

.alpy-mcp-context-choice-title-row {
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-context-choice-card h3,.alpy-mcp-context-choice-card-hero p:not(.alpy-mcp-context-choice-chip),.alpy-mcp-context-choice-item-copy strong,.alpy-mcp-context-choice-item-copy span {
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-context-choice-card h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.alpy-mcp-context-choice-card-hero p:not(.alpy-mcp-context-choice-chip) {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.alpy-mcp-context-choice-visual {
    block-size: calc((var(--alpy-ui-size-128) + var(--alpy-ui-size-32)) * .7);
    min-width: var(--alpy-ui-size-0);
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden
}

.alpy-mcp-context-choice-svg {
    object-fit: contain;
    block-size: 100%;
    inline-size: auto;
    max-inline-size: 100%;
    display: block
}

.alpy-mcp-context-choice-card.is-portable .alpy-mcp-context-choice-svg {
    transform: translateX(var(--alpy-ui-space-16))
}

.alpy-mcp-context-choice-card ul {
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-28) var(--alpy-ui-space-24);
    list-style: none;
    display: grid
}

.alpy-mcp-context-choice-card li {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: start;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-0);
    display: flex
}

.alpy-mcp-context-choice-card li:last-child {
    border-bottom-width: var(--alpy-ui-border-width-0)
}

.alpy-mcp-context-choice-item-icon {
    --product-icon-size: var(--alpy-ui-icon-size-32);
    block-size: var(--alpy-ui-size-32);
    color: var(--alpy-mcp-context-accent);
    inline-size: var(--alpy-ui-size-32);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.alpy-mcp-context-choice-item-copy {
    gap: var(--alpy-ui-space-2);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-context-choice-item-copy strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.alpy-mcp-context-choice-item-copy span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.alpy-mcp-ai-tool-helper {
    gap: var(--alpy-ui-space-8)
}

.alpy-mcp-ai-tool-helper p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-ai-logo-list {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    flex-wrap: nowrap;
    list-style: none;
    display: flex
}

.alpy-mcp-ai-logo-list li {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    min-width: var(--alpy-ui-size-0);
    display: flex
}

.alpy-mcp-documentation-frame h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-documentation-frame p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-frame-list {
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-documentation-frame {
    background: color-mix(in srgb, var(--alpy-ui-color-shades-neutral-subtle-one) 60%, transparent);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-example-showcase {
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-none);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    background: 0 0;
    display: grid
}

.alpy-mcp-example-stage {
    background: linear-gradient(180deg, color-mix(in srgb, var(--alpy-ui-color-shades-brand-color-one-subtle-one) 46%, var(--alpy-ui-color-surface-canvas)) 0%, var(--alpy-ui-color-surface-canvas) 100%);
    border-radius: var(--alpy-ui-radius-medium);
    gap: var(--alpy-ui-space-24);
    grid-template-columns: minmax(var(--alpy-ui-size-0), .92fr) minmax(var(--alpy-ui-size-0), 1.2fr);
    min-height: calc(var(--alpy-ui-size-128) * 3);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-48) var(--alpy-ui-space-32);
    display: grid
}

.alpy-mcp-example-list {
    min-width: var(--alpy-ui-size-0);
    flex-direction: column;
    align-content: start;
    display: flex
}

.alpy-mcp-example-item {
    --alpy-mcp-example-icon-color: var(--alpy-ui-color-shades-brand-color-one-strong-one);
    min-width: var(--alpy-ui-size-0);
    justify-items: start;
    display: grid
}

.alpy-mcp-example-item[data-example-tone="2"],.alpy-mcp-example-item[data-example-tone="7"] {
    --alpy-mcp-example-icon-color: var(--alpy-ui-color-shades-brand-color-two-strong-one)
}

.alpy-mcp-example-item[data-example-tone="3"],.alpy-mcp-example-item[data-example-tone="8"] {
    --alpy-mcp-example-icon-color: var(--alpy-ui-color-shades-brand-color-three-strong-one)
}

.alpy-mcp-example-item[data-example-tone="5"] {
    --alpy-mcp-example-icon-color: var(--alpy-ui-color-shades-brand-color-one-strong-two)
}

.alpy-mcp-example-item[data-example-tone="6"] {
    --alpy-mcp-example-icon-color: var(--alpy-ui-color-shades-brand-color-three-strong-two)
}

.alpy-mcp-example-icon-shell {
    color: var(--alpy-mcp-example-icon-color);
    inline-size: var(--alpy-ui-icon-size-32);
    place-items: center;
    display: grid
}

.alpy-mcp-example-icon {
    inline-size: var(--alpy-ui-icon-size-32);
    max-inline-size: 100%
}

.alpy-mcp-example-heading {
    appearance: none;
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-heading);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-16);
    min-height: var(--alpy-ui-size-56);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-24) var(--alpy-ui-space-12) var(--alpy-ui-space-12);
    text-align: start;
    background: 0 0;
    justify-content: flex-start;
    display: inline-flex
}

.alpy-mcp-example-item[data-open=true] .alpy-mcp-example-heading {
    background: var(--alpy-ui-color-surface-canvas)
}

.alpy-mcp-example-heading:hover,.alpy-mcp-example-heading:focus-visible {
    background: var(--alpy-ui-color-surface-canvas);
    outline: none
}

.alpy-mcp-example-heading:focus-visible {
    box-shadow: 0 0 0 var(--alpy-ui-border-width-2) var(--alpy-ui-color-border-brand-color-one-strong-three)
}

.alpy-mcp-example-heading>span:last-child {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    overflow-wrap: anywhere
}

.alpy-mcp-example-content {
    align-items: stretch;
    column-gap: var(--alpy-ui-space-16);
    grid-template-columns: var(--alpy-ui-icon-size-32) minmax(var(--alpy-ui-size-0), 1fr);
    margin-block:var(--alpy-ui-space-0);min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-12);
    display: grid;
    overflow: hidden
}

.alpy-mcp-example-line {
    background-image: repeating-linear-gradient(to bottom, var(--alpy-ui-color-text-heading) 0, var(--alpy-ui-color-text-heading) var(--alpy-ui-space-4), transparent var(--alpy-ui-space-4), transparent var(--alpy-ui-space-8));
    background-position: center var(--alpy-ui-space-8);
    background-repeat: no-repeat;
    background-size: var(--alpy-ui-border-width-1) calc(100% - var(--alpy-ui-space-8));
    min-height: var(--alpy-ui-size-0);
    width: var(--alpy-ui-border-width-1);
    grid-row: 1/-1;
    place-self: stretch center
}

.alpy-mcp-example-content p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0);
    max-width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-128));
    align-self: start;
    margin-block-start:var(--alpy-ui-space-8)}

.alpy-mcp-example-preview {
    min-height: 100%;
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-example-preview-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-medium);
    align-content: start;
    gap: var(--alpy-ui-space-16);
    min-height: 100%;
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-32);
    display: grid;
    overflow: auto
}

.alpy-mcp-example-preview-heading {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    justify-content: space-between;
    display: flex
}

.alpy-mcp-example-preview-heading>span {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-example-preview-card p {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-example-copy {
    appearance: none;
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-xlarge);
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-12);
    white-space: nowrap;
    justify-self: start;
    display: inline-flex
}

.alpy-mcp-example-copy:hover,.alpy-mcp-example-copy:focus-visible {
    border-color: var(--alpy-ui-color-border-neutral-subtle-one);
    color: var(--alpy-ui-color-text-heading);
    outline: none
}

.alpy-mcp-example-copy:focus-visible {
    box-shadow: 0 0 0 var(--alpy-ui-border-width-2) var(--alpy-ui-color-border-brand-color-one-strong-three)
}

.alpy-mcp-example-copy .product-ui-icon {
    color: var(--alpy-ui-color-text-body-subtle);
    height: var(--alpy-ui-icon-size-16);
    width: var(--alpy-ui-icon-size-16)
}

.alpy-mcp-example-copy:hover .product-ui-icon,.alpy-mcp-example-copy:focus-visible .product-ui-icon {
    color: var(--alpy-ui-color-text-heading)
}

.alpy-mcp-documentation-frame {
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-24)
}

.alpy-mcp-management-accordion.components-canonical-accordion-shell {
    --library-component-accordion-content-background: var(--alpy-ui-component-accordion-styles-basic-contentBg-default);
    --library-component-accordion-content-font-family: var(--alpy-ui-font-body-fontFamily);
    --library-component-accordion-content-font-size: var(--alpy-ui-font-body-fontSize);
    --library-component-accordion-content-font-weight: var(--alpy-ui-font-body-fontWeight);
    --library-component-accordion-content-letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    --library-component-accordion-content-line-height: var(--alpy-ui-font-body-lineHeight);
    --library-component-accordion-content-padding-bottom: var(--alpy-ui-component-accordion-basic-space-content-padding-bottom);
    --library-component-accordion-content-padding-x: var(--alpy-ui-component-accordion-basic-space-content-padding-x);
    --library-component-accordion-content-text: var(--alpy-ui-component-accordion-styles-basic-contentText-default);
    --library-component-accordion-divider: var(--alpy-ui-component-accordion-styles-basic-divider-default);
    --library-component-accordion-divider-width: var(--alpy-ui-component-accordion-basic-border-divider-width);
    --library-component-accordion-focus-ring: var(--alpy-ui-component-accordion-styles-basic-focusRing-default);
    --library-component-accordion-gap: var(--alpy-ui-component-accordion-basic-gap);
    --library-component-accordion-header-background: var(--alpy-ui-component-accordion-styles-basic-headerBg-default);
    --library-component-accordion-header-font-family: var(--alpy-ui-font-body-large-fontFamily);
    --library-component-accordion-header-font-size: var(--alpy-ui-font-body-large-fontSize);
    --library-component-accordion-header-font-weight: var(--alpy-ui-font-body-large-fontWeight);
    --library-component-accordion-header-height: var(--alpy-ui-component-accordion-basic-size-header-height);
    --library-component-accordion-header-letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    --library-component-accordion-header-line-height: var(--alpy-ui-font-body-large-lineHeight);
    --library-component-accordion-header-padding-x: var(--alpy-ui-component-accordion-basic-space-header-padding-x);
    --library-component-accordion-header-padding-y: var(--alpy-ui-component-accordion-basic-space-header-padding-y);
    --library-component-accordion-header-text: var(--alpy-ui-component-accordion-styles-basic-headerText-default);
    --library-component-accordion-icon: var(--alpy-ui-component-accordion-styles-basic-icon-default);
    --library-component-accordion-icon-size: var(--alpy-ui-component-accordion-basic-size-icon-size);
    --library-component-accordion-radius: var(--alpy-ui-component-accordion-basic-shape-radius);
    box-sizing: border-box;
    color: var(--library-component-accordion-content-text);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    width: 100%;
    display: grid
}

.alpy-mcp-management-accordion .components-canonical-accordion {
    border-radius: var(--library-component-accordion-radius);
    gap: var(--library-component-accordion-gap);
    width: 100%;
    display: grid;
    overflow: hidden
}

.alpy-mcp-management-accordion .components-canonical-accordion-item {
    background: var(--library-component-accordion-content-background);
    box-sizing: border-box;
    min-width: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.alpy-mcp-management-accordion .components-canonical-accordion-item:not(:last-child) {
    border-bottom: var(--library-component-accordion-divider-width) solid var(--library-component-accordion-divider)
}

.alpy-mcp-management-accordion .components-canonical-accordion-item:hover {
    --library-component-accordion-content-background: var(--alpy-ui-component-accordion-styles-basic-contentBg-hover);
    --library-component-accordion-content-text: var(--alpy-ui-component-accordion-styles-basic-contentText-hover);
    --library-component-accordion-divider: var(--alpy-ui-component-accordion-styles-basic-divider-hover);
    --library-component-accordion-header-background: var(--alpy-ui-component-accordion-styles-basic-headerBg-hover);
    --library-component-accordion-header-text: var(--alpy-ui-component-accordion-styles-basic-headerText-hover);
    --library-component-accordion-icon: var(--alpy-ui-component-accordion-styles-basic-icon-hover)
}

.alpy-mcp-management-accordion .components-canonical-accordion-item:focus-within {
    --library-component-accordion-content-background: var(--alpy-ui-component-accordion-styles-basic-contentBg-focus);
    --library-component-accordion-content-text: var(--alpy-ui-component-accordion-styles-basic-contentText-focus);
    --library-component-accordion-divider: var(--alpy-ui-component-accordion-styles-basic-divider-focus);
    --library-component-accordion-header-background: var(--alpy-ui-component-accordion-styles-basic-headerBg-focus);
    --library-component-accordion-header-text: var(--alpy-ui-component-accordion-styles-basic-headerText-focus);
    --library-component-accordion-icon: var(--alpy-ui-component-accordion-styles-basic-icon-focus)
}

.alpy-mcp-management-accordion .components-canonical-accordion-trigger {
    background: var(--library-component-accordion-header-background);
    border: var(--alpy-ui-border-width-0);
    box-sizing: border-box;
    color: var(--library-component-accordion-header-text);
    cursor: pointer;
    font-family: var(--library-component-accordion-header-font-family);
    font-size: var(--library-component-accordion-header-font-size);
    font-weight: var(--library-component-accordion-header-font-weight);
    align-items: center;
    gap: var(--library-component-accordion-gap);
    letter-spacing: var(--library-component-accordion-header-letter-spacing);
    line-height: var(--library-component-accordion-header-line-height);
    min-height: var(--library-component-accordion-header-height);
    padding: var(--library-component-accordion-header-padding-y) var(--library-component-accordion-header-padding-x);
    text-align: left;
    width: 100%;
    display: flex
}

.alpy-mcp-management-accordion .components-canonical-accordion-trigger:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--library-component-accordion-focus-ring);
    outline-offset: calc(-1 * var(--alpy-ui-border-width-2))
}

.alpy-mcp-management-accordion .components-canonical-accordion-trigger>span:not(.components-canonical-accordion-icon) {
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere;
    flex: auto
}

.alpy-mcp-management-accordion .components-canonical-accordion-icon {
    --product-icon-size: var(--library-component-accordion-icon-size);
    color: var(--library-component-accordion-icon);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.alpy-mcp-management-accordion .components-canonical-accordion-panel {
    background: var(--library-component-accordion-content-background);
    color: var(--library-component-accordion-content-text);
    padding: var(--alpy-ui-space-0) var(--library-component-accordion-content-padding-x) var(--library-component-accordion-content-padding-bottom)
}

.alpy-mcp-management-accordion .components-canonical-accordion-panel p {
    color: var(--library-component-accordion-content-text);
    font-family: var(--library-component-accordion-content-font-family);
    font-size: var(--library-component-accordion-content-font-size);
    font-weight: var(--library-component-accordion-content-font-weight);
    letter-spacing: var(--library-component-accordion-content-letter-spacing);
    line-height: var(--library-component-accordion-content-line-height);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-management-accordion .components-canonical-accordion-panel {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.alpy-mcp-management-details {
    gap: var(--alpy-ui-space-12);
    margin: var(--alpy-ui-space-0);
    display: grid
}

.alpy-mcp-management-details div {
    gap: var(--alpy-ui-space-4);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-management-details dt {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-transform: uppercase
}

.alpy-mcp-management-details dd {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-management-accordion .components-canonical-accordion-panel .alpy-mcp-note {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.alpy-mcp-text-scale-list,.alpy-mcp-semantic-group-list {
    gap: var(--alpy-ui-space-4);
    margin: var(--alpy-ui-space-12) var(--alpy-ui-space-0) var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-text-scale-list div,.alpy-mcp-semantic-group-list div {
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-text-scale-list dt,.alpy-mcp-text-scale-list dd,.alpy-mcp-semantic-group-list dt,.alpy-mcp-semantic-group-list dd {
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-0);
    display: inline
}

.alpy-mcp-text-scale-list dt,.alpy-mcp-semantic-group-list dt {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-bold)
}

.alpy-mcp-text-scale-list dt:after,.alpy-mcp-semantic-group-list dt:after {
    content: ": "
}

.alpy-mcp-text-scale-list dd,.alpy-mcp-semantic-group-list dd {
    color: var(--alpy-ui-color-text-body-subtle);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight)
}

.alpy-mcp-text-scale-note {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.alpy-mcp-tool-list {
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.alpy-mcp-tool-list li {
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-tool-list code {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    overflow-wrap: anywhere
}

.alpy-mcp-terminal-grid {
    gap: var(--alpy-ui-space-32);
    grid-template-columns: repeat(3, minmax(var(--alpy-ui-size-0), 1fr))
}

.alpy-mcp-terminal-grid .alpy-mcp-install-section:not(:first-child) {
    border-inline-start:var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);padding-inline-start: var(--alpy-ui-space-32)
}

.alpy-mcp-install-section,.alpy-mcp-install-block,.alpy-mcp-install-copy {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-install-section {
    align-content: start;
    gap: var(--alpy-ui-space-40)
}

.alpy-mcp-install-block {
    align-content: start;
    align-self: start;
    gap: var(--alpy-ui-space-24)
}

.alpy-mcp-install-copy {
    align-content: start;
    gap: var(--alpy-ui-space-12)
}

.alpy-mcp-install-section-head {
    gap: var(--alpy-ui-space-8);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-section-label {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-section-helper {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-install-copy h2,.alpy-mcp-install-copy h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-install-copy p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-command-card {
    min-width: var(--alpy-ui-size-0);
    display: grid;
    position: relative
}

.alpy-mcp-command {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-body);
    margin: var(--alpy-ui-space-0);
    max-width: 100%;
    padding: var(--alpy-ui-space-28) var(--alpy-ui-space-64) var(--alpy-ui-space-28) var(--alpy-ui-space-28);
    overflow-x: auto
}

.alpy-mcp-command code {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    white-space: pre-wrap;
    word-break: break-word
}

.alpy-mcp-command-copy.product-icon-button {
    position: absolute;
    inset-block-start: var(--alpy-ui-space-16);
    inset-inline-end: var(--alpy-ui-space-16)
}

.alpy-mcp-terminal-setup .alpy-mcp-command-card {
    justify-self: start;
    width: fit-content;
    max-width: 100%
}

.alpy-mcp-terminal-setup .alpy-mcp-command {
    box-sizing: border-box;
    width: fit-content
}

.alpy-mcp-terminal-setup .alpy-mcp-command code {
    white-space: nowrap;
    word-break: normal
}

.alpy-mcp-note {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-install-copy p a {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: var(--alpy-ui-font-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: var(--alpy-ui-border-width-1);
    text-underline-offset: var(--alpy-ui-space-4)
}

.alpy-mcp-install-copy p a:hover {
    color: var(--alpy-ui-color-text-heading)
}

.alpy-mcp-path-list {
    gap: var(--alpy-ui-space-20);
    margin: var(--alpy-ui-space-0);
    min-width: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    list-style: none;
    display: grid
}

.alpy-mcp-path-list li {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-width: var(--alpy-ui-size-0)
}

.alpy-mcp-path-list code {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    overflow-wrap: anywhere
}

.alpy-mcp-connect-modal.product-modal .product-modal-body {
    gap: var(--alpy-ui-space-16)
}

.alpy-mcp-connect-modal p {
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-connect-modal strong {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-bold)
}

.alpy-mcp-connect-modal a {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-weight: var(--alpy-ui-font-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: var(--alpy-ui-border-width-1);
    text-underline-offset: var(--alpy-ui-space-4)
}

.alpy-mcp-connect-modal a:hover {
    color: var(--alpy-ui-color-text-heading)
}

.alpy-mcp-final-cta {
    background: var(--alpy-ui-color-shades-brand-color-three-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-brand-color-three-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    align-items: center;
    gap: var(--alpy-ui-space-32);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-64));
    padding: var(--alpy-ui-space-48);
    display: grid
}

.alpy-mcp-final-cta>div {
    gap: var(--alpy-ui-space-12);
    max-width: calc(var(--alpy-ui-size-750) - var(--alpy-ui-size-128));
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.alpy-mcp-final-cta>div>p:first-child {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-final-cta h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-heading-large-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-heading-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.alpy-mcp-final-cta p {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-size-0);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

@media (width<=1280px) {
    .alpy-mcp-connect-overview {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) minmax(var(--alpy-ui-size-0), 1fr)
    }
}

@media (width<=980px) {
    .alpy-mcp-connect-overview,.alpy-mcp-install-layout,.alpy-mcp-terminal-grid,.alpy-mcp-context-choice-cards {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .alpy-mcp-context-choice-card {
        padding: var(--alpy-ui-space-28)
    }

    .alpy-mcp-example-stage {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .alpy-mcp-connect-overview {
        grid-template-areas: "intro""apps"
    }

    .alpy-mcp-app-panel,.alpy-mcp-terminal-grid .alpy-mcp-install-section:not(:first-child) {
        border-inline-start:var(--alpy-ui-border-width-0);border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        padding-inline-start:var(--alpy-ui-space-0);padding-top: var(--alpy-ui-space-32)
    }
}

@media (width<=760px) {
    .alpy-mcp-layout {
        padding: var(--alpy-ui-space-80) var(--alpy-ui-space-16) var(--alpy-ui-space-24)
    }

    .alpy-mcp-main {
        gap: var(--alpy-ui-space-48)
    }

    .alpy-mcp-connect-card {
        border-radius: var(--alpy-ui-radius-medium);
        padding: var(--alpy-ui-space-32) var(--alpy-ui-space-24)
    }

    .alpy-mcp-connect-copy h1 {
        font-family: var(--alpy-ui-font-heading-medium-fontFamily);
        font-size: var(--alpy-ui-font-heading-medium-fontSize);
        line-height: var(--alpy-ui-font-heading-medium-lineHeight)
    }

    .alpy-mcp-connect-actions .product-button {
        width: 100%
    }

    .alpy-mcp-terminal-setup {
        padding-top: var(--alpy-ui-space-32)
    }

    .alpy-mcp-example-showcase {
        padding: var(--alpy-ui-space-24)
    }

    .alpy-mcp-example-stage {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        min-height: auto;
        padding: var(--alpy-ui-space-24)
    }

    .alpy-mcp-example-preview-card {
        min-height: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-96))
    }

    .alpy-mcp-example-preview-heading {
        flex-direction: column;
        align-items: flex-start
    }

    .alpy-mcp-overview-table,.alpy-mcp-overview-table thead,.alpy-mcp-overview-table tbody,.alpy-mcp-overview-table tr,.alpy-mcp-overview-table th,.alpy-mcp-overview-table td {
        min-width: var(--alpy-ui-size-0);
        width: 100%;
        display: block
    }

    .alpy-mcp-overview-table thead {
        display: none
    }

    .alpy-mcp-overview-table tbody tr {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        padding: var(--alpy-ui-space-24)
    }

    .alpy-mcp-overview-table tbody tr:last-child {
        border-bottom-width: var(--alpy-ui-border-width-0)
    }

    .alpy-mcp-overview-table th,.alpy-mcp-overview-table td,.alpy-mcp-overview-table tbody tr:last-child th,.alpy-mcp-overview-table tbody tr:last-child td {
        border-bottom-width: var(--alpy-ui-border-width-0);
        padding: var(--alpy-ui-space-0)
    }

    .alpy-mcp-overview-table tbody td {
        margin-top: var(--alpy-ui-space-16)
    }

    .alpy-mcp-overview-table tbody td:before {
        color: var(--alpy-ui-color-text-heading);
        content: attr(data-label);
        font-family: var(--alpy-ui-font-body-small-fontFamily);
        font-size: var(--alpy-ui-font-body-small-fontSize);
        font-weight: var(--alpy-ui-font-weight-bold);
        line-height: var(--alpy-ui-font-body-small-lineHeight);
        margin-bottom: var(--alpy-ui-space-4);
        text-transform: uppercase;
        display: block
    }

    .alpy-mcp-final-cta {
        gap: var(--alpy-ui-space-20);
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        padding: var(--alpy-ui-space-32) var(--alpy-ui-space-24)
    }

    .alpy-mcp-final-cta h2 {
        font-family: var(--alpy-ui-font-heading-medium-fontFamily);
        font-size: var(--alpy-ui-font-heading-medium-fontSize);
        line-height: var(--alpy-ui-font-heading-medium-lineHeight)
    }

    .alpy-mcp-final-cta .product-button {
        justify-content: center;
        width: 100%
    }
}

.privacy-page {
    color: var(--alpy-ui-color-text-body);
    gap: var(--alpy-ui-space-32);
    margin: var(--alpy-ui-space-0) auto;
    max-width: var(--shell-content-width);
    display: grid
}

.privacy-hero,.privacy-summary,.privacy-content section {
    gap: var(--alpy-ui-space-16);
    display: grid
}

.privacy-hero {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    padding-bottom: var(--alpy-ui-space-32)
}

.privacy-kicker {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.privacy-page h1,.privacy-page h2,.privacy-page h3,.privacy-page p,.privacy-page ul,.privacy-page dl,.privacy-page dd {
    margin: var(--alpy-ui-space-0)
}

.privacy-page h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight)
}

.privacy-page h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xsmall-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-heading-xsmall-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xsmall-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xsmall-lineHeight)
}

.privacy-page h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

.privacy-page p,.privacy-page li,.privacy-page dt,.privacy-page dd {
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.privacy-page a {
    color: var(--alpy-ui-color-text-link);
    text-underline-offset: var(--alpy-ui-size-2);
    text-decoration: underline
}

.privacy-page a:hover,.privacy-page a:focus-visible {
    color: var(--alpy-ui-color-text-link-hover)
}

.privacy-meta {
    gap: var(--alpy-ui-space-12);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-64))), 1fr));
    display: grid
}

.privacy-meta div {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    gap: var(--alpy-ui-space-4);
    padding-top: var(--alpy-ui-space-12);
    display: grid
}

.privacy-meta dt {
    color: var(--alpy-ui-color-text-body-subtle);
    font-size: var(--alpy-ui-font-body-small-fontSize)
}

.privacy-meta dd {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-semiBold)
}

.privacy-summary {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    padding: var(--alpy-ui-space-24)
}

.privacy-content {
    gap: var(--alpy-ui-space-32);
    display: grid
}

.privacy-content section {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    padding-bottom: var(--alpy-ui-space-28)
}

.privacy-content section:last-child {
    border-bottom-width: var(--alpy-ui-border-width-0);
    padding-bottom: var(--alpy-ui-space-0)
}

.privacy-page ul {
    gap: var(--alpy-ui-space-8);
    padding-left: var(--alpy-ui-space-24);
    display: grid
}

.account-route .page-header,.account-sections {
    max-width: var(--shell-content-width);
    width: 100%;
    margin: 0 auto
}

.account-sections {
    gap: var(--alpy-ui-space-20);
    flex-direction: column;
    display: flex
}

.account-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-large);
    scroll-margin-top: var(--alpy-ui-space-24);
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.account-card-header {
    gap: var(--alpy-ui-space-4);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-28) var(--alpy-ui-space-20);
    flex-direction: column;
    display: flex
}

.account-card-title {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight);
    margin: 0
}

.account-card-title--with-icon {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    display: flex
}

.account-card-title--with-icon .product-ui-icon {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.account-card-helper {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: 0
}

.account-card-body {
    flex-direction: column;
    display: flex
}

.account-card-body>.account-field-row {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-28)
}

.account-card-body>.account-field-row:first-child {
    border-top: var(--alpy-ui-border-width-0)
}

.account-card-error,.account-card-success {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-28) var(--alpy-ui-space-12);
    margin: 0
}

.account-card-error {
    color: var(--alpy-ui-color-text-functional-danger)
}

.account-card-success {
    color: var(--alpy-ui-color-text-functional-success)
}

.account-card-status {
    padding: var(--alpy-ui-space-0) var(--alpy-ui-space-28) var(--alpy-ui-space-12)
}

.account-field-row {
    align-items: center;
    gap: var(--alpy-ui-space-24);
    grid-template-columns: minmax(var(--alpy-ui-size-200), var(--alpy-ui-size-240)) minmax(var(--alpy-ui-size-0), 1fr);
    display: grid
}

.account-field-label-block {
    gap: var(--alpy-ui-space-4);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.account-field-label {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: 0
}

.account-field-helper {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: 0
}

.account-field-helper.is-danger {
    color: var(--alpy-ui-color-text-functional-danger)
}

.account-row-actions {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    display: flex
}

.account-row-stack {
    gap: var(--alpy-ui-space-8);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.account-row-value {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    overflow-wrap: anywhere;
    min-width: 0;
    margin: 0
}

.account-row-value--end {
    text-align: right;
    justify-self: end;
    max-width: 100%
}

.account-billing-status-pill--paid {
    background: var(--alpy-ui-color-functional-success-subtle);
    border-color: var(--alpy-ui-color-border-functional-success);
    color: var(--alpy-ui-color-functional-success-strong)
}

.account-billing-status-pill--checkout_pending,.account-billing-status-pill--checkout_expired {
    background: var(--alpy-ui-color-functional-warning-subtle);
    border-color: var(--alpy-ui-color-border-functional-warning);
    color: var(--alpy-ui-color-functional-warning-strong)
}

.account-billing-status-pill--disabled,.account-billing-status-pill--payment_failed,.account-billing-status-pill--refunded {
    background: var(--alpy-ui-color-functional-danger-subtle);
    border-color: var(--alpy-ui-color-border-functional-danger);
    color: var(--alpy-ui-color-text-functional-danger)
}

.account-billing-header {
    gap: var(--alpy-ui-space-4);
    padding-bottom: var(--alpy-ui-space-16)
}

.account-billing-title-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    flex-wrap: wrap;
    min-width: 0;
    display: flex
}

.account-billing-card .account-card-body {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one)
}

.account-billing-summary {
    grid-template-columns: repeat(4, minmax(var(--alpy-ui-size-0), 1fr));
    display: grid
}

.account-billing-summary-item {
    border-right: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    gap: var(--alpy-ui-space-6);
    min-width: 0;
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    flex-direction: column;
    display: flex
}

.account-billing-summary-item:first-child {
    padding-left: var(--alpy-ui-space-28)
}

.account-billing-summary-item:last-child {
    border-right: var(--alpy-ui-border-width-0);
    padding-right: var(--alpy-ui-space-28)
}

.account-billing-summary-label {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.account-billing-summary-value {
    align-items: flex-start;
    gap: var(--alpy-ui-space-6);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.account-billing-summary-value .product-button {
    align-self: flex-start
}

.account-billing-summary-value .account-row-value {
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.account-name-grid {
    gap: var(--alpy-ui-space-12);
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr));
    display: grid
}

.account-row-fullspan {
    grid-column: 1/-1
}

.account-profile-card {
    position: relative
}

.account-profile-banner {
    background-color: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    background-image: linear-gradient(120deg, var(--alpy-ui-color-shades-brand-color-one-subtle-three) 0%, var(--alpy-ui-color-shades-brand-color-one-subtle-two) 60%, var(--alpy-ui-color-shades-brand-color-one-subtle-one) 100%);
    min-height: var(--alpy-ui-size-160);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-28);
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
    position: relative
}

.account-profile-banner-actions {
    flex: none;
    display: flex
}

.account-avatar-bubble {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-4) solid var(--alpy-ui-color-surface-canvas);
    border-radius: var(--alpy-ui-radius-full);
    cursor: pointer;
    height: var(--alpy-ui-size-96);
    margin-bottom: calc(-1 * var(--alpy-ui-size-48));
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-96);
    flex: none;
    display: inline-block;
    position: relative;
    overflow: visible
}

.account-avatar-bubble:disabled {
    cursor: not-allowed
}

.account-avatar-bubble:hover:not(:disabled) .account-avatar-camera,.account-avatar-bubble:focus-visible .account-avatar-camera {
    background: var(--alpy-ui-color-shades-brand-color-one-strong-one)
}

.account-avatar-bubble:focus-visible {
    outline: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-border-brand-color-one-strong-one);
    outline-offset: var(--alpy-ui-space-4)
}

.account-avatar-image {
    border-radius: var(--alpy-ui-radius-full);
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.account-avatar-camera {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    background: var(--alpy-ui-color-text-brand-color-one-accent);
    border: var(--alpy-ui-border-width-2) solid var(--alpy-ui-color-surface-canvas);
    border-radius: var(--alpy-ui-radius-full);
    bottom: var(--alpy-ui-space-0);
    color: var(--alpy-ui-color-text-onColor);
    height: var(--alpy-ui-size-28);
    right: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-28);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute
}

.account-profile-card .account-card-body {
    padding-top: var(--alpy-ui-space-32)
}

.account-avatar-input {
    height: var(--alpy-ui-size-1);
    margin: var(--alpy-ui-space-0);
    opacity: 0;
    padding: var(--alpy-ui-space-0);
    pointer-events: none;
    width: var(--alpy-ui-size-1);
    position: absolute;
    overflow: hidden
}

.account-plan-header {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    align-items: flex-start
}

.account-plan-error {
    padding-top: var(--alpy-ui-space-20)
}

.account-plan-body {
    flex-direction: column;
    display: flex
}

.account-plan-heading {
    gap: var(--alpy-ui-space-4);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.account-plan-title-row {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    flex-wrap: wrap;
    min-width: 0;
    display: flex
}

.account-plan-helper {
    color: var(--alpy-ui-color-text-body-muted);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: 0
}

.account-plan-current-chip {
    border: var(--alpy-ui-border-width-1) solid;
    border-radius: var(--alpy-ui-radius-full);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    white-space: nowrap;
    align-items: center;
    display: inline-flex
}

.account-plan-current-chip--free-project {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-color: var(--alpy-ui-color-border-neutral-subtle-three);
    color: var(--alpy-ui-color-text-body)
}

.account-plan-current-chip--one-library {
    background: var(--alpy-ui-color-functional-warning-subtle);
    border-color: var(--alpy-ui-color-border-functional-warning);
    color: var(--alpy-ui-color-functional-warning-strong)
}

.account-plan-current-chip--unlimited {
    background: var(--alpy-ui-color-functional-success-subtle);
    border-color: var(--alpy-ui-color-border-functional-success);
    color: var(--alpy-ui-color-functional-success-strong)
}

.account-plan-table-shell {
    width: 100%;
    overflow-x: auto
}

.account-plan-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%
}

.account-plan-table th:first-child,.account-plan-table td:first-child {
    width: 30%
}

.account-plan-table th:nth-child(2),.account-plan-table td:nth-child(2) {
    width: 14%
}

.account-plan-table th:nth-child(3),.account-plan-table td:nth-child(3) {
    width: 25%
}

.account-plan-table th:nth-child(4),.account-plan-table td:nth-child(4) {
    width: 11%
}

.account-plan-table th:nth-child(5),.account-plan-table td:nth-child(5) {
    width: 9%
}

.account-plan-table th:nth-child(6),.account-plan-table td:nth-child(6) {
    width: 11%
}

.account-plan-table th,.account-plan-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    text-align: left;
    vertical-align: middle
}

.account-plan-table th:nth-child(n+2),.account-plan-table td:nth-child(n+2) {
    white-space: nowrap
}

.account-plan-table th:first-child,.account-plan-table td:first-child {
    padding-left: var(--alpy-ui-space-28)
}

.account-plan-table th:last-child,.account-plan-table td:last-child {
    padding-right: var(--alpy-ui-space-28);
    text-align: right
}

.account-plan-table tbody tr:last-child td {
    border-bottom: var(--alpy-ui-border-width-0)
}

.account-plan-empty-cell {
    color: var(--alpy-ui-color-text-body-muted);
    text-align: left
}

.account-plan-library-cell {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-width: 0;
    display: flex
}

.account-plan-library-icon {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-icon-subtle);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.account-plan-library-copy {
    gap: var(--alpy-ui-space-4);
    flex-direction: column;
    min-width: 0;
    display: flex
}

.account-plan-library-title-row {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    flex-wrap: wrap;
    min-width: 0;
    display: flex
}

.account-plan-library-title {
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-width: 0
}

.account-plan-active-indicator {
    --product-icon-size: var(--alpy-ui-icon-size-12);
    color: var(--alpy-ui-color-text-functional-success);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    white-space: nowrap;
    display: inline-flex
}

.account-plan-active-indicator .product-ui-icon {
    color: var(--alpy-ui-color-icon-success)
}

.account-plan-feature-status {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    height: var(--alpy-ui-size-24);
    width: var(--alpy-ui-size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative
}

.account-plan-feature-status.is-included {
    color: var(--alpy-ui-color-icon-success)
}

.account-plan-feature-status.is-sign-in-required {
    cursor: help
}

.account-plan-alpy-library-key-cell {
    align-items: center;
    gap: var(--alpy-ui-space-6);
    flex-wrap: wrap;
    min-width: 0;
    display: flex
}

.account-plan-alpy-library-key {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: var(--alpy-ui-font-body-small-fontSize);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    max-width: min(100%, var(--alpy-ui-size-240));
    padding: var(--alpy-ui-space-2) var(--alpy-ui-space-6);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden
}

.account-plan-alpy-library-key-actions {
    flex: none;
    display: inline-flex;
    position: relative
}

.account-plan-alpy-library-key-copy-button {
    --product-icon-size: var(--alpy-ui-icon-size-14);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-icon-subtle);
    cursor: pointer;
    height: var(--alpy-ui-size-28);
    padding: var(--alpy-ui-space-0);
    width: var(--alpy-ui-size-28);
    background: 0 0;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.account-plan-alpy-library-key-copy-button:hover:not(:disabled),.account-plan-alpy-library-key-copy-button:focus-visible {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    color: var(--alpy-ui-color-icon-default)
}

.account-plan-alpy-library-key-copy-button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.account-plan-alpy-library-key-status {
    color: var(--alpy-ui-color-text-functional-success);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    white-space: nowrap
}

.account-plan-alpy-library-key-status.is-error {
    color: var(--alpy-ui-color-text-functional-danger)
}

.account-plan-feature-status.is-sign-in-required [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    text-align: center;
    transform: translate(-50%, var(--alpy-ui-space-4));
    white-space: nowrap;
    z-index: 3;
    top: auto;
    left: 50%
}

.account-plan-feature-status.is-sign-in-required:hover [role=tooltip],.account-plan-feature-status.is-sign-in-required:focus-visible [role=tooltip] {
    opacity: 1;
    transform: translate(-50%, var(--alpy-ui-size-0));
    visibility: visible
}

.account-plan-edit-control {
    display: inline-flex;
    position: relative
}

.account-plan-edit-control [role=tooltip] {
    bottom: calc(100% + var(--alpy-ui-space-8));
    right: var(--alpy-ui-space-0);
    text-align: center;
    transform: translateY(var(--alpy-ui-space-4));
    white-space: nowrap;
    z-index: 3;
    top: auto
}

.account-plan-edit-control:hover [role=tooltip],.account-plan-edit-control:focus-within [role=tooltip] {
    opacity: 1;
    transform: translateY(var(--alpy-ui-size-0));
    visibility: visible
}

.account-plan-edit-link {
    color: var(--alpy-ui-color-text-body-muted);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex
}

.account-plan-edit-link:hover,.account-plan-edit-link:focus-visible {
    color: var(--alpy-ui-color-text-body)
}

.account-panel-nav {
    gap: var(--alpy-ui-space-4);
    flex-direction: column;
    display: flex
}

.account-panel-list {
    gap: var(--alpy-ui-space-4);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.account-panel-item {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-12);
    text-align: left;
    width: 100%;
    display: flex
}

.account-panel-item:hover,.account-panel-item:focus-visible {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.account-panel-item-label {
    flex: auto;
    min-width: 0
}

@media (width<=744px) {
    .account-field-row {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .account-row-actions {
        justify-content: flex-start
    }

    .account-row-value--end {
        text-align: left
    }

    .account-billing-summary-item,.account-billing-summary-item:first-child,.account-billing-summary-item:last-child {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
        border-right: var(--alpy-ui-border-width-0);
        padding-left: var(--alpy-ui-space-20);
        padding-right: var(--alpy-ui-space-20)
    }

    .account-billing-summary {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .account-billing-summary-item:last-child {
        border-bottom: var(--alpy-ui-border-width-0)
    }

    .account-name-grid {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr)
    }

    .account-profile-banner {
        min-height: var(--alpy-ui-size-128);
        padding: var(--alpy-ui-space-20)
    }

    .account-card-header,.account-card-body>.account-field-row {
        padding-left: var(--alpy-ui-space-20);
        padding-right: var(--alpy-ui-space-20)
    }
}

.admin-route {
    gap: var(--alpy-ui-space-24)
}

@media (width>=1440px) {
    .is-admin-main .main-content-body {
        max-width: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-128) + var(--alpy-ui-size-52));
        width: 100%;
        margin-inline:auto}
}

.admin-metric-grid {
    gap: var(--alpy-ui-space-12);
    grid-template-columns: repeat(4, minmax(var(--alpy-ui-size-0), 1fr));
    display: grid
}

.admin-metric-card {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    gap: var(--alpy-ui-space-8);
    min-height: var(--alpy-ui-size-120);
    padding: var(--alpy-ui-space-20);
    display: grid
}

.admin-metric-card.is-danger {
    border-color: var(--alpy-ui-color-border-functional-danger)
}

.admin-metric-card.is-loading {
    color: var(--alpy-ui-color-text-body-subtle)
}

.admin-metric-card p,.admin-metric-card span,.admin-panel-header span,.admin-table,.admin-event-row p,.admin-event-meta,.admin-empty-state p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.admin-metric-card strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-large-fontSize);
    font-weight: var(--alpy-ui-font-heading-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-large-letterSpacing);
    line-height: var(--alpy-ui-font-heading-large-lineHeight)
}

.admin-data-panel {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    gap: var(--alpy-ui-space-20);
    padding: var(--alpy-ui-space-20);
    display: grid
}

.admin-panel-header {
    align-items: flex-start;
    gap: var(--alpy-ui-space-16);
    justify-content: space-between;
    display: flex
}

.admin-create-admin-form {
    align-items: start;
    gap: var(--alpy-ui-space-16);
    max-width: calc(var(--alpy-ui-size-200) + var(--alpy-ui-size-200) + var(--alpy-ui-size-128));
    display: grid
}

.admin-action-feedback {
    align-items: center;
    gap: var(--alpy-ui-space-8);
    margin: var(--alpy-ui-space-0);
    display: inline-flex
}

.admin-action-feedback svg {
    height: var(--alpy-ui-icon-size-20);
    width: var(--alpy-ui-icon-size-20);
    display: block
}

.admin-action-feedback.is-error {
    color: var(--alpy-ui-color-text-functional-danger)
}

.admin-action-feedback.is-success {
    color: var(--alpy-ui-color-text-functional-success)
}

.admin-panel-kicker {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0) 0 var(--alpy-ui-space-4);
    text-transform: uppercase
}

.admin-panel-header h2,.admin-empty-state h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.admin-trend-bars {
    align-items: end;
    gap: var(--alpy-ui-space-4);
    grid-template-columns: repeat(30, minmax(var(--alpy-ui-size-8), 1fr));
    min-height: var(--alpy-ui-size-200);
    display: grid
}

.admin-trend-bar-item {
    align-items: center;
    gap: var(--alpy-ui-space-4);
    grid-template-rows: var(--alpy-ui-size-20) minmax(var(--alpy-ui-size-120), 1fr) var(--alpy-ui-size-20);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.admin-trend-value,.admin-trend-day {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.admin-trend-bar {
    background: var(--alpy-ui-color-text-brand-color-one-accent);
    border-radius: var(--alpy-ui-radius-small) var(--alpy-ui-radius-small) var(--alpy-ui-radius-none) var(--alpy-ui-radius-none);
    height: var(--admin-bar-height);
    min-height: var(--alpy-ui-size-4);
    align-self: end;
    width: 100%;
    display: block
}

.admin-table-shell {
    overflow-x: auto
}

.admin-table {
    border-collapse: collapse;
    min-width: var(--alpy-ui-size-750);
    width: 100%
}

.admin-table th {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    text-align: left
}

.admin-table tbody {
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    line-height: var(--alpy-ui-font-body-medium-lineHeight)
}

.admin-table th,.admin-table td {
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    padding: var(--alpy-ui-space-12);
    vertical-align: top
}

.admin-table tbody tr:last-child td {
    border-bottom: var(--alpy-ui-border-width-0)
}

.admin-table-primary,.admin-table-secondary {
    display: block
}

.admin-table-primary {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-semiBold)
}

.admin-status-pill {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    min-height: var(--alpy-ui-size-24);
    padding: var(--alpy-ui-space-2) var(--alpy-ui-space-8);
    white-space: nowrap;
    align-items: center;
    display: inline-flex
}

.admin-status-pill.is-unlimited_clients,.admin-status-pill.is-completed {
    background: var(--alpy-ui-color-shades-brand-color-two-subtle-one);
    border-color: var(--alpy-ui-color-border-functional-success);
    color: var(--alpy-ui-color-text-functional-success)
}

.admin-status-pill.is-one_project,.admin-status-pill.is-running {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-color: var(--alpy-ui-color-border-brand-color-one-subtle-three);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.admin-status-pill.is-failed {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border-color: var(--alpy-ui-color-border-functional-danger);
    color: var(--alpy-ui-color-text-functional-danger)
}

.admin-table-actions-cell {
    width: var(--alpy-ui-size-64)
}

.admin-row-action-menu {
    justify-items: end;
    display: inline-grid;
    position: relative
}

.admin-row-action-trigger {
    color: var(--alpy-ui-color-text-body-subtle);
    height: var(--alpy-ui-size-36);
    width: var(--alpy-ui-size-36)
}

.admin-row-action-trigger:hover,.admin-row-action-trigger[aria-expanded=true] {
    color: var(--alpy-ui-color-text-body)
}

.admin-row-action-dropdown {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    box-shadow: var(--alpy-ui-size-0) var(--alpy-ui-size-8) var(--alpy-ui-size-24) color-mix(in srgb, var(--alpy-ui-color-system-black) 14%, var(--alpy-ui-color-system-transparent));
    min-width: var(--alpy-ui-size-140);
    padding: var(--alpy-ui-space-4);
    right: var(--alpy-ui-space-0);
    top: calc(100% + var(--alpy-ui-space-4));
    z-index: 4;
    display: grid;
    position: absolute
}

.admin-row-action-item {
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font: inherit;
    align-items: center;
    gap: var(--alpy-ui-space-8);
    min-height: var(--alpy-ui-size-36);
    padding: var(--alpy-ui-space-8);
    text-align: left;
    background: 0 0;
    display: inline-flex
}

.admin-row-action-item:hover {
    background: var(--alpy-ui-color-shades-neutral-subtle-one)
}

.admin-row-action-item.is-danger {
    color: var(--alpy-ui-color-text-functional-danger)
}

.admin-row-action-item svg {
    height: var(--alpy-ui-icon-size-20);
    width: var(--alpy-ui-icon-size-20);
    display: block
}

.admin-event-list {
    gap: var(--alpy-ui-space-8);
    display: grid
}

.admin-event-row {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    align-items: center;
    gap: var(--alpy-ui-space-12);
    grid-template-columns: var(--alpy-ui-size-40) minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-height: var(--alpy-ui-size-64);
    padding: var(--alpy-ui-space-12);
    display: grid
}

.admin-event-icon,.admin-empty-icon {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    height: var(--alpy-ui-size-40);
    width: var(--alpy-ui-size-40);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.admin-event-icon svg,.admin-empty-icon svg {
    height: var(--alpy-ui-icon-size-20);
    width: var(--alpy-ui-icon-size-20);
    display: block
}

.admin-event-row h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0) 0 var(--alpy-ui-space-2)
}

.admin-event-meta {
    align-items: flex-end;
    gap: var(--alpy-ui-space-4);
    justify-items: end;
    display: grid
}

.admin-empty-state {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-height: var(--alpy-ui-size-200);
    text-align: center;
    justify-items: center;
    display: grid
}

@media (width<=1280px) {
    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-0), 1fr))
    }
}

@media (width<=760px) {
    .admin-metric-grid {
        grid-template-columns: 1fr
    }

    .admin-panel-header {
        flex-direction: column;
        align-items: stretch
    }

    .admin-trend-bars {
        grid-template-columns: repeat(15, minmax(var(--alpy-ui-size-8), 1fr));
        padding-bottom: var(--alpy-ui-space-8);
        overflow-x: auto
    }

    .admin-trend-bar-item {
        min-width: var(--alpy-ui-size-24)
    }

    .admin-event-row {
        grid-template-columns: var(--alpy-ui-size-40) minmax(var(--alpy-ui-size-0), 1fr);
        align-items: start
    }

    .admin-event-meta {
        grid-column: 2;
        justify-items: start
    }
}

:root {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --alpy-ui-border-width-0: var(--alpy-ui-size-0);
    --alpy-ui-border-width-1: var(--alpy-ui-size-1);
    --alpy-ui-border-width-1-5: var(--alpy-ui-size-1-5);
    --alpy-ui-border-width-2: var(--alpy-ui-size-2);
    --alpy-ui-border-width-4: var(--alpy-ui-size-4);
    --alpy-ui-border-width-hairline: var(--alpy-ui-size-0-5);
    --alpy-ui-color-border-brand-color-one-strong-one: #0a4fdf;
    --alpy-ui-color-border-brand-color-one-strong-three: #031643;
    --alpy-ui-color-border-brand-color-one-strong-two: #0b3a9d;
    --alpy-ui-color-border-brand-color-one-subtle-one: #d5dce8;
    --alpy-ui-color-border-brand-color-one-subtle-three: #6c95e5;
    --alpy-ui-color-border-brand-color-one-subtle-two: #b7c5e1;
    --alpy-ui-color-border-brand-color-three-strong-one: #fca701;
    --alpy-ui-color-border-brand-color-three-strong-three: #3f2a00;
    --alpy-ui-color-border-brand-color-three-strong-two: #9e6800;
    --alpy-ui-color-border-brand-color-three-subtle-one: #e8e2d5;
    --alpy-ui-color-border-brand-color-three-subtle-three: #e5ba65;
    --alpy-ui-color-border-brand-color-three-subtle-two: #e2d3b5;
    --alpy-ui-color-border-brand-color-two-strong-one: #058625;
    --alpy-ui-color-border-brand-color-two-strong-three: #0d2e10;
    --alpy-ui-color-border-brand-color-two-strong-two: #156221;
    --alpy-ui-color-border-brand-color-two-subtle-one: #e6ede5;
    --alpy-ui-color-border-brand-color-two-subtle-three: #7fb581;
    --alpy-ui-color-border-brand-color-two-subtle-two: #c7dac8;
    --alpy-ui-color-border-functional-danger: #b80808;
    --alpy-ui-color-border-functional-info: #0449ba;
    --alpy-ui-color-border-functional-success: #166534;
    --alpy-ui-color-border-functional-warning: #ae6d00;
    --alpy-ui-color-border-input: #767676;
    --alpy-ui-color-border-interaction-disabled: #a1a1a1;
    --alpy-ui-color-border-interaction-focused: #0a4fdf;
    --alpy-ui-color-border-interaction-hover: #0b3a9d;
    --alpy-ui-color-border-interaction-pressed: #031643;
    --alpy-ui-color-border-interaction-selected: #134cc8;
    --alpy-ui-color-border-neutral-strong-one: #333;
    --alpy-ui-color-border-neutral-strong-three: #151515;
    --alpy-ui-color-border-neutral-strong-two: #242424;
    --alpy-ui-color-border-neutral-subtle-one: #f1f1f1;
    --alpy-ui-color-border-neutral-subtle-three: #767676;
    --alpy-ui-color-border-neutral-subtle-two: #cecece;
    --alpy-ui-color-border-onColor: #fff;
    --alpy-ui-color-functional-danger: #b80808;
    --alpy-ui-color-functional-danger-soft: #ef4444;
    --alpy-ui-color-functional-danger-strong: #4d0000;
    --alpy-ui-color-functional-danger-subtle: #ecdfdf;
    --alpy-ui-color-functional-info: #0449ba;
    --alpy-ui-color-functional-info-soft: #3b82f6;
    --alpy-ui-color-functional-info-strong: #001d4c;
    --alpy-ui-color-functional-info-subtle: #dee4ec;
    --alpy-ui-color-functional-success: #22c55e;
    --alpy-ui-color-functional-success-soft: #86efac;
    --alpy-ui-color-functional-success-strong: #166534;
    --alpy-ui-color-functional-success-subtle: #dcfce7;
    --alpy-ui-color-functional-warning: #ae6d00;
    --alpy-ui-color-functional-warning-soft: #ffbd4f;
    --alpy-ui-color-functional-warning-strong: #402800;
    --alpy-ui-color-functional-warning-subtle: #e8e2d6;
    --alpy-ui-color-icon-accent: #0a4fdf;
    --alpy-ui-color-icon-brand-color-one-strong-one: #0a4fdf;
    --alpy-ui-color-icon-brand-color-one-strong-three: #031643;
    --alpy-ui-color-icon-brand-color-one-strong-two: #0b3a9d;
    --alpy-ui-color-icon-brand-color-one-subtle-one: #d5dce8;
    --alpy-ui-color-icon-brand-color-one-subtle-three: #6c95e5;
    --alpy-ui-color-icon-brand-color-one-subtle-two: #b7c5e1;
    --alpy-ui-color-icon-brand-color-three-strong-one: #fca701;
    --alpy-ui-color-icon-brand-color-three-strong-three: #3f2a00;
    --alpy-ui-color-icon-brand-color-three-strong-two: #9e6800;
    --alpy-ui-color-icon-brand-color-three-subtle-one: #e8e2d5;
    --alpy-ui-color-icon-brand-color-three-subtle-three: #e5ba65;
    --alpy-ui-color-icon-brand-color-three-subtle-two: #e2d3b5;
    --alpy-ui-color-icon-brand-color-two-strong-one: #058625;
    --alpy-ui-color-icon-brand-color-two-strong-three: #0d2e10;
    --alpy-ui-color-icon-brand-color-two-strong-two: #156221;
    --alpy-ui-color-icon-brand-color-two-subtle-one: #e6ede5;
    --alpy-ui-color-icon-brand-color-two-subtle-three: #7fb581;
    --alpy-ui-color-icon-brand-color-two-subtle-two: #c7dac8;
    --alpy-ui-color-icon-danger: #b80808;
    --alpy-ui-color-icon-default: #151515;
    --alpy-ui-color-icon-disabled: #a1a1a1;
    --alpy-ui-color-icon-info: #0449ba;
    --alpy-ui-color-icon-interaction-disabled: #92aee0;
    --alpy-ui-color-icon-interaction-focused: #0a4fdf;
    --alpy-ui-color-icon-interaction-hover: #0b3a9d;
    --alpy-ui-color-icon-interaction-pressed: #031643;
    --alpy-ui-color-icon-interaction-selected: #134cc8;
    --alpy-ui-color-icon-inverse: #fff;
    --alpy-ui-color-icon-onColor: #fff;
    --alpy-ui-color-icon-subtle: #5c5c5c;
    --alpy-ui-color-icon-subtlest: #767676;
    --alpy-ui-color-icon-success: #22c55e;
    --alpy-ui-color-icon-warning: #ae6d00;
    --alpy-ui-color-shades-brand-color-one-strong-one: #0a4fdf;
    --alpy-ui-color-shades-brand-color-one-strong-three: #031643;
    --alpy-ui-color-shades-brand-color-one-strong-two: #0b3a9d;
    --alpy-ui-color-shades-brand-color-one-subtle-one: #d5dce8;
    --alpy-ui-color-shades-brand-color-one-subtle-three: #6c95e5;
    --alpy-ui-color-shades-brand-color-one-subtle-two: #b7c5e1;
    --alpy-ui-color-shades-brand-color-three-strong-one: #fca701;
    --alpy-ui-color-shades-brand-color-three-strong-three: #3f2a00;
    --alpy-ui-color-shades-brand-color-three-strong-two: #9e6800;
    --alpy-ui-color-shades-brand-color-three-subtle-one: #e8e2d5;
    --alpy-ui-color-shades-brand-color-three-subtle-three: #e5ba65;
    --alpy-ui-color-shades-brand-color-three-subtle-two: #e2d3b5;
    --alpy-ui-color-shades-brand-color-two-strong-one: #058625;
    --alpy-ui-color-shades-brand-color-two-strong-three: #0d2e10;
    --alpy-ui-color-shades-brand-color-two-strong-two: #156221;
    --alpy-ui-color-shades-brand-color-two-subtle-one: #e6ede5;
    --alpy-ui-color-shades-brand-color-two-subtle-three: #7fb581;
    --alpy-ui-color-shades-brand-color-two-subtle-two: #c7dac8;
    --alpy-ui-color-shades-neutral-strong-one: #333;
    --alpy-ui-color-shades-neutral-strong-three: #151515;
    --alpy-ui-color-shades-neutral-strong-two: #242424;
    --alpy-ui-color-shades-neutral-subtle-one: #f1f1f1;
    --alpy-ui-color-shades-neutral-subtle-three: #767676;
    --alpy-ui-color-shades-neutral-subtle-two: #cecece;
    --alpy-ui-color-surface-canvas: #fff;
    --alpy-ui-color-surface-interaction-disabled: #f1f1f1;
    --alpy-ui-color-surface-interaction-focused: #cecece;
    --alpy-ui-color-surface-interaction-hover: #cecece;
    --alpy-ui-color-surface-interaction-pressed: #031643;
    --alpy-ui-color-surface-interaction-selected: #a1a1a1;
    --alpy-ui-color-system-black: #000;
    --alpy-ui-color-system-transparent: #0000;
    --alpy-ui-color-system-white: #fff;
    --alpy-ui-color-text-body: #242424;
    --alpy-ui-color-text-body-muted: #767676;
    --alpy-ui-color-text-body-subtle: #5c5c5c;
    --alpy-ui-color-text-brand-color-one-accent: #0a4fdf;
    --alpy-ui-color-text-brand-color-one-accent-strong: #0b3a9d;
    --alpy-ui-color-text-brand-color-one-accent-subtle: #4079ee;
    --alpy-ui-color-text-brand-color-three-accent: #fca701;
    --alpy-ui-color-text-brand-color-three-accent-strong: #9e6800;
    --alpy-ui-color-text-brand-color-three-accent-subtle: #efb035;
    --alpy-ui-color-text-brand-color-two-accent: #058625;
    --alpy-ui-color-text-brand-color-two-accent-strong: #156221;
    --alpy-ui-color-text-brand-color-two-accent-subtle: #52a457;
    --alpy-ui-color-text-functional-danger: #b80808;
    --alpy-ui-color-text-functional-danger-strong: #4d0000;
    --alpy-ui-color-text-functional-info: #0449ba;
    --alpy-ui-color-text-functional-info-strong: #001d4c;
    --alpy-ui-color-text-functional-success: #22c55e;
    --alpy-ui-color-text-functional-success-strong: #166534;
    --alpy-ui-color-text-functional-warning: #ae6d00;
    --alpy-ui-color-text-functional-warning-strong: #402800;
    --alpy-ui-color-text-heading: #151515;
    --alpy-ui-color-text-heading-onColor: #fff;
    --alpy-ui-color-text-inverse: #fff;
    --alpy-ui-color-text-link: #0a4fdf;
    --alpy-ui-color-text-link-disabled: #92aee0;
    --alpy-ui-color-text-link-hover: #0b3a9d;
    --alpy-ui-color-text-link-inverse: #fff;
    --alpy-ui-color-text-link-pressed: #031643;
    --alpy-ui-color-text-link-visited: #156221;
    --alpy-ui-color-text-onColor: #fff;
    --alpy-ui-color-text-subheading: #242424;
    --alpy-ui-component-accordion-basic-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-basic-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-basic-shape-radius: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-basic-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-basic-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-basic-space-content-padding-x: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-space-header-padding-x: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-inCard-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-inCard-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-inCard-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-gap-card-header: var(--alpy-ui-size-4);
    --alpy-ui-component-accordion-inCard-shape-card-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-inCard-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-inCard-space-card-padding: var(--alpy-ui-size-24);
    --alpy-ui-component-accordion-inCard-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-styles-basic-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-basic-contentText-default: #242424;
    --alpy-ui-component-accordion-styles-basic-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-basic-contentText-focus: #242424;
    --alpy-ui-component-accordion-styles-basic-contentText-hover: #242424;
    --alpy-ui-component-accordion-styles-basic-divider-default: #cecece;
    --alpy-ui-component-accordion-styles-basic-divider-disabled: #cecece;
    --alpy-ui-component-accordion-styles-basic-divider-focus: #cecece;
    --alpy-ui-component-accordion-styles-basic-divider-hover: #cecece;
    --alpy-ui-component-accordion-styles-basic-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-basic-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-basic-headerText-default: #151515;
    --alpy-ui-component-accordion-styles-basic-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-basic-headerText-focus: #151515;
    --alpy-ui-component-accordion-styles-basic-headerText-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-basic-icon-default: #5c5c5c;
    --alpy-ui-component-accordion-styles-basic-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-basic-icon-focus: #5c5c5c;
    --alpy-ui-component-accordion-styles-basic-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-inCard-borderColor-default: #cecece;
    --alpy-ui-component-accordion-styles-inCard-borderColor-disabled: #cecece;
    --alpy-ui-component-accordion-styles-inCard-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentText-default: #242424;
    --alpy-ui-component-accordion-styles-inCard-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-contentText-focus: #242424;
    --alpy-ui-component-accordion-styles-inCard-contentText-hover: #242424;
    --alpy-ui-component-accordion-styles-inCard-divider-default: #cecece;
    --alpy-ui-component-accordion-styles-inCard-divider-disabled: #cecece;
    --alpy-ui-component-accordion-styles-inCard-divider-focus: #cecece;
    --alpy-ui-component-accordion-styles-inCard-divider-hover: #cecece;
    --alpy-ui-component-accordion-styles-inCard-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-inCard-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerText-default: #151515;
    --alpy-ui-component-accordion-styles-inCard-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-headerText-focus: #151515;
    --alpy-ui-component-accordion-styles-inCard-headerText-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-inCard-icon-default: #5c5c5c;
    --alpy-ui-component-accordion-styles-inCard-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-inCard-icon-focus: #5c5c5c;
    --alpy-ui-component-accordion-styles-inCard-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-default: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-disabled: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-focus: #0a4fdf;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentText-default: #242424;
    --alpy-ui-component-accordion-styles-withBorders-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-contentText-focus: #242424;
    --alpy-ui-component-accordion-styles-withBorders-contentText-hover: #242424;
    --alpy-ui-component-accordion-styles-withBorders-divider-default: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-divider-disabled: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-divider-focus: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-divider-hover: #cecece;
    --alpy-ui-component-accordion-styles-withBorders-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerText-default: #151515;
    --alpy-ui-component-accordion-styles-withBorders-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-headerText-focus: #151515;
    --alpy-ui-component-accordion-styles-withBorders-headerText-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-withBorders-icon-default: #5c5c5c;
    --alpy-ui-component-accordion-styles-withBorders-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-withBorders-icon-focus: #5c5c5c;
    --alpy-ui-component-accordion-styles-withBorders-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-text-card-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-card-description-fontSize: 14px;
    --alpy-ui-component-accordion-text-card-description-fontWeight: 400;
    --alpy-ui-component-accordion-text-card-description-letterSpacing: 0;
    --alpy-ui-component-accordion-text-card-description-lineHeight: 20px;
    --alpy-ui-component-accordion-text-card-title-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-card-title-fontSize: 16px;
    --alpy-ui-component-accordion-text-card-title-fontWeight: 400;
    --alpy-ui-component-accordion-text-card-title-letterSpacing: 0;
    --alpy-ui-component-accordion-text-card-title-lineHeight: 24px;
    --alpy-ui-component-accordion-text-content-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-content-fontSize: 14px;
    --alpy-ui-component-accordion-text-content-fontWeight: 400;
    --alpy-ui-component-accordion-text-content-letterSpacing: 0;
    --alpy-ui-component-accordion-text-content-lineHeight: 20px;
    --alpy-ui-component-accordion-text-header-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-header-fontSize: 16px;
    --alpy-ui-component-accordion-text-header-fontWeight: 400;
    --alpy-ui-component-accordion-text-header-letterSpacing: 0;
    --alpy-ui-component-accordion-text-header-lineHeight: 24px;
    --alpy-ui-component-accordion-withBorders-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-withBorders-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-withBorders-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-gap-item-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-accordion-withBorders-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-withBorders-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-withBorders-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-space-content-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-withBorders-space-header-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-withBorders-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-basic-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-basic-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-basic-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-basic-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-basic-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-basic-size-icon-size: 24px;
    --alpy-ui-component-alert-basic-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-basic-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-danger-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-danger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-danger-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-danger-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-danger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-danger-size-icon-size: 24px;
    --alpy-ui-component-alert-danger-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-danger-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-info-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-info-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-info-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-info-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-info-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-info-size-icon-size: 24px;
    --alpy-ui-component-alert-info-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-info-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-styles-basic-bg-default: #fff;
    --alpy-ui-component-alert-styles-basic-body-default: #242424;
    --alpy-ui-component-alert-styles-basic-border-default: #cecece;
    --alpy-ui-component-alert-styles-basic-icon-default: #151515;
    --alpy-ui-component-alert-styles-basic-iconBorder-default: #151515;
    --alpy-ui-component-alert-styles-basic-title-default: #151515;
    --alpy-ui-component-alert-styles-danger-bg-default: #ecdfdf;
    --alpy-ui-component-alert-styles-danger-body-default: #242424;
    --alpy-ui-component-alert-styles-danger-border-default: #b80808;
    --alpy-ui-component-alert-styles-danger-icon-default: #b80808;
    --alpy-ui-component-alert-styles-danger-iconBorder-default: #b80808;
    --alpy-ui-component-alert-styles-danger-title-default: #151515;
    --alpy-ui-component-alert-styles-info-bg-default: #dee4ec;
    --alpy-ui-component-alert-styles-info-body-default: #242424;
    --alpy-ui-component-alert-styles-info-border-default: #0449ba;
    --alpy-ui-component-alert-styles-info-icon-default: #0449ba;
    --alpy-ui-component-alert-styles-info-iconBorder-default: #0449ba;
    --alpy-ui-component-alert-styles-info-title-default: #151515;
    --alpy-ui-component-alert-styles-success-bg-default: #dcfce7;
    --alpy-ui-component-alert-styles-success-body-default: #242424;
    --alpy-ui-component-alert-styles-success-border-default: #166534;
    --alpy-ui-component-alert-styles-success-icon-default: #22c55e;
    --alpy-ui-component-alert-styles-success-iconBorder-default: #166534;
    --alpy-ui-component-alert-styles-success-title-default: #151515;
    --alpy-ui-component-alert-styles-warning-bg-default: #e8e2d6;
    --alpy-ui-component-alert-styles-warning-body-default: #242424;
    --alpy-ui-component-alert-styles-warning-border-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-icon-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-iconBorder-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-title-default: #151515;
    --alpy-ui-component-alert-success-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-success-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-success-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-success-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-success-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-success-size-icon-size: 24px;
    --alpy-ui-component-alert-success-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-success-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-alert-text-body-fontSize: 12px;
    --alpy-ui-component-alert-text-body-fontWeight: 400;
    --alpy-ui-component-alert-text-body-letterSpacing: 0;
    --alpy-ui-component-alert-text-body-lineHeight: 20px;
    --alpy-ui-component-alert-text-heading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-alert-text-heading-fontSize: 16px;
    --alpy-ui-component-alert-text-heading-fontWeight: 400;
    --alpy-ui-component-alert-text-heading-letterSpacing: 0;
    --alpy-ui-component-alert-text-heading-lineHeight: 24px;
    --alpy-ui-component-alert-warning-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-warning-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-warning-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-warning-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-warning-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-warning-size-icon-size: 24px;
    --alpy-ui-component-alert-warning-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-warning-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-badge-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-badge-brandOne-background-default: #d5dce8;
    --alpy-ui-component-badge-brandOne-border-default: #0a4fdf;
    --alpy-ui-component-badge-brandOne-text-default: #0b3a9d;
    --alpy-ui-component-badge-brandThree-background-default: #e8e2d5;
    --alpy-ui-component-badge-brandThree-border-default: #9e6800;
    --alpy-ui-component-badge-brandThree-text-default: #242424;
    --alpy-ui-component-badge-brandTwo-background-default: #e6ede5;
    --alpy-ui-component-badge-brandTwo-border-default: #156221;
    --alpy-ui-component-badge-brandTwo-text-default: #242424;
    --alpy-ui-component-badge-danger-background-default: #ecdfdf;
    --alpy-ui-component-badge-danger-border-default: #b80808;
    --alpy-ui-component-badge-danger-text-default: #4d0000;
    --alpy-ui-component-badge-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-badge-info-background-default: #dee4ec;
    --alpy-ui-component-badge-info-border-default: #0449ba;
    --alpy-ui-component-badge-info-text-default: #001d4c;
    --alpy-ui-component-badge-neutral-background-default: #f1f1f1;
    --alpy-ui-component-badge-neutral-border-default: #767676;
    --alpy-ui-component-badge-neutral-text-default: #242424;
    --alpy-ui-component-badge-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-badge-space-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-badge-space-padding-y: var(--alpy-ui-size-4);
    --alpy-ui-component-badge-success-background-default: #dcfce7;
    --alpy-ui-component-badge-success-border-default: #166534;
    --alpy-ui-component-badge-success-text-default: #166534;
    --alpy-ui-component-badge-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-badge-text-label-fontSize: 12px;
    --alpy-ui-component-badge-text-label-fontWeight: 400;
    --alpy-ui-component-badge-text-label-letterSpacing: 0;
    --alpy-ui-component-badge-text-label-lineHeight: 20px;
    --alpy-ui-component-badge-warning-background-default: #e8e2d6;
    --alpy-ui-component-badge-warning-border-default: #ae6d00;
    --alpy-ui-component-badge-warning-text-default: #402800;
    --alpy-ui-component-breadcrumb-ellipsis-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-ellipsis-size-box: var(--alpy-ui-size-28);
    --alpy-ui-component-breadcrumb-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-separator-size-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-styles-current-text: #151515;
    --alpy-ui-component-breadcrumb-styles-ellipsis-background: #cecece;
    --alpy-ui-component-breadcrumb-styles-ellipsis-text: #242424;
    --alpy-ui-component-breadcrumb-styles-link-text: #767676;
    --alpy-ui-component-breadcrumb-styles-separator-icon: #5c5c5c;
    --alpy-ui-component-breadcrumb-text-link-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-breadcrumb-text-link-fontSize: 12px;
    --alpy-ui-component-breadcrumb-text-link-fontWeight: 400;
    --alpy-ui-component-breadcrumb-text-link-letterSpacing: 0;
    --alpy-ui-component-breadcrumb-text-link-lineHeight: 20px;
    --alpy-ui-component-breadcrumb-text-page-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-breadcrumb-text-page-fontSize: 14px;
    --alpy-ui-component-breadcrumb-text-page-fontWeight: 400;
    --alpy-ui-component-breadcrumb-text-page-letterSpacing: 0;
    --alpy-ui-component-breadcrumb-text-page-lineHeight: 20px;
    --alpy-ui-component-breadcrumb-withDropdown-space-menu-offset-y: var(--alpy-ui-size-8);
    --alpy-ui-component-button-content-iconOnly-lg-height: var(--alpy-ui-size-52);
    --alpy-ui-component-button-content-iconOnly-lg-width: var(--alpy-ui-size-52);
    --alpy-ui-component-button-content-iconOnly-md-height: var(--alpy-ui-size-40);
    --alpy-ui-component-button-content-iconOnly-md-width: var(--alpy-ui-size-40);
    --alpy-ui-component-button-content-iconOnly-sm-height: var(--alpy-ui-size-32);
    --alpy-ui-component-button-content-iconOnly-sm-width: var(--alpy-ui-size-32);
    --alpy-ui-component-button-size-lg-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-lg-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-lg-iconSize: 20px;
    --alpy-ui-component-button-size-lg-minHeight: var(--alpy-ui-size-52);
    --alpy-ui-component-button-size-lg-paddingX: var(--alpy-ui-size-24);
    --alpy-ui-component-button-size-lg-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-lg-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-lg-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-lg-text-fontSize: 19px;
    --alpy-ui-component-button-size-lg-text-fontWeight: 600;
    --alpy-ui-component-button-size-lg-text-letterSpacing: 0;
    --alpy-ui-component-button-size-lg-text-lineHeight: 28px;
    --alpy-ui-component-button-size-md-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-md-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-md-iconSize: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-md-minHeight: var(--alpy-ui-size-40);
    --alpy-ui-component-button-size-md-paddingX: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-md-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-md-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-md-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-md-text-fontSize: 14px;
    --alpy-ui-component-button-size-md-text-fontWeight: 400;
    --alpy-ui-component-button-size-md-text-letterSpacing: 0;
    --alpy-ui-component-button-size-md-text-lineHeight: 20px;
    --alpy-ui-component-button-size-sm-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-sm-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-button-size-sm-iconSize: var(--alpy-ui-size-12);
    --alpy-ui-component-button-size-sm-minHeight: var(--alpy-ui-size-32);
    --alpy-ui-component-button-size-sm-paddingX: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-sm-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-sm-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-sm-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-sm-text-fontSize: 12px;
    --alpy-ui-component-button-size-sm-text-fontWeight: 400;
    --alpy-ui-component-button-size-sm-text-letterSpacing: 0;
    --alpy-ui-component-button-size-sm-text-lineHeight: 20px;
    --alpy-ui-component-button-variant-link-bg-default: #0000;
    --alpy-ui-component-button-variant-link-bg-disabled: #0000;
    --alpy-ui-component-button-variant-link-bg-hover: #0000;
    --alpy-ui-component-button-variant-link-bg-pressed: #0000;
    --alpy-ui-component-button-variant-link-border-default: #0000;
    --alpy-ui-component-button-variant-link-border-disabled: #0000;
    --alpy-ui-component-button-variant-link-border-hover: #0000;
    --alpy-ui-component-button-variant-link-border-pressed: #0000;
    --alpy-ui-component-button-variant-link-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-link-icon-default: #0a4fdf;
    --alpy-ui-component-button-variant-link-icon-disabled: #b7c5e1;
    --alpy-ui-component-button-variant-link-icon-hover: #0b3a9d;
    --alpy-ui-component-button-variant-link-icon-pressed: #031643;
    --alpy-ui-component-button-variant-link-text-default: #0a4fdf;
    --alpy-ui-component-button-variant-link-text-disabled: #92aee0;
    --alpy-ui-component-button-variant-link-text-hover: #0b3a9d;
    --alpy-ui-component-button-variant-link-text-pressed: #031643;
    --alpy-ui-component-button-variant-outline-bg-default: #0000;
    --alpy-ui-component-button-variant-outline-bg-disabled: #0000;
    --alpy-ui-component-button-variant-outline-bg-hover: #0000;
    --alpy-ui-component-button-variant-outline-bg-pressed: #0000;
    --alpy-ui-component-button-variant-outline-border-default: #0a4fdf;
    --alpy-ui-component-button-variant-outline-border-disabled: #a1a1a1;
    --alpy-ui-component-button-variant-outline-border-hover: #0b3a9d;
    --alpy-ui-component-button-variant-outline-border-pressed: #031643;
    --alpy-ui-component-button-variant-outline-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-outline-icon-default: #0a4fdf;
    --alpy-ui-component-button-variant-outline-icon-disabled: #b7c5e1;
    --alpy-ui-component-button-variant-outline-icon-hover: #0b3a9d;
    --alpy-ui-component-button-variant-outline-icon-pressed: #031643;
    --alpy-ui-component-button-variant-outline-text-default: #0a4fdf;
    --alpy-ui-component-button-variant-outline-text-disabled: #92aee0;
    --alpy-ui-component-button-variant-outline-text-hover: #0b3a9d;
    --alpy-ui-component-button-variant-outline-text-pressed: #031643;
    --alpy-ui-component-button-variant-primary-bg-default: #0a4fdf;
    --alpy-ui-component-button-variant-primary-bg-disabled: #b7c5e1;
    --alpy-ui-component-button-variant-primary-bg-hover: #0b3a9d;
    --alpy-ui-component-button-variant-primary-bg-pressed: #031643;
    --alpy-ui-component-button-variant-primary-border-default: #0a4fdf;
    --alpy-ui-component-button-variant-primary-border-disabled: #a1a1a1;
    --alpy-ui-component-button-variant-primary-border-hover: #0b3a9d;
    --alpy-ui-component-button-variant-primary-border-pressed: #031643;
    --alpy-ui-component-button-variant-primary-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-primary-icon-default: #fff;
    --alpy-ui-component-button-variant-primary-icon-disabled: #fff;
    --alpy-ui-component-button-variant-primary-icon-hover: #fff;
    --alpy-ui-component-button-variant-primary-icon-pressed: #fff;
    --alpy-ui-component-button-variant-primary-text-default: #fff;
    --alpy-ui-component-button-variant-primary-text-disabled: #fff;
    --alpy-ui-component-button-variant-primary-text-hover: #fff;
    --alpy-ui-component-button-variant-primary-text-pressed: #fff;
    --alpy-ui-component-button-variant-secondary-bg-default: #058625;
    --alpy-ui-component-button-variant-secondary-bg-disabled: #c7dac8;
    --alpy-ui-component-button-variant-secondary-bg-hover: #156221;
    --alpy-ui-component-button-variant-secondary-bg-pressed: #0d2e10;
    --alpy-ui-component-button-variant-secondary-border-default: #058625;
    --alpy-ui-component-button-variant-secondary-border-disabled: #c7dac8;
    --alpy-ui-component-button-variant-secondary-border-hover: #156221;
    --alpy-ui-component-button-variant-secondary-border-pressed: #0d2e10;
    --alpy-ui-component-button-variant-secondary-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-secondary-icon-default: #fff;
    --alpy-ui-component-button-variant-secondary-icon-disabled: #fff;
    --alpy-ui-component-button-variant-secondary-icon-hover: #fff;
    --alpy-ui-component-button-variant-secondary-icon-pressed: #fff;
    --alpy-ui-component-button-variant-secondary-text-default: #fff;
    --alpy-ui-component-button-variant-secondary-text-disabled: #fff;
    --alpy-ui-component-button-variant-secondary-text-hover: #fff;
    --alpy-ui-component-button-variant-secondary-text-pressed: #fff;
    --alpy-ui-component-card-body-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-card-borderRadius: var(--alpy-ui-size-8);
    --alpy-ui-component-card-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-card-content-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-card-content-padding: var(--alpy-ui-size-16);
    --alpy-ui-component-card-footer-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-card-header-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-card-icon-size: var(--alpy-ui-size-16);
    --alpy-ui-component-card-image-borderRadius: var(--alpy-ui-size-0);
    --alpy-ui-component-card-styles-brand-bg-default: #0a4fdf;
    --alpy-ui-component-card-styles-brand-border-default: #0000;
    --alpy-ui-component-card-styles-brand-description-text-default: #fff;
    --alpy-ui-component-card-styles-brand-header-icon-default: #fff;
    --alpy-ui-component-card-styles-brand-header-title-default: #fff;
    --alpy-ui-component-card-styles-default-bg-default: #fff;
    --alpy-ui-component-card-styles-default-border-default: #cecece;
    --alpy-ui-component-card-styles-default-description-text-default: #767676;
    --alpy-ui-component-card-styles-default-header-icon-default: #151515;
    --alpy-ui-component-card-styles-default-header-title-default: #151515;
    --alpy-ui-component-card-styles-softBrand-bg-default: #d5dce8;
    --alpy-ui-component-card-styles-softBrand-border-default: #d5dce8;
    --alpy-ui-component-card-styles-softBrand-description-text-default: #242424;
    --alpy-ui-component-card-styles-softBrand-header-icon-default: #0a4fdf;
    --alpy-ui-component-card-styles-softBrand-header-title-default: #0a4fdf;
    --alpy-ui-component-card-styles-subtle-bg-default: #f1f1f1;
    --alpy-ui-component-card-styles-subtle-border-default: #0000;
    --alpy-ui-component-card-styles-subtle-description-text-default: #767676;
    --alpy-ui-component-card-styles-subtle-header-icon-default: #151515;
    --alpy-ui-component-card-styles-subtle-header-title-default: #151515;
    --alpy-ui-component-card-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-body-fontSize: 14px;
    --alpy-ui-component-card-text-body-fontWeight: 400;
    --alpy-ui-component-card-text-body-letterSpacing: 0;
    --alpy-ui-component-card-text-body-lineHeight: 20px;
    --alpy-ui-component-card-text-caption-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-caption-fontSize: 14px;
    --alpy-ui-component-card-text-caption-fontWeight: 400;
    --alpy-ui-component-card-text-caption-letterSpacing: 0;
    --alpy-ui-component-card-text-caption-lineHeight: 20px;
    --alpy-ui-component-card-text-heading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-heading-fontSize: 19px;
    --alpy-ui-component-card-text-heading-fontWeight: 600;
    --alpy-ui-component-card-text-heading-letterSpacing: 0;
    --alpy-ui-component-card-text-heading-lineHeight: 28px;
    --alpy-ui-component-card-titleRow-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-cell-gap-content: var(--alpy-ui-size-12);
    --alpy-ui-component-cell-size-height: 48px;
    --alpy-ui-component-cell-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-cell-styles-body-text: #242424;
    --alpy-ui-component-cell-styles-header-icon: #5c5c5c;
    --alpy-ui-component-cell-styles-header-text: #151515;
    --alpy-ui-component-cell-styles-icon: #5c5c5c;
    --alpy-ui-component-cell-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-cell-text-body-fontSize: 14px;
    --alpy-ui-component-cell-text-body-fontWeight: 400;
    --alpy-ui-component-cell-text-body-letterSpacing: 0;
    --alpy-ui-component-cell-text-body-lineHeight: 20px;
    --alpy-ui-component-cell-text-header-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-cell-text-header-fontSize: 14px;
    --alpy-ui-component-cell-text-header-fontWeight: 400;
    --alpy-ui-component-cell-text-header-letterSpacing: 0;
    --alpy-ui-component-cell-text-header-lineHeight: 20px;
    --alpy-ui-component-checkbox-group-gap-headerToItems: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-group-gap-itemToItem: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-single-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-checkbox-single-gap-boxToText: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-single-gap-labelToDescription: var(--alpy-ui-size-0);
    --alpy-ui-component-checkbox-single-shape-radius: var(--alpy-ui-size-2);
    --alpy-ui-component-checkbox-single-size-box-lg: 24px;
    --alpy-ui-component-checkbox-single-size-box-md: 20px;
    --alpy-ui-component-checkbox-single-size-box-sm: 16px;
    --alpy-ui-component-checkbox-single-size-focusRing-lg: var(--alpy-ui-size-28);
    --alpy-ui-component-checkbox-single-size-focusRing-md: var(--alpy-ui-size-24);
    --alpy-ui-component-checkbox-single-size-focusRing-sm: var(--alpy-ui-size-20);
    --alpy-ui-component-checkbox-single-size-hitArea: 44px;
    --alpy-ui-component-checkbox-styles-default-off-box-bg: #fff;
    --alpy-ui-component-checkbox-styles-default-off-box-border: #767676;
    --alpy-ui-component-checkbox-styles-default-off-checkmark: #151515;
    --alpy-ui-component-checkbox-styles-default-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-default-off-text-label: #242424;
    --alpy-ui-component-checkbox-styles-default-on-box-bg: #fff;
    --alpy-ui-component-checkbox-styles-default-on-box-border: #767676;
    --alpy-ui-component-checkbox-styles-default-on-checkmark: #151515;
    --alpy-ui-component-checkbox-styles-default-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-default-on-text-label: #242424;
    --alpy-ui-component-checkbox-styles-disabled-off-box-bg: #f1f1f1;
    --alpy-ui-component-checkbox-styles-disabled-off-box-border: #767676;
    --alpy-ui-component-checkbox-styles-disabled-off-checkmark: #a1a1a1;
    --alpy-ui-component-checkbox-styles-disabled-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-disabled-off-text-label: #767676;
    --alpy-ui-component-checkbox-styles-disabled-on-box-bg: #f1f1f1;
    --alpy-ui-component-checkbox-styles-disabled-on-box-border: #767676;
    --alpy-ui-component-checkbox-styles-disabled-on-checkmark: #a1a1a1;
    --alpy-ui-component-checkbox-styles-disabled-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-disabled-on-text-label: #767676;
    --alpy-ui-component-checkbox-styles-error-off-box-bg: #ef4444;
    --alpy-ui-component-checkbox-styles-error-off-box-border: #767676;
    --alpy-ui-component-checkbox-styles-error-off-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-error-off-text-description: #b80808;
    --alpy-ui-component-checkbox-styles-error-off-text-label: #b80808;
    --alpy-ui-component-checkbox-styles-error-on-box-bg: #ef4444;
    --alpy-ui-component-checkbox-styles-error-on-box-border: #767676;
    --alpy-ui-component-checkbox-styles-error-on-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-error-on-text-description: #b80808;
    --alpy-ui-component-checkbox-styles-error-on-text-label: #b80808;
    --alpy-ui-component-checkbox-styles-focus-ring-color: #0a4fdf;
    --alpy-ui-component-checkbox-styles-focus-ring-width: var(--alpy-ui-size-2);
    --alpy-ui-component-checkbox-styles-selected-off-box-bg: #0a4fdf;
    --alpy-ui-component-checkbox-styles-selected-off-box-border: #134cc8;
    --alpy-ui-component-checkbox-styles-selected-off-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-selected-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-selected-off-text-label: #242424;
    --alpy-ui-component-checkbox-styles-selected-on-box-bg: #0a4fdf;
    --alpy-ui-component-checkbox-styles-selected-on-box-border: #134cc8;
    --alpy-ui-component-checkbox-styles-selected-on-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-selected-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-selected-on-text-label: #242424;
    --alpy-ui-component-checkbox-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-description-fontSize: 12px;
    --alpy-ui-component-checkbox-text-description-fontWeight: 400;
    --alpy-ui-component-checkbox-text-description-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-description-lineHeight: 20px;
    --alpy-ui-component-checkbox-text-groupHeading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-groupHeading-fontSize: 12px;
    --alpy-ui-component-checkbox-text-groupHeading-fontWeight: 400;
    --alpy-ui-component-checkbox-text-groupHeading-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-groupHeading-lineHeight: 20px;
    --alpy-ui-component-checkbox-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-label-fontSize: 14px;
    --alpy-ui-component-checkbox-text-label-fontWeight: 400;
    --alpy-ui-component-checkbox-text-label-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-label-lineHeight: 20px;
    --alpy-ui-component-date-picker-footer-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-date-picker-footer-size-height: var(--alpy-ui-size-56);
    --alpy-ui-component-date-picker-footer-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-grid-gap-columns: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-grid-gap-rows: var(--alpy-ui-size-12);
    --alpy-ui-component-date-picker-grid-shape-active-day-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-date-picker-grid-size-day: 44px;
    --alpy-ui-component-date-picker-grid-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-header-gap-month-picker: var(--alpy-ui-size-4);
    --alpy-ui-component-date-picker-header-size-height: var(--alpy-ui-size-56);
    --alpy-ui-component-date-picker-header-size-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-date-picker-header-size-month-picker-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-header-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-panel-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-date-picker-panel-gap-sections: var(--alpy-ui-size-0);
    --alpy-ui-component-date-picker-panel-shape-radius: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-panel-space-padding: var(--alpy-ui-size-8);
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-default: #0000;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-disabled: #0000;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-hover: #cecece;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-selected: #0a4fdf;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-default: #0a4fdf;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-disabled: #767676;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-hover: #0a4fdf;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-selected: #fff;
    --alpy-ui-component-date-picker-styles-basic-day-text: #242424;
    --alpy-ui-component-date-picker-styles-basic-header-icon: #5c5c5c;
    --alpy-ui-component-date-picker-styles-basic-header-text: #151515;
    --alpy-ui-component-date-picker-styles-basic-panel-background: #fff;
    --alpy-ui-component-date-picker-styles-basic-panel-border: #cecece;
    --alpy-ui-component-date-picker-styles-basic-weekday-text: #767676;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-default: #0000;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-disabled: #0000;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-hover: #cecece;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-selected: #a1a1a1;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-default: #0a4fdf;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-disabled: #767676;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-hover: #0a4fdf;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-selected: #0a4fdf;
    --alpy-ui-component-date-picker-styles-withTime-day-text: #242424;
    --alpy-ui-component-date-picker-styles-withTime-divider: #f1f1f1;
    --alpy-ui-component-date-picker-styles-withTime-footer-label: #242424;
    --alpy-ui-component-date-picker-styles-withTime-header-icon: #5c5c5c;
    --alpy-ui-component-date-picker-styles-withTime-header-text: #151515;
    --alpy-ui-component-date-picker-styles-withTime-panel-background: #fff;
    --alpy-ui-component-date-picker-styles-withTime-panel-border: #767676;
    --alpy-ui-component-date-picker-styles-withTime-weekday-text: #767676;
    --alpy-ui-component-date-picker-text-day-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-day-fontSize: 19px;
    --alpy-ui-component-date-picker-text-day-fontWeight: 600;
    --alpy-ui-component-date-picker-text-day-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-day-lineHeight: 28px;
    --alpy-ui-component-date-picker-text-footerLabel-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-footerLabel-fontSize: 14px;
    --alpy-ui-component-date-picker-text-footerLabel-fontWeight: 400;
    --alpy-ui-component-date-picker-text-footerLabel-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-footerLabel-lineHeight: 20px;
    --alpy-ui-component-date-picker-text-month-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-month-fontSize: 19px;
    --alpy-ui-component-date-picker-text-month-fontWeight: 600;
    --alpy-ui-component-date-picker-text-month-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-month-lineHeight: 28px;
    --alpy-ui-component-date-picker-text-weekday-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-weekday-fontSize: 14px;
    --alpy-ui-component-date-picker-text-weekday-fontWeight: 400;
    --alpy-ui-component-date-picker-text-weekday-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-weekday-lineHeight: 20px;
    --alpy-ui-component-date-picker-weekday-size-cell: var(--alpy-ui-size-36);
    --alpy-ui-component-date-picker-weekday-size-height: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-weekday-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-dropdown-menu-content-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-dropdown-menu-content-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-content-size-width: var(--alpy-ui-size-192);
    --alpy-ui-component-dropdown-menu-content-space-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-menu-item-shape-radius-focus: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-shape-radius-hover: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-size-height: var(--alpy-ui-size-36);
    --alpy-ui-component-dropdown-menu-item-size-icon: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-menu-item-size-icon-trailing: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-left: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-right: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-right-trailing: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-styles-menu-background-default: #fff;
    --alpy-ui-component-dropdown-styles-menu-background-disabled: #fff;
    --alpy-ui-component-dropdown-styles-menu-background-focus: #fff;
    --alpy-ui-component-dropdown-styles-menu-background-hover: #fff;
    --alpy-ui-component-dropdown-styles-menu-background-selected: #fff;
    --alpy-ui-component-dropdown-styles-menu-border-default: #cecece;
    --alpy-ui-component-dropdown-styles-menu-border-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-border-focus: #0a4fdf;
    --alpy-ui-component-dropdown-styles-menu-border-hover: #cecece;
    --alpy-ui-component-dropdown-styles-menu-border-selected: #cecece;
    --alpy-ui-component-dropdown-styles-menu-item-background-default: #fff;
    --alpy-ui-component-dropdown-styles-menu-item-background-disabled: #fff;
    --alpy-ui-component-dropdown-styles-menu-item-background-focus: #fff;
    --alpy-ui-component-dropdown-styles-menu-item-background-hover: #d5dce8;
    --alpy-ui-component-dropdown-styles-menu-item-background-selected: #fff;
    --alpy-ui-component-dropdown-styles-menu-item-icon-default: #151515;
    --alpy-ui-component-dropdown-styles-menu-item-icon-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-item-icon-focus: #151515;
    --alpy-ui-component-dropdown-styles-menu-item-icon-hover: #151515;
    --alpy-ui-component-dropdown-styles-menu-item-icon-selected: #134cc8;
    --alpy-ui-component-dropdown-styles-menu-item-text-default: #242424;
    --alpy-ui-component-dropdown-styles-menu-item-text-disabled: #767676;
    --alpy-ui-component-dropdown-styles-menu-item-text-focus: #242424;
    --alpy-ui-component-dropdown-styles-menu-item-text-hover: #242424;
    --alpy-ui-component-dropdown-styles-menu-item-text-selected: #242424;
    --alpy-ui-component-dropdown-styles-trigger-background-default: #fff;
    --alpy-ui-component-dropdown-styles-trigger-background-disabled: #fff;
    --alpy-ui-component-dropdown-styles-trigger-background-focus: #fff;
    --alpy-ui-component-dropdown-styles-trigger-background-hover: #d5dce8;
    --alpy-ui-component-dropdown-styles-trigger-background-selected: #fff;
    --alpy-ui-component-dropdown-styles-trigger-border-default: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-border-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-border-focus: #0a4fdf;
    --alpy-ui-component-dropdown-styles-trigger-border-hover: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-border-selected: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-icon-default: #151515;
    --alpy-ui-component-dropdown-styles-trigger-icon-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-icon-focus: #151515;
    --alpy-ui-component-dropdown-styles-trigger-icon-hover: #151515;
    --alpy-ui-component-dropdown-styles-trigger-icon-selected: #151515;
    --alpy-ui-component-dropdown-styles-trigger-text-default: #242424;
    --alpy-ui-component-dropdown-styles-trigger-text-disabled: #767676;
    --alpy-ui-component-dropdown-styles-trigger-text-focus: #242424;
    --alpy-ui-component-dropdown-styles-trigger-text-hover: #242424;
    --alpy-ui-component-dropdown-styles-trigger-text-selected: #242424;
    --alpy-ui-component-dropdown-text-item-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-dropdown-text-item-fontSize: 14px;
    --alpy-ui-component-dropdown-text-item-fontWeight: 400;
    --alpy-ui-component-dropdown-text-item-letterSpacing: 0;
    --alpy-ui-component-dropdown-text-item-lineHeight: 20px;
    --alpy-ui-component-dropdown-text-trigger-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-dropdown-text-trigger-fontSize: 14px;
    --alpy-ui-component-dropdown-text-trigger-fontWeight: 400;
    --alpy-ui-component-dropdown-text-trigger-letterSpacing: 0;
    --alpy-ui-component-dropdown-text-trigger-lineHeight: 20px;
    --alpy-ui-component-dropdown-trigger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-dropdown-trigger-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-trigger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-trigger-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-dropdown-trigger-size-icon: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-trigger-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-trigger-space-padding-y: var(--alpy-ui-size-0);
    --alpy-ui-component-iconGallery-color-default: #151515;
    --alpy-ui-component-iconGallery-size-lg: var(--alpy-ui-size-24);
    --alpy-ui-component-iconGallery-size-md: var(--alpy-ui-size-20);
    --alpy-ui-component-iconGallery-size-sm: var(--alpy-ui-size-16);
    --alpy-ui-component-iconGallery-size-xl: var(--alpy-ui-size-32);
    --alpy-ui-component-iconGallery-size-xs: var(--alpy-ui-size-12);
    --alpy-ui-component-iconGallery-size-xxl: var(--alpy-ui-size-48);
    --alpy-ui-component-iconGallery-size-xxs: var(--alpy-ui-size-8);
    --alpy-ui-component-iconGallery-size-xxxl: var(--alpy-ui-size-56);
    --alpy-ui-component-iconGallery-size-xxxxl: var(--alpy-ui-size-64);
    --alpy-ui-component-iconGallery-size-xxxxxl: var(--alpy-ui-size-128);
    --alpy-ui-component-image-borderRadius: var(--alpy-ui-size-0);
    --alpy-ui-component-image-color-placeholder: #f1f1f1;
    --alpy-ui-component-modal-background-default: #fff;
    --alpy-ui-component-modal-body-default: #5c5c5c;
    --alpy-ui-component-modal-border-default: #cecece;
    --alpy-ui-component-modal-close-default: #5c5c5c;
    --alpy-ui-component-modal-container-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-modal-container-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-modal-container-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-container-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-cta-gap-buttons: var(--alpy-ui-size-8);
    --alpy-ui-component-modal-header-gap-icon-to-headline: var(--alpy-ui-size-12);
    --alpy-ui-component-modal-header-size-close: var(--alpy-ui-size-12);
    --alpy-ui-component-modal-header-size-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-modal-headline-default: #242424;
    --alpy-ui-component-modal-icon-default: #151515;
    --alpy-ui-component-modal-stack-gap-sections: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-modal-text-body-fontSize: 14px;
    --alpy-ui-component-modal-text-body-fontWeight: 400;
    --alpy-ui-component-modal-text-body-letterSpacing: 0;
    --alpy-ui-component-modal-text-body-lineHeight: 20px;
    --alpy-ui-component-modal-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-modal-text-headline-fontSize: 19px;
    --alpy-ui-component-modal-text-headline-fontWeight: 600;
    --alpy-ui-component-modal-text-headline-letterSpacing: 0;
    --alpy-ui-component-modal-text-headline-lineHeight: 28px;
    --alpy-ui-component-pagination-basic-gap: var(--alpy-ui-size-24);
    --alpy-ui-component-pagination-basic-item-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-basic-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-pagination-basic-size-height: var(--alpy-ui-size-32);
    --alpy-ui-component-pagination-basic-size-width: var(--alpy-ui-size-32);
    --alpy-ui-component-pagination-boxed-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-boxed-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-boxed-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-boxed-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-boxed-size-min-width: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-boxed-space-item-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-pagination-boxed-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-trigger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-chrome-select-trigger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-trigger-size-height: var(--alpy-ui-size-36);
    --alpy-ui-component-pagination-chrome-select-trigger-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-pagination-chrome-select-trigger-space-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-compact-gap-segment: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-gap-value: var(--alpy-ui-size-4);
    --alpy-ui-component-pagination-compact-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-compact-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-compact-space-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-styles-basic-current-background: #0a4fdf;
    --alpy-ui-component-pagination-styles-basic-current-text: #fff;
    --alpy-ui-component-pagination-styles-basic-item-icon: #151515;
    --alpy-ui-component-pagination-styles-basic-item-icon-hover: #0b3a9d;
    --alpy-ui-component-pagination-styles-basic-item-text: #242424;
    --alpy-ui-component-pagination-styles-basic-item-text-hover: #0b3a9d;
    --alpy-ui-component-pagination-styles-boxed-current-background: #0a4fdf;
    --alpy-ui-component-pagination-styles-boxed-current-border: #0a4fdf;
    --alpy-ui-component-pagination-styles-boxed-current-text: #fff;
    --alpy-ui-component-pagination-styles-boxed-item-background: #fff;
    --alpy-ui-component-pagination-styles-boxed-item-background-hover: #cecece;
    --alpy-ui-component-pagination-styles-boxed-item-border: #cecece;
    --alpy-ui-component-pagination-styles-boxed-item-border-hover: #cecece;
    --alpy-ui-component-pagination-styles-boxed-item-icon: #151515;
    --alpy-ui-component-pagination-styles-boxed-item-icon-hover: #151515;
    --alpy-ui-component-pagination-styles-boxed-item-text: #242424;
    --alpy-ui-component-pagination-styles-boxed-item-text-hover: #242424;
    --alpy-ui-component-pagination-styles-chrome-meta-text: #767676;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-background: #fff;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-background-hover: #cecece;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-border: #cecece;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-border-hover: #cecece;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-icon: #151515;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-icon-hover: #151515;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-text: #242424;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-text-hover: #242424;
    --alpy-ui-component-pagination-styles-compact-button-background: #fff;
    --alpy-ui-component-pagination-styles-compact-button-background-hover: #cecece;
    --alpy-ui-component-pagination-styles-compact-button-border: #cecece;
    --alpy-ui-component-pagination-styles-compact-button-border-hover: #cecece;
    --alpy-ui-component-pagination-styles-compact-button-icon: #151515;
    --alpy-ui-component-pagination-styles-compact-button-icon-hover: #151515;
    --alpy-ui-component-pagination-styles-compact-value-background: #fff;
    --alpy-ui-component-pagination-styles-compact-value-border: #cecece;
    --alpy-ui-component-pagination-styles-compact-value-text: #242424;
    --alpy-ui-component-pagination-styles-compact-value-text-muted: #767676;
    --alpy-ui-component-pagination-text-meta-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-pagination-text-meta-fontSize: 12px;
    --alpy-ui-component-pagination-text-meta-fontWeight: 400;
    --alpy-ui-component-pagination-text-meta-letterSpacing: 0;
    --alpy-ui-component-pagination-text-meta-lineHeight: 20px;
    --alpy-ui-component-pagination-text-page-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-pagination-text-page-fontSize: 14px;
    --alpy-ui-component-pagination-text-page-fontWeight: 400;
    --alpy-ui-component-pagination-text-page-letterSpacing: 0;
    --alpy-ui-component-pagination-text-page-lineHeight: 20px;
    --alpy-ui-component-popover-default-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-popover-default-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-popover-default-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-default-size-caret-height: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-default-size-caret-width: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-default-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-default-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-styles-default-background: #f1f1f1;
    --alpy-ui-component-popover-styles-default-border: #f1f1f1;
    --alpy-ui-component-popover-styles-default-caret: #f1f1f1;
    --alpy-ui-component-popover-styles-default-description: #242424;
    --alpy-ui-component-popover-styles-default-headline: #151515;
    --alpy-ui-component-popover-styles-with-cta-background: #f1f1f1;
    --alpy-ui-component-popover-styles-with-cta-border: #f1f1f1;
    --alpy-ui-component-popover-styles-with-cta-caret: #f1f1f1;
    --alpy-ui-component-popover-styles-with-cta-description: #242424;
    --alpy-ui-component-popover-styles-with-cta-headline: #151515;
    --alpy-ui-component-popover-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-popover-text-description-fontSize: 12px;
    --alpy-ui-component-popover-text-description-fontWeight: 400;
    --alpy-ui-component-popover-text-description-letterSpacing: 0;
    --alpy-ui-component-popover-text-description-lineHeight: 20px;
    --alpy-ui-component-popover-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-popover-text-headline-fontSize: 16px;
    --alpy-ui-component-popover-text-headline-fontWeight: 400;
    --alpy-ui-component-popover-text-headline-letterSpacing: 0;
    --alpy-ui-component-popover-text-headline-lineHeight: 24px;
    --alpy-ui-component-popover-with-cta-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-popover-with-cta-gap-cta: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-popover-with-cta-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-with-cta-size-caret-height: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-with-cta-size-caret-width: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-basic-gap-status-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-basic-gap-track-to-status: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-basic-size-status-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-controller-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-progress-bar-controller-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-bar-controller-size-diameter: 24px;
    --alpy-ui-component-progress-bar-styles-basic-fill: #0a4fdf;
    --alpy-ui-component-progress-bar-styles-basic-fill-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-basic-fill-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-basic-status: #242424;
    --alpy-ui-component-progress-bar-styles-basic-status-complete: #242424;
    --alpy-ui-component-progress-bar-styles-basic-status-failed: #242424;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-basic-track: #cecece;
    --alpy-ui-component-progress-bar-styles-controller-border: #cecece;
    --alpy-ui-component-progress-bar-styles-controller-border-complete: #166534;
    --alpy-ui-component-progress-bar-styles-controller-border-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-controller-fill: #fff;
    --alpy-ui-component-progress-bar-styles-controller-fill-complete: #fff;
    --alpy-ui-component-progress-bar-styles-controller-fill-failed: #fff;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill: #0a4fdf;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline: #242424;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline-complete: #242424;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline-failed: #242424;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon-complete: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon-failed: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withFileUpload-track: #cecece;
    --alpy-ui-component-progress-bar-styles-withLabel-fill: #0a4fdf;
    --alpy-ui-component-progress-bar-styles-withLabel-fill-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-withLabel-fill-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withLabel-headline: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-headline-complete: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-headline-failed: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon-complete: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon-failed: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withLabel-meta: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-meta-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-meta-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withLabel-status: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-status-complete: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-status-failed: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon: #5c5c5c;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withLabel-track: #cecece;
    --alpy-ui-component-progress-bar-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-headline-fontSize: 14px;
    --alpy-ui-component-progress-bar-text-headline-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-headline-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-headline-lineHeight: 20px;
    --alpy-ui-component-progress-bar-text-meta-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-meta-fontSize: 12px;
    --alpy-ui-component-progress-bar-text-meta-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-meta-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-meta-lineHeight: 20px;
    --alpy-ui-component-progress-bar-text-status-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-status-fontSize: 14px;
    --alpy-ui-component-progress-bar-text-status-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-status-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-status-lineHeight: 20px;
    --alpy-ui-component-progress-bar-track-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-bar-track-size-height: 8px;
    --alpy-ui-component-progress-bar-withFileUpload-gap-file-icon-to-name: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-gap-headline-to-track: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-gap-track-to-meta: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-size-headline-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-progress-bar-withLabel-gap-header-to-track: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withLabel-gap-headline-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-withLabel-gap-status-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-withLabel-gap-track-to-meta: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withLabel-size-headline-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-withLabel-size-status-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-indicator-connector-size-height: 4px;
    --alpy-ui-component-progress-indicator-inline-gap-marker-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-inline-gap-step-to-connector: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-marker-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-indicator-marker-size-diameter: 40px;
    --alpy-ui-component-progress-indicator-marker-size-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-indicator-segmented-gap-icon-to-label: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-indicator-segmented-gap-segment: var(--alpy-ui-size-24);
    --alpy-ui-component-progress-indicator-segmented-gap-segment-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-segmented-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-indicator-segmented-size-height: 8px;
    --alpy-ui-component-progress-indicator-stacked-gap-marker-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-stacked-gap-step-to-connector: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-styles-inline-connector-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-inline-connector-inactive: #cecece;
    --alpy-ui-component-progress-indicator-styles-inline-label-active: #242424;
    --alpy-ui-component-progress-indicator-styles-inline-label-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-inline-label-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-active: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-completed: #22c55e;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-inactive: #cecece;
    --alpy-ui-component-progress-indicator-styles-inline-marker-icon-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-active: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-segmented-icon-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-segmented-label-active: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-segmented-label-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-segmented-label-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-active: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-inactive: #cecece;
    --alpy-ui-component-progress-indicator-styles-stacked-connector-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-stacked-connector-inactive: #cecece;
    --alpy-ui-component-progress-indicator-styles-stacked-label-active: #242424;
    --alpy-ui-component-progress-indicator-styles-stacked-label-completed: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-stacked-label-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-active: #0a4fdf;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-completed: #22c55e;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-inactive: #cecece;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-icon-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-active: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-inactive: #242424;
    --alpy-ui-component-progress-indicator-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-indicator-text-label-fontSize: 14px;
    --alpy-ui-component-progress-indicator-text-label-fontWeight: 400;
    --alpy-ui-component-progress-indicator-text-label-letterSpacing: 0;
    --alpy-ui-component-progress-indicator-text-label-lineHeight: 20px;
    --alpy-ui-component-progress-indicator-text-number-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-indicator-text-number-fontSize: 14px;
    --alpy-ui-component-progress-indicator-text-number-fontWeight: 400;
    --alpy-ui-component-progress-indicator-text-number-letterSpacing: 0;
    --alpy-ui-component-progress-indicator-text-number-lineHeight: 20px;
    --alpy-ui-component-radio-group-gap-headerToItems: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-group-gap-itemToItem: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-single-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-radio-single-gap-controlToText: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-single-gap-labelToDescription: var(--alpy-ui-size-0);
    --alpy-ui-component-radio-single-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-radio-single-size-control-lg: 24px;
    --alpy-ui-component-radio-single-size-control-md: 20px;
    --alpy-ui-component-radio-single-size-control-sm: 16px;
    --alpy-ui-component-radio-single-size-dot-lg: 12px;
    --alpy-ui-component-radio-single-size-dot-md: 12px;
    --alpy-ui-component-radio-single-size-dot-sm: 8px;
    --alpy-ui-component-radio-single-size-focusRing-lg: var(--alpy-ui-size-28);
    --alpy-ui-component-radio-single-size-focusRing-md: var(--alpy-ui-size-24);
    --alpy-ui-component-radio-single-size-focusRing-sm: var(--alpy-ui-size-20);
    --alpy-ui-component-radio-single-size-hitArea: 44px;
    --alpy-ui-component-radio-styles-default-off-control-bg: #fff;
    --alpy-ui-component-radio-styles-default-off-control-border: #767676;
    --alpy-ui-component-radio-styles-default-off-dot: #151515;
    --alpy-ui-component-radio-styles-default-off-text-description: #767676;
    --alpy-ui-component-radio-styles-default-off-text-label: #242424;
    --alpy-ui-component-radio-styles-default-on-control-bg: #fff;
    --alpy-ui-component-radio-styles-default-on-control-border: #767676;
    --alpy-ui-component-radio-styles-default-on-dot: #151515;
    --alpy-ui-component-radio-styles-default-on-text-description: #767676;
    --alpy-ui-component-radio-styles-default-on-text-label: #242424;
    --alpy-ui-component-radio-styles-disabled-off-control-bg: #f1f1f1;
    --alpy-ui-component-radio-styles-disabled-off-control-border: #767676;
    --alpy-ui-component-radio-styles-disabled-off-dot: #a1a1a1;
    --alpy-ui-component-radio-styles-disabled-off-text-description: #767676;
    --alpy-ui-component-radio-styles-disabled-off-text-label: #767676;
    --alpy-ui-component-radio-styles-disabled-on-control-bg: #f1f1f1;
    --alpy-ui-component-radio-styles-disabled-on-control-border: #767676;
    --alpy-ui-component-radio-styles-disabled-on-dot: #a1a1a1;
    --alpy-ui-component-radio-styles-disabled-on-text-description: #767676;
    --alpy-ui-component-radio-styles-disabled-on-text-label: #767676;
    --alpy-ui-component-radio-styles-error-off-control-bg: #ef4444;
    --alpy-ui-component-radio-styles-error-off-control-border: #767676;
    --alpy-ui-component-radio-styles-error-off-dot: #fff;
    --alpy-ui-component-radio-styles-error-off-text-description: #b80808;
    --alpy-ui-component-radio-styles-error-off-text-label: #b80808;
    --alpy-ui-component-radio-styles-error-on-control-bg: #ef4444;
    --alpy-ui-component-radio-styles-error-on-control-border: #767676;
    --alpy-ui-component-radio-styles-error-on-dot: #fff;
    --alpy-ui-component-radio-styles-error-on-text-description: #b80808;
    --alpy-ui-component-radio-styles-error-on-text-label: #b80808;
    --alpy-ui-component-radio-styles-focus-ring-color: #0a4fdf;
    --alpy-ui-component-radio-styles-focus-ring-width: var(--alpy-ui-size-2);
    --alpy-ui-component-radio-styles-selected-off-control-bg: #0a4fdf;
    --alpy-ui-component-radio-styles-selected-off-control-border: #134cc8;
    --alpy-ui-component-radio-styles-selected-off-dot: #fff;
    --alpy-ui-component-radio-styles-selected-off-text-description: #767676;
    --alpy-ui-component-radio-styles-selected-off-text-label: #242424;
    --alpy-ui-component-radio-styles-selected-on-control-bg: #0a4fdf;
    --alpy-ui-component-radio-styles-selected-on-control-border: #134cc8;
    --alpy-ui-component-radio-styles-selected-on-dot: #fff;
    --alpy-ui-component-radio-styles-selected-on-text-description: #767676;
    --alpy-ui-component-radio-styles-selected-on-text-label: #242424;
    --alpy-ui-component-radio-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-description-fontSize: 12px;
    --alpy-ui-component-radio-text-description-fontWeight: 400;
    --alpy-ui-component-radio-text-description-letterSpacing: 0;
    --alpy-ui-component-radio-text-description-lineHeight: 20px;
    --alpy-ui-component-radio-text-groupHeading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-groupHeading-fontSize: 12px;
    --alpy-ui-component-radio-text-groupHeading-fontWeight: 400;
    --alpy-ui-component-radio-text-groupHeading-letterSpacing: 0;
    --alpy-ui-component-radio-text-groupHeading-lineHeight: 20px;
    --alpy-ui-component-radio-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-label-fontSize: 14px;
    --alpy-ui-component-radio-text-label-fontWeight: 400;
    --alpy-ui-component-radio-text-label-letterSpacing: 0;
    --alpy-ui-component-radio-text-label-lineHeight: 20px;
    --alpy-ui-component-table-header-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-table-row-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-table-styles-header-background: #f1f1f1;
    --alpy-ui-component-table-styles-row-background: #fff;
    --alpy-ui-component-table-styles-row-background-hover: #cecece;
    --alpy-ui-component-table-styles-row-border: #f1f1f1;
    --alpy-ui-component-table-styles-surface-background: #fff;
    --alpy-ui-component-tabs-basic-horizontal-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-basic-horizontal-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-size-min-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-basic-horizontal-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-basic-horizontal-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-space-item-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tabs-basic-horizontal-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-basic-vertical-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-size-min-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-basic-vertical-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-basic-vertical-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-space-item-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tabs-basic-vertical-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-icon-only-horizontal-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-horizontal-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-horizontal-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-icon-only-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-icon-only-vertical-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-vertical-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-vertical-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-vertical-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-vertical-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-line-horizontal-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-tabs-line-horizontal-border-indicator-width: var(--alpy-ui-size-2);
    --alpy-ui-component-tabs-line-horizontal-gap: var(--alpy-ui-size-24);
    --alpy-ui-component-tabs-line-horizontal-space-group-padding: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-horizontal-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-horizontal-space-item-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-horizontal-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-tabs-line-vertical-border-indicator-width: var(--alpy-ui-size-2);
    --alpy-ui-component-tabs-line-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-vertical-space-group-padding: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-vertical-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-space-item-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-styles-basic-container: #f1f1f1;
    --alpy-ui-component-tabs-styles-basic-icon-hover: #0b3a9d;
    --alpy-ui-component-tabs-styles-basic-icon-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-basic-icon-selected: #0b3a9d;
    --alpy-ui-component-tabs-styles-basic-item-background-inactive: #0000;
    --alpy-ui-component-tabs-styles-basic-item-background-selected: #fff;
    --alpy-ui-component-tabs-styles-basic-text-hover: #0a4fdf;
    --alpy-ui-component-tabs-styles-basic-text-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-basic-text-selected: #0a4fdf;
    --alpy-ui-component-tabs-styles-icon-only-container: #f1f1f1;
    --alpy-ui-component-tabs-styles-icon-only-icon-hover: #6c95e5;
    --alpy-ui-component-tabs-styles-icon-only-icon-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-icon-only-icon-selected: #6c95e5;
    --alpy-ui-component-tabs-styles-icon-only-item-background-inactive: #0000;
    --alpy-ui-component-tabs-styles-icon-only-item-background-selected: #fff;
    --alpy-ui-component-tabs-styles-line-container: #0000;
    --alpy-ui-component-tabs-styles-line-divider: #cecece;
    --alpy-ui-component-tabs-styles-line-icon-hover: #0b3a9d;
    --alpy-ui-component-tabs-styles-line-icon-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-line-icon-selected: #0b3a9d;
    --alpy-ui-component-tabs-styles-line-indicator: #0a4fdf;
    --alpy-ui-component-tabs-styles-line-text-hover: #4079ee;
    --alpy-ui-component-tabs-styles-line-text-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-line-text-selected: #4079ee;
    --alpy-ui-component-tabs-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tabs-text-label-fontSize: 14px;
    --alpy-ui-component-tabs-text-label-fontWeight: 400;
    --alpy-ui-component-tabs-text-label-letterSpacing: 0;
    --alpy-ui-component-tabs-text-label-lineHeight: 20px;
    --alpy-ui-component-text-input-field-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-text-input-field-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-field-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-field-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-text-input-field-size-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-text-input-field-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-text-input-field-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-text-input-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-stack-gap-label-to-field: var(--alpy-ui-size-12);
    --alpy-ui-component-text-input-styles-background-default: #fff;
    --alpy-ui-component-text-input-styles-background-disabled: #f1f1f1;
    --alpy-ui-component-text-input-styles-background-focused: #fff;
    --alpy-ui-component-text-input-styles-background-invalid: #fff;
    --alpy-ui-component-text-input-styles-border-default: #cecece;
    --alpy-ui-component-text-input-styles-border-disabled: #a1a1a1;
    --alpy-ui-component-text-input-styles-border-focused: #0a4fdf;
    --alpy-ui-component-text-input-styles-border-invalid: #b80808;
    --alpy-ui-component-text-input-styles-description-default: #5c5c5c;
    --alpy-ui-component-text-input-styles-description-disabled: #767676;
    --alpy-ui-component-text-input-styles-description-focused: #5c5c5c;
    --alpy-ui-component-text-input-styles-description-invalid: #5c5c5c;
    --alpy-ui-component-text-input-styles-icon-default: #5c5c5c;
    --alpy-ui-component-text-input-styles-icon-disabled: #a1a1a1;
    --alpy-ui-component-text-input-styles-icon-focused: #151515;
    --alpy-ui-component-text-input-styles-icon-invalid: #151515;
    --alpy-ui-component-text-input-styles-label-default: #151515;
    --alpy-ui-component-text-input-styles-label-disabled: #92aee0;
    --alpy-ui-component-text-input-styles-label-focused: #151515;
    --alpy-ui-component-text-input-styles-label-invalid: #151515;
    --alpy-ui-component-text-input-styles-text-default: #242424;
    --alpy-ui-component-text-input-styles-text-disabled: #767676;
    --alpy-ui-component-text-input-styles-text-focused: #242424;
    --alpy-ui-component-text-input-styles-text-invalid: #b80808;
    --alpy-ui-component-text-input-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-description-fontSize: 12px;
    --alpy-ui-component-text-input-text-description-fontWeight: 400;
    --alpy-ui-component-text-input-text-description-letterSpacing: 0;
    --alpy-ui-component-text-input-text-description-lineHeight: 20px;
    --alpy-ui-component-text-input-text-field-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-field-fontSize: 16px;
    --alpy-ui-component-text-input-text-field-fontWeight: 400;
    --alpy-ui-component-text-input-text-field-letterSpacing: 0;
    --alpy-ui-component-text-input-text-field-lineHeight: 24px;
    --alpy-ui-component-text-input-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-label-fontSize: 14px;
    --alpy-ui-component-text-input-text-label-fontWeight: 400;
    --alpy-ui-component-text-input-text-label-letterSpacing: 0;
    --alpy-ui-component-text-input-text-label-lineHeight: 20px;
    --alpy-ui-component-textarea-field-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-textarea-field-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-textarea-field-size-height: var(--alpy-ui-size-96);
    --alpy-ui-component-textarea-field-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-textarea-field-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-textarea-stack-gap-label-to-field: var(--alpy-ui-size-12);
    --alpy-ui-component-textarea-styles-background-default: #fff;
    --alpy-ui-component-textarea-styles-background-disabled: #f1f1f1;
    --alpy-ui-component-textarea-styles-background-focused: #fff;
    --alpy-ui-component-textarea-styles-background-invalid: #fff;
    --alpy-ui-component-textarea-styles-border-default: #cecece;
    --alpy-ui-component-textarea-styles-border-disabled: #a1a1a1;
    --alpy-ui-component-textarea-styles-border-focused: #0a4fdf;
    --alpy-ui-component-textarea-styles-border-invalid: #b80808;
    --alpy-ui-component-textarea-styles-description-default: #5c5c5c;
    --alpy-ui-component-textarea-styles-description-disabled: #767676;
    --alpy-ui-component-textarea-styles-description-focused: #5c5c5c;
    --alpy-ui-component-textarea-styles-description-invalid: #b80808;
    --alpy-ui-component-textarea-styles-label-default: #151515;
    --alpy-ui-component-textarea-styles-label-disabled: #151515;
    --alpy-ui-component-textarea-styles-label-focused: #151515;
    --alpy-ui-component-textarea-styles-label-invalid: #151515;
    --alpy-ui-component-textarea-styles-text-default: #242424;
    --alpy-ui-component-textarea-styles-text-disabled: #767676;
    --alpy-ui-component-textarea-styles-text-focused: #242424;
    --alpy-ui-component-textarea-styles-text-invalid: #b80808;
    --alpy-ui-component-textarea-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-description-fontSize: 12px;
    --alpy-ui-component-textarea-text-description-fontWeight: 400;
    --alpy-ui-component-textarea-text-description-letterSpacing: 0;
    --alpy-ui-component-textarea-text-description-lineHeight: 20px;
    --alpy-ui-component-textarea-text-field-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-field-fontSize: 16px;
    --alpy-ui-component-textarea-text-field-fontWeight: 400;
    --alpy-ui-component-textarea-text-field-letterSpacing: 0;
    --alpy-ui-component-textarea-text-field-lineHeight: 24px;
    --alpy-ui-component-textarea-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-label-fontSize: 14px;
    --alpy-ui-component-textarea-text-label-fontWeight: 400;
    --alpy-ui-component-textarea-text-label-letterSpacing: 0;
    --alpy-ui-component-textarea-text-label-lineHeight: 20px;
    --alpy-ui-component-toggle-control-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-toggle-control-gap-trackToLabel: var(--alpy-ui-size-8);
    --alpy-ui-component-toggle-control-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-toggle-control-size-thumb-lg: 20px;
    --alpy-ui-component-toggle-control-size-thumb-md: 16px;
    --alpy-ui-component-toggle-control-size-thumb-sm: 12px;
    --alpy-ui-component-toggle-control-size-trackHeight-lg: 24px;
    --alpy-ui-component-toggle-control-size-trackHeight-md: 20px;
    --alpy-ui-component-toggle-control-size-trackHeight-sm: 16px;
    --alpy-ui-component-toggle-control-size-trackWidth-lg: var(--alpy-ui-size-40);
    --alpy-ui-component-toggle-control-size-trackWidth-md: var(--alpy-ui-size-36);
    --alpy-ui-component-toggle-control-size-trackWidth-sm: var(--alpy-ui-size-32);
    --alpy-ui-component-toggle-styles-checked-label: #242424;
    --alpy-ui-component-toggle-styles-checked-label-disabled: #767676;
    --alpy-ui-component-toggle-styles-checked-thumb-bg: #fff;
    --alpy-ui-component-toggle-styles-checked-thumb-bg-disabled: #fff;
    --alpy-ui-component-toggle-styles-checked-track-bg: #0a4fdf;
    --alpy-ui-component-toggle-styles-checked-track-bg-disabled: #f1f1f1;
    --alpy-ui-component-toggle-styles-checked-track-border: #134cc8;
    --alpy-ui-component-toggle-styles-checked-track-border-disabled: #767676;
    --alpy-ui-component-toggle-styles-default-label: #242424;
    --alpy-ui-component-toggle-styles-default-label-disabled: #767676;
    --alpy-ui-component-toggle-styles-default-thumb-bg: #fff;
    --alpy-ui-component-toggle-styles-default-thumb-bg-disabled: #fff;
    --alpy-ui-component-toggle-styles-default-track-bg: #767676;
    --alpy-ui-component-toggle-styles-default-track-bg-disabled: #f1f1f1;
    --alpy-ui-component-toggle-styles-default-track-border: #767676;
    --alpy-ui-component-toggle-styles-default-track-border-disabled: #a1a1a1;
    --alpy-ui-component-toggle-text-label-lg-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-lg-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-lg-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-lg-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-lg-lineHeight: 20px;
    --alpy-ui-component-toggle-text-label-md-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-md-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-md-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-md-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-md-lineHeight: 20px;
    --alpy-ui-component-toggle-text-label-sm-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-sm-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-sm-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-sm-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-sm-lineHeight: 20px;
    --alpy-ui-component-tooltip-basic-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-basic-size-caret-height: var(--alpy-ui-size-4);
    --alpy-ui-component-tooltip-basic-size-caret-width: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-basic-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-tooltip-basic-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-tooltip-hover-card-gap-cta: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-hover-card-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-tooltip-hover-card-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-hover-card-size-caret-height: var(--alpy-ui-size-4);
    --alpy-ui-component-tooltip-hover-card-size-caret-width: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-hover-card-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-hover-card-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-styles-basic-background: #f1f1f1;
    --alpy-ui-component-tooltip-styles-basic-caret: #f1f1f1;
    --alpy-ui-component-tooltip-styles-basic-text: #242424;
    --alpy-ui-component-tooltip-styles-hover-card-background: #f1f1f1;
    --alpy-ui-component-tooltip-styles-hover-card-caret: #f1f1f1;
    --alpy-ui-component-tooltip-styles-hover-card-description: #242424;
    --alpy-ui-component-tooltip-styles-hover-card-headline: #151515;
    --alpy-ui-component-tooltip-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-description-fontSize: 12px;
    --alpy-ui-component-tooltip-text-description-fontWeight: 400;
    --alpy-ui-component-tooltip-text-description-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-description-lineHeight: 20px;
    --alpy-ui-component-tooltip-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-headline-fontSize: 12px;
    --alpy-ui-component-tooltip-text-headline-fontWeight: 400;
    --alpy-ui-component-tooltip-text-headline-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-headline-lineHeight: 20px;
    --alpy-ui-component-tooltip-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-label-fontSize: 12px;
    --alpy-ui-component-tooltip-text-label-fontWeight: 400;
    --alpy-ui-component-tooltip-text-label-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-label-lineHeight: 20px;
    --alpy-ui-font-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-fontSize: 16px;
    --alpy-ui-font-body-fontWeight: 400;
    --alpy-ui-font-body-large-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-large-fontSize: 18px;
    --alpy-ui-font-body-large-fontWeight: 600;
    --alpy-ui-font-body-large-letterSpacing: 0;
    --alpy-ui-font-body-large-lineHeight: 28px;
    --alpy-ui-font-body-letterSpacing: 0;
    --alpy-ui-font-body-lineHeight: 24px;
    --alpy-ui-font-body-medium-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-medium-fontSize: 14px;
    --alpy-ui-font-body-medium-fontWeight: 400;
    --alpy-ui-font-body-medium-letterSpacing: 0;
    --alpy-ui-font-body-medium-lineHeight: 20px;
    --alpy-ui-font-body-small-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-small-fontSize: 12px;
    --alpy-ui-font-body-small-fontWeight: 400;
    --alpy-ui-font-body-small-letterSpacing: 0;
    --alpy-ui-font-body-small-lineHeight: 20px;
    --alpy-ui-font-body-xsmall-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-xsmall-fontSize: 10px;
    --alpy-ui-font-body-xsmall-fontWeight: 400;
    --alpy-ui-font-body-xsmall-letterSpacing: 0;
    --alpy-ui-font-body-xsmall-lineHeight: 16px;
    --alpy-ui-font-heading-large-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-large-fontSize: 40px;
    --alpy-ui-font-heading-large-fontWeight: 700;
    --alpy-ui-font-heading-large-letterSpacing: -.02em;
    --alpy-ui-font-heading-large-lineHeight: 48px;
    --alpy-ui-font-heading-medium-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-medium-fontSize: 33px;
    --alpy-ui-font-heading-medium-fontWeight: 700;
    --alpy-ui-font-heading-medium-letterSpacing: -.02em;
    --alpy-ui-font-heading-medium-lineHeight: 40px;
    --alpy-ui-font-heading-small-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-small-fontSize: 28px;
    --alpy-ui-font-heading-small-fontWeight: 500;
    --alpy-ui-font-heading-small-letterSpacing: -.02em;
    --alpy-ui-font-heading-small-lineHeight: 32px;
    --alpy-ui-font-heading-xlarge-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xlarge-fontSize: 48px;
    --alpy-ui-font-heading-xlarge-fontWeight: 700;
    --alpy-ui-font-heading-xlarge-letterSpacing: -.02em;
    --alpy-ui-font-heading-xlarge-lineHeight: 56px;
    --alpy-ui-font-heading-xsmall-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xsmall-fontSize: 23px;
    --alpy-ui-font-heading-xsmall-fontWeight: 500;
    --alpy-ui-font-heading-xsmall-letterSpacing: -.02em;
    --alpy-ui-font-heading-xsmall-lineHeight: 28px;
    --alpy-ui-font-heading-xxlarge-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xxlarge-fontSize: 57px;
    --alpy-ui-font-heading-xxlarge-fontWeight: 700;
    --alpy-ui-font-heading-xxlarge-letterSpacing: -.02em;
    --alpy-ui-font-heading-xxlarge-lineHeight: 68px;
    --alpy-ui-font-weight-black: 900;
    --alpy-ui-font-weight-bold: 700;
    --alpy-ui-font-weight-extraBold: 800;
    --alpy-ui-font-weight-extraLight: 200;
    --alpy-ui-font-weight-light: 300;
    --alpy-ui-font-weight-medium: 500;
    --alpy-ui-font-weight-regular: 400;
    --alpy-ui-font-weight-semiBold: 600;
    --alpy-ui-font-weight-thin: 100;
    --alpy-ui-icon-gap-lg: var(--alpy-ui-size-16);
    --alpy-ui-icon-gap-md: var(--alpy-ui-size-12);
    --alpy-ui-icon-gap-sm: var(--alpy-ui-size-8);
    --alpy-ui-icon-gap-xl: var(--alpy-ui-size-20);
    --alpy-ui-icon-gap-xs: var(--alpy-ui-size-4);
    --alpy-ui-icon-gap-xxl: var(--alpy-ui-size-24);
    --alpy-ui-icon-size-12: var(--alpy-ui-size-12);
    --alpy-ui-icon-size-128: var(--alpy-ui-size-128);
    --alpy-ui-icon-size-16: var(--alpy-ui-size-16);
    --alpy-ui-icon-size-20: var(--alpy-ui-size-20);
    --alpy-ui-icon-size-24: var(--alpy-ui-size-24);
    --alpy-ui-icon-size-32: var(--alpy-ui-size-32);
    --alpy-ui-icon-size-48: var(--alpy-ui-size-48);
    --alpy-ui-icon-size-56: var(--alpy-ui-size-56);
    --alpy-ui-icon-size-64: var(--alpy-ui-size-64);
    --alpy-ui-icon-size-8: var(--alpy-ui-size-8);
    --alpy-ui-radius-full: var(--alpy-ui-size-9999);
    --alpy-ui-radius-large: var(--alpy-ui-size-12);
    --alpy-ui-radius-medium: var(--alpy-ui-size-8);
    --alpy-ui-radius-none: var(--alpy-ui-size-0);
    --alpy-ui-radius-small: var(--alpy-ui-size-4);
    --alpy-ui-radius-tile: var(--alpy-ui-size-12);
    --alpy-ui-radius-xlarge: var(--alpy-ui-size-16);
    --alpy-ui-radius-xsmall: var(--alpy-ui-size-2);
    --alpy-ui-radius-xxlarge: var(--alpy-ui-size-24);
    --alpy-ui-size-0: 0px;
    --alpy-ui-size-0-5: .5px;
    --alpy-ui-size-1: 1px;
    --alpy-ui-size-1-5: 1.5px;
    --alpy-ui-size-100: 100px;
    --alpy-ui-size-1020: 1020px;
    --alpy-ui-size-104: 104px;
    --alpy-ui-size-108: 108px;
    --alpy-ui-size-112: 112px;
    --alpy-ui-size-116: 116px;
    --alpy-ui-size-12: 12px;
    --alpy-ui-size-120: 120px;
    --alpy-ui-size-124: 124px;
    --alpy-ui-size-128: 128px;
    --alpy-ui-size-16: 16px;
    --alpy-ui-size-192: 192px;
    --alpy-ui-size-2: 2px;
    --alpy-ui-size-20: 20px;
    --alpy-ui-size-200: 200px;
    --alpy-ui-size-24: 24px;
    --alpy-ui-size-28: 28px;
    --alpy-ui-size-32: 32px;
    --alpy-ui-size-36: 36px;
    --alpy-ui-size-4: 4px;
    --alpy-ui-size-40: 40px;
    --alpy-ui-size-44: 44px;
    --alpy-ui-size-48: 48px;
    --alpy-ui-size-52: 52px;
    --alpy-ui-size-56: 56px;
    --alpy-ui-size-60: 60px;
    --alpy-ui-size-64: 64px;
    --alpy-ui-size-68: 68px;
    --alpy-ui-size-72: 72px;
    --alpy-ui-size-750: 750px;
    --alpy-ui-size-76: 76px;
    --alpy-ui-size-8: 8px;
    --alpy-ui-size-80: 80px;
    --alpy-ui-size-84: 84px;
    --alpy-ui-size-88: 88px;
    --alpy-ui-size-92: 92px;
    --alpy-ui-size-96: 96px;
    --alpy-ui-size-9999: 9999px;
    --alpy-ui-space-0: var(--alpy-ui-size-0);
    --alpy-ui-space-1: var(--alpy-ui-size-1);
    --alpy-ui-space-100: var(--alpy-ui-size-100);
    --alpy-ui-space-104: var(--alpy-ui-size-104);
    --alpy-ui-space-108: var(--alpy-ui-size-108);
    --alpy-ui-space-112: var(--alpy-ui-size-112);
    --alpy-ui-space-116: var(--alpy-ui-size-116);
    --alpy-ui-space-12: var(--alpy-ui-size-12);
    --alpy-ui-space-120: var(--alpy-ui-size-120);
    --alpy-ui-space-124: var(--alpy-ui-size-124);
    --alpy-ui-space-128: var(--alpy-ui-size-128);
    --alpy-ui-space-16: var(--alpy-ui-size-16);
    --alpy-ui-space-192: var(--alpy-ui-size-192);
    --alpy-ui-space-2: var(--alpy-ui-size-2);
    --alpy-ui-space-20: var(--alpy-ui-size-20);
    --alpy-ui-space-24: var(--alpy-ui-size-24);
    --alpy-ui-space-28: var(--alpy-ui-size-28);
    --alpy-ui-space-32: var(--alpy-ui-size-32);
    --alpy-ui-space-36: var(--alpy-ui-size-36);
    --alpy-ui-space-4: var(--alpy-ui-size-4);
    --alpy-ui-space-40: var(--alpy-ui-size-40);
    --alpy-ui-space-48: var(--alpy-ui-size-48);
    --alpy-ui-space-52: var(--alpy-ui-size-52);
    --alpy-ui-space-56: var(--alpy-ui-size-56);
    --alpy-ui-space-60: var(--alpy-ui-size-60);
    --alpy-ui-space-64: var(--alpy-ui-size-64);
    --alpy-ui-space-68: var(--alpy-ui-size-68);
    --alpy-ui-space-72: var(--alpy-ui-size-72);
    --alpy-ui-space-76: var(--alpy-ui-size-76);
    --alpy-ui-space-8: var(--alpy-ui-size-8);
    --alpy-ui-space-80: var(--alpy-ui-size-80);
    --alpy-ui-space-84: var(--alpy-ui-size-84);
    --alpy-ui-space-88: var(--alpy-ui-size-88);
    --alpy-ui-space-92: var(--alpy-ui-size-92);
    --alpy-ui-space-96: var(--alpy-ui-size-96)
}

:root[data-alpy-mode=dark] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
    --alpy-ui-border-width-0: var(--alpy-ui-size-0);
    --alpy-ui-border-width-1: var(--alpy-ui-size-1);
    --alpy-ui-border-width-1-5: var(--alpy-ui-size-1-5);
    --alpy-ui-border-width-2: var(--alpy-ui-size-2);
    --alpy-ui-border-width-4: var(--alpy-ui-size-4);
    --alpy-ui-border-width-hairline: var(--alpy-ui-size-0-5);
    --alpy-ui-color-border-brand-color-one-strong-one: #0a4fdf;
    --alpy-ui-color-border-brand-color-one-strong-three: #6c95e5;
    --alpy-ui-color-border-brand-color-one-strong-two: #4079ee;
    --alpy-ui-color-border-brand-color-one-subtle-one: #031643;
    --alpy-ui-color-border-brand-color-one-subtle-three: #0b3a9d;
    --alpy-ui-color-border-brand-color-one-subtle-two: #062770;
    --alpy-ui-color-border-brand-color-three-strong-one: #fca701;
    --alpy-ui-color-border-brand-color-three-strong-three: #e5ba65;
    --alpy-ui-color-border-brand-color-three-strong-two: #efb035;
    --alpy-ui-color-border-brand-color-three-subtle-one: #3f2a00;
    --alpy-ui-color-border-brand-color-three-subtle-three: #9e6800;
    --alpy-ui-color-border-brand-color-three-subtle-two: #6f4900;
    --alpy-ui-color-border-brand-color-two-strong-one: #058625;
    --alpy-ui-color-border-brand-color-two-strong-three: #7fb581;
    --alpy-ui-color-border-brand-color-two-strong-two: #52a457;
    --alpy-ui-color-border-brand-color-two-subtle-one: #0d2e10;
    --alpy-ui-color-border-brand-color-two-subtle-three: #156221;
    --alpy-ui-color-border-brand-color-two-subtle-two: #0f4817;
    --alpy-ui-color-border-functional-danger: #ef4444;
    --alpy-ui-color-border-functional-info: #3b82f6;
    --alpy-ui-color-border-functional-success: #22c55e;
    --alpy-ui-color-border-functional-warning: #ae6d00;
    --alpy-ui-color-border-input: #767676;
    --alpy-ui-color-border-interaction-disabled: #a1a1a1;
    --alpy-ui-color-border-interaction-focused: #0a4fdf;
    --alpy-ui-color-border-interaction-hover: #6c95e5;
    --alpy-ui-color-border-interaction-pressed: #031643;
    --alpy-ui-color-border-interaction-selected: #6c95e5;
    --alpy-ui-color-border-neutral-strong-one: #333;
    --alpy-ui-color-border-neutral-strong-three: #767676;
    --alpy-ui-color-border-neutral-strong-two: #5c5c5c;
    --alpy-ui-color-border-neutral-subtle-one: #151515;
    --alpy-ui-color-border-neutral-subtle-three: #333;
    --alpy-ui-color-border-neutral-subtle-two: #1c1c1c;
    --alpy-ui-color-border-onColor: #fff;
    --alpy-ui-color-functional-danger: #ef4444;
    --alpy-ui-color-functional-danger-soft: #b80808;
    --alpy-ui-color-functional-danger-strong: #ecdfdf;
    --alpy-ui-color-functional-danger-subtle: #4d0000;
    --alpy-ui-color-functional-info: #3b82f6;
    --alpy-ui-color-functional-info-soft: #0449ba;
    --alpy-ui-color-functional-info-strong: #dee4ec;
    --alpy-ui-color-functional-info-subtle: #001d4c;
    --alpy-ui-color-functional-success: #86efac;
    --alpy-ui-color-functional-success-soft: #22c55e;
    --alpy-ui-color-functional-success-strong: #dcfce7;
    --alpy-ui-color-functional-success-subtle: #166534;
    --alpy-ui-color-functional-warning: #ffbd4f;
    --alpy-ui-color-functional-warning-soft: #ae6d00;
    --alpy-ui-color-functional-warning-strong: #e8e2d6;
    --alpy-ui-color-functional-warning-subtle: #402800;
    --alpy-ui-color-icon-accent: #6c95e5;
    --alpy-ui-color-icon-brand-color-one-strong-one: #6c95e5;
    --alpy-ui-color-icon-brand-color-one-strong-three: #d5dce8;
    --alpy-ui-color-icon-brand-color-one-strong-two: #b7c5e1;
    --alpy-ui-color-icon-brand-color-one-subtle-one: #031643;
    --alpy-ui-color-icon-brand-color-one-subtle-three: #0a4fdf;
    --alpy-ui-color-icon-brand-color-one-subtle-two: #0b3a9d;
    --alpy-ui-color-icon-brand-color-three-strong-one: #e5ba65;
    --alpy-ui-color-icon-brand-color-three-strong-three: #e8e2d5;
    --alpy-ui-color-icon-brand-color-three-strong-two: #e2d3b5;
    --alpy-ui-color-icon-brand-color-three-subtle-one: #3f2a00;
    --alpy-ui-color-icon-brand-color-three-subtle-three: #fca701;
    --alpy-ui-color-icon-brand-color-three-subtle-two: #9e6800;
    --alpy-ui-color-icon-brand-color-two-strong-one: #7fb581;
    --alpy-ui-color-icon-brand-color-two-strong-three: #e6ede5;
    --alpy-ui-color-icon-brand-color-two-strong-two: #c7dac8;
    --alpy-ui-color-icon-brand-color-two-subtle-one: #0d2e10;
    --alpy-ui-color-icon-brand-color-two-subtle-three: #058625;
    --alpy-ui-color-icon-brand-color-two-subtle-two: #156221;
    --alpy-ui-color-icon-danger: #b80808;
    --alpy-ui-color-icon-default: #cecece;
    --alpy-ui-color-icon-disabled: #a1a1a1;
    --alpy-ui-color-icon-info: #0449ba;
    --alpy-ui-color-icon-interaction-disabled: #92aee0;
    --alpy-ui-color-icon-interaction-focused: #0a4fdf;
    --alpy-ui-color-icon-interaction-hover: #0b3a9d;
    --alpy-ui-color-icon-interaction-pressed: #031643;
    --alpy-ui-color-icon-interaction-selected: #6c95e5;
    --alpy-ui-color-icon-inverse: #000;
    --alpy-ui-color-icon-onColor: #fff;
    --alpy-ui-color-icon-subtle: #767676;
    --alpy-ui-color-icon-subtlest: #333;
    --alpy-ui-color-icon-success: #22c55e;
    --alpy-ui-color-icon-warning: #ae6d00;
    --alpy-ui-color-shades-brand-color-one-strong-one: #6c95e5;
    --alpy-ui-color-shades-brand-color-one-strong-three: #d5dce8;
    --alpy-ui-color-shades-brand-color-one-strong-two: #b7c5e1;
    --alpy-ui-color-shades-brand-color-one-subtle-one: #031643;
    --alpy-ui-color-shades-brand-color-one-subtle-three: #0a4fdf;
    --alpy-ui-color-shades-brand-color-one-subtle-two: #0b3a9d;
    --alpy-ui-color-shades-brand-color-three-strong-one: #e5ba65;
    --alpy-ui-color-shades-brand-color-three-strong-three: #e8e2d5;
    --alpy-ui-color-shades-brand-color-three-strong-two: #e2d3b5;
    --alpy-ui-color-shades-brand-color-three-subtle-one: #3f2a00;
    --alpy-ui-color-shades-brand-color-three-subtle-three: #fca701;
    --alpy-ui-color-shades-brand-color-three-subtle-two: #9e6800;
    --alpy-ui-color-shades-brand-color-two-strong-one: #7fb581;
    --alpy-ui-color-shades-brand-color-two-strong-three: #e6ede5;
    --alpy-ui-color-shades-brand-color-two-strong-two: #c7dac8;
    --alpy-ui-color-shades-brand-color-two-subtle-one: #0d2e10;
    --alpy-ui-color-shades-brand-color-two-subtle-three: #058625;
    --alpy-ui-color-shades-brand-color-two-subtle-two: #156221;
    --alpy-ui-color-shades-neutral-strong-one: #767676;
    --alpy-ui-color-shades-neutral-strong-three: #f1f1f1;
    --alpy-ui-color-shades-neutral-strong-two: #cecece;
    --alpy-ui-color-shades-neutral-subtle-one: #151515;
    --alpy-ui-color-shades-neutral-subtle-three: #333;
    --alpy-ui-color-shades-neutral-subtle-two: #242424;
    --alpy-ui-color-surface-canvas: #000;
    --alpy-ui-color-surface-interaction-disabled: #151515;
    --alpy-ui-color-surface-interaction-focused: #1c1c1c;
    --alpy-ui-color-surface-interaction-hover: #1c1c1c;
    --alpy-ui-color-surface-interaction-pressed: #031643;
    --alpy-ui-color-surface-interaction-selected: #242424;
    --alpy-ui-color-system-black: #000;
    --alpy-ui-color-system-transparent: #0000;
    --alpy-ui-color-system-white: #fff;
    --alpy-ui-color-text-body: #a1a1a1;
    --alpy-ui-color-text-body-muted: #767676;
    --alpy-ui-color-text-body-subtle: #5c5c5c;
    --alpy-ui-color-text-brand-color-one-accent: #6c95e5;
    --alpy-ui-color-text-brand-color-one-accent-strong: #92aee0;
    --alpy-ui-color-text-brand-color-one-accent-subtle: #4079ee;
    --alpy-ui-color-text-brand-color-three-accent: #e5ba65;
    --alpy-ui-color-text-brand-color-three-accent-strong: #e1c590;
    --alpy-ui-color-text-brand-color-three-accent-subtle: #efb035;
    --alpy-ui-color-text-brand-color-two-accent: #7fb581;
    --alpy-ui-color-text-brand-color-two-accent-strong: #a6c6a5;
    --alpy-ui-color-text-brand-color-two-accent-subtle: #52a457;
    --alpy-ui-color-text-functional-danger: #b80808;
    --alpy-ui-color-text-functional-danger-strong: #4d0000;
    --alpy-ui-color-text-functional-info: #0449ba;
    --alpy-ui-color-text-functional-info-strong: #001d4c;
    --alpy-ui-color-text-functional-success: #22c55e;
    --alpy-ui-color-text-functional-success-strong: #166534;
    --alpy-ui-color-text-functional-warning: #ae6d00;
    --alpy-ui-color-text-functional-warning-strong: #402800;
    --alpy-ui-color-text-heading: #f1f1f1;
    --alpy-ui-color-text-heading-onColor: #fff;
    --alpy-ui-color-text-inverse: #fff;
    --alpy-ui-color-text-link: #6c95e5;
    --alpy-ui-color-text-link-disabled: #92aee0;
    --alpy-ui-color-text-link-hover: #92aee0;
    --alpy-ui-color-text-link-inverse: #0a4fdf;
    --alpy-ui-color-text-link-pressed: #4079ee;
    --alpy-ui-color-text-link-visited: #7fb581;
    --alpy-ui-color-text-onColor: #fff;
    --alpy-ui-color-text-subheading: #a1a1a1;
    --alpy-ui-component-accordion-basic-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-basic-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-basic-shape-radius: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-basic-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-basic-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-basic-space-content-padding-x: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-space-header-padding-x: var(--alpy-ui-size-0);
    --alpy-ui-component-accordion-basic-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-inCard-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-inCard-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-inCard-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-gap-card-header: var(--alpy-ui-size-4);
    --alpy-ui-component-accordion-inCard-shape-card-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-inCard-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-inCard-space-card-padding: var(--alpy-ui-size-24);
    --alpy-ui-component-accordion-inCard-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-inCard-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-styles-basic-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-basic-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-basic-contentText-default: #a1a1a1;
    --alpy-ui-component-accordion-styles-basic-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-basic-contentText-focus: #a1a1a1;
    --alpy-ui-component-accordion-styles-basic-contentText-hover: #a1a1a1;
    --alpy-ui-component-accordion-styles-basic-divider-default: #767676;
    --alpy-ui-component-accordion-styles-basic-divider-disabled: #767676;
    --alpy-ui-component-accordion-styles-basic-divider-focus: #767676;
    --alpy-ui-component-accordion-styles-basic-divider-hover: #767676;
    --alpy-ui-component-accordion-styles-basic-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-basic-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-basic-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-basic-headerText-default: #f1f1f1;
    --alpy-ui-component-accordion-styles-basic-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-basic-headerText-focus: #f1f1f1;
    --alpy-ui-component-accordion-styles-basic-headerText-hover: #92aee0;
    --alpy-ui-component-accordion-styles-basic-icon-default: #767676;
    --alpy-ui-component-accordion-styles-basic-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-basic-icon-focus: #767676;
    --alpy-ui-component-accordion-styles-basic-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-inCard-borderColor-default: #767676;
    --alpy-ui-component-accordion-styles-inCard-borderColor-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-inCard-contentText-default: #a1a1a1;
    --alpy-ui-component-accordion-styles-inCard-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-contentText-focus: #a1a1a1;
    --alpy-ui-component-accordion-styles-inCard-contentText-hover: #a1a1a1;
    --alpy-ui-component-accordion-styles-inCard-divider-default: #767676;
    --alpy-ui-component-accordion-styles-inCard-divider-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-divider-focus: #767676;
    --alpy-ui-component-accordion-styles-inCard-divider-hover: #767676;
    --alpy-ui-component-accordion-styles-inCard-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-inCard-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-inCard-headerText-default: #f1f1f1;
    --alpy-ui-component-accordion-styles-inCard-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-inCard-headerText-focus: #f1f1f1;
    --alpy-ui-component-accordion-styles-inCard-headerText-hover: #92aee0;
    --alpy-ui-component-accordion-styles-inCard-icon-default: #767676;
    --alpy-ui-component-accordion-styles-inCard-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-inCard-icon-focus: #767676;
    --alpy-ui-component-accordion-styles-inCard-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-default: #767676;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-focus: #0a4fdf;
    --alpy-ui-component-accordion-styles-withBorders-borderColor-hover: #6c95e5;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-default: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-focus: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentBg-hover: #0000;
    --alpy-ui-component-accordion-styles-withBorders-contentText-default: #a1a1a1;
    --alpy-ui-component-accordion-styles-withBorders-contentText-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-contentText-focus: #a1a1a1;
    --alpy-ui-component-accordion-styles-withBorders-contentText-hover: #a1a1a1;
    --alpy-ui-component-accordion-styles-withBorders-divider-default: #767676;
    --alpy-ui-component-accordion-styles-withBorders-divider-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-divider-focus: #767676;
    --alpy-ui-component-accordion-styles-withBorders-divider-hover: #767676;
    --alpy-ui-component-accordion-styles-withBorders-focusRing-default: #0a4fdf;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-default: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-disabled: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-focus: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerBg-hover: #0000;
    --alpy-ui-component-accordion-styles-withBorders-headerText-default: #f1f1f1;
    --alpy-ui-component-accordion-styles-withBorders-headerText-disabled: #767676;
    --alpy-ui-component-accordion-styles-withBorders-headerText-focus: #f1f1f1;
    --alpy-ui-component-accordion-styles-withBorders-headerText-hover: #92aee0;
    --alpy-ui-component-accordion-styles-withBorders-icon-default: #767676;
    --alpy-ui-component-accordion-styles-withBorders-icon-disabled: #a1a1a1;
    --alpy-ui-component-accordion-styles-withBorders-icon-focus: #767676;
    --alpy-ui-component-accordion-styles-withBorders-icon-hover: #0b3a9d;
    --alpy-ui-component-accordion-text-card-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-card-description-fontSize: 14px;
    --alpy-ui-component-accordion-text-card-description-fontWeight: 400;
    --alpy-ui-component-accordion-text-card-description-letterSpacing: 0;
    --alpy-ui-component-accordion-text-card-description-lineHeight: 20px;
    --alpy-ui-component-accordion-text-card-title-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-card-title-fontSize: 16px;
    --alpy-ui-component-accordion-text-card-title-fontWeight: 400;
    --alpy-ui-component-accordion-text-card-title-letterSpacing: 0;
    --alpy-ui-component-accordion-text-card-title-lineHeight: 24px;
    --alpy-ui-component-accordion-text-content-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-content-fontSize: 14px;
    --alpy-ui-component-accordion-text-content-fontWeight: 400;
    --alpy-ui-component-accordion-text-content-letterSpacing: 0;
    --alpy-ui-component-accordion-text-content-lineHeight: 20px;
    --alpy-ui-component-accordion-text-header-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-accordion-text-header-fontSize: 16px;
    --alpy-ui-component-accordion-text-header-fontWeight: 400;
    --alpy-ui-component-accordion-text-header-letterSpacing: 0;
    --alpy-ui-component-accordion-text-header-lineHeight: 24px;
    --alpy-ui-component-accordion-withBorders-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-withBorders-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-accordion-withBorders-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-gap-item-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-accordion-withBorders-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-size-header-height: var(--alpy-ui-size-40);
    --alpy-ui-component-accordion-withBorders-size-icon-size: var(--alpy-ui-size-12);
    --alpy-ui-component-accordion-withBorders-space-content-padding-bottom: var(--alpy-ui-size-8);
    --alpy-ui-component-accordion-withBorders-space-content-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-withBorders-space-header-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-accordion-withBorders-space-header-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-basic-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-basic-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-basic-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-basic-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-basic-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-basic-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-basic-size-icon-size: 24px;
    --alpy-ui-component-alert-basic-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-basic-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-danger-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-danger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-danger-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-danger-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-danger-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-danger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-danger-size-icon-size: 24px;
    --alpy-ui-component-alert-danger-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-danger-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-info-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-info-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-info-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-info-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-info-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-info-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-info-size-icon-size: 24px;
    --alpy-ui-component-alert-info-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-info-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-styles-basic-bg-default: #000;
    --alpy-ui-component-alert-styles-basic-body-default: #a1a1a1;
    --alpy-ui-component-alert-styles-basic-border-default: #1c1c1c;
    --alpy-ui-component-alert-styles-basic-icon-default: #cecece;
    --alpy-ui-component-alert-styles-basic-iconBorder-default: #cecece;
    --alpy-ui-component-alert-styles-basic-title-default: #f1f1f1;
    --alpy-ui-component-alert-styles-danger-bg-default: #4d0000;
    --alpy-ui-component-alert-styles-danger-body-default: #a1a1a1;
    --alpy-ui-component-alert-styles-danger-border-default: #ef4444;
    --alpy-ui-component-alert-styles-danger-icon-default: #b80808;
    --alpy-ui-component-alert-styles-danger-iconBorder-default: #ef4444;
    --alpy-ui-component-alert-styles-danger-title-default: #f1f1f1;
    --alpy-ui-component-alert-styles-info-bg-default: #001d4c;
    --alpy-ui-component-alert-styles-info-body-default: #a1a1a1;
    --alpy-ui-component-alert-styles-info-border-default: #3b82f6;
    --alpy-ui-component-alert-styles-info-icon-default: #0449ba;
    --alpy-ui-component-alert-styles-info-iconBorder-default: #3b82f6;
    --alpy-ui-component-alert-styles-info-title-default: #f1f1f1;
    --alpy-ui-component-alert-styles-success-bg-default: #166534;
    --alpy-ui-component-alert-styles-success-body-default: #a1a1a1;
    --alpy-ui-component-alert-styles-success-border-default: #22c55e;
    --alpy-ui-component-alert-styles-success-icon-default: #22c55e;
    --alpy-ui-component-alert-styles-success-iconBorder-default: #22c55e;
    --alpy-ui-component-alert-styles-success-title-default: #f1f1f1;
    --alpy-ui-component-alert-styles-warning-bg-default: #402800;
    --alpy-ui-component-alert-styles-warning-body-default: #a1a1a1;
    --alpy-ui-component-alert-styles-warning-border-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-icon-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-iconBorder-default: #ae6d00;
    --alpy-ui-component-alert-styles-warning-title-default: #f1f1f1;
    --alpy-ui-component-alert-success-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-success-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-success-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-success-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-success-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-success-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-success-size-icon-size: 24px;
    --alpy-ui-component-alert-success-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-success-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-alert-text-body-fontSize: 12px;
    --alpy-ui-component-alert-text-body-fontWeight: 400;
    --alpy-ui-component-alert-text-body-letterSpacing: 0;
    --alpy-ui-component-alert-text-body-lineHeight: 20px;
    --alpy-ui-component-alert-text-heading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-alert-text-heading-fontSize: 16px;
    --alpy-ui-component-alert-text-heading-fontWeight: 400;
    --alpy-ui-component-alert-text-heading-letterSpacing: 0;
    --alpy-ui-component-alert-text-heading-lineHeight: 24px;
    --alpy-ui-component-alert-warning-border-icon-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-warning-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-alert-warning-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-gap-content: var(--alpy-ui-size-4);
    --alpy-ui-component-alert-warning-gap-cta: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-gap-cta-buttons: var(--alpy-ui-size-12);
    --alpy-ui-component-alert-warning-shape-icon-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-alert-warning-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-alert-warning-size-icon-size: 24px;
    --alpy-ui-component-alert-warning-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-alert-warning-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-badge-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-badge-brandOne-background-default: #031643;
    --alpy-ui-component-badge-brandOne-border-default: #0a4fdf;
    --alpy-ui-component-badge-brandOne-text-default: #92aee0;
    --alpy-ui-component-badge-brandThree-background-default: #3f2a00;
    --alpy-ui-component-badge-brandThree-border-default: #fca701;
    --alpy-ui-component-badge-brandThree-text-default: #e1c590;
    --alpy-ui-component-badge-brandTwo-background-default: #0d2e10;
    --alpy-ui-component-badge-brandTwo-border-default: #058625;
    --alpy-ui-component-badge-brandTwo-text-default: #a6c6a5;
    --alpy-ui-component-badge-danger-background-default: #4d0000;
    --alpy-ui-component-badge-danger-border-default: #ef4444;
    --alpy-ui-component-badge-danger-text-default: #fff;
    --alpy-ui-component-badge-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-badge-info-background-default: #001d4c;
    --alpy-ui-component-badge-info-border-default: #3b82f6;
    --alpy-ui-component-badge-info-text-default: #fff;
    --alpy-ui-component-badge-neutral-background-default: #151515;
    --alpy-ui-component-badge-neutral-border-default: #333;
    --alpy-ui-component-badge-neutral-text-default: #a1a1a1;
    --alpy-ui-component-badge-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-badge-space-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-badge-space-padding-y: var(--alpy-ui-size-4);
    --alpy-ui-component-badge-success-background-default: #166534;
    --alpy-ui-component-badge-success-border-default: #22c55e;
    --alpy-ui-component-badge-success-text-default: #fff;
    --alpy-ui-component-badge-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-badge-text-label-fontSize: 12px;
    --alpy-ui-component-badge-text-label-fontWeight: 400;
    --alpy-ui-component-badge-text-label-letterSpacing: 0;
    --alpy-ui-component-badge-text-label-lineHeight: 20px;
    --alpy-ui-component-badge-warning-background-default: #402800;
    --alpy-ui-component-badge-warning-border-default: #ae6d00;
    --alpy-ui-component-badge-warning-text-default: #fff;
    --alpy-ui-component-breadcrumb-ellipsis-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-ellipsis-size-box: var(--alpy-ui-size-28);
    --alpy-ui-component-breadcrumb-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-separator-size-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-breadcrumb-styles-current-text: #f1f1f1;
    --alpy-ui-component-breadcrumb-styles-ellipsis-background: #1c1c1c;
    --alpy-ui-component-breadcrumb-styles-ellipsis-text: #a1a1a1;
    --alpy-ui-component-breadcrumb-styles-link-text: #767676;
    --alpy-ui-component-breadcrumb-styles-separator-icon: #767676;
    --alpy-ui-component-breadcrumb-text-link-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-breadcrumb-text-link-fontSize: 12px;
    --alpy-ui-component-breadcrumb-text-link-fontWeight: 400;
    --alpy-ui-component-breadcrumb-text-link-letterSpacing: 0;
    --alpy-ui-component-breadcrumb-text-link-lineHeight: 20px;
    --alpy-ui-component-breadcrumb-text-page-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-breadcrumb-text-page-fontSize: 14px;
    --alpy-ui-component-breadcrumb-text-page-fontWeight: 400;
    --alpy-ui-component-breadcrumb-text-page-letterSpacing: 0;
    --alpy-ui-component-breadcrumb-text-page-lineHeight: 20px;
    --alpy-ui-component-breadcrumb-withDropdown-space-menu-offset-y: var(--alpy-ui-size-8);
    --alpy-ui-component-button-content-iconOnly-lg-height: var(--alpy-ui-size-52);
    --alpy-ui-component-button-content-iconOnly-lg-width: var(--alpy-ui-size-52);
    --alpy-ui-component-button-content-iconOnly-md-height: var(--alpy-ui-size-40);
    --alpy-ui-component-button-content-iconOnly-md-width: var(--alpy-ui-size-40);
    --alpy-ui-component-button-content-iconOnly-sm-height: var(--alpy-ui-size-32);
    --alpy-ui-component-button-content-iconOnly-sm-width: var(--alpy-ui-size-32);
    --alpy-ui-component-button-size-lg-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-lg-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-lg-iconSize: 20px;
    --alpy-ui-component-button-size-lg-minHeight: var(--alpy-ui-size-52);
    --alpy-ui-component-button-size-lg-paddingX: var(--alpy-ui-size-24);
    --alpy-ui-component-button-size-lg-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-lg-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-lg-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-lg-text-fontSize: 19px;
    --alpy-ui-component-button-size-lg-text-fontWeight: 600;
    --alpy-ui-component-button-size-lg-text-letterSpacing: 0;
    --alpy-ui-component-button-size-lg-text-lineHeight: 28px;
    --alpy-ui-component-button-size-md-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-md-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-md-iconSize: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-md-minHeight: var(--alpy-ui-size-40);
    --alpy-ui-component-button-size-md-paddingX: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-md-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-md-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-md-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-md-text-fontSize: 14px;
    --alpy-ui-component-button-size-md-text-fontWeight: 400;
    --alpy-ui-component-button-size-md-text-letterSpacing: 0;
    --alpy-ui-component-button-size-md-text-lineHeight: 20px;
    --alpy-ui-component-button-size-sm-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-button-size-sm-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-button-size-sm-iconSize: var(--alpy-ui-size-12);
    --alpy-ui-component-button-size-sm-minHeight: var(--alpy-ui-size-32);
    --alpy-ui-component-button-size-sm-paddingX: var(--alpy-ui-size-16);
    --alpy-ui-component-button-size-sm-paddingY: var(--alpy-ui-size-0);
    --alpy-ui-component-button-size-sm-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-button-size-sm-text-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-button-size-sm-text-fontSize: 12px;
    --alpy-ui-component-button-size-sm-text-fontWeight: 400;
    --alpy-ui-component-button-size-sm-text-letterSpacing: 0;
    --alpy-ui-component-button-size-sm-text-lineHeight: 20px;
    --alpy-ui-component-button-variant-link-bg-default: #0000;
    --alpy-ui-component-button-variant-link-bg-disabled: #0000;
    --alpy-ui-component-button-variant-link-bg-hover: #0000;
    --alpy-ui-component-button-variant-link-bg-pressed: #0000;
    --alpy-ui-component-button-variant-link-border-default: #0000;
    --alpy-ui-component-button-variant-link-border-disabled: #0000;
    --alpy-ui-component-button-variant-link-border-hover: #0000;
    --alpy-ui-component-button-variant-link-border-pressed: #0000;
    --alpy-ui-component-button-variant-link-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-link-icon-default: #fff;
    --alpy-ui-component-button-variant-link-icon-disabled: #a1a1a1;
    --alpy-ui-component-button-variant-link-icon-hover: #fff;
    --alpy-ui-component-button-variant-link-icon-pressed: #fff;
    --alpy-ui-component-button-variant-link-text-default: #fff;
    --alpy-ui-component-button-variant-link-text-disabled: #767676;
    --alpy-ui-component-button-variant-link-text-hover: #fff;
    --alpy-ui-component-button-variant-link-text-pressed: #fff;
    --alpy-ui-component-button-variant-outline-bg-default: #0000;
    --alpy-ui-component-button-variant-outline-bg-disabled: #0000;
    --alpy-ui-component-button-variant-outline-bg-hover: #0000;
    --alpy-ui-component-button-variant-outline-bg-pressed: #0000;
    --alpy-ui-component-button-variant-outline-border-default: #fff;
    --alpy-ui-component-button-variant-outline-border-disabled: #333;
    --alpy-ui-component-button-variant-outline-border-hover: #fff;
    --alpy-ui-component-button-variant-outline-border-pressed: #fff;
    --alpy-ui-component-button-variant-outline-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-outline-icon-default: #fff;
    --alpy-ui-component-button-variant-outline-icon-disabled: #a1a1a1;
    --alpy-ui-component-button-variant-outline-icon-hover: #fff;
    --alpy-ui-component-button-variant-outline-icon-pressed: #fff;
    --alpy-ui-component-button-variant-outline-text-default: #fff;
    --alpy-ui-component-button-variant-outline-text-disabled: #767676;
    --alpy-ui-component-button-variant-outline-text-hover: #fff;
    --alpy-ui-component-button-variant-outline-text-pressed: #fff;
    --alpy-ui-component-button-variant-primary-bg-default: #fff;
    --alpy-ui-component-button-variant-primary-bg-disabled: #fff;
    --alpy-ui-component-button-variant-primary-bg-hover: #fff;
    --alpy-ui-component-button-variant-primary-bg-pressed: #fff;
    --alpy-ui-component-button-variant-primary-border-default: #fff;
    --alpy-ui-component-button-variant-primary-border-disabled: #fff;
    --alpy-ui-component-button-variant-primary-border-hover: #fff;
    --alpy-ui-component-button-variant-primary-border-pressed: #fff;
    --alpy-ui-component-button-variant-primary-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-primary-icon-default: #6c95e5;
    --alpy-ui-component-button-variant-primary-icon-disabled: #92aee0;
    --alpy-ui-component-button-variant-primary-icon-hover: #6c95e5;
    --alpy-ui-component-button-variant-primary-icon-pressed: #031643;
    --alpy-ui-component-button-variant-primary-text-default: #0a4fdf;
    --alpy-ui-component-button-variant-primary-text-disabled: #92aee0;
    --alpy-ui-component-button-variant-primary-text-hover: #0a4fdf;
    --alpy-ui-component-button-variant-primary-text-pressed: #4079ee;
    --alpy-ui-component-button-variant-secondary-bg-default: #fff;
    --alpy-ui-component-button-variant-secondary-bg-disabled: #fff;
    --alpy-ui-component-button-variant-secondary-bg-hover: #fff;
    --alpy-ui-component-button-variant-secondary-bg-pressed: #fff;
    --alpy-ui-component-button-variant-secondary-border-default: #fff;
    --alpy-ui-component-button-variant-secondary-border-disabled: #fff;
    --alpy-ui-component-button-variant-secondary-border-hover: #fff;
    --alpy-ui-component-button-variant-secondary-border-pressed: #fff;
    --alpy-ui-component-button-variant-secondary-focusRing-color: #0a4fdf;
    --alpy-ui-component-button-variant-secondary-icon-default: #7fb581;
    --alpy-ui-component-button-variant-secondary-icon-disabled: #156221;
    --alpy-ui-component-button-variant-secondary-icon-hover: #c7dac8;
    --alpy-ui-component-button-variant-secondary-icon-pressed: #e6ede5;
    --alpy-ui-component-button-variant-secondary-text-default: #a6c6a5;
    --alpy-ui-component-button-variant-secondary-text-disabled: #156221;
    --alpy-ui-component-button-variant-secondary-text-hover: #a6c6a5;
    --alpy-ui-component-button-variant-secondary-text-pressed: #a6c6a5;
    --alpy-ui-component-card-body-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-card-borderRadius: var(--alpy-ui-size-8);
    --alpy-ui-component-card-borderWidth: var(--alpy-ui-size-1);
    --alpy-ui-component-card-content-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-card-content-padding: var(--alpy-ui-size-16);
    --alpy-ui-component-card-footer-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-card-header-gap: var(--alpy-ui-size-4);
    --alpy-ui-component-card-icon-size: var(--alpy-ui-size-16);
    --alpy-ui-component-card-image-borderRadius: var(--alpy-ui-size-0);
    --alpy-ui-component-card-styles-brand-bg-default: #6c95e5;
    --alpy-ui-component-card-styles-brand-border-default: #0000;
    --alpy-ui-component-card-styles-brand-description-text-default: #fff;
    --alpy-ui-component-card-styles-brand-header-icon-default: #fff;
    --alpy-ui-component-card-styles-brand-header-title-default: #fff;
    --alpy-ui-component-card-styles-default-bg-default: #000;
    --alpy-ui-component-card-styles-default-border-default: #1c1c1c;
    --alpy-ui-component-card-styles-default-description-text-default: #767676;
    --alpy-ui-component-card-styles-default-header-icon-default: #f1f1f1;
    --alpy-ui-component-card-styles-default-header-title-default: #f1f1f1;
    --alpy-ui-component-card-styles-softBrand-bg-default: #031643;
    --alpy-ui-component-card-styles-softBrand-border-default: #031643;
    --alpy-ui-component-card-styles-softBrand-description-text-default: #a1a1a1;
    --alpy-ui-component-card-styles-softBrand-header-icon-default: #6c95e5;
    --alpy-ui-component-card-styles-softBrand-header-title-default: #6c95e5;
    --alpy-ui-component-card-styles-subtle-bg-default: #151515;
    --alpy-ui-component-card-styles-subtle-border-default: #0000;
    --alpy-ui-component-card-styles-subtle-description-text-default: #767676;
    --alpy-ui-component-card-styles-subtle-header-icon-default: #f1f1f1;
    --alpy-ui-component-card-styles-subtle-header-title-default: #f1f1f1;
    --alpy-ui-component-card-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-body-fontSize: 14px;
    --alpy-ui-component-card-text-body-fontWeight: 400;
    --alpy-ui-component-card-text-body-letterSpacing: 0;
    --alpy-ui-component-card-text-body-lineHeight: 20px;
    --alpy-ui-component-card-text-caption-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-caption-fontSize: 14px;
    --alpy-ui-component-card-text-caption-fontWeight: 400;
    --alpy-ui-component-card-text-caption-letterSpacing: 0;
    --alpy-ui-component-card-text-caption-lineHeight: 20px;
    --alpy-ui-component-card-text-heading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-card-text-heading-fontSize: 19px;
    --alpy-ui-component-card-text-heading-fontWeight: 600;
    --alpy-ui-component-card-text-heading-letterSpacing: 0;
    --alpy-ui-component-card-text-heading-lineHeight: 28px;
    --alpy-ui-component-card-titleRow-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-cell-gap-content: var(--alpy-ui-size-12);
    --alpy-ui-component-cell-size-height: 48px;
    --alpy-ui-component-cell-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-cell-styles-body-text: #a1a1a1;
    --alpy-ui-component-cell-styles-header-icon: #767676;
    --alpy-ui-component-cell-styles-header-text: #f1f1f1;
    --alpy-ui-component-cell-styles-icon: #767676;
    --alpy-ui-component-cell-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-cell-text-body-fontSize: 14px;
    --alpy-ui-component-cell-text-body-fontWeight: 400;
    --alpy-ui-component-cell-text-body-letterSpacing: 0;
    --alpy-ui-component-cell-text-body-lineHeight: 20px;
    --alpy-ui-component-cell-text-header-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-cell-text-header-fontSize: 14px;
    --alpy-ui-component-cell-text-header-fontWeight: 400;
    --alpy-ui-component-cell-text-header-letterSpacing: 0;
    --alpy-ui-component-cell-text-header-lineHeight: 20px;
    --alpy-ui-component-checkbox-group-gap-headerToItems: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-group-gap-itemToItem: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-single-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-checkbox-single-gap-boxToText: var(--alpy-ui-size-8);
    --alpy-ui-component-checkbox-single-gap-labelToDescription: var(--alpy-ui-size-0);
    --alpy-ui-component-checkbox-single-shape-radius: var(--alpy-ui-size-2);
    --alpy-ui-component-checkbox-single-size-box-lg: 24px;
    --alpy-ui-component-checkbox-single-size-box-md: 20px;
    --alpy-ui-component-checkbox-single-size-box-sm: 16px;
    --alpy-ui-component-checkbox-single-size-focusRing-lg: var(--alpy-ui-size-28);
    --alpy-ui-component-checkbox-single-size-focusRing-md: var(--alpy-ui-size-24);
    --alpy-ui-component-checkbox-single-size-focusRing-sm: var(--alpy-ui-size-20);
    --alpy-ui-component-checkbox-single-size-hitArea: 44px;
    --alpy-ui-component-checkbox-styles-default-off-box-bg: #000;
    --alpy-ui-component-checkbox-styles-default-off-box-border: #333;
    --alpy-ui-component-checkbox-styles-default-off-checkmark: #cecece;
    --alpy-ui-component-checkbox-styles-default-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-default-off-text-label: #a1a1a1;
    --alpy-ui-component-checkbox-styles-default-on-box-bg: #000;
    --alpy-ui-component-checkbox-styles-default-on-box-border: #333;
    --alpy-ui-component-checkbox-styles-default-on-checkmark: #cecece;
    --alpy-ui-component-checkbox-styles-default-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-default-on-text-label: #a1a1a1;
    --alpy-ui-component-checkbox-styles-disabled-off-box-bg: #151515;
    --alpy-ui-component-checkbox-styles-disabled-off-box-border: #333;
    --alpy-ui-component-checkbox-styles-disabled-off-checkmark: #a1a1a1;
    --alpy-ui-component-checkbox-styles-disabled-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-disabled-off-text-label: #767676;
    --alpy-ui-component-checkbox-styles-disabled-on-box-bg: #151515;
    --alpy-ui-component-checkbox-styles-disabled-on-box-border: #333;
    --alpy-ui-component-checkbox-styles-disabled-on-checkmark: #a1a1a1;
    --alpy-ui-component-checkbox-styles-disabled-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-disabled-on-text-label: #767676;
    --alpy-ui-component-checkbox-styles-error-off-box-bg: #b80808;
    --alpy-ui-component-checkbox-styles-error-off-box-border: #333;
    --alpy-ui-component-checkbox-styles-error-off-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-error-off-text-description: #b80808;
    --alpy-ui-component-checkbox-styles-error-off-text-label: #b80808;
    --alpy-ui-component-checkbox-styles-error-on-box-bg: #b80808;
    --alpy-ui-component-checkbox-styles-error-on-box-border: #333;
    --alpy-ui-component-checkbox-styles-error-on-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-error-on-text-description: #b80808;
    --alpy-ui-component-checkbox-styles-error-on-text-label: #b80808;
    --alpy-ui-component-checkbox-styles-focus-ring-color: #0a4fdf;
    --alpy-ui-component-checkbox-styles-focus-ring-width: var(--alpy-ui-size-2);
    --alpy-ui-component-checkbox-styles-selected-off-box-bg: #6c95e5;
    --alpy-ui-component-checkbox-styles-selected-off-box-border: #6c95e5;
    --alpy-ui-component-checkbox-styles-selected-off-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-selected-off-text-description: #767676;
    --alpy-ui-component-checkbox-styles-selected-off-text-label: #a1a1a1;
    --alpy-ui-component-checkbox-styles-selected-on-box-bg: #6c95e5;
    --alpy-ui-component-checkbox-styles-selected-on-box-border: #6c95e5;
    --alpy-ui-component-checkbox-styles-selected-on-checkmark: #fff;
    --alpy-ui-component-checkbox-styles-selected-on-text-description: #767676;
    --alpy-ui-component-checkbox-styles-selected-on-text-label: #a1a1a1;
    --alpy-ui-component-checkbox-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-description-fontSize: 12px;
    --alpy-ui-component-checkbox-text-description-fontWeight: 400;
    --alpy-ui-component-checkbox-text-description-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-description-lineHeight: 20px;
    --alpy-ui-component-checkbox-text-groupHeading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-groupHeading-fontSize: 12px;
    --alpy-ui-component-checkbox-text-groupHeading-fontWeight: 400;
    --alpy-ui-component-checkbox-text-groupHeading-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-groupHeading-lineHeight: 20px;
    --alpy-ui-component-checkbox-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-checkbox-text-label-fontSize: 14px;
    --alpy-ui-component-checkbox-text-label-fontWeight: 400;
    --alpy-ui-component-checkbox-text-label-letterSpacing: 0;
    --alpy-ui-component-checkbox-text-label-lineHeight: 20px;
    --alpy-ui-component-date-picker-footer-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-date-picker-footer-size-height: var(--alpy-ui-size-56);
    --alpy-ui-component-date-picker-footer-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-grid-gap-columns: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-grid-gap-rows: var(--alpy-ui-size-12);
    --alpy-ui-component-date-picker-grid-shape-active-day-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-date-picker-grid-size-day: 44px;
    --alpy-ui-component-date-picker-grid-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-header-gap-month-picker: var(--alpy-ui-size-4);
    --alpy-ui-component-date-picker-header-size-height: var(--alpy-ui-size-56);
    --alpy-ui-component-date-picker-header-size-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-date-picker-header-size-month-picker-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-header-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-panel-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-date-picker-panel-gap-sections: var(--alpy-ui-size-0);
    --alpy-ui-component-date-picker-panel-shape-radius: var(--alpy-ui-size-16);
    --alpy-ui-component-date-picker-panel-space-padding: var(--alpy-ui-size-8);
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-default: #0000;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-disabled: #0000;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-hover: #1c1c1c;
    --alpy-ui-component-date-picker-styles-basic-activeDay-background-selected: #6c95e5;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-default: #6c95e5;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-disabled: #767676;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-hover: #6c95e5;
    --alpy-ui-component-date-picker-styles-basic-activeDay-text-selected: #fff;
    --alpy-ui-component-date-picker-styles-basic-day-text: #a1a1a1;
    --alpy-ui-component-date-picker-styles-basic-header-icon: #767676;
    --alpy-ui-component-date-picker-styles-basic-header-text: #f1f1f1;
    --alpy-ui-component-date-picker-styles-basic-panel-background: #000;
    --alpy-ui-component-date-picker-styles-basic-panel-border: #1c1c1c;
    --alpy-ui-component-date-picker-styles-basic-weekday-text: #767676;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-default: #0000;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-disabled: #0000;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-hover: #1c1c1c;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-background-selected: #242424;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-default: #6c95e5;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-disabled: #767676;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-hover: #6c95e5;
    --alpy-ui-component-date-picker-styles-withTime-activeDay-text-selected: #6c95e5;
    --alpy-ui-component-date-picker-styles-withTime-day-text: #a1a1a1;
    --alpy-ui-component-date-picker-styles-withTime-divider: #151515;
    --alpy-ui-component-date-picker-styles-withTime-footer-label: #a1a1a1;
    --alpy-ui-component-date-picker-styles-withTime-header-icon: #767676;
    --alpy-ui-component-date-picker-styles-withTime-header-text: #f1f1f1;
    --alpy-ui-component-date-picker-styles-withTime-panel-background: #000;
    --alpy-ui-component-date-picker-styles-withTime-panel-border: #333;
    --alpy-ui-component-date-picker-styles-withTime-weekday-text: #767676;
    --alpy-ui-component-date-picker-text-day-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-day-fontSize: 19px;
    --alpy-ui-component-date-picker-text-day-fontWeight: 600;
    --alpy-ui-component-date-picker-text-day-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-day-lineHeight: 28px;
    --alpy-ui-component-date-picker-text-footerLabel-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-footerLabel-fontSize: 14px;
    --alpy-ui-component-date-picker-text-footerLabel-fontWeight: 400;
    --alpy-ui-component-date-picker-text-footerLabel-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-footerLabel-lineHeight: 20px;
    --alpy-ui-component-date-picker-text-month-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-month-fontSize: 19px;
    --alpy-ui-component-date-picker-text-month-fontWeight: 600;
    --alpy-ui-component-date-picker-text-month-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-month-lineHeight: 28px;
    --alpy-ui-component-date-picker-text-weekday-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-date-picker-text-weekday-fontSize: 14px;
    --alpy-ui-component-date-picker-text-weekday-fontWeight: 400;
    --alpy-ui-component-date-picker-text-weekday-letterSpacing: 0;
    --alpy-ui-component-date-picker-text-weekday-lineHeight: 20px;
    --alpy-ui-component-date-picker-weekday-size-cell: var(--alpy-ui-size-36);
    --alpy-ui-component-date-picker-weekday-size-height: var(--alpy-ui-size-20);
    --alpy-ui-component-date-picker-weekday-space-padding-x: var(--alpy-ui-size-20);
    --alpy-ui-component-dropdown-menu-content-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-dropdown-menu-content-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-content-size-width: var(--alpy-ui-size-192);
    --alpy-ui-component-dropdown-menu-content-space-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-gap: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-menu-item-shape-radius-focus: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-shape-radius-hover: var(--alpy-ui-size-4);
    --alpy-ui-component-dropdown-menu-item-size-height: var(--alpy-ui-size-36);
    --alpy-ui-component-dropdown-menu-item-size-icon: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-menu-item-size-icon-trailing: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-left: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-right: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-right-trailing: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-menu-item-space-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-styles-menu-background-default: #000;
    --alpy-ui-component-dropdown-styles-menu-background-disabled: #000;
    --alpy-ui-component-dropdown-styles-menu-background-focus: #000;
    --alpy-ui-component-dropdown-styles-menu-background-hover: #000;
    --alpy-ui-component-dropdown-styles-menu-background-selected: #000;
    --alpy-ui-component-dropdown-styles-menu-border-default: #1c1c1c;
    --alpy-ui-component-dropdown-styles-menu-border-disabled: #1c1c1c;
    --alpy-ui-component-dropdown-styles-menu-border-focus: #0a4fdf;
    --alpy-ui-component-dropdown-styles-menu-border-hover: #1c1c1c;
    --alpy-ui-component-dropdown-styles-menu-border-selected: #1c1c1c;
    --alpy-ui-component-dropdown-styles-menu-item-background-default: #000;
    --alpy-ui-component-dropdown-styles-menu-item-background-disabled: #000;
    --alpy-ui-component-dropdown-styles-menu-item-background-focus: #000;
    --alpy-ui-component-dropdown-styles-menu-item-background-hover: #031643;
    --alpy-ui-component-dropdown-styles-menu-item-background-selected: #000;
    --alpy-ui-component-dropdown-styles-menu-item-icon-default: #cecece;
    --alpy-ui-component-dropdown-styles-menu-item-icon-disabled: #333;
    --alpy-ui-component-dropdown-styles-menu-item-icon-focus: #cecece;
    --alpy-ui-component-dropdown-styles-menu-item-icon-hover: #cecece;
    --alpy-ui-component-dropdown-styles-menu-item-icon-selected: #6c95e5;
    --alpy-ui-component-dropdown-styles-menu-item-text-default: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-item-text-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-item-text-focus: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-item-text-hover: #a1a1a1;
    --alpy-ui-component-dropdown-styles-menu-item-text-selected: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-background-default: #000;
    --alpy-ui-component-dropdown-styles-trigger-background-disabled: #000;
    --alpy-ui-component-dropdown-styles-trigger-background-focus: #000;
    --alpy-ui-component-dropdown-styles-trigger-background-hover: #031643;
    --alpy-ui-component-dropdown-styles-trigger-background-selected: #000;
    --alpy-ui-component-dropdown-styles-trigger-border-default: #1c1c1c;
    --alpy-ui-component-dropdown-styles-trigger-border-disabled: #1c1c1c;
    --alpy-ui-component-dropdown-styles-trigger-border-focus: #0a4fdf;
    --alpy-ui-component-dropdown-styles-trigger-border-hover: #1c1c1c;
    --alpy-ui-component-dropdown-styles-trigger-border-selected: #1c1c1c;
    --alpy-ui-component-dropdown-styles-trigger-icon-default: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-icon-disabled: #333;
    --alpy-ui-component-dropdown-styles-trigger-icon-focus: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-icon-hover: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-icon-selected: #cecece;
    --alpy-ui-component-dropdown-styles-trigger-text-default: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-text-disabled: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-text-focus: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-text-hover: #a1a1a1;
    --alpy-ui-component-dropdown-styles-trigger-text-selected: #a1a1a1;
    --alpy-ui-component-dropdown-text-item-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-dropdown-text-item-fontSize: 14px;
    --alpy-ui-component-dropdown-text-item-fontWeight: 400;
    --alpy-ui-component-dropdown-text-item-letterSpacing: 0;
    --alpy-ui-component-dropdown-text-item-lineHeight: 20px;
    --alpy-ui-component-dropdown-text-trigger-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-dropdown-text-trigger-fontSize: 14px;
    --alpy-ui-component-dropdown-text-trigger-fontWeight: 400;
    --alpy-ui-component-dropdown-text-trigger-letterSpacing: 0;
    --alpy-ui-component-dropdown-text-trigger-lineHeight: 20px;
    --alpy-ui-component-dropdown-trigger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-dropdown-trigger-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-trigger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-dropdown-trigger-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-dropdown-trigger-size-icon: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-trigger-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-dropdown-trigger-space-padding-y: var(--alpy-ui-size-0);
    --alpy-ui-component-iconGallery-color-default: #cecece;
    --alpy-ui-component-iconGallery-size-lg: var(--alpy-ui-size-24);
    --alpy-ui-component-iconGallery-size-md: var(--alpy-ui-size-20);
    --alpy-ui-component-iconGallery-size-sm: var(--alpy-ui-size-16);
    --alpy-ui-component-iconGallery-size-xl: var(--alpy-ui-size-32);
    --alpy-ui-component-iconGallery-size-xs: var(--alpy-ui-size-12);
    --alpy-ui-component-iconGallery-size-xxl: var(--alpy-ui-size-48);
    --alpy-ui-component-iconGallery-size-xxs: var(--alpy-ui-size-8);
    --alpy-ui-component-iconGallery-size-xxxl: var(--alpy-ui-size-56);
    --alpy-ui-component-iconGallery-size-xxxxl: var(--alpy-ui-size-64);
    --alpy-ui-component-iconGallery-size-xxxxxl: var(--alpy-ui-size-128);
    --alpy-ui-component-image-borderRadius: var(--alpy-ui-size-0);
    --alpy-ui-component-image-color-placeholder: #151515;
    --alpy-ui-component-modal-background-default: #000;
    --alpy-ui-component-modal-body-default: #5c5c5c;
    --alpy-ui-component-modal-border-default: #1c1c1c;
    --alpy-ui-component-modal-close-default: #767676;
    --alpy-ui-component-modal-container-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-modal-container-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-modal-container-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-container-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-cta-gap-buttons: var(--alpy-ui-size-8);
    --alpy-ui-component-modal-header-gap-icon-to-headline: var(--alpy-ui-size-12);
    --alpy-ui-component-modal-header-size-close: var(--alpy-ui-size-12);
    --alpy-ui-component-modal-header-size-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-modal-headline-default: #a1a1a1;
    --alpy-ui-component-modal-icon-default: #cecece;
    --alpy-ui-component-modal-stack-gap-sections: var(--alpy-ui-size-16);
    --alpy-ui-component-modal-text-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-modal-text-body-fontSize: 14px;
    --alpy-ui-component-modal-text-body-fontWeight: 400;
    --alpy-ui-component-modal-text-body-letterSpacing: 0;
    --alpy-ui-component-modal-text-body-lineHeight: 20px;
    --alpy-ui-component-modal-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-modal-text-headline-fontSize: 19px;
    --alpy-ui-component-modal-text-headline-fontWeight: 600;
    --alpy-ui-component-modal-text-headline-letterSpacing: 0;
    --alpy-ui-component-modal-text-headline-lineHeight: 28px;
    --alpy-ui-component-pagination-basic-gap: var(--alpy-ui-size-24);
    --alpy-ui-component-pagination-basic-item-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-basic-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-pagination-basic-size-height: var(--alpy-ui-size-32);
    --alpy-ui-component-pagination-basic-size-width: var(--alpy-ui-size-32);
    --alpy-ui-component-pagination-boxed-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-boxed-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-boxed-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-boxed-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-boxed-size-min-width: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-boxed-space-item-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-pagination-boxed-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-trigger-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-chrome-select-trigger-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-chrome-select-trigger-size-height: var(--alpy-ui-size-36);
    --alpy-ui-component-pagination-chrome-select-trigger-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-pagination-chrome-select-trigger-space-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-pagination-compact-gap-segment: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-gap-value: var(--alpy-ui-size-4);
    --alpy-ui-component-pagination-compact-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-compact-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-compact-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-pagination-compact-space-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-pagination-styles-basic-current-background: #0a4fdf;
    --alpy-ui-component-pagination-styles-basic-current-text: #fff;
    --alpy-ui-component-pagination-styles-basic-item-icon: #cecece;
    --alpy-ui-component-pagination-styles-basic-item-icon-hover: #0b3a9d;
    --alpy-ui-component-pagination-styles-basic-item-text: #a1a1a1;
    --alpy-ui-component-pagination-styles-basic-item-text-hover: #92aee0;
    --alpy-ui-component-pagination-styles-boxed-current-background: #0a4fdf;
    --alpy-ui-component-pagination-styles-boxed-current-border: #0a4fdf;
    --alpy-ui-component-pagination-styles-boxed-current-text: #fff;
    --alpy-ui-component-pagination-styles-boxed-item-background: #000;
    --alpy-ui-component-pagination-styles-boxed-item-background-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-boxed-item-border: #1c1c1c;
    --alpy-ui-component-pagination-styles-boxed-item-border-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-boxed-item-icon: #cecece;
    --alpy-ui-component-pagination-styles-boxed-item-icon-hover: #cecece;
    --alpy-ui-component-pagination-styles-boxed-item-text: #a1a1a1;
    --alpy-ui-component-pagination-styles-boxed-item-text-hover: #a1a1a1;
    --alpy-ui-component-pagination-styles-chrome-meta-text: #767676;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-background: #000;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-background-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-border: #1c1c1c;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-border-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-icon: #cecece;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-icon-hover: #cecece;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-text: #a1a1a1;
    --alpy-ui-component-pagination-styles-chrome-select-trigger-text-hover: #a1a1a1;
    --alpy-ui-component-pagination-styles-compact-button-background: #000;
    --alpy-ui-component-pagination-styles-compact-button-background-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-compact-button-border: #1c1c1c;
    --alpy-ui-component-pagination-styles-compact-button-border-hover: #1c1c1c;
    --alpy-ui-component-pagination-styles-compact-button-icon: #cecece;
    --alpy-ui-component-pagination-styles-compact-button-icon-hover: #cecece;
    --alpy-ui-component-pagination-styles-compact-value-background: #000;
    --alpy-ui-component-pagination-styles-compact-value-border: #1c1c1c;
    --alpy-ui-component-pagination-styles-compact-value-text: #a1a1a1;
    --alpy-ui-component-pagination-styles-compact-value-text-muted: #767676;
    --alpy-ui-component-pagination-text-meta-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-pagination-text-meta-fontSize: 12px;
    --alpy-ui-component-pagination-text-meta-fontWeight: 400;
    --alpy-ui-component-pagination-text-meta-letterSpacing: 0;
    --alpy-ui-component-pagination-text-meta-lineHeight: 20px;
    --alpy-ui-component-pagination-text-page-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-pagination-text-page-fontSize: 14px;
    --alpy-ui-component-pagination-text-page-fontWeight: 400;
    --alpy-ui-component-pagination-text-page-letterSpacing: 0;
    --alpy-ui-component-pagination-text-page-lineHeight: 20px;
    --alpy-ui-component-popover-default-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-popover-default-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-popover-default-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-default-size-caret-height: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-default-size-caret-width: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-default-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-default-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-styles-default-background: #151515;
    --alpy-ui-component-popover-styles-default-border: #151515;
    --alpy-ui-component-popover-styles-default-caret: #151515;
    --alpy-ui-component-popover-styles-default-description: #a1a1a1;
    --alpy-ui-component-popover-styles-default-headline: #f1f1f1;
    --alpy-ui-component-popover-styles-with-cta-background: #151515;
    --alpy-ui-component-popover-styles-with-cta-border: #151515;
    --alpy-ui-component-popover-styles-with-cta-caret: #151515;
    --alpy-ui-component-popover-styles-with-cta-description: #a1a1a1;
    --alpy-ui-component-popover-styles-with-cta-headline: #f1f1f1;
    --alpy-ui-component-popover-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-popover-text-description-fontSize: 12px;
    --alpy-ui-component-popover-text-description-fontWeight: 400;
    --alpy-ui-component-popover-text-description-letterSpacing: 0;
    --alpy-ui-component-popover-text-description-lineHeight: 20px;
    --alpy-ui-component-popover-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-popover-text-headline-fontSize: 16px;
    --alpy-ui-component-popover-text-headline-fontWeight: 400;
    --alpy-ui-component-popover-text-headline-letterSpacing: 0;
    --alpy-ui-component-popover-text-headline-lineHeight: 24px;
    --alpy-ui-component-popover-with-cta-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-popover-with-cta-gap-cta: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-popover-with-cta-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-with-cta-size-caret-height: var(--alpy-ui-size-8);
    --alpy-ui-component-popover-with-cta-size-caret-width: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-popover-with-cta-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-basic-gap-status-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-basic-gap-track-to-status: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-basic-size-status-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-controller-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-progress-bar-controller-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-bar-controller-size-diameter: 24px;
    --alpy-ui-component-progress-bar-styles-basic-fill: #6c95e5;
    --alpy-ui-component-progress-bar-styles-basic-fill-complete: #86efac;
    --alpy-ui-component-progress-bar-styles-basic-fill-failed: #ef4444;
    --alpy-ui-component-progress-bar-styles-basic-status: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-basic-status-complete: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-basic-status-failed: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon: #767676;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-basic-statusIcon-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-basic-track: #242424;
    --alpy-ui-component-progress-bar-styles-controller-border: #1c1c1c;
    --alpy-ui-component-progress-bar-styles-controller-border-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-controller-border-failed: #ef4444;
    --alpy-ui-component-progress-bar-styles-controller-fill: #000;
    --alpy-ui-component-progress-bar-styles-controller-fill-complete: #000;
    --alpy-ui-component-progress-bar-styles-controller-fill-failed: #000;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill: #6c95e5;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill-complete: #86efac;
    --alpy-ui-component-progress-bar-styles-withFileUpload-fill-failed: #ef4444;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline-complete: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headline-failed: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-headlineIcon-failed: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withFileUpload-meta-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withFileUpload-track: #242424;
    --alpy-ui-component-progress-bar-styles-withLabel-fill: #6c95e5;
    --alpy-ui-component-progress-bar-styles-withLabel-fill-complete: #86efac;
    --alpy-ui-component-progress-bar-styles-withLabel-fill-failed: #ef4444;
    --alpy-ui-component-progress-bar-styles-withLabel-headline: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-headline-complete: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-headline-failed: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-headlineIcon-failed: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-meta: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-meta-complete: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-meta-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withLabel-status: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-status-complete: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-status-failed: #a1a1a1;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon: #767676;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon-complete: #22c55e;
    --alpy-ui-component-progress-bar-styles-withLabel-statusIcon-failed: #b80808;
    --alpy-ui-component-progress-bar-styles-withLabel-track: #242424;
    --alpy-ui-component-progress-bar-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-headline-fontSize: 14px;
    --alpy-ui-component-progress-bar-text-headline-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-headline-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-headline-lineHeight: 20px;
    --alpy-ui-component-progress-bar-text-meta-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-meta-fontSize: 12px;
    --alpy-ui-component-progress-bar-text-meta-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-meta-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-meta-lineHeight: 20px;
    --alpy-ui-component-progress-bar-text-status-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-bar-text-status-fontSize: 14px;
    --alpy-ui-component-progress-bar-text-status-fontWeight: 400;
    --alpy-ui-component-progress-bar-text-status-letterSpacing: 0;
    --alpy-ui-component-progress-bar-text-status-lineHeight: 20px;
    --alpy-ui-component-progress-bar-track-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-bar-track-size-height: 8px;
    --alpy-ui-component-progress-bar-withFileUpload-gap-file-icon-to-name: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-gap-headline-to-track: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-gap-track-to-meta: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withFileUpload-size-headline-icon: var(--alpy-ui-size-24);
    --alpy-ui-component-progress-bar-withLabel-gap-header-to-track: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withLabel-gap-headline-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-withLabel-gap-status-to-icon: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-bar-withLabel-gap-track-to-meta: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-bar-withLabel-size-headline-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-bar-withLabel-size-status-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-indicator-connector-size-height: 4px;
    --alpy-ui-component-progress-indicator-inline-gap-marker-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-inline-gap-step-to-connector: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-marker-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-indicator-marker-size-diameter: 40px;
    --alpy-ui-component-progress-indicator-marker-size-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-progress-indicator-segmented-gap-icon-to-label: var(--alpy-ui-size-8);
    --alpy-ui-component-progress-indicator-segmented-gap-segment: var(--alpy-ui-size-24);
    --alpy-ui-component-progress-indicator-segmented-gap-segment-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-segmented-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-progress-indicator-segmented-size-height: 8px;
    --alpy-ui-component-progress-indicator-stacked-gap-marker-to-label: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-stacked-gap-step-to-connector: var(--alpy-ui-size-12);
    --alpy-ui-component-progress-indicator-styles-inline-connector-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-inline-connector-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-inline-label-active: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-inline-label-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-inline-label-inactive: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-active: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-completed: #86efac;
    --alpy-ui-component-progress-indicator-styles-inline-marker-background-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-inline-marker-icon-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-active: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-inline-marker-text-inactive: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-segmented-icon-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-segmented-label-active: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-segmented-label-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-segmented-label-inactive: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-active: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-segmented-segment-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-stacked-connector-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-stacked-connector-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-stacked-label-active: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-stacked-label-completed: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-stacked-label-inactive: #a1a1a1;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-active: #6c95e5;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-completed: #86efac;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-background-inactive: #242424;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-icon-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-active: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-completed: #fff;
    --alpy-ui-component-progress-indicator-styles-stacked-marker-text-inactive: #a1a1a1;
    --alpy-ui-component-progress-indicator-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-indicator-text-label-fontSize: 14px;
    --alpy-ui-component-progress-indicator-text-label-fontWeight: 400;
    --alpy-ui-component-progress-indicator-text-label-letterSpacing: 0;
    --alpy-ui-component-progress-indicator-text-label-lineHeight: 20px;
    --alpy-ui-component-progress-indicator-text-number-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-progress-indicator-text-number-fontSize: 14px;
    --alpy-ui-component-progress-indicator-text-number-fontWeight: 400;
    --alpy-ui-component-progress-indicator-text-number-letterSpacing: 0;
    --alpy-ui-component-progress-indicator-text-number-lineHeight: 20px;
    --alpy-ui-component-radio-group-gap-headerToItems: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-group-gap-itemToItem: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-single-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-radio-single-gap-controlToText: var(--alpy-ui-size-8);
    --alpy-ui-component-radio-single-gap-labelToDescription: var(--alpy-ui-size-0);
    --alpy-ui-component-radio-single-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-radio-single-size-control-lg: 24px;
    --alpy-ui-component-radio-single-size-control-md: 20px;
    --alpy-ui-component-radio-single-size-control-sm: 16px;
    --alpy-ui-component-radio-single-size-dot-lg: 12px;
    --alpy-ui-component-radio-single-size-dot-md: 12px;
    --alpy-ui-component-radio-single-size-dot-sm: 8px;
    --alpy-ui-component-radio-single-size-focusRing-lg: var(--alpy-ui-size-28);
    --alpy-ui-component-radio-single-size-focusRing-md: var(--alpy-ui-size-24);
    --alpy-ui-component-radio-single-size-focusRing-sm: var(--alpy-ui-size-20);
    --alpy-ui-component-radio-single-size-hitArea: 44px;
    --alpy-ui-component-radio-styles-default-off-control-bg: #000;
    --alpy-ui-component-radio-styles-default-off-control-border: #333;
    --alpy-ui-component-radio-styles-default-off-dot: #cecece;
    --alpy-ui-component-radio-styles-default-off-text-description: #767676;
    --alpy-ui-component-radio-styles-default-off-text-label: #a1a1a1;
    --alpy-ui-component-radio-styles-default-on-control-bg: #000;
    --alpy-ui-component-radio-styles-default-on-control-border: #333;
    --alpy-ui-component-radio-styles-default-on-dot: #cecece;
    --alpy-ui-component-radio-styles-default-on-text-description: #767676;
    --alpy-ui-component-radio-styles-default-on-text-label: #a1a1a1;
    --alpy-ui-component-radio-styles-disabled-off-control-bg: #151515;
    --alpy-ui-component-radio-styles-disabled-off-control-border: #333;
    --alpy-ui-component-radio-styles-disabled-off-dot: #a1a1a1;
    --alpy-ui-component-radio-styles-disabled-off-text-description: #767676;
    --alpy-ui-component-radio-styles-disabled-off-text-label: #767676;
    --alpy-ui-component-radio-styles-disabled-on-control-bg: #151515;
    --alpy-ui-component-radio-styles-disabled-on-control-border: #333;
    --alpy-ui-component-radio-styles-disabled-on-dot: #a1a1a1;
    --alpy-ui-component-radio-styles-disabled-on-text-description: #767676;
    --alpy-ui-component-radio-styles-disabled-on-text-label: #767676;
    --alpy-ui-component-radio-styles-error-off-control-bg: #b80808;
    --alpy-ui-component-radio-styles-error-off-control-border: #333;
    --alpy-ui-component-radio-styles-error-off-dot: #fff;
    --alpy-ui-component-radio-styles-error-off-text-description: #b80808;
    --alpy-ui-component-radio-styles-error-off-text-label: #b80808;
    --alpy-ui-component-radio-styles-error-on-control-bg: #b80808;
    --alpy-ui-component-radio-styles-error-on-control-border: #333;
    --alpy-ui-component-radio-styles-error-on-dot: #fff;
    --alpy-ui-component-radio-styles-error-on-text-description: #b80808;
    --alpy-ui-component-radio-styles-error-on-text-label: #b80808;
    --alpy-ui-component-radio-styles-focus-ring-color: #0a4fdf;
    --alpy-ui-component-radio-styles-focus-ring-width: var(--alpy-ui-size-2);
    --alpy-ui-component-radio-styles-selected-off-control-bg: #6c95e5;
    --alpy-ui-component-radio-styles-selected-off-control-border: #6c95e5;
    --alpy-ui-component-radio-styles-selected-off-dot: #fff;
    --alpy-ui-component-radio-styles-selected-off-text-description: #767676;
    --alpy-ui-component-radio-styles-selected-off-text-label: #a1a1a1;
    --alpy-ui-component-radio-styles-selected-on-control-bg: #6c95e5;
    --alpy-ui-component-radio-styles-selected-on-control-border: #6c95e5;
    --alpy-ui-component-radio-styles-selected-on-dot: #fff;
    --alpy-ui-component-radio-styles-selected-on-text-description: #767676;
    --alpy-ui-component-radio-styles-selected-on-text-label: #a1a1a1;
    --alpy-ui-component-radio-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-description-fontSize: 12px;
    --alpy-ui-component-radio-text-description-fontWeight: 400;
    --alpy-ui-component-radio-text-description-letterSpacing: 0;
    --alpy-ui-component-radio-text-description-lineHeight: 20px;
    --alpy-ui-component-radio-text-groupHeading-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-groupHeading-fontSize: 12px;
    --alpy-ui-component-radio-text-groupHeading-fontWeight: 400;
    --alpy-ui-component-radio-text-groupHeading-letterSpacing: 0;
    --alpy-ui-component-radio-text-groupHeading-lineHeight: 20px;
    --alpy-ui-component-radio-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-radio-text-label-fontSize: 14px;
    --alpy-ui-component-radio-text-label-fontWeight: 400;
    --alpy-ui-component-radio-text-label-letterSpacing: 0;
    --alpy-ui-component-radio-text-label-lineHeight: 20px;
    --alpy-ui-component-table-header-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-table-row-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-table-styles-header-background: #151515;
    --alpy-ui-component-table-styles-row-background: #000;
    --alpy-ui-component-table-styles-row-background-hover: #1c1c1c;
    --alpy-ui-component-table-styles-row-border: #151515;
    --alpy-ui-component-table-styles-surface-background: #000;
    --alpy-ui-component-tabs-basic-horizontal-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-basic-horizontal-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-size-min-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-basic-horizontal-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-basic-horizontal-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-horizontal-space-item-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tabs-basic-horizontal-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-basic-vertical-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-size-min-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-basic-vertical-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-basic-vertical-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-basic-vertical-space-item-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tabs-basic-vertical-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-icon-only-horizontal-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-horizontal-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-horizontal-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-horizontal-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-icon-only-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-icon-only-vertical-shape-container-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-vertical-shape-item-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-icon-only-vertical-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-vertical-size-width: var(--alpy-ui-size-40);
    --alpy-ui-component-tabs-icon-only-vertical-space-group-padding: var(--alpy-ui-size-4);
    --alpy-ui-component-tabs-line-horizontal-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-tabs-line-horizontal-border-indicator-width: var(--alpy-ui-size-2);
    --alpy-ui-component-tabs-line-horizontal-gap: var(--alpy-ui-size-24);
    --alpy-ui-component-tabs-line-horizontal-space-group-padding: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-horizontal-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-horizontal-space-item-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-horizontal-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-border-divider-width: var(--alpy-ui-size-1);
    --alpy-ui-component-tabs-line-vertical-border-indicator-width: var(--alpy-ui-size-2);
    --alpy-ui-component-tabs-line-vertical-gap: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-vertical-space-group-padding: var(--alpy-ui-size-0);
    --alpy-ui-component-tabs-line-vertical-space-icon-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-space-item-padding-x: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-line-vertical-space-item-padding-y: var(--alpy-ui-size-8);
    --alpy-ui-component-tabs-styles-basic-container: #151515;
    --alpy-ui-component-tabs-styles-basic-icon-hover: #0b3a9d;
    --alpy-ui-component-tabs-styles-basic-icon-inactive: #767676;
    --alpy-ui-component-tabs-styles-basic-icon-selected: #b7c5e1;
    --alpy-ui-component-tabs-styles-basic-item-background-inactive: #0000;
    --alpy-ui-component-tabs-styles-basic-item-background-selected: #000;
    --alpy-ui-component-tabs-styles-basic-text-hover: #fff;
    --alpy-ui-component-tabs-styles-basic-text-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-basic-text-selected: #6c95e5;
    --alpy-ui-component-tabs-styles-icon-only-container: #151515;
    --alpy-ui-component-tabs-styles-icon-only-icon-hover: #fff;
    --alpy-ui-component-tabs-styles-icon-only-icon-inactive: #767676;
    --alpy-ui-component-tabs-styles-icon-only-icon-selected: #0a4fdf;
    --alpy-ui-component-tabs-styles-icon-only-item-background-inactive: #0000;
    --alpy-ui-component-tabs-styles-icon-only-item-background-selected: #000;
    --alpy-ui-component-tabs-styles-line-container: #0000;
    --alpy-ui-component-tabs-styles-line-divider: #1c1c1c;
    --alpy-ui-component-tabs-styles-line-icon-hover: #0b3a9d;
    --alpy-ui-component-tabs-styles-line-icon-inactive: #767676;
    --alpy-ui-component-tabs-styles-line-icon-selected: #b7c5e1;
    --alpy-ui-component-tabs-styles-line-indicator: #0a4fdf;
    --alpy-ui-component-tabs-styles-line-text-hover: #fff;
    --alpy-ui-component-tabs-styles-line-text-inactive: #5c5c5c;
    --alpy-ui-component-tabs-styles-line-text-selected: #4079ee;
    --alpy-ui-component-tabs-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tabs-text-label-fontSize: 14px;
    --alpy-ui-component-tabs-text-label-fontWeight: 400;
    --alpy-ui-component-tabs-text-label-letterSpacing: 0;
    --alpy-ui-component-tabs-text-label-lineHeight: 20px;
    --alpy-ui-component-text-input-field-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-text-input-field-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-field-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-field-size-height: var(--alpy-ui-size-40);
    --alpy-ui-component-text-input-field-size-icon: var(--alpy-ui-size-16);
    --alpy-ui-component-text-input-field-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-text-input-field-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-text-input-gap: var(--alpy-ui-size-8);
    --alpy-ui-component-text-input-stack-gap-label-to-field: var(--alpy-ui-size-12);
    --alpy-ui-component-text-input-styles-background-default: #000;
    --alpy-ui-component-text-input-styles-background-disabled: #151515;
    --alpy-ui-component-text-input-styles-background-focused: #000;
    --alpy-ui-component-text-input-styles-background-invalid: #000;
    --alpy-ui-component-text-input-styles-border-default: #1c1c1c;
    --alpy-ui-component-text-input-styles-border-disabled: #1c1c1c;
    --alpy-ui-component-text-input-styles-border-focused: #0a4fdf;
    --alpy-ui-component-text-input-styles-border-invalid: #ef4444;
    --alpy-ui-component-text-input-styles-description-default: #5c5c5c;
    --alpy-ui-component-text-input-styles-description-disabled: #767676;
    --alpy-ui-component-text-input-styles-description-focused: #5c5c5c;
    --alpy-ui-component-text-input-styles-description-invalid: #5c5c5c;
    --alpy-ui-component-text-input-styles-icon-default: #767676;
    --alpy-ui-component-text-input-styles-icon-disabled: #a1a1a1;
    --alpy-ui-component-text-input-styles-icon-focused: #cecece;
    --alpy-ui-component-text-input-styles-icon-invalid: #cecece;
    --alpy-ui-component-text-input-styles-label-default: #f1f1f1;
    --alpy-ui-component-text-input-styles-label-disabled: #92aee0;
    --alpy-ui-component-text-input-styles-label-focused: #f1f1f1;
    --alpy-ui-component-text-input-styles-label-invalid: #f1f1f1;
    --alpy-ui-component-text-input-styles-text-default: #a1a1a1;
    --alpy-ui-component-text-input-styles-text-disabled: #767676;
    --alpy-ui-component-text-input-styles-text-focused: #a1a1a1;
    --alpy-ui-component-text-input-styles-text-invalid: #b80808;
    --alpy-ui-component-text-input-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-description-fontSize: 12px;
    --alpy-ui-component-text-input-text-description-fontWeight: 400;
    --alpy-ui-component-text-input-text-description-letterSpacing: 0;
    --alpy-ui-component-text-input-text-description-lineHeight: 20px;
    --alpy-ui-component-text-input-text-field-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-field-fontSize: 16px;
    --alpy-ui-component-text-input-text-field-fontWeight: 400;
    --alpy-ui-component-text-input-text-field-letterSpacing: 0;
    --alpy-ui-component-text-input-text-field-lineHeight: 24px;
    --alpy-ui-component-text-input-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-text-input-text-label-fontSize: 14px;
    --alpy-ui-component-text-input-text-label-fontWeight: 400;
    --alpy-ui-component-text-input-text-label-letterSpacing: 0;
    --alpy-ui-component-text-input-text-label-lineHeight: 20px;
    --alpy-ui-component-textarea-field-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-textarea-field-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-textarea-field-size-height: var(--alpy-ui-size-96);
    --alpy-ui-component-textarea-field-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-textarea-field-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-textarea-stack-gap-label-to-field: var(--alpy-ui-size-12);
    --alpy-ui-component-textarea-styles-background-default: #000;
    --alpy-ui-component-textarea-styles-background-disabled: #151515;
    --alpy-ui-component-textarea-styles-background-focused: #000;
    --alpy-ui-component-textarea-styles-background-invalid: #000;
    --alpy-ui-component-textarea-styles-border-default: #1c1c1c;
    --alpy-ui-component-textarea-styles-border-disabled: #1c1c1c;
    --alpy-ui-component-textarea-styles-border-focused: #0a4fdf;
    --alpy-ui-component-textarea-styles-border-invalid: #ef4444;
    --alpy-ui-component-textarea-styles-description-default: #5c5c5c;
    --alpy-ui-component-textarea-styles-description-disabled: #767676;
    --alpy-ui-component-textarea-styles-description-focused: #5c5c5c;
    --alpy-ui-component-textarea-styles-description-invalid: #b80808;
    --alpy-ui-component-textarea-styles-label-default: #f1f1f1;
    --alpy-ui-component-textarea-styles-label-disabled: #f1f1f1;
    --alpy-ui-component-textarea-styles-label-focused: #f1f1f1;
    --alpy-ui-component-textarea-styles-label-invalid: #f1f1f1;
    --alpy-ui-component-textarea-styles-text-default: #a1a1a1;
    --alpy-ui-component-textarea-styles-text-disabled: #767676;
    --alpy-ui-component-textarea-styles-text-focused: #a1a1a1;
    --alpy-ui-component-textarea-styles-text-invalid: #b80808;
    --alpy-ui-component-textarea-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-description-fontSize: 12px;
    --alpy-ui-component-textarea-text-description-fontWeight: 400;
    --alpy-ui-component-textarea-text-description-letterSpacing: 0;
    --alpy-ui-component-textarea-text-description-lineHeight: 20px;
    --alpy-ui-component-textarea-text-field-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-field-fontSize: 16px;
    --alpy-ui-component-textarea-text-field-fontWeight: 400;
    --alpy-ui-component-textarea-text-field-letterSpacing: 0;
    --alpy-ui-component-textarea-text-field-lineHeight: 24px;
    --alpy-ui-component-textarea-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-textarea-text-label-fontSize: 14px;
    --alpy-ui-component-textarea-text-label-fontWeight: 400;
    --alpy-ui-component-textarea-text-label-letterSpacing: 0;
    --alpy-ui-component-textarea-text-label-lineHeight: 20px;
    --alpy-ui-component-toggle-control-border-width: var(--alpy-ui-size-1);
    --alpy-ui-component-toggle-control-gap-trackToLabel: var(--alpy-ui-size-8);
    --alpy-ui-component-toggle-control-shape-radius: var(--alpy-ui-size-9999);
    --alpy-ui-component-toggle-control-size-thumb-lg: 20px;
    --alpy-ui-component-toggle-control-size-thumb-md: 16px;
    --alpy-ui-component-toggle-control-size-thumb-sm: 12px;
    --alpy-ui-component-toggle-control-size-trackHeight-lg: 24px;
    --alpy-ui-component-toggle-control-size-trackHeight-md: 20px;
    --alpy-ui-component-toggle-control-size-trackHeight-sm: 16px;
    --alpy-ui-component-toggle-control-size-trackWidth-lg: var(--alpy-ui-size-40);
    --alpy-ui-component-toggle-control-size-trackWidth-md: var(--alpy-ui-size-36);
    --alpy-ui-component-toggle-control-size-trackWidth-sm: var(--alpy-ui-size-32);
    --alpy-ui-component-toggle-styles-checked-label: #a1a1a1;
    --alpy-ui-component-toggle-styles-checked-label-disabled: #767676;
    --alpy-ui-component-toggle-styles-checked-thumb-bg: #000;
    --alpy-ui-component-toggle-styles-checked-thumb-bg-disabled: #000;
    --alpy-ui-component-toggle-styles-checked-track-bg: #6c95e5;
    --alpy-ui-component-toggle-styles-checked-track-bg-disabled: #151515;
    --alpy-ui-component-toggle-styles-checked-track-border: #6c95e5;
    --alpy-ui-component-toggle-styles-checked-track-border-disabled: #333;
    --alpy-ui-component-toggle-styles-default-label: #a1a1a1;
    --alpy-ui-component-toggle-styles-default-label-disabled: #767676;
    --alpy-ui-component-toggle-styles-default-thumb-bg: #000;
    --alpy-ui-component-toggle-styles-default-thumb-bg-disabled: #000;
    --alpy-ui-component-toggle-styles-default-track-bg: #333;
    --alpy-ui-component-toggle-styles-default-track-bg-disabled: #151515;
    --alpy-ui-component-toggle-styles-default-track-border: #333;
    --alpy-ui-component-toggle-styles-default-track-border-disabled: #151515;
    --alpy-ui-component-toggle-text-label-lg-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-lg-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-lg-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-lg-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-lg-lineHeight: 20px;
    --alpy-ui-component-toggle-text-label-md-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-md-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-md-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-md-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-md-lineHeight: 20px;
    --alpy-ui-component-toggle-text-label-sm-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-toggle-text-label-sm-fontSize: 14px;
    --alpy-ui-component-toggle-text-label-sm-fontWeight: 400;
    --alpy-ui-component-toggle-text-label-sm-letterSpacing: 0;
    --alpy-ui-component-toggle-text-label-sm-lineHeight: 20px;
    --alpy-ui-component-tooltip-basic-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-basic-size-caret-height: var(--alpy-ui-size-4);
    --alpy-ui-component-tooltip-basic-size-caret-width: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-basic-space-padding-x: var(--alpy-ui-size-12);
    --alpy-ui-component-tooltip-basic-space-padding-y: var(--alpy-ui-size-12);
    --alpy-ui-component-tooltip-hover-card-gap-cta: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-hover-card-gap-stack: var(--alpy-ui-size-2);
    --alpy-ui-component-tooltip-hover-card-shape-radius: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-hover-card-size-caret-height: var(--alpy-ui-size-4);
    --alpy-ui-component-tooltip-hover-card-size-caret-width: var(--alpy-ui-size-8);
    --alpy-ui-component-tooltip-hover-card-space-padding-x: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-hover-card-space-padding-y: var(--alpy-ui-size-16);
    --alpy-ui-component-tooltip-styles-basic-background: #151515;
    --alpy-ui-component-tooltip-styles-basic-caret: #151515;
    --alpy-ui-component-tooltip-styles-basic-text: #a1a1a1;
    --alpy-ui-component-tooltip-styles-hover-card-background: #151515;
    --alpy-ui-component-tooltip-styles-hover-card-caret: #151515;
    --alpy-ui-component-tooltip-styles-hover-card-description: #a1a1a1;
    --alpy-ui-component-tooltip-styles-hover-card-headline: #f1f1f1;
    --alpy-ui-component-tooltip-text-description-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-description-fontSize: 12px;
    --alpy-ui-component-tooltip-text-description-fontWeight: 400;
    --alpy-ui-component-tooltip-text-description-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-description-lineHeight: 20px;
    --alpy-ui-component-tooltip-text-headline-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-headline-fontSize: 12px;
    --alpy-ui-component-tooltip-text-headline-fontWeight: 400;
    --alpy-ui-component-tooltip-text-headline-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-headline-lineHeight: 20px;
    --alpy-ui-component-tooltip-text-label-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-component-tooltip-text-label-fontSize: 12px;
    --alpy-ui-component-tooltip-text-label-fontWeight: 400;
    --alpy-ui-component-tooltip-text-label-letterSpacing: 0;
    --alpy-ui-component-tooltip-text-label-lineHeight: 20px;
    --alpy-ui-font-body-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-fontSize: 16px;
    --alpy-ui-font-body-fontWeight: 400;
    --alpy-ui-font-body-large-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-large-fontSize: 19px;
    --alpy-ui-font-body-large-fontWeight: 600;
    --alpy-ui-font-body-large-letterSpacing: 0;
    --alpy-ui-font-body-large-lineHeight: 28px;
    --alpy-ui-font-body-letterSpacing: 0;
    --alpy-ui-font-body-lineHeight: 24px;
    --alpy-ui-font-body-medium-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-medium-fontSize: 14px;
    --alpy-ui-font-body-medium-fontWeight: 400;
    --alpy-ui-font-body-medium-letterSpacing: 0;
    --alpy-ui-font-body-medium-lineHeight: 20px;
    --alpy-ui-font-body-small-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-small-fontSize: 12px;
    --alpy-ui-font-body-small-fontWeight: 400;
    --alpy-ui-font-body-small-letterSpacing: 0;
    --alpy-ui-font-body-small-lineHeight: 20px;
    --alpy-ui-font-body-xsmall-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-body-xsmall-fontSize: 10px;
    --alpy-ui-font-body-xsmall-fontWeight: 400;
    --alpy-ui-font-body-xsmall-letterSpacing: 0;
    --alpy-ui-font-body-xsmall-lineHeight: 16px;
    --alpy-ui-font-heading-large-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-large-fontSize: 40px;
    --alpy-ui-font-heading-large-fontWeight: 700;
    --alpy-ui-font-heading-large-letterSpacing: -.02em;
    --alpy-ui-font-heading-large-lineHeight: 48px;
    --alpy-ui-font-heading-medium-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-medium-fontSize: 33px;
    --alpy-ui-font-heading-medium-fontWeight: 700;
    --alpy-ui-font-heading-medium-letterSpacing: -.02em;
    --alpy-ui-font-heading-medium-lineHeight: 40px;
    --alpy-ui-font-heading-small-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-small-fontSize: 28px;
    --alpy-ui-font-heading-small-fontWeight: 500;
    --alpy-ui-font-heading-small-letterSpacing: -.02em;
    --alpy-ui-font-heading-small-lineHeight: 32px;
    --alpy-ui-font-heading-xlarge-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xlarge-fontSize: 48px;
    --alpy-ui-font-heading-xlarge-fontWeight: 700;
    --alpy-ui-font-heading-xlarge-letterSpacing: -.02em;
    --alpy-ui-font-heading-xlarge-lineHeight: 56px;
    --alpy-ui-font-heading-xsmall-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xsmall-fontSize: 23px;
    --alpy-ui-font-heading-xsmall-fontWeight: 500;
    --alpy-ui-font-heading-xsmall-letterSpacing: -.02em;
    --alpy-ui-font-heading-xsmall-lineHeight: 28px;
    --alpy-ui-font-heading-xxlarge-fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --alpy-ui-font-heading-xxlarge-fontSize: 57px;
    --alpy-ui-font-heading-xxlarge-fontWeight: 700;
    --alpy-ui-font-heading-xxlarge-letterSpacing: -.02em;
    --alpy-ui-font-heading-xxlarge-lineHeight: 68px;
    --alpy-ui-font-weight-black: 900;
    --alpy-ui-font-weight-bold: 700;
    --alpy-ui-font-weight-extraBold: 800;
    --alpy-ui-font-weight-extraLight: 200;
    --alpy-ui-font-weight-light: 300;
    --alpy-ui-font-weight-medium: 500;
    --alpy-ui-font-weight-regular: 400;
    --alpy-ui-font-weight-semiBold: 600;
    --alpy-ui-font-weight-thin: 100;
    --alpy-ui-icon-gap-lg: var(--alpy-ui-size-16);
    --alpy-ui-icon-gap-md: var(--alpy-ui-size-12);
    --alpy-ui-icon-gap-sm: var(--alpy-ui-size-8);
    --alpy-ui-icon-gap-xl: var(--alpy-ui-size-20);
    --alpy-ui-icon-gap-xs: var(--alpy-ui-size-4);
    --alpy-ui-icon-gap-xxl: var(--alpy-ui-size-24);
    --alpy-ui-icon-size-12: var(--alpy-ui-size-12);
    --alpy-ui-icon-size-128: var(--alpy-ui-size-128);
    --alpy-ui-icon-size-16: var(--alpy-ui-size-16);
    --alpy-ui-icon-size-20: var(--alpy-ui-size-20);
    --alpy-ui-icon-size-24: var(--alpy-ui-size-24);
    --alpy-ui-icon-size-32: var(--alpy-ui-size-32);
    --alpy-ui-icon-size-48: var(--alpy-ui-size-48);
    --alpy-ui-icon-size-56: var(--alpy-ui-size-56);
    --alpy-ui-icon-size-64: var(--alpy-ui-size-64);
    --alpy-ui-icon-size-8: var(--alpy-ui-size-8);
    --alpy-ui-radius-full: var(--alpy-ui-size-9999);
    --alpy-ui-radius-large: var(--alpy-ui-size-12);
    --alpy-ui-radius-medium: var(--alpy-ui-size-8);
    --alpy-ui-radius-none: var(--alpy-ui-size-0);
    --alpy-ui-radius-small: var(--alpy-ui-size-4);
    --alpy-ui-radius-tile: var(--alpy-ui-size-12);
    --alpy-ui-radius-xlarge: var(--alpy-ui-size-16);
    --alpy-ui-radius-xsmall: var(--alpy-ui-size-2);
    --alpy-ui-radius-xxlarge: var(--alpy-ui-size-24);
    --alpy-ui-size-0: 0px;
    --alpy-ui-size-0-5: .5px;
    --alpy-ui-size-1: 1px;
    --alpy-ui-size-1-5: 1.5px;
    --alpy-ui-size-100: 100px;
    --alpy-ui-size-1020: 1020px;
    --alpy-ui-size-104: 104px;
    --alpy-ui-size-108: 108px;
    --alpy-ui-size-112: 112px;
    --alpy-ui-size-116: 116px;
    --alpy-ui-size-12: 12px;
    --alpy-ui-size-120: 120px;
    --alpy-ui-size-124: 124px;
    --alpy-ui-size-128: 128px;
    --alpy-ui-size-16: 16px;
    --alpy-ui-size-192: 192px;
    --alpy-ui-size-2: 2px;
    --alpy-ui-size-20: 20px;
    --alpy-ui-size-200: 200px;
    --alpy-ui-size-24: 24px;
    --alpy-ui-size-28: 28px;
    --alpy-ui-size-32: 32px;
    --alpy-ui-size-36: 36px;
    --alpy-ui-size-4: 4px;
    --alpy-ui-size-40: 40px;
    --alpy-ui-size-44: 44px;
    --alpy-ui-size-48: 48px;
    --alpy-ui-size-52: 52px;
    --alpy-ui-size-56: 56px;
    --alpy-ui-size-60: 60px;
    --alpy-ui-size-64: 64px;
    --alpy-ui-size-68: 68px;
    --alpy-ui-size-72: 72px;
    --alpy-ui-size-750: 750px;
    --alpy-ui-size-76: 76px;
    --alpy-ui-size-8: 8px;
    --alpy-ui-size-80: 80px;
    --alpy-ui-size-84: 84px;
    --alpy-ui-size-88: 88px;
    --alpy-ui-size-92: 92px;
    --alpy-ui-size-96: 96px;
    --alpy-ui-size-9999: 9999px;
    --alpy-ui-space-0: var(--alpy-ui-size-0);
    --alpy-ui-space-1: var(--alpy-ui-size-1);
    --alpy-ui-space-100: var(--alpy-ui-size-100);
    --alpy-ui-space-104: var(--alpy-ui-size-104);
    --alpy-ui-space-108: var(--alpy-ui-size-108);
    --alpy-ui-space-112: var(--alpy-ui-size-112);
    --alpy-ui-space-116: var(--alpy-ui-size-116);
    --alpy-ui-space-12: var(--alpy-ui-size-12);
    --alpy-ui-space-120: var(--alpy-ui-size-120);
    --alpy-ui-space-124: var(--alpy-ui-size-124);
    --alpy-ui-space-128: var(--alpy-ui-size-128);
    --alpy-ui-space-16: var(--alpy-ui-size-16);
    --alpy-ui-space-192: var(--alpy-ui-size-192);
    --alpy-ui-space-2: var(--alpy-ui-size-2);
    --alpy-ui-space-20: var(--alpy-ui-size-20);
    --alpy-ui-space-24: var(--alpy-ui-size-24);
    --alpy-ui-space-28: var(--alpy-ui-size-28);
    --alpy-ui-space-32: var(--alpy-ui-size-32);
    --alpy-ui-space-36: var(--alpy-ui-size-36);
    --alpy-ui-space-4: var(--alpy-ui-size-4);
    --alpy-ui-space-40: var(--alpy-ui-size-40);
    --alpy-ui-space-48: var(--alpy-ui-size-48);
    --alpy-ui-space-52: var(--alpy-ui-size-52);
    --alpy-ui-space-56: var(--alpy-ui-size-56);
    --alpy-ui-space-60: var(--alpy-ui-size-60);
    --alpy-ui-space-64: var(--alpy-ui-size-64);
    --alpy-ui-space-68: var(--alpy-ui-size-68);
    --alpy-ui-space-72: var(--alpy-ui-size-72);
    --alpy-ui-space-76: var(--alpy-ui-size-76);
    --alpy-ui-space-8: var(--alpy-ui-size-8);
    --alpy-ui-space-80: var(--alpy-ui-size-80);
    --alpy-ui-space-84: var(--alpy-ui-size-84);
    --alpy-ui-space-88: var(--alpy-ui-size-88);
    --alpy-ui-space-92: var(--alpy-ui-size-92);
    --alpy-ui-space-96: var(--alpy-ui-size-96)
}

:root {
    font-family: var(--alpy-ui-font-body-fontFamily), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    --shell-top-bar-height: var(--alpy-ui-size-64);
    --shell-rail-width: calc(var(--alpy-ui-size-84) + var(--alpy-ui-size-1));
    --shell-panel-width: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-48));
    --shell-type-panel-width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-108));
    --shell-color-panel-width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-104));
    --shell-content-width: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-128) + var(--alpy-ui-size-52));
    --shell-header-width: calc(var(--alpy-ui-size-1020) + var(--alpy-ui-size-750) - var(--alpy-ui-size-8) - var(--alpy-ui-size-2));
    --shell-card-min-height: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-40))
}

* {
    box-sizing: border-box
}

html,body,#root {
    height: 100%;
    min-height: 100%
}

body {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    margin: 0;
}

button,a {
    font: inherit
}

.app-shell {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
    height: 100dvh;
    display: grid;
    overflow: hidden
}

.top-bar {
    background: var(--alpy-ui-color-surface-canvas);
    border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: auto auto minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--shell-top-bar-height);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-20);
    z-index: 100;
    display: grid;
    position: relative
}

.mobile-nav-toggle {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    cursor: pointer;
    align-items: center;
    gap: var(--alpy-ui-space-4);
    height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-size-0);
    width: var(--alpy-ui-size-40);
    background: 0 0;
    flex-direction: column;
    justify-content: center;
    justify-self: end;
    display: none
}

.mobile-nav-toggle-bar {
    background: var(--alpy-ui-color-text-heading);
    border-radius: var(--alpy-ui-size-2);
    height: var(--alpy-ui-size-2);
    width: var(--alpy-ui-size-20);
    transition: transform .2s,opacity .15s;
    display: block
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:first-child {
    transform: translateY(6px)rotate(45deg)
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:nth-child(2) {
    opacity: 0
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px)rotate(-45deg)
}

.mobile-nav-drawer {
    background: var(--alpy-ui-color-surface-canvas);
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    bottom: var(--alpy-ui-size-0);
    gap: var(--alpy-ui-space-24);
    left: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-24) var(--alpy-ui-space-20) var(--alpy-ui-space-32);
    right: var(--alpy-ui-size-0);
    top: var(--shell-top-bar-height);
    z-index: 99;
    flex-direction: column;
    display: none;
    position: fixed;
    overflow-y: auto
}

.mobile-nav-section-label {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-size-0) var(--alpy-ui-size-0) var(--alpy-ui-space-8)
}

.mobile-nav-list {
    gap: var(--alpy-ui-space-4);
    margin: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-size-0);
    flex-direction: column;
    list-style: none;
    display: flex
}

.mobile-nav-item {
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    align-items: center;
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    text-align: left;
    background: 0 0;
    border: none;
    width: 100%;
    text-decoration: none;
    transition: background .15s,color .15s;
    display: flex
}

.mobile-nav-item:hover,.mobile-nav-item:focus-visible,.mobile-nav-item.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.mobile-nav-item-icon {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    color: inherit;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.mobile-nav-item-label {
    color: inherit;
    font-weight: var(--alpy-ui-font-weight-medium)
}

.mobile-nav-action {
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-heading);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    text-align: left;
    background: 0 0;
    width: 100%
}

.mobile-nav-auth {
    gap: var(--alpy-ui-space-8);
    flex-direction: column;
    display: flex
}

.mobile-nav-auth>* {
    width: 100%
}

.brand-lockup,.top-bar-actions,.top-nav {
    align-items: center;
    gap: var(--alpy-ui-space-12);
    min-width: 0;
    display: flex
}

.brand-lockup {
    border-radius: var(--alpy-ui-radius-small);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8)
}

.brand-logo {
    height: var(--alpy-ui-icon-size-24);
    width: auto;
    display: block
}

.top-nav {
    justify-content: flex-start
}

.top-nav-products {
    position: relative
}

.top-nav-products-trigger:hover,.top-nav-products-trigger:focus-visible,.top-nav-products-trigger[aria-expanded=true] {
    background: var(--alpy-ui-component-button-variant-link-bg-hover);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.auth-page {
    background: var(--alpy-ui-color-surface-canvas);
    color: var(--alpy-ui-color-text-body);
    align-content: center;
    align-items: center;
    column-gap: calc(var(--alpy-ui-size-128) + var(--alpy-ui-size-32));
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-96)));
    min-height: 100dvh;
    padding: var(--alpy-ui-space-64);
    justify-content: center;
    row-gap: var(--alpy-ui-space-64);
    display: grid;
    position: relative
}

.auth-close-button {
    color: var(--alpy-ui-component-button-variant-outline-icon-default);
    right: var(--alpy-ui-space-32);
    top: var(--alpy-ui-space-32);
    position: absolute
}

.auth-brand-panel {
    min-height: min(55vh, calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-192) + var(--alpy-ui-size-64)));
    justify-content: center;
    align-items: center;
    display: flex
}

.auth-brandmark {
    width: auto;
    height: 230px;
    display: block
}

.auth-card {
    gap: var(--alpy-ui-space-28);
    max-width: calc(var(--alpy-ui-size-192) + var(--alpy-ui-size-128) + var(--alpy-ui-size-40));
    justify-self: start;
    width: 100%;
    display: grid
}

.auth-copy {
    gap: var(--alpy-ui-space-24);
    display: grid
}

.auth-copy h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xxlarge-fontFamily);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-heading-xxlarge-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-space-0);
    white-space: nowrap;
    width: max-content
}

.auth-copy h3,.auth-secondary-actions h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-title-large-fontFamily);
    font-size: var(--alpy-ui-font-heading-xsmall-fontSize);
    font-weight: var(--alpy-ui-font-weight-bold);
    letter-spacing: var(--alpy-ui-font-title-large-letterSpacing);
    line-height: var(--alpy-ui-font-title-large-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.auth-form {
    gap: var(--alpy-ui-space-12);
    width: 300px;
    display: grid
}

.auth-secondary-actions {
    gap: var(--alpy-ui-space-32);
    width: 300px;
    display: grid
}

.auth-button {
    width: 100%
}

.auth-status,.auth-terms {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.auth-status.is-error {
    color: var(--alpy-ui-color-text-functional-danger)
}

.auth-status.is-info {
    color: var(--alpy-ui-color-text-body-subtle)
}

.auth-status.is-success {
    color: var(--alpy-ui-color-text-functional-success)
}

.checkout-claim-banner {
    background: var(--alpy-ui-color-surface-raised);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-8);
    box-shadow: 0 var(--alpy-ui-size-12) var(--alpy-ui-size-32) color-mix(in srgb, var(--alpy-ui-color-system-black) 10%, transparent);
    box-sizing: border-box;
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-component-alert-success-gap);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: var(--alpy-ui-space-16) auto var(--alpy-ui-space-0);
    max-width: min(960px, calc(100% - var(--alpy-ui-space-32)));
    padding: var(--alpy-ui-component-alert-success-space-padding-y) var(--alpy-ui-component-alert-success-space-padding-x);
    display: grid
}

.checkout-claim-banner.has-action {
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr) auto
}

.checkout-claim-banner-icon {
    --product-icon-size: var(--alpy-ui-component-alert-success-size-icon-size);
    color: currentColor;
    display: inline-flex
}

.checkout-claim-banner-copy {
    gap: var(--alpy-ui-component-alert-success-gap-content);
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.checkout-claim-banner-copy strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-small-fontFamily);
    font-size: var(--alpy-ui-font-heading-small-fontSize);
    font-weight: var(--alpy-ui-font-heading-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
    line-height: var(--alpy-ui-font-heading-small-lineHeight)
}

.checkout-claim-banner-action {
    height: var(--alpy-ui-size-48);
    min-height: var(--alpy-ui-size-48);
    padding-inline:var(--alpy-ui-space-24)}

.checkout-claim-banner.is-error {
    border-color: var(--alpy-ui-color-border-functional-danger);
    color: var(--alpy-ui-color-text-functional-danger)
}

.checkout-claim-banner.is-success {
    background: var(--alpy-ui-component-alert-styles-success-bg-default);
    border-color: var(--alpy-ui-component-alert-styles-success-border-default);
    color: var(--alpy-ui-component-alert-styles-success-body-default)
}

.checkout-claim-banner.is-success .checkout-claim-banner-icon {
    color: var(--alpy-ui-component-alert-styles-success-icon-default)
}

.checkout-claim-banner.is-success .checkout-claim-banner-copy strong {
    color: var(--alpy-ui-component-alert-styles-success-title-default)
}

.auth-terms a {
    color: var(--alpy-ui-color-text-link)
}

.auth-secondary-actions {
    margin-block-start:var(--alpy-ui-space-20)}

.products-mega-menu {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-small);
    box-sizing: border-box;
    box-shadow: 0 var(--alpy-ui-size-16) var(--alpy-ui-size-48) color-mix(in srgb, var(--alpy-ui-color-system-black) 12%, transparent);
    align-items: start;
    gap: var(--alpy-ui-space-16);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 400px) minmax(var(--alpy-ui-size-0), 500px);
    left: var(--alpy-ui-space-0);
    opacity: 0;
    padding: var(--alpy-ui-space-32);
    pointer-events: none;
    visibility: hidden;
    width: min(calc(900px + var(--alpy-ui-space-16) + var(--alpy-ui-space-64)), calc(100vw - var(--alpy-ui-space-40)));
    z-index: 101;
    transition: opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),visibility .18s;
    display: grid;
    position: absolute;
    top: 100%;
    overflow: hidden;
    transform: translateY(-8px)
}

.products-mega-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0)
}

.products-mega-menu:before {
    content: "";
    height: var(--alpy-ui-space-12);
    left: 0;
    right: 0;
    top: calc(-1 * var(--alpy-ui-space-12));
    position: absolute
}

.products-mega-list {
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.products-mega-item-label,.products-mega-promo-headline {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.products-mega-items {
    gap: var(--alpy-ui-space-8);
    display: grid
}

.products-mega-item {
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    gap: var(--alpy-ui-space-8);
    margin-left: calc(var(--alpy-ui-space-16) * -1);
    padding: var(--alpy-ui-space-12) var(--alpy-ui-space-16);
    background: 0 0;
    text-decoration: none;
    transition: color .15s;
    display: grid
}

.products-mega-item:hover,.products-mega-item:focus-visible,.products-mega-item.is-promo-active,.products-mega-item.is-active {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.products-mega-item-label {
    color: inherit;
    font-weight: var(--alpy-ui-font-weight-medium)
}

.products-mega-item-helper {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-0)
}

.products-mega-promos {
    box-sizing: border-box;
    max-width: 500px;
    min-width: var(--alpy-ui-size-0);
    justify-self: stretch;
    width: 100%;
    overflow: hidden
}

.products-mega-promo {
    box-sizing: border-box;
    gap: var(--alpy-ui-space-16);
    min-width: var(--alpy-ui-size-0);
    width: 100%;
    display: grid;
    overflow: hidden
}

.products-mega-promo[hidden] {
    display: none
}

.products-mega-image-frame {
    aspect-ratio: var(--products-mega-image-ratio);
    background: var(--alpy-ui-component-image-color-placeholder);
    border-radius: var(--alpy-ui-radius-medium);
    box-sizing: border-box;
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    justify-self: stretch;
    width: 100%;
    display: block;
    overflow: hidden
}

.products-mega-image {
    object-fit: contain;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block
}

.products-mega-promo-copy {
    box-sizing: border-box;
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    justify-self: stretch;
    width: 100%;
    display: grid;
    overflow: hidden
}

p.products-mega-promo-headline {
    font-weight: var(--alpy-ui-font-weight-medium);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere
}

.products-mega-promo-description {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-medium-fontFamily);
    font-size: var(--alpy-ui-font-body-medium-fontSize);
    font-weight: var(--alpy-ui-font-body-medium-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-medium-letterSpacing);
    line-height: var(--alpy-ui-font-body-medium-lineHeight);
    margin: var(--alpy-ui-space-8) var(--alpy-ui-space-0) var(--alpy-ui-space-0);
    max-width: 100%;
    min-width: var(--alpy-ui-size-0);
    overflow-wrap: anywhere
}

.products-mega-cta {
    margin-top: var(--alpy-ui-space-24);
    justify-self: start
}

@media (width<=1120px) {
    .products-mega-menu {
        left: auto;
        right: var(--alpy-ui-space-20);
        top: var(--shell-top-bar-height);
        position: fixed
    }
}

@media (width<=980px) {
    .products-mega-menu {
        grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr);
        left: var(--alpy-ui-space-20);
        max-height: calc(100dvh - var(--shell-top-bar-height) - var(--alpy-ui-space-20));
        padding: var(--alpy-ui-space-20);
        right: var(--alpy-ui-space-20);
        top: var(--shell-top-bar-height);
        width: auto;
        position: fixed;
        overflow-y: auto
    }
}

.top-bar-actions {
    flex-wrap: wrap;
    justify-content: flex-end
}

.admin-top-bar {
    grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr)
}

.admin-top-bar>.account-menu {
    justify-self: end
}

.account-menu {
    position: relative
}

.account-menu-trigger {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-weight-medium);
    align-items: center;
    gap: var(--alpy-ui-space-8);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    max-width: var(--alpy-ui-size-240);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-12) var(--alpy-ui-space-4) var(--alpy-ui-space-4);
    display: inline-flex
}

.account-menu-trigger:hover,.account-menu-trigger:focus-visible {
    outline: none
}

.account-menu-trigger:hover .account-menu-trigger-name,.account-menu-trigger:focus-visible .account-menu-trigger-name,.account-menu-trigger:hover .account-menu-trigger-chevron,.account-menu-trigger:focus-visible .account-menu-trigger-chevron {
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.account-menu-trigger-avatar {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    height: var(--alpy-ui-size-32);
    width: var(--alpy-ui-size-32);
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    overflow: hidden
}

.account-menu-trigger-avatar-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.account-menu-trigger-name {
    color: var(--alpy-ui-color-text-body);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: auto;
    min-width: 0;
    transition: color .15s;
    overflow: hidden
}

.account-menu-trigger-chevron {
    --product-icon-size: var(--alpy-ui-icon-size-16);
    color: var(--alpy-ui-color-text-body-subtle);
    height: var(--alpy-ui-icon-size-16);
    width: var(--alpy-ui-icon-size-16);
    flex: none;
    justify-content: center;
    align-items: center;
    transition: color .15s;
    display: inline-flex
}

.account-menu-panel {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    min-width: var(--alpy-ui-size-200);
    padding: var(--alpy-ui-space-4);
    right: 0;
    top: calc(100% + var(--alpy-ui-space-4));
    z-index: 200;
    flex-direction: column;
    display: none;
    position: absolute
}

.account-menu-panel.is-open {
    display: flex
}

.account-menu-item {
    background: var(--alpy-ui-color-system-transparent);
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-body);
    cursor: pointer;
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: var(--alpy-ui-font-body-fontSize);
    font-weight: var(--alpy-ui-font-body-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-12);
    text-align: left;
    width: 100%
}

.account-menu-item:hover:not(:disabled),.account-menu-item:focus-visible:not(:disabled) {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.account-menu-item.is-disabled,.account-menu-item:disabled {
    color: var(--alpy-ui-color-text-body-subtle);
    cursor: not-allowed
}

.rail-icon {
    background: var(--alpy-ui-color-system-transparent);
    border-radius: var(--alpy-ui-radius-none);
    color: inherit;
    font-weight: var(--alpy-ui-font-body-fontWeight);
    height: var(--alpy-ui-icon-size-24);
    line-height: var(--alpy-ui-icon-size-24);
    width: var(--alpy-ui-icon-size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.rail-icon svg {
    height: var(--alpy-ui-icon-size-24);
    width: var(--alpy-ui-icon-size-24);
    display: block
}

.panel-kicker,.page-kicker,.placeholder-tile p,.demo-placeholder-header p {
    margin: 0
}

.panel-kicker,.page-kicker,.placeholder-tile p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.status-pill {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-three);
    border-radius: var(--alpy-ui-radius-full);
    color: var(--alpy-ui-color-text-body);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-height: var(--alpy-ui-space-32);
    padding: var(--alpy-ui-space-4) var(--alpy-ui-space-8);
    white-space: nowrap;
    display: inline-flex
}

.panel-list button {
    border: var(--alpy-ui-border-width-0);
    border-radius: var(--alpy-ui-radius-small);
    cursor: pointer
}

.shell-body {
    grid-template-columns: var(--shell-rail-width) var(--shell-panel-width) 1fr;
    min-height: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.shell-body.is-panel-hidden {
    grid-template-columns: var(--shell-rail-width) 1fr
}

.shell-body.is-type-route {
    grid-template-columns: var(--shell-rail-width) var(--shell-type-panel-width) 1fr
}

.shell-body.is-color-route,.shell-body.is-components-route,.shell-body.is-account-route {
    grid-template-columns: var(--shell-rail-width) var(--shell-color-panel-width) 1fr
}

.admin-shell-body {
    grid-template-columns: var(--shell-rail-width) minmax(var(--alpy-ui-size-0), 1fr);
    min-height: var(--alpy-ui-size-0);
    display: grid;
    overflow: hidden
}

.rail,.section-panel {
    background: var(--alpy-ui-color-surface-canvas);
    border-right: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two)
}

.rail {
    align-items: stretch;
    gap: var(--alpy-ui-space-0);
    height: 100%;
    min-height: var(--alpy-ui-size-0);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    display: flex;
    overflow: hidden
}

.rail-links {
    min-height: var(--alpy-ui-size-0);
    flex-direction: column;
    flex: auto;
    display: flex
}

.rail-link {
    background: var(--alpy-ui-color-surface-canvas);
    border-left: var(--alpy-ui-border-width-4) solid var(--alpy-ui-color-system-transparent);
    border-radius: var(--alpy-ui-radius-none);
    color: var(--alpy-ui-color-text-body-subtle);
    flex: 1 1 var(--shell-rail-width);
    align-items: center;
    gap: var(--alpy-ui-space-4);
    max-height: var(--shell-rail-width);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-0);
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    display: flex
}

.rail-link:hover {
    background: var(--alpy-ui-color-surface-canvas)
}

.rail-link.is-active {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border-left-color: var(--alpy-ui-color-text-brand-color-one-accent);
    color: var(--alpy-ui-color-text-brand-color-one-accent)
}

.rail-label {
    color: inherit;
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal
}

.theme-switcher {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-0);
    color: var(--alpy-ui-color-icon-default);
    cursor: pointer;
    flex: 0 1 var(--shell-rail-width);
    max-height: var(--shell-rail-width);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-0);
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
    display: inline-flex
}

.theme-switcher:hover {
    background: var(--alpy-ui-color-surface-canvas)
}

.theme-switcher-icon {
    color: inherit;
    height: var(--alpy-ui-icon-size-24);
    width: var(--alpy-ui-icon-size-24);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.theme-switcher-icon svg {
    height: var(--alpy-ui-icon-size-24);
    width: var(--alpy-ui-icon-size-24);
    display: block
}

.theme-switcher-label {
    height: var(--alpy-ui-size-1);
    margin: calc(var(--alpy-ui-size-1) * -1);
    white-space: nowrap;
    width: var(--alpy-ui-size-1);
    position: absolute;
    overflow: hidden
}

.rail-version {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    min-height: var(--alpy-ui-size-40);
    flex: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: inline-flex
}

.section-panel {
    min-height: var(--alpy-ui-size-0);
    overscroll-behavior: contain;
    padding: var(--alpy-ui-space-20) var(--alpy-ui-space-16);
    overflow: hidden auto
}

.section-panel h2 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: var(--alpy-ui-space-4) 0 var(--alpy-ui-space-20)
}

.panel-list {
    gap: var(--alpy-ui-space-8);
    display: grid
}

.panel-list button {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    color: var(--alpy-ui-color-text-body);
    min-height: var(--alpy-ui-size-40);
    padding: var(--alpy-ui-space-8) var(--alpy-ui-space-12);
    text-align: left
}

.panel-list button:hover {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one)
}

.main-content {
    min-height: var(--alpy-ui-size-0);
    overscroll-behavior: contain;
    min-width: 0;
    padding: var(--alpy-ui-space-24);
    flex-direction: column;
    display: flex;
    overflow-y: auto
}

.main-content.is-home-main {
    padding: var(--alpy-ui-space-0)
}

.main-content-body {
    flex: 1 0 auto;
    min-width: 0
}

.main-content.is-color-main,.main-content.is-components-main {
    padding: var(--alpy-ui-space-16) var(--alpy-ui-space-16)
}

@media (width>=961px) {
    .main-content.is-components-main: has(.components-workspace)>.main-content-body {
        block-size:100%;
        min-block-size: var(--alpy-ui-size-0);
        flex: none
    }

    :is(.main-content.is-components-main:has(.components-workspace[data-active-tab=documentation])>.main-content-body,.main-content.is-components-main:has(.components-workspace[data-active-tab=accessibility])>.main-content-body) {
        flex: 1 0 auto;
        block-size: auto
    }
}

.app-footer {
    background: var(--alpy-ui-color-system-transparent);
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-size: 14px;
    font-weight: var(--alpy-ui-font-body-fontWeight);
    gap: var(--alpy-ui-space-40);
    letter-spacing: var(--alpy-ui-font-body-letterSpacing);
    line-height: var(--alpy-ui-font-body-lineHeight);
    margin: var(--alpy-ui-space-100) var(--alpy-ui-space-0) var(--alpy-ui-space-0);
    padding: var(--alpy-ui-space-48) var(--alpy-ui-space-56) var(--alpy-ui-space-20);
    display: grid
}

.main-content.is-color-main .app-footer,.main-content.is-components-main .app-footer {
    margin-inline:calc(var(--alpy-ui-space-16) * -1)}

.app-footer-primary {
    align-items: start;
    gap: var(--alpy-ui-space-64);
    grid-template-columns: minmax(var(--alpy-ui-size-0), 1fr) auto;
    min-width: var(--alpy-ui-size-0);
    display: grid
}

.app-footer-brand {
    gap: var(--alpy-ui-space-12);
    min-width: var(--alpy-ui-size-0);
    justify-items: start;
    display: grid
}

.app-footer-logo {
    height: var(--alpy-ui-size-28);
    width: auto;
    display: block
}

.app-footer p,.app-footer h2,.app-footer ul {
    margin: var(--alpy-ui-space-0)
}

.app-footer p,.app-footer a,.app-footer h2,.app-footer-social-item {
    font-size: 14px
}

.app-footer p {
    color: var(--alpy-ui-color-text-heading)
}

.app-footer-social {
    align-items: center;
    gap: var(--alpy-ui-space-16);
    margin-top: var(--alpy-ui-space-24);
    display: flex
}

.app-footer-social-item {
    --product-icon-size: var(--alpy-ui-icon-size-20);
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-fontFamily);
    font-weight: var(--alpy-ui-font-weight-semiBold);
    height: var(--alpy-ui-icon-size-20);
    line-height: var(--alpy-ui-icon-size-20);
    width: var(--alpy-ui-icon-size-20);
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.app-footer-social-item.is-linkedin {
    background: var(--alpy-ui-color-text-brand-color-one-accent);
    border-radius: var(--alpy-ui-radius-small);
    color: var(--alpy-ui-color-text-onColor)
}

.app-footer .app-footer-social-item.is-linkedin:hover,.app-footer .app-footer-social-item.is-linkedin:focus-visible {
    color: var(--alpy-ui-color-text-onColor)
}

.app-footer-links {
    gap: var(--alpy-ui-space-64);
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-120), max-content));
    display: grid
}

.app-footer-column {
    align-content: start;
    gap: var(--alpy-ui-space-16);
    grid-auto-rows: max-content;
    display: grid
}

.app-footer-column h2 {
    color: var(--alpy-ui-color-text-heading);
    font-weight: var(--alpy-ui-font-weight-bold);
    line-height: var(--alpy-ui-font-body-lineHeight)
}

.app-footer-column ul {
    align-content: start;
    gap: var(--alpy-ui-space-12);
    padding: var(--alpy-ui-space-0);
    grid-auto-rows: max-content;
    list-style: none;
    display: grid
}

.app-footer-column.is-features-column ul {
    column-gap: var(--alpy-ui-space-40);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(var(--alpy-ui-size-160), max-content));
    grid-template-rows: repeat(3,max-content)
}

.app-footer a {
    color: var(--alpy-ui-color-text-heading);
    line-height: var(--alpy-ui-font-body-lineHeight);
    text-decoration: none
}

.app-footer a:hover,.app-footer a:focus-visible {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    outline: none
}

.app-footer-bottom {
    border-top: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
    align-items: center;
    gap: var(--alpy-ui-space-24);
    padding-top: var(--alpy-ui-space-24);
    justify-content: space-between;
    display: flex
}

.app-footer-bottom nav {
    align-items: center;
    gap: var(--alpy-ui-space-32);
    display: flex
}

@media (width<=1280px) {
    .app-footer-primary {
        grid-template-columns: 1fr
    }

    .app-footer-links {
        justify-content: start
    }
}

.route-page {
    gap: var(--alpy-ui-space-24);
    max-width: none;
    margin: 0 auto;
    display: grid
}

.page-heading {
    align-items: flex-start;
    gap: var(--alpy-ui-space-16);
    max-width: var(--shell-header-width);
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    display: flex
}

.page-heading h1 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-heading-xxlarge-fontFamily);
    font-size: var(--alpy-ui-font-heading-xxlarge-fontSize);
    font-weight: var(--alpy-ui-font-heading-xxlarge-fontWeight);
    letter-spacing: var(--alpy-ui-font-heading-xxlarge-letterSpacing);
    line-height: var(--alpy-ui-font-heading-xxlarge-lineHeight);
    margin: var(--alpy-ui-space-8) 0 0
}

.placeholder-grid {
    gap: var(--alpy-ui-space-16);
    max-width: var(--shell-content-width);
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
    margin: 0 auto;
    display: grid
}

.placeholder-tile {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    min-height: var(--shell-card-min-height);
    padding: var(--alpy-ui-space-20)
}

.tile-marker {
    background: var(--alpy-ui-color-shades-brand-color-one-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-small);
    height: var(--alpy-ui-space-32);
    margin-bottom: var(--alpy-ui-space-20);
    width: var(--alpy-ui-space-32);
    display: block
}

.placeholder-tile h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: 0 0 var(--alpy-ui-space-8)
}

.projection-page {
    gap: var(--alpy-ui-space-24)
}

.projection-grid {
    gap: var(--alpy-ui-space-16);
    grid-template-columns: repeat(auto-fit, minmax(var(--alpy-ui-size-224), 1fr));
    display: grid
}

.projection-tile {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    gap: var(--alpy-ui-space-8);
    min-height: var(--shell-card-min-height);
    padding: var(--alpy-ui-space-20);
    display: grid
}

.projection-tile p,.projection-tile span {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: 0
}

.projection-tile strong {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight)
}

.demo-placeholder-shell {
    background: var(--alpy-ui-color-surface-canvas);
    border: var(--alpy-ui-border-width-1) dashed var(--alpy-ui-color-border-neutral-subtle-two);
    border-radius: var(--alpy-ui-radius-medium);
    color: var(--alpy-ui-color-text-body);
    gap: var(--alpy-ui-space-16);
    max-width: var(--shell-content-width);
    padding: var(--alpy-ui-space-20);
    width: 100%;
    margin: 0 auto;
    display: grid
}

.demo-placeholder-header {
    color: var(--alpy-ui-color-text-body);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.demo-placeholder-header span {
    color: var(--alpy-ui-color-text-brand-color-one-accent);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight)
}

.demo-placeholder-card {
    background: var(--alpy-ui-color-shades-neutral-subtle-one);
    border: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-one);
    border-radius: var(--alpy-ui-radius-medium);
    padding: var(--alpy-ui-space-20)
}

.demo-placeholder-card h3 {
    color: var(--alpy-ui-color-text-heading);
    font-family: var(--alpy-ui-font-body-large-fontFamily);
    font-size: var(--alpy-ui-font-body-large-fontSize);
    font-weight: var(--alpy-ui-font-body-large-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-large-letterSpacing);
    line-height: var(--alpy-ui-font-body-large-lineHeight);
    margin: 0 0 var(--alpy-ui-space-16)
}

.demo-placeholder-card p {
    color: var(--alpy-ui-color-text-body-subtle);
    font-family: var(--alpy-ui-font-body-small-fontFamily);
    font-size: var(--alpy-ui-font-body-small-fontSize);
    font-weight: var(--alpy-ui-font-body-small-fontWeight);
    letter-spacing: var(--alpy-ui-font-body-small-letterSpacing);
    line-height: var(--alpy-ui-font-body-small-lineHeight);
    margin: 0 0 var(--alpy-ui-space-20)
}

.demo-placeholder-card button {
    border: var(--alpy-ui-component-button-size-md-borderWidth) solid var(--alpy-ui-component-button-variant-primary-border-default);
    border-radius: var(--alpy-ui-component-button-size-md-radius);
    background: var(--alpy-ui-component-button-variant-primary-bg-default);
    color: var(--alpy-ui-component-button-variant-primary-text-default);
    cursor: pointer;
    font-family: var(--alpy-ui-component-button-size-md-text-fontFamily);
    font-size: var(--alpy-ui-component-button-size-md-text-fontSize);
    font-weight: var(--alpy-ui-component-button-size-md-text-fontWeight);
    letter-spacing: var(--alpy-ui-component-button-size-md-text-letterSpacing);
    line-height: var(--alpy-ui-component-button-size-md-text-lineHeight);
    min-height: var(--alpy-ui-component-button-size-md-minHeight);
    padding: var(--alpy-ui-component-button-size-md-paddingY) var(--alpy-ui-component-button-size-md-paddingX)
}

@media (width<=960px) {
    .auth-page {
        gap: var(--alpy-ui-space-32);
        padding: var(--alpy-ui-space-40) var(--alpy-ui-space-24);
        grid-template-columns: 1fr
    }

    .auth-brand-panel {
        min-height: auto
    }

    .auth-card {
        justify-self: center
    }

    .auth-copy h1 {
        font-size: var(--alpy-ui-font-heading-large-fontSize);
        line-height: var(--alpy-ui-font-heading-large-lineHeight)
    }

    .auth-form,.auth-secondary-actions {
        width: 100%
    }

    .page-heading {
        flex-direction: column;
        align-items: stretch
    }

    .shell-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(var(--alpy-ui-size-0), 1fr)
    }

    .admin-shell-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr);
        overflow: visible
    }

    .shell-body.is-panel-hidden {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(var(--alpy-ui-size-0), 1fr)
    }

    .shell-body.is-type-route,.shell-body.is-color-route {
        grid-template-columns: 1fr
    }

    .shell-body.is-components-route {
        grid-template-rows: auto auto auto;
        grid-template-columns: 1fr;
        overflow: visible
    }

    .shell-body.is-components-route>.section-panel,.shell-body.is-components-route>.main-content {
        overscroll-behavior: auto;
        overflow: visible
    }

    body:has(.shell-body.is-components-route) {
        overflow: auto
    }

    .app-shell:has(>.shell-body.is-components-route) {
        height: auto;
        min-height: 100dvh;
        overflow: visible
    }

    .rail {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        border-right: var(--alpy-ui-border-width-0);
        flex-direction: row;
        height: auto;
        overflow: hidden
    }

    .rail-links {
        flex-direction: row
    }

    .rail-link {
        flex: 0 0 var(--shell-rail-width);
        height: var(--shell-rail-width);
        max-height: none;
        min-height: var(--shell-rail-width);
        min-width: var(--alpy-ui-size-40)
    }

    .rail-links {
        flex: none
    }

    .theme-switcher {
        flex: 0 0 var(--shell-rail-width);
        height: var(--shell-rail-width);
        margin-inline-start:auto;margin-top: var(--alpy-ui-space-0);
        max-height: none;
        min-height: var(--shell-rail-width);
        min-width: var(--alpy-ui-size-40)
    }

    .rail-version {
        border-left: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        border-top: var(--alpy-ui-border-width-0);
        min-height: var(--shell-rail-width);
        width: auto
    }

    .section-panel {
        border-bottom: var(--alpy-ui-border-width-1) solid var(--alpy-ui-color-border-neutral-subtle-two);
        border-right: var(--alpy-ui-border-width-0);
        max-height: none
    }

    .panel-list,.placeholder-grid {
        grid-template-columns: 1fr
    }

    .app-footer {
        padding-inline:var(--alpy-ui-space-24);margin-block-start: var(--alpy-ui-space-64)
    }

    .shell-body.is-type-route .app-footer {
        margin-inline:calc(var(--alpy-ui-space-16) * -1)}

    .shell-body.is-ai-ready-route .app-footer {
        margin-inline: calc(var(--alpy-ui-space-24) * -1)
    }

    .app-footer-primary,.app-footer-links {
        grid-template-columns: 1fr
    }

    .app-footer-column.is-features-column ul {
        grid-template-rows: none;
        grid-template-columns: 1fr;
        grid-auto-flow: row
    }

    .app-footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }

    .app-footer-bottom nav {
        align-items: flex-start;
        gap: var(--alpy-ui-space-12);
        flex-direction: column
    }

    .page-heading h1 {
        font-family: var(--alpy-ui-font-heading-small-fontFamily);
        font-size: var(--alpy-ui-font-heading-small-fontSize);
        font-weight: var(--alpy-ui-font-heading-small-fontWeight);
        letter-spacing: var(--alpy-ui-font-heading-small-letterSpacing);
        line-height: var(--alpy-ui-font-heading-small-lineHeight)
    }
}

@media (width<=760px) {
    .app-footer {
        margin-block-start: var(--alpy-ui-space-48)
    }
}

@media (width<=744px) {
    .top-bar {
        grid-template-columns: 1fr auto;
        align-items: center
    }

    .top-nav,.top-bar-actions,.rail {
        display: none
    }

    .mobile-nav-toggle {
        display: inline-flex
    }

    .mobile-nav-drawer {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),visibility .18s;
        display: flex;
        transform: translateY(-8px)
    }

    .mobile-nav-drawer.is-open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateY(0)
    }

    .checkout-claim-banner.has-action {
        grid-template-columns: auto minmax(var(--alpy-ui-size-0), 1fr)
    }

    .checkout-claim-banner-action {
        grid-column: 1/-1;
        width: 100%
    }
}

.section-panel,.main-content,.components-tabs,.components-preview-panel-body {
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s
}

.section-panel:hover,.section-panel:focus-within,.main-content:hover,.main-content:focus-within,.components-tabs:hover,.components-tabs:focus-within,.components-preview-panel-body:hover,.components-preview-panel-body:focus-within {
    scrollbar-color: var(--alpy-ui-color-border-neutral-subtle-two) transparent
}

.section-panel::-webkit-scrollbar {
    height: var(--alpy-ui-size-8);
    width: var(--alpy-ui-size-8)
}

.main-content::-webkit-scrollbar {
    height: var(--alpy-ui-size-8);
    width: var(--alpy-ui-size-8)
}

.components-tabs::-webkit-scrollbar {
    height: var(--alpy-ui-size-8);
    width: var(--alpy-ui-size-8)
}

.components-preview-panel-body::-webkit-scrollbar {
    height: var(--alpy-ui-size-8);
    width: var(--alpy-ui-size-8)
}

.section-panel::-webkit-scrollbar-track {
    background: 0 0
}

.main-content::-webkit-scrollbar-track {
    background: 0 0
}

.components-tabs::-webkit-scrollbar-track {
    background: 0 0
}

.components-preview-panel-body::-webkit-scrollbar-track {
    background: 0 0
}

.section-panel::-webkit-scrollbar-thumb {
    border-radius: var(--alpy-ui-size-8);
    background: 0 0;
    transition: background .2s
}

.main-content::-webkit-scrollbar-thumb {
    border-radius: var(--alpy-ui-size-8);
    background: 0 0;
    transition: background .2s
}

.components-tabs::-webkit-scrollbar-thumb {
    border-radius: var(--alpy-ui-size-8);
    background: 0 0;
    transition: background .2s
}

.components-preview-panel-body::-webkit-scrollbar-thumb {
    border-radius: var(--alpy-ui-size-8);
    background: 0 0;
    transition: background .2s
}

.section-panel:hover::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.section-panel:focus-within::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.main-content:hover::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.main-content:focus-within::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.components-tabs:hover::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.components-tabs:focus-within::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.components-preview-panel-body:hover::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}

.components-preview-panel-body:focus-within::-webkit-scrollbar-thumb {
    background: var(--alpy-ui-color-border-neutral-subtle-two)
}