/* Shared only by the owner-approved MixUp / MixUp App video surfaces. */
.qp-video-ambient { position: relative; isolation: isolate; width: 100%; min-width: 0; }
/* Family films use the same optical frame; only their aspect ratio varies. */
.qp-read-page .qp-product-loop.qp-video-ambient { width: min(100%, var(--product-video-max-width, 420px)); height: auto; margin-inline: auto; }
.qp-read-page .qp-product-loop > .qp-mixup-video-frame { aspect-ratio: var(--product-video-ratio, 9 / 16); height: auto; }
.qp-read-page .qp-product-loop > .qp-mixup-video-frame video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.qp-mixup-hero__media > .qp-video-ambient { height: 100%; }
.qp-video-light-field {
  position: absolute;
  inset: calc(-1 * var(--qp-glow-top, 24px)) calc(-1 * var(--qp-glow-right, 24px)) calc(-1 * var(--qp-glow-bottom, 24px)) calc(-1 * var(--qp-glow-left, 24px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
  /* Fade to zero before the field reaches a clipping ancestor. */
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent), linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent), var(--qp-glow-mask, linear-gradient(transparent, transparent));
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent), linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent), var(--qp-glow-mask, linear-gradient(transparent, transparent));
  -webkit-mask-composite: source-in;
}
.qp-video-ambilight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--qp-glow-radius, var(--qp-radius-frame));
  image-rendering: auto;
  filter: blur(40px) saturate(1.25) brightness(1.5);
}
/* Approximately 3× the original light: 2× opacity and 1.5× luminance. */
.qp-video-ambient.is-lit > .qp-video-light-field,
.qp-video-ambient.is-lit > :where(.qp-ambient-gate) > .qp-video-light-field { opacity: .96; }
.qp-read-page .qp-mixup-video-frame {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: var(--qp-radius-frame);
  background: transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  isolation: isolate;
}
.qp-read-page .qp-mixup-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--qp-soft-edge);
}
.qp-read-page .qp-mixup-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #101216; color-scheme: dark; }
/* The opaque video already covers this backdrop; blurring it added a full-size
   offscreen texture without changing any visible pixels. Frame edges remain. */
[data-media-budget].qp-read-page .qp-mixup-video-frame { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-media-budget] .qp-video-ambient.is-media-released > .qp-video-light-field,
[data-media-budget] .qp-video-ambient.is-media-released > :where(.qp-ambient-gate) > .qp-video-light-field { display: none; }
.qp-read-page .qp-mixup-video-frame video:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.qp-read-page--mixup-seo .qp-mixup-hero__media .qp-mixup-video-frame video { object-fit: cover; }
.qp-read-page .qp-video-toggle {
  position: absolute;
  top: 50%; left: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 56px; height: 56px; min-width: 56px;
  padding: 0; margin: 0; border: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(16, 18, 22, .66); color: #fff;
  box-shadow: inset 0 1px 3px rgba(255,255,255,.22), 0 4px 16px rgba(0,0,0,.18);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  cursor: pointer; touch-action: manipulation;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
}
.qp-read-page .qp-video-toggle:focus-visible,
.qp-read-page .qp-mixup-video-frame.are-controls-visible .qp-video-toggle { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .qp-read-page .qp-mixup-video-frame:hover .qp-video-toggle { opacity: 1; pointer-events: auto; }
}
.qp-read-page .qp-video-toggle[hidden] { display: none; }
.qp-read-page .qp-video-toggle::before, .qp-read-page .qp-video-toggle::after { content: none; }
.qp-read-page .qp-video-toggle svg { width: 24px; height: 24px; fill: currentColor; grid-area: 1 / 1; }
.qp-read-page .qp-video-toggle .qp-video-toggle__pause,
.qp-read-page .qp-video-toggle.is-playing .qp-video-toggle__play { display: none; }
.qp-read-page .qp-video-toggle.is-playing .qp-video-toggle__pause { display: block; }
.qp-read-page .qp-video-toggle__repeat { display: none; font-size: 28px; line-height: 1; }
.qp-read-page .qp-video-toggle.is-ended .qp-video-toggle__repeat { display: block; }
.qp-read-page .qp-video-toggle.is-ended svg { display: none; }
.qp-read-page #reviews .qp-video-toggle { top: auto; left: auto; bottom: 16px; right: 16px; width: 44px; height: 44px; min-width: 44px; transform: none; opacity: 1; pointer-events: auto; }
.qp-read-page #reviews .qp-video-toggle:active { transform: scale(.94); }
.qp-read-page #reviews .qp-event-video-title { position: absolute; bottom: 16px; left: 16px; z-index: 2; max-width: calc(100% - 88px); padding: 10px 14px; border-radius: 20px; color: #10141e; background: rgba(255,255,255,.76); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 3px 12px rgba(0,0,0,.12); font-size: 14px; line-height: 1.4; pointer-events: none; }
.qp-read-page #reviews .qp-event-title-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-contrast: more) { .qp-read-page #reviews .qp-event-video-title { background: #f3f5f8; backdrop-filter: none; } }
.qp-read-page .qp-video-toggle:hover { background-color: rgba(16,18,22,.82); }
.qp-read-page .qp-video-toggle:active { transform: translate(-50%, -50%) scale(.94); }
.qp-read-page .qp-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .qp-read-page .qp-video-toggle { transition: none; } }
@media (prefers-contrast: more) {
  .qp-read-page .qp-video-toggle { background: #101216; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.qp-read-page .qp-mixup-hero__media:has(video) { overflow: visible; background: transparent; }
.qp-video-lit-section { position: relative; isolation: isolate; }
.qp-video-lit-section > :is(.wrap, .qp-shell) { position: relative; z-index: 1; }
.qp-video-section-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* The radial tint also reaches zero along every section edge. */
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent), radial-gradient(ellipse at var(--qp-light-x, 50%) var(--qp-light-y, 50%), rgba(0,0,0,.54), transparent 75%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent), linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent), radial-gradient(ellipse at var(--qp-light-x, 50%) var(--qp-light-y, 50%), rgba(0,0,0,.54), transparent 75%);
  -webkit-mask-composite: source-in;
  transition: opacity 600ms ease-out;
}
.qp-video-section-color { position: absolute; inset: 0; background-color: rgb(var(--qp-video-tint, 0,0,0)); }
.qp-read-page--mixup-seo #ai > .qp-video-section-light,
.qp-read-page--mixup-seo #ai > :where(.qp-ambient-gate) > .qp-video-section-light { mask-image: none; -webkit-mask-image: none; }
.qp-read-page--mixup-seo #ai .qp-video-section-color {
  background: radial-gradient(ellipse at 65% 50%, rgba(var(--qp-video-tint, 0,0,0), .62), rgba(var(--qp-video-tint, 0,0,0), .36));
  filter: saturate(1.8);
}
.qp-page .qp-read-page--mixup-seo > #ai { background: linear-gradient(120deg, #172940, #25203e 65%, #13243e); }
.qp-page .qp-read-page--mixup-seo :is(.qp-mixup-hero, #ai).has-video-light :is(#mixup-title, #mixup-ai-title) {
  color: color-mix(in srgb, #fff 80%, rgb(var(--qp-video-tint, 255,255,255)));
}
/* A video-driven sheen, not an independent flashing or looping animation. */
@supports (background-clip: text) {
  .qp-page .qp-read-page--mixup-seo :is(.qp-mixup-hero, #ai).has-video-light :is(#mixup-title, #mixup-ai-title) {
    background-image: linear-gradient(115deg, #fff 5%, color-mix(in srgb, #fff 72%, rgb(var(--qp-video-tint, 255,255,255))) 55%, #fff 95%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .qp-page .qp-read-page--mixup-seo :is(.qp-mixup-hero, #ai).has-video-light :is(#mixup-title, #mixup-ai-title) { background: none; color: CanvasText; }
}
/* HERO glass lettering: fine rim and a continuous highlight, driven
   by the existing video tint. Keep the semantic text; no duplicate overlay. */
.qp-page .qp-read-page--mixup-seo #mixup-title { letter-spacing: .005em; }
@supports (background-clip: text) {
  /* Match the ID specificity of the shared HERO/AI lighting selector. */
  .qp-page .qp-read-page--mixup-seo .qp-mixup-hero.has-video-light #mixup-title#mixup-title,
  .qp-page .qp-read-page--mixup-seo .has-video-light #mixup-assembly-title#mixup-assembly-title,
  .qp-page .qp-read-page--mixup-seo #ai.has-video-light #mixup-ai-title#mixup-ai-title {
    background-image: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(246,251,255,.72) 30%, rgba(225,237,255,.5) 68%, rgba(255,255,255,.88) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-text-stroke: .3px rgba(255,255,255,.64);
    filter: drop-shadow(0 -1px .4px rgba(255,255,255,.48))
      drop-shadow(0 2px .6px rgba(10,16,38,.3))
      drop-shadow(0 5px 4px rgba(6,12,30,.18));
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .qp-page .qp-read-page--mixup-seo .qp-mixup-hero.has-video-light #mixup-title#mixup-title,
  .qp-page .qp-read-page--mixup-seo .has-video-light #mixup-assembly-title#mixup-assembly-title,
  .qp-page .qp-read-page--mixup-seo #ai.has-video-light #mixup-ai-title#mixup-ai-title { background: none; color: #fff; -webkit-text-stroke: 0; filter: none; }
}
.qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.qp-page .qp-read-page--mixup-seo #mixup-ai-title { max-width: 12ch; margin: 0; letter-spacing: .005em; text-align: left; }
.qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > h2 { grid-column: 1 / -1; grid-row: 1; z-index: 4; max-width: none; width: calc((100% - clamp(290px, 38vw, 460px) - 40.5px) / 2 - 24px); }
@media (min-width: 761px) {
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > h2 { font-size: clamp(22px, calc(4.85vw - 18px), 32px); }
}
.qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > .qp-ai-carousel { grid-column: 1 / -1; grid-row: 1; }
.qp-ai-carousel { min-width: 0; --film-width: calc(clamp(290px, 38vw, 460px) + 40.5px); }
@media (min-width: 761px) { .qp-page .qp-read-page--mixup-seo > #ai { padding-top: 36px; padding-bottom: 36px; } }
.qp-ai-carousel__stage { position: relative; height: calc(var(--film-width) * 16 / 9 + 76px); touch-action: pan-y; }
@media (min-width: 761px) {
  /* Reserve space for navigation and section gutters, including short desktops. */
  .qp-ai-carousel__stage { height: calc(var(--film-width) * 16 / 9 + 24px); }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel { --film-width: min(calc(clamp(290px, 38vw, 460px) + 60.5px), calc((100svh - 160px) * 9 / 16)); }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure { left: 55%; top: 16px; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > h2 { width: calc((100% - clamp(290px, 38vw, 460px) - 60.5px) / 2 + 5% - 24px); }
}
.qp-ai-carousel figure { position: absolute; top: 0; left: 50%; width: var(--film-width); margin: 0; transform: translateX(-50%); transition: transform 400ms ease-out, opacity 400ms ease-out; }
.qp-ai-carousel figure[data-position="active"] { z-index: 3; }
.qp-ai-carousel figure[data-position="previous"] { transform: translate(-90%, -16px) scale(.64); transform-origin: center bottom; z-index: 1; opacity: 1; }
.qp-ai-carousel figure[data-position="next"] { transform: translate(-10%, -16px) scale(.64); transform-origin: center bottom; z-index: 1; opacity: 1; }
@media (min-width: 761px) {
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > h2 {
    width: calc(100% - clamp(290px, 38vw, 460px) - 60.5px - 32px);
    font-size: clamp(30px, 3.8vw, 48px); line-height: 1.12; text-wrap: balance;
  }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure { left: calc(100% - var(--film-width) / 2); }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-position="previous"] { transform: translate(-120%, -16px) scale(.70); z-index: 2; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-position="next"] { transform: translate(-158%, -32px) scale(.55); z-index: 1; }
}
.qp-ai-carousel .qp-video-ambient { height: auto; }
.qp-ai-carousel .qp-video-light-field {
  inset: -64px;
  mask-image: radial-gradient(ellipse closest-side, #000 55%, rgba(0,0,0,.65) 74%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 55%, rgba(0,0,0,.65) 74%, transparent 100%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}
.qp-ai-carousel .qp-video-ambilight { border-radius: 50%; filter: blur(36px) saturate(1.2) brightness(1.3); }
.qp-ai-carousel .qp-video-ambient.is-lit > .qp-video-light-field,
.qp-ai-carousel .qp-video-ambient.is-lit > :where(.qp-ambient-gate) > .qp-video-light-field { opacity: .72; }
.qp-page .qp-read-page--mixup-seo .qp-ai-carousel .qp-mixup-video-frame { aspect-ratio: 9 / 16; }
.qp-page .qp-read-page--mixup-seo .qp-ai-carousel .qp-mixup-video-frame video {
  display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  /* Tiny overscan prevents fractional seams while the parent slide scales. */
  transform: scale(1.012); transform-origin: center;
}
@media (min-width: 941px) {
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-position] {
    transform-origin: center bottom; opacity: 1;
  }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="0"] { transform: translateX(-50%); z-index: 6; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="1"] { transform: translate(-120%, -16px) scale(.70); z-index: 5; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="2"] { transform: translate(-158%, -32px) scale(.55); z-index: 4; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="3"] { transform: translate(-188%, -48px) scale(.42); z-index: 3; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="4"] { transform: translate(-212%, -64px) scale(.32); z-index: 2; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figure[data-depth="5"] { transform: translate(-231%, -80px) scale(.24); z-index: 1; }
}
.qp-ai-carousel__select { position: absolute; inset: 0; z-index: 4; border: 0; border-radius: 26px; background: transparent; cursor: pointer; }
.qp-ai-carousel.is-ready figure:not([data-position="active"]) figcaption { visibility: hidden; }
.qp-ai-carousel figcaption {
  position: absolute; z-index: 5; left: 12px; bottom: 12px; transform: none;
  width: max-content; max-width: calc(100% - 32px); box-sizing: border-box;
  margin: 0; padding: 9px 13px; border-radius: 18px;
  color: #10141e; font-size: 14px; line-height: 1.4; font-weight: 600; text-align: left;
  background: rgba(18,22,32,.64); border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 12px rgba(0,0,0,.12);
  pointer-events: none;
}
/* Shared light glass for media labels and their adjacent controls. */
.qp-read-page #reviews .qp-event-video-title,
.qp-read-page #reviews .qp-video-toggle,
.qp-read-page .qp-ai-carousel figcaption {
  color: #10141e; background: rgba(245,249,255,.48);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 3px 12px rgba(10,18,32,.14);
}
.qp-read-page #reviews .qp-mixup-video-frame .qp-video-toggle { opacity: 0; pointer-events: none; transition: opacity 220ms ease-out, transform 160ms ease-out; }
.qp-read-page #reviews .qp-mixup-video-frame.are-controls-visible .qp-video-toggle,
.qp-read-page #reviews .qp-mixup-video-frame .qp-video-toggle:focus-visible { opacity: 1; pointer-events: auto; }
.qp-read-page #reviews .qp-video-toggle:hover { background: rgba(245,249,255,.65); }
.qp-read-page #reviews .qp-event-video-title { left: 12px; bottom: 12px; padding: 9px 13px; font-size: 14px; line-height: 1.4; border-radius: 18px; }
.qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figcaption,
.qp-page .qp-read-page--mixup-seo #ai .qp-ai-carousel figcaption strong { color: rgba(24,29,38,.92); }
@media (prefers-contrast: more), (forced-colors: active) {
  .qp-read-page #reviews .qp-event-video-title, .qp-read-page #reviews .qp-video-toggle, .qp-read-page .qp-ai-carousel figcaption { background: #f5f9ff; color: #10141e; }
}
@media (prefers-reduced-motion: reduce) { .qp-read-page #reviews .qp-mixup-video-frame .qp-video-toggle { transition: none; } }
.qp-ai-carousel button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.qp-ai-carousel__status { color: #f3f5ff; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > h2 { width: auto; max-width: 22ch; }
  .qp-page .qp-read-page--mixup-seo #ai .qp-ai-showcase > .qp-ai-carousel { grid-row: 2; }
  .qp-page .qp-read-page--mixup-seo #mixup-ai-title { max-width: 22ch; }
  .qp-ai-carousel { --film-width: min(70vw, 400px); }
  .qp-ai-carousel figure[data-position="previous"] { transform: translate(-83%, -16px) scale(.62); }
  .qp-ai-carousel figure[data-position="next"] { transform: translate(-17%, -16px) scale(.62); }
}
@media (prefers-reduced-motion: reduce) { .qp-ai-carousel figure { transition: none; } }
.qp-video-lit-section.has-video-light > .qp-video-section-light,
.qp-video-lit-section.has-video-light > :where(.qp-ambient-gate) > .qp-video-section-light { opacity: 1; }
/* Hero-only broad wash; other video sections retain their local lighting. */
.qp-read-page--mixup-seo .qp-mixup-hero > .qp-video-section-light,
.qp-read-page--mixup-seo .qp-mixup-hero > :where(.qp-ambient-gate) > .qp-video-section-light {
  mask-image: none;
  -webkit-mask-image: none;
}
.qp-read-page--mixup-seo .qp-mixup-hero .qp-video-section-color {
  background: radial-gradient(ellipse at var(--qp-light-x, 70%) var(--qp-light-y, 50%), rgba(var(--qp-video-tint, 0,0,0), .9), rgba(var(--qp-video-tint, 0,0,0), .55) 65%, rgba(var(--qp-video-tint, 0,0,0), .32));
  filter: saturate(1.5);
}
.qp-ai-film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 720px; margin: 40px auto; }
.qp-ai-film-grid figure { min-width: 0; margin: 0; }
.qp-ai-film-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.qp-ai-film-grid .qp-video-ambient { height: auto; }
.qp-ai-film-grid .qp-mixup-video-frame video { aspect-ratio: 9 / 16; }
.qp-ai-film-grid figcaption { margin-top: 16px; color: var(--qp-ink-3); font-size: 14px; line-height: 1.55; }
.qp-ai-film-grid figcaption strong { display: block; color: var(--qp-ink); margin-bottom: 8px; font-weight: 600; }
@media (max-width: 640px) {
  .qp-ai-film-grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; }
  .qp-video-ambilight { filter: blur(28px) saturate(1.15) brightness(1.5); }
  .qp-video-ambient.is-lit > .qp-video-light-field,
.qp-video-ambient.is-lit > :where(.qp-ambient-gate) > .qp-video-light-field { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .qp-video-light-field, .qp-video-section-light { transition: none; }
}