.packaging-preview-engine {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #f6f2ed;
  isolation: isolate;
}

.packaging-preview-engine__svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 520px;
  aspect-ratio: 10 / 7;
  overflow: visible;
}

.packaging-preview-engine__note {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.packaging-preview-engine__svg .ppe-face-edge {
  stroke: rgba(62, 43, 33, .22);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.packaging-preview-engine__svg .ppe-fold-line {
  fill: none;
  stroke: rgba(48, 37, 30, .34);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.packaging-preview-engine__svg .ppe-structure-line {
  fill: none;
  stroke: rgba(48, 37, 30, .42);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.packaging-preview-engine__svg .ppe-logo {
  overflow: visible;
}

.packaging-preview-engine__svg .ppe-logo-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.packaging-preview-engine__svg .ppe-ribbon {
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px) {
  .packaging-preview-engine {
    border-radius: .8rem;
  }

  .packaging-preview-engine__svg {
    min-height: 0;
    max-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .packaging-preview-engine,
  .packaging-preview-engine * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Wizard scene and its keyboard-accessible controls. */
.creator-preview-stage { position:relative; width:100%; min-width:0; }
.creator-preview-media { display:block; width:100%; }
.creator-preview-media img { display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; }
.creator-public .creator-preview { background:transparent; box-shadow:none; }
.creator-public .creator-live-preview { background:#f6f2ed; }
.creator-public .creator-preview-box { height:auto; max-width:none; width:100%; }
.creator-preview-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.creator-preview-control, .creator-preview-motion { min-height:40px; padding:8px 16px; border:1px solid #d5c9bc; border-radius:6px; background:#fffdf9; color:#453b32; font:inherit; font-size:.82rem; cursor:pointer; }
.creator-preview-control:hover { background:#eee7de; }
.creator-preview-control[aria-pressed="true"] { background:#66513e; border-color:#66513e; color:#fff; }
.creator-preview-control:focus-visible, .creator-preview-motion:focus-visible { outline:3px solid #b39154; outline-offset:3px; }