/* Reserve the classic scrollbar before, during and after the reveal. */
html{scrollbar-gutter:stable}
html.watchroom-boot-pending #app{opacity:0;pointer-events:none}
html.watchroom-boot-revealing #app{pointer-events:none}
html.watchroom-boot-pending,html.watchroom-boot-revealing{overflow:hidden}
#watchroom-boot-cover{--boot-feather:clamp(48px,10vw,160px);position:fixed;inset:0;z-index:10000;overflow:hidden;isolation:isolate}
#watchroom-boot-cover::before,#watchroom-boot-cover::after{content:"";position:absolute;top:0;bottom:0;width:calc(50% + var(--boot-feather));z-index:-1;pointer-events:none}
#watchroom-boot-cover::before{left:0;background:linear-gradient(to right,#101111 0%,#101111 calc(100% - var(--boot-feather)),transparent 100%)}
#watchroom-boot-cover::after{right:0;background:linear-gradient(to left,#101111 0%,#101111 calc(100% - var(--boot-feather)),transparent 100%)}
#watchroom-boot-cover>.boot{min-height:100dvh;transition:opacity .1s ease}
#watchroom-boot-cover.is-revealing>.boot{opacity:0}
#watchroom-boot-cover.is-revealing::before{animation:unskip-open-left .3s cubic-bezier(.2,.6,.3,1) both}
#watchroom-boot-cover.is-revealing::after{animation:unskip-open-right .3s cubic-bezier(.2,.6,.3,1) both}
@keyframes unskip-open-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes unskip-open-right{from{transform:translateX(0)}to{transform:translateX(100%)}}
:root body #watchroom-boot-cover>.boot,:root body #app>.boot{gap:20px;min-height:100dvh}
:root body #watchroom-boot-cover .boot>.unskip-lockup,:root body #app>.boot>.unskip-lockup{font-size:68px;letter-spacing:-3.6px;gap:5px;margin:0}
:root body #watchroom-boot-cover .boot>.unskip-lockup>.unskip-mark,:root body #app>.boot>.unskip-lockup>.unskip-mark{width:74px;height:auto;transform:translateY(3px)}
:root body #watchroom-boot-cover .boot>span:not(.unskip-lockup),:root body #app>.boot>span:not(.unskip-lockup){font-size:17px;line-height:1.5;letter-spacing:0;color:#aaa79f;margin:0}
#watchroom-boot-cover .boot>.boot-skip{margin-top:0}
@media(max-width:620px){
 :root body #watchroom-boot-cover .boot>.unskip-lockup,:root body #app>.boot>.unskip-lockup{font-size:60px;letter-spacing:-3.2px;gap:4px}
 :root body #watchroom-boot-cover .boot>.unskip-lockup>.unskip-mark,:root body #app>.boot>.unskip-lockup>.unskip-mark{width:66px}
 :root body #watchroom-boot-cover .boot>span:not(.unskip-lockup),:root body #app>.boot>span:not(.unskip-lockup){font-size:16px}
}
@media(prefers-reduced-motion:reduce){#watchroom-boot-cover>.boot{transition:none}#watchroom-boot-cover.is-revealing::before,#watchroom-boot-cover.is-revealing::after{animation:none}}
:root[data-motion=reduced] #watchroom-boot-cover>.boot{transition:none}
[data-boot-poster-fallback]:not(.poster-loaded){background:linear-gradient(145deg,#292b2c,#171819)}
[data-boot-poster-fallback]:not(.poster-loaded) .poster-placeholder small{display:none}

/* Fixed-width dots keep the caption still throughout the half-second cycle. */
.boot-message>.boot-dots{display:inline-block;clip-path:inset(0 66.6667% 0 0);animation:unskip-boot-dots .5s steps(1,end) infinite}
@keyframes unskip-boot-dots{0%{clip-path:inset(0 66.6667% 0 0)}33.3333%{clip-path:inset(0 33.3333% 0 0)}66.6667%,100%{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.boot-message>.boot-dots{animation:none;clip-path:none}}
:root[data-motion=reduced] .boot-message>.boot-dots{animation:none;clip-path:none}
@supports not (scrollbar-gutter:stable){html,html.watchroom-boot-pending,html.watchroom-boot-revealing{overflow-y:scroll}}

.boot-message>span{font:inherit;color:inherit;letter-spacing:inherit;margin:0}