.sa { --sa-ink: #eef2f0; --sa-muted: #a3aeaa; --sa-mint: #45c7ae; margin: 0; display: grid; justify-items: end; gap: 14px; }
.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }
/* Everything is laid out on the screenshot's own 3320 x 1868 grid: 1cqw = 33.2 source pixels. */
.sa-stage { position: relative; width: 100%; aspect-ratio: 3320 / 1868; container-type: inline-size; overflow: hidden;
  border-radius: clamp(12px, 1.6vw, 22px); background: #111113; box-shadow: 0 30px 70px rgba(15, 25, 22, .22); }
/* Camera: starts close on the search bar, then pulls back to the results.
   Origin is the bar's centre; the translate parks it near the middle of the frame while zoomed. */
.sa-cam { position: absolute; inset: 0; transform-origin: 49.8% 25.6%; transition: transform 1.05s cubic-bezier(.65, 0, .25, 1); }
.sa.is-zoomed .sa-cam { transform: translate(0.2%, 13.4%) scale(1.55); transition: none; }
.sa-skel { position: absolute; width: 15.36cqw; border-radius: 0.36cqw; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(100deg, #1b2021 30%, #262d2e 50%, #1b2021 70%) 0 0 / 300% 100%; animation: sa-shimmer 1.1s linear infinite; }
@keyframes sa-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.sa.is-loading .sa-skel { opacity: 1; transition-delay: calc(var(--i) * .02s); }
.sa-bg { position: absolute; left: 0; top: 0; width: 100%; height: 27.53cqw; object-fit: cover;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.sa-bar { position: absolute; left: 20.78cqw; top: 13.2cqw; width: 40cqw; height: 2.46cqw; display: flex; align-items: center;
  font: 400 0.93cqw/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; }
.sa-ph, .sa-typed { position: absolute; left: 0; white-space: nowrap; transition: opacity .3s ease; }
.sa-ph { color: #7f8a87; }
.sa-typed { color: var(--sa-ink); display: inline-flex; align-items: center; }
.sa-caret { display: inline-block; width: 0.07cqw; min-width: 1.5px; height: 1.15cqw; margin-left: 0.06cqw; background: var(--sa-ink); animation: sa-blink 1s steps(1) infinite; }
@keyframes sa-blink { 50% { opacity: 0; } }
.sa-send { position: absolute; left: 70.24cqw; top: 13.49cqw; width: 1.93cqw; height: 1.93cqw; border-radius: 0.36cqw; background: var(--sa-mint); opacity: 0; }

.sa-results p { margin: 0; position: absolute; font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif; white-space: nowrap; }
.sa-title { left: 1.87cqw; top: 17.9cqw; font-size: 1.14cqw; font-weight: 500; color: var(--sa-ink); }
.sa-count { left: 1.87cqw; top: 20.3cqw; font-size: 0.78cqw; color: var(--sa-muted); }
.sa-adv { right: 2.29cqw; top: 18.3cqw; font-size: 0.8cqw; color: var(--sa-mint); }
.sa-chips { position: absolute; left: 1.87cqw; top: 22.5cqw; margin: 0; padding: 0; list-style: none; display: flex; gap: 0.48cqw; }
.sa-chips li { height: 1.81cqw; padding: 0 0.78cqw; display: inline-flex; align-items: center; gap: 0.5cqw; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16); color: #d8dfdc; font: 400 0.75cqw/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; white-space: nowrap; }
.sa-chips b { font-weight: 400; color: #8e9995; }
.sa-tile { position: absolute; width: 15.36cqw; object-fit: cover; object-position: top; border-radius: 0.36cqw; }

/* Start state, set by the script just before playing */
.sa.is-ready .sa-typed .sa-q { display: inline; }
.sa.is-ready .sa-ph--refine, .sa.is-ready .sa-title, .sa.is-ready .sa-count, .sa.is-ready .sa-adv { opacity: 0; }
.sa.is-ready .sa-chips li { opacity: 0; transform: translateY(0.5cqw) scale(.92); }
.sa.is-ready .sa-tile { opacity: 0; transform: translateY(1cqw) scale(.96); }
.sa:not(.is-ready) .sa-ph--ask, .sa:not(.is-ready) .sa-typed { opacity: 0; }
.sa.is-ready.is-typing .sa-ph--ask { opacity: 0; transition: none; }
.sa.is-sent .sa-send { animation: sa-flash .5s ease-out; }
@keyframes sa-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
.sa.is-loading .sa-typed { opacity: 0; }
.sa.is-loading .sa-ph--refine { opacity: 1; transition-delay: .35s; }
.sa.is-loading .sa-title, .sa.is-loading .sa-count, .sa.is-loading .sa-adv { opacity: 1; transition: opacity .45s ease; }
.sa.is-loading .sa-chips li { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.15s + var(--i) * .11s); }
.sa.is-results .sa-skel { opacity: 0; transition-delay: .9s; }
.sa.is-results .sa-tile { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .045s); }

.sa-replay { display: inline-flex; gap: 8px; align-items: center; padding: 9px 16px; border-radius: 999px; border: 1px solid #d3dbd6; background: #fff;
  color: #202522; font: 600 14px/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; cursor: pointer; }
.sa-replay:hover { border-color: #087f68; color: #066452; }
.sa-replay:focus-visible { outline: 2px solid #087f68; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sa-replay { display: none; } }
@media (prefers-reduced-motion: reduce) { .sa *, .sa *::before, .sa *::after { animation: none !important; transition: none !important; } }