:root{--color-base:#f8fafc;--color-surface:#fff;--color-surface2:#f1f5f9;--color-border:#e2e8f0;--color-border-darker:#cbd5e1;--color-text-main:#0f172a;--color-text-muted:#475569;--color-glass:transparent;--grid-color:#cbd5e1;--accent:#7c3aed;--accent-soft:rgb(124 58 237 / .3);--accent-hover:rgb(124 58 237 / .4)}.dark{--color-base:#030303;--color-surface:#0d0d0d;--color-surface2:#141414;--color-border:#1a1a1a;--color-border-darker:#222;--color-text-main:#fff;--color-text-muted:#9ca3af;--grid-color:#1a1a1a}html{scroll-behavior:smooth}body{background:var(--color-base);color:var(--color-text-main);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}section,main>div{content-visibility:auto;contain-intrinsic-size:1px 720px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--color-base)}::-webkit-scrollbar-thumb{background:var(--color-border-darker)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}::selection{background:var(--accent-soft);color:var(--color-text-main)}.grid-bg{background-image:radial-gradient(var(--grid-color) 1px,transparent 1px);background-size:40px 40px;opacity:.28}.line-divider{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--accent-soft),transparent)}.border-tech{border:1px solid var(--color-border)}@media (hover:hover){.border-tech{transition:border-color .2s ease}.border-tech:hover{border-color:var(--accent-hover)}.card-accent::before{transition:background .2s ease}.card-accent:hover::before{background:var(--accent)}}.card-accent::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:transparent}.glass-header{background:rgba(255, 255, 255, 0.72);border-bottom:1px solid var(--color-border)}.dark .glass-header{background:rgba(3, 3, 3, 0.72)}@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){.glass-header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.text-sm{font-size:1.1rem;line-height:1.25rem}.leading-tight{line-height:1.5}@media (min-width:768px){.md\:text-base{font-size:1.1rem;line-height:1.5rem}}@media (max-width:767px){.text-sm{font-size:1.2rem}.text-xs{font-size:1rem;line-height:1.2rem}}@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
h1, h2, h3, h4, h5, h6, .font-orbitron, header, footer { font-family: 'Orbitron', sans-serif; }