/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/ *, :after, :before { border: 0 solid #e5e7eb; box-sizing: border-box } :after, :before { --tw-content: "" } :host, html { -webkit-text-size-adjust: 100%; font-feature-settings: normal; -webkit-tap-highlight-color: transparent; font-family: Manrope, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-variation-settings: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } body { line-height: inherit; margin: 0 } hr { border-top-width: 1px; color: inherit; height: 0 } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, pre, samp { font-feature-settings: normal; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-size: 1em; font-variation-settings: normal } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { border-collapse: collapse; border-color: inherit; text-indent: 0 } button, input, optgroup, select, textarea { font-feature-settings: inherit; color: inherit; font-family: inherit; font-size: 100%; font-variation-settings: inherit; font-weight: inherit; line-height: inherit; margin: 0; padding: 0 } button, select { text-transform: none } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; background-color: transparent; background-image: none } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } progress { vertical-align: baseline } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0 } fieldset { margin: 0 } fieldset, legend { padding: 0 } menu, ol, ul { list-style: none; margin: 0; padding: 0 } dialog { padding: 0 } textarea { resize: vertical } input::-moz-placeholder, textarea::-moz-placeholder { color: #9ca3af; opacity: 1 } input::placeholder, textarea::placeholder { color: #9ca3af; opacity: 1 } [role=button], button { cursor: pointer } :disabled { cursor: default } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle } img, video { height: auto; max-width: 100% } [hidden] { display: none } *, :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(29, 29, 29, 0.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: } ::backdrop { --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(37, 37, 37, 0.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: } .static { position: static } .absolute { position: absolute } .relative { position: relative } .-bottom-1 { bottom: -.25rem } .-bottom-6 { bottom: -1.5rem } .bottom-10 { bottom: 2.5rem } .bottom-12 { bottom: 3rem } .bottom-6 { bottom: 1.5rem } .bottom-9 { bottom: 2.25rem } .left-0 { left: 0 } .left-1\/2 { left: 50% } .left-2 { left: .5rem } .right-0 { right: 0 } .right-1 { right: .25rem } .right-10 { right: 2.5rem } .top-0 { top: 0 } .top-1\/2 { top: 50% } .top-10 { top: 2.5rem } .top-\[38\%\] { top: 38% } .-mb-6 { margin-bottom: -1.5rem } .-mt-1 { margin-top: -.25rem } .-mt-1\.5 { margin-top: -.375rem } .mb-2 { margin-bottom: .5rem } .mb-6 { margin-bottom: 1.5rem } .mr-1 { margin-right: .25rem } .mt-10 { margin-top: 2.5rem } .mt-2 { margin-top: .5rem } .mt-4 { margin-top: 1rem } .flex { display: flex } .aspect-\[27\.5\/6\.98\] { aspect-ratio: 27.5/6.98 } .h-1 { height: .25rem } .h-1\.5 { height: .375rem } .h-10 { height: 2.5rem } .h-11 { height: 2.75rem } .h-16 { height: 4rem } .h-20 { height: 5rem } .h-3 { height: .75rem } .h-3\.5 { height: .875rem } .h-4 { height: 1rem } .h-5 { height: 1.25rem } .h-6 { height: 1.5rem } .h-60 { height: 15rem } .h-9 { height: 2.25rem } .h-\[1\.125rem\] { height: 1.125rem } .h-\[1\.25rem\] { height: 1.25rem } .h-\[1\.625rem\] { height: 1.625rem } .h-\[10\.5rem\] { height: 10.5rem } .h-\[10\.675rem\] { height: 10.675rem } .h-full { height: 100% } .min-h-3 { min-height: .75rem } .min-h-3\.5 { min-height: .875rem } .min-h-4 { min-height: 1rem } .min-h-\[1\.125rem\] { min-height: 1.125rem } .min-h-\[1\.25rem\] { min-height: 1.25rem } .w-10 { width: 2.5rem } .w-11 { width: 2.75rem } .w-16 { width: 4rem } .w-24 { width: 6rem } .w-3 { width: .75rem } .w-3\.5 { width: .875rem } .w-4 { width: 1rem } .w-5 { width: 1.25rem } .w-6 { width: 1.5rem } .w-60 { width: 15rem } .w-72 { width: 18rem } .w-9 { width: 2.25rem } .w-96 { width: 24rem } .w-\[1\.125rem\] { width: 1.125rem } .w-\[1\.25rem\] { width: 1.25rem } .w-\[10\.5rem\] { width: 10.5rem } .w-\[10\.675rem\] { width: 10.675rem } .w-full { width: 100% } .min-w-3 { min-width: .75rem } .min-w-3\.5 { min-width: .875rem } .min-w-4 { min-width: 1rem } .min-w-96 { min-width: 24rem } .min-w-\[1\.125rem\] { min-width: 1.125rem } .min-w-\[1\.25rem\] { min-width: 1.25rem } .max-w-96 { max-width: 24rem } .flex-1 { flex: 1 1 0% } .origin-bottom { transform-origin: bottom } .-translate-x-1\/2 { --tw-translate-x: -50% } .-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-y-1\/2 { --tw-translate-y: -50% } .-rotate-90 { --tw-rotate: -90deg } .-rotate-90, .-rotate-\[135deg\] { 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)) } .-rotate-\[135deg\] { --tw-rotate: -135deg } .rotate-\[135deg\] { --tw-rotate: 135deg } .rotate-\[135deg\], .rotate-\[143deg\] { 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)) } .rotate-\[143deg\] { --tw-rotate: 143deg } .-scale-100 { --tw-scale-x: -1; --tw-scale-y: -1 } .-scale-100, .scale-110 { 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)) } .scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1 } .scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25 } .-scale-x-100, .scale-125 { 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)) } .-scale-x-100 { --tw-scale-x: -1 } .transform { 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)) } @keyframes flashing { 50% { opacity: .5 } } .animate-flashing { animation: flashing 1s cubic-bezier(.4, 0, .6, 1) infinite } .flex-col { flex-direction: column } .items-end { align-items: flex-end } .items-center { align-items: center } .justify-end { justify-content: flex-end } .justify-center { justify-content: center } .justify-between { justify-content: space-between } .gap-1 { gap: .25rem } .gap-2 { gap: .5rem } .gap-2\.5 { gap: .625rem } .gap-3 { gap: .75rem } .gap-4 { gap: 1rem } .gap-6 { gap: 1.5rem } .space-y-2>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: calc(.5rem*var(--tw-space-y-reverse)); margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse))) } .overflow-hidden { overflow: hidden } .overflow-visible { overflow: visible } .whitespace-nowrap { white-space: nowrap } .rounded { border-radius: .25rem } .rounded-l { border-bottom-left-radius: .25rem; border-top-left-radius: .25rem } .border { border-width: 1px } .border-r { border-right-width: 1px } .border-engine { border-color: rgb(var(--engine)) } .border-fuel { border-color: rgb(var(--fuel)) } .border-nitro { border-color: rgb(var(--nitro)) } .border-white\/50 { border-color: hsla(0, 0%, 100%, .5) } .bg-engine { background-color: rgb(var(--engine)) } .bg-engine\/30 { background-color: rgb(var(--engine)/.3) } .bg-fuel { background-color: rgb(var(--fuel)) } .bg-fuel\/30 { background-color: rgb(var(--fuel)/.3) } .bg-main { background-color: rgb(var(--main)) } .bg-nitro { background-color: rgb(var(--nitro)) } .bg-nitro\/30 { background-color: rgb(var(--nitro)/.3) } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255/var(--tw-bg-opacity)) } .bg-white\/20 { background-color: hsla(0, 0%, 100%, .2) } .fill-black\/50 { fill: rgba(0, 0, 0, .5) } .fill-hud\/30 { fill: rgb(var(--hud)/.3) } .fill-rpm { fill: rgb(var(--rpm)) } .fill-rpm\/40 { fill: rgb(var(--rpm)/.4) } .fill-white\/20 { fill: hsla(0, 0%, 100%, .2) } .stroke-black\/50 { stroke: rgba(0, 0, 0, .5) } .stroke-fuel { stroke: rgb(var(--fuel)) } .stroke-fuel\/40 { stroke: rgb(var(--fuel)/.4) } .stroke-hud { stroke: rgb(var(--hud)) } .stroke-hud\/30 { stroke: rgb(var(--hud)/.3) } .stroke-main { stroke: rgb(var(--main)) } .stroke-nitro { stroke: rgb(var(--nitro)) } .stroke-nitro\/40 { stroke: rgb(var(--nitro)/.4) } .stroke-progress-background\/50 { stroke: rgb(var(--progress-background)/.5) } .stroke-progress-circle { stroke: rgb(var(--progress-circle)) } .stroke-red-500\/60 { stroke: rgba(239, 68, 68, .6) } .stroke-rpm { stroke: rgb(var(--rpm)) } .stroke-rpm\/40 { stroke: rgb(var(--rpm)/.4) } .stroke-white\/5 { stroke: hsla(0, 0%, 100%, .05) } .px-2 { padding-left: .5rem; padding-right: .5rem } .px-2\.5 { padding-left: .625rem; padding-right: .625rem } .pl-12 { padding-left: 3rem } .pl-\[35\%\] { padding-left: 35% } .pr-3 { padding-right: .75rem } .text-center { text-align: center } .text-right { text-align: right } .font-rajdhani { font-family: Rajdhani, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji } .text-4xl { font-size: 2.25rem; line-height: 2.5rem } .text-5xl { font-size: 3rem; line-height: 1 } .text-sm { font-size: .875rem; line-height: 1.25rem } .text-xs { font-size: .75rem; line-height: 1rem } .font-bold { font-weight: 700 } .font-medium { font-weight: 500 } .font-semibold { font-weight: 600 } .uppercase { text-transform: uppercase } .leading-3 { line-height: .75rem } .leading-\[1\.125rem\] { line-height: 1.125rem } .tracking-widest { letter-spacing: .1em } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0/var(--tw-text-opacity)) } .text-engine { color: rgb(var(--engine)) } .text-fuel { color: rgb(var(--fuel)) } .text-green-500 { --tw-text-opacity: 1; color: rgb(34 197 94/var(--tw-text-opacity)) } .text-nitro { color: rgb(var(--nitro)) } .text-pointer { color: rgb(var(--pointer)) } .text-progress-letter { color: rgb(var(--progress-letter)) } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity)) } .text-white\/20 { color: hsla(0, 0%, 100%, .2) } .text-white\/50 { color: hsla(0, 0%, 100%, .5) } .text-white\/75 { color: hsla(0, 0%, 100%, .75) } .opacity-50 { opacity: .5 } .opacity-75 { opacity: .75 } .drop-shadow-light { --tw-drop-shadow: drop-shadow(0.0625rem 0.0625rem 0.0625rem rgba(0, 0, 0, .5)) } .drop-shadow-light, .grayscale { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) } .grayscale { --tw-grayscale: grayscale(100%) } .transition { transition-duration: .15s; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } .transition-all { transition-duration: .15s; transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } .transition-transform { transition-duration: .15s; transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1) } :root { font-size: 1rem } @media screen and (max-height:600px), screen and (max-width:800px) { :root { font-size: .3rem } } @media screen and (min-width:800px) and (min-height:600px) { :root { font-size: .425rem } } @media screen and (min-width:1000px) and (min-height:700px) { :root { font-size: .55rem } } @media screen and (min-width:1100px) and (min-height:700px) { :root { font-size: .6rem } } @media screen and (min-width:1300px) and (min-height:700px) { :root { font-size: .7rem } } @media screen and (min-width:1400px) and (min-height:700px) { :root { font-size: .75rem } } @media screen and (min-width:1600px) and (min-height:800px) { :root { font-size: .8rem } } @media screen and (min-width:1750px) and (min-height:900px) { :root { font-size: .9rem } } @media screen and (min-width:1850px) and (min-height:1000px) { :root { font-size: 1rem } } * { letter-spacing: .025em; outline: 2px solid transparent; outline-offset: 2px; -webkit-user-select: none; -moz-user-select: none; user-select: none } * input { -webkit-user-select: text; -moz-user-select: text; user-select: text } #app, body, html { height: 100%; overflow: hidden; width: 100% } body { --tw-text-opacity: 1; color: rgb(255 255 255/var(--tw-text-opacity)) } .slide-enter-active[data-v-d1312b78], .slide-leave-active[data-v-d1312b78], .slide-move[data-v-d1312b78] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-d1312b78], .slide-leave-to[data-v-d1312b78] { opacity: 0; transform: translate(100%) } .slide-enter-active[data-v-32cde319], .slide-leave-active[data-v-32cde319], .slide-move[data-v-32cde319] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-32cde319], .slide-leave-to[data-v-32cde319] { opacity: 0; transform: translate(100%) } .slide-enter-active[data-v-06405f79], .slide-leave-active[data-v-06405f79], .slide-move[data-v-06405f79] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-06405f79], .slide-leave-to[data-v-06405f79] { opacity: 0; transform: translate(100%) } .slide-enter-active[data-v-8e411f02], .slide-leave-active[data-v-8e411f02], .slide-move[data-v-8e411f02] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-8e411f02], .slide-leave-to[data-v-8e411f02] { opacity: 0; transform: translate(100%) } .slide-enter-active[data-v-00c3d5df], .slide-leave-active[data-v-00c3d5df], .slide-move[data-v-00c3d5df] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-00c3d5df], .slide-leave-to[data-v-00c3d5df] { opacity: 0; transform: translate(100%) } .slide-enter-active[data-v-14c9a901], .slide-leave-active[data-v-14c9a901], .slide-move[data-v-14c9a901] { transition: all .3s cubic-bezier(.4, 0, .2, 1) } .slide-enter-from[data-v-14c9a901], .slide-leave-to[data-v-14c9a901] { opacity: 0; transform: translate(100%) } .fade-enter-active[data-v-278f2724], .fade-leave-active[data-v-278f2724] { transition: opacity .3s cubic-bezier(.4, 0, .2, 1) } .fade-enter-from[data-v-278f2724], .fade-leave-to[data-v-278f2724] { opacity: 0 } .fade-enter-active[data-v-29ed8458], .fade-leave-active[data-v-29ed8458] { transition: opacity .3s cubic-bezier(.4, 0, .2, 1) } .fade-enter-from[data-v-29ed8458], .fade-leave-to[data-v-29ed8458] { opacity: 0 }