.cm-board{--cm-power: 1;--cm-sgn: 1;--cm-dur: .52s;--cm-d: 0ms;--cm-gap: 8px;--cm-h: 74px;display:grid;grid-template-columns:repeat(var(--cm-cols, 5),minmax(0,1fr));gap:var(--cm-gap)}.cm-tile{position:relative;height:var(--cm-h);min-width:0;perspective:calc(420px / var(--cm-power))}.cm-stack{position:absolute;inset:0;transform-style:preserve-3d}.cm-face{position:absolute;top:0;left:0;right:0;height:var(--cm-h);backface-visibility:hidden}.cm-face--incoming{opacity:0;pointer-events:none}@keyframes cmCubeSpin{0%{transform:translateZ(calc(var(--cm-h) / -2)) rotateX(0)}to{transform:translateZ(calc(var(--cm-h) / -2)) rotateX(calc(-90deg * var(--cm-sgn)))}}@keyframes cmFlipOut{to{transform:rotateX(calc(-90deg * var(--cm-sgn)));opacity:.55}}@keyframes cmFlipIn{0%{transform:rotateX(calc(90deg * var(--cm-sgn)));opacity:.55}to{transform:rotateX(0);opacity:1}}@keyframes cmTurnOut{to{transform:rotateY(calc(-92deg * var(--cm-sgn))) translateZ(6px);opacity:.5}}@keyframes cmTurnIn{0%{transform:rotateY(calc(92deg * var(--cm-sgn))) translateZ(6px);opacity:.5}to{transform:rotateY(0) translateZ(0);opacity:1}}@keyframes cmRollOut{to{transform:translateY(calc(-58% * var(--cm-sgn) * var(--cm-power))) rotateX(calc(38deg * var(--cm-sgn) * var(--cm-power)));opacity:0}}@keyframes cmRollIn{0%{transform:translateY(calc(58% * var(--cm-sgn) * var(--cm-power))) rotateX(calc(-38deg * var(--cm-sgn) * var(--cm-power)));opacity:0}to{transform:translateY(0) rotateX(0);opacity:1}}@keyframes cmSlideOut{to{transform:translate(calc(max(100%,108% * var(--cm-power)) * -1 * var(--cm-sgn)));opacity:.15}}@keyframes cmSlideIn{0%{transform:translate(calc(max(100%,108% * var(--cm-power)) * var(--cm-sgn)));opacity:.15}to{transform:translate(0);opacity:1}}@keyframes cmBlurOut{to{transform:scale(calc(1 + .16 * var(--cm-power)));filter:blur(calc(8px * var(--cm-power)));opacity:0}}@keyframes cmBlurIn{0%{transform:scale(calc(1 - .14 * var(--cm-power)));filter:blur(calc(8px * var(--cm-power)));opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}@keyframes cmIrisOut{to{transform:scale(calc(1 - .06 * var(--cm-power)));opacity:.35}}@keyframes cmIrisIn{0%{clip-path:circle(0% at 50% 35%);opacity:1}to{clip-path:circle(135% at 50% 35%);opacity:1}}@keyframes cmDeckOut{to{transform:translateY(calc(52% * var(--cm-power))) scale(calc(1 - .12 * var(--cm-power))) rotate(calc(4deg * var(--cm-sgn) * var(--cm-power)));opacity:0}}@keyframes cmDeckIn{0%{transform:translateY(calc(-10% * var(--cm-power))) scale(calc(1 - .16 * var(--cm-power)));opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}@keyframes cmSpinOut{to{transform:rotate(calc(150deg * var(--cm-sgn) * var(--cm-power))) scale(calc(1 - .75 * var(--cm-power)));opacity:0}}@keyframes cmSpinIn{0%{transform:rotate(calc(-150deg * var(--cm-sgn) * var(--cm-power))) scale(calc(1 - .75 * var(--cm-power)));opacity:0}to{transform:rotate(0) scale(1);opacity:1}}@keyframes cmWipeOut{to{opacity:.25}}@keyframes cmWipeIn{0%{clip-path:inset(0 100% 0 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}@keyframes cmPopOut{to{transform:scale(calc(1 - .58 * var(--cm-power)));opacity:0}}@keyframes cmPopIn{0%{transform:scale(calc(1 - .58 * var(--cm-power)));opacity:0}62%{transform:scale(calc(1 + .1 * var(--cm-power)));opacity:1}to{transform:scale(1);opacity:1}}@keyframes cmFoldOut{to{transform:perspective(300px) rotateX(calc(min(84deg,58deg * var(--cm-power)) * var(--cm-sgn))) scaleY(.3);opacity:0}}@keyframes cmFoldIn{0%{transform:perspective(300px) rotateX(calc(min(84deg,58deg * var(--cm-power)) * -1 * var(--cm-sgn))) scaleY(.3);opacity:0}to{transform:perspective(300px) rotateX(0) scaleY(1);opacity:1}}.cm-board[data-cm-transition=cube].is-cm-anim .cm-stack{animation:cmCubeSpin var(--cm-dur) cubic-bezier(.72,0,.24,1) var(--cm-d) both}.cm-board[data-cm-transition=cube].is-cm-anim .cm-face--current{transform:translateZ(calc(var(--cm-h) / 2))}.cm-board[data-cm-transition=cube].is-cm-anim .cm-face--incoming{transform:rotateX(calc(90deg * var(--cm-sgn))) translateZ(calc(var(--cm-h) / 2));opacity:1}.cm-board[data-cm-transition=flip].is-cm-anim .cm-face--current{animation:cmFlipOut calc(var(--cm-dur) / 2) cubic-bezier(.5,0,.85,.3) var(--cm-d) both}.cm-board[data-cm-transition=flip].is-cm-anim .cm-face--incoming{animation:cmFlipIn calc(var(--cm-dur) / 2) cubic-bezier(.15,.7,.4,1) calc(var(--cm-d) + var(--cm-dur) / 2) both}.cm-board[data-cm-transition=turn].is-cm-anim .cm-face--current{animation:cmTurnOut calc(var(--cm-dur) / 2) cubic-bezier(.45,0,.9,.4) var(--cm-d) both}.cm-board[data-cm-transition=turn].is-cm-anim .cm-face--incoming{animation:cmTurnIn calc(var(--cm-dur) / 2) cubic-bezier(.1,.65,.35,1) calc(var(--cm-d) + var(--cm-dur) / 2) both}.cm-board[data-cm-transition=roll].is-cm-anim .cm-face--current{animation:cmRollOut var(--cm-dur) cubic-bezier(.4,0,.2,1) var(--cm-d) both}.cm-board[data-cm-transition=roll].is-cm-anim .cm-face--incoming{animation:cmRollIn var(--cm-dur) cubic-bezier(.25,.9,.3,1) var(--cm-d) both}.cm-board[data-cm-transition=slide] .cm-tile{overflow:hidden}.cm-board[data-cm-transition=slide].is-cm-anim .cm-face--current{animation:cmSlideOut var(--cm-dur) cubic-bezier(.5,0,.2,1) var(--cm-d) both}.cm-board[data-cm-transition=slide].is-cm-anim .cm-face--incoming{animation:cmSlideIn var(--cm-dur) cubic-bezier(.5,0,.2,1) var(--cm-d) both}.cm-board[data-cm-transition=blur].is-cm-anim .cm-face--current{animation:cmBlurOut var(--cm-dur) cubic-bezier(.4,0,.3,1) var(--cm-d) both}.cm-board[data-cm-transition=blur].is-cm-anim .cm-face--incoming{animation:cmBlurIn var(--cm-dur) cubic-bezier(.2,.6,.2,1) var(--cm-d) both}.cm-board[data-cm-transition=iris].is-cm-anim .cm-face--current{animation:cmIrisOut var(--cm-dur) cubic-bezier(.4,0,.6,1) var(--cm-d) both}.cm-board[data-cm-transition=iris].is-cm-anim .cm-face--incoming{animation:cmIrisIn var(--cm-dur) cubic-bezier(.3,0,.15,1) var(--cm-d) both}.cm-board[data-cm-transition=deck] .cm-face--current{z-index:2}.cm-board[data-cm-transition=deck] .cm-face--incoming{z-index:1}.cm-board[data-cm-transition=deck].is-cm-anim .cm-face--current{animation:cmDeckOut var(--cm-dur) cubic-bezier(.55,0,.3,1) var(--cm-d) both}.cm-board[data-cm-transition=deck].is-cm-anim .cm-face--incoming{animation:cmDeckIn var(--cm-dur) cubic-bezier(.2,.7,.25,1) var(--cm-d) both}.cm-board[data-cm-transition=spin].is-cm-anim .cm-face--current{animation:cmSpinOut var(--cm-dur) cubic-bezier(.5,0,.35,1) var(--cm-d) both}.cm-board[data-cm-transition=spin].is-cm-anim .cm-face--incoming{animation:cmSpinIn var(--cm-dur) cubic-bezier(.25,.8,.3,1) var(--cm-d) both}.cm-board[data-cm-transition=wipe].is-cm-anim .cm-face--current{animation:cmWipeOut var(--cm-dur) linear var(--cm-d) both}.cm-board[data-cm-transition=wipe].is-cm-anim .cm-face--incoming{animation:cmWipeIn var(--cm-dur) cubic-bezier(.65,0,.2,1) var(--cm-d) both}.cm-board[data-cm-transition=pop].is-cm-anim .cm-face--current{animation:cmPopOut calc(var(--cm-dur) / 2) cubic-bezier(.5,0,.9,.4) var(--cm-d) both}.cm-board[data-cm-transition=pop].is-cm-anim .cm-face--incoming{animation:cmPopIn calc(var(--cm-dur) / 2) cubic-bezier(.3,1.1,.4,1) calc(var(--cm-d) + var(--cm-dur) / 2) both}.cm-board[data-cm-transition=fold].is-cm-anim .cm-face--current{animation:cmFoldOut calc(var(--cm-dur) / 2) cubic-bezier(.55,0,.9,.35) var(--cm-d) both}.cm-board[data-cm-transition=fold].is-cm-anim .cm-face--incoming{animation:cmFoldIn calc(var(--cm-dur) / 2) cubic-bezier(.1,.7,.35,1) calc(var(--cm-d) + var(--cm-dur) / 2) both}@media(prefers-reduced-motion:reduce){.cm-board.is-cm-anim .cm-stack,.cm-board.is-cm-anim .cm-face{animation:none!important;transform:none!important}.cm-board.is-cm-anim .cm-face--incoming{opacity:0!important}}