:root {
  --bg: #0b0b10;
  --panel: #15151d;
  --ink: #f9f8ff;
  --muted: #b0adbf;
  --gold: #bba6ff;
  --line: #302d3d;
  --serif: var(--sans);
}
body { background: var(--bg); }
.header { height: 76px; }
.header nav { font-weight: 650; font-size: 14px; }
.brand svg { stroke: var(--gold); }
.bag span { border-color: #766b94; }
h1, h2 { font-weight: 770; letter-spacing: -.065em; }
h1 em, h2 em { font: inherit; color: var(--gold); }
.eyebrow { font-weight: 750; letter-spacing: .15em; }
.hero {
  max-width: none;
  min-height: 620px;
  padding-top: 60px;
  padding-bottom: 60px;
  background: radial-gradient(ellipse at 79% 40%, #382358 0%, #171327 34%, #0b0b10 72%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { font-size: clamp(62px, 7.8vw, 126px); line-height: .93; }
.hero .intro { color: #cdc8db; font-size: 16px; max-width: 410px; }
.hero-footnote, .art-label, .art-caption { color: #b6adc9; }
.studio-glow { background: radial-gradient(ellipse at center, #9b71ee46, transparent 60%); }
.hero-art { height: 480px; }
.hero-art img { border: 1px solid #8d77b85c; border-radius: 5px; }
.hero-strike { width: 91%; top: 60px; left: 3%; transform: rotate(-6deg); }
.hero-velvet { width: 88%; top: 198px; left: 11%; transform: rotate(4deg); }
.hero-reel { width: 102%; top: 360px; left: 1%; transform: rotate(-3deg); }
.button { border-radius: 5px; font-size: 13px; font-weight: 750; }
.gold, .play { color: #181126; background: var(--gold); }
.gold:hover { background: #d4c7ff; }
.text-link { border-color: #9a83cf; }
.compatibility { color: #c9c3dc; }
.compatibility span:first-child { color: var(--muted); }
.filters button { font-weight: 650; border-radius: 5px; }
.filters button.active { color: #eee7ff; background: #241b3e; border-color: #7763a8; }
.product-card { background: #15151e; border-radius: 8px; }
.product-art { background: radial-gradient(ellipse at center, #3e2c5b, #1c192b 65%, #14131e); }
.product-card:nth-child(2n) .product-art { background: radial-gradient(ellipse at center, #303958, #191d2c 65%, #13151e); }
.product-top h3, .detail-title, .cart-item h3 { font-weight: 750; }
.product-index, .audio-note, .footer-bottom { color: var(--muted); }
.product-bottom .add { border-color: #7a65a7; border-radius: 4px; }
.collection {
  background: radial-gradient(ellipse at 18% 38%, #423066, transparent 70%), #181426;
  border-color: #4b3b65;
  border-radius: 9px;
}
.collection-stamp, .collection-copy > p, .bundle-price > div span, .included li span { color: #c4bad8; }
.included li { border-color: #3a304c; }
.collection-stamp strong { font-weight: 800; }
.demo { border-color: #554477; }
.waveform span { background: var(--gold); }
.ab, .demo-product select, dialog { background: #191624; }
.ab button.active { background: var(--gold); color: #181126; }
.next { background: #171320; }
.toast { background: var(--gold); color: #181126; }
@media (max-width: 1100px) {
  .hero { min-height: 565px; }
  .hero-art { height: 425px; }
  .hero-velvet { top: 175px; }
  .hero-reel { top: 315px; }
}
@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 44px; padding-bottom: 0; }
  .hero h1 { font-size: clamp(54px, 13vw, 84px); }
  .hero-art { height: clamp(245px, 55vw, 410px); }
  .hero-strike { top: 40px; width: 88%; }
  .hero-velvet { top: 39%; width: 84%; }
  .hero-reel { top: 70%; width: 98%; }
}