*{box-sizing:border-box}body{color:#e4f2ed;background:#153238;margin:0;font:15px system-ui}canvas{width:100%;height:100%;position:fixed;inset:0}main{background:#102b32ed;width:min(410px,100%);min-height:100vh;padding:22px;position:relative}h1{font-size:26px}p{line-height:1.5}a{color:#a9efd4}button{font:inherit;color:#e4f2ed;cursor:pointer;background:#28535b;border:1px solid #648e8c;border-radius:9px;padding:11px}button[aria-pressed=true],#enter{color:#153b36;background:#a3ddc6}button:disabled{opacity:.5;cursor:wait}#controls{grid-template-columns:1fr 1fr;gap:8px;margin:18px 0;display:grid}#controls p{color:#badace;grid-column:1/-1;margin:4px 0}textarea{width:100%;height:200px;margin-top:10px}.note,small{color:#a9c5c3;font-size:12px}.xr main{display:none}@media (width<=700px){canvas{height:340px;position:relative}main{width:100%;min-height:0}.xr canvas{height:100%;position:fixed}}@media (width>=701px){canvas{width:calc(100% - 410px);left:410px}.xr canvas{width:100%;left:0}}