/* Coordinates remain anchored to the original 500 x 850 machine canvas. */
main{padding:64px 0 74px 1.2vw;min-height:100svh;align-items:center}.panel{width:clamp(410px,29vw,530px);min-height:0!important;aspect-ratio:500/850;background:none;box-shadow:none;border-radius:0;container-type:inline-size}.console-art,.console-logo,.console-motion{position:absolute;inset:0;pointer-events:none}.console-art,.console-logo,.crystal-light{background-size:334.4% 110.705882%;background-position:1.279863% 49.450549%;background-repeat:no-repeat}.console-art{background-image:url('/assets/elements-console-v2/original.png');clip-path:polygon(6% 99%,6% 96%,1% 96%,1% 65%,0% 62%,2% 58%,2% 40%,4% 33%,5% 26%,5% 19%,7% 16%,12% 13%,18% 12%,21% 9%,25% 7%,31% 6%,38% 6%,44% 8%,49% 11%,55% 11%,56% 6%,59% 3.7%,64% 1.8%,68% 1.7%,72% 3%,74% 5%,75% 7.4%,79% 7.5%,83% 9%,85% 11.5%,89% 12.6%,92% 15%,94% 19%,97% 21%,98% 26%,98% 95%,94% 98%,89% 99%)}.console-logo{background-image:url('/assets/elements-console-v2/logo-amber-v3.png');clip-path:polygon(28% 19%,85% 19%,85% 35.2%,28% 35.2%)}
/* A complete enamel insert conceals baked form copy in every account state. */
.panel-content{position:absolute;left:17.8%;top:35.3%;width:74.2%;height:57.1%;padding:3.6cqw 3.8cqw!important;background:radial-gradient(ellipse at 20% 0,#1e5d51b3,transparent 65%),repeating-linear-gradient(115deg,#fff1 0,transparent 1px,transparent 5px),linear-gradient(120deg,#073c36,#052a2b 70%,#093c35);border:1px solid #9a743d;border-radius:2.2cqw;box-shadow:inset 0 0 0 2px #032725,inset 0 0 24px #001614a0,0 0 0 3px #133731;display:flex;flex-direction:column;z-index:2;overflow:auto;scrollbar-width:thin;scrollbar-color:#9b8051 #123e36}.brand,.eyebrow,.intro,.account-note{display:none!important}#title{font:4.8cqw/1.2 Georgia;color:#ffeac0;margin:0 0 3cqw;text-shadow:0 2px 2px #001815;text-align:center}.tabs{display:flex;gap:1cqw;border:0;margin:0 0 2.8cqw}.tabs button{position:relative;flex:1;min-height:9cqw;padding:1.5cqw 1cqw;border:1px solid #8f7444;border-radius:1cqw;background:linear-gradient(#204d41,#0d332e);color:#beccbb;font:3cqw Georgia;box-shadow:inset 0 1px #b5bf8f33,0 2px 3px #001c20;cursor:pointer}.tabs [aria-selected=true]{background:linear-gradient(#987637,#654f28);border-color:#d1b779;color:#fff1c9;box-shadow:inset 0 0 0 1px #4c3820,inset 0 2px #ffdf9c66}.tabs button:hover{filter:brightness(1.18)}#google-host{display:flex;justify-content:center;background:#fff;border-radius:6px;min-height:40px}#google-note{margin:1.2cqw 0;color:#bed2c1;font:2.7cqw/1.4 system-ui;text-align:center}.divider{display:flex;font-size:2.5cqw;margin:2cqw 0}.divider:before,.divider:after{background:#b8995644}#login-form>label{margin:2.2cqw 0 0;font-size:2.8cqw}#login-form label>span:first-child{margin-bottom:1cqw;color:#dcd8b9}input:not([type=checkbox]){position:static;width:100%;height:9cqw;min-height:40px;padding:1.6cqw 2.5cqw;background:linear-gradient(#062c29,#103f35);border:1px solid #9d8858;border-radius:1cqw;box-shadow:inset 0 2px 6px #00181488;font:3.2cqw system-ui;color:#fff2d1}input::placeholder{color:#93ac9d}.password{position:relative}.password input{padding-right:10cqw}#show{right:0;top:0;width:10cqw;height:100%;min-width:40px;color:#d6c79c;font-size:4cqw;border-left:1px solid #b19b572e}.remember{position:static;display:flex;align-items:center;gap:2cqw!important;min-height:36px;margin:2cqw 0!important;font-size:2.7cqw!important}.remember input{width:18px;height:18px;accent-color:#78c7a2}.remember span{margin:0!important}.primary{display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%;min-height:12.5cqw;padding:2.5cqw 6cqw;border:0;border-radius:1.6cqw;background:url('/assets/elements-controls-v1/brass-button.webp') center/100% 100% no-repeat;color:#fff1c9;font:600 3cqw/1.3 Georgia;letter-spacing:.03em;text-shadow:0 2px 2px #001812;box-shadow:0 4px 7px #001a2188;transition:filter .18s,transform .18s;text-decoration:none;cursor:pointer}.primary:hover{filter:brightness(1.18);transform:translateY(-1px)}.primary:active{transform:translateY(1px);filter:brightness(.95)}.primary:disabled{opacity:.65;transform:none;cursor:wait}#status{font:2.7cqw/1.4 system-ui;color:#ffe0a2;margin:2cqw 0 0;padding:1.5cqw 2cqw;border-left:2px solid #e2b05e;background:#052724}#status:empty{display:none}.register-mode #title{margin-bottom:1.4cqw}.register-mode .tabs{margin-bottom:1cqw}.register-mode #login-form>label{margin-top:1.3cqw}.register-mode input:not([type=checkbox]){height:8cqw;min-height:36px}.register-mode #google-host,.register-mode #google-note,.register-mode .divider{display:none!important}.register-mode .primary{min-height:11cqw}
/* Signed-in workshop: no login tabs and no inert placeholder controls. */
.signed-in .panel-content{padding-top:4cqw!important}.signed-in #title{font-size:4.4cqw;margin-bottom:3.5cqw}.signed-in #signin{display:none!important}#welcome{text-align:center;display:flex;flex-direction:column;flex:1;min-height:0;line-height:1.5}.account-connected{display:flex;align-items:center;justify-content:center;gap:1.5cqw;color:#b3d3b9;font:2.4cqw system-ui;letter-spacing:.13em;text-transform:uppercase}.account-connected:before{content:'';width:1.4cqw;height:1.4cqw;background:#8ddfba;border-radius:50%;box-shadow:0 0 8px #6debba99}.welcome-name{font:5.5cqw/1.12 Georgia;color:#ffe3a9;margin:3.5cqw 0 4cqw;overflow-wrap:anywhere;text-shadow:0 2px #05251f}.workshop-emblem{margin:0 auto;width:18cqw;height:18cqw;border:1px solid #ae8d4c;border-radius:50%;background:radial-gradient(circle,#47755555,#0b3731 65%);box-shadow:inset 0 0 0 4px #07332c,inset 0 0 0 5px #967a3e55,0 3px 15px #001f2477;display:grid;place-items:center;color:#cfb672;font:11cqw Georgia}.welcome-copy{font:3.2cqw/1.65 system-ui;color:#c0d2bf;margin:3.5cqw 0 5cqw}.welcome-actions{display:grid;gap:2.5cqw;margin-top:auto}.welcome-actions .secondary{filter:saturate(.55);color:#dfe4c8}.welcome-actions .secondary:hover{filter:saturate(.8) brightness(1.2)}.welcome-footer{font:2.4cqw system-ui;color:#91ac98;margin:3cqw 0 0;letter-spacing:.05em}
/* One visual language for peripheral controls. */
.back,.language select,.replay,.idle-controls button,.flight button{border:2px solid #a98b4e;border-radius:9px;background:linear-gradient(145deg,#285447,#0a302d 70%);box-shadow:inset 0 0 0 1px #07221e,inset 0 2px 1px #e9d29066,0 3px 0 #45341d,0 5px 12px #001e2555;color:#f9e5b6;min-width:44px;min-height:44px}.back{display:grid;place-items:center;line-height:1}.replay{font:13px Georgia;padding:12px 20px}.idle-controls button{font-size:19px}.back:hover,.replay:hover,.idle-controls button:hover{filter:brightness(1.2)}:focus-visible{outline:3px solid #b8ffdb;outline-offset:3px}.language select{font-size:14px;min-width:68px}
/* Each layer uses the original machine coordinates, independent of screen size. */
.console-motion{z-index:1}.gauge-motion{position:absolute;left:28.8%;top:10.3%;width:19.6%;height:12.3%;background:url('/assets/elements-controls-v1/dial-face.webp') center/100% 100% no-repeat;border-radius:50%;box-shadow:inset 0 0 4px 2px #5e431a;overflow:hidden}.clock-hand{position:absolute;left:49%;top:12%;height:40%;width:3.5%;background:linear-gradient(90deg,#412b13,#ae7b36 50%,#322a18);clip-path:polygon(50% 0,100% 88%,72% 100%,28% 100%,0 88%);transform-origin:50% 95%;filter:drop-shadow(1px 1px 1px #4e381a77)}.clock-hand.hour{top:24%;height:27%;width:5%;left:48%;animation:clock-hour 240s linear infinite}.clock-hand.minute{animation:clock-minute 20s linear infinite}.clock-pivot{position:absolute;left:46%;top:47%;width:10%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2d38b,#92703c 55%,#332a15 70%);box-shadow:0 1px 2px #322a18}.crystal-light{position:absolute;inset:0;background-image:url('/assets/elements-console-v2/original.png');clip-path:polygon(71% 10%,78.8% 10%,80.6% 17.8%,69.7% 17.8%);filter:brightness(1.3) saturate(1.1);animation:crystal-pulse 7.7s ease-in-out infinite}.crystal-motion{position:absolute;left:70%;top:9.8%;width:12%;height:9%;border-radius:18%;background:radial-gradient(ellipse,#baffee55,transparent 70%);mix-blend-mode:screen;animation:crystal-aura 7.7s ease-in-out infinite}.crystal-motion:after{content:'';position:absolute;inset:5% 10%;background:linear-gradient(120deg,transparent 32%,#efffffa0 48%,transparent 65%);transform:translateY(100%);opacity:0;animation:crystal-glint 7.7s ease-in-out infinite}.motion-paused .console-motion *{animation-play-state:paused!important}@keyframes crystal-pulse{0%,17%,48%,76%,100%{opacity:0}26%{opacity:.8}33%{opacity:.2}39%{opacity:.65}86%{opacity:.5}91%{opacity:0}}@keyframes crystal-aura{0%,17%,48%,76%,100%{opacity:.1}26%,39%{opacity:.9}33%,86%{opacity:.35}}@keyframes crystal-glint{0%,18%,42%,100%{opacity:0;transform:translateY(80%)}27%{opacity:.55}38%{opacity:0;transform:translateY(-80%)}}@keyframes clock-minute{from{transform:rotate(40deg)}to{transform:rotate(400deg)}}@keyframes clock-hour{from{transform:rotate(220deg)}to{transform:rotate(580deg)}}
@media(min-width:1100px) and (min-height:850px){.panel{width:min(30vw,calc((100svh - 140px)*.588235))}}
@media(max-width:650px){header{position:absolute;inset:0 0 auto;margin:12px 14px}main{padding:70px 3px 85px;min-height:100svh;justify-content:center;align-items:flex-start}.panel{width:min(500px,100%)}input:not([type=checkbox]){font-size:16px}.panel-content{padding-left:3cqw!important;padding-right:3cqw!important}.tabs button{min-height:44px;font-size:3.5cqw}.primary{min-height:48px;font-size:3.4cqw}.remember{font-size:3cqw!important}.register-mode .panel-content{overflow:auto}.register-mode input:not([type=checkbox]){min-height:40px}.welcome-copy{font-size:3.6cqw}.welcome-name{font-size:6cqw}.replay{max-width:58vw;font-size:12px}.idle-controls{gap:6px}}
@media(max-height:600px) and (min-width:651px){main{padding:65px 12px 80px;align-items:flex-start}.panel{width:420px}}
@media(prefers-reduced-motion:reduce){.console-motion *{animation:none!important}.primary{transition:none}.primary:hover{transform:none}}

.workshop-emblem{flex-shrink:0}
.register-mode .panel-content{padding-top:2cqw!important;padding-bottom:2cqw!important}.register-mode #title{display:none}.register-mode .tabs{margin-bottom:1cqw}.register-mode #login-form>label{margin-top:.6cqw}.register-mode #login-form label>span:first-child{margin-bottom:1px}.register-mode .remember{min-height:28px;margin:3px 0!important}.register-mode #submit{min-height:44px}.register-mode #status{margin-top:1cqw}
/* Rendered state atlas: artwork is displayed directly; DOM only supplies live copy and hit targets. */
.panel-content,.register-mode .panel-content,.signed-in .panel-content{padding:0!important;border:0;border-radius:1.5cqw;box-shadow:none;background-image:url('/assets/elements-controls-v1/states.webp');background-size:300% 100%;background-position:0 0;display:block;overflow:visible}.signed-in .panel-content{background-position:50% 0}.register-mode .panel-content{background-position:100% 0}#title,.signed-in #title{position:absolute;left:5%;top:3%;width:90%;height:8%;margin:0;display:grid;place-items:center;font:4.6cqw/1.15 Georgia}.tabs,.register-mode .tabs{position:absolute;left:5%;top:14%;width:90%;height:10%;display:flex;gap:4%;margin:0}.tabs button,.tabs [aria-selected=true],.register-mode .tabs button{position:static;min-height:0;height:100%;padding:0;border:0;background:transparent;box-shadow:none;font:3.5cqw Georgia;color:#b6c9b4}.tabs [aria-selected=true]{color:#fff0ba;text-shadow:0 0 9px #ffdf7866}.tabs button:hover{background:#c8ffe210;border-radius:1cqw}#google-host{position:absolute;left:6%;top:28%;width:88%;height:10%;min-height:0;margin:0;border-radius:1cqw}#google-note{position:absolute;left:6%;top:28%;width:88%;height:10%;margin:0;display:grid;place-items:center;color:#26443b;font:2.8cqw/1.3 system-ui;padding:1cqw}.divider{display:none!important}#login-form>label{margin:0!important}#login-form>label>span:first-child:not(.password){position:absolute;left:6%;width:88%;height:5%;font:2.8cqw system-ui;margin:0;color:#e2d4ab;display:flex;align-items:center}#login-form>label:has(#identifier)>span:first-child{top:41%}#login-form>label:has(#password)>span:first-child{top:59%}.password{position:static}#identifier,#password,.register-mode #identifier,.register-mode #password,.register-mode #name,.register-mode #confirm{position:absolute;left:6%;top:47%;width:88%;height:10%;min-height:0;border:0;border-radius:1cqw;background:transparent;box-shadow:none;font:3.3cqw system-ui;padding:1cqw 3cqw;color:#ffefd0}#password{top:65%;padding-right:10cqw}#show,.register-mode #show{position:absolute;left:81%;top:65%;right:auto;width:13%;height:10%;min-width:0;border:0;color:#d5d1ae;background:transparent;font-size:4cqw}.remember,.register-mode .remember{position:absolute;left:6%;top:78%;width:88%;height:6%;min-height:0;margin:0!important;display:flex;gap:2cqw!important}.remember input{width:4.5cqw;height:4.5cqw;margin:0;flex-shrink:0}.remember span{position:static!important;width:auto!important;height:auto!important;font:2.8cqw system-ui!important}.primary#submit,.register-mode #submit{position:absolute;left:6%;top:86%;width:88%;height:11%;min-height:0;padding:1cqw 3cqw;border:0;background:none;box-shadow:none;font:600 3.2cqw Georgia;color:#ffeec1}.primary#submit:hover,#welcome .primary:hover{background:#c9ffe011;filter:none;transform:none}.primary#submit:active,#welcome .primary:active{background:#0003}#welcome{position:static}.account-connected{position:absolute;left:20%;top:14%;width:60%;height:6%;font-size:2.5cqw;letter-spacing:.07em}.account-connected:before{display:none}.welcome-name{position:absolute;left:6%;top:23%;width:88%;height:10%;margin:0;display:grid;place-items:center;font:5.7cqw/1.1 Georgia}.workshop-emblem{display:none}.welcome-copy{position:absolute;left:8%;top:57%;width:84%;height:14%;margin:0;display:grid;place-items:center;font:3.2cqw/1.55 system-ui}.welcome-actions{position:static;display:block;margin:0}.welcome-actions .primary{position:absolute;left:6%;top:76%;width:88%;height:10%;min-height:0;background:none;box-shadow:none;border:0;padding:1cqw 2cqw;font:600 3.2cqw Georgia;color:#ffeec1;filter:none}.welcome-actions .primary+.primary{top:88%}.welcome-footer{display:none}.register-mode .tabs{top:3%}.register-mode #title{display:none}.register-mode #login-form>label:has(#name)>span:first-child{top:15%}.register-mode #login-form>label:has(#identifier)>span:first-child{top:30%}.register-mode #login-form>label:has(#password)>span:first-child{top:45%}.register-mode #login-form>label:has(#confirm)>span:first-child{top:60%}.register-mode #name{top:21%;height:9%}.register-mode #identifier{top:36%;height:9%}.register-mode #password{top:51%;height:9%;padding-right:10cqw}.register-mode #confirm{top:66%;height:9%}.register-mode #show{top:51%;height:9%}#status,.register-mode #status{position:absolute;left:0;top:100%;width:100%;margin:1cqw 0 0;padding:1.5cqw 2cqw;z-index:5;border:1px solid #b99556;border-radius:1cqw;background:#062c29;color:#ffe2a1;font:3cqw/1.3 system-ui}.gauge-motion{background-image:url('/assets/elements-controls-v1/pressure-face.webp')}.gauge-needle{position:absolute;left:48.5%;top:20%;height:43%;width:4%;background:linear-gradient(90deg,#342714,#b18c50 45%,#4c3418);clip-path:polygon(50% 0,100% 88%,65% 100%,35% 100%,0 88%);transform-origin:50% 95%;animation:pressure-sway 7.7s ease-in-out infinite}.clock-pivot{left:46%;top:58%;width:10%}@keyframes pressure-sway{0%,17%,100%{transform:rotate(-12deg)}26%{transform:rotate(21deg)}29%{transform:rotate(16deg)}33%{transform:rotate(5deg)}39%{transform:rotate(18deg)}48%,76%{transform:rotate(-8deg)}86%{transform:rotate(9deg)}91%{transform:rotate(-10deg)}}@media(max-width:650px){#identifier,#password,.register-mode input:not([type=checkbox]){font-size:16px}.welcome-copy{font-size:3.4cqw}.tabs button{font-size:3.4cqw}.primary#submit,.welcome-actions .primary{font-size:3.15cqw}}
/* Measured atlas geometry, 627 x 836 per state. */
.tabs{top:17.2%;height:9%}#google-host,#google-note{top:28.6%;height:11.7%}#login-form>label:has(#identifier)>span:first-child{top:40%;height:4%}#login-form>label:has(#password)>span:first-child{top:54.5%;height:4%}#identifier{top:44.1%;height:10.6%}#password,#show{top:58.4%;height:10.4%}.remember,.register-mode .remember{top:72.2%;height:5.5%;left:8%;width:84%}.primary#submit,.register-mode #submit{top:80.5%;height:13.5%}.account-connected{left:34%;width:55%;top:14%;font-size:2.2cqw}.welcome-name{left:15%;width:71%;top:21.2%;height:10%;font-size:5cqw}.welcome-copy{left:12%;width:78%;top:55.7%;height:11.9%;font-size:3cqw;line-height:1.4}.welcome-actions .primary{top:69.3%;height:10.9%}.welcome-actions .primary+.primary{top:81.7%;height:12.3%}.register-mode .tabs{top:9.1%;height:8.9%}.register-mode #login-form>label:has(#name)>span:first-child{top:18.5%;height:4%}.register-mode #login-form>label:has(#identifier)>span:first-child{top:32%;height:4%}.register-mode #login-form>label:has(#password)>span:first-child{top:45%;height:4%}.register-mode #login-form>label:has(#confirm)>span:first-child{top:57.5%;height:4%}.register-mode #name{top:23%;height:10.4%}.register-mode #identifier{top:35.9%;height:10.3%}.register-mode #password,.register-mode #show{top:48.9%;height:10.1%}.register-mode #confirm{top:61.4%;height:10.3%}.register-mode .remember{top:73.4%;height:5.5%}.register-mode #submit{top:81.2%;height:12.6%}
/* Fit the complete machine to available viewport height at every breakpoint. */
main{height:100svh;min-height:0;padding:68px 12px;align-items:center;justify-content:flex-start}.panel{flex:none;width:min(530px,calc((100svh - 136px)*.588235),calc(100vw - 24px));min-height:0!important;aspect-ratio:500/850}
@media(max-width:650px){main{height:100svh;min-height:0;padding:68px 6px;align-items:center;justify-content:center}.panel{width:min(500px,calc((100svh - 136px)*.588235),calc(100vw - 12px))}}
@media(max-height:500px) and (min-width:651px){main{padding:12px 90px;align-items:center}.panel{width:min(530px,calc((100svh - 24px)*.588235),calc(100vw - 180px))}}