body, html {
    color: #fff;
    background: #0d0e12;
    min-height: 100dvh;
    width: 100dvw;
    overflow-x: hidden;
    font-family: Segoe UI Variable, Segoe UI, -apple-system, system-ui, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
}

*, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
}

*, :after, :before {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

div {
    display: block;
    unicode-bidi: isolate;
}

.text-text_main {
    --tw-text-opacity: 1;
    color: rgb(245 246 248 / var(--tw-text-opacity, 1));
}

@media (min-width: 860px) {
    .md\:h-\[660px\] {
        height: 660px;
    }
}

.surface {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .025));
    border: 1px solid hsla(0, 0%, 100%, .07);
    border-radius: 18px;
}

.place-items-center {
    place-items: center;
}

.flex-1 {
    flex: 1 1 0%;
}

.min-h-0 {
    min-height: 0;
}

.grid {
    display: grid;
}

.relative {
    position: relative;
}

.w-\[min\(420px\2c 80vw\)\] {
    width: min(420px, 80vw);
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.relative {
    position: relative;
}
* {
    box-sizing: border-box;
}

.jp-wheel-halo {
    inset: -36px;
    background: var(--ring-gradient);
    filter: blur(36px);
    opacity: .55;
    z-index: 0;
    will-change: filter;
    transform: translateZ(0);
    animation: halo-anim 3s linear infinite;
}

.jp-wheel-halo, .jp-wheel-ticks, .js-wheel-pupse {
    position: absolute;
    border-radius: 50%;
}

.js-wheel-pupse
{
    opacity: 0;
    z-index: 0;
    will-change: filter;
    transform: translateZ(0);

    inset: -30px;

    border-color: #ffb13d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}
.animate-pulse {
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse
{
    from
    {
        inset: 0px;
        opacity: 1;
    }
    to
    {
        inset: -60px;
        opacity: 0;
    }
} 

.animate-spin {
    transition-duration: 5s;
    animation: spin 1s linear infinite;
}

/* @keyframes spin
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
} */

@keyframes halo-anim
{
    0%
    {
        inset: -8px;
    }
    50%
    {
       inset: -2px;
    }
    100%
    {
       inset: -8px;
    }
}

.jp-wheel-spinner {
    height: 420px;
    background: var(--ring-gradient);
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .04), 0 18px 50px rgba(0, 0, 0, .55);
    will-change: transform, filter;
    transition: transform 5.4s cubic-bezier(.12,.75,.13,1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    filter: blur(.4px);
}



.rounded-full {
    border-radius: 9999px;
}

.z-\[1\] {
    z-index: 1;
}

.inset-0 {
    inset: 0;
}

.jp-wheel-halo, .jp-wheel-ticks {
    /* position: absolute; */
    border-radius: 50%;
}

.jp-wheel-ticks {
    inset: 1.9%;
    background: repeating-conic-gradient(hsla(0, 0%, 100%, .05) 0deg .6deg, transparent .6deg 22.5deg);
    -webkit-mask: radial-gradient(circle, transparent 48.5%, #000 49.6%, #000 49.9%, transparent 51%);
    mask: radial-gradient(circle, transparent 48.5%, #000 49.6%, #000 49.9%, transparent 51%);
    pointer-events: none;
}

.-translate-x-1\/2, .-translate-y-1\/2 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
}

.z-\[4\] {
    z-index: 4;
}

.left-1\/2 {
    left: 50%;
}

.-top-2 {
    top: -.5rem;
}

.duration-300 {
    transition-duration: .3s;
}
.w-0 {
    width: 0;
}
.h-0 {
    height: 0;
}
.justify-center {
    justify-content: center;
}
.gap-1\.5 {
    gap: .375rem;
}
.border-stroke {
    border-color: hsla(0, 0%, 100%, .07);
}

.border {
    border-width: 1px;
}
.border-stroke {
    border-color: hsla(0, 0%, 100%, .07);
}

.border {
    border-width: 1px;
}
.text-text_3 {
    color: rgba(245, 246, 248, .48);
}

.tracking-\[0\.06em\] {
    letter-spacing: .06em;
}
.uppercase {
    text-transform: uppercase;
}
.text-xs {
    font-size: 10px;
}
.text-text_main {
    --tw-text-opacity: 1;
    color: rgb(245 246 248 / var(--tw-text-opacity, 1));
}

.tracking-\[-0\.02em\] {
    letter-spacing: -.02em;
}
.font-bold {
    font-weight: 700;
}
.text-\[44px\] {
    font-size: 44px;
}
.absolute {
    position: absolute;
}
.duration-300 {
    transition-duration: .3s;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}
.border-stroke {
    border-color: hsla(0, 0%, 100%, .07);
}
.border {
    border-width: 1px;
}
.rounded-full {
    border-radius: 9999px;
}
.gap-1\.5 {
    gap: .375rem;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.flex-col {
    flex-direction: column;
}
.flex {
    display: flex;
}
.z-\[3\] {
    z-index: 3;
}
.inset-\[11\.4\%\] {
    inset: 11.4%;
}
.absolute {
    position: absolute;
}
.jp-wheel-spinner:after {
    content: "";
    position: absolute;
    inset: 5.24%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, hsla(0, 0%, 100%, .04), rgba(8, 9, 12, .96) 75%);
}

:after, :before {
    --tw-content: "";
}
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
}
.bg-accent_5 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 177 61 / var(--tw-bg-opacity, 1));
}

.rounded-t {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.-translate-x-1\/2, .-translate-y-1\/2 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
    --tw-translate-x: -50%;
}
.w-3\.5 {
    width: .875rem;
}
.h-2 {
    height: .5rem;
}
.left-1\/2 {
    left: 50%;
}
.-top-\[22px\] {
    top: -22px;
}
.text-text_3 {
    color: rgba(245, 246, 248, .48);
}

.text-sm {
    font-size: 12px;
}
.gap-1\.5 {
    gap: .375rem;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.mt-1 {
    margin-top: .25rem;
}
.\[stroke-width\:2\] {
    stroke-width: 2;
}

.stroke-current {
    stroke: currentColor;
}
.fill-none {
    fill: none;
}
.w-3 {
    width: 1rem;
}
.h-3 {
    height: 1rem;
}