.layout-showroom {
  position: relative;
  min-height: 260px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.18), transparent 28%),
    radial-gradient(circle at 50% 18%, rgba(148, 190, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 34px rgba(148, 190, 255, 0.16);
  perspective: 900px;
}

.layout-showroom::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 28%, black 78%, transparent);
  pointer-events: none;
}

.layout-showroom-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.layout-showroom-pedestal {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: min(420px, 72%);
  height: 74px;
  border-radius: 50%;
  transform: translateX(-50%) rotateX(68deg);
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34), rgba(142, 173, 224, 0.18) 38%, rgba(15, 23, 42, 0.02) 72%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(168, 198, 255, 0.24), inset 0 0 18px rgba(255, 255, 255, 0.18);
}

.layout-showroom-unit {
  --unit-width: 280px;
  --unit-height: 112px;
  --unit-depth: 132px;
  --main-width: var(--unit-width);
  --tank-width: 0px;
  --panel-width: calc(var(--unit-width) * 0.08);
  --tank-gap: 0px;
  --panel-gap: 0px;
  position: relative;
  width: var(--unit-width);
  height: var(--unit-height);
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(0deg);
  animation: layout-showroom-rotate 16s linear infinite;
}

.layout-showroom.is-tank-detached .layout-showroom-unit {
  --main-width: calc(var(--unit-width) * 0.7);
  --tank-width: calc(var(--unit-width) * 0.3);
  --tank-gap: 26px;
}

.layout-showroom.is-panel-detached .layout-showroom-unit {
  --panel-gap: 20px;
}

.layout-showroom.is-paused .layout-showroom-unit {
  animation-play-state: paused;
}

.layout-showroom-block {
  position: absolute;
  top: 0;
  height: var(--unit-height);
  transform-style: preserve-3d;
  transition: transform 260ms ease, opacity 180ms ease;
}

.layout-showroom-block-main {
  --block-width: var(--main-width);
  left: 0;
  width: var(--main-width);
  transform: translateX(calc(var(--tank-gap) * -0.35));
}

.layout-showroom-block-tank {
  --block-width: var(--tank-width);
  left: var(--main-width);
  width: var(--tank-width);
  transform: translateX(var(--tank-gap));
}

.layout-showroom:not(.is-tank-detached) .layout-showroom-block-tank {
  opacity: 0;
}

.layout-showroom-compressor-separator {
  position: absolute;
  top: 0;
  width: var(--unit-depth);
  height: var(--unit-height);
  border: 2px solid rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 16px rgba(219, 234, 254, 0.18);
  opacity: 0;
  pointer-events: none;
}

.layout-showroom.is-compressor-2 .layout-showroom-compressor-separator-1 {
  left: calc(50% - (var(--unit-depth) / 2));
  opacity: 1;
  transform: rotateY(90deg);
}

.layout-showroom.is-compressor-3 .layout-showroom-compressor-separator-1 {
  left: calc(33.333% - (var(--unit-depth) / 2));
  opacity: 1;
  transform: rotateY(90deg);
}

.layout-showroom.is-compressor-3 .layout-showroom-compressor-separator-2 {
  left: calc(66.666% - (var(--unit-depth) / 2));
  opacity: 1;
  transform: rotateY(90deg);
}

.layout-showroom-block-panel {
  --block-width: var(--panel-width);
  left: 0;
  width: var(--panel-width);
  transform: translateX(calc((var(--panel-width) + var(--panel-gap)) * -1));
}

.layout-showroom:not(.is-panel-detached) .layout-showroom-block-panel {
  opacity: 0;
}

.layout-showroom-face {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.055);
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.08), 0 0 18px rgba(219, 234, 254, 0.22);
  backface-visibility: visible;
}

.layout-showroom-face-front {
  transform: translateZ(calc(var(--unit-depth) / 2));
}

.layout-showroom-face-back {
  transform: rotateY(180deg) translateZ(calc(var(--unit-depth) / 2));
}

.layout-showroom-face-right {
  width: var(--unit-depth);
  left: calc((100% - var(--unit-depth)) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--block-width) / 2));
}

.layout-showroom-face-left {
  width: var(--unit-depth);
  left: calc((100% - var(--unit-depth)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--block-width) / 2));
}

.layout-showroom-face-top {
  height: var(--unit-depth);
  top: calc((var(--unit-height) - var(--unit-depth)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--unit-height) / 2));
}

.layout-showroom-face-bottom {
  height: var(--unit-depth);
  top: calc((var(--unit-height) - var(--unit-depth)) / 2);
  transform: rotateX(-90deg) translateZ(calc(var(--unit-height) / 2));
}

@keyframes layout-showroom-rotate {
  from {
    transform: rotateX(-12deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-12deg) rotateY(360deg);
  }
}

@media (max-width: 720px) {
  .layout-showroom {
    min-height: 220px;
  }

  .layout-showroom-unit {
    --unit-width: 210px;
    --unit-height: 92px;
    --unit-depth: 106px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-showroom-unit {
    animation: none;
    transform: rotateX(-12deg) rotateY(-24deg);
  }
}

body.theme-dark .layout-showroom {
  border-color: rgba(255, 255, 255, 0.24);
}