@layer base {
    .hds-button {
        cursor: pointer;
        -webkit-text-decoration: none;
        text-decoration: none;
        white-space: nowrap;
        font-family: var(--hds-font-family);
        font-weight: var(--hds-font-weight-bold);
        font-size: 1rem;
        line-height: 1;
        width: -moz-fit-content;
        width: fit-content;
        letter-spacing: 0;
        gap: var(--hds-space-core-100);
        height: -moz-fit-content;
        height: fit-content;
        --hds-button-padding-block-start: 15.5px;
        --hds-button-padding-block-end: 16.5px;
        --hds-button-border-width: 1px;
        color: var(--hds-color-button-primary-text);
        background-color: var(--hds-color-button-primary-bg);
        display: inline-flex;
        align-items: center;
        text-box: trim-both cap alphabetic;
        border-radius: var(--hds-space-core-radius-sm);
        padding-block: var(--hds-button-padding-block-start) var(--hds-button-padding-block-end);
        padding-inline: var(--hds-space-core-300)
    }

    .hds-button:focus-visible {
        outline: 2px solid var(--hds-color-action-border-solid);
        outline-offset: 3px
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-button {
            transition: background-color .3s cubic-bezier(.25, 1, .5, 1), color .3s cubic-bezier(.25, 1, .5, 1), border .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-button {
        border: none
    }

    .hds-button:hover {
        background-color: var(--hds-color-button-primary-bgHover)
    }

    .hds-button button[disabled],
    .hds-button:disabled {
        background-color: var(--hds-color-button-primary-bgDisabled);
        color: var(--hds-color-button-primary-textDisabled);
        cursor: default
    }

    :where(:lang(ja)) .hds-button {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    :where(:lang(zh)) .hds-button {
        font-weight: 500
    }

    .hds-button .hds-icon-hover-arrow {
        margin-top: 2px
    }

    .hds-button--secondary {
        background-color: var(--hds-color-button-secondary-bg);
        color: var(--hds-color-button-secondary-text);
        border: var(--hds-button-border-width) solid var(--hds-color-button-secondary-borderOnSubdued);
        padding-block: calc(var(--hds-button-padding-block-start) - var(--hds-button-border-width)) calc(var(--hds-button-padding-block-end) - var(--hds-button-border-width))
    }

    .hds-button--secondary:hover {
        color: var(--hds-color-button-secondary-textHover);
        background-color: var(--hds-color-button-secondary-bgHover)
    }

    .hds-button--secondary:hover:not(:focus-visible) {
        border: 1px solid var(--hds-color-button-secondary-borderHover)
    }

    .hds-button--secondary-on-quiet {
        background-color: var(--hds-color-button-secondary-bg);
        color: var(--hds-color-button-secondary-text);
        border: var(--hds-button-border-width) solid var(--hds-color-button-secondary-border);
        padding-block: calc(var(--hds-button-padding-block-start) - var(--hds-button-border-width)) calc(var(--hds-button-padding-block-end) - var(--hds-button-border-width))
    }

    .hds-button--secondary-on-quiet:hover {
        color: var(--hds-color-button-secondary-textHover);
        border: 1px solid var(--hds-color-button-secondary-borderHover);
        background-color: var(--hds-color-button-secondary-bgHover)
    }

    .hds-button--transparent {
        background-color: transparent;
        color: var(--hds-color-action-text-onTransparent);
        border: none
    }

    .hds-button--transparent:hover {
        background-color: transparent;
        color: var(--hds-color-action-text-solidHover)
    }

    @media (max-width:639px) {
        .hds-button {
            --hds-button-padding-block-start: 13.5px;
            --hds-button-padding-block-end: 14.5px
        }
    }

    .hds-button--compact {
        --hds-button-padding-block-start: 11.5px;
        --hds-button-padding-block-end: 12.5px
    }
}

@layer base {
    @media (prefers-reduced-motion:no-preference) {
        .hds-icon--chevron .start {
            transform-origin: 44% 53%
        }

        [aria-expanded=true] :is(.hds-icon--chevron .start) {
            transform: rotate(-90deg)
        }

        .hds-icon--chevron .end {
            transform-origin: 64% 53%
        }

        [aria-expanded=true] :is(.hds-icon--chevron .end) {
            transform: rotate(90deg)
        }
    }
}

@layer base {
    .hds-form {
        display: flex;
        flex-direction: column;
        gap: var(--hds-space-core-150)
    }

    .hds-textarea {
        width: 100%;
        min-height: 96px;
        border: 1px solid var(--hds-color-input-border-default);
        border-radius: var(--hds-space-core-radius-sm);
        padding-block: var(--hds-space-core-150);
        padding-inline: var(--hds-space-core-200);
        font-size: 16px;
        line-height: 22.4px;
        font-weight: var(--hds-font-weight-normal)
    }

    .hds-textarea:focus {
        outline: none
    }
}

@layer base {
    .hds-textarea:focus-visible {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: 1px
    }

    .hds-textarea:disabled {
        background: var(--hds-color-input-bg-disabled)
    }

    .hds-textarea[aria-invalid=true] {
        border-color: var(--hds-color-input-border-error)
    }

    .hds-field--layered .hds-textarea {
        max-width: 360px
    }

    .hds-textinput {
        width: 100%;
        height: var(--hds-space-core-600);
        border: 1px solid var(--hds-color-input-border-default);
        border-radius: var(--hds-space-core-radius-sm);
        padding-block-start: calc(var(--hds-space-core-200));
        padding-block-end: calc(var(--hds-space-core-200) - 2px);
        padding-inline: calc(var(--hds-space-core-200) - 1px);
        font-size: var(--hds-font-input-text-lg-size);
        line-height: 1;
        font-weight: var(--hds-font-input-text-lg-weight);
        letter-spacing: var(--hds-font-input-text-lg-letterSpacing);
        color: var(--hds-color-text-solid)
    }
}

@layer base {
    :where(.hds-textinput):focus {
        outline: none
    }

    :where(.hds-textinput):focus-visible {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: 1px
    }

    :where(.hds-textinput):disabled {
        background: var(--hds-color-input-bg-disabled)
    }

    :where(.hds-textinput)[aria-invalid=true] {
        border-color: var(--hds-color-input-border-error)
    }

    .hds-field--layered .hds-textinput {
        max-width: 360px
    }

    .hds-textinput[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none
    }

    .hds-textinput::-moz-placeholder {
        color: var(--hds-color-input-text-placeholder)
    }

    .hds-textinput::placeholder {
        color: var(--hds-color-input-text-placeholder)
    }
}

@layer base {
    .hds-field {
        display: flex;
        flex-direction: column
    }

    .hds-field .hds-field-error {
        margin-top: var(--hds-space-core-50)
    }

    .hds-field__label-layout {
        margin-bottom: var(--hds-space-core-100)
    }

    .hds-field--layered .hds-label {
        max-width: var(--hds-space-input-layered-label-maxWidth)
    }

    .hds-field__description {
        color: var(--hds-color-text-subdued);
        font-family: var(--hds-font-family);
        font-size: var(--hds-font-input-description-size);
        font-weight: var(--hds-font-input-description-weight);
        line-height: var(--hds-font-input-description-lineHeight);
        letter-spacing: var(--hds-font-input-description-letterSpacing);
        margin-top: var(--hds-space-core-25)
    }

    .hds-field--layered {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto;
        grid-template-areas: "label input" ".     error";
        -moz-column-gap: var(--hds-space-core-300);
        column-gap: var(--hds-space-core-300);
        align-items: start
    }

    .hds-field--layered>.hds-field__label-layout {
        grid-area: label
    }

    .hds-field--layered input,
    .hds-field--layered select,
    .hds-field--layered textarea {
        grid-area: input
    }

    .hds-field--layered .hds-field-error {
        grid-area: error
    }
}

.hds-field-error {
    color: var(--hds-color-input-text-error);
    font-size: var(--hds-font-input-description-size);
    line-height: var(--hds-font-input-description-lineHeight);
    font-weight: var(--hds-font-input-description-weight)
}

.hds-field:not(.hds-field--layered):has(.hds-checkbox) .hds-field-error {
    margin-left: var(--hds-space-core-300)
}

@layer base {
    .hds-label {
        color: var(--hds-color-text-solid);
        font-family: var(--hds-font-family);
        font-size: var(--hds-font-input-label-md-size);
        font-weight: var(--hds-font-input-label-md-weight);
        line-height: var(--hds-font-input-label-md-lineHeight)
    }

    :where(:lang(ja)) .hds-label {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    :where(:lang(zh)) .hds-label {
        font-weight: 500
    }
}

@layer base {
    .hds-icon-hover-arrow {
        display: inline;
        vertical-align: baseline;
        margin-inline-end: -5px
    }

    :not([disabled]):where(.hds-link:hover, .hds-button:hover) .hds-icon-hover-arrow {
        --hds-hover-active: 1
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-icon-hover-arrow {
            transition: stroke .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-icon-hover-arrow path:first-child {
        opacity: var(--hds-hover-active, 0)
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-icon-hover-arrow path:first-child {
            transition: opacity .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-icon-hover-arrow path:last-child {
        transform: translateX(calc(var(--hds-hover-active, 0) * 3px))
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-icon-hover-arrow path:last-child {
            transition: transform .3s cubic-bezier(.25, 1, .5, 1)
        }
    }
}

@layer base {
    .hds-link {
        font-weight: var(--hds-font-weight-bold);
        color: var(--hds-color-action-text-solid);
        cursor: pointer;
        -webkit-text-decoration: none;
        text-decoration: none;
        font-size: inherit;
        width: -moz-fit-content;
        width: fit-content
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-link {
            transition: color .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-link:hover {
        color: var(--hds-color-action-text-solidHover)
    }

    .hds-link:focus-visible {
        outline: 2px solid var(--hds-color-action-border-solid);
        outline-offset: 3px;
        border-radius: var(--hds-space-core-radius-sm)
    }

    :where(:lang(ja)) .hds-link {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    .hds-nbsp {
        white-space: nowrap
    }

    .hds-link--secondary {
        color: inherit;
        font-weight: inherit;
        text-decoration-color: inherit;
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-style: solid;
        text-underline-offset: 2px
    }

    .hds-link--secondary:hover {
        color: var(--hds-color-text-solid)
    }

    .hds-globalization-picker {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: var(--available-width);
        max-height: var(--available-height);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(var(--position-x), var(--position-y))
    }

    .hds-globalization-picker .hds-listbox {
        display: block;
        border: none;
        max-height: none;
        padding: 12px;
        box-shadow: 0 -20px 30.64px 0 hsla(0, 0%, 9%, .08), 0 20px 30.64px 0 hsla(0, 0%, 9%, .08)
    }

    .hds-globalization-picker .hds-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        page-break-inside: avoid;
        -moz-column-break-inside: avoid;
        break-inside: avoid;
        position: relative;
        padding-inline-start: var(--hds-space-core-400)
    }

    .hds-globalization-picker .hds-flag {
        position: absolute;
        left: 10px;
        top: 8px
    }

    .hds-globalization-picker .hds-group__label {
        --hds-listbox-item-padding-x: var(--hds-space-core-50);
        flex: 1 0 calc(100% - (2 * var(--hds-listbox-item-padding-x)));
        padding: var(--hds-space-core-75) var(--hds-listbox-item-padding-x)
    }

    .hds-globalization-picker .hds-listbox__item {
        flex: 0 1 fit-content;
        font-size: .75rem;
        line-height: 1.4em;
        padding: var(--hds-space-core-25) var(--hds-space-core-50);
        margin: 0
    }

    .hds-globalization-picker__arrow {
        fill: var(--hds-color-util-neutral-0);
        width: 14px;
        height: 14px
    }
}

@layer base {
    .hds-globalization-picker .hds-group:has([aria-selected=true]):after {
        content: "\2713";
        position: absolute;
        top: 8px;
        left: 8px;
        background: var(--hds-color-util-neutral-900);
        border: 2px solid var(--hds-color-util-neutral-0);
        color: var(--hds-color-util-neutral-0);
        width: 20px;
        height: 20px;
        border-radius: 20px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
        font-weight: 600;
        font-size: .75rem
    }

    .hds-globalization-picker .hds-group:has([aria-selected=true]) .hds-flag {
        visibility: hidden
    }
}

@layer base {
    .hds-listbox {
        background-color: var(--hds-color-surface-bg-quiet);
        border: 1px solid var(--hds-color-surface-border-quiet);
        border-radius: var(--hds-space-core-radius-sm);
        padding: var(--hds-space-core-50);
        max-height: 300px;
        overflow-y: auto;
        scrollbar-gutter: stable;
        outline: none
    }

    .hds-group__label {
        padding: var(--hds-space-input-text-paddingY-listbox) var(--hds-space-input-text-paddingX-listbox);
        font-weight: var(--hds-font-weight-normal);
        font-size: var(--hds-font-text-md-size);
        cursor: default
    }

    .hds-group__label:focus-visible,
    .hds-listbox[data-virtual] .hds-group__label[data-focused=true] {
        outline-color: transparent;
        background-color: var(--hds-color-input-bg-hover)
    }

    :where(.hds-listbox[aria-multiselectable=true]) .hds-group__label {
        display: inline-flex;
        box-sizing: border-box;
        -webkit-text-decoration: none;
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--hds-font-family);
        font-weight: var(--hds-font-weight-normal);
        font-size: var(--hds-font-text-md-size);
        padding: var(--hds-space-input-text-paddingY-listbox) var(--hds-space-input-text-paddingX-listbox);
        text-align: left;
        transition: background-color .15s ease;
        width: 100%;
        align-items: center;
        gap: var(--hds-space-core-100)
    }

    :where(.hds-listbox[aria-multiselectable=true]) .hds-group__label:hover {
        background-color: var(--hds-color-input-bg-hover)
    }

    .hds-listbox__item {
        display: inline-flex;
        box-sizing: border-box;
        -webkit-text-decoration: none;
        text-decoration: none;
        background: none;
        border: none;
        color: var(--hds-color-input-text-solid);
        cursor: pointer;
        outline-color: transparent;
        align-items: center;
        gap: var(--hds-space-core-100);
        font-family: var(--hds-font-family);
        font-weight: var(--hds-font-weight-normal);
        font-size: var(--hds-font-text-md-size);
        padding: var(--hds-space-input-text-paddingY-listbox) var(--hds-space-input-text-paddingX-listbox);
        text-align: left;
        transition: background-color .15s ease;
        width: 100%
    }

    .hds-listbox .hds-listbox__item:focus-visible,
    .hds-listbox:not(:has([data-focused]:not(:hover))) .hds-listbox__item:hover,
    .hds-listbox[data-virtual] .hds-listbox__item[data-focused=true] {
        background-color: var(--hds-color-input-bg-hover)
    }

    .hds-link.hds-listbox__item {
        color: var(--hds-color-input-text-solid);
        width: 100%
    }

    .hds-link.hds-listbox__item:focus-visible {
        outline-color: transparent
    }

    :where(.hds-listbox:not([aria-multiselectable=true])) .hds-listbox__item[aria-selected=true] {
        font-weight: var(--hds-font-weight-bold);
        color: var(--hds-color-util-neutral-900)
    }

    .hds-group :where(.hds-listbox__item) {
        margin-inline-start: var(--hds-space-core-300);
        width: calc(100% - var(--hds-space-core-300))
    }

    .hds-divider {
        height: 1px;
        background-color: var(--hds-color-surface-border-quiet);
        margin: var(--hds-space-core-100) 10px
    }

    :is(:where(.hds-listbox[aria-multiselectable=true]) .hds-listbox__item:not([aria-selected=true]), :where(.hds-listbox[aria-multiselectable=true]) .hds-group__label[aria-checked=false]):focus-visible .hds-selection-indicator,
    :is(:where(.hds-listbox[aria-multiselectable=true]) .hds-listbox__item:not([aria-selected=true]), :where(.hds-listbox[aria-multiselectable=true]) .hds-group__label[aria-checked=false]):hover .hds-selection-indicator {
        border-color: var(--hds-color-input-border-hover)
    }

    [data-focused=true]:is(:where(.hds-listbox[aria-multiselectable=true][data-virtual]) .hds-listbox__item:not([aria-selected=true]), :where(.hds-listbox[aria-multiselectable=true][data-virtual]) .hds-group__label[aria-checked=false]) .hds-selection-indicator {
        border-color: var(--hds-color-input-border-hover)
    }

    .hds-group__label:focus-visible .hds-selection-indicator,
    .hds-listbox__item:focus-visible .hds-selection-indicator {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: var(--hds-space-input-focus-outline-offset)
    }

    :where(.hds-listbox[aria-multiselectable=true]) .hds-selection-indicator {
        fill: var(--hds-color-input-icon-onSolid);
        border: 1.25px solid var(--hds-color-input-border-option);
        border-radius: var(--hds-space-core-radius-xs);
        height: 16px;
        width: 16px
    }

    :where([aria-checked=mixed])>:is(:where(.hds-listbox[aria-multiselectable=true]) .hds-selection-indicator),
    :where([aria-checked=true])>:is(:where(.hds-listbox[aria-multiselectable=true]) .hds-selection-indicator),
    :where([aria-selected=true])>:is(:where(.hds-listbox[aria-multiselectable=true]) .hds-selection-indicator) {
        background-color: var(--hds-color-input-bg-accent);
        border: 1.25px solid var(--hds-color-input-bg-accent)
    }

    :where(.hds-listbox[aria-multiselectable=true]) .hds-listbox__item[aria-selected=true] .hds-selection-indicator .hds-selection-indicator__checked {
        display: block
    }

    :where(.hds-listbox[aria-multiselectable=true]) [aria-checked=true] .hds-selection-indicator .hds-selection-indicator__checked {
        display: block
    }

    :where(.hds-listbox[aria-multiselectable=true]) [aria-checked=mixed] .hds-selection-indicator .hds-selection-indicator__indeterminate {
        display: block
    }
}

@layer base {
    .hds-tooltip {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 290px;
        padding: var(--hds-space-core-150) var(--hds-space-core-200);
        border: 1px solid var(--hds-color-surface-border-quiet);
        background: var(--hds-color-surface-bg-quiet);
        border-radius: 8px;
        font: var(--hds-font-weight-normal) 15px/1.333333333 var(--hds-font-family);
        letter-spacing: .2px;
        color: var(--hds-color-text-solid);
        text-align: left;
        white-space: normal;
        word-break: break-word
    }

    .hds-tooltip--bottom {
        box-shadow: 0 -30px 60px -12px rgba(50, 50, 93, .25), 0 -18px 36px -18px rgba(0, 0, 0, .3)
    }

    .hds-tooltip--top {
        box-shadow: 0 30px 60px -12px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .3)
    }

    .hds-tooltip--right {
        box-shadow: -30px 0 60px -12px rgba(50, 50, 93, .25), -18px 0 36px -18px rgba(0, 0, 0, .3)
    }

    .hds-tooltip--left {
        box-shadow: 30px 0 60px -12px rgba(50, 50, 93, .25), 18px 0 36px -18px rgba(0, 0, 0, .3)
    }

    .hds-tooltip__arrow {
        fill: var(--hds-color-surface-bg-quiet);
        width: 20px;
        height: 20px
    }

    :root {
        --navigation-border-radius: var(--hds-space-core-radius-md)
    }

    .hds-navigation-menu {
        display: flex;
        margin: 0 auto;
        max-width: 1349px;
        align-items: center;
        gap: var(--hds-space-core-350);
        padding: var(--hds-space-core-200) var(--hds-space-core-300);
        position: relative;
        background-color: transparent;
        border-radius: var(--navigation-border-radius)
    }

    .hds-navigation-menu>* {
        flex: 0 0 auto
    }
}

@layer base {
    :where(.hds-navigation-menu__item)>.hds-navigation-menu__trigger {
        font-size: .875rem;
        gap: var(--hds-space-core-50)
    }

    .hds-navigation-menu__trigger {
        position: relative
    }

    .hds-navigation-menu__trigger:after {
        content: "";
        position: absolute;
        inset: 0;
        margin-inline: calc(-1 * var(--hds-space-core-150))
    }

    .hds-navigation-menu--open .hds-navigation-menu__trigger:not([aria-expanded=true]) {
        color: var(--hds-color-text-subdued)
    }

    .hds-navigation-menu--open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    :where(.hds-navigation-menu__trigger) .hds-icon {
        top: .1em;
        position: relative;
        fill: none
    }

    .hds-navigation-menu__item {
        display: flex;
        align-items: center
    }

    .hds-navigation-menu__item>* {
        flex: 1
    }

    .hds-navigation-menu__list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box
    }

    .hds-navigation-menu__list--vertical {
        flex-direction: column;
        align-items: stretch
    }

    .hds-navigation-menu__list--horizontal {
        flex-direction: row;
        -moz-column-gap: var(--hds-space-core-300);
        column-gap: var(--hds-space-core-300)
    }

    :where(:not(.hds-navigation-menu__viewport))>.hds-navigation-menu__content {
        display: none
    }

    .hds-navigation-menu__popup {
        position: relative;
        box-sizing: border-box;
        border-bottom-left-radius: var(--navigation-border-radius);
        border-bottom-right-radius: var(--navigation-border-radius);
        background-color: var(--hds-color-surface-bg-quiet);
        color: var(--hds-color-text-solid);
        border-top: 1px solid var(--hds-color-surface-border-quiet);
        box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .1), 0 30px 45px -30px rgba(50, 50, 93, .25);
        width: 100%;
        overflow: clip
    }

    .hds-navigation-menu__viewport {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "stack"
    }

    .hds-navigation-menu__content {
        grid-area: stack;
        isolation: isolate
    }

    .hds-navigation-menu__content+.hds-navigation-menu__content {
        background-color: var(--hds-color-surface-bg-quiet)
    }

    .hds-navigation-menu__positioner {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(var(--position-x), var(--position-y));
        box-sizing: border-box;
        width: var(--root-width);
        max-width: var(--root-width);
        max-height: var(--available-height)
    }

    .hds-navigation-menu__list .hds-button--transparent {
        padding-inline: 0;
        padding-block: var(--hds-space-core-150);
        color: var(--hds-color-text-solid)
    }

    :is(.hds-navigation-menu__list .hds-button--transparent):hover,
    [aria-expanded=true]:is(.hds-navigation-menu__list .hds-button--transparent) {
        color: var(--hds-color-text-solid)
    }
}

@layer base {
    :where(.hds-accordion) .hds-details {
        border-block-width: 1px;
        border-block-style: dashed;
        border-color: var(--hds-color-surface-border-quiet)
    }

    :where(.hds-details)+.hds-details {
        border-top-color: transparent
    }

    :where(.hds-details:has(:focus-visible))~.hds-details {
        border-top-color: transparent
    }

    :where(.hds-accordion) .hds-summary {
        padding-block: var(--hds-space-core-200);
        background-color: var(--hds-color-surface-bg-quiet);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        gap: var(--hds-space-core-200);
        flex-shrink: 0;
        list-style: none
    }

    :is(:where(.hds-accordion) .hds-summary)::-webkit-details-marker {
        display: none
    }

    :is(:where(.hds-accordion) .hds-summary):hover {
        color: var(--hds-color-util-brand-600)
    }

    :is(:where(.hds-accordion) .hds-summary):focus-visible {
        outline: 2px solid var(--hds-color-action-border-solid)
    }

    :where(.hds-details[open]) .hds-summary {
        color: var(--hds-color-util-neutral-900)
    }

    .hds-details-content {
        --hds-details-content-margin-inline-end: calc(var(--hds-space-core-200) + 28px);
        padding-block-end: var(--hds-space-core-200);
        margin-inline-end: var(--hds-details-content-margin-inline-end)
    }

    @supports not (interpolate-size:allow-keywords) {
        .hds-accordion ::details-content {
            content-visibility: visible
        }
    }
}

@layer base {
    :where(.hds-text) {
        margin: 0;
        color: var(--hds-color-text-subdued)
    }

    .hds-text {
        font-family: var(--hds-font-family);
        color: var(--hds-color-text-solid)
    }

    .hds-text--xxl {
        font-size: var(--hds-font-text-xxl-size);
        line-height: var(--hds-font-text-xxl-lineHeight);
        font-weight: var(--hds-font-text-xxl-weight);
        letter-spacing: var(--hds-font-text-xxl-letterSpacing)
    }

    .hds-text--xl {
        font-size: var(--hds-font-text-xl-size);
        line-height: var(--hds-font-text-xl-lineHeight);
        font-weight: var(--hds-font-text-xl-weight);
        letter-spacing: var(--hds-font-text-xl-letterSpacing);
        color: var(--hds-color-text-soft)
    }

    .hds-text--lg {
        font-size: var(--hds-font-text-lg-size);
        line-height: var(--hds-font-text-lg-lineHeight);
        font-weight: var(--hds-font-text-lg-weight);
        letter-spacing: var(--hds-font-text-lg-letterSpacing)
    }

    .hds-text--md {
        font-size: var(--hds-font-text-md-size);
        line-height: var(--hds-font-text-md-lineHeight);
        font-weight: var(--hds-font-text-md-weight);
        letter-spacing: var(--hds-font-text-md-letterSpacing)
    }

    .hds-text--sm {
        font-size: var(--hds-font-text-sm-size);
        line-height: var(--hds-font-text-sm-lineHeight);
        font-weight: var(--hds-font-text-sm-weight);
        letter-spacing: var(--hds-font-text-sm-letterSpacing)
    }

    .hds-text--xs {
        font-size: var(--hds-font-text-xs-size);
        line-height: var(--hds-font-text-xs-lineHeight);
        font-weight: var(--hds-font-text-xs-weight);
        letter-spacing: var(--hds-font-text-xs-letterSpacing)
    }

    .hds-text--xxs {
        font-size: var(--hds-font-text-xxs-size);
        line-height: var(--hds-font-text-xxs-lineHeight);
        font-weight: var(--hds-font-text-xxs-weight);
        letter-spacing: var(--hds-font-text-xxs-letterSpacing)
    }

    .hds-text--subdued {
        color: var(--hds-color-text-subdued)
    }

    .hds-text--soft {
        color: var(--hds-color-text-soft)
    }


    .hds-text--emphasized {
        font-weight: 400
    }

    .hds-text--inline {
        display: inline
    }

    .hds-text--inline:has(+.hds-text--inline):after {
        content: "\0020"
    }

    :where(:lang(ja)) .hds-text--emphasized {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    :where(:lang(zh)) .hds-text {
        font-weight: 400
    }

    :where(:lang(zh)) .hds-text--emphasized {
        font-weight: 500
    }
}

@layer base {
    :where(.hds-heading) {
        margin: 0
    }

    .hds-heading {
        font-family: var(--hds-font-family);
        color: var(--hds-color-heading-solid)
    }

    .hds-heading--inline {
        display: inline
    }

    .hds-heading--inline:has(+.hds-heading--inline):after {
        content: "\0020"
    }

    .hds-heading--subdued {
        color: var(--hds-color-heading-subdued)
    }

    .hds-heading--xxl {
        font-weight: 300;
        font-size: var(--hds-font-heading-xxl-size);
        line-height: var(--hds-font-heading-xxl-lineHeight);
        letter-spacing: var(--hds-font-heading-xxl-letterSpacing)
    }

    :where(:lang(zh)) .hds-heading--xxl {
        font-weight: 400
    }

    .hds-heading--xl {
        font-weight: 300;
        font-size: var(--hds-font-heading-xl-size);
        line-height: var(--hds-font-heading-xl-lineHeight);
        letter-spacing: var(--hds-font-heading-xl-letterSpacing)
    }

    :where(:lang(zh)) .hds-heading--xl {
        font-weight: 400
    }

    .hds-heading--lg {
        font-weight: 300;
        font-size: var(--hds-font-heading-lg-size);
        line-height: var(--hds-font-heading-lg-lineHeight);
        letter-spacing: var(--hds-font-heading-lg-letterSpacing)
    }

    :where(:lang(zh)) .hds-heading--lg {
        font-weight: 400
    }

    .hds-heading--md {
        font-weight: 300;
        font-size: var(--hds-font-heading-md-size);
        line-height: var(--hds-font-heading-md-lineHeight);
        letter-spacing: var(--hds-font-heading-md-letterSpacing)
    }

    :where(:lang(zh)) .hds-heading--md {
        font-weight: 400
    }

    .hds-heading--sm {
        font-weight: var(--hds-font-heading-sm-weight);
        font-size: var(--hds-font-heading-sm-size);
        line-height: var(--hds-font-heading-sm-lineHeight);
        letter-spacing: var(--hds-font-heading-sm-letterSpacing)
    }

    :where(:lang(zh)) .hds-heading--sm {
        font-weight: 400
    }

    .hds-heading--xs {
        font-weight: var(--hds-font-heading-xs-weight);
        font-size: var(--hds-font-heading-xs-size);
        line-height: var(--hds-font-heading-xs-lineHeight);
        letter-spacing: var(--hds-font-heading-xs-letterSpacing)
    }

    :where(:lang(ja)) .hds-heading--xs {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    :where(:lang(zh)) .hds-heading--xs {
        font-weight: 500
    }

    .hds-heading--xxs {
        font-weight: var(--hds-font-heading-xxs-weight);
        font-size: var(--hds-font-heading-xxs-size);
        line-height: var(--hds-font-heading-xxs-lineHeight);
        letter-spacing: var(--hds-font-heading-xxs-letterSpacing)
    }

    :where(:lang(ja)) .hds-heading--xxs {
        font-weight: 600;
        font-variation-settings: "wght" 400
    }

    :where(:lang(zh)) .hds-heading--xxs {
        font-weight: 500
    }

    :where(:lang(th)) .hds-heading {
        line-height: 1.4
    }
}

@layer base {
    .hds-dialog__overlay {
        --hds-overlay-alpha: 0.9;
        display: flex;
        justify-content: center;
        background-color: rgb(229 237 245/var(--hds-overlay-alpha, .9));
        position: fixed;
        overflow: auto;
        inset: 0;
        max-height: 100vh;
        transition-property: opacity, background-color
    }

    @supports (animation-timeline:scroll()) {
        .hds-dialog__overlay {
            timeline-scope: --dialog-snap-timeline;
            animation-name: opacityAnimation;
            animation-duration: 1ms;
            animation-direction: alternate;
            animation-timeline: --dialog-snap-timeline
        }
    }

    @keyframes opacityAnimation {
        0% {
            background-color: rgba(229, 237, 245, 0)
        }

        to {
            background-color: rgba(229, 237, 245, .9)
        }
    }

    @supports (hanging-punctuation:first) {
        @media (min-width:640px) {
            .hds-dialog__overlay {
                --hds-overlay-alpha: 0.7;
                background-color: rgb(229 237 245/var(--hds-overlay-alpha, .7))
            }

            @keyframes opacityAnimation {
                0% {
                    background-color: rgba(229, 237, 245, 0)
                }

                to {
                    background-color: rgba(229, 237, 245, .7)
                }
            }
        }
    }

    html:has(.hds-dialog__overlay) {
        overflow: hidden;
        padding-right: var(--scrollbarWidth)
    }

    .hds-dialog {
        background-color: var(--hds-color-surface-bg-quiet);
        border-radius: 1rem;
        margin: 5vh 0;
        --hds-dialog-padding-inline: var(--hds-space-core-300);
        --hds-dialog-pbs: var(--hds-space-core-700);
        padding-block: var(--hds-dialog-pbs) var(--hds-space-core-1000);
        padding-inline: var(--hds-dialog-padding-inline);
        max-width: 75vw;
        overflow-y: auto;
        transform-origin: top;
        transition-property: transform
    }

    @media (min-width:940px) {
        .hds-dialog {
            padding-block: var(--hds-space-core-900) var(--hds-space-core-1400);
            padding-inline: var(--hds-space-core-900)
        }
    }

    .hds-dialog__snap-container {
        position: absolute
    }

    @media (max-width:639px) {
        .hds-dialog {
            align-self: end;
            width: 100%;
            max-width: none;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding-block: 0;
            padding-inline: 0;
            --hds-dialog-blur-height: 30px;
            overflow-x: hidden;
            overflow-y: initial
        }

        .hds-dialog__inner-content {
            overflow-y: auto;
            max-height: 95svh;
            padding-inline: var(--hds-dialog-padding-inline);
            padding-block-end: var(--hds-space-core-1000)
        }

        .hds-dialog__overlay {
            position: fixed;
            inset: 0;
            overflow: hidden;
            touch-action: none
        }

        .hds-dialog__snap-container {
            position: relative;
            display: block;
            height: 100dvh;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: y mandatory;
            overscroll-behavior: none;
            scrollbar-width: none;
            -ms-overflow-style: none
        }

        @supports (animation-timeline:scroll()) {
            .hds-dialog__snap-container {
                scroll-timeline-axis: block;
                scroll-timeline-name: --dialog-snap-timeline
            }
        }

        .hds-dialog__snap-container::-webkit-scrollbar {
            width: 0;
            height: 0
        }

        .hds-dialog__snap-spacer {
            height: 100vh;
            height: 100dvh;
            scroll-snap-align: start
        }

        .hds-dialog__snap-content {
            scroll-snap-align: end
        }

        .hds-dialog__drag-icon-container-blur {
            width: calc(100% + (var(--hds-dialog-padding-inline) * 2));
            height: var(--hds-dialog-blur-height);
            position: absolute;
            border-top-right-radius: 1rem;
            border-top-left-radius: 1rem;
            z-index: 999;
            top: 0;
            --drag-left-bleed: calc(var(--hds-dialog-padding-inline) * -1);
            margin-left: var(--drag-left-bleed)
        }

        .hds-dialog__drag-icon-container-blur:before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 64px;
            background: linear-gradient(180deg, #fff 25.78%, hsla(0, 0%, 100%, .7) 60.75%, hsla(0, 0%, 100%, 0) 98.22%);
            pointer-events: none
        }

        .hds-dialog__drag-icon {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(calc(-50% + var(--drag-left-bleed)));
            z-index: 1
        }

        .hds-ui-button.hds-dialog__close-button {
            z-index: 999;
            position: relative;
            width: 28px;
            height: 28px;
            margin-top: var(--hds-space-core-200);
            left: calc(100% - 22px);
            transform: translateZ(0);
            backface-visibility: hidden
        }

        .hds-ui-button.hds-dialog__close-button svg {
            width: 12px;
            height: 13px
        }
    }

    @media (min-width:640px) {

        .hds-dialog__drag-icon-container,
        .hds-dialog__drag-icon-container-blur {
            display: none
        }

        .hds-ui-button.hds-dialog__close-button {
            z-index: 1;
            position: absolute;
            width: 40px;
            height: 40px;
            top: var(--hds-space-core-300);
            right: var(--hds-space-core-300)
        }
    }

    .hds-dialog[data-status=initial] {
        transform: translateY(200px)
    }

    .hds-dialog[data-status=open] {
        transform: translateY(0);
        transition-duration: .8s;
        transition-timing-function: cubic-bezier(.22, 1, .36, 1)
    }

    .hds-dialog[data-status=close] {
        transform: translateY(100px);
        transition-duration: .3s
    }

    .hds-dialog__overlay[data-status=initial] {
        opacity: 0
    }

    .hds-dialog__overlay[data-status=open] {
        opacity: 1;
        transition-duration: .25s
    }

    .hds-dialog__overlay[data-status=close] {
        opacity: 0;
        transition-duration: .3s
    }

    .hds-ui-button {
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hds-space-core-radius-sm);
        -webkit-text-decoration: none;
        text-decoration: none;
        line-height: 1;
        flex-shrink: 0;
        flex-grow: 0
    }
}

@layer base {
    @media (prefers-reduced-motion:no-preference) {
        .hds-ui-button {
            transition: background-color .3s cubic-bezier(.25, 1, .5, 1)
        }

        .hds-ui-button svg {
            transition: fill .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-ui-button button[disabled],
    .hds-ui-button:disabled {
        background-color: var(--hds-color-action-bg-transparent);
        outline: 1px solid var(--hds-color-action-border-disabled);
        outline-offset: -1px;
        cursor: default
    }

    :is(.hds-ui-button:disabled, .hds-ui-button button[disabled]) svg {
        fill: var(--hds-color-action-icon-disabled)
    }

    .hds-ui-button:focus-visible {
        outline: 2px solid var(--hds-color-action-border-solid);
        outline-offset: 3px
    }

    .hds-ui-button--quiet {
        background-color: var(--hds-color-button-ui-bg)
    }

    .hds-ui-button--quiet svg {
        fill: var(--hds-color-button-ui-icon)
    }

    .hds-ui-button--subdued {
        background-color: var(--hds-color-button-ui-bgOnSubdued)
    }

    .hds-ui-button--subdued svg {
        fill: var(--hds-color-button-ui-icon)
    }

    .hds-ui-button--small {
        width: 28px;
        height: 28px
    }

    @media (hover:hover) {
        .hds-ui-button:hover:not(:disabled) svg {
            fill: var(--hds-color-button-ui-iconHover)
        }

        .hds-ui-button--quiet:hover:not(:disabled) {
            background-color: var(--hds-color-button-ui-bgHover)
        }

        .hds-ui-button--subdued:hover:not(:disabled) {
            background-color: var(--hds-color-button-ui-bgOnSubduedHover)
        }

        .hds-ui-button--pop:hover:not(:disabled) {
            background-color: var(--hds-color-action-bg-solid)
        }

        .hds-ui-button--pop:hover:not(:disabled) svg {
            fill: var(--hds-color-action-icon-onSolid)
        }
    }
}

@layer base {
    .hds-selection-indicator {
        pointer-events: none
    }

    .hds-selection-indicator__checked,
    .hds-selection-indicator__indeterminate {
        display: none
    }

    .hds-checkbox {
        display: flex;
        line-height: var(--hds-font-input-label-lg-lineHeight);
        font-size: var(--hds-font-input-label-lg-size);
        font-weight: var(--hds-font-weight-normal);
        align-items: baseline
    }

    .hds-checkbox__control-layout {
        display: flex
    }

    .hds-checkbox__control {
        display: inline-grid;
        align-items: center;
        justify-items: center;
        margin-right: var(--hds-space-core-100);
        cursor: pointer
    }

    .hds-checkbox .hds-input {
        font-family: inherit;
        font-size: 14px;
        line-height: 20px;
        border: 1.25px solid var(--hds-color-input-border-option);
        border-radius: var(--hds-space-core-radius-xs);
        transition: border-color .15s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        cursor: pointer;
        grid-column-end: auto;
        grid-column-start: 1;
        grid-row-end: auto;
        grid-row-start: 1;
        padding: 0
    }

    .hds-checkbox .hds-input:focus {
        outline: none
    }

    .hds-checkbox .hds-input:hover {
        border-color: var(--hds-color-input-border-hover)
    }
}

@layer base {
    .hds-checkbox .hds-input:focus-visible {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: 1px
    }

    .hds-checkbox .hds-input[aria-invalid=true] {
        border-color: var(--hds-color-input-border-error)
    }

    .hds-checkbox .hds-input:disabled {
        background: var(--hds-color-input-bg-disabled);
        border: none;
        cursor: not-allowed
    }

    .hds-checkbox--disabled {
        color: var(--hds-color-input-text-disabled)
    }

    :where(.hds-checkbox) .hds-selection-indicator {
        grid-row-start: 1;
        grid-column-end: auto;
        grid-column-start: 1;
        grid-row-end: 1;
        fill: var(--hds-color-input-icon-onSolid)
    }

    .hds-checkbox .hds-input:checked,
    .hds-checkbox--indeterminate .hds-input {
        background-color: var(--hds-color-input-bg-accent);
        border-color: var(--hds-color-input-bg-accent)
    }

    .hds-checkbox--indeterminate .hds-selection-indicator .hds-selection-indicator__indeterminate,
    .hds-checkbox:not(.hds-checkbox--indeterminate) .hds-input:checked~.hds-selection-indicator .hds-selection-indicator__checked {
        display: block
    }
}

@layer base {

    .hds-field:has(.hds-switch),
    .hds-switch {
        --switch-width: 36px
    }

    .hds-field:has(.hds-switch) .hds-field-error {
        margin-left: calc(var(--switch-width) + var(--hds-space-core-100))
    }

    .hds-switch {
        display: flex
    }

    .hds-switch .hds-input {
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: var(--switch-width);
        height: 20px;
        flex-shrink: 0;
        border-radius: 999999px;
        background-color: var(--hds-color-input-bg-inactive);
        border: 1px solid transparent;
        transition: background-color .15s ease, border-color .15s ease;
        position: relative;
        margin-right: var(--hds-space-core-100)
    }

    .hds-switch .hds-input:after {
        content: "";
        position: absolute;
        width: 17.5px;
        height: 17.5px;
        top: 50%;
        border-radius: 50%;
        background-color: var(--hds-color-input-icon-onSolid);
        transition: transform .15s ease;
        transform: translateY(-50%)
    }

    .hds-switch__label-layout {
        display: flex;
        flex-direction: column;
        line-height: var(--hds-font-input-label-lg-lineHeight);
        font-size: var(--hds-font-input-label-lg-size);
        font-weight: var(--hds-font-weight-normal);
        color: var(--hds-color-input-text-label)
    }

    .hds-switch__description {
        margin-top: var(--hds-space-core-25);
        color: var(--hds-color-text-subdued);
        font-family: var(--hds-font-family);
        font-size: var(--hds-font-input-description-size);
        font-weight: var(--hds-font-input-description-weight);
        line-height: var(--hds-font-input-description-lineHeight);
        letter-spacing: var(--hds-font-input-description-letterSpacing)
    }

    .hds-switch .hds-input:checked:after {
        transform: translate(16px, -50%)
    }

    .hds-switch .hds-input:focus {
        outline: none
    }

    .hds-switch .hds-input:focus-visible {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: 1px
    }

    .hds-switch .hds-input[aria-invalid=true] {
        border-color: var(--hds-color-input-border-error)
    }

    .hds-switch .hds-input:checked {
        background-color: var(--hds-color-input-bg-accent)
    }

    .hds-switch .hds-input:disabled {
        background: var(--hds-color-input-bg-disabled);
        cursor: not-allowed
    }

    .hds-switch .hds-input:disabled:after {
        background-color: var(--hds-color-input-icon-disabled)
    }

    .hds-switch--disabled {
        color: var(--hds-color-input-text-disabled)
    }

    .hds-input-group {
        display: flex;
        align-items: center;
        gap: var(--hds-space-core-100);
        width: 100%;
        height: var(--hds-space-core-600);
        border: 1px solid var(--hds-color-input-border-default);
        border-radius: var(--hds-space-core-radius-sm);
        background: var(--hds-color-input-bg-default, #fff);
        font-size: var(--hds-font-input-text-lg-size);
        font-weight: var(--hds-font-input-text-lg-weight);
        letter-spacing: var(--hds-font-input-text-lg-letterSpacing);
        color: var(--hds-color-text-solid);
        overflow: hidden
    }

    .hds-input-group>.hds-textinput:disabled {
        background-color: transparent
    }
}

@layer base {
    .hds-input-group:has(>:first-child:not(.hds-textinput)) {
        padding-inline-start: var(--hds-space-core-200)
    }

    .hds-input-group:has(>.hds-select:first-child) {
        padding-inline-start: var(--hds-space-core-100)
    }

    .hds-input-group:has(>:last-child:not(.hds-textinput)) {
        padding-inline-end: var(--hds-space-core-200)
    }

    .hds-input-group:focus-within {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: 1px
    }

    .hds-input-group[aria-invalid=true] {
        border-color: var(--hds-color-input-border-error)
    }

    .hds-input-group--disabled {
        pointer-events: none
    }

    .hds-input-group--disabled,
    .hds-input-group--readOnly {
        background: var(--hds-color-input-bg-disabled)
    }

    .hds-input-group .hds-textinput {
        border: none;
        height: 100%;
        flex: 1 0 auto;
        min-width: 0;
        padding-inline: var(--hds-space-core-200);
        padding-block: 0;
        line-height: inherit
    }

    .hds-input-group .hds-textinput:not(:first-child) {
        padding-inline-start: 0
    }

    .hds-input-group .hds-textinput:not(:last-child) {
        padding-inline-end: 0
    }

    .hds-input-group .hds-textinput:focus,
    .hds-input-group .hds-textinput:focus-visible {
        outline: none
    }

    .hds-input-group .hds-select__trigger {
        border: none;
        border-radius: var(--hds-space-core-radius-sm);
        background: transparent;
        flex-shrink: 0;
        height: calc(100% - var(--hds-space-core-100));
        padding-block: var(--hds-space-core-50);
        width: auto
    }

    .hds-input-group .hds-select__trigger:focus,
    .hds-input-group .hds-select__trigger:focus-visible,
    .hds-input-group .hds-select__trigger:hover,
    .hds-input-group .hds-select__trigger[aria-expanded=true] {
        outline: none;
        background-color: var(--hds-color-input-bg-hover)
    }

    :has(.hds-select__listbox .hds-listbox__item:focus-visible) .hds-input-group .hds-select__trigger[aria-expanded=true] {
        outline: none;
        background-color: var(--hds-color-input-bg-hover)
    }
}

@layer base {
    .hds-phone-input {
        display: contents
    }

    .hds-phone-input .hds-select {
        flex-shrink: 0
    }

    .hds-phone-input .hds-select__trigger {
        gap: var(--hds-space-core-50);
        padding-inline: var(--hds-space-core-100)
    }

    .hds-phone-input .hds-country-calling-code {
        color: var(--hds-color-text-subtle);
        flex-shrink: 0
    }

    .hds-phone-input .hds-listbox .hds-country-calling-code {
        margin-inline-start: auto
    }

    .hds-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hds-space-core-100);
        position: relative;
        width: 100%
    }

    .hds-button-group>.hds-button {
        flex-grow: 1;
        justify-content: center;
        overflow: hidden
    }
}

@layer base {
    @media (min-width:640px) {
        .hds-button-group {
            width: auto
        }

        .hds-button-group>.hds-button {
            min-width: 0;
            flex-grow: unset;
            justify-content: unset
        }
    }
}

@layer base {
    .hds-list {
        display: flex;
        flex-direction: column;
        row-gap: var(--hds-space-core-100);
        -moz-column-gap: var(--hds-space-core-200);
        column-gap: var(--hds-space-core-200)
    }

    .hds-list--show-dividers {
        row-gap: var(--hds-space-core-200)
    }

    .hds-list__item--showDivider {
        padding-bottom: var(--hds-space-core-200);
        margin-bottom: var(--hds-space-core-100);
        border-bottom: 1px dashed var(--hds-color-surface-border-quiet)
    }

    .hds-list__item--showDivider:last-child {
        margin-bottom: 0
    }

    .hds-list__item {
        display: flex;
        align-items: baseline;
        gap: var(--hds-space-core-100);
        text-wrap: pretty
    }

    .hds-list__marker {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0
    }

    .hds-list__marker svg {
        display: flex;
        width: var(--hds-space-core-200);
        height: var(--hds-space-core-200);
        transform: translateY(1px)
    }

    .hds-list__text {
        color: var(--hds-color-text-soft)
    }

    .hds-select-value {
        font-weight: var(--hds-font-weight-normal);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .hds-select-value--strong {
        font-weight: var(--hds-font-weight-bold)
    }

    .hds-select__trigger {
        cursor: pointer;
        padding-block: var(--hds-space-core-150);
        padding-inline: var(--hds-space-core-200);
        background-color: var(--hds-color-input-bg-default);
        color: var(--hds-color-input-text-solid);
        border: var(--hds-space-input-border-default) solid var(--hds-color-input-border-default);
        border-radius: var(--hds-space-button-radius-lg);
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--hds-space-core-100);
        width: 100%;
        height: var(--hds-space-core-600);
        text-align: left
    }

    .hds-select__trigger:active {
        background-color: var(--hds-color-input-bg-popover)
    }

    .hds-select__trigger:hover {
        color: var(--hds-color-input-text-solid);
        border-color: var(--hds-color-input-border-hover)
    }
}

@layer base {

    .hds-select__trigger:focus-visible,
    :has(.hds-select__listbox .hds-listbox__item:focus-visible) .hds-select__trigger[aria-expanded=true],
    :where([data-focus-visible]>.hds-select__trigger[aria-expanded=true]) {
        border-color: var(--hds-color-input-border-selected);
        outline: var(--hds-space-input-focus-shadowOuter) solid var(--hds-color-action-focus-outerSubdued);
        outline-offset: var(--hds-space-input-focus-outline-offset)
    }

    .hds-select__trigger[aria-expanded=true] {
        background-color: var(--hds-color-input-bg-popover);
        border-color: var(--hds-color-input-border-selected)
    }

    .hds-select__trigger .hds-icon {
        flex-shrink: 0
    }

    .hds-select__listbox .hds-group__label:focus-visible .hds-selection-indicator,
    .hds-select__listbox .hds-listbox__item:focus-visible .hds-selection-indicator {
        outline: none
    }

    [data-focus-visible] .hds-select__listbox [data-focused=true] .hds-selection-indicator {
        outline: solid 3px var(--hds-color-action-focus-outerSoft);
        outline-offset: var(--hds-space-input-focus-outline-offset)
    }

    @media (prefers-reduced-motion:no-preference) {
        .hds-select__popover {
            transform-origin: var(--transform-origin, top);
            transition: transform .25s cubic-bezier(0, 0, .1, 1), opacity .1s cubic-bezier(0, 0, .2, 1)
        }

        .hds-select__popover[data-ending-style],
        .hds-select__popover[data-starting-style] {
            opacity: 0;
            transform: scale(.97)
        }

        .hds-select__popover[data-ending-style] {
            transition: transform .4s cubic-bezier(0, 0, .1, 1), opacity .2s cubic-bezier(0, 0, .2, 1)
        }

        .hds-autocomplete__input {
            transition: outline .3s cubic-bezier(.25, 1, .5, 1)
        }
    }

    .hds-select__popover {
        box-shadow: 0 5px 15px 0 var(--hds-color-shadow-sm-bottom), 0 15px 35px 0 var(--hds-color-shadow-sm-top);
        background-color: var(--hds-color-surface-bg-quiet);
        border-radius: var(--hds-space-core-radius-sm)
    }

    :is(.hds-select__popover .hds-autocomplete) .hds-select__listbox {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-style: solid none none;
        border-color: var(--hds-color-input-popover-divider)
    }

    .hds-select__popover .hds-autocomplete__input {
        padding-block: var(--hds-space-core-100);
        height: calc(var(--hds-space-core-600) - var(--hds-space-core-100));
        width: calc(100% - 2 * var(--hds-space-core-100));
        padding-inline: 10px;
        position: relative;
        outline: 3px solid transparent;
        outline-offset: -2px;
        margin: var(--hds-space-core-100);
        border-style: solid;
        border-width: var(--hds-space-input-border-default);
        border-color: var(--hds-color-input-border-default)
    }

    .hds-autocomplete:not([data-interaction]) :is(.hds-select__popover .hds-autocomplete__input):focus-visible,
    [data-interaction=navigating] :is(.hds-select__popover .hds-autocomplete__input):focus-visible:not([aria-activedescendant]),
    [data-interaction=typing] :is(.hds-select__popover .hds-autocomplete__input):focus-visible {
        border-color: var(--hds-color-input-border-selected)
    }

    .hds-select__listbox.hds-listbox {
        display: flex;
        flex-direction: column;
        scrollbar-gutter: auto;
        border-style: none;
        scrollbar-width: none
    }

    .hds-select__listbox:empty {
        min-height: var(--hds-space-core-500)
    }

    .hds-select__listbox .hds-group__label:focus-visible,
    .hds-select__listbox .hds-listbox__item:focus-visible {
        background-color: unset
    }

    .hds-select__listbox .hds-group__label[data-focused=true],
    .hds-select__listbox .hds-listbox__item[data-focused=true] {
        background-color: var(--hds-color-input-bg-hover)
    }

    .hds-positioner {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(var(--position-x), var(--position-y))
    }

    .hds-popover {
        min-width: var(--reference-width)
    }
}

@layer base {
    @supports (anchor-name:--test-anchor) {
        .hds-positioner--anchored {
            position: fixed;
            transform: none
        }

        .hds-positioner--anchored[data-side=bottom] {
            top: calc(anchor(bottom) + var(--position-offset-y));
            bottom: auto
        }

        .hds-positioner--anchored[data-side=top] {
            bottom: calc(anchor(top) - var(--position-offset-y));
            top: auto
        }

        .hds-positioner--anchored[data-side=right] {
            left: calc(anchor(right) + var(--position-offset-x));
            right: auto
        }

        .hds-positioner--anchored[data-side=left] {
            right: calc(anchor(left) - var(--position-offset-x));
            left: auto
        }

        .hds-positioner--anchored[data-align=start]:is([data-side=bottom], [data-side=top]) {
            left: anchor(left);
            right: auto
        }

        .hds-positioner--anchored[data-align=end]:is([data-side=bottom], [data-side=top]) {
            right: anchor(right);
            left: auto
        }

        .hds-positioner--anchored[data-align=center]:is([data-side=bottom], [data-side=top]) {
            left: anchor(center);
            transform: translateX(-50%)
        }

        .hds-positioner--anchored[data-align=start]:is([data-side=left], [data-side=right]) {
            top: anchor(top);
            bottom: auto
        }

        .hds-positioner--anchored[data-align=end]:is([data-side=left], [data-side=right]) {
            bottom: anchor(bottom);
            top: auto
        }

        .hds-positioner--anchored[data-align=center]:is([data-side=left], [data-side=right]) {
            top: anchor(center);
            transform: translateY(-50%)
        }
    }
}

@layer base {
    .hds-select-tile-group {
        display: flex;
        flex-direction: column;
        gap: var(--hds-space-core-100)
    }

    .hds-select-tile-group[aria-orientation=horizontal] {
        flex-direction: row;
        flex-wrap: wrap
    }

    .hds-select-tile-group--grid {
        display: grid;
        grid-template-columns: repeat(var(--hds-select-tile-group-cols, 2), minmax(0, 1fr));
        gap: var(--hds-space-core-100)
    }

    .hds-select-tile {
        display: inline-flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        text-align: center;
        -webkit-text-decoration: none;
        text-decoration: none;
        cursor: pointer;
        font-family: var(--hds-font-family);
        font-weight: var(--hds-font-weight-normal);
        font-size: var(--hds-font-text-sm-size);
        line-height: var(--hds-font-text-md-lineHeight);
        color: var(--hds-color-input-text-solid);
        background-color: var(--hds-color-action-focus-surface);
        border-style: solid;
        border-width: var(--hds-space-input-border-default);
        border-color: var(--hds-color-input-border-default);
        border-radius: var(--hds-space-button-radius-lg);
        padding-block: 10px;
        padding-inline: var(--hds-space-core-150);
        transition: background-color .15s ease, border-color .15s ease, color .15s ease
    }

    .hds-select-tile:focus-visible {
        outline: 2px solid var(--hds-color-action-border-solid);
        outline-offset: 2px
    }

    .hds-select-tile:hover {
        color: var(--hds-color-action-text-solid);
        border-color: var(--hds-color-action-border-solid)
    }

    .hds-select-tile:active {
        background-color: var(--hds-color-action-focus-surface);
        border-color: var(--hds-color-util-action-border-max);
        color: var(--hds-color-util-action-text-max)
    }

    .hds-select-tile[aria-selected=true] {
        background-color: #a9acff1f;
        border-color: var(--hds-color-core-brand-400);
        color: var(--hds-color-action-text-solid)
    }

    .hds-select-tile[aria-selected=true]:hover {
        border-color: var(--hds-color-action-border-solid)
    }

    .hds-select-tile[aria-selected=true]:active {
        background-color: var(--hds-color-input-bg-hover);
        border-color: var(--hds-color-util-action-border-max);
        color: var(--hds-color-util-action-text-max)
    }

    .hds-select-tile:disabled {
        cursor: default;
        pointer-events: none;
        color: var(--hds-color-action-text-disabled);
        border-color: var(--hds-color-action-border-disabled);
        background-color: var(--hds-color-action-focus-surface)
    }

    .hds-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--hds-space-core-75);
        border-radius: var(--hds-space-core-radius-sm);
        color: var(--hds-color-text-soft);
        border: 1px solid var(--hds-color-util-border-quiet);
        padding: calc(var(--hds-space-core-75) - 1px) var(--hds-space-core-100);
        font-family: var(--hds-font-family);
        font-size: var(--hds-font-text-sm-size);
        line-height: var(--hds-font-text-sm-lineHeight);
        font-weight: var(--hds-font-text-sm-weight);
        letter-spacing: var(--hds-font-text-sm-letterSpacing)
    }

    .hds-tag__icon {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .hds-tag__icon svg {
        width: var(--hds-space-core-150);
        height: var(--hds-space-core-150);
        fill: var(--hds-color-icon-subdued)
    }

    [class*=hds-accent--] .hds-tag {
        color: var(--hds-color-accent-text-solid);
        border: 1px solid var(--hds-color-accent-border-quiet)
    }
}

@layer base {
    :is([class*=hds-accent--] .hds-tag) svg {
        fill: var(--hds-color-accent-icon-solid)
    }
}

@layer reset {

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

    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        overflow-wrap: break-word
    }

    menu,
    ol,
    ul {
        list-style: none;
        padding: 0
    }

    audio,
    canvas,
    embed,
    iframe,
    img,
    object,
    svg,
    video {
        display: block;
        vertical-align: middle
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

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

    fieldset {
        border: 0
    }

    fieldset,
    legend {
        padding: 0
    }

    b,
    strong {
        font-weight: bolder
    }

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    pre {
        white-space: pre
    }

    [hidden],
    template {
        display: none
    }

    ::file-selector-button,
    button,
    input,
    optgroup,
    select,
    textarea {
        font: inherit;
        letter-spacing: inherit
    }

    ::-moz-placeholder {
        opacity: 1
    }

    ::placeholder {
        opacity: 1
    }
}

:root {
    --hds-font-heading-xxs-letterSpacing: 0em;
    --hds-font-heading-xxs-lineHeight: 1.2;
    --hds-font-heading-xxs-size: 0.875rem;
    --hds-font-heading-xxs-weight: 400;
    --hds-font-heading-xs-letterSpacing: 0em;
    --hds-font-heading-xs-lineHeight: 1.2;
    --hds-font-heading-xs-size: 1rem;
    --hds-font-heading-xs-weight: 400;
    --hds-font-heading-sm-letterSpacing: 0em;
    --hds-font-heading-sm-lineHeight: 1.25;
    --hds-font-heading-sm-size: 1.125rem;
    --hds-font-heading-sm-weight: 300;
    --hds-font-heading-md-letterSpacing: -0.01em;
    --hds-font-heading-md-lineHeight: 1.2;
    --hds-font-heading-md-size: 1.25rem;
    --hds-font-heading-md-weight: 300;
    --hds-font-heading-lg-letterSpacing: -0.01em;
    --hds-font-heading-lg-lineHeight: 1.2;
    --hds-font-heading-lg-size: 1.375rem;
    --hds-font-heading-lg-weight: 300;
    --hds-font-heading-xl-letterSpacing: -0.01em;
    --hds-font-heading-xl-lineHeight: 1.07;
    --hds-font-heading-xl-size: 1.75rem;
    --hds-font-heading-xl-weight: 300;
    --hds-font-heading-xxl-letterSpacing: -0.02em;
    --hds-font-heading-xxl-lineHeight: 1.03;
    --hds-font-heading-xxl-size: 2.125rem;
    --hds-font-heading-xxl-weight: 300;
    --hds-font-heading-hero-sm-letterSpacing: -0.01em;
    --hds-font-heading-hero-sm-lineHeight: 1.12;
    --hds-font-heading-hero-sm-size: 1.625rem;
    --hds-font-heading-hero-sm-weight: 300;
    --hds-font-heading-hero-md-letterSpacing: -0.01em;
    --hds-font-heading-hero-md-lineHeight: 1.12;
    --hds-font-heading-hero-md-size: 1.625rem;
    --hds-font-heading-hero-md-weight: 300;
    --hds-font-heading-hero-lg-letterSpacing: -0.01em;
    --hds-font-heading-hero-lg-lineHeight: 1.1;
    --hds-font-heading-hero-lg-size: 1.75rem;
    --hds-font-heading-hero-lg-weight: 300;
    --hds-font-input-description-letterSpacing: 0px;
    --hds-font-input-description-lineHeight: 1.3;
    --hds-font-input-description-size: 0.875rem;
    --hds-font-input-description-weight: 300;
    --hds-font-input-groupHeading-letterSpacing: 0px;
    --hds-font-input-groupHeading-lineHeight: 1.35;
    --hds-font-input-groupHeading-size: 0.75rem;
    --hds-font-input-groupHeading-weight: 300;
    --hds-font-input-label-sm-letterSpacing: 0px;
    --hds-font-input-label-sm-lineHeight: 1.35;
    --hds-font-input-label-sm-size: 0.75rem;
    --hds-font-input-label-sm-weight: 400;
    --hds-font-input-label-md-letterSpacing: 0px;
    --hds-font-input-label-md-lineHeight: 1.3;
    --hds-font-input-label-md-size: 0.875rem;
    --hds-font-input-label-md-weight: 400;
    --hds-font-input-label-lg-letterSpacing: 0px;
    --hds-font-input-label-lg-lineHeight: 1.2;
    --hds-font-input-label-lg-size: 1rem;
    --hds-font-input-label-lg-weight: 400;
    --hds-font-input-text-sm-letterSpacing: 0px;
    --hds-font-input-text-sm-lineHeight: 1.35;
    --hds-font-input-text-sm-size: 0.75rem;
    --hds-font-input-text-sm-weight: 300;
    --hds-font-input-text-md-letterSpacing: 0px;
    --hds-font-input-text-md-lineHeight: 1.05;
    --hds-font-input-text-md-size: 0.875rem;
    --hds-font-input-text-md-weight: 300;
    --hds-font-input-text-lg-letterSpacing: 0px;
    --hds-font-input-text-lg-lineHeight: 1;
    --hds-font-input-text-lg-size: 1rem;
    --hds-font-input-text-lg-weight: 300;
    --hds-font-input-text-lgTextarea-letterSpacing: 0px;
    --hds-font-input-text-lgTextarea-lineHeight: 1.4;
    --hds-font-input-text-lgTextarea-size: 1rem;
    --hds-font-input-text-lgTextarea-weight: 300;
    --hds-font-quote-md-letterSpacing: 0em;
    --hds-font-quote-md-lineHeight: 1.4;
    --hds-font-quote-md-size: 1.125rem;
    --hds-font-quote-md-weight: 300;
    --hds-font-quoteAttribution-md-letterSpacing: 0em;
    --hds-font-quoteAttribution-md-lineHeight: 1.35;
    --hds-font-quoteAttribution-md-size: 1rem;
    --hds-font-quoteAttribution-md-weight: 300;
    --hds-font-text-xxs-letterSpacing: 0em;
    --hds-font-text-xxs-lineHeight: 1.45;
    --hds-font-text-xxs-size: 0.75rem;
    --hds-font-text-xxs-weight: 300;
    --hds-font-text-xs-letterSpacing: 0em;
    --hds-font-text-xs-lineHeight: 1.45;
    --hds-font-text-xs-size: 0.75rem;
    --hds-font-text-xs-weight: 300;
    --hds-font-text-sm-letterSpacing: 0em;
    --hds-font-text-sm-lineHeight: 1.4;
    --hds-font-text-sm-size: 0.875rem;
    --hds-font-text-sm-weight: 300;
    --hds-font-text-md-letterSpacing: 0em;
    --hds-font-text-md-lineHeight: 1.4;
    --hds-font-text-md-size: 1rem;
    --hds-font-text-md-weight: 300;
    --hds-font-text-lg-letterSpacing: 0em;
    --hds-font-text-lg-lineHeight: 1.35;
    --hds-font-text-lg-size: 1rem;
    --hds-font-text-lg-weight: 300;
    --hds-font-text-xl-letterSpacing: 0em;
    --hds-font-text-xl-lineHeight: 1.4;
    --hds-font-text-xl-size: 1.125rem;
    --hds-font-text-xl-weight: 300;
    --hds-font-text-xxl-letterSpacing: -0.01em;
    --hds-font-text-xxl-lineHeight: 1.07;
    --hds-font-text-xxl-size: 1.75rem;
    --hds-font-text-xxl-weight: 300;
    --hds-space-block-column-gap: var(--hds-space-layout-gap);
    --hds-space-block-stack-gap-md: var(--hds-space-layout-gap);
    --hds-space-block-stack-gap-lg: var(--hds-space-core-600);
    --hds-space-block-stack-gap-xl: var(--hds-space-core-800);
    --hds-space-button-height: var(--hds-space-core-550);
    --hds-space-customerCard-logo-height: 60px;
    --hds-space-input-layered-gap: 24px;
    --hds-space-input-layered-input-maxWidth: 360px;
    --hds-space-input-layered-input-minWidth: 300px;
    --hds-space-input-layered-label-maxWidth: 196px;
    --hds-space-input-layered-label-minWidth: 120px;
    --hds-space-input-minHeight: var(--hds-space-button-height);
    --hds-space-input-popover-width: 240px;
    --hds-space-layout-columns: 4;
    --hds-space-layout-content-margin: var(--hds-space-core-200);
    --hds-space-layout-gap: var(--hds-space-core-200);
    --hds-space-layout-page-margin: var(--hds-space-core-0);
    --hds-space-section-gap-bottom: var(--hds-space-core-700);
    --hds-space-section-gap-top: var(--hds-space-core-700);
    --hds-space-stat-content-padding-y: var(--hds-space-core-400)
}

@media (min-width:640px) {
    :root {
        --hds-font-heading-xxs-letterSpacing: 0em;
        --hds-font-heading-xxs-lineHeight: 1.2;
        --hds-font-heading-xxs-size: 0.875rem;
        --hds-font-heading-xxs-weight: 400;
        --hds-font-heading-xs-letterSpacing: 0em;
        --hds-font-heading-xs-lineHeight: 1.2;
        --hds-font-heading-xs-size: 1rem;
        --hds-font-heading-xs-weight: 400;
        --hds-font-heading-sm-letterSpacing: -0.01em;
        --hds-font-heading-sm-lineHeight: 1.12;
        --hds-font-heading-sm-size: 1.25rem;
        --hds-font-heading-sm-weight: 300;
        --hds-font-heading-md-letterSpacing: -0.01em;
        --hds-font-heading-md-lineHeight: 1.1;
        --hds-font-heading-md-size: 1.375rem;
        --hds-font-heading-md-weight: 300;
        --hds-font-heading-lg-letterSpacing: -0.01em;
        --hds-font-heading-lg-lineHeight: 1.07;
        --hds-font-heading-lg-size: 1.75rem;
        --hds-font-heading-lg-weight: 300;
        --hds-font-heading-xl-letterSpacing: -0.02em;
        --hds-font-heading-xl-lineHeight: 1.05;
        --hds-font-heading-xl-size: 2.125rem;
        --hds-font-heading-xl-weight: 300;
        --hds-font-heading-xxl-letterSpacing: -0.02em;
        --hds-font-heading-xxl-lineHeight: 1.03;
        --hds-font-heading-xxl-size: 3rem;
        --hds-font-heading-xxl-weight: 300;
        --hds-font-heading-hero-sm-letterSpacing: -0.02em;
        --hds-font-heading-hero-sm-lineHeight: 1.1;
        --hds-font-heading-hero-sm-size: 2rem;
        --hds-font-heading-hero-sm-weight: 300;
        --hds-font-heading-hero-md-letterSpacing: -0.02em;
        --hds-font-heading-hero-md-lineHeight: 1.1;
        --hds-font-heading-hero-md-size: 2rem;
        --hds-font-heading-hero-md-weight: 300;
        --hds-font-heading-hero-lg-letterSpacing: -0.02em;
        --hds-font-heading-hero-lg-lineHeight: 1.12;
        --hds-font-heading-hero-lg-size: 2.5rem;
        --hds-font-heading-hero-lg-weight: 300;
        --hds-font-input-description-letterSpacing: 0px;
        --hds-font-input-description-lineHeight: 1.3;
        --hds-font-input-description-size: 0.875rem;
        --hds-font-input-description-weight: 300;
        --hds-font-input-groupHeading-letterSpacing: 0px;
        --hds-font-input-groupHeading-lineHeight: 1.35;
        --hds-font-input-groupHeading-size: 0.75rem;
        --hds-font-input-groupHeading-weight: 300;
        --hds-font-input-label-sm-letterSpacing: 0px;
        --hds-font-input-label-sm-lineHeight: 1.35;
        --hds-font-input-label-sm-size: 0.75rem;
        --hds-font-input-label-sm-weight: 400;
        --hds-font-input-label-md-letterSpacing: 0px;
        --hds-font-input-label-md-lineHeight: 1.3;
        --hds-font-input-label-md-size: 0.875rem;
        --hds-font-input-label-md-weight: 400;
        --hds-font-input-label-lg-letterSpacing: 0px;
        --hds-font-input-label-lg-lineHeight: 1.2;
        --hds-font-input-label-lg-size: 1rem;
        --hds-font-input-label-lg-weight: 400;
        --hds-font-input-text-sm-letterSpacing: 0px;
        --hds-font-input-text-sm-lineHeight: 1.35;
        --hds-font-input-text-sm-size: 0.75rem;
        --hds-font-input-text-sm-weight: 300;
        --hds-font-input-text-md-letterSpacing: 0px;
        --hds-font-input-text-md-lineHeight: 1.3;
        --hds-font-input-text-md-size: 0.875rem;
        --hds-font-input-text-md-weight: 300;
        --hds-font-input-text-lg-letterSpacing: 0px;
        --hds-font-input-text-lg-lineHeight: 1;
        --hds-font-input-text-lg-size: 1rem;
        --hds-font-input-text-lg-weight: 300;
        --hds-font-input-text-lgTextarea-letterSpacing: 0px;
        --hds-font-input-text-lgTextarea-lineHeight: 1.4;
        --hds-font-input-text-lgTextarea-size: 1rem;
        --hds-font-input-text-lgTextarea-weight: 300;
        --hds-font-quote-md-letterSpacing: 0em;
        --hds-font-quote-md-lineHeight: 1.4;
        --hds-font-quote-md-size: 1.125rem;
        --hds-font-quote-md-weight: 300;
        --hds-font-quoteAttribution-md-letterSpacing: 0em;
        --hds-font-quoteAttribution-md-lineHeight: 1.35;
        --hds-font-quoteAttribution-md-size: 1rem;
        --hds-font-quoteAttribution-md-weight: 300;
        --hds-font-text-xxs-letterSpacing: 0em;
        --hds-font-text-xxs-lineHeight: 1.45;
        --hds-font-text-xxs-size: 0.75rem;
        --hds-font-text-xxs-weight: 300;
        --hds-font-text-xs-letterSpacing: 0em;
        --hds-font-text-xs-lineHeight: 1.45;
        --hds-font-text-xs-size: 0.75rem;
        --hds-font-text-xs-weight: 300;
        --hds-font-text-sm-letterSpacing: 0em;
        --hds-font-text-sm-lineHeight: 1.4;
        --hds-font-text-sm-size: 0.875rem;
        --hds-font-text-sm-weight: 300;
        --hds-font-text-md-letterSpacing: 0em;
        --hds-font-text-md-lineHeight: 1.4;
        --hds-font-text-md-size: 1rem;
        --hds-font-text-md-weight: 300;
        --hds-font-text-lg-letterSpacing: 0em;
        --hds-font-text-lg-lineHeight: 1.4;
        --hds-font-text-lg-size: 1.125rem;
        --hds-font-text-lg-weight: 300;
        --hds-font-text-xl-letterSpacing: 0em;
        --hds-font-text-xl-lineHeight: 1.4;
        --hds-font-text-xl-size: 1.125rem;
        --hds-font-text-xl-weight: 300;
        --hds-font-text-xxl-letterSpacing: -0.02em;
        --hds-font-text-xxl-lineHeight: 1.03;
        --hds-font-text-xxl-size: 2.125rem;
        --hds-font-text-xxl-weight: 300;
        --hds-space-block-column-gap: var(--hds-space-layout-gap);
        --hds-space-block-stack-gap-md: var(--hds-space-layout-gap);
        --hds-space-block-stack-gap-lg: var(--hds-space-core-600);
        --hds-space-block-stack-gap-xl: var(--hds-space-core-800);
        --hds-space-button-height: var(--hds-space-core-550);
        --hds-space-customerCard-logo-height: 40px;
        --hds-space-input-layered-gap: 24px;
        --hds-space-input-layered-input-maxWidth: 360px;
        --hds-space-input-layered-input-minWidth: 300px;
        --hds-space-input-layered-label-maxWidth: 196px;
        --hds-space-input-layered-label-minWidth: 120px;
        --hds-space-input-minHeight: var(--hds-space-button-height);
        --hds-space-input-popover-width: 240px;
        --hds-space-layout-columns: 8;
        --hds-space-layout-content-margin: var(--hds-space-core-200);
        --hds-space-layout-gap: var(--hds-space-core-200);
        --hds-space-layout-page-margin: var(--hds-space-core-200);
        --hds-space-section-gap-bottom: var(--hds-space-core-800);
        --hds-space-section-gap-top: var(--hds-space-core-800);
        --hds-space-stat-content-padding-y: var(--hds-space-core-400)
    }
}

@media (min-width:940px) {
    :root {
        --hds-font-heading-xxs-letterSpacing: 0em;
        --hds-font-heading-xxs-lineHeight: 1.2;
        --hds-font-heading-xxs-size: 0.875rem;
        --hds-font-heading-xxs-weight: 400;
        --hds-font-heading-xs-letterSpacing: 0em;
        --hds-font-heading-xs-lineHeight: 1.2;
        --hds-font-heading-xs-size: 1rem;
        --hds-font-heading-xs-weight: 400;
        --hds-font-heading-sm-letterSpacing: -0.01em;
        --hds-font-heading-sm-lineHeight: 1.1;
        --hds-font-heading-sm-size: 1.375rem;
        --hds-font-heading-sm-weight: 300;
        --hds-font-heading-md-letterSpacing: -0.01em;
        --hds-font-heading-md-lineHeight: 1.12;
        --hds-font-heading-md-size: 1.625rem;
        --hds-font-heading-md-weight: 300;
        --hds-font-heading-lg-letterSpacing: -0.02em;
        --hds-font-heading-lg-lineHeight: 1.1;
        --hds-font-heading-lg-size: 2rem;
        --hds-font-heading-lg-weight: 300;
        --hds-font-heading-xl-letterSpacing: -0.02em;
        --hds-font-heading-xl-lineHeight: 1.03;
        --hds-font-heading-xl-size: 3rem;
        --hds-font-heading-xl-weight: 300;
        --hds-font-heading-xxl-letterSpacing: -0.025em;
        --hds-font-heading-xxl-lineHeight: 1.03;
        --hds-font-heading-xxl-size: 3.5rem;
        --hds-font-heading-xxl-weight: 300;
        --hds-font-heading-hero-sm-letterSpacing: -0.02em;
        --hds-font-heading-hero-sm-lineHeight: 1.1;
        --hds-font-heading-hero-sm-size: 2rem;
        --hds-font-heading-hero-sm-weight: 300;
        --hds-font-heading-hero-md-letterSpacing: -0.02em;
        --hds-font-heading-hero-md-lineHeight: 1.05;
        --hds-font-heading-hero-md-size: 2.25rem;
        --hds-font-heading-hero-md-weight: 300;
        --hds-font-heading-hero-lg-letterSpacing: -0.02em;
        --hds-font-heading-hero-lg-lineHeight: 1.2;
        --hds-font-heading-hero-lg-size: 2.5rem;
        --hds-font-heading-hero-lg-weight: 300;
        --hds-font-input-description-letterSpacing: 0px;
        --hds-font-input-description-lineHeight: 1.3;
        --hds-font-input-description-size: 0.875rem;
        --hds-font-input-description-weight: 300;
        --hds-font-input-groupHeading-letterSpacing: 0px;
        --hds-font-input-groupHeading-lineHeight: 1.35;
        --hds-font-input-groupHeading-size: 0.75rem;
        --hds-font-input-groupHeading-weight: 300;
        --hds-font-input-label-sm-letterSpacing: 0px;
        --hds-font-input-label-sm-lineHeight: 1.35;
        --hds-font-input-label-sm-size: 0.75rem;
        --hds-font-input-label-sm-weight: 400;
        --hds-font-input-label-md-letterSpacing: 0px;
        --hds-font-input-label-md-lineHeight: 1.3;
        --hds-font-input-label-md-size: 0.875rem;
        --hds-font-input-label-md-weight: 400;
        --hds-font-input-label-lg-letterSpacing: 0px;
        --hds-font-input-label-lg-lineHeight: 1.2;
        --hds-font-input-label-lg-size: 1rem;
        --hds-font-input-label-lg-weight: 400;
        --hds-font-input-text-sm-letterSpacing: 0px;
        --hds-font-input-text-sm-lineHeight: 1.35;
        --hds-font-input-text-sm-size: 0.75rem;
        --hds-font-input-text-sm-weight: 300;
        --hds-font-input-text-md-letterSpacing: 0px;
        --hds-font-input-text-md-lineHeight: 1.3;
        --hds-font-input-text-md-size: 0.875rem;
        --hds-font-input-text-md-weight: 300;
        --hds-font-input-text-lg-letterSpacing: 0px;
        --hds-font-input-text-lg-lineHeight: 1;
        --hds-font-input-text-lg-size: 1rem;
        --hds-font-input-text-lg-weight: 300;
        --hds-font-input-text-lgTextarea-letterSpacing: 0px;
        --hds-font-input-text-lgTextarea-lineHeight: 1.4;
        --hds-font-input-text-lgTextarea-size: 1rem;
        --hds-font-input-text-lgTextarea-weight: 300;
        --hds-font-quote-md-letterSpacing: -0.01em;
        --hds-font-quote-md-lineHeight: 1.12;
        --hds-font-quote-md-size: 1.625rem;
        --hds-font-quote-md-weight: 300;
        --hds-font-quoteAttribution-md-letterSpacing: 0em;
        --hds-font-quoteAttribution-md-lineHeight: 1.4;
        --hds-font-quoteAttribution-md-size: 1.125rem;
        --hds-font-quoteAttribution-md-weight: 300;
        --hds-font-text-xxs-letterSpacing: 0em;
        --hds-font-text-xxs-lineHeight: 1.45;
        --hds-font-text-xxs-size: 0.75rem;
        --hds-font-text-xxs-weight: 300;
        --hds-font-text-xs-letterSpacing: 0em;
        --hds-font-text-xs-lineHeight: 1.4;
        --hds-font-text-xs-size: 0.875rem;
        --hds-font-text-xs-weight: 300;
        --hds-font-text-sm-letterSpacing: 0em;
        --hds-font-text-sm-lineHeight: 1.4;
        --hds-font-text-sm-size: 0.875rem;
        --hds-font-text-sm-weight: 300;
        --hds-font-text-md-letterSpacing: 0em;
        --hds-font-text-md-lineHeight: 1.4;
        --hds-font-text-md-size: 1rem;
        --hds-font-text-md-weight: 300;
        --hds-font-text-lg-letterSpacing: 0em;
        --hds-font-text-lg-lineHeight: 1.4;
        --hds-font-text-lg-size: 1.125rem;
        --hds-font-text-lg-weight: 300;
        --hds-font-text-xl-letterSpacing: -0.01em;
        --hds-font-text-xl-lineHeight: 1.4;
        --hds-font-text-xl-size: 1.25rem;
        --hds-font-text-xl-weight: 300;
        --hds-font-text-xxl-letterSpacing: -0.02em;
        --hds-font-text-xxl-lineHeight: 1;
        --hds-font-text-xxl-size: 3rem;
        --hds-font-text-xxl-weight: 300;
        --hds-space-block-column-gap: var(--hds-space-layout-gap);
        --hds-space-block-stack-gap-md: var(--hds-space-layout-gap);
        --hds-space-block-stack-gap-lg: var(--hds-space-core-600);
        --hds-space-block-stack-gap-xl: var(--hds-space-core-800);
        --hds-space-button-height: var(--hds-space-core-600);
        --hds-space-customerCard-logo-height: 60px;
        --hds-space-input-layered-gap: 24px;
        --hds-space-input-layered-input-maxWidth: 360px;
        --hds-space-input-layered-input-minWidth: 300px;
        --hds-space-input-layered-label-maxWidth: 196px;
        --hds-space-input-layered-label-minWidth: 120px;
        --hds-space-input-minHeight: var(--hds-space-button-height);
        --hds-space-input-popover-width: 240px;
        --hds-space-layout-columns: 12;
        --hds-space-layout-content-margin: var(--hds-space-core-200);
        --hds-space-layout-gap: var(--hds-space-core-200);
        --hds-space-layout-page-margin: var(--hds-space-core-200);
        --hds-space-section-gap-bottom: var(--hds-space-core-1200);
        --hds-space-section-gap-top: var(--hds-space-core-1200);
        --hds-space-stat-content-padding-y: var(--hds-space-core-450)
    }
}

:root {
    --hds-color-core-brand-25: #f5f5ff;
    --hds-color-core-brand-25A: #acacff1f;
    --hds-color-core-brand-50: #e8e9ff;
    --hds-color-core-brand-50A: #a3a7ff40;
    --hds-color-core-brand-75: #e2e4ff;
    --hds-color-core-brand-100: #d6d9fc;
    --hds-color-core-brand-100A: #7680f54d;
    --hds-color-core-brand-200: #b9b9f9;
    --hds-color-core-brand-300: #9a9afe;
    --hds-color-core-brand-400: #7f7dfc;
    --hds-color-core-brand-400A: #5452fbbf;
    --hds-color-core-brand-500: #665efd;
    --hds-color-core-brand-600: #533afd;
    --hds-color-core-brand-700: #4032c8;
    --hds-color-core-brand-800: #2e2b8c;
    --hds-color-core-brand-900: #1c1e54;
    --hds-color-core-brand-925: #1c1e54;
    --hds-color-core-brand-950: #161741;
    --hds-color-core-brand-975: #0f1137;
    --hds-color-core-brandDark-25: #f6f7ff;
    --hds-color-core-brandDark-50: #e4eaff;
    --hds-color-core-brandDark-75: #ccdaff;
    --hds-color-core-brandDark-100: #c3d3ff;
    --hds-color-core-brandDark-200: #a8bfff;
    --hds-color-core-brandDark-300: #92adff;
    --hds-color-core-brandDark-400: #7389ff;
    --hds-color-core-brandDark-500: #5d64fe;
    --hds-color-core-brandDark-600: #533afd;
    --hds-color-core-brandDark-700: #362baa;
    --hds-color-core-brandDark-700A: #4834dbb2;
    --hds-color-core-brandDark-800: #2c2484;
    --hds-color-core-brandDark-800A: #4b31d080;
    --hds-color-core-brandDark-900: #222069;
    --hds-color-core-brandDark-925: #1c1b5a;
    --hds-color-core-brandDark-925A: #582be233;
    --hds-color-core-brandDark-950: #191a51;
    --hds-color-core-brandDark-975: #171055;
    --hds-color-core-error-100: #feb9ac;
    --hds-color-core-error-400: #f3432a;
    --hds-color-core-error-500: #d8351e;
    --hds-color-core-error-600: #a01400;
    --hds-color-core-global-transparent: #ffffff00;
    --hds-color-core-lemon-25: #fff2d8;
    --hds-color-core-lemon-100: #ffe1a3;
    --hds-color-core-lemon-200: #f9b900;
    --hds-color-core-lemon-300: #e8a30b;
    --hds-color-core-lemon-500: #9b6829;
    --hds-color-core-lemon-800: #483414;
    --hds-color-core-magenta-50: #ffe6f5;
    --hds-color-core-magenta-100: #ffd7ef;
    --hds-color-core-magenta-350: #f44bcc;
    --hds-color-core-magenta-500: #cf2cab;
    --hds-color-core-magenta-600: #a51d85;
    --hds-color-core-magenta-800: #4f2055;
    --hds-color-core-neutral-0: #fff;
    --hds-color-core-neutral-25: #f8fafd;
    --hds-color-core-neutral-25A: #1658bc08;
    --hds-color-core-neutral-50: #e5edf5;
    --hds-color-core-neutral-50A: #a8c3de4d;
    --hds-color-core-neutral-100: #d4dee9;
    --hds-color-core-neutral-200: #bac8da;
    --hds-color-core-neutral-200A: #7591b580;
    --hds-color-core-neutral-300: #95a4ba;
    --hds-color-core-neutral-400: #7d8ba4;
    --hds-color-core-neutral-500: #64748d;
    --hds-color-core-neutral-600: #50617a;
    --hds-color-core-neutral-700: #3c4f69;
    --hds-color-core-neutral-800: #273951;
    --hds-color-core-neutral-900: #1a2c44;
    --hds-color-core-neutral-950: #11273e;
    --hds-color-core-neutral-975: #0d253d;
    --hds-color-core-neutral-990: #061b31;
    --hds-color-core-neutralDark-25: #f2f7fe;
    --hds-color-core-neutralDark-50: #e3ecf7;
    --hds-color-core-neutralDark-100: #d4deef;
    --hds-color-core-neutralDark-200: #c0cee6;
    --hds-color-core-neutralDark-300: #a3b5d6;
    --hds-color-core-neutralDark-400: #839bc8;
    --hds-color-core-neutralDark-500: #6480b2;
    --hds-color-core-neutralDark-600: #45639d;
    --hds-color-core-neutralDark-700: #273f73;
    --hds-color-core-neutralDark-800: #23356e;
    --hds-color-core-neutralDark-800A: #2f458ba6;
    --hds-color-core-neutralDark-900: #182659;
    --hds-color-core-neutralDark-900A: #23357a80;
    --hds-color-core-neutralDark-950: #122054;
    --hds-color-core-neutralDark-950A: #17297080;
    --hds-color-core-neutralDark-975: #101d4e;
    --hds-color-core-neutralDark-990: #0d1738;
    --hds-color-core-orange-50: #ffe5da;
    --hds-color-core-orange-100: #ffd8c6;
    --hds-color-core-orange-350: #ff6118;
    --hds-color-core-orange-500: #d04900;
    --hds-color-core-orange-600: #ab3500;
    --hds-color-core-orange-800: #56281b;
    --hds-color-core-ruby-50: #fee8eb;
    --hds-color-core-ruby-100: #fed9de;
    --hds-color-core-ruby-400: #ea2261;
    --hds-color-core-ruby-500: #e2225f;
    --hds-color-core-ruby-600: #b51145;
    --hds-color-core-ruby-800: #5d1c3c;
    --hds-color-core-success-100: #b6f2c7;
    --hds-color-core-success-400: #00b261;
    --hds-color-core-success-600: #006f3a;
    --hds-space-button-border: 1px;
    --hds-space-button-radius-sm: var(--hds-space-core-radius-xs);
    --hds-space-button-radius-lg: var(--hds-space-core-radius-sm);
    --hds-space-core-0: 0px;
    --hds-space-core-1: 1px;
    --hds-space-core-25: 2px;
    --hds-space-core-50: 4px;
    --hds-space-core-75: 6px;
    --hds-space-core-100: 8px;
    --hds-space-core-150: 12px;
    --hds-space-core-200: 16px;
    --hds-space-core-250: 20px;
    --hds-space-core-300: 24px;
    --hds-space-core-350: 28px;
    --hds-space-core-400: 32px;
    --hds-space-core-450: 36px;
    --hds-space-core-500: 40px;
    --hds-space-core-550: 44px;
    --hds-space-core-600: 48px;
    --hds-space-core-700: 56px;
    --hds-space-core-800: 64px;
    --hds-space-core-900: 72px;
    --hds-space-core-1000: 80px;
    --hds-space-core-1100: 88px;
    --hds-space-core-1200: 96px;
    --hds-space-core-1300: 104px;
    --hds-space-core-1400: 112px;
    --hds-space-core-1500: 120px;
    --hds-space-core-1600: 128px;
    --hds-space-core-1700: 136px;
    --hds-space-core-1800: 144px;
    --hds-space-core-1900: 152px;
    --hds-space-core-2000: 160px;
    --hds-space-core-2100: 168px;
    --hds-space-core-2200: 176px;
    --hds-space-core-2300: 184px;
    --hds-space-core-2400: 192px;
    --hds-space-core-2500: 200px;
    --hds-space-core-border-sm: 1px;
    --hds-space-core-border-md: 1.25px;
    --hds-space-core-border-lg: 2px;
    --hds-space-core-border-none: 0px;
    --hds-space-core-radius-xs: 2px;
    --hds-space-core-radius-sm: 4px;
    --hds-space-core-radius-md: 6px;
    --hds-space-core-radius-lg: 16px;
    --hds-space-core-radius-xl: 32px;
    --hds-space-core-radius-none: 0px;
    --hds-space-core-radius-round: 99999px;
    --hds-space-input-border-default: 1px;
    --hds-space-input-focus-outline-offset: 1px;
    --hds-space-input-focus-shadowOuter: 4px;
    --hds-space-input-focus-shadowSingle: 2px;
    --hds-space-input-gap-errorMessage: var(--hds-space-core-50);
    --hds-space-input-gap-labelVertical: var(--hds-space-core-100);
    --hds-space-input-text-paddingX-sm: 10px;
    --hds-space-input-text-paddingX-md: 13px;
    --hds-space-input-text-paddingX-lg: 16px;
    --hds-space-input-text-paddingX-listbox: 12px;
    --hds-space-input-text-paddingY-sm: 8px;
    --hds-space-input-text-paddingY-md: 10px;
    --hds-space-input-text-paddingY-lg: 12px;
    --hds-space-input-text-paddingY-listbox: 8px;
    --hds-space-layout-content-maxWidth: 1264px
}