/* /help/videos and /help/videos/<key>: wide player, arrow bar, share row, carousel. Uses the Help variables. */
.vp,.vpage{max-width:none}
.vp h1,.vpage h1{margin:0 0 6px}
.vp .lede,.vpage .lede{max-width:64ch;color:var(--text-2);margin:0 0 18px}
.vp .vban{margin:16px 0 22px}
.vp-player .ytf{max-width:none;margin:0}
.vp-player .ytf-btn{border-radius:14px;border-color:var(--line)}
.vp-player .ytf figcaption{display:none}
.vp-player .ytf-play{width:84px;height:84px;margin:-42px 0 0 -42px}
.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0}
.vp-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);color:var(--text);font:600 15px var(--font);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.vp-arrow:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3)}
.vp-arrow:focus-visible,.vp-rb:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vp-arrow svg{flex:none}
.vp-count{font:600 13px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.vp-info{padding:14px 0 0}
.vp-info h2{margin:0 0 6px;font-size:clamp(24px,2.6vw,32px);line-height:1.2}
.vp-info h2 a{color:var(--text);text-decoration:none}.vp-info h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.vp-desc{margin:0;max-width:70ch;color:var(--text-2)}
.vp-row{display:flex;flex-wrap:nowrap;gap:10px;margin:16px 0 0;overflow-x:auto}
.vp-row .btn{flex:0 0 auto;white-space:nowrap}
.vshare{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0 0}
.vshare .btn{min-height:40px;padding:0 14px;font-size:14px}
.vshare-links{display:inline-flex;flex-wrap:wrap;gap:8px;margin-left:4px}
.vs-ico{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text-2);text-decoration:none;animation:vs-pop 7s ease-in-out infinite;transition:color .15s,border-color .15s,background .15s}
.vs-ico:nth-child(1){animation-delay:0s}.vs-ico:nth-child(2){animation-delay:1.75s}.vs-ico:nth-child(3){animation-delay:3.5s}.vs-ico:nth-child(4){animation-delay:5.25s}
.vs-ico:hover,.vs-ico:focus-visible{color:var(--accent);border-color:var(--accent);background:rgba(61,242,154,.08)}
.vs-ico:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vshare-links:hover .vs-ico,.vs-ico:focus-visible{animation-play-state:paused}
.vs-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes vs-pop{0%,16%,100%{transform:none;box-shadow:0 0 0 0 rgba(61,242,154,0)}3%{transform:translateY(-4px) rotate(-8deg);box-shadow:0 0 0 0 rgba(61,242,154,.55)}6%{transform:translateY(0) rotate(7deg)}9%{transform:translateY(-2px) rotate(-4deg);box-shadow:0 0 0 10px rgba(61,242,154,0)}12%{transform:none}}
@media (prefers-reduced-motion:reduce){.vs-ico{animation:none}}
.vshare-msg{min-width:7ch;font-size:14px;color:var(--accent)}
.vp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.vp-cols h2,.vp-cols h3{margin:0 0 8px;font-size:18px}
.vp-ul{margin:0;padding-left:18px;color:var(--text-2);display:grid;gap:4px}
.vp-ul a{color:var(--text);font-weight:600}
.vp-tr{margin:10px 0 0;color:var(--text-3);font-size:15px}
.vp-rail{margin-top:30px}
.vp-rail h2{margin:0 0 10px;font-size:20px}
.vp-rail-in{position:relative}
.vp-cards{list-style:none;margin:0;padding:2px 2px 8px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;overscroll-behavior-x:contain}
.vp-cards li{flex:0 0 240px;scroll-snap-align:start}
.vp-cards a{display:grid;gap:6px;padding:8px;border-radius:12px;text-decoration:none;color:var(--text-2);border:1px solid transparent}
.vp-cards a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.vp-cards a[aria-current="true"]{border-color:var(--accent);background:rgba(255,255,255,.05);color:var(--text)}
.vp-cards img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:var(--surface)}
.vp-cards b{font-size:15px;font-weight:600;line-height:1.3}
.vp-cards small{font-size:13px;line-height:1.35;color:var(--text-3)}
.vp-rb{position:absolute;top:calc(50% - 30px);left:-6px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(8,9,10,.88);color:var(--text);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.vp-rb.r{left:auto;right:-6px}
.vp-rb:hover{background:#15171b}
.vp-all{margin-top:36px;padding-top:20px;border-top:1px solid var(--line)}
.vp-all h2{margin:0 0 4px;font-size:20px}
.vp-all ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.vp-all li{max-width:90ch;color:var(--text-2);font-size:15px}
.vp-all li b{color:var(--text)}
.vpage h2{margin:26px 0 8px;font-size:22px}
.vpage .vp-cols h2{margin-top:0}
.vchap{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vchap a{display:flex;gap:14px;padding:6px 10px;border-radius:10px;text-decoration:none;color:var(--text-2)}
.vchap a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.vchap time{font:600 14px var(--mono);color:var(--accent);min-width:3.2em}
.vt{max-width:80ch}
.vt summary{cursor:pointer;font-weight:600;padding:6px 0}
.vt p{color:var(--text-2);margin:0 0 12px}
.vmore{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:80ch;color:var(--text-2)}
.vmore a{color:var(--text);font-weight:600}
.vguide{margin:20px 0 0}
@media (max-width:760px){
  .vp-cols{grid-template-columns:minmax(0,1fr)}
  .vp-arrow span{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vp-cards li{flex-basis:200px}
  .vp-rb{display:none}
  .vp-row{flex-wrap:wrap}
}