@property --angle{syntax:"<angle>";inherits:true;initial-value:-90deg}@property --icon-offset{syntax:"<number>";inherits:true;initial-value:0}@property --selector-width{syntax:"<number>";inherits:true;initial-value:90}@property --border-width{syntax:"<number>";inherits:true;initial-value:0}@property --item-opacity{syntax:"<number>";inherits:true;initial-value:0}@property --is-selected{syntax:"<number>";inherits:true;initial-value:0}.dial-selector{--radius:120px;--shadow-width:calc(var(--radius)/13);--knob-color:#30c5ff;--inner-bg:#251b00;--outer-bg:#251b00;--border-bg:#251b00;--color-grey:#dedede;--color-dark-grey:#f4f4f4;--icon-opacity:.7;--item-opacity:1;--is-active:1;--icon-offset:1;--scene-bg:#f0eff0;--selector-width:260;--border-width:13;width:var(--radius);aspect-ratio:1;z-index:10;border-radius:100000px;position:relative}.dial-button-bottom-center{z-index:50;position:fixed;bottom:0;left:50%;transform:translate(-50%)translateY(25%)scale(1.02)}.dial-knob{z-index:2;cursor:pointer;border-radius:100000px;place-items:center;width:100%;height:100%;transition:transform .4s cubic-bezier(.44,-.9,.31,1.55);display:grid;position:absolute}.dial-knob:after{content:"";background:var(--knob-color);border-radius:100000px;width:4%;height:14%;transition:box-shadow .3s;display:block;position:absolute;top:-30px;box-shadow:0 0 1px rgba(0,0,0,.4),0 0 2px 1px rgba(0,0,0,.2)}.dial-knob:hover:after{background:#c0edff}.dial-knob:active:after{transform:scale(.95)}.dial-selector:after{display:none}.dial-selector:has(.dial-knob:active):after{transform:scale(.95)}.dial-selector.active{--is-active:1}.dial-selector.active .dial-knob{--knob-color:#30c5ff}.dial-selector.active ul{--selector-width:260;--border-width:0;--icon-offset:1;--item-opacity:1}.dial-selector.active ul:before{box-shadow:inset 0 0 10px rgba(0,0,0,.2),inset 0 0 1px -1px rgba(0,0,0,.18),inset 0 2px 5px -2px rgba(0,0,0,.16),inset 0 8px 24px -4px rgba(0,0,0,.063)}.dial-selector ul{--selector-width:260;--border-width:0;justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;list-style:none;display:flex;position:absolute}.dial-selector ul:before{content:"";width:calc(var(--selector-width)*1%);height:calc(var(--selector-width)*1%);box-shadow:rgba(0,0,0,.125) 0px 0px 2px -.5px,rgba(0,0,0,.125) 0px 1px 5px -1px,rgba(0,0,0,.125) 0px 4px 12px -1.5px,rgba(0,0,0,.125) 0px 9px 28px -2px,rgba(0,0,0,.125) 0px 24px 72px -2.5px,0 calc(var(--radius)/-10)120px calc(var(--radius)/5)rgba(0,0,0,.05);background:#251b00 url(/images/pattern-dots.svg) 50%/cover;border-radius:100000px;transition:width .3s,height .3s,box-shadow .3s;display:block;position:absolute;box-shadow:inset 0 0 10px rgba(0,0,0,.2),inset 0 0 1px -1px rgba(0,0,0,.18),inset 0 2px 5px -2px rgba(0,0,0,.16),inset 0 8px 24px -4px rgba(0,0,0,.063)}.dial-selector ul:after{content:"";width:calc(100% + calc(var(--radius)/1.3));height:calc(100% + calc(var(--radius)/1.3));background:conic-gradient(from 229.2deg,#f1f1f1 0deg,#c2c2c2 90deg,#f1f1f1 180deg,#c2c2c2 270deg,#f1f1f1 360deg);border-radius:100000px;display:block;position:absolute;box-shadow:0 0 2px -.5px rgba(0,0,0,.125),0 1px 5px -1px rgba(0,0,0,.125),0 4px 12px -1.5px rgba(0,0,0,.125),0 9px 28px -2px rgba(0,0,0,.125),0 24px 72px -2.5px rgba(0,0,0,.125)}.dial-selector ul li{transform-origin:bottom;width:25%;height:120%;opacity:var(--item-opacity);justify-content:center;align-items:start;margin:auto;transition:transform .5s,opacity .5s .2s;display:flex;position:absolute;top:-70%;left:0;right:0}.dial-selector ul li>span{display:none}.dial-selector ul li>input[type=radio]{all:unset;aspect-ratio:1;cursor:pointer;width:100%;top:calc(var(--icon-offset)*1%);position:absolute;left:0}.dial-selector ul li:before{content:"";aspect-ratio:1;width:100%;filter:blur(12px)opacity(var(--is-selected))saturate(2);background:#ffe18d;transition:filter .2s .2s;display:block;position:absolute;transform:translateY(175%)scaleX(1.5);box-shadow:0 0 12px #ffe18d,0 0 20px rgba(255,225,141,.5)}.dial-selector ul li.selected{--is-selected:1}.dial-selector ul li.selected .dial-icon{opacity:1}.dial-selector ul li.selected .dial-icon i{color:#ffe18d;text-shadow:0 0 10px #ffe18d,0 0 20px rgba(255,225,141,.8),0 0 30px rgba(255,225,141,.6),0 0 45px rgba(255,225,141,.4),0 0 65px rgba(255,225,141,.2)}.dial-icon{aspect-ratio:1;pointer-events:none;width:100%;opacity:var(--icon-opacity);top:calc(var(--icon-offset)*1%);justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute}.dial-icon svg{fill:currentColor;width:100%;height:100%}.dial-icon i{color:#b88700;font-size:24px}.dial-selector-outer{--radius:120px;--selector-width:330;--icon-opacity:1;--item-opacity:1;width:var(--radius);aspect-ratio:1;z-index:1;border-radius:100000px;position:fixed}.dial-selector-outer ul{justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;list-style:none;animation:.3s ease-out expand;display:flex;position:absolute}.dial-selector-outer ul:before{content:"";width:calc(var(--selector-width)*1%);height:calc(var(--selector-width)*1%);background:#f1f1f1;border-radius:100000px;display:block;position:absolute;box-shadow:0 0 2px #d4d4d4,0 2px 8px rgba(241,241,241,.7),0 8px 24px rgba(54,54,54,.2)}.dial-selector-outer ul li{transform-origin:bottom;width:20%;height:155%;opacity:var(--item-opacity);justify-content:center;align-items:start;margin:auto;transition:transform .5s,opacity .5s .2s;display:flex;position:absolute;top:-105%;left:0;right:0}.dial-selector-outer ul li>input[type=radio]{all:unset;aspect-ratio:1;cursor:pointer;width:100%;position:absolute;top:1%;left:0}.dial-selector-outer .dial-icon i{color:#dbdad5;font-size:24px;transition:color .3s}.dial-selector-outer ul li:hover .dial-icon i{color:#30c5ff}@keyframes expand{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}