/* Scoped rebuild for the HeadlessLabs ecosystem landing page and Music docs. */
/* The legacy docs shell contains offset/important rules. Keep the standalone
   Music product view truly standalone without changing other docs routes. */
@layer accessibility{
  body[data-public-route="headless-music"] .topbar,
  body[data-public-route="headless-music"] #publicBreadcrumb,
  body[data-public-route="headless-music"] #publicPageTrail,
  body[data-public-route="headless-music"] .docs-shell > .docs-sidebar,
  body[data-public-route="headless-music"] #docsSidebarToggle{ display: none !important; }
  body[data-public-route="headless-music"] .docs-main{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body[data-public-route="headless-music"] #headless-music{ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 0 48px !important; }
  body[data-public-route="affiliates"] #publicBreadcrumb{ display: none !important; }
}

body[data-public-route="affiliates"] .docs-shell,
body[data-public-route="headless-music"] .docs-shell{
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
}
body[data-public-route="headless-music"] .docs-shell{ background: transparent !important; }

body[data-public-route="affiliates"] .docs-sidebar,
body[data-public-route="headless-music"] .docs-sidebar,
body[data-public-route="affiliates"] #docsSidebarToggle,
body[data-public-route="headless-music"] #docsSidebarToggle{
  display: none !important;
}

body[data-public-route="affiliates"] .docs-main,
body[data-public-route="headless-music"] .docs-main{
  width: 100%;
  max-width: none;
  padding: 18px clamp(18px, 4.6vw, 72px) 0;
}

body[data-public-route="affiliates"] .doc-section.active-doc-section,
body[data-public-route="headless-music"] .doc-section.active-doc-section{
  min-height: calc(100vh - 88px);
  border: 0;
  background: transparent;
  overflow: visible;
}

body[data-public-route="affiliates"] #affiliates::before,
body[data-public-route="affiliates"] #affiliates::after,
body[data-public-route="headless-music"] #headless-music::before,
body[data-public-route="headless-music"] #headless-music::after{
  display: none !important;
}

body[data-public-route="affiliates"] #affiliates > *,
body[data-public-route="headless-music"] #headless-music > *{
  position: relative;
  z-index: 1;
}

/* Affiliates */
body[data-public-route="affiliates"] #affiliates{
  width: 100%;
  padding: clamp(48px, 7.5vw, 104px) 0 clamp(62px, 8vw, 112px);
}

.affiliates-page-inner{
  width: min(100%, 1260px);
  margin-inline: auto;
}

.ecosystem-hero{
  width: min(100%, 880px);
  margin: 0 auto clamp(56px, 8vw, 108px);
  text-align: center;
  animation: ecosystem-entry .72s cubic-bezier(.2,.75,.25,1) both;
}

.ecosystem-eyebrow,
.ecosystem-index,
.affiliate-code{
  color: #76d9ec;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ecosystem-eyebrow{ display: inline-flex; align-items: center; gap: 10px; }
.ecosystem-eyebrow i{ width: 3px; height: 3px; border-radius: 50%; background: #52d8f4; box-shadow: 0 0 12px rgba(82,216,244,.7); }
.ecosystem-hero h1{
  margin: 24px 0 18px;
  color: #eff8fa;
  font: 760 clamp(42px, 6.2vw, 78px)/.98 var(--display, ui-sans-serif, system-ui);
  letter-spacing: -.065em;
}
.ecosystem-hero h1 span{ color: #88dff0; }
.ecosystem-hero > p{
  width: min(100%, 650px);
  margin: 0 auto;
  color: #9caeb3;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
}
.ecosystem-index{ display: flex; justify-content: center; gap: 28px; margin-top: 31px; color: #d2e3e7; font-size: 10px; }
.ecosystem-index span{ display: inline-flex; gap: 9px; }
.ecosystem-index i{ color: #76878b; font-style: normal; font-weight: 500; letter-spacing: .07em; }

body[data-public-route="affiliates"] .ecosystem-products{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); }
.ecosystem-product{
  position: relative;
  display: grid;
  grid-template-columns: minmax(118px, 172px) minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: clamp(22px, 3.8vw, 56px);
  min-height: 270px;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(141, 183, 191, .16);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 14% 50%, rgba(50, 187, 216, .085), transparent 48%),
    linear-gradient(115deg, rgba(11, 17, 19, .96), rgba(7, 11, 13, .88));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.018);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
/* The public stylesheet still contains the previous affiliate-card grid contract.
   Override that legacy named-area layout only on this new route. */
body[data-public-route="affiliates"] .ecosystem-product{
  grid-template-columns: minmax(118px, 172px) minmax(0, 1fr) minmax(210px, 260px);
  grid-template-areas: none;
}
.ecosystem-product::after{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(72,224,255,.6), transparent);
  opacity: .45;
  pointer-events: none;
}
.ecosystem-product:hover{ transform: translateY(-2px); border-color: rgba(118, 217, 236, .28); box-shadow: 0 38px 110px rgba(0,0,0,.28), 0 0 40px rgba(50,187,216,.045); }
.affiliate-card-core{ --product-accent: #76d9ec; }
.affiliate-card-music{ --product-accent: #b4eaf2; }
body[data-public-route="affiliates"] .ecosystem-product.affiliate-card-music{ background: radial-gradient(ellipse at 14% 50%, rgba(50,187,216,.055), transparent 48%), linear-gradient(115deg, rgba(11,17,19,.96), rgba(7,11,13,.88)); }
body[data-public-route="affiliates"] .ecosystem-product.affiliate-card-music::before{ background: radial-gradient(circle at 12% 2%, rgba(50,187,216,.11), transparent 42%); opacity: .5; }
.ecosystem-product-identity{ display: grid; place-items: center; gap: 12px; align-content: center; min-width: 0; color: #6d8288; font: 700 8px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-align: center; }
.ecosystem-product-identity img{ width: clamp(86px, 9vw, 126px); height: clamp(86px, 9vw, 126px); object-fit: contain; filter: drop-shadow(0 0 20px rgba(39, 191, 225, .14)); }
.ecosystem-music-identity{ position: relative; }
.ecosystem-music-identity img{ opacity: 1; }
.ecosystem-music-wordmark{ margin-top: 0; color: #e5f5f7; font: 740 17px/1 var(--display, ui-sans-serif, system-ui); letter-spacing: .05em; }
.ecosystem-music-wordmark i{ color: #6fdcf0; font-style: normal; }
.ecosystem-music-identity small{ color: #6d8288; font: 600 8px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .08em; }
body[data-public-route="affiliates"] .ecosystem-product-copy{ grid-area: auto; min-width: 0; width: auto; }
.ecosystem-product-copy .affiliate-code{ display: block; color: #77979f; font-size: 10px; }
.ecosystem-product-copy .affiliate-code i{ color: #45d2ec; font-style: normal; margin-inline: 5px; }
.ecosystem-product-copy h2{ margin: 15px 0 10px; color: #f0f7f8; font: 730 clamp(27px, 3vw, 38px)/1.05 var(--display, ui-sans-serif, system-ui); letter-spacing: -.045em; }
.affiliate-card-music .ecosystem-product-copy h2 span{ color: #72ddef; }
.ecosystem-product-copy p{ max-width: 690px; margin: 0; color: #9aacb1; font-size: 14px; line-height: 1.75; }
.ecosystem-product .affiliate-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ecosystem-product .affiliate-tags span{ padding: 7px 10px; border: 1px solid rgba(134, 183, 194, .16); border-radius: 999px; background: rgba(172, 218, 226, .035); color: #b7cbd0; font-size: 10px; line-height: 1; }
body[data-public-route="affiliates"] .ecosystem-product-actions{ grid-area: auto; display: grid; align-content: center; gap: 10px; padding-left: clamp(18px, 3vw, 38px); border-left: 1px solid rgba(141,183,191,.12); }
.ecosystem-product-actions .btn{ display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-radius: 999px; font-size: 12px; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.ecosystem-product-actions .btn:hover{ transform: translateY(-1px); }
.ecosystem-product-actions .btn span{ color: #80d9eb; font-size: 15px; }
.ecosystem-product-actions .btn.primary{ border-color: rgba(111, 211, 231, .23); background: linear-gradient(115deg, rgba(38, 82, 92, .78), rgba(23, 42, 47, .9)); color: #effbfc; }
.ecosystem-note{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; color: #77898e; font-size: 11px; }
.ecosystem-note span{ color: #62d7ee; }

/* Independent Music documentation shell. All selectors remain page-scoped. */
body[data-public-route="headless-music"] #headless-music{ width: 100%; padding: 8px 0 48px; }
.headless-music-docs{ width: min(100%, 1540px); margin-inline: auto; padding-inline: clamp(18px, 3.2vw, 48px); }
.music-docs-productbar{ position: sticky; top: 80px; z-index: 8; display: grid; grid-template-columns: minmax(180px, 240px) minmax(200px, 1fr) auto auto; align-items: center; gap: 22px; min-height: 72px; padding: 0 0 18px; border-bottom: 1px solid rgba(148,185,194,.12); background: linear-gradient(180deg, rgba(7,11,13,.96), rgba(7,11,13,.88) 74%, transparent); backdrop-filter: blur(14px); }
body[data-public-route="headless-music"] .music-docs-productbar{ top: 0; }
.music-docs-brand{ display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: #eaf5f7; text-decoration: none; }
.music-docs-brand img{ width: 39px; height: 39px; object-fit: contain; }
.music-docs-brand strong{ display: block; font: 690 15px/1.15 var(--display, ui-sans-serif, system-ui); letter-spacing: -.025em; }
.music-docs-brand strong i{ color: #67d9ee; font-style: normal; }
.music-docs-brand small{ display: block; margin-top: 5px; color: #74878d; font: 650 8px/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; }
.music-docs-search{ display: flex; align-items: center; gap: 10px; width: min(100%, 540px); height: 42px; margin-inline: auto; padding: 0 12px; border: 1px solid rgba(142,181,190,.14); border-radius: 12px; background: rgba(15,21,23,.64); color: #879ba1; }
.music-docs-search svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.music-docs-search input{ width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #e8f4f6; font-size: 12px; }
.music-docs-search input::placeholder{ color: #778a90; }
.music-docs-search kbd{ flex: none; padding: 3px 5px; border: 1px solid rgba(142,181,190,.16); border-radius: 5px; color: #879ba1; font: 9px var(--mono, ui-monospace, monospace); }
.music-docs-return-nav{ display: flex; align-items: center; justify-content: flex-end; gap: 15px; white-space: nowrap; }
.music-docs-return-nav a{ color: #9fb2b7; font-size: 11px; font-weight: 620; text-decoration: none; transition: color .16s ease; }
.music-docs-return-nav a:hover{ color: #e5f4f6; }
.music-docs-return-nav a:focus-visible{ border-radius: 3px; outline: 2px solid rgba(103,213,234,.66); outline-offset: 4px; }
.music-docs-invite{ display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(95,205,226,.22); border-radius: 999px; background: rgba(42,88,99,.34); color: #e5f7f9; font-size: 11px; font-weight: 700; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.music-docs-invite:hover{ transform: translateY(-1px); border-color: rgba(95,205,226,.42); background: rgba(42,88,99,.54); text-decoration: none; }
.music-docs-invite span{ color: #68d8ee; }
.music-docs-mobile-toggle{ display: none; }
.music-docs-layout{ display: grid; grid-template-columns: 242px minmax(0, 760px) minmax(128px, 180px); justify-content: space-between; gap: clamp(26px, 4vw, 58px); padding-top: 27px; }
.music-docs-sidebar{ position: sticky; top: 174px; align-self: start; max-height: calc(100vh - 196px); overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(113,159,169,.18) transparent; }
.music-docs-sidebar-label{ margin: 0 0 18px; color: #7f959b; font: 700 9px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .14em; }
.music-docs-navigation{ display: grid; gap: 20px; }
.music-nav-group{ padding-bottom: 16px; border-bottom: 1px solid rgba(142,181,190,.09); }
.music-nav-group:last-child{ border-bottom: 0; }
.music-nav-group h2{ margin: 0 0 8px; }
.music-nav-group-toggle{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 25px; padding: 3px 2px; border: 0; border-radius: 5px; background: transparent; color: #dbe8eb; text-align: left; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .16s ease; }
.music-nav-group-toggle:hover{ color: #f0fbfd; }
.music-nav-group-toggle:focus-visible{ outline: 2px solid rgba(103,213,234,.66); outline-offset: 3px; }
.music-nav-group-toggle > svg:first-child{ width: 15px; height: 15px; flex: none; color: #8ba7ae; }
.music-nav-group-caret{ width: 13px; height: 13px; flex: none; margin-left: auto; color: #748c92; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease, color .16s ease; }
.music-nav-group-toggle[aria-expanded="false"] .music-nav-group-caret{ transform: rotate(-90deg); }
.music-nav-group-toggle:hover .music-nav-group-caret{ color: #78d5e7; }
.music-nav-items{ display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .24s cubic-bezier(.2,.7,.2,1), opacity .18s ease; }
.music-nav-items.is-collapsed{ grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.music-nav-items-inner{ display: grid; min-height: 0; gap: 2px; overflow: hidden; }
.music-nav-item{ display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: #95a7ac; text-align: left; font: inherit; font-size: 11px; cursor: pointer; transition: color .16s ease, background .16s ease; }
.music-nav-item svg{ width: 15px; height: 15px; flex: none; color: #80969c; }
.music-nav-item:hover{ background: rgba(158,205,214,.055); color: #e6f2f4; }
.music-nav-item[aria-current="page"]{ background: rgba(120,175,187,.11); color: #e9f5f7; }
.music-nav-item[aria-current="page"] svg{ color: #74d9ed; }
.music-docs-sidebar-foot{ display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(142,181,190,.09); }
.music-docs-mark{ display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(112,203,220,.2); border-radius: 9px; color: #8edfed; font: 750 9px var(--mono, ui-monospace, monospace); }
.music-docs-sidebar-foot b,.music-docs-sidebar-foot small{ display: block; }
.music-docs-sidebar-foot b{ color: #b8cbd0; font-size: 10px; }
.music-docs-sidebar-foot small{ margin-top: 4px; color: #75888e; font-size: 9px; }
.music-docs-article{ min-width: 0; padding-bottom: 35px; outline: 0; }
.music-docs-breadcrumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 3px 0 29px; color: #70868d; font-size: 10px; }
.music-docs-breadcrumbs a{ color: #8ca4aa; text-decoration: none; }
.music-docs-breadcrumbs a:hover{ color: #d9eef2; }
.music-docs-breadcrumbs [aria-current="page"]{ color: #bdd1d5; }
.music-docs-article-content{ min-height: 50vh; animation: music-article-enter .42s cubic-bezier(.2,.75,.25,1) both; }
.music-article-kicker{ display: block; margin-bottom: 16px; color: #79d9ec; font: 700 10px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .13em; text-transform: uppercase; }
.music-article-title{ margin: 0; color: #edf5f6; font: 730 clamp(34px, 4vw, 50px)/1.04 var(--display, ui-sans-serif, system-ui); letter-spacing: -.055em; }
.music-article-lede{ max-width: 720px; margin: 16px 0 30px; color: #a3b4b9; font-size: 16px; line-height: 1.75; }
.music-article-heading{ margin: 43px 0 11px; color: #e5eff1; font: 680 22px/1.2 var(--display, ui-sans-serif, system-ui); letter-spacing: -.025em; }
.music-article-heading:first-child{ margin-top: 0; }
.music-article-copy{ color: #a2b3b8; font-size: 13px; line-height: 1.8; }
.music-article-copy p{ margin: 12px 0; }
.music-article-copy a{ color: #8dddeb; }
.music-article-inline-code{ padding: 2px 6px; border: 1px solid rgba(143,185,196,.14); border-radius: 5px; background: rgba(153,208,220,.055); color: #bfe6ed; font: 11px var(--mono, ui-monospace, monospace); }
.music-article-action-row{ display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 36px; }
.music-article-action{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 16px; border: 1px solid rgba(139,184,194,.18); border-radius: 999px; background: rgba(20,31,34,.72); color: #e3f0f2; font-size: 11px; font-weight: 700; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.music-article-action:hover{ transform: translateY(-1px); border-color: rgba(103,213,234,.36); background: rgba(35,67,74,.55); text-decoration: none; }
.music-article-action.primary{ border-color: rgba(99,211,234,.27); background: rgba(57,122,137,.38); }
.music-article-action span{ color: #72dcef; }
.music-article-section{ margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(146,182,190,.12); }
.music-article-section > h2{ margin: 0 0 11px; color: #e7f1f3; font: 670 20px/1.25 var(--display, ui-sans-serif, system-ui); letter-spacing: -.025em; }
.music-article-section > p{ margin: 0 0 18px; color: #96aab0; font-size: 13px; line-height: 1.75; }
.music-feature-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; margin-top: 19px; }
.music-feature-card{ min-height: 106px; padding: 16px; border: 1px solid rgba(137,181,192,.12); border-radius: 13px; background: linear-gradient(140deg, rgba(16,24,27,.74), rgba(9,14,16,.52)); }
.music-feature-card[data-music-page]{ width: 100%; color: #dfecee; text-align: left; font: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.music-feature-card[data-music-page]:hover{ border-color: rgba(103,213,234,.3); background: rgba(34,66,73,.22); }
.music-feature-card[data-music-page]::after{ content: "→"; float: right; color: #73d7e9; }
.music-feature-card svg{ width: 17px; height: 17px; margin-bottom: 12px; color: #77d9ec; }
.music-feature-card strong{ display: block; color: #dfecee; font-size: 12px; }
.music-feature-card p{ margin: 6px 0 0; color: #899da3; font-size: 11px; line-height: 1.55; }
.music-doc-callout{ display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 11px; margin: 18px 0; padding: 14px 15px; border: 1px solid rgba(96,194,215,.16); border-radius: 11px; background: rgba(46,108,121,.09); color: #a9c0c5; font-size: 11px; line-height: 1.7; }
.music-doc-callout svg{ width: 17px; height: 17px; color: #76d9ec; }
.music-doc-callout strong{ color: #d9eef1; }
.music-doc-callout.warning{ border-color: rgba(223,177,112,.18); background: rgba(136,96,42,.075); }
.music-doc-callout.warning svg{ color: #d6ad70; }
.music-doc-steps{ display: grid; gap: 0; margin: 21px 0; padding: 0; list-style: none; counter-reset: music-steps; }
.music-doc-steps li{ position: relative; display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 14px; padding: 0 0 23px; counter-increment: music-steps; }
.music-doc-steps li::before{ content: counter(music-steps, decimal-leading-zero); display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(115,199,216,.19); border-radius: 50%; color: #8bdcec; font: 700 9px var(--mono, ui-monospace, monospace); }
.music-doc-steps li:not(:last-child)::after{ content: ""; position: absolute; left: 13px; top: 31px; bottom: 1px; border-left: 1px solid rgba(115,199,216,.13); }
.music-doc-steps strong{ display: block; margin: 3px 0 6px; color: #dfecee; font-size: 12px; }
.music-doc-steps p{ margin: 0; color: #91a5aa; font-size: 11px; line-height: 1.7; }
.music-doc-code{ overflow: hidden; margin: 16px 0; border: 1px solid rgba(138,180,190,.15); border-radius: 12px; background: rgba(12,18,20,.9); }
.music-doc-code-head{ display: flex; align-items: center; justify-content: space-between; min-height: 37px; padding: 0 11px 0 14px; border-bottom: 1px solid rgba(138,180,190,.1); color: #85999e; font: 10px var(--mono, ui-monospace, monospace); }
.music-doc-code-head button{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #a8c3c9; font: inherit; font-size: 10px; cursor: pointer; }
.music-doc-code-head button:hover{ background: rgba(148,202,213,.08); color: #e5f6f8; }
.music-doc-code pre{ overflow: auto; margin: 0; padding: 16px; color: #d2e8eb; font: 12px/1.7 var(--mono, ui-monospace, monospace); tab-size: 2; }
.music-doc-code code{ color: inherit; font: inherit; }
.music-discord-demo{ margin: 19px 0 0; overflow: hidden; border: 1px solid rgba(143,180,191,.17); border-radius: 15px; background: #15181d; color: #e6e8ea; box-shadow: 0 24px 55px rgba(0,0,0,.2); }
.music-discord-demo-head{ display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 39px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.06); color: #aeb7be; font-size: 10px; }
.music-discord-demo-head strong{ color: #dfe3e6; font-size: 10px; }
.music-discord-demo-head span{ color: #87939b; font-size: 9px; }
.music-discord-message{ display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 15px; }
.music-discord-avatar{ display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border-radius: 50%; background: #030607; color: #d7f0f3; font: 750 12px var(--display, ui-sans-serif, system-ui); }
.music-discord-avatar img{ width: 100%; height: 100%; object-fit: contain; }
.music-discord-author{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 0 0 5px; color: #e4e7e9; font-size: 11px; font-weight: 700; }
.music-discord-author time{ color: #78848a; font-size: 9px; font-weight: 400; }
.music-discord-tag{ padding: 2px 4px; border-radius: 3px; background: #5865f2; color: white; font-size: 8px; }
.music-discord-text{ margin: 0; color: #d2d7da; font-size: 11px; line-height: 1.6; }
.music-discord-embed{ display: grid; grid-template-columns: 3px minmax(0,1fr); margin: 10px 0 0; overflow: hidden; border-radius: 6px; background: #1e2228; }
.music-discord-embed::before{ content: ""; background: #54cfe9; }
.music-discord-embed-content{ padding: 12px; }
.music-discord-embed-content strong{ display: block; color: #a9e9f2; font-size: 11px; }
.music-discord-embed-content p{ margin: 5px 0 0; color: #aab2b8; font-size: 10px; line-height: 1.6; }
.music-discord-demo-note{ margin: 0 14px 14px 60px; padding: 9px 10px; border: 1px solid rgba(145,181,190,.12); border-radius: 7px; color: #9daab0; font-size: 9px; line-height: 1.55; }
.music-player-preview{ position: relative; display: grid; grid-template-columns: minmax(142px, 188px) minmax(0,1fr); gap: 22px; margin: 20px 0 0; padding: 18px; border: 1px solid rgba(139,183,194,.15); border-radius: 15px; background: linear-gradient(125deg, rgba(16,25,28,.94), rgba(8,13,15,.96)); }
.music-player-art{ position: relative; display: grid; min-height: 178px; place-items: center; overflow: hidden; border: 1px solid rgba(131,203,216,.17); border-radius: 11px; background: radial-gradient(circle at 50% 42%, rgba(67,175,193,.25), transparent 36%), linear-gradient(135deg,#17292d,#080e11 66%); }
.music-player-art::before,.music-player-art::after{ content: ""; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid rgba(106,208,225,.18); border-radius: 50%; transform: rotate(-28deg) scaleY(.38); }
.music-player-art::after{ width: 50%; border-color: rgba(177,230,237,.16); transform: rotate(35deg) scaleY(.44); }
.music-player-art-mark{ color: #bcebf1; font: 800 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-align: center; text-shadow: 0 0 25px rgba(89,204,226,.3); }
.music-player-content{ align-self: center; min-width: 0; }
.music-player-demo-label{ display: inline-flex; align-items: center; gap: 7px; color: #80d8e9; font: 700 9px var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.music-player-demo-label i{ width: 5px; height: 5px; border-radius: 50%; background: #79d8e8; }
.music-player-content h3{ margin: 15px 0 4px; color: #e7f1f2; font: 650 20px/1.2 var(--display, ui-sans-serif, system-ui); }
.music-player-content > p{ margin: 0; color: #8da1a6; font-size: 11px; }
.music-player-progress{ height: 3px; margin: 20px 0 8px; border-radius: 99px; background: rgba(173,210,218,.14); }
.music-player-progress span{ display: block; width: 36%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5ebfd1,#9de4ed); }
.music-player-time{ display: flex; justify-content: space-between; color: #7e9298; font: 9px var(--mono, ui-monospace, monospace); }
.music-player-controls{ display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.music-player-controls button{ display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(151,192,200,.14); border-radius: 50%; background: rgba(125,175,184,.08); color: #94aeb4; font-size: 12px; }
.music-player-controls button:disabled{ opacity: .58; cursor: not-allowed; }
.music-player-control-note{ margin-top: 15px !important; color: #82959a !important; font-size: 9px !important; line-height: 1.55; }
.music-docs-outline{ position: sticky; top: 180px; align-self: start; color: #91a6ac; }
.music-docs-outline strong{ display: block; margin: 3px 0 14px; color: #c9dadd; font-size: 10px; font-weight: 700; }
.music-docs-outline nav{ display: grid; gap: 10px; border-left: 1px solid rgba(140,182,192,.13); }
.music-docs-outline a{ display: block; margin-left: -1px; padding-left: 11px; border-left: 1px solid transparent; color: #84979c; font-size: 10px; line-height: 1.5; text-decoration: none; }
.music-docs-outline a:hover,.music-docs-outline a[aria-current="location"]{ border-color: #69d1e5; color: #d9edf0; }
.music-docs-pagination{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 48px; }
.music-docs-pagination a{ display: grid; gap: 8px; min-height: 76px; align-content: center; padding: 14px; border: 1px solid rgba(139,183,194,.13); border-radius: 11px; background: rgba(12,18,20,.62); color: #8ea3a9; font-size: 9px; text-decoration: none; }
.music-docs-pagination a:last-child{ text-align: right; }
.music-docs-pagination a:hover{ border-color: rgba(103,213,234,.32); color: #e3f1f3; text-decoration: none; }
.music-docs-pagination strong{ color: #d7e5e8; font-size: 11px; }
.music-command-toolbar{ display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }
.music-command-filter{ min-height: 31px; padding: 0 10px; border: 1px solid rgba(139,183,194,.12); border-radius: 999px; background: rgba(16,23,25,.7); color: #91a5aa; font: inherit; font-size: 10px; cursor: pointer; }
.music-command-filter:hover,.music-command-filter[aria-pressed="true"]{ border-color: rgba(102,210,233,.26); background: rgba(57,111,123,.2); color: #dff2f5; }
.music-command-list{ display: grid; gap: 8px; }
.music-command-entry{ overflow: hidden; border: 1px solid rgba(139,183,194,.12); border-radius: 11px; background: rgba(12,18,20,.62); }
.music-command-entry[open]{ border-color: rgba(116,196,212,.2); }
.music-command-entry summary{ display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 14px; color: #d9e7e9; font-size: 11px; cursor: pointer; list-style: none; }
.music-command-entry summary::-webkit-details-marker{ display: none; }
.music-command-entry summary::after{ content: "+"; margin-left: auto; color: #81d9e9; font: 17px/1 var(--mono, ui-monospace, monospace); transition: transform .2s ease; }
.music-command-entry[open] summary::after{ transform: rotate(45deg); }
.music-command-entry summary code{ color: #9de5ef; font: 700 11px var(--mono, ui-monospace, monospace); }
.music-command-entry summary span{ overflow: hidden; color: #8da1a6; text-overflow: ellipsis; white-space: nowrap; }
.music-command-entry summary small{ margin-left: auto; padding: 4px 6px; border: 1px solid rgba(138,181,191,.12); border-radius: 5px; color: #81969c; font: 8px var(--mono, ui-monospace, monospace); }
.music-command-body{ padding: 0 14px 15px; animation: music-accordion-enter .22s ease both; }
.music-command-tabs{ display: flex; gap: 4px; margin: 0 0 9px; }
.music-command-tab{ min-height: 27px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #83979c; font-size: 9px; cursor: pointer; }
.music-command-tab[aria-selected="true"]{ background: rgba(100,173,187,.13); color: #d5e8eb; }
.music-command-code{ position: relative; overflow: hidden; border: 1px solid rgba(133,175,185,.11); border-radius: 8px; background: #090e10; }
.music-command-code pre{ overflow: auto; margin: 0; padding: 12px 74px 12px 12px; color: #d3eaed; font: 10px/1.65 var(--mono, ui-monospace, monospace); white-space: pre; }
.music-command-code button{ position: absolute; top: 7px; right: 7px; padding: 4px 7px; border: 1px solid rgba(136,181,191,.12); border-radius: 5px; background: #10181b; color: #9fb5ba; font-size: 9px; cursor: pointer; }
.music-command-params{ display: grid; gap: 6px; margin: 12px 0 0; }
.music-command-param{ display: grid; grid-template-columns: minmax(90px, .35fr) minmax(0,1fr) auto; gap: 9px; align-items: start; color: #96a9ae; font-size: 9px; line-height: 1.5; }
.music-command-param code{ color: #c6dfe3; font: 9px var(--mono, ui-monospace, monospace); }
.music-command-badge{ padding: 2px 5px; border-radius: 4px; background: rgba(121,176,187,.09); color: #91a9af; font-size: 8px; white-space: nowrap; }
.music-command-permissions{ margin-top: 11px; color: #8aa0a6; font-size: 9px; line-height: 1.55; }
.music-command-permissions strong{ color: #c9dadd; }
.music-command-empty{ padding: 15px; color: #8ea1a6; font-size: 11px; }
.music-doc-table-wrap{ overflow-x: auto; border: 1px solid rgba(138,181,191,.13); border-radius: 11px; }
.music-doc-table{ width: 100%; border-collapse: collapse; color: #9aadb2; font-size: 10px; }
.music-doc-table th,.music-doc-table td{ padding: 11px 12px; border-bottom: 1px solid rgba(138,181,191,.09); text-align: left; vertical-align: top; }
.music-doc-table thead th{ background: rgba(111,169,182,.06); color: #c9dbdf; font-size: 9px; font-weight: 700; }
.music-doc-table tbody tr:last-child td{ border-bottom: 0; }
.music-doc-table td code{ color: #bde8ee; font: 9px var(--mono, ui-monospace, monospace); }
.music-doc-badge{ display: inline-flex; padding: 3px 6px; border: 1px solid rgba(132,179,190,.14); border-radius: 5px; color: #9bb2b8; font: 8px var(--mono, ui-monospace, monospace); white-space: nowrap; }
.music-doc-badge.required{ border-color: rgba(230,171,104,.2); color: #dfbd91; }
.music-doc-badge.optional{ color: #91c7d0; }
.music-doc-accordion{ border-top: 1px solid rgba(138,181,191,.12); }
.music-doc-accordion:last-child{ border-bottom: 1px solid rgba(138,181,191,.12); }
.music-doc-accordion summary{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; color: #dce8ea; font-size: 12px; cursor: pointer; list-style: none; }
.music-doc-accordion summary::-webkit-details-marker{ display: none; }
.music-doc-accordion summary::after{ content: "+"; color: #81d9e9; font: 16px var(--mono, ui-monospace, monospace); }
.music-doc-accordion[open] summary::after{ content: "−"; }
.music-doc-accordion > div{ padding: 0 0 15px; color: #97aab0; font-size: 11px; line-height: 1.7; }
.music-doc-accordion[open] > div{ animation: music-accordion-enter .22s ease both; }
.music-source-list{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 17px 0; padding: 0; list-style: none; }
.music-source-list li{ padding: 12px; border: 1px solid rgba(138,181,191,.12); border-radius: 9px; background: rgba(14,22,24,.5); color: #9cafb4; font-size: 10px; line-height: 1.6; }
.music-source-list strong{ display: block; margin-bottom: 4px; color: #d2e1e4; font-size: 10px; }

@keyframes ecosystem-entry{from{opacity:0;transform:translateY(11px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes music-article-enter{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes music-accordion-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

@media (max-width: 1180px){
  .music-docs-layout{ grid-template-columns: 218px minmax(0,1fr); }
  .music-docs-outline{ display: none; }
  body[data-public-route="affiliates"] .ecosystem-product{ grid-template-columns: 116px minmax(0,1fr) 220px; gap: 24px; }
}

@media (max-width: 820px){
  body[data-public-route="affiliates"] .docs-main,
  body[data-public-route="headless-music"] .docs-main{ padding-inline: 18px; }
  .ecosystem-hero{ margin-bottom: 54px; }
  body[data-public-route="affiliates"] .ecosystem-product{ grid-template-columns: 92px minmax(0,1fr); grid-template-areas: none; gap: 18px 24px; padding: 24px; }
  body[data-public-route="affiliates"] .ecosystem-product-identity{ grid-row: span 2; }
  .ecosystem-product-identity img{ width: 82px; height: 82px; }
  body[data-public-route="affiliates"] .ecosystem-product-actions{ grid-column: 2; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px 0 0; border-top: 1px solid rgba(141,183,191,.12); border-left: 0; }
  .ecosystem-product-actions .btn{ padding-inline: 12px; font-size: 10px; }
  .music-docs-productbar{ top: 69px; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; }
  .music-docs-search{ grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .music-docs-layout{ grid-template-columns: 195px minmax(0,1fr); gap: 24px; }
  .music-docs-sidebar{ top: 175px; }
}

@media (max-width: 640px){
  body[data-public-route="affiliates"] .docs-main,
  body[data-public-route="headless-music"] .docs-main{ padding: 12px 15px 0; }
  body[data-public-route="affiliates"] #affiliates{ padding-block: 44px 64px; }
  .ecosystem-hero{ margin-bottom: 41px; text-align: left; }
  .ecosystem-hero h1{ margin-top: 20px; font-size: clamp(40px, 12vw, 58px); }
  .ecosystem-hero > p{ font-size: 14px; line-height: 1.7; }
  .ecosystem-index{ justify-content: flex-start; flex-wrap: wrap; gap: 15px; font-size: 9px; }
  .ecosystem-products{ gap: 14px; }
  body[data-public-route="affiliates"] .ecosystem-product{ grid-template-columns: 1fr; grid-template-areas: none; gap: 17px; min-height: 0; padding: 20px; border-radius: 20px; }
  body[data-public-route="affiliates"] .ecosystem-product-identity{ grid-row: auto; display: flex; justify-content: flex-start; gap: 11px; text-align: left; }
  .ecosystem-product-identity img{ width: 54px; height: 54px; }
  .ecosystem-product-identity > span:not(.ecosystem-music-wordmark){ max-width: 76px; }
  .ecosystem-music-wordmark{ margin: 0; font-size: 14px; }
  .ecosystem-music-identity{ display: grid; grid-template-columns: 54px auto; justify-content: start; }
  .ecosystem-music-identity img{ grid-row: span 2; }
  .ecosystem-music-identity small{ grid-column: 2; }
  .ecosystem-product-copy h2{ margin-top: 11px; font-size: 28px; }
  .ecosystem-product-copy p{ font-size: 12px; }
  .ecosystem-product .affiliate-tags{ margin-top: 16px; }
  body[data-public-route="affiliates"] .ecosystem-product-actions{ grid-column: auto; grid-template-columns: 1fr; padding-top: 14px; }
  .ecosystem-product-actions .btn{ min-height: 43px; font-size: 11px; }
  .ecosystem-note{ align-items: flex-start; justify-content: flex-start; font-size: 10px; }
  body[data-public-route="headless-music"] #headless-music{ padding-top: 0; }
  .music-docs-productbar{ position: relative; top: auto; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-bottom: 13px; }
  .headless-music-docs{ padding-inline: 15px; }
  .music-docs-brand img{ width: 33px; height: 33px; }
  .music-docs-brand strong{ font-size: 13px; }
  .music-docs-brand small{ font-size: 7px; }
  .music-docs-return-nav{ gap: 9px; }
  .music-docs-return-nav a{ font-size: 9px; }
  .music-docs-search{ grid-column: 1 / -1; grid-row: 2; height: 39px; }
  .music-docs-search kbd{ display: none; }
  .music-docs-invite{ min-height: 36px; padding-inline: 10px; font-size: 9px; }
  .music-docs-mobile-toggle{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 35px; padding: 0 10px; border: 1px solid rgba(139,183,194,.16); border-radius: 8px; background: rgba(18,26,29,.8); color: #adbec3; font-size: 10px; }
  .music-docs-mobile-toggle i{ width: 7px; height: 7px; border-right: 1px solid #83d8e7; border-bottom: 1px solid #83d8e7; transform: rotate(45deg) translateY(-2px); }
  .music-docs-layout{ display: flex; flex-direction: column; gap: 0; padding-top: 15px; }
  .music-docs-sidebar{ position: relative; top: auto; max-height: none; overflow: visible; }
  .music-docs-sidebar-label,.music-docs-sidebar-foot{ display: none; }
  .music-docs-navigation{ display: none; gap: 15px; max-height: min(52vh, 410px); overflow: auto; margin: 0 0 19px; padding: 14px; border: 1px solid rgba(139,183,194,.13); border-radius: 12px; background: rgba(8,13,15,.96); }
  .music-docs-sidebar[data-mobile-open="true"] .music-docs-navigation{ display: grid; }
  .music-nav-group{ padding-bottom: 11px; }
  .music-nav-group h2{ margin-bottom: 5px; }
  .music-nav-group-toggle{ min-height: 27px; }
  .music-nav-item{ min-height: 31px; }
  .music-docs-breadcrumbs{ margin: 3px 0 23px; }
  .music-article-title{ font-size: clamp(34px, 9vw, 43px); }
  .music-article-lede{ margin: 13px 0 24px; font-size: 14px; }
  .music-article-heading{ margin-top: 34px; font-size: 19px; }
  .music-feature-grid{ grid-template-columns: 1fr; }
  .music-player-preview{ grid-template-columns: 1fr; }
  .music-player-art{ min-height: 145px; }
  .music-source-list{ grid-template-columns: 1fr; }
  .music-docs-pagination{ margin-top: 34px; }
  .music-command-entry summary{ flex-wrap: wrap; gap: 7px; }
  .music-command-entry summary span{ flex-basis: 100%; padding-left: 1px; }
  .music-command-entry summary small{ margin-left: 0; }
  .music-command-param{ grid-template-columns: minmax(0,1fr) auto; }
  .music-command-param > span{ grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce){
  .ecosystem-hero,.music-docs-article-content,.music-command-body,.music-doc-accordion[open] > div{ animation: none !important; }
  .ecosystem-product,.ecosystem-product-actions .btn,.music-docs-invite,.music-nav-item,.music-nav-group-toggle,.music-nav-group-caret,.music-nav-items,.music-article-action{ transition: none !important; }
}