@font-face { font-family: "Aeonik"; src: url("/assets/fonts/Aeonik-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("/assets/fonts/Aeonik-Medium.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { color-scheme: dark; --accent: #c7ff18; --chrome: rgba(12,13,15,.96); --line: rgba(255,255,255,.16); }
* { box-sizing: border-box; }
html, body, .viewer { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #07080a; color: #f7f7f2; font-family: "Aeonik", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.viewer { position: relative; background: #101215 url("/lidarsample/assets/factory-floor.jpg") center / cover no-repeat; }
.scene-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; }

.loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 11px; color: rgba(255,255,255,.8); background: rgba(8,9,10,.42); font: 11px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; transition: opacity 500ms ease, visibility 500ms ease; pointer-events: none; }
.loading.is-hidden { opacity: 0; visibility: hidden; }
.loading-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgba(199,255,24,.75); animation: pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; transform: scale(.7); } }

.scene-switcher { position: fixed; z-index: 4; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 900px); min-height: 70px; padding: 8px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 18px; color: #f4f4ef; background: var(--chrome); box-shadow: 0 18px 55px rgba(0,0,0,.32); }
.switcher-label { padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #aeb0aa; font: 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.switcher-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(199,255,24,.75); }
.scene-tabs { min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.scene-tabs::-webkit-scrollbar { display: none; }
.scene-tab { position: relative; min-width: 190px; height: 52px; padding: 8px 42px 8px 14px; display: grid; align-content: center; gap: 2px; color: #b8bab4; background: transparent; border: 0; border-radius: 12px; text-align: left; font: inherit; cursor: pointer; transition: color 180ms ease, background 180ms ease; }
.scene-tab::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.scene-tab:hover { color: white; background: rgba(255,255,255,.06); }
.scene-tab.is-active { color: #0a0b0c; background: #f3f3ef; }
.scene-tab.is-active::after { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 9px rgba(199,255,24,.5); }
.scene-type { font: 9px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.scene-tab strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.scene-count { padding: 0 10px; color: #8e908b; white-space: nowrap; font: 10px "IBM Plex Mono", monospace; letter-spacing: .06em; }

button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .scene-switcher { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 20px); min-height: 64px; grid-template-columns: minmax(0,1fr) auto; border-radius: 16px; }
  .switcher-label { display: none; }
  .scene-tab { min-width: 145px; flex: 0 0 auto; height: 48px; padding: 8px 22px 8px 10px; }
  .scene-tab::after { right: 8px; width: 6px; height: 6px; }
  .scene-tab strong { font-size: 12px; }
  .scene-count { padding: 0 4px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) { .loading { transition: none; } .loading-mark { animation: none; } }

body[data-scene="linden-workshop"] .viewer { background-image: url("/lidarsample2/Review/render-017.jpg"); }

body[data-scene="medical-warehouse"] .viewer { background-image: url("/medical-warehouse-scan/Review/render-042.jpg"); }