/* Open composition: the store animation is the backdrop for the whole portal. */
.logo-stage .orbit,.logo-bracket{display:none}
.logo-stage{height:480px;margin:-10px -110px 0}
.logo-stage img{width:700px;max-width:125%;animation:logo-drift 10s cubic-bezier(.45,0,.55,1) infinite}
.console{background:transparent;border-color:transparent;box-shadow:none;overflow:visible;border-radius:0}
.console-top{border:0;padding-bottom:24px}
.console-top:after{height:1px;opacity:.75}
.steps{border-top-color:#b4f0e41c;border-bottom-color:#b4f0e425}
.console-bottom{border-top-color:#b4f0e41c}
.panel{background:transparent;animation:content-arrive .7s cubic-bezier(.16,1,.3,1) both}
.panel>h2,.panel>.intro,.identity h1,.identity>p{text-shadow:0 2px 20px #000,0 1px 3px #000}
.notice-box{background:transparent;border:0;border-left:2px solid #58f6d36b;border-radius:0;padding:4px 0 4px 20px}
.notice-box p{color:#c5cbcc;text-shadow:0 1px 5px #000}
.notice-box .rule{background:#b4f0e427}
.warning-icon{border:0;background:transparent;width:32px;height:32px;border-radius:0;position:relative;animation:notice-nod 7s ease-in-out infinite}
.warning-icon:after{content:'';position:absolute;inset:0;border:1px solid #b4f0e459;transform:rotate(45deg)}
.accept{color:#c4cacb;text-shadow:0 1px 5px #000}
.field input,.field textarea{background:#0a0b0c42;border-color:#b4f0e438;backdrop-filter:blur(8px)}
.field input:focus,.field textarea:focus{background:#0a0b0c73;box-shadow:none}
.custom-head{background:transparent}
.integration-note{background:#0a0b0c38;backdrop-filter:blur(6px)}
.primary{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s}
.primary:disabled{background:#2a2b2c66;color:#b4f0e4;border-color:#b4f0e438;backdrop-filter:blur(6px)}
.primary:enabled:hover{transform:translateY(-4px)}
.panel:not([hidden])>.eyebrow{animation:item-arrive .65s .04s both}
.panel:not([hidden])>h2{animation:item-arrive .7s .09s both}
.panel:not([hidden])>.intro{animation:item-arrive .7s .15s both}
.panel:not([hidden])>.notice-box,.panel:not([hidden])>.field,.panel:not([hidden])>dl{animation:item-arrive .7s .21s both}
.panel:not([hidden])>.accept,.panel:not([hidden])>.custom-head{animation:item-arrive .7s .28s both}
.panel:not([hidden])>.primary{animation:item-arrive .7s .34s both}
#custom-fields:not([hidden]){animation:custom-unfold .5s cubic-bezier(.16,1,.3,1) both;transform-origin:top}
.steps .active b{animation:step-settle .65s cubic-bezier(.16,1,.3,1) both}
.identity>.eyebrow{animation:item-arrive .8s .1s both}
.identity h1{animation:item-arrive .9s .2s both}
.identity>p{animation:item-arrive .9s .3s both}
@keyframes logo-drift{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}35%{transform:translate(8px,-22px) rotate(1deg) scale(1.045)}70%{transform:translate(-6px,-8px) rotate(-1deg) scale(1.015)}}
@keyframes content-arrive{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes item-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes custom-unfold{from{opacity:0;transform:translateY(-12px) scaleY(.95)}to{opacity:1;transform:none}}
@keyframes step-settle{from{transform:scale(.7) rotate(-25deg)}to{transform:scale(1) rotate(-8deg)}}
@keyframes notice-nod{0%,65%,100%{transform:translateY(0)}75%{transform:translateY(-5px)}85%{transform:translateY(2px)}}
@media(max-width:980px){.logo-stage{height:380px;margin:0 -60px}.logo-stage img{width:540px;max-width:125%}}
@media(max-width:720px){.logo-stage{height:310px;margin:-5px -20px}.logo-stage img{width:440px;max-width:115%}.console-top{padding-left:10px;padding-right:10px}.steps{margin-left:10px;margin-right:10px}.panel{padding-left:10px;padding-right:10px}.console-bottom{padding-left:10px;padding-right:10px}.notice-box{padding-left:16px}.identity h1{font-size:39px}.console{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}