:root {
            --glass-bg-light: rgba(255, 255, 255, 0.85);
            --glass-bg-dark: rgba(30, 41, 59, 0.85);
        }
        body { -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
        
        .glass { background: var(--glass-bg-light); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0,0,0,0.05); }
        .dark .glass { background: var(--glass-bg-dark); border-bottom: 1px solid rgba(255,255,255,0.05); }
        
        .glass-card { background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); }
        .dark .glass-card { background: linear-gradient(145deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.6) 100%); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); }

        .bg-aurora { background: linear-gradient(-45deg, #0f172a, #1e1b4b, #064e3b, #0f172a); background-size: 400% 400%; animation: aurora 15s ease infinite; }
        .light .bg-aurora { background: linear-gradient(-45deg, #f8fafc, #e0e7ff, #ccfbf1, #f8fafc); background-size: 400% 400%; }

        .hover-lift { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
        .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

        .ripple { position: relative; overflow: hidden; }
        .ripple::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; }
        .ripple:active::after { transform: scale(0, 0); opacity: .3; transition: 0s; }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .dark ::-webkit-scrollbar-thumb { background: #475569; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .pattern-dots { background-image: radial-gradient(rgba(15, 23, 42, 0.1) 1px, transparent 1px); background-size: 20px 20px; }
        .dark .pattern-dots { background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); }
        
        .prose pre { background-color: #0f172a !important; color: #e2e8f0; border-radius: 0.75rem; padding: 1.25rem; font-family: 'Fira Code', monospace; font-size: 0.875rem; overflow-x: auto; }
        
        #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }