.vn{--note:#5b2cf2;--note-tint:#efe6ff;--note-line:rgba(91,44,242,0.16);--ease:cubic-bezier(0.23,1,0.32,1);--spring:cubic-bezier(0.34,1.56,0.64,1)}.rc .vn{--note:#e8798f;--note-tint:#fad6de;--note-line:rgba(232,121,143,0.22)}.vn-msg-who{color:var(--ink-soft,#45454c);font-size:14px}.vn-msg-who b{color:var(--ink,#141416)}.vn-note{--round:min(400px,82vw);--w:min(360px,86vw);display:grid;place-items:center}.vn-note[data-size=md]{--round:min(280px,72vw);--w:min(320px,84vw)}.vn-frame{position:relative;width:var(--round);height:var(--round);border-radius:50%;background:#1f1a1a;transition:width .7s var(--ease),height .7s var(--ease),border-radius .7s var(--ease)}.vn-note[data-open] .vn-frame{width:var(--w);height:calc(var(--w) * 16 / 9);border-radius:30px}.vn-frame video{width:100%;height:100%;object-fit:cover;object-position:50% 24%;cursor:pointer}.vn-frame video,.vn-frame:after{position:absolute;inset:0;border-radius:inherit}.vn-frame:after{content:"";background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 34%);opacity:0;pointer-events:none;transition:opacity .5s}.vn-note[data-open] .vn-frame:after{opacity:1}.vn-ring{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);rotate:-90deg;pointer-events:none;transition:opacity .3s}.vn-ring circle{fill:none;stroke:var(--note-line);stroke-width:1.6}.vn-ring .vn-ring-on{stroke:var(--note);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1}.vn-note[data-open] .vn-ring{opacity:0}.vn-watch{position:absolute;bottom:-18px;left:50%;display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;translate:-50% 0;border-radius:999px;background:var(--note);box-shadow:0 0 0 5px #fff;color:#fff;font-family:var(--display);font-size:14px;font-weight:700;white-space:nowrap;transition:box-shadow .25s,scale .2s}.rc .vn-watch{box-shadow:0 0 0 5px #fffaf6;color:#141416}.vn-watch:hover{box-shadow:0 0 0 5px #fff,0 0 0 10px color-mix(in oklab,var(--note) 20%,transparent)}.vn-watch:active{scale:.97}.vn-watch small{font-family:Onest,system-ui,sans-serif;font-size:13px;font-weight:600;opacity:.72}.vn-watch-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--note)}.vn-watch-dot svg{translate:1px 0;fill:currentColor}.vn-bars,.vn-chapter,.vn-controls,.vn-cue{position:absolute;z-index:1;opacity:0;pointer-events:none;transition:opacity .4s 0s}.vn-note[data-open] :is(.vn-bars,.vn-chapter,.vn-cue,.vn-controls){opacity:1;pointer-events:auto;transition-delay:.45s}.vn-bars{top:8px;right:12px;left:12px;display:flex;gap:4px}.vn-bar{flex-basis:0;padding:6px 0}.vn-bar i{position:relative;display:block;height:4px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.35)}.vn-bar i:after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--fill,0));transform-origin:left}.vn-chapter{top:26px;right:16px;left:16px;display:flex;justify-content:space-between;color:#fff;font-size:13px;font-weight:700;pointer-events:none!important}.vn-chapter span{opacity:.75;font-variant-numeric:tabular-nums}.vn-cue{right:18px;bottom:92px;left:18px;text-align:center;pointer-events:none!important}.vn-cue span{display:inline;padding:3px 8px;border-radius:8px;background:rgba(20,20,22,.66);box-decoration-break:clone;-webkit-box-decoration-break:clone;color:#fff;font-size:15px;font-weight:600;line-height:1.75;animation:vn-cue-in .35s var(--ease) both}@keyframes vn-cue-in{0%{opacity:0}}.vn-controls{bottom:22px;left:50%;display:flex;gap:10px;translate:-50% 0}.vn-controls button{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(10px);transition:background-color .2s,scale .2s}.vn-controls button:first-child{background:#fff;color:#141416}.vn-controls button:first-child svg[stroke]{fill:currentColor;translate:1px 0}.vn-controls button:hover{background:rgba(255,255,255,.32)}.vn-controls button:first-child:hover{background:#fff;scale:1.05}.vn-controls button:active{scale:.95}.vn-pinned-wrap{display:flex;flex-direction:column;gap:22px;margin:28px 0 8px}.vn-pin{display:flex;align-items:center;gap:14px;width:100%;padding:10px 16px 10px 10px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--note-line);color:var(--note);text-align:left;transition:box-shadow .25s}.vn-pin:hover{box-shadow:inset 0 0 0 2px var(--note)}.vn-pin-thumb{flex:none;width:44px;height:44px;border-radius:50%;background-position:50% 22%;background-size:cover;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--note)}.vn-pin-text{display:flex;flex:1;flex-direction:column;min-width:0;color:#141416;font-size:14px}.vn-pin-text b{color:#b84a62;font-size:13px}.vn-pin-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vn-pinned{display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding:12px;position:relative;isolation:isolate;border-radius:28px}.vn-pinned-flash{position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background:color-mix(in oklab,var(--note-tint) 70%,transparent)}.vn-pinned-flash[data-on]{animation:vn-flash 2.4s var(--ease)}@keyframes vn-flash{0%,60%{opacity:1}}.vn-pinned .vn-note{margin:4px 14px 22px 0}.vn-pinned-cap{color:var(--soft,#6b605d);font-size:13px}@media (prefers-reduced-motion:reduce){.vn-frame{transition:none}}