.social-page{background:#fff;color:#111;font-family:'DM Sans',sans-serif}
.social-page [hidden]{display:none!important}
.social-page header.nav .logo img{display:block;flex:none;width:40px;height:40px;margin:-7px}
.social-main{width:min(1240px,calc(100% - 80px));margin:auto;padding-bottom:100px}
.social-hero{padding:64px 0 44px}
.social-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#777;font-size:13px;text-decoration:none;margin-bottom:18px}
.social-heading{display:flex;align-items:center;justify-content:space-between;gap:32px}
.social-heading h1{font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-.055em;font-weight:500;margin:0;max-width:850px}
.social-profile{display:inline-flex;align-items:center;gap:12px;color:#555;font-size:13px;text-decoration:none;white-space:nowrap;min-height:44px}
.social-section{padding:0 0 58px}
.rail-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.rail-heading h2{font-size:22px;font-weight:500;letter-spacing:-.035em;margin:0}
.rail-controls{display:flex;gap:8px}
.social-arrow{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border:1px solid #e6e6e6;border-radius:50%;background:#fff;color:#111;padding:0;cursor:pointer;box-shadow:none}
.social-arrow:disabled{opacity:.25;cursor:default}
.social-arrow .icon-arrow{width:18px;height:18px}
.social-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:0 0 2px}
.social-rail::-webkit-scrollbar{display:none}
.social-item{flex:0 0 calc((100% - 44px)/3);min-width:0;scroll-snap-align:start}
.social-rail--reel .social-item{flex-basis:calc((100% - 66px)/4)}
.inline-media{aspect-ratio:4/5;background:#f6f6f6;border-radius:10px;overflow:hidden;position:relative;touch-action:pan-y}
.social-rail--reel .inline-media{aspect-ratio:9/16;touch-action:auto;background:#fff}
.inline-media>img,.inline-media>video{width:100%;height:100%;display:block;object-fit:cover}
.inline-media>img{animation:social-appear .24s ease-out}
.inline-media>video{background:#fff}
.inline-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding-top:8px}
.inline-original{color:#666;font-size:12px;line-height:1.4;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:70%}
.slide-controls{display:flex;align-items:center;gap:8px;flex:none}
.slide-controls .social-arrow{width:34px;height:34px;border:0}
.slide-count{color:#777;font-size:11px;min-width:37px;text-align:center;font-variant-numeric:tabular-nums}
.social-page footer{margin-top:0;background:#fff;color:#111;border-top:1px solid #eee}
.social-page footer .logo img{width:26px;height:26px;filter:invert(1)}
#social-status,#social-fallback{font-size:14px;color:#777}
.social-page button:focus-visible,.social-page a:focus-visible{outline:2px solid #888;outline-offset:3px}
@keyframes social-appear{from{opacity:.55;transform:translateX(6px)}to{opacity:1;transform:none}}
@media(hover:hover){.social-arrow:not(:disabled):hover{background:#f4f4f4}.inline-original:hover,.social-profile:hover{color:#111}}
@media(max-width:1000px){.social-main{width:calc(100% - 48px)}.social-hero{padding-top:48px}.social-rail--reel .social-item{flex-basis:calc((100% - 44px)/3)}.social-item{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:600px){.social-main{width:calc(100% - 32px);padding-bottom:40px}.social-hero{padding:28px 0 28px}.social-back{margin-bottom:10px}.social-heading{display:block}.social-heading h1{font-size:36px;max-width:330px}.social-profile{margin-top:12px}.social-section{padding-bottom:35px}.rail-heading{margin-bottom:16px}.rail-heading h2{font-size:20px}.social-rail{gap:14px}.social-item{flex-basis:92%}.social-rail--reel .social-item{flex-basis:76%}.inline-meta{gap:8px}.inline-original{max-width:55%}.social-arrow{width:40px;height:40px}.slide-controls{gap:3px}.slide-controls .social-arrow{width:40px;height:40px}.inline-media{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.social-page *{animation:none!important;scroll-behavior:auto!important}}


/* One compact bottom bar, independent of browser-specific native volume UI. */
.reel-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:5px;height:40px;padding:0 7px;background:rgba(25,25,25,.88);color:#fff;z-index:2;font:11px/1 'DM Sans',sans-serif}
.reel-controls button{display:flex;align-items:center;justify-content:center;flex:none;width:27px;height:36px;border:0;padding:0;background:none;color:#fff;cursor:pointer}
.reel-controls input{margin:0;min-width:0;height:20px;accent-color:#fff;cursor:pointer;touch-action:none}
.reel-seek{flex:1;width:35px}
.reel-time{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:10px}
.reel-volume{position:relative;flex:none}
.reel-volume-popup{position:absolute;bottom:100%;right:-4px;width:112px;height:42px;display:flex;align-items:center;padding:0 12px;background:#252525;border-radius:7px 7px 0 7px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .12s ease}
.reel-volume-popup input{width:88px}
.reel-volume:hover .reel-volume-popup,.reel-volume:focus-within .reel-volume-popup,.reel-volume.is-open .reel-volume-popup{visibility:visible;opacity:1;pointer-events:auto}
.inline-media:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0;background:#000}
.inline-media:fullscreen>video{object-fit:contain;background:#000}
.reel-controls :focus-visible{outline:1px solid #fff;outline-offset:1px}