/* resellx · directional light and compact motion */
.lab .center{min-width:0}
@media(hover:hover) and (pointer:fine){
  .card,.viewer,.game{transform:perspective(900px) rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));transform-style:preserve-3d;backface-visibility:hidden}
  .card.depth-active,.viewer.depth-active,.game.depth-active{will-change:transform}
  .card::after,.viewer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),rgba(255,230,205,.12),transparent 64%);transition:opacity .35s}
  .card.depth-active::after,.viewer.depth-active::after{opacity:1}
  .card .vmedia{transition:box-shadow .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
  .card:hover .vmedia{transform:translateY(-5px);box-shadow:0 28px 50px -24px #000,0 0 0 1px rgba(232,141,78,.18)}
}
.modes button,.tiles button,.co-curs button,.co-methods button{transition:background .3s,border-color .3s,color .3s,box-shadow .35s}
.co-methods button[aria-checked=true]{box-shadow:inset 0 0 0 1px rgba(244,167,110,.16),0 6px 20px -12px rgba(226,114,48,.35)}
.co-pane{animation:depthPane .42s cubic-bezier(.16,1,.3,1)}
.co-pane .co-step,.co-pane .co-go,.co-pane .co-muted{animation:depthPane .42s cubic-bezier(.16,1,.3,1) both}
.co-pane .co-step:nth-child(2){animation-delay:35ms}.co-pane .co-step:nth-child(3){animation-delay:70ms}
.co-pane .co-go{animation-delay:85ms}
.pillbtn,.go,.go-alt,.cbtn{transition:scale .22s cubic-bezier(.2,.9,.2,1.3),transform .3s,background .25s,box-shadow .3s}
.pillbtn:active:not(:disabled),.go:active:not(:disabled),.cbtn:active:not(:disabled){scale:.96}
.pillbtn:focus-visible,.go:focus-visible{box-shadow:0 0 0 4px rgba(234,146,87,.22)}
.view{animation-duration:.55s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes depthPane{from{opacity:0;translate:0 10px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:1180px){.hero .side{gap:18px}}
@media(max-width:820px){.card,.viewer,.game{transform:none}.card::after,.viewer::after{display:none}}
body.still .card,body.still .viewer,body.still .game{transform:none!important}
body.still .card::after,body.still .viewer::after{display:none}
@media(prefers-reduced-motion:reduce){.card,.viewer,.game{transform:none!important}.co-pane,.co-pane *{animation:none!important}}