.steam-blueprint-page {
  --bp-ink: #15110a;
  --bp-muted: rgba(21, 17, 10, .74);
  --bp-blue: #cbb36c;
  --bp-blue-strong: #cbb36c;
  --bp-paper: #fff8e8;
  --bp-card: rgba(255, 248, 232, .9);
  --bp-line: rgba(21, 17, 10, .12);
  --bp-dark: #0b0b0c;
  --bp-accent: #cbb36c;
  background:
    radial-gradient(circle at 15% 2%, rgba(203, 179, 108, .3), transparent 25rem),
    linear-gradient(135deg, #fff8e8 0%, #fff8e8 100%);
}

.steam-template-family .steam-blueprint-header {
  border-color: rgba(203, 179, 108, .28);
  background: rgba(11, 11, 12, .9);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.steam-template-family .steam-blueprint-menu-toggle {
  border-color: rgba(255, 248, 232, .78);
  background: rgba(255, 248, 232, .86);
  color: var(--bp-ink);
}

.steam-template-family .steam-blueprint-menu-drawer {
  background: #0b0b0c;
}

.steam-template-family .steam-blueprint-menu-drawer__actions a,
.steam-template-family .steam-blueprint-menu-drawer__main span,
.steam-template-family .steam-blueprint-menu-drawer__cards a {
  border-color: rgba(203, 179, 108, .28);
}

.steam-template-family .steam-blueprint-menu-drawer__actions a::before {
  background: #17d66f;
  box-shadow: 0 0 0 5px rgba(23, 214, 111, .18);
}

.steam-template-family .steam-blueprint-menu-drawer__actions a.steam-blueprint-menu-drawer__action--directions::before {
  background: #cb2c2c;
  box-shadow: 0 0 0 5px rgba(203, 44, 44, .18);
}

.steam-template-family .steam-blueprint-menu-toggle:focus-visible,
.steam-template-family .steam-blueprint-menu-drawer a:focus-visible,
.steam-template-family .steam-blueprint-menu-drawer button:focus-visible {
  outline: 3px solid #cbb36c;
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .steam-blueprint-page.steam-home-v2 {
    --steam-home-v2-mobile-bg:
      radial-gradient(circle at 14% 0%, rgba(203, 179, 108, .3), transparent 31rem),
      linear-gradient(135deg, #fff8e8 0%, #fff8e8 100%);
    background: var(--steam-home-v2-mobile-bg) fixed;
  }
}