.quick-showcase { min-width: 0; --showcase-accent: #00bd99; }
.quick-showcase[data-scene="1"] { --showcase-accent: #34a1d5; }
.quick-showcase[data-scene="2"] { --showcase-accent: #c971a8; }
.quick-showcase-stage { position: relative; isolation: isolate; height: 330px; overflow: hidden; border-radius: 16px; background: #073d36; perspective: 1100px; }
.quick-showcase-stage::before, .quick-showcase-stage::after { content: ''; position: absolute; pointer-events: none; }
.quick-showcase-stage::before { inset: 0; background: radial-gradient(ellipse at 48% 90%, var(--showcase-accent), transparent 65%); opacity: .65; }
.quick-showcase-stage::after { width: 85%; height: 110%; left: 32%; top: -65%; border: 1px solid #b7f7df40; border-radius: 50%; transform: rotate(-24deg); }
.quick-showcase-light { position: absolute; inset: -25%; opacity: .5; background: conic-gradient(from 20deg at 50% 50%, transparent 0deg, #a7ffe044 26deg, transparent 52deg, transparent 180deg, #68dfd844 210deg, transparent 240deg); animation: quick-stage-light 18s ease-in-out infinite alternate; animation-play-state: paused; }
.quick-showcase[data-playing="true"] .quick-showcase-light { animation-play-state: running; }
@keyframes quick-stage-light { from { transform: rotate(-12deg); } to { transform: rotate(26deg); } }
.quick-showcase-frame { position: absolute; top: 50%; left: 50%; width: 80%; height: 85%; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, -50%) scale(.72); pointer-events: none; }
.quick-showcase[data-initial-ready="true"] .quick-showcase-frame { transition: transform 800ms cubic-bezier(.16, 1, .3, 1), opacity 500ms ease; }
.quick-showcase-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px; box-shadow: 0 18px 30px #001f2b40; user-select: none; -webkit-user-drag: none; }
.quick-showcase-frame[data-position="front"] { z-index: 3; opacity: 1; transform: translate(-50%, -50%) rotateY(-5deg) rotateX(3deg); }
.quick-showcase-frame[data-position="left"][data-ready="true"] { z-index: 1; opacity: .35; transform: translate(-82%, -51%) scale(.72) rotateY(14deg) rotateZ(-5deg); }
.quick-showcase-frame[data-position="right"][data-ready="true"] { z-index: 2; opacity: .45; transform: translate(-18%, -48%) scale(.72) rotateY(-14deg) rotateZ(5deg); }
.quick-showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.quick-showcase-footer p { margin: 0; color: var(--color-brand-dark); font-size: 14px; line-height: 1.5; }
.quick-showcase-controls, .quick-scene-buttons { display: flex; align-items: center; gap: 3px; }
.quick-showcase-controls[hidden] { display: none; }
.quick-showcase-controls button[hidden] { display: none; }
.quick-showcase-controls button { display: grid; place-items: center; width: 36px; height: 44px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--color-brand-dark); }
.quick-scene-buttons span { display: block; width: 24px; height: 3px; border-radius: 2px; background: #a5b9b1; transition: transform 200ms ease, background-color 200ms ease; }
.quick-scene-buttons button[aria-pressed="true"] span { background: var(--color-brand-dark); transform: scaleY(1.6); }
.quick-scene-buttons button:hover span { background: var(--color-brand); }
.quick-motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-play-symbol, .quick-motion-toggle[data-paused="true"] .quick-pause-symbol { display: none; }
.quick-motion-toggle[data-paused="true"] .quick-play-symbol { display: block; }
.quick-showcase-controls button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 1600px) { .quick-showcase-stage { height: 350px; } }
@media (max-width: 900px) {
  .quick-showcase-stage { height: auto; aspect-ratio: 2 / 1; max-height: 330px; }
  .quick-showcase-footer { min-height: 48px; }
}
@media (max-width: 480px) {
  .quick-showcase-stage { aspect-ratio: 1.6 / 1; }
  .quick-showcase-frame { width: 88%; }
  .quick-showcase-footer { gap: 4px; }
  .quick-showcase-footer p { font-size: 12px; }
  .quick-showcase-controls button { width: 30px; }
  .quick-scene-buttons span { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-showcase-light { animation: none; }
  .quick-showcase[data-initial-ready="true"] .quick-showcase-frame { transition: opacity 150ms linear; }
  .quick-showcase-frame[data-position="front"] { transform: translate(-50%, -50%); }
  .quick-scene-buttons span { transition: none; }
}