:root {
    color-scheme: light;
    --accent: #7145c6;
    --accent-hover: #5d32af;
    --accent-soft: rgba(113,69,198, .12);
    --bg-color: #f7f7fa;
    --bg: #f7f7fa;
    --sidebar-bg: #ffffff;
    --sidebar: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f5f2fa;
    --surface-2: #f5f2fa;
    --surface-3: #f1edf7;
    --text-main: #201b2d;
    --text: #201b2d;
    --text-muted: #6e667c;
    --muted: #6e667c;
    --text-soft: #51475f;
    --soft: #51475f;
    --border-light: rgba(32,27,45,.075);
    --border-strong: #dcd5e6;
    --line: #e4e0ea;
    --glass-bg: #ffffff;
    --glass-border: rgba(32,27,45,.075);
    --glass-shadow: rgba(0,0,0,.35) 0 8px 24px;
    --shadow: rgba(0,0,0,.35) 0 8px 24px;
    --ai-gradient: #7145c6;
    --apple-blue: #7145c6;
    --apple-blue-hover: #5d32af;
    --gold: #7145c6;
    --font-title: SpotifyMixUITitle, CircularSp, Inter, "Helvetica Neue", Arial, sans-serif;
    --font-ui: SpotifyMixUI, CircularSp, Inter, "Helvetica Neue", Arial, sans-serif;
  }

  html { background: #f7f7fa !important; }
  body.mastering-reference {
    background: #f7f7fa !important;
    color: #201b2d;
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
  body.mastering-reference::before,
  body.mastering-reference::after { display: none !important; content: none !important; }
  body.mastering-reference button,
  body.mastering-reference input,
  body.mastering-reference select,
  body.mastering-reference textarea { font-family: inherit; }

  /* The native app pages retain all original IDs and scripts. Only their surface language is normalized. */
  body.mastering-reference .sidebar {
    width: 260px !important;
    background: #fff !important;
    border-right: 1px solid #fff !important;
    padding: 24px 14px 16px !important;
    box-shadow: none !important;
  }
  body.mastering-reference .sidebar-menu,
  body.mastering-reference .nav {
    gap: 6px !important;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e4e0ea transparent;
  }
  body.mastering-reference .nav-brand,
  body.mastering-reference .brand {
    margin: 0 10px 28px !important;
    gap: 12px !important;
    color: #201b2d !important;
    font-family: var(--font-title) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }
  body.mastering-reference .brand-icon,
  body.mastering-reference .brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #7145c6 !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  body.mastering-reference .nav-item,
  body.mastering-reference .nav > a,
  body.mastering-reference .nav > button {
    min-height: 44px;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #6e667c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.mastering-reference .nav-item:hover,
  body.mastering-reference .nav > a:hover,
  body.mastering-reference .nav > button:hover,
  body.mastering-reference .nav-item.active,
  body.mastering-reference .nav > a.active {
    background: #f5f2fa !important;
    color: #201b2d !important;
  }
  body.mastering-reference .nav-item.active svg,
  body.mastering-reference .nav > a.active svg { color: #7145c6 !important; }
  body.mastering-reference .suite-section-label {
    margin: 18px 14px 6px;
    color: #82758f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  body.mastering-reference .user-pill {
    border: 0 !important;
    border-radius: 9999px !important;
    background: #f5f2fa !important;
    box-shadow: rgb(18,18,18) 0 1px 0, rgb(124,124,124) 0 0 0 1px inset !important;
  }
  body.mastering-reference .avatar,
  body.mastering-reference .role-badge { background: #7145c6 !important; color: #fff !important; }

  body.mastering-reference .main-content,
  body.mastering-reference .workspace,
  body.mastering-reference .suite-main {
    background: linear-gradient(180deg, #f5f2fa 0, #f7f7fa 190px, #f7f7fa 100%) !important;
  }
  body.mastering-reference .main-scroll,
  body.mastering-reference .content,
  body.mastering-reference .suite-content {
    scrollbar-color: #e4e0ea transparent;
  }
  body.mastering-reference h1,
  body.mastering-reference h2,
  body.mastering-reference h3,
  body.mastering-reference h4 { font-family: var(--font-title) !important; }
  body.mastering-reference .page-header h1,
  body.mastering-reference .dashboard-header h1,
  body.mastering-reference .hero h1,
  body.mastering-reference .page-head h1 {
    color: #201b2d !important;
    letter-spacing: -.045em !important;
    text-shadow: none !important;
  }
  body.mastering-reference .page-header p,
  body.mastering-reference .dashboard-header p,
  body.mastering-reference .hero p,
  body.mastering-reference .page-head p { color: #6e667c !important; }

  body.mastering-reference :is(.glass-card,.bento-item,.post-card,.pack-card,.card,.panel,.section,.metric,.stat,.feature,.feature-card,.docs-card,.legal-card,.profile,.builder-panel,.preview-panel) {
    border-color: rgba(32,27,45,.075) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body.mastering-reference :is(.glass-card,.bento-item,.post-card,.pack-card,.feature,.feature-card,.docs-card,.legal-card) {
    border-radius: 8px !important;
  }
  body.mastering-reference :is(.bento-item,.post-card,.pack-card,.feature,.feature-card):hover {
    background: #f5f2fa !important;
    border-color: rgba(32,27,45,.12) !important;
    box-shadow: rgba(0,0,0,.3) 0 8px 8px !important;
    transform: translateY(-2px) !important;
  }
  body.mastering-reference .bento-icon,
  body.mastering-reference .feature-icon,
  body.mastering-reference .pack-icon,
  body.mastering-reference .icon-wrap {
    border-radius: 50% !important;
    background: #f1edf7 !important;
    color: #7145c6 !important;
    box-shadow: none !important;
  }
  body.mastering-reference .v9-scope { opacity: .42 !important; }
  body.mastering-reference .v9-scope .trace { stroke: #7145c6 !important; }
  body.mastering-reference .v9-scope .ghost,
  body.mastering-reference .v9-scope .grid { stroke: #dcd5e6 !important; }

  body.mastering-reference :is(.btn,.button,.primary-button,.small-button,.hub-button,.submit,.new-post-btn,.upload-btn,.discord,.suite-discord-link) {
    border-radius: 9999px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body.mastering-reference :is(.btn.primary,.btn.accent-btn,.button.primary,.primary-button,.submit,.new-post-btn,.upload-btn) {
    border-color: #7145c6 !important;
    background: #7145c6 !important;
    color: #fff !important;
  }
  body.mastering-reference :is(.btn.primary,.btn.accent-btn,.button.primary,.primary-button,.submit,.new-post-btn,.upload-btn):hover {
    background: #5d32af !important;
    transform: scale(1.02) !important;
  }
  body.mastering-reference :is(.btn.secondary,.btn.ghost,.button:not(.primary),.small-button,.hub-button) {
    border: 1px solid #dcd5e6 !important;
    background: #f5f2fa !important;
    color: #201b2d !important;
  }
  body.mastering-reference :is(.btn.secondary,.btn.ghost,.button:not(.primary),.small-button,.hub-button):hover {
    border-color: #82758f !important;
    background: #f1edf7 !important;
  }
  body.mastering-reference :is(.tag,.pill,.badge,.version-pill,.chip,.filter-chip) {
    border-color: #dcd5e6 !important;
    border-radius: 9999px !important;
    background: #f5f2fa !important;
    color: #51475f !important;
    box-shadow: none !important;
  }
  body.mastering-reference :is(input,select,textarea,.search-input,.field) {
    border-color: #dcd5e6 !important;
    background: #f5f2fa !important;
    color: #201b2d !important;
    box-shadow: none !important;
  }
  body.mastering-reference :is(input,select,textarea,.search-input,.field):focus {
    border-color: #82758f !important;
    outline: 2px solid #201b2d !important;
    outline-offset: 1px;
  }
  body.mastering-reference input[type="range"] { accent-color: #7145c6; }
  body.mastering-reference a { text-underline-offset: 3px; }

  /* Shared suite-shell pages: same proportions and restraint as mastering.html. */
  body.mastering-reference .suite-app {
    min-height: 100dvh;
    background: #f7f7fa !important;
  }
  body.mastering-reference .suite-sidebar {
    width: 260px !important;
    background: #fff !important;
    border: 0 !important;
    padding: 24px 14px 16px !important;
  }
  body.mastering-reference .suite-brand {
    margin: 0 10px 28px !important;
    color: #201b2d !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }
  body.mastering-reference .suite-brand-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #7145c6 !important;
    color: #fff !important;
  }
  body.mastering-reference .suite-nav { gap: 6px !important; }
  body.mastering-reference .suite-nav-item {
    min-height: 44px;
    padding: 12px 14px !important;
    border-radius: 9999px !important;
    color: #6e667c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  body.mastering-reference .suite-nav-item:hover,
  body.mastering-reference .suite-nav-item.active { background: #f5f2fa !important; color: #201b2d !important; }
  body.mastering-reference .suite-nav-item.active svg { color: #7145c6 !important; }
  body.mastering-reference .suite-nav-label { color: #82758f !important; }
  body.mastering-reference .suite-discord-link { background: #f5f2fa !important; border: 1px solid #dcd5e6 !important; color: #201b2d !important; }
  body.mastering-reference .suite-discord-link svg { color: #7145c6 !important; }

  /* Legal, access and public pages use the same canvas without becoming dashboard clones. */
  body.mastering-reference.page-imprint,
  body.mastering-reference.page-privacy,
  body.mastering-reference.page-terms,
  body.mastering-reference.page-access,
  body.mastering-reference.page-linktree-public,
  body.mastering-reference.page-linktree-public-copy {
    min-height: 100dvh;
    overflow: auto;
    background: linear-gradient(180deg,#f5f2fa 0,#f7f7fa 220px,#f7f7fa 100%) !important;
  }
  body.mastering-reference .topbar {
    border-bottom: 1px solid rgba(32,27,45,.075) !important;
    background: rgba(0,0,0,.94) !important;
    backdrop-filter: blur(16px) !important;
  }
  body.mastering-reference .topbar .brand-mark,
  body.mastering-reference .mark,
  body.mastering-reference .powered-mark {
    border-radius: 50% !important;
    background: #7145c6 !important;
    color: #fff !important;
  }
  body.mastering-reference .legal-wrap,
  body.mastering-reference .shell { color: #201b2d; }
  body.mastering-reference .legal-wrap > section,
  body.mastering-reference .shell > section.card {
    border: 1px solid rgba(32,27,45,.075) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: rgba(0,0,0,.3) 0 8px 8px !important;
  }

  /* Ads must remain visible inside the actual scroll container. */
  body.mastering-reference .exy-ad-zone {
    border-color: rgba(32,27,45,.09) !important;
    background: #ffffff !important;
    box-shadow: rgba(0,0,0,.3) 0 8px 8px !important;
  }


  /* Strip landing-page effects that make the secondary pages feel generated or over-designed. */
  body.mastering-reference .hero::before,
  body.mastering-reference .feature::after,
  body.mastering-reference .community-cta::after,
  body.mastering-reference .docs-hero::before { display: none !important; content: none !important; }
  body.mastering-reference .gradient {
    background: none !important;
    color: #201b2d !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #201b2d !important;
  }
  body.mastering-reference.page-exynosmusic .hero {
    min-height: 520px !important;
    padding-block: 70px !important;
    text-align: left !important;
    place-items: center start !important;
  }
  body.mastering-reference.page-exynosmusic .hero > div:first-child { max-width: 760px; }
  body.mastering-reference.page-exynosmusic .hero h1 {
    max-width: 760px !important;
    margin: 20px 0 18px !important;
    font-size: clamp(44px,7vw,72px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }
  body.mastering-reference.page-exynosmusic .lead { margin: 0 !important; max-width: 620px !important; font-size: 17px !important; }
  body.mastering-reference.page-exynosmusic .actions { justify-content: flex-start !important; }
  body.mastering-reference.page-exynosmusic .eyebrow,
  body.mastering-reference.page-exynosmusic .kicker {
    border-color: rgba(113,69,198,.25) !important;
    background: rgba(113,69,198,.08) !important;
    color: #7145c6 !important;
    box-shadow: none !important;
  }
  body.mastering-reference.page-exynosmusic .eyebrow::before { box-shadow: none !important; }
  body.mastering-reference.page-exynosmusic .wave { opacity: .55; }
  body.mastering-reference.page-exynosmusic .wave i { background: #7145c6 !important; }
  body.mastering-reference.page-exynosmusic .section { padding-block: 64px !important; }
  body.mastering-reference.page-exynosmusic .feature { min-height: 250px !important; padding: 24px !important; }
  body.mastering-reference.page-exynosmusic .feature .icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 36px;
    border-radius: 50% !important;
    background: #f1edf7 !important;
    color: #7145c6 !important;
    box-shadow: none !important;
  }
  body.mastering-reference.page-exynosmusic .strip,
  body.mastering-reference.page-exynosmusic .community-cta {
    border-color: rgba(32,27,45,.075) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.mastering-reference.page-developers .docs-topbar { background: rgba(0,0,0,.94) !important; border-color: rgba(32,27,45,.075) !important; }
  body.mastering-reference.page-developers .docs-hero h1 { font-size: clamp(42px,6vw,68px) !important; line-height: .98 !important; }
  body.mastering-reference.page-developers .docs-hero h1 span { color: #201b2d !important; }
  body.mastering-reference.page-developers :is(.terminal,.step-card,.spotlight,.schema-card,.docs-notice,.docs-base-row,.docs-toc-help) {
    border-color: rgba(32,27,45,.075) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  body.mastering-reference.page-developers :is(.docs-button,.copy-button,.docs-pill,.docs-status,.flow-method) { border-radius: 9999px !important; box-shadow: none !important; }
  body.mastering-reference.page-developers .docs-button.primary { border-color: #7145c6 !important; background: #7145c6 !important; color: #fff !important; }
  body.mastering-reference.page-developers :is(.section-kicker,.docs-eyebrow,.code-key,.inline-code,.step-number) { color: #7145c6 !important; }
  body.mastering-reference.page-developers .terminal-dot { background: #dcd5e6 !important; }

  body.mastering-reference.page-setup-linktree :is(.editor-card,.preview-card,.link-row,.preview-phone,.savebar) {
    border-color: rgba(32,27,45,.075) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }
  body.mastering-reference.page-setup-linktree .preview-phone { background: #f7f7fa !important; }

  body.mastering-reference.page-linktree-public .profile::before,
  body.mastering-reference.page-linktree-public-copy .profile-container::before { display: none !important; }
  body.mastering-reference.page-linktree-public .artist-link,
  body.mastering-reference.page-linktree-public-copy .link-button {
    border-color: #dcd5e6 !important;
    border-radius: 9999px !important;
    background: #f5f2fa !important;
    box-shadow: none !important;
  }

  @media (max-width: 920px) {
    body.mastering-reference .sidebar { width: 86px !important; padding-inline: 10px !important; }
    body.mastering-reference .sidebar .nav-brand span,
    body.mastering-reference .sidebar .nav-item:not(.active) > :not(svg),
    body.mastering-reference .sidebar .nav-item.active > :not(svg),
    body.mastering-reference .sidebar .username,
    body.mastering-reference .sidebar .role-badge,
    body.mastering-reference .sidebar .suite-section-label { display: none !important; }
    body.mastering-reference .sidebar .nav-brand { justify-content: center !important; margin-inline: 0 !important; }
    body.mastering-reference .sidebar .nav-item { justify-content: center !important; padding-inline: 0 !important; }
  }
  @media (max-width: 760px) {
    body.mastering-reference .sidebar { display: none !important; }
    body.mastering-reference .main-content,
    body.mastering-reference .workspace { padding-bottom: 92px !important; }
    body.mastering-reference .bottom-nav,
    body.mastering-reference .suite-mobile-nav {
      background: rgba(0,0,0,.96) !important;
      border-top: 1px solid rgba(32,27,45,.08) !important;
      backdrop-filter: blur(18px) !important;
    }
  }