/* Code-built architectural model: XY is pavement, Z is building height. */
.sh-scene {
  position: relative;
  width: 100%;
  min-height: 460px;
  height: 100%;
  perspective: 1500px;
  perspective-origin: 50% 36%;
  isolation: isolate;
}
.sh-scene > svg, .sh-scene > [data-scene-fallback] {
  position: absolute; width: 94%; height: 94%; inset: 3%;
}
.sh-scene[data-scene-mounted="true"] > svg,
.sh-scene[data-scene-mounted="true"] > [data-scene-fallback] { display: none; }
.sh-model {
  position: absolute;
  width: 520px; height: 306px;
  left: 50%; top: 57%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.sh-model__world, .sh-model__solid, .sh-model__lamp-group, .sh-model__lamp {
  position: absolute; inset: 0; transform-style: preserve-3d;
}
.sh-model__lamp { inset: auto; left: 0; top: 0; width: 0; height: 0; }
.sh-model__solid {
  inset: auto; left: 0; top: 0;
  width: var(--solid-width); height: var(--solid-depth);
  --face-front: #c3b7a1; --face-side: #8e8475; --face-left: #a99f8f; --face-top: #b6aa94;
}
.sh-model__face { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sh-model__face--front {
  width: var(--solid-width); height: var(--solid-height);
  background: var(--face-front);
  transform: translate3d(0, var(--solid-depth), var(--solid-height)) rotateX(-90deg);
}
.sh-model__face--right {
  width: var(--solid-depth); height: var(--solid-height); background: var(--face-side);
  transform: translate3d(var(--solid-width), var(--solid-depth), var(--solid-height)) rotateZ(-90deg) rotateX(-90deg);
}
.sh-model__face--left {
  width: var(--solid-depth); height: var(--solid-height); background: var(--face-left);
  transform: translate3d(0, 0, var(--solid-height)) rotateZ(90deg) rotateX(-90deg);
}
.sh-model__face--back {
  width: var(--solid-width); height: var(--solid-height); background: var(--face-side);
  transform: translate3d(var(--solid-width), 0, var(--solid-height)) rotateZ(180deg) rotateX(-90deg);
}
.sh-model__face--roof {
  width: var(--solid-width); height: var(--solid-depth); background: var(--face-top);
  transform: translateZ(var(--solid-height));
}
.sh-model__plinth { --face-front: #252b28; --face-side: #171d1a; --face-left: #303932; --face-top: #303733; }
.sh-model__plinth > .sh-model__face--roof {
  box-shadow: 0 31px 56px rgb(32 37 31 / 22%), 0 12px 18px rgb(32 37 31 / 18%);
  background: linear-gradient(135deg, #3b403a, #29312d);
}
.sh-model__plaque {
  position: absolute; left: 209px; top: 5px; width: 102px; height: 9px;
  background: #b19568; color: #2b2e25;
  font: 600 6px/9px Arial, sans-serif; letter-spacing: 2px; text-align: center;
}
.sh-model__pavement {
  position: absolute; left: 0; top: 0; width: 520px; height: 181px; transform: translateZ(1px);
  background: repeating-linear-gradient(90deg, transparent 0 31px, rgb(36 41 34 / 20%) 31px 32px),
    repeating-linear-gradient(0deg, #b8b3a5 0 23px, #8f9085 23px 24px);
}
.sh-model__kerb { --face-front: #7c7e73; --face-top: #ccc8b9; --face-side: #8c8e80; }
.sh-model__road {
  position: absolute; left: 0; top: 183px; width: 520px; height: 123px; transform: translateZ(1px);
  overflow: hidden;
  background: linear-gradient(90deg, rgb(182 170 134 / 2%), rgb(191 182 149 / 9%) 50%, transparent), #343a35;
}
.sh-model__road-lines {
  position: absolute; top: 60px; left: 0; right: 0; height: 3px; opacity: 0.56;
  background: repeating-linear-gradient(90deg, transparent 0 27px, #cdc8b2 27px 59px, transparent 59px 98px);
}
.sh-model__road-reflection {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 21%, rgb(209 175 107 / 13%) 26%, transparent 29%,
    transparent 42%, rgb(233 208 151 / 11%) 46%, transparent 50%, transparent 70%, rgb(206 183 133 / 8%) 78%, transparent 82%);
}
.sh-model__crossing {
  position: absolute; right: 12px; top: 5px; width: 19px; height: 108px; opacity: 0.38;
  background: repeating-linear-gradient(0deg, transparent 0 11px, #d0cbb5 11px 19px);
}
.sh-model__building-shadow {
  position: absolute; height: 53px; transform: translateZ(1.2px) skewX(-35deg); transform-origin: 0 0;
  background: linear-gradient(0deg, rgb(29 34 29 / 2%), rgb(29 34 29 / 33%));
}
.sh-model__building--brick { --face-front: #8b7260; --face-side: #695a4c; --face-left: #796854; --face-top: #b2a48a; }
.sh-model__building--green { --face-front: #8a9585; --face-side: #59695d; --face-left: #738272; --face-top: #abb2a0; }
.sh-model__building > .sh-model__face--front {
  background-image: repeating-linear-gradient(0deg, transparent 0 11px, rgb(47 43 35 / 12%) 11px 12px);
  box-shadow: inset 5px 0 rgb(255 248 221 / 11%), inset -5px 0 rgb(24 29 24 / 10%);
}
.sh-model__building--brick > .sh-model__face--front {
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgb(49 44 34 / 18%) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgb(49 44 34 / 9%) 14px 15px);
}
.sh-model__cornice {
  position: absolute; inset: 4px 0 auto; height: 7px; background: rgb(222 213 188 / 38%);
  border-bottom: 2px solid rgb(27 35 27 / 26%); box-shadow: 0 4px 4px rgb(21 30 22 / 12%);
}
.sh-model__floors {
  position: absolute; left: 13px; right: 13px; top: 22px; bottom: 62px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(var(--floor-count), 1fr); gap: 14px 14px;
}
.sh-model__window {
  position: relative; min-height: 13px; border: 2px solid #c2b8a0;
  background: linear-gradient(90deg, transparent 45%, #7a8073 45% 52%, transparent 52%),
    linear-gradient(0deg, transparent 59%, #7a8073 59% 64%, transparent 64%), #37453e;
  box-shadow: 0 1px 0 rgb(10 24 16 / 43%), inset 2px 2px 5px rgb(10 24 16 / 45%);
}
.sh-model__window.is-warm {
  background-color: #b7a277;
  background-image: linear-gradient(90deg, transparent 44%, #777765 44% 53%, transparent 53%),
    linear-gradient(0deg, transparent 59%, #777765 59% 65%, transparent 65%), linear-gradient(115deg, #746b52, #c8b386);
}
.sh-model__window-sill { position: absolute; left: -4px; right: -4px; bottom: -4px; height: 3px; background: #bdb29c; box-shadow: 0 2px 1px rgb(25 35 26 / 24%); }
.sh-model__side-windows {
  position: absolute; inset: 24px 18px 62px; display: grid;
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(var(--floor-count), 1fr); gap: 14px 15px;
}
.sh-model__side-windows .sh-model__window { border-color: rgb(169 166 140 / 46%); background-color: #344037; }
.sh-model__downpipe { position: absolute; top: 6px; bottom: 0; right: 7px; width: 3px; background: #596151; box-shadow: 2px 0 1px rgb(15 24 16 / 18%); }
.sh-model__roof-inset { position: absolute; inset: 6px; border: 2px solid #5f6254; background: repeating-linear-gradient(90deg, #777867 0 15px, #707363 15px 16px); box-shadow: inset 2px 2px 4px rgb(18 27 16 / 22%); }
.sh-model__roof-light { position: absolute; left: 25%; top: 28%; width: 37%; height: 37%; border: 3px solid #bbb49d; background: repeating-linear-gradient(90deg, #516156 0 9px, #8b9886 9px 11px); box-shadow: 3px 5px 0 rgb(38 46 35 / 28%); }
.sh-model__chimney { --face-front: #9a8d75; --face-side: #6e695a; --face-left: #827b68; --face-top: #c4b89f; }
.sh-model__coping { --face-front: #b5ab93; --face-side: #878575; --face-left: #a29d8a; --face-top: #d0c7b0; }
.sh-model__shop { position: absolute; left: 6px; right: 6px; bottom: 0; height: 56px; background: #475247; border: 2px solid #576454; }
.sh-model__building--brick .sh-model__shop { background: #4b493b; border-color: #646049; }
.sh-model__building--stone .sh-model__shop { background: #817e6b; border-color: #a9a089; }
.sh-model__sign { height: 14px; border-bottom: 1px solid #ad956c; color: #e3d2a7; font: 600 6px/12px Georgia, serif; text-align: center; letter-spacing: 0.9px; white-space: nowrap; }
.sh-model__glazing { display: grid; grid-template-columns: 1fr 0.7fr 1fr; gap: 3px; height: 35px; margin: 3px 4px; }
.sh-model__pane { position: relative; overflow: hidden; border: 2px solid #9c987b; background: linear-gradient(108deg, transparent 26%, rgb(242 220 166 / 22%) 27% 31%, transparent 32%), linear-gradient(0deg, #756c4c, #dfc589); box-shadow: inset 3px 2px 7px rgb(24 32 20 / 42%); }
.sh-model__pane--door { background-color: #444e3e; border-color: #898976; }
.sh-model__pane--door::after { content: ''; position: absolute; right: 2px; top: 54%; width: 1px; height: 5px; background: #d4b876; }
.sh-model__shelf { position: absolute; height: 2px; left: 0; right: 0; bottom: 7px; background: #655e42; }
.sh-model__display { position: absolute; width: 8px; height: 10px; left: 6px; bottom: 9px; background: #a0895a; box-shadow: 12px 2px 0 #88754f; }
.sh-model__shop-step { position: absolute; left: -3px; right: -3px; bottom: -3px; height: 3px; background: #c3bfae; }
.sh-model__lamp-foot { position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #373e30; }
.sh-model__lamp-pole { position: absolute; left: 0; top: 0; width: 4px; height: 100px; transform-origin: 0 0; transform: translateZ(100px) rotateX(-90deg); background: linear-gradient(90deg, #88907a, #384536 58%); }
.sh-model__lamp-arm { position: absolute; left: 0; top: -1px; width: 4px; height: 17px; transform: translateZ(99px); background: #4c5b45; }
.sh-model__lamp-head { position: absolute; left: -5px; top: 12px; width: 14px; height: 9px; transform: translateZ(99px); border: 2px solid #5b654e; border-radius: 50%; background: #f2dda6; box-shadow: 0 0 8px rgb(242 221 166 / 22%); }
.sh-model__light-pool { position: absolute; left: 0; top: 0; width: 60px; height: 55px; border-radius: 50%; background: radial-gradient(ellipse, rgb(246 223 156 / 23%), transparent 70%); }
.sh-model__planter { --face-front: #817c63; --face-side: #555d48; --face-left: #6e7158; --face-top: #414b34; }
.sh-model__foliage { --face-front: #5a6b47; --face-side: #3a5037; --face-left: #687a51; --face-top: #7b8b5b; }
.sh-model__foliage .sh-model__face { border-radius: 4px; }
.sh-model__bench { --face-front: #76654b; --face-side: #414c36; --face-left: #5a6345; --face-top: #aa946a; }
.sh-model__bench > .sh-model__face--front { background: linear-gradient(90deg, #3a4936 0 4px, transparent 4px 27px, #3a4936 27px); }
.sh-scene [data-scene-toggle], [data-scene-toggle] { min-width: 44px; min-height: 44px; }
[data-scene-toggle]:disabled { cursor: default; }
@media (max-width: 700px) {
  .sh-scene { min-height: 340px; perspective: 1100px; }
  .sh-model { top: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-model { will-change: auto; }
}