.xp-figure{margin:0}
.xp-credit{margin:0;padding:10px 0 0;font-size:14px;line-height:1.5;opacity:.8}
.xp-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.xp{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-user-select:none;user-select:none;outline:none;touch-action:manipulation}
.xp:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.85) inset}
.xp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.xp.xp-idle{cursor:none}

.xp-big{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#111;box-shadow:0 4px 24px rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s;z-index:3}
.xp-big:hover{background:#fff;transform:scale(1.06)}
.xp-big svg{width:30px;height:30px;margin-left:4px}
.xp.xp-started .xp-big{display:none}

.xp-cues{position:absolute;left:5%;right:5%;bottom:64px;text-align:center;pointer-events:none;z-index:2;transition:bottom .2s}
.xp.xp-idle .xp-cues{bottom:22px}
.xp-cues span{display:inline;padding:.12em .45em;background:rgba(8,8,8,.78);border-radius:3px;font-size:clamp(13px,2.1vw,22px);line-height:1.55;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:pre-line}
.xp:fullscreen .xp-cues span{font-size:clamp(18px,2.4vw,34px)}

.xp-chrome{position:absolute;left:0;right:0;bottom:0;padding:40px 12px 6px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.72));z-index:4;transition:opacity .25s}
.xp.xp-idle .xp-chrome{opacity:0;pointer-events:none}

.xp-progress{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.xp-rail{position:relative;width:100%;height:3px;background:rgba(255,255,255,.28);border-radius:2px;transition:height .12s}
.xp-progress:hover .xp-rail,.xp-progress.xp-drag .xp-rail,.xp-progress:focus-visible .xp-rail{height:5px}
.xp-buffered,.xp-played{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.xp-buffered{background:rgba(255,255,255,.42)}
.xp-played{background:#fff}
.xp-thumb{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s}
.xp-progress:hover .xp-thumb,.xp-progress.xp-drag .xp-thumb,.xp-progress:focus-visible .xp-thumb{transform:scale(1)}
.xp-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(0,0,0,.75)}
.xp-tip{position:absolute;bottom:22px;transform:translateX(-50%);padding:4px 8px;border-radius:4px;background:rgba(20,20,20,.92);font-size:12px;line-height:1.35;white-space:nowrap;text-align:center;pointer-events:none;opacity:0;transition:opacity .1s}
.xp-tip b{display:block;font-weight:500;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.xp-tip span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.85}
.xp-progress:hover .xp-tip,.xp-progress.xp-drag .xp-tip{opacity:1}

.xp-bar{display:flex;align-items:center;gap:2px;height:40px}
.xp-spacer{flex:1}
.xp-btn{position:relative;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:6px;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;opacity:.92}
.xp-btn:hover{opacity:1;background:rgba(255,255,255,.12)}
.xp-btn:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.xp-btn svg{width:22px;height:22px;fill:currentColor}
.xp-btn[aria-pressed="true"]::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:2px;border-radius:1px;background:#fff}
.xp-speed{width:auto;min-width:36px;padding:0 6px;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.xp-time{margin-left:8px;font:13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.95}
.xp-vol{display:flex;align-items:center}
.xp-vol input{width:0;opacity:0;margin:0;accent-color:#fff;cursor:pointer;transition:width .15s,opacity .15s,margin .15s}
.xp-vol:hover input,.xp-vol:focus-within input{width:72px;opacity:1;margin:0 6px 0 2px}

.xp-transcript{margin-top:10px;border:1px solid rgba(127,127,127,.3);border-radius:8px;max-height:280px;overflow:auto;padding:6px 0;font-size:15px;line-height:1.5;-webkit-overflow-scrolling:touch}
.xp-transcript[hidden]{display:none}
.xp-transcript button{display:grid;grid-template-columns:52px 1fr;gap:8px;width:100%;padding:6px 14px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.xp-transcript button:hover{background:rgba(127,127,127,.12)}
.xp-transcript button.xp-on{background:rgba(127,127,127,.2)}
.xp-transcript time{font:12px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.7}
.xp-transcript h4{margin:10px 14px 4px;font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;opacity:.75}

@media (max-width:560px){
  .xp{border-radius:0}
  .xp-chrome{padding:28px 4px 2px}
  .xp-skip,.xp-speed,.xp-vol input{display:none}
  .xp-time{margin-left:2px;font-size:12px}
  .xp-btn{width:34px;height:34px}
  .xp-btn svg{width:20px;height:20px}
  .xp-cues{bottom:54px}
  .xp-big{width:52px;height:52px;margin:-26px 0 0 -26px}
  .xp-big svg{width:22px;height:22px}
}
@media (hover:none){.xp-vol input{display:none}}
@media (prefers-reduced-motion:reduce){.xp *,.xp{transition:none!important}}
.xp-yt{margin-left:4px;font-size:12px;opacity:.75}