/* ── /features — animated feature previews shown in the category modal ──
   Each preview is a looping HTML/CSS scene built from the pieces below.
   Sizes are in em off a font-size tied to the stage, so scenes scale with it.
   Base styles are the scene's finished state; animations only add the
   build-up, so reduced motion simply shows the finished frame. */

.pt-media { position: relative; container-type: size; }
.pv {
  --pv-t: 8s;
  --pv-off-bg: rgba(236, 253, 245, 0.04); --pv-off-bd: rgba(236, 253, 245, 0.1); --pv-off-fg: rgba(236, 253, 245, 0.7);
  --pv-on-bg: color-mix(in srgb, var(--c) 20%, transparent); --pv-on-fg: #ecfdf5;
  position: absolute; inset: 0; container-type: size;
  display: flex; align-items: center; justify-content: center; gap: 2.4em;
  font-size: min(1.9cqw, 3.5cqh);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
    #0b100e;
  color: #ecfdf5; text-align: left; line-height: 1.3;
  overflow: hidden;
}
/* Kit defaults use :where() so they carry no extra weight against a
   category's own single-class rules. */
:where(.pv) b { font-weight: 600; }
:where(.pv) svg { display: block; }

/* Building blocks */
.pv-win {
  width: 78%; background: #121a17; border: 1px solid rgba(236, 253, 245, 0.1); border-radius: .8em;
  overflow: hidden; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5);
}
.pv-top {
  display: flex; align-items: center; gap: .45em; padding: .6em .9em;
  border-bottom: 1px solid rgba(236, 253, 245, 0.07); font-size: .85em; color: rgba(236, 253, 245, 0.6);
}
.pv-top i { width: .65em; height: .65em; border-radius: 50%; background: rgba(236, 253, 245, 0.16); }
.pv-top b { margin-left: .6em; color: rgba(236, 253, 245, 0.88); }
.pv-body { padding: 1.1em 1.2em 1.2em; }
.pv-lbl { display: block; font-size: .72em; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(236, 253, 245, 0.48); }
.pv-sub { display: block; font-size: .78em; color: rgba(236, 253, 245, 0.55); }
.pv-ln { height: .5em; margin-top: .45em; border-radius: .25em; background: rgba(236, 253, 245, 0.12); }
.pv-card { position: relative; background: #18221e; border: 1px solid rgba(236, 253, 245, 0.08); border-radius: .55em; padding: .7em .8em; }
.pv-btn {
  display: inline-block; padding: .5em 1em; border-radius: .5em;
  background: var(--c); color: #0a0a0a; font-weight: 600; font-size: .85em; font-style: normal; white-space: nowrap;
}
.pv-ghostbtn { background: rgba(236, 253, 245, 0.08); color: rgba(236, 253, 245, 0.7); }
.pv-chip {
  display: inline-flex; align-items: center; padding: .35em .8em; border-radius: 999px; font-size: .8em; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.pv-tag { display: inline-flex; align-items: center; gap: .3em; font-size: .75em; font-weight: 600; color: var(--c); }
.pv-check { width: 1.1em; height: 1.1em; color: var(--c); flex: none; }
.pv-badge {
  display: inline-block; padding: .2em .6em; border-radius: 999px; font-size: .7em; font-weight: 600; font-style: normal; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c);
}
.pv-off { background: rgba(236, 253, 245, 0.08); color: rgba(236, 253, 245, 0.55); }
.pv-tabs, .pv-seg { display: flex; gap: .4em; font-size: .8em; margin-bottom: .9em; }
:where(.pv-tabs, .pv-seg) span { padding: .35em .8em; border-radius: .45em; color: rgba(236, 253, 245, 0.55); }
.pv-tabs .on, .pv-seg .on { background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-weight: 600; }
.pv-seg { display: inline-flex; padding: .25em; border-radius: .6em; background: rgba(236, 253, 245, 0.05); }
.pv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-top: 1em; }
.pv-stats > div { padding: .6em .8em; border-radius: .5em; background: rgba(236, 253, 245, 0.04); }
.pv-stats b { display: block; font-size: 1.5em; color: var(--c); margin-top: .1em; }
.pv-split { display: grid; grid-template-columns: 30% 1fr; gap: 1.2em; }
.pv-split2 { display: grid; grid-template-columns: 1fr 38%; gap: 1.2em; align-items: start; }
.pv-swap { display: inline-grid; justify-items: start; }
.pv-swap > * { grid-area: 1 / 1; }
.pv-env { width: 1.8em; height: auto; color: var(--c); }

/* Email mock (branded / feedback / unsubscribe) */
.pv-mail {
  width: 40%; background: #f6faf8; color: #1b2421; border-radius: .7em; overflow: hidden;
  box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5); font-size: .95em;
}
.pv-mail .pv-ln { background: rgba(27, 36, 33, 0.12); }
.pv-mail-head {
  display: grid; place-items: center; padding: 1em; background: var(--c);
  color: #fff; font-weight: 700; letter-spacing: .12em; font-size: .85em;
}
.pv-mail-head > * { grid-area: 1 / 1; }
.pv-mail-body { padding: 1.1em 1.2em; }
.pv-mail-body > b { font-size: 1.15em; }
.pv-center { text-align: center; }
.pv-center .pv-ln { margin-left: auto; margin-right: auto; }
.pv-center .pv-btn { margin-top: 1em; }
.pv-big { font-size: 1.5em !important; }
.pv-mail-foot {
  display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .8em;
  background: #e8efec; font-size: .72em; color: #5b6763;
}

/* Phone, chat bubble, QR and progress bar (shared across categories) */
.pv-track { height: 1.1em; border-radius: .3em; background: rgba(236, 253, 245, 0.05); overflow: hidden; }
.pv-bar { --from: scaleX(0); height: 100%; border-radius: .3em; transform-origin: left; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #0a0a0a)); min-width: .4em; }
.pv-phone {
  position: relative; height: 90%; aspect-ratio: 9 / 16; padding: 2.4em .8em 1em;
  border-radius: 2em; border: .35em solid #26302c; background: #0f1513;
  display: flex; flex-direction: column; gap: .7em; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5);
}
.pv-notch { position: absolute; top: .6em; left: 50%; width: 30%; height: .9em; margin-left: -15%; border-radius: .6em; background: #26302c; }
.pv-bubble { align-self: flex-start; max-width: 92%; padding: .6em .8em; border-radius: 1em 1em 1em .3em; background: #26302c; font-size: .78em; line-height: 1.4; }
.pv-bubble u { color: var(--c); text-decoration-color: color-mix(in srgb, var(--c) 50%, transparent); white-space: nowrap; }
.pv-mms { padding: .6em; background: #f6faf8; }
.pv-qr { width: 6.5em; height: 6.5em; color: #111; }

/* Three-phase rotation (pv-pa / pv-pb / pv-pc), e.g. cycling brands or cards */
@keyframes pvPhA { 0%, 29% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pvPhB { 0%, 29% { opacity: 0; } 33%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes pvPhC { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
.pv-pa { animation: pvPhA var(--pv-t) infinite; }
.pv-pb { animation: pvPhB var(--pv-t) infinite; }
.pv-pc { animation: pvPhC var(--pv-t) infinite; }

@media (prefers-reduced-motion: reduce) {
  .pv * { animation: none !important; }
  .pv .pv-o1, .pv .pv-o2, .pv .pv-o3, .pv .pv-o4, .pv .pv-o5, .pv .pv-o6, .pv .pv-o7,
  .pv .pv-r1-2, .pv .pv-r1-3, .pv .pv-r1-4, .pv .pv-r1-5, .pv .pv-r1-6, .pv .pv-r1-7, .pv .pv-r2-3,
  .pv .pv-r2-4, .pv .pv-r2-5, .pv .pv-r2-6, .pv .pv-r2-7, .pv .pv-r3-4, .pv .pv-r3-5, .pv .pv-r3-6,
  .pv .pv-r3-7, .pv .pv-r4-5, .pv .pv-r4-6, .pv .pv-r4-7, .pv .pv-r5-6, .pv .pv-r5-7, .pv .pv-r6-7,
  .pv .pv-pb, .pv .pv-pc { opacity: 0; }
}

/* ── Shared timeline: every scene loops over 8s; step k lands at A[k].
   Generated: pv-iK (appear), pv-oK (disappear), pv-rA-B (visible A..B),
   pv-pK (button press), pv-hlK / pv-togK (light up and stay lit: an
   ::after layer carries the lit look and only its opacity animates, via
   pvOnK, so it stays on the compositor; don't animate colors here). ── */
@keyframes pvIn1 { 0%, 4% { opacity: 0; transform: var(--from, translateY(.5em)); } 8%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i1 { animation: pvIn1 var(--pv-t) infinite; }
@keyframes pvOut1 { 0%, 4% { opacity: 1; } 8%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o1 { animation: pvOut1 var(--pv-t) infinite; }
@keyframes pvPress1 { 0%, 5%, 11%, 100% { transform: none; filter: none; } 8% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p1 { animation: pvPress1 var(--pv-t) infinite; }
@keyframes pvIn2 { 0%, 15% { opacity: 0; transform: var(--from, translateY(.5em)); } 19%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i2 { animation: pvIn2 var(--pv-t) infinite; }
@keyframes pvOut2 { 0%, 15% { opacity: 1; } 19%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o2 { animation: pvOut2 var(--pv-t) infinite; }
@keyframes pvPress2 { 0%, 16%, 22%, 100% { transform: none; filter: none; } 19% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p2 { animation: pvPress2 var(--pv-t) infinite; }
@keyframes pvIn3 { 0%, 26% { opacity: 0; transform: var(--from, translateY(.5em)); } 30%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i3 { animation: pvIn3 var(--pv-t) infinite; }
@keyframes pvOut3 { 0%, 26% { opacity: 1; } 30%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o3 { animation: pvOut3 var(--pv-t) infinite; }
@keyframes pvPress3 { 0%, 27%, 33%, 100% { transform: none; filter: none; } 30% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p3 { animation: pvPress3 var(--pv-t) infinite; }
@keyframes pvIn4 { 0%, 37% { opacity: 0; transform: var(--from, translateY(.5em)); } 41%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i4 { animation: pvIn4 var(--pv-t) infinite; }
@keyframes pvOut4 { 0%, 37% { opacity: 1; } 41%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o4 { animation: pvOut4 var(--pv-t) infinite; }
@keyframes pvPress4 { 0%, 38%, 44%, 100% { transform: none; filter: none; } 41% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p4 { animation: pvPress4 var(--pv-t) infinite; }
@keyframes pvIn5 { 0%, 48% { opacity: 0; transform: var(--from, translateY(.5em)); } 52%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i5 { animation: pvIn5 var(--pv-t) infinite; }
@keyframes pvOut5 { 0%, 48% { opacity: 1; } 52%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o5 { animation: pvOut5 var(--pv-t) infinite; }
@keyframes pvPress5 { 0%, 49%, 55%, 100% { transform: none; filter: none; } 52% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p5 { animation: pvPress5 var(--pv-t) infinite; }
@keyframes pvIn6 { 0%, 59% { opacity: 0; transform: var(--from, translateY(.5em)); } 63%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i6 { animation: pvIn6 var(--pv-t) infinite; }
@keyframes pvOut6 { 0%, 59% { opacity: 1; } 63%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o6 { animation: pvOut6 var(--pv-t) infinite; }
@keyframes pvPress6 { 0%, 60%, 66%, 100% { transform: none; filter: none; } 63% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p6 { animation: pvPress6 var(--pv-t) infinite; }
@keyframes pvIn7 { 0%, 70% { opacity: 0; transform: var(--from, translateY(.5em)); } 74%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.pv-i7 { animation: pvIn7 var(--pv-t) infinite; }
@keyframes pvOut7 { 0%, 70% { opacity: 1; } 74%, 96% { opacity: 0; } 100% { opacity: 1; } }
.pv-o7 { animation: pvOut7 var(--pv-t) infinite; }
@keyframes pvPress7 { 0%, 71%, 77%, 100% { transform: none; filter: none; } 74% { transform: scale(.9); filter: brightness(1.35); } }
.pv-p7 { animation: pvPress7 var(--pv-t) infinite; }
@keyframes pvR12 { 0%, 4% { opacity: 0; } 8%, 15% { opacity: 1; } 19%, 100% { opacity: 0; } }
.pv-r1-2 { animation: pvR12 var(--pv-t) infinite; }
@keyframes pvR13 { 0%, 4% { opacity: 0; } 8%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
.pv-r1-3 { animation: pvR13 var(--pv-t) infinite; }
@keyframes pvR14 { 0%, 4% { opacity: 0; } 8%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
.pv-r1-4 { animation: pvR14 var(--pv-t) infinite; }
@keyframes pvR15 { 0%, 4% { opacity: 0; } 8%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.pv-r1-5 { animation: pvR15 var(--pv-t) infinite; }
@keyframes pvR16 { 0%, 4% { opacity: 0; } 8%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
.pv-r1-6 { animation: pvR16 var(--pv-t) infinite; }
@keyframes pvR17 { 0%, 4% { opacity: 0; } 8%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r1-7 { animation: pvR17 var(--pv-t) infinite; }
@keyframes pvR23 { 0%, 15% { opacity: 0; } 19%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
.pv-r2-3 { animation: pvR23 var(--pv-t) infinite; }
@keyframes pvR24 { 0%, 15% { opacity: 0; } 19%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
.pv-r2-4 { animation: pvR24 var(--pv-t) infinite; }
@keyframes pvR25 { 0%, 15% { opacity: 0; } 19%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.pv-r2-5 { animation: pvR25 var(--pv-t) infinite; }
@keyframes pvR26 { 0%, 15% { opacity: 0; } 19%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
.pv-r2-6 { animation: pvR26 var(--pv-t) infinite; }
@keyframes pvR27 { 0%, 15% { opacity: 0; } 19%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r2-7 { animation: pvR27 var(--pv-t) infinite; }
@keyframes pvR34 { 0%, 26% { opacity: 0; } 30%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
.pv-r3-4 { animation: pvR34 var(--pv-t) infinite; }
@keyframes pvR35 { 0%, 26% { opacity: 0; } 30%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.pv-r3-5 { animation: pvR35 var(--pv-t) infinite; }
@keyframes pvR36 { 0%, 26% { opacity: 0; } 30%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
.pv-r3-6 { animation: pvR36 var(--pv-t) infinite; }
@keyframes pvR37 { 0%, 26% { opacity: 0; } 30%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r3-7 { animation: pvR37 var(--pv-t) infinite; }
@keyframes pvR45 { 0%, 37% { opacity: 0; } 41%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.pv-r4-5 { animation: pvR45 var(--pv-t) infinite; }
@keyframes pvR46 { 0%, 37% { opacity: 0; } 41%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
.pv-r4-6 { animation: pvR46 var(--pv-t) infinite; }
@keyframes pvR47 { 0%, 37% { opacity: 0; } 41%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r4-7 { animation: pvR47 var(--pv-t) infinite; }
@keyframes pvR56 { 0%, 48% { opacity: 0; } 52%, 59% { opacity: 1; } 63%, 100% { opacity: 0; } }
.pv-r5-6 { animation: pvR56 var(--pv-t) infinite; }
@keyframes pvR57 { 0%, 48% { opacity: 0; } 52%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r5-7 { animation: pvR57 var(--pv-t) infinite; }
@keyframes pvR67 { 0%, 59% { opacity: 0; } 63%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
.pv-r6-7 { animation: pvR67 var(--pv-t) infinite; }

/* pv-hlK / pv-togK: "light up and stay lit". The lit look (on background,
   accent border, glow) lives on a ::after layer behind the content and only
   its opacity animates, so the compositor runs it; animating background,
   border, box-shadow and color on the element itself forced a main-thread
   style recalc + paint every frame. While motion is allowed the element
   itself holds the "off" look (what the old keyframes held at 0%/100%);
   reduced motion never sees any of this and keeps the base (finished) look. */
@media (prefers-reduced-motion: no-preference) {
  :where(.pv-hl1, .pv-tog1, .pv-hl2, .pv-tog2, .pv-hl3, .pv-tog3, .pv-hl4, .pv-tog4, .pv-hl5, .pv-tog5, .pv-hl6, .pv-tog6, .pv-hl7, .pv-tog7) { position: relative; isolation: isolate; }
  :is(.pv-hl1, .pv-tog1, .pv-hl2, .pv-tog2, .pv-hl3, .pv-tog3, .pv-hl4, .pv-tog4, .pv-hl5, .pv-tog5, .pv-hl6, .pv-tog6, .pv-hl7, .pv-tog7):not(.pv-ven-rowhl > *) {
    background: var(--pv-off-bg) !important; border-color: var(--pv-off-bd) !important;
    box-shadow: none !important; color: var(--pv-on-fg) !important;
  }
  :is(.pv-hl1, .pv-tog1, .pv-hl2, .pv-tog2, .pv-hl3, .pv-tog3, .pv-hl4, .pv-tog4, .pv-hl5, .pv-tog5, .pv-hl6, .pv-tog6, .pv-hl7, .pv-tog7):not(.pv-ven-rowhl > *)::after {
    content: ""; position: absolute; inset: calc(-1 * var(--pv-bw, 1px)); z-index: -1; pointer-events: none;
    border: var(--pv-bw, 1px) solid var(--c); border-radius: inherit; background: var(--pv-on-bg);
    box-shadow: 0 0 1em color-mix(in srgb, var(--c) 45%, transparent); opacity: 0;
  }
@keyframes pvOn1 { 0%, 5% { opacity: 0; } 8%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl1::after, .pv-tog1::after { animation: pvOn1 var(--pv-t) infinite; }
@keyframes pvOn2 { 0%, 16% { opacity: 0; } 19%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl2::after, .pv-tog2::after { animation: pvOn2 var(--pv-t) infinite; }
@keyframes pvOn3 { 0%, 27% { opacity: 0; } 30%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl3::after, .pv-tog3::after { animation: pvOn3 var(--pv-t) infinite; }
@keyframes pvOn4 { 0%, 38% { opacity: 0; } 41%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl4::after, .pv-tog4::after { animation: pvOn4 var(--pv-t) infinite; }
@keyframes pvOn5 { 0%, 49% { opacity: 0; } 52%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl5::after, .pv-tog5::after { animation: pvOn5 var(--pv-t) infinite; }
@keyframes pvOn6 { 0%, 60% { opacity: 0; } 63%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl6::after, .pv-tog6::after { animation: pvOn6 var(--pv-t) infinite; }
@keyframes pvOn7 { 0%, 71% { opacity: 0; } 74%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.pv-hl7::after, .pv-tog7::after { animation: pvOn7 var(--pv-t) infinite; }
}

/* pv-iK on an inline box (a word inside a sentence): transforms don't apply
   to inline boxes, so the slide never showed, but its presence kept Blink
   from compositing the fade. periodic-table.js tags those targets .pv-inl;
   they get the same fade without the transform. */
@keyframes pvFade1 { 0%, 4% { opacity: 0; } 8%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i1 { animation-name: pvFade1; }
@keyframes pvFade2 { 0%, 15% { opacity: 0; } 19%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i2 { animation-name: pvFade2; }
@keyframes pvFade3 { 0%, 26% { opacity: 0; } 30%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i3 { animation-name: pvFade3; }
@keyframes pvFade4 { 0%, 37% { opacity: 0; } 41%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i4 { animation-name: pvFade4; }
@keyframes pvFade5 { 0%, 48% { opacity: 0; } 52%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i5 { animation-name: pvFade5; }
@keyframes pvFade6 { 0%, 59% { opacity: 0; } 63%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i6 { animation-name: pvFade6; }
@keyframes pvFade7 { 0%, 70% { opacity: 0; } 74%, 91% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pv-inl.pv-i7 { animation-name: pvFade7; }