* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
    body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0f172a; font-family: 'Inter', sans-serif; }
    #root { width: 100%; height: 100%; position: relative; }
    canvas { display: block; pointer-events: none; }
    .icon { width: 1.25rem; height: 1.25rem; display: inline-block; background: currentColor; mask-size: contain; -webkit-mask-size: contain; }
    .pointer-events-auto { pointer-events: auto; }
    .tabular-nums { font-variant-numeric: tabular-nums; }
    /* animations similar to react framer-motion */
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes zoom-in { from { transform: scale(0.95); } to { transform: scale(1); } }
    @keyframes slide-in-bottom { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-in { animation-duration: 0.3s; animation-fill-mode: forwards; }
    .fade-in { animation-name: fade-in; }
    .zoom-in { animation-name: zoom-in; }
    .slide-in-from-bottom-10 { animation-name: slide-in-bottom; }
    .duration-500 { animation-duration: 0.5s; }
    /* prevent flicker */
    .no-flicker { will-change: transform, opacity; backface-visibility: hidden; }