.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}:root{--bg:#0b1216;--ink:#e8eef1;--muted:#9fb0b8;--surface:#141e24;--surface2:#1b2730;--line:#243239;--tint:#10262c;--inv-bg:#e8eef1;--inv-ink:#0b1216;--inv-muted:#3a4a52;--accent:#5fc4d2;--photo:#0e3444;--photo-ink:#bfe3ea;--line-soft:rgba(255,255,255,0.09);color-scheme:dark light}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--ink:#14232b;--muted:#4a5a63;--surface:#f3f5f6;--surface2:#e9eef0;--line:#e3e8ea;--tint:#e6f3f5;--inv-bg:#14232b;--inv-ink:#ffffff;--inv-muted:#d6e0e4;--accent:#0b6a79;--line-soft:rgba(0,0,0,0.08)}}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink)}
body:not(.block-editor-iframe__body){overflow:hidden}
a{color:var(--accent)} .frame{display:flex;flex-direction:column;height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));overflow:hidden}
.frame > .wp-block-template-part{flex:0 0 auto}
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:5}
.site-header > .wp-block-group{align-items:center;max-width:1220px;margin:0 auto;padding:10px 5vw !important}
.site-header .wp-block-group{align-items:center}
.site-header p,.site-header .wp-block-site-title{margin:0}
.site-header .logo{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.01em;text-decoration:none;color:var(--ink)}
.site-header .wp-block-navigation a{color:var(--ink);text-decoration:none;padding:12px 10px;border-radius:8px;font-size:15px}
.site-header .wp-block-navigation a:hover{background:var(--surface2)}
.cta,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600}
.cta:hover,.wp-block-button__link:hover{background:var(--accent);color:var(--bg)}
.scroller{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;position:relative}
.scroller > *{width:100%;box-sizing:border-box;margin:0}
.scroller > .wp-block-post-content{padding:0 5vw;max-width:1220px;margin:0 auto;box-sizing:border-box}
.wp-block-post-content > * + *{margin-top:24px}
.wp-block-post-content > .alignfull{max-width:none;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw}
.bar-wrap{background:var(--inv-bg);color:var(--inv-ink)}
.bar{max-width:1220px;margin:0 auto;padding:8px 5vw;display:flex;flex-wrap:nowrap;gap:6px 20px;align-items:center;justify-content:space-between;box-sizing:border-box}
.bar > .wp-block-group{min-width:0}
.bar .wp-block-button__link{white-space:nowrap}
.bar > *{margin:0 !important}
.bar .wp-block-buttons{display:flex;flex-wrap:nowrap}
.bar p{margin:0}
.bar .wp-block-button__link{background:var(--bg);color:var(--ink);min-height:40px}
.bar .price{font-family:Archivo,sans-serif;font-weight:800;font-size:20px;line-height:1;margin:0}
.bar .note{font-size:13px;color:var(--inv-muted);margin:0}
.footer-line{background:var(--surface);color:var(--muted);border-top:1px solid var(--line);font-size:13px;margin-top:auto !important}
.footer-line .wp-block-group{padding:14px 5vw 16px;gap:6px 28px;max-width:1220px;margin:0 auto}
.footer-line p{margin:0}
.endspace{height:8vh;flex:0 0 auto} .pagefog{position:sticky;top:0;height:0 !important;overflow:visible;z-index:3;pointer-events:none;flex:0 0 auto}
.pagefog::before{content:"";position:absolute;left:0;right:0;top:0;height:14vh;background:linear-gradient(to bottom, var(--bg) 1vh, transparent 14vh)}
.pagefog-b{position:sticky;bottom:0;height:0 !important;overflow:visible;z-index:3;pointer-events:none;flex:0 0 auto}
.pagefog-b::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;background:linear-gradient(to top, var(--bg) 2vh, transparent 100%)} .hero{min-height:440px;view-timeline-name:--hero}
.hero.wp-block-cover{padding:0 0 36px;text-align:left;justify-content:flex-start;align-items:flex-end}
.hero .wp-block-cover__inner-container{max-width:1220px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:400px;margin:0 auto;padding:0 5vw;box-sizing:border-box;text-align:left}
.hero .kicker{margin:16px 0 auto;font-size:15px;color:rgba(255,255,255,0.75)}
.hero .kicker a{color:rgba(255,255,255,0.9);text-decoration:none}
.hero .kicker .sep{opacity:0.6;margin:0 6px}
.hero .kicker a:hover{text-decoration:underline}
.hero h1,.hero h2{color:#fff;font-size:56px;line-height:1.02;letter-spacing:-0.02em;max-width:16ch;margin:0}
.hero p{color:rgba(255,255,255,0.86);font-size:20px;max-width:60ch;margin:0}
.hero .wp-block-cover__background{background:linear-gradient(to top, rgba(5,12,16,0.85), rgba(5,12,16,0.35) 55%, rgba(5,12,16,0.05)) !important;opacity:1 !important} .door{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;border-radius:20px;padding:36px;background:var(--surface);overflow:hidden;view-timeline-name:--d;margin:0 0 20px}
.door.flip{direction:rtl}.door.flip > *{direction:ltr}
.door .wp-block-image{margin:0}
.door img{width:100%;height:280px;object-fit:cover;border-radius:16px;display:block}
.door .kicker{font-size:15px;color:var(--muted);margin:0}
.door h2{font-size:34px;margin:0}
.door .price{font-family:Archivo,sans-serif;font-weight:700;font-size:24px;margin:0} .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;timeline-scope:--s2;view-timeline-name:--sec;margin:0 0 24px}
.story .pic{grid-area:1 / 1;position:sticky;top:24px;height:calc(100vh - 176px);min-height:400px;border-radius:24px;overflow:hidden;background:#000}
.story .steps{grid-area:1 / 2;display:flex;flex-direction:column}
.story .fog{grid-area:1 / 2;position:sticky;top:0;height:0 !important;overflow:visible;align-self:start;pointer-events:none;z-index:2}
.story.alt .pic{grid-area:1 / 2}.story.alt .steps{grid-area:1 / 1}.story.alt .fog{grid-area:1 / 1}
.story .fog::before{content:"";position:absolute;left:0;right:0;top:0;height:24vh;background:linear-gradient(to bottom, var(--bg) 2vh, transparent 24vh)}
.story .pic .wp-block-image{position:absolute;inset:0;margin:0}
.story .pic img{width:100%;height:100%;object-fit:cover;display:block}
.story .pic .b{opacity:0}
.story .mb{display:none}
.step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12vh 0}
.step.s1{view-timeline-name:--t1}
.step.s2{view-timeline-name:--s2,--t2}
.step .in{view-timeline-name:--tl}
.step .kicker{font-size:15px;color:var(--muted);margin:0}
.step h2{font-size:34px;margin:0}
.step p,.step li{font-size:19px}
.num{font-family:Archivo,sans-serif;font-weight:800;font-size:44px;line-height:1;letter-spacing:-0.02em} .course-table{border:1px solid var(--line);border-radius:14px;overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;margin:14px 0 10px}
.course-table th,.course-table td{min-width:64px}
.course-table th:first-child,.course-table td:first-child{min-width:220px}
.course-table th:last-child,.course-table td:last-child{min-width:140px}
.course-table table{border-collapse:collapse;width:100%;font-size:16px;border:0 !important}
.course-table th,.course-table td{text-align:left;padding:10px 14px;border:0 !important;border-top:1px solid var(--line-soft) !important}
.course-table thead th{border-top:0 !important;background:var(--surface)}
.course-table thead{border:0 !important}
.course-table tbody tr:first-child td{border-top:0 !important} @supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.hero .wp-block-cover__image-background{animation:heroZoom linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.18) translateY(6%)}}
.door > *{animation:doorIn linear both;animation-timeline:--d;animation-range:entry 0% entry 70%}
@keyframes doorIn{from{opacity:0;transform:translateY(48px) scale(0.98)}to{opacity:1;transform:none}}
.story .pic .a img{animation:slowZoom linear both;animation-timeline:--sec;animation-range:entry 0% exit 100%}
@keyframes slowZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.story .pic .b{animation:xfade linear both;animation-timeline:--s2;animation-range:entry 0% entry 60%}
@keyframes xfade{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
.rise{view-timeline-name:--r}
.rise > *{animation:rise linear both;animation-timeline:--r;animation-range:entry 0% entry 55%}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}
} .hero h1,.hero h2,.hero p,.hero .kicker{margin-left:0 !important;margin-right:0 !important}
.hero .kicker{margin-top:calc(14vh + 6px) !important;margin-bottom:auto !important}
.site-header .wp-block-site-title a,.site-header .wp-block-button__link{white-space:nowrap}
.site-header .wp-block-buttons{flex-wrap:nowrap}
.site-header .wp-block-site-title{flex:0 0 auto}
.site-header .wp-block-navigation{flex:1 1 auto;min-width:0} .navcb{display:none}
.navtoggle{display:none;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:15px;cursor:pointer;user-select:none;white-space:nowrap}
.navtoggle .t-close{display:none}
.navcb:checked ~ .navtoggle .t-open{display:none}
.navcb:checked ~ .navtoggle .t-close{display:inline}
.site-header .wp-block-group{position:static}
@media (max-width:1050px){
.navtoggle{display:inline-flex;margin-left:16px !important}
.site-header .wp-block-buttons{margin-left:auto !important}
.site-header .wp-block-navigation{display:none !important}
.navcb:checked ~ .wp-block-navigation{display:block !important;position:absolute;top:100%;left:0;right:0;z-index:9;background:var(--bg);color:var(--ink);padding:8px 5vw 14px;border-bottom:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,0.35)}
.navcb:checked ~ .wp-block-navigation ul{display:flex !important;flex-direction:column !important;gap:2px;width:100%;margin:0;padding:0;list-style:none}
.navcb:checked ~ .wp-block-navigation li{display:block !important;width:100%;margin:0}
.navcb:checked ~ .wp-block-navigation li a{display:block !important;font-family:"Source Sans 3",system-ui,sans-serif;font-size:18px;font-weight:600;padding:12px 10px;color:var(--ink) !important;text-decoration:none;border-radius:8px}
.navcb:checked ~ .wp-block-navigation li a:hover{background:var(--surface2)}
} .wp-block-post-content h2{margin:0 0 12px}
.section > * + *{margin-top:14px}
.box > * + *{margin-top:10px}
.pricebox > * + *{margin-top:10px} @media (max-width:1050px){
.bar{padding:6px 14px;flex-wrap:nowrap}
.bar .price{font-size:15px}
.bar .note{display:none}
.bar .wp-block-button__link{min-height:36px;padding:0 12px;font-size:14px;white-space:nowrap}
}
@media (max-width:900px){
.story{grid-template-columns:minmax(0,1fr)}
.story .pic,.story.alt .pic,.story .steps,.story.alt .steps,.story .fog,.story.alt .fog{grid-area:auto}
.story .pic{position:relative;top:auto;height:260px;min-height:0;order:0}
.story .steps{order:1}
.story .fog{display:none}
.story .pic .b{display:none}
.story .pic .a img{animation:none !important;transform:none !important}
.story .mb{display:block;margin:2vh 0}
.story .mb img{width:100%;height:260px;object-fit:cover;border-radius:16px}
.step{min-height:0;padding:6vh 0}
.door{grid-template-columns:minmax(0,1fr)}
.door.flip{direction:ltr}
}
@media (max-width:860px){
.hero h1,.hero h2{font-size:34px}
.hero p{font-size:16px}
.hero .wp-block-cover__inner-container{min-height:50vh}
h1{font-size:32px}h2{font-size:24px}
} .section{margin:36px 0}
.box{border:1px solid var(--line);border-radius:16px;padding:22px}
.box.filled{background:var(--surface);border:0}
.box h3{margin:0 0 8px;font-size:22px}
.box p{margin:0 0 8px}
.grid-2,.grid-3,.grid-4{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2 > .wp-block-group,.grid-3 > .wp-block-group,.grid-4 > .wp-block-group{min-width:0}
.lead{font-size:18px;color:var(--muted);max-width:72ch}
.pricebox{background:var(--surface);border-radius:20px;padding:28px}
.pricebox .big{font-family:Archivo,sans-serif;font-weight:700;font-size:28px;margin:0 0 8px}
.person{display:flex;flex-wrap:wrap;gap:32px;align-items:center;padding:24px 0}
.person img{width:200px;height:200px;border-radius:100px;object-fit:cover;object-position:50% 30%}
.latest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.latest img{width:100%;height:160px;object-fit:cover;border-radius:14px}
.muted{color:var(--muted)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3,.latest{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}} .prose{max-width:none}
.prose p{font-size:19px;line-height:1.6;max-width:none}
.prose h2{font-size:32px;margin:8px 0 12px}
.prose .wp-block-image{margin:8px 0 16px}
.prose .wp-block-image img{width:100%;height:auto;border-radius:14px;display:block}
.prose .figure-right{float:right;width:min(40%,480px);margin:6px 0 18px 32px}
.prose .figure-left{float:left;width:min(40%,480px);margin:6px 32px 18px 0}
.prose .figure-right img{border-radius:14px}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.prose::after{content:"";display:block;clear:both}
.cenote-facts .box p{margin:0}
.cenote-facts .box .kicker{margin-bottom:6px}
@media (max-width:860px){.prose .figure-right,.prose .figure-left{float:none;width:100%;margin:8px 0 16px}} .bar .wp-block-button:has(> a:empty){display:none}
.bar .wp-block-buttons{gap:10px}
.bar .note:empty{display:none} .bar .wp-block-post-title,.bar .price{font-family:Archivo,sans-serif !important;font-weight:800 !important;font-size:20px !important;line-height:1 !important;letter-spacing:0;margin:0 !important;color:var(--inv-ink)}
.bar .wp-block-post-title a{color:inherit;text-decoration:none}
.bar .note{font-family:"Source Sans 3",system-ui,sans-serif;font-size:13px !important;color:var(--inv-muted);margin:0 !important}
.bar .wp-block-buttons{align-items:center}
.bar .wp-block-button__link,.bar .is-style-outline .wp-block-button__link{min-height:40px !important;height:40px;padding:0 16px !important;box-sizing:border-box;border:1px solid var(--bg) !important;border-radius:10px !important;font-size:15px;line-height:1;display:inline-flex;align-items:center}
.bar .is-style-outline .wp-block-button__link{background:transparent !important;color:var(--inv-ink) !important;border-color:var(--inv-ink) !important}
@media (max-width:1050px){.bar .wp-block-post-title,.bar .price{font-size:15px !important}.bar .wp-block-button__link,.bar .is-style-outline .wp-block-button__link{min-height:36px !important;height:36px;padding:0 12px !important;font-size:14px}} .bar > .wp-block-group{flex:1 1 35%;min-width:35%;overflow:hidden}
.bar .wp-block-post-title,.bar .price,.bar .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .wp-block-buttons{flex:0 1 auto;min-width:0}
.bar .wp-block-button{flex:0 1 auto;min-width:0}
.bar .wp-block-button__link,.bar .is-style-outline .wp-block-button__link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;line-height:38px !important}
@media (max-width:1050px){.bar > .wp-block-group{flex:1 1 0;min-width:0}.bar .wp-block-button__link,.bar .is-style-outline .wp-block-button__link{line-height:34px !important}} .kicker.crumbs .sep{margin:0 2px}
.kicker.crumbs .breadcrumb_last{color:inherit}
.scroller > .kicker.crumbs{max-width:1220px;margin:16px auto 0;padding:0 5vw;box-sizing:border-box;font-size:15px;color:var(--muted)}
.scroller > .kicker.crumbs a{color:inherit} .embed-lite{position:relative;width:100%;background:var(--surface-2,#1b2730);border-radius:14px;overflow:hidden;color:#fff}
.wp-has-aspect-ratio .embed-lite{position:absolute;inset:0;aspect-ratio:auto !important}
.embed-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-lite__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.embed-lite__btn{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;border:0;background:linear-gradient(to top,rgba(5,12,16,0.75),rgba(5,12,16,0.15));color:#fff;font:600 16px/1.3 "Source Sans 3",system-ui,sans-serif;cursor:pointer;text-align:center}
.embed-lite__play{width:68px;height:48px;border-radius:12px;background:rgba(0,0,0,0.75);position:relative}
.embed-lite__play::after{content:"";position:absolute;left:28px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.embed-lite__btn:hover .embed-lite__play,.embed-lite__btn:focus-visible .embed-lite__play{background:#c00}
.embed-lite__pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent,#5fc4d2)}
.embed-lite__title{max-width:90%;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.map-lite:not([style]){aspect-ratio:16/9}
.embed-lite__consent{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:rgba(5,12,16,0.92);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px}
.embed-lite__consent p{margin:0;flex:1 1 220px}
.embed-lite__accept{min-height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--ink,#e8eef1);color:var(--bg,#0b1216);font-weight:600;cursor:pointer} .bar .terms{font-size:13px;margin:2px 0 0 !important;white-space:nowrap}
.bar .terms a{color:var(--inv-muted);text-decoration:underline}.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;
}
}