.gintro{position:relative;isolation:isolate;overflow:clip}
.gintro::before,.gintro::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.gintro::before{width:200px;height:200px;left:2%;top:4px;background:#FDBF2B;opacity:.16}
.gintro::after{width:150px;height:150px;right:3%;top:300px;background:#FC7E22;opacity:.09}


.act:not(.rv),.gcard,.qchip{transition:transform .25s cubic-bezier(.22,.8,.3,1),box-shadow .25s,border-color .25s,background-color .2s,color .2s}
@media (hover:hover){
  .act:not([disabled]):hover{transform:translateY(-3px);box-shadow:0 5px 0 #FC7E22}
  .gcard:hover{transform:translateY(-3px);box-shadow:0 6px 0 #FDBF2B}
  .qchip:hover{border-color:#FDBF2B;box-shadow:0 3px 0 #FDBF2B}
}
.act:active,.qchip:active{transform:scale(.97)}
.act[disabled]:active{transform:none}




.c-n{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit}
.c-n>span{display:inline-block}


.gbox{overflow-x:clip;overflow-clip-margin:6px}

@media (prefers-reduced-motion:no-preference){
  .gintro::before{animation:b-drift1 16s ease-in-out infinite alternate}
  .gintro::after{animation:b-drift2 20s ease-in-out infinite alternate}
  .g-ph .ph-lg{animation:b-breathe 6s ease-in-out infinite;transform-origin:50% 60%}
}
@keyframes b-drift1{to{transform:translate(46px,30px) scale(1.12)}}
@keyframes b-drift2{to{transform:translate(-40px,-26px) scale(.9)}}
@keyframes b-breathe{50%{transform:translateY(-4px) scale(1.035)}}
@keyframes b-bob{50%{transform:translateY(-3px) rotate(-4deg)}}

@media (prefers-reduced-motion:reduce){
  .act,.gcard,.qchip{transition:none}
  .act:hover,.act:active{transform:rotate(var(--r,0deg))}
  .gcard:hover,.qchip:active{transform:none}
}