/* Explainer video (VSL). Scenes are drawn on a fixed 1280x720 canvas that js/vsl.js scales to fit. */
.vsl-sec { padding: 16vh 0 12vh; position: relative; }
.vsl-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(10,10,16,.86) 14%, rgba(10,10,16,.86) 86%, transparent); }
.vsl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; }
.vsl-head .lead { margin-top: 0; max-width: 40ch; }
.vsl { --vs-tx: #f1efe9; --vs-mute: rgba(241,239,233,.66); --vs-card: rgba(255,255,255,.07); --vs-line: rgba(241,239,233,.16); max-width: 1120px; margin-inline: auto; }
.vsl__frame { padding: 10px; border-radius: 30px; background: rgba(18,17,28,.85); border: 1px solid var(--line); box-shadow: 0 50px 120px -40px rgba(124,92,255,.45); }
.vsl__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 21px; background: radial-gradient(120% 90% at 80% 10%, #2a1f5c 0%, #120f24 55%, #0a0a10 100%); cursor: pointer; isolation: isolate; }
.vsl__canvas { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; transform: scale(var(--k, .5)); color: var(--vs-tx); font-family: var(--body); }
.vsl__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.vsl__glow--a { width: 620px; height: 620px; right: -140px; top: -220px; background: radial-gradient(circle, #7c5cff, transparent 65%); }
.vsl__glow--b { width: 640px; height: 640px; left: -240px; bottom: -300px; background: radial-gradient(circle, #ff5b3a, transparent 65%); opacity: .35; }
.vsl__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(241,239,233,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(241,239,233,.06) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 65% 45%, #000, transparent); mask-image: radial-gradient(70% 70% at 65% 45%, #000, transparent); }
.vsl__brand { position: absolute; left: 60px; top: 42px; display: flex; align-items: center; gap: 12px; z-index: 3; }
.vsl-dd { width: 46px; stroke: currentColor; stroke-width: 7; fill: none; }
.vsl__brand b { font: 600 20px/1 var(--display); letter-spacing: -.01em; }
.vsl__brand b span { font-weight: 800; margin-left: 4px; }
.vsl__count { position: absolute; right: 60px; top: 48px; z-index: 3; font: 700 15px/1 var(--body); letter-spacing: .2em; color: var(--vs-mute); }

.vs { position: absolute; inset: 0; padding: 120px 72px 64px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.vs.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.vs__tag { font: 700 15px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #ff8a66; }
.vs__h { margin: 22px 0 18px; font: 800 60px/1 var(--display); letter-spacing: -.04em; color: #fff; }
.vs__sub { margin: 0; font: 500 24px/1.4 var(--body); color: var(--vs-mute); max-width: 22ch; }
.vs.is-active .vs__tag { animation: vs-rise .7s var(--out) .1s both; }
.vs.is-active .vs__h { animation: vs-rise .8s var(--out) .25s both; }
.vs.is-active .vs__sub { animation: vs-rise .8s var(--out) .45s both; }
.vs__art { position: relative; display: grid; place-items: center; min-height: 440px; }
.vs [data-cue] { opacity: 0; }
.vs.is-active [data-cue] { animation: vs-rise .7s var(--out) var(--cue, 0s) both; }
.vs.is-active .a-who [data-cue], .vs.is-active .a-tags [data-cue], .vs.is-active .a-hub__tile[data-cue], .vs.is-active .a-chip[data-cue], .vs.is-active .a-stamp[data-cue] { animation-name: vs-pop; }
@keyframes vs-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vs-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes vs-ring { 0% { box-shadow: 0 0 0 0 rgba(255,91,58,.55); } 100% { box-shadow: 0 0 0 30px rgba(255,91,58,0); } }
@keyframes vs-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vs-growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vs-spin { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@keyframes vs-spin2d { to { transform: rotate(360deg); } }
@keyframes vs-needle { from { left: 8%; } to { left: 90%; } }
@keyframes vs-bob { 50% { transform: translateY(10px); } }
@keyframes vs-dim { to { filter: grayscale(1) brightness(.6); } }

/* shared bits */
.a-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font: 700 16px/1 var(--body); font-style: normal; white-space: nowrap; }
.a-tag svg { width: 18px; height: 18px; stroke-width: 2.4; }
.a-tag--bad { background: rgba(255,91,58,.16); color: #ffb3a1; box-shadow: inset 0 0 0 1px rgba(255,91,58,.5); }
.a-tag--good { background: rgba(198,255,77,.14); color: #dcff9a; box-shadow: inset 0 0 0 1px rgba(198,255,77,.5); }
.a-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 99px; background: #1b1830; box-shadow: inset 0 0 0 1.5px rgba(156,134,255,.55), 0 20px 40px -18px rgba(0,0,0,.7); font: 700 19px/1 var(--body); color: #fff; white-space: nowrap; }
.a-chip svg { width: 22px; height: 22px; color: #c6ff4d; }
.a-wbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.06); }
.a-wbar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(241,239,233,.25); }
.a-wbar span { flex: 1; margin-left: 10px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.08); font: 500 14px/1 var(--body); color: var(--vs-mute); }
/* a CSS 3D cube */
.a-cube { --s: 150px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: vs-spin 7s linear infinite; }
.a-cube i { position: absolute; inset: 0; border-radius: 18%; background: linear-gradient(135deg, rgba(156,134,255,.95), rgba(255,91,58,.85)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.a-cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.a-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.a-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(135deg, #7c5cff, #4a2fd1); }
.a-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(135deg, #ff8a66, #ff5b3a); }
.a-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: linear-gradient(135deg, #f1efe9, #c9c2ff); }
.a-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); background: #2b2540; }
.a-cube--sm { --s: 70px; }

/* 1 hook: three identical template sites */
.a-same { position: relative; width: 640px; height: 440px; }
.a-wire { position: absolute; width: 330px; border-radius: 18px; overflow: hidden; background: #1a1828; box-shadow: inset 0 0 0 1px var(--vs-line), 0 30px 60px -30px rgba(0,0,0,.8); }
.a-wire:nth-child(1) { left: 0; top: 10px; } .a-wire:nth-child(2) { left: 150px; top: 90px; } .a-wire:nth-child(3) { left: 300px; top: 170px; }
.vs.is-active .a-wire { animation: vs-rise .7s var(--out) var(--cue, 0s) both, vs-dim .8s ease calc(var(--cue, 0s) + 3.6s) forwards; }
.a-whero { margin: 14px; padding: 18px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; gap: 10px; }
.a-whero s { display: block; height: 14px; width: 70%; border-radius: 7px; background: rgba(241,239,233,.25); }
.a-whero s + s { width: 50%; height: 10px; }
.a-whero u { display: block; width: 90px; height: 24px; border-radius: 99px; background: rgba(241,239,233,.2); }
.a-wrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 14px 14px; }
.a-wrow b { height: 52px; border-radius: 10px; background: rgba(255,255,255,.06); }
.a-wire small { display: block; padding: 0 16px 12px; font: 500 13px/1 var(--body); color: var(--vs-mute); }
.a-price { position: absolute; right: 10px; bottom: 0; padding: 16px 24px; border-radius: 16px; background: #ff5b3a; color: #fff; font: 800 22px/1 var(--display); box-shadow: 0 24px 50px -18px rgba(255,91,58,.8); }
.vs.is-active .a-price { animation-name: vs-pop; }

/* 2 stop: a 3D site */
.a-stop { position: relative; width: 640px; height: 450px; }
.a-browser3 { position: absolute; left: 30px; top: 10px; width: 560px; border-radius: 20px; overflow: hidden; background: #15122a; box-shadow: inset 0 0 0 1.5px rgba(156,134,255,.5), 0 40px 90px -30px rgba(124,92,255,.7); }
.a-stage3 { position: relative; height: 330px; display: grid; place-items: center; perspective: 900px; background: radial-gradient(60% 70% at 50% 50%, rgba(124,92,255,.35), transparent 70%); }
.a-stage3 .a-cube { --s: 160px; }
.a-orbit { position: absolute; width: 330px; height: 110px; border-radius: 50%; border: 2px dashed rgba(241,239,233,.25); bottom: 26px; }
.a-chip--1 { left: -10px; top: 120px; } .a-chip--2 { right: -10px; top: 70px; } .a-chip--3 { right: 30px; top: 290px; }
.a-callpill { position: absolute; left: 160px; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 99px; background: #25d366; color: #fff; font: 800 20px/1 var(--body); }
.a-callpill svg { width: 22px; height: 22px; }
.vs.is-active .a-callpill { animation: vs-pop .5s var(--out) var(--cue, 0s) both, vs-ring 1.3s ease-out calc(var(--cue, 0s) + .4s) 3; }

/* 3 first: price comparison */
.a-cost { position: relative; display: flex; align-items: flex-end; gap: 60px; height: 440px; padding-bottom: 70px; }
.a-col { display: grid; gap: 16px; justify-items: center; }
.a-col span { font: 600 18px/1.2 var(--body); color: var(--vs-mute); }
.a-bar { width: 190px; border-radius: 24px 24px 10px 10px; display: grid; place-items: center; transform-origin: bottom; }
.vs.is-active .a-bar { animation: vs-grow .9s var(--out) var(--cue, 0s) both; opacity: 1; }
.a-bar--big { height: 330px; background: repeating-linear-gradient(135deg, #2b2540 0 16px, #241f37 16px 32px); box-shadow: inset 0 0 0 1px var(--vs-line); }
.a-bar--big b { font: 800 40px/1 var(--body); color: #f1efe9; opacity: .75; letter-spacing: .08em; }
.a-bar--dd { height: 140px; background: var(--grad); box-shadow: 0 30px 70px -20px rgba(124,92,255,.9); color: #fff; }
.a-bar--dd .vsl-dd { width: 90px; }
.a-stamp { margin-bottom: 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: 16px; background: #c6ff4d; color: #0a0a10; font: 800 21px/1 var(--display); }
.a-stamp svg { width: 22px; height: 22px; stroke-width: 3; }

/* 4 noticed: dwell bars */
.a-dwell { width: 600px; display: grid; gap: 22px; }
.a-drow { display: grid; gap: 12px; padding: 24px 26px; border-radius: 24px; background: var(--vs-card); box-shadow: inset 0 0 0 1px var(--vs-line); }
.a-drow--good { box-shadow: inset 0 0 0 1.5px rgba(156,134,255,.6); background: linear-gradient(135deg, rgba(124,92,255,.2), rgba(255,255,255,.04)); }
.a-drow small { font: 700 15px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--vs-mute); }
.a-track { height: 20px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.a-fill { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.vs.is-active .a-fill { opacity: 1; animation: vs-growx 1.6s var(--out) var(--cue, 0s) both; }
.a-fill--short { width: 14%; background: #ff5b3a; }
.a-fill--long { width: 92%; background: var(--grad); }
.a-drow .a-tag { justify-self: start; }
.a-illus { margin: 0; font: 500 14px/1 var(--body); color: var(--vs-mute); text-align: right; }

/* 5 trust: first-impression meter */
.a-meter { width: 580px; display: grid; gap: 18px; padding: 34px; border-radius: 30px; background: var(--vs-card); box-shadow: inset 0 0 0 1px var(--vs-line); }
.a-meter small { font: 700 15px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--vs-mute); }
.a-scale { position: relative; height: 26px; margin: 12px 0; border-radius: 99px; background: linear-gradient(90deg, #3a3550, #7c5cff 60%, #ff5b3a); }
.a-needle { position: absolute; top: -12px; left: 8%; width: 14px; height: 50px; margin-left: -7px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 4px rgba(10,10,16,.6), 0 0 30px rgba(255,255,255,.6); }
.vs [data-cue].a-needle { opacity: 1; }
.vs.is-active .a-needle { animation: vs-needle 1.8s var(--out) var(--cue, 0s) both; }
.a-ends { display: flex; justify-content: space-between; font: 600 17px/1 var(--body); color: var(--vs-mute); }
.a-ends span:last-child { color: #fff; }
.a-win { margin-top: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 16px 24px; border-radius: 99px; background: var(--grad); color: #fff; font: 800 21px/1 var(--display); }
.a-win svg { width: 24px; height: 24px; }

/* 6 share: group chat */
.a-chat { position: relative; width: 520px; display: grid; gap: 16px; }
.a-msg { justify-self: start; max-width: 400px; padding: 16px 22px; border-radius: 24px 24px 24px 8px; background: #22203a; box-shadow: inset 0 0 0 1px var(--vs-line); }
.a-msg b { display: block; font: 700 14px/1 var(--body); color: #ff8a66; margin-bottom: 8px; }
.a-msg p { margin: 0; font: 500 21px/1.35 var(--body); color: #fff; }
.a-msg--me { justify-self: end; border-radius: 24px 24px 8px 24px; background: linear-gradient(135deg, #5b3ee0, #7c5cff); }
.a-shot { display: grid; place-items: center; height: 130px; width: 300px; margin-bottom: 12px; border-radius: 14px; background: #120f24; perspective: 600px; }
.a-shares { position: absolute; right: -20px; bottom: -50px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 99px; background: #c6ff4d; color: #0a0a10; font: 800 18px/1 var(--body); }
.a-shares svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* 7 convert: effects that end in a button */
.a-conv { position: relative; display: flex; gap: 28px; padding-bottom: 60px; }
.a-ph { width: 260px; padding: 26px 22px 24px; border-radius: 34px; background: #17142a; box-shadow: inset 0 0 0 2px rgba(241,239,233,.14), 0 40px 80px -36px rgba(0,0,0,.9); display: grid; gap: 16px; justify-items: center; perspective: 600px; }
.a-ph > .a-cube { margin: 40px 0; }
.a-ph b { font: 700 21px/1.1 var(--display); color: #fff; }
.a-plate { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #f1efe9 0 34%, #e5dfd3 35% 48%, #f6f4ef 49% 100%); display: grid; place-items: center; animation: vs-spin2d 6s linear infinite; box-shadow: 0 20px 40px -14px rgba(0,0,0,.8); }
.a-plate i { width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(#ff5b3a 0 25%, #ffb347 0 45%, #7cc443 0 60%, #ff8a66 0 80%, #c0392b 0); }
.a-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 99px; background: var(--grad); color: #fff; font: 800 18px/1 var(--body); }
.a-btn svg { width: 20px; height: 20px; }
.vs.is-active .a-btn { animation: vs-pop .5s var(--out) var(--cue, 0s) both, vs-ring 1.3s ease-out calc(var(--cue, 0s) + .4s) 2; }
.a-chip--fast { left: 110px; bottom: -6px; }

/* 8 team: hub */
.a-hub { position: relative; width: 560px; height: 460px; }
.a-hub__core { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 44px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 30px 70px -20px rgba(124,92,255,.9), inset 0 2px 0 rgba(255,255,255,.4); z-index: 2; }
.a-hub__core .vsl-dd { width: 104px; }
.a-hub__ring { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 44px; }
.vs.is-active .a-hub__ring { animation: vs-ring 1.4s ease-out var(--cue, 0s) 3 both; opacity: 1; }
.a-hub__tile { position: absolute; display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: 22px; background: #1d1a33; box-shadow: inset 0 0 0 1px var(--vs-line); font: 700 20px/1 var(--body); color: #fff; white-space: nowrap; }
.a-hub__tile svg { width: 28px; height: 28px; color: #ff8a66; }
.a-hub__tile.t2 svg { color: #ffd166; }
.t1 { left: 0; top: 30px; } .t2 { right: 0; top: 30px; } .t3 { left: 0; bottom: 30px; } .t4 { right: 0; bottom: 30px; }

/* 9 who */
.a-who { width: 600px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.a-who span { padding: 18px 26px; border-radius: 99px; background: #1d1a33; box-shadow: inset 0 0 0 1px var(--vs-line); font: 700 23px/1 var(--display); color: #fff; }
.a-who span:nth-child(3n+1) { box-shadow: inset 0 0 0 1.5px rgba(156,134,255,.6); }
.a-who span:nth-child(8) { background: var(--grad); box-shadow: none; }

/* 10 call to action */
.a-final { display: grid; gap: 34px; justify-items: center; }
.a-tags { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.a-tags span { padding: 14px 24px; border-radius: 99px; background: #1d1a33; box-shadow: inset 0 0 0 1px var(--vs-line); font: 700 22px/1 var(--body); color: #fff; }
.a-book { display: inline-flex; align-items: center; gap: 16px; padding: 26px 42px; border-radius: 99px; background: var(--grad); color: #fff; font: 800 32px/1 var(--display); letter-spacing: -.02em; box-shadow: 0 30px 70px -20px rgba(124,92,255,.9), inset 0 2px 0 rgba(255,255,255,.35); }
.a-book svg { width: 34px; height: 34px; stroke-width: 2.2; }
.vs.is-active .a-book { animation: vs-pop .6s var(--out) var(--cue, 0s) both, vs-ring 1.5s ease-out calc(var(--cue, 0s) + .6s) 4; }
.a-down { color: #ff8a66; }
.a-down svg { width: 46px; height: 46px; }
.vs.is-active .a-down { animation: vs-rise .6s var(--out) var(--cue, 0s) both, vs-bob 1.1s ease-in-out calc(var(--cue, 0s) + .6s) infinite; }

/* paused: freeze every scene animation */
.vsl.is-paused .vs, .vsl.is-paused .vs * { animation-play-state: paused !important; }

/* overlays + controls (normal size, outside the scaled canvas) */
.vsl__big { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 22px; padding-left: 46%; background: linear-gradient(90deg, rgba(10,10,16,0), rgba(10,10,16,.55)); color: #fff; cursor: pointer; transition: opacity .4s var(--ease), visibility 0s; }
.vsl.is-started .vsl__big { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility 0s .4s; }
.vsl__bigico { width: clamp(64px, 11%, 108px); aspect-ratio: 1; min-width: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 0 0 0 rgba(255,91,58,.5), 0 24px 60px -16px rgba(124,92,255,.9); animation: vs-ring 2s ease-out infinite; transition: transform .4s var(--ease); }
.vsl__big:hover .vsl__bigico { transform: scale(1.08); }
.vsl__bigico svg { width: 42%; height: 42%; margin-left: 5%; }
.vsl__biglbl { display: grid; gap: 6px; font: 800 clamp(1rem, 2.2vw, 1.5rem)/1.2 var(--display); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.5); text-align: center; }
.vsl__biglbl small { font: 600 .6em/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #ffb3a1; }
.vsl__end { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(10,10,16,.82); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; cursor: default; }
.vsl.is-ended .vsl__end { opacity: 1; visibility: visible; transition-delay: 0s; }
.vsl__endbox { display: grid; gap: clamp(10px, 2vw, 22px); justify-items: center; text-align: center; }
.vsl__endbox h4 { margin: 0; font: 800 clamp(1.1rem, 3vw, 2.1rem)/1.15 var(--display); letter-spacing: -.03em; }
.vsl__endrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vsl__endrow .btn { height: 50px; padding: 0 22px; font-size: .92rem; }
.vsl__endrow .btn svg { width: 18px; height: 18px; }
.vsl__endlink { font-size: .85rem; font-weight: 600; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.vsl__cc { margin: 0; min-height: 5.4em; padding: .9rem 1.3rem .6rem; text-align: center; font-size: 1.02rem; line-height: 1.6; color: rgba(241,239,233,.38); }
.vsl__cc .w { transition: color .15s; }
.vsl__cc .w.on { color: var(--bone); }
.vsl__cc .w.now { color: #ff8a66; }
.vsl.no-cc .vsl__cc { display: none; }
.vsl__bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .9rem .7rem; }
.vsl__btn { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--bone); transition: background .3s, box-shadow .3s; }
.vsl__btn:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--violet); }
.vsl__btn svg { width: 19px; height: 19px; }
.vsl__play { color: #fff; background: var(--grad); box-shadow: none; }
.vsl__ccbtn:not(.is-on) { opacity: .5; }
.vsl__segs { flex: 1; display: flex; gap: 4px; min-width: 0; }
.vsl__seg { flex: 1; height: 26px; display: grid; align-items: center; }
.vsl__seg i { display: block; height: 5px; border-radius: 3px; background: rgba(241,239,233,.14); position: relative; overflow: hidden; transition: height .25s var(--ease); }
.vsl__seg i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.vsl__seg:hover i, .vsl__seg.is-cur i { height: 8px; }
.vsl__time { flex: none; font-size: .8rem; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 6.4em; text-align: right; }
.vsl__note { margin: .9rem 0 0; text-align: center; font-size: .8rem; color: var(--mute); }
.vsl__frame:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 0; background: #07070b; }
.vsl__frame:fullscreen .vsl__stage { width: min(100vw, calc((100vh - 150px) * 16 / 9)); margin-inline: auto; border-radius: 0; }
/* poster (before Play): show the first scene's title */
.vsl:not(.is-started) .vs.is-active .vs__tag, .vsl:not(.is-started) .vs.is-active .vs__h, .vsl:not(.is-started) .vs.is-active .vs__sub { animation: none; opacity: 1; }
@media (max-width: 760px) {
  .vsl-sec { padding: 10vh 0 8vh; }
  .vsl-head { display: block; margin-bottom: 26px; }
  .vsl-head .lead { margin-top: 16px; }
  .vsl__frame { padding: 6px; border-radius: 20px; }
  .vsl__stage { border-radius: 15px; }
  .vsl__time { display: none; }
  .vsl__cc { font-size: .95rem; min-height: 6.4em; padding-inline: .8rem; }
  .vsl__bar { gap: .45rem; padding-inline: .4rem; }
  .vsl__btn { width: 36px; height: 36px; }
  .vsl__big { padding-left: 0; padding-right: 9%; place-content: center end; }
  .vsl__biglbl { display: none; }
  .vsl__bigico { width: 22%; min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .vs.is-active [data-cue], .vs.is-active .vs__tag, .vs.is-active .vs__h, .vs.is-active .vs__sub { animation-duration: .01s !important; animation-delay: 0s !important; } .a-cube, .a-plate { animation: none; } }