*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{overflow:hidden;background:#0b0d0e;
     font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
canvas.webgl{position:fixed;top:0;left:0;width:100%;height:100%;touch-action:none;display:block}

/* ---- loading screen ---- */
.loading-screen{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:#1a1c1f center/cover no-repeat;
  transition:opacity .5s ease}
.loading-screen::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.loading-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.loading-text{color:#fff;font-size:1.5rem;margin-bottom:1rem;font-weight:500;
  text-shadow:0 2px 4px rgba(0,0,0,.35)}
.loading-sub{color:rgba(255,255,255,.82);font-size:.85rem;margin-bottom:1.25rem;font-weight:400;
  letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.progress-container{width:240px;height:30px;background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;
  overflow:hidden;position:relative}
.progress-bar{width:0%;height:100%;background:rgba(255,255,255,.9);border-radius:999px;
  transition:width .3s ease}
.progress-text{color:#fff;font-size:.875rem;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);font-weight:300;text-shadow:0 1px 2px rgba(0,0,0,.3);
  pointer-events:none}

/* ---- mode switcher ---- */
.control-panel{position:fixed;top:20px;left:20px;background:rgba(255,255,255,.9);
  padding:20px 30px;border-radius:30px;display:flex;flex-direction:column;gap:10px;z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.1);-webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel-title{font-size:13px;font-weight:600;color:#000;line-height:1.25;max-width:150px}
.panel-title span{display:block;font-weight:400;font-size:11px;color:#6b7280;margin-top:2px}
.mode-buttons{display:flex;flex-direction:column;gap:12px}
/* Standing note about the moving parts — matches the panel subtitle, since it is the same kind of
   thing: something about this room you would otherwise have to discover by accident. */
.artic-note{max-width:150px;font-size:11px;line-height:1.4;color:#374151;
  padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}
.mode-button{padding:8px 16px;border:2px solid #000;border-radius:20px;background:#fff;color:#000;
  cursor:pointer;font-family:inherit;font-size:14px;transition:all .2s ease;user-select:none;
  -webkit-user-select:none;width:120px;text-align:center;touch-action:manipulation}
.mode-button:hover:not(:disabled){background:#f0f0f0}
.mode-button.active{background:#000!important;color:#fff!important}
.mode-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
@media (hover:none){
  .mode-button:active:not(:disabled){background:#f0f0f0}
  .mode-button.active:active{background:#000!important;color:#fff!important}
}

/* ---- hint pill ---- */
/* Anchored bottom-right rather than centred at the top. Centred, it sits exactly on the compare
   divider and gets sliced down the middle; bottom-right keeps it inside one pane whichever way the
   split runs. The top-right corner is spoken for by the objects panel, so the free spot on the right
   is the bottom one, just above the corner link. The hints name every part you can click, so they
   run long — let them wrap inside a capped width rather than run off the screen. */
.fps-info{position:fixed;bottom:60px;right:16px;background:rgba(255,255,255,.9);
  padding:10px 20px;border-radius:20px;font-size:14px;line-height:1.35;z-index:1000;color:#000;
  box-shadow:0 2px 10px rgba(0,0,0,.1);pointer-events:none;opacity:0;transition:opacity .3s ease;
  max-width:min(420px,calc(100vw - 32px));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:768px){.fps-info{font-size:13px;padding:9px 16px;bottom:56px}}
.crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;
  background:rgba(255,255,255,.85);border-radius:50%;pointer-events:none;z-index:1000;
  box-shadow:0 0 4px rgba(0,0,0,.5);opacity:0;transition:opacity .3s ease}
@media (max-width:768px){.crosshair{width:4px;height:4px}}

/* ---- banana launcher ---- */
.banana-counter{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.9);padding:8px 16px;border-radius:20px;font-size:14px;z-index:1000;
  color:#000;box-shadow:0 2px 10px rgba(0,0,0,.1);opacity:0;transition:opacity .3s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;user-select:none}
.banana-counter.on{opacity:1}
.banana-counter .banana-icon{font-size:16px;line-height:1}
.banana-counter .count{font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.banana-counter:hover{background:#fff}
.banana-btn{position:fixed;right:24px;bottom:96px;width:64px;height:64px;border-radius:50%;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);z-index:1000;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.banana-btn.on{display:flex}
@media (max-width:768px){.banana-counter{top:16px;right:16px;padding:7px 13px;font-size:13px}}

/* ---- corner links ---- */
.corner-link{position:fixed;bottom:16px;right:16px;display:flex;align-items:center;gap:4px;
  padding:8px 21px;border-radius:20px;font-size:14px;color:#000;text-decoration:none;z-index:1000;
  background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.1);transition:all .3s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.corner-link:hover{background:#fff;color:#111827}
.corner-link span{font-weight:600}
.back-link{position:fixed;bottom:16px;left:16px;right:auto}
/* ---- objects panel (orbit only): hide / isolate parts, reveal structure ---- */
/* Stops short of the bottom so it never runs into the hint pill now parked in that corner; the body
   scrolls, so a long parts list loses nothing by it. */
.objects-panel{position:fixed;top:20px;right:20px;width:232px;max-height:calc(100% - 150px);
  display:flex;flex-direction:column;background:rgba(255,255,255,.9);border-radius:20px;z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow:hidden;font-size:13px;color:#0b0d0e}
.objects-panel[hidden]{display:none}
.op-head{display:flex;align-items:center;gap:6px;padding:14px 18px 10px;cursor:pointer;user-select:none}
.op-head b{font-size:14px} .op-count{color:#6b7280;font-size:12px}
.op-toggle{margin-left:auto;color:#6b7280;font-size:11px;transition:transform .2s}
.objects-panel.collapsed .op-toggle{transform:rotate(-90deg)}
.objects-panel.collapsed .op-actions,.objects-panel.collapsed .op-body{display:none}
.op-actions{display:flex;gap:6px;padding:0 14px 10px}
.op-actions button{flex:1;border:1.5px solid #0b0d0e;border-radius:14px;background:#fff;color:#0b0d0e;
  font:600 11px system-ui;padding:5px 0;cursor:pointer;transition:all .15s}
.op-actions button:hover{background:#f0f0f0}
.op-actions button.on{background:#0b0d0e;color:#fff}
.op-body{overflow-y:auto;padding:2px 8px 12px}
.op-grp{display:flex;align-items:center;gap:7px;padding:10px 8px 4px;cursor:pointer;user-select:none}
.op-car{color:#9098a3;font-size:9px;width:9px;flex:0 0 auto;transition:transform .15s}
.op-grp.collapsed .op-car{transform:rotate(-90deg)}
.op-gname{font-size:10px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.op-gct{color:#b3b9c2;font-size:10px;font-variant-numeric:tabular-nums}
.op-geye{margin-left:auto;color:#9098a3;font-size:13px;padding:0 2px}
.op-grp.ghidden .op-gname{color:#b3b9c2}
.op-row{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 16px;border-radius:10px;cursor:pointer}
.op-row:hover{background:rgba(0,0,0,.05)}
.op-row.off{opacity:.4}
.op-row.iso{background:rgba(11,13,14,.08);outline:1.5px solid rgba(11,13,14,.22)}
.op-sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.op-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-ct{color:#9098a3;font-size:11px;font-variant-numeric:tabular-nums} .op-eye{color:#9098a3;font-size:13px;padding:0 1px}

/* ---- camera views strip (orbit only), top-centre ---- */
.cam-strip{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;
  align-items:center;gap:10px;max-width:min(70vw,720px);padding:8px 14px;border-radius:20px;
  background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.1);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.cam-strip[hidden]{display:none}
.cam-strip-label{font-size:11px;font-weight:600;color:#6b7280;white-space:nowrap;flex:0 0 auto}
.cam-strip-rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cam-strip-rail::-webkit-scrollbar{display:none}
.cam-chip{flex:0 0 auto;position:relative;width:66px;height:44px;border-radius:9px;overflow:hidden;
  cursor:pointer;border:2px solid transparent;background:#d7dcdd center/cover no-repeat;transition:border-color .15s}
.cam-chip:hover{border-color:#9aa7b0}
.cam-chip.active{border-color:#0b0d0e}
.cam-chip span{position:absolute;left:0;right:0;bottom:0;font-size:9px;font-weight:600;color:#fff;
  text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.6));padding:5px 0 1px}

/* ---- render vs real side-by-side, bottom-centre; click to enlarge ---- */
.cmp-card{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1001;
  width:clamp(320px,46vw,600px);background:rgba(255,255,255,.94);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmp-card[hidden]{display:none}
.cmp-img{display:block;width:100%;height:auto;max-height:50vh;object-fit:contain;background:#111;cursor:zoom-in}
.cmp-bar{display:flex;align-items:center;gap:6px;padding:8px 10px}
.cmp-bar button{border:0;background:#eef0f2;color:#0b0d0e;border-radius:9px;width:30px;height:28px;
  cursor:pointer;font-size:12px;transition:background .15s}
.cmp-bar button:hover{background:#e0e3e6}
.cmp-cap{flex:1;text-align:center;font-size:12px;font-weight:600;color:#374151}
.cmp-lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);cursor:zoom-out;padding:24px}
.cmp-lightbox[hidden]{display:none}
.cmp-lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}

@media (max-width:768px){
  .control-panel{transform:scale(.75);transform-origin:top left;top:10px;left:10px}
  .corner-link{transform:scale(.85);transform-origin:bottom right}
  .back-link{transform-origin:bottom left}
  .fps-info{font-size:12px;padding:8px 14px}
  .objects-panel{transform:scale(.82);transform-origin:top right;width:214px}
  .cam-strip{max-width:82vw;top:12px;padding:6px 10px}
  .cmp-card{width:min(82vw,320px)}
}