/* 视频文字版的站内播放器（site/gen/pages_vplay.py 出标记，assets/vplay.js 管交互）。颜色只用 tokens.css 的变量。 */
/* 宽屏不铺满正文栏（960 宽会把正文整个挤出首屏）：最宽 768，即 432 高 */
.prose .vp,.vp{margin:2px 0 20px;max-width:768px;scroll-margin-top:72px}
.vp[hidden]{display:none}
.vp-box{position:relative;width:100%;aspect-ratio:16/9;background:var(--overlay);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
@supports not (aspect-ratio:16/9){.vp-box{height:0;padding-top:56.25%}}
.vp-frame,.vp-play{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vp-play{padding:0;margin:0;background:none;cursor:pointer;color:var(--on-overlay);font:inherit}
.vp-play .vp-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .2s,transform .4s}
.vp-noimg{display:grid;place-items:center;background:var(--surface-2);color:var(--muted);font-size:18px}
/* 封面压一层底部渐暗，按钮在正中 */
.vp-play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,16,24,.55));pointer-events:none}
.vp-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:inline-flex;align-items:center;gap:10px;
  padding:10px 20px 10px 12px;border-radius:999px;background:var(--overlay);color:var(--on-overlay);font-size:15px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,.35);transition:background .15s,transform .15s}
.vp-ico{width:34px;height:34px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.vp-ico::before{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--accent-ink)}
.vp-play:hover .vp-cover{filter:brightness(1.06);transform:scale(1.015)}
.vp-play:hover .vp-cta{transform:translate(-50%,-50%) scale(1.04)}
.vp-play:focus-visible{outline:3px solid var(--accent-2);outline-offset:-3px}
.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.vp-ext{color:var(--accent-2);font-weight:600;white-space:nowrap}

/* 小节标题旁的「▶ 00:22」 */
.vp-ts{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin:-2px 0 0 10px;height:24px;padding:0 9px 0 7px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--accent-2);cursor:pointer;
  font:600 12.5px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.vp-ts-i{width:0;height:0;border-style:solid;border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent currentColor}
.vp-ts:hover{border-color:var(--accent-2);background:var(--surface-2)}
.vp-ts:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px}
.vp-ts.on{background:var(--accent-2);border-color:var(--accent-2);color:var(--surface)}

@media (min-width:768px){
  .vp-cta{font-size:16px;padding:10px 22px 10px 11px;gap:11px}
  .vp-ico{width:40px;height:40px}
  .vp-ico::before{left:15px;top:12px;border-width:8px 0 8px 14px}
}
@media (max-width:600px){
  .prose .vp,.vp{margin:0 0 16px}
  .vp-cta{font-size:14px;padding:8px 16px 8px 9px;gap:8px}
  .vp-ico{width:28px;height:28px}
  .vp-ico::before{left:11px;top:8px;border-width:6px 0 6px 10px}
  .vp-ts{margin-left:6px;height:22px;font-size:12px;padding:0 8px 0 6px}
}
@media (prefers-reduced-motion:reduce){.vp-play .vp-cover,.vp-cta{transition:none}}
@media print{.vp,.vp-ts{display:none}}