body:not(.in-workspace){background:radial-gradient(ellipse at 30% 45%,#39351b55,transparent 52%),#101510;color:#ede9db;min-height:100svh}
body>main{box-sizing:border-box;position:relative;width:min(940px,calc(100% - 48px));padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;margin:48px auto}
.login-panel{position:relative;padding:42px 38px 30px;background:linear-gradient(145deg,#ffffff09,#ffffff03);border:1px solid #e2d5a81b;border-radius:22px;box-shadow:0 24px 70px #0005,inset 0 1px #ffffff08;backdrop-filter:blur(14px)}
.login-panel>small:first-child{font-size:10px;letter-spacing:2.5px;color:#c4b985}.login-panel h1{font-size:30px;letter-spacing:-.8px;font-weight:600;margin:20px 0 30px;color:#f5f0dc}.login-panel label{font-size:12px;color:#b7b9a8;margin:22px 0 9px}.login-panel input{background:#0e150fd9;border:1px solid #c4c19b2b;color:#f5f0dc;border-radius:10px;padding:14px 15px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}.login-panel input:focus{border-color:#d1b964;box-shadow:0 0 0 3px #d1b96415}.login-panel input:-webkit-autofill{-webkit-text-fill-color:#f5f0dc;box-shadow:0 0 0 50px #192219 inset}.login-panel button{background:linear-gradient(110deg,#e7cc77,#d1b35d);border:1px solid #f2dc95;color:#26301e;font-size:13px;font-weight:600;box-shadow:0 5px 22px #d6b65a12;transition:filter .2s,transform .2s}.login-panel button:hover{filter:brightness(1.08);transform:translateY(-1px)}.login-panel button:focus-visible{outline:2px solid #f7dc8f;outline-offset:4px}.login-panel #submit{margin-top:28px;padding:14px}.login-panel>small:last-child{display:block;border-top:1px solid #ddcf9f19;margin-top:22px;padding-top:18px;font-size:11px;line-height:1.8;color:#959d87}.login-panel #message{font-size:12px;margin:15px 0;min-height:0;color:#f0b599}.login-panel #message:empty{margin:0}.login-panel p{font-size:13px;color:#c4c9b2}.login-panel h2{font-size:20px}.login-panel #boot{min-height:38px}.login-panel input[type=file]{color:#d4d8c4}
.lamp-scene{position:relative;min-height:510px;isolation:isolate}.lamp-brand{position:absolute;top:0;left:12px;font-size:24px;letter-spacing:4px;font-weight:600;color:#ece7d4}.lamp-brand small{display:block;font-size:8px;letter-spacing:3px;color:#8c967c;margin-top:10px}.lamp-assembly{position:absolute;left:50%;top:120px;width:270px;height:320px;transform:translateX(-50%)}.lamp-beam{position:absolute;left:-40px;top:55px;width:350px;height:260px;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);background:linear-gradient(#f3d67885,#e6c36325 65%,transparent);filter:blur(5px);transition:opacity .65s;z-index:-1}.lamp-aura{position:absolute;inset:-25px -50px;background:radial-gradient(ellipse at 50% 30%,#ffdc6e24,transparent 60%);filter:blur(12px);transition:opacity .65s;z-index:-2}.lamp-shade{position:absolute;left:86px;top:20px;width:98px;height:44px;border-radius:60px 60px 8px 8px;background:linear-gradient(110deg,#293128,#111811 65%,#394036);border-top:1px solid #73794f;box-shadow:inset 0 2px 5px #b5bb8f1c,0 4px 8px #0008;z-index:3}.lamp-shade:after{content:'';position:absolute;bottom:-4px;left:4px;right:4px;height:7px;background:#fff0b0;border-radius:50%;box-shadow:0 0 17px 4px #f9d67e7a;transition:opacity .65s}.lamp-stem{position:absolute;top:62px;bottom:21px;left:132px;width:6px;background:linear-gradient(90deg,#0b100a,#afb17d,#39422a);box-shadow:5px 0 8px #0005}.lamp-base{position:absolute;bottom:12px;left:99px;width:72px;height:17px;border-radius:50%;background:linear-gradient(#626b4c,#1b2419 70%);box-shadow:0 6px 8px #000a,inset 0 1px #a1a67c50}.lamp-pool{position:absolute;bottom:0;left:-20px;right:-20px;height:30px;background:radial-gradient(ellipse,#d5bb5d28,transparent 70%);filter:blur(6px)}#lamp-switch{position:absolute;top:60px;left:171px;width:32px;height:86px;margin:0;padding:0;border:0;background:none;box-shadow:none;z-index:4;cursor:pointer}#lamp-switch:before{content:'';position:absolute;width:1px;height:58px;top:0;left:15px;background:#c4b87e}#lamp-switch:after{content:'';position:absolute;width:7px;height:17px;top:54px;left:12px;border-radius:5px;background:linear-gradient(90deg,#8c7a41,#ebd28b,#86713d);box-shadow:0 2px 5px #0008}#lamp-switch:hover:after{transform:translateY(4px)}#lamp-switch:focus-visible{outline:1px solid #ddc77a;outline-offset:3px;border-radius:15px}.lamp-caption{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:10px/1.8 Arial;color:#8d987e;letter-spacing:1px}.lamp-off .lamp-beam,.lamp-off .lamp-aura,.lamp-off .lamp-shade:after{opacity:0}.lamp-off .lamp-pool{opacity:.15}.lamp-motes{position:absolute;inset:100px 20px 50px;pointer-events:none}.lamp-motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:#edd688;box-shadow:0 0 9px 3px #d7b94640;animation:drift 6s ease-in-out infinite}.lamp-motes i:nth-child(1){left:20%;top:30%}.lamp-motes i:nth-child(2){left:70%;top:20%;animation-delay:-2s}.lamp-motes i:nth-child(3){left:80%;top:70%;animation-delay:-4s}.lamp-motes i:nth-child(4){left:30%;top:85%;animation-delay:-1s}@keyframes drift{50%{transform:translate(6px,-12px);opacity:.2}}.lamp-off .lamp-motes{opacity:.1}
@media(max-width:700px){body>main{width:min(430px,calc(100% - 32px));grid-template-columns:1fr;gap:8px;margin:28px auto}.lamp-scene{min-height:180px}.lamp-brand{left:4px;top:10px;font-size:19px}.lamp-assembly{left:75%;top:12px;transform:translateX(-50%) scale(.48);transform-origin:top center}.lamp-caption{left:4px;right:auto;bottom:20px;font-size:9px}.lamp-motes{inset:20px 40px}.login-panel{padding:28px 26px;border-radius:18px}.login-panel h1{font-size:27px;margin-top:16px}}
@media(prefers-reduced-motion:reduce){.lamp-scene *,.login-panel *{animation:none!important;transition:none!important}}

.login-panel{transition:opacity .55s ease,transform .55s ease,visibility .55s;transition-delay:.18s}.login-awaiting-light .login-panel{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition-delay:0s}.password-field{position:relative}.password-field input{padding-right:50px}.login-panel #password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:8px;margin:0;border:0;background:transparent;box-shadow:none;color:#c4b985;border-radius:8px}.login-panel #password-toggle:hover{background:#dfca7a15;color:#f3dc94;transform:translateY(-50%)}#password-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.eye-slash{display:block}#password-toggle[aria-pressed=true] .eye-slash{display:none}@media(prefers-reduced-motion:reduce){.login-panel{transition:none}}

/* Pixel-mapped LED installation, decorative web animation. */
.led-installation{position:absolute;left:0;right:0;top:105px;height:290px;perspective:650px}.led-array{position:absolute;inset:0 22px 25px;display:flex;align-items:center;justify-content:space-between;transform:rotateY(-16deg) rotateX(5deg);gap:10px}.led-bar{height:calc(140px + (7 - var(--i)) * (7 - var(--i)) * 2px);width:8px;flex-shrink:0;border-radius:5px;background:linear-gradient(180deg,#edcd87,#55dbbc 32%,#7190ee 65%,#d389cc);background-size:100% 260%;box-shadow:0 0 10px #80dbbe77,0 0 25px #8a9fba33;mask-image:repeating-linear-gradient(to bottom,#000 0 5px,transparent 5px 8px);animation:led-flow 9s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.35s);transition:opacity .7s,filter .7s}.led-haze{position:absolute;inset:0;background:radial-gradient(ellipse,#5bbdaa20,transparent 65%);filter:blur(24px);transition:opacity .8s}.led-floor{position:absolute;left:20px;right:20px;bottom:0;height:50px;background:radial-gradient(ellipse,#6cbfb83b,transparent 70%);transform:rotate(-3deg);filter:blur(10px);transition:opacity .8s}.lamp-off .led-bar{opacity:.16;filter:grayscale(1);animation-play-state:paused}.lamp-off .led-haze,.lamp-off .led-floor{opacity:0}.lamp-scene #lamp-switch{left:50%;top:auto;bottom:52px;transform:translateX(-50%);width:178px;height:42px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #cbb97a55;border-radius:24px;color:#d9c995;background:#151e18;box-shadow:0 4px 20px #0003;font-size:10px;letter-spacing:1px}.lamp-scene #lamp-switch:before,.lamp-scene #lamp-switch:after{display:none}.lamp-scene #lamp-switch:hover{background:#253429;border-color:#d7c788}.lamp-scene #lamp-switch svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.lamp-scene #lamp-switch[aria-pressed=true]{box-shadow:0 0 18px #74d6b61b;border-color:#92b798}.lamp-caption{bottom:0}@keyframes led-flow{0%{background-position:50% 0}100%{background-position:50% 100%}}@media(max-width:700px){.lamp-scene{min-height:285px}.led-installation{top:50px;left:20%;right:0;height:170px;transform:scale(.8);transform-origin:right center}.led-array{inset:0 15px;height:180px;gap:6px}.led-bar{height:calc(80px + (7 - var(--i)) * (7 - var(--i)) * 1px);width:5px}.lamp-scene #lamp-switch{bottom:2px;left:auto;right:0;transform:none;width:156px}.lamp-caption{bottom:6px;font-size:8px;max-width:45%}}

/* Travelling light packets: real positional motion through each pixel strip. */
.led-bar{position:relative;overflow:hidden;background:linear-gradient(#243c34,#152724);animation:none;filter:none}
.led-bar:before,.led-bar:after{content:'';position:absolute;left:0;right:0;height:65%;top:0;border-radius:inherit;background:linear-gradient(transparent,#4ae4c9 30%,#eaffdf 52%,#c39bff 73%,transparent);transform:translateY(-110%);animation:led-packet 2.8s linear infinite;animation-delay:calc(var(--i) * -.14s);will-change:transform}
.led-bar:after{background:linear-gradient(transparent,#877fff 30%,#ffe1a0 52%,#f39bc8 73%,transparent);animation-delay:calc(var(--i) * -.14s - 1.4s)}
@keyframes led-packet{from{transform:translateY(-110%)}to{transform:translateY(165%)}}
.lamp-off .led-bar:before,.lamp-off .led-bar:after{animation-play-state:paused;opacity:0}.lamp-off .led-bar{filter:grayscale(1)}
@media(prefers-reduced-motion:reduce){.led-bar:before,.led-bar:after{animation:none;transform:translateY(25%)}}

.led-installation.curtain-ready{top:90px;height:320px;perspective:none}
.curtain-ready .led-array,.curtain-ready .led-haze,.curtain-ready .led-floor{display:none}
.led-curtain{display:block;width:100%;height:100%;pointer-events:none}
@media(max-width:700px){.led-installation.curtain-ready{top:35px;height:210px;transform:none}}

/* Photographic corridor keeps its 4:3 proportions on every screen. */
.led-installation.curtain-ready{top:85px;height:auto;aspect-ratio:4/3;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px #0007;border:1px solid #bca66a20}
@media(max-width:700px){.led-installation.curtain-ready{top:38px;left:28%;right:0;height:180px;aspect-ratio:auto}}
