.cosmos-wheel{--wheel-step:3.25rem;--wheel-drum:5.5rem;--wheel-ink:#fff;--wheel-ground:#000;--wheel-open:.62s;--wheel-close:.64s;z-index:80;color:var(--wheel-ink);touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;outline:none;position:fixed;inset:0;overflow:hidden}.cosmos-wheel[data-ink=dark]{--wheel-ink:#0a0a0b;--wheel-ground:#fff}.cosmos-wheel-bang{top:calc(var(--wheel-y,50%) - var(--wheel-reach,100vmax) / 4);left:calc(var(--wheel-x,50%) - var(--wheel-reach,100vmax) / 4);width:calc(var(--wheel-reach,100vmax) / 2);height:calc(var(--wheel-reach,100vmax) / 2);border-radius:50%;position:absolute;transform:scale(4.08)}.cosmos-wheel:before,.cosmos-wheel:after{top:calc(var(--wheel-y,50%) - var(--wheel-reach,100vmax) / 4);left:calc(var(--wheel-x,50%) - var(--wheel-reach,100vmax) / 4);width:calc(var(--wheel-reach,100vmax) / 2);height:calc(var(--wheel-reach,100vmax) / 2);content:"";opacity:0;pointer-events:none;border:1.5px solid #f74a37;border-radius:50%;position:absolute}.cosmos-wheel:after{border-color:#39d3d3}.cosmos-wheel-fills,.cosmos-wheel-fill{position:absolute;inset:0}.cosmos-wheel-fill-in{animation:.24s linear both cosmos-wheel-fill-in}.cosmos-wheel-fill:has(>i){grid-template-columns:repeat(2,1fr);align-content:start;display:grid;overflow:hidden}.cosmos-wheel-fill>i{aspect-ratio:1;transform:scale(calc(var(--fx,1) * 1.006), calc(var(--fy,1) * 1.006));background-size:cover}.cosmos-wheel-fill>i:nth-child(2n){--fx:-1}@media not (min-width:48rem){.cosmos-wheel-fill>i:nth-child(4n+3),.cosmos-wheel-fill>i:nth-child(4n+4){--fy:-1}}@media (min-width:48rem){.cosmos-wheel-fill:has(>i){grid-template-columns:repeat(4,1fr)}.cosmos-wheel-fill>i:nth-child(8n+5),.cosmos-wheel-fill>i:nth-child(8n+6),.cosmos-wheel-fill>i:nth-child(8n+7),.cosmos-wheel-fill>i:nth-child(8n+8){--fy:-1}}.cosmos-wheel-hole{top:calc(var(--wheel-y,50%) - 8rem);left:calc(var(--wheel-x,50%) - 8rem);opacity:0;pointer-events:none;width:16rem;max-width:none;height:16rem;position:absolute}.cosmos-wheel-body{position:absolute;inset:0}.cosmos-wheel-title{z-index:1;top:calc(env(safe-area-inset-top,0px) + 1.5rem);left:calc(var(--gutter) - .75rem);pointer-events:none;border-radius:9999px;margin:0;padding:.25rem .75rem;position:absolute}.cosmos-wheel[data-busy] .cosmos-wheel-title,.cosmos-wheel[data-busy] .cosmos-wheel-close{background:#000000c7}.cosmos-wheel-close{z-index:2;top:calc(env(safe-area-inset-top,0px) + 1rem);right:var(--gutter);border:1px solid color-mix(in srgb, var(--wheel-ink) 45%, transparent);width:2.75rem;height:2.75rem;color:inherit;cursor:pointer;border-radius:9999px;place-items:center;display:grid;position:absolute}.cosmos-wheel-drum{overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;touch-action:pan-y;outline:none;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden auto;-webkit-mask-image:linear-gradient(#0000 6%,#000 30% 70%,#0000 94%);mask-image:linear-gradient(#0000 6%,#000 30% 70%,#0000 94%)}.cosmos-wheel-drum::-webkit-scrollbar{display:none}.cosmos-wheel-drum:before,.cosmos-wheel-drum:after{height:calc(50% - var(--wheel-step) / 2);content:"";flex:none}.cosmos-wheel-item{width:calc(var(--gutter) + var(--wheel-drum));height:var(--wheel-step);padding-left:var(--gutter);cursor:pointer;scroll-snap-align:center;outline:none;flex:none;align-items:center;display:flex}.cosmos-wheel-chip{width:var(--wheel-drum);height:calc(var(--wheel-step) - .375rem);border:1px solid color-mix(in srgb, var(--wheel-ink) 55%, transparent);opacity:.15;will-change:transform, opacity;border-radius:.5rem;display:block;transform:scale(.5)}.cosmos-wheel-mark{top:calc(50% - var(--wheel-step) / 2 - .25rem);width:calc(var(--gutter) + var(--wheel-drum) + .5rem);height:calc(var(--wheel-step) + .5rem);opacity:.5;pointer-events:none;border-block:1px solid;position:absolute;left:0}.cosmos-wheel-mark:after{content:"";background:currentColor;width:.75rem;height:1px;position:absolute;top:50%;left:100%}.cosmos-wheel-drum:focus-visible+.cosmos-wheel-mark{opacity:1;border-block:1.5px solid #fff;box-shadow:0 0 0 2px #000000d9}.cosmos-wheel button:focus-visible{box-shadow:0 0 0 6px #000000d9}.cosmos-wheel-read{top:50%;right:var(--gutter);left:calc(var(--gutter) + var(--wheel-drum) + 1.75rem);pointer-events:none;position:absolute;transform:translateY(-50%)}.cosmos-wheel-read p{min-height:1lh;margin:0}.cosmos-wheel-read{border-radius:.75rem;margin-inline:-1.125rem 0;padding:1rem 1.125rem}.cosmos-wheel[data-busy] .cosmos-wheel-read{background:#000000c7}.cosmos-wheel-note{opacity:.72}.cosmos-wheel-name{font-family:var(--font-display-stack);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:break-word;text-wrap:balance;text-shadow:-.022em 0 #f74a37cc,.022em 0 #39d3d3cc;font-size:clamp(1.75rem,8.6vw,6.5rem);font-weight:700;line-height:.94}.cosmos-wheel-read .cosmos-wheel-name{margin-block:.5rem .75rem}.cosmos-wheel-foot{right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 1.75rem);left:calc(var(--gutter) + var(--wheel-drum) + 1.75rem);pointer-events:none;display:flex;position:absolute}.cosmos-wheel-confirm{background:var(--wheel-ink);min-height:3rem;color:var(--wheel-ground);cursor:pointer;pointer-events:auto;border-radius:9999px;padding:0 1.5rem}.cosmos-wheel-edge{display:none}@supports (-webkit-touch-callout:none){.cosmos-wheel-edge{z-index:3;height:12px;display:block;position:fixed;top:0;left:0;right:0}.cosmos-wheel-edge-foot{top:auto;bottom:0}.cosmos-wheel[data-closed] .cosmos-wheel-edge{display:none}}.cosmos-wheel-confirm:disabled{cursor:default;opacity:.45}@media (min-width:48rem){.cosmos-wheel{--wheel-step:3.75rem;--wheel-drum:7.5rem}.cosmos-wheel-read{right:calc(var(--gutter) + var(--wheel-drum) + 1.75rem);width:fit-content;max-width:calc(100% - 2 * (var(--gutter) + var(--wheel-drum) + 1.75rem));text-align:center;margin-inline:auto;padding-inline:2rem}.cosmos-wheel-foot{right:calc(var(--gutter) + var(--wheel-drum) + 1.75rem);justify-content:center}}.cosmos-wheel[data-open] .cosmos-wheel-bang{animation:cosmos-wheel-burst var(--wheel-open) cubic-bezier(.16, 1, .3, 1) both}.cosmos-wheel[data-open]:before{animation:cosmos-wheel-ring var(--wheel-open) cubic-bezier(.16, 1, .3, 1) both}.cosmos-wheel[data-open]:after{animation:cosmos-wheel-ring var(--wheel-open) cubic-bezier(.16, 1, .3, 1) 70ms both}.cosmos-wheel[data-open] .cosmos-wheel-hole{animation:.24s ease-out both cosmos-wheel-hole-out}.cosmos-wheel[data-open] .cosmos-wheel-fills{animation:.26s linear .22s both cosmos-wheel-fill-in}.cosmos-wheel[data-open] .cosmos-wheel-body{animation:.26s linear .3s both cosmos-wheel-fill-in}.cosmos-wheel[data-closed]{animation:cosmos-wheel-hold var(--wheel-close) linear both;pointer-events:none}.cosmos-wheel[data-closed] .cosmos-wheel-body,.cosmos-wheel[data-closed] .cosmos-wheel-fills{animation:.14s linear both cosmos-wheel-fill-out}.cosmos-wheel[data-closed] .cosmos-wheel-bang{animation:.4s cubic-bezier(.6,0,.9,.3) 60ms both cosmos-wheel-fall}.cosmos-wheel[data-closed]:before{animation:.4s cubic-bezier(.6,0,.9,.3) 60ms both cosmos-wheel-ring-in}.cosmos-wheel[data-closed]:after{animation:.4s cubic-bezier(.6,0,.9,.3) .11s both cosmos-wheel-ring-in}.cosmos-wheel[data-closed] .cosmos-wheel-hole{animation:cosmos-wheel-hole-in var(--wheel-close) linear both}@keyframes cosmos-wheel-burst{0%{transform:scale(0)}to{transform:scale(4.08)}}@keyframes cosmos-wheel-fall{0%{transform:scale(4.08)}to{transform:scale(0)}}@keyframes cosmos-wheel-ring{0%{opacity:1;transform:scale(0)}70%{opacity:.7}to{opacity:0;transform:scale(4.6)}}@keyframes cosmos-wheel-ring-in{0%{opacity:0;transform:scale(4.6)}30%{opacity:.8}to{opacity:.9;transform:scale(0)}}@keyframes cosmos-wheel-hole-out{0%{opacity:1;transform:scale(.35)}to{opacity:0;transform:scale(1.5)}}@keyframes cosmos-wheel-hole-in{0%{opacity:0;transform:scale(1.5)}45%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@keyframes cosmos-wheel-fill-in{0%{opacity:0}to{opacity:1}}@keyframes cosmos-wheel-fill-out{0%{opacity:1}to{opacity:0}}@keyframes cosmos-wheel-hold{0%{opacity:1}to{opacity:1}}@media (prefers-reduced-motion:reduce){.cosmos-wheel,.cosmos-wheel:before,.cosmos-wheel:after,.cosmos-wheel *,.cosmos-wheel[data-open] *,.cosmos-wheel[data-closed] *{animation:none!important}}
