[hidden]{display:none!important}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#111;color:#eee;font:14px system-ui}#stage{min-height:100dvh;overflow:auto}#frame{display:block;width:100%;height:auto;transform-origin:top left}#empty{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;line-height:1.8}#empty h2{margin:0 0 16px}#empty p{max-width:492px;margin:0}#toolbar{position:fixed;z-index:2;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;max-width:95vw;padding:10px;background:#222e;border-radius:16px;box-shadow:0 4px 24px #0005}button,select,input{font:inherit;color:#eee;background:#444;border:0;border-radius:8px;padding:9px;white-space:nowrap}button{cursor:pointer}#name{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}#connection{position:fixed;z-index:3;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;background:#222d;padding:6px 10px;border-radius:12px;font-size:12px;pointer-events:none}a{color:#eab39d;overflow-wrap:anywhere}.panel{max-width:540px;margin:32px auto;padding:24px;line-height:1.7}.panel canvas{display:block;width:100%;height:auto;margin:16px 0;border-radius:12px}.panel button{margin:8px 8px 0 0}.panel p{color:#bbb}#qr{width:180px!important;height:180px!important;background:#fff}
#connection.updating{display:flex;align-items:center;gap:7px}#connection.updating::before{content:"";display:inline-block;width:12px;height:12px;border:2px solid #ffffff50;border-top-color:#fff;border-radius:50%;animation:mirror-spin .8s linear infinite;flex:none}@keyframes mirror-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#connection.updating::before{animation:none}}

body:has(#toolbar:not([hidden])) #connection{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 76px)}