/* QUEEZE how-to page (/intro): big looping films in sticker frames, numbered steps. */
.qz-site .qz-howto { max-width: 760px; margin-inline: auto; }
.qz-site .qz-howto-hero { display: flex; flex-direction: column; gap: 18px; }
.qz-site .qz-howto-video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #0d0a17; border: 3px solid #000; border-radius: 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qz-site .qz-howto-video--hero { box-shadow: 8px 8px 0 var(--qz-accent), 8px 8px 0 3px #000; transform: rotate(-1deg); }
.qz-site .qz-howto-lead { font-size: 18px; color: #fff; }
.qz-site .qz-howto-step { display: flex; flex-direction: column; gap: 14px; }
.qz-site .qz-howto-step .qz-howto-video { box-shadow: 5px 5px 0 #000; }
.qz-site .qz-howto-head { display: flex; align-items: center; gap: 14px; }
.qz-site .qz-howto-num { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--qz-display); font-size: 34px; line-height: 1; color: var(--qz-ink); background: var(--qz-howto-num, var(--qz-yellow)); border: 3px solid #000; border-radius: 50%; box-shadow: 4px 4px 0 #000; transform: rotate(-6deg); }
.qz-site .qz-howto-heading { margin: 0; font-size: clamp(26px, 6vw, 34px); text-transform: uppercase; line-height: 1; }
.qz-site .qz-screen > .qz-howto-step:nth-of-type(4n+2) { --qz-howto-num: var(--qz-accent-2); }
.qz-site .qz-screen > .qz-howto-step:nth-of-type(4n+3) { --qz-howto-num: var(--qz-lime); }
.qz-site .qz-screen > .qz-howto-step:nth-of-type(4n+4) { --qz-howto-num: var(--qz-accent); }
.qz-site .qz-howto-more .qz-howto-num { background: var(--qz-orange); }
.qz-site .qz-howto-tip { text-align: center; font-size: 15px; }

/* loading sticker on the poster until the film runs */
.qz-site .qz-howto-frame { position: relative; display: block; }
.qz-site .qz-howto-frame--hero { transform: rotate(-1deg); }
.qz-site .qz-howto-frame--hero .qz-howto-video--hero { transform: none; }
.qz-site .qz-howto-load { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; background: var(--qz-yellow); color: var(--qz-ink); border: 3px solid #000; border-radius: 16px; box-shadow: 5px 5px 0 #000; font-family: var(--qz-display); font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(0.7); transition: opacity 0.18s, transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.qz-site .qz-howto-frame.is-loading .qz-howto-load { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(1); transition-delay: 0.15s; }
.qz-site .qz-howto-frame.is-loading .qz-howto-video { filter: brightness(0.7) saturate(0.8); }
.qz-site .qz-howto-video { transition: filter 0.25s; }
.qz-site .qz-howto-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; }
.qz-site .qz-howto-bar { width: 6px; height: 100%; background: var(--qz-ink); border-radius: 3px; transform-origin: bottom; animation: qz-howto-eq 0.7s ease-in-out infinite; }
.qz-site .qz-howto-bar:nth-child(2) { animation-delay: -0.45s; background: var(--qz-accent); }
.qz-site .qz-howto-bar:nth-child(3) { animation-delay: -0.2s; }
.qz-site .qz-howto-bar:nth-child(4) { animation-delay: -0.6s; background: var(--qz-violet); }
@keyframes qz-howto-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (min-width: 900px) {
  .qz-site .qz-howto { max-width: 1040px; }
  .qz-site .qz-howto-step { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "film text"; align-items: center; column-gap: 28px; }
  .qz-site .qz-howto-step .qz-howto-head { grid-area: head; }
  .qz-site .qz-howto-step .qz-howto-frame { grid-area: film; }
  .qz-site .qz-howto-step > .qz-lead { grid-area: text; font-size: 19px; }
  .qz-site .qz-screen > .qz-howto-step:nth-of-type(odd) { grid-template-areas: "head head" "text film"; }
  .qz-site .qz-howto-hero .qz-howto-frame { width: 100%; max-width: 620px; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .qz-site .qz-howto-video--hero, .qz-site .qz-howto-frame--hero { transform: none; } .qz-site .qz-howto-bar { animation: none; } }