.kit-die[data-color]{--die-edge:color-mix(in oklab, var(--die-face) 66%, var(--scrim));box-shadow:0 0 0 1.5px var(--die-ring,transparent), var(--shadow-1)}.kit-die[data-rolling]{z-index:1;box-shadow:none;perspective:calc(var(--die) * 4);background:0 0;border-color:#0000;transition:none}.kit-die[data-rolling]>.kit-die__face{visibility:hidden}.kit-die__throw{--back:calc(var(--die) / -2);inset:calc(-1 * var(--die-bw,2px));pointer-events:none;transform-style:preserve-3d;will-change:transform;animation:kit-die-fall var(--tumble) var(--delay) both;position:absolute}.kit-die__cube{transform-style:preserve-3d;will-change:transform;animation:kit-die-spin var(--tumble) cubic-bezier(.2, .6, .25, 1) var(--delay) both;position:absolute;inset:0}.kit-die__side,.kit-die__core{backface-visibility:hidden;position:absolute;inset:0}.kit-die__side{padding:calc(var(--die) * .11);border:var(--die-bw,2px) solid var(--die-edge,var(--g-die-edge,var(--border-strong)));background:var(--die-face,var(--g-die-face,var(--surface)));border-radius:22%;grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid}.kit-die__side[data-side=front]{transform:translateZ(calc(var(--die) / 2))}.kit-die__side[data-side=back]{transform:rotateY(180deg) translateZ(calc(var(--die) / 2))}.kit-die__side[data-side=right]{transform:rotateY(90deg) translateZ(calc(var(--die) / 2))}.kit-die__side[data-side=left]{transform:rotateY(-90deg) translateZ(calc(var(--die) / 2))}.kit-die__side[data-side=top]{transform:rotateX(90deg) translateZ(calc(var(--die) / 2))}.kit-die__side[data-side=bottom]{transform:rotateX(-90deg) translateZ(calc(var(--die) / 2))}.kit-die__core{background:var(--die-edge,var(--g-die-edge,var(--border-strong)));backface-visibility:visible;border-radius:10%;inset:6%}.kit-die__core[data-axis=x]{transform:rotateY(90deg)}.kit-die__core[data-axis=y]{transform:rotateX(90deg)}.kit-die__shadow{background:radial-gradient(closest-side, color-mix(in oklab, var(--scrim) 30%, transparent), transparent);pointer-events:none;will-change:transform, opacity;height:22%;animation:kit-die-shadow var(--tumble) var(--delay) both;border-radius:50%;position:absolute;bottom:-14%;left:8%;right:8%}.kit-rolldie .kit-die__throw{--drop-k:-.25}.kit-die[data-landed]{box-shadow:0 0 0 max(3px, calc(var(--die) * .08)) color-mix(in oklab, var(--die-face,var(--g-die-edge,var(--accent))) 42%, transparent), var(--shadow-1);animation:kit-die-land .24s var(--ease-out)}.kit-pyramid{--pyr:44px;width:var(--pyr);aspect-ratio:40/36;display:inline-grid;position:relative}.kit-pyramid[data-color]{--die-edge:color-mix(in oklab, var(--die-face) 55%, var(--scrim))}.kit-pyramid__art{grid-area:1/1;width:100%;height:100%;overflow:visible}.kit-pyramid__facet{fill:var(--die-face,var(--g-die-face,var(--surface)));stroke:var(--die-edge,var(--g-die-edge,var(--border-strong)));stroke-width:1.5px;stroke-linejoin:round}.kit-pyramid__facet[data-facet=right]{fill:color-mix(in oklab, var(--die-face,var(--g-die-face,var(--surface))) 84%, var(--scrim))}.kit-pyramid__facet[data-facet=near]{fill:color-mix(in oklab, var(--die-face,var(--g-die-face,var(--surface))) 93%, var(--scrim))}.kit-pyramid__outline{fill:none;stroke:var(--die-edge,var(--g-die-edge,var(--border-strong)));stroke-width:2.5px;stroke-linejoin:round}.kit-pyramid__mark{fill:var(--die-pip,var(--g-die-mark,var(--text)));opacity:0}.kit-pyramid[data-marked] .kit-pyramid__mark{opacity:1}.kit-pyramid[data-rolling]{z-index:1;perspective:calc(var(--pyr) * 4)}.kit-pyramid[data-rolling] .kit-pyramid__art{animation:kit-pyramid-throw var(--tumble) var(--delay) both}.kit-pyramid[data-rolling] .kit-pyramid__mark{animation:kit-pyramid-tip var(--tumble) var(--delay) both}.kit-pyramid__shadow{background:radial-gradient(closest-side, color-mix(in oklab, var(--scrim) 28%, transparent), transparent);will-change:transform, opacity;width:80%;height:20%;animation:kit-die-shadow var(--tumble) var(--delay) both;border-radius:50%;grid-area:1/1;place-self:end center;margin-bottom:-8%}.kit-pyramid[data-landed] .kit-pyramid__art{animation:kit-die-land .24s var(--ease-out)}.kit-pyramid[data-landed] .kit-pyramid__outline{stroke-width:3.5px}@keyframes kit-die-fall{0%{transform:translateY(calc(var(--die) * var(--drop-k,-.6)));animation-timing-function:cubic-bezier(.5,0,.9,.45)}52%{animation-timing-function:cubic-bezier(.1,.55,.45,1);transform:translateY(0)}70%{transform:translateY(calc(var(--die) * var(--drop-k,-.6) * .18));animation-timing-function:cubic-bezier(.5,0,.9,.45)}86%,to{transform:translateY(0)}}@keyframes kit-die-spin{0%{transform:translateZ(var(--back)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}to{transform:translateZ(var(--back)) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}}@keyframes kit-die-shadow{0%{opacity:.3;transform:scale(.55)}52%{opacity:1;transform:scale(1)}70%{opacity:.75;transform:scale(.85)}86%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}@keyframes kit-die-land{35%{transform:scale(1.06)}}@keyframes kit-pyramid-throw{0%{transform:translateY(-45%) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation-timing-function:cubic-bezier(.45,0,.85,.45)}38%{transform:translateY(0) rotateX(calc(var(--rx) * -.45)) rotateY(calc(var(--ry) * -.4)) rotateZ(calc(var(--rz) * .3));animation-timing-function:cubic-bezier(.15,.55,.5,1)}58%{transform:translateY(-10%) rotateX(calc(var(--rx) * .2)) rotateY(calc(var(--ry) * .15)) rotateZ(calc(var(--rz) * -.1));animation-timing-function:cubic-bezier(.45,0,.85,.45)}78%{transform:translateY(0) rotateX(calc(var(--rx) * -.06)) rotateY(calc(var(--ry) * -.05)) rotateZ(calc(var(--rz) * .03));animation-timing-function:cubic-bezier(.2,.7,.2,1)}to{transform:translateY(0)rotateX(0)rotateY(0)rotate(0)}}@keyframes kit-pyramid-tip{0%,22%{opacity:var(--m0)}26%,46%{opacity:var(--m1)}50%,66%{opacity:var(--m2)}70%,to{opacity:var(--m3)}}
