:root{--edge: min(38vmin, 260px);--half: calc(var(--edge) / 2);--duration: 1.8s;--pip: #1a1a1f;--face: #fdfdfb;--bg: #15161a;--muted: #8a8d98}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;gap:2rem;background:var(--bg);color:var(--muted);font:400 1.1rem/1.4 system-ui,-apple-system,sans-serif}#app{display:grid;justify-items:center;gap:2.5rem}.dice{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;background:none;cursor:pointer;width:var(--edge);height:var(--edge);perspective:1200px}.dice:focus-visible{outline:3px solid #5b8cff;outline-offset:1.5rem;border-radius:.5rem}.cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--duration) cubic-bezier(.15,.85,.2,1)}.face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);gap:8%;padding:12%;background:var(--face);box-shadow:inset 0 0 0 1px #00000014}.pip{border-radius:50%;background:var(--pip)}.status{margin:0;display:flex;align-items:center;min-height:calc(1.6rem * 1.4)}.status[data-phase=result]{color:var(--face);font-size:1.6rem;font-weight:600}@media(prefers-reduced-motion:reduce){:root{--duration: .25s}}