* { box-sizing:border-box;font-family:sans-serif; }
html, body { padding:0;margin:0; }
body { padding:2rem; }

main { width:100%;max-width:300px;background:rgba(100,100,100,0.3); }
.controller { position:relative;width:fit-content;background:rgba(0,0,0,0.3);overflow: hidden; }


.spinner { width:500px;height:500px;border-radius:100rem;background:#ebeff0;position: relative;overflow:hidden;transform:rotate(-90deg); }

.spinner-holder { height:250px;overflow:hidden;position:relative;width:500px; }
.spinner-holder::after { width:80px;height:80px;background:#ffffff;content:"";display:block;top:100%;left:50%;position:absolute;z-index:2;transform:translate(-50%, -50%);border-radius:100%; }

.wedge { position: absolute;width:45px;height:255px;
  inset: 0;top:50%;left:50%;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);transform-origin: 0% 0%;text-align:center;padding:2rem 0; }

.wedge-2 {transform: rotate(-20deg) translate(-50%, -100%);background:#f8bb00; }
.wedge-3 {transform: rotate(-10deg) translate(-50%, -100%);background:#fe662c; }
.wedge-4 {transform: rotate(0deg) translate(-50%, -100%);background:#90b6c5; }
.wedge-5 {transform: rotate(10deg) translate(-50%, -100%);background:#fe662c; }
.wedge-6 {transform: rotate(20deg) translate(-50%, -100%);background:#f8bb00; }



.spinner-cover { position:absolute;width:100%;height:100%;background:#87ccba;top:0;left:0;border-top-right-radius:100rem;border-top-left-radius:100rem;transform:rotate(0deg);transform-origin:50% 100%;transition:all 0.8s ease-in-out; }
.spinner-cover.open { transform:rotate(180deg); }


.controls { width:100%; padding:2rem; text-align:center; }


.dial-holder { position: absolute;top:0;left:0;width:100%;height:100%;z-index:4;border-top-right-radius:100rem;border-top-left-radius:100rem; }
.dial { position: absolute;top:100%;left:50%;transform:translate(-50%, -50%);background:red;border-radius:100rem;width:80px;height:80px; }
.dial-stick { width:10px;height:100%;background:red;position:absolute;top:0;left:50%;transform: translateX(-50%) rotate(0deg);transform-origin:50% 100%; }

.hidden { display:none; }