/* The video in the corner: a small preview card that plays right there. Picked 20 Oct from three versions (see NOTES.md). */
/* ---- shared: the floating player ---- */
.vp{--vp-w:min(400px,calc(100vw - 32px));position:fixed;right:16px;bottom:16px;z-index:60;width:var(--vp-w);border-radius:14px;background:var(--surface);
  box-shadow:0 0 0 1px rgb(var(--shadow)/.08),0 12px 32px -8px rgb(var(--shadow)/.22);overflow:hidden;
  transform-origin:100% 100%;transition:transform 240ms var(--ease),opacity 240ms var(--ease),visibility 0s}
.vp[data-state="hidden"]{transform:scale(.96) translateY(8px);opacity:0;visibility:hidden;pointer-events:none;transition:transform 180ms var(--ease),opacity 180ms var(--ease),visibility 0s 180ms}
.vp-frame{position:relative;aspect-ratio:16/9;background:#000}
.vp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-bar{display:flex;align-items:center;gap:6px;height:44px;padding:0 6px 0 12px}
.vp-title{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-title span{color:var(--muted);font-weight:400}
.vp-btn{position:relative;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background-color 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease)}
.vp-btn::after{content:"";position:absolute;inset:-6px}
.vp-btn svg{width:16px;height:16px}
.vp-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.vp-btn:hover{background:var(--sunken);color:var(--ink)}}

/* ---- 2. Thumbnail: a small preview card, plays in the corner ---- */
.vthumb{position:fixed;right:16px;bottom:16px;z-index:61;width:224px;border-radius:12px;overflow:hidden;background:var(--surface);text-align:left;
  box-shadow:0 0 0 1px rgb(var(--shadow)/.08),0 10px 28px -8px rgb(var(--shadow)/.24);transform-origin:100% 100%;
  transition:transform 200ms var(--ease),opacity 200ms var(--ease),visibility 0s}
.vthumb .shot{position:relative;display:block;aspect-ratio:16/9;background:#000}
.vthumb .shot img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.vthumb .shot i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgb(0 0 0/.62);display:grid;place-items:center;transition:transform 150ms var(--ease)}
.vthumb .shot i svg{width:14px;height:14px;color:#fff;margin-left:2px}
.vthumb .cap{display:block;padding:8px 10px 9px;font-size:12.5px;line-height:1.35;color:var(--ink);font-weight:500}
.vthumb .cap span{display:block;color:var(--muted);font-weight:400}
.vthumb:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.vthumb:hover .shot i{transform:scale(1.06)}}
.vthumb[data-state="hidden"]{opacity:0;transform:scale(.96);visibility:hidden;pointer-events:none;transition:transform 140ms var(--ease),opacity 140ms var(--ease),visibility 0s 140ms}
.vthumb-x{position:absolute;top:6px;right:6px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgb(0 0 0/.55);color:#fff;display:grid;place-items:center}
.vthumb-x::after{content:"";position:absolute;inset:-8px}
.vthumb-x svg{width:13px;height:13px}
.vtab{position:fixed;right:0;bottom:24px;z-index:61;height:40px;padding:0 12px 0 10px;border-radius:10px 0 0 10px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:500;
  display:flex;align-items:center;gap:6px;box-shadow:0 0 0 1px rgb(var(--shadow)/.08),0 6px 18px -6px rgb(var(--shadow)/.22)}
.vtab svg{width:13px;height:13px}
.vtab[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.vp,.vthumb{transition:none!important}}