/* A layered routing diagram. All motion is local; no canvas, WebGL or CDN. */
.login-shell{grid-template-columns:53% 47%}
.login-visual{padding:clamp(32px,4.2vw,66px);background:#f0f5fd;isolation:isolate}
.login-visual::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 16%,#fff9,transparent 52%),radial-gradient(ellipse at 90% 85%,#dbe9fc66,transparent 60%);pointer-events:none}
.login-visual .login-copy{width:100%;max-width:none;padding:45px 0 20px;margin:auto 0}
.login-copy h1{font-size:clamp(36px,3.5vw,54px);line-height:1.1;letter-spacing:-1.9px;max-width:480px}
.login-copy>p{max-width:365px;line-height:1.7;margin-top:21px;font-size:14px}
.login-bottom{font-size:10px;letter-spacing:.035em}
.gateway-scene{position:relative;margin:17px -35px 0;--scene-play:paused;--route-blue:#4d83ef;--route-teal:#269e99}
.gateway-scene[data-running="true"]{--scene-play:running}
.scene-art{width:100%;aspect-ratio:640/400;position:relative;perspective:1000px;perspective-origin:50% 43%}
.scene-atmosphere{position:absolute;inset:11% 8% 4%;border-radius:50%;background:radial-gradient(ellipse at 48% 45%,#81adf41b,transparent 59%);pointer-events:none}
.scene-plane{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 52%}
.scene-floor{position:absolute;inset:25% 12% 0;transform:translateZ(-36px) rotateX(52deg);background-image:radial-gradient(circle,#7198cd55 .8px,transparent 1px);background-size:17px 17px;mask-image:radial-gradient(ellipse,#0008 5%,transparent 68%);border-radius:50%}
.scene-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(-2px)}
.scene-orbit{stroke:#afc9eb;stroke-width:.7;opacity:.37;stroke-dasharray:3 7}
.scene-orbit.outer{opacity:.21;stroke-dasharray:none}
.scene-line{stroke-width:1.5;stroke-linecap:round}
.scene-line.blue{stroke:url(#scene-blue-route)}
.scene-line.teal{stroke:url(#scene-teal-route);stroke-width:1.35}
.scene-packets path{stroke-width:2.7;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:100;animation:scene-route-flow 4.8s linear infinite;animation-delay:var(--phase,0s);animation-play-state:var(--scene-play)}
.scene-packets.blue{stroke:var(--route-blue)}
.scene-packets.teal{stroke:var(--route-teal)}
.scene-junctions{fill:#f0f5fd;stroke:#afc5e6;stroke-width:1}
.scene-node{position:absolute;width:clamp(116px,24%,153px);transform:translate(-50%,-50%) translateZ(24px);z-index:2}
.scene-project{left:17.8%;top:31.5%}
.scene-bot{left:18%;top:68.8%}
.scene-telegram{left:80.3%;top:29.5%;transform:translate(-50%,-50%) translateZ(34px)}
.scene-webhook{left:80.6%;top:74.25%;transform:translate(-50%,-50%) translateZ(18px)}
.scene-card{position:relative;display:flex;align-items:center;gap:10px;padding:14px 13px;border:1px solid #fff;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#fafcffef 70%,#eaf1fbe8 100%);box-shadow:0 2px 0 #d5e0f1,0 12px 24px -15px #355c9a59,0 2px 8px #2c56870b;animation:scene-card-float 9s ease-in-out infinite;animation-play-state:var(--scene-play)}
.scene-bot .scene-card{animation-delay:-4.5s;animation-duration:10s}
.scene-telegram .scene-card{animation-delay:-2s;animation-duration:11s}
.scene-webhook .scene-card{animation-delay:-6s;animation-duration:12s}
.scene-card-icon{display:grid;place-items:center;width:32px;height:34px;flex-shrink:0;border-radius:9px;color:#4e77b7;background:#eaf1fb;border:1px solid #e1eafa}
.scene-card-icon svg{width:21px;height:21px}
.scene-telegram .scene-card-icon{color:#3a91d4;background:#e5f3fd;border-color:#dceefd}
.scene-webhook .scene-card-icon{color:#258d89;background:#e5f4f1;border-color:#d9eeeb}
.scene-card-copy{display:flex;flex-direction:column;gap:3px;min-width:0;white-space:nowrap}
.scene-card-copy strong{font:600 12px/1.3 var(--body);color:#2a4165;letter-spacing:-.15px}
.scene-card-copy small{font:400 9px/1.4 var(--body);color:#8193ad}
.scene-port{position:absolute;width:5px;height:5px;border-radius:50%;right:-3px;top:50%;margin-top:-2px;background:#82a9e4;border:1px solid #eef5ff;box-shadow:0 0 0 3px #e8f0fb}
.scene-telegram .scene-port,.scene-webhook .scene-port{right:auto;left:-3px}
.scene-webhook .scene-port{background:#65b6ad}
.scene-hub{position:absolute;left:50%;top:51%;width:clamp(78px,18%,112px);aspect-ratio:1;transform:translate(-50%,-50%) translateZ(62px);z-index:3}
.scene-hub-float{position:absolute;inset:0;transform-style:preserve-3d;animation:scene-hub-float 8s ease-in-out infinite;animation-play-state:var(--scene-play)}
.scene-core-back{position:absolute;inset:-10px;transform:translateZ(-17px) translateY(11px);border:1px solid #bbd2f8;border-radius:30px;background:linear-gradient(130deg,#ffffff80,#c7dcfa30);box-shadow:0 24px 34px -20px #3262b860}
.scene-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:25px;color:#fff;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#6c9eff -15%,#3575e8 35%,#225ad8 64%,#1b49b8);border:1px solid #73a3f6;box-shadow:inset 0 1px 1px #fff8,inset -2px -3px 10px #173c961c,0 7px 0 -1px #1d48a7,0 10px 0 -1px #b4cbef,0 24px 35px -14px #225ad86b}
.scene-core::before{content:"";position:absolute;inset:7px;border:1px solid #ffffff22;border-radius:19px;pointer-events:none}
.scene-core>svg{width:48%;height:48%;filter:drop-shadow(0 2px 1px #163d9433)}
.scene-core>span:not(.scene-core-glint){font:500 10px var(--body);letter-spacing:.05em;opacity:.85;margin-top:1px}
.scene-core-glint{position:absolute;inset:-70%;transform:translateX(-80%) rotate(-30deg);background:linear-gradient(90deg,transparent 38%,#fff2 48%,#fff3 50%,transparent 62%);z-index:-1;animation:scene-core-glint 12s ease-in-out infinite;animation-play-state:var(--scene-play)}
.scene-hub-label{position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);text-align:center;color:#3d5b84;white-space:nowrap;font:500 11px/1.5 var(--body)}
.scene-hub-label>span{display:block;font:500 8px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#8ba2c1;margin-top:3px}
.scene-satellite{position:absolute;width:5px;height:5px;border:1px solid #9bb8e2;border-radius:2px;background:#e8f1ff;transform:translateZ(10px) rotate(45deg)}
.satellite-a{left:36%;top:22%;opacity:.65}.satellite-b{left:61%;top:83%;width:4px;height:4px;opacity:.55}.satellite-c{left:69%;top:45%;width:3px;height:3px;opacity:.35}
.scene-caption{display:flex;justify-content:space-between;align-items:center;margin:-6px 35px 0;color:#8295af;font:400 10px var(--body)}
.scene-caption>span{display:flex;align-items:center;gap:6px}
.scene-legend{display:inline-block;width:5px;height:5px;border-radius:50%}
.scene-legend.blue{background:var(--route-blue)}.scene-legend.teal{background:var(--route-teal)}
.scene-caption-divider{width:14px}
.scene-motion{display:grid;place-items:center;width:32px;height:32px;color:#7e95b6;border:1px solid #d4e0f140;border-radius:50%;transition:background .2s ease,color .2s ease,border-color .2s ease}
.scene-motion:hover{background:#ffffff8c;border-color:#d4e0f1;color:#225ad8}
.scene-motion svg{width:14px;height:14px}
.scene-motion:disabled{cursor:default;opacity:.45}
@keyframes scene-route-flow{to{stroke-dashoffset:0}}
@keyframes scene-card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes scene-hub-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes scene-core-glint{0%,15%{transform:translateX(-65%) rotate(-30deg)}60%,100%{transform:translateX(65%) rotate(-30deg)}}
@media(min-width:1700px){.gateway-scene{max-width:760px;margin-left:-35px}.login-visual .login-copy{max-width:690px}.login-copy h1{font-size:56px}}
@media(min-width:761px) and (max-width:1100px){.login-visual{padding:34px}.gateway-scene{margin:24px -26px 0}.scene-caption{margin-left:26px;margin-right:26px}.scene-node{width:116px}.scene-card{padding:11px 9px;gap:7px}.scene-card-icon{width:27px;height:29px}.scene-card-copy strong{font-size:10px}.scene-card-copy small{font-size:8px}.login-copy h1{font-size:38px}.login-content{padding:30px}}
@media(max-width:760px){
 .login-shell{grid-template-columns:1fr}.login-visual{padding:25px 26px 15px}.login-visual .brand{gap:10px}.login-visual .brand strong{font-size:15px}.login-visual .brand small{font-size:8px}.login-visual .brand-mark{width:32px;height:32px;font-size:22px}
 .login-visual .login-copy{display:block;padding:25px 0 0;margin:0;max-width:460px;align-self:center}.login-copy h1{font-size:30px;line-height:1.15;letter-spacing:-1px}.login-copy>p{font-size:11px;line-height:1.6;margin-top:10px;max-width:285px}
 .gateway-scene{margin:4px -18px 0}.scene-node{width:101px}.scene-project{left:18.5%}.scene-bot{left:18.5%}.scene-telegram{left:80%}.scene-webhook{left:80%}
 .scene-card{gap:6px;padding:10px 8px;border-radius:11px}.scene-card-icon{width:25px;height:28px;border-radius:7px}.scene-card-icon svg{width:17px;height:17px}.scene-card-copy strong{font-size:9px}.scene-card-copy small{font-size:7.5px}.scene-hub{width:70px}.scene-core{border-radius:18px}.scene-core::before{inset:5px;border-radius:14px}.scene-core-back{inset:-7px;border-radius:22px}.scene-core>span:not(.scene-core-glint){font-size:8px}.scene-hub-label{font-size:9px;top:calc(100% + 19px)}.scene-hub-label>span{font-size:7px}
 .scene-caption{margin:10px 18px 0;font-size:9px}.scene-motion{width:30px;height:30px}.login-content{padding:30px 26px 35px}.login-form h2{font-size:24px}.login-form>p{margin-bottom:23px}.login-bottom{display:none}
}
@media(prefers-reduced-motion:reduce){.scene-plane{transform:none!important}.gateway-scene[data-running="true"] .scene-packets path,.gateway-scene[data-running="true"] .scene-card,.gateway-scene[data-running="true"] .scene-hub-float,.gateway-scene[data-running="true"] .scene-core-glint{animation:none!important}}