:root {
  --felt: #4a1d1f;
  --felt-deep: #260d0f;
  --ink: #2d1b1c;
  --paper: #fff7f3;
  --gold: #ffd166;
  --red: #06d6a0;
  --shadow: 0 28px 64px color-mix(in srgb, #4a1d1f 38%, transparent);
}
body {
  background:
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 19%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, white), color-mix(in srgb, var(--felt) 6%, var(--paper)));
}
.site-header {
  background: color-mix(in srgb, var(--felt-deep) 95%, black);
  border-bottom-color: color-mix(in srgb, var(--gold) 42%, transparent);
}
.brand-mark {
  border-radius: 7px;
  background: linear-gradient(129deg, var(--gold), var(--red));
}
.hero {
  min-height: 72vh;
  grid-template-columns: minmax(0,9/10fr) minmax(300px,13/10fr);
  background:
    linear-gradient(146deg, color-mix(in srgb, var(--felt) 94%, black), color-mix(in srgb, var(--red) 38%, var(--felt))),
    url("../img/felt-pattern.svg");
}
.hero h1 {
  font-size: clamp(38px, 5vw, 64px);
}
.hero-art {
  transform: rotate(3deg) scale(1.03);
}
.quick-panel a:nth-child(odd),
.info-card:nth-child(odd),
.download-card {
  border-radius: 4px;
}
.quick-panel a:nth-child(even),
.info-card:nth-child(even) {
  border-radius: 7px;
}
.band {
  background: color-mix(in srgb, var(--felt) 13%, var(--paper));
}
.band.compact,
.service-links-section,
.home-faq {
  background: color-mix(in srgb, var(--gold) 6%, var(--paper));
}
.info-card::before {
  background: linear-gradient(90deg, var(--red), var(--gold), var(--felt));
}
.service-link:hover,
.info-card:hover,
.download-card:hover {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}
.footer-grid h2::after {
  content: "58lzj03.cn";
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 400;
}
@media (min-width: 981px) {
  body.variant-studio .cards.four {
    grid-template-columns: 10/10fr 12/10fr 10/10fr 12/10fr;
  }
}