:root{--ease:cubic-bezier(.25,1,.5,1)}
.rod{background:linear-gradient(#FBFBF9 0%,#E6E5E1 40%,#B5B4AF 78%,#8B8A86 100%);box-shadow:0 8px 16px -8px rgb(21 21 23/.5)}
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* Bars stepper: static list by default; main.js adds .swing to pin the stage and crossfade one skill per scroll step */
.sw-app{display:none}
.swing{height:calc(5 * 65svh + 100svh)}
.swing .sw-stage{position:sticky;top:72px;height:calc(100svh - 72px);display:flex;align-items:center;padding-block:1.5rem;overflow:hidden}
.swing .sw-grid{gap:1.25rem}
.swing .sw-app{display:block}
.swing .sw-thumb,.swing .sw-intro{display:none}
.swing .sw-list{grid-template-columns:1fr;gap:0}
.swing [data-phase]{display:none;grid-template-columns:2.75rem 1fr;column-gap:.5rem;align-items:baseline}
.swing [data-phase].on{display:grid;animation:sw-in .5s var(--ease)}
.swing .sw-d{grid-column:2}
@keyframes sw-in{from{opacity:0}}
@media (min-width:1024px){
  .swing .sw-grid{grid-template-columns:5fr 7fr;grid-template-rows:1fr auto auto 1fr;column-gap:4rem;row-gap:2.5rem}
  .swing .sw-head{grid-column:1;grid-row:2}
  .swing .sw-list{grid-column:1;grid-row:3;row-gap:.75rem}
  .swing .sw-app{grid-column:2;grid-row:1/5;align-self:center}
  .swing [data-phase]{display:grid;opacity:.35;transition:opacity .4s var(--ease)}
  .swing [data-phase].on{opacity:1}
  .swing [data-phase]:not(.on) .sw-d{display:none}
}
.app{position:relative;aspect-ratio:4/3;width:min(100%,calc((100svh - 72px - 19rem) * 4 / 3));margin-inline:auto;overflow:hidden;border-radius:4px;background:#151517}
@media (min-width:1024px){.app{width:min(100%,calc((100svh - 72px - 5rem) * 4 / 3))}}
.app .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.app .frame img.on{opacity:1}

@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}