.mc-roll{--mc-roll-bg: #111;--mc-roll-fg: #fff;--mc-roll-lip: #000;--mc-roll-bounce: cubic-bezier(.34, 1.56, .64, 1);position:relative;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:0;border-radius:999px;padding:14px 22px;background:var(--mc-roll-bg);color:var(--mc-roll-fg);font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}@supports (transition-timing-function: linear(0,1)){.mc-roll{--mc-roll-bounce: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1)}}.mc-roll:focus-visible{outline:2px solid currentColor;outline-offset:3px}.mc-roll__text{display:inline-flex;white-space:pre}.mc-roll__u{display:inline-block;height:1.2em;overflow:clip}.mc-roll__in{display:flex;flex-direction:column;will-change:transform}.mc-roll__in>span{display:block;height:1.2em}.mc-roll--tumble{background:none;padding:0;perspective:600px;overflow:visible}.mc-roll__size{visibility:hidden;padding:14px 22px;white-space:pre}.mc-roll__face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;white-space:pre;backface-visibility:hidden}.mc-roll__front{background:var(--mc-roll-bg);color:var(--mc-roll-fg);translate:0 0 0;rotate:1 0 0 0deg;opacity:1;transition:translate .85s var(--mc-roll-bounce),rotate .75s var(--mc-roll-bounce),opacity .15s ease-out}.mc-roll__back{background:var(--mc-roll-accent, #ffd731);color:#111;text-transform:uppercase;font-weight:800;font-size:.86em;translate:0 2em -6em;rotate:1 0 0 -90deg;opacity:0;transition:translate .85s var(--mc-roll-bounce),rotate .75s var(--mc-roll-bounce),opacity .15s ease-out}.mc-roll__front .mc-roll__txt{transition:translate .85s var(--mc-roll-bounce)}.mc-roll__ch{display:inline-block;translate:0 .75em;transition:translate .85s var(--mc-roll-bounce);transition-delay:calc(var(--i, 0) * 12ms)}.mc-roll--tumble:active{scale:.955}@media(hover:hover)and (prefers-reduced-motion:no-preference){.mc-roll--tumble:is(:hover,:focus-visible) .mc-roll__front{translate:0 -2em -6em;rotate:1 0 0 85deg;opacity:0}.mc-roll--tumble:is(:hover,:focus-visible) .mc-roll__front .mc-roll__txt{translate:0 -.75em}.mc-roll--tumble:is(:hover,:focus-visible) .mc-roll__back{translate:0 0 0;rotate:1 0 0 0deg;opacity:1;transition-property:translate,rotate,opacity;transition-duration:.85s,.75s,75ms;transition-timing-function:var(--mc-roll-bounce),var(--mc-roll-bounce),ease-in}.mc-roll--tumble:is(:hover,:focus-visible) .mc-roll__ch{translate:0 0}}@media(hover:hover)and (prefers-reduced-motion:reduce){.mc-roll--tumble:is(:hover,:focus-visible) .mc-roll__front{background:var(--mc-roll-fg);color:var(--mc-roll-bg);transition:none}}.mc-roll--press{--mc-roll-bg: #58cc02;--mc-roll-fg: #fff;--mc-roll-lip: #58a700;border-radius:12px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;box-shadow:0 4px 0 var(--mc-roll-lip);transform:translateZ(0)}.mc-roll--press.mc-roll--tumble .mc-roll__face{border-radius:12px}.mc-roll--press:active{transform:translateY(4px) translateZ(0);box-shadow:none}@media(hover:hover){.mc-roll--press{transition:filter .2s}.mc-roll--press:hover{filter:brightness(1.1)}}.mc-roll-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#f4f1ea;color:#111}.mc-roll-demo__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.mc-roll-demo__btn{font-size:17px}.mc-roll-demo__hint{margin:0;padding:0 16px;font-size:12px;opacity:.55;text-align:center}