:root .sig.sig--vis-feed { container-type: inline-size; min-height: 540px; text-align: left; }
:root .sig--vis-feed svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--vis-feed .vf, :root .sig--vis-feed.vf { position: absolute; inset: 0; display: grid; place-items: center; }
:root .sig--vis-feed .vf__modes, :root .sig--vis-feed.vf__modes { position: absolute; left: clamp(14px, 6cqw, 48px); top: 50%; transform: translateY(-50%); display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
:root .sig--vis-feed .vf__modes li, :root .sig--vis-feed.vf__modes li { display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font: 500 13px/1 var(--f-display); transition: all .5s var(--ease-out); }
:root .sig--vis-feed .vf__modes svg, :root .sig--vis-feed.vf__modes svg { width: 17px; height: 17px; }
:root .sig--vis-feed .vf__modes li.on, :root .sig--vis-feed.vf__modes li.on { color: #fff; border-color: var(--v); background: rgba(161, 0, 255, .2); transform: translateX(6px); }
@container (max-width: 560px){:root .sig--vis-feed .vf, :root .sig--vis-feed.vf { place-items: end center; padding-bottom: 12px; }
:root .sig--vis-feed .vf__modes, :root .sig--vis-feed.vf__modes { left: 50%; top: 14px; transform: translateX(-50%); display: flex; }
:root .sig--vis-feed .vf__modes li, :root .sig--vis-feed.vf__modes li { padding: 7px 11px 7px 8px; font-size: 12px; }
:root .sig--vis-feed .vf__modes li.on, :root .sig--vis-feed.vf__modes li.on { transform: none; }
:root .sig--vis-feed .vf__phone, :root .sig--vis-feed.vf__phone { height: calc(100% - 70px) !important; }

}
:root .sig--vis-feed .vf__phone, :root .sig--vis-feed.vf__phone { position: relative; height: 92%; max-height: 560px; aspect-ratio: 9 / 18.6; padding: 8px; border-radius: 34px; background: #0d0b10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 50px 90px -30px rgba(0, 0, 0, .95); }
:root .sig--vis-feed .vf__scr, :root .sig--vis-feed.vf__scr { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; color: #18151d; transition: background .5s; }
:root .sig--vis-feed .is-out .vf__scr, :root .sig--vis-feed.is-out .vf__scr { background: #1b1820; }
:root .sig--vis-feed .vf__app, :root .sig--vis-feed.vf__app { display: flex; flex-direction: column; height: 100%; }
:root .sig--vis-feed .vf__top, :root .sig--vis-feed.vf__top { display: flex; align-items: center; gap: 12px; padding: 14px 14px 6px; }
:root .sig--vis-feed .vf__top b, :root .sig--vis-feed.vf__top b { margin-right: auto; font: 600 14px/1 var(--f-display); letter-spacing: -.02em; }
:root .sig--vis-feed .vf__top svg, :root .sig--vis-feed.vf__top svg { width: 19px; height: 19px; }
:root .sig--vis-feed .vf__rings, :root .sig--vis-feed.vf__rings { display: flex; gap: 9px; padding: 6px 12px 8px; overflow: hidden; max-height: 76px; border-bottom: 1px solid #f0ecf3; transition: max-height .8s var(--ease-out), padding .8s var(--ease-out), opacity .4s; }
:root .sig--vis-feed .is-liked .vf__rings, :root .sig--vis-feed.is-liked .vf__rings { max-height: 0; padding-block: 0; opacity: 0; }
:root .sig--vis-feed .vf__ring, :root .sig--vis-feed.vf__ring { display: grid; justify-items: center; gap: 4px; flex: none; }
:root .sig--vis-feed .vf__ring i, :root .sig--vis-feed.vf__ring i { width: 44px; height: 44px; border-radius: 50%; padding: 2.5px; background: conic-gradient(#a100ff, #e3b8ff, #ff6fb5, #a100ff); }
:root .sig--vis-feed .vf__ring i::after, :root .sig--vis-feed.vf__ring i::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; background: #e9e1f0; }
:root .sig--vis-feed .vf__ring--me i::after, :root .sig--vis-feed.vf__ring--me i::after { background: linear-gradient(135deg, #a100ff, #5b00a8); }
:root .sig--vis-feed .vf__ring small, :root .sig--vis-feed.vf__ring small { font: 400 9.5px/1 var(--f-body); color: #4b4453; }
:root .sig--vis-feed .vf__post, :root .sig--vis-feed.vf__post { display: flex; flex-direction: column; min-height: 0; }
:root .sig--vis-feed .vf__ph, :root .sig--vis-feed.vf__ph { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
:root .sig--vis-feed .vf__av, :root .sig--vis-feed.vf__av { width: 26px; height: 26px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #a100ff, #5b00a8); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c06bff; }
:root .sig--vis-feed .vf__ph b, :root .sig--vis-feed.vf__ph b { font: 600 12px/1 var(--f-display); }
:root .sig--vis-feed .vf__media, :root .sig--vis-feed.vf__media { position: relative; aspect-ratio: 1; background: #f1ecf5; overflow: hidden; }
:root .sig--vis-feed .vf__media img, :root .sig--vis-feed.vf__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18); clip-path: inset(50% 50% 50% 50%); transition: opacity .6s, transform 1.6s var(--ease-out), clip-path 1.1s var(--ease-out); }
:root .sig--vis-feed .is-img .vf__media img, :root .sig--vis-feed.is-img .vf__media img { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
:root .sig--vis-feed .vf__canvas, :root .sig--vis-feed.vf__canvas { position: absolute; inset: 10%; border: 1.5px dashed #c9b6da; border-radius: 6px; opacity: 0; transition: opacity .5s; }
:root .sig--vis-feed .is-canvas .vf__canvas, :root .sig--vis-feed.is-canvas .vf__canvas { opacity: 1; }
:root .sig--vis-feed .vf__canvas i, :root .sig--vis-feed.vf__canvas i { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: #fff; border: 1.5px solid #a100ff; }
:root .sig--vis-feed .vf__canvas i:nth-child(1), :root .sig--vis-feed.vf__canvas i:nth-child(1) { left: -6px; top: -6px; }
:root .sig--vis-feed .vf__canvas i:nth-child(2), :root .sig--vis-feed.vf__canvas i:nth-child(2) { right: -6px; top: -6px; }
:root .sig--vis-feed .vf__canvas i:nth-child(3), :root .sig--vis-feed.vf__canvas i:nth-child(3) { left: -6px; bottom: -6px; }
:root .sig--vis-feed .vf__canvas i:nth-child(4), :root .sig--vis-feed.vf__canvas i:nth-child(4) { right: -6px; bottom: -6px; }
:root .sig--vis-feed .vf__sticker, :root .sig--vis-feed.vf__sticker { position: absolute; left: 10px; top: 10px; padding: 6px 10px; border-radius: 8px; background: #a100ff; color: #fff; font: 600 12px/1 var(--f-display); transform: scale(0) rotate(-12deg); transition: transform .6s var(--ease-back); }
:root .sig--vis-feed .is-sticker .vf__sticker, :root .sig--vis-feed.is-sticker .vf__sticker { transform: rotate(-6deg); }
:root .sig--vis-feed .vf__big, :root .sig--vis-feed.vf__big { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; margin: -17% 0 0 -17%; fill: #fff; stroke: none; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)); opacity: 0; transform: scale(.2); }
:root .sig--vis-feed .is-pop .vf__big, :root .sig--vis-feed.is-pop .vf__big { animation: vfPop .9s var(--ease-out) forwards; }
@keyframes vfPop{ 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.15); } 50% { transform: scale(.95); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-10px); } }
:root .sig--vis-feed .vf__acts, :root .sig--vis-feed.vf__acts { display: flex; align-items: center; gap: 14px; padding: 9px 12px 4px; }
:root .sig--vis-feed .vf__acts svg, :root .sig--vis-feed.vf__acts svg { width: 21px; height: 21px; }
:root .sig--vis-feed .vf__acts span, :root .sig--vis-feed.vf__acts span { flex: 1; }
:root .sig--vis-feed .vf__like, :root .sig--vis-feed.vf__like { transition: transform .4s var(--ease-back), fill .3s, stroke .3s; }
:root .sig--vis-feed .is-liked .vf__like, :root .sig--vis-feed.is-liked .vf__like { fill: #a100ff; stroke: #a100ff; transform: scale(1.12); }
:root .sig--vis-feed .vf__cap, :root .sig--vis-feed.vf__cap { margin: 2px 12px 6px; font: 400 11.5px/1.45 var(--f-body); color: #2c2533; min-height: 1.45em; }
:root .sig--vis-feed .vf__cap b, :root .sig--vis-feed.vf__cap b { font-weight: 600; }
:root .sig--vis-feed .vf__com, :root .sig--vis-feed.vf__com { display: grid; gap: 6px; margin: 0; padding: 0 12px; list-style: none; }
:root .sig--vis-feed .vf__com li, :root .sig--vis-feed.vf__com li { display: flex; gap: 7px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--ease-out); }
:root .sig--vis-feed .vf__com li.on, :root .sig--vis-feed.vf__com li.on { opacity: 1; transform: none; }
:root .sig--vis-feed .vf__com span, :root .sig--vis-feed.vf__com span { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #ede4f5; color: #5b00a8; font: 600 9.5px/1 var(--f-display); }
:root .sig--vis-feed .vf__com p, :root .sig--vis-feed.vf__com p { margin: 2px 0 0; font: 400 11px/1.4 var(--f-body); color: #2c2533; }
:root .sig--vis-feed .vf__full, :root .sig--vis-feed.vf__full { position: absolute; inset: 0; background: #111; color: #fff; opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity .5s, transform .8s var(--ease-out), visibility 0s .8s; }
:root .sig--vis-feed .is-full .vf__full, :root .sig--vis-feed.is-full .vf__full { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .8s var(--ease-out), visibility 0s; }
:root .sig--vis-feed .vf__full img, :root .sig--vis-feed.vf__full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root .sig--vis-feed .is-play .vf__full img, :root .sig--vis-feed.is-play .vf__full img, :root .sig--vis-feed .is-story .vf__full img, :root .sig--vis-feed.is-story .vf__full img { animation: vfKen 9s ease-out forwards; }
@keyframes vfKen{ from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, -2%); } }
:root .sig--vis-feed .vf__full::after, :root .sig--vis-feed.vf__full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 55%, rgba(0, 0, 0, .75)); pointer-events: none; }
:root .sig--vis-feed .vf__segs, :root .sig--vis-feed.vf__segs { position: absolute; z-index: 2; left: 10px; right: 10px; top: 12px; display: none; gap: 4px; }
:root .sig--vis-feed .is-story .vf__segs, :root .sig--vis-feed.is-story .vf__segs { display: flex; }
:root .sig--vis-feed .vf__segs i, :root .sig--vis-feed.vf__segs i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
:root .sig--vis-feed .vf__segs b, :root .sig--vis-feed.vf__segs b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
:root .sig--vis-feed .is-story .vf__segs i:first-child b, :root .sig--vis-feed.is-story .vf__segs i:first-child b { transform: none; }
:root .sig--vis-feed .is-story .vf__segs i:nth-child(2) b, :root .sig--vis-feed.is-story .vf__segs i:nth-child(2) b { animation: vfSeg 6s linear .2s forwards; }
@keyframes vfSeg{ to { transform: none; } }
:root .sig--vis-feed .vf__side, :root .sig--vis-feed.vf__side { position: absolute; z-index: 2; right: 10px; bottom: 96px; display: none; flex-direction: column; gap: 16px; }
:root .sig--vis-feed .is-play .vf__side, :root .sig--vis-feed.is-play .vf__side { display: flex; }
:root .sig--vis-feed .vf__side svg, :root .sig--vis-feed.vf__side svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); transition: transform .35s var(--ease-back), fill .3s, stroke .3s; }
:root .sig--vis-feed .vf__like2.on, :root .sig--vis-feed.vf__like2.on { fill: #a100ff; stroke: #a100ff; transform: scale(1.15); }
:root .sig--vis-feed .vf__foot, :root .sig--vis-feed.vf__foot { position: absolute; z-index: 2; left: 12px; right: 48px; bottom: 14px; display: none; }
:root .sig--vis-feed .is-play .vf__foot, :root .sig--vis-feed.is-play .vf__foot { display: block; }
:root .sig--vis-feed .vf__foot p, :root .sig--vis-feed.vf__foot p { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; }
:root .sig--vis-feed .vf__foot b, :root .sig--vis-feed.vf__foot b { font: 600 12px/1 var(--f-display); }
:root .sig--vis-feed .vf__cap2, :root .sig--vis-feed.vf__cap2 { display: block !important; font: 400 11.5px/1.4 var(--f-body); min-height: 1.4em; }
:root .sig--vis-feed .vf__audio, :root .sig--vis-feed.vf__audio { font: 400 10.5px/1 var(--f-body); color: #eee; overflow: hidden; white-space: nowrap; }
:root .sig--vis-feed .vf__audio svg, :root .sig--vis-feed.vf__audio svg { width: 13px; height: 13px; flex: none; }
:root .sig--vis-feed .vf__audio span, :root .sig--vis-feed.vf__audio span { display: inline-block; animation: vfTick 7s linear infinite; }
@keyframes vfTick{ from { transform: translateX(40%); } to { transform: translateX(-100%); } }
:root .sig--vis-feed .vf__ask, :root .sig--vis-feed.vf__ask { position: absolute; z-index: 2; left: 14%; right: 14%; top: 30%; padding: 12px; border-radius: 16px; background: #fff; color: #18151d; text-align: center; opacity: 0; transform: scale(.6) rotate(-6deg); transition: opacity .3s, transform .6s var(--ease-back); }
:root .sig--vis-feed .is-ask .vf__ask, :root .sig--vis-feed.is-ask .vf__ask { opacity: 1; transform: rotate(-3deg); }
:root .sig--vis-feed .vf__ask small, :root .sig--vis-feed.vf__ask small { display: block; margin: -24px auto 8px; width: max-content; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, #a100ff, #5b00a8); color: #fff; font: 600 10.5px/1 var(--f-display); }
:root .sig--vis-feed .vf__ask p, :root .sig--vis-feed.vf__ask p { margin: 0 0 8px; min-height: 2.8em; font: 600 12.5px/1.4 var(--f-display); letter-spacing: -.01em; }
:root .sig--vis-feed .vf__ask i, :root .sig--vis-feed.vf__ask i { display: block; height: 26px; border-radius: 8px; background: #f2edf6; }
:root .sig--vis-feed .vf__slide, :root .sig--vis-feed.vf__slide { position: absolute; z-index: 2; left: 18%; right: 18%; bottom: 18%; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .6s var(--ease-out); }
:root .sig--vis-feed .is-ask .vf__slide, :root .sig--vis-feed.is-ask .vf__slide { opacity: 1; transform: none; transition-delay: .3s; }
:root .sig--vis-feed .vf__slide i, :root .sig--vis-feed.vf__slide i { position: relative; display: block; height: 6px; border-radius: 3px; background: #e6dcef; }
:root .sig--vis-feed .vf__slide b, :root .sig--vis-feed.vf__slide b { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; border-radius: 3px; background: linear-gradient(90deg, #c06bff, #a100ff); transition: width 1s var(--ease-out); }
:root .sig--vis-feed .vf__slide svg, :root .sig--vis-feed.vf__slide svg { position: absolute; left: 6%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; fill: #a100ff; stroke: #a100ff; transition: left 1s var(--ease-out), transform 1s var(--ease-out); }
:root .sig--vis-feed .is-slide .vf__slide b, :root .sig--vis-feed.is-slide .vf__slide b { width: 86%; }
:root .sig--vis-feed .is-slide .vf__slide svg, :root .sig--vis-feed.is-slide .vf__slide svg { left: 86%; transform: scale(1.5); }
:root .sig--vis-feed .vf__fx, :root .sig--vis-feed.vf__fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
:root .sig--vis-feed .vf__h, :root .sig--vis-feed.vf__h { position: absolute; width: 20px; height: 20px; fill: #c06bff; stroke: none; filter: drop-shadow(0 4px 8px rgba(161, 0, 255, .5)); }
:root .sig--vis-feed .is-out .vf__scr > *, :root .sig--vis-feed.is-out .vf__scr > * { opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce){:root .sig--vis-feed .vf__audio span, :root .sig--vis-feed.vf__audio span, :root .sig--vis-feed .vf__full img, :root .sig--vis-feed.vf__full img, :root .sig--vis-feed .vf__segs b, :root .sig--vis-feed.vf__segs b, :root .sig--vis-feed .vf__big, :root .sig--vis-feed.vf__big { animation: none !important; }
 }