.robot-wall{aspect-ratio:16/9;position:relative;background:#e9e3da;border:1px solid #b7ab9c;border-radius:12px;overflow:hidden;isolation:isolate}.robot-wall:after{content:'';position:absolute;left:0;right:0;bottom:38px;height:3px;background:#b8aa98;z-index:-1}.wall-plates{position:absolute;left:9%;right:9%;top:13%;display:grid;grid-template-columns:repeat(4,1fr);gap:7%}.plate{aspect-ratio:4/5;background:#B0400D;color:white;box-shadow:5px 6px 0 #a8998438;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;transform:translateY(60px);border:4px solid #cc571b}.plate b{font-size:30px;line-height:1.2}.plate span{font-size:12px;font-weight:600;margin-top:7px}.plate.hung{animation:hang-plate .6s .9s steps(5,end) forwards}.pixel-robot{position:absolute;width:72px;height:108px;left:11%;bottom:41px;transition:left .65s steps(8,end);filter:drop-shadow(5px 5px 0 #9c8a7140)}.pixel-robot svg{animation:robot-reach 2.7s steps(6,end);width:100%;height:100%;overflow:visible;shape-rendering:crispEdges}.pixel-robot .arm{transform-origin:48px 52px;animation:robot-hang 2.7s steps(3,end)}.pixel-robot .leg-a{animation:robot-walk .25s steps(2,end) 3}.pixel-robot .leg-b{animation:robot-walk .25s .125s steps(2,end) 3}.robot-wall[data-position="1"] .pixel-robot{left:33%}.robot-wall[data-position="2"] .pixel-robot{left:55%}.robot-wall[data-position="3"] .pixel-robot{left:77%}.robot-wall.finished .pixel-robot svg{animation:none}.robot-wall.finished .pixel-robot .arm{animation:robot-wave 1s steps(2,end) 2}.robot-wall.finished .plate{opacity:1;transform:none}.pixel-robot .eye{fill:#B0400D}@keyframes hang-plate{0%{opacity:1;transform:translateY(60px) rotate(-6deg)}70%{opacity:1;transform:translateY(-3px) rotate(3deg)}100%{opacity:1;transform:none}}@keyframes robot-hang{0%,25%,100%{transform:rotate(0)}40%,75%{transform:rotate(-120deg)}}@keyframes robot-walk{50%{transform:translateY(-5px)}}@keyframes robot-reach{0%,25%,100%{transform:translateY(0)}40%,75%{transform:translateY(-70px)}}@keyframes robot-wave{50%{transform:rotate(-135deg)}}@media(max-width:650px){.pixel-robot{width:42px;height:63px;bottom:17px}.robot-wall:after{bottom:15px}.plate{border-width:2px}.plate b{font-size:18px}.plate span{font-size:8px;margin-top:3px}.wall-plates{top:9%}}@media(prefers-reduced-motion:reduce){.plate.hung{opacity:1;transform:none}}
/* Robot personality refinement. Plate outline stays exactly two CSS pixels. */
.plate{border:2px solid #000;box-shadow:5px 6px 0 #a8998450}
.pixel-robot{width:94px;height:141px;bottom:41px;transition:left .7s steps(10,end)}
.pixel-robot svg{animation:robot-lift 2.7s ease-in-out}
.pixel-robot .eye{animation:robot-blink 2.7s steps(1,end)}
.pixel-robot .arm{animation:robot-help 2.7s steps(5,end)}
.robot-wall.finished .pixel-robot svg{animation:robot-celebrate 1.4s ease-in-out}
.robot-wall.finished .pixel-robot .arm{animation:robot-wave .55s steps(3,end) 4}
.plate.hung{animation:hang-lively .85s .95s ease-out forwards}
@keyframes robot-lift{0%{transform:translateY(0) rotate(0)}10%{transform:translateY(-5px) rotate(-3deg)}20%{transform:translateY(0) rotate(3deg)}30%{transform:translateY(3px) scaleY(.96)}48%,65%{transform:translateY(-43px) rotate(-3deg)}78%{transform:translateY(0) scaleY(.95)}90%{transform:translateY(-3px)}100%{transform:none}}
@keyframes robot-help{0%,25%,100%{transform:rotate(0)}45%,65%{transform:rotate(-135deg)}75%{transform:rotate(-110deg)}85%{transform:rotate(-125deg)}}
@keyframes robot-blink{0%,44%,52%,100%{opacity:1}48%{opacity:0}}
@keyframes hang-lively{0%{opacity:1;transform:translateY(45px) rotate(-9deg)}60%{opacity:1;transform:translateY(-4px) rotate(5deg)}80%{opacity:1;transform:translateY(0) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes robot-celebrate{0%,100%{transform:none}20%{transform:translateY(3px) scaleY(.94)}42%{transform:translateY(-22px) rotate(-6deg)}62%{transform:translateY(0) rotate(4deg)}78%{transform:translateY(-9px) rotate(-3deg)}}
@media(max-width:650px){.pixel-robot{width:55px;height:82px;bottom:17px}.plate{border:2px solid #000}}
@media(prefers-reduced-motion:reduce){.plate.hung{opacity:1;transform:none}}
.plate{padding:5px;background:#242421;border:2px solid #000;box-shadow:5px 6px 0 #73645144}.plate svg{width:100%;height:100%;display:block}.art-pixel{opacity:0}.hung .art-pixel{animation:pixel-paint .01s calc(1.1s + var(--pixel-delay)) forwards}@keyframes pixel-paint{to{opacity:1}}.robot-wall.finished .art-pixel{opacity:1}@media(max-width:650px){.column-site .artgrid{gap:10px!important}.column-copy{margin-top:8px}.mock-paragraph{margin-bottom:6px}.mock-paragraph i{height:2px;margin-bottom:3px}.plate{padding:3px}}@media(prefers-reduced-motion:reduce){.writing-columns .mock-paragraph i{transform:scaleX(1)}.hung .art-pixel{opacity:1}}
#robot-guide{display:none}.robot-actions{min-height:160px}.robot-actions.ready #robot-guide{display:block;position:relative;width:94px;height:141px;flex:none;order:0}.robot-actions.ready #enter-studio{order:1;animation:entry-welcome 1.1s 1s ease-out 3}.robot-actions.ready #retry-build{order:2}.robot-actions.ready .time{order:3}.robot-actions.ready #robot-guide .pixel-robot{position:relative;left:0;bottom:auto;width:94px;height:141px;z-index:5;transition:none;filter:drop-shadow(4px 4px 0 #9c8a7130)}#robot-guide .pixel-robot svg{animation:none}#robot-guide .pixel-robot .arm{transform:rotate(-70deg);animation:robot-invite .9s 1.1s ease-in-out 4}#robot-guide .pixel-robot .eye{transform:translateX(2px);animation:none}#robot-guide .pixel-robot .leg-a,#robot-guide .pixel-robot .leg-b{animation:none}@keyframes robot-invite{0%,100%{transform:rotate(-70deg)}50%{transform:rotate(-105deg)}}@keyframes entry-welcome{0%,100%{box-shadow:0 0 0 0 #B0400D00}45%{box-shadow:0 0 0 7px #B0400D25}}@media(max-width:650px){.robot-actions.ready{gap:12px}.robot-actions.ready #enter-studio{padding:14px 18px}.robot-actions.ready #retry-build{margin-left:106px}.robot-actions.ready .time{display:none}}

@media(max-width:650px){.robot-actions.ready #robot-guide{width:55px;height:82px}.robot-actions.ready #robot-guide .pixel-robot{width:55px;height:82px}.robot-actions.ready #retry-build{margin-left:67px}}

.robot-actions.ready{align-items:flex-end}.robot-actions.ready #robot-guide{align-self:flex-end}.robot-actions.ready #enter-studio{align-self:flex-end}.robot-actions.ready #retry-build,.robot-actions.ready .time{align-self:flex-end}@media(max-width:650px){.robot-actions.ready #retry-build{margin-left:67px}}

#robot-guide .pixel-robot .arm{transform:rotate(-20deg);animation:robot-invite-low .9s 1.1s ease-in-out 4}@keyframes robot-invite-low{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-40deg)}}

#robot-guide .pixel-robot{transform-origin:center bottom}.robot-actions.ready #robot-guide.impact:after,.robot-actions.ready #robot-guide.impact:before{content:'';position:absolute;bottom:0;width:6px;height:6px;background:#a8957d;opacity:0;pointer-events:none;animation:landing-dust .38s .39s steps(4,end) forwards}.robot-actions.ready #robot-guide.impact:before{left:6px;--dust-x:-22px;box-shadow:-8px -2px 0 #c2b29e,3px -8px 0 #b5a18a}.robot-actions.ready #robot-guide.impact:after{right:6px;--dust-x:22px;box-shadow:8px -2px 0 #c2b29e,-3px -8px 0 #b5a18a}@keyframes landing-dust{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dust-x),-10px)}}

.robot-actions.ready #enter-studio{order:0}.robot-actions.ready #robot-guide{order:1}.robot-actions.ready #retry-build{order:2}.robot-actions.ready #robot-guide .pixel-robot svg{transform:scaleX(-1)}.robot-actions.ready{flex-wrap:wrap}.robot-actions.ready .time{display:none}@media(max-width:650px){.robot-actions.ready{gap:16px}.robot-actions.ready #retry-build{margin-left:0}}
/* Shared action position for all signup steps; preserve the approved typography. */
#signup-form,#building{grid-template-rows:560px auto}
.build-body{grid-template-rows:auto auto auto minmax(0,1fr) 8px 91px;gap:8px;overflow:visible}
#build-visual{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
#build-visual .robot-wall{width:100%;max-width:520px;flex:none}
#build-visual .pixel-robot{width:13.055556%;height:auto;aspect-ratio:2/3;bottom:10%}
.build-body #build-fill{transition:none}
.build-actions.robot-actions{min-height:125px;position:relative;margin-top:0;gap:16px}
.build-actions.robot-actions.ready #robot-guide{width:var(--robot-width);height:var(--robot-height)}
.build-actions.robot-actions.ready #robot-guide .pixel-robot{width:var(--robot-width);height:var(--robot-height)}
.build-actions #enter-studio{white-space:nowrap;padding:14px 20px}
.build-body:has(#build-error:not([hidden])){grid-template-rows:auto auto auto minmax(0,1fr) 8px 91px auto}
@media(max-width:760px){#signup-form,#building{grid-template-rows:560px auto}.build-body{grid-template-rows:auto auto auto minmax(0,1fr) 8px 120px}.build-body #build-status{min-height:120px}#build-visual .pixel-robot{width:15.277778%}.build-actions #enter-studio{font-size:14px;padding:14px 12px}.build-actions.robot-actions{min-height:90px}.build-body:has(#build-error:not([hidden])){grid-template-rows:auto auto auto minmax(0,1fr) 8px 120px auto}}
@media(prefers-reduced-motion:reduce){.robot-wall *,.robot-actions *,.robot-actions:before,.robot-actions:after{animation:none!important;transition:none!important}.plate.hung,.art-pixel{opacity:1}.plate.hung{transform:none}}
/* Keep the approved robot dimensions in both locations. */
#signup-form,#building{grid-template-rows:600px auto}
#build-visual .robot-wall{max-width:610px}
#build-visual .pixel-robot{width:94px;height:141px;aspect-ratio:auto}
@media(max-width:760px){#signup-form,#building{grid-template-rows:560px auto}#build-visual .pixel-robot{width:55px;height:82px}}
@media(min-width:761px){.setup-main{padding-top:24px;padding-bottom:24px}}

/* One robot size and the same left-aligned action anchor throughout signup. */
#building{--signup-robot-width:94px;--signup-robot-height:141px}
#building #build-visual .pixel-robot,#building #robot-guide .pixel-robot{width:var(--signup-robot-width);height:var(--signup-robot-height)}
#building .build-actions.robot-actions{padding-left:0!important;justify-content:flex-start;align-items:flex-end;flex-wrap:nowrap}
#building .build-actions.robot-actions.ready #robot-guide{width:var(--signup-robot-width);height:var(--signup-robot-height);flex:0 0 var(--signup-robot-width)}
#building #enter-studio{margin-left:0;order:0}
#building #robot-guide{order:1}
@keyframes robot-lift{0%{transform:none}10%{transform:translateY(-5px) rotate(-3deg)}20%{transform:rotate(3deg)}30%{transform:translateY(3px)}48%,65%{transform:translateY(-43px) rotate(-3deg)}78%{transform:translateY(2px)}90%{transform:translateY(-3px)}100%{transform:none}}
@media(max-width:650px){#building{--signup-robot-width:55px;--signup-robot-height:82px}}
@media(min-width:421px) and (max-width:650px){#building{--signup-robot-width:94px;--signup-robot-height:141px}}

/* The robot must never determine the primary action's position. */
#building{--signup-robot-width:72px;--signup-robot-height:108px}
#building .build-actions.robot-actions{align-items:flex-start;padding-top:26px;min-height:105px}
#building .build-actions.robot-actions.ready #enter-studio{align-self:flex-start;margin:0}
#building .build-actions.robot-actions.ready #robot-guide{position:absolute;align-self:auto}
@media(max-width:760px){#building{--signup-robot-width:55px;--signup-robot-height:82px}}

/* An error or wrapped name adds real height; never squeeze the wall over text. */
#building{grid-template-rows:minmax(600px,auto) auto}
#building .build-body{grid-template-rows:auto auto auto minmax(min-content,1fr) 8px 91px}
#building .build-body:has(#build-error:not([hidden])){grid-template-rows:auto auto auto minmax(min-content,1fr) 8px 91px auto}
@media(max-width:760px){#building{grid-template-rows:minmax(560px,auto) auto}#building .build-body{grid-template-rows:auto auto auto minmax(min-content,1fr) 8px 120px}#building .build-body:has(#build-error:not([hidden])){grid-template-rows:auto auto auto minmax(min-content,1fr) 8px 120px auto}}
