:root{color-scheme:dark;--gold:#b9a05a;--gold2:#c5af73;--ink:#050505;--panel:#111318;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#050505;color:#fff;font-family:Inter,Arial,sans-serif;overflow:hidden}button,input,textarea{font:inherit}
.reels-head{position:fixed;z-index:20;top:0;left:0;right:0;height:58px;padding:max(8px,env(safe-area-inset-top)) 15px 8px;display:grid;grid-template-columns:42px 1fr 42px;align-items:end;background:linear-gradient(#050505,transparent);pointer-events:none}.reels-head a,.reels-head strong,.reels-head span{pointer-events:auto}.reels-head a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;font-size:22px}.reels-head strong{text-align:center;font-size:14px;letter-spacing:.08em}.reels-head span{align-self:center;color:var(--gold2);font-size:10px;font-weight:900}
.reels{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}.reels::-webkit-scrollbar{display:none}.reel{position:relative;height:100dvh;min-height:520px;scroll-snap-align:start;scroll-snap-stop:always;background:#050505;overflow:hidden}.reel>video{width:100%;height:100%;object-fit:contain;background:#050505}.reel-gradient{position:absolute;inset:35% 0 0;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.12) 25%,rgba(0,0,0,.86))}
.sound{position:absolute;z-index:3;top:70px;right:16px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(0,0,0,.54);color:#fff;cursor:pointer}.reel-copy{position:absolute;z-index:2;left:17px;right:92px;bottom:max(23px,env(safe-area-inset-bottom))}.reel-copy b{color:var(--gold2);font-size:13px}.reel-copy h1{margin:8px 0 0;font-size:clamp(17px,4.8vw,24px);line-height:1.3;text-shadow:0 2px 12px #000}
.reel-actions{position:absolute;z-index:3;right:10px;bottom:max(20px,env(safe-area-inset-bottom));display:grid;gap:16px;text-align:center}.reel-actions button,.reel-actions .views{display:grid;place-items:center;gap:3px;width:72px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.reel-actions span{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:rgba(0,0,0,.62);font-size:25px}.reel-actions b{font-size:12px}.reel-actions small{font-size:9px;color:#ddd}.reel-actions .like.active span{color:#211b10;background:var(--gold);border-color:var(--gold)}
.comment-sheet{position:absolute;z-index:10;left:0;right:0;bottom:0;height:min(72%,650px);display:grid;grid-template-rows:auto 1fr auto;background:rgba(12,14,18,.98);border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -20px 50px rgba(0,0,0,.5)}.comment-sheet.open{transform:none}.comment-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line)}.comment-head button{width:36px;height:36px;border:0;border-radius:50%;background:#272b32;color:#fff;font-size:25px}.comment-list{overflow:auto;padding:5px 18px}.comment{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}.comment b{font-size:12px;color:var(--gold2)}.comment p{margin:5px 0 0;line-height:1.45;font-size:14px}.no-comments{padding:30px 0;text-align:center;color:#999}.comment-form{display:grid;grid-template-columns:120px 1fr auto;gap:7px;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}.comment-form input,.comment-form textarea{min-width:0;border:1px solid var(--line);border-radius:12px;background:#1b1f26;color:#fff;padding:10px;resize:none}.comment-form textarea{height:44px}.comment-form button,.reels-empty a{border:0;border-radius:12px;background:var(--gold);color:#211b10;font-weight:900;padding:10px 15px;text-decoration:none}.toast{position:fixed;z-index:40;left:50%;bottom:30px;transform:translate(-50%,25px);padding:10px 16px;border-radius:999px;background:#fff;color:#111;font-size:13px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.reels-empty{height:100%;display:grid;place-content:center;text-align:center;padding:25px}.reels-empty h1{margin:0}.reels-empty p{color:#aaa;max-width:440px}.reels-empty a{justify-self:center}
@media(min-width:760px){.reel{width:min(100%,560px);margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}.reels-head{width:min(100%,560px);margin:auto}.comment-form{grid-template-columns:130px 1fr auto}}
@media(max-width:520px){.comment-form{grid-template-columns:1fr auto}.comment-form input{grid-column:1/-1}.reel-actions{gap:12px}.reel-actions span{width:44px;height:44px}.reel-actions button,.reel-actions .views{width:66px}}
@media(prefers-reduced-motion:reduce){.comment-sheet,.toast{transition:none}}