/* Shared mirror geometry used by both customer and admin previews. */
.ak-mirror-preview-surface {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #f7f4ee;
  box-shadow: none;
}
.ak-mirror-preview-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,235,228,.98));
}
.ak-mirror-preview-surface.shape-arched {
  aspect-ratio: 60 / 160;
  border: 2px solid rgba(185,155,104,.45);
  border-radius: 106px 106px 12px 12px;
  clip-path: none;
}
.ak-mirror-preview-surface.shape-arched::before {
  border-radius: inherit;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.7);
}
.ak-mirror-preview-surface.shape-asymmetric {
  aspect-ratio: 55 / 160;
  border: 0;
  border-radius: 0;
  clip-path: polygon(47% 0%,62% 1%,76% 5%,87% 13%,94% 24%,98% 38%,96% 54%,94% 68%,91% 80%,85% 91%,75% 98%,61% 100%,46% 99%,31% 96%,21% 88%,14% 77%,11% 64%,9% 51%,5% 38%,3% 25%,7% 14%,17% 6%,31% 2%);
  background: #b79a70;
}
.ak-mirror-preview-surface.shape-asymmetric::before {
  inset: 4px;
  clip-path: polygon(47% 0%,62% 1%,76% 5%,87% 13%,94% 24%,98% 38%,96% 54%,94% 68%,91% 80%,85% 91%,75% 98%,61% 100%,46% 99%,31% 96%,21% 88%,14% 77%,11% 64%,9% 51%,5% 38%,3% 25%,7% 14%,17% 6%,31% 2%);
}
.ak-mirror-preview-surface.shape-slim {
  aspect-ratio: 39 / 156;
  border: 2px solid rgba(65,61,56,.55);
  border-radius: 2px;
  clip-path: none;
}
.ak-mirror-preview-surface.shape-slim::before {
  border-radius: 0;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.7);
}
.ak-mirror-preview-surface .preview-line,
.ak-mirror-preview-surface [data-section] {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: rgba(105,103,100,.92);
  transform: translate(-50%,-50%);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.ak-mirror-preview-surface .preview-intro,
.ak-mirror-preview-surface [data-section="intro"] { line-height: 1.1; }
.ak-mirror-preview-surface .preview-quote,
.ak-mirror-preview-surface [data-section="quote"] { line-height: 1.28; }
.ak-mirror-preview-surface .preview-names,
.ak-mirror-preview-surface [data-section="names"] { line-height: .95; }
.ak-mirror-preview-surface .preview-date,
.ak-mirror-preview-surface [data-section="date"] { line-height: 1.05; }

/* Customer preview uses the real relative heights previously established. */
.mirror-builder-preview .ak-mirror-preview-surface.shape-arched,
.mirror-builder-preview .ak-mirror-preview-surface.shape-asymmetric { height: 700px; }
.mirror-builder-preview .ak-mirror-preview-surface.shape-slim { height: 620px; }

/* Admin is a proportional scale-down of the same surface. */
.admin-mirror-preview .ak-mirror-preview-surface.shape-arched,
.admin-mirror-preview .ak-mirror-preview-surface.shape-asymmetric { height: 560px; }
.admin-mirror-preview .ak-mirror-preview-surface.shape-slim { height: 496px; }

@media (max-width: 980px) {
  .mirror-builder-preview .ak-mirror-preview-surface.shape-arched,
  .mirror-builder-preview .ak-mirror-preview-surface.shape-asymmetric { height: 600px; }
  .mirror-builder-preview .ak-mirror-preview-surface.shape-slim { height: 535px; }
}
@media (max-width: 520px) {
  .mirror-builder-preview .ak-mirror-preview-surface.shape-arched,
  .mirror-builder-preview .ak-mirror-preview-surface.shape-asymmetric { height: 520px; }
  .mirror-builder-preview .ak-mirror-preview-surface.shape-slim { height: 465px; }
  .admin-mirror-preview .ak-mirror-preview-surface.shape-arched,
  .admin-mirror-preview .ak-mirror-preview-surface.shape-asymmetric { height: 500px; }
  .admin-mirror-preview .ak-mirror-preview-surface.shape-slim { height: 444px; }
}