@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 2%;
--foreground: 0 0% 96%;
--card: 0 0% 7%;
--card-foreground: 0 0% 96%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 96%;
--primary: 186 100% 50%;
--primary-foreground: 0 0% 2%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 96%;
--muted: 0 0% 12%;
--muted-foreground: 220 6% 60%;
--accent: 186 100% 50%;
--accent-foreground: 0 0% 2%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 220 10% 17%;
--input: 220 10% 17%;
--ring: 186 100% 50%;
--radius: 0.25rem;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-family: "JetBrains Mono", monospace;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}

@layer base {
[data-debug-wrapper="true"] {
display: contents !important;
}

[data-debug-wrapper="true"] > * {  
    margin-left: inherit;  
    margin-right: inherit;  
    margin-top: inherit;  
    margin-bottom: inherit;  
    padding-left: inherit;  
    padding-right: inherit;  
    padding-top: inherit;  
    padding-bottom: inherit;  
    column-gap: inherit;  
    row-gap: inherit;  
    gap: inherit;  
    border-left-width: inherit;  
    border-right-width: inherit;  
    border-top-width: inherit;  
    border-bottom-width: inherit;  
    border-left-style: inherit;  
    border-right-style: inherit;  
    border-top-style: inherit;  
    border-bottom-style: inherit;  
    border-left-color: inherit;  
    border-right-color: inherit;  
    border-top-color: inherit;  
    border-bottom-color: inherit;  
}

}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}

::selection {
background: #00f0ff;
color: #050505;
}

::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #050505;
}
::-webkit-scrollbar-thumb {
background: #2a2d34;
border: 2px solid #050505;
}
::-webkit-scrollbar-thumb:hover {
background: #00f0ff;
}

.font-display {
font-family: "Cabinet Grotesk", sans-serif;
}

.text-outline {
-webkit-text-stroke: 1px rgba(245, 245, 245, 0.22);
color: transparent;
}

.text-outline-accent {
-webkit-text-stroke: 1px rgba(0, 240, 255, 0.45);
color: transparent;
}

.noise-overlay {
position: fixed;
inset: 0;
z-index: 110;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes marquee-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.animate-marquee {
animation: marquee-scroll 50s linear infinite;
}

@keyframes blink-caret {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
.animate-caret {
animation: blink-caret 1.1s steps(1) infinite;
}

.hud-corner {
position: absolute;
width: 14px;
height: 14px;
border-color: rgba(0, 240, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
.animate-marquee {
animation: none;
}
}




import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "@/index.css";
import App from "@/App";

const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 60_000,
refetchOnWindowFocus: false,
},
},
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</React.StrictMode>,
);