html,
body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.hero--retired[hidden],
.skills-ticker--retired[hidden] {
  display: none !important;
}

.home-simple-main {
  width: 100%;
}

#home {
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #1A1A1A;
  --color-text-primary: #F7F7F7;
  --color-text-secondary: #8C8984;
  --color-border: #2A2A2A;
  --color-accent: #FF5900;
  overflow: hidden;
  min-height: 100dvh;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.hero-scene {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 480px;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-text-primary);
  /* clip-path (unlike overflow) also clips the fixed pin, so the section's
     bottom edge wipes over the pinned scene as it scrolls away. */
  clip-path: inset(0);
}

.hero-scene-pin {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100dvh;
  min-height: 480px;
}

.hero-scene canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: pan-y;
}