*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#e6e6e6;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#canvas{position:fixed;inset:0;display:block;width:100vw;height:100vh;background:#000;touch-action:none}
.hud{position:fixed;top:10px;left:10px;background:#0a0a0acc;border:1px solid #1d1d1d;border-radius:8px;padding:4px 8px;font-size:12px;color:#cfcfcf;z-index:20}
.gear{position:fixed;top:10px;right:10px;background:#0b0b0bd9;border:1px solid #2a2a2a;border-radius:12px;padding:6px 10px;font-size:18px;cursor:pointer;color:#e6e6e6;z-index:21}
.gear:hover{border-color:#3a3a3a}
.panel{position:fixed;right:10px;bottom:10px;left:10px;max-width:min(1100px,94vw);margin:0 auto;border:1px solid #1d1d1d;border-radius:16px;padding:12px;background:#0b0b0fee;backdrop-filter:blur(8px);z-index:22;max-height:72vh;overflow:auto}
.panel.hidden{display:none}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:10px}
@media (max-width: 900px){.row{grid-template-columns:1fr}}
.col label{display:block;font-size:13px;color:#d0d0d0;margin-bottom:6px}
input[type=range]{width:100%}
button{background:#0a0a0a;border:1px solid #2a2a2a;border-radius:10px;color:#e6e6e6;padding:8px 10px;font-size:14px;cursor:pointer}
button:hover{border-color:#3a3a3a}
hr{border:none;border-top:1px solid #1f1f1f;margin:8px 0}
.tip{color:#9a9a9a;font-size:12px;margin:6px 2px 0}
kbd{background:#111;border:1px solid #333;border-bottom-color:#222;border-radius:4px;padding:0 4px}
.sliderWrap{margin:6px 0}
.sliderWrap label{display:block;font-size:12px;margin-bottom:4px}