:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.4,0,.2,1)}
body{overflow-x:hidden}
header{transition:border-color .35s var(--ease-soft),background-color .35s var(--ease-soft)}
nav a{position:relative;transition:color .25s var(--ease-soft)}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:#86F3FF;transition:right .35s var(--ease-out)}
nav a:hover::after{right:0}
.button,.account-button{transition:transform .35s var(--ease-out),background-color .25s var(--ease-soft),color .25s var(--ease-soft),box-shadow .35s var(--ease-out)}
.button:hover,.account-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px #86f3ff24}
.button:active,.account-button:active{transform:translateY(-1px) scale(.985)}
.hero-art{will-change:transform;transform:scale(1.025) translate3d(0,var(--hero-shift,0),0);transition:transform .12s linear}
.hero-content>*{opacity:0;transform:translateY(24px);animation:hero-in .9s var(--ease-out) forwards}
.hero-content>:nth-child(1){animation-delay:.08s}.hero-content>:nth-child(2){animation-delay:.16s}.hero-content>:nth-child(3){animation-delay:.25s}.hero-content>:nth-child(4){animation-delay:.34s}.hero-content>:nth-child(5){animation-delay:.43s}
.hero-bottom{opacity:0;animation:fade-in .8s .65s var(--ease-out) forwards}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.roles article{transition:transform .4s var(--ease-out),border-color .3s var(--ease-soft),background-color .3s var(--ease-soft)}
.roles article:hover{transform:translateY(-7px);border-color:#86f3ff70}
.roles article .role-icon{transition:transform .45s var(--ease-out)}
.roles article:hover .role-icon{transform:translate(4px,-4px)}
.steps article{transition:transform .35s var(--ease-out),border-color .3s var(--ease-soft)}
.steps article:hover{transform:translateY(-5px);border-color:#147282}
details{transition:border-color .3s var(--ease-soft)}
details:hover{border-color:#86f3ff75}
summary span{transition:transform .35s var(--ease-out)}
.closing>button span{transition:transform .45s var(--ease-out)}
.closing>button:hover span{transform:translate(7px,-7px)}
.auth-dialog{overflow-x:hidden;transform-origin:50% 40%;--slide:18px}
.auth-dialog[data-direction="back"]{--slide:-18px}
.auth-dialog.is-resizing{overflow:hidden}
.auth-dialog[open]{animation:dialog-in .55s var(--ease-out)}
.auth-dialog[open]::backdrop{animation:backdrop-in .45s ease-out}
.auth-dialog.is-closing{animation:dialog-out .28s var(--ease-soft) forwards;pointer-events:none}
.auth-dialog.is-closing::backdrop{animation:backdrop-out .28s ease-in forwards}
.auth-form:not(.hidden)>*,.account-view:not(.hidden)>*{animation:field-in .5s var(--ease-out) backwards}
.auth-form:not(.hidden)>:nth-child(2),.account-view:not(.hidden)>:nth-child(2){animation-delay:.04s}
.auth-form:not(.hidden)>:nth-child(3),.account-view:not(.hidden)>:nth-child(3){animation-delay:.08s}
.auth-form:not(.hidden)>:nth-child(4),.account-view:not(.hidden)>:nth-child(4){animation-delay:.12s}
.auth-form:not(.hidden)>:nth-child(5){animation-delay:.16s}
.auth-form:not(.hidden)>:nth-child(6){animation-delay:.2s}
.auth-form:not(.hidden)>:nth-child(7){animation-delay:.24s}
.auth-step:not(.hidden)>*,.auth-login:not(.hidden)>.login-meta{animation:field-in .5s var(--ease-out) backwards}
.auth-step:not(.hidden)>:nth-child(2){animation-delay:.05s}
.auth-step:not(.hidden)>:nth-child(3){animation-delay:.1s}
.auth-step:not(.hidden)>:nth-child(4){animation-delay:.15s}
.auth-step:not(.hidden)>:nth-child(5){animation-delay:.2s}
.auth-step:not(.hidden)>:nth-child(6){animation-delay:.25s}
.auth-message:not(:empty){animation:message-in .35s var(--ease-out)}
.auth-tabs{position:relative}
.auth-tabs::after{content:"";position:absolute;left:0;bottom:0;width:50%;height:3px;background:#86F3FF;transition:transform .45s var(--ease-out)}
.auth-tabs.register-active::after{transform:translateX(100%)}
.auth-tabs button.active{box-shadow:none}
.auth-tabs button{transition:color .3s var(--ease-soft),background-color .35s var(--ease-soft)}
.auth-tabs button:not(.active):hover{color:#d3dcd8;background:#141a19}
.auth-form input:not([type="checkbox"]){transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background-color .25s var(--ease-soft),transform .25s var(--ease-out)}
.auth-form input:not([type="checkbox"]):hover{background:#101615;border-color:#52635e}
.auth-form input:not([type="checkbox"]):focus{transform:translateY(-1px)}
.auth-close{transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft),transform .35s var(--ease-out)}
.auth-close:hover{transform:rotate(90deg)}
@keyframes hero-in{to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{to{opacity:1}}
@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dialog-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.975)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes field-in{from{opacity:0;transform:translateX(var(--slide))}to{opacity:1;transform:translateX(0)}}
@keyframes message-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.hero-art{transform:scale(1.01)}.roles article:hover,.steps article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-content>*,.hero-bottom{opacity:1;transform:none;animation:none}.reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}.hero-art{transform:none!important;transition:none}.auth-dialog[open],.auth-dialog[open]::backdrop,.auth-dialog.is-closing,.auth-dialog.is-closing::backdrop,.auth-form:not(.hidden)>*,.account-view:not(.hidden)>*,.auth-step:not(.hidden)>*,.auth-login:not(.hidden)>.login-meta,.auth-message:not(:empty){animation:none}.auth-tabs::after{transition:none}}
.welcome-dialog[open]{animation:dialog-in .6s var(--ease-out)}.welcome-dialog[open]::backdrop{animation:backdrop-in .45s ease-out}.welcome-dialog.is-closing{animation:dialog-out .28s var(--ease-soft) forwards;pointer-events:none}.welcome-dialog.is-closing::backdrop{animation:backdrop-out .28s ease-in forwards}.welcome-dialog[open] .welcome-body>*{animation:field-in .55s var(--ease-out) backwards;--slide:18px}.welcome-dialog[open] .welcome-body>:nth-child(2){animation-delay:.08s}.welcome-dialog[open] .welcome-body>:nth-child(3){animation-delay:.16s}.welcome-dialog[open] .welcome-body>:nth-child(4){animation-delay:.24s}@media(prefers-reduced-motion:reduce){.welcome-dialog[open],.welcome-dialog[open]::backdrop,.welcome-dialog.is-closing,.welcome-dialog.is-closing::backdrop,.welcome-dialog[open] .welcome-body>*{animation:none}}