.main[data-style-1] {
    display: flex;
    height: 85svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    
}

video{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100; 
    -webkit-filter: grayscale(20%);
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(2rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.main[data-style-1] .fade-in[data-style-1] {
    animation: fade-up var(--tw-animate-duration, 1s) var(--tw-animate-easing, ease) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, 1) var(--tw-animate-fill, both);
    --tw-animate-duration: .8s;
    animation-duration: var(--tw-animate-duration);
    --tw-animate-easing: cubic-bezier(.4, 0, .2, 1);
    animation-timing-function: var(--tw-animate-easing)
}

.main[data-style-1] .subhero[data-style-1] {
    font-family: DingTalkJBT;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 900;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
    --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.hero[data-style-1] {
    margin-top: -100;
}

.main[data-style-1] .hero[data-style-1] {
    font-family: DingTalkJBT;
    margin-top: 5rem;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.5;
    --tw-text-opacity: 1;
    color: rgb(0 127 255 / var(--tw-text-opacity));
    --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / .03)) drop-shadow(0 8px 5px rgb(0 0 0 / .08));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.main[data-style-1] .buttons[data-style-1] {
    margin-top: 3rem;
    display: flex
}

.main[data-style-1] .buttons[data-style-1] .button[data-style-1] {
    margin-left: 1rem;
    margin-right: 1rem;
    display: block;
    width: 7rem;
    border-radius: .25rem;
    padding: .5rem;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: center;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.main[data-style-1] .buttons[data-style-1] .button[data-style-1]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

@media (prefers-color-scheme: dark) {
    .main[data-style-1] .buttons[data-style-1] .button[data-style-1] {
        --tw-bg-opacity: 1;
        background-color: rgb(38 38 38 / var(--tw-bg-opacity))
    }

    .main[data-style-1] .buttons[data-style-1] .button[data-style-1]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(10 10 10 / var(--tw-bg-opacity))
    }
}

.main[data-style-1] .buttons[data-style-1] .button[data-style-1]:hover {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.main[data-style-1] .buttons[data-style-1] .button[data-style-1]:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    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))
}

.main[data-style-1] .buttons[data-style-1] .button__disabled[] {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}

@media (prefers-color-scheme: dark) {

    .main[data-style-1] .buttons[data-style-1] .button__disabled[],
    .main[data-style-1] .buttons[data-style-1] .button__disabled[data-style-1]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(64 64 64 / var(--tw-bg-opacity))
    }
}

.main[data-style-1] .buttons[data-style-1] .button__disabled[data-style-1]:active {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    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))
}

.main[data-style-1] .buttons[data-style-1] .button__disabled[data-style-1] {
    cursor: not-allowed;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.footer[data-style-1] {
    position: fixed;
    bottom: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}

.footer[data-style-1] .link[data-style-1] {
    text-decoration-line: none
}

.footer[data-style-1] .link[data-style-1]:hover {
    text-decoration-line: underline
}