.DiceView{--DiceView-TilesMapWidth: 1050;--DiceView-TilesMapHeight: 1000;--DiceView-TileSize: 50;display:grid;align-items:center;justify-content:center}.DiceView-ImageWrapper{overflow:hidden;max-width:100%;max-height:100%;aspect-ratio:1}.DiceView-Image{width:calc(100% * var(--DiceView-TilesMapWidth) / var(--DiceView-TileSize));height:calc(100% * var(--DiceView-TilesMapHeight) / var(--DiceView-TileSize));position:relative;top:calc(-100% * (var(--DiceView-D) - 1));left:calc(-100% * var(--DiceView-Value))}@media (prefers-color-scheme: dark){.DiceView-Image{filter:invert()}}@keyframes DiceView-Roll{0%{transform:translateY(-25%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes DiceView-Appear{0%{transform:translateY(33%);opacity:0}}.DiceView:not(.DiceView_noAnimation) .DiceView-ImageWrapper:not(.DiceView-ImageWrapper_animated){animation:.3s DiceView-Appear ease-out}.DiceView-ImageWrapper_animated:not(.DiceView_noAnimation *){animation:.3s DiceView-Roll ease-out;animation-delay:calc(50ms * var(--DiceView-Position));animation-fill-mode:both}.Button{position:relative;appearance:none;font:inherit;border:1px solid currentColor;background-color:transparent;border-radius:8px;padding:0 1ex;height:36px;font-size:22px;line-height:1;border-width:2px;overflow:hidden;text-box-edge:ex alphabetic;text-box-trim:trim-both;-webkit-user-select:none;user-select:none;color:var(--color)}.Button_size_large{height:64px;font-size:28px;border-radius:9999px;padding:0 3ex}.Button:disabled{opacity:.5;color:var(--color)}.Button:before{content:"";display:block;position:absolute;inset:0;background-color:var(--color);opacity:0}.Button:not(:disabled):active:before{opacity:.1}@media (prefers-color-scheme: dark){.Button:not(:disabled):active:before{opacity:.2}}.Button:not(:active):before{transition:opacity .1s linear}.DiceCounter{width:64px;display:grid;-webkit-user-select:none;user-select:none}.DiceCounter-PlusButton.DiceCounter-PlusButton,.DiceCounter-MinusButton.DiceCounter-MinusButton{border-radius:16px}.DiceCounter-PlusButton.DiceCounter-PlusButton{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.DiceCounter-MinusButton.DiceCounter-MinusButton{border-top-left-radius:0;border-top-right-radius:0;border-top:none}.DiceCounter-DiceViewBox{position:relative}.DiceCounter-DiceView{width:64px;height:64px}.DiceCounter-Counter{position:absolute;border:1px solid currentColor;bottom:0;right:0;background-color:var(--bg-color);padding:0 1ex;font-size:16px;border-radius:9999px}.DiceField{width:100%;height:100%;display:flex;flex-direction:column;box-sizing:border-box;--gap: 12px;gap:var(--gap);padding:var(--gap)}.DiceField-FieldWrapper{position:relative;min-height:120px;height:100%;box-sizing:border-box}.DiceField-Field{display:flex;flex-direction:column;border:8px dotted currentColor;border-radius:32px;height:100%;overflow:auto;box-sizing:border-box}.DiceField-AboutLink{position:absolute;padding:0 .5ex;transform:rotate(-90deg) translate(100%);transform-origin:bottom right;color:var(--color);bottom:40px;right:0;text-box-edge:ex alphabetic;text-box-trim:trim-both}@supports not (text-box-trim: trim-both){.DiceField-AboutLink{right:-6px}}.DiceField-AboutLink:before{content:"";display:block;position:absolute;inset:-.25em 0;background-color:var(--bg-color);z-index:-1}.DiceField-Dices{margin:auto 0;width:100%;position:relative;--dice-width: 112px;height:calc(max(1,round(up,var(--dices-count) / var(--dices-in-a-row),1)) * var(--dice-width));transition:height .3s ease-out}.DiceField-Dice{--dices-count-1: var(--dices-count);position:absolute;top:0;left:var(--left-indent);width:var(--dice-width);height:var(--dice-width);-webkit-user-select:none;user-select:none;--row: round(down, var(--DiceView-Position) / var(--dices-in-a-row), 1) ;--col: calc(var(--DiceView-Position) - var(--row) * var(--dices-in-a-row));transform:translate(calc((var(--col) + (round(up,var(--dices-count-1),var(--dices-in-a-row)) - var(--dices-count-1)) / 2 * max(0,calc(round(down,calc(var(--DiceView-Position) / var(--dices-in-a-row) + 1),1) - round(down,calc(var(--dices-count-1) / var(--dices-in-a-row) + 1),1) + 1))) * var(--dice-width)),calc(var(--row) * var(--dice-width)));transition:transform .3s ease-out}.DiceField-Dice_removed{--dices-count-1: calc(var(--dices-count) + 1)}.DiceField-Dice_removed .DiceView-ImageWrapper{animation:.3s DiceView-Disappear ease-out forwards}.DiceField-Counters{display:grid;grid-auto-flow:column;width:max-content;gap:var(--gap);flex-shrink:0;overflow:auto;max-width:calc(100% + var(--gap) * 2);margin-left:calc(var(--gap) * -1);margin-right:calc(var(--gap) * -1);margin-bottom:calc(var(--gap) * -1);box-sizing:border-box;padding:0 var(--gap) calc(var(--gap))}.DiceField-RollButton{flex-shrink:0}.DiceField-NoDicesText{display:block;padding:0 4ex;text-box-edge:ex alphabetic;text-box-trim:trim-both;text-align:center;text-wrap-style:balance;position:absolute;top:50%;transform:translateY(-50%);left:0;right:0}@keyframes DiceView-Disappear{to{transform:translateY(33%);opacity:0}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--color: black;--bg-color: white;color:var(--color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100svh;margin:0 auto;-webkit-user-select:none;user-select:none}@media (prefers-color-scheme: dark){:root{--color: white;--bg-color: black}}@media (width >= 800px){:root{max-width:800px;max-height:800px}}body{width:100%;height:100%;margin:0}#root{width:100%;height:100%}