/* Original miniature worlds; SVG stays sharp at every viewport size. */
.live-preview{container:live / inline-size;--pointer-x:0px;--pointer-y:0px;--spread:0;--scene-ink:#514b62;background:radial-gradient(ellipse at 75% 20%,#fff9f3bb,transparent 65%),linear-gradient(140deg,#dfebff,#b9cee9)!important;color:var(--scene-ink);border-radius:22px!important}
.live-preview.visual-netflix{background:radial-gradient(ellipse at 70% 10%,#fff6dbad,transparent 65%),linear-gradient(145deg,#e3d7f3,#d2bad9)!important;--scene-ink:#674f69}
.live-preview.visual-crypto{background:radial-gradient(ellipse at 75% 10%,#fff6d8b3,transparent 60%),linear-gradient(145deg,#f5dfc9,#e9bd9c)!important;--scene-ink:#805539}
.live-preview.visual-sales{background:radial-gradient(ellipse at 70% 5%,#fffde8bf,transparent 70%),linear-gradient(145deg,#f6e6d9,#e6c6bf)!important;--scene-ink:#85646f}
.live-preview.visual-iot{background:radial-gradient(ellipse at 75% 10%,#fffcddb3,transparent 65%),linear-gradient(145deg,#faf1c8,#e6d5ac)!important;--scene-ink:#717853}
.live-preview .visual-top{position:absolute;inset:24px 25px auto;display:flex;flex-wrap:nowrap;gap:14px;align-items:center;z-index:4}
.live-preview .visual-caption{font-size:9px!important;letter-spacing:1.2px;line-height:1.5;flex:1;flex-basis:auto;color:var(--scene-ink);max-width:65%}
.live-preview .visual-tag{position:static;font-size:8px;white-space:nowrap;border-color:color-mix(in srgb,var(--scene-ink),transparent 45%);padding:6px 9px;background:#fff8ef33}
.live-preview .project-art{position:absolute!important;inset:0!important;display:block!important;padding:0!important;gap:0!important;margin:0!important;height:100%!important}
.live-preview .project-art .visual-artwork{position:absolute!important;inset:52px 0 112px!important;width:auto!important;height:auto!important;padding:0!important;transform:translate3d(calc(var(--art-x,0px) * .45),calc(var(--art-y,0px) * .45),0);transition:transform .45s ease}
.live-preview .project-art .visual-title{position:absolute!important;left:25px!important;bottom:25px!important;max-width:60%;font-size:clamp(26px,6.3cqw,42px)!important;line-height:1.01;letter-spacing:-.055em;color:var(--scene-ink);z-index:3;margin:0}
.live-preview .open-label{position:absolute;top:auto;right:25px;bottom:27px;font-size:8px;color:var(--scene-ink);letter-spacing:1.1px}
.live-scene{position:relative;width:100%;height:100%;perspective:800px;isolation:isolate}
.scene-drawing{position:relative;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.scene-drawing .svg-label{font-family:var(--sans);font-size:9px;letter-spacing:.65px;fill:#6b6172;font-weight:650}
.scene-drawing .poster-name{font-family:var(--sans);font-size:14px;letter-spacing:2px;font-weight:700}
.scene-orbit-ring{position:absolute;width:58%;aspect-ratio:1;left:21%;top:50%;transform:translateY(-50%) rotate(-24deg) scaleY(.58);border:1px solid color-mix(in srgb,var(--scene-ink),transparent 85%);border-radius:50%;pointer-events:none}
.scene-orbit-ring:after{content:'';position:absolute;inset:-15%;border:1px dashed color-mix(in srgb,var(--scene-ink),transparent 85%);border-radius:50%}
.scene-interaction{position:absolute;bottom:0;right:26px;font-size:7px;letter-spacing:1.4px;color:var(--scene-ink);opacity:.7;transition:opacity .4s,transform .4s}
.live-preview:is(:hover,:focus-within){--spread:1}
.live-preview:is(:hover,:focus-within) .scene-interaction{opacity:1;transform:translateY(-2px)}
.scene-motion{transform-box:fill-box;transform-origin:center;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}
.tour-panel[aria-hidden=false] .live-preview .scene-motion,.tour-linear .live-preview.preview-awake .scene-motion,#project-dialog[open] .live-preview .scene-motion,.no-webgl .live-preview.preview-awake .scene-motion{animation-play-state:running}
.scene-conveyor{animation-name:preview-conveyor;animation-duration:4s}
.scene-scanner{animation-name:preview-scan;animation-duration:3s}
.scene-detection{animation-name:preview-detect;animation-duration:3s}
.scene-float{animation-name:preview-float;animation-duration:5s}
.scene-float-delayed{animation-name:preview-float;animation-duration:6s;animation-delay:-2s}
.scene-signal{animation-name:preview-signal;animation-duration:2s;animation-timing-function:linear}
.poster-main{animation-name:preview-poster;animation-duration:6s}
.poster-side-left{animation-name:preview-fan-left;animation-duration:6s}
.poster-side-right{animation-name:preview-fan-right;animation-duration:6s}
.scene-spark{animation-name:preview-spark;animation-duration:4s}
.scene-coin{animation-name:preview-coin;animation-duration:7s}
.chart-panel{animation-name:preview-float;animation-duration:6s;animation-delay:-3s}
.scene-chart-draw{stroke-dasharray:450;animation-name:preview-chart;animation-duration:6s}
.scene-chart-signal{animation-name:preview-chart-signal;animation-duration:6s;animation-timing-function:linear}
.scene-crosshair{opacity:0;transform:translate(var(--pointer-x),var(--pointer-y));transition:opacity .35s,transform .4s;transform-box:fill-box;transform-origin:center}
.live-preview:hover .scene-crosshair{opacity:.65}
.scene-parcel{animation-name:preview-parcel;animation-duration:6s}
.scene-route{animation-name:preview-route;animation-duration:6s;animation-timing-function:linear}
.scene-support{animation-name:preview-support;animation-duration:6s}
.scene-message{animation-name:preview-message;animation-duration:6s}
.scene-leaf{animation-name:preview-leaf;animation-duration:4s;animation-delay:var(--leaf-delay,0s);transform-origin:50% 100%}
.scene-drop{animation-name:preview-water;animation-duration:5s}
@keyframes preview-conveyor{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-4px)}}
@keyframes preview-scan{0%,100%{transform:translate(calc(var(--pointer-x) * .18),-38px);opacity:.35}50%{transform:translate(calc(var(--pointer-x) * .18),27px);opacity:1}}
@keyframes preview-detect{0%,15%,100%{opacity:.15}35%,70%{opacity:1}}
@keyframes preview-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes preview-signal{to{stroke-dashoffset:-26}}
@keyframes preview-poster{0%,100%{transform:translateY(calc(var(--spread) * -7px)) rotate(-2deg)}50%{transform:translateY(calc(-7px - var(--spread) * 7px)) rotate(2deg)}}
@keyframes preview-fan-left{0%,100%{transform:translateX(calc(var(--spread) * -12px)) rotate(calc(var(--spread) * -4deg))}50%{transform:translate(-4px,4px) rotate(-3deg)}}
@keyframes preview-fan-right{0%,100%{transform:translateX(calc(var(--spread) * 12px)) rotate(calc(var(--spread) * 4deg))}50%{transform:translate(4px,4px) rotate(3deg)}}
@keyframes preview-spark{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.04)}}
@keyframes preview-coin{0%,100%{transform:scaleX(1) rotate(-5deg) translateY(0)}50%{transform:scaleX(.84) rotate(4deg) translateY(-8px)}}
@keyframes preview-chart{0%,15%{stroke-dashoffset:450;opacity:.3}65%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes preview-chart-signal{0%,25%{opacity:0;stroke-dashoffset:0}30%,90%{opacity:1}100%{opacity:0;stroke-dashoffset:-440}}
@keyframes preview-parcel{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes preview-route{to{stroke-dashoffset:-662}}
@keyframes preview-support{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes preview-message{0%,100%{transform:translateY(3px) scale(.96);opacity:.75}45%,65%{transform:translateY(-7px) scale(1);opacity:1}}
@keyframes preview-leaf{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes preview-water{0%,20%{transform:translateY(-10px);opacity:0}30%{opacity:.7}70%{transform:translateY(45px);opacity:.65}85%,100%{transform:translateY(48px);opacity:0}}
.detail-artwork.live-preview{height:clamp(360px,36vw,460px)!important;min-height:360px!important;padding:0!important}
.detail-artwork.live-preview .visual-title{font-size:clamp(26px,6.3cqw,42px)!important}
.detail-artwork.live-preview .scene-interaction{right:25px}
@container live (max-width:360px){
 .live-preview .visual-top{inset:18px 18px auto;gap:8px}.live-preview .visual-caption{font-size:7px!important;letter-spacing:.7px}.live-preview .visual-tag{font-size:6px;padding:4px 6px}
 .live-preview .project-art .visual-artwork{inset:49px -10px 83px!important}
 .live-preview .project-art .visual-title{left:18px!important;bottom:22px!important;font-size:clamp(23px,8cqw,29px)!important;max-width:62%}
 .live-preview .open-label{right:18px;bottom:24px;font-size:6px;letter-spacing:.7px}.scene-interaction{font-size:5px;right:18px;letter-spacing:.8px}
}
@media(max-width:600px){.detail-artwork.live-preview{height:340px!important;min-height:340px!important}}
.less-motion .live-preview .scene-motion{animation:none!important;transform:none!important}
.less-motion .live-preview .scene-crosshair{display:none}
@media(prefers-reduced-motion:reduce){.live-preview .scene-motion{animation:none!important;transform:none!important}}

.cinematic .project-exhibit .live-preview .project-art .visual-title{font-size:clamp(26px,6.3cqw,42px)!important}
@container live (max-width:360px){.cinematic .project-exhibit .live-preview .project-art .visual-title{font-size:clamp(23px,8cqw,29px)!important}}

/* An exhibit has its own clear reading plane within the continuous world. */
.cinematic:not(.tour-linear) .project-exhibit::before{content:'';position:absolute;inset:-28px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#fff7ebfa 0%,#fff7ebed 56%,#fff7eb8c 76%,#fff7eb00 100%);border-radius:100px}
.cinematic:not(.tour-linear) #tour-layer .tour-panel:not(.hero):not(.project-exhibit)::before{content:'';position:absolute;inset:-24px -44px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#fff7ebfa 0%,#fff7ebed 60%,#fff7eb88 78%,#fff7eb00 100%);border-radius:100px}
.cinematic:not(.tour-linear) .project-exhibit .project-meta{position:relative;padding:24px 22px;border-left:1px solid #c4a27b70;background:linear-gradient(100deg,#fff7ebec,#fff7eb4d);border-radius:0 24px 24px 0}
.cinematic:not(.tour-linear) .project-exhibit .live-preview{box-shadow:0 0 0 8px #fff9ef,0 8px 0 9px #dbc4aa55,0 24px 65px #80552e30}
@media(max-width:600px){
 .cinematic:not(.tour-linear) .project-exhibit::before{inset:-20px -25px;border-radius:45px}
 .cinematic:not(.tour-linear) #tour-layer .tour-panel:not(.hero):not(.project-exhibit)::before{inset:-20px -25px;border-radius:45px}
 .cinematic:not(.tour-linear) .project-exhibit .project-meta{padding:18px 6px 10px;border-left:0;background:linear-gradient(#fff7ebde,#fff7eb99);border-radius:0 0 18px 18px}
 .cinematic:not(.tour-linear) .project-exhibit .live-preview{box-shadow:0 0 0 5px #fff9ef,0 6px 0 6px #dbc4aa55,0 20px 50px #80552e26}
}