.vstu, .vstu * { box-sizing: border-box; }
.vstu {
position: absolute;
inset: 0;
display: block;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .1);
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.vstu { --turn: 8.4s; }
.vstu-inner { position: absolute; inset: 7% 5%; display: block; }
.vstu-stage {
position: absolute; left: 0; right: 0; top: 0; height: 72%; display: block;
border-radius: 4px; background: rgba(43, 41, 45, .035);
overflow: hidden;
contain: layout paint;
}
.vstu-tile {
position: absolute; display: block; z-index: 0; background: #fff; border-radius: 3px;
transition: left .45s cubic-bezier(.65, 0, .35, 1), top .45s cubic-bezier(.65, 0, .35, 1),
width .45s cubic-bezier(.65, 0, .35, 1), height .45s cubic-bezier(.65, 0, .35, 1),
opacity .45s cubic-bezier(.65, 0, .35, 1);
}
.vstu-tile--host { left: 0;      top: 0; width: 49.25%; height: 100%; }
.vstu-tile--g1   { left: 50.75%; top: 0; width: 49.25%; height: 100%; }
.vstu-tile--g2   { left: 101%; top: 51.75%; width: 32.5%; height: 48.25%; opacity: 0; z-index: 1; }
.vstu-media {
position: absolute; inset: 0; display: block; border-radius: 3px;
background: rgba(43, 41, 45, .1); overflow: hidden;
}
.vstu-media img, .vstu-media video {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; border-radius: inherit;
}
.vstu-share {
position: absolute; left: 0; top: 0; width: 66%; height: 100%; z-index: 2;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
gap: 5px; padding: 0 12%; border-radius: 3px; background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .14);
opacity: 0; transform: scale(.985);
transition: opacity .45s cubic-bezier(.65, 0, .35, 1), transform .45s cubic-bezier(.65, 0, .35, 1);
}
.vstu-bar { display: block; height: 5px; border-radius: 3px; background: rgba(43, 41, 45, .16); }
.vstu-bar--title { width: 38%; margin-bottom: .4em; background: rgba(43, 41, 45, .24); }
.vstu-bar--long  { width: 74%; }
.vstu-bar--mid   { width: 60%; }
.vstu-bar--short { width: 41%; }
.vstu .dw-live { top: 6.5%; left: 2.5%; z-index: 3; }
.vstu-count {
position: absolute; right: 36%; bottom: 6.5%; width: 16%; height: 24%; z-index: 2;
display: flex; align-items: center; justify-content: center;
border-radius: 3px; background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .18);
color: #2B292D;
font-size: 8.5px; font-weight: 700; line-height: 1.4; letter-spacing: .01em;
white-space: nowrap;
opacity: 0; transform: scale(.985);
transition: opacity .45s cubic-bezier(.65, 0, .35, 1),
transform .45s cubic-bezier(.65, 0, .35, 1);
}
.vstu-count-lead { display: block; }
.vstu-count-win  { display: block; height: 1.4em; overflow: hidden; }
.vstu-count-roll { display: block; transform: translateY(0); }
.vstu-count-s    { display: block; height: 1.4em; text-align: center; }
.vstu-minicount {
position: absolute; right: 7%; bottom: 9%; display: block;
width: 30%; height: 30%; min-height: 4px; border-radius: 1px;
background: #fff; box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .26);
}
.vstu-strip {
position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
display: flex; justify-content: space-between; align-items: stretch;
}
.vstu-scene {
position: relative; display: flex; justify-content: space-between; align-items: stretch;
width: 31.333%; height: 100%; padding: 3px; border-radius: 4px; background: rgba(43, 41, 45, .05);
}
.vstu-mini { display: block; border-radius: 2px; background: rgba(43, 41, 45, .14); }
.vstu-mini--half { width: 49.25%; height: 100%; }
.vstu-mini--big  { width: 66%;    height: 100%; position: relative; }
.vstu-mini--screen { width: 66%; height: 100%; background: #fff; box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .14); }
.vstu-col { display: flex; flex-direction: column; justify-content: space-between; width: 32.5%; height: 100%; }
.vstu-mini--s  { width: 100%; height: 48.25%; }
.vstu-mini--xs { width: 100%; height: 31%; }
.vstu-sel {
position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; display: block; width: 31.333%;
border: 2px solid #00ffff; border-radius: 4px; box-shadow: 0 0 0 3px rgba(0, 255, 255, .18);
transition: left .45s cubic-bezier(.65, 0, .35, 1);
}
@keyframes vstu-host {
0%, 14%   { left: 0;     top: 0; width: 49.25%; height: 100%; }
26%, 46%  { left: 0;     top: 0; width: 66%;    height: 100%; }
58%, 82%  { left: 67.5%; top: 0; width: 32.5%;  height: 31%; }
96%, 100% { left: 0;     top: 0; width: 49.25%; height: 100%; }
}
@keyframes vstu-g1 {
0%, 14%   { left: 50.75%; top: 0;     width: 49.25%; height: 100%; }
26%, 46%  { left: 67.5%;  top: 0;     width: 32.5%;  height: 48.25%; }
58%, 86%  { left: 67.5%;  top: 34.5%; width: 32.5%;  height: 31%; }
97%, 100% { left: 50.75%; top: 0;     width: 49.25%; height: 100%; }
}
@keyframes vstu-g2 {
0%, 18%   { left: 101%;  top: 51.75%; width: 32.5%; height: 48.25%; opacity: 0; }
30%, 46%  { left: 67.5%; top: 51.75%; width: 32.5%; height: 48.25%; opacity: 1; }
58%, 86%  { left: 67.5%; top: 69%;    width: 32.5%; height: 31%;    opacity: 1; }
94%, 100% { left: 101%;  top: 51.75%; width: 32.5%; height: 48.25%; opacity: 0; }
}
@keyframes vstu-share {
0%, 46%   { opacity: 0; transform: scale(.985); }
58%, 76%  { opacity: 1; transform: scale(1); }
82%, 100% { opacity: 0; transform: scale(.985); }
}
@keyframes vstu-sel {
0%, 12%   { left: 0; }
20%, 44%  { left: 34.333%; }
52%, 80%  { left: 68.666%; }
96%, 100% { left: 0; }
}
@keyframes vstu-count {
0%,  20%   { opacity: 0; transform: scale(.985); }
26%, 49%   { opacity: 1; transform: scale(1); }
55%, 100%  { opacity: 0; transform: scale(.985); }
}
@keyframes vstu-count-roll {
0%,    31.4% { transform: translateY(0); }
32.2%, 43%   { transform: translateY(-1.4em); }
43.8%, 59%   { transform: translateY(-2.8em); }
60%,   100%  { transform: translateY(0); }
}
.vstu .dw-cm {
left: 2.5%; bottom: 6.5%; z-index: 4;
max-width: 42%;
transition: transform .5s cubic-bezier(.22, .72, .24, 1),
opacity   .5s cubic-bezier(.22, .72, .24, 1);
}
.vstu .vstu-cm--1,
.vstu .vstu-cm--2 { transform: translateX(-112%); opacity: 0; }
@media (min-width: 992px) {
.vstu-count { border-radius: 4px; font-size: 11px; }
}
@keyframes vstu-cm1 {
0%,    0.6% { transform: translateX(-112%); opacity: 0; }
0.8%        { transform: translateX(-112%); opacity: 1; animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
3.4%        { transform: translateX(4%);    opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
5.4%, 29.5% { transform: translateX(0);     opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
31.5%       { transform: translateX(4%);    opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
35.3%       { transform: translateX(-112%); opacity: 1; }
35.5%, 100% { transform: translateX(-112%); opacity: 0; }
}
@keyframes vstu-cm2 {
0%,   50.6% { transform: translateX(-112%); opacity: 0; }
50.8%       { transform: translateX(-112%); opacity: 1; animation-timing-function: cubic-bezier(.22, .72, .24, 1); }
53.4%       { transform: translateX(4%);    opacity: 1; animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
55.4%, 79.5% { transform: translateX(0);    opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
81.5%       { transform: translateX(4%);    opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .85, .4); }
85.3%       { transform: translateX(-112%); opacity: 1; }
85.5%, 100% { transform: translateX(-112%); opacity: 0; }
}
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-tile--host,
.pillar-panel .vstu-tile--host { animation: vstu-host  8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-tile--g1,
.pillar-panel .vstu-tile--g1 { animation: vstu-g1    8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-tile--g2,
.pillar-panel .vstu-tile--g2 { animation: vstu-g2    8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-share,
.pillar-panel .vstu-share { animation: vstu-share 8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-sel,
.pillar-panel .vstu-sel { animation: vstu-sel   8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu .dw-live .dw-live-dot,
.pillar-panel .vstu .dw-live .dw-live-dot { animation: dw-pulse  2.1s ease-in-out infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-count,
.pillar-panel .vstu-count { animation: vstu-count      8.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-count-roll,
.pillar-panel .vstu-count-roll { animation: vstu-count-roll 8.4s cubic-bezier(.45, 0, .15, 1) infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-cm--1,
.pillar-panel .vstu-cm--1 { animation: vstu-cm1 16.8s linear infinite; }
.ways-card:is(:hover, :focus-visible, .is-playing) .vstu-cm--2,
.pillar-panel .vstu-cm--2 { animation: vstu-cm2 16.8s linear infinite; }
.pillar-preview:has(.vstu) {
background: #fff;
}
.pillar-panel .vstu {
border-radius: 0;
box-shadow: none;
container-type: inline-size;
}
.pillar-panel:not(.is-active) .vstu,
.pillar-panel:not(.is-active) .vstu * {
animation-play-state: paused;
}
.pillar-panel .vstu-count {
font-size: 8.5px;
font-size: calc(4px + .85cqw);
}
.pillar-panel .vstu-bar {
height: 5px;
height: calc(1px + .85cqw);
}
.pillar-panel .vstu-share {
gap: 5px;
gap: calc(1px + .85cqw);
border-radius: 3px;
border-radius: calc(1px + .3cqw);
}
.pillar-panel .vstu-mini {
border-radius: 2px;
border-radius: calc(1px + .16cqw);
}
.pillar-panel .vstu-sel {
border-width: 2px;
border-width: calc(1px + .16cqw);
}
@media (prefers-reduced-motion: reduce) {
.vstu, .vstu *,
.ways-card:hover .vstu *,
.pillar-panel .vstu * {
animation: none !important;
transition: none !important;
}
}