/* Product details and supporting art, arranged in distinct planes. */
.hero-detail { position: absolute; overflow: hidden; pointer-events: none; border: 1px solid #dcd0c9; border-radius: 5px; background: #f8f5ef; box-shadow: 0 24px 40px -20px #2d263f65; }
.hero-detail img { display: block; width: 100%; }
.hero-detail-terminal { width: 43%; top: 3px; right: -30px; z-index: 1; filter: blur(.6px); transform: translate3d(0,var(--detail-far-y,0px),0) rotate(8deg); }
.hero-console { z-index: 3; }
.hero-saki { z-index: 5; filter: drop-shadow(0 15px 18px #6044522b); }
.hero-note { z-index: 6; bottom: 0; }

/* Night is an environment behind the opaque evidence{ isolation: isolate; }

/* An inhabited portrait scene, a daylight window and a night postcard. */
.personal-art { min-height: 610px; }
.personal-backdrop { display: none; }
.room-portrait { position: absolute; left: -15px; top: 0; width: 64%; height: 510px; margin: 0; padding: 8px 8px 31px; background: #fffcf4; box-shadow: 0 25px 45px -20px #6a493f4a; transform: translate3d(0,var(--room-y,0px),0) rotate(var(--room-angle,-5deg)); }
.room-portrait > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.room-portrait figcaption { padding-top: 10px; color: #8b776b; font: 7px/1.5 ui-monospace,monospace; letter-spacing: .13em; }
.theme-preview { left: 30%; right: -10%; top: 80px; z-index: 2; padding: 12px; box-shadow: 0 30px 45px -25px #47374460; }
.theme-preview .pane-top { font-size: 9px; margin-bottom: 10px; }
.theme-preview .preview-label { font-size: 7px; }
.theme-landscape { height: 150px; border-radius: 2px; }
.theme-preview-bottom { font-size: 9px; }
.night-postcard { position: absolute; bottom: 3px; left: 6%; width: 70%; height: 160px; z-index: 1; padding: 6px 6px 25px; background: #263447; box-shadow: 0 25px 35px -20px #272a3b80; transform: translate3d(0,var(--postcard-y,0px),0) rotate(6deg); }
.night-postcard > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.night-postcard > span { display: block; color: #e4ceda; padding: 7px 4px; font: 7px/1.4 ui-monospace,monospace; letter-spacing: .1em; }
.personal-art > img { height: 285px; bottom: 68px; right: -20px; z-index: 4; filter: drop-shadow(0 18px 15px #422b3a3b); }
.personal-tag { top: auto; bottom: 170px; left: -30px; z-index: 5; box-shadow: 0 15px 30px -20px #49354180; }
.personal-star.s1 { z-index: 4; top: 35px; right: -25px; }
.personal-star.s2 { z-index: 4; bottom: 25px; left: 10px; }

@media (max-width:1200px) {
  .personal-art { min-height: 550px; }
  .room-portrait { height: 455px; left: -5px; }
  .theme-preview { right: -4%; }
  .theme-landscape { height: 130px; }
  .personal-art > img { height: 255px; right: -5px; }
  .personal-tag { left: -8px; bottom: 150px; font-size: 9px; }
}
@media (max-width:999px) {
  .hero-detail-terminal { right: -12px; top: 30px; width: 49%; }
  .personal-art { min-height: 490px; }
  .room-portrait { height: 400px; width: 70%; }
  .theme-preview { top: 55px; left: 25%; right: -4%; padding: 9px; }
  .theme-landscape { height: 110px; }
  .theme-preview .preview-label { display: none; }
  .personal-art > img { height: 225px; right: -5px; bottom: 65px; }
  .personal-tag { bottom: 145px; left: -8px; font-size: 8px; padding: 11px; }
  .night-postcard { width: 80%; height: 130px; }
}
@media (max-width:719px) {
  .hero-detail-terminal { top: -32px; right: 2%; width: 40%; }
  .hero-saki { z-index: 5; }
  .hero-console { z-index: 3; }
  .service-map { margin-top: 0; }
  .personal-art { min-height: 520px; max-width: 360px; }
  .room-portrait { height: 435px; width: 67%; left: 0; }
  .theme-preview { left: 30%; right: -2%; top: 80px; }
  .theme-landscape { height: 115px; }
  .theme-preview .pane-top { font-size: 8px; }
  .theme-preview-bottom { font-size: 7px; }
  .theme-preview-bottom .theme-swatches { gap: 3px; }
  .theme-swatches i { width: 8px; height: 8px; }
  .personal-art > img { height: 235px; right: -4px; bottom: 70px; }
  .personal-tag { bottom: 160px; top: auto; left: -3px; font-size: 8px; }
  .night-postcard { width: 73%; height: 135px; bottom: 0; }
  .personal-star.s1 { right: 3px; top: 14px; }
  .personal-star.s2 { left: 8px; bottom: 23px; }
}
@media (max-width:349px) {
  .personal-art { min-height: 470px; }
  .room-portrait { height: 390px; }
  .theme-landscape { height: 95px; }
  .personal-art > img { height: 205px; }
  .personal-tag { font-size: 7px; bottom: 145px; }
}
.motion-reduced .hero-detail-terminal { transform: rotate(8deg); }
.motion-reduced .room-portrait { transform: rotate(-5deg); }
.motion-reduced .night-postcard { transform: rotate(6deg); }