.project-image { position: relative; background: #020508; }
.canopy-preview-link { display: block; }
.canopy-preview-link:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.canopy-preview { position: relative; width: 100%; aspect-ratio: 1823 / 863; overflow: hidden; user-select: none; }
.canopy-preview .splash { display: block; width: 100%; height: 100%; }
.canopy-preview :is(.sky-clean-plate, .scene-sky-layer, .scene-lighting, .tile-artwork, .tile-ground, .transparent-tile-artwork) { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canopy-preview .scene-sky-layer { clip-path: url(#feature-sky-window); }
.canopy-preview .sky-clean-plate { clip-path: url(#feature-sky-footprint); mask-image: var(--sky-plate-mask); mask-size: 100% 100%; -webkit-mask-image: var(--sky-plate-mask); -webkit-mask-size: 100% 100%; }
.canopy-preview #celestial-grid { mask-image: var(--sky-mask); mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-image: var(--sky-mask); -webkit-mask-size: 100% 100%; }
.canopy-preview .scene-lighting { mix-blend-mode: soft-light; }
.canopy-preview .tile-artwork { clip-path: inset(59.5597% 7.7883% 14.0209% 8.4476%); }
.canopy-preview .clip-definitions { position: absolute; }
.canopy-preview :is(.tile-ground, .transparent-tile-artwork) { clip-path: url(#feature-tile-faces); }
.canopy-preview .transparent-tile-artwork { opacity: .75; }
.canopy-preview [hidden] { display: none !important; }