*{box-sizing:border-box}body{color:#f3f6ff;background:#101521;margin:0;font-family:Arial,sans-serif}#app{position:fixed;inset:0}#panel{z-index:5;background:#192238ee;border:1px solid #39445e;border-radius:14px;width:min(330px,100vw - 28px);max-height:calc(100vh - 28px);padding:16px;position:fixed;top:14px;right:14px;overflow:auto;box-shadow:0 10px 40px #0008}h2{margin:0 0 8px;font-size:17px}p{color:#b9c6dd;font-size:12px;line-height:1.5}button{color:#fff;cursor:pointer;background:#304266;border:1px solid #5a719d;border-radius:8px;margin:3px 2px;padding:9px}button:hover{background:#4264a2}button.active{background:#167d75}input{width:100%}#status{white-space:pre-wrap;color:#b6d8e7;margin-top:8px;font-size:12px}#zones button{max-width:100%}#toggle{display:none}@media (max-width:650px){#panel{width:calc(100vw - 20px);max-height:53vh;top:auto;bottom:10px;right:10px}h2{font-size:15px}}#app canvas{display:block}#status{min-height:36px}button:focus-visible{outline:2px solid #00e6b8}