.cff-swipeview-close,
.cff-swipeview-nav {
z-index: 3;
}
.cff-swipeview-root { position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0; height: 100vh;
height: 100dvh;
z-index: 100000;
overflow: hidden;
background: #000;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent; opacity: 0;
transition: opacity 180ms ease; --cff-sv-gutter: 12px;
--cff-sv-edge: 16px;
--cff-sv-control: 44px;
--cff-sv-safe-bottom: 0px;
--cff-sv-safe-top: 0px; --cff-sv-caption-cap: calc(18.2px * 12);
}
@supports (padding: env(safe-area-inset-bottom)) {
.cff-swipeview-root {
--cff-sv-safe-bottom: env(safe-area-inset-bottom, 0px);
--cff-sv-safe-top: env(safe-area-inset-top, 0px);
}
} .cff-swipeview-root-in {
opacity: 1;
}  html.cff-swipeview-open,
html.cff-swipeview-open body {
overflow: hidden;
} .cff-swipeview-viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0; z-index: 2;
overflow: hidden; pointer-events: none;
}
.cff-swipeview-track {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; transform: translate3d(0, 0, 0);
will-change: transform;
}
.cff-swipeview-slot {
position: absolute;
left: 0;
width: 100%;
height: 100%; display: none;
}
.cff-swipeview-slot[data-index] {
display: block;
} .cff-swipeview-stagerow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
display: flex;
justify-content: center;
align-items: flex-end; gap: 0;
padding: 0; pointer-events: none;
} .cff-swipeview-stage {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
isolation: isolate;
border-radius: 0;
} .cff-swipeview-framechrome {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0;
}
.cff-swipeview-chromelayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
z-index: 3;
pointer-events: none;
}  @supports not (aspect-ratio: 9 / 16) { .cff-swipeview-stage {
width: 100%;
height: 100%;
}
.cff-swipeview-framechrome {
width: 100%;
height: 100%;
}
} .cff-swipeview-backdrop {
position: absolute;
top: -10%;
right: -10%;
bottom: -10%;
left: -10%; background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: blur(28px) brightness(0.55) saturate(1.2);
transform: scale(1.1); display: none;
pointer-events: none;
}
.cff-swipeview-video,
.cff-swipeview-embedcard-poster,
.cff-swipeview-terminal-poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; object-fit: cover;  pointer-events: none;
} .cff-swipeview-stage[data-fit="contain"] .cff-swipeview-video,
.cff-swipeview-stage[data-fit="contain"] .cff-swipeview-terminal-poster {
object-fit: contain;
} .cff-swipeview-gesture {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
z-index: 1; pointer-events: auto; touch-action: none;
} .cff-swipeview-loader {
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
pointer-events: none;
opacity: 0;
transition: opacity 120ms linear;
}
.cff-swipeview-loader-visible {
opacity: 1;
}
.cff-swipeview-spinner {
display: block;
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.28);
border-top-color: #fff;
border-radius: 50%;
animation: cffSwipeViewSpin 800ms linear infinite;
}
@keyframes cffSwipeViewSpin {
to { transform: rotate(360deg); }
}  .cff-swipeview-embedcard {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px; }
.cff-swipeview-embedcard-play {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
padding: 0;
color: #fff;
cursor: pointer;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 50%; pointer-events: auto;
}
.cff-swipeview-embedcard-label {
position: relative;
z-index: 1;
max-width: 78%;
font-size: 13px;
line-height: 1.35;
text-align: center; pointer-events: none;
opacity: 0.86;
}
.cff-swipeview-embedcard-playing .cff-swipeview-embedcard-play,
.cff-swipeview-embedcard-playing .cff-swipeview-embedcard-label,
.cff-swipeview-embedcard-playing .cff-swipeview-embedcard-poster {
display: none;
}
.cff-swipeview-embedcard-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; pointer-events: auto;
}  .cff-swipeview-embedcard-mask {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 56px;
background: #000;
pointer-events: auto;
} .cff-swipeview-terminal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px;
box-sizing: border-box; } .cff-swipeview-terminal-noposter {
background: #0a0a0a;
} .cff-swipeview-terminal-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
pointer-events: none;
}
.cff-swipeview-terminal-msg {
position: relative;
max-width: 30ch;
margin: 0; color: rgba(255, 255, 255, 0.7);
font-size: 13px;
line-height: 1.45;
text-align: center;
pointer-events: none;
} .cff-swipeview-terminal-link {
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 13px 0 11px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
background: rgba(0, 0, 0, 0.35);
border: 0;
border-radius: 999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); pointer-events: auto;
transition: background 150ms ease;
}
.cff-swipeview-terminal-link:hover,
.cff-swipeview-terminal-link:focus-visible {
color: #fff;
background: rgba(0, 0, 0, 0.55);
text-decoration: none;
}
.cff-swipeview-terminal-link svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
} .cff-swipeview-terminal-link::before {
content: '';
position: absolute;
top: -5px;
right: 0;
bottom: -5px;
left: 0;
border-radius: 999px;
}
.cff-swipeview-terminal-link[aria-disabled="true"] {
cursor: default;
opacity: 0.5;
} .cff-swipeview-scrim {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 42%;
z-index: 1;
background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
} .cff-swipeview-bottom {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0 16px 16px 16px;
padding-bottom: max(16px, var(--cff-sv-safe-bottom));
padding-right: 76px;
font-size: 14px;
line-height: 18.2px;
pointer-events: none;
} .cff-swipeview-authorrow {
display: flex;
align-items: center;
gap: 10px; align-self: flex-start;
min-width: 0;
max-width: 100%;
}
.cff-swipeview-author {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: #fff;
text-decoration: none;
pointer-events: auto;
}
.cff-swipeview-author:hover .cff-swipeview-handle-text,
.cff-swipeview-author:focus-visible .cff-swipeview-handle-text {
text-decoration: underline;
text-underline-offset: 3px;
}
.cff-swipeview-avatar {
box-sizing: border-box;
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: 50%;
object-fit: cover; isolation: isolate;
transform: translateZ(0);
background: #262626;
} .cff-swipeview-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
background-image: linear-gradient(135deg, hsl(var(--cff-sv-avatar-hue, 212) 70% 58%), hsl(calc(var(--cff-sv-avatar-hue, 212) + 50) 65% 38%));
}
.cff-swipeview-handle {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
font-size: 14px;
font-weight: 600;
line-height: 18.2px;
}
.cff-swipeview-handle-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} .cff-swipeview-verified {
width: 14px;
height: 14px;
flex: 0 0 auto;
} .cff-swipeview-follow {
font: inherit;
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 28px;
margin-left: 2px;
padding: 0 12px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 8px;
pointer-events: auto;
transition: background 150ms ease;
} .cff-swipeview-follow::before {
content: '';
position: absolute;
top: -8px;
right: 0;
bottom: -8px;
left: 0;
border-radius: 8px;
}
.cff-swipeview-follow:hover,
.cff-swipeview-follow:focus-visible {
color: #fff;
background: rgba(255, 255, 255, 0.12);
text-decoration: none;
} .cff-swipeview-caption {
margin: 0;
display: flex;
align-items: baseline;
gap: 6px;
font-size: 14px;
line-height: 18.2px; pointer-events: none;
}
.cff-swipeview-caption-text {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; overflow-wrap: break-word;
word-wrap: break-word;
}
.cff-swipeview-caption-more {
font: inherit;
-webkit-appearance: none;
appearance: none; pointer-events: auto;
position: relative;
flex: 0 0 auto;
display: none;
margin: 0;
padding: 0;
color: #a8a8a8;
font-size: 14px;
font-weight: 400;
line-height: 18.2px;
background: none;
border: 0;
cursor: pointer;
} .cff-swipeview-caption-more::before {
content: '';
position: absolute;
top: -13px;
right: -6px;
bottom: -13px;
left: -6px;
}
.cff-swipeview-caption-has-more .cff-swipeview-caption-more {
display: inline-block;
}
.cff-swipeview-caption-more:hover {
color: #fff;
}
.cff-swipeview-caption-expanded {
align-items: flex-end;
}
.cff-swipeview-caption-expanded .cff-swipeview-caption-text { white-space: pre-line;
overflow-y: auto;
overflow-x: hidden;
text-overflow: clip;
max-height: var(--cff-sv-caption-cap); pointer-events: auto;
padding-right: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.cff-swipeview-caption-expanded .cff-swipeview-caption-text::-webkit-scrollbar {
width: 4px;
}
.cff-swipeview-caption-expanded .cff-swipeview-caption-text::-webkit-scrollbar-track {
background: transparent;
}
.cff-swipeview-caption-expanded .cff-swipeview-caption-text::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.35);
border-radius: 2px;
} .cff-swipeview-coach {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: #fff;
text-align: center;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
.cff-swipeview-coach-on {
display: flex;
}
.cff-swipeview-coach-text {
font-size: 15px;
font-weight: 600;
line-height: 19.5px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cff-swipeview-coach-hand {
width: 44px;
height: 64px;
animation: cffSwipeViewCoach 1.4s ease-in-out infinite;
}
@keyframes cffSwipeViewCoach {
0%   { transform: translateY(10px); opacity: 0.35; }
45%  { transform: translateY(-10px); opacity: 1; }
100% { transform: translateY(10px); opacity: 0.35; }
} .cff-swipeview-tag {
color: #e0f1ff;
}  .cff-swipeview-railcol {
position: absolute;
right: 10px;
bottom: 0;
flex: 0 0 auto;
width: auto;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end; pointer-events: none;
}
.cff-swipeview-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-bottom: 18px;
padding-bottom: max(18px, var(--cff-sv-safe-bottom)); transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0ms;
pointer-events: none;
} .cff-swipeview-act { font: inherit;
-webkit-appearance: none;
appearance: none;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin: 0;
padding: 0;
color: #fff;
background: none;
border: 0;
text-decoration: none;
cursor: pointer;
pointer-events: auto;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
transition: transform 120ms ease;
}
.cff-swipeview-act svg {
width: 28px;
height: 28px;
flex: 0 0 auto;
} .cff-swipeview-act::before {
content: '';
position: absolute;
top: -1px;
right: -8px;
bottom: -1px;
left: -8px;
}
.cff-swipeview-act-count,
.cff-swipeview-act-label { display: block;
min-height: 12px;
font-size: 12px;
font-weight: 600;
line-height: 12px; font-variant-numeric: tabular-nums;
}
.cff-swipeview-act:hover {
color: #fff;
text-decoration: none;
transform: scale(1.06);
}
.cff-swipeview-act:active {
transform: scale(0.94);
} .cff-swipeview-act-like {
cursor: default;
}
.cff-swipeview-act-like:hover,
.cff-swipeview-act-like:active {
transform: none;
} .cff-swipeview-act-view {
display: flex;
} .cff-swipeview-toast {
position: absolute;
left: 50%;
bottom: 96px;
max-width: 80%;
padding: 9px 14px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 16px;
text-align: center;
background: rgba(0, 0, 0, 0.82);
border-radius: 8px;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
transition: opacity 160ms linear;
}
.cff-swipeview-toast-on {
opacity: 1;
} .cff-swipeview-top {
position: absolute;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
height: 48px;
padding: 14px 10px 0 62px;
padding-top: max(14px, var(--cff-sv-safe-top));
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); pointer-events: none;
} .cff-swipeview-mute {
font: inherit;
-webkit-appearance: none;
appearance: none;
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 34px;
height: 34px;
padding: 0 7px;
color: #111;
background: #fff;
border: 0;
border-radius: 17px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: none;
text-shadow: none;
line-height: 1;
white-space: nowrap; cursor: pointer;
pointer-events: auto;
transition: padding 700ms cubic-bezier(0.22, 1, 0.36, 1),
background 450ms ease,
color 450ms ease;
}
.cff-swipeview-mute svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
filter: none;
} .cff-swipeview-mute::before {
content: '';
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
border-radius: 22px;
}
.cff-swipeview-mute-label {
max-width: 0;
margin-left: 0;
opacity: 0;
overflow: hidden;
font-size: 13px;
font-weight: 600;
line-height: 13px;
letter-spacing: -0.005em;
white-space: nowrap;
transform: translateX(-6px);
transition: max-width 700ms cubic-bezier(0.22, 1, 0.36, 1),
margin 700ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 350ms ease 50ms,
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cff-swipeview-mute-hinting {
padding: 0 12px 0 9px;
}
.cff-swipeview-mute-hinting .cff-swipeview-mute-label {
max-width: 140px;
margin-left: 6px;
opacity: 1;
transform: none;
} .cff-swipeview-mute[data-state="on"] {
color: #fff;
background: rgba(0, 0, 0, 0.55);
}
.cff-swipeview-mute[data-state="on"]:hover,
.cff-swipeview-mute[data-state="on"]:focus-visible {
background: rgba(0, 0, 0, 0.75);
} .cff-swipeview-mute[data-state="on"] .cff-swipeview-mute-label {
display: none;
}
.cff-swipeview-mute[disabled] { cursor: default;
opacity: 0.4;
} .cff-swipeview-cta {
position: relative;
display: none;
box-sizing: border-box;
align-items: center;
flex: 0 0 auto;
gap: 7px;
height: 34px;
padding: 0 13px 0 11px;
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
text-shadow: none;
background: rgba(0, 0, 0, 0.35);
border-radius: 999px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
pointer-events: auto;
transition: background 150ms ease;
}
.cff-swipeview-cta svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.cff-swipeview-cta:hover,
.cff-swipeview-cta:focus-visible {
color: #fff;
background: rgba(0, 0, 0, 0.55);
text-decoration: none;
} .cff-swipeview-cta::before {
content: '';
position: absolute;
top: -5px;
right: 0;
bottom: -5px;
left: 0;
border-radius: 999px;
} .cff-swipeview-pauseglyph {
position: absolute;
top: 50%;
left: 50%;
margin: -42px 0 0 -42px;
z-index: 4;
display: none; pointer-events: none;
}
.cff-swipeview-pauseglyph svg {
box-sizing: border-box;
width: 84px;
height: 84px;
padding: 22px;
color: #fff;
background: rgba(0, 0, 0, 0.4);
border-radius: 50%;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
will-change: transform, filter;
}
.cff-swipeview-root[data-paused="true"] .cff-swipeview-pauseglyph {
display: block;
}
.cff-swipeview-root[data-paused="true"] .cff-swipeview-pauseglyph svg {
animation: cffSwipeViewPauseIn 200ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
} .cff-swipeview-root[data-paused="false"] .cff-swipeview-pauseglyph-was {
display: block;
}
.cff-swipeview-root[data-paused="false"] .cff-swipeview-pauseglyph-was svg {
animation: cffSwipeViewPauseOut 100ms cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes cffSwipeViewPauseIn {
from { opacity: 0; transform: scale(0.3); filter: blur(4px); }
to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}
@keyframes cffSwipeViewPauseOut {
from { opacity: 1; transform: scale(1);   filter: blur(0); }
to   { opacity: 0; transform: scale(0.8); filter: blur(4px); }
}   .cff-swipeview-close {
font: inherit;
-webkit-appearance: none;
appearance: none;
padding: 0;
position: absolute;
top: 12px;
top: max(12px, var(--cff-sv-safe-top));
left: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.16);
border: 0;
border-radius: 50%; isolation: isolate;
transform: translateZ(0); pointer-events: auto;
transition: background 150ms ease, transform 150ms ease;
}
.cff-swipeview-close:hover,
.cff-swipeview-close:focus-visible {
background: rgba(255, 255, 255, 0.28);
}
.cff-swipeview-close:active {
transform: scale(0.94);
}
.cff-swipeview-close svg {
width: 22px;
height: 22px;
} .cff-swipeview-close::before {
content: '';
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 50%;
} .cff-swipeview-progress {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: rgba(255, 255, 255, 0.28);
overflow: hidden; pointer-events: none;
}
.cff-swipeview-progress-fill {
display: block;
width: 100%;
height: 100%;
background: #fff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 250ms linear;
} .cff-swipeview-progress-fill-jump {
transition: none;
} .cff-swipeview-nav { display: none;
}  @media (hover: hover) and (pointer: fine) and (min-width: 769px) { .cff-swipeview-stagerow {
gap: 16px;
padding: 8px 0;
} .cff-swipeview-stage {
width: auto;
height: 100%;
max-width: 100%;
aspect-ratio: 9 / 16;
border-radius: 8px;
clip-path: inset(0 round 8px);
}
.cff-swipeview-framechrome {
width: auto;
height: 100%;
max-width: 100%;
aspect-ratio: 9 / 16;
border-radius: 8px;
clip-path: inset(0 round 8px);
}  .cff-swipeview-root {
background: rgba(0, 0, 0, 0.82);
background: color-mix(in srgb, #000 82%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
} .cff-swipeview-close {
top: 16px;
left: 16px;
} .cff-swipeview-top {
padding: 14px 14px 0 16px;
} .cff-swipeview-cta {
display: inline-flex;
} .cff-swipeview-bottom {
padding-right: 16px;
} [data-cff-swipe-tip]::after {
content: attr(data-cff-swipe-tip);
position: absolute;
top: 50%;
left: calc(100% + 10px);
padding: 6px 9px;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 12px;
white-space: nowrap;
background: rgba(28, 28, 30, 0.96);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); z-index: 30;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(4px);
transition: opacity 120ms ease, transform 120ms ease;
}
[data-cff-swipe-tip]:hover::after,
[data-cff-swipe-tip]:focus-visible::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
} .cff-swipeview-railcol {
position: relative;
right: auto;
bottom: auto;
width: 44px;
height: 100%;
}
.cff-swipeview-rail {
gap: 18px;
padding-bottom: 18px;
} .cff-swipeview-act svg {
width: 26px;
height: 26px;
} .cff-swipeview-act-view {
display: none;
} .cff-swipeview-nav {
position: absolute;
top: 50%;
right: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transform: translateY(-50%); pointer-events: none;
} .cff-swipeview-nav-prev,
.cff-swipeview-nav-next {
font: inherit;
-webkit-appearance: none;
appearance: none;
padding: 0;
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.16);
border: 0;
border-radius: 50%;
line-height: 1;
pointer-events: auto;
transition: background 150ms ease, transform 150ms ease, opacity 150ms ease;
}
.cff-swipeview-nav-prev svg,
.cff-swipeview-nav-next svg {
width: 24px;
height: 24px;
}
.cff-swipeview-nav-prev:hover,
.cff-swipeview-nav-next:hover,
.cff-swipeview-nav-prev:focus-visible,
.cff-swipeview-nav-next:focus-visible {
background: rgba(255, 255, 255, 0.28);
}
.cff-swipeview-nav-prev:active,
.cff-swipeview-nav-next:active {
transform: scale(0.94);
} .cff-swipeview-nav-prev[disabled],
.cff-swipeview-nav-next[disabled] {
cursor: default;
opacity: 0.3;
transform: none;
}
}   .cff-swipeview-close:focus-visible,
.cff-swipeview-mute:focus-visible,
.cff-swipeview-cta:focus-visible,
.cff-swipeview-nav-prev:focus-visible,
.cff-swipeview-nav-next:focus-visible,
.cff-swipeview-caption-more:focus-visible,
.cff-swipeview-author:focus-visible,
.cff-swipeview-follow:focus-visible, .cff-swipeview-act-comment:focus-visible,
.cff-swipeview-act-share:focus-visible,
.cff-swipeview-act-view:focus-visible,
.cff-swipeview-terminal-link:focus-visible,
.cff-swipeview-embedcard-play:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.72);
} .cff-swipeview-caption-more:focus-visible,
.cff-swipeview-author:focus-visible,
.cff-swipeview-act-comment:focus-visible,
.cff-swipeview-act-share:focus-visible,
.cff-swipeview-act-view:focus-visible {
border-radius: 6px;
}
.cff-swipeview-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
} @media (prefers-reduced-motion: reduce) {
.cff-swipeview-root,
.cff-swipeview-close,
.cff-swipeview-mute,
.cff-swipeview-mute-label,
.cff-swipeview-cta,
.cff-swipeview-act,
.cff-swipeview-follow,
.cff-swipeview-terminal-link,
.cff-swipeview-nav-prev,
.cff-swipeview-nav-next,
.cff-swipeview-toast {
transition: none;
} .cff-swipeview-rail {
transition: none;
}
[data-cff-swipe-tip]::after {
transition: none;
}
.cff-swipeview-coach-hand {
animation: none !important;
}
.cff-swipeview-spinner { animation: none !important;
} .cff-swipeview-root[data-paused="true"] .cff-swipeview-pauseglyph svg,
.cff-swipeview-root[data-paused="false"] .cff-swipeview-pauseglyph-was svg {
animation: none !important;
}
}