storysplat-viewer 0.1.0

package/dist/esm/dist/styles/viewer.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["viewer.css"],"names":[],"mappings":"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","file":"viewer.css","sourcesContent":["/* Base Styles */\nbody, html { \n  margin: 0; \n  padding: 0; \n  overflow: hidden; \n  width: 100%; \n  height: 100%; \n  font-family: Arial, sans-serif; \n}\n\n#renderCanvas {\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n  display: block;\n}\n\n/* Preloader Styles */\n@keyframes storysplat-viewer-fadeOut { /* Renamed to avoid potential global conflicts */\n  from { opacity: 1; }\n  to { opacity: 0; }\n}\n\n#preloader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #1e1e1e;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 100000;\n  transition: opacity 0.5s ease-out;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Added default font */\n}\n\n#preloader.hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n#preloader-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px;\n  gap: 20px;\n}\n\n#preloader-media {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n}\n\n#preloader-image {\n  height: 200px;\n  width: auto;\n  object-fit: contain;\n}\n\n#preloader-image-inverted {\n  height: 200px;\n  width: auto;\n  object-fit: contain;\n  filter: invert(1);\n  margin-right: -100px;\n}\n\n#preloader-lottie {\n  height: 200px;\n  width: 200px;\n}\n\n@media (max-width: 768px) {\n  #preloader-image {\n    height: 100px;\n  }\n  #preloader-image-inverted {\n    height: 100px;\n    margin-right: -50px;\n  }\n  #preloader-lottie {\n    height: 100px;\n    width: 100px;\n  }\n}\n\n#preloader-progress {\n  width: 200px;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 2px;\n  margin-top: 20px;\n  overflow: hidden;\n}\n\n#preloader-progress-bar {\n  width: 0%;\n  height: 100%;\n  /* Default accent color, can be overridden with CSS variable */\n  background: var(--storysplat-viewer-accent-color, #4CAF50);\n  border-radius: 2px;\n  transition: width 0.3s ease-out;\n  position: relative;\n}\n\n#preloader-progress-text {\n  position: absolute;\n  top: -25px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: white;\n  font-size: 14px;\n  /* font-family inherited from #preloader */\n}\n\n/* Content Display Styles */\n#hotspotContent {\n  position: fixed;\n  background-color: rgba(0, 0, 0, 0.8);\n  color: white;\n  padding: 20px;\n  border-radius: 10px;\n  z-index: 100001;\n  box-shadow: 0 0 10px rgba(0,0,0,0.5);\n  display: none; /* Initially hidden */\n  font-size: 14px;\n  flex-direction: column;\n  max-width: 300px; /* Added sensible max-width */\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Added default font */\n}\n\n#hotspotContent img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 5px;\n  margin-top: 10px; /* Added spacing */\n}\n\n/* Optional: Styles for when hotspot content goes fullscreen (if viewer handles this) */\n#hotspotContent.fullscreen {\n  top: 0 !important;\n  left: 0 !important;\n  right: 0 !important;\n  bottom: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  margin: 0 !important;\n  border-radius: 0 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  flex-direction: column !important;\n  max-width: none !important; /* Override max-width */\n}\n\n#hotspotContent.fullscreen img {\n  width: 80% !important;\n  height: 80vh !important;\n  object-fit: contain !important;\n  margin-top: 0 !important; /* Reset spacing */\n}\n\n#infoPopup {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: rgba(0, 0, 0, 0.8);\n  color: white;\n  padding: 20px;\n  border-radius: 10px;\n  z-index: 100002; /* Ensure it's above hotspot content */\n  max-width: 80%;\n  box-shadow: 0 0 10px rgba(0,0,0,0.5);\n  display: none; /* Initially hidden */\n  font-size: 16px;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Added default font */\n}\n/* --- Hotspot Popup Styles --- */\n.storysplat-hotspot-popup {\n  position: absolute; /* Positioned by JavaScript */\n  display: none; /* Initially hidden */\n  background-color: rgba(0, 0, 0, 0.75); /* Default background */\n  color: white; /* Default text color */\n  padding: 15px;\n  border-radius: 6px;\n  max-width: 320px; /* Max width */\n  max-height: 450px; /* Max height */\n  overflow-y: auto; /* Allow scrolling if content exceeds max height */\n  z-index: 100; /* Ensure it's above the canvas */\n  pointer-events: auto; /* Allow interaction with popup content */\n  border: 1px solid #444;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.4);\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Consistent font */\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n.storysplat-hotspot-popup h3 {\n  margin-top: 0;\n  margin-bottom: 10px;\n  font-size: 1.1em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  padding-bottom: 5px;\n}\n\n.storysplat-hotspot-popup p {\n  margin-top: 0;\n  margin-bottom: 10px;\n  white-space: pre-wrap; /* Preserve line breaks in text */\n}\n\n.storysplat-hotspot-popup img {\n  max-width: 100%;\n  height: auto;\n  display: block;\n  border-radius: 4px;\n  margin-top: 5px;\n  margin-bottom: 10px;\n}\n\n.storysplat-hotspot-popup iframe {\n  width: 100%;\n  height: 250px; /* Default iframe height */\n  border: none;\n  margin-top: 5px;\n  margin-bottom: 10px;\n}\n\n.storysplat-hotspot-popup a {\n  display: inline-block;\n  padding: 8px 15px;\n  background-color: #007bff; /* Default button color */\n  color: white;\n  text-decoration: none;\n  border-radius: 4px;\n  margin-top: 10px;\n  transition: background-color 0.2s ease;\n}\n\n.storysplat-hotspot-popup a:hover {\n  background-color: #0056b3;\n}\n\n.storysplat-hotspot-popup button { /* Close button */\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  background: rgba(50, 50, 50, 0.8);\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  padding: 3px 7px;\n  font-size: 12px;\n  line-height: 1;\n  transition: background-color 0.2s ease;\n}\n\n.storysplat-hotspot-popup button:hover {\n  background: rgba(80, 80, 80, 0.9);\n}\n\n/* Scrollbar styling for popup */\n.storysplat-hotspot-popup::-webkit-scrollbar {\n  width: 6px;\n}\n\n.storysplat-hotspot-popup::-webkit-scrollbar-track {\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 3px;\n}\n\n.storysplat-hotspot-popup::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 3px;\n}\n\n.storysplat-hotspot-popup::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.5);\n}\n/* --- Navigation UI Styles --- */\n.storysplat-progress-bar {\n  position: absolute;\n  bottom: 20px; /* Adjust position as needed */\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80%; /* Adjust width as needed */\n  max-width: 600px;\n  height: 6px; /* Slightly thicker */\n  background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */\n  border-radius: 3px;\n  overflow: hidden;\n  z-index: 100; /* Ensure it's above canvas */\n  pointer-events: none; /* Don't block interactions below */\n}\n\n.storysplat-progress-indicator {\n  width: 0%; /* Controlled by JavaScript */\n  height: 100%;\n  background-color: var(--storysplat-viewer-accent-color, #ffffff); /* Use accent color or white */\n  border-radius: 3px;\n  transition: width 0.1s linear; /* Smooth transition */\n}\n\n/* --- Scroll Controls Container (Bottom center like HTML exports) --- */\n.storysplat-scroll-controls {\n  position: absolute;\n  bottom: 0px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 150px;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 5px;\n  z-index: 1000;\n  background: rgba(0, 0, 0, 0.7);\n  border-radius: 8px;\n}\n\n.storysplat-scroll-percentage {\n  font-size: 18px;\n  color: white;\n}\n\n/* --- Waypoint Info Display (Top of screen like HTML exports) --- */\n.storysplat-waypoint-info {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.5);\n  color: white;\n  text-align: center;\n  z-index: 1000;\n  pointer-events: none;\n  display: none;\n  font-family: system-ui, -apple-system, sans-serif;\n}\n\n.storysplat-waypoint-info.hasContent {\n  padding-left: 30px;\n  padding-right: 30px;\n  padding-bottom: 30px;\n  padding-top: 50px;\n}\n\n.storysplat-nav-buttons {\n  position: absolute;\n  bottom: 40px; /* Adjust position relative to progress bar or viewport */\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 15px; /* Space between buttons */\n  z-index: 101; /* Above progress bar */\n}\n\n.storysplat-nav-button {\n  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */\n  color: white;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 4px; /* Rectangular buttons */\n  padding: 8px 16px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n  user-select: none; /* Prevent text selection */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n}\n\n.storysplat-nav-button:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.8);\n  border-color: rgba(255, 255, 255, 0.6);\n}\n\n.storysplat-nav-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n/* --- Camera Mode Toggle Styles --- */\n.storysplat-camera-mode-toggle,\n.storysplat-walk-explore-toggle {\n  position: absolute;\n  top: 15px; /* Position near top */\n  right: 15px;\n  display: flex;\n  gap: 8px;\n  z-index: 1001; /* Above progress bar */\n  background-color: rgba(0, 0, 0, 0.6); /* Optional background for grouping */\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.storysplat-mode-button {\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 4px;\n  padding: 6px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n  user-select: none;\n}\n\n.storysplat-mode-button:hover:not(.active) {\n  background-color: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.5);\n}\n\n.storysplat-mode-button.active {\n  background-color: var(--storysplat-viewer-accent-color, #ffffff); /* Use accent color or white */\n  color: #1e1e1e; /* Dark text for contrast */\n  border-color: var(--storysplat-viewer-accent-color, #ffffff);\n  cursor: default;\n}\n\n/* Specific positioning if both toggles are shown (adjust as needed) */\n.storysplat-camera-mode-toggle + .storysplat-walk-explore-toggle {\n  top: 60px; /* Position below the general toggle */\n}\n\n/* --- Mobile Joystick Styles --- */\n.storysplat-mobile-joystick {\n  position: absolute;\n  bottom: 20px;\n  left: 20px;\n  width: 100px; /* Adjust size as needed */\n  height: 100px;\n  background-color: rgba(0, 0, 0, 0.3); /* Placeholder background */\n  border-radius: 50%;\n  z-index: 101;\n  display: none; /* Hidden by default, shown by JS */\n  /* Add styles for the actual joystick elements (e.g., from nipplejs) */\n}\n\n/* Example for nipplejs integration (adjust selectors based on library) */\n.storysplat-mobile-joystick .back {\n  /* Styles for joystick background */\n  background-color: rgba(0, 0, 0, 0.3) !important;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.storysplat-mobile-joystick .front {\n  /* Styles for joystick nub */\n   background-color: rgba(255, 255, 255, 0.5) !important;\n}\n/* ================================== */\n/* === NEW UI MODULE STYLES START === */\n/* ================================== */\n\n/* --- Preloader UI --- */\n#storysplat-preloader {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.85);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 2000;\n  color: white;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  transition: opacity 0.5s ease-out;\n  opacity: 1; /* Start visible */\n}\n\n#storysplat-preloader.hidden { /* Class for hiding */\n  opacity: 0;\n  pointer-events: none;\n}\n\n#storysplat-preloader-logo {\n  margin-bottom: 20px;\n  max-width: 150px;\n  max-height: 100px;\n  display: block; /* Default display */\n}\n\n#storysplat-preloader-logo.empty { /* Class if no logo specified */\n    display: none;\n}\n\n#storysplat-preloader-logo img {\n  max-width: 100%;\n  max-height: 100%;\n  display: block;\n}\n\n/* Basic Lottie placeholder style (can be enhanced if library is added) */\n#storysplat-preloader-logo > div {\n  width: 100%;\n  height: 100%;\n  background: #333;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 5px;\n  text-align: center;\n  padding: 5px;\n  box-sizing: border-box;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n#storysplat-preloader-progress-container {\n  width: 80%;\n  max-width: 300px;\n  height: 10px;\n  background-color: #555;\n  border-radius: 5px;\n  overflow: hidden;\n  margin-bottom: 10px;\n}\n\n#storysplat-preloader-progress-bar {\n  width: 0%;\n  height: 100%;\n  /* Use CSS variable, fallback to default */\n  background-color: var(--storysplat-viewer-preloader-color, var(--storysplat-viewer-accent-color, #4CAF50));\n  transition: width 0.3s ease;\n}\n\n#storysplat-progress-text {\n  font-size: 14px;\n  margin-top: 5px;\n}\n\n/* --- Start Button UI --- */\n#storysplat-start-overlay,\n#startButtonContainer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 5000;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: opacity 0.5s ease-out;\n  opacity: 1; /* Start visible */\n}\n\n#storysplat-start-overlay.hidden,\n#startButtonContainer.hidden { /* Class for hiding */\n    opacity: 0;\n    pointer-events: none;\n}\n\n#storysplat-start-button,\n#startButton {\n  padding: 20px 40px;\n  font-size: 24px;\n  cursor: pointer;\n  /* Use CSS variable, fallback to default */\n  background-color: rgba(255, 255, 255, 0.25);\n  color: white;\n  border: none;\n  border-radius: 5px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n  transition: background-color 0.3s ease;\n}\n\n#storysplat-start-button:hover,\n#startButton:hover {\n  background-color: rgba(255, 255, 255, 0.35);\n}\n\n\n/* --- Watermark UI --- */\n#storysplat-watermark,\n.watermark {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  z-index: 1001;\n  background-color: rgba(0, 0, 0, 0.5);\n  color: rgba(255, 255, 255, 0.7);\n  padding: 3px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  text-decoration: none;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  transition: color 0.2s ease;\n}\n\n#storysplat-watermark:hover,\n.watermark:hover {\n  color: rgba(255, 255, 255, 1);\n}\n\n/* --- Help Panel UI --- */\n#storysplat-help-button {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.6);\n  color: white;\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  cursor: pointer;\n  font-size: 20px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1002;\n  transition: transform 0.1s ease-out;\n  transform: scale(1); /* Base scale */\n}\n\n#storysplat-help-button:hover {\n  transform: scale(1.1);\n}\n\n#storysplat-help-panel {\n  display: none; /* Hidden by default */\n  position: absolute;\n  top: 55px;\n  left: 10px;\n  background-color: rgba(20, 20, 20, 0.9);\n  color: #eee;\n  padding: 15px 20px;\n  border-radius: 8px;\n  max-width: 350px;\n  max-height: calc(100vh - 70px);\n  overflow-y: auto;\n  z-index: 1001;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 14px;\n  line-height: 1.6;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  opacity: 0;\n  transform: translateY(-10px);\n}\n\n#storysplat-help-panel.visible { /* Class to show panel */\n  display: block;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n#storysplat-help-panel h3 {\n  margin-top: 0;\n  margin-bottom: 15px;\n  color: white;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  padding-bottom: 8px;\n}\n\n#storysplat-help-panel p {\n  margin-bottom: 10px;\n}\n\n#storysplat-help-panel ul {\n  margin: 0 0 15px 20px;\n  padding: 0;\n  list-style: disc;\n}\n\n/* Optional: Scrollbar styling for help panel */\n#storysplat-help-panel::-webkit-scrollbar {\n  width: 6px;\n}\n#storysplat-help-panel::-webkit-scrollbar-track {\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 3px;\n}\n#storysplat-help-panel::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.4);\n  border-radius: 3px;\n}\n#storysplat-help-panel::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.6);\n}\n\n\n/* ================================ */\n/* === NEW UI MODULE STYLES END === */\n/* ================================ */\n/* --- Mute Button Styles --- */\n.storysplat-mute-button,\n#muteButton {\n    position: fixed;\n    bottom: 10px;\n    left: 10px;\n    padding: 5px 8px;\n    background: rgba(0, 0, 0, 0.3);\n    color: white;\n    border: none;\n    border-radius: 3px;\n    cursor: pointer;\n    font-size: 12px;\n    z-index: 1000;\n    transition: background-color 0.2s ease;\n}\n\n.storysplat-mute-button:hover,\n#muteButton:hover {\n    background: rgba(0, 0, 0, 0.5);\n}\n\n/* --- Fullscreen Button Styles --- */\n#fullscreenButton {\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n    background-color: rgba(0, 0, 0, 0.5);\n    border: none;\n    border-radius: 8px;\n    cursor: pointer;\n    z-index: 1000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.3s ease;\n}\n\n#fullscreenButton:hover {\n    background-color: rgba(0, 0, 0, 0.8);\n}\n\n#fullscreenButton svg {\n    width: 24px;\n    height: 24px;\n    fill: white;\n}\n\n/* --- Scroll Controls Styles --- */\n#waypointInfo {\n    margin-bottom: 10px;\n    border-radius: 4px;\n    font-size: 14px;\n    display: none;\n}\n\n#scrollControls {\n    position: absolute;\n    bottom: 45px;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: rgba(0,0,0,0.7);\n    padding: 15px;\n    border-radius: 10px;\n    color: white;\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    max-width: 350px;\n}\n\n#scrollControlsContent {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    transition: opacity 0.3s ease-in-out;\n    width: 100%;\n}\n\n#scrollControlsContent.hidden {\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n}\n\n#scrollPercentage {\n    font-size: 18px;\n    margin-bottom: 10px;\n}\n\n#progressBarContainer {\n    width: 200px;\n    height: 10px;\n    background-color: rgba(255,255,255,0.3);\n    border-radius: 5px;\n    overflow: hidden;\n    margin-bottom: 10px;\n}\n\n#progressBar {\n    width: 0%;\n    height: 100%;\n    background-color: var(--storysplat-viewer-accent-color, #4CAF50);\n    transition: width 0.3s ease;\n}\n\n/* Button Styles */\n.button {\n    background-color: var(--storysplat-viewer-accent-color, #4CAF50);\n    border: none;\n    color: white;\n    padding: 10px 20px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 16px;\n    margin: 4px 2px;\n    cursor: pointer;\n    border-radius: 5px;\n    transition: background-color 0.3s;\n}\n\n#scrollButtons {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    margin-bottom: 0;\n    z-index: 1000;\n}\n\n#toggleCameraMode {\n    background-color: var(--storysplat-viewer-accent-color, #4CAF50);\n    border: none;\n    color: white;\n    padding: 10px 20px;\n    text-align: center;\n    text-decoration: none;\n    display: inline-block;\n    font-size: 16px;\n    margin: 4px 2px;\n    cursor: pointer;\n    border-radius: 5px;\n    transition: background-color 0.3s;\n}\n\n.button:hover, #toggleCameraMode:hover {\n    filter: brightness(0.9);\n}\n\n/* Walk Mode Toggle Button */\n#walkToggleButton {\n    position: fixed;\n    bottom: 60px;\n    right: 10px;\n    background-color: rgba(0, 0, 0, 0.5);\n    color: white;\n    border: none;\n    padding: 10px 20px;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 14px;\n    transition: all 0.3s ease;\n    z-index: 1000;\n    display: none;\n}\n\n#walkToggleButton.selected {\n    background-color: var(--storysplat-viewer-accent-color, #4CAF50);\n}\n\n#walkToggleButton:hover {\n    filter: brightness(0.9);\n}\n\n/* --- Mobile-specific Styles --- */\n@media (max-width: 768px) {\n    #scrollControls {\n        bottom: 20px;\n        padding: 10px;\n        max-width: 90%;\n    }\n    \n    #progressBarContainer {\n        width: 150px;\n    }\n    \n    .button,\n    #toggleCameraMode {\n        padding: 8px 15px;\n        font-size: 14px;\n    }\n    \n    #scrollPercentage {\n        font-size: 16px;\n    }\n    \n    #storysplat-help-panel {\n        max-width: calc(100vw - 40px);\n        max-height: calc(100vh - 100px);\n    }\n    \n    .storysplat-hotspot-popup {\n        max-width: calc(100vw - 40px);\n        max-height: 60vh;\n    }\n}\n\n/* --- Z-index Hierarchy --- */\n/* \n * Z-index reference for proper layering:\n * 100000 - Preloader (#preloader)\n * 100001 - Hotspot content (#hotspotContent)\n * 100002 - Info popup (#infoPopup)\n * 5000   - Start button container (#startButtonContainer)\n * 2000   - StorySplat preloader (#storysplat-preloader)\n * 1500   - Start overlay (#storysplat-start-overlay)\n * 1002   - Help button (#storysplat-help-button)\n * 1001   - Help panel, watermark\n * 1000   - General UI controls (mute, fullscreen, scroll controls)\n * 100    - Canvas overlays (hotspot popups, navigation UI)\n */\n\n/* --- Additional Utility Classes --- */\n.hidden {\n    display: none !important;\n}\n\n.fade-out {\n    animation: storysplat-viewer-fadeOut 0.5s ease-out forwards;\n}"]}