.roll-ghost{position:fixed;z-index:1;margin:0;pointer-events:none}

.lbl{display:inline-block;clip-path:inset(-.3em -.25em)}
.lbl > span{display:inline-block;text-shadow:0 1.8em currentColor;transition:translate .42s cubic-bezier(.22,1,.36,1)}
button:not(:disabled):is(:hover, :focus-visible) > .lbl > span{translate:0 -1.8em}
.choice:not(:has(:disabled)):is(:hover, :has(:focus-visible)) > .lbl > span{translate:0 -1.8em}
.weight > .lbl{clip-path:inset(-.45em -.25em)}
.weight > .lbl > span{text-shadow:0 2.2em currentColor}
.weight:not(:has(:disabled)):is(:hover, :has(:focus-visible)) > .lbl > span{translate:0 -2.2em}
@property --split{syntax:"<number>";inherits:true;initial-value:0}
.hint-split > .lbl, .hint-flip > .lbl{position:relative}
.hint-split > .lbl{clip-path:inset(-.45em -.5em -.6em);animation:hint-split 2.8s infinite}
.hint-split > .lbl > span{clip-path:inset(0 0 50% 0);translate:calc(-1px * var(--split)) calc(-3px * var(--split))}
.hint-split > .lbl::before, .hint-split > .lbl::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}
.hint-split > .lbl::before{clip-path:inset(50% 0 0 0);translate:calc(1px * var(--split)) calc(3px * var(--split))}
.hint-split > .lbl::after{
  clip-path:inset(calc(50% - .5px) 0 calc(50% - .5px) 0);transform-origin:0 calc(50% - .5px);
  transform:matrix(1, 0, calc(2 * var(--split)), calc(1 + 6 * var(--split)), calc(-1 * var(--split)), calc(-3 * var(--split)));opacity:min(1, calc(var(--split) * 8));
  -webkit-mask-image:repeating-linear-gradient(90deg, #000 0 .6px, transparent .6px 1.2px);mask-image:repeating-linear-gradient(90deg, #000 0 .6px, transparent .6px 1.2px)
}
@keyframes hint-split{
  0%, 58%{--split:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  76%, 84%{--split:1;animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  94%, 100%{--split:0}
}
.hint-flip > .lbl{clip-path:inset(-.3em -.35em)}
.hint-flip > .lbl::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:-.2em -.3em;padding:.2em .3em;white-space:nowrap;pointer-events:none;background:var(--fg);color:var(--bg);clip-path:inset(0 100% 0 0);animation:hint-flip 2.8s infinite}
@keyframes hint-flip{
  0%, 62%{clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  74%, 82%{clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  94%, 100%{clip-path:inset(0 0 0 100%)}
}
.hint-split:is(:hover, :focus-visible, :has(:focus-visible)) > .lbl{animation:none}
.hint-split:is(:hover, :focus-visible, :has(:focus-visible)) > .lbl > span{clip-path:none}
:is(.hint-split, .hint-flip):is(:hover, :focus-visible, :has(:focus-visible)) > .lbl::before, :is(.hint-split, .hint-flip):is(:hover, :focus-visible, :has(:focus-visible)) > .lbl::after{display:none}
@media (prefers-reduced-motion:reduce){
  .hint-split > .lbl{animation:none}
  .hint-split > .lbl > span{clip-path:none}
  :is(.hint-split, .hint-flip) > .lbl::before, :is(.hint-split, .hint-flip) > .lbl::after{display:none}
}

.arrow{transition:color .2s linear, translate .32s cubic-bezier(.22,1,.36,1)}
#prev:hover{translate:-3px 0}
#next:hover{translate:3px 0}