/* Critical fallback CSS to restore basic layout when Tailwind hasn't loaded yet */
:root{--theme-color:#4f46e5}
html,body,#root{height:100%}
body{background:#0a0a0a;color:#fff;font-family:Rubik,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0}

/* Basic utility fallbacks used by the app */
.fixed{position:fixed}
.relative{position:relative}
.top-0{top:0}
.top-4{top:1rem}
.left-4{left:1rem}
.right-4{right:1rem}
.left-1\/2{left:50%}
.transform{transform:translateX(-50%)}
.-translate-x-1\/2{transform:translateX(-50%)}
.z-50{z-index:50}
.z-10{z-index:10}
.hidden{display:none}
.block{display:block}
.flex{display:flex}
.items-center{align-items:center}
.justify-center{justify-content:center}
.gap-1{gap:0.25rem}
.gap-2{gap:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.p-4{padding:1rem}
.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:0.75rem}
.text-white{color:#fff}
.text-white\/70{color:rgba(255,255,255,0.7)}
.bg-black\/80{background:rgba(0,0,0,0.8)}
.bg-black\/90{background:rgba(0,0,0,0.9)}
.backdrop-blur-xl{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.border{border:1px solid rgba(255,255,255,0.06)}
.border-white\/20{border-color:rgba(255,255,255,0.2)}
.shadow-2xl{box-shadow:0 10px 30px rgba(0,0,0,0.6)}

/* Canvas background positioning */
#threecanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* App container and main layout fallback */
.app-background{position:relative;min-height:100vh;display:flex;flex-direction:column}
main{padding-top:72px;flex:1;position:relative;z-index:10}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

/* Header fallback: keep logo at top-left and pill centered */
.fixed.top-4.left-4{display:flex;align-items:center;gap:0.5rem}
.fixed.left-1\/2{left:50%;transform:translateX(-50%)}

/* Nav pill basics */
.nav-trigger{padding:0.4rem 0.75rem;border-radius:9999px;background:transparent;color:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.04);margin-right:0.25rem}
.nav-trigger:hover{background:rgba(255,255,255,0.06);color:#fff}

/* Side menu fallback */
.fixed.top-4.right-4{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem;border-radius:9999px;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);color:#fff}

/* Footer fallback */
footer{padding:2rem 1rem;background:transparent;color:rgba(255,255,255,0.6)}

/* Prose fallback for content readability */
.prose, .prose-invert{color:rgba(255,255,255,0.9);line-height:1.6}
h1{font-size:2rem;margin:0 0 1rem;font-weight:800}
h2{font-size:1.25rem;margin-top:1.5rem}

/* Responsive helper: show lg:block replacements */
@media(min-width:1024px){.lg\:block{display:block}.hidden\ lg\:block{display:block}}

/* Misc small utilities used by components */
.text-sm{font-size:0.875rem}
.text-lg{font-size:1.125rem}
.font-semibold{font-weight:600}
.font-black{font-weight:900}

/* Ensure interactive elements are on top of canvas */
[role="status"], header, main, footer, nav, button{position:relative;z-index:10}