:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f8fafc;
  --panel-2: #eef2f7;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0ea5e9;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: rgba(15, 23, 42, 0.10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The minified bundle toggles `.hidden` on #cameraControl whenever a scene
   loads (vd() in viewer.bundle.js). Force-hide it via CSS so the bundle's
   attribute changes can't bring the slider back. */
#cameraControl, #resetView { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

.hero { padding: 42px 28px 24px; max-width: 1180px; margin: 0 auto; }
.hero h1 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 58px); letter-spacing: -0.04em; line-height: 0.96; }
.hero p { margin: 0; max-width: 920px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero p + p { margin-top: 16px; }

.toolbar { flex: 0 0 auto; z-index: 10; backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--border); }
.toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 10px 20px; }
.control { display: grid; gap: 5px; }
.control span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
select, button, input[type="range"] { font: inherit; }
select, button { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
button { cursor: pointer; transition: background 120ms ease, transform 120ms ease; }
button:hover { background: #e2e8f0; }
button:active { transform: translateY(1px); }
.range-row { display: flex; align-items: center; gap: 10px; min-width: min(360px, 100%); }
.range-row input { width: 260px; max-width: 55vw; }
#stepLabel, #pointLabel, #cameraLabel { color: var(--accent); min-width: 42px; font-variant-numeric: tabular-nums; }
/* Push the cameras toggle to the right edge of the toolbar.
   Bundle rewrites the button's text on each click (gd() in viewer.bundle.js),
   so capitalize via CSS rather than fighting it in HTML. */
#toggleCameras { margin-left: auto; text-transform: capitalize; }

.main { flex: 1 1 auto; min-height: 0; max-width: 1180px; width: 100%; margin: 0 auto; padding: 12px 20px; display: flex; flex-direction: column; }
.description-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 16px 42px var(--shadow);
}
.description-card h2 { margin: 0 0 10px; font-size: 20px; }
.description-card p { margin: 8px 0 0; max-width: 980px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.viewer-card { flex: 1 1 auto; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: 0 16px 42px var(--shadow); display: flex; flex-direction: column; }
.viewer-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.viewer-header h2 { margin: 0; font-size: 16px; }
.viewer-header .meta { color: var(--muted); font-size: 12px; }
#viewer { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; width: 100%; background: radial-gradient(circle at 50% 38%, #ffffff, #e2e8f0 70%); }
#viewer canvas { display: block; width: 100%; height: 100%; outline: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.loading-panel {
  display: grid;
  gap: 12px;
  width: min(340px, calc(100% - 48px));
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px var(--shadow);
  backdrop-filter: blur(12px);
  text-align: center;
}
.loading-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}
.loading-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #a78bfa);
  animation: loading-sweep 1.15s ease-in-out infinite;
}
@keyframes loading-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}
.camera-error-legend {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 7px;
  width: min(280px, calc(100% - 28px));
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
  backdrop-filter: blur(10px);
}
.camera-error-legend[hidden] { display: none; }
.camera-error-legend span { grid-column: 1 / -1; color: var(--text); font-weight: 650; }
.camera-error-legend strong { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; }
.camera-error-ramp { grid-column: 1 / 2; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #eab308, #dc2626); }


.scene-strip {
  flex: 0 0 auto;
  position: relative;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.04);
}
.scene-strip-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  /* "safe center" centers when content fits, but falls back to start
     when the strip overflows so the leftmost tile is not cut off. */
  justify-content: safe center;
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.scene-strip-track::-webkit-scrollbar { display: none; }
.scene-strip[data-at-start="true"] .scene-strip-track,
.scene-strip[data-overflow="false"] .scene-strip-track { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); }
.scene-strip[data-at-end="true"] .scene-strip-track { mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%); }
.scene-strip[data-overflow="false"][data-at-end="true"] .scene-strip-track,
.scene-strip[data-at-start="true"][data-at-end="true"] .scene-strip-track { mask-image: none; }

.scene-tile {
  flex: 0 0 auto;
  width: 140px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  position: relative;
}
.scene-tile:hover { transform: translateY(-2px); border-color: rgba(15, 23, 42, 0.28); }
.scene-tile.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--text) inset, 0 10px 28px var(--shadow);
}
.scene-tile-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
}
.scene-tile-media > video,
.scene-tile-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scene-tile-placeholder {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--muted);
}
.scene-tile.active .scene-tile-placeholder { color: var(--text); }

.scene-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.scene-strip-arrow:hover { background: #e2e8f0; }
.scene-strip-arrow[data-direction="-1"] { left: 6px; }
.scene-strip-arrow[data-direction="1"]  { right: 6px; }
.scene-strip[data-overflow="true"] .scene-strip-arrow { display: block; }
.scene-strip[data-overflow="true"][data-at-start="true"] .scene-strip-arrow[data-direction="-1"] { display: none; }
.scene-strip[data-overflow="true"][data-at-end="true"] .scene-strip-arrow[data-direction="1"] { display: none; }

@media (max-width: 720px) {
  .hero, .toolbar-inner, .main { padding-inline: 12px; }
  .viewer-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .scene-tile { width: 120px; }
  .toolbar-inner { padding: 8px 12px; gap: 8px; }
  .range-row input { width: 180px; }
}