.gradient:before {
    height: 8rem
}

@media (min-width: 800px) {
    .gradient:before {
        height: 9.375rem
    }
}

.gradient:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, black, transparent)
}

.effect-hero {
    transform: translateY(20px);
    opacity: 0;
    transition: transform .75s ease, opacity .75s ease
}

.effect-hero.visible {
    transform: translateY(0);
    opacity: .75
}

.fade-enter-active,
.fade-leave-active {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.modal--open #main>div {
    opacity: .3;
    filter: blur(20px);
    overflow: hidden
}

.modal--open body {
    overflow: hidden
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .4s ease
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0
}

button.is-open svg:not(.close-icon) {
    display: none
}

button.is-open svg.close-icon {
    display: block
}

.grid[data-v-ac0e1d27] {
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab
}

.grid[data-v-ac0e1d27]:active {
    cursor: grabbing
}

.grid-item[data-v-ac0e1d27] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative
}

.grid:active .grid-item[data-v-ac0e1d27] {
    pointer-events: none
}

.grid-item a[data-v-ac0e1d27] {
    position: absolute;
    top: 0;
    bottom: 0
}

.grid-item img[data-v-ac0e1d27] {
    width: 100%;
    height: 100%;
    visibility: hidden
}

.effect-image {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease
}

.effect-image.visible {
    transform: translateY(0);
    opacity: .9
}

.trigger[data-v-6c065cb0] {
    position: relative;
    display: flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: #282828bf;
    color: var(--gray-550);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

@media (hover: hover) and (pointer: fine) {
    .trigger[data-v-6c065cb0]:hover {
        color: var(--white)
    }
}

.tooltip[data-v-6c065cb0] {
    font-family: var(--f-number-font-family);
    font-size: var(--f-number-font-size);
    font-stretch: var(--f-number-font-stretch);
    font-style: var(--f-number-font-style);
    font-variant: var(--f-number-font-variant);
    font-weight: var(--f-number-font-weight);
    line-height: var(--f-number-line-height);
    letter-spacing: var(--f-number-letter-spacing);
    font-feature-settings: var(--f-number-font-feature-settings);
    -moz-osx-font-smoothing: var(--f-number--moz-osx-font-smoothing);
    -webkit-font-smoothing: var(--f-number--webkit-font-smoothing);
    --bold-weight: var(--f-number---bold-weight)
}

.tooltip b[data-v-6c065cb0],
.tooltip strong[data-v-6c065cb0] {
    font-weight: var(--f-number---bold-weight, bold)
}

.tooltip[data-v-6c065cb0] {
    visibility: hidden;
    position: absolute;
    top: -.75rem;
    left: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    white-space: nowrap;
    border-radius: .25rem;
    background-color: #282828bf;
    padding: .5rem .75rem;
    color: var(--gray-550);
    opacity: 0;
    --tw-backdrop-blur: blur(20px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

.trigger:not(.trigger--expanded, .no-tooltip):hover .tooltip[data-v-6c065cb0],
.trigger[data-focus-method=key]:not(.trigger--expanded, .no-tooltip):focus .tooltip[data-v-6c065cb0],
.trigger:not(.trigger--expanded, .no-tooltip):hover+.tooltip[data-v-6c065cb0],
.trigger[data-focus-method=key]:not(.trigger--expanded, .no-tooltip):focus+.tooltip[data-v-6c065cb0] {
    visibility: visible;
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1
}

.menu[data-v-6c065cb0] {
    visibility: hidden;
    position: absolute;
    top: -1rem;
    left: 50%;
    z-index: 15;
    --tw-translate-x: -50%;
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    white-space: nowrap;
    border-radius: 9999px;
    background-color: #282828bf;
    color: var(--gray-550);
    opacity: 0;
    --tw-backdrop-blur: blur(20px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .3s
}

.menu--right[data-v-6c065cb0] {
    right: 0rem;
    left: auto;
    --tw-translate-x: 0rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width: 600px) {
    .menu--right[data-v-6c065cb0] {
        right: auto;
        left: 50%;
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
}

.trigger--expanded[data-v-6c065cb0] {
    color: var(--white)
}

.trigger--expanded+.menu[data-v-6c065cb0] {
    visibility: visible;
    opacity: 1
}

svg[data-v-6c065cb0] {
    pointer-events: none
}

@keyframes flash {
    to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}

@keyframes glow {
    0% {
        color: var(--gray-800);
        box-shadow: none
    }
    50% {
        color: #ccc;
        box-shadow: 0 0 8px 0 var(--gray-350, #a6a6a6)
    }
    to {
        color: var(--gray-800);
        box-shadow: none
    }
}

.glow {
    animation: glow 1s ease .1s
}

span.blink:after {
    animation: flash .5s infinite alternate
}

.wrapper:has(input[data-focus-method=key]) {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: #ccc;
    transition-property: none
}

.wrapper.hover\:bg-surface-secondary:has([data-focus-method=key]) {
    background-color: #333333b3
}

.wrapper:has(input:focus) .ui-suggestions {
    visibility: hidden
}

.list:after {
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    display: block;
    height: 5.6875rem;
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    --tw-gradient-from: #242424 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(36 36 36 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-content: "";
    content: var(--tw-content)
}

.input:not(:-moz-placeholder)+.helper-text {
    visibility: hidden;
    opacity: 0
}

.input:focus+.helper-text,
.input:not(:placeholder-shown)+.helper-text {
    visibility: hidden;
    opacity: 0
}

body.ds-landing {
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}