:root { --publication-text: #fff; --publication-overlay: .36; }
#viewerBranding, #showCollision, #settings, #settingsPanel, #enterFullscreen, #exitFullscreen, #arMode, #vrMode, #play, #pause, .publication-hidden { display: none !important; }
#viewerTitle { pointer-events: none !important; cursor: default !important; }
#viewerTitle svg, #viewerTitle .title-version { display: none !important; }
#application-canvas { transform: scale(1); filter: blur(0); transition: filter 900ms ease, transform 900ms ease; transform-origin: center; }
html.publication-loading #application-canvas { transform: scale(1.045); filter: blur(24px); }
#publicationLoadingOverlay { position: fixed; z-index: 57; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 12px; width: min(260px, calc(100vw - 56px)); padding: 18px 20px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(12,16,23,.46); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 60px rgba(0,0,0,.36); pointer-events: none; }
html.publication-loading #publicationLoadingOverlay { display: flex; }
#publicationLoadingOverlay .publication-loading-text { font: 700 12px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
#publicationLoadingOverlay .publication-loading-track { position: relative; width: 100%; height: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.24); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#publicationLoadingOverlay .publication-loading-track::after { content: ''; position: absolute; inset: 0 auto 0 -35%; width: 35%; border-radius: inherit; background: rgba(5,7,10,.96); animation: publication-loading-bar 1.15s ease-in-out infinite; }
#loadingWrap { z-index: 50; bottom: max(28px, env(safe-area-inset-bottom)) !important; width: min(420px, calc(100vw - 40px)) !important; padding: 0 !important; pointer-events: none; }
#loadingWrap > #loadingText { margin-bottom: 8px; font: 500 12px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#loadingWrap > #loadingBar { position: relative; height: 5px; margin-top: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background-color: rgba(255,255,255,.24); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#loadingWrap > #loadingBar:not([style])::after { content: ''; position: absolute; inset: 0 auto 0 -35%; width: 35%; border-radius: inherit; background: rgba(5,7,10,.96); animation: publication-loading-bar 1.15s ease-in-out infinite; }
@keyframes publication-loading-bar { 0% { left: -35%; } 100% { left: 100%; } }
#controlsWrap > #timelineContainer > #handle { background-color: #dfe3ea !important; }
#controlsWrap > #buttonsContainer .controlButton.active:not(.toggle) { color: #fff !important; }
#controlsWrap > #buttonsContainer .controlButton.toggle { background: linear-gradient(90deg, transparent 0%, transparent 50%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.16) 100%) !important; }
#settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack { background-color: rgba(255,255,255,.18) !important; }
#settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack .toggleThumb { background-color: #dfe3ea !important; }
#infoPanel > #infoPanelContent > #viewerTitle > svg > g.fill { fill: #dfe3ea !important; }
#infoPanel > #infoPanelContent > #infoPanels h1 { color: #dfe3ea !important; }
#infoPanel > #infoPanelContent > #tabs > .tab.active { border-bottom-color: #dfe3ea !important; }
#xrModal > #xrModalContent > #xrModalButtons > button#xrModalOk { background-color: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.28) !important; }
#xrModal > #xrModalContent > #xrModalButtons > button#xrModalOk:hover { background-color: rgba(255,255,255,.22) !important; }
#controlsWrap, #controlsWrap.faded-in, #controlsWrap.faded-out { visibility: visible !important; opacity: 1 !important; transition: none !important; }
#controlsWrap { z-index: 55; pointer-events: auto !important; }
#controlsWrap > #buttonsContainer, #controlsWrap.faded-in > #buttonsContainer, #controlsWrap.faded-out > #buttonsContainer { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; }
#controlsWrap > #buttonsContainer { justify-content: flex-end; }
#controlsWrap > #buttonsContainer .buttonGroup:has(> .publication-nav-text) { gap: 6px; background: transparent; }
#orbitCamera.publication-nav-text, #flyCamera.publication-nav-text, #fpsCamera.publication-nav-text, #play.publication-nav-text, #pause.publication-nav-text { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 52px; height: 34px; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 8px !important; color: rgba(255,255,255,.82) !important; background: rgba(17,21,29,.42) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 500 12px/1 system-ui, sans-serif; text-transform: lowercase; }
#controlsWrap > #buttonsContainer .publication-nav-text.active { color: #fff !important; border-color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.24) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.3) !important; font-weight: 800 !important; }
#controlsWrap > #buttonsContainer .publication-nav-text.active::before, #publicationPerformance.active::before, #publicationMeasure.active::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.75); }
#controlsWrap > #buttonsContainer .publication-nav-text:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.publication-nav-text svg { display: none !important; }
#publicationPerformance, #publicationMeasure, #publicationMeasureClear { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important; min-width: 64px; height: 34px; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 8px !important; color: rgba(255,255,255,.82) !important; background: rgba(17,21,29,.42) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 500 12px/1 system-ui, sans-serif; text-transform: lowercase; }
#publicationPerformance { min-width: 88px; }
#publicationPerformance.active, #publicationMeasure.active { color: #fff !important; border-color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.24) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.3) !important; font-weight: 800 !important; }
#publicationPerformance:hover, #publicationMeasure:hover, #publicationMeasureClear:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; }
#publicationMeasure:disabled { cursor: not-allowed; opacity: .42; }
#controlsWrap > #buttonsContainer .controlButton.publication-hidden, #controlsWrap > #buttonsContainer .publication-nav-text.publication-hidden { display: none !important; }
#publicationWalkHint { position: fixed; z-index: 58; left: 50%; bottom: max(74px, calc(env(safe-area-inset-bottom) + 72px)); transform: translateX(-50%); width: min(360px, calc(100vw - 32px)); padding: 14px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(12,16,23,.62); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 45px rgba(0,0,0,.35); font-family: Inter, ui-sans-serif, system-ui, sans-serif; pointer-events: auto; }
#publicationWalkHint h2 { margin: 0 0 8px; font: 700 15px/1.2 system-ui, sans-serif; }
#publicationWalkHint ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#publicationWalkHint li { display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.78); font: 500 13px/1.25 system-ui, sans-serif; }
#publicationWalkHint kbd { display: inline-block; min-width: 46px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; color: #fff; background: rgba(255,255,255,.1); text-align: center; font: 700 12px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; }
#publicationWalkHint .publication-walk-hint-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#publicationWalkHint label { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font: 500 12px/1.2 system-ui, sans-serif; }
#publicationWalkHint input { width: 14px; height: 14px; accent-color: rgba(255,255,255,.9); }
#publicationWalkHint button { border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 7px 12px; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; font: 700 12px/1 system-ui, sans-serif; }
#publicationWalkHint button:hover { background: rgba(255,255,255,.2); }
#publicationMeasureOverlay { position: fixed; z-index: 45; inset: 0; overflow: hidden; pointer-events: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#publicationMeasureOverlay svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#publicationMeasureOverlay .publication-measure-line { stroke: rgba(255,255,255,.96); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
#publicationMeasureOverlay .publication-measure-line.preview { stroke-dasharray: 7 6; }
#publicationMeasureOverlay .publication-measure-surface { fill: rgba(255,255,255,.09); stroke: rgba(255,255,255,.9); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
#publicationMeasureOverlay .publication-measure-surface-axis { stroke: rgba(255,255,255,.92); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
#publicationMeasureOverlay .publication-measure-point { fill: rgba(14,18,25,.82); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.65)); }
#publicationMeasureOverlay .publication-measure-point.editable { fill: rgba(255,255,255,.2); }
#publicationMeasureOverlay .publication-measure-point.hovered { fill: rgba(255,255,255,.92); stroke: rgba(12,16,23,.9); }
#publicationMeasureOverlay .publication-measure-hover { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.95); stroke-width: 2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
#publicationMeasureOverlay .publication-measure-label { position: absolute; transform: translate(-50%, -50%); padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; color: #fff; background: rgba(12,16,23,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 5px 18px rgba(0,0,0,.35); font: 600 13px/1 system-ui, sans-serif; white-space: nowrap; }
html.publication-measuring #application-canvas { cursor: crosshair !important; }
html.publication-measure-handle #application-canvas { cursor: grab !important; }
html.publication-measure-dragging #application-canvas { cursor: grabbing !important; }
#publication-brand { position: fixed; z-index: 40; max-width: min(520px, calc(100vw - 40px)); color: var(--publication-text); pointer-events: none; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
#publication-brand.top-left { top: 24px; left: 24px; } #publication-brand.top-right { top: 24px; right: 24px; text-align: right; }
#publication-brand.bottom-left { bottom: 24px; left: 24px; } #publication-brand.bottom-right { bottom: 24px; right: 24px; text-align: right; }
#publication-brand .publication-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgb(9 12 18 / var(--publication-overlay)); backdrop-filter: blur(18px); box-shadow: 0 12px 45px rgba(0,0,0,.24); }
#publication-brand img { width: 50px; height: 50px; object-fit: contain; border-radius: 10px; }
#publication-brand strong { display: block; font-size: 16px; letter-spacing: .02em; } #publication-brand span { display: block; margin-top: 3px; font-size: 12px; opacity: .72; }
#publication-diagnostics { position: fixed; z-index: 60; top: 18px; right: 18px; width: min(390px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto; padding: 16px; color: #d7e2ff; background: rgba(5,8,14,.9); border: 1px solid rgba(131,162,255,.3); border-radius: 14px; box-shadow: 0 18px 70px rgba(0,0,0,.45); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
#publication-diagnostics pre { margin: 10px 0; white-space: pre-wrap; } #publication-diagnostics button { color: #07101d; background: #9fc0ff; border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; cursor: pointer; }
@media (max-width: 680px) { #publication-brand { max-width: calc(100vw - 24px); } #publication-brand.top-left, #publication-brand.top-right { top: 12px; left: 12px; right: auto; text-align: left; } #publication-brand.bottom-left, #publication-brand.bottom-right { bottom: 12px; left: 12px; right: auto; text-align: left; } #publication-brand .publication-card { padding: 10px 12px; } #publication-brand img { width: 38px; height: 38px; } #publicationWalkHint { left: 12px; right: 12px; bottom: max(118px, calc(env(safe-area-inset-bottom) + 108px)); width: auto; transform: none; } #publicationWalkHint li { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { #application-canvas { transition: none; } #loadingWrap > #loadingBar:not([style])::after, #publicationLoadingOverlay .publication-loading-track::after { animation: none; left: 0; } }