.pieces-page{isolation:isolate}

.pieces-page:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#030a1526,#030a1514 55%,#030a1573)}
.pieces-page .pieces-main,.pieces-page footer{position:relative;z-index:1}
.pieces-page header{background:#030a15d9}
.pieces-page .piece-viewer{background:radial-gradient(ellipse at 30% 45%,#102b3f33,transparent 65%),#060e1959;border-color:#779db44d}
.pieces-page .piece-picker{background:#030a1566}
.pieces-page .piece-panel{background:#030a158c}
.pieces-page .pieces-title,.pieces-page .piece-footnote{text-shadow:0 2px 10px #030a15}
.pieces-page .piece-footnote{color:#adc4d6}
.pieces-page footer{background:#030a15b3}
@media(max-width:800px){.pieces-page .piece-panel{background:#030a15b3}}

/* Three supplied set images form a quiet, stationary backdrop. */
.pieces-backdrops{position:fixed;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100lvh;z-index:0;pointer-events:none;overflow:hidden;background:#030a15}
.pieces-set-backdrop{display:block;width:100%;height:100%;min-height:0;min-width:0;object-fit:cover;object-position:58% center;opacity:.22;filter:brightness(.8);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pieces-page:before{z-index:0;background:linear-gradient(180deg,#030a1520,#030a1540 60%,#030a1580)}
@media(max-width:800px){
.pieces-backdrops{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr))}
.pieces-set-backdrop{object-position:center 35%;opacity:.18;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
}