:root{--bg:#000;--heart:#ff7a9c;--gblur:26px;--gbg:rgba(255,255,255,.13)}
#app{position:fixed;inset:0}
.feed{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#111;content-visibility:auto;contain-intrinsic-size:100vw 100dvh}
.slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity .5s;opacity:0}.slide.in>img{transform:scale(1)}.slide>img.ok{opacity:1}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 22%,transparent 45%,rgba(0,0,0,.65));pointer-events:none}
.sheet{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));border-radius:30px;padding:18px 20px;transform:translateY(40px);opacity:0;transition:transform .8s .15s cubic-bezier(.2,.8,.2,1),opacity .8s .15s}.slide.in .sheet{transform:none;opacity:1}
.sheet .row{display:flex;align-items:flex-end;gap:12px}.sheet h2{font-size:30px;letter-spacing:-.03em;line-height:1.05}.sheet .sub{font-size:14px;opacity:.75;margin-top:4px}
.sheet .grab{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.4);margin:-6px auto 12px}
.sheet .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}.sheet.open .more{grid-template-rows:1fr}.more>div{overflow:hidden;min-height:0}
.more .in{padding-top:14px;display:grid;gap:14px;opacity:0;transform:translateY(8px);transition:opacity .4s .1s,transform .4s .1s}.sheet.open .more .in{opacity:1;transform:none}
.blurb{font-size:14px;line-height:1.5;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.grid div{padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.1)}.grid small{display:block;font-size:11px;opacity:.55;text-transform:uppercase;letter-spacing:.07em}.grid b{font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{padding:5px 11px;border-radius:99px;font-size:12px;background:rgba(255,255,255,.14)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.chips span{padding:4px 10px;border-radius:99px;font-size:12px;background:rgba(255,255,255,.14)}
.sheet .heart{flex:none;width:52px;height:52px;font-size:24px}
.top{position:absolute;z-index:10;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 12px 0;display:grid;gap:8px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}.top.hide{transform:translateY(-130%);opacity:0}
.top .pill-search{height:44px}.top .seg{width:100%}
.counter{position:absolute;z-index:9;right:14px;top:30%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:11px;font-weight:700;letter-spacing:.1em;padding:12px 6px;border-radius:99px;opacity:.9;font-variant-numeric:tabular-nums}
.burst{position:absolute;z-index:6;left:50%;top:40%;font-size:96px;color:#ff7a9c;pointer-events:none;transform:translate(-50%,-50%) scale(0);animation:burst .8s cubic-bezier(.2,1.4,.4,1) forwards;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(0);opacity:1}45%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-70%) scale(1);opacity:0}}
.sk{white-space:nowrap;position:absolute;z-index:11;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:8px 16px;border-radius:99px;font-size:12px;font-weight:600;animation:nudge 2.4s 1.2s both;pointer-events:none}
@keyframes nudge{0%{opacity:0;transform:translate(-50%,10px)}20%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}