:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { font-family: 'Bricolage Grotesque', system-ui, sans-serif; background: #0f0f11; }
.font-display { font-family: 'Bricolage Grotesque', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.animate-fadeIn { animation: fadeIn 0.4s ease both; }

@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -8px) scale(0.9); } 50% { transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.animate-pop { animation: pop 0.25s ease both; }

@keyframes sparkle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
}
.animate-sparkle { animation: sparkle 0.9s ease-out forwards; }