[hidden]{display:none!important}
:root{--bg:#07080c;--fg:#f5f7fb;--mut:#a7adbd;--acc:#7c5cff;--acc2:#22d3ee;--heart:#ff3b6b;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--col:min(100vw,calc(100dvh*9/16),480px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,sans-serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
#app{position:fixed;inset:0;display:flex;justify-content:center}
@media (min-width:700px){#app{background:radial-gradient(1200px 600px at 50% -10%,#1b1640 0,#07080c 60%)}}
#feed{position:relative;height:100dvh;width:100vw;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
#feed::-webkit-scrollbar{display:none}
@media (min-width:700px){#feed{width:var(--col);border-radius:0;box-shadow:0 0 0 1px #ffffff14,0 30px 80px #000c}}
#top{position:fixed;z-index:20;top:0;left:50%;transform:translateX(-50%);width:100vw;padding:calc(var(--safe-t) + 8px) 0 14px;background:linear-gradient(#000a,#0000);pointer-events:none}
@media (min-width:700px){#top{width:var(--col)}}
.brand{display:flex;align-items:center;gap:8px;padding:0 14px 8px;font-weight:800;font-size:19px;letter-spacing:-.3px;text-shadow:0 1px 8px #0008}
.brand img{width:24px;height:24px;border-radius:7px}
.brand b{background:linear-gradient(90deg,#a78bfa,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
#chips{display:flex;gap:7px;overflow-x:auto;padding:0 14px;scrollbar-width:none;pointer-events:auto;scroll-padding:0 14px}
#chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 12px;border-radius:99px;background:#ffffff1f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13.5px;font-weight:600;color:#e9ecf5;border:1px solid #ffffff1a;transition:background .2s,transform .15s}
.chip:active{transform:scale(.95)}
.chip[aria-pressed=true]{background:#fff;color:#0b0c12}
.reel{position:relative;height:100dvh;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000;contain:strict}
.reel .bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(28px) brightness(.45) saturate(1.3);transform:scale(1.1)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;opacity:0;transition:opacity .35s}
.reel.vert video{object-fit:cover}
.reel.ready video{opacity:1}
.reel .poster{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;transition:opacity .4s}
.reel.ready .poster{opacity:0}
.reel .tap{position:absolute;inset:0;z-index:2}
.spin{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:3px solid #ffffff2a;border-top-color:#fff;animation:sp .8s linear infinite;z-index:3;opacity:0;transition:opacity .2s;pointer-events:none}
.reel.loading .spin{opacity:1}
@keyframes sp{to{transform:rotate(360deg)}}
.shade{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(#0000,#000c);pointer-events:none;z-index:3}
.cap{position:absolute;z-index:4;left:14px;right:78px;bottom:calc(var(--safe-b) + 26px);pointer-events:none}
.cap .src{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;margin-bottom:6px;flex-wrap:wrap}
.cap .topic{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:99px;background:linear-gradient(90deg,var(--acc),#4f46e5);pointer-events:auto}
.cap h3{margin:0;font-size:15.5px;font-weight:600;line-height:1.32;text-shadow:0 1px 6px #000a;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cap p{margin:5px 0 0;color:#d6dae5;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rail{position:absolute;z-index:5;right:8px;bottom:calc(var(--safe-b) + 24px);display:flex;flex-direction:column;align-items:center;gap:14px}
.rail button,.rail a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;text-decoration:none;font-size:12.5px;font-weight:700;text-shadow:0 1px 4px #000a;width:56px}
.rail .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#ffffff1c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s}
.rail button:active .ic,.rail a:active .ic{transform:scale(.88)}
.rail svg{width:27px;height:27px;fill:#fff}
.rail .heart.on svg{fill:var(--heart);animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.mute{position:absolute;z-index:5;top:calc(var(--safe-t) + 92px);right:12px;width:34px;height:34px;border-radius:50%;background:#0007;display:grid;place-items:center;font-size:16px}
.prog{position:absolute;z-index:6;left:0;right:0;bottom:var(--safe-b);height:24px;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.prog[hidden]{display:none}
.prog .trk{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff2e;transition:height .15s}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.prog b{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 6px #0009;transform:scale(0);transition:transform .15s}
.prog:hover .trk{height:5px}
.prog.active .trk{height:8px;border-radius:0}.prog.active b{transform:scale(1)}
.tbub{position:absolute;bottom:30px;transform:translateX(-50%);padding:5px 10px;border-radius:9px;background:#000c;border:1px solid #ffffff2a;font:700 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;pointer-events:none}
.ttime{position:absolute;z-index:5;left:14px;bottom:calc(var(--safe-b) + 7px);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffffc0;text-shadow:0 1px 3px #000;pointer-events:none}
.ttime[hidden]{display:none}
.skipind{position:absolute;z-index:3;top:0;bottom:0;width:38%;display:grid;place-items:center;pointer-events:none;opacity:0}
.skipind.l{left:0;border-radius:0 50% 50% 0}.skipind.r{right:0;border-radius:50% 0 0 50%}
.skipind.r span{margin-right:64px}
.skipind span{padding:8px 14px;border-radius:99px;background:#000a;font-weight:800;font-size:16px}
.skipind.show{animation:skipr .7s ease-out}
@keyframes skipr{0%{opacity:0;background:#ffffff00}15%{opacity:1;background:#ffffff26}70%{opacity:1;background:#ffffff10}100%{opacity:0;background:#ffffff00}}
.burst{position:absolute;z-index:7;pointer-events:none;width:110px;height:110px;margin:-55px 0 0 -55px;animation:burst .9s ease-out forwards}
.burst svg{width:100%;height:100%;fill:var(--heart);filter:drop-shadow(0 6px 18px #ff3b6b88)}
@keyframes burst{0%{transform:scale(.2) rotate(-15deg);opacity:0}15%{transform:scale(1.25) rotate(-8deg);opacity:1}30%{transform:scale(.95) rotate(0)}70%{transform:scale(1);opacity:1}100%{transform:scale(1.4) translateY(-60px);opacity:0}}
.spark{position:absolute;z-index:7;width:9px;height:9px;border-radius:50%;background:var(--heart);pointer-events:none;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.reel.skel .bg{background:linear-gradient(110deg,#11131b 30%,#1c1f2b 50%,#11131b 70%);background-size:200% 100%;animation:sh 1.2s linear infinite;filter:none;inset:0;transform:none}
.skel .sk{position:absolute;left:14px;bottom:calc(var(--safe-b) + 30px);width:60%}
.skel .sk i{display:block;height:13px;border-radius:7px;background:#ffffff14;margin-top:9px}
.skel .sk i:first-child{width:40%}
@keyframes sh{to{background-position:-200% 0}}
.reel .err{position:absolute;inset:0;z-index:4;display:grid;place-items:center;color:var(--mut);font-size:14px}
#soundHint{position:fixed;z-index:30;left:50%;bottom:calc(var(--safe-b) + 110px);transform:translateX(-50%);padding:9px 16px;border-radius:99px;background:#000b;border:1px solid #ffffff22;font-weight:600;backdrop-filter:blur(10px)}
#empty{position:fixed;inset:0;display:grid;place-content:center;text-align:center;gap:10px;color:var(--mut)}
#empty button{padding:10px 18px;border-radius:99px;background:#fff;color:#000;font-weight:700}
#sheetBack{position:fixed;inset:0;z-index:40;background:#0008;opacity:0;transition:opacity .25s}
#sheetBack.show{opacity:1}
#sheet{position:fixed;z-index:41;left:50%;bottom:0;width:100vw;max-width:480px;height:min(68dvh,620px);transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,.9,.25,1);background:#14161f;border-radius:18px 18px 0 0;display:flex;flex-direction:column;box-shadow:0 -20px 60px #000a;padding-bottom:var(--safe-b)}
#sheet.open{transform:translate(-50%,0)}
.grab{width:40px;height:5px;border-radius:3px;background:#ffffff33;margin:8px auto 2px}
.sheetHead{display:flex;align-items:center;justify-content:center;position:relative;padding:4px 14px 8px}
.sheetHead h2{font-size:15px;margin:0;font-weight:700}
#sheetClose{position:absolute;right:12px;top:0;width:32px;height:32px;border-radius:50%;background:#ffffff12}
#reactRow{display:flex;justify-content:space-around;padding:6px 10px 10px;border-bottom:1px solid #ffffff12}
#reactRow button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:14px;font-size:25px;transition:transform .15s,background .2s;min-width:48px}
#reactRow button small{font-size:11.5px;font-weight:700;color:var(--mut)}
#reactRow button.on{background:#7c5cff33}
#reactRow button.on small{color:#c4b5fd}
#reactRow button:active{transform:scale(1.25)}
#comments{list-style:none;margin:0;padding:8px 14px;overflow-y:auto;flex:1;overscroll-behavior:contain}
#comments li{display:flex;gap:10px;padding:9px 0;animation:fin .3s}
@keyframes fin{from{opacity:0;transform:translateY(6px)}}
#comments .av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
#comments .who{font-size:12.5px;color:var(--mut);font-weight:600}
#comments .who em{font-style:normal;color:#c4b5fd;margin-left:4px}
#comments .txt{font-size:14.5px;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
#comments .none{color:var(--mut);justify-content:center;padding:30px 0}
#cform{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #ffffff12}
#cinput{flex:1;min-width:0;background:#ffffff12;border:1px solid #ffffff1a;border-radius:99px;padding:10px 14px;color:#fff;font-size:16px;outline:none}
#cinput:focus{border-color:#7c5cff}
#ccount{font-size:11px;color:var(--mut);width:24px;text-align:right}
#csend{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#4f46e5);font-size:16px}
#csend:disabled{opacity:.4}
#toast{position:fixed;z-index:60;left:50%;top:calc(var(--safe-t) + 96px);transform:translate(-50%,-10px);padding:9px 16px;border-radius:99px;background:#fff;color:#000;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s}
#toast.show{opacity:1;transform:translate(-50%,0)}
.deskhelp{display:none}
@media (min-width:900px) and (hover:hover){.deskhelp{display:block;position:fixed;bottom:18px;left:50%;transform:translateX(calc(var(--col)/2 + 24px));color:#8b90a3;font-size:12.5px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.reel .tap{touch-action:manipulation}
.rail .mus .ic{font-size:21px}
.rail .mus.off{opacity:.45}
.rail .mus.off .ic{filter:grayscale(1)}
.mchip{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12px;font-weight:700}
.mchip[hidden]{display:none!important}
@media (max-height:640px){.rail{gap:8px}.rail .ic{width:40px;height:40px}.rail svg{width:23px;height:23px}.rail button,.rail a{font-size:11.5px;gap:2px}}
.reel.scrubbing .cap,.reel.scrubbing .ttime,.reel.scrubbing .rail{opacity:0;transition:opacity .15s}
/* ---------- search ---------- */
#sbtn{margin-left:auto;pointer-events:auto;width:36px;height:36px;border-radius:50%;background:#ffffff1f;border:1px solid #ffffff1a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center}
#sbtn svg{width:19px;height:19px;fill:#fff}
#sbtn:active{transform:scale(.92)}
#spill{display:flex;padding:0 14px;pointer-events:auto;max-width:100%}
#spill[hidden]{display:none}
#spill button{padding:7px 12px;background:#fff;color:#0b0c12;font-weight:700;font-size:13.5px}
#spillQ{border-radius:99px 0 0 99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:calc(100% - 44px)}
#spillQ q{quotes:"\201C" "\201D"}
#spillX{border-radius:0 99px 99px 0;border-left:1px solid #0b0c1222 !important;font-weight:800;flex:none}
body.searching #chips{display:none}
#search{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:#07080cf2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#search[hidden]{display:none}
#sform{display:flex;align-items:center;gap:10px;width:100%;max-width:760px;margin:0 auto;padding:calc(var(--safe-t) + 10px) 14px 10px;box-sizing:border-box}
.sbox{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff22}
.sbox:focus-within{border-color:#a78bfa;background:#ffffff1a}
.sbox svg{width:18px;height:18px;fill:#a7adbd;flex:none}
#sinput{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--fg);font:16px/1.2 inherit;font-size:16px;-webkit-appearance:none;appearance:none;padding:0}
#sinput::-webkit-search-cancel-button,#sinput::-webkit-search-decoration{-webkit-appearance:none;display:none}
#sinput::placeholder{color:#8b90a3}
#sclear{flex:none;width:24px;height:24px;border-radius:50%;background:#ffffff22;font-size:11px;color:#fff}
#sclear[hidden]{display:none}
#sclose{flex:none;color:#c9cede;font-weight:600;font-size:15px;padding:8px 2px}
.sbody{position:relative;flex:1;min-height:0}
#ssug{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;padding:0 14px;box-sizing:border-box}
#ssug[hidden]{display:none}
#ssug::before{content:"";position:absolute;inset:0 14px;border-radius:14px;background:#161925;border:1px solid #ffffff16;box-shadow:0 18px 50px #000c;z-index:-1}
.shead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8b90a3}
.sclr{color:#a78bfa;font-size:12px;font-weight:700;text-transform:none;letter-spacing:0}
.sg{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:left;font-size:15.5px;color:#c3c8d6;border-radius:10px}
.sg i{font-style:normal;width:18px;text-align:center;opacity:.65;flex:none;font-size:13px}
.sg b{color:#fff;font-weight:800}
.sgt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg .k{margin-left:6px;color:#8b90a3;font-size:13px;flex:none}
.sg.sel,.sg:hover{background:#ffffff12}
.sg[data-kind=topic] .sgt,.sg[data-kind=source] .sgt{color:#e2d9ff}
#sres{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;max-width:760px;margin:0 auto;padding:0 14px calc(var(--safe-b) + 24px);box-sizing:border-box}
#smeta{padding:4px 2px 10px;color:#a7adbd;font-size:13px;font-weight:600}
.sempty{text-align:center;padding:40px 8px;font-weight:500}
.sempty p{margin:0 0 6px;color:#c3c8d6;font-size:15px;word-break:break-word}
.sempty .sm{font-size:13px;color:#8b90a3}
.tryrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.try{padding:7px 14px;border-radius:99px;background:#ffffff1a;border:1px solid #ffffff1f;color:#fff;font-weight:600;font-size:14px}
#sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.scard{display:block;text-align:left;color:inherit;background:#ffffff0c;border-radius:12px;overflow:hidden;border:1px solid #ffffff10;padding:0}
.scard:active{transform:scale(.98)}
.sth{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#1d2030,#2a1f4a)}
.sth img{width:100%;height:100%;object-fit:cover;display:block}
.sdur{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:6px;background:#000b;color:#fff;font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.sinfo{padding:8px 9px 10px}
.sinfo h4{margin:0 0 6px;font-size:13.5px;line-height:1.3;font-weight:650;color:#eef0f6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.smeta2{display:flex;align-items:center;gap:6px;min-width:0;font-size:11.5px;color:#a7adbd}
.ssrc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stopic{flex:none;padding:2px 7px;border-radius:99px;background:linear-gradient(90deg,var(--acc),#4f46e5);color:#fff;font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
#search mark{background:#facc1540;color:#fff6c7;border-radius:3px;padding:0 1px}
.stopic mark{background:none;color:#fff;text-decoration:underline}

#sgrid .sdesc{margin:4px 0 0;font-size:12px;line-height:1.3;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* embedded players (YouTube / Dailymotion): the .tap layer stays on top so tap/double-tap/swipe keep working */
.reel iframe.emb{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000;opacity:0;transition:opacity .35s}
.reel.ready iframe.emb{opacity:1}
.reel.embedded.vert iframe.emb{left:50%;width:min(100%,56.25vh);transform:translateX(-50%)}
.reel.embedded:not(.vert) iframe.emb{top:50%;height:min(100%,56.25vw);transform:translateY(-50%)}
.reel.embedded .prog,.reel.embedded .ttime,.reel.embedded .skipind,.reel.embedded .mus{display:none!important}

/* Add to Home Screen tip: sits above the safe area, left of the action rail; captions slide up while it is visible */
#a2hs{position:fixed;z-index:35;left:calc(50% - var(--col)/2 + 10px);width:calc(var(--col) - 84px);bottom:calc(var(--safe-b) + 28px);display:flex;align-items:center;gap:10px;padding:10px 8px 10px 10px;box-sizing:border-box;border-radius:16px;background:#14161fe8;border:1px solid #ffffff1c;box-shadow:0 10px 34px #000a;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;font-size:13px;line-height:1.3}
#a2hs.show{opacity:1;transform:none}
#a2hs img{width:34px;height:34px;border-radius:9px;flex:none}
#a2hs .a2t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#a2hs .a2t>b{font-size:13.5px}
#a2hs .a2t span{color:var(--mut)}#a2hs .a2t span b{color:var(--fg);font-weight:600}
#a2hs .a2share{width:16px;height:16px;fill:var(--acc2);vertical-align:-3px;margin:0 1px}
#a2hs .a2go{flex:none;padding:8px 14px;border-radius:99px;background:var(--acc);color:#fff;font-weight:700;font-size:13px}
#a2hs .a2x{flex:none;width:28px;height:28px;border-radius:50%;color:var(--mut);font-size:14px;display:grid;place-items:center}
body.a2on .cap{bottom:calc(var(--safe-b) + 40px + var(--a2h,64px));transition:bottom .25s}