/* Variables, layout general, visor 3D y capas superpuestas (FPS, loader, confeti) */
:root{
  --bg:#14161a; --panel:#1c1f26; --panel2:#22262f; --border:#2e333d;
  --text:#e7e9ee; --dim:#8a90a0; --accent:#5b9dff; --err:#ff6b6b;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
body{overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;}
#app{display:flex;height:100%;}
#viewport{flex:1;position:relative;min-width:0;}
#viewport canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;}
#watermark{position:absolute;top:12px;left:12px;width:56px;height:56px;border-radius:12px;object-fit:cover;opacity:.85;pointer-events:none;z-index:1;}
#dropHint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:8px;pointer-events:none;text-align:center;color:var(--dim);padding:24px;}
#dropHint b{color:var(--text);font-size:18px;}
#fps{position:absolute;top:12px;right:12px;padding:3px 8px;border-radius:6px;background:rgba(20,22,26,.7);border:1px solid var(--border);color:var(--text);font-size:12px;font-variant-numeric:tabular-nums;pointer-events:none;z-index:1;}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;}
#loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(20,22,26,.55);}
#loader[hidden]{display:none;}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}