:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101216;color:#eee}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:24px;padding:16px 28px;border-bottom:1px solid #282d35}header strong{font-size:25px}header span{color:#ec4553}#status{color:#aeb5c1;flex:1;font-size:14px}main{padding:20px;max-width:1500px;margin:auto}button{cursor:pointer;border:1px solid #434a55;border-radius:8px;background:#242933;color:white;padding:11px 16px;font:inherit}button:hover{background:#333a47}button:disabled{opacity:.55;cursor:wait}#login{max-width:420px;margin:12vh auto}h1{font-size:32px}p{color:#aeb5c1;line-height:1.6}form{display:grid;gap:12px}input{padding:12px;font:inherit;background:#1b1f27;color:#fff;border:1px solid #434a55;border-radius:8px}form button,#connect{background:#bb2836;border-color:#bb2836}#loginError{color:#ff8994}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}#display{position:relative;background:#050608;border:1px solid #282d35;min-height:400px;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden}canvas{display:block;max-width:100%;max-height:75vh;object-fit:contain;touch-action:none}canvas:focus-visible{outline:2px solid #ec4553}#placeholder{position:absolute}#display:fullscreen{border:0;border-radius:0}#display:fullscreen canvas{max-height:100vh;width:auto;height:auto}.textInput{display:flex;gap:10px;align-items:center;margin-top:16px}.textInput input{flex:1;min-width:0}[hidden]{display:none!important}@media(max-width:600px){header{padding:12px;gap:12px}main{padding:12px}.textInput{flex-wrap:wrap}.textInput label{width:100%}#display{min-height:220px}}