:root{--wheel-width: 100px;--wheel-height: 20px;--dial-width: 30px;--dial-height: var(--wheel-height);--dial-padding: 2px;--dial-font-size: 14px}.wheel{--rotation-offset: 0deg;position:relative;width:var(--wheel-width);height:var(--wheel-height);padding:0;perspective:450px;perspective-origin:center;transform-style:preserve-3d;touch-action:none;-webkit-user-select:none;user-select:none;isolation:isolate;filter:drop-shadow(1px 0 2px color-mix(in oklab,var(--color-red-950) 30%,transparent)) drop-shadow(0 2.5px 4px color-mix(in oklab,var(--color-red-950) 50%,transparent)) drop-shadow(0 -1px 2px color-mix(in oklab,var(--color-red-50) 10%,transparent))}.wheel-item{--element-offset: 0;position:absolute;top:calc((var(--wheel-height) - var(--dial-height)) / 2);left:calc((var(--wheel-width) - var(--dial-width)) / 2);padding:var(--dial-padding);color:#504b38;text-shadow:0 1px 0 #fff;line-height:1;font-size:var(--dial-font-size);width:var(--dial-width);height:var(--dial-height);flex-shrink:0;display:flex;justify-content:center;align-items:center;transform:rotateY(calc(mod(var(--element-offset) * 36 + 360,360) * 1deg + var(--rotation-offset))) translateZ(45px);transform-style:preserve-3d;backface-visibility:hidden;background-image:linear-gradient(90deg,#999 5%,#fff 10%,#ccc,#ddd,#ccc,#eee 90%,#bbb 99.999%)}.wheel-item:nth-child(1){--element-offset: 0}.wheel-item:nth-child(2){--element-offset: 1}.wheel-item:nth-child(3){--element-offset: 2}.wheel-item:nth-child(4){--element-offset: 3}.wheel-item:nth-child(5){--element-offset: 4}.wheel-item:nth-child(6){--element-offset: 5}.wheel-item:nth-child(7){--element-offset: 6}.wheel-item:nth-child(8){--element-offset: 7}.wheel-item:nth-child(9){--element-offset: 8}.wheel-item:nth-child(10){--element-offset: 9}