html, body { margin: 0; height: 100%; overflow: hidden; background: #111; font: 13px/1.5 -apple-system, "PingFang SC", "Helvetica Neue", sans-serif; color: #eee; }
#view { display: block; width: 100vw; height: 100vh; outline: none; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #15171a; z-index: 10; transition: opacity .4s; }
#loading.hidden { opacity: 0; pointer-events: none; }
#loading .box { max-width: 520px; padding: 24px 28px; }
#loading h1 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
#loading .small { color: #8a9099; font-size: 12px; }
#panel { position: fixed; left: 12px; top: 12px; background: rgba(18, 20, 24, .72); padding: 8px 10px; border-radius: 8px; max-width: 420px; backdrop-filter: blur(6px); }
#panel select { background: #22262c; color: #eee; border: 1px solid #3a3f47; border-radius: 4px; padding: 2px 4px; max-width: 300px; }
#hud { color: #9aa3ad; font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
#panel details { margin-top: 4px; color: #b9c0c8; }
#panel summary { cursor: pointer; }
#panel p { margin: 4px 0; font-size: 12px; }
#panel label { display: block; margin: 2px 0; }
#panel label.chk { color: #c9d0d8; font-size: 12px; }
#refimg { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; background: #000; display: none; z-index: 5; pointer-events: none; }
#refimg.on { display: block; }