/* Help hub scenes (tools/help-scenes.js). Loaded only on the Help home and category hubs.
   The scene library speaks in short colour names; they are mapped here to the Help tokens (help.css :root), so the scenes follow any theme. */
.hs{--fg:var(--text);--muted:var(--text-3);--accent-fg:var(--accent-ink);
  --line:color-mix(in srgb,var(--text) 17%,var(--surface));--sel:color-mix(in srgb,var(--accent) 16%,var(--surface));--body:var(--font);
  display:block;position:relative;overflow:hidden;aspect-ratio:8/5;background:var(--surface-2);line-height:0;direction:ltr}
.hs .scn{display:block;width:100%;height:100%}
.hs img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
/* motion: base style of an animated group is its final frame, the keyframes lead from a start frame to it */
.hs .a{transform-box:fill-box;transform-origin:var(--o,center);animation-duration:var(--t,3.4s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-delay:var(--dl,0s)}
.hs:not(.play) .a{animation-play-state:paused}
@keyframes hs-mv{0%,8%{transform:translate(var(--fx,0px),var(--fy,0px))}42%,88%{transform:none}100%{transform:translate(var(--fx,0px),var(--fy,0px))}}
@keyframes hs-sc{0%,8%{transform:scale(var(--fsx,1),var(--fsy,1))}42%,88%{transform:none}100%{transform:scale(var(--fsx,1),var(--fsy,1))}}
@keyframes hs-fd{0%,8%{opacity:0}35%,88%{opacity:1}100%{opacity:0}}
@keyframes hs-fd2{0%,40%{opacity:0}58%,88%{opacity:1}100%{opacity:0}}
@keyframes hs-fdo{0%,30%{opacity:1}40%,90%{opacity:0}100%{opacity:1}}
@keyframes hs-pop2{0%,42%{opacity:0;transform:scale(.7)}55%,88%{opacity:1;transform:none}100%{opacity:0;transform:scale(.7)}}
@keyframes hs-ck{0%,20%{transform:none}26%{transform:scale(.78)}34%,100%{transform:none}}
@keyframes hs-pl{0%,18%{opacity:0;transform:scale(.5)}30%{opacity:.9;transform:scale(1)}48%,100%{opacity:0;transform:scale(1.7)}}
@keyframes hs-bl{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes hs-sp{from{transform:rotate(0);animation-timing-function:linear}to{transform:rotate(360deg)}}
@keyframes hs-br{0%,100%{transform:scaleY(1)}50%{transform:scaleY(var(--m,.5))}}
@keyframes hs-st3{0%,20%{transform:translate(var(--a))}30%,52%{transform:translate(var(--b))}62%,88%{transform:none}100%{transform:translate(var(--a))}}
@keyframes hs-sx{0%,8%{transform:scaleX(0)}45%,88%{transform:none}100%{transform:scaleX(0)}}
@keyframes hs-cd{0%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}
@keyframes hs-cl{0%,8%{opacity:1;transform:none}18%,48%{opacity:0;transform:scale(.85)}62%,100%{opacity:1;transform:none}}
@keyframes hs-tt{0%,12%{opacity:0;transform:translateY(8px)}24%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px)}}
@keyframes hs-gh{0%,16%{opacity:0}28%,44%{opacity:1}56%,100%{opacity:0}}
@keyframes hs-spn{0%,30%{opacity:0}36%,48%{opacity:1}54%,100%{opacity:0}}
@keyframes hs-bn{0%{transform:translateY(0)}10%{transform:translateY(-14px)}20%{transform:none}30%{transform:translateY(-9px)}40%,100%{transform:none}}
@keyframes hs-l1{0%,24%{opacity:1}30%,94%{opacity:0}100%{opacity:1}}
@keyframes hs-l2{0%,28%{opacity:0}34%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes hs-l3{0%,62%{opacity:0}68%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes hs-nd{0%,8%{transform:rotate(-70deg)}45%,88%{transform:rotate(var(--r,38deg))}100%{transform:rotate(-70deg)}}
@media (prefers-reduced-motion:reduce){.hs .a{animation:none!important}}

/* slots: category-list thumbnail, category hero, home category card, learning-path card */
.alist a.has-th>.hs.al-th{width:132px;border-radius:6px;border:1px solid var(--line-2)}
.cat-hero-img.hs-fig{background:var(--surface-2)}
.cat-hero-img .hs{border-radius:0}
.cat-media .hs{border-radius:0}
.cat-media:has(.hs){background:var(--surface-2)}
.card>.hs.card-scene{margin:-20px -20px 10px;width:calc(100% + 40px);border-radius:10px 10px 0 0;border-bottom:1px solid var(--hair)}
@media (max-width:560px){.alist a.has-th>.hs.al-th{width:96px}}

@media (scripting:none){.hs.card-scene:empty{display:none}}