:root {
  --sx-bg: #120718;
  --sx-bg-1: #2a1037;
  --sx-panel: rgba(8, 4, 14, 0.92);
  --sx-line: rgba(190, 124, 255, 0.22);
  --sx-teal: #b07cff;
  --sx-purple: #a855f7;
  --sx-pink: #e879f9;
  --sx-red: #f43f5e;
  --sx-text: #f3e8ff;
  --sx-mute: #9b8aad;
  --sx-display: "Bebas Neue", "Barlow Condensed", sans-serif;
  --sx-body: "Space Grotesk", Inter, sans-serif;
  --sx-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
}
@keyframes syrupBreathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.035); }
}
@keyframes vialDrop {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sx-wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.sx-shell {
  background:
    radial-gradient(ellipse at 30% 10%, rgba(140, 60, 255, 0.28), transparent 45%),
    radial-gradient(ellipse at 80% 0%, rgba(200, 100, 255, 0.16), transparent 40%),
    linear-gradient(175deg, #2a1040, #160828 42%, #0c0418 85%);
  border: 1px solid var(--sx-line);
  border-radius: 18px;
  padding: 28px 22px 22px;
  color: var(--sx-text);
  font-family: var(--sx-body);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.sx-logo {
  display: block;
  width: min(420px, 86%);
  height: auto;
  margin: 0 0 14px;
  filter: drop-shadow(0 10px 30px rgba(140, 60, 255, 0.45));
}
.sx-kicker {
  font-family: var(--sx-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sx-pink);
  margin: 0 0 8px;
}
.sx-title {
  font-family: var(--sx-display);
  font-size: clamp(42px, 7vw, 68px);
  letter-spacing: 0.04em;
  line-height: 0.9;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.sx-title span { color: var(--sx-teal); }
.sx-lede {
  color: var(--sx-mute);
  font-size: 15px;
  max-width: 48em;
  margin: 0 0 18px;
  line-height: 1.55;
}
.sx-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sx-tracks button {
  font-family: var(--sx-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--sx-line);
  background: rgba(0,0,0,.28);
  color: var(--sx-mute);
  cursor: pointer;
}
.sx-tracks button.is-on {
  background: rgba(176, 124, 255, 0.18);
  border-color: var(--sx-teal);
  color: var(--sx-text);
  box-shadow: 0 0 20px rgba(176, 124, 255, 0.12);
}
.sx-stage {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 16px;
  align-items: stretch;
}
.sx-player {
  background: var(--sx-panel);
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sx-player h3 {
  font-family: var(--sx-display);
  font-size: 30px;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}
.sx-blurb { color: var(--sx-mute); font-size: 13px; margin: 0 0 8px; }
.sx-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sx-play, .sx-cta {
  font-family: var(--sx-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(190, 124, 255, 0.45);
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.sx-ab { display: flex; gap: 6px; margin-left: auto; flex: 1; }
.sx-ab button {
  flex: 1;
  padding: 8px;
  border: 1px solid rgba(190, 124, 255, 0.2);
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  color: var(--sx-mute);
  font-family: var(--sx-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
}
.sx-ab button.is-on {
  border-color: var(--sx-teal);
  background: rgba(176, 124, 255, 0.12);
  color: var(--sx-text);
  box-shadow: 0 0 20px rgba(176, 124, 255, 0.1);
}
.sx-ab .ab-label { display: block; font-size: 13px; font-weight: 700; }
.sx-ab .ab-desc { font-size: 8px; opacity: 0.6; }
.sx-time { font-family: var(--sx-mono); font-size: 11px; color: var(--sx-mute); width: 100%; }
.sx-scrub {
  height: 6px;
  background: rgba(168, 85, 247, 0.18);
  border-radius: 99px;
  cursor: pointer;
  overflow: hidden;
}
.sx-scrub > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sx-purple), var(--sx-red));
}
.sx-meta {
  font-family: var(--sx-mono);
  font-size: 10px;
  color: var(--sx-mute);
  letter-spacing: 0.06em;
}
.sx-rack-wrap {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--sx-line);
  border-radius: 14px;
  overflow: hidden;
  min-height: 280px;
}
.sx-rack-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--sx-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sx-mute);
}
.sx-rack {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 240px;
  padding: 28px 16px 18px;
  background:
    linear-gradient(to bottom, transparent 82%, rgba(0,0,0,0.55) 100%);
  box-shadow: inset 0 -2px 0 rgba(184,210,228,0.08);
}
.sx-rack::-webkit-scrollbar { height: 5px; }
.sx-rack::-webkit-scrollbar-thumb {
  background: rgba(184, 210, 228, 0.15);
  border-radius: 999px;
}
.sx-vial {
  flex: 0 0 42px;
  min-width: 42px;
  height: 88%;
  position: relative;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px 6px 10px 10px;
  cursor: pointer;
  overflow: visible;
  padding: 0;
  color: inherit;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 17px,
      rgba(255,255,255,0.055) 17px, rgba(255,255,255,0.055) 18px
    ),
    linear-gradient(180deg, rgba(16,26,36,0.92) 0%, rgba(6,10,14,0.96) 100%);
  box-shadow:
    inset 2px 0 5px rgba(255,255,255,0.05),
    inset -1px 0 3px rgba(255,255,255,0.03),
    0 8px 24px rgba(0,0,0,0.55);
  transition: flex-basis .3s cubic-bezier(.34,1.56,.64,1), min-width .3s cubic-bezier(.34,1.56,.64,1), transform .25s ease, border-color .2s ease, box-shadow .2s ease;
  animation: vialDrop .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--strip-order, 0) * 0.028s);
}
.sx-vial:hover,
.sx-vial.is-on {
  flex-basis: 78px;
  min-width: 78px;
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--strain-color, #b58cff) 70%, white);
  box-shadow:
    inset 2px 0 5px rgba(255,255,255,0.06),
    0 0 0 1px color-mix(in srgb, var(--strain-color, #b58cff) 55%, transparent),
    0 12px 28px rgba(0,0,0,0.55);
}
.sx-vial::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  right: -3px;
  height: var(--fill-base, 48%);
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.38) 0%,
      rgba(255,255,255,0.14) 18%,
      transparent 42%,
      transparent 72%,
      rgba(0,0,0,0.12) 100%
    ),
    linear-gradient(to top,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.18) 22%,
      transparent 55%
    ),
    var(--strain-color, #b58cff);
  border-radius: 52% 48% 0 0 / 20px 14px 0 0;
  z-index: 0;
  transform-origin: 50% 100%;
  animation: syrupBreathe calc(4.2s + var(--strip-order, 0) * 0.4s) ease-in-out infinite;
  transition: height 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-vial:hover::before,
.sx-vial.is-on::before {
  height: var(--fill-hover, 62%);
}
.sx-vial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.2) 0%,
      rgba(255,255,255,0.07) 5%,
      transparent 18%,
      transparent 78%,
      rgba(255,255,255,0.04) 93%,
      rgba(255,255,255,0.14) 100%
    ),
    linear-gradient(to bottom,
      rgba(255,255,255,0.15) 0%,
      rgba(255,255,255,0.04) 6%,
      transparent 16%
    );
}
.sx-cap {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 18px;
  border-radius: 8px 8px 4px 4px;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 100%);
  border: 1px solid rgba(32,32,32,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 7px 13px rgba(0,0,0,0.3);
}
.sx-cap i {
  position: absolute;
  inset: 4px 3px 2px;
  border-radius: inherit;
  background: repeating-linear-gradient(
    to right,
    rgba(20,20,20,0.82) 0px,
    rgba(20,20,20,0.82) 1px,
    rgba(102,102,102,0.6) 1px,
    rgba(102,102,102,0.6) 3px,
    rgba(220,220,220,0.42) 3px,
    rgba(220,220,220,0.42) 5px
  );
  opacity: 0.88;
}
.sx-vial-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 5;
  padding: 0 4px;
  font-family: var(--sx-mono);
  font-size: 8px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 6px var(--strain-color, var(--sx-teal)), 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}
.sx-vial.is-on .sx-vial-name,
.sx-vial:hover .sx-vial-name {
  font-size: 9px;
}
.sx-foot {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--sx-line);
  padding-top: 16px;
}
.sx-foot p {
  margin: 0;
  color: var(--sx-mute);
  font-size: 13px;
  max-width: 40em;
}
.bat-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-top: 16px;
}
.bat-card {
  background: linear-gradient(145deg, #100817, #08060b);
  border: 1px solid rgba(194,111,255,.25);
  border-radius: 14px;
  padding: 20px;
}
.bat-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.bat-card ul {
  margin: 0;
  padding-left: 18px;
  color: #c0b6c5;
  font-size: 14px;
  line-height: 1.65;
}
.bat-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #c9ff4d;
  letter-spacing: 0.06em;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .sx-stage, .bat-grid { grid-template-columns: 1fr; }
  .sx-rack { height: 210px; }
}