body{
    margin:0;
    background:#110d07;
    color:#f9fafb;
    font-family:"Google Sans Flex", sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100dvh;
}

body.auth-page{
    position:relative;
    overflow-x:hidden;
}

.auth-video-shell{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:#110d07;
}

.auth-video-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.04);
}

.auth-video-overlay{
    position:absolute;
    inset:0;
    background: rgba(19,10,5, 0.7);
}

.login-wrap,
.wrap{
    text-align:center;
    position:relative;
    z-index:1;
    width:100%;
    max-width:100%;
    padding:0 16px;
    box-sizing:border-box;
}

.sr-only-decoy,
input.sr-only-decoy,
input[type=text].sr-only-decoy,
input[type=password].sr-only-decoy{
    position:absolute !important;
    width:1px !important;
    min-width:1px !important;
    max-width:1px !important;
    height:1px !important;
    min-height:1px !important;
    max-height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    border:0 !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    opacity:0 !important;
    pointer-events:none !important;
    appearance:none !important;
}

h1{
    text-indent:-9999px;
    background-image:url(/assets/logo.png);
    background-repeat:no-repeat;
    background-position:center top;
    width:200px;
    height:60px;
    background-size:contain;
    margin:0 auto 10px auto;
}

.subtitle{
    margin:0 0 20px 0;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

form{
    background:rgba(19,10,5, 0.74);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    padding:20px;
    border-radius:10px;
    border:1px solid rgba(13,8,3, 0.18);
    box-shadow:0 18px 50px rgba(0,0,0,.5);
    min-width:0;
    width:min(100%, 382px);
    max-width:382px;
    margin:0 auto;
    box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 50px;
}

#registerForm{
    padding-top:12px;
}

.vine {
    position: absolute;
    bottom: -50px;
    left: -7px;
    right: -7px;
    background-image: url('/assets/vine.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    height: 100px;
    z-index: 10;
}

.vine-left {
    position: absolute;
    bottom: -2px;
    left: -20px;
    background-image: url('/assets/vine-left.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    height: 180px;
    width: 45px;
    z-index: 9;
}

.auth-growth-form{
    isolation:isolate;
}

.auth-growth-form > *:not(.auth-growth-vines):not(.vine):not(.vine-left){
    position:relative;
    z-index:1;
}

.auth-growth-form .vine,
.auth-growth-form .vine-left{
    display:none;
}

.auth-growth-vines{
    --growth-top-pad:18px;
    --growth-right-pad:22px;
    --growth-bottom-pad:60px;
    --growth-left-pad:40px;
    position:absolute;
    top: calc(-0.75 * var(--growth-top-pad));
    right: calc(-1 * var(--growth-right-pad));
    bottom: calc(-1 * var(--growth-bottom-pad));
    left: calc(-1.15 * var(--growth-left-pad));
    z-index:2;
    pointer-events:none;
    overflow:visible;
}

.auth-growth-vines__canvas{
    display:block;
    width:100%;
    height:100%;
}

.auth-caterpillar{
    position:absolute;
    width:42px;
    height:20px;
    z-index:3;
    pointer-events:none;
    transform-origin:center;
    opacity:0;
    transition:opacity .18s ease;
}

.auth-caterpillar.is-ready{
    opacity:1;
}

.auth-caterpillar__segment{
    position:absolute;
    top:50%;
    width:12px;
    height:12px;
    border-radius:999px;
    background:radial-gradient(circle at 35% 35%, #b5d45b 0 26%, #87a438 58%, #648320 100%);
    border:1px solid rgba(70, 99, 21, 0.55);
    box-shadow:0 1px 3px rgba(0,0,0,.22);
    transform:translateY(-50%);
    transform-origin:center;
    will-change:transform;
    animation-duration:2.6s;
    animation-timing-function:cubic-bezier(.5, .08, .36, 1);
    animation-iteration-count:infinite;
}

.auth-caterpillar__segment:nth-child(1){ left:0; top:58%; animation-name:authCaterpillarRearStep; animation-delay:-1.02s; }
.auth-caterpillar__segment:nth-child(2){ left:8px; top:48%; animation-name:authCaterpillarMidStepA; animation-delay:-.68s; }
.auth-caterpillar__segment:nth-child(3){ left:18px; top:56%; animation-name:authCaterpillarMidStepB; animation-delay:-.34s; }
.auth-caterpillar__segment:nth-child(4){ left:28px; top:46%; animation-name:authCaterpillarHeadStep; animation-delay:0s; }

.auth-caterpillar__segment--tail{
    width:10px;
    height:10px;
}

.auth-caterpillar__segment--head{
    position:absolute;
    width:13px;
    height:13px;
    background:radial-gradient(circle at 38% 35%, #c0df62 0 24%, #93b73d 60%, #6b8e22 100%);
    overflow:visible;
    animation-duration:3.1s;
}

.auth-caterpillar__eye{
    position:absolute;
    top:3px;
    width:2px;
    height:2px;
    border-radius:50%;
    background:#2a2a2a;
    z-index:1;
}

.auth-caterpillar__eye--left{ left:6px; }
.auth-caterpillar__eye--right{ left:9px; }

.auth-caterpillar__antenna{
    position:absolute;
    top:-5px;
    width:8px;
    height:8px;
    border-top:1.4px solid #6d3e1f;
    border-right:1.4px solid #6d3e1f;
    border-radius:0 100% 0 0;
    transform-origin:bottom center;
    animation:authCaterpillarAntenna 1.25s ease-in-out infinite alternate;
}

.auth-caterpillar__antenna--left{
    left:3px;
    transform:rotate(-38deg);
}

.auth-caterpillar__antenna--right{
    left:7px;
    transform:scaleX(-1) rotate(-38deg);
}

@keyframes authCaterpillarStep{
    0%{ transform:translateY(-50%) scaleY(.92) scaleX(1.02); }
    25%{ transform:translateY(-62%) scaleY(1.04) scaleX(.98); }
    50%{ transform:translateY(-50%) scaleY(.94) scaleX(1.01); }
    75%{ transform:translateY(-38%) scaleY(1.06) scaleX(.97); }
    100%{ transform:translateY(-50%) scaleY(.92) scaleX(1.02); }
}

@keyframes authCaterpillarRearStep{
    0%{ transform:translateY(-50%) translateX(0) scaleX(1.08) scaleY(.9); }
    22%{ transform:translateY(-44%) translateX(1px) scaleX(.94) scaleY(1.04); }
    48%{ transform:translateY(-58%) translateX(3px) scaleX(.82) scaleY(1.16); }
    74%{ transform:translateY(-46%) translateX(1px) scaleX(.98) scaleY(.98); }
    100%{ transform:translateY(-50%) translateX(0) scaleX(1.08) scaleY(.9); }
}

@keyframes authCaterpillarMidStepA{
    0%{ transform:translateY(-50%) translateX(0) scaleX(.92) scaleY(1.06); }
    18%{ transform:translateY(-60%) translateX(2px) scaleX(.84) scaleY(1.18); }
    46%{ transform:translateY(-48%) translateX(4px) scaleX(1.12) scaleY(.88); }
    72%{ transform:translateY(-40%) translateX(2px) scaleX(.96) scaleY(1.02); }
    100%{ transform:translateY(-50%) translateX(0) scaleX(.92) scaleY(1.06); }
}

@keyframes authCaterpillarMidStepB{
    0%{ transform:translateY(-50%) translateX(0) scaleX(1.04) scaleY(.94); }
    24%{ transform:translateY(-42%) translateX(1px) scaleX(1.12) scaleY(.88); }
    52%{ transform:translateY(-60%) translateX(3px) scaleX(.86) scaleY(1.16); }
    78%{ transform:translateY(-48%) translateX(1px) scaleX(1) scaleY(.98); }
    100%{ transform:translateY(-50%) translateX(0) scaleX(1.04) scaleY(.94); }
}

@keyframes authCaterpillarHeadStep{
    0%{ transform:translateY(-50%) translateX(0) scaleX(1.02) scaleY(.96); }
    20%{ transform:translateY(-60%) translateX(-1px) scaleX(1.08) scaleY(.92); }
    48%{ transform:translateY(-44%) translateX(2px) scaleX(.92) scaleY(1.08); }
    74%{ transform:translateY(-54%) translateX(1px) scaleX(1.04) scaleY(.96); }
    100%{ transform:translateY(-50%) translateX(0) scaleX(1.02) scaleY(.96); }
}

@keyframes authCaterpillarAntenna{
    from{ margin-top:0; }
    to{ margin-top:3px; }
}

@media (prefers-reduced-motion:reduce){
    .auth-caterpillar{
        display:none;
    }
}

label{
    display:block;
    text-align:left;
    margin-bottom: 6px;
    color: #f0e0c0;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

input[type=password],
input[type=text],
input[type=email],
select{
    width:100%;
    border: 1px solid #ececf2;
    margin-bottom: 10px;
    font-size: 13px;
    padding: 8px 8px;
    background: #ececf2;
    color: #110d07;
    box-sizing: border-box;
    border-radius: 2px;
    font-weight: 300;
    font-style: normal;
}

.password-field-wrap{
    position:relative;
    margin-bottom:10px;
}

.username-field-wrap{
    position:relative;
    display:block;
    margin-bottom:10px;
}

.username-prefix{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    color:#4b5563;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

.username-field-wrap input[type=text]{
    margin-bottom:0;
    padding-left:77px;
}

.username-field-wrap:focus-within input[type=text]{
    outline:none;
    box-shadow:none;
}

.password-field-wrap input[type=password],
.password-field-wrap input[type=text]{
    margin-bottom:0;
    padding-right:42px;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
}

.password-toggle:hover{
    background:transparent;
}

.password-toggle-icon{
    display:block;
    width:24px;
    height:24px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:18px 18px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.password-toggle.is-visible .password-toggle-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.7a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M9.9 5.2A11.3 11.3 0 0 1 12 5c6.5 0 10 7 10 7a16.8 16.8 0 0 1-3.1 3.8'/%3E%3Cpath d='M6.7 6.8C3.8 8.6 2 12 2 12s3.5 6 10 6c1.5 0 2.8-.3 4-.8'/%3E%3C/svg%3E");
}

.password-toggle:focus-visible{
    outline:1px solid #4b5563;
    border-radius:4px;
}

input[type=password]:focus,
input[type=text]:focus,
select:focus,
input[type=password]:focus-visible,
input[type=text]:focus-visible,
select:focus-visible{
    outline:none;
    border-color:#4b5563;
    box-shadow:none;
}

.field-invalid{
    border-color:#b91c1c !important;
}

input[type=password]::placeholder,
input[type=text]::placeholder{
    color:#6b7280;
}

.field-rule-message{
    display:none;
    margin:-4px 0 10px 0;
    color:#d22020;
    font-size:12px;
    line-height:1.4;
    text-align:left;
    max-width: 300px;
    box-sizing: border-box;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-text-fill-color:#111827 !important;
    -webkit-box-shadow:0 0 0 1000px #fdfdfd inset !important;
    box-shadow:0 0 0 1000px #fdfdfd inset !important;
    transition:background-color 9999s ease-in-out 0s;
    caret-color:#111827;
}

button{
    background: #7a4a20;
    color: #f0e0c0;
    border: 2px solid #c47830;
    border-radius: 10px;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 11px;
    font-weight: 400;
    font-family: inherit;
    text-transform: uppercase;
    margin-top: 15px;
    width:100%;
    transition: all .5s ease;
}

button:hover{
    background:#55350d;
}

.error{
    color:#d22020;
    margin-bottom:1rem;
    font-size:.9rem;
    text-align:left;
}

.form-error-summary{
    display:none;
    margin:0 0 1rem 0;
    color: #fff;
    font-size: 12px;
    text-align: left;
    padding-left: 0px;
    list-style: none;
}

.form-error-summary ul{
    margin:0;
    list-style: none;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    background-color: #d22020;
}

.msg{
    color:#c47830;
    margin-bottom:1rem;
    font-size:.9rem;
    text-align:left;
}

.meta{
    margin-top:12px;
    font-size:13px;
    color:#c47830;
}

.meta a{
    color:#e98811;
    text-decoration:none;
}

.meta a:hover{
    text-decoration:underline;
}

.auth-note{
    margin:0 0 14px 0;
    text-align:left;
    line-height:1.5;
}

.auth-secondary-form{
    margin-top:14px;
}

.auth-secondary-form button{
    margin-top:0;
}

.captcha-wrap,
.recaptcha-wrap{
    margin-top:10px;
    display:flex;
    justify-content:center;
}

.captcha-block{
    margin-top:10px;
}

.captcha-label{
    display:block;
    max-height:24px;
    margin-bottom:6px;
    overflow:hidden;
    transition:opacity .28s ease, max-height .28s ease, margin .28s ease;
}

.captcha-block--turnstile .captcha-wrap{
    max-height:90px;
    overflow:hidden;
    transition:opacity .28s ease, max-height .32s ease, margin .32s ease, transform .32s ease;
    transform-origin:top center;
}

.captcha-block--turnstile.turnstile-is-hidden .captcha-label,
.captcha-block--turnstile.turnstile-is-hidden .captcha-wrap{
    opacity:0;
    max-height:0;
    margin:0;
    transform:translateY(-6px) scaleY(0.96);
    pointer-events:none;
}

.captcha-block--turnstile.turnstile-is-solved .captcha-label,
.captcha-block--turnstile.turnstile-is-solved .captcha-wrap{
    opacity:0;
    max-height:0;
    margin:0;
    transform:translateY(-6px) scaleY(0.96);
    pointer-events:none;
}

.otp-field-wrap{
    margin-bottom:1rem;
}

.otp-inputs{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
    margin-bottom:.25rem;
}

.otp-digit{
    width:100%;
    height:44px;
    margin-bottom:0 !important;
    padding:0 !important;
    text-align:center;
    font-size:1.4rem !important;
    background: #302318 !important;
    color: #f0e0c0 !important;
    border: 1px solid #c47830 !important;
    border-radius:6px;
}

.otp-digit:focus,
.otp-digit:focus-visible{
    outline:none;
    border-color:#f0e0c0 !important;
    box-shadow:none !important;
}

form.otp-invalid .otp-inputs{
    animation:otpShake .22s ease-in-out 0s 1;
}

form.otp-invalid .otp-digit{
    border-color:#b91c1c !important;
}

@keyframes otpShake{
    0%{ transform:translateX(0); }
    20%{ transform:translateX(-3px); }
    40%{ transform:translateX(3px); }
    60%{ transform:translateX(-2px); }
    80%{ transform:translateX(2px); }
    100%{ transform:translateX(0); }
}

@media (max-width:480px){
    .auth-growth-vines{
        --growth-top-pad:12px;
        --growth-right-pad:12px;
        --growth-bottom-pad:42px;
        --growth-left-pad:46px;
    }

    form{
        background:transparent;
        border:none;
        width:100%;
        max-width:340px;
        padding: 20px;
        padding-bottom: 50px;
    }

    .subtitle{
        margin:0 0 40px 0;
    }
}

@media (prefers-reduced-motion:reduce){
}