html, body { height:100%; margin:0; }
body { display:flex; align-items:center; justify-content:center; background:#0b0b0b; color:#e6e6e6; font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
main { width:min(960px, 94vw); padding:24px; position:fixed; top:16px; left:16px; max-height:90vh; overflow:auto; background:rgba(15,15,15,0.92); border:1px solid #333; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
h1 { margin:0 0 12px; }
p { margin:0 0 16px; opacity:0.9; }
.btn { appearance:none; border:1px solid #3a3a3a; background:#161616; color:#e6e6e6; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600; }
.btn:hover { background:#222; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
video { width:100%; max-height:60vh; background:#000; border:1px solid #333; border-radius:8px; }
#vid { display: none; }
#three-canvas { position: fixed; inset: 0; z-index: 1; }
.hidden { display:none; }
#controlsBar { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; align-items:center; background:rgba(15,15,15,0.92); border:1px solid #333; border-radius:10px; padding:8px 12px; transition:opacity .25s ease; }
#controlsBar.fade { opacity:0.2; }
#status { font-size:13px; opacity:0.9; }

/* GUI nudger buttons for fine increments */
.lil-gui .nudgers { display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle; }
.lil-gui .nudge-btn {
  appearance:none; border:1px solid #3a3a3a; background:#1a1a1a; color:#e6e6e6;
  width:18px; height:18px; line-height:16px; padding:0; border-radius:4px; cursor:pointer;
}
.lil-gui .nudge-btn:hover { background:#222; }
.lil-gui .reset-btn {
  appearance:none; border:1px solid #3a3a3a; background:#181818; color:#e6e6e6;
  width:20px; height:18px; line-height:16px; padding:0; border-radius:4px; cursor:pointer;
}
.lil-gui .reset-btn:hover { background:#222; }


/* Modal */
.modal { position:fixed; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); }
.modal.hidden { display:none; }
.modal .modal-inner { width:min(520px, 92vw); background:#101010; border:1px solid #333; border-radius:10px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.4); }
.modal h2 { margin:0 0 8px; }
.modal p { margin:0 0 12px; opacity:0.9; }
.modal .row { justify-content:flex-end; }


.nav-loading { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:9999; pointer-events:none; opacity:0; transition:opacity 0.3s ease; }
.nav-loading.visible { pointer-events:auto; opacity:1; }
.nav-loading.hidden { opacity:0; }
.nav-loading-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(6px); }
.nav-loading-spinner { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 36px; border-radius:14px; background:rgba(18,18,28,0.9); border:1px solid rgba(102,126,234,0.25); box-shadow:0 12px 36px rgba(0,0,0,0.45); color:#f0f4ff; font-size:14px; }
.nav-loading-spinner svg { width:72px; height:72px; }
.nav-loading-spinner .ring { fill:none; stroke:rgba(255,255,255,0.15); stroke-width:6; }
.nav-loading-spinner .arc { fill:none; stroke:#6a8bff; stroke-width:6; stroke-linecap:round; stroke-dasharray:120; stroke-dashoffset:105; transform-origin:50% 50%; animation:nav-spinner 1.1s linear infinite; }
.nav-loading-text { letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:#cfd6ff; }
@keyframes nav-spinner { 0% { stroke-dashoffset:105; transform:rotate(0deg); } 100% { stroke-dashoffset:-15; transform:rotate(360deg); } }