html, body { margin: 0; height: 100%; background: #111; color: #eee; font: 14px/1.45 system-ui, "Noto Sans CJK SC", sans-serif; overflow: hidden; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; top: 12px; left: 12px; max-width: 360px; padding: 10px 12px; background: rgba(12, 16, 26, 0.82); border-radius: 10px; }
#hud h1 { margin: 0 0 6px; font-size: 17px; }
#hud .row { margin: 4px 0; }
#hud .perf { color: #9aa4b2; font-size: 12px; }
#hud-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#hud button { background: #2a3142; color: #eee; border: 1px solid #3d4760; border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; }
#hud button.on { background: #d08a3c; border-color: #f0b060; color: #111; }
#hud button:focus-visible { outline: 2px solid #7fd3ff; outline-offset: 2px; }
#hud button:disabled { opacity: 0.6; cursor: default; }
#enter-vr { margin-top: 6px; width: 100%; }
details p { margin: 4px 0; color: #c8ced8; font-size: 12px; }
#status { margin-top: 6px; color: #ffcf7a; }
body.in-xr #hud { display: none; }