:root {
  --od1-artist-accent: #b79bff;
  --od1-artist-bg: #07070a;
  --od1-artist-panel: #111116;
  --od1-artist-panel-strong: #17171e;
  --od1-artist-text: #f7f5fb;
  --od1-artist-muted: #aaa6b3;
  --od1-artist-border: rgba(255, 255, 255, .1);
  --od1-artist-radius: 22px;
  --od1-artist-shell: 1180px;
  --text: var(--od1-artist-text);
  --muted: var(--od1-artist-muted);
  --muted-2: #7f7b88;
  --surface: var(--od1-artist-panel);
  --surface-2: var(--od1-artist-panel-strong);
  --surface-3: color-mix(in srgb, var(--od1-artist-accent) 24%, var(--od1-artist-panel));
  --border: var(--od1-artist-border);
  --border-2: rgba(255, 255, 255, .18);
  --ring: color-mix(in srgb, var(--od1-artist-accent) 55%, transparent);
  --accent-soft: color-mix(in srgb, var(--od1-artist-accent) 16%, transparent);
  --btn-primary-bg: var(--od1-artist-accent);
  --btn-primary-bg-hover: color-mix(in srgb, var(--od1-artist-accent) 88%, white);
  --btn-primary-text: #08080b;
  --panel-strong: #17171e;
  --on-surface: var(--od1-artist-text);
  --on-surface-muted: var(--od1-artist-muted);
}

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body.od1-artist-site {
  margin: 0;
  overflow-x: clip;
  overflow-y: auto;
  min-height: 100%;
  height: auto;
  display: block;
  color: var(--od1-artist-text);
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--od1-artist-accent) 18%, transparent), transparent 32rem),
    var(--od1-artist-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.od1-artist-shell {
  width: min(calc(100% - 32px), var(--od1-artist-shell));
  margin-inline: auto;
}

.od1-artist-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--od1-artist-border);
  background: rgba(7, 7, 10, .82);
  backdrop-filter: blur(18px);
}

.od1-artist-footer__inner {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.od1-artist-nav__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 68px;
  align-items: center;
  gap: 20px;
}

.od1-artist-nav__logo {
  grid-column: 1;
  justify-self: start;
  line-height: 0;
}

.od1-artist-nav__logo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.od1-artist-nav__brand {
  grid-column: 2;
  min-width: 0;
  max-width: min(52vw, 620px);
  justify-self: center;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.od1-artist-nav__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.od1-artist-nav nav { grid-column: 3; display: flex; justify-self: end; gap: 22px; }
.od1-artist-nav nav a,
.od1-artist-footer a { color: var(--od1-artist-muted); text-decoration: none; }
.od1-artist-nav nav a:hover,
.od1-artist-footer a:hover { color: var(--od1-artist-text); }
.od1-artist-nav nav .od1-artist-nav__cart {
  display: inline-flex;
  min-height: 36px;
  padding: 7px 11px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--od1-artist-accent) 48%, var(--od1-artist-border));
  border-radius: 999px;
  color: var(--od1-artist-text);
  background: color-mix(in srgb, var(--od1-artist-accent) 11%, transparent);
  font-weight: 800;
  line-height: 1;
}
.od1-artist-nav nav .od1-artist-nav__hub {
  display: inline-flex;
  min-height: 40px;
  padding: 8px 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--od1-artist-accent) 48%, var(--od1-artist-border));
  border-radius: 999px;
  color: var(--od1-artist-text);
  background: color-mix(in srgb, var(--od1-artist-accent) 11%, transparent);
  font-weight: 800;
  line-height: 1;
}
.od1-artist-nav__cart-count {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  color: #08080b;
  background: var(--od1-artist-accent);
  font-size: .68rem;
  font-weight: 900;
}
.od1-artist-nav__cart-count[hidden] { display: none; }

.od1-artist-hero {
  position: relative;
  display: grid;
  min-height: min(78vh, 760px);
  overflow: hidden;
  align-items: end;
  background:
    linear-gradient(110deg, rgba(7, 7, 10, .2), rgba(7, 7, 10, .9)),
    var(--od1-hero-image, linear-gradient(135deg, #17131f, #07070a));
  background-position: var(--od1-hero-position, center);
  background-size: cover;
}

.od1-artist-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--od1-artist-bg) 0, rgba(7, 7, 10, .15) 55%, rgba(7, 7, 10, .15));
}

.od1-artist-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--od1-hero-position, center);
}

.od1-artist-hero__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(80px, 14vw, 150px) 78px;
}

@media (prefers-reduced-motion: reduce) {
  .od1-artist-hero__video { display: none; }
}

.od1-artist-kicker {
  margin: 0 0 10px;
  color: var(--od1-artist-accent);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.od1-artist-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.3rem, 10vw, 8rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .88;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

.od1-artist-hero__tagline {
  max-width: 660px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.od1-artist-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.od1-artist-button {
  display: inline-flex;
  min-height: 48px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: var(--od1-artist-text);
  background: rgba(7, 7, 10, .5);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.od1-artist-button--primary {
  border-color: var(--od1-artist-accent);
  color: #08080b;
  background: var(--od1-artist-accent);
}

.od1-artist-button--subscribed {
  border-color: color-mix(in srgb, var(--od1-artist-accent) 70%, white);
  color: var(--od1-artist-accent);
}

.od1-release-alert-toggle {
  position: relative;
  width: 48px;
  min-width: 48px;
  padding: 0;
}
.od1-release-alert-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.od1-release-alert-toggle.od1-artist-button--subscribed {
  color: #08080b;
  background: var(--od1-artist-accent);
}
.od1-release-alert-toggle.od1-artist-button--subscribed::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 1px solid #08080b;
  border-radius: 50%;
  content: "";
  background: #37d67a;
}

.od1-artist-install-help {
  max-width: 580px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: .9rem;
}

.od1-artist-section { padding-block: clamp(68px, 10vw, 120px); }
.od1-artist-section--shop { border-top: 1px solid var(--od1-artist-border); background: rgba(255, 255, 255, .018); }

.od1-backstage-screen { min-height: calc(100dvh - 108px); background: var(--od1-artist-bg); }
.od1-backstage-screen__hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 12vw, 132px) clamp(54px, 8vw, 88px);
  border-bottom: 1px solid var(--od1-artist-border);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--od1-artist-accent) 24%, transparent), transparent 30rem),
    linear-gradient(145deg, var(--od1-artist-panel-strong), var(--od1-artist-bg));
}
.od1-backstage-screen__hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.7rem, 12vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .85;
}
.od1-backstage-screen__hero p:not(.od1-artist-kicker) {
  max-width: 680px;
  margin: 25px 0 0;
  color: var(--od1-artist-muted);
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.6;
}
.od1-backstage-screen__hero .od1-artist-button { margin-top: 28px; }
.od1-backstage-screen__feed { padding-block: clamp(48px, 8vw, 96px); }
.od1-backstage-screen__feed .od1-backstage__grid { align-items: start; }

#music {
  position: relative;
  z-index: 1;
  clear: both;
  border-top: 1px solid var(--od1-artist-border);
  background: var(--od1-artist-bg);
}

#music .od1-music {
  display: flow-root;
}

.od1-artist-about {
  border-bottom: 1px solid var(--od1-artist-border);
  background: var(--od1-artist-panel);
}

.od1-artist-about__inner { max-width: 820px; }
.od1-artist-about__inner > p:last-child { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.55; }

.od1-ios-install { width: min(92vw, 520px); max-width: none; padding: 0; border: 0; color: var(--od1-artist-text); background: transparent; }
.od1-ios-install::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(9px); }
.od1-ios-install__panel { position: relative; display: grid; gap: 18px; padding: clamp(26px, 5vw, 38px); border: 1px solid var(--od1-artist-border); border-radius: 22px; background: var(--od1-artist-panel-strong); box-shadow: 0 30px 100px rgba(0,0,0,.68); }
.od1-ios-install__panel h2 { max-width: 420px; margin: 0; font-size: clamp(1.8rem, 6vw, 2.55rem); letter-spacing: -.05em; line-height: 1.02; }
.od1-ios-install__panel > p:not(.od1-artist-kicker) { margin: 0; color: var(--od1-artist-muted); line-height: 1.55; }
.od1-ios-install__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.od1-ios-install__steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 13px; border: 1px solid var(--od1-artist-border); border-radius: 13px; background: rgba(255,255,255,.035); }
.od1-ios-install__step-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #08080b; background: var(--od1-artist-accent); font-size: .78rem; font-weight: 900; }
.od1-ios-install__steps strong,
.od1-ios-install__steps small { display: block; }
.od1-ios-install__steps strong { font-size: .88rem; }
.od1-ios-install__steps small { margin-top: 4px; color: var(--od1-artist-muted); font-size: .76rem; line-height: 1.45; }
.od1-ios-install__share { display: inline-grid; width: 20px; height: 20px; place-items: center; border: 1px solid currentColor; border-radius: 5px; color: var(--od1-artist-accent); font-size: 1rem; font-weight: 900; line-height: 1; }
.od1-ios-install__panel > .od1-artist-button { justify-self: start; }
.od1-install-gate__android { display: grid; gap: 9px; }
.od1-install-gate__android .od1-artist-button { justify-self: start; }
.od1-install-gate__android small { color: var(--od1-artist-muted); font-size: .76rem; line-height: 1.45; }
.od1-ios-install__panel .od1-install-gate__footnote { margin: -4px 0 0; color: var(--od1-artist-accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.od1-app-update-screen {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  padding:
    max(28px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
  place-items: center;
  color: var(--od1-artist-text);
  background: var(--od1-artist-bg);
}
html.od1-app-is-updating,
body.od1-app-is-updating { overflow: hidden !important; }
.od1-app-update-screen__identity { display: grid; gap: 18px; justify-items: center; text-align: center; }
.od1-app-update-screen__identity img {
  width: clamp(88px, 24vw, 132px);
  height: clamp(88px, 24vw, 132px);
  border-radius: 24%;
  object-fit: cover;
  box-shadow: 0 20px 65px rgba(0,0,0,.48);
  animation: od1-update-icon-pulse 1.35s ease-in-out infinite;
}
.od1-app-update-screen__identity strong { max-width: min(82vw, 520px); font-size: clamp(1.25rem, 4vw, 1.8rem); letter-spacing: -.025em; }
@keyframes od1-update-icon-pulse { 0%,100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .od1-app-update-screen__identity img { animation: none; }
}
.od1-artist-section-heading { margin-bottom: 32px; }
.od1-artist-section-heading h2 { margin: 0; font-size: clamp(2.25rem, 6vw, 4.8rem); letter-spacing: -.05em; }

.od1-artist-footer {
  padding-block: 20px;
  border-top: 1px solid var(--od1-artist-border);
  color: var(--od1-artist-muted);
  font-size: .88rem;
}

@media (max-width: 640px) {
  .od1-artist-nav nav { gap: 9px; font-size: .78rem; }
  .od1-artist-nav nav .od1-artist-nav__secondary,
  .od1-artist-nav nav .od1-artist-nav__mobile-hide { display: none; }
  .od1-artist-nav nav .od1-artist-nav__cart { min-height: 34px; padding: 6px 9px; }
  .od1-artist-nav nav .od1-artist-nav__hub { min-height: 36px; padding: 7px 11px; }
  .od1-artist-nav__inner { min-height: 60px; gap: 10px; }
  .od1-artist-nav__brand { max-width: 52vw; }
  .od1-artist-hero { min-height: 680px; }
  .od1-artist-hero h1 { max-width: 100%; font-size: clamp(2.8rem, 13vw, 3.3rem); }
  .od1-artist-hero__tagline, .od1-artist-install-help { overflow-wrap: anywhere; }
  .od1-release-alert-toggle {
    position: fixed;
    z-index: 60;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    width: 54px;
    min-width: 54px;
    min-height: 54px;
    border-color: color-mix(in srgb, var(--od1-artist-accent) 60%, rgba(255,255,255,.25));
    background: color-mix(in srgb, var(--od1-artist-panel-strong) 90%, black);
    box-shadow: 0 14px 38px rgba(0,0,0,.52);
    backdrop-filter: blur(16px);
  }
  .od1-release-alert-toggle svg { width: 24px; height: 24px; }
  .od1-artist-footer__inner { padding-block: 14px; flex-direction: column; align-items: flex-start; }
}