body,
.stage {
  background: linear-gradient(180deg, #B6F0E9 0%, #D7DEFA 100%);
}

.wireframe-demo {
  position: absolute;
  top: 102px;
  left: 0;
  width: calc(100% - 135px - 368px);
  height: 572px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.wireframe-panel {
  position: absolute;
  top: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #08080A;
  isolation: isolate;
  transform-origin: top left;
}

.wireframe-panel--primary {
  left: calc(50% - 225px);
  width: 450px;
  height: 918.5px;
}

.wireframe-panel--secondary {
  left: calc(50% + 20px);
  width: 242px;
  height: calc(242px * 1837 / 900);
  border-radius: calc(24px * 242 / 450);
  opacity: 0;
}

.wireframe-demo .visual-demo__image,
.wireframe-demo .visual-demo__result-image {
  height: auto;
  object-fit: contain;
}

.wireframe-demo .visual-demo__result {
  isolation: isolate;
}

.wireframe-demo .visual-demo__result-color-fill {
  background: #85CF17;
}

.design-type-item.is-expanded .design-type-expanded {
  pointer-events: auto;
}

.design-type-item--attachment.is-expanded .design-type-kicker,
.design-type-item--url.is-expanded .design-type-kicker {
  visibility: hidden;
}

.design-type-item--attachment .design-type-description,
.design-type-item--url .design-type-description {
  top: 61px; /* Normal selected prompt starts at 51px; attachment is 10px lower. */
}

.url-prompt-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 134px;
  height: 28px;
  pointer-events: none;
}

.attachment-demo {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.attachment-demo[hidden] { display: none; }

.attachment-demo__flight {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0;
  transform-origin: center;
}

.attachment-demo.is-playing .attachment-demo__flight { will-change: transform, opacity; }

.attachment-icons {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 6px;
  height: 28px;
  pointer-events: none;
}

.attachment-icons img {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  opacity: 0;
  transform-origin: center;
}

.sketch-demo,
.reference-demo,
.attachment-ui-demo,
.url-demo {
  position: absolute;
  top: 102px;
  left: calc((100% - 135px - 368px - 604px) / 2);
  width: 604px;
  height: 444px;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  pointer-events: none;
}

.sketch-demo .visual-demo__result,
.reference-demo .visual-demo__result,
.attachment-ui-demo .visual-demo__result,
.url-demo .visual-demo__result {
  isolation: isolate;
}

.sketch-demo .visual-demo__result-color-fill,
.reference-demo .visual-demo__result-color-fill,
.attachment-ui-demo .visual-demo__result-color-fill,
.url-demo .visual-demo__result-color-fill {
  background: #B685FF;
}

.attachment-ui-demo,
.url-demo {
  height: 572px;
  border-radius: 12px 12px 0 0;
  background: #fff;
}

.attachment-ui-demo {
  opacity: 0;
}

.reference-demo {
  overflow: visible;
  border-radius: 12px;
}

.reference-demo__surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(604px * 1787 / 1440);
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}