html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(80,160,255,.2),transparent 36rem),radial-gradient(circle at 70% 45%,rgba(160,70,255,.16),transparent 32rem),#02050b}canvas{display:block;width:100vw;height:100vh}#hud,#panel{position:fixed;z-index:10;border:1px solid rgba(165,200,255,.28);border-radius:14px;background:#030814cc;color:#eaf1ff;font-family:Inter,system-ui,Arial,sans-serif;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 34px #8df6ff14}#hud{left:18px;top:18px;padding:12px 14px;width:330px}#hud strong{display:block;font-size:12px;letter-spacing:.08em}#hud span{display:block;margin-top:6px;color:#b7c8ea;font-size:11px;line-height:1.35}#hud small{display:block;margin-top:6px;color:#667797;font-size:10px}#panel{right:18px;top:18px;width:370px;max-height:calc(100vh - 36px);overflow:auto;padding:12px}#panel h3{margin:14px 0 8px;color:#dfeaff;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.row{display:flex;flex-wrap:wrap;gap:8px}button,select{border:1px solid rgba(165,200,255,.28);border-radius:10px;background:#0a122ae0;color:#eaf1ff;padding:8px 10px;font-weight:800}button{cursor:pointer}button:hover{border-color:#8df6ffbf}select{width:100%}label{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;margin:7px 0;color:#91a2c2;font-size:11px}input[type=range]{width:100%}