:root {
  --bg: #070f29;
  --text: #faf5ef;
  --muted: #b3bfd8;
  --border: #ffffff24;
  --panel: #101d3be8;
  --panel-solid: #122042;
  --accent: #f17ae2;
  --shadow: 0 18px 48px #0003;
}
body { background: #070f29; }
.logo-background { background: radial-gradient(ellipse at 65% 45%, #09142d, #030817 75%); }
body::before { display: none; }
.logo-background { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.logo-background canvas { width: 100%; height: 100%; display: block; }
.logo-background__fallback { position: absolute; width: min(44vw, 620px); right: 4%; top: 18%; }
.logo-background.is-ready .logo-background__fallback { display: none; }
main, .footer { position: relative; z-index: 1; }
.topbar { background: #070f29c9; border-color: var(--border); }
.theme-switcher__menu { background: #122042; }
.hero { min-height: calc(100svh - 72px); display: grid; align-items: center; }
.hero__grid { width: min(100% - 32px, var(--max-width)); }
.hero__content h1 { font-size: clamp(46px, 6.5vw, 88px); }
.hero__visual { visibility: hidden; min-height: 460px; }
.hero__content { text-shadow: 0 2px 24px #070f29; }
.hero::after { background: linear-gradient(90deg, transparent, #ffffff30, transparent); }
.chip, .skills li { background: #142242e8; }
.card { background: #101d3bed; backdrop-filter: blur(16px); }
.metrics__grid, .about-copy { background: #070f29c9; backdrop-filter: blur(12px); border-radius: 8px; }
.about-copy { padding: 16px; }
.section__header { width: fit-content; padding: 20px; border-radius: 8px; background: #070f29dc; }
.github__header { width: 100%; }
.projects--featured > .project { grid-column: span 4; }
@media (max-width: 940px) {
  .projects--featured { grid-template-columns: 1fr; }
  .projects--featured > .project { grid-column: 1; }
}
.footer { background: #070f29eb; }
.scroll-cue { display: inline-flex; gap: 20px; align-items: center; margin-top: 52px; color: var(--muted); font-size: 13px; }
.scroll-cue span { color: var(--text); font-size: 24px; }
@media (max-width: 940px) {
  .hero { padding-top: 48px; align-items: start; }
  .hero__grid { gap: 0; }
  .hero__content { max-width: 620px; }
  .hero__visual { min-height: 48svh; }
  .scroll-cue { margin-top: 20px; }
  .logo-background__fallback { width: 76vw; right: 12%; top: 48%; }
}