.pc-preview {
  position: relative;
  height: 180px;
  width: 100%;
  margin-top: 21px;
  overflow: hidden;
  background: #212622;
  border: 1px dashed #ffffff24;
}
.pc-preview-scene { position: absolute; inset: 0; perspective: 600px; }
.pc-model {
  position: absolute;
  top: calc(50% - 59px);
  left: calc(50% - 36px);
  width: 72px;
  height: 118px;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-32deg);
  animation: pc-preview-orbit 22s linear infinite;
}
.pc-face {
  position: absolute;
  border: 1px solid #ffffffa8;
  background: rgba(33,38,34,.88);
  backface-visibility: hidden;
}
.pc-face svg { width: 100%; height: 100%; overflow: visible; }
.pc-face--front, .pc-face--back { width: 72px; height: 118px; inset: 0; }
.pc-face--front { transform: translateZ(50px); }
.pc-face--back { transform: rotateY(180deg) translateZ(50px); }
.pc-face--right, .pc-face--left { width: 100px; height: 118px; top: 0; left: -14px; }
.pc-face--right { transform: rotateY(90deg) translateZ(36px); }
.pc-face--left { transform: rotateY(-90deg) translateZ(36px); }
.pc-face--top, .pc-face--bottom { width: 72px; height: 100px; top: 9px; left: 0; }
.pc-face--top { transform: rotateX(90deg) translateZ(59px); }
.pc-face--bottom { transform: rotateX(-90deg) translateZ(59px); }
.pc-preview-floor {
  position: absolute;
  width: 135px;
  height: 15px;
  left: calc(50% - 67.5px);
  top: calc(50% + 66px);
  border: 1px solid #ffffff0f;
  border-radius: 50%;
}
.pc-preview.is-paused .pc-model { animation-play-state: paused; }
.pc-preview-toggle {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff9;
}
.pc-preview-toggle:hover { color: #fff; }
.pc-preview-toggle > span { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pc-preview-toggle[data-paused="true"] > span { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
@keyframes pc-preview-orbit {
  from { transform: rotateX(-12deg) rotateY(-32deg); }
  to { transform: rotateX(-12deg) rotateY(328deg); }
}
@media (max-width: 780px) {
  .pc-preview { grid-column: 2; grid-row: 1/5; margin-top: 0; }
}
@media (max-width: 520px) {
  .pc-preview { height: 230px; margin-top: 20px; }
  .pc-model { scale: 1.15; }
  .pc-preview-floor { top: calc(50% + 78px); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-model { animation: none; }
}
/* The same rotation controls display the requested server proportions. */
.server-model { display: none; }
.pc-preview.is-server .pc-model { display: none; }
.pc-preview.is-server .server-model { display: block; }
.server-model {
  position: absolute;
  top: calc(50% - var(--server-height) / 2);
  left: calc(50% - var(--server-width) / 2);
  width: var(--server-width);
  height: var(--server-height);
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-32deg);
  animation: pc-preview-orbit 22s linear infinite;
}
.server-face { position: absolute; border: 1px solid #ffffffa8; background: rgba(33,38,34,.88); backface-visibility: hidden; }
.server-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.server-face--front, .server-face--back { width: var(--server-width); height: var(--server-height); inset: 0; }
.server-face--front { transform: translateZ(calc(var(--server-depth) / 2)); }
.server-face--back { transform: rotateY(180deg) translateZ(calc(var(--server-depth) / 2)); }
.server-face--left, .server-face--right { width: var(--server-depth); height: var(--server-height); top: 0; left: calc((var(--server-width) - var(--server-depth)) / 2); }
.server-face--right { transform: rotateY(90deg) translateZ(calc(var(--server-width) / 2)); }
.server-face--left { transform: rotateY(-90deg) translateZ(calc(var(--server-width) / 2)); }
.server-face--top, .server-face--bottom { width: var(--server-width); height: var(--server-depth); top: calc((var(--server-height) - var(--server-depth)) / 2); left: 0; }
.server-face--top { transform: rotateX(90deg) translateZ(calc(var(--server-height) / 2)); }
.server-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--server-height) / 2)); }
.pc-preview.is-server .pc-preview-floor { display: none; }
.pc-preview.is-paused .server-model { animation-play-state: paused; }
@media (max-width: 520px) { .server-model { scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .server-model { animation: none; } }