/* Tailwind v4 uses native cascade layers, where unlayered rules beat every utility class.
           Placing these in the utilities layer (after tailwind.css) keeps the v3 behavior: they
           compete with utility classes by specificity and source order, exactly as before. */
        @layer utilities {
            /* Editorial theme: serif display, sans body, warm near-black canvas, ivory accent */
            :root {
                --bg: #0f0e0d;
                --fg: #fafaf9;
                --muted: #9a958e;
                --line: rgba(250, 250, 249, 0.12);
            }

            /* Display type: serif, regular weight, tight tracking */
            h1, h2, .font-cascadia {
                font-family: 'Newsreader', ui-serif, Georgia, serif;
                font-weight: 400 !important;
                letter-spacing: -0.02em;
            }
            h1 .font-bold, h1 .font-black, h1 .font-semibold, h2 .font-bold, h2 .font-black, h2 .font-semibold {
                font-weight: 400 !important;
            }
            h3, h4 {
                font-weight: 500 !important;
                letter-spacing: -0.01em;
            }
            h3.font-cascadia, h4.font-cascadia, .font-cascadia h3 {
                font-weight: 400 !important;
            }

            /* Former outlined words become the serif italic used for emphasis */
            .outline-text {
                font-family: 'Newsreader', ui-serif, Georgia, serif;
                font-style: italic;
                color: var(--muted);
            }

            /* Small uppercase labels read as quiet captions rather than terminal output */
            .tracking-widest, [class*="tracking-[0."] {
                letter-spacing: 0.12em !important;
            }

            /* Install commands and other literal strings keep a monospace face */
            [data-raw], code, pre, kbd, samp {
                font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
            }

            /* Quiet motion: no pulsing or bouncing decoration */
            .animate-pulse, .animate-bounce {
                animation: none !important;
            }

            ::selection {
                background: var(--fg);
                color: var(--bg);
            }
        
            /* Hide Scrollbar but keep functionality */
            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .no-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            /* Custom Scrollbar for the terminal */
            .custom-scrollbar::-webkit-scrollbar {
                width: 8px;
            }
            .custom-scrollbar::-webkit-scrollbar-track {
                background: #111;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb {
                background: #333;
                border-radius: 4px;
            }
            .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                background: #555;
            }

            body {
                background-color: var(--bg);
                color: var(--fg);
                font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
                overflow-x: hidden;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* Mobile optimizations */
            @media (max-width: 768px) {
                * {
                    -webkit-tap-highlight-color: transparent;
                }
            
                /* Improve touch targets */
                button, a {
                    min-height: 44px;
                    min-width: 44px;
                }
            
                /* Better text rendering on mobile */
                body {
                    text-rendering: optimizeLegibility;
                }
            }

            /* Touch manipulation for better mobile performance */
            .touch-manipulation {
                touch-action: manipulation;
            }

            @keyframes marquee {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }

            @keyframes fadeInUp {
                0% {
                    opacity: 0;
                    transform: translateY(30px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }