:root { --bg:#070a12; --panel:rgba(16,22,38,.8); --line:rgba(255,255,255,.12); --text:#eaf1f8; --mut:#9aabbd; --acc:#7dd3fc;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text); }
[hidden] { display:none !important; }
canvas#c { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
canvas#c.drag { cursor:grabbing; }
button { font:inherit; color:inherit; cursor:pointer; }
#nav { position:fixed; top:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; padding:6px; max-width:calc(100% - 20px); overflow-x:auto;
  background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; z-index:2; }
#nav button { background:transparent; border:1px solid transparent; border-radius:10px; padding:7px 12px; white-space:nowrap; font-size:14px; }
#nav button.on { background:rgba(125,211,252,.16); border-color:var(--acc); }
#panel { position:fixed; top:64px; left:12px; width:290px; max-height:calc(100% - 80px); overflow:auto; padding:14px;
  background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; }
h1 { font-size:18px; margin:0 0 6px; }
#desc { font-size:13px; line-height:1.45; margin:0 0 8px; }
#fact { font-size:12px; line-height:1.4; color:var(--mut); margin:0 0 10px; padding-left:8px; border-left:2px solid var(--acc); }
.ctl { display:block; margin:9px 0; font-size:13px; }
.ctl b { color:var(--acc); float:right; font-weight:600; }
.ctl input[type=range], .ctl select { width:100%; margin-top:4px; }
.ctl select { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:6px; }
.ctl select option { color:#000; }
.btn { background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:9px; padding:7px 10px; }
.btn.full { width:100%; margin:6px 0 0; }
.chk { display:flex; gap:7px; align-items:center; font-size:13px; margin:8px 0; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.row .chk { flex:1 1 100%; margin:0; }
#stat { font-size:12px; color:var(--mut); margin-top:8px; font-variant-numeric:tabular-nums; line-height:1.5; }
#stat b { color:var(--text); }
#fps { position:fixed; right:12px; top:12px; font-size:11px; color:var(--mut); }
#hint { position:fixed; bottom:8px; left:0; right:0; text-align:center; font-size:12px; color:var(--mut); pointer-events:none; }
#noGL { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:9; }
@media (max-width:700px) { #panel { top:auto; bottom:28px; width:calc(100% - 24px); max-height:40%; } #fps { display:none; } }