:root { --bg: #050101; --panel: rgba(20, 0, 0, 0.8); --primary: #ff0000; --dim: #660000; --text: #e0e0e0; --muted: #888; --border: #330000; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { scrollbar-width: thin; scrollbar-color: var(--dim) var(--bg); }

.grid { position: fixed; inset: -50%; width: 200%; height: 200%; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.4; transform: perspective(1000px) rotateX(10deg); pointer-events: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

.topnav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { color: #ddd; text-decoration: none; border: 1px solid var(--dim); padding: 5px 10px; border-radius: 2px; text-transform: uppercase; font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.5); transition: 0.2s; }
.socials a:hover { color: #000; background: var(--primary); border-color: var(--primary); box-shadow: 0 0 8px var(--primary); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .grid { animation: none !important; }
}