.container {
    width: calc(100% - 2 * var(--component-padding));
    margin-left: auto;
    margin-right: auto;
}


[class^=flex\@], [class*=" flex@"],
[class^=inline-flex\@], [class*=" inline-flex@"] {
    --gap: 0px;
    --gap-x: var(--gap);
    --gap-y: var(--gap);
    gap: var(--gap-y) var(--gap-x);
}

    [class^=flex\@] > *, [class*=" flex@"] > *,
    [class^=inline-flex\@] > *, [class*=" inline-flex@"] > * {
        --sub-gap: 0px;
        --sub-gap-x: var(--sub-gap);
        --sub-gap-y: var(--sub-gap);
    }

 #region (Safari < 14.1 fallback) 
@media not all and (min-resolution: 0.001dpcm) {
}
 #endregion 

@media (min-width: 32rem) {
    @media not all and (min-resolution: 0.001dpcm) {
    }
}

@media (min-width: 48rem) {
    @media not all and (min-resolution: 0.001dpcm) {
    }
}

@media (min-width: 64rem) {
    @media not all and (min-resolution: 0.001dpcm) {
    }
}

@media (min-width: 80rem) {
    @media not all and (min-resolution: 0.001dpcm) {
    }
}

@media (min-width: 90rem) {
    @media not all and (min-resolution: 0.001dpcm) {
    }
}

*, *::after, *::before {
    box-sizing: inherit;
}

* {
    font: inherit;
}

html, body, div, span, object,
h1, p,
a, s, var,
b, i, section {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg, white);
}

section {
    display: block;
}

.btn, .link {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

svg {
    max-width: 100%;
}

:root {
    --space-unit: 1rem;
}

:root, * {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md);
}

:root {
    --radius-sm: calc(var(--radius, 0.375em)/2);
    --radius-md: var(--radius, 0.375em);
    --radius-lg: calc(var(--radius, 0.375em)*2);
    --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 0 46px 60px -6px rgba(0, 0, 0, 0.2);
    --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
    --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root {
    --heading-line-height: 1.2;
    --body-line-height: 1.4;
}

body {
    font-size: var(--text-base-size, 1rem);
    font-family: var(--font-primary, sans-serif);
    color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
    font-weight: var(--body-font-weight, normal);
}

h1 {
    color: var(--color-contrast-higher, hsl(204deg, 28%, 7%));
    line-height: var(--heading-line-height, 1.2);
    font-weight: var(--heading-font-weight, 700);
}

h1 {
    font-size: var(--text-xxl, 2rem);
}

a, .link {
    color: var(--color-primary, hsl(250deg, 84%, 54%));
    text-decoration: underline;
}

s {
    text-decoration: line-through;
}

.text-component h1 {
    line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1));
}

.text-component p {
    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
}

.text-component p, .text-component .text-component__block {
    margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
}

.text-component > *:first-child {
    margin-top: 0;
}

.text-component > *:last-child {
    margin-bottom: 0;
}

:root {
    --icon-xxxs: 8px;
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 96px;
    --icon-xxxl: 128px;
}

.icon {
    --size: 1em;
    height: var(--size);
    width: var(--size);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

.icon--xl {
    --size: var(--icon-xl);
}

@keyframes icon-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    font-size: var(--btn-font-size, 1em);
    padding-top: var(--btn-padding-y, 0.5em);
    padding-bottom: var(--btn-padding-y, 0.5em);
    padding-left: var(--btn-padding-x, 0.75em);
    padding-right: var(--btn-padding-x, 0.75em);
    border-radius: var(--btn-radius, 0.25em);
}

:root {
    --z-index-header: 3;
    --z-index-popover: 5;
    --z-index-fixed-element: 10;
    --z-index-overlay: 15;
}

:root {
    --display: block;
}

[class^=aspect-ratio], [class*=" aspect-ratio"] {
    --aspect-ratio: calc(16/9);
    position: relative;
    height: 0;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
}

    [class^=aspect-ratio] > *, [class*=" aspect-ratio"] > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        [class^=aspect-ratio] > *:not(iframe), [class*=" aspect-ratio"] > *:not(iframe) {
            -o-object-fit: cover;
            object-fit: cover;
        }

.margin-right-xxxs {
    margin-right: var(--space-xxxs);
}

.padding-md {
    padding: var(--space-md);
}

.padding-top-xxl {
    padding-top: var(--space-xxl);
}

.text-xs {
    font-size: var(--text-xs, 0.6875rem);
}

.text-sm {
    font-size: var(--text-sm, 0.75rem);
}

.text-md {
    font-size: var(--text-md, 1.125rem);
}

.text-xxl {
    font-size: var(--text-xxl, 2rem);
}

.font-bold {
    font-weight: 700;
}

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

[class^=color-], [class*=" color-"] {
    --color-o: 1;
}

[class^=color-gradient], [class*=" color-gradient"] {
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
}

:root {
    --max-width-xxxxxs: 17.5rem;
    --max-width-xxxxs: 20rem;
    --max-width-xxxs: 26rem;
    --max-width-xxs: 32rem;
    --max-width-xs: 38rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --max-width-xxl: 100rem;
    --max-width-xxxl: 120rem;
    --max-width-xxxxl: 150rem;
}

.max-width-sm {
    max-width: var(--max-width-sm);
}

[class^=max-width-adaptive], [class*=" max-width-adaptive"] {
    max-width: 32rem;
}

:where(.inner-glow, .inner-glow-top)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

[class^=border-], [class*=" border-"] {
    --border-o: 1;
}

.border {
    border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
}

.border-contrast-low {
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1));
}

.border-opacity-20\% {
    --border-o: 0.2;
}

.radius-sm {
    border-radius: var(--radius-sm);
}

.bg, [class^=bg-], [class*=" bg-"] {
    --bg-o: 1;
}

.bg {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o));
}

.bg-contrast-lower {
    background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1));
}

.bg-opacity-20\% {
    --bg-o: 0.2;
}

[class^=flip], [class*=" flip"],
[class^=-rotate], [class*=" -rotate"],
[class^=rotate], [class*=" rotate"],
[class^=-translate], [class*=" -translate"],
[class^=translate], [class*=" translate"],
[class^=-scale], [class*=" -scale"],
[class^=scale], [class*=" scale"],
[class^=-skew], [class*=" -skew"] [class^=skew],
[class*=" skew"] {
    --translate: 0;
    --rotate: 0;
    --skew: 0;
    --scale: 1;
    -webkit-transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
    transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

.visible {
    visibility: visible;
}

@media (min-width: 48rem) {
    .padding-x-xxl\@sm {
        padding-left: var(--space-xxl);
        padding-right: var(--space-xxl);
    }
}

:root {
    --color-primary-darker: hsl(205, 62%, 43%);
    --color-primary-darker-h: 205;
    --color-primary-darker-s: 62%;
    --color-primary-darker-l: 43%;
    --color-primary-dark: hsl(205, 61%, 47%);
    --color-primary-dark-h: 205;
    --color-primary-dark-s: 61%;
    --color-primary-dark-l: 47%;
    --color-primary: hsl(205, 57%, 55%);
    --color-primary-h: 205;
    --color-primary-s: 57%;
    --color-primary-l: 55%;
    --color-primary-light: hsl(205, 57%, 64%);
    --color-primary-light-h: 205;
    --color-primary-light-s: 57%;
    --color-primary-light-l: 64%;
    --color-primary-lighter: hsl(205, 59%, 74%);
    --color-primary-lighter-h: 205;
    --color-primary-lighter-s: 59%;
    --color-primary-lighter-l: 74%;
    --color-accent-darker: hsl(29, 100%, 44%);
    --color-accent-darker-h: 29;
    --color-accent-darker-s: 100%;
    --color-accent-darker-l: 44%;
    --color-accent-dark: hsl(29, 100%, 50%);
    --color-accent-dark-h: 29;
    --color-accent-dark-s: 100%;
    --color-accent-dark-l: 50%;
    --color-accent: hsl(29, 100%, 58%);
    --color-accent-h: 29;
    --color-accent-s: 100%;
    --color-accent-l: 58%;
    --color-accent-light: hsl(29, 100%, 68%);
    --color-accent-light-h: 29;
    --color-accent-light-s: 100%;
    --color-accent-light-l: 68%;
    --color-accent-lighter: hsl(29, 100%, 78%);
    --color-accent-lighter-h: 29;
    --color-accent-lighter-s: 100%;
    --color-accent-lighter-l: 78%;
    --color-black: hsl(210, 6%, 13%);
    --color-black-h: 210;
    --color-black-s: 6%;
    --color-black-l: 13%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-warning-darker: hsl(44, 95%, 51%);
    --color-warning-darker-h: 44;
    --color-warning-darker-s: 95%;
    --color-warning-darker-l: 51%;
    --color-warning-dark: hsl(44, 95%, 57%);
    --color-warning-dark-h: 44;
    --color-warning-dark-s: 95%;
    --color-warning-dark-l: 57%;
    --color-warning: hsl(44, 95%, 63%);
    --color-warning-h: 44;
    --color-warning-s: 95%;
    --color-warning-l: 63%;
    --color-warning-light: hsl(44, 95%, 69%);
    --color-warning-light-h: 44;
    --color-warning-light-s: 95%;
    --color-warning-light-l: 69%;
    --color-warning-lighter: hsl(44, 95%, 75%);
    --color-warning-lighter-h: 44;
    --color-warning-lighter-s: 95%;
    --color-warning-lighter-l: 75%;
    --color-success-darker: hsl(128, 53%, 32%);
    --color-success-darker-h: 128;
    --color-success-darker-s: 53%;
    --color-success-darker-l: 32%;
    --color-success-dark: hsl(128, 53%, 38%);
    --color-success-dark-h: 128;
    --color-success-dark-s: 53%;
    --color-success-dark-l: 38%;
    --color-success: hsl(128, 53%, 44%);
    --color-success-h: 128;
    --color-success-s: 53%;
    --color-success-l: 44%;
    --color-success-light: hsl(128, 53%, 50%);
    --color-success-light-h: 128;
    --color-success-light-s: 53%;
    --color-success-light-l: 50%;
    --color-success-lighter: hsl(128, 53%, 56%);
    --color-success-lighter-h: 128;
    --color-success-lighter-s: 53%;
    --color-success-lighter-l: 56%;
    --color-error-darker: hsl(9, 79%, 42%);
    --color-error-darker-h: 9;
    --color-error-darker-s: 79%;
    --color-error-darker-l: 42%;
    --color-error-dark: hsl(9, 79%, 48%);
    --color-error-dark-h: 9;
    --color-error-dark-s: 79%;
    --color-error-dark-l: 48%;
    --color-error: hsl(9, 79%, 54%);
    --color-error-h: 9;
    --color-error-s: 79%;
    --color-error-l: 54%;
    --color-error-light: hsl(9, 79%, 60%);
    --color-error-light-h: 9;
    --color-error-light-s: 79%;
    --color-error-light-l: 60%;
    --color-error-lighter: hsl(9, 79%, 66%);
    --color-error-lighter-h: 9;
    --color-error-lighter-s: 79%;
    --color-error-lighter-l: 66%;
    --color-bg-darker: hsl(228, 14%, 93%);
    --color-bg-darker-h: 228;
    --color-bg-darker-s: 14%;
    --color-bg-darker-l: 93%;
    --color-bg-dark: hsl(220, 23%, 97%);
    --color-bg-dark-h: 220;
    --color-bg-dark-s: 23%;
    --color-bg-dark-l: 97%;
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 100%;
    --color-bg-light: hsl(0, 0%, 100%);
    --color-bg-light-h: 0;
    --color-bg-light-s: 0%;
    --color-bg-light-l: 100%;
    --color-bg-lighter: hsl(0, 0%, 100%);
    --color-bg-lighter-h: 0;
    --color-bg-lighter-s: 0%;
    --color-bg-lighter-l: 100%;
    --color-contrast-lower: hsl(223, 9%, 85%);
    --color-contrast-lower-h: 223;
    --color-contrast-lower-s: 9%;
    --color-contrast-lower-l: 85%;
    --color-contrast-low: hsl(220, 5%, 61%);
    --color-contrast-low-h: 220;
    --color-contrast-low-s: 5%;
    --color-contrast-low-l: 61%;
    --color-contrast-medium: hsl(223, 4%, 37%);
    --color-contrast-medium-h: 223;
    --color-contrast-medium-s: 4%;
    --color-contrast-medium-l: 37%;
    --color-contrast-high: hsl(220, 5%, 25%);
    --color-contrast-high-h: 220;
    --color-contrast-high-s: 5%;
    --color-contrast-high-l: 25%;
    --color-contrast-higher: hsl(230, 13%, 9%);
    --color-contrast-higher-h: 230;
    --color-contrast-higher-s: 13%;
    --color-contrast-higher-l: 9%;
}

:root {
    --space-unit: 1rem;
}

:root,
* {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.5 * var(--space-unit));
    --space-xs: calc(0.75 * var(--space-unit));
    --space-sm: calc(1 * var(--space-unit));
    --space-md: calc(1.5 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(2.5 * var(--space-unit));
    --space-xxl: calc(4 * var(--space-unit));
    --space-xxxl: calc(5 * var(--space-unit));
    --space-xxxxl: calc(6 * var(--space-unit));
    --component-padding: var(--space-md);
}

:root {
    --radius: 0.375em;
}

:root {
    --font-primary: Inter, system-ui, sans-serif;
    --text-base-size: 1rem;
    --text-scale-ratio: 1.2;
    --body-line-height: 1.4;
    --heading-line-height: 1.2;
    --font-primary-capital-letter: 1;
    --text-unit: var(--text-base-size);
}

:root,
* {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-xxl: 1.5rem;
    --text-xxxl: 1.875rem;
    --text-xxxxl: 2.25rem;
}

@media (min-width: 64rem) {
    :root {
        --text-base-size: 1.25rem;
        --text-scale-ratio: 1.25;
    }
}

body {
    font-family: var(--font-primary);
}

h1 {
    font-family: var(--font-primary);
    --heading-font-weight: 600;
}

.text-component {
    --line-height-multiplier: 1;
    --text-space-y-multiplier: 1;
}

    .text-component > * {
        --text-unit: 1em;
        --space-unit: 1em;
    }

:root {
    --btn-font-size: inherit;
    --btn-padding-x: var(--space-sm);
    --btn-padding-y: var(--space-xxs);
    --btn-radius: var(--radius-sm);
}

.btn {
    background: var(--color-bg-dark);
    color: var(--color-contrast-higher);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
}

    .btn:focus {
        box-shadow: 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);
        outline: none;
    }

    .btn:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 3px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 2px 6px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25);
}

    .btn--primary:hover {
        background: var(--color-primary-light);
        box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25);
    }

    .btn--primary:focus {
        box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-primary);
    }

.btn--link {
    background: transparent;
    color: var(--color-contrast-high);
}

:root {
    --form-control-font-size: 1em;
    --form-control-padding-x: var(--space-xs);
    --form-control-padding-y: var(--space-xxs);
    --form-control-radius: var(--radius-md);
}
/* -------------------------------- 

File#: _1_dialog
Title: Dialog
Descr: Overlay informing user about tasks/decisions
Usage: codyhouse.co/license

-------------------------------- */
.dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-index-overlay, 15);
    opacity: 0;
    visibility: hidden;
}

.dialog__content {
    width: calc(100% - 2 * var(--space-md));
    overflow: auto;
    padding: var(--space-md);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-lg);
    border-radius: var(--radius-md);
}

.dialog--is-visible {
    opacity: 1;
    visibility: visible;
}

.dialog--sticky {
    align-items: flex-start;
}

    .dialog--sticky .dialog__content {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.dialog[data-animation=on] {
    transition: opacity 0.3s, visibility 0s 0.3s;
    -webkit-perspective: 800px;
    perspective: 800px;
}

    .dialog[data-animation=on] .dialog__content {
        will-change: transform;
        transition: -webkit-transform 0.3s var(--ease-out);
        transition: transform 0.3s var(--ease-out);
        transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }

    .dialog[data-animation=on].dialog--is-visible {
        transition: opacity 0.3s;
    }

        .dialog[data-animation=on].dialog--is-visible .dialog__content {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

    .dialog[data-animation=on].dialog--sticky .dialog__content {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .dialog[data-animation=on].dialog--sticky.dialog--is-visible {
        transition: none;
    }

        .dialog[data-animation=on].dialog--sticky.dialog--is-visible .dialog__content {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }