*{box-sizing:border-box;margin:0;padding:0}body{background:#333;min-height:100vh;overflow:hidden}#scene{perspective:50em;position:fixed;inset:0}#cube{transform-style:preserve-3d;position:absolute;top:calc(50% - 2em);left:50%}.cubie-wrapper{transform-style:preserve-3d;position:absolute;inset:0}.cubie{width:4em;height:4em;transform-style:preserve-3d;transform:translate3d(calc(var(--x) * 4em), calc(var(--y) * 4em), calc(var(--z) * 4em)) translate3d(-2em, -2em, 0);pointer-events:none}.face{backface-visibility:visible;background:#000;place-items:center;width:4em;height:4em;display:grid;position:absolute}.sticker{background:var(--sticker-color);border-radius:.5em;width:3.5em;height:3.5em}.face.right{--sticker-color:#d00;transform:rotateY(90deg)translateZ(2em)}.face.left{--sticker-color:#f80;transform:rotateY(-90deg)translateZ(2em)}.face.top{--sticker-color:#fff;transform:rotateX(-90deg)translateZ(2em)}.face.bottom{--sticker-color:#fd0;transform:rotateX(90deg)translateZ(2em)}.face.front{--sticker-color:#0a5;transform:translateZ(2em)}.face.back{--sticker-color:#25c;transform:rotateY(180deg)translateZ(2em)}#hud{color:#fff;pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:.5em;padding:2em;display:flex;position:fixed;inset:0}#date-time{align-items:center;gap:2px;display:flex}.segment{flex-direction:column;align-items:center;display:flex}.btn{color:#fff;width:1em;height:1em;font-size:inherit;cursor:pointer;pointer-events:auto;background:0 0;border:none}