:root{color-scheme:light;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%}body{background:linear-gradient(145deg,#ecfeff,#e2e8f0);color:#0f172a}.shell{position:relative;width:100%;height:100%;overflow:hidden}.topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;z-index:20;background:#ffffffd1;border:1px solid rgba(148,163,184,.35);border-radius:14px;padding:10px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.topbar h1{margin:0;font-size:20px}.topbar p{margin:3px 0 0;font-size:12px;color:#334155}.connection{font-weight:700;font-size:12px;color:#b91c1c}.connection.connected{color:#166534}.controls{position:absolute;left:12px;top:88px;z-index:20;width:min(320px,calc(100% - 24px));background:#ffffffe6;border:1px solid rgba(148,163,184,.35);border-radius:14px;padding:14px;display:grid;gap:8px}.controls label{font-size:12px;color:#334155;font-weight:600}.controls input,.controls select,.controls button{width:100%;border-radius:10px;border:1px solid #cbd5e1;padding:10px 12px;font-size:14px}.controls button{background:#0f172a;color:#f8fafc;cursor:pointer;border:none;font-weight:600}.controls button:hover{background:#1e293b}.bandwidth-panel[hidden]{display:none}.bandwidth-panel{gap:10px}.bandwidth-panel p{margin:0}.hint{margin:0;font-size:12px;color:#64748b}.canvas-container{width:100%;height:100%}