*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;background:#07090c;color:#fff}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.reels-header{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:20px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(#000b,transparent);pointer-events:none}.reels-header>*{pointer-events:auto}.reels-header>a:first-child{font-size:32px}.reels-header>a:last-child{margin-left:auto;font-size:13px}#reelsFeed{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}.reel{height:100%;position:relative;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#101216}.reel-album{display:flex;overflow-x:auto;height:100%;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}.reel-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative;display:flex;align-items:center;justify-content:center}.reel-slide img,.reel-slide video{width:100%;height:100%;object-fit:contain}.reel-caption{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:16px;right:78px;text-shadow:0 1px 4px #000;background:linear-gradient(transparent,#000b);padding:20px 8px 8px;border-radius:8px;pointer-events:none}.reel-caption a,.reel-caption details{pointer-events:auto}.reel-caption p{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;max-height:100px;overflow:auto}.reel-actions{position:absolute;right:12px;bottom:calc(40px + env(safe-area-inset-bottom));display:grid;gap:16px}.reel-actions button,.reel-actions a{border:0;color:white;background:#171b24b3;border-radius:50%;width:48px;min-height:48px;display:grid;place-items:center;font-size:22px;box-shadow:0 1px 8px #0005}.reel-actions small{font-size:11px}.reel-actions .active{color:#ff3e68}.reel-counter{position:absolute;top:90px;right:16px;background:#0009;padding:5px 10px;border-radius:20px;font-size:13px}.reel-play{position:absolute;top:45%;left:calc(50% - 25px);border:0;border-radius:50%;width:50px;height:50px;color:white;background:#0008;font-size:22px}.reel-play[hidden]{display:none}.reel-error{position:absolute;top:35%;left:15%;right:15%;text-align:center;background:#000b;padding:12px;border-radius:10px}#reelsStatus{position:fixed;top:45%;left:10%;right:10%;text-align:center;pointer-events:none}#reelsRetry{position:fixed;top:55%;left:40%;z-index:4;padding:10px;border:0;border-radius:8px}#reelsToast{position:fixed;top:100px;left:10%;right:10%;text-align:center;background:#1c2539;padding:12px;border-radius:10px;z-index:8}dialog{width:min(520px,96vw);max-height:85vh;border:0;border-radius:18px;background:#fff;color:#202632;padding:16px}dialog::backdrop{background:#0009}dialog header{display:flex;align-items:center;justify-content:space-between}dialog header button{font-size:28px;border:0;background:transparent}#reelsCommentList{max-height:45vh;overflow:auto}.reel-comment{border-bottom:1px solid #e6eaf0;padding:12px 0}.reel-comment p{white-space:pre-wrap;overflow-wrap:anywhere}textarea{width:100%;font:inherit;border:1px solid #ccd3df;border-radius:8px;padding:8px}form button,#reelsMoreComments{padding:10px 16px;border:0;border-radius:8px;background:#1684c3;color:white;margin-top:8px}form label{display:block;margin:8px 0}#reelsFeed:empty{display:none}@media(min-width:700px){#reelsFeed{max-width:520px;margin:auto}.reels-header{max-width:520px;margin:auto}.reel{border-left:1px solid #222;border-right:1px solid #222}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.reel-actions [hidden]{display:none!important}.reel-slide video{cursor:pointer}

/* Compact viewing surface: media first, controls with a consistent silhouette. */
body.reels-page{background:#090b10;color:#fff}
.reels-header{gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 18px;background:linear-gradient(#000c,#0005,transparent)}
.reels-header>a:first-child{width:36px;height:36px;display:grid;place-items:center;background:#ffffff12;border-radius:50%;font-size:30px}
.reels-header strong{font-size:19px;letter-spacing:-.4px;line-height:1.2}
.reels-header strong small{display:block;font-size:10px;font-weight:400;letter-spacing:0;color:#ddd;margin-top:4px}
#reelsRandom{margin-left:auto;border:1px solid #ffffff35;background:#15171bb3;border-radius:24px;padding:9px 12px;color:#fff;font-size:12px;display:flex;gap:6px;align-items:center;min-height:38px}
#reelsRandom.active{background:#fff;color:#171a21;border-color:#fff}
.reel{background:#0c0e13}
.reel-caption{left:12px;right:72px;bottom:calc(24px + env(safe-area-inset-bottom));padding:28px 8px 12px;background:transparent;text-shadow:0 2px 4px #000}
.reel::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}
.reel-caption,.reel-actions,.reel-counter{z-index:1}
.reel-caption strong{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.reel-caption p{font-size:13px;line-height:1.5;margin:6px 0 0;max-height:62px;color:#f3f3f3}
.reel-caption>a:last-child:not(:first-child){display:block;font-size:12px;margin-top:8px;color:#ddd}
.reel-counter{top:calc(82px + env(safe-area-inset-top));right:16px;max-width:calc(100% - 32px);background:#0005;border:1px solid #ffffff20;font-size:11px;padding:5px 9px}
.reel-actions{right:12px;bottom:calc(28px + env(safe-area-inset-bottom));gap:10px}
.reel-actions button,.reel-actions a{background:#11151b70;border:1px solid #ffffff18;box-shadow:none;width:44px;min-height:44px;font-size:24px;line-height:1.1;padding:6px}
.reel-actions button[data-action=heart],.reel-actions button[data-action=comments]{background:transparent;border:0;border-radius:12px;text-shadow:0 1px 4px #000;min-height:52px}
.reel-actions button[data-action=heart]{font-size:34px}
.reel-actions small{font-size:11px;font-weight:600;color:white;margin-top:2px}
.reel-actions svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.reel-actions .active{color:#ff385d}
.reel-actions button:focus-visible,#reelsRandom:focus-visible,.reels-navigation button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.reels-navigation{display:none}
#reelsFeed::-webkit-scrollbar,.reel-album::-webkit-scrollbar{display:none}
#reelsToast{top:calc(84px + env(safe-area-inset-top));background:#252932ed;font-size:13px;box-shadow:0 4px 16px #0004}
@media(min-width:700px){#reelsFeed{max-width:460px}.reels-header{max-width:460px}.reels-navigation{position:fixed;left:calc(50% + 252px);top:45%;display:grid;gap:12px}.reels-navigation button{width:44px;height:44px;border:1px solid #ffffff20;border-radius:50%;color:white;background:#252932;font-size:22px}.reel{border:0}}
@media(max-height:550px){.reel-actions{gap:4px;bottom:12px}.reel-actions button,.reel-actions a{min-height:34px;width:36px;font-size:20px}.reel-actions button[data-action=heart],.reel-actions button[data-action=comments]{min-height:40px}.reel-counter{top:65px}.reels-header strong small{display:none}.reel-caption{bottom:12px}}