/* Video tutorials banner (Help home, category hubs, /help/videos). Real link, CSS-only motion, fixed height (no layout shift). */
@property --vb-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.vban{position:relative;margin:28px 0;overflow:hidden;transition:height .3s ease,margin .3s ease,opacity .25s ease}
.vban.is-closing{opacity:0;margin-top:0!important;margin-bottom:0!important}
.vban-dismissed .vban{display:none}
.vban-x{position:absolute;top:6px;inset-inline-end:6px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(8,9,10,.55);color:#e8eaed;cursor:pointer;transition:background .15s,color .15s}
.vban-x:hover{background:rgba(255,255,255,.16);color:#fff}
.vban-x:focus-visible{outline:3px solid #fff;outline-offset:1px;background:rgba(255,255,255,.2)}
.vban-a{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:24px;min-height:190px;padding:26px 30px;border:2px solid transparent;border-radius:20px;overflow:hidden;text-decoration:none;color:#f4f5f6;
  background:linear-gradient(#0b0d10,#0b0d10) padding-box,conic-gradient(from var(--vb-ang),#3df29a,#5ab0ff,#c78bff,#f2b84b,#3df29a) border-box;animation:vb-spin 7s linear infinite}
.vban-a::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 12% 0%,rgba(61,242,154,.18),transparent 60%),radial-gradient(50% 100% at 100% 100%,rgba(90,176,255,.16),transparent 60%);animation:vb-glow 5s ease-in-out infinite alternate;pointer-events:none}
.vban-copy{position:relative;display:grid;gap:8px;z-index:1}
.vban-kicker{font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#3df29a}
.vban-h{font:700 clamp(24px,3vw,34px)/1.15 var(--font,inherit);letter-spacing:-.01em;color:#fff}
.vban-p{font-size:16px;line-height:1.5;color:#c4c9d0;max-width:46ch}
.vban-btn{justify-self:start;margin-top:6px;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:12px;background:#3df29a;color:#06130d;font:700 15px var(--font,inherit)}
.vban-a:hover .vban-btn,.vban-a:focus-visible .vban-btn{background:#64f6b0}
.vban-a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vban-strip{position:relative;display:block;height:120px;overflow:hidden;border-radius:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vban-track{position:absolute;left:0;top:0;display:flex;gap:12px;width:max-content;animation:vb-slide 60s linear infinite}
.vban-track img{display:block;width:213px;height:120px;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.12)}
.vban-play{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(8,9,10,.78);border:2px solid #fff;display:grid;place-items:center;animation:vb-pulse 2.2s ease-out infinite}
.vban-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
@keyframes vb-spin{to{--vb-ang:360deg}}
@keyframes vb-glow{from{opacity:.55}to{opacity:1}}
@keyframes vb-slide{to{transform:translateX(-50%)}}
@keyframes vb-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
@media (max-width:760px){
  .vban-a{grid-template-columns:minmax(0,1fr);min-height:300px;padding:22px 20px;gap:16px}
  .vban-strip{height:96px}
  .vban-track img{width:171px;height:96px}
}
@media (prefers-reduced-motion:reduce){
  .vban,.vban-x{transition:none}
  .vban-a,.vban-a::before,.vban-track,.vban-play{animation:none}
  .vban-track{width:auto;flex-wrap:nowrap}
}

/* 2026-10-21 slow elastic entrance, replays on every re-entry (hf-bottom.js toggles vb-pre / vb-in; no effect without JS): tiny + low -> grows with overshoot -> floats and shakes, softly damped over ~4.8s */
.vban.vb-pre{opacity:0;transform:translateY(70px) scale(.15)}
.vban.vb-in{animation:vb-rubber 4.8s cubic-bezier(.25,.6,.3,1) both;transform-origin:50% 60%}
.vban.vb-in .vban-a::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);transform:translateX(-120%);animation:vb-sweep 2.4s ease-out 1s both}
@media (max-width:899px),(hover:none),(pointer:coarse){.vban.vb-pre{opacity:1;transform:none}.vban.vb-in{animation:none}.vban.vb-in .vban-a::after{animation:none;display:none}}
@keyframes vb-rubber{
0%{opacity:0;transform:translateY(70px) scale(.15)}
10%{opacity:1}
20%{transform:translateY(-16px) scale(1.07) rotate(-1deg)}
30%{transform:translateY(8px) scale(.97) rotate(.9deg)}
40%{transform:translateY(-8px) scale(1.03) rotate(-.7deg)}
50%{transform:translateY(5px) scale(.985) rotate(.55deg)}
60%{transform:translateY(-4px) scale(1.012) rotate(-.4deg)}
70%{transform:translateY(3px) scale(.995) rotate(.28deg)}
80%{transform:translateY(-2px) scale(1.004) rotate(-.15deg)}
90%{transform:translateY(1px) scale(.999) rotate(.06deg)}
100%{opacity:1;transform:none}}
@keyframes vb-sweep{to{transform:translateX(120%)}}
/* 3D mouse tilt (same feel as the bento tiles: perspective + rotateX/Y from pointer position, highlight follows) */
.vban.vb-tilt{overflow:visible}
.vban.vb-tilt .vban-a{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.vban.vb-tilt .vban-a::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.11),transparent 70%),radial-gradient(60% 120% at 12% 0%,rgba(61,242,154,.18),transparent 60%),radial-gradient(50% 100% at 100% 100%,rgba(90,176,255,.16),transparent 60%)}
@media (prefers-reduced-motion:reduce){.vban.vb-pre{opacity:1;transform:none}.vban.vb-in,.vban.vb-in .vban-a::after{animation:none}.vban.vb-tilt .vban-a{transform:none}}

/* In-article video card ([Video: key]) */
.vcard{margin:24px 0}
.vcard-a{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#0b0d10;color:#f4f5f6;text-decoration:none}
.vcard-a:hover{border-color:#3df29a}
.vcard-a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vcard-img{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.vcard-img img{display:block;width:100%;height:100%;object-fit:cover}
.vcard-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(8,9,10,.78);border:2px solid #fff;display:grid;place-items:center}
.vcard-play svg{width:24px;height:24px;margin-left:3px;fill:#fff}
.vcard-copy{display:grid;gap:8px}
.vcard-kicker{font:600 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#3df29a}
.vcard-h{font:700 19px/1.25 var(--font,inherit);color:#fff}
.vcard-p{font-size:15px;line-height:1.5;color:#c4c9d0}
.vcard-btn{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:#3df29a;color:#06130d;font:700 15px var(--font,inherit)}
@media (max-width:640px){.vcard-a{grid-template-columns:minmax(0,1fr)}}