@layer components{.v3 .feed{container-type:inline-size}.v3 .feed-list{--gap:10px;--feed-radius:6px;height:var(--h-a);position:relative}.v3 .feed-tile{--x:var(--x-a);--y:var(--y-a);--w:var(--w-a);--s:var(--s-a);display:var(--s,block);left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--r,1.3333);position:absolute}@container (min-width:560px){.v3 .feed-list{--gap:12px;height:var(--h-b)}.v3 .feed-tile{--x:var(--x-b);--y:var(--y-b);--w:var(--w-b);--s:var(--s-b)}}@container (min-width:900px){.v3 .feed-list{height:var(--h-c)}.v3 .feed-tile{--x:var(--x-c);--y:var(--y-c);--w:var(--w-c);--s:var(--s-c)}}@container (min-width:1400px){.v3 .feed-list{height:var(--h-d)}.v3 .feed-tile{--x:var(--x-d);--y:var(--y-d);--w:var(--w-d);--s:var(--s-d)}}@container (min-width:1900px){.v3 .feed-list{height:var(--h-e)}.v3 .feed-tile{--x:var(--x-e);--y:var(--y-e);--w:var(--w-e);--s:var(--s-e)}}.v3 .feed-link{border-radius:var(--feed-radius);background:var(--card);outline:none;width:100%;height:100%;display:block;position:relative;overflow:hidden}.v3 .feed-link>:is(video,img){object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.v3 .feed-link>img{opacity:0;transition:opacity .42s var(--ease-out)}.v3 .feed-link[data-ready]>img{opacity:1}.v3 .feed-link:not([data-ready]){border-radius:0}.v3 .feed-link{transition:border-radius .42s var(--ease-out)}.v3 .feed-wire{--wire:color-mix(in oklab, var(--color-ink) 28%, transparent);background-color:color-mix(in oklab, var(--color-ink) 3%, transparent);background-image:repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in oklab, var(--color-ink) 6%, transparent) 5px 6px);box-shadow:inset 0 0 0 1px var(--wire);font-variant-numeric:tabular-nums;animation:page-wire-draw .22s var(--ease-out) var(--at,0s) backwards;font-size:11px;line-height:16px;position:absolute;inset:0}.v3 .feed-wire svg{width:100%;height:100%;position:absolute;inset:0}.v3 .feed-wire path{fill:none;stroke:color-mix(in oklab, var(--color-ink) 18%, transparent);stroke-width:1px;vector-effect:non-scaling-stroke}.v3 .feed-wire b{background:var(--wire);color:var(--color-paper);white-space:nowrap;padding:0 5px;font-weight:500;position:absolute;top:0;left:0}.v3 .feed-wire i{background:var(--color-paper);color:var(--wire);box-shadow:inset 0 0 0 1px var(--wire);white-space:nowrap;padding:0 5px;font-style:normal;position:absolute;bottom:8px;left:50%;translate:-50%}@media (prefers-reduced-motion:reduce){.v3 .feed-wire{animation:none}.v3 .feed-link>img{transition:none}}.v3 .feed-link[data-cut]>img{object-position:top}.v3 .feed-link:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none;position:absolute;inset:0}.v3 .feed-link:focus-visible{outline:2px solid var(--color-ink);outline-offset:-2px}}.feed-viewer{color:#fff;background:0 0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.feed-viewer::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080808eb}.feed-viewer[open],.feed-viewer[open]::backdrop{animation:feed-viewer-in .24s var(--ease-out) both}@keyframes feed-viewer-in{0%{opacity:0}}.feed-viewer-in{height:100%;padding:72px clamp(16px, 7vw, 112px) max(24px, env(safe-area-inset-bottom));animation:feed-viewer-in .2s var(--ease-out) both;grid-template-rows:minmax(0,1fr) auto;gap:20px;display:grid}.feed-viewer-stage{place-items:center;min-height:0;display:grid;container-type:size}.feed-viewer-media{width:min(100cqw, calc(100cqh * var(--ratio)), 1280px);aspect-ratio:var(--ratio);background:#141414;border-radius:12px;position:relative;overflow:hidden}.feed-viewer-media>:is(video,img){object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.feed-viewer-media .film-toggle{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0a0ab3;border-radius:999px;place-items:center;width:32px;height:32px;display:grid;position:absolute;bottom:12px;right:12px}.feed-viewer-text{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;width:100%;max-width:1280px;margin-inline:auto;display:flex}.feed-viewer-go{color:#0a0a0a;background:#fff;border-radius:999px;outline:none;flex:none;align-items:center;gap:8px;height:44px;padding-inline:20px;font-size:15px;font-weight:500;display:inline-flex}.feed-viewer-go:focus-visible{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #fff}.feed-viewer-btn{color:#fff;width:44px;height:44px;transition:background-color .12s var(--ease-out);background:#ffffff1a;border-radius:999px;outline:none;place-items:center;display:grid;position:absolute}.feed-viewer-btn:hover{background:#fff3}.feed-viewer-btn:focus-visible{box-shadow:0 0 0 2px #fff}.feed-viewer-close{top:16px;right:16px}.feed-viewer-prev,.feed-viewer-next{top:calc(50% - 46px)}.feed-viewer-prev{left:16px}.feed-viewer-next{right:16px}@media (max-width:640px){.feed-viewer-prev,.feed-viewer-next{display:none}.feed-viewer-in{padding-top:68px}}@media (prefers-reduced-motion:reduce){.feed-viewer[open],.feed-viewer[open]::backdrop,.feed-viewer-in{animation:none}}.feed-full{background:var(--color-paper);width:100vw;max-width:none;height:100dvh;max-height:none;color:var(--color-ink);border:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.feed-full::backdrop{background:0 0}.feed-full-in{flex-direction:column;height:100%;display:flex}.feed-full-bar{flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:64px;padding-inline:clamp(16px,2.4vw,32px);display:grid}.feed-full-bar>:last-child{justify-self:end}.feed-full-close{background:var(--card);width:40px;height:40px;color:var(--color-ink);transition:background-color .12s var(--ease-out);border-radius:999px;outline:none;place-items:center;display:grid}.feed-full-close:hover{background:var(--card-2,var(--card))}.feed-full-close:focus-visible{box-shadow:0 0 0 2px var(--color-ink)}.feed-full-body{overscroll-behavior:contain;min-height:0;animation:feed-full-in .42s .12s var(--ease-out) both;flex:1;padding:4px clamp(16px,2.4vw,32px) 24px;overflow-y:auto}@keyframes feed-full-in{0%{opacity:0;transform:translateY(12px)}}@media (max-width:640px){.feed-full-bar{grid-template-columns:1fr auto;height:auto;padding-block:12px}.feed-full-bar>:first-child{display:none}}@media (prefers-reduced-motion:reduce){.feed-full-body{animation:none}}.feed-full-bar :is(button,span,p){white-space:nowrap}
