#remote-lock{position:fixed;inset:0;z-index:11000;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(ellipse at 50% 35%,#43304f,#190f25 70%);color:white;text-align:center;font-family:system-ui;overflow:auto}
#remote-lock[hidden]{display:none}
.remote-lock-brand{display:flex;align-items:center;gap:12px;font-weight:850;letter-spacing:.13em;font-size:clamp(16px,4vw,22px)}
.remote-lock-brand img{width:44px;height:44px;object-fit:contain}
.remote-lock-mascot{width:min(68vw,290px);height:min(40dvh,320px);object-fit:contain;margin:22px 0 10px;filter:drop-shadow(0 12px 22px #0005)}
#remote-lock-caption{max-width:320px;font-size:15px;line-height:1.5;color:#ded1eb;min-height:45px;margin:12px 0 20px}
#remote-unlock{width:min(90%,360px);padding:18px 20px;border:1px solid #e3ff97;border-radius:18px;background:linear-gradient(150deg,#deff76,#b9f312);color:#192607;font:800 18px system-ui;box-shadow:0 4px 0 #567509;touch-action:manipulation;min-height:64px}
#remote-unlock:focus-visible{outline:3px solid white;outline-offset:5px}
#remote-lock[aria-busy=true] #remote-lock-caption::after{content:' ...';animation:koppelcode-loading 1.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#remote-lock[aria-busy=true] #remote-lock-caption::after{animation:none}}