/* An edge-to-edge video stage, with native scroll snapping for touch and trackpads. */
html:has(.reels-page){background:#080808;overscroll-behavior:none}
.reels-page{background:#080808;color:#fff;height:100dvh;overflow:hidden;color-scheme:dark;font-family:system-ui,sans-serif}
.reels-page>.topbar,.reels-page .foot,.reels-page>.tab-space{display:none}
.reels-page>main.wrap{max-width:none;padding:0;margin:0}
.reels-feed{position:fixed;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;background:#080808}
.reels-feed::-webkit-scrollbar{display:none}
.reel{flex:0 0 100%;width:100%;position:relative;height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate;overflow:hidden;background:#111}
.reel-backdrop{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(32px) brightness(.32);z-index:-2;pointer-events:none}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}
.reel-portrait .reel-video{object-fit:cover}
.reel:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 24%,transparent 45%,rgba(0,0,0,.25) 65%,rgba(0,0,0,.88));z-index:0}
.reels-top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:15px;padding:calc(16px + env(safe-area-inset-top)) 20px 12px;pointer-events:none;color:white}
.reels-top a,.reels-top h1{pointer-events:auto}.reels-top a{color:#fff;text-decoration:none;font-size:36px;line-height:1}.reels-top h1{font:700 22px/1.2 system-ui;margin:0}.reels-top small{display:block;font-size:10px;font-weight:400;letter-spacing:2px;opacity:.7;margin-top:6px}.reels-top .reels-language{margin-left:auto;font-size:13px;border:1px solid #ffffff50;border-radius:50%;padding:10px}
.reel-toggle{position:absolute;inset:0;width:100%;height:100%;z-index:1;border:0;background:transparent;color:white;border-radius:0;cursor:pointer;touch-action:pan-x}
.reel-play{display:inline-grid;place-items:center;width:72px;height:72px;background:#0006;backdrop-filter:blur(5px);border:1px solid #ffffff50;border-radius:50%;font-size:28px;padding-left:4px;opacity:0;transition:opacity .2s}.reel.is-paused .reel-play{opacity:1}
.reel-copy{position:absolute;bottom:calc(100px + env(safe-area-inset-bottom));left:20px;right:85px;z-index:2;text-shadow:0 1px 9px #0008;pointer-events:none}.reel-copy a{pointer-events:auto;color:white;text-decoration:none}.reel-byline{font-size:12px;font-weight:600;letter-spacing:.8px}.reel-copy h2{font:700 22px/1.35 system-ui;margin:10px 0 7px}.reel-copy p{font:400 13px/1.65 system-ui;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fffd}.reel-details{font-size:12px;opacity:.75}
.reel-actions{position:absolute;right:12px;bottom:calc(108px + env(safe-area-inset-bottom));z-index:3;display:flex;flex-direction:column;align-items:center;gap:21px;width:54px}.reel-actions .video-reactions{display:flex;flex-direction:column-reverse;align-items:center;gap:21px;margin:0;padding:0;border:0;background:none}.reel-actions button,.reel-actions a{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;border:0;color:#fff;padding:0;font:500 11px/1.2 system-ui;text-decoration:none;box-shadow:none;min-width:44px;min-height:44px;cursor:pointer;text-shadow:0 1px 7px #0008}.reel-actions svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7}.reel-actions [data-like-label]{display:none}.reel-actions b{font-size:12px}.reel-actions small{font-size:10px}.reel-actions .reel-mute>span,.reel-actions .reel-comment>span{font-size:29px;line-height:1}.reel-actions .reel-fullscreen{font-size:28px}.reel-actions .is-cheering svg{fill:#ff4670;stroke:#ff4670}.reel-actions .like-error{position:absolute;right:52px;width:170px;font-size:11px}
.reel-timeline{position:absolute;bottom:calc(72px + env(safe-area-inset-bottom));left:20px;right:20px;z-index:3;display:flex;height:24px;align-items:center}.reel-timeline input{width:100%;height:3px;accent-color:#fff;cursor:pointer;margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.reels-page .tabbar{background:#080808e8;border-top:1px solid #ffffff20;color:#fff;z-index:6;backdrop-filter:blur(15px)}.reels-page .tabbar-in{max-width:520px}.reels-page .tabbar a{color:#aaa}.reels-page .tabbar a[aria-current]{color:#fff;background:transparent}.reels-page .tabbar svg{width:22px;height:22px}.reels-page .tabbar span{font:10px/1.2 system-ui}.reels-step{position:fixed;right:25px;top:45%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:15px;font-size:11px;color:#aaa}.reels-step button{width:44px;height:44px;border:1px solid #ffffff25;background:#ffffff12;color:white;border-radius:50%;font-size:22px;cursor:pointer}.reels-step button:disabled{opacity:.25;cursor:default}.reels-hint{position:fixed;top:calc(90px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;font-size:11px;letter-spacing:1px;color:#fffc;transition:opacity .5s}.reels-hint.is-hidden{opacity:0}.reel-status,.reel-fallback{position:absolute;top:35%;left:15%;right:15%;z-index:4;background:#111d;border-radius:14px;padding:15px;text-align:center;font-size:13px}.reel-status[hidden]{display:none}
@media(min-width:700px){.reels-feed,.reels-top{width:min(100%,calc((100dvh - 16px)*.5625));left:50%;right:auto;transform:translateX(-50%)}.reels-feed{top:8px;bottom:8px;border-radius:12px}.reels-top{top:8px}.reels-page .tabbar{left:50%;right:auto;transform:translateX(-50%);width:min(100%,calc((100dvh - 16px)*.5625));bottom:8px;border-radius:0 0 12px 12px}.reel-copy h2{font-size:21px}}
@media(max-width:699px){.reels-step{display:none}}
@media(prefers-reduced-motion:reduce){.reel-play,.reels-hint{transition:none}}

.reels-feed:fullscreen{inset:0;width:100%;height:100%;transform:none;border-radius:0}.reels-feed:fullscreen .reel-video{object-fit:contain}

/* Reserve the upper stage for wide films so lower captions never cover the picture. */
.reel:not(.reel-portrait) .reel-video{top:calc(96px + env(safe-area-inset-top));bottom:auto;height:calc(100% - 430px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:120px;object-position:center}
.reel-actions .video-like:not(.is-liked)>svg{fill:none;stroke:#fff}
.reel-actions .video-like.is-liked>svg{fill:#ef4663;stroke:#ef4663}
.reels-feed:fullscreen .reel-video{top:0;bottom:0;height:100%;min-height:0}
@media(max-height:650px){.reel-copy h2{font-size:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.reel-copy p{-webkit-line-clamp:1}.reel:not(.reel-portrait) .reel-video{top:80px;height:calc(100% - 350px)}}

.reels-top-arrows{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:10px;pointer-events:auto}.reels-top-arrows button{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:1px solid #ffffff60;border-radius:50%;background:#0003;color:#fff;font:24px/1 system-ui;cursor:pointer;touch-action:manipulation}.reels-top-arrows button:disabled{opacity:.3;cursor:default}.reels-top-arrows button:focus-visible{outline:2px solid white;outline-offset:3px}