.sbi-qs-scroll-locked { overflow: hidden !important; height: 100vh; height: 100dvh; } .sbi-qs-overlay { position: fixed; inset: 0; background: #000; z-index: 999999; display: none; overflow: hidden; color: #fff; color-scheme: dark; font-family: Inter, InterVariable, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-feature-settings: 'liga' 1, 'calt' 1; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; opacity: 0; transition: opacity 180ms ease; --sbi-qs-stage-radius: 0px; --sbi-qs-rail-w: 0px; --sbi-qs-stage-gap: 0px; --sbi-qs-frame-shift: 0px; --sbi-qs-stage-half: 50vw; --sbi-qs-caption-cap: calc(18.2px * 12); } .sbi-qs-overlay.sbi-qs-active { display: block; } .sbi-qs-overlay.sbi-qs-visible { opacity: 1; } .sbi-qs-overlay:focus { outline: 0; } .sbi-qs-close { font: inherit; -webkit-appearance: none; appearance: none; padding: 0; position: absolute; top: 12px; top: max(12px, env(safe-area-inset-top, 0px)); left: 12px; z-index: 6; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: background 150ms ease, transform 150ms ease; } .sbi-qs-close:hover, .sbi-qs-close:focus-visible { background: rgba(255, 255, 255, 0.28); outline: 0; } .sbi-qs-close:active { transform: scale(0.94); } .sbi-qs-close:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); } .sbi-qs-close svg { width: 22px; height: 22px; } .sbi-qs-close::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; } .sbi-qs-viewport { position: absolute; inset: 0; overflow: hidden; z-index: 2; pointer-events: none; } .sbi-qs-track { position: relative; width: 100%; will-change: transform; transform: translate3d(0, 0, 0); pointer-events: none;  } .sbi-qs-post { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; pointer-events: none; } .sbi-qs-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #000; border-radius: var(--sbi-qs-stage-radius, 0px); overflow: hidden; isolation: isolate; pointer-events: none; } .sbi-qs-backdrop { position: absolute; inset: -10%; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(28px) brightness(0.55) saturate(1.2); transform: scale(1.1); pointer-events: none; } .sbi-qs-video, .sbi-qs-poster, .sbi-qs-embed { position: relative; width: 100%; height: 100%; pointer-events: none; border-radius: var(--sbi-qs-stage-radius, 0px); clip-path: inset(0 round var(--sbi-qs-stage-radius, 0px)); } .sbi-qs-video, .sbi-qs-poster { object-fit: cover; } .sbi-qs-media[data-fit="contain"] .sbi-qs-video, .sbi-qs-media[data-fit="contain"] .sbi-qs-poster { object-fit: contain; } .sbi-qs-embed { border: 0; background: #000; } .sbi-qs-mediahost { position: absolute; inset: 0; pointer-events: none; } .sbi-qs-spinner { position: absolute; top: 50%; left: 50%; margin: -18px 0 0 -18px; box-sizing: border-box; width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 200ms ease; animation: sbiQsSpin 0.8s linear infinite; } .sbi-qs-media[data-buffering="true"] .sbi-qs-spinner { opacity: 1; } .sbi-qs-fail { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(0, 0, 0, 0.4); pointer-events: none; } .sbi-qs-media[data-tier="terminal"] .sbi-qs-fail { display: flex; } .sbi-qs-media[data-tier="terminal"] .sbi-qs-fail-link { display: inline-flex; pointer-events: auto; } .sbi-qs-fail-text { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .sbi-qs-gesture { position: absolute; inset: 0; z-index: 1; cursor: pointer; } .sbi-qs-framechrome { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 3; border-radius: var(--sbi-qs-stage-radius, 0px); overflow: hidden; pointer-events: none; } .sbi-qs-top { position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; height: 48px; padding: 14px 10px 0 62px; padding-top: max(14px, env(safe-area-inset-top, 0px)); 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; } .sbi-qs-mute { font: inherit; -webkit-appearance: none; appearance: none; position: relative;    box-sizing: border-box; min-width: 34px; height: 34px; border: 0; border-radius: 17px; padding: 0 7px; background: #fff; color: #111; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; text-shadow: none; cursor: pointer; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; line-height: 1; transition: padding 700ms cubic-bezier(0.22, 1, 0.36, 1), background 450ms ease, color 450ms ease; } .sbi-qs-mute svg { width: 20px; height: 20px; flex: 0 0 auto; filter: none; } .sbi-qs-mute::before { content: ''; position: absolute; inset: -5px; border-radius: 22px; } .sbi-qs-mute-label { max-width: 0; margin-left: 0; opacity: 0; transform: translateX(-6px); overflow: hidden; font-size: 13px; font-weight: 600; line-height: 13px; letter-spacing: -0.005em; white-space: nowrap; 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); } .sbi-qs-mute-hinting { padding: 0 12px 0 9px; } .sbi-qs-mute-hinting .sbi-qs-mute-label { max-width: 140px; margin-left: 6px; opacity: 1; transform: none; } .sbi-qs-mute[data-state="on"] { background: rgba(0, 0, 0, 0.55); color: #fff; } .sbi-qs-mute[data-state="on"]:hover, .sbi-qs-mute[data-state="on"]:focus-visible { background: rgba(0, 0, 0, 0.75); } .sbi-qs-mute[data-state="on"] .sbi-qs-mute-label { display: none; } .sbi-qs-mute:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); } .sbi-qs-mute:disabled { opacity: 0.35; cursor: default; } .sbi-qs-view-on-ig, .sbi-qs-fail-link { position: relative;    display: none; box-sizing: border-box; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; text-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); pointer-events: auto; flex: 0 0 auto; transition: background 150ms ease; } .sbi-qs-view-on-ig svg, .sbi-qs-fail-link svg { width: 16px; height: 16px; flex: 0 0 auto; } .sbi-qs-view-on-ig::before, .sbi-qs-fail-link::before { content: ''; position: absolute; top: -5px; right: 0; bottom: -5px; left: 0; border-radius: 999px; } .sbi-qs-view-on-ig:hover, .sbi-qs-view-on-ig:focus-visible, .sbi-qs-fail-link:hover, .sbi-qs-fail-link:focus-visible { background: rgba(0, 0, 0, 0.55); color: #fff; text-decoration: none; outline: 0; } .sbi-qs-view-on-ig:focus-visible, .sbi-qs-fail-link:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); } .sbi-qs-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; pointer-events: none; } .sbi-qs-progress-fill { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 250ms linear; } .sbi-qs-progress-fill-jump { transition: none; } .sbi-qs-flash { position: absolute; top: 50%; left: 50%; margin: -42px 0 0 -42px; z-index: 4; pointer-events: none; display: none; } .sbi-qs-flash svg { box-sizing: border-box; width: 84px; height: 84px; padding: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; will-change: transform, filter; } .sbi-qs-overlay[data-paused="true"] .sbi-qs-flash { display: block; } .sbi-qs-overlay[data-paused="true"] .sbi-qs-flash svg { animation: sbiQsFlashIn 200ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both; } .sbi-qs-overlay[data-paused="false"] .sbi-qs-flash-on { display: block; } .sbi-qs-overlay[data-paused="false"] .sbi-qs-flash-on svg { animation: sbiQsFlashOut 100ms cubic-bezier(0.4, 0, 0.6, 1) both; } .sbi-qs-nav { position: absolute; right: calc(50% - var(--sbi-qs-frame-shift) - var(--sbi-qs-stage-half)); width: var(--sbi-qs-rail-w); top: 50%; transform: translateY(-50%); z-index: 5; display: none; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; } .sbi-qs-nav-prev, .sbi-qs-nav-next { font: inherit; -webkit-appearance: none; appearance: none; padding: 0; position: relative; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 150ms ease, transform 150ms ease, opacity 150ms ease; } .sbi-qs-nav-prev svg, .sbi-qs-nav-next svg { width: 24px; height: 24px; } .sbi-qs-nav-prev:hover, .sbi-qs-nav-next:hover, .sbi-qs-nav-prev:focus-visible, .sbi-qs-nav-next:focus-visible { background: rgba(255, 255, 255, 0.28); outline: 0; } .sbi-qs-nav-prev:active, .sbi-qs-nav-next:active { transform: scale(0.94); } .sbi-qs-nav-prev:focus-visible, .sbi-qs-nav-next:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); } .sbi-qs-nav-prev:disabled, .sbi-qs-nav-next:disabled { opacity: 0.3; cursor: default; transform: none; } .sbi-qs-scrim { position: absolute; left: 0; right: 0; bottom: 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; } .sbi-qs-railcol { position: absolute; right: 10px; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition-property: transform; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); transition-duration: 0ms; pointer-events: none; } .sbi-qs-railcol[hidden] { display: none; } .sbi-qs-rail { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-bottom: 18px; padding-bottom: max(18px, var(--sbi-qs-safe-bottom, env(safe-area-inset-bottom, 0px))); pointer-events: none; } .sbi-qs-act { font: inherit; -webkit-appearance: none; appearance: none; position: relative;    display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; color: #fff; text-decoration: none; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); transition: transform 120ms ease; } .sbi-qs-act svg { width: 28px; height: 28px; flex: 0 0 auto; } .sbi-qs-act::before { content: ''; position: absolute; top: -1px; bottom: -1px; min-height: 44px; left: 50%; width: 44px; margin-left: -22px; } .sbi-qs-act-count, .sbi-qs-act-label { display: block; min-height: 12px; font-size: 12px; font-weight: 600; line-height: 12px; font-variant-numeric: tabular-nums; } .sbi-qs-act:hover { color: #fff; text-decoration: none; transform: scale(1.06); } .sbi-qs-act:active { transform: scale(0.94); } .sbi-qs-act:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; } .sbi-qs-act[hidden] { display: none; } .sbi-qs-act-like { cursor: default; } .sbi-qs-act-like:hover, .sbi-qs-act-like:active { transform: none; } .sbi-qs-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; padding: 0 16px 16px 16px; padding-bottom: max(16px, var(--sbi-qs-safe-bottom, env(safe-area-inset-bottom, 0px))); padding-right: 76px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 18.2px; pointer-events: none; } .sbi-qs-authorrow { display: flex; align-items: center; gap: 10px; align-self: flex-start; min-width: 0; max-width: 100%; } .sbi-qs-author { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; pointer-events: auto; } .sbi-qs-author:hover .sbi-qs-handle-text, .sbi-qs-author:focus-visible .sbi-qs-handle-text { text-decoration: underline; text-underline-offset: 3px; } .sbi-qs-author:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; } .sbi-qs-avatar { box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #262626; } .sbi-qs-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #fff; background-image: linear-gradient(135deg, hsl(var(--sbi-qs-avatar-hue, 212) 70% 58%), hsl(calc(var(--sbi-qs-avatar-hue, 212) + 50) 65% 38%)); } .sbi-qs-handle { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 18.2px; } .sbi-qs-handle-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sbi-qs-verified { width: 14px; height: 14px; flex: 0 0 auto; } .sbi-qs-follow { position: relative;    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; margin-left: 2px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 8px; background: transparent; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; flex: 0 0 auto; pointer-events: auto; transition: background 150ms ease; } .sbi-qs-follow::before { content: ''; position: absolute; top: -8px; right: 0; bottom: -8px; left: 0; border-radius: 8px; } .sbi-qs-follow:hover, .sbi-qs-follow:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; outline: 0; } .sbi-qs-follow:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); } .sbi-qs-caption { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 18.2px; pointer-events: none; } .sbi-qs-caption-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sbi-qs-caption-more { font: inherit; -webkit-appearance: none; appearance: none; pointer-events: auto; position: relative; flex: 0 0 auto; display: none; margin: 0; padding: 0; border: 0; background: none; color: #a8a8a8; font-size: 14px; font-weight: 400; line-height: 18.2px; cursor: pointer; } .sbi-qs-caption-more::before { content: ''; position: absolute; top: -13px; right: -6px; bottom: -13px; left: -6px; } .sbi-qs-caption-has-more .sbi-qs-caption-more { display: inline-block; } .sbi-qs-caption-more:hover { color: #fff; } .sbi-qs-caption-more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; } .sbi-qs-caption-expanded { align-items: flex-end; } .sbi-qs-caption-expanded .sbi-qs-caption-text { white-space: pre-line; overflow-y: auto; overflow-x: hidden; text-overflow: clip; max-height: var(--sbi-qs-caption-cap); pointer-events: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; } .sbi-qs-caption-expanded .sbi-qs-caption-text::-webkit-scrollbar { width: 4px; } .sbi-qs-caption-expanded .sbi-qs-caption-text::-webkit-scrollbar-track { background: transparent; } .sbi-qs-caption-expanded .sbi-qs-caption-text::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 2px; } .sbi-qs-tag { color: #e0f1ff; } .sbi-qs-coach { position: absolute; inset: 0; z-index: 9; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); pointer-events: none; } .sbi-qs-coach-visible { display: flex; } .sbi-qs-coach-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; line-height: 19.5px; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } .sbi-qs-coach-hand { width: 44px; height: 64px; animation: sbiQsSwipe 1.4s ease-in-out infinite; } @keyframes sbiQsSpin { to { transform: rotate(360deg); } } @keyframes sbiQsFlashIn { 0%   { opacity: 0; transform: scale(0.3); filter: blur(4px); } 100% { opacity: 1; transform: scale(1);   filter: blur(0);   } } @keyframes sbiQsFlashOut { 0%   { opacity: 1; transform: scale(1);   filter: blur(0);   } 100% { opacity: 0; transform: scale(0.8); filter: blur(4px); } } @keyframes sbiQsSwipe { 0%   { transform: translateY(18px);  opacity: 0.35; } 45%  { transform: translateY(-26px); opacity: 1; } 100% { transform: translateY(18px);  opacity: 0.35; } } @media (hover: hover) and (pointer: fine) { .sbi-qs-overlay { background: rgba(0, 0, 0, 0.82); background: color-mix(in srgb, #000 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); --sbi-qs-stage-radius: 8px; --sbi-qs-rail-w: 44px; --sbi-qs-stage-gap: 16px; --sbi-qs-frame-shift: 30px; --sbi-qs-stage-half: min(calc(50vw - 30px), calc((50vh - 8px) * 9 / 16)); --sbi-qs-stage-half: min(calc(50vw - 30px), calc((50dvh - 8px) * 9 / 16)); } .sbi-qs-close { top: 16px; left: 16px; } .sbi-qs-media, .sbi-qs-framechrome { right: calc(var(--sbi-qs-rail-w) + var(--sbi-qs-stage-gap)); height: calc(100vh - 16px); height: calc(100dvh - 16px); width: min(calc(100vw - var(--sbi-qs-rail-w) - var(--sbi-qs-stage-gap)), calc((100vh - 16px) * 9 / 16)); width: min(calc(100vw - var(--sbi-qs-rail-w) - var(--sbi-qs-stage-gap)), calc((100dvh - 16px) * 9 / 16)); } .sbi-qs-top { padding: 14px 14px 0 16px; } .sbi-qs-view-on-ig { display: inline-flex; } .sbi-qs-act-view { display: none; } .sbi-qs-nav { display: flex; } .sbi-qs-railcol { right: calc(50% - var(--sbi-qs-frame-shift) - var(--sbi-qs-stage-half)); left: auto; bottom: 8px; width: var(--sbi-qs-rail-w); } .sbi-qs-rail { gap: 18px; padding-bottom: 18px; } .sbi-qs-act svg { width: 26px; height: 26px; } .sbi-qs-bottom { padding-right: 16px; } [data-sbi-qs-tip]::after { content: attr(data-sbi-qs-tip); position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%) translateX(4px); padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; background: rgba(28, 28, 30, 0.96); color: #fff; font-size: 12px; font-weight: 500; line-height: 12px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } [data-sbi-qs-tip]:hover::after, [data-sbi-qs-tip]:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } } @media (prefers-reduced-motion: reduce) { .sbi-qs-track { transition: none !important; } .sbi-qs-overlay, .sbi-qs-close, .sbi-qs-mute, .sbi-qs-mute-label, .sbi-qs-nav-prev, .sbi-qs-nav-next, .sbi-qs-view-on-ig, .sbi-qs-follow, .sbi-qs-author, .sbi-qs-act, .sbi-qs-spinner { transition: none; } .sbi-qs-railcol { transition: none; } .sbi-qs-flash svg, .sbi-qs-coach-hand { animation: none !important; } .sbi-qs-overlay[data-paused="false"] .sbi-qs-flash-on { display: none; } [data-sbi-qs-tip]::after { transition: none; } }