/**
 * music-studio.css — Music Studio surface (inline-host clone).
 *
 * Extracted from index.html in b.842 (was <style id="msInlineStyles">
 * inside <template id="msInlineTemplate">, lines 45208-55645 in the b.841
 * single-file build). Content is byte-identical to the inline block it
 * replaced.
 *
 * Scoping: all rules scoped via .music-studio-inline-host so they cannot
 * bleed into the parent page. Keyframes prefixed `msi-` to avoid collisions.
 * Two ID-selector rules for #msMasterLengthPop are unscoped but that ID is
 * unique to Music Studio.
 *
 * Loading: now linked from <head> at page load. Was previously cloned into
 * <head> at runtime by bootInlineMusicStudio() (line ~69297). The runtime
 * clone is now a no-op because the <style> was removed from the template —
 * bootInlineMusicStudio's `if (styleEl)` guard handles the absence cleanly.
 *
 * Component lives in <template id="msInlineTemplate"> and is activated via
 * bootInlineMusicStudio() on first showMusicStudio() call.
 */

        /* ================================================================
   PROTOTYPE NOTE — Music Studio
   This file mirrors /chat-prototype/index.html. SHELL REPLICA is
   copied verbatim from production index.html. All NEW music-studio
   work lives between the MUSIC STUDIO fences (CSS + HTML + JS),
   each scoped with the .ms- prefix to guarantee zero collision on
   merge. Three regions get lifted into production when approved.
   ================================================================ */
        /* === SHELL REPLICA START — copied verbatim from production index.html === */
        .music-studio-inline-host {
          --bg-deep: #050a06;

          --text: #ffffff;
          --text-muted: rgba(255, 255, 255, .72);
          --text-faint: rgba(255, 255, 255, .55);

          --lg-fill: rgba(255, 255, 255, .06);
          --lg-fill-hover: rgba(255, 255, 255, .10);
          --lg-fill-active: rgba(255, 255, 255, .16);
          --lg-stroke: rgba(255, 255, 255, .22);
          --lg-stroke-hi: rgba(255, 255, 255, .45);
          --lg-blur: blur(22px) saturate(1.30) brightness(1.04);
          --lg-blur-light: blur(14px) saturate(1.20);
          --lg-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 24px 60px -22px rgba(0, 0, 0, .65);

          --glass-bg: var(--lg-fill);
          --glass-bg-strong: var(--lg-fill-hover);
          --glass-bg-active: var(--lg-fill-active);
          --glass-border: var(--lg-stroke);
          --glass-border-strong: var(--lg-stroke-hi);
          --glass-blur: var(--lg-blur-light);
          --glass-blur-strong: var(--lg-blur);
          --glass-shadow: var(--lg-shadow);

          /* Legacy switch tokens — re-bound to the theme accent so any UI
     element that still references --switch-N adapts to the active
     theme (Garden=emerald, Hanley=lavender, future themes flow). */
          --switch-1: rgba(var(--theme-accent-rgb), .85);
          --switch-2: rgb(var(--theme-accent-rgb));
          --switch-3: rgb(var(--theme-accent-rgb));
          --switch-4: rgba(var(--theme-accent-rgb), .55);

          --orb-1: #2c5a36;
          --orb-2: #1f4a2c;
          --orb-3: #3a8b5d;
          --orb-4: #4fa564;
          --orb-5: #27ae60;
          --orb-6: #6fc99a;

          --coin-gold: #fca600;
          --danger: #ff5060;

          --active-tint: rgba(var(--theme-accent-rgb), .18);
          --active-glow: rgba(var(--theme-accent-rgb), .30);

          /* Fallback theme accent — overridden per html[data-theme=…] block. */
          --theme-accent: rgb(47, 208, 132);
          --theme-accent-rgb: 47, 208, 132;

          --r-sm: 8px;
          --r-md: 14px;
          --r-lg: 22px;
          --r-xl: 28px;
          --ease: cubic-bezier(.2, .7, .2, 1);
          --ease-out: cubic-bezier(.16, 1, .3, 1);

          --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
          --font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
          --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
        }

        /* 2026-05-17 b.834 — Theme IDs were renamed (`garden-of-life` →
           `my-garden`; new `her-garden` added) but the music-studio
           inline host's CSS never followed. Result: when the user picked
           the garden theme and opened Music Studio, the host fell back
           to unthemed defaults because no rule matched `[data-theme="my-garden"]`.
           Aliasing all garden-style theme IDs to this single rule fixes
           the regression with no other changes. */
        .music-studio-inline-host[data-theme="garden-of-life"],
        .music-studio-inline-host[data-theme="my-garden"],
        .music-studio-inline-host[data-theme="her-garden"] {
          --bg-deep: #050a06;
          --orb-1: #2c5a36;
          --orb-2: #1f4a2c;
          --orb-3: #3a8b5d;
          --orb-4: #4fa564;
          --orb-5: #27ae60;
          --orb-6: #6fc99a;
          --bg-scrim-top: rgba(0, 0, 0, .30);
          --bg-scrim-btm: rgba(0, 8, 4, .55);
          --bg-vignette: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0, 0, 0, .40) 95%);
          --video-tone: saturate(1.10) brightness(.78) contrast(1.06);
          --active-tint: rgba(var(--theme-accent-rgb), .20);
          --active-glow: rgba(var(--theme-accent-rgb), .32);
          /* Theme accent — emerald for Garden. RGB form so we can fade it. */
          --theme-accent: rgb(47, 208, 132);
          --theme-accent-rgb: 47, 208, 132;
          --bg-video-url: url("https://d8j0ntlcm91z4.cloudfront.net/user_3D25faFrIcI2zDYgJrIaAtB3AjE/hf_20260506_213246_73072a86-7896-439c-beaa-021b2fc8ed55.mp4");
        }

        .music-studio-inline-host[data-theme="hanley-sky"] {
          --bg-deep: #02030a;
          --orb-1: #1a2452;
          --orb-2: #2a1d4f;
          --orb-3: #3b3475;
          --orb-4: #5a4ca8;
          --orb-5: #7b5fc4;
          --orb-6: #a890e8;
          --bg-scrim-top: rgba(0, 0, 0, .25);
          --bg-scrim-btm: rgba(2, 3, 12, .55);
          --bg-vignette: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0, 0, 0, .55) 95%);
          --video-tone: saturate(1.15) brightness(.82) contrast(1.10);
          --active-tint: rgba(168, 144, 232, .22);
          --active-glow: rgba(168, 144, 232, .36);
          /* Theme accent — lavender for Hanley. */
          --theme-accent: rgb(168, 144, 232);
          --theme-accent-rgb: 168, 144, 232;
        }

        .music-studio-inline-host {
          box-sizing: border-box;
          margin: 0;
          padding: 0
        }

        .music-studio-inline-host,
        .music-studio-inline-host {
          height: 100%
        }

        .music-studio-inline-host {
          font-family: var(--font-body);
          color: var(--text);
          background: var(--bg-deep);
          overflow: hidden;
          font-weight: 600;
          line-height: 1.5;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          display: flex;
          flex-direction: column;
        }

        .music-studio-inline-host button {
          font: inherit;
          color: inherit;
          background: none;
          border: none;
          cursor: pointer;
          letter-spacing: inherit
        }

        .music-studio-inline-host input,
        .music-studio-inline-host textarea {
          font: inherit;
          color: inherit;
          background: none;
          border: none;
          outline: none
        }

        .music-studio-inline-host em,
        .music-studio-inline-host i {
          font-style: normal !important
        }

        /* EMBEDDED MODE — when this prototype is loaded inside an iframe in
   the main app (?embedded=1 or top-level Studio tab), hide the
   duplicated chrome (header, bg orbs, prototype's coin balance) so
   only the studio canvas shows. The parent already provides those. */
        .music-studio-inline-host[data-embedded="true"] .header,
        .music-studio-inline-host[data-embedded="true"] .bg-stage {
          display: none !important;
        }

        .music-studio-inline-host[data-embedded-host="true"],
        .music-studio-inline-host[data-embedded="true"] {
          background: transparent !important;
        }

        .music-studio-inline-host[data-embedded="true"] .main,
        .music-studio-inline-host[data-embedded="true"] .ms-pane,
        .music-studio-inline-host[data-embedded="true"] .ms-musician,
        .music-studio-inline-host[data-embedded="true"] .ms-songwriter {
          background: transparent !important;
        }

        .music-studio-inline-host[data-embedded="true"] .main {
          padding-top: 14px;
        }

        /* Background — orbs + theme video. Shell-identical anatomy. */
        .music-studio-inline-host .bg-stage {
          position: fixed;
          inset: 0;
          z-index: 0;
          overflow: hidden;
          background: var(--bg-deep);
        }

        .music-studio-inline-host .bg-stage::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, var(--bg-scrim-top) 0%, var(--bg-scrim-btm) 100%);
          z-index: 2;
          pointer-events: none;
        }

        .music-studio-inline-host .bg-stage::after {
          content: '';
          position: absolute;
          inset: 0;
          background: var(--bg-vignette);
          z-index: 3;
          pointer-events: none;
        }

        .music-studio-inline-host .bg-stage video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: var(--video-tone);
          z-index: 1;
        }

        /* b.902 — Music Studio ORBS REMOVED — 146 lines of .music-studio-inline-host .orb*
           rules + @keyframes msi-drift1..6 deleted. Theme video (.bg-stage video) layers
           a full-viewport background, so the orbs were doing redundant GPU work. */


        /* Header */
        .music-studio-inline-host .header {
          position: relative;
          z-index: 10;
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 22px;
        }

        .music-studio-inline-host .brand {
          display: flex;
          align-items: center;
          gap: 10px
        }

        .music-studio-inline-host .brand-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 17px;
          letter-spacing: -.01em;
          color: var(--text);
        }

        .music-studio-inline-host .brand-name em {
          font-style: normal !important;
          font-weight: 500;
          opacity: .72
        }

        .music-studio-inline-host .build-tag {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
        }

        .music-studio-inline-host .tabs {
          display: flex;
          align-items: center;
          gap: 4px;
          margin-left: 18px;
          padding: 4px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          border-radius: 999px;
        }

        .music-studio-inline-host .tab {
          position: relative;
          font-family: var(--font-ui);
          font-size: 13px;
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 999px;
          background: transparent;
          border: 0;
          color: var(--text-muted);
          cursor: pointer;
          transition: all .25s var(--ease);
          white-space: nowrap;
        }

        .music-studio-inline-host .tab:hover {
          color: var(--text);
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .tab.active {
          background:
            radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%),
            var(--lg-fill);
          color: var(--text);
          border: 1.5px solid var(--lg-stroke-hi);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px var(--active-glow);
          padding: 6.5px 14.5px;
        }

        .music-studio-inline-host .tab.locked {
          opacity: .55;
          cursor: not-allowed
        }

        .music-studio-inline-host .tab.locked .tip {
          position: absolute;
          top: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          padding: 6px 10px;
          border-radius: 8px;
          background: rgba(0, 0, 0, .85);
          color: var(--text);
          font-size: 11px;
          font-weight: 500;
          white-space: nowrap;
          opacity: 0;
          pointer-events: none;
          transition: opacity .2s var(--ease);
          z-index: 50;
        }

        .music-studio-inline-host .tab.locked:hover .tip {
          opacity: 1
        }

        .music-studio-inline-host .h-right {
          margin-left: auto;
          display: flex;
          align-items: center;
          gap: 10px
        }

        .music-studio-inline-host .bal-card {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 5px 5px 5px 14px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          border-radius: 999px;
        }

        .music-studio-inline-host .bal-amount {
          display: flex;
          align-items: center;
          gap: 6px;
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          color: var(--text);
        }

        .music-studio-inline-host .bal-amount .num {
          font-size: 13px
        }

        .music-studio-inline-host .bal-add {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          padding: 7px 12px;
          border-radius: 999px;
          background: var(--lg-fill-hover);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .bal-add:hover {
          background: var(--lg-fill-active)
        }

        .music-studio-inline-host .account-btn,
        .music-studio-inline-host .theme-toggle {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 14px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          color: var(--text);
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .account-btn:hover,
        .music-studio-inline-host .theme-toggle:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .account-btn .ava {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: var(--lg-fill-active);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 11px;
        }

        /* Joy coin — identical anatomy to production */
        .music-studio-inline-host .joy-coin {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 1.25em;
          height: 1.25em;
          flex: none;
          vertical-align: middle;
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)) drop-shadow(0 0 10px rgba(255, 255, 255, .16));
        }

        .music-studio-inline-host .joy-coin svg {
          width: 100%;
          height: 100%;
          display: block;
          overflow: visible
        }

        .music-studio-inline-host .joy-coin .coin-spiral {
          mix-blend-mode: screen;
          filter: saturate(140%)
        }

        .music-studio-inline-host .joy-coin .r {
          transform-origin: 16px 16px;
          will-change: transform
        }

        .music-studio-inline-host .joy-coin .r1 {
          animation: msi-cr 1.6s linear infinite
        }

        .music-studio-inline-host .joy-coin .r2 {
          animation: msi-cr 2.0s linear infinite reverse
        }

        .music-studio-inline-host .joy-coin .r3 {
          animation: msi-cr 1.4s linear infinite
        }

        .music-studio-inline-host .joy-coin .r4 {
          animation: msi-cr 1.8s linear infinite reverse
        }

        .music-studio-inline-host .joy-coin .r5 {
          transform-origin: 16px 16px;
          animation: msi-cr-pulse 2s ease-in-out infinite
        }

        .music-studio-inline-host .joy-coin .hi {
          animation: msi-cr-hi 3s ease-in-out infinite
        }

        @keyframes msi-cr {
          to {
            transform: rotate(360deg)
          }
        }

        @keyframes msi-cr-pulse {

          0%,
          100% {
            transform: scale(1);
            opacity: 1
          }

          50% {
            transform: scale(1.5);
            opacity: .7
          }
        }

        @keyframes msi-cr-hi {

          0%,
          100% {
            opacity: .5
          }

          50% {
            opacity: .25
          }
        }

        .music-studio-inline-host .bal-amount .joy-coin {
          width: 1.85em;
          height: 1.85em;
          margin-right: 2px
        }

        /* === SHELL REPLICA END === */
        /* === MUSIC STUDIO CSS START === */
        /* Every selector below is .ms-* prefixed so it can drop into
   production index.html with zero risk of class collisions. The
   shell already provides liquid glass, theme tokens, fonts, orbs.
   Music Studio just composes them into a stage. */
        .music-studio-inline-host .main {
          position: relative;
          z-index: 5;
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0 22px 8px;
          overflow: hidden;
          min-height: 0;
        }

        .music-studio-inline-host .music-studio {
          flex: 1;
          display: flex;
          flex-direction: column;
          width: 100%;
          max-width: 1180px;
          margin: 0 auto;
          gap: 14px;
          padding-top: 0;
          min-height: 0;
        }

        /* Session header — shared by Songwriter + Musician. The song name
   sits left; My Songs button is anchored separately to the right
   edge of .main. */
        .music-studio-inline-host .ms-session-head {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 0 4px 4px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-session-name {
          flex: 0 1 auto;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 22px;
          letter-spacing: -.015em;
          color: var(--text);
          background: transparent;
          border: 0;
          outline: none;
          min-width: 200px;
          max-width: 480px;
          padding: 4px 0;
          border-bottom: 1px solid transparent;
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-session-name:hover {
          border-color: var(--lg-stroke)
        }

        .music-studio-inline-host .ms-session-name:focus {
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-session-name::placeholder {
          color: var(--text-faint)
        }

        .music-studio-inline-host .ms-saved-tag {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--switch-3);
          display: inline-flex;
          align-items: center;
          gap: 5px;
          opacity: .85;
        }

        .music-studio-inline-host .ms-saved-tag::before {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--switch-3);
          box-shadow: 0 0 8px var(--switch-3);
        }

        .music-studio-inline-host .ms-session-spacer {
          flex: 1
        }

        /* My Songs anchor — pinned to the page's right edge below the
   global header. The button sits at the same x-position as the
   theme button in the header. The Saved indicator below is the
   save-state hook (no longer orphaned in the session header). */
        .music-studio-inline-host .ms-songs-anchor-wrap {
          position: absolute;
          top: 8px;
          right: 22px;
          z-index: 20;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 5px;
        }

        .music-studio-inline-host .ms-songs-anchored {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 14px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          color: var(--text);
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-songs-anchored:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-songs-anchored .songs-btn-ico {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 14px;
          height: 14px;
        }

        .music-studio-inline-host .ms-songs-anchored .songs-btn-ico svg {
          width: 14px;
          height: 14px
        }

        /* Saved indicator — sits under the My Songs button, only visible
   briefly during/after a save action via JS toggle. */
        .music-studio-inline-host .ms-saved-indicator {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 2px 9px;
          font-family: var(--font-ui);
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: var(--switch-3);
          opacity: .92;
          transition: opacity .2s var(--ease);
        }

        .music-studio-inline-host .ms-saved-indicator[hidden] {
          display: none
        }

        .music-studio-inline-host .ms-saved-indicator::before {
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: var(--switch-3);
          box-shadow: 0 0 8px var(--switch-3);
        }

        /* Master bar — the source of truth. Tempo, time, key, chord
   sequence, length. overflow:hidden keeps long chord sequences
   from blasting out the right side of the row. */
        .music-studio-inline-host .ms-master {
          display: flex;
          align-items: stretch;
          gap: 8px;
          padding: 8px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow);
          flex: 0 0 auto;
          overflow: hidden;
          min-width: 0;
        }

        .music-studio-inline-host .ms-chip {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          gap: 2px;
          padding: 10px 16px;
          border-radius: var(--r-md);
          background: transparent;
          border: 1px solid transparent;
          color: var(--text);
          cursor: pointer;
          transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
          text-align: left;
          min-width: 96px;
        }

        .music-studio-inline-host .ms-chip:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke);
        }

        .music-studio-inline-host .ms-chip-label {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: var(--text-faint);
        }

        .music-studio-inline-host .ms-chip-val {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 17px;
          letter-spacing: -.01em;
          color: var(--text);
          display: flex;
          align-items: baseline;
          gap: 5px;
        }

        .music-studio-inline-host .ms-chip-val em {
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 600;
          color: var(--text-muted);
          letter-spacing: .04em;
        }

        .music-studio-inline-host .ms-chip-tempo {
          position: relative;
          padding-right: 36px;
          min-width: 120px
        }

        .music-studio-inline-host .ms-chip-pulse {
          position: absolute;
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: var(--switch-3);
          box-shadow: 0 0 12px var(--switch-3), 0 0 0 4px rgba(var(--theme-accent-rgb), .18);
          animation: msi-ms-pulse 0.545s var(--ease-out) infinite;
          /* 110bpm */
        }

        @keyframes msi-ms-pulse {
          0% {
            transform: translateY(-50%) scale(.65);
            opacity: .55
          }

          35% {
            transform: translateY(-50%) scale(1.15);
            opacity: 1
          }

          100% {
            transform: translateY(-50%) scale(.65);
            opacity: .55
          }
        }

        /* Chord chart chip — wider, scrolling chord pills inside */
        .music-studio-inline-host .ms-chip-chords {
          flex: 1;
          min-width: 0;
          padding-right: 14px
        }

        .music-studio-inline-host .ms-chord-flow {
          display: flex;
          align-items: center;
          gap: 6px;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          color: var(--text);
          overflow: hidden;
          margin-top: 2px;
        }

        .music-studio-inline-host .ms-chord-flow span {
          display: inline-flex;
          align-items: center;
          padding: 4px 9px;
          border-radius: 8px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          letter-spacing: -.01em;
          font-size: 13px;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-chord-flow span+span::before {
          content: '·';
          color: var(--text-faint);
          margin-right: 6px;
          margin-left: -3px;
        }

        /* "+N more" indicator — appears in the master chip when the chord
   sequence is too long to display every chord inline. */
        .music-studio-inline-host .ms-chord-flow .ms-chord-flow-more {
          background: transparent;
          border: none;
          color: var(--text-faint);
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 600;
          padding: 4px 0;
          letter-spacing: .04em;
        }

        .music-studio-inline-host .ms-chord-flow .ms-chord-flow-more::before {
          display: none
        }

        .music-studio-inline-host .ms-chip-divider {
          width: 1px;
          background: var(--lg-stroke);
          margin: 6px 0;
          flex: 0 0 auto;
        }

        /* Stage — the central canvas where the band lives. Has its own
   subtle glass tint so the tracks look like they're sitting on
   something, not floating in void. Scrolls when many tracks. */
        .music-studio-inline-host .ms-stage {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 24px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: var(--r-xl);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow);
          min-height: 0;
          position: relative;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-stage::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .08), transparent 60%);
          pointer-events: none;
        }

        .music-studio-inline-host .ms-stage-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-bottom: 18px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-stage-head h2 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 18px;
          letter-spacing: -.01em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-stage-head p {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 500;
          color: var(--text-muted);
          letter-spacing: .01em;
        }

        .music-studio-inline-host .ms-stage-bars {
          display: flex;
          align-items: center;
          gap: 6px;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 600;
          color: var(--text-faint);
          letter-spacing: .04em;
          text-transform: uppercase;
        }

        .music-studio-inline-host .ms-tracks {
          display: flex;
          flex-direction: column;
          gap: 12px;
          overflow-y: auto;
          flex: 1;
          min-height: 0;
          padding: 4px;
          margin: 0 -4px;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
          /* Center the empty-state messaging vertically when no tracks
     exist. This selector neutralizes once any .ms-track is added. */
          justify-content: flex-start;
        }

        .music-studio-inline-host .ms-tracks:not(:has(.ms-track)) {
          justify-content: center;
        }

        .music-studio-inline-host .ms-tracks::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-tracks::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        /* Track slab — the unit. Each is one musician. */
        .music-studio-inline-host .ms-track {
          display: grid;
          grid-template-columns: 56px 1fr 320px auto;
          align-items: center;
          gap: 16px;
          padding: 14px 16px;
          /* b.490 — Canonical liquid-glass recipe per user request. */
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .18);
          -webkit-backdrop-filter: blur(40px) saturate(1.7);
          backdrop-filter: blur(40px) saturate(1.7);
          border-radius: 20px;
          box-shadow:
            0 28px 64px -18px rgba(0, 0, 0, .55),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(0, 0, 0, .10);
          transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
          animation: msi-ms-track-in .5s var(--ease-out) both;
        }

        @keyframes msi-ms-track-in {
          from {
            opacity: 0;
            transform: translateY(8px)
          }

          to {
            opacity: 1;
            transform: translateY(0)
          }
        }

        .music-studio-inline-host .ms-track:hover {
          border-color: var(--lg-stroke-hi);
          background: var(--lg-fill-hover);
        }

        .music-studio-inline-host .ms-track[data-frozen="true"] {
          border-color: rgba(var(--theme-accent-rgb), .45);
          background: radial-gradient(120% 100% at 30% 0%, rgba(var(--theme-accent-rgb), .08), transparent 70%), var(--lg-fill);
        }

        .music-studio-inline-host .ms-track[data-muted="true"] {
          opacity: .45
        }

        /* Track icon — animated, instrument-specific. Each instrument gets
   its own breathing motion so the band feels alive even at rest. */
        .music-studio-inline-host .ms-track-icon {
          width: 56px;
          height: 56px;
          border-radius: 14px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          display: grid;
          place-items: center;
          position: relative;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-track-icon::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .18), transparent 60%);
          pointer-events: none;
        }

        .music-studio-inline-host .ms-track-icon svg {
          width: 28px;
          height: 28px;
          color: var(--text);
          position: relative;
          z-index: 1;
        }

        /* Drum icon — pulse */
        .music-studio-inline-host .ms-track[data-instrument="drums"] .ms-track-icon svg {
          animation: msi-ms-drum-pulse 0.545s var(--ease-out) infinite
        }

        @keyframes msi-ms-drum-pulse {

          0%,
          100% {
            transform: scale(1)
          }

          50% {
            transform: scale(.92)
          }
        }

        /* Bass icon — gentle wobble */
        .music-studio-inline-host .ms-track[data-instrument="bass"] .ms-track-icon svg {
          animation: msi-ms-bass-rock 1.09s ease-in-out infinite
        }

        @keyframes msi-ms-bass-rock {

          0%,
          100% {
            transform: translateY(0)
          }

          50% {
            transform: translateY(-2px)
          }
        }

        /* Piano icon — sparkle */
        .music-studio-inline-host .ms-track[data-instrument="piano"] .ms-track-icon::after {
          content: '';
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          background: var(--text);
          opacity: .7;
          top: 30%;
          left: 60%;
          animation: msi-ms-key-sparkle 2.1s var(--ease-out) infinite;
        }

        @keyframes msi-ms-key-sparkle {

          0%,
          100% {
            transform: scale(0);
            opacity: 0
          }

          50% {
            transform: scale(1);
            opacity: .9
          }
        }

        /* Vocals icon — breathing */
        .music-studio-inline-host .ms-track[data-instrument="vocals"] .ms-track-icon svg {
          animation: msi-ms-voice-breathe 3.2s ease-in-out infinite
        }

        @keyframes msi-ms-voice-breathe {

          0%,
          100% {
            transform: scale(1)
          }

          50% {
            transform: scale(1.08)
          }
        }

        .music-studio-inline-host .ms-track-text {
          display: flex;
          flex-direction: column;
          gap: 4px;
          min-width: 0;
        }

        .music-studio-inline-host .ms-track-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -.01em;
          color: var(--text);
          display: flex;
          align-items: baseline;
          gap: 8px;
        }

        .music-studio-inline-host .ms-track-meta {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          color: var(--text-faint);
          letter-spacing: .06em;
          text-transform: uppercase;
        }

        .music-studio-inline-host .ms-track-vibe {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: var(--text-muted);
          background: transparent;
          border: 0;
          outline: none;
          width: 100%;
          padding: 2px 0;
          border-bottom: 1px solid transparent;
          transition: border-color .2s var(--ease), color .2s var(--ease);
          resize: none;
          font-style: normal !important;
        }

        .music-studio-inline-host .ms-track-vibe:hover {
          color: var(--text);
          border-bottom-color: var(--lg-stroke)
        }

        .music-studio-inline-host .ms-track-vibe:focus {
          color: var(--text);
          border-bottom-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-track-vibe::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        /* Waveform mini — animated bars when generating, static when ready,
   muted ghost when empty. */
        .music-studio-inline-host .ms-track-wave {
          display: flex;
          align-items: center;
          justify-content: stretch;
          gap: 3px;
          width: 320px;
          height: 48px;
          padding: 0 10px;
          border-radius: 10px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-track-wave .ms-bar {
          flex: 1;
          min-width: 0;
          background: var(--text);
          opacity: .7;
          border-radius: 2px;
          transition: height .3s var(--ease);
        }

        .music-studio-inline-host .ms-track[data-state="ready"] .ms-track-wave .ms-bar {
          opacity: .85
        }

        .music-studio-inline-host .ms-track[data-state="empty"] .ms-track-wave {
          opacity: .4
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar {
          animation: msi-ms-wave-pulse 1.2s ease-in-out infinite;
          opacity: 1;
          background: var(--switch-3);
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(2) {
          animation-delay: .08s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(3) {
          animation-delay: .16s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(4) {
          animation-delay: .24s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(5) {
          animation-delay: .32s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(6) {
          animation-delay: .40s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(7) {
          animation-delay: .48s
        }

        .music-studio-inline-host .ms-track[data-state="generating"] .ms-track-wave .ms-bar:nth-child(8) {
          animation-delay: .56s
        }

        @keyframes msi-ms-wave-pulse {

          0%,
          100% {
            transform: scaleY(.4)
          }

          50% {
            transform: scaleY(1)
          }
        }

        /* Per-track controls — square glass buttons */
        .music-studio-inline-host .ms-track-controls {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .music-studio-inline-host .ms-tc-btn {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: transparent;
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .04em;
          transition: all .2s var(--ease);
          position: relative;
          /* anchor point for click-flash chip */
        }

        .music-studio-inline-host .ms-tc-btn:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-tc-btn[data-on="true"] {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
          box-shadow: 0 0 12px var(--active-glow);
        }

        .music-studio-inline-host .ms-tc-btn svg {
          width: 14px;
          height: 14px
        }

        /* Click-flash chip — sits ABOVE the action button to confirm what
   the user just did (Soloed, Muted, Frozen, Re-rolling, Removed…).
   Fades up briefly then dissolves so the affordance never sticks. */
        .music-studio-inline-host .ms-tc-flash {
          position: absolute;
          bottom: calc(100% + 6px);
          left: 50%;
          transform: translateX(-50%) translateY(2px);
          padding: 4px 9px;
          border-radius: 7px;
          background: var(--lg-fill-active);
          border: 1px solid var(--lg-stroke-hi);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: .02em;
          color: var(--text);
          white-space: nowrap;
          pointer-events: none;
          box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
          animation: msi-ms-tc-flash 1.4s var(--ease) forwards;
          z-index: 5;
        }

        .music-studio-inline-host .ms-tc-flash::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 5px solid transparent;
          border-top-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-tc-flash[data-tone="amber"] {
          border-color: var(--coin-gold);
          color: var(--coin-gold);
          box-shadow: 0 6px 18px rgba(252, 166, 0, .35);
        }

        .music-studio-inline-host .ms-tc-flash[data-tone="amber"]::after {
          border-top-color: var(--coin-gold)
        }

        .music-studio-inline-host .ms-tc-flash[data-tone="danger"] {
          border-color: var(--danger, #ef4a4a);
          color: var(--danger, #ef4a4a);
        }

        .music-studio-inline-host .ms-tc-flash[data-tone="danger"]::after {
          border-top-color: var(--danger, #ef4a4a)
        }

        @keyframes msi-ms-tc-flash {
          0% {
            opacity: 0;
            transform: translateX(-50%) translateY(2px)
          }

          18% {
            opacity: 1;
            transform: translateX(-50%) translateY(0)
          }

          78% {
            opacity: 1;
            transform: translateX(-50%) translateY(0)
          }

          100% {
            opacity: 0;
            transform: translateX(-50%) translateY(-3px)
          }
        }

        /* Add-track row — primary affordance for growing the band */
        .music-studio-inline-host .ms-add-track {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 18px;
          background: transparent;
          border: 1.5px dashed var(--lg-stroke);
          border-radius: var(--r-lg);
          color: var(--text-muted);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          letter-spacing: -.005em;
          cursor: pointer;
          transition: all .25s var(--ease);
        }

        .music-studio-inline-host .ms-add-track:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
          color: var(--text);
          transform: translateY(-1px);
        }

        .music-studio-inline-host .ms-add-track .ms-add-glyph {
          display: inline-grid;
          place-items: center;
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          line-height: 1;
          color: var(--text);
        }

        /* Empty stage state — when no tracks added. The "empty stage"
   metaphor is on purpose: invitation, not blank slate. */
        .music-studio-inline-host .ms-empty {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 18px;
          padding: 40px 20px;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-empty-glyph {
          width: 96px;
          height: 96px;
          border-radius: 50%;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          display: grid;
          place-items: center;
          position: relative;
        }

        .music-studio-inline-host .ms-empty-glyph::after {
          content: '';
          position: absolute;
          inset: -8px;
          border-radius: 50%;
          border: 1px dashed var(--lg-stroke);
          opacity: .5;
          animation: msi-ms-empty-spin 30s linear infinite;
        }

        @keyframes msi-ms-empty-spin {
          to {
            transform: rotate(360deg)
          }
        }

        .music-studio-inline-host .ms-empty-glyph svg {
          width: 38px;
          height: 38px;
          color: var(--text);
          opacity: .85
        }

        .music-studio-inline-host .ms-empty h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 22px;
          letter-spacing: -.015em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-empty p {
          font-family: var(--font-ui);
          font-size: 13px;
          font-weight: 500;
          color: var(--text-muted);
          max-width: 380px;
          line-height: 1.55;
        }

        /* Action bar — bottom, sticky-feel without sticky positioning. */
        .music-studio-inline-host .ms-action-bar {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 18px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-energy {
          display: flex;
          align-items: center;
          gap: 14px;
          flex: 1;
          min-width: 0;
        }

        .music-studio-inline-host .ms-energy-label {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: var(--text-faint);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-energy-curve {
          flex: 1;
          height: 32px;
          display: flex;
          align-items: flex-end;
          gap: 3px;
          position: relative;
        }

        .music-studio-inline-host .ms-energy-curve .ms-eb {
          flex: 1;
          background: linear-gradient(180deg, var(--lg-fill-active), var(--lg-fill));
          border-radius: 2px 2px 0 0;
          border: 1px solid var(--lg-stroke);
          border-bottom: 0;
          cursor: ns-resize;
          transition: background .15s var(--ease);
        }

        .music-studio-inline-host .ms-energy-curve .ms-eb:hover {
          background: linear-gradient(180deg, var(--switch-3), var(--lg-fill-active))
        }

        .music-studio-inline-host .ms-energy-curve .ms-eb.peak {
          background: linear-gradient(180deg, var(--switch-3), var(--lg-fill-active))
        }

        .music-studio-inline-host .ms-actions {
          display: flex;
          align-items: flex-end;
          gap: 10px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-secondary-btn {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          padding: 10px 16px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-secondary-btn:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi)
        }

        /* Primary CTA — the showstopper. Pulsates softly at idle, lights
   up brighter on hover. The cost pill connects on the right. */
        .music-studio-inline-host .ms-generate-btn {
          position: relative;
          display: inline-flex;
          align-items: center;
          padding: 0;
          background:
            radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%),
            var(--lg-fill-hover);
          border: 1.5px solid var(--lg-stroke-hi);
          border-radius: 999px;
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px var(--active-glow);
          overflow: hidden;
          transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }

        .music-studio-inline-host .ms-generate-btn::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(80% 100% at 50% 100%, rgba(var(--theme-accent-rgb), .18), transparent 70%);
          animation: msi-ms-cta-glow 2.6s ease-in-out infinite;
          pointer-events: none;
        }

        @keyframes msi-ms-cta-glow {

          0%,
          100% {
            opacity: .55
          }

          50% {
            opacity: 1
          }
        }

        .music-studio-inline-host .ms-generate-btn:hover {
          transform: translateY(-1px);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 32px var(--active-glow)
        }

        .music-studio-inline-host .ms-gen-main {
          position: relative;
          z-index: 1;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 14px 22px;
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 14px;
          letter-spacing: -.005em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-gen-cost {
          position: relative;
          z-index: 1;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 14px 18px;
          border-left: 1px solid var(--lg-stroke-hi);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          color: var(--text);
          background: rgba(0, 0, 0, .18);
        }

        .music-studio-inline-host .ms-gen-cost .joy-coin {
          width: 1.4em;
          height: 1.4em
        }

        /* Add-instrument modal — tile picker. Backdrop is a soft tinted
   wash so the theme orbs / video bleed through, keeping the modal
   on-theme rather than dropping the user into a black void. */
        .music-studio-inline-host .ms-modal {
          position: fixed;
          inset: 0;
          z-index: 100;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 22px;
          background: linear-gradient(180deg, var(--bg-scrim-top) 0%, var(--bg-scrim-btm) 100%);
          -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
          animation: msi-ms-modal-fade .25s var(--ease) both;
        }

        .music-studio-inline-host .ms-modal[data-open="true"] {
          display: flex
        }

        @keyframes msi-ms-modal-fade {
          from {
            opacity: 0
          }

          to {
            opacity: 1
          }
        }

        .music-studio-inline-host .ms-modal-shell {
          width: min(820px, 100%);
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-xl);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 40px 100px rgba(0, 0, 0, .55);
          overflow: hidden;
          animation: msi-ms-modal-rise .35s var(--ease-out) both;
        }

        @keyframes msi-ms-modal-rise {
          from {
            transform: translateY(20px) scale(.98);
            opacity: 0
          }

          to {
            transform: translateY(0) scale(1);
            opacity: 1
          }
        }

        .music-studio-inline-host .ms-modal-head {
          padding: 24px 28px 18px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 18px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-modal-head h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 22px;
          letter-spacing: -.015em;
        }

        .music-studio-inline-host .ms-modal-head p {
          font-family: var(--font-ui);
          font-size: 13px;
          font-weight: 500;
          color: var(--text-muted);
          margin-top: 4px;
        }

        .music-studio-inline-host .ms-modal-x {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          font-size: 18px;
          line-height: 1;
          display: grid;
          place-items: center;
          transition: background .2s var(--ease);
        }

        .music-studio-inline-host .ms-modal-x:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-modal-body {
          padding: 22px 28px 26px;
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
        }

        .music-studio-inline-host .ms-modal-body::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-modal-body::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        .music-studio-inline-host .ms-instr-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
        }

        @media (max-width:680px) {
          .music-studio-inline-host .ms-instr-grid {
            grid-template-columns: repeat(2, 1fr)
          }
        }

        .music-studio-inline-host .ms-instr-tile {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
          padding: 18px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: var(--r-lg);
          text-align: left;
          cursor: pointer;
          transition: all .22s var(--ease);
        }

        .music-studio-inline-host .ms-instr-tile:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
          transform: translateY(-2px);
        }

        .music-studio-inline-host .ms-instr-tile-ico {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          display: grid;
          place-items: center;
          color: var(--text);
        }

        .music-studio-inline-host .ms-instr-tile-ico svg {
          width: 22px;
          height: 22px
        }

        .music-studio-inline-host .ms-instr-tile-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -.005em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-instr-tile-desc {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 500;
          color: var(--text-muted);
          line-height: 1.5;
        }

        /* Chord-chart popover */
        .music-studio-inline-host .ms-popover {
          position: fixed;
          z-index: 90;
          min-width: 280px;
          padding: 18px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          display: none;
          animation: msi-ms-pop-in .2s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-popover[data-open="true"] {
          display: block
        }

        @keyframes msi-ms-pop-in {
          from {
            transform: translateY(-6px);
            opacity: 0
          }

          to {
            transform: translateY(0);
            opacity: 1
          }
        }

        .music-studio-inline-host .ms-popover h4 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          letter-spacing: -.005em;
          margin-bottom: 8px;
        }

        .music-studio-inline-host .ms-popover p {
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 500;
          color: var(--text-muted);
          margin-bottom: 12px;
        }

        .music-studio-inline-host .ms-popover-row {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .music-studio-inline-host .ms-popover-pill {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-popover-pill:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-popover-pill.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border-color: var(--lg-stroke-hi);
        }

        /* Responsive — collapse to single-column track on narrow screens */
        @media (max-width:880px) {
          .music-studio-inline-host .ms-master {
            flex-wrap: wrap
          }

          .music-studio-inline-host .ms-track {
            grid-template-columns: 48px 1fr;
            grid-template-rows: auto auto;
          }

          .music-studio-inline-host .ms-track-wave {
            grid-column: 1/3;
            width: 100%
          }

          .music-studio-inline-host .ms-track-controls {
            grid-column: 1/3;
            justify-self: start
          }
        }

        /* === Mode toggle (Songwriter ↔ Musician) === */
        /* Mode toggle sits flush-left under the header, parallel to the brand
   wordmark. .main is a column flex container with horizontal padding
   22px (matching .header's brand padding), so align-self:flex-start
   plants this pill at the same x-position as "Shades of Joy". */
        .music-studio-inline-host .ms-mode-toggle {
          display: inline-flex;
          align-self: flex-start;
          padding: 4px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          border-radius: 999px;
          margin: 8px 0 14px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-mode-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 16px;
          border-radius: 999px;
          background: transparent;
          border: 0;
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .02em;
          color: var(--text-muted);
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-mode-btn:hover {
          color: var(--text);
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-mode-btn.on {
          color: var(--text);
          background:
            radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%),
            var(--lg-fill);
          border: 1.5px solid var(--lg-stroke-hi);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 18px var(--active-glow);
          padding: 6.5px 14.5px;
        }

        .music-studio-inline-host .ms-mb-ico {
          width: 14px;
          height: 14px;
          display: inline-flex;
          align-items: center;
          justify-content: center
        }

        .music-studio-inline-host .ms-mb-ico svg {
          width: 14px;
          height: 14px
        }

        /* Pane visibility */
        .music-studio-inline-host .ms-pane {
          display: none
        }

        .music-studio-inline-host .ms-pane.on {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-height: 0;
          gap: 20px
        }

        /* Session header — shared by both modes. Title input on the left,
   My Songs button on the right. */
        /* === Songwriter mode — chat-style input pattern ===
   Title pinned to the top of the pane, input bar pinned to the
   bottom, mirrored from production's chat input anatomy. */
        .music-studio-inline-host .ms-songwriter.on {
          align-items: center;
          justify-content: flex-start;
          padding: 8px 0 0;
        }

        .music-studio-inline-host .ms-sw-shell {
          width: 100%;
          max-width: 1280px;
          display: flex;
          flex-direction: column;
          margin: 0 auto;
          flex: 1;
          min-height: 0;
          gap: 0;
        }

        /* Spacer sits between title and inputbar so the bar is pushed to
   the foot of the available space. */
        .music-studio-inline-host .ms-sw-flex-spacer {
          flex: 1;
          min-height: 8px
        }

        /* Prototype-preview banner — only renders when JS detects the page
   is running without a Supabase auth token (file://, local preview,
   or any host without the live API). Visually unmistakable so the
   user can never mistake demo audio for a real generation. */
        .music-studio-inline-host .ms-sw-demo-banner {
          display: none;
          align-items: flex-start;
          gap: 12px;
          padding: 12px 18px;
          margin: 0 0 10px;
          border-radius: 14px;
          background:
            linear-gradient(180deg,
              rgba(252, 166, 0, .18) 0%,
              rgba(252, 166, 0, .06) 100%);
          border: 1px solid rgba(252, 166, 0, .55);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          color: var(--text);
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: .005em;
        }

        .music-studio-inline-host .ms-sw-demo-banner[data-show="true"] {
          display: flex;
        }

        .music-studio-inline-host .ms-sw-demo-banner strong {
          font-family: var(--font-display);
          font-weight: 800;
          color: var(--coin-gold);
          flex: 0 0 auto;
          letter-spacing: -.005em;
        }

        .music-studio-inline-host .ms-sw-demo-banner code {
          font-family: ui-monospace, SF Mono, Menlo, monospace;
          font-size: 11.5px;
          padding: 0 4px;
          border-radius: 4px;
          background: rgba(255, 255, 255, .08);
          color: var(--coin-gold);
        }

        .music-studio-inline-host .ms-sw-demo-dot {
          width: 9px;
          height: 9px;
          flex: 0 0 auto;
          margin-top: 5px;
          border-radius: 50%;
          background: var(--coin-gold);
          box-shadow: 0 0 10px rgba(252, 166, 0, .65);
          animation: msi-ms-sw-demo-pulse 1.4s ease-in-out infinite;
        }

        @keyframes msi-ms-sw-demo-pulse {

          0%,
          100% {
            opacity: 1;
            transform: scale(1);
          }

          50% {
            opacity: .45;
            transform: scale(.8);
          }
        }

        .music-studio-inline-host .ms-sw-demo-msg {
          flex: 1 1 auto;
        }

        /* Demo badge that appears ON the result card when generation was
   demo-mode. The "Now playing" eyebrow flips to amber + the badge
   appears beside it so the user knows the audio is a placeholder. */
        .music-studio-inline-host .ms-sw-result[data-demo="true"] .ms-sw-ready-eyebrow {
          color: var(--coin-gold);
        }

        .music-studio-inline-host .ms-sw-demo-pill {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          margin-left: 8px;
          padding: 2px 8px;
          border-radius: 999px;
          background: rgba(252, 166, 0, .18);
          border: 1px solid rgba(252, 166, 0, .55);
          font-family: var(--font-ui);
          font-size: 9.5px;
          font-weight: 800;
          letter-spacing: .10em;
          text-transform: uppercase;
          color: var(--coin-gold);
        }

        /* Input bar — column container holding meta-row on top and
   input-row on bottom. */
        .music-studio-inline-host .ms-sw-inputbar {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 100%;
          flex: 0 0 auto;
        }

        /* TOP — meta row of options, all on one line. No horizontal
   scroll — chips are compact enough to fit at typical desktop
   widths, and wrap as a fallback only on small viewports. */
        .music-studio-inline-host .ms-sw-meta {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-wrap: nowrap;
          padding: 4px;
        }

        .music-studio-inline-host .ms-sw-meta-spacer {
          flex: 1;
          min-width: 8px
        }

        /* Style / Length / Voice / Lang / Lyrics pill buttons — shared
   anatomy. Compact padding keeps the meta row fitting on a single
   line even with all six chips visible in lyrics mode. */
        .music-studio-inline-host .ms-sw-pill-btn {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          white-space: nowrap;
          flex-shrink: 0;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-sw-pill-btn:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-sw-pill-btn .ms-sw-pill-label {
          font-family: var(--font-ui);
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: .1em;
          text-transform: uppercase;
          color: var(--text-faint);
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-sw-pill-btn .ms-sw-pill-val {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 12.5px;
          color: var(--text);
          letter-spacing: -.005em;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-sw-pill-btn .ms-sw-pill-caret {
          color: var(--text-muted);
          font-size: 9px;
          line-height: 1;
          margin-top: 1px;
        }

        /* Active state for the Lyrics pill when user has saved custom
   lyrics — emerald glow signals "you've customized this". */
        .music-studio-inline-host .ms-sw-pill-btn[data-custom="true"] {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border-color: var(--lg-stroke-hi);
          box-shadow: 0 0 12px var(--active-glow);
        }

        .music-studio-inline-host .ms-sw-pill-btn[data-custom="true"] .ms-sw-pill-val {
          color: var(--switch-3)
        }

        /* Tempo + vocal segmented switches don't shrink either */
        .music-studio-inline-host .ms-sw-tempo,
        .music-studio-inline-host .ms-sw-vocal {
          flex-shrink: 0
        }

        /* Tempo 3-way switch + Vocal 2-way switch — share anatomy. Compact
   padding to keep the meta row on one line. */
        .music-studio-inline-host .ms-sw-tempo,
        .music-studio-inline-host .ms-sw-vocal {
          display: inline-flex;
          align-items: center;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: 999px;
          padding: 3px;
          gap: 2px;
        }

        .music-studio-inline-host .ms-sw-tempo-opt,
        .music-studio-inline-host .ms-sw-vocal-opt {
          display: inline-flex;
          align-items: center;
          padding: 6px 12px;
          border-radius: 999px;
          background: transparent;
          border: 1px solid transparent;
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--text-muted);
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-sw-tempo-opt:hover,
        .music-studio-inline-host .ms-sw-vocal-opt:hover {
          color: var(--text)
        }

        .music-studio-inline-host .ms-sw-tempo-opt.on,
        .music-studio-inline-host .ms-sw-vocal-opt.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
          padding: 5px 11px;
          box-shadow: 0 0 12px var(--active-glow);
        }

        /* When the user picks "Instrumental", every vocal-only element
   vanishes — Voice chip, Language chip, Write-lyrics tool. Single
   rule covers them all via the .ms-sw-vocal-only class marker. */
        .music-studio-inline-host .ms-sw-inputbar[data-vocal="instrumental"] .ms-sw-vocal-only {
          display: none
        }

        /* Title input — sits at the very top of the input shell. Subtle by
   design; it's a label, not a competing surface. */
        .music-studio-inline-host .ms-sw-title {
          width: 100%;
          background: transparent;
          border: 0;
          outline: none;
          padding: 2px 0 10px;
          margin-bottom: 14px;
          border-bottom: 1px solid var(--lg-stroke);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 18px;
          letter-spacing: -.01em;
          color: var(--text);
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-sw-title:hover {
          border-bottom-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-sw-title:focus {
          border-bottom-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-sw-title::placeholder {
          color: var(--text-faint);
          font-weight: 600;
          font-style: normal !important
        }

        /* Voice popover — small dropdown, same anatomy as length popover */
        .music-studio-inline-host .ms-voice-pop {
          position: fixed;
          z-index: 90;
          min-width: 200px;
          display: none;
          flex-direction: column;
          padding: 6px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: 14px;
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 16px 40px rgba(0, 0, 0, .35);
          animation: msi-ms-pop-in .18s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-voice-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-voice-opt {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 9px 14px;
          border-radius: 10px;
          background: transparent;
          border: 0;
          font-family: var(--font-ui);
          font-size: 13px;
          font-weight: 600;
          color: var(--text);
          text-align: left;
          cursor: pointer;
          transition: background .12s var(--ease);
        }

        .music-studio-inline-host .ms-voice-opt:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-voice-opt.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
        }

        .music-studio-inline-host .ms-voice-opt.on::after {
          content: '✓';
          color: var(--switch-3);
          font-size: 12px;
          font-weight: 700;
        }

        /* Language popover — categorized like style, but tighter (only
   languages, no need for huge max-height) */
        .music-studio-inline-host .ms-lang-pop {
          position: fixed;
          z-index: 90;
          width: min(440px, calc(100vw - 32px));
          max-height: 380px;
          display: none;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          animation: msi-ms-pop-in .22s var(--ease-out) both;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-lang-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-lang-pop .ms-style-pop-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 14px;
          padding: 14px 18px 12px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-lang-pop .ms-style-pop-body {
          padding: 14px 18px 18px;
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
        }

        .music-studio-inline-host .ms-lang-pop .ms-style-pop-body::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-lang-pop .ms-style-pop-body::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        /* Customize Lyrics popover — anchored to the Lyrics chip. Two-tab
   dialog: write your own lyrics, or generate from a theme. The
   textarea is the single source of truth — both tabs commit to it. */
        .music-studio-inline-host .ms-lyrics-pop {
          position: fixed;
          z-index: 90;
          width: min(560px, calc(100vw - 32px));
          max-height: 560px;
          display: none;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          animation: msi-ms-pop-in .22s var(--ease-out) both;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-lyrics-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-lyrics-pop-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 14px;
          padding: 16px 18px 12px;
          border-bottom: 1px solid var(--lg-stroke);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-lyrics-pop-head h4 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -.005em;
          color: var(--text);
          margin: 0 0 4px;
        }

        .music-studio-inline-host .ms-lyrics-pop-head p {
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-lyrics-pop-x {
          width: 30px;
          height: 30px;
          border-radius: 8px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          font-size: 16px;
          line-height: 1;
          display: grid;
          place-items: center;
          cursor: pointer;
          transition: background .15s var(--ease);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-lyrics-pop-x:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-lyrics-tabs {
          display: flex;
          align-items: stretch;
          padding: 8px 8px 0;
          gap: 4px;
          background: transparent;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-lyrics-tab {
          flex: 1;
          padding: 9px 14px;
          border-radius: 10px;
          background: transparent;
          border: 1px solid transparent;
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          color: var(--text-muted);
          letter-spacing: .02em;
          cursor: pointer;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-lyrics-tab:hover {
          color: var(--text);
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-lyrics-tab.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border-color: var(--lg-stroke-hi);
          color: var(--text);
          box-shadow: 0 0 12px var(--active-glow);
        }

        .music-studio-inline-host .ms-lyrics-pop-body {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 12px 18px 0;
          flex: 1;
          min-height: 0;
          overflow-y: auto;
        }

        .music-studio-inline-host .ms-lyrics-gen-row {
          display: flex;
          align-items: stretch;
          gap: 8px;
          padding: 4px 0 4px;
        }

        /* The HTML `hidden` attribute sets display:none via UA stylesheet,
   but our display:flex rule above overrode it. This explicit
   override restores hidden behavior so the Generate row only
   appears on the "Generate from idea" tab. */
        .music-studio-inline-host .ms-lyrics-gen-row[hidden] {
          display: none
        }

        .music-studio-inline-host .ms-lyrics-gen-input {
          flex: 1;
          padding: 9px 14px;
          /* b.497 — Canonical liquid-glass recipe on the "Theme or
     idea…" lyrics generator input. Same swap as the
     ms-style-custom-input above — var(--lg-fill)/
     var(--lg-stroke) → .03 white + .18 border + blur(40px)
     saturate(1.7) + depth shadow + inset highlight/lowlight.
     Pill radius preserved. */
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .18);
          border-radius: 999px;
          -webkit-backdrop-filter: blur(40px) saturate(1.7);
          backdrop-filter: blur(40px) saturate(1.7);
          box-shadow:
            0 28px 64px -18px rgba(0, 0, 0, .55),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(0, 0, 0, .10);
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: var(--text);
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-lyrics-gen-input:focus {
          border-color: rgba(255, 255, 255, .32);
          outline: none
        }

        .music-studio-inline-host .ms-lyrics-gen-input::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        .music-studio-inline-host .ms-lyrics-gen-btn {
          display: inline-flex;
          align-items: stretch;
          padding: 0;
          border-radius: 999px;
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-hover);
          border: 1px solid var(--lg-stroke-hi);
          color: var(--text);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          overflow: hidden;
          cursor: pointer;
          transition: all .2s var(--ease);
          font-family: var(--font-ui);
        }

        .music-studio-inline-host .ms-lyrics-gen-btn:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 0 16px var(--active-glow);
        }

        .music-studio-inline-host .ms-lyrics-gen-btn:disabled {
          opacity: .7;
          cursor: wait;
          transform: none
        }

        .music-studio-inline-host .ms-lyrics-gen-ico {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0 0 0 12px;
        }

        .music-studio-inline-host .ms-lyrics-gen-ico svg {
          width: 13px;
          height: 13px;
          color: var(--switch-3);
          animation: msi-ms-sparkle 2.4s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-lyrics-gen-label {
          display: inline-flex;
          align-items: center;
          padding: 8px 10px 8px 8px;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: -.005em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-lyrics-gen-cost {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 8px 12px;
          border-left: 1px solid var(--lg-stroke-hi);
          background: rgba(0, 0, 0, .18);
          font-family: var(--font-display);
          font-size: 12px;
          font-weight: 700;
          color: var(--text);
        }

        .music-studio-inline-host .ms-lyrics-gen-cost .joy-coin {
          width: 1em;
          height: 1em
        }

        .music-studio-inline-host .ms-lyrics-textarea {
          width: 100%;
          min-height: 200px;
          max-height: 340px;
          padding: 14px 16px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: 14px;
          font-family: var(--font-body);
          font-size: 14px;
          line-height: 1.6;
          font-weight: 500;
          color: var(--text);
          resize: vertical;
          outline: none;
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-lyrics-textarea:focus {
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-lyrics-textarea::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        .music-studio-inline-host .ms-lyrics-pop-foot {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 14px 18px;
          border-top: 1px solid var(--lg-stroke);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-lyrics-clear {
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 600;
          padding: 8px 12px;
          border-radius: 999px;
          background: transparent;
          border: 1px solid transparent;
          color: var(--text-faint);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-lyrics-clear:hover {
          color: var(--danger);
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-lyrics-cancel {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          padding: 9px 16px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-lyrics-cancel:hover {
          color: var(--text);
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-lyrics-save {
          font-family: var(--font-display);
          font-size: 12.5px;
          font-weight: 800;
          letter-spacing: -.005em;
          padding: 10px 18px;
          border-radius: 999px;
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border: 1px solid var(--lg-stroke-hi);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
          box-shadow: 0 0 16px var(--active-glow);
        }

        .music-studio-inline-host .ms-lyrics-save:hover {
          transform: translateY(-1px);
          box-shadow: 0 0 22px var(--active-glow)
        }

        /* BOTTOM — input row. Same anatomy as chat-prototype:
   tools | textarea | send button. */
        .music-studio-inline-host .ms-sw-input-row {
          display: flex;
          align-items: flex-end;
          gap: 10px;
          padding: 3px 10px 3px 14px;
          background: var(--lg-fill);
          border: 1.5px solid var(--lg-stroke);
          border-radius: 24px;
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow);
          transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
        }

        .music-studio-inline-host .ms-sw-input-row:focus-within {
          border-color: var(--lg-stroke-hi);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 24px var(--active-glow);
        }

        /* Textarea — single-row default with auto-grow up to a cap.
   min-height holds one comfortable line of 15px text; max-height
   caps growth at 180px before internal scrolling kicks in.
   align-self:flex-start pins the textarea to the TOP of the input
   row even though the row uses flex-end (so the send button stays
   anchored to the bottom). Result: placeholder/text reads from the
   top of the row, send button stays bottom-right. */
        .music-studio-inline-host .ms-sw-input {
          flex: 1;
          align-self: flex-start;
          font-family: var(--font-body);
          font-size: 15px;
          line-height: 1.5;
          font-weight: 500;
          color: var(--text);
          background: transparent;
          border: 0;
          outline: 0;
          resize: none;
          min-height: 38px;
          max-height: 180px;
          padding: 4px 4px 8px;
          caret-color: var(--text);
          overflow-y: auto;
          box-sizing: border-box;
        }

        .music-studio-inline-host .ms-sw-input::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        @keyframes msi-ms-sparkle {

          0%,
          100% {
            transform: scale(1) rotate(0)
          }

          50% {
            transform: scale(1.15) rotate(8deg)
          }
        }

        /* Send button — segmented pill with cost segment. Mirrors the
   production .btn-create / .ce-send-btn anatomy: fixed 48px height,
   two child segments separated by a left border. */
        .music-studio-inline-host .ms-sw-send-btn {
          display: inline-flex;
          align-items: center;
          height: 48px;
          padding: 0;
          transform: translateX(6px);
          border-radius: 999px;
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill);
          border: 1.5px solid var(--lg-stroke-hi);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px var(--active-glow);
          color: var(--text);
          cursor: pointer;
          transition: transform .15s var(--ease);
          white-space: nowrap;
          overflow: hidden;
          line-height: 1;
          flex-shrink: 0;
        }

        .music-studio-inline-host .ms-sw-send-btn:hover:not(:disabled) {
          transform: translateY(-1px)
        }

        .music-studio-inline-host .ms-sw-send-btn:disabled {
          opacity: .7;
          cursor: wait;
          transform: none
        }

        .music-studio-inline-host .ms-sw-send-main {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0 18px;
          height: 100%;
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 13px;
          letter-spacing: -.005em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-sw-send-cost {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 0 14px;
          height: 100%;
          border-left: 1px solid rgba(255, 255, 255, .22);
          background: rgba(255, 255, 255, .05);
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 13px;
          color: var(--text);
        }

        .music-studio-inline-host .ms-sw-send-cost .joy-coin {
          width: 1.7em;
          height: 1.7em
        }

        /* Style popup — categorized, scrollable. Tight so it sits close
   to the button rather than overwhelming the viewport. */
        .music-studio-inline-host .ms-style-pop {
          position: fixed;
          z-index: 90;
          width: min(520px, calc(100vw - 32px));
          max-height: 380px;
          display: none;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          animation: msi-ms-pop-in .22s var(--ease-out) both;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-style-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-style-pop-head {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 14px;
          padding: 14px 18px 12px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-style-pop-head h4 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          letter-spacing: -.005em;
        }

        .music-studio-inline-host .ms-style-pop-head p {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          color: var(--text-faint);
          letter-spacing: .08em;
          text-transform: uppercase;
        }

        .music-studio-inline-host .ms-style-pop-body {
          padding: 14px 18px 18px;
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
        }

        .music-studio-inline-host .ms-style-pop-body::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-style-pop-body::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        .music-studio-inline-host .ms-style-cat {
          margin-bottom: 14px
        }

        .music-studio-inline-host .ms-style-cat:last-child {
          margin-bottom: 0
        }

        .music-studio-inline-host .ms-style-cat h5 {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .12em;
          text-transform: uppercase;
          color: var(--text-faint);
          margin-bottom: 8px;
        }

        .music-studio-inline-host .ms-style-cat-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
        }

        .music-studio-inline-host .ms-style-pill {
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 600;
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-style-pill:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-style-pill.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border-color: var(--lg-stroke-hi);
          box-shadow: 0 0 12px var(--active-glow);
        }

        /* Length popover — small dropdown menu (not a categorized dialog) */
        .music-studio-inline-host .ms-length-pop {
          position: fixed;
          z-index: 90;
          min-width: 160px;
          display: none;
          flex-direction: column;
          padding: 6px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: 14px;
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 16px 40px rgba(0, 0, 0, .35);
          animation: msi-ms-pop-in .18s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-length-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-length-opt {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 9px 14px;
          border-radius: 10px;
          background: transparent;
          border: 0;
          font-family: var(--font-ui);
          font-size: 13px;
          font-weight: 600;
          color: var(--text);
          text-align: left;
          cursor: pointer;
          transition: background .12s var(--ease);
        }

        .music-studio-inline-host .ms-length-opt:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-length-opt.on {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
        }

        .music-studio-inline-host .ms-length-cost {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-display);
          font-size: 11.5px;
          font-weight: 700;
          color: var(--text-muted);
          letter-spacing: -.005em;
        }

        .music-studio-inline-host .ms-length-cost .joy-coin {
          width: 13px;
          height: 13px;
          flex: 0 0 auto
        }

        .music-studio-inline-host .ms-length-opt.on .ms-length-cost {
          color: var(--switch-3)
        }

        /* Custom-style input row inside the Style popup */
        .music-studio-inline-host .ms-style-custom {
          display: flex;
          align-items: stretch;
          gap: 6px;
          padding: 12px 18px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-style-custom-input {
          flex: 1;
          padding: 9px 14px;
          /* b.497 — Canonical liquid-glass recipe on the "Or write
     your own…" custom-style input. Replaces the var(--lg-fill)
     / var(--lg-stroke) tokens with the .03 white + .18 border
     + blur(40px) saturate(1.7) + depth shadow + inset
     highlight/lowlight stack. Radius kept at 999px (pill)
     since this is a text input. */
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .18);
          border-radius: 999px;
          -webkit-backdrop-filter: blur(40px) saturate(1.7);
          backdrop-filter: blur(40px) saturate(1.7);
          box-shadow:
            0 28px 64px -18px rgba(0, 0, 0, .55),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(0, 0, 0, .10);
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text);
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-style-custom-input:focus {
          border-color: rgba(255, 255, 255, .32);
          outline: none
        }

        .music-studio-inline-host .ms-style-custom-input::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        .music-studio-inline-host .ms-style-custom-apply {
          padding: 9px 16px;
          background: var(--lg-fill-active);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: 999px;
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 700;
          letter-spacing: .04em;
          text-transform: uppercase;
          color: var(--text);
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-style-custom-apply:hover {
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-active);
          border-color: var(--lg-stroke-hi);
          box-shadow: 0 0 12px var(--active-glow);
        }

        .music-studio-inline-host .ms-style-custom-apply:disabled {
          opacity: .4;
          cursor: not-allowed
        }

        /* === MUSICIAN MODE — empty state, master popovers, per-track Generate
   ============================================================ */
        /* Empty stage — natural height, no flex:1 so the surrounding
   .ms-tracks container only grows tall enough to hold the
   messaging. No scrollbar appears until the user actually adds
   enough instruments to exceed the visible area. */
        .music-studio-inline-host .ms-empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 10px;
          padding: 24px 20px 4px;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-empty-glyph {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          display: grid;
          place-items: center;
          position: relative;
        }

        .music-studio-inline-host .ms-empty-glyph::after {
          content: '';
          position: absolute;
          inset: -6px;
          border-radius: 50%;
          border: 1px dashed var(--lg-stroke);
          opacity: .5;
          animation: msi-ms-empty-spin 30s linear infinite;
        }

        .music-studio-inline-host .ms-empty-glyph svg {
          width: 28px;
          height: 28px;
          color: var(--text);
          opacity: .85
        }

        .music-studio-inline-host .ms-empty h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 18px;
          letter-spacing: -.015em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-empty p {
          font-family: var(--font-ui);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
          max-width: 340px;
          line-height: 1.5;
        }

        /* Top row — mode toggle + experimental note pill. Tight top
   margin so the whole console reads higher on the page. */
        .music-studio-inline-host .ms-top-row {
          display: flex;
          align-items: center;
          gap: 12px;
          align-self: flex-start;
          margin: 0 0 10px;
          flex-wrap: wrap;
        }

        .music-studio-inline-host .ms-top-row .ms-mode-toggle {
          margin: 0
        }

        /* Experimental disclaimer — compact glass pill that sits beside
   the Musician toggle. Liquid-glass body matches the rest of the
   chrome; only the pulsing dot and the "Experimental" word carry
   the joy-coin amber accent. Hidden by default; JS reveals when
   Musician mode is on. */
        .music-studio-inline-host .ms-experimental-ribbon {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          height: 38px;
          padding: 0 16px 0 14px;
          background: var(--lg-fill);
          border: 1px solid rgba(252, 166, 0, .42);
          border-radius: 999px;
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          box-shadow:
            0 0 0 1px rgba(252, 166, 0, .06) inset,
            0 0 14px rgba(252, 166, 0, .12);
          color: var(--text);
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 500;
          letter-spacing: .005em;
          line-height: 1;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-experimental-ribbon[hidden] {
          display: none
        }

        .music-studio-inline-host .ms-experimental-ribbon strong {
          color: var(--coin-gold);
          font-weight: 700;
          letter-spacing: .04em;
          text-transform: uppercase;
          font-size: 11px;
        }

        .music-studio-inline-host .ms-exp-dot {
          flex: 0 0 auto;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--coin-gold);
          box-shadow: 0 0 10px rgba(252, 166, 0, .65);
          animation: msi-ms-exp-pulse 2.4s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-exp-text {
          color: var(--text-muted)
        }

        @keyframes msi-ms-exp-pulse {

          0%,
          100% {
            opacity: 1;
            transform: scale(1)
          }

          50% {
            opacity: .45;
            transform: scale(.85)
          }
        }

        /* On narrow viewports, let the pill wrap and break across lines */
        @media (max-width:760px) {
          .music-studio-inline-host .ms-experimental-ribbon {
            white-space: normal;
            line-height: 1.45;
            height: auto;
            padding: 8px 14px
          }
        }

        /* Per-track Generate button — sits beside the existing Solo/Mute/
   Freeze/Re-roll buttons. Generates only this stem. */
        .music-studio-inline-host .ms-tc-gen {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 0 12px;
          height: 34px;
          border-radius: 999px;
          background: radial-gradient(120% 100% at 30% 0%, var(--active-tint), transparent 70%), var(--lg-fill-hover);
          border: 1px solid var(--lg-stroke-hi);
          color: var(--text);
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 700;
          letter-spacing: .02em;
          cursor: pointer;
          transition: all .2s var(--ease);
          white-space: nowrap;
          position: relative;
          /* anchor for click-flash chip */
        }

        .music-studio-inline-host .ms-tc-gen:hover:not(:disabled) {
          background: var(--lg-fill-active);
          box-shadow: 0 0 14px var(--active-glow)
        }

        .music-studio-inline-host .ms-tc-gen:disabled {
          opacity: .6;
          cursor: wait
        }

        .music-studio-inline-host .ms-tc-gen .ms-tc-gen-cost {
          display: inline-flex;
          align-items: center;
          gap: 3px;
          padding-left: 6px;
          border-left: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-family: var(--font-display);
          font-size: 11px;
          font-weight: 700;
        }

        .music-studio-inline-host .ms-tc-gen .ms-tc-gen-cost .joy-coin {
          width: .95em;
          height: .95em
        }

        /* Per-track Lyrics input — added to vocals tracks via JS. Sits below
   the main vibe input as a second editable line. */
        .music-studio-inline-host .ms-track-lyrics {
          width: 100%;
          min-height: 54px;
          max-height: 120px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: 10px;
          padding: 8px 12px;
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          line-height: 1.5;
          color: var(--text);
          resize: vertical;
          outline: none;
          margin-top: 6px;
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-track-lyrics:focus {
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-track-lyrics::placeholder {
          color: var(--text-faint);
          font-style: normal !important
        }

        /* Master popovers (tempo, time, key) — same anatomy. */
        .music-studio-inline-host .ms-master-pop {
          position: fixed;
          z-index: 90;
          width: min(360px, calc(100vw - 32px));
          display: none;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          animation: msi-ms-pop-in .22s var(--ease-out) both;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-master-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-master-pop-head {
          padding: 14px 18px 10px;
          border-bottom: 1px solid var(--lg-stroke);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-master-pop-head h4 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          letter-spacing: -.005em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-master-pop-head p {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          color: var(--text-faint);
          letter-spacing: .08em;
          text-transform: uppercase;
          margin-top: 2px;
        }

        .music-studio-inline-host .ms-master-pop-body {
          padding: 14px 18px 16px;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .music-studio-inline-host .ms-mp-pill {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          padding: 8px 14px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-mp-pill:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-mp-pill.on {
          background: rgba(255, 255, 255, .12);
          border-color: rgba(255, 255, 255, .45);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
        }

        .music-studio-inline-host .ms-mp-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 6px
        }

        .music-studio-inline-host .ms-mp-note {
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 500;
          color: var(--text-muted);
          line-height: 1.5;
          padding-top: 4px;
          border-top: 1px dashed var(--lg-stroke);
        }

        /* Tempo slider */
        .music-studio-inline-host .ms-tempo-slider-wrap {
          display: flex;
          align-items: center;
          gap: 14px;
        }

        .music-studio-inline-host .ms-tempo-slider {
          flex: 1;
          -webkit-appearance: none;
          appearance: none;
          height: 4px;
          border-radius: 999px;
          background: var(--lg-fill);
          outline: none;
        }

        .music-studio-inline-host .ms-tempo-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--switch-2);
          border: 2px solid var(--text);
          cursor: pointer;
          box-shadow: 0 0 14px var(--active-glow);
        }

        .music-studio-inline-host .ms-tempo-slider::-moz-range-thumb {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--switch-2);
          border: 2px solid var(--text);
          cursor: pointer;
        }

        .music-studio-inline-host .ms-tempo-out {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 14px;
          letter-spacing: -.005em;
          color: var(--text);
          white-space: nowrap;
          min-width: 74px;
          text-align: right;
        }

        .music-studio-inline-host .ms-tempo-presets {
          display: flex;
          flex-wrap: wrap;
          gap: 5px
        }

        .music-studio-inline-host .ms-tempo-presets .ms-mp-pill {
          padding: 6px 11px;
          font-size: 12px
        }

        /* Key tabs (Major/Minor) */
        .music-studio-inline-host .ms-key-tabs {
          display: flex;
          align-items: stretch;
          gap: 4px;
          padding: 3px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: 999px;
        }

        .music-studio-inline-host .ms-key-tab {
          flex: 1;
          padding: 7px 10px;
          border-radius: 999px;
          background: transparent;
          border: 0;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .05em;
          text-transform: uppercase;
          color: var(--text-muted);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-key-tab:hover {
          color: var(--text)
        }

        .music-studio-inline-host .ms-key-tab.on {
          background: rgba(255, 255, 255, .12);
          border-color: rgba(255, 255, 255, .45);
          color: var(--text);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
        }

        /* Chord sequence editor — viewport-clamped with a healthy bottom
   gap so it never visually touches the page edge. */
        .music-studio-inline-host .ms-chord-pop {
          position: fixed;
          z-index: 90;
          width: min(560px, calc(100vw - 32px));
          max-height: min(560px, calc(100vh - 140px));
          display: none;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4);
          animation: msi-ms-pop-in .22s var(--ease-out) both;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-chord-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-chord-pop .ms-chord-pop-body {
          flex: 1;
          min-height: 0;
          overflow-y: auto;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
        }

        .music-studio-inline-host .ms-chord-pop .ms-chord-pop-body::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-chord-pop .ms-chord-pop-body::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        .music-studio-inline-host .ms-chord-pop[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-chord-pop-body {
          padding: 12px 16px 14px;
          display: flex;
          flex-direction: column;
          gap: 9px;
        }

        .music-studio-inline-host .ms-chord-bars {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding-bottom: 8px;
          border-bottom: 1px dashed var(--lg-stroke);
        }

        .music-studio-inline-host .ms-chord-bar {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 12px;
          border-radius: 10px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
          position: relative;
        }

        .music-studio-inline-host .ms-chord-bar:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-chord-bar.selected {
          background: rgba(255, 255, 255, .12);
          border-color: rgba(255, 255, 255, .45);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
        }

        .music-studio-inline-host .ms-chord-bar-num {
          font-family: var(--font-ui);
          font-size: 9.5px;
          font-weight: 700;
          color: var(--text-faint);
          letter-spacing: .04em;
        }

        .music-studio-inline-host .ms-chord-bar-x {
          font-size: 14px;
          line-height: 1;
          color: var(--text-faint);
          margin-left: 2px;
          cursor: pointer;
          padding: 0 2px;
          border-radius: 4px;
        }

        .music-studio-inline-host .ms-chord-bar-x:hover {
          color: var(--danger);
          background: var(--lg-fill-hover)
        }

        /* DICE CHIP — top-level affordance in the chip strip, between
   Chord sequence and Length. Icon-only round button. Picks up the
   active theme accent (emerald in Garden, lavender in Hanley) so
   it sits in the same color family as the rest of the live UI.
   No amber anywhere — every color references --theme-accent-rgb. */
        .music-studio-inline-host .ms-dice-chip {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 52px;
          height: 52px;
          /* ~10% tighter than 58 */
          margin: 0 6px;
          border-radius: 14px;
          background:
            radial-gradient(120% 120% at 30% 0%,
              rgba(var(--theme-accent-rgb), .26), transparent 72%),
            var(--lg-fill);
          border: 1px solid rgba(var(--theme-accent-rgb), .40);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          color: var(--theme-accent);
          /* SVG currentColor = theme accent */
          cursor: pointer;
          transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
          flex-shrink: 0;
          align-self: center;
          box-shadow:
            0 0 0 1px rgba(var(--theme-accent-rgb), .12) inset,
            0 6px 22px -8px rgba(var(--theme-accent-rgb), .35);
        }

        .music-studio-inline-host .ms-dice-chip:hover {
          transform: translateY(-2px);
          border-color: rgba(var(--theme-accent-rgb), .75);
          box-shadow:
            0 0 0 1px rgba(var(--theme-accent-rgb), .22) inset,
            0 0 28px rgba(var(--theme-accent-rgb), .50),
            0 10px 26px -8px rgba(var(--theme-accent-rgb), .50);
          background:
            radial-gradient(120% 120% at 30% 0%,
              rgba(var(--theme-accent-rgb), .40), transparent 65%),
            var(--lg-fill);
        }

        .music-studio-inline-host .ms-dice-chip:active {
          transform: translateY(0) scale(.95)
        }

        /* Icon ~80% of chip — die fills the frame; glow lives inside SVG.
   Idle: very gentle hover-float so the die feels alive without
   demanding attention. Click: full tumble (rolling class). */
        .music-studio-inline-host .ms-dice-chip svg {
          width: 42px;
          height: 42px;
          display: block;
          animation: msi-ms-dice-float 5.4s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-dice-chip.rolling svg {
          animation: msi-ms-dice-roll .6s var(--ease) both
        }

        @keyframes msi-ms-dice-float {

          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }

          50% {
            transform: translateY(-1.4px) rotate(.6deg);
          }
        }

        /* Aura blobs inside the SVG drift independently to simulate
   colored light moving behind the glass — no two cycles align,
   so the haze feels organic, not looping. */
        .music-studio-inline-host .ms-dice-aura-1 {
          transform-origin: center;
          transform-box: fill-box;
          animation: msi-ms-dice-blob1 11s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-dice-aura-2 {
          transform-origin: center;
          transform-box: fill-box;
          animation: msi-ms-dice-blob2 8.5s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-dice-aura-3 {
          transform-origin: center;
          transform-box: fill-box;
          animation: msi-ms-dice-blob3 13s ease-in-out infinite;
        }

        @keyframes msi-ms-dice-blob1 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: .85;
          }

          33% {
            transform: translate(2.6px, -1.6px) scale(1.10);
            opacity: 1;
          }

          66% {
            transform: translate(-2.2px, 1.4px) scale(.92);
            opacity: .78;
          }
        }

        @keyframes msi-ms-dice-blob2 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: .95;
          }

          50% {
            transform: translate(3.2px, 2.4px) scale(1.20);
            opacity: .78;
          }
        }

        @keyframes msi-ms-dice-blob3 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
            opacity: .70;
          }

          50% {
            transform: translate(-3.0px, -2.6px) scale(.84);
            opacity: .95;
          }
        }

        /* Dice tumble animation — used by .ms-dice-chip.rolling svg above. */
        @keyframes msi-ms-dice-roll {
          0% {
            transform: rotate(0deg) scale(1)
          }

          35% {
            transform: rotate(180deg) scale(1.15)
          }

          70% {
            transform: rotate(360deg) scale(.92)
          }

          100% {
            transform: rotate(360deg) scale(1)
          }
        }

        .music-studio-inline-host .ms-chord-actions {
          display: flex;
          align-items: center;
          gap: 8px
        }

        .music-studio-inline-host .ms-chord-add,
        .music-studio-inline-host .ms-chord-clear {
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 600;
          padding: 7px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-chord-add:hover,
        .music-studio-inline-host .ms-chord-clear:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-chord-clear {
          color: var(--text-muted)
        }

        .music-studio-inline-host .ms-chord-palette {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: 8px;
          border-top: 1px dashed var(--lg-stroke);
          min-height: 0;
        }

        .music-studio-inline-host .ms-chord-palette-empty {
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 500;
          color: var(--text-faint);
          text-align: center;
          padding: 8px 0;
        }

        /* Sections — Diatonic triads, 7ths, Color (9ths), Sus & add, Borrowed */
        .music-studio-inline-host .ms-cp-section {
          display: flex;
          flex-direction: column;
          gap: 4px
        }

        .music-studio-inline-host .ms-cp-section-title {
          display: flex;
          align-items: baseline;
          gap: 8px;
          font-family: var(--font-ui);
          font-size: 9.5px;
          font-weight: 700;
          letter-spacing: .12em;
          text-transform: uppercase;
          color: var(--text-faint);
          margin: 0;
        }

        .music-studio-inline-host .ms-cp-section-hint {
          font-family: var(--font-display);
          font-size: 10px;
          font-weight: 600;
          letter-spacing: -.005em;
          color: var(--coin-gold);
          text-transform: none;
          letter-spacing: 0;
        }

        .music-studio-inline-host .ms-cp-row {
          display: flex;
          flex-wrap: wrap;
          gap: 4px
        }

        /* Each chord pill — chord name on top, Roman numeral underneath. */
        .music-studio-inline-host .ms-chord-palette-pill {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
          padding: 4px 9px 3px;
          border-radius: 8px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .12s var(--ease);
          min-width: 42px;
        }

        .music-studio-inline-host .ms-chord-palette-pill:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi)
        }

        /* .on — the chord that's currently committed to the selected bar.
   Subtle background, no glow. */
        .music-studio-inline-host .ms-chord-palette-pill.on {
          background: rgba(255, 255, 255, .12);
          border-color: rgba(255, 255, 255, .45);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
        }

        .music-studio-inline-host .ms-cp-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 12px;
          letter-spacing: -.005em;
          color: var(--text);
          line-height: 1.1;
        }

        .music-studio-inline-host .ms-cp-roman {
          font-family: var(--font-ui);
          font-size: 8.5px;
          font-weight: 700;
          letter-spacing: .08em;
          color: var(--text-faint);
          line-height: 1;
        }

        .music-studio-inline-host .ms-chord-palette-pill.on .ms-cp-roman {
          color: var(--text-muted)
        }

        /* Action bar — spacer pushes the action cluster to the right. */
        .music-studio-inline-host .ms-action-spacer {
          flex: 1
        }

        /* Disabled state for top-level CTAs when no tracks exist */
        .music-studio-inline-host .ms-secondary-btn:disabled,
        .music-studio-inline-host .ms-generate-btn:disabled {
          opacity: .5;
          cursor: not-allowed;
          pointer-events: none;
        }

        /* My Songs modal — full-screen library of every track the user
   has generated. Backdrop blurs the studio, shell is the same
   liquid-glass anatomy as other modals. */
        .music-studio-inline-host .ms-songs-modal {
          position: fixed;
          inset: 0;
          z-index: 100;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 32px;
          background: rgba(0, 0, 0, .55);
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
          animation: msi-ms-modal-fade .25s var(--ease) both;
        }

        .music-studio-inline-host .ms-songs-modal[data-open="true"] {
          display: flex
        }

        /* Two-tab strip inside My music — Songs / Productions */
        .music-studio-inline-host .ms-music-tabs {
          position: relative;
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 0 26px;
          border-bottom: 1px solid var(--lg-stroke);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-music-tab {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 14px 6px 14px;
          background: transparent;
          border: none;
          color: var(--text-faint);
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 14px;
          letter-spacing: -.005em;
          cursor: pointer;
          transition: color .18s var(--ease);
        }

        .music-studio-inline-host .ms-music-tab:hover {
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-music-tab.on {
          color: var(--text);
        }

        .music-studio-inline-host .ms-music-tab-count {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 22px;
          height: 18px;
          padding: 0 6px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          color: var(--text-muted);
          letter-spacing: .005em;
        }

        .music-studio-inline-host .ms-music-tab.on .ms-music-tab-count {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .25), transparent 70%),
            var(--lg-fill-active);
          border-color: rgba(var(--theme-accent-rgb), .55);
          color: var(--text);
        }

        /* Animated underline that slides between tabs */
        .music-studio-inline-host .ms-music-tab-underline {
          position: absolute;
          bottom: -1px;
          height: 2px;
          border-radius: 2px;
          background: rgb(var(--theme-accent-rgb));
          box-shadow: 0 0 12px rgba(var(--theme-accent-rgb), .55);
          transition: left .28s var(--ease), width .28s var(--ease);
          pointer-events: none;
        }

        /* Production card — chunkier than a song card so the multi-stem
   composition reads at a glance. Mirrors track-row anatomy from
   the Musician stage. */
        .music-studio-inline-host .ms-prod-card {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 16px 18px;
          border-radius: var(--r-lg);
          background:
            linear-gradient(180deg,
              rgba(var(--theme-accent-rgb), .08) 0%,
              transparent 50%),
            var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          transition: all .18s var(--ease);
        }

        .music-studio-inline-host .ms-prod-card:hover {
          border-color: var(--lg-stroke-hi);
          box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), .15);
        }

        .music-studio-inline-host .ms-prod-card-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
        }

        .music-studio-inline-host .ms-prod-card-title {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 16px;
          letter-spacing: -.01em;
          color: var(--text);
          line-height: 1.25;
        }

        .music-studio-inline-host .ms-prod-card-master {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: 5px;
        }

        .music-studio-inline-host .ms-prod-master-chip {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          padding: 3px 9px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          color: var(--text-muted);
          letter-spacing: .005em;
        }

        .music-studio-inline-host .ms-prod-master-chip strong {
          color: var(--text);
          font-family: var(--font-display);
          font-weight: 700;
        }

        .music-studio-inline-host .ms-prod-card-date {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 600;
          color: var(--text-faint);
          letter-spacing: .04em;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-prod-stems {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding-top: 10px;
          border-top: 1px dashed var(--lg-stroke);
        }

        .music-studio-inline-host .ms-prod-stem {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 7px 10px;
          border-radius: 10px;
          background: rgba(255, 255, 255, .02);
          border: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-prod-stem-ico {
          width: 26px;
          height: 26px;
          flex: 0 0 auto;
          display: grid;
          place-items: center;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: 8px;
          color: rgb(var(--theme-accent-rgb));
        }

        .music-studio-inline-host .ms-prod-stem-ico svg {
          width: 14px;
          height: 14px;
        }

        .music-studio-inline-host .ms-prod-stem-name {
          flex: 1 1 auto;
          min-width: 0;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 12.5px;
          color: var(--text);
          letter-spacing: -.005em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-prod-stem-meta {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 600;
          color: var(--text-faint);
          letter-spacing: .005em;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-prod-stem-play {
          width: 30px;
          height: 30px;
          flex: 0 0 auto;
          display: grid;
          place-items: center;
          border-radius: 50%;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-prod-stem-play:hover {
          background: rgba(var(--theme-accent-rgb), .25);
          border-color: rgba(var(--theme-accent-rgb), .55);
          box-shadow: 0 0 12px rgba(var(--theme-accent-rgb), .35);
        }

        .music-studio-inline-host .ms-prod-stem-play svg {
          width: 12px;
          height: 12px;
        }

        .music-studio-inline-host .ms-prod-stem-play.playing {
          background: radial-gradient(circle at 30% 25%,
              rgba(var(--theme-accent-rgb), 1),
              rgba(var(--theme-accent-rgb), .65));
          border-color: rgba(var(--theme-accent-rgb), .8);
          color: #08060f;
        }

        .music-studio-inline-host .ms-prod-card-actions {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          padding-top: 10px;
          border-top: 1px dashed var(--lg-stroke);
        }

        .music-studio-inline-host .ms-prod-action {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          color: var(--text);
          cursor: pointer;
          text-decoration: none;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-prod-action:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-prod-action svg {
          width: 12px;
          height: 12px;
        }

        /* ============================================================
   ALBUM ARTWORK MODAL — same liquid-glass anatomy as My Songs
   so the two share identity, but tighter and with a square
   preview that mirrors the result card's cover.
   ============================================================ */
        .music-studio-inline-host .ms-art-modal {
          position: fixed;
          inset: 0;
          z-index: 101;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 32px;
          background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .62));
          -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
          animation: msi-ms-modal-fade .25s var(--ease) both;
        }

        .music-studio-inline-host .ms-art-modal[data-open="true"] {
          display: flex
        }

        .music-studio-inline-host .ms-art-shell {
          width: min(720px, 100%);
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          background:
            radial-gradient(140% 90% at 0% 0%,
              rgba(var(--theme-accent-rgb), .10), transparent 60%),
            var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-xl);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .04) inset,
            var(--lg-shadow),
            0 40px 100px rgba(0, 0, 0, .55);
          overflow: hidden;
          animation: msi-ms-modal-rise .35s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-art-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          padding: 16px 22px 14px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-art-head h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 21px;
          letter-spacing: -.015em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-art-head p {
          margin-top: 2px;
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-art-close {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: transparent;
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-size: 20px;
          line-height: 1;
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-art-close:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-art-body {
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 18px;
          padding: 16px 22px;
          overflow-y: auto;
        }

        @media (max-width: 620px) {
          .music-studio-inline-host .ms-art-body {
            grid-template-columns: 1fr;
          }
        }

        .music-studio-inline-host .ms-art-preview {
          position: relative;
          aspect-ratio: 1 / 1;
          border-radius: 14px;
          overflow: hidden;
          background:
            linear-gradient(135deg,
              rgba(var(--theme-accent-rgb), .50) 0%,
              rgba(var(--theme-accent-rgb), .12) 60%,
              rgba(0, 0, 0, .55) 100%);
          border: 1px solid rgba(var(--theme-accent-rgb), .35);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .06) inset,
            0 14px 30px -10px rgba(0, 0, 0, .55);
        }

        .music-studio-inline-host .ms-art-preview img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: none;
          animation: msi-ms-cover-fade-in .55s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-art-preview[data-state="ready"] img {
          display: block;
        }

        .music-studio-inline-host .ms-art-preview[data-state="ready"] .ms-art-preview-default,
        .music-studio-inline-host .ms-art-preview[data-state="loading"] .ms-art-preview-default {
          display: none;
        }

        .music-studio-inline-host .ms-art-preview-default {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 16px;
          text-align: center;
        }

        .music-studio-inline-host .ms-art-preview-label {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .78);
        }

        .music-studio-inline-host .ms-art-preview-hint {
          font-family: var(--font-body);
          font-size: 12px;
          font-weight: 500;
          color: rgba(255, 255, 255, .6);
        }

        /* Loading overlay with diffused theme-color blobs (same vibe as
   the result-card aura but constrained to the preview square). */
        .music-studio-inline-host .ms-art-preview-loading {
          position: absolute;
          inset: 0;
          display: none;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 10px;
          z-index: 2;
        }

        .music-studio-inline-host .ms-art-preview[data-state="loading"] .ms-art-preview-loading {
          display: flex;
        }

        .music-studio-inline-host .ms-art-preview-loading-aura {
          position: absolute;
          inset: 0;
          filter: blur(28px) saturate(1.05);
          pointer-events: none;
        }

        .music-studio-inline-host .ms-art-preview-loading-aura span {
          position: absolute;
          border-radius: 50%;
          background: rgba(var(--theme-accent-rgb), .65);
          mix-blend-mode: screen;
        }

        .music-studio-inline-host .ms-art-preview-loading-aura span:nth-child(1) {
          width: 55%;
          height: 55%;
          top: 10%;
          left: 5%;
          animation: msi-ms-aura-drift1 8s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-art-preview-loading-aura span:nth-child(2) {
          width: 45%;
          height: 45%;
          top: 35%;
          left: 50%;
          background: rgba(var(--theme-accent-rgb), .50);
          animation: msi-ms-aura-drift2 6.5s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-art-preview-loading-aura span:nth-child(3) {
          width: 38%;
          height: 38%;
          top: 55%;
          left: 18%;
          background: rgba(var(--theme-accent-rgb), .45);
          animation: msi-ms-aura-drift3 9.5s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-art-preview-loading-text {
          position: relative;
          z-index: 3;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, .92);
          background: rgba(0, 0, 0, .40);
          padding: 6px 14px;
          border-radius: 999px;
          border: 1px solid rgba(255, 255, 255, .18);
          -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
        }

        .music-studio-inline-host .ms-art-form {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .music-studio-inline-host .ms-art-label {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-art-prompt {
          width: 100%;
          padding: 10px 12px;
          border-radius: 10px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: var(--text);
          resize: vertical;
          min-height: 74px;
          transition: border-color .15s var(--ease);
        }

        .music-studio-inline-host .ms-art-prompt:focus {
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-art-prompt.error,
        .music-studio-inline-host .ms-lyrics-gen-input.error,
        .music-studio-inline-host .ms-sw-input.error {
          border-color: var(--danger) !important;
          animation: msi-ms-input-shake .35s ease-in-out;
        }

        .music-studio-inline-host .ms-sw-input.error {
          /* The input row's container handles the visible border. Shake the
     input itself but also paint a red ring on the row for clarity. */
          outline: 2px solid var(--danger);
          outline-offset: -2px;
        }

        @keyframes msi-ms-input-shake {

          0%,
          100% {
            transform: translateX(0);
          }

          25% {
            transform: translateX(-3px);
          }

          75% {
            transform: translateX(3px);
          }
        }

        .music-studio-inline-host .ms-art-styles {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .music-studio-inline-host .ms-art-style {
          padding: 6px 11px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 600;
          letter-spacing: .005em;
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-art-style:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-art-style.on {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .25), transparent 70%),
            var(--lg-fill-active);
          border-color: rgba(var(--theme-accent-rgb), .55);
          color: var(--text);
        }

        .music-studio-inline-host .ms-art-quality {
          display: flex;
          gap: 8px;
          margin-top: 14px;
        }

        .music-studio-inline-host .ms-art-quality-opt {
          flex: 1 1 0;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px;
          border-radius: 12px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          cursor: pointer;
          transition: all .15s var(--ease);
          font-family: var(--font-body);
          font-size: 12.5px;
          color: var(--text);
        }

        .music-studio-inline-host .ms-art-quality-opt:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-art-quality-opt.on {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .22), transparent 70%),
            var(--lg-fill-active);
          border-color: rgba(var(--theme-accent-rgb), .50);
        }

        .music-studio-inline-host .ms-art-quality-opt input {
          accent-color: rgb(var(--theme-accent-rgb));
        }

        .music-studio-inline-host .ms-art-quality-opt strong {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 12.5px;
        }

        .music-studio-inline-host .ms-art-quality-opt em {
          font-style: normal !important;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          margin-left: 6px;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 11.5px;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-art-quality-opt em .joy-coin {
          width: 12px;
          height: 12px;
        }

        .music-studio-inline-host .ms-art-foot {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 22px 16px;
          border-top: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-art-cancel,
        .music-studio-inline-host .ms-art-apply,
        .music-studio-inline-host .ms-art-gen {
          padding: 9px 16px;
          border-radius: 999px;
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .005em;
          cursor: pointer;
          transition: all .18s var(--ease);
        }

        .music-studio-inline-host .ms-art-cancel {
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-art-cancel:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
          color: var(--text);
        }

        .music-studio-inline-host .ms-art-apply {
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          display: inline-flex;
          align-items: center;
          gap: 5px;
        }

        .music-studio-inline-host .ms-art-apply:hover:not(:disabled) {
          background: var(--lg-fill-active);
          border-color: rgba(var(--theme-accent-rgb), .55);
          box-shadow: 0 0 16px rgba(var(--theme-accent-rgb), .25);
        }

        .music-studio-inline-host .ms-art-apply:disabled {
          opacity: .4;
          cursor: not-allowed;
        }

        .music-studio-inline-host .ms-art-gen {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .35), transparent 70%),
            var(--lg-fill-hover);
          border: 1px solid rgba(var(--theme-accent-rgb), .55);
          color: var(--text);
          box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), .30);
        }

        .music-studio-inline-host .ms-art-gen:hover:not(:disabled) {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .50), transparent 65%),
            var(--lg-fill-active);
          box-shadow: 0 0 26px rgba(var(--theme-accent-rgb), .50);
          transform: translateY(-1px);
        }

        .music-studio-inline-host .ms-art-gen:disabled {
          opacity: .6;
          cursor: wait;
          transform: none;
        }

        .music-studio-inline-host .ms-art-gen-cost {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          padding-left: 8px;
          border-left: 1px solid rgba(255, 255, 255, .12);
          font-family: var(--font-display);
          font-size: 11.5px;
          font-weight: 700;
        }

        .music-studio-inline-host .ms-art-gen-cost .joy-coin {
          width: 1em;
          height: 1em;
        }

        .music-studio-inline-host .ms-songs-shell {
          width: min(820px, 100%);
          max-height: 88vh;
          display: flex;
          flex-direction: column;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          border-radius: var(--r-xl);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow: var(--lg-shadow), 0 40px 100px rgba(0, 0, 0, .55);
          overflow: hidden;
          animation: msi-ms-modal-rise .35s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-songs-head {
          padding: 22px 26px 16px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 18px;
          border-bottom: 1px solid var(--lg-stroke);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-songs-head h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 22px;
          letter-spacing: -.015em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-songs-head p {
          font-family: var(--font-ui);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
          margin-top: 4px;
        }

        .music-studio-inline-host .ms-songs-close {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          font-size: 18px;
          line-height: 1;
          display: grid;
          place-items: center;
          cursor: pointer;
          transition: background .15s var(--ease);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-songs-close:hover {
          background: var(--lg-fill-hover)
        }

        .music-studio-inline-host .ms-songs-body {
          padding: 18px 22px 22px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 12px;
          scrollbar-width: thin;
          scrollbar-color: var(--lg-stroke) transparent;
        }

        .music-studio-inline-host .ms-songs-body::-webkit-scrollbar {
          width: 6px
        }

        .music-studio-inline-host .ms-songs-body::-webkit-scrollbar-thumb {
          background: var(--lg-stroke);
          border-radius: 3px
        }

        /* Single song card */
        .music-studio-inline-host .ms-song-card {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: center;
          gap: 14px;
          padding: 14px 16px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          border-radius: var(--r-lg);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
          transition: border-color .2s var(--ease);
        }

        .music-studio-inline-host .ms-song-card:hover {
          border-color: var(--lg-stroke-hi)
        }

        .music-studio-inline-host .ms-song-meta {
          display: flex;
          flex-direction: column;
          gap: 4px;
          min-width: 0
        }

        .music-studio-inline-host .ms-song-title {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 15.5px;
          letter-spacing: -.005em;
          color: var(--text);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-song-tags {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          gap: 6px;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 600;
          color: var(--text-muted);
          letter-spacing: .02em;
        }

        .music-studio-inline-host .ms-song-tag {
          padding: 2px 8px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-song-tag-date {
          color: var(--text-faint);
          padding: 2px 4px
        }

        .music-studio-inline-host .ms-song-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-song-audio {
          height: 36px;
          filter: invert(.85) hue-rotate(180deg) saturate(.5);
          flex: 1;
          min-width: 200px;
        }

        .music-studio-inline-host .ms-song-download {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          text-decoration: none;
          transition: all .2s var(--ease);
        }

        .music-studio-inline-host .ms-song-download:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
          transform: translateY(-1px);
        }

        .music-studio-inline-host .ms-song-download svg {
          width: 14px;
          height: 14px
        }

        /* Full-row layout for cards on larger viewports — title on top,
   audio + actions on the bottom row. Cleaner than cramming into
   two columns when the song title is long. */
        .music-studio-inline-host .ms-song-card {
          grid-template-columns: 1fr;
        }

        .music-studio-inline-host .ms-song-actions {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 8px;
          align-items: center;
        }

        /* Empty state */
        .music-studio-inline-host .ms-song-iconbtn {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          cursor: pointer;
          transition: all .15s var(--ease);
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-song-iconbtn:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: rgba(var(--theme-accent-rgb), .55);
          box-shadow: 0 0 12px rgba(var(--theme-accent-rgb), .22);
        }

        .music-studio-inline-host .ms-song-iconbtn svg {
          width: 14px;
          height: 14px;
        }

        .music-studio-inline-host .ms-song-iconbtn.copied {
          background: rgba(var(--theme-accent-rgb), .25);
          border-color: rgb(var(--theme-accent-rgb));
          color: rgb(var(--theme-accent-rgb));
        }

        .music-studio-inline-host .ms-song-iconbtn-danger:hover {
          border-color: var(--danger);
          color: var(--danger);
          box-shadow: 0 0 12px rgba(255, 80, 96, .30);
        }

        .music-studio-inline-host .ms-songs-empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 14px;
          padding: 40px 20px;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-songs-empty-glyph {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          display: grid;
          place-items: center;
          color: var(--text);
        }

        .music-studio-inline-host .ms-songs-empty-glyph svg {
          width: 30px;
          height: 30px;
          opacity: .85
        }

        .music-studio-inline-host .ms-songs-empty h4 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 18px;
          color: var(--text);
        }

        .music-studio-inline-host .ms-songs-empty p {
          font-family: var(--font-ui);
          font-size: 13px;
          color: var(--text-muted);
          max-width: 340px;
          line-height: 1.55;
        }

        /* Generated-song result card — appears below the input bar after
   /api/music-compose returns a finished song. */
        /* ============================================================
   RESULT CARD — pure liquid-glass, three states.
   ============================================================
   .generating  : animated aura + status cycle while we wait for the
                  ElevenLabs response (typically 30-90s).
   .ready       : album artwork on the left, controls on the right;
                  cover can be customized via the in-card image-gen.
   .error       : compact failure card with a retry CTA.
   The shell stays mounted through state transitions so the card
   appears to "morph" rather than pop in/out.
   ============================================================ */
        /* Close (X) on the result card — top-right corner. Doesn't dismiss
   the song, just hides the card so the user can adjust chips and
   re-roll, OR open My music to play the saved track. */
        .music-studio-inline-host .ms-sw-result-close {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 5;
          width: 32px;
          height: 32px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: rgba(255, 255, 255, .04);
          border: 1px solid rgba(255, 255, 255, .10);
          color: rgba(255, 255, 255, .65);
          font-size: 18px;
          line-height: 1;
          cursor: pointer;
          transition: all .15s var(--ease);
          -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
        }

        .music-studio-inline-host .ms-sw-result-close:hover {
          color: #fff;
          background: rgba(255, 255, 255, .10);
          border-color: rgba(255, 255, 255, .20);
        }

        .music-studio-inline-host .ms-sw-result {
          position: relative;
          margin-top: 14px;
          padding: 0;
          border-radius: var(--r-xl);
          background:
            linear-gradient(180deg,
              rgba(var(--theme-accent-rgb), .08) 0%,
              transparent 70%),
            var(--lg-fill);
          border: 1px solid var(--lg-stroke-hi);
          -webkit-backdrop-filter: var(--lg-blur);
          backdrop-filter: var(--lg-blur);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .04) inset,
            var(--lg-shadow),
            0 24px 60px -22px rgba(0, 0, 0, .55);
          overflow: hidden;
          animation: msi-ms-card-rise .45s var(--ease-out) both;
        }

        @keyframes msi-ms-card-rise {
          0% {
            opacity: 0;
            transform: translateY(14px) scale(.985);
          }

          100% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        /* === Animated aura behind the card content (theme-colored).
       Only visible during the generating state — fades out on ready. */
        .music-studio-inline-host .ms-sw-result-aura {
          position: absolute;
          inset: -20%;
          pointer-events: none;
          filter: blur(28px) saturate(1.05);
          opacity: 0;
          transition: opacity .8s var(--ease);
          z-index: 0;
        }

        .music-studio-inline-host .ms-sw-result[data-state="generating"] .ms-sw-result-aura,
        .music-studio-inline-host .ms-sw-result[data-state="ready"] .ms-sw-result-aura {
          opacity: .85;
        }

        .music-studio-inline-host .ms-sw-result-aura span {
          position: absolute;
          border-radius: 50%;
          background: rgba(var(--theme-accent-rgb), .55);
          mix-blend-mode: screen;
          will-change: transform;
        }

        .music-studio-inline-host .ms-sw-result-aura span:nth-child(1) {
          width: 55%;
          height: 55%;
          top: -5%;
          left: -8%;
          animation: msi-ms-aura-drift1 12s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-sw-result-aura span:nth-child(2) {
          width: 45%;
          height: 45%;
          top: 25%;
          left: 55%;
          background: rgba(var(--theme-accent-rgb), .42);
          animation: msi-ms-aura-drift2 9s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-sw-result-aura span:nth-child(3) {
          width: 35%;
          height: 35%;
          top: 55%;
          left: 20%;
          background: rgba(var(--theme-accent-rgb), .35);
          animation: msi-ms-aura-drift3 14s ease-in-out infinite;
        }

        @keyframes msi-ms-aura-drift1 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(8%, 6%) scale(1.12);
          }
        }

        @keyframes msi-ms-aura-drift2 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(-10%, -7%) scale(1.18);
          }
        }

        @keyframes msi-ms-aura-drift3 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(7%, -9%) scale(.88);
          }
        }

        /* === GENERATING STATE === */
        .music-studio-inline-host .ms-sw-result-generating {
          position: relative;
          z-index: 1;
          display: none;
          padding: 26px 28px;
          align-items: center;
          gap: 24px;
        }

        .music-studio-inline-host .ms-sw-result[data-state="generating"] .ms-sw-result-generating {
          display: flex;
        }

        /* The "vinyl" — a slowly spinning circle with concentric grooves
   and the theme accent at the center. Visual anchor for the wait. */
        .music-studio-inline-host .ms-sw-vinyl {
          position: relative;
          flex: 0 0 auto;
          width: 96px;
          height: 96px;
          border-radius: 50%;
          background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .10) 100%);
          border: 1px solid rgba(255, 255, 255, .20);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px rgba(255, 255, 255, .18),
            0 18px 40px -12px rgba(0, 0, 0, .6);
          animation: msi-ms-vinyl-spin 8s linear infinite;
          -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
          overflow: hidden;
        }

        .music-studio-inline-host .ms-sw-vinyl::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50%;
          background:
            radial-gradient(35% 35% at 30% 30%, rgba(255, 200, 160, .20), transparent 70%),
            radial-gradient(35% 35% at 70% 70%, rgba(180, 160, 240, .20), transparent 70%);
          filter: blur(8px);
          pointer-events: none;
        }

        .music-studio-inline-host .ms-sw-vinyl::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: rgba(255, 255, 255, .18);
          border: 1px solid rgba(255, 255, 255, .40);
          box-shadow: 0 0 12px rgba(255, 255, 255, .30);
        }

        @keyframes msi-ms-vinyl-spin {
          to {
            transform: rotate(360deg);
          }
        }

        /* Status copy + cycling "what's happening" line */
        .music-studio-inline-host .ms-sw-gen-text {
          display: flex;
          flex-direction: column;
          gap: 8px;
          flex: 1 1 auto;
          min-width: 0;
        }

        .music-studio-inline-host .ms-sw-gen-stage {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: rgba(var(--theme-accent-rgb), 1);
        }

        .music-studio-inline-host .ms-sw-gen-headline {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 21px;
          letter-spacing: -.015em;
          color: var(--text);
          line-height: 1.2;
        }

        .music-studio-inline-host .ms-sw-gen-step {
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
          letter-spacing: .005em;
          min-height: 18px;
          animation: msi-ms-gen-step-fade .4s var(--ease) both;
        }

        @keyframes msi-ms-gen-step-fade {
          0% {
            opacity: 0;
            transform: translateY(4px);
          }

          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .music-studio-inline-host .ms-sw-gen-progress {
          position: relative;
          height: 4px;
          border-radius: 2px;
          background: rgba(255, 255, 255, .06);
          overflow: hidden;
          margin-top: 4px;
        }

        .music-studio-inline-host .ms-sw-gen-progress::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg,
              transparent 0%,
              rgba(var(--theme-accent-rgb), .9) 50%,
              transparent 100%);
          animation: msi-ms-gen-shimmer 2.4s linear infinite;
        }

        @keyframes msi-ms-gen-shimmer {
          0% {
            transform: translateX(-100%);
          }

          100% {
            transform: translateX(220%);
          }
        }

        /* === READY STATE === */
        .music-studio-inline-host .ms-sw-result-ready {
          position: relative;
          z-index: 1;
          display: none;
          padding: 18px;
          gap: 18px;
          align-items: stretch;
        }

        .music-studio-inline-host .ms-sw-result[data-state="ready"] .ms-sw-result-ready {
          display: flex;
        }

        /* Album artwork — 1:1 square. Shows a generated cover or a default
   theme-colored gradient until the user customizes. */
        .music-studio-inline-host .ms-sw-cover {
          position: relative;
          flex: 0 0 auto;
          width: 124px;
          height: 124px;
          border-radius: 14px;
          overflow: hidden;
          background:
            linear-gradient(135deg,
              rgba(var(--theme-accent-rgb), .55) 0%,
              rgba(var(--theme-accent-rgb), .15) 60%,
              rgba(0, 0, 0, .55) 100%);
          border: 1px solid rgba(var(--theme-accent-rgb), .35);
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .06) inset,
            0 14px 30px -10px rgba(0, 0, 0, .55);
        }

        .music-studio-inline-host .ms-sw-cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          animation: msi-ms-cover-fade-in .55s var(--ease-out) both;
        }

        @keyframes msi-ms-cover-fade-in {
          0% {
            opacity: 0;
            transform: scale(1.06);
          }

          100% {
            opacity: 1;
            transform: scale(1);
          }
        }

        .music-studio-inline-host .ms-sw-cover-default {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: var(--font-display);
          font-weight: 900;
          font-size: 42px;
          letter-spacing: -.02em;
          color: rgba(255, 255, 255, .55);
          text-shadow: 0 4px 12px rgba(0, 0, 0, .45);
          pointer-events: none;
        }

        .music-studio-inline-host .ms-sw-cover[data-has-art="true"] .ms-sw-cover-default {
          display: none;
        }

        /* Customize-cover overlay button — appears on hover */
        .music-studio-inline-host .ms-sw-cover-edit {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, .55);
          -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
          opacity: 0;
          transition: opacity .22s var(--ease);
          cursor: pointer;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .04em;
          text-transform: uppercase;
          color: #fff;
          gap: 6px;
        }

        .music-studio-inline-host .ms-sw-cover:hover .ms-sw-cover-edit {
          opacity: 1;
        }

        .music-studio-inline-host .ms-sw-cover-edit svg {
          width: 14px;
          height: 14px;
        }

        /* Right column — title / meta / controls */
        .music-studio-inline-host .ms-sw-ready-body {
          flex: 1 1 auto;
          min-width: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 10px;
        }

        .music-studio-inline-host .ms-sw-ready-head {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .music-studio-inline-host .ms-sw-ready-eyebrow {
          font-family: var(--font-ui);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: rgba(var(--theme-accent-rgb), 1);
        }

        .music-studio-inline-host .ms-sw-ready-title {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 20px;
          letter-spacing: -.015em;
          color: var(--text);
          line-height: 1.2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-sw-ready-meta {
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
          letter-spacing: .005em;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .music-studio-inline-host .ms-sw-ready-meta span {
          display: inline-flex;
          align-items: center;
          gap: 5px;
        }

        .music-studio-inline-host .ms-sw-ready-meta span+span::before {
          content: '·';
          opacity: .6;
          padding-right: 6px;
        }

        /* Player line — big play button + waveform-ish scrubber */
        .music-studio-inline-host .ms-sw-player {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .music-studio-inline-host .ms-sw-play {
          flex: 0 0 auto;
          width: 46px;
          height: 46px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: radial-gradient(circle at 30% 25%,
              rgba(var(--theme-accent-rgb), 1) 0%,
              rgba(var(--theme-accent-rgb), .65) 100%);
          border: 1px solid rgba(var(--theme-accent-rgb), .8);
          color: #08060f;
          cursor: pointer;
          transition: transform .15s var(--ease), box-shadow .2s var(--ease);
          box-shadow:
            0 0 24px rgba(var(--theme-accent-rgb), .45),
            0 8px 20px -6px rgba(0, 0, 0, .6);
        }

        .music-studio-inline-host .ms-sw-play:hover {
          transform: scale(1.06);
        }

        .music-studio-inline-host .ms-sw-play:active {
          transform: scale(.95);
        }

        .music-studio-inline-host .ms-sw-play svg {
          width: 18px;
          height: 18px;
          display: block;
        }

        /* When playing, the icon swaps via class .playing */
        .music-studio-inline-host .ms-sw-play .ms-icon-pause {
          display: none;
        }

        .music-studio-inline-host .ms-sw-play.playing .ms-icon-play {
          display: none;
        }

        .music-studio-inline-host .ms-sw-play.playing .ms-icon-pause {
          display: block;
        }

        .music-studio-inline-host .ms-sw-scrubber {
          flex: 1 1 auto;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 5px;
        }

        .music-studio-inline-host .ms-sw-scrubber-bar {
          position: relative;
          height: 6px;
          border-radius: 3px;
          background: rgba(255, 255, 255, .08);
          cursor: pointer;
        }

        .music-studio-inline-host .ms-sw-scrubber-fill {
          position: absolute;
          inset: 0;
          width: 0%;
          background: linear-gradient(90deg,
              rgba(var(--theme-accent-rgb), .9) 0%,
              rgba(var(--theme-accent-rgb), .55) 100%);
          border-radius: 3px;
          transition: width .12s linear;
        }

        .music-studio-inline-host .ms-sw-scrubber-time {
          display: flex;
          justify-content: space-between;
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 600;
          color: var(--text-faint);
          letter-spacing: .04em;
        }

        /* Action row — customize art / download */
        .music-studio-inline-host .ms-sw-ready-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 2px;
        }

        .music-studio-inline-host .ms-sw-action {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 7px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 700;
          letter-spacing: .005em;
          text-decoration: none;
          cursor: pointer;
          transition: all .18s var(--ease);
        }

        .music-studio-inline-host .ms-sw-action:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-sw-action.primary {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .25), transparent 70%),
            var(--lg-fill-hover);
          border-color: rgba(var(--theme-accent-rgb), .55);
        }

        .music-studio-inline-host .ms-sw-action.primary:hover {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(var(--theme-accent-rgb), .40), transparent 65%),
            var(--lg-fill-active);
          box-shadow: 0 0 18px rgba(var(--theme-accent-rgb), .35);
        }

        .music-studio-inline-host .ms-sw-action svg {
          width: 13px;
          height: 13px;
        }

        .music-studio-inline-host .ms-sw-action .joy-coin {
          width: 13px;
          height: 13px;
        }

        /* === ERROR STATE === */
        .music-studio-inline-host .ms-sw-result-error {
          position: relative;
          z-index: 1;
          display: none;
          padding: 16px 20px;
          align-items: center;
          gap: 12px;
        }

        .music-studio-inline-host .ms-sw-result[data-state="error"] .ms-sw-result-error {
          display: flex;
        }

        .music-studio-inline-host .ms-sw-result-error-text {
          font-family: var(--font-body);
          font-size: 13.5px;
          font-weight: 500;
          color: var(--danger);
          flex: 1 1 auto;
        }

        .music-studio-inline-host .ms-sw-result-error-retry {
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-sw-result-error-retry:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        /* Compact mode for narrow viewports — cover stays square but
   shrinks; controls reflow underneath. */
        @media (max-width:560px) {
          .music-studio-inline-host .ms-sw-result-ready {
            flex-direction: column;
          }

          .music-studio-inline-host .ms-sw-cover {
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
          }
        }

        @media (max-width:560px) {
          .music-studio-inline-host .ms-sw-meta {
            gap: 6px
          }

          .music-studio-inline-host .ms-sw-input-row {
            padding: 8px 8px 8px 10px
          }

          .music-studio-inline-host .ms-sw-send-main {
            padding: 0 14px;
            font-size: 12px
          }

          .music-studio-inline-host .ms-sw-send-cost {
            padding: 0 12px
          }
        }

        /* ============================================================
   2026-05-12 b.338 — STEM SPLIT MODAL
   Sits in the songwriter flow: user clicks "Split into stems" on
   the result card and this modal opens. Three states driven by
   [data-state] on .ms-stem-modal: confirm → splitting → picker.
   Mirrors the art-modal recipe (glass shell + theme-tinted tint
   + slide-up) so it feels native to the rest of the studio.
   ============================================================ */
        .music-studio-inline-host .ms-stem-modal {
          position: fixed;
          inset: 0;
          z-index: 101;
          display: none;
          align-items: center;
          justify-content: center;
          padding: 32px;
          background: rgba(6, 4, 12, .72);
          -webkit-backdrop-filter: blur(24px) saturate(1.3);
          backdrop-filter: blur(24px) saturate(1.3);
          animation: msi-ms-modal-fade .25s var(--ease) both;
        }

        .music-studio-inline-host .ms-stem-modal[data-open="true"] {
          display: flex;
        }

        .music-studio-inline-host .ms-stem-shell {
          width: min(680px, 100%);
          max-height: 90vh;
          display: flex;
          flex-direction: column;
          background: linear-gradient(160deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 100%);
          border: 1px solid rgba(255,255,255,.22);
          border-radius: var(--r-xl);
          -webkit-backdrop-filter: blur(60px) saturate(2.0) brightness(1.18);
          backdrop-filter: blur(60px) saturate(2.0) brightness(1.18);
          box-shadow:
            0 1px 0 rgba(255,255,255,.28) inset,
            0 0 0 1px rgba(255,255,255,.07) inset,
            0 40px 100px rgba(0, 0, 0, .70),
            0 8px 32px rgba(0, 0, 0, .45);
          overflow: hidden;
          animation: msi-ms-modal-rise .35s var(--ease-out) both;
        }

        .music-studio-inline-host .ms-stem-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 18px;
          padding: 22px 26px 16px;
          border-bottom: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-stem-head h3 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 21px;
          letter-spacing: -.015em;
          color: var(--text);
        }

        .music-studio-inline-host .ms-stem-head p {
          margin-top: 3px;
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-stem-close {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: transparent;
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-size: 20px;
          line-height: 1;
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-close:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        /* Bodies — only the body for the active state is visible. */
        .music-studio-inline-host .ms-stem-body {
          display: none;
          flex-direction: column;
          gap: 14px;
          padding: 22px 26px;
          overflow-y: auto;
        }

        .music-studio-inline-host .ms-stem-modal[data-state="confirm"] .ms-stem-state-confirm,
        .music-studio-inline-host .ms-stem-modal[data-state="splitting"] .ms-stem-state-splitting,
        .music-studio-inline-host .ms-stem-modal[data-state="picker"] .ms-stem-state-picker {
          display: flex;
        }

        /* ─────────── CONFIRM STATE ─────────── */
        .music-studio-inline-host .ms-stem-confirm-card {
          display: flex;
          gap: 16px;
          align-items: flex-start;
          padding: 18px;
          border-radius: 16px;
          background: linear-gradient(140deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
          border: 1px solid rgba(255,255,255,.15);
        }

        .music-studio-inline-host .ms-stem-confirm-ico {
          flex: 0 0 auto;
          width: 56px;
          height: 56px;
          border-radius: 14px;
          display: grid;
          place-items: center;
          background: linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 100%);
          border: 1px solid rgba(255,255,255,.28);
          color: rgba(255,255,255,.92);
        }

        .music-studio-inline-host .ms-stem-confirm-ico svg {
          width: 30px;
          height: 30px;
        }

        .music-studio-inline-host .ms-stem-confirm-body h4 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 15px;
          letter-spacing: -.005em;
          color: var(--text);
          margin-bottom: 5px;
        }

        .music-studio-inline-host .ms-stem-confirm-body p {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: var(--text-muted);
          line-height: 1.5;
        }

        .music-studio-inline-host .ms-stem-confirm-body em {
          font-style: normal !important;
          color: var(--text);
          font-weight: 700;
        }

        .music-studio-inline-host .ms-stem-variants {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .music-studio-inline-host .ms-stem-variant {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 13px 16px;
          border-radius: 14px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-variant:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-variant.on {
          background: linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%);
          border-color: rgba(255,255,255,.42);
        }

        .music-studio-inline-host .ms-stem-variant input {
          accent-color: rgba(255,255,255,.95);
          margin: 0;
        }

        .music-studio-inline-host .ms-stem-variant-body {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        .music-studio-inline-host .ms-stem-variant-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          color: var(--text);
          letter-spacing: -.003em;
        }

        .music-studio-inline-host .ms-stem-variant-desc {
          font-family: var(--font-body);
          font-size: 11.5px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-stem-variant-cost {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 12.5px;
          color: var(--text);
          padding: 5px 10px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .06);
          border: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-stem-variant-cost .joy-coin {
          width: 13px;
          height: 13px;
        }

        /* ─────────── SPLITTING STATE ─────────── */
        .music-studio-inline-host .ms-stem-splitting {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 40px 24px;
          min-height: 260px;
          text-align: center;
        }

        .music-studio-inline-host .ms-stem-splitting-aura {
          position: absolute;
          inset: 0;
          filter: blur(40px) saturate(1.1);
          pointer-events: none;
          z-index: 0;
        }

        .music-studio-inline-host .ms-stem-splitting-aura span {
          position: absolute;
          border-radius: 50%;
          background: rgba(255,255,255,.32);
          mix-blend-mode: screen;
        }

        .music-studio-inline-host .ms-stem-splitting-aura span:nth-child(1) {
          width: 46%;
          height: 46%;
          top: 10%;
          left: 8%;
          animation: msi-ms-aura-drift1 7s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-stem-splitting-aura span:nth-child(2) {
          width: 38%;
          height: 38%;
          top: 38%;
          left: 55%;
          background: rgba(255,255,255,.24);
          animation: msi-ms-aura-drift2 6s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-stem-splitting-aura span:nth-child(3) {
          width: 30%;
          height: 30%;
          top: 60%;
          left: 24%;
          background: rgba(255,255,255,.20);
          animation: msi-ms-aura-drift3 9s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-stem-splitting-glyph {
          position: relative;
          z-index: 1;
          width: 72px;
          height: 72px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: rgba(0, 0, 0, .32);
          border: 1px solid rgba(255, 255, 255, .22);
          color: var(--text);
        }

        .music-studio-inline-host .ms-stem-splitting-glyph svg {
          width: 48px;
          height: 48px;
        }

        .music-studio-inline-host .ms-stem-wave {
          stroke-dasharray: 200;
          stroke-dashoffset: 0;
          animation: msi-stem-wave 3s linear infinite;
        }

        .music-studio-inline-host .ms-stem-wave.wave-2 {
          animation-delay: -1.5s;
          opacity: .7;
        }

        @keyframes msi-stem-wave {
          0% {
            stroke-dashoffset: 0;
          }

          100% {
            stroke-dashoffset: -200;
          }
        }

        .music-studio-inline-host .ms-stem-splitting-title {
          position: relative;
          z-index: 1;
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 16px;
          color: var(--text);
          letter-spacing: -.005em;
        }

        .music-studio-inline-host .ms-stem-splitting-sub {
          position: relative;
          z-index: 1;
          font-family: var(--font-body);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--text-muted);
          max-width: 380px;
        }

        /* ─────────── PICKER STATE ─────────── */
        .music-studio-inline-host .ms-stem-picker-head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 14px;
        }

        .music-studio-inline-host .ms-stem-picker-head h4 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 15px;
          color: var(--text);
          margin-bottom: 3px;
          letter-spacing: -.005em;
        }

        .music-studio-inline-host .ms-stem-picker-head p {
          font-family: var(--font-body);
          font-size: 12px;
          font-weight: 500;
          color: var(--text-muted);
          max-width: 440px;
        }

        .music-studio-inline-host .ms-stem-select-all {
          padding: 6px 12px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          cursor: pointer;
          transition: all .15s var(--ease);
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-stem-select-all:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-list {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .music-studio-inline-host .ms-stem-row {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 12px 14px;
          border-radius: 14px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-row.on {
          background: linear-gradient(140deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
          border-color: rgba(255,255,255,.40);
        }

        .music-studio-inline-host .ms-stem-row:hover {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-row.on:hover {
          background: linear-gradient(140deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 100%);
        }

        .music-studio-inline-host .ms-stem-checkbox {
          position: relative;
          width: 22px;
          height: 22px;
          flex: 0 0 auto;
          border-radius: 7px;
          background: rgba(255, 255, 255, .06);
          border: 1.5px solid var(--lg-stroke);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-row.on .ms-stem-checkbox {
          background: rgba(255,255,255,.90);
          border-color: rgba(255,255,255,.90);
        }

        .music-studio-inline-host .ms-stem-checkbox::after {
          content: "";
          position: absolute;
          left: 6px;
          top: 2px;
          width: 6px;
          height: 11px;
          border: solid #08060f;
          border-width: 0 2.5px 2.5px 0;
          transform: rotate(45deg) scale(0);
          transition: transform .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-row.on .ms-stem-checkbox::after {
          transform: rotate(45deg) scale(1);
        }

        .music-studio-inline-host .ms-stem-ico {
          flex: 0 0 auto;
          width: 38px;
          height: 38px;
          border-radius: 10px;
          display: grid;
          place-items: center;
          background: rgba(255, 255, 255, .05);
          border: 1px solid var(--lg-stroke);
          color: var(--text);
        }

        .music-studio-inline-host .ms-stem-ico svg {
          width: 22px;
          height: 22px;
        }

        .music-studio-inline-host .ms-stem-row-body {
          flex: 1 1 auto;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .music-studio-inline-host .ms-stem-name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          color: var(--text);
          letter-spacing: -.003em;
        }

        .music-studio-inline-host .ms-stem-desc {
          font-family: var(--font-body);
          font-size: 11px;
          font-weight: 500;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-stem-preview {
          flex: 0 0 auto;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: grid;
          place-items: center;
          background: rgba(255, 255, 255, .06);
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-preview:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-preview svg {
          width: 14px;
          height: 14px;
        }

        .music-studio-inline-host .ms-stem-preview.playing {
          background: rgba(255,255,255,.18);
          border-color: rgba(255,255,255,.55);
          color: rgba(255,255,255,.95);
        }

        .music-studio-inline-host .ms-stem-preview .ico-pause {
          display: none;
        }

        .music-studio-inline-host .ms-stem-preview.playing .ico-play {
          display: none;
        }

        .music-studio-inline-host .ms-stem-preview.playing .ico-pause {
          display: block;
        }

        /* Format toggle */
        .music-studio-inline-host .ms-stem-format-row {
          display: flex;
          align-items: center;
          gap: 14px;
          padding-top: 6px;
        }

        .music-studio-inline-host .ms-stem-format-label {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: .16em;
          text-transform: uppercase;
          color: var(--text-muted);
        }

        .music-studio-inline-host .ms-stem-format {
          display: inline-flex;
          padding: 3px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-stem-format-opt {
          display: inline-flex;
          align-items: baseline;
          gap: 6px;
          padding: 6px 14px;
          border-radius: 999px;
          background: transparent;
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          color: var(--text-muted);
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-format-opt strong {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 11.5px;
          letter-spacing: -.003em;
        }

        .music-studio-inline-host .ms-stem-format-opt em {
          font-style: normal !important;
          font-size: 9.5px;
          letter-spacing: .06em;
          text-transform: uppercase;
          opacity: .7;
        }

        .music-studio-inline-host .ms-stem-format-opt:hover {
          color: var(--text);
        }

        .music-studio-inline-host .ms-stem-format-opt.on {
          background: linear-gradient(140deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%);
          color: rgba(255,255,255,.98);
        }

        /* ─────────── FOOTER ─────────── */
        .music-studio-inline-host .ms-stem-foot {
          padding: 14px 26px 22px;
          border-top: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-stem-foot-confirm,
        .music-studio-inline-host .ms-stem-foot-picker {
          display: none;
          align-items: center;
          gap: 10px;
        }

        .music-studio-inline-host .ms-stem-modal[data-state="confirm"] .ms-stem-foot-confirm,
        .music-studio-inline-host .ms-stem-modal[data-state="picker"] .ms-stem-foot-picker {
          display: flex;
        }

        .music-studio-inline-host .ms-stem-cancel,
        .music-studio-inline-host .ms-stem-back {
          padding: 9px 16px;
          border-radius: 999px;
          background: transparent;
          border: 1px solid var(--lg-stroke);
          color: var(--text-muted);
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
          transition: all .15s var(--ease);
        }

        .music-studio-inline-host .ms-stem-cancel:hover,
        .music-studio-inline-host .ms-stem-back:hover {
          background: var(--lg-fill-hover);
          color: var(--text);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-foot-count {
          font-family: var(--font-ui);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .06em;
          text-transform: uppercase;
          color: var(--text-muted);
          padding: 5px 11px;
          border-radius: 999px;
          background: var(--lg-fill);
          border: 1px solid var(--lg-stroke);
        }

        .music-studio-inline-host .ms-stem-go,
        .music-studio-inline-host .ms-stem-action {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 16px;
          border-radius: 999px;
          background: linear-gradient(160deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 100%);
          border: 1px solid rgba(255,255,255,.42);
          color: rgba(255,255,255,.98);
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
          transition: all .15s var(--ease);
          box-shadow:
            0 1px 0 rgba(255,255,255,.28) inset,
            0 6px 18px -6px rgba(0,0,0,.55);
        }

        .music-studio-inline-host .ms-stem-go:hover,
        .music-studio-inline-host .ms-stem-action:hover {
          background: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.15) 100%);
          border-color: rgba(255,255,255,.65);
          box-shadow:
            0 1px 0 rgba(255,255,255,.35) inset,
            0 0 22px rgba(255,255,255,.18),
            0 8px 22px -6px rgba(0,0,0,.60);
        }

        .music-studio-inline-host .ms-stem-go:disabled,
        .music-studio-inline-host .ms-stem-action:disabled {
          opacity: .5;
          cursor: not-allowed;
          box-shadow: none;
        }

        .music-studio-inline-host .ms-stem-go svg,
        .music-studio-inline-host .ms-stem-action svg {
          width: 14px;
          height: 14px;
        }

        .music-studio-inline-host .ms-stem-go-cost {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 11.5px;
        }

        .music-studio-inline-host .ms-stem-go-cost .joy-coin {
          width: 13px;
          height: 13px;
        }

        /* "Separate" action — subtler glass tier than "Mix into one" which is
   the bolder accent. Keeps the primary CTA visually dominant. */
        .music-studio-inline-host .ms-stem-action.ms-stem-action-separate {
          background: var(--lg-fill-hover);
          border-color: var(--lg-stroke-hi);
        }

        .music-studio-inline-host .ms-stem-action.ms-stem-action-separate:hover {
          background: var(--lg-fill-active);
          box-shadow: none;
        }

        /* Compact mode — stack list rows and shrink padding on phones */
        @media (max-width:560px) {
          .music-studio-inline-host .ms-stem-shell {
            width: 100%;
            max-height: 94vh;
          }

          .music-studio-inline-host .ms-stem-head {
            padding: 18px 18px 14px;
          }

          .music-studio-inline-host .ms-stem-body {
            padding: 18px;
          }

          .music-studio-inline-host .ms-stem-foot {
            padding: 12px 18px 18px;
            flex-wrap: wrap;
          }

          .music-studio-inline-host .ms-stem-foot-picker {
            flex-wrap: wrap;
          }

          .music-studio-inline-host .ms-stem-foot-count {
            order: -1;
            flex: 1 1 100%;
            text-align: center;
            margin-bottom: 4px;
          }

          .music-studio-inline-host .ms-stem-row {
            padding: 10px 12px;
            gap: 10px;
          }

          .music-studio-inline-host .ms-stem-confirm-card {
            flex-direction: column;
          }
        }

        /* === MUSIC STUDIO CSS END === */
        /* Liquid-glass intensity boost — strengthens the chips, modal shells,
   and the listen-page card. Higher backdrop blur, more visible inner
   sheen, stronger border luminosity. */
        .music-studio-inline-host .ms-sw-pill-btn,
        .music-studio-inline-host .ms-length-opt,
        .music-studio-inline-host .ms-voice-opt,
        .music-studio-inline-host .ms-style-pill,
        .music-studio-inline-host .ms-art-style {
          background: rgba(255, 255, 255, .05) !important;
          border: 1px solid rgba(255, 255, 255, .12) !important;
          -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
          backdrop-filter: blur(22px) saturate(1.3) !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .04) inset,
            0 6px 18px -8px rgba(0, 0, 0, .4) !important;
        }

        .music-studio-inline-host .ms-sw-pill-btn:hover,
        .music-studio-inline-host .ms-length-opt:hover {
          background: rgba(255, 255, 255, .08) !important;
          border-color: rgba(var(--theme-accent-rgb), .35) !important;
        }

        .music-studio-inline-host .ms-sw-tempo,
        .music-studio-inline-host .ms-sw-vocal {
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .10) !important;
          -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
          backdrop-filter: blur(22px) saturate(1.3) !important;
        }

        /* Theme-locked override — direct rgba(var(--theme-accent-rgb),...)
   on every "active" glow so there is zero indirection. Bypasses any
   browser quirk where var() in box-shadow could be reported stale
   after a theme switch. */
        .music-studio-inline-host .ms-sw-tempo-opt.on,
        .music-studio-inline-host .ms-sw-vocal-opt.on {
          box-shadow: 0 0 12px rgba(var(--theme-accent-rgb), .42) !important;
          border-color: rgba(var(--theme-accent-rgb), .55) !important;
        }

        .music-studio-inline-host .ms-sw-send-btn {
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px rgba(var(--theme-accent-rgb), .42) !important;
          border-color: rgba(var(--theme-accent-rgb), .55) !important;
        }

        .music-studio-inline-host .ms-sw-send-btn:hover:not(:disabled) {
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .65) inset,
            0 0 0 1px rgba(255, 255, 255, .14) inset,
            0 0 30px rgba(var(--theme-accent-rgb), .60) !important;
        }

        /* ============================================================
   LIQUID-GLASS EVERYWHERE — kill solid color fills on selection
   states, replace with frosted-glass surfaces and a soft white
   light behind them. Animated motion layers behind the result
   card so the whole card feels alive while a song plays.
   ============================================================ */
        /* ----- Selection states: glass + soft white halo, no theme color ----- */
        .music-studio-inline-host .ms-sw-tempo-opt.on,
        .music-studio-inline-host .ms-sw-vocal-opt.on,
        .music-studio-inline-host .ms-length-opt.on,
        .music-studio-inline-host .ms-voice-opt.on,
        .music-studio-inline-host .ms-style-pill.on,
        .music-studio-inline-host .ms-art-style.on,
        .music-studio-inline-host .ms-art-quality-opt.on,
        .music-studio-inline-host .ms-lyrics-tab.on,
        .music-studio-inline-host .ms-music-tab.on {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .40) !important;
          color: rgba(255, 255, 255, 1) !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .18) inset,
            0 0 18px rgba(255, 255, 255, .18) !important;
          background-image: none !important;
        }

        /* Tab counters drop the theme tint */
        .music-studio-inline-host .ms-music-tab.on .ms-music-tab-count {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .30) !important;
          color: rgba(255, 255, 255, .92) !important;
          background-image: none !important;
        }

        .music-studio-inline-host .ms-music-tab-underline {
          background: rgba(255, 255, 255, .85) !important;
          box-shadow: 0 0 14px rgba(255, 255, 255, .45) !important;
        }

        /* ----- Send button (Make-the-song) — pure glass, white halo ----- */
        .music-studio-inline-host .ms-sw-send-btn {
          background: rgba(255, 255, 255, .05) !important;
          border: 1.5px solid rgba(255, 255, 255, .32) !important;
          background-image: none !important;
          /* b.512 — Pill → softly-rounded rectangle. User: "change the
     look from the pill to a beautiful rectangle with really
     beautifully curved edges." 18px radius is the sweet spot:
     reads as a deliberate rounded rectangle rather than a
     pill, with corners still soft enough to feel
     liquid-glass rather than industrial. */
          border-radius: 18px !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .65) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 22px rgba(255, 255, 255, .22) !important;
        }

        .music-studio-inline-host .ms-sw-send-btn:hover:not(:disabled) {
          border-color: rgba(255, 255, 255, .55) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .75) inset,
            0 0 0 1px rgba(255, 255, 255, .16) inset,
            0 0 32px rgba(255, 255, 255, .40) !important;
        }

        /* ----- Customize artwork "primary" pill — pure glass ----- */
        .music-studio-inline-host .ms-sw-action.primary {
          background: rgba(255, 255, 255, .06) !important;
          border-color: rgba(255, 255, 255, .32) !important;
          background-image: none !important;
          box-shadow: 0 0 16px rgba(255, 255, 255, .18) !important;
        }

        .music-studio-inline-host .ms-sw-action.primary:hover {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .50) !important;
          box-shadow: 0 0 24px rgba(255, 255, 255, .32) !important;
        }

        /* ----- Lyrics modal Save / cover-customize buttons — glass ----- */
        .music-studio-inline-host .ms-lyrics-save,
        .music-studio-inline-host .ms-lyrics-gen-btn,
        .music-studio-inline-host .ms-art-gen,
        .music-studio-inline-host .ms-art-apply {
          background: rgba(255, 255, 255, .06) !important;
          border: 1px solid rgba(255, 255, 255, .32) !important;
          background-image: none !important;
          color: rgba(255, 255, 255, .95) !important;
          box-shadow: 0 0 16px rgba(255, 255, 255, .18) !important;
        }

        .music-studio-inline-host .ms-lyrics-save:hover,
        .music-studio-inline-host .ms-art-gen:hover:not(:disabled) {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .55) !important;
          box-shadow: 0 0 28px rgba(255, 255, 255, .36) !important;
        }

        /* ----- Result card — wild animated graphics behind the glass ----- */
        .music-studio-inline-host .ms-sw-result {
          position: relative;
          isolation: isolate;
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .14) !important;
          background-image: none !important;
        }

        /* Layered drifting blobs that always run when the card is on screen.
   They use the song's album-art colors (--song-orb-N from the parent
   via postMessage) when the iframe knows them, else fall back to
   warm/cool defaults. The big radial-gradient overlay creates the
   shimmering motion-energy you can see through the glass. */
        .music-studio-inline-host .ms-sw-result-motion {
          position: absolute;
          inset: -12%;
          pointer-events: none;
          z-index: -1;
          filter: blur(48px) saturate(1.4);
          opacity: .85;
        }

        .music-studio-inline-host .ms-sw-result-motion span {
          position: absolute;
          border-radius: 50%;
          mix-blend-mode: screen;
          will-change: transform;
        }

        .music-studio-inline-host .ms-sw-result-motion span:nth-child(1) {
          width: 55%;
          height: 55%;
          top: -10%;
          left: -10%;
          background: rgba(255, 255, 255, .22);
          animation: msi-ms-result-drift1 14s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-sw-result-motion span:nth-child(2) {
          width: 50%;
          height: 50%;
          top: 15%;
          left: 55%;
          background: rgba(180, 160, 240, .28);
          animation: msi-ms-result-drift2 11s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-sw-result-motion span:nth-child(3) {
          width: 45%;
          height: 45%;
          top: 55%;
          left: 20%;
          background: rgba(255, 200, 140, .22);
          animation: msi-ms-result-drift3 17s ease-in-out infinite;
        }

        .music-studio-inline-host .ms-sw-result-motion span:nth-child(4) {
          width: 40%;
          height: 40%;
          top: 40%;
          left: 65%;
          background: rgba(255, 255, 255, .12);
          animation: msi-ms-result-drift4 19s ease-in-out infinite;
        }

        @keyframes msi-ms-result-drift1 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(28%, 22%) scale(1.18);
          }
        }

        @keyframes msi-ms-result-drift2 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(-25%, 20%) scale(1.22);
          }
        }

        @keyframes msi-ms-result-drift3 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(22%, -18%) scale(.85);
          }
        }

        @keyframes msi-ms-result-drift4 {

          0%,
          100% {
            transform: translate(0, 0) scale(1);
          }

          50% {
            transform: translate(-20%, -22%) scale(1.30);
          }
        }

        /* When the card knows it's playing, intensify the motion */
        .music-studio-inline-host .ms-sw-result[data-playing="true"] .ms-sw-result-motion {
          opacity: 1;
          filter: blur(40px) saturate(1.6);
        }

        .music-studio-inline-host .ms-sw-result[data-playing="true"] .ms-sw-result-motion span {
          animation-duration: 6s, 5s, 7s, 8s;
        }

        /* ----- Editable title inside the result card ----- */
        .music-studio-inline-host .ms-sw-ready-title {
          outline: none;
          cursor: text;
          border-bottom: 1px solid transparent;
          transition: border-color .18s ease;
        }

        .music-studio-inline-host .ms-sw-ready-title:hover,
        .music-studio-inline-host .ms-sw-ready-title:focus {
          border-bottom-color: rgba(255, 255, 255, .35);
        }

        /* ----- Songs tab card — compact, single-line action row, no dead bg ----- */
        .music-studio-inline-host .ms-songs-modal {
          background: rgba(0, 0, 0, .18) !important;
          -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
          backdrop-filter: blur(20px) saturate(1.2) !important;
        }

        .music-studio-inline-host .ms-songs-shell {
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .14) !important;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 100px -20px rgba(0, 0, 0, .6) !important;
        }

        .music-studio-inline-host .ms-song-card {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          gap: 14px !important;
          padding: 12px 14px !important;
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .12) !important;
          border-radius: 14px !important;
        }

        .music-studio-inline-host .ms-song-meta {
          flex: 1 1 auto;
          min-width: 0;
        }

        .music-studio-inline-host .ms-song-title {
          font-size: 14px !important;
          margin-bottom: 4px !important;
        }

        .music-studio-inline-host .ms-song-tags {
          gap: 4px !important;
        }

        .music-studio-inline-host .ms-song-tag,
        .music-studio-inline-host .ms-song-tag-date {
          background: rgba(255, 255, 255, .05) !important;
          border: 1px solid rgba(255, 255, 255, .10) !important;
        }

        .music-studio-inline-host .ms-song-actions {
          display: flex !important;
          flex-direction: row !important;
          align-items: center !important;
          gap: 6px !important;
          flex: 0 0 auto !important;
          margin-left: auto;
        }

        .music-studio-inline-host .ms-song-audio {
          width: 200px !important;
          height: 32px !important;
          filter: invert(.9) hue-rotate(180deg) saturate(.4) brightness(1.1) !important;
        }

        .music-studio-inline-host .ms-song-iconbtn {
          width: 30px !important;
          height: 30px !important;
          background: rgba(255, 255, 255, .05) !important;
          border-color: rgba(255, 255, 255, .16) !important;
        }

        .music-studio-inline-host .ms-song-iconbtn:hover {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .40) !important;
          box-shadow: 0 0 14px rgba(255, 255, 255, .20) !important;
          color: #fff !important;
        }

        .music-studio-inline-host .ms-song-iconbtn.copied {
          background: rgba(255, 255, 255, .16) !important;
          border-color: rgba(255, 255, 255, .55) !important;
          color: #fff !important;
        }

        .music-studio-inline-host .ms-session-head,
        .music-studio-inline-host .ms-session-name {
          display: none !important;
        }

        /* Custom confirm modal — pure liquid glass. */
        .music-studio-inline-host .ms-confirm-back {
          position: fixed;
          inset: 0;
          z-index: 300;
          display: none;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, .45);
          -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
          opacity: 0;
          transition: opacity .22s ease;
          pointer-events: none;
        }

        .music-studio-inline-host .ms-confirm-back[hidden] {
          display: none !important;
        }

        .music-studio-inline-host .ms-confirm-back[data-open="true"] {
          display: flex;
          opacity: 1;
          pointer-events: auto;
        }

        .music-studio-inline-host .ms-confirm-shell {
          width: min(420px, 92%);
          padding: 26px 28px 22px;
          border-radius: 22px;
          background: rgba(255, 255, 255, .06);
          border: 1px solid rgba(255, 255, 255, .18);
          -webkit-backdrop-filter: blur(28px) saturate(1.3);
          backdrop-filter: blur(28px) saturate(1.3);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 80px -20px rgba(0, 0, 0, .6);
          color: #fff;
          transform: translateY(8px) scale(.98);
          transition: transform .26s cubic-bezier(.16, 1, .3, 1);
        }

        .music-studio-inline-host .ms-confirm-back[data-open="true"] .ms-confirm-shell {
          transform: translateY(0) scale(1);
        }

        .music-studio-inline-host .ms-confirm-shell h4 {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 18px;
          margin-bottom: 8px;
        }

        .music-studio-inline-host .ms-confirm-shell p {
          font-family: var(--font-body);
          font-size: 13px;
          font-weight: 500;
          color: rgba(255, 255, 255, .72);
          line-height: 1.5;
          margin-bottom: 18px;
        }

        .music-studio-inline-host .ms-confirm-actions {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
        }

        .music-studio-inline-host .ms-confirm-cancel,
        .music-studio-inline-host .ms-confirm-confirm {
          padding: 9px 16px;
          border-radius: 999px;
          font-family: var(--font-ui);
          font-size: 12px;
          font-weight: 700;
          cursor: pointer;
          transition: all .15s ease;
        }

        .music-studio-inline-host .ms-confirm-cancel {
          background: rgba(255, 255, 255, .05);
          border: 1px solid rgba(255, 255, 255, .18);
          color: rgba(255, 255, 255, .85);
        }

        .music-studio-inline-host .ms-confirm-cancel:hover {
          background: rgba(255, 255, 255, .10);
        }

        .music-studio-inline-host .ms-confirm-confirm {
          background: rgba(255, 80, 96, .12);
          border: 1px solid rgba(255, 80, 96, .55);
          color: rgba(255, 160, 170, 1);
        }

        .music-studio-inline-host .ms-confirm-confirm:hover {
          background: rgba(255, 80, 96, .20);
          border-color: rgba(255, 80, 96, .80);
          box-shadow: 0 0 18px rgba(255, 80, 96, .30);
        }

        /* Editable title placeholder when empty */
        .music-studio-inline-host .ms-sw-ready-title:empty:before {
          content: attr(data-placeholder);
          color: rgba(255, 255, 255, .40);
          font-style: italic;
        }

        /* Result card — buttons docked top-right, no dead bottom space */
        .music-studio-inline-host .ms-sw-result-ready {
          display: flex !important;
          flex-direction: row !important;
          gap: 18px !important;
          padding: 18px !important;
          align-items: center !important;
        }

        .music-studio-inline-host .ms-sw-cover {
          width: 96px !important;
          height: 96px !important;
          flex: 0 0 auto !important;
          border-radius: 14px !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          background: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .02) 100%) !important;
        }

        .music-studio-inline-host .ms-sw-ready-body {
          flex: 1 1 auto !important;
          min-width: 0 !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 8px !important;
          padding-right: 160px !important;
          position: relative;
        }

        .music-studio-inline-host .ms-sw-ready-actions {
          position: absolute !important;
          top: 0 !important;
          right: 0 !important;
          display: flex !important;
          gap: 6px !important;
          flex-direction: row !important;
        }

        .music-studio-inline-host .ms-sw-action {
          padding: 7px 11px !important;
          font-size: 11px !important;
          background: rgba(255, 255, 255, .05) !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          background-image: none !important;
        }

        .music-studio-inline-host .ms-sw-action:hover {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .40) !important;
          box-shadow: 0 0 16px rgba(255, 255, 255, .20) !important;
        }

        .music-studio-inline-host .ms-sw-action.primary {
          background: rgba(255, 255, 255, .06) !important;
          border-color: rgba(255, 255, 255, .32) !important;
        }

        .music-studio-inline-host .ms-sw-action span:not(.joy-coin) {
          display: none;
        }

        .music-studio-inline-host .ms-sw-action svg {
          width: 14px;
          height: 14px;
        }

        @media (min-width: 700px) {
          .music-studio-inline-host .ms-sw-action span:not(.joy-coin) {
            display: inline;
          }
        }

        /* Compact player — no bottom dead space */
        .music-studio-inline-host .ms-sw-player {
          margin-top: auto;
        }

        /* Play button — pulsing white halo when audio playing */
        .music-studio-inline-host .ms-sw-play {
          background: rgba(255, 255, 255, .10) !important;
          border: 1px solid rgba(255, 255, 255, .40) !important;
          background-image: none !important;
          color: #fff !important;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 18px rgba(255, 255, 255, .20) !important;
        }

        .music-studio-inline-host .ms-sw-play:hover {
          background: rgba(255, 255, 255, .18) !important;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .20) inset, 0 0 28px rgba(255, 255, 255, .40) !important;
        }

        .music-studio-inline-host .ms-sw-play.playing {
          animation: msi-ms-play-pulse 1.6s ease-in-out infinite;
        }

        @keyframes msi-ms-play-pulse {

          0%,
          100% {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .20) inset, 0 0 22px rgba(255, 255, 255, .32);
          }

          50% {
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .30) inset, 0 0 38px rgba(255, 255, 255, .55);
          }
        }

        /* Scrubber — pure glass */
        .music-studio-inline-host .ms-sw-scrubber-bar {
          background: rgba(255, 255, 255, .10) !important;
        }

        .music-studio-inline-host .ms-sw-scrubber-fill {
          background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 100%) !important;
        }

        /* Eyebrow tone — white instead of theme color */
        .music-studio-inline-host .ms-sw-ready-eyebrow,
        .music-studio-inline-host .ms-sw-gen-stage {
          color: rgba(255, 255, 255, .78) !important;
        }

        /* b.502 — SONGWRITER · Result card to a 2-row CSS grid.
   User: "still too much dead space below the image, and the
   play button + progress bar are not perfectly aligned."
   Diagnosis: b.501's natural-flow stack left the cover at 96px
   on the left while the body (head + player + actions) stacked
   vertically next to it. Cover and body had different heights,
   so dead space appeared below the cover.

   Creative fix: 2-row grid that uses the dead space below the
   cover as the PLAYER row. Top row carries cover + head + actions
   side-by-side. Bottom row is a full-width player bar that runs
   from the card's left edge all the way to the right edge,
   reclaiming the space below the cover.

   Flatten .ms-sw-ready-body via display:contents so its
   children become direct grid items of .ms-sw-result-ready.
   Then place each element with grid-template-areas. */
        .music-studio-inline-host .ms-sw-result-ready {
          display: grid !important;
          /* b.506 — Drop the "actions" column. Actions are now absolute-
     positioned at top:8 of the .ms-sw-result card so they line
     up with the X close button (which is at top:10 right:10).
     Grid is back to 2 columns: cover | head on row 1, player
     spans both columns on row 2. */
          grid-template-columns: auto 1fr !important;
          grid-template-rows: auto auto !important;
          grid-template-areas:
            "cover  head"
            "player player" !important;
          column-gap: 14px !important;
          row-gap: 12px !important;
          padding: 14px !important;
          align-items: center !important;
          position: relative !important;
        }

        .music-studio-inline-host .ms-sw-cover {
          grid-area: cover !important;
          width: 96px !important;
          height: 96px !important;
          border-radius: 12px !important;
          align-self: start !important;
        }

        .music-studio-inline-host .ms-sw-cover-default {
          font-size: 34px !important;
        }

        .music-studio-inline-host .ms-sw-ready-body {
          display: contents !important;
        }

        .music-studio-inline-host .ms-sw-ready-head {
          grid-area: head !important;
          display: flex !important;
          flex-direction: column !important;
          gap: 3px !important;
          align-self: center !important;
          padding-right: 8px !important;
        }

        .music-studio-inline-host .ms-sw-ready-title {
          font-size: 18px !important;
          line-height: 1.15 !important;
        }

        .music-studio-inline-host .ms-sw-ready-meta {
          font-size: 12px !important;
        }

        .music-studio-inline-host .ms-sw-ready-actions {
          /* b.506 — Actions docked at top:8 of the card, level with
     the X close button (top:10 right:10). Right offset of 52
     leaves 32px (X width) + 10px (X right offset) + 10px gap
     = 52px clearance for the X. Buttons read as the top-right
     toolbar of the card; b.504/b.505 attempts at margin-top
     pushing inside the grid weren't escaping the row enough.
     Absolute positioning takes the actions OUT of the grid
     and anchors them to the .ms-sw-result card directly. */
          position: absolute !important;
          top: 10px !important;
          right: 52px !important;
          left: auto !important;
          bottom: auto !important;
          z-index: 4 !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          margin: 0 !important;
          padding: 0 !important;
        }

        /* b.503 — Buttons must never wrap their labels. Previously
   "Download MP3" wrapped to 2 lines and "Split into stems"
   to 3 — the actions cell was being squeezed. nowrap +
   flex:0 0 auto forces each button to one-line intrinsic
   width so the cell expands to fit all three cleanly. */
        .music-studio-inline-host .ms-sw-action {
          white-space: nowrap !important;
          flex: 0 0 auto !important;
        }

        .music-studio-inline-host .ms-sw-player {
          grid-area: player !important;
          margin: 0 !important;
          width: 100% !important;
          display: flex !important;
          align-items: center !important;
          gap: 12px !important;
        }

        .music-studio-inline-host .ms-sw-play {
          width: 40px !important;
          height: 40px !important;
          flex: 0 0 auto !important;
        }

        .music-studio-inline-host .ms-sw-play svg {
          width: 16px !important;
          height: 16px !important;
        }

        /* b.503 — Pin the scrubber's measured height to just the bar
   (6px) by absolute-positioning the time row underneath it.
   The scrubber was a 25px-tall flex column (bar + gap + time)
   so align-items:center on the player row centered the play
   button against the WHOLE column, visually planting it below
   the bar. With the scrubber now 6px tall, play button and
   bar share the same horizontal center line. Time row hangs
   12px below; the card's extra padding-bottom catches it. */
        .music-studio-inline-host .ms-sw-scrubber {
          flex: 1 1 auto !important;
          min-width: 0 !important;
          position: relative !important;
          height: 6px !important;
        }

        .music-studio-inline-host .ms-sw-scrubber-bar {
          position: relative !important;
          top: 0 !important;
        }

        .music-studio-inline-host .ms-sw-scrubber-time {
          position: absolute !important;
          left: 0 !important;
          right: 0 !important;
          top: 12px !important;
          margin: 0 !important;
        }

        .music-studio-inline-host .ms-sw-result-ready {
          padding-bottom: 28px !important;
        }

        /* b.508 — Final compact layout: single-row grid + thumb-style
   play button + SVG X-close.
     • Eyebrow row removed from the template; head now starts
       with the title.
     • Play button is back to a circular design and lives ON
       the progress bar as the scrubber thumb. It's a child of
       the .ms-sw-scrubber-fill at left:100%, so it tracks the
       leading edge of the fill as it animates — the button
       slides forward with the song.
     • X close button uses inline SVG (perfectly centered by
       viewBox), sized at 40×40 with the SVG at 18×18 inside. */
        .music-studio-inline-host .ms-sw-result-ready {
          grid-template-areas: "cover  head" !important;
          grid-template-rows: auto !important;
          padding-bottom: 14px !important;
          /* b.509 — Pull head content to the top of the row so the
     title and meta line up with the TOP of the album
     artwork. User: "move title to upper side of the card,
     not higher than the top of the album artwork." */
          align-items: start !important;
        }

        .music-studio-inline-host .ms-sw-cover {
          position: relative !important;
        }

        .music-studio-inline-host .ms-sw-ready-head {
          align-self: start !important;
          /* b.510 — Push title + meta 5px down from the card's top
     edge so they breathe better against the cover top. */
          padding-top: 5px !important;
        }

        /* Scrubber-fill needs overflow:visible so the play thumb can
   poke above and below the 6px bar. */
        .music-studio-inline-host .ms-sw-scrubber-fill {
          overflow: visible !important;
        }

        /* Play button — circular thumb on the bar. Positioned at the
   fill's right edge so it tracks the playhead. Restored from
   b.507's "Play" pill back to the original circular design. */
        .music-studio-inline-host .ms-sw-play {
          position: absolute !important;
          left: 100% !important;
          top: 50% !important;
          transform: translate(-50%, -50%) !important;
          width: 30px !important;
          height: 30px !important;
          border-radius: 50% !important;
          padding: 0 !important;
          display: grid !important;
          place-items: center !important;
          background: rgba(255, 255, 255, .92) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .55) !important;
          color: rgba(8, 6, 15, 1) !important;
          cursor: pointer !important;
          z-index: 3 !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .6) inset,
            0 -1px 0 rgba(0, 0, 0, .18) inset,
            0 6px 14px -4px rgba(0, 0, 0, .55),
            0 0 18px rgba(255, 255, 255, .25) !important;
          transition: transform .12s ease, box-shadow .15s ease !important;
        }

        .music-studio-inline-host .ms-sw-play:hover {
          transform: translate(-50%, -50%) scale(1.08) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .7) inset,
            0 -1px 0 rgba(0, 0, 0, .18) inset,
            0 8px 18px -4px rgba(0, 0, 0, .6),
            0 0 26px rgba(255, 255, 255, .45) !important;
        }

        /* b.510 — Animation contained INSIDE the play button. User
   feedback on b.509: "the animation around the play button is
   quite horrible. Ensure whatever animation you're doing is
   within the play button and maybe light it up with white
   light energy."

   New approach: the button itself glows from within. No
   expanding rings, no outer halo. Just a pulsing inset glow
   that makes the button look like it's filled with white
   light, breathing in and out on a slow cycle. Plus a faint
   radial-gradient core that shifts in intensity, like a tiny
   sun. The play icon stays sharp on top.

   Pure white throughout. Animation only runs when .playing
   is set; paused state = static button with no pulse. */
        .music-studio-inline-host .ms-sw-play {
          /* Drop the b.509 overflow:visible — we don't need anything
     poking outside the button anymore. */
          overflow: hidden !important;
        }

        /* Inner glow layer drawn via ::before, sitting BEHIND the
   icon (z-index 0). Scales gently with the breathing cycle
   so the white light feels alive. */
        .music-studio-inline-host .ms-sw-play::before {
          content: '' !important;
          position: absolute;
          inset: 0;
          border-radius: 50%;
          background: radial-gradient(circle at 50% 50%,
              rgba(255, 255, 255, .95) 0%,
              rgba(255, 255, 255, .55) 40%,
              rgba(255, 255, 255, 0) 75%);
          opacity: 0;
          pointer-events: none;
          z-index: 0;
        }

        .music-studio-inline-host .ms-sw-play.playing::before {
          animation: ms-sw-play-energy 2.2s infinite ease-in-out;
        }

        @keyframes ms-sw-play-energy {

          0%,
          100% {
            opacity: 0.25;
            transform: scale(0.9);
          }

          50% {
            opacity: 0.85;
            transform: scale(1.0);
          }
        }

        /* Drop the b.509 ::after entirely. */
        .music-studio-inline-host .ms-sw-play::after {
          content: none !important;
        }

        /* Keep the icon on top of the glow layer. */
        .music-studio-inline-host .ms-sw-play svg {
          position: relative !important;
          z-index: 1 !important;
        }

        /* Subtle breathing on the button's inset shadow — keeps the
   energy fully contained within the button, no outer halo. */
        .music-studio-inline-host .ms-sw-play.playing {
          animation: ms-sw-play-breathe 2.2s infinite ease-in-out;
        }

        @keyframes ms-sw-play-breathe {

          0%,
          100% {
            box-shadow:
              0 1px 0 rgba(255, 255, 255, .55) inset,
              0 -1px 0 rgba(0, 0, 0, .18) inset,
              0 0 0 rgba(255, 255, 255, 0) inset,
              0 6px 14px -4px rgba(0, 0, 0, .55);
          }

          50% {
            box-shadow:
              0 1px 0 rgba(255, 255, 255, .85) inset,
              0 -1px 0 rgba(0, 0, 0, .18) inset,
              0 0 14px rgba(255, 255, 255, .70) inset,
              0 6px 14px -4px rgba(0, 0, 0, .55);
          }
        }

        .music-studio-inline-host .ms-sw-play svg {
          display: block !important;
          width: 14px !important;
          height: 14px !important;
        }

        /* Icon swap — SVG icons not text (reverted from b.507). */
        .music-studio-inline-host .ms-sw-play .ms-icon-play {
          display: block !important;
        }

        .music-studio-inline-host .ms-sw-play .ms-icon-pause {
          display: none !important;
        }

        .music-studio-inline-host .ms-sw-play.playing .ms-icon-play {
          display: none !important;
        }

        .music-studio-inline-host .ms-sw-play.playing .ms-icon-pause {
          display: block !important;
        }

        .music-studio-inline-host .ms-sw-ready-head .ms-sw-scrubber {
          /* b.510 — Lower the scrubber + play thumb by 10px more
     than its previous 6px gap from meta (total 16px). */
          margin-top: 16px !important;
        }

        /* b.508 — X close: bigger (40×40) + glyph perfectly centered
   via inline SVG (the × Unicode character was off-center in
   most fonts). Previous attempt used CSS pseudo-elements but
   they were getting overridden by other rules; SVG inside the
   button is bulletproof. */
        .music-studio-inline-host .ms-sw-result-close {
          width: 40px !important;
          height: 40px !important;
          top: 10px !important;
          right: 10px !important;
          font-size: 0 !important;
          padding: 0 !important;
          position: absolute !important;
          display: grid !important;
          place-items: center !important;
        }

        .music-studio-inline-host .ms-sw-result-close::before,
        .music-studio-inline-host .ms-sw-result-close::after {
          content: none !important;
          /* drop the b.507 CSS-drawn cross */
        }

        .music-studio-inline-host .ms-sw-result-close svg {
          display: block !important;
          width: 18px !important;
          height: 18px !important;
          color: inherit !important;
        }

        /* Length-cost number — white on selected, not theme */
        .music-studio-inline-host .ms-length-opt.on .ms-length-cost {
          color: #fff !important;
        }

        .music-studio-inline-host .ms-length-cost {
          color: rgba(255, 255, 255, .55) !important;
        }

        /* Songs / Productions tab counters when on — white text */
        .music-studio-inline-host .ms-music-tab.on {
          color: #fff !important;
        }

        /* Generating-card aura — replace theme tint with full-spectrum motion */
        .music-studio-inline-host .ms-sw-result-aura span {
          background: rgba(255, 255, 255, .20) !important;
          background-image: none !important;
        }

        .music-studio-inline-host .ms-sw-result-aura span:nth-child(2) {
          background: rgba(180, 160, 240, .30) !important;
        }

        .music-studio-inline-host .ms-sw-result-aura span:nth-child(3) {
          background: rgba(255, 200, 140, .28) !important;
        }

        .music-studio-inline-host .ms-song-thumb {
          width: 48px;
          height: 48px;
          flex: 0 0 auto;
          border-radius: 10px;
          background: rgba(255, 255, 255, .08);
          background-size: cover;
          background-position: center;
          border: 1px solid rgba(255, 255, 255, .14);
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: var(--font-display);
          font-weight: 800;
          font-size: 18px;
          color: rgba(255, 255, 255, .55);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
        }

        /* Modal backdrop — transparent so parent's bg-stage stays visible
   and animated behind. Only the shell uses backdrop-filter. */
        .music-studio-inline-host .ms-songs-modal,
        .music-studio-inline-host .ms-art-modal {
          background: rgba(0, 0, 0, .32) !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        /* Stem modal — pure liquid glass. No black-tinted backdrop, no blur
           scrim: the shell floats directly over the animated theme background.
           Accent-rgb references removed to kill the green tint that leaks in
           when certain themes are active.                                     */
        .music-studio-inline-host .ms-stem-modal {
          background: transparent !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        /* Shell: true liquid glass — transparent bg + strong blur so the
           animated theme background shows through and the panel reads
           as frosted glass, not a solid dark box.                        */
        .music-studio-inline-host .ms-stem-shell {
          background: rgba(255,255,255,.08) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.10) !important;
                  backdrop-filter: blur(40px) saturate(1.8) brightness(1.10) !important;
          border: 1px solid rgba(255,255,255,.22) !important;
          box-shadow:
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 8px 40px rgba(0,0,0,.28),
            0 48px 120px rgba(0,0,0,.50) !important;
        }

        /* Icon box: pure glass, no theme-accent tint (was showing green) */
        .music-studio-inline-host .ms-stem-confirm-ico {
          background: rgba(255,255,255,.09) !important;
          border-color: rgba(255,255,255,.20) !important;
          color: rgba(255,255,255,.88) !important;
        }

        /* Header divider: glass stroke */
        .music-studio-inline-host .ms-stem-head {
          border-bottom-color: rgba(255,255,255,.14) !important;
          background: transparent !important;
        }

        /* Confirm card: glass inset panel */
        .music-studio-inline-host .ms-stem-confirm-card {
          background: rgba(255,255,255,.07) !important;
          border-color: rgba(255,255,255,.14) !important;
        }

        /* Variant rows: neutral glass; selected = brighter, no green */
        .music-studio-inline-host .ms-stem-variant {
          background: rgba(255,255,255,.05) !important;
          border-color: rgba(255,255,255,.12) !important;
        }
        .music-studio-inline-host .ms-stem-variant:hover {
          background: rgba(255,255,255,.10) !important;
          border-color: rgba(255,255,255,.22) !important;
        }
        .music-studio-inline-host .ms-stem-variant.on {
          background: rgba(255,255,255,.14) !important;
          border-color: rgba(255,255,255,.34) !important;
        }

        /* Radio: white accent — kills OS-default blue/green dot */
        .music-studio-inline-host .ms-stem-variant input[type="radio"] {
          accent-color: white !important;
        }

        /* Footer: glass strip */
        .music-studio-inline-host .ms-stem-foot {
          background: rgba(255,255,255,.04) !important;
          border-top-color: rgba(255,255,255,.12) !important;
        }

        /* Splitting state bg: transparent so shell glass shows */
        .music-studio-inline-host .ms-stem-splitting {
          background: transparent !important;
        }

        /* Close button: glass */
        .music-studio-inline-host .ms-stem-close {
          background: rgba(255,255,255,.08) !important;
          border-color: rgba(255,255,255,.18) !important;
        }
        .music-studio-inline-host .ms-stem-close:hover {
          background: rgba(255,255,255,.16) !important;
          border-color: rgba(255,255,255,.30) !important;
        }

        /* "Split now" CTA: white glass — overrides green --theme-accent-rgb border */
        .music-studio-inline-host .ms-stem-go {
          background:
            linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 100%) !important;
          border-color: rgba(255,255,255,.36) !important;
          box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset !important;
        }
        .music-studio-inline-host .ms-stem-go:hover {
          background:
            linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.10) 100%) !important;
          border-color: rgba(255,255,255,.50) !important;
          box-shadow:
            0 0 0 1px rgba(255,255,255,.10) inset,
            0 0 20px rgba(255,255,255,.12) !important;
        }

        /* Cancel / back buttons: subtle glass */
        .music-studio-inline-host .ms-stem-cancel,
        .music-studio-inline-host .ms-stem-back {
          background: rgba(255,255,255,.06) !important;
          border-color: rgba(255,255,255,.14) !important;
        }
        .music-studio-inline-host .ms-stem-cancel:hover,
        .music-studio-inline-host .ms-stem-back:hover {
          background: rgba(255,255,255,.12) !important;
          border-color: rgba(255,255,255,.24) !important;
        }

        /* Picker action buttons (Download / Mix): glass, no accent */
        .music-studio-inline-host .ms-stem-action {
          background: rgba(255,255,255,.08) !important;
          border-color: rgba(255,255,255,.20) !important;
        }
        .music-studio-inline-host .ms-stem-action:hover {
          background: rgba(255,255,255,.14) !important;
          border-color: rgba(255,255,255,.32) !important;
          box-shadow: none !important;
        }

        /* Result card — 4 buttons in one line, X close on the right edge */
        .music-studio-inline-host .ms-sw-result-close {
          top: 14px !important;
          right: 14px !important;
        }

        .music-studio-inline-host .ms-sw-ready-actions {
          position: absolute !important;
          top: 12px !important;
          right: 60px !important;
          /* leave 60px room for X */
          display: flex !important;
          gap: 6px !important;
        }

        .music-studio-inline-host .ms-sw-ready-body {
          padding-right: 240px !important;
        }

        .music-studio-inline-host .ms-sw-player {
          margin-top: 14px !important;
          display: flex !important;
          align-items: center !important;
          gap: 14px !important;
        }

        /* Subtle liquid-glass play button — mostly white, faint colored
   highlights breathing through. Calm at rest, gently active when
   playing. No loud conic gradient. */
        .music-studio-inline-host .ms-sw-play {
          position: relative;
          background: rgba(255, 255, 255, .08) !important;
          border: 1px solid rgba(255, 255, 255, .32) !important;
          background-image: none !important;
          overflow: hidden;
          -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
        }

        .music-studio-inline-host .ms-sw-play::before {
          content: "";
          position: absolute;
          inset: -20%;
          background:
            radial-gradient(40% 40% at 30% 30%, rgba(255, 200, 160, .30), transparent 70%),
            radial-gradient(40% 40% at 70% 70%, rgba(180, 160, 240, .30), transparent 70%);
          filter: blur(10px);
          animation: msi-ms-play-breathe 5s ease-in-out infinite;
          z-index: 0;
          opacity: .6;
        }

        .music-studio-inline-host .ms-sw-play svg {
          position: relative;
          z-index: 1;
          color: #fff;
        }

        @keyframes msi-ms-play-breathe {

          0%,
          100% {
            transform: translate(0, 0) rotate(0);
            opacity: .55;
          }

          50% {
            transform: translate(2%, -2%) rotate(40deg);
            opacity: .85;
          }
        }

        .music-studio-inline-host .ms-sw-play.playing::before {
          animation-duration: 2.4s;
          opacity: .95;
        }

        .music-studio-inline-host .ms-sw-play.playing {
          box-shadow: 0 0 24px rgba(255, 255, 255, .35);
        }

        /* Reset the My-music shell to a clean liquid-glass surface — no
   solid backdrop dim, the bg-stage video shows through everywhere. */
        .music-studio-inline-host .ms-songs-modal {
          background: transparent !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        .music-studio-inline-host .ms-songs-shell {
          background: rgba(255, 255, 255, .05) !important;
          border: 1px solid rgba(255, 255, 255, .16) !important;
          -webkit-backdrop-filter: blur(28px) saturate(1.3) !important;
          backdrop-filter: blur(28px) saturate(1.3) !important;
        }

        .music-studio-inline-host .ms-art-modal {
          background: transparent !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        /* Songwriter/Musician mode toggle — pure glass, white-light selection */
        .music-studio-inline-host .ms-mode-toggle,
        .music-studio-inline-host .ms-mode-segment {
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .14) !important;
        }

        .music-studio-inline-host .ms-mode-opt,
        .music-studio-inline-host .ms-mode-btn {
          color: rgba(255, 255, 255, .65) !important;
          background: transparent !important;
        }

        .music-studio-inline-host .ms-mode-opt.on,
        .music-studio-inline-host .ms-mode-btn.on,
        .music-studio-inline-host .ms-mode-opt.active,
        .music-studio-inline-host .ms-mode-btn.active,
        .music-studio-inline-host .ms-mode-opt[aria-selected="true"],
        .music-studio-inline-host .ms-mode-btn[aria-selected="true"] {
          background: rgba(255, 255, 255, .10) !important;
          border: 1px solid rgba(255, 255, 255, .32) !important;
          color: #fff !important;
          background-image: none !important;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 0 18px rgba(255, 255, 255, .20) !important;
        }

        /* Generating progress bar — pure glass, no theme color */
        .music-studio-inline-host .ms-sw-gen-progress {
          background: rgba(255, 255, 255, .08) !important;
        }

        .music-studio-inline-host .ms-sw-gen-progress::before {
          background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 255, 255, .85) 50%,
              transparent 100%) !important;
        }

        /* My-music shell — better readability with stronger backdrop */
        .music-studio-inline-host .ms-songs-shell {
          background: rgba(15, 15, 25, .55) !important;
          border: 1px solid rgba(255, 255, 255, .16) !important;
          -webkit-backdrop-filter: blur(36px) saturate(1.4) !important;
          backdrop-filter: blur(36px) saturate(1.4) !important;
          box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 100px -20px rgba(0, 0, 0, .7) !important;
        }

        .music-studio-inline-host .ms-song-card {
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .12) !important;
        }

        /* Remove the green tick mark from selected voice option — the
   selected state is already shown by the white-glass highlight. */
        .music-studio-inline-host .ms-voice-opt.on::after {
          display: none !important;
        }

        .music-studio-inline-host .ms-voice-opt::after {
          display: none !important;
        }

        /* Scrubber stretches full width — play button + bar in one row */
        .music-studio-inline-host .ms-sw-scrubber {
          flex: 1 1 auto;
          min-width: 0;
        }

        .music-studio-inline-host .ms-sw-result-ready {
          align-items: flex-start !important;
        }

        .music-studio-inline-host .ms-sw-ready-body {
          width: 100%;
          padding-right: 0 !important;
        }

        .music-studio-inline-host .ms-sw-ready-actions {
          position: static !important;
          display: flex !important;
          flex-direction: row !important;
          gap: 6px !important;
          margin-top: 14px !important;
        }

        .music-studio-inline-host .ms-sw-result-close {
          top: 14px !important;
          right: 14px !important;
          width: 34px !important;
          height: 34px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 20px !important;
          line-height: 1 !important;
          padding: 0 !important;
          text-align: center !important;
        }

        .music-studio-inline-host .ms-sw-result-close::before,
        .music-studio-inline-host .ms-sw-result-close::after {
          content: none !important;
        }

        /* Modal backdrops — fully transparent. Removes ALL forms of dark dim
   and backdrop-filter blur so the parent's bg-stage is uninterrupted
   from top of page to bottom. The shells themselves carry the glass. */
        .music-studio-inline-host .ms-songs-modal,
        .music-studio-inline-host .ms-art-modal,
        .music-studio-inline-host .ms-confirm-back,
        .music-studio-inline-host .ms-modal,
        .music-studio-inline-host .ms-modal-back {
          background: transparent !important;
          background-image: none !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        /* My-music shell — matches the language-picker liquid-glass recipe
   exactly: var(--lg-fill) + var(--lg-stroke-hi) + var(--lg-blur)
   + var(--lg-shadow). Same milky-frost feel, same inner highlight,
   same drop shadow. No dark dim. */
        .music-studio-inline-host .ms-songs-shell {
          background: var(--lg-fill) !important;
          border: 1px solid var(--lg-stroke-hi) !important;
          border-radius: var(--r-xl) !important;
          -webkit-backdrop-filter: var(--lg-blur) !important;
          backdrop-filter: var(--lg-blur) !important;
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4) !important;
        }

        .music-studio-inline-host .ms-art-shell {
          background: var(--lg-fill) !important;
          border: 1px solid var(--lg-stroke-hi) !important;
          -webkit-backdrop-filter: var(--lg-blur) !important;
          backdrop-filter: var(--lg-blur) !important;
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4) !important;
        }

        /* Custom confirm modal shell — same recipe, same character */
        .music-studio-inline-host .ms-confirm-shell {
          background: var(--lg-fill) !important;
          border: 1px solid var(--lg-stroke-hi) !important;
          -webkit-backdrop-filter: var(--lg-blur) !important;
          backdrop-filter: var(--lg-blur) !important;
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4) !important;
        }

        /* Custom liquid-glass mini-player inside My Music song cards */
        .music-studio-inline-host .ms-song-player {
          display: flex;
          align-items: center;
          gap: 10px;
          flex: 1 1 auto;
          min-width: 0;
          padding: 6px 12px;
          background: rgba(255, 255, 255, .05);
          border: 1px solid rgba(255, 255, 255, .16);
          border-radius: 999px;
          -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
        }

        .music-studio-inline-host .ms-song-play {
          width: 30px;
          height: 30px;
          flex: 0 0 auto;
          display: grid;
          place-items: center;
          border-radius: 50%;
          background: rgba(255, 255, 255, .10);
          border: 1px solid rgba(255, 255, 255, .30);
          color: #fff;
          cursor: pointer;
          transition: all .15s ease;
        }

        .music-studio-inline-host .ms-song-play:hover {
          background: rgba(255, 255, 255, .18);
          box-shadow: 0 0 14px rgba(255, 255, 255, .30);
        }

        .music-studio-inline-host .ms-song-play svg {
          width: 12px;
          height: 12px;
        }

        .music-studio-inline-host .ms-song-play .ms-song-pause-ico {
          display: none;
        }

        .music-studio-inline-host .ms-song-player.playing .ms-song-play-ico {
          display: none;
        }

        .music-studio-inline-host .ms-song-player.playing .ms-song-pause-ico {
          display: block;
        }

        .music-studio-inline-host .ms-song-player.playing .ms-song-play {
          box-shadow: 0 0 16px rgba(255, 255, 255, .40);
          animation: msi-ms-songpb-pulse 1.6s ease-in-out infinite;
        }

        @keyframes msi-ms-songpb-pulse {

          0%,
          100% {
            box-shadow: 0 0 16px rgba(255, 255, 255, .30);
          }

          50% {
            box-shadow: 0 0 26px rgba(255, 255, 255, .55);
          }
        }

        .music-studio-inline-host .ms-song-bar {
          flex: 1 1 auto;
          min-width: 60px;
          height: 4px;
          border-radius: 2px;
          background: rgba(255, 255, 255, .10);
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }

        .music-studio-inline-host .ms-song-fill {
          position: absolute;
          inset: 0;
          width: 0%;
          background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .45) 100%);
          border-radius: 2px;
          transition: width .12s linear;
        }

        .music-studio-inline-host .ms-song-time {
          font-family: var(--font-ui);
          font-size: 10.5px;
          font-weight: 600;
          color: rgba(255, 255, 255, .55);
          letter-spacing: .04em;
          flex: 0 0 auto;
          min-width: 60px;
          text-align: right;
        }

        /* Result card top-right: Download, Share, X all in a single row */
        .music-studio-inline-host .ms-sw-result-close {
          top: 14px !important;
          right: 14px !important;
          width: 34px !important;
          height: 34px !important;
          z-index: 6 !important;
        }

        .music-studio-inline-host .ms-sw-ready-actions {
          position: absolute !important;
          top: 14px !important;
          right: 56px !important;
          /* leave 56px gutter for the X */
          display: flex !important;
          gap: 6px !important;
          margin-top: 0 !important;
          z-index: 5 !important;
        }

        .music-studio-inline-host .ms-sw-action {
          height: 34px !important;
          padding: 0 12px !important;
        }

        /* Title body shouldn't reserve right space anymore — actions overlay top */
        .music-studio-inline-host .ms-sw-ready-body {
          padding-right: 0 !important;
        }

        /* Cover gets a subtle "click to customize" hint that's always visible */
        .music-studio-inline-host .ms-sw-cover {
          cursor: pointer;
        }

        .music-studio-inline-host .ms-sw-cover-edit {
          /* The hover overlay on the cover already exists; keep it. */
          background: rgba(0, 0, 0, .50) !important;
        }

        /* MY-MUSIC SHELL — proper liquid glass that reads even when there
   is nothing in the iframe document behind it to blur. The milky
   frosted character comes from layered gradients on the shell
   itself, not from relying on what's behind. Also applied to the
   art modal + custom confirm shell so all three feel consistent. */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell {
          background:
            radial-gradient(120% 90% at 0% 0%,
              rgba(255, 255, 255, .18) 0%,
              rgba(255, 255, 255, .04) 40%,
              rgba(255, 255, 255, .02) 100%),
            rgba(255, 255, 255, .10) !important;
          border: 1px solid rgba(255, 255, 255, .32) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.6) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 30px 80px -20px rgba(0, 0, 0, .55),
            0 0 60px rgba(255, 255, 255, .08) !important;
        }

        /* Slight inner sheen as a separate pseudo to add depth without
   conflicting with the existing scrollbar overflow:hidden. */
        .music-studio-inline-host .ms-songs-shell::before,
        .music-studio-inline-host .ms-art-shell::before,
        .music-studio-inline-host .ms-confirm-shell::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background: linear-gradient(180deg,
              rgba(255, 255, 255, .06) 0%,
              rgba(255, 255, 255, 0) 28%,
              rgba(255, 255, 255, 0) 72%,
              rgba(255, 255, 255, .04) 100%);
          pointer-events: none;
          z-index: 0;
        }

        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell {
          position: relative;
          isolation: isolate;
        }

        .music-studio-inline-host .ms-songs-shell>*,
        .music-studio-inline-host .ms-art-shell>*,
        .music-studio-inline-host .ms-confirm-shell>* {
          position: relative;
          z-index: 1;
        }

        /* My-music modal — kill the two horizontal divider lines above and
   below the Songs/Productions tab strip. */
        .music-studio-inline-host .ms-music-tabs {
          border-bottom: none !important;
        }

        /* b.498 — Hide the active-tab underline inside My music. User
   asked to "get rid of the bottom bar on the selected side."
   The .ms-music-tab-underline is a JS-positioned bar that
   slides between Songs / Productions to indicate the active
   tab. Display:none on the underline element kills it
   visually; the tab's own `.on` styling (white text, brighter
   count chip) still signals which tab is active. */
        .music-studio-inline-host .ms-music-tab-underline {
          display: none !important;
        }

        .music-studio-inline-host .ms-songs-head {
          border-bottom: none !important;
        }

        /* Song card layout — player gets its own flex slot, action icons
   cluster on the far right. The player is finally allowed to grow. */
        .music-studio-inline-host .ms-song-card {
          display: flex !important;
          align-items: center !important;
          gap: 14px !important;
        }

        .music-studio-inline-host .ms-song-thumb {
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-song-meta {
          flex: 0 0 auto;
          min-width: 170px;
          max-width: 240px;
        }

        .music-studio-inline-host .ms-song-player {
          flex: 1 1 auto !important;
          min-width: 240px;
          display: flex !important;
          align-items: center !important;
          gap: 10px;
          padding: 6px 14px;
          background: rgba(255, 255, 255, .05) !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          border-radius: 999px !important;
          -webkit-backdrop-filter: blur(14px) !important;
          backdrop-filter: blur(14px) !important;
        }

        .music-studio-inline-host .ms-song-bar {
          flex: 1 1 auto !important;
          min-width: 80px;
        }

        .music-studio-inline-host .ms-song-actions {
          flex: 0 0 auto !important;
          display: flex !important;
          gap: 6px !important;
        }

        /* MY-MUSIC SHELL — intrinsic frosted glass that doesn't depend on
   backdrop-filter having content behind it to blur. Three stacked
   layers create the milky frost: a dark glass base + a primary
   white tint + a corner highlight. Looks consistently frosted
   over any bg. Same recipe applied to art modal + confirm modal
   and to each song card. */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell {
          background:
            radial-gradient(140% 100% at 0% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .02) 100%),
            linear-gradient(160deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .04) 100%),
            rgba(20, 22, 32, .62) !important;
          border: 1px solid rgba(255, 255, 255, .32) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.6) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 30px 80px -20px rgba(0, 0, 0, .55),
            0 0 60px rgba(255, 255, 255, .08) !important;
        }

        /* Song cards inside the shell — same intrinsic-frost recipe, lighter */
        .music-studio-inline-host .ms-song-card {
          background:
            radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .01) 100%),
            linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 100%),
            rgba(20, 22, 32, .30) !important;
          border: 1px solid rgba(255, 255, 255, .20) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .30) inset,
            0 0 0 1px rgba(255, 255, 255, .06) inset,
            0 14px 30px -10px rgba(0, 0, 0, .40) !important;
        }

        /* Custom mini-player pill inside each card — same recipe */
        .music-studio-inline-host .ms-song-player {
          background:
            radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .01) 100%),
            rgba(20, 22, 32, .25) !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
        }

        /* MY-MUSIC SHELL — IDENTICAL recipe to .ms-lang-pop (the language
   picker). Light white tint, strong saturate+brightness backdrop,
   visible white border, layered inner highlights. The dark tint
   from earlier overrides is GONE. */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell {
          background: var(--lg-fill) !important;
          background-image: none !important;
          border: 1px solid var(--lg-stroke-hi) !important;
          -webkit-backdrop-filter: var(--lg-blur) !important;
          backdrop-filter: var(--lg-blur) !important;
          box-shadow: var(--lg-shadow), 0 24px 60px rgba(0, 0, 0, .4) !important;
        }

        /* Pseudo overlay = subtle top-left luminous corner like image 2 */
        .music-studio-inline-host .ms-songs-shell::before,
        .music-studio-inline-host .ms-art-shell::before,
        .music-studio-inline-host .ms-confirm-shell::before {
          content: "" !important;
          position: absolute !important;
          inset: 0 !important;
          border-radius: inherit !important;
          pointer-events: none !important;
          z-index: 0 !important;
          background: radial-gradient(80% 80% at 0% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%) !important;
        }

        /* Song cards inside — same recipe, lighter */
        .music-studio-inline-host .ms-song-card {
          background: var(--lg-fill) !important;
          background-image: none !important;
          border: 1px solid var(--lg-stroke) !important;
          box-shadow: var(--lg-shadow) !important;
        }

        /* Player pill inside each card */
        .music-studio-inline-host .ms-song-player {
          background: var(--lg-fill) !important;
          background-image: none !important;
          border: 1px solid var(--lg-stroke) !important;
        }

        /* Per-theme tint — dark themes (Hanley) need a brighter --lg-fill
   so the shell reads as milky frost. Garden keeps the original
   .06 because the bright garden video already provides plenty of
   color for backdrop-filter to saturate. */
        .music-studio-inline-host[data-theme="hanley-sky"] {
          --lg-fill: rgba(255, 255, 255, .14);
          --lg-fill-hover: rgba(255, 255, 255, .18);
          --lg-stroke: rgba(255, 255, 255, .30);
          --lg-stroke-hi: rgba(255, 255, 255, .55);
        }

        /* b.834 — same renamed-theme alias as the orb block above. */
        .music-studio-inline-host[data-theme="garden-of-life"],
        .music-studio-inline-host[data-theme="my-garden"],
        .music-studio-inline-host[data-theme="her-garden"] {
          --lg-fill: rgba(255, 255, 255, .06);
          --lg-fill-hover: rgba(255, 255, 255, .10);
          --lg-stroke: rgba(255, 255, 255, .22);
          --lg-stroke-hi: rgba(255, 255, 255, .45);
        }

        /* ============================================================
   CANONICAL LIQUID GLASS — intrinsic frost baked into background.
   Renders identically in Chrome and Safari because it doesn't
   rely on backdrop-filter reaching across the iframe boundary
   to blur the parent's bg-stage. The three corner gradients +
   white tint base create the milky-frost look in any context.
   Apply this recipe to every shell, modal, and popover.
   ============================================================ */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell,
        .music-studio-inline-host .ms-lang-pop,
        .music-studio-inline-host .ms-style-pop,
        .music-studio-inline-host .ms-voice-pop,
        .music-studio-inline-host .ms-tempo-pop,
        .music-studio-inline-host .ms-length-pop,
        .music-studio-inline-host .ms-master-len-pop,
        .music-studio-inline-host .ms-key-pop,
        .music-studio-inline-host .ms-time-pop,
        .music-studio-inline-host .ms-chord-pop,
        .music-studio-inline-host .ms-lyrics-pop,
        .music-studio-inline-host .ms-modal-shell,
        .music-studio-inline-host .ms-popover {
          background:
            radial-gradient(60% 60% at 0% 0%, rgba(255, 210, 170, .22) 0%, transparent 70%),
            radial-gradient(60% 60% at 100% 0%, rgba(180, 200, 255, .20) 0%, transparent 70%),
            radial-gradient(80% 80% at 50% 100%, rgba(220, 185, 240, .16) 0%, transparent 70%),
            rgba(255, 255, 255, .12) !important;
          border: 1px solid rgba(255, 255, 255, .45) !important;
          -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) !important;
          backdrop-filter: blur(24px) saturate(1.4) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .55) inset,
            0 -1px 0 rgba(255, 255, 255, .20) inset,
            0 0 0 1px rgba(255, 255, 255, .12) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55),
            0 0 50px rgba(255, 255, 255, .08) !important;
        }

        /* CRITICAL — force shells visible. Earlier override layers killed
   the ms-modal-rise entry animation, leaving the shell stuck at
   opacity:0 which made it look transparent/dim instead of showing
   the canonical glass background. Skip the animation entirely. */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell,
        .music-studio-inline-host .ms-lang-pop,
        .music-studio-inline-host .ms-style-pop,
        .music-studio-inline-host .ms-voice-pop,
        .music-studio-inline-host .ms-tempo-pop,
        .music-studio-inline-host .ms-length-pop,
        .music-studio-inline-host .ms-master-len-pop,
        .music-studio-inline-host .ms-key-pop,
        .music-studio-inline-host .ms-time-pop,
        .music-studio-inline-host .ms-chord-pop,
        .music-studio-inline-host .ms-lyrics-pop,
        .music-studio-inline-host .ms-modal-shell,
        .music-studio-inline-host .ms-popover {
          opacity: 1 !important;
          animation: none !important;
          transform: none !important;
        }

        /* CANONICAL LIQUID GLASS — STRONGER. Higher opacity values so the
   frost reads on any bg, including dark starry sky. This replaces
   the subtle b.121 recipe. */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell,
        .music-studio-inline-host .ms-lang-pop,
        .music-studio-inline-host .ms-style-pop,
        .music-studio-inline-host .ms-voice-pop,
        .music-studio-inline-host .ms-tempo-pop,
        .music-studio-inline-host .ms-length-pop,
        .music-studio-inline-host .ms-master-len-pop,
        .music-studio-inline-host .ms-key-pop,
        .music-studio-inline-host .ms-time-pop,
        .music-studio-inline-host .ms-chord-pop,
        .music-studio-inline-host .ms-lyrics-pop,
        .music-studio-inline-host .ms-modal-shell,
        .music-studio-inline-host .ms-popover {
          background:
            radial-gradient(60% 60% at 0% 0%, rgba(255, 210, 170, .40) 0%, transparent 70%),
            radial-gradient(60% 60% at 100% 0%, rgba(180, 200, 255, .36) 0%, transparent 70%),
            radial-gradient(80% 80% at 50% 100%, rgba(220, 185, 240, .32) 0%, transparent 70%),
            rgba(255, 255, 255, .22) !important;
          border: 1px solid rgba(255, 255, 255, .55) !important;
          -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.05) !important;
          backdrop-filter: blur(28px) saturate(1.5) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .65) inset,
            0 -1px 0 rgba(255, 255, 255, .22) inset,
            0 0 0 1px rgba(255, 255, 255, .16) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55),
            0 0 60px rgba(255, 255, 255, .12) !important;
          opacity: 1 !important;
          animation: none !important;
          transform: none !important;
        }

        /* b.487 — MUSIC STUDIO · Dim the master-strip chip dropdowns.
   User feedback: "they look out of place because they're very
   bright… ensure our standard liquid glass design is applied
   so they don't pop up this bright, or maybe just reduce the
   brightness on them if there is a brightness parameter — not
   by too much, just a little, just enough so they match
   everything else on the Music studio side."

   The shared "CANONICAL LIQUID GLASS — STRONGER" rule above
   stacks three radial gradients (.40 / .36 / .32) + a
   rgba(255,255,255,.22) base + brightness(1.05) — that's the
   right recipe for full modals like My music or Add instrument,
   but reads too hot for inline-anchored chip dropdowns where
   the studio is still visible behind. This block targets ONLY
   the five master-strip chip popovers by ID and re-bases them
   to the same canonical recipe used on .ms-track (b.484):
     • drop the three radial gradients (background-image:none)
     • white base .22 → .06 (still readable, no more pop)
     • border .55 → .18 (hairline, not heavy)
     • blur 28 → 40, saturate 1.5 → 1.7 (canonical numbers)
     • REMOVE brightness(1.05) — was lifting bg-stage pixels
       under the popover ~5%, making the whole panel feel lit
       from behind. Default brightness reads natural.
     • shadow stack matches .ms-track exactly so the dropdown
       sits at the same visual depth as cards on the stage.
   Real modals (My music, Add instrument, etc.) untouched —
   they keep the stronger recipe so they still read as primary
   surfaces. */
        #msTempoPop,
        #msTimePop,
        #msKeyPop,
        #msChordPop,
        #msMasterLengthPop {
          /* b.489 — Dropdowns were sampling theme orbs through their
     surface and saturating those colors 70% via saturate(1.7).
     With the Chord popover centered over the bg-stage's warm
     orb, the entire panel was glowing orange/red. Same recipe
     works on .ms-track cards (narrower strips, less orb
     exposure) but reads too hot on a large centered popover.
     Fix: drop saturate() entirely — keep blur, drop the color
     amplification. Glass effect intact, theme colors come
     through at their natural intensity instead of pumped +70%. */
          background: rgba(255, 255, 255, .03) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          /* b.491 — Another +15% on top of b.490 (1.1 × 1.15 = 1.265).
     A little more color depth from the bg-stage without going
     back to the b.488 1.7 state that was reading orange-hot. */
          -webkit-backdrop-filter: blur(40px) saturate(1.265) !important;
          backdrop-filter: blur(40px) saturate(1.265) !important;
          border-radius: 20px !important;
          box-shadow:
            0 28px 64px -18px rgba(0, 0, 0, .55),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(0, 0, 0, .10) !important;
          /* b.492 — overflow stays at the original :hidden so the
     chord-pop body keeps clipping properly. The tail is now a
     SIBLING fixed-positioned element (not a ::before on the
     popover), so it doesn't need overflow:visible to escape.
     This fixes the "Experimental…" note overlapping the
     BORROWED palette pills in b.491 — the popover now clips
     and scrolls correctly. */
        }

        /* b.520 — IMMERSIVE PLAY MODE FULLY REMOVED. All the
   .ms-viz-stage / .ms-viz-orb-* / @keyframes ms-viz-drift-*
   rules and the body[data-play-mode="true"] cascade (chrome
   fade, card centering, restyled buttons/scrubber, state-div
   visibility) used to live in this spot. User wanted the
   whole thing gone — play just plays the song in the card
   as before. The postVizStart / postVizStop JS hooks are
   no-op stubs at this point. Nothing else references this
   block, so the deletion is safe. */

        /* b.515 — Loading-card dimensions match the ready card.
   User: "the loading card and the main card are looking very
   different." Generating state had padding 26 28 + gap 24
   which made it ~150px tall; ready is 14 padding + 96 cover
   ~124px. Shrink generating to match the ready card silhouette. */
        .music-studio-inline-host .ms-sw-result-generating {
          padding: 14px !important;
          gap: 14px !important;
          align-items: center !important;
        }

        .music-studio-inline-host .ms-sw-vinyl {
          width: 96px !important;
          height: 96px !important;
        }

        /* ============================================================
   b.521 — MUSIC STUDIO · MOBILE LAYOUT PASS
   Single consolidated block at max-width:720px. Targets phone
   viewports only — iPad portrait (768px+) and any larger
   surface keep the desktop layout as-is, per user spec:
   "I want NOT EVEN ONE THING changed in the desktop or iPad
   version. As soon as it breaks down to mobile, the UI should
   dynamically adapt."

   Areas reflowed for mobile:
     • Top-right pills (Library / Coins / Account / Music)
       — hidden, save the address bar real estate
     • Header brand + BETA pill — kept smaller
     • Mode toggle — flush left, less padding
     • Songwriter meta row — horizontal scroll instead of
       wrap (chips overflow gracefully off the right edge)
     • Songwriter result card — smaller cover (96→72),
       action buttons collapse to icon-only, X close
       smaller, play thumb smaller
     • Musician master strip — chips wrap into compact rows,
       chip dividers hidden, chord-sequence chip drops to
       its own row (gets the full width)
     • Musician track cards — wave column removed (no room),
       freeze + reroll buttons hidden (advanced controls),
       grid collapses to icon | head with player below
     • Musician action bar — stacks vertically full-width
     • All modals and popovers — full-width with 8px gutter
     • Chip-dropdown clip-path peak disabled (doesn't make
       sense on a full-width popover)
     • Chord chart bars — 3 cols instead of 4 (fits)
   ============================================================ */
        @media (max-width: 720px) {

          /* ---- Top-right pills + experimental ribbon ---- */
          .library-menu-pill,
          .coins-menu-pill,
          .account-menu-pill {
            display: none !important;
          }

          .music-studio-inline-host .ms-experimental-ribbon {
            font-size: 9px !important;
            padding: 6px 12px !important;
          }

          /* ---- Mode toggle (Songwriter ↔ Musician) ---- */
          .music-studio-inline-host .ms-mode-toggle {
            margin: 8px 12px !important;
            padding: 3px !important;
          }

          .music-studio-inline-host .ms-mode-toggle .ms-mode-btn {
            padding: 6px 12px !important;
            font-size: 11.5px !important;
          }

          /* ---- Header brand (Shades of Joy AI Studio + BETA) ---- */
          .music-studio-inline-host .brand-wordmark {
            font-size: 16px !important;
          }

          /* ===========================================
     SONGWRITER SIDE
     =========================================== */

          /* ---- Input bar (fixed at bottom) ---- */
          .music-studio-inline-host .ms-sw-inputbar {
            left: 8px !important;
            right: 8px !important;
            bottom: 8px !important;
          }

          .music-studio-inline-host .ms-sw-meta {
            /* Horizontal scroll instead of wrap — chips spill off the
       right edge but stay on one row, user can swipe. */
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scrollbar-width: none !important;
            padding-bottom: 2px !important;
          }

          .music-studio-inline-host .ms-sw-meta::-webkit-scrollbar {
            display: none !important;
          }

          .music-studio-inline-host .ms-sw-pill-btn {
            flex: 0 0 auto !important;
            padding: 5px 10px !important;
            font-size: 11px !important;
          }

          .music-studio-inline-host .ms-sw-input-row {
            padding: 8px !important;
            border-radius: 18px !important;
          }

          .music-studio-inline-host .ms-sw-input {
            font-size: 14px !important;
            min-height: 36px !important;
          }

          .music-studio-inline-host .ms-sw-send-btn {
            height: 40px !important;
            border-radius: 14px !important;
          }

          .music-studio-inline-host .ms-sw-send-main {
            padding: 0 12px !important;
            font-size: 12px !important;
          }

          .music-studio-inline-host .ms-sw-send-cost {
            padding: 0 10px !important;
            font-size: 12px !important;
          }

          /* ---- Songwriter result card ---- */
          .music-studio-inline-host .ms-sw-result {
            margin-top: 10px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            border-radius: 16px !important;
          }

          .music-studio-inline-host .ms-sw-result-ready {
            grid-template-columns: 72px 1fr !important;
            column-gap: 10px !important;
            row-gap: 10px !important;
            padding: 10px !important;
            padding-bottom: 24px !important;
          }

          .music-studio-inline-host .ms-sw-cover {
            width: 72px !important;
            height: 72px !important;
            border-radius: 10px !important;
          }

          .music-studio-inline-host .ms-sw-cover-default {
            font-size: 26px !important;
          }

          .music-studio-inline-host .ms-sw-ready-head {
            padding-top: 4px !important;
            padding-right: 0 !important;
          }

          .music-studio-inline-host .ms-sw-ready-title {
            font-size: 15px !important;
            line-height: 1.2 !important;
          }

          .music-studio-inline-host .ms-sw-ready-meta {
            font-size: 11px !important;
          }

          .music-studio-inline-host .ms-sw-ready-head .ms-sw-scrubber {
            margin-top: 10px !important;
          }

          /* Action buttons — collapse to icon-only on phones. There's
     no room for "Download MP3" / "Split into stems" labels next
     to the X close. */
          .music-studio-inline-host .ms-sw-ready-actions {
            top: 8px !important;
            right: 44px !important;
            gap: 4px !important;
          }

          .music-studio-inline-host .ms-sw-action {
            padding: 6px 8px !important;
          }

          .music-studio-inline-host .ms-sw-action span:not(.joy-coin) {
            display: none !important;
          }

          .music-studio-inline-host .ms-sw-action svg {
            width: 16px !important;
            height: 16px !important;
            display: block !important;
          }

          .music-studio-inline-host .ms-sw-result-close {
            width: 32px !important;
            height: 32px !important;
            top: 8px !important;
            right: 8px !important;
          }

          .music-studio-inline-host .ms-sw-result-close svg {
            width: 14px !important;
            height: 14px !important;
          }

          .music-studio-inline-host .ms-sw-play {
            width: 28px !important;
            height: 28px !important;
          }

          .music-studio-inline-host .ms-sw-play svg {
            width: 12px !important;
            height: 12px !important;
          }

          /* ===========================================
     MUSICIAN SIDE
     =========================================== */

          /* ---- Master strip ---- */
          .music-studio-inline-host .ms-master {
            flex-wrap: wrap !important;
            gap: 6px !important;
            padding: 10px !important;
            border-radius: 16px !important;
          }

          .music-studio-inline-host .ms-chip {
            padding: 6px 10px !important;
            border-radius: 12px !important;
          }

          .music-studio-inline-host .ms-chip-label {
            font-size: 9px !important;
          }

          .music-studio-inline-host .ms-chip-val {
            font-size: 12px !important;
          }

          .music-studio-inline-host .ms-chip-divider {
            display: none !important;
          }

          /* Chord-sequence chip is wide — gets its own row. */
          .music-studio-inline-host .ms-chip-chords {
            order: 99 !important;
            width: 100% !important;
          }

          .music-studio-inline-host .ms-chord-flow {
            max-width: calc(100vw - 90px) !important;
            overflow: hidden !important;
          }

          /* ---- Stage header ---- */
          .music-studio-inline-host .ms-stage {
            padding: 10px !important;
            border-radius: 16px !important;
          }

          .music-studio-inline-host .ms-stage-head h2 {
            font-size: 18px !important;
          }

          .music-studio-inline-host .ms-stage-head p {
            font-size: 11px !important;
          }

          .music-studio-inline-host .ms-stage-bars {
            font-size: 10px !important;
          }

          /* ---- Track cards ---- */
          .music-studio-inline-host .ms-track {
            grid-template-columns: 40px 1fr !important;
            grid-template-rows: auto auto auto !important;
            grid-template-areas:
              "icon  title"
              "icon  vibe"
              "ctrls ctrls" !important;
            column-gap: 8px !important;
            row-gap: 6px !important;
            padding: 8px !important;
            border-radius: 14px !important;
          }

          .music-studio-inline-host .ms-track .ms-track-icon {
            width: 40px !important;
            height: 60px !important;
            border-radius: 10px !important;
          }

          .music-studio-inline-host .ms-track .ms-track-icon svg {
            width: 18px !important;
            height: 18px !important;
          }

          .music-studio-inline-host .ms-track .ms-track-name {
            font-size: 14px !important;
            margin-left: 2px !important;
          }

          .music-studio-inline-host .ms-track .ms-track-vibe {
            font-size: 12px !important;
            height: 30px !important;
          }

          /* Wave column doesn't fit on phones — hide it. */
          .music-studio-inline-host .ms-track .ms-track-wave {
            display: none !important;
          }

          /* Bottom row: icons-only controls. Generate button +
     Solo, Mute, Remove buttons. Freeze + Reroll hidden as
     advanced controls (still accessible by re-opening the
     prompt on desktop). */
          .music-studio-inline-host .ms-track .ms-tc-gen,
          .music-studio-inline-host .ms-track .ms-tc-btn[data-act="solo"],
          .music-studio-inline-host .ms-track .ms-tc-btn[data-act="mute"],
          .music-studio-inline-host .ms-track .ms-tc-btn[data-act="remove"] {
            grid-area: ctrls !important;
            align-self: center !important;
            justify-self: stretch !important;
          }

          .music-studio-inline-host .ms-track .ms-tc-btn[data-act="freeze"],
          .music-studio-inline-host .ms-track .ms-tc-btn[data-act="reroll"] {
            display: none !important;
          }

          /* Re-flow the visible controls into a single bottom row */
          .music-studio-inline-host .ms-track .ms-track-controls {
            display: contents !important;
            /* still flatten */
          }

          .music-studio-inline-host .ms-track {
            /* Override the grid above with one that lays controls out
       inline in row 3 using subgrid-like behavior. */
          }

          /* Simpler: just let them naturally flow. The grid-areas
     above puts them all in ctrls area. Use the area as a
     flex container via place-self. */

          /* ---- Add-instrument modal ---- */
          .music-studio-inline-host .ms-instr-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px !important;
          }

          .music-studio-inline-host .ms-instr-tile {
            padding: 12px 8px !important;
          }

          /* ---- Musician action bar (Export / Save / Mix) ---- */
          .music-studio-inline-host .ms-actions {
            flex-direction: column !important;
            gap: 8px !important;
            position: static !important;
            margin-top: 12px !important;
          }

          .music-studio-inline-host .ms-secondary-btn,
          .music-studio-inline-host .ms-generate-btn {
            width: 100% !important;
            margin: 0 !important;
          }

          /* ===========================================
     SHARED — MODALS + POPOVERS
     =========================================== */

          /* Modals fill the screen with an 8px gutter. */
          .mm-shell,
          .music-studio-inline-host .ms-songs-shell,
          .music-studio-inline-host .ms-art-shell,
          .music-studio-inline-host .ms-confirm-shell,
          .music-studio-inline-host .ms-stem-shell,
          .music-studio-inline-host .ms-add-shell {
            width: calc(100vw - 16px) !important;
            max-width: none !important;
            max-height: calc(100vh - 32px) !important;
            padding: 16px !important;
            border-radius: 18px !important;
          }

          /* Chip dropdowns full-width, peak disabled. */
          #msTempoPop,
          #msTimePop,
          #msKeyPop,
          #msChordPop,
          #msMasterLengthPop {
            width: calc(100vw - 16px) !important;
            max-width: none !important;
            left: 8px !important;
            right: 8px !important;
            clip-path: none !important;
            padding-top: 14px !important;
            border-radius: 18px !important;
            border: 1px solid rgba(255, 255, 255, .18) !important;
            box-shadow: 0 24px 56px -16px rgba(0, 0, 0, .55) !important;
          }

          /* Chord chart bars — 3 cols (was 4) so each bar pill fits. */
          .music-studio-inline-host .ms-chord-bars {
            grid-template-columns: repeat(3, 1fr) !important;
          }

          /* Songwriter popovers (Style / Voice / Lang / Lyrics) */
          .music-studio-inline-host .ms-style-pop,
          .music-studio-inline-host .ms-voice-pop,
          .music-studio-inline-host .ms-lang-pop,
          .music-studio-inline-host .ms-lyrics-pop,
          .music-studio-inline-host .ms-length-pop {
            width: calc(100vw - 16px) !important;
            max-width: none !important;
            left: 8px !important;
            right: 8px !important;
          }

          /* Demo banner — compact */
          .music-studio-inline-host .ms-sw-demo-banner {
            padding: 8px 12px !important;
            font-size: 10.5px !important;
          }

          .music-studio-inline-host .ms-sw-demo-banner strong {
            font-size: 11px !important;
          }
        }

        /* b.513 — Connector is now a triangle peak carved INTO the
   popover's own shape via clip-path. User: "don't create a
   separate connector — shape the dropdown card so it
   connects at that point." The previous floating diamond
   (b.492) had its own border which drew an outline that broke
   visual continuity with the popover. By cutting the apex
   directly into the popover's shape, both the body and the
   pointer share ONE backdrop-filter and ONE outline.

   Implementation: a clip-path polygon that draws a rectangle
   with a triangle peak at the top. The apex's horizontal
   position is driven by --tail-x (set in JS to the chip's
   center). Extra top-padding (24px) leaves room for the peak
   above the content. Border + border-radius removed because
   clip-path can't preserve them with sharp polygon edges —
   filter:drop-shadow replaces box-shadow so the shadow
   follows the new shape. */
        #msTempoPop,
        #msTimePop,
        #msKeyPop,
        #msChordPop,
        #msMasterLengthPop {
          /* The polygon: triangle apex at top, rectangle body below.
     10px tall peak above the rectangle body. */
          clip-path: polygon(
              /* peak apex */
              var(--tail-x, 50%) 0,
              /* peak right base */
              calc(var(--tail-x, 50%) + 10px) 10px,
              /* top-right corner of body */
              100% 10px,
              /* right side */
              100% 100%,
              /* bottom-left */
              0 100%,
              /* top-left corner of body */
              0 10px,
              /* peak left base */
              calc(var(--tail-x, 50%) - 10px) 10px) !important;
          padding-top: 24px !important;
          /* Remove the visible border + rounded corners — clip-path
     replaces the visual outline with the polygon edge. */
          border: 0 !important;
          border-radius: 0 !important;
          /* filter:drop-shadow follows the clipped shape, so the drop
     shadow naturally outlines the triangle peak too. */
          filter:
            drop-shadow(0 18px 32px rgba(0, 0, 0, .40)) drop-shadow(0 2px 6px rgba(0, 0, 0, .22)) !important;
          box-shadow: none !important;
        }

        /* b.492 — Chord bars in a 4-column grid. With the b.486 cap at
   8 bars total, this lays out as exactly one row of 4 (at the
   default seed) or two rows of 4 (at the cap). Previous
   flex+wrap layout would settle on 5-and-3 or 6-and-2
   depending on bar widths — visually jagged. Grid forces a
   clean 4×N silhouette. */
        .music-studio-inline-host .ms-chord-bars {
          display: grid !important;
          grid-template-columns: repeat(4, 1fr) !important;
          gap: 6px !important;
        }

        /* ============================================================
   2026-05-12 b.344 → b.345 — LIQUID-GLASS UNIFICATION (DARK GLASS)
   First attempt used the .mm-shell recipe (milky white .12 + warm
   corner gradients) — that still read as too white-grey against
   the music studio's bright Garden bg. New target reference is the
   chat engine's .vm-persona-menu (the AI VOICE / PERSONA dropdown
   in Voice Mode) — DARK glass base with a top-down white wash,
   thick frost. Reads correctly on every theme.

   Recipe:
     • dark base rgba(10,12,20,.62) for contrast against bg-stage
     • vertical white-tint gradient (.14 → .04) on top for sheen
     • 1.5px white border at .32 alpha
     • blur 48px saturate(1.8) — heavier frost than mm-shell
     • inset highlights top (.20) + bottom shadow (.20)
     • outer drop shadow 0 28px 70px rgba(0,0,0,.55)

   Every shell / modal / popover in the music studio inherits this
   so the surfaces feel identical to the chat engine's popovers.
   Last in the cascade so it beats both earlier override layers.
   ============================================================ */
        .music-studio-inline-host .ms-songs-shell,
        .music-studio-inline-host .ms-art-shell,
        .music-studio-inline-host .ms-confirm-shell,
        .music-studio-inline-host .ms-stem-shell,
        .music-studio-inline-host .ms-lang-pop,
        .music-studio-inline-host .ms-style-pop,
        .music-studio-inline-host .ms-voice-pop,
        .music-studio-inline-host .ms-tempo-pop,
        .music-studio-inline-host .ms-length-pop,
        .music-studio-inline-host .ms-master-pop,
        .music-studio-inline-host .ms-master-len-pop,
        .music-studio-inline-host .ms-key-pop,
        .music-studio-inline-host .ms-time-pop,
        .music-studio-inline-host .ms-chord-pop,
        .music-studio-inline-host .ms-lyrics-pop,
        .music-studio-inline-host .ms-modal-shell,
        .music-studio-inline-host .ms-popover {
          /* TRANSLUCENT GLASS — no heavy dark base, no extra layers.
     Just a thin white tint on top of backdrop-filter blurring the
     bg-stage directly. This is the real-deal liquid glass: surface
     color comes from the blurred bg behind it, not from a stack of
     dark layers on top. */
          background: rgba(255, 255, 255, .08) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .30) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55) !important;
          opacity: 1 !important;
          animation: none !important;
          transform: none !important;
        }

        /* b.423 — Backdrop scrim FULLY TRANSPARENT behind modals. Earlier
   pass painted a rgba(0,0,0,.32→.46) gradient between the bg-
   stage and the modal shell — that's the exact "opaque base
   layer" the user's snippet says to strip. With it in place,
   backdrop-filter on the shell sampled the dark scrim and the
   modal still read as dark glass. Now: the scrim is transparent
   and has no backdrop-filter of its own. The shell's own
   backdrop-filter composites directly against bg-stage. */
        .music-studio-inline-host .ms-art-modal,
        .music-studio-inline-host .ms-stem-modal,
        .music-studio-inline-host .ms-songs-modal,
        .music-studio-inline-host .ms-modal {
          background: transparent !important;
          background-image: none !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        .music-studio-inline-host .ms-confirm-back {
          background: transparent !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        /* The "STRONGER" override pushed selection states (Length opt /
   Voice opt / Style pill / quality opt / lyrics tab / music tab)
   to bright white .10 with a hard white ring. On dark glass that
   reads as a glowing pill that floats off the surface. Pull those
   back to a subtle white-tint highlight that fits the dark glass. */
        .music-studio-inline-host .ms-sw-tempo-opt.on,
        .music-studio-inline-host .ms-sw-vocal-opt.on,
        .music-studio-inline-host .ms-length-opt.on,
        .music-studio-inline-host .ms-voice-opt.on,
        .music-studio-inline-host .ms-style-pill.on,
        .music-studio-inline-host .ms-art-style.on,
        .music-studio-inline-host .ms-art-quality-opt.on,
        .music-studio-inline-host .ms-lyrics-tab.on,
        .music-studio-inline-host .ms-music-tab.on {
          background: rgba(255, 255, 255, .08) !important;
          border-color: rgba(255, 255, 255, .28) !important;
          color: rgba(255, 255, 255, 1) !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 12px rgba(255, 255, 255, .08) !important;
          background-image: none !important;
        }

        /* Inactive (off) tabs — the lyrics-tab and music-tab borders went
   too bright on the dark glass. Calm them back. */
        .music-studio-inline-host .ms-lyrics-tab,
        .music-studio-inline-host .ms-music-tab {
          border-color: transparent !important;
        }

        .music-studio-inline-host .ms-lyrics-tab:not(.on),
        .music-studio-inline-host .ms-music-tab:not(.on) {
          background: transparent !important;
          background-image: none !important;
          box-shadow: none !important;
        }

        /* Heading/section eyebrow text — the muted text token reads better
   against the dark glass at .60 alpha than the higher value used
   on the milky shell. */
        .music-studio-inline-host .ms-style-pop-head p,
        .music-studio-inline-host .ms-master-pop-head p,
        .music-studio-inline-host .ms-lyrics-pop-head p,
        .music-studio-inline-host .ms-songs-head p,
        .music-studio-inline-host .ms-art-head p,
        .music-studio-inline-host .ms-stem-head p {
          color: rgba(255, 255, 255, .62) !important;
        }

        /* Focus rings — the browser-default blue outline was breaking the
   liquid-glass language wherever a tab / pill / button gained focus
   (most visibly on the lyrics modal's "Generate from idea" tab).
   Replace with our own subtle white focus ring scoped to ANY focusable
   surface inside the music studio. Only fires on keyboard focus
   (:focus-visible) so mouse clicks don't leave a halo behind. */
        .music-studio-inline-host button:focus,
        .music-studio-inline-host [role="tab"]:focus,
        .music-studio-inline-host [role="radio"]:focus,
        .music-studio-inline-host [role="checkbox"]:focus,
        .music-studio-inline-host input:focus,
        .music-studio-inline-host textarea:focus,
        .music-studio-inline-host select:focus,
        .music-studio-inline-host [tabindex]:focus {
          outline: none !important;
        }

        .music-studio-inline-host button:focus-visible,
        .music-studio-inline-host [role="tab"]:focus-visible,
        .music-studio-inline-host [role="radio"]:focus-visible,
        .music-studio-inline-host [role="checkbox"]:focus-visible,
        .music-studio-inline-host [tabindex]:focus-visible {
          outline: none !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .45) inset,
            0 0 0 2px rgba(255, 255, 255, .18) !important;
        }

        /* Text inputs / textareas get a softer focus — the existing
   border-color animation handles the primary signal. */
        .music-studio-inline-host input:focus-visible,
        .music-studio-inline-host textarea:focus-visible {
          outline: none !important;
          border-color: rgba(255, 255, 255, .55) !important;
          box-shadow: 0 0 0 3px rgba(255, 255, 255, .10) !important;
        }

        /* 2026-05-12 b.397 — Songwriter textarea: completely killed individual
   focus indicator. The parent .ms-sw-input-row already paints its
   own focus-within glow around the whole input bar, so any inner
   :focus / :focus-visible halo on the bare textarea reads as a
   redundant box. User saw a sharp white rectangle appear as soon
   as they started typing — that was the .10 outline ring above. */
        .music-studio-inline-host .ms-sw-input,
        .music-studio-inline-host .ms-sw-input:focus,
        .music-studio-inline-host .ms-sw-input:focus-visible,
        .music-studio-inline-host .ms-sw-input:focus-within {
          outline: none !important;
          box-shadow: none !important;
          border: 0 !important;
          background: transparent !important;
        }

        /* ============================================================
   FLAT MENU ROWS — dropdown options inside popovers.
   The earlier "intensity boost" block applied a .05 white fill +
   .12 white border to every .ms-length-opt / .ms-voice-opt /
   .ms-style-pill / .ms-art-style, which made each row look like
   its own little pill stacked on top of the glass shell. The
   reference (.vm-persona-menu) renders options as FLAT menu rows
   — no per-row pill, just text on the glass with a subtle hover /
   active wash. This block strips the pill chrome back so options
   sit on the dark glass like menu items, not buttons.
   ============================================================ */
        .music-studio-inline-host .ms-length-opt,
        .music-studio-inline-host .ms-voice-opt,
        .music-studio-inline-host .ms-style-pill,
        .music-studio-inline-host .ms-art-style,
        .music-studio-inline-host .ms-art-quality-opt {
          background: transparent !important;
          background-image: none !important;
          border: 1px solid transparent !important;
          box-shadow: none !important;
          -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
        }

        .music-studio-inline-host .ms-length-opt:hover,
        .music-studio-inline-host .ms-voice-opt:hover,
        .music-studio-inline-host .ms-style-pill:hover,
        .music-studio-inline-host .ms-art-style:hover,
        .music-studio-inline-host .ms-art-quality-opt:hover {
          background: rgba(255, 255, 255, .06) !important;
          border-color: transparent !important;
          box-shadow: none !important;
        }

        .music-studio-inline-host .ms-length-opt.on,
        .music-studio-inline-host .ms-voice-opt.on,
        .music-studio-inline-host .ms-style-pill.on,
        .music-studio-inline-host .ms-art-style.on,
        .music-studio-inline-host .ms-art-quality-opt.on {
          background: rgba(255, 255, 255, .10) !important;
          border-color: transparent !important;
          box-shadow: none !important;
          color: #fff !important;
        }

        /* Length + Voice rows are full-width menu items. More vertical
   air than the squashed default, slightly wider corner radius. */
        .music-studio-inline-host .ms-length-opt,
        .music-studio-inline-host .ms-voice-opt {
          border-radius: 10px !important;
          padding: 11px 14px !important;
        }

        /* Style + art-style remain as pills (they sit inside a chip-grid
   in the body of the style picker, not as full-width rows). */
        .music-studio-inline-host .ms-style-pill,
        .music-studio-inline-host .ms-art-style {
          border-radius: 999px !important;
        }

        /* Songwriter-meta pill triggers (Style / Length / Tempo / Voice /
   Lang / Lyrics) live INSIDE the input bar — those SHOULD keep a
   faint pill outline so they read as buttons. Lighter than the
   intensity-boost version they used to have, but still visible. */
        .music-studio-inline-host .ms-sw-pill-btn {
          background: rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .16) !important;
          box-shadow: none !important;
        }

        .music-studio-inline-host .ms-sw-pill-btn:hover {
          background: rgba(255, 255, 255, .08) !important;
          border-color: rgba(255, 255, 255, .28) !important;
        }

        /* 2026-05-12 b.373 — Mode toggle: closer to brand, pill outer aligned
   with where brand text begins.
   VERTICAL — parent header padding-bottom + the brand baseline left
     a chunky gap between the brand and the toggle even after .main
     padding-top zeroing. Pull .ms-top-row up by -18px so the
     toggle butts up under the wordmark.
   HORIZONTAL — earlier b.370 pushed the pill's outer edge 20px to
     the LEFT of the brand text by adding margin-left:-20px. That
     overshot — the user wants the pill OUTER edge aligned with
     where the brand TEXT begins, not the pill TEXT aligned with
     brand text. Reverted to margin-left:0 so the pill outer edge
     sits at .main's 22px left padding, matching the brand element's
     box. */
        .music-studio-inline-host[data-embedded="true"] .main {
          padding-top: 0 !important;
        }

        .music-studio-inline-host .ms-top-row {
          margin-top: 30px !important;
          /* b.459 — small breathing room below the mode toggle so it no
     longer overlaps with the master strip below. */
          margin-bottom: 10px !important;
          margin-left: 0 !important;
          padding-left: 0 !important;
          align-self: flex-start !important;
          position: relative !important;
          z-index: 50 !important;
          transform: translateY(-45px) !important;
        }

        .music-studio-inline-host .ms-top-row .ms-mode-toggle {
          /* b.377 — +10px to sit slightly right of where the brand text begins.
     b.379 — user pulled back 5px → 5px.
     b.380 — user pulled another 2px left → 3px.
     b.381 — user pulled another 2px left → 1px.
     b.382 — user pulled another 4px left → -3px. */
          margin-left: -5px !important;
          /* b.383 — smooth morph when collapsing to / expanding from the orb. */
          position: relative;
          transition:
            width .45s cubic-bezier(.22, 1, .36, 1),
            padding .45s cubic-bezier(.22, 1, .36, 1),
            border-radius .45s cubic-bezier(.22, 1, .36, 1),
            background .25s ease,
            border-color .25s ease,
            box-shadow .25s ease !important;
          overflow: hidden;
        }

        /* ============================================================
   2026-05-12 b.383 — MODE-TOGGLE ORB
   The Songwriter / Musician pill auto-collapses 10s after the
   studio boots: width shrinks to a 44px circle, the two buttons
   fade out and stop receiving pointer events, and a spinning
   music-note glyph fades in centered. Hover or click expands the
   pill back; a 2-second grace timer re-collapses after cursor leaves.
   ============================================================ */
        .music-studio-inline-host .ms-mode-orb {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;
          opacity: 0;
          transform: scale(.6) rotate(-30deg);
          transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
          color: #fff;
        }

        .music-studio-inline-host .ms-mode-orb svg {
          width: 20px;
          height: 20px;
          filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
        }

        /* Collapsed state — orb visible, buttons hidden, pill is a circle. */
        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"] {
          width: 44px !important;
          height: 44px;
          padding: 0 !important;
          border-radius: 50% !important;
          cursor: pointer;
          background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), transparent 65%),
            rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .30) !important;
          /* b.385 — dropped the theme-accent glow ring (was producing a
     visible green tint on Garden). Pure neutral white halo now. */
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .35) inset,
            0 -1px 0 rgba(0, 0, 0, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .08) inset,
            0 6px 22px -4px rgba(0, 0, 0, .55),
            0 0 22px rgba(255, 255, 255, .18) !important;
        }

        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"]::before {
          /* Faint conic sweep behind the glyph — neutral white-on-white so
     it reads as a moving sheen rather than a colored tint.
     b.385 — was using theme-accent which painted the orb green on
     Garden theme. */
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: 50%;
          background: conic-gradient(from 0deg,
              rgba(255, 255, 255, .22),
              rgba(255, 255, 255, .04),
              rgba(255, 255, 255, .22));
          filter: blur(8px);
          opacity: .55;
          z-index: 0;
          pointer-events: none;
          animation: ms-mode-orb-sweep 6s linear infinite;
        }

        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"] .ms-mode-btn {
          opacity: 0 !important;
          width: 0 !important;
          min-width: 0 !important;
          padding: 0 !important;
          margin: 0 !important;
          pointer-events: none;
          transition: opacity .15s ease;
          overflow: hidden;
          white-space: nowrap;
        }

        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"] .ms-mode-orb {
          opacity: 1;
          transform: scale(1) rotate(0);
          pointer-events: none;
          z-index: 1;
          animation: ms-mode-orb-spin 7s linear infinite;
        }

        /* Hover state on the collapsed orb — brighten + scale a touch. */
        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"]:hover {
          background:
            radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .32), transparent 65%),
            rgba(255, 255, 255, .08) !important;
          border-color: rgba(255, 255, 255, .50) !important;
          /* b.385 — neutral white halo on hover too, no theme-accent green. */
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .50) inset,
            0 0 0 1px rgba(255, 255, 255, .14) inset,
            0 8px 26px -4px rgba(0, 0, 0, .60),
            0 0 30px rgba(255, 255, 255, .32) !important;
        }

        .music-studio-inline-host .ms-mode-toggle[data-collapsed="true"]:hover .ms-mode-orb {
          animation-duration: 3s;
        }

        /* Continuous slow spin of the glyph while collapsed. */
        @keyframes ms-mode-orb-spin {
          from {
            transform: scale(1) rotate(0deg);
          }

          to {
            transform: scale(1) rotate(360deg);
          }
        }

        /* Aura sweep behind the glyph — opposite direction so the layers
   feel alive against each other. */
        @keyframes ms-mode-orb-sweep {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(-360deg);
          }
        }

        /* ============================================================
   2026-05-12 b.397 — MUSICIAN CONSOLE · clean translucent glass
   Per user snippet: strip ALL opaque/dark base layers from the
   Musician's structural containers (.ms-master strip + .ms-stage
   surface) and let backdrop-filter do its job. Earlier b.396
   intrinsic-frost recipe stacked a dark rgba(20,22,32,.30) base
   under the white tint — that's exactly the "Cause 2" mistake
   the user called out. Real liquid glass takes its color from the
   blur, not from a layer on top.
   Recipe (matches the snippet):
     • rgba(255,255,255,.08) tint
     • 1px solid rgba(255,255,255,.22) border
     • backdrop-filter blur(40px) saturate(1.8) brightness(1.05)
     • inset highlights + outer drop shadow
   ============================================================ */
        .music-studio-inline-host .ms-master,
        .music-studio-inline-host .ms-stage {
          background: rgba(255, 255, 255, .08) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .30) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55) !important;
        }

        /* Chip hover state stays subtle — just lift the white tint slightly
   so chips read as clickable on the cleaner glass strip. */
        .music-studio-inline-host .ms-master .ms-chip:hover {
          background: rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .20) !important;
        }

        /* ============================================================
   2026-05-12 b.400 — MUSICIAN ACTION BAR · clean glass
   Applied the canonical clean recipe to .ms-secondary-btn
   (Export stems, Save song) and .ms-generate-btn (Make music):
   pure white .08 tint, 1px .22 white border, heavy frost, inset
   highlights + outer drop shadow. Glass picks up its color from
   the blur, not from any opaque layer.
   ============================================================ */
        .music-studio-inline-host .ms-secondary-btn,
        .music-studio-inline-host .ms-generate-btn {
          background: rgba(255, 255, 255, .08) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .30) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55) !important;
          color: var(--text) !important;
          transition: background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease !important;
        }

        .music-studio-inline-host .ms-secondary-btn:not(:disabled):hover,
        .music-studio-inline-host .ms-generate-btn:not(:disabled):hover {
          background: rgba(255, 255, 255, .14) !important;
          border-color: rgba(255, 255, 255, .38) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .40) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 24px 60px -12px rgba(0, 0, 0, .60),
            0 0 30px rgba(255, 255, 255, .18) !important;
          transform: translateY(-1px) !important;
        }

        .music-studio-inline-host .ms-secondary-btn:disabled,
        .music-studio-inline-host .ms-generate-btn:disabled {
          opacity: .55 !important;
          cursor: not-allowed !important;
          transform: none !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .20) inset,
            0 -1px 0 rgba(0, 0, 0, .10) inset,
            0 14px 36px -10px rgba(0, 0, 0, .45) !important;
        }

        /* Kill any decorative ::before glow that competes with the clean
   glass on the Make music button. */
        .music-studio-inline-host .ms-generate-btn::before {
          display: none !important;
        }

        /* Segmented-pill divider — thin white left border so "Make music"
   and the coin cost still read as the two halves of one pill. */
        .music-studio-inline-host .ms-gen-cost {
          border-left: 1px solid rgba(255, 255, 255, .22) !important;
        }

        /* ============================================================
   2026-05-12 b.401 — DICE CHIP · de-greened + 2s tumble
   The chip used var(--theme-accent-rgb) for border / corner glow /
   inset rings / drop shadow / SVG aura blobs (filled with
   currentColor). On Garden that resolved to emerald — a glowing
   green box around the die. Swapped every accent reference for
   neutral whites at matching alphas so the chip reads as pure
   liquid glass on any theme.
   Animation: replaced the gentle 5.4s float with an 8s 3D tumble
   that rotates 90deg around Y every 2 seconds (4 quarter-turns
   per loop, ends at 360 = clean re-entry). Perspective on the
   chip so the rotation reads as a real 3D flip.
   ============================================================ */
        .music-studio-inline-host .ms-dice-chip {
          background:
            radial-gradient(120% 120% at 30% 0%,
              rgba(255, 255, 255, .20), transparent 72%),
            rgba(255, 255, 255, .04) !important;
          border: 1px solid rgba(255, 255, 255, .30) !important;
          color: #fff !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 6px 22px -8px rgba(0, 0, 0, .55) !important;
          perspective: 240px;
        }

        .music-studio-inline-host .ms-dice-chip:hover {
          border-color: rgba(255, 255, 255, .55) !important;
          background:
            radial-gradient(120% 120% at 30% 0%,
              rgba(255, 255, 255, .30), transparent 65%),
            rgba(255, 255, 255, .08) !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .18) inset,
            0 0 28px rgba(255, 255, 255, .30),
            0 10px 26px -8px rgba(0, 0, 0, .55) !important;
        }

        /* SVG aura blobs — swap currentColor (theme accent) for pure white
   so they read as a moving sheen, not a colored haze. */
        .music-studio-inline-host .ms-dice-chip svg .ms-dice-aura-1,
        .music-studio-inline-host .ms-dice-chip svg .ms-dice-aura-2,
        .music-studio-inline-host .ms-dice-chip svg .ms-dice-aura-3 {
          fill: #ffffff !important;
        }

        /* Continuous 3D wobble — the die tilts on a different combination
   of X / Y / Z every 1s so it visually feels like it's tumbling on
   its corners, but no axis ever reaches 90deg (which would turn
   the flat SVG edge-on and make it disappear). 4 keyframes × 1s
   = 4s total per loop, clean return to identity. */
        .music-studio-inline-host .ms-dice-chip svg {
          animation: msi-ms-dice-tumble 4s ease-in-out infinite !important;
          transform-style: preserve-3d;
          transform-origin: center;
        }

        /* Click trigger keeps its 0.6s spin via the .rolling class — the
   override above wins over the auto-tumble while .rolling is on. */
        .music-studio-inline-host .ms-dice-chip.rolling svg {
          animation: msi-ms-dice-roll .6s var(--ease) both !important;
        }

        @keyframes msi-ms-dice-tumble {
          0% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          }

          25% {
            transform: rotateX(28deg) rotateY(40deg) rotateZ(8deg);
          }

          50% {
            transform: rotateX(-15deg) rotateY(0deg) rotateZ(-12deg);
          }

          75% {
            transform: rotateX(28deg) rotateY(-40deg) rotateZ(8deg);
          }

          100% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
          }
        }

        /* ============================================================
   2026-05-12 b.406 — REAL 3D CSS DICE CUBE
   Replaces the 2D SVG with a true 3D cube built from six face
   divs (front/back/left/right/top/bottom), each with classic
   dice pip patterns (1-6 dots in standard layout). The cube
   rotates continuously to present a different face every 1
   second — 6 faces × 1s = 6s loop, ends back at face 1 cleanly.
   ============================================================ */
        .music-studio-inline-host .ms-dice-stage {
          position: relative;
          display: block;
          width: 32px;
          height: 32px;
          perspective: 140px;
          pointer-events: none;
        }

        .music-studio-inline-host .ms-dice-cube {
          position: absolute;
          inset: 0;
          transform-style: preserve-3d;
          animation: msi-ms-dice-cube-rotate 6s cubic-bezier(.55, .08, .45, 1) infinite;
          /* Idle "rest" angle so the front face presents in a slightly
     three-quarter pose at the start of each loop. */
          transform: rotateX(-12deg) rotateY(0deg);
        }

        .music-studio-inline-host .ms-dice-side {
          position: absolute;
          inset: 0;
          display: block;
          background:
            radial-gradient(120% 120% at 30% 25%,
              rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .02) 100%);
          border: 1px solid rgba(255, 255, 255, .45);
          border-radius: 5px;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .45) inset,
            0 -1px 0 rgba(0, 0, 0, .18) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset;
          backface-visibility: hidden;
        }

        /* Position each face on its corresponding cube side.
   Cube edge = 32px → translateZ = 16px. */
        .music-studio-inline-host .ms-dice-side-front {
          transform: rotateY(0deg) translateZ(16px);
        }

        .music-studio-inline-host .ms-dice-side-back {
          transform: rotateY(180deg) translateZ(16px);
        }

        .music-studio-inline-host .ms-dice-side-right {
          transform: rotateY(90deg) translateZ(16px);
        }

        .music-studio-inline-host .ms-dice-side-left {
          transform: rotateY(-90deg) translateZ(16px);
        }

        .music-studio-inline-host .ms-dice-side-top {
          transform: rotateX(90deg) translateZ(16px);
        }

        .music-studio-inline-host .ms-dice-side-bottom {
          transform: rotateX(-90deg) translateZ(16px);
        }

        /* Pip dots — absolutely positioned by inline left/top % inside
   each face. Small dark dot with a tiny inner highlight so they
   read as real molded dice pips. */
        .music-studio-inline-host .ms-pip {
          position: absolute;
          width: 5px;
          height: 5px;
          margin: -2.5px 0 0 -2.5px;
          border-radius: 50%;
          background: radial-gradient(circle at 35% 30%,
              rgba(40, 42, 54, .55) 0%,
              rgba(8, 10, 18, .95) 60%,
              rgba(8, 10, 18, 1) 100%);
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .25),
            inset 0 1px 1px rgba(255, 255, 255, .20);
        }

        /* Cube rotation — 6 face presentations, each held for ~14% of
   the 6s cycle (≈0.85s) with a brief easing transition between.
   Sequence: front (1) → right (3) → back (6) → left (4) → top
   (2) → bottom (5) → back to front. Each rotation reaches a face
   head-on so a different face dominates the screen every second. */
        @keyframes msi-ms-dice-cube-rotate {

          /* Hold face 1 (front) */
          0%,
          13% {
            transform: rotateX(-12deg) rotateY(0deg);
          }

          /* Rotate to face 3 (right) */
          17%,
          30% {
            transform: rotateX(-12deg) rotateY(-90deg);
          }

          /* Rotate to face 6 (back) */
          34%,
          47% {
            transform: rotateX(-12deg) rotateY(-180deg);
          }

          /* Rotate to face 4 (left) */
          51%,
          64% {
            transform: rotateX(-12deg) rotateY(-270deg);
          }

          /* Rotate to face 2 (top) — change axis */
          68%,
          80% {
            transform: rotateX(-90deg) rotateY(-360deg);
          }

          /* Rotate to face 5 (bottom) */
          84%,
          96% {
            transform: rotateX(90deg) rotateY(-360deg);
          }

          /* Return to face 1 */
          100% {
            transform: rotateX(-12deg) rotateY(-360deg);
          }
        }

        /* Hide the legacy 2D SVG kept inside the chip as a fallback. */
        .music-studio-inline-host .ms-dice-legacy-svg {
          display: none !important;
        }

        /* The chip needs a slightly different layout to host the cube
   instead of the old SVG — keep the same chip size, just adjust
   the inner stage centering. */
        .music-studio-inline-host .ms-dice-chip {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        /* ============================================================
   2026-05-12 b.408 — STAGE LAYOUT · capped height, bottom-right
   actions, no default scroll.
   Earlier b.407 made .ms-stage a flex column with the action bar
   inside, but the stage was still flex:1 so it filled the entire
   viewport. User wanted (a) some breathing room below the stage,
   (b) the Export / Save / Make-music buttons bottom-right inside
   the stage, (c) no scrollbar in default empty state.
   This block:
     • Removes flex:1 expansion — stage now content-sized with a
       cap of about 60vh so it never dominates the viewport.
     • Pushes the action bar to the right edge with justify-content
       :flex-end and aligns it to the BOTTOM via auto top margin on
       the bar. Buttons sit bottom-right of the stage glass.
     • Hides the scrollbar by default — only appears on hover if
       and only if track content overflows.
   ============================================================ */
        /* b.415 — STAGE LAYOUT rewritten with position:absolute action
   bar. The previous flex approach kept the action bar competing
   with .ms-tracks for vertical space, which (a) pushed the
   buttons toward the middle when track content was short, and
   (b) caused empty-state content to clip when .ms-tracks tried
   to scroll inside a too-short container.
   New approach: pull the action bar out of the flex flow with
   position:absolute anchored to the bottom-right corner of
   .ms-stage. .ms-tracks no longer competes for vertical space
   and never needs to scroll in empty state.
*/
        .music-studio-inline-host .ms-stage {
          position: relative !important;
          display: flex !important;
          flex-direction: column !important;
          flex: 0 1 auto !important;
          min-height: 420px !important;
          max-height: none !important;
          /* Reserve room at the bottom for the absolutely-positioned
     action bar. b.418 — bumped down to 74px since the buttons
     now sit at bottom:14px (was 24px). */
          padding-bottom: 74px !important;
          overflow: hidden !important;
        }

        .music-studio-inline-host .ms-stage .ms-tracks {
          flex: 1 1 auto !important;
          min-height: 0 !important;
          /* No internal scroll in default state — content flows naturally
     into the stage, which is sized to fit it. */
          overflow: visible !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 14px;
        }

        /* If track content ever does overflow (many instruments added),
   re-enable auto-scroll. Scrollbar stays hidden by default. */
        .music-studio-inline-host .ms-stage .ms-tracks:has(.ms-track:nth-child(4)) {
          overflow-y: auto !important;
          justify-content: flex-start !important;
        }

        .music-studio-inline-host .ms-stage .ms-tracks::-webkit-scrollbar {
          width: 0;
          height: 0;
        }

        .music-studio-inline-host .ms-stage .ms-tracks:hover::-webkit-scrollbar {
          width: 6px;
        }

        .music-studio-inline-host .ms-stage .ms-tracks::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, .18);
          border-radius: 3px;
        }

        /* ============================================================
   2026-05-12 b.434 — TRACK CARDS only — widen card within stage.
   Reverted b.430's container-wide changes (max-width, stage
   padding bump, grid redistribution). The stage box stays at
   its original size and the card's internal grid is unchanged.
   Two minimal tweaks needed to actually widen the visible cards:
     (1) .ms-stage horizontal padding 24 → 10px — shrinks the
         gutter between the stage glass edge and the card area.
     (2) The b.417 stage rewrite gave .ms-tracks `align-items:
         center`, which made each card content-sized and CENTERED
         within the tracks column instead of stretched. Force
         each .ms-track to width:100% (and align-self:stretch as
         backup) so it fills the full .ms-tracks width regardless
         of the centering. Empty-state messaging stays untouched
         (still centered as desired). */
        .music-studio-inline-host .ms-stage {
          padding-left: 10px !important;
          padding-right: 10px !important;
        }

        .music-studio-inline-host .ms-stage .ms-tracks .ms-track {
          width: 100% !important;
          align-self: stretch !important;
          max-width: none !important;
          box-sizing: border-box !important;
          /* b.467 — canonical clean liquid-glass: thin white tint, heavy
     blur+saturate so the bg-stage colors come through vivid,
     subtle border, inset highlights + outer drop shadow. Same
     recipe family as every other clean glass surface. */
          background: rgba(255, 255, 255, .05) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .24) inset,
            0 -1px 0 rgba(0, 0, 0, .10) inset,
            0 18px 50px -16px rgba(0, 0, 0, .55) !important;
        }

        /* b.471 — Pull title + vibe input flush against each other and
   align them to the top-left of the track card. The card uses
   `align-items: center` on its grid, so when the row is tall
   (because controls are ~34px tall) the text column gets vertically
   centered and the pill drifted below the title with a chunky
   visual gap. align-self:flex-start on the text column pins
   title to the top; gap inside the column is tight so the pill
   sits right under the title. */
        /* b.473 — Force entire .ms-track grid to align-items:start so
   every cell tops out at the row top. align-self per-cell wasn't
   visibly winning over the inherited centered layout in some
   contexts; setting it on the grid itself is the canonical
   approach. Title now sits parallel to the icon's top edge. */
        .music-studio-inline-host .ms-track {
          align-items: start !important;
        }

        .music-studio-inline-host .ms-track .ms-track-text {
          align-self: start !important;
          /* b.478 — user wants exactly 10px between title and vibe pill. */
          gap: 10px !important;
          margin-top: 0 !important;
        }

        .music-studio-inline-host .ms-track .ms-track-name {
          /* Tight line-height so the title text top aligns with the icon
     box top (the default ~1.2 line-height pushed the glyph a few
     px below the line-box top). */
          line-height: 1 !important;
          /* b.478 — pull title flush with the card's top edge. */
          padding-top: 0 !important;
        }

        /* b.475 / b.477 / b.478 — Compact track card.
   b.478: pull the text column right up to the top of the card
   (.ms-track padding-top 6 → 4); keep 6px breathing room at the
   bottom. */
        .music-studio-inline-host .ms-track {
          padding-top: 4px !important;
          padding-bottom: 6px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-icon {
          width: 48px !important;
          height: 48px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-icon svg {
          width: 24px !important;
          height: 24px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-wave {
          height: 34px !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-gen,
        .music-studio-inline-host .ms-track .ms-tc-btn {
          height: 30px !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn {
          width: 30px !important;
        }

        /* b.481 — MUSIC STUDIO · 2-row track card layout. User dragged the
   exact element placement in /track-card-layout.html and asked
   for this final arrangement:

     ┌──────┬───── title · EMPTY ──────────────────────────┬─ X ─┐
     │ ICON │                                              │     │
     │      └─ vibe pill ─ wave ─ Gen ─ S ─ M ─ 🔒 ─ ↻ ────┘
     └──────────────────────────────────────────────────────────

   Implementation: flatten .ms-track-text + .ms-track-controls via
   display:contents so every child becomes a direct grid item of
   .ms-track. Then place them with grid-template-areas across two
   rows. Icon spans both rows (rowspan); X (remove) is hoisted to
   the top-right corner; everything else flows on row 2.

   The 280px col for `wave` matches the original .ms-track-wave
   width target. `1fr` col 2 carries the vibe pill so it grows
   with viewport width. Generate + 4 control buttons stay at their
   intrinsic widths (auto).

   This supersedes the b.473/b.475/b.477/b.478 stack of overrides
   that were trying to tune the OLD single-row layout — those
   styles still apply at the leaf level (.ms-track-name padding,
   .ms-track padding) but the grid template itself is now redone. */
        .music-studio-inline-host .ms-track {
          /* b.482 — icon column 48 → 45 to match new 45×80 portrait box. */
          grid-template-columns: 45px 1fr 280px auto auto auto auto auto !important;
          grid-template-rows: auto auto !important;
          grid-template-areas:
            "icon  title  title  title  title  title  title  xrem"
            "icon  vibe   wave   gen    solo   mute   frz    reroll" !important;
          column-gap: 8px !important;
          row-gap: 6px !important;
          align-items: center !important;
          padding: 8px 14px !important;
          /* b.484 — Apply the canonical liquid-glass recipe to .ms-track
     verbatim from user's spec. Replaces the previous
     var(--lg-fill) / var(--lg-stroke) / var(--lg-blur-light) stack
     which was reading too white (.08 fill + heavier blur was
     sampling the theme orbs behind and tinting the card green/
     yellow per the screenshot). Recipe drops fill to .03, lifts
     blur to 40px saturate(1.7), adds layered depth shadow + the
     hairline highlight/lowlight insets that give the surface real
     glass weight. */
          background: rgba(255, 255, 255, .03) !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.7) !important;
          backdrop-filter: blur(40px) saturate(1.7) !important;
          border-radius: 20px !important;
          box-shadow:
            0 28px 64px -18px rgba(0, 0, 0, .55),
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 0 -1px 0 rgba(0, 0, 0, .10) !important;
        }

        .music-studio-inline-host .ms-track .ms-track-text,
        .music-studio-inline-host .ms-track .ms-track-controls {
          display: contents !important;
        }

        .music-studio-inline-host .ms-track .ms-track-icon {
          grid-area: icon !important;
          align-self: center !important;
          justify-self: start !important;
          /* b.482 — icon box 1:1 (48×48) → 9:16 portrait (45×80).
     Ratio check: 45 / 80 = 0.5625 = 9 / 16. */
          width: 45px !important;
          height: 80px !important;
          border-radius: 14px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-name {
          grid-area: title !important;
          align-self: end !important;
          justify-self: start !important;
          padding-top: 0 !important;
          margin: 0 !important;
          /* b.482 — nudge title 4px right per user request. */
          margin-left: 4px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-vibe {
          grid-area: vibe !important;
          align-self: center !important;
          height: 32px !important;
          width: 100% !important;
          background: rgba(255, 255, 255, .06) !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
          border-radius: 999px !important;
        }

        .music-studio-inline-host .ms-track .ms-track-wave {
          grid-area: wave !important;
          align-self: center !important;
          width: 100% !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-gen {
          grid-area: gen !important;
          align-self: center !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn[data-act="solo"] {
          grid-area: solo !important;
          align-self: center !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn[data-act="mute"] {
          grid-area: mute !important;
          align-self: center !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn[data-act="freeze"] {
          grid-area: frz !important;
          align-self: center !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn[data-act="reroll"] {
          grid-area: reroll !important;
          align-self: center !important;
        }

        .music-studio-inline-host .ms-track .ms-tc-btn[data-act="remove"] {
          grid-area: xrem !important;
          align-self: start !important;
          justify-self: end !important;
        }

        /* Vocals only — lyrics textarea spans the bottom under everything. */
        .music-studio-inline-host .ms-track:has(.ms-track-lyrics) {
          grid-template-rows: auto auto auto !important;
          grid-template-areas:
            "icon  title  title  title  title  title  title  xrem"
            "icon  vibe   wave   gen    solo   mute   frz    reroll"
            "icon  lyrics lyrics lyrics lyrics lyrics lyrics lyrics" !important;
        }

        .music-studio-inline-host .ms-track .ms-track-lyrics {
          grid-area: lyrics !important;
          margin-top: 6px !important;
        }

        /* b.468 — Per-track control buttons (.ms-tc-btn for S / M /
   Lock / Refresh / X) had `data-on="true"` state using
   var(--active-tint) + var(--active-glow) which resolves to
   emerald on Garden theme — visible green hue around any toggled
   button. Swap to neutral white. Also bump the X (remove) button
   glyph size since it's a literal `×` character and was too
   small at the .ms-tc-btn default 11px. */
        .music-studio-inline-host .ms-tc-btn[data-on="true"] {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(255, 255, 255, .20), transparent 70%),
            rgba(255, 255, 255, .10) !important;
          border-color: rgba(255, 255, 255, .42) !important;
          box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 0 12px rgba(255, 255, 255, .18) !important;
        }

        .music-studio-inline-host .ms-tc-btn[data-act="remove"] {
          font-size: 22px !important;
          line-height: 1 !important;
          font-weight: 400 !important;
        }

        .music-studio-inline-host .ms-stage .ms-tracks .ms-track:hover {
          background: rgba(255, 255, 255, .09) !important;
          border-color: rgba(255, 255, 255, .32) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .34) inset,
            0 -1px 0 rgba(0, 0, 0, .10) inset,
            0 0 0 1px rgba(255, 255, 255, .08) inset,
            0 24px 60px -16px rgba(0, 0, 0, .60),
            0 0 24px rgba(255, 255, 255, .14) !important;
        }

        /* b.448 — Dynamic action bar visibility. Export stems / Save song /
   Make music only matter once there's at least one instrument to
   export, save, or compose for. When the stage has zero .ms-track
   children, hide the action bar entirely; it springs back the
   moment the first track is added. CSS-only via :has(). */
        .music-studio-inline-host .ms-stage:not(:has(.ms-track)) .ms-action-bar {
          display: none !important;
        }

        /* Stage reserves 74px padding-bottom for the action bar — when the
   bar is hidden, drop that reserved space so the empty state isn't
   floating with a phantom gap below it. */
        .music-studio-inline-host .ms-stage:not(:has(.ms-track)) {
          padding-bottom: 20px !important;
        }

        /* b.463 — Kill Add-instrument modal entry animation. The .ms-modal
   wrapper had a 0.25s msi-ms-modal-fade animation and the
   .ms-modal-shell had a 0.35s msi-ms-modal-rise animation —
   during those frames backdrop-filter was still sampling and
   the override cascade hadn't fully composed the new clean
   glass, so the modal momentarily flickered with its pre-edit
   dark-scrim look before snapping into shape. Disable both
   animations so the modal pops in instantly with its final
   glass already applied. */
        .music-studio-inline-host .ms-modal,
        .music-studio-inline-host .ms-modal-shell {
          animation: none !important;
          transition: none !important;
          opacity: 1 !important;
          transform: none !important;
        }

        /* ============================================================
   2026-05-12 b.450 — Per-track Generate button de-greened +
   pill-input padding safety.
   ============================================================ */
        /* (1) The per-track Generate button (.ms-tc-gen) used var(--active-
       tint) (= rgba theme-accent .18) for its background gradient
       and var(--active-glow) for its hover halo. On Garden that
       resolves to emerald — visible green hue on the pill. Swap
       both for neutral white at matching alphas so the button
       reads as pure liquid glass on any theme. */
        .music-studio-inline-host .ms-tc-gen {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(255, 255, 255, .16), transparent 70%),
            rgba(255, 255, 255, .06) !important;
          border: 1px solid rgba(255, 255, 255, .28) !important;
        }

        .music-studio-inline-host .ms-tc-gen:hover:not(:disabled) {
          background: radial-gradient(120% 100% at 30% 0%,
              rgba(255, 255, 255, .22), transparent 65%),
            rgba(255, 255, 255, .10) !important;
          box-shadow: 0 0 14px rgba(255, 255, 255, .22) !important;
          border-color: rgba(255, 255, 255, .45) !important;
        }

        /* (2) Inputs across the studio that show as pill-shaped text
       fields should have at least 14px horizontal padding so
       text never starts on top of the border. .ms-track-vibe
       originally had `padding: 2px 0` (zero horizontal) which
       caused the user-reported "text on border" issue. Force a
       safe inset on every pill / glass input. */
        .music-studio-inline-host .ms-track-vibe,
        .music-studio-inline-host .ms-track-lyrics,
        .music-studio-inline-host .ms-style-custom-input,
        .music-studio-inline-host .ms-lyrics-gen-input {
          padding-left: 14px !important;
          padding-right: 14px !important;
        }

        /* b.452 / b.454 — EXPERIMENTAL ribbon right-aligned with the
   master strip below. .ms-top-row is OUTSIDE .music-studio
   (which has max-width:1180px; margin:0 auto), so on wide
   viewports it spans wider than the studio and the ribbon
   overhangs the strip on the right.
   b.456 — first attempt capped .ms-top-row's width to 1180px
   too, but that shifted the mode toggle inward away from the
   brand wordmark on wide viewports.
   b.457 — Keep .ms-top-row FULL width (so the mode toggle
   stays anchored at the brand-wordmark x-position) and only
   pull the ribbon's RIGHT edge inward by the difference between
   the .main width and 1180 / 2 — i.e. the same offset that
   centers .music-studio. margin-right: max(0px, (100% - 1180px)
   / 2) computes that offset against .ms-top-row's actual width
   so it scales correctly on any viewport. */
        .music-studio-inline-host .ms-top-row {
          width: 100% !important;
          max-width: none !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          align-self: stretch !important;
          box-sizing: border-box !important;
        }

        .music-studio-inline-host .ms-top-row .ms-experimental-ribbon {
          margin-left: auto !important;
          margin-right: max(0px, calc((100% - 1180px) / 2)) !important;
          /* b.461 — push the ribbon down 20px from the row baseline so
     it doesn't sit flush with the brand wordmark above. Only
     affects the ribbon — mode toggle stays where it was. */
          margin-top: 20px !important;
        }

        .music-studio-inline-host .ms-master {
          width: 100% !important;
          flex: 0 0 auto !important;
        }

        /* ============================================================
   2026-05-12 b.437 — STAGE · compact vertical spacing.
   With 1-2 instrument cards, the stage had excessive vertical
   dead space — ~100-150px below the head, big gaps between the
   card and the Add-instrument button, and the min-height:420px
   floor kept the box tall even when content was short. Tighten:
     • .ms-stage padding-top      24 → 14px
     • .ms-stage min-height       420 → 280px (still fits empty
        state cleanly because .ms-tracks centers its content).
     • .ms-stage-head margin-bot  18 → 8px
     • .ms-tracks gap             14 → 8px so cards + Add button
        are visually grouped.
     • .ms-add-track padding tightened so it doesn't dwarf cards.
   No internal layout changes — purely spacing. */
        .music-studio-inline-host .ms-stage {
          padding-top: 14px !important;
          min-height: 280px !important;
        }

        .music-studio-inline-host .ms-stage-head {
          margin-bottom: 8px !important;
        }

        .music-studio-inline-host .ms-stage .ms-tracks {
          gap: 8px !important;
        }

        .music-studio-inline-host .ms-add-track {
          padding: 12px 18px !important;
        }

        /* 2026-05-12 b.441 — Kill browser-default margins on the h2/h3/p
   inside .ms-stage-head and .ms-empty. Those margins were the
   real source of the big visual gaps between heading and
   paragraph (and between glyph / "Empty stage" / "Build your
   song…"). Parent gap controls spacing now. */
        .music-studio-inline-host .ms-stage-head h2,
        .music-studio-inline-host .ms-stage-head p,
        .music-studio-inline-host .ms-stage-head>div {
          margin: 0 !important;
        }

        .music-studio-inline-host .ms-stage-head>div {
          display: flex !important;
          flex-direction: column !important;
          gap: 4px !important;
        }

        /* b.444 — Top-align the stage head row so the "NO INSTRUMENTS YET"
   pill on the right sits flush with the top of the console
   instead of baseline-aligning with the much-taller "The Band"
   heading on the left. */
        .music-studio-inline-host .ms-stage-head {
          align-items: flex-start !important;
        }

        .music-studio-inline-host .ms-stage-bars {
          align-self: flex-start !important;
          margin-top: 0 !important;
        }

        .music-studio-inline-host .ms-empty {
          gap: 8px !important;
          padding: 18px 20px !important;
        }

        .music-studio-inline-host .ms-empty h3,
        .music-studio-inline-host .ms-empty p {
          margin: 0 !important;
        }

        /* b.418 — Action bar split: Export + Save anchored bottom-LEFT,
   Make music anchored bottom-RIGHT. Action bar spans the full
   width of the stage at the bottom; .ms-actions is a flex row
   with the third button (#msGenBtn) pushed right via
   margin-left:auto.
   b.448 — Pushed offsets tighter (left/right 24 → 10px,
   bottom 14 → 10px) so the button clusters hug the corners of
   the stage glass. */
        .music-studio-inline-host .ms-stage .ms-action-bar {
          position: absolute !important;
          left: 10px !important;
          right: 10px !important;
          bottom: 10px !important;
          top: auto !important;
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          padding: 0 !important;
          margin: 0 !important;
          border: 0 !important;
          border-top: 0 !important;
          background: transparent !important;
          width: auto !important;
          z-index: 5;
        }

        .music-studio-inline-host .ms-stage .ms-action-bar .ms-action-spacer {
          display: none !important;
        }

        .music-studio-inline-host .ms-stage .ms-actions {
          display: flex !important;
          align-items: center !important;
          gap: 8px !important;
          flex: 1 1 auto !important;
          flex-wrap: wrap !important;
          width: auto !important;
          margin: 0 !important;
          justify-content: flex-start !important;
        }

        /* Push the Make-music button (third / primary action) to the
   right edge of the bar, leaving the two secondary actions
   together on the left. */
        .music-studio-inline-host .ms-stage .ms-actions #msGenBtn {
          margin-left: auto !important;
        }

        /* The .ms-musician pane was previously flex:1 stretching to fill
   all vertical space — that forced .ms-stage to fill the viewport
   too. Switch to content-height so the stage cap above actually
   takes effect. */
        .music-studio-inline-host .ms-pane.ms-musician.on {
          flex: 0 1 auto !important;
          min-height: 0 !important;
        }

        /* ============================================================
   2026-05-12 b.420 — ADD INSTRUMENT MODAL · clean tile glass
   The 9 instrument cards inside the Add-instrument modal
   (.ms-instr-tile) and their icon squares (.ms-instr-tile-ico)
   used var(--lg-fill) (.06 white). Even after the popover hoist
   landed the modal shell where backdrop-filter could see the
   bg-stage, the tile cards still read as dark grey panels
   because their own .06 alpha is too subtle. Applied the user-
   prescribed clean recipe — same shape as .ms-master, .ms-stage,
   and the action buttons. Icon square gets the same recipe at
   slightly lower alphas so it nests cleanly inside the tile. */
        .music-studio-inline-host .ms-instr-tile {
          background: rgba(255, 255, 255, .08) !important;
          background-image: none !important;
          border: 1px solid rgba(255, 255, 255, .22) !important;
          -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          backdrop-filter: blur(40px) saturate(1.8) brightness(1.05) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .30) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 24px 60px -12px rgba(0, 0, 0, .55) !important;
        }

        .music-studio-inline-host .ms-instr-tile:hover {
          background: rgba(255, 255, 255, .14) !important;
          border-color: rgba(255, 255, 255, .38) !important;
          transform: translateY(-2px) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .40) inset,
            0 -1px 0 rgba(0, 0, 0, .12) inset,
            0 0 0 1px rgba(255, 255, 255, .10) inset,
            0 28px 70px -12px rgba(0, 0, 0, .60),
            0 0 28px rgba(255, 255, 255, .18) !important;
        }

        .music-studio-inline-host .ms-instr-tile-ico {
          background: rgba(255, 255, 255, .06) !important;
          border: 1px solid rgba(255, 255, 255, .18) !important;
          box-shadow:
            0 1px 0 rgba(255, 255, 255, .20) inset,
            0 0 0 1px rgba(255, 255, 255, .04) inset !important;
        }

        /* 2026-05-12 b.361 — My music button inside the meta row.
   Visually matches the other meta pills (same height, same glass
   recipe, same hover ramp) but with an icon + label instead of
   a Label/Value/Caret triplet. */
        .music-studio-inline-host .ms-sw-songs-btn {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          padding: 8px 14px;
          border-radius: 999px;
          background: rgba(255, 255, 255, .04);
          border: 1px solid rgba(255, 255, 255, .16);
          color: var(--text);
          font-family: var(--font-ui);
          font-size: 11.5px;
          font-weight: 700;
          letter-spacing: .02em;
          cursor: pointer;
          white-space: nowrap;
          transition: all .15s var(--ease);
          -webkit-backdrop-filter: var(--lg-blur-light);
          backdrop-filter: var(--lg-blur-light);
        }

        .music-studio-inline-host .ms-sw-songs-btn:hover {
          background: rgba(255, 255, 255, .08);
          border-color: rgba(255, 255, 255, .28);
        }

        .music-studio-inline-host .ms-sw-songs-ico {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 14px;
          height: 14px;
          flex: 0 0 auto;
        }

        .music-studio-inline-host .ms-sw-songs-ico svg {
          width: 14px;
          height: 14px;
        }


/* ════════════════════════════════════════════════════════════════════
   INLINE MUSIC STUDIO LAYOUT PARITY (b.259).
   Re-homed from chat.css final-sweep in b.871. 146 lines.
   This block was originally about making the parent chat input bar
   mirror the Music Studio iframe's input bar styling, but the rules
   are scoped via [data-embedded] and .ms-* selectors so they
   architecturally belong in music-studio.css.
   ════════════════════════════════════════════════════════════════════ */

    /* ============================================================
   2026-05-11 b.259 — INLINE MUSIC STUDIO LAYOUT PARITY
   ============================================================
   When the studio lived in an iframe, an inject pipeline added
   position:fixed pinning so the inputbar sat 10px from the viewport
   bottom and the meta (controls) row sat 86px from the bottom —
   identical coordinates to chat (.ce-input-row + tabs row) and
   visual studio (.input-row + .controls). That inject pipeline was
   deleted in b.257 along with the iframe; without it, the inline
   studio's input bar floats mid-page and the controls row sits
   wherever normal flow puts it. These rules restore the pinning,
   scoped to the host so they only affect the music surface.

   Numbers MUST match:
     - chat:   .ce-stage max-width:1080px + .ce-input-row at bottom
     - visual: .controls fixed bottom:86px, .input-bar input at bottom:10px
     - music:  .ms-sw-inputbar bottom:10px, .ms-sw-meta bottom:86px,
               wrappers full-width minus 22px gutters
   ============================================================ */
    .music-studio-inline-host .ms-sw-shell,
    .music-studio-inline-host .ms-mu-shell,
    .music-studio-inline-host .ms-stage-shell,
    .music-studio-inline-host .ms-page-shell {
      max-width: none !important;
      width: auto !important;
      margin-inline: 22px !important;
    }

    .music-studio-inline-host .ms-sw-inputbar,
    .music-studio-inline-host .ms-sw-input-row,
    .music-studio-inline-host .ms-sw-meta {
      max-width: none !important;
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .music-studio-inline-host .ms-sw-inputbar {
      position: fixed !important;
      left: 22px !important;
      right: 22px !important;
      bottom: 8px !important;
      width: auto !important;
      max-width: none !important;
      z-index: 9 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
    }

    .music-studio-inline-host .ms-sw-meta {
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: auto !important;
      gap: 8px !important;
    }

    .music-studio-inline-host .ms-stage {
      padding-bottom: 96px !important;
    }

    /* 2026-05-11 b.265 — liquid-glass pass on Music Studio send button.
   Match the toned-down .ce-send-btn / .btn-create recipe so all
   three "Make / Create / Send" pills read as transparent glass.
   Specificity bumped via `.ms-sw-send-btn.ms-sw-send-btn` (double-
   class trick = 0,3,0) so this wins against the studio's THREE
   competing !important rules that also target this element at
   later positions in the inlined CSS (the "white glowing" recipe). */
    .music-studio-inline-host .ms-sw-send-btn.ms-sw-send-btn {
      background: rgba(255, 255, 255, .04) !important;
      background-image: none !important;
      border: 1.5px solid rgba(255, 255, 255, .30) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.30) !important;
      backdrop-filter: blur(22px) saturate(1.30) !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .18) inset,
        0 -1px 0 rgba(255, 255, 255, .06) inset !important;
    }

    .music-studio-inline-host .ms-sw-send-btn.ms-sw-send-btn:hover:not(:disabled) {
      background: rgba(255, 255, 255, .10) !important;
      border-color: rgba(255, 255, 255, .45) !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, .18) inset,
        0 -1px 0 rgba(255, 255, 255, .06) inset !important;
    }

    /* b.262 — normalize MS send-button typography to match chat exactly.
   Letter-spacing was -.005em; chat uses .02em. */
    .music-studio-inline-host .ms-sw-send-main,
    .music-studio-inline-host .ms-sw-send-cost {
      letter-spacing: .02em !important;
    }

    /* b.263 reverted per user — joy-coin override block removed. */

    /* 2026-05-11 b.260 — kill the global "[data-theme] textarea" catch-all
   rule (line ~776) that paints every textarea with --lg-fill bg +
   1.5px border + pill radius + multi-layer inset shadow. That's the
   "inner pill" the user saw inside the studio's input row. We
   override for the music studio's textarea specifically, restoring
   the studio's intended transparent borderless look so the textarea
   reads as part of its parent input-row pill rather than its own
   floating capsule. Same fix applied to chat's .ce-textarea and
   VS's #prompt via earlier rules — this brings parity. */
    .music-studio-inline-host textarea,
    .music-studio-inline-host .ms-sw-input {
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      /* Vertical alignment — pull the text up so the placeholder sits
     visually centered in the input row pill rather than near the
     bottom (the studio's align-items:flex-end + the textarea's
     min-height combine to push text low). */
      align-self: center !important;
    }

    /* b.515 — High-specificity override that BEATS the global
   `[data-theme] textarea { border-radius:22px !important }` rule.
   Same specificity as the global (0,1,1), but later in the cascade,
   so any textarea inside a chat-console wrapper that's been given
   .lg-glass-input loses ALL visible boundary — no inner pill, no
   inner box. The user kept seeing a "box within a box" because the
   global was still painting the textarea's 22px radius through. */
    [data-theme] .lg-glass-input textarea,
    [data-theme] textarea.lg-glass-bare,
    [data-theme] .ce-vc-setup-composer textarea,
    [data-theme] .ce-vc-custom-wrap textarea {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* ============================================================
       2026-05-18 b.922 — SONGWRITER RESULT CARD · VERTICAL REDESIGN
       ============================================================
       Old card was a 2-col grid (72px cover | content) that broke when
       text wrapped — title overlapped Download MP3, controls smashed
       into meta. New layout: single vertical stack — large square
       cover on top, serif title centered below, scrubber + actions
       beneath in a clean flow. Inspired by classic album sleeves.

       This block sits at the END of music-studio.css so it wins on
       source order against every earlier .ms-sw-result-ready rule.
       Every property uses !important + the host scope for maximum
       specificity. ============================================ */
    /* Lift the result card out of normal flow and center it on the
       viewport. -20% size pass: width 390 → 312. */
    .music-studio-inline-host .ms-sw-result {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: min(90vw, 340px) !important;
      max-width: 340px !important;
      max-height: 86vh !important;
      overflow-y: auto !important;
      z-index: 60 !important;
      margin: 0 !important;
    }

    /* SCOPED to ready state ONLY so the ready container doesn't paint
       its padding + glow during the composing state (was leaking dead
       space + the colored bottom bloom into the loading card). */
    .music-studio-inline-host .ms-sw-result-ready {
      display: none !important;
    }
    .music-studio-inline-host .ms-sw-result[data-state="ready"] .ms-sw-result-ready {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0 !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      grid-template-areas: none !important;
      padding: 16px 16px 18px !important;
      max-width: 100% !important;
      margin: 0 !important;
      position: relative !important;
      isolation: isolate !important;
    }

    /* Diffused colored glow underneath the album art — only when ready. */
    .music-studio-inline-host .ms-sw-result[data-state="ready"] .ms-sw-result-ready::before {
      content: '' !important;
      position: absolute !important;
      left: 10% !important;
      right: 10% !important;
      top: 55% !important;
      height: 45% !important;
      background: radial-gradient(60% 80% at 50% 30%,
        rgba(var(--theme-accent-rgb, 252,166,0), .28),
        rgba(var(--theme-accent-rgb, 252,166,0), .10) 45%,
        transparent 75%) !important;
      filter: blur(28px) !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover {
      /* Album-photo style. Hairline border + soft drop shadow only. */
      width: 100% !important;
      max-width: 100% !important;
      aspect-ratio: 1 / 1 !important;
      height: auto !important;
      margin: 0 auto 16px !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      position: relative !important;
      background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow:
        0 26px 50px -20px rgba(0,0,0,.55),
        0 10px 22px -12px rgba(0,0,0,.35) !important;
      grid-column: auto !important;
      grid-row: auto !important;
      grid-area: auto !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      border-radius: 14px !important;
      display: block !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover-default {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-weight: 600 !important;
      font-size: 76px !important;
      color: rgba(255,255,255,.88) !important;
      letter-spacing: -.02em !important;
      text-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover-edit {
      /* Liquid-glass Customize pill — top-left of the artwork. */
      position: absolute !important;
      left: 10px !important;
      top: 10px !important;
      bottom: auto !important;
      right: auto !important;
      transform: none !important;
      width: auto !important;
      height: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 5px !important;
      padding: 5px 10px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.07) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 100%) !important;
      backdrop-filter: blur(22px) saturate(1.4) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
      border: 1px solid rgba(255,255,255,.20) !important;
      color: rgba(255,255,255,.80) !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity .18s ease, background .18s ease !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.30) inset,
        0 -1px 0 rgba(0,0,0,.18) inset,
        0 4px 12px -4px rgba(0,0,0,.45) !important;
      inset: 10px auto auto 10px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover-edit:hover {
      background: rgba(255,255,255,.18) !important;
      border-color: rgba(255,255,255,.45) !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover-edit svg {
      width: 11px !important;
      height: 11px !important;
      flex: 0 0 11px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover-edit span {
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover:hover .ms-sw-cover-edit,
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover.ctrl-visible .ms-sw-cover-edit {
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-body {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      width: 100% !important;
      padding: 0 !important;
      position: static !important;
      grid-column: auto !important;
      grid-row: auto !important;
      grid-area: auto !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-head {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 8px !important;
      width: 100% !important;
      padding: 0 !important;
      position: static !important;
      grid-area: auto !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title {
      font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
      font-weight: 500 !important;
      font-size: 22px !important;
      line-height: 1.15 !important;
      letter-spacing: -.005em !important;
      color: rgba(255,255,255,.96) !important;
      text-align: center !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 2px 6px !important;
      margin: 0 !important;
      border-radius: 8px !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      text-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title:hover,
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title:focus {
      background: rgba(255,255,255,.04) !important;
      outline: 1px dashed rgba(255,255,255,.18) !important;
      outline-offset: 4px !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta {
      /* Style / Tempo / Voice / Language chips line — centered, subtle. */
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 0 !important;
      font-size: 12.5px !important;
      color: rgba(255,255,255,.62) !important;
      letter-spacing: .01em !important;
      text-align: center !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta span {
      padding: 0 8px !important;
      position: relative !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta span + span::before {
      content: '·' !important;
      position: absolute !important;
      left: -2px !important;
      color: rgba(255,255,255,.35) !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-scrubber {
      width: 100% !important;
      margin-top: 8px !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-actions {
      /* CRITICAL: kill the legacy position:absolute + top/right
         coordinates that were anchoring this row to the card's
         top-right (stacking it on top of the title/scrubber). */
      position: static !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      bottom: auto !important;
      z-index: auto !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;        /* never wrap — keep 3 in a row */
      justify-content: space-between !important;
      align-items: center !important;
      gap: 4px !important;
      margin-top: 4px !important;
      width: 100% !important;
      grid-area: auto !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-action {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 7px 6px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      font-weight: 500 !important;
      letter-spacing: .005em !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      justify-content: center !important;
      gap: 5px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-action svg {
      width: 13px !important;
      height: 13px !important;
      flex: 0 0 13px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-action span {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /* Close button stays absolute top-right of the card shell. */
    .music-studio-inline-host .ms-sw-result .ms-sw-result-close {
      top: 12px !important;
      right: 12px !important;
      z-index: 10 !important;
    }
    /* ===== end vertical redesign block ===== */

    /* ============================================================
       b.922 — COMPOSING (loading) CARD · compact pass
       Trim dead space — vinyl smaller, tighter gaps, drop the
       redundant "COMPOSING" eyebrow (spinning vinyl + cycling step
       already convey progress). ===== */
    .music-studio-inline-host .ms-sw-result-generating {
      padding: 16px 18px !important;
      gap: 14px !important;
      align-items: center !important;
      min-height: 0 !important;
    }
    .music-studio-inline-host .ms-sw-vinyl {
      width: 64px !important;
      height: 64px !important;
      flex: 0 0 64px !important;
    }
    .music-studio-inline-host .ms-sw-gen-stage {
      display: none !important;
    }
    .music-studio-inline-host .ms-sw-gen-text {
      gap: 4px !important;
    }
    .music-studio-inline-host .ms-sw-gen-headline {
      font-size: 17px !important;
      line-height: 1.2 !important;
    }
    .music-studio-inline-host .ms-sw-gen-step {
      min-height: 16px !important;
    }
    .music-studio-inline-host .ms-sw-gen-progress {
      margin-top: 6px !important;
    }
    /* ===== end composing-card compact block ===== */

    /* ============================================================
       b.922 — MUSIC STUDIO · EXPOSE BUTTON + FULL-SCREEN GALLERY
       Replaces the deleted "My music" header pill. The button sits
       fixed just above the right end of the input bar; click reveals
       a full-screen gallery of all generated songs + productions in
       the new vertical album-card layout.
       ============================================================ */
    .music-studio-inline-host .ms-expose-btn {
      position: fixed !important;
      right: 26px !important;
      /* b.922 — another 30px down (106 → 76). */
      bottom: 76px !important;
      width: 44px !important;
      height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 14px !important;
      background: rgba(255,255,255,.04) !important;
      border: 1.5px solid rgba(255,255,255,.30) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.30) !important;
      backdrop-filter: blur(22px) saturate(1.30) !important;
      color: rgba(255,255,255,.92) !important;
      cursor: pointer !important;
      z-index: 9 !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.18) inset,
        0 -1px 0 rgba(255,255,255,.06) inset,
        0 8px 20px -8px rgba(0,0,0,.45) !important;
      transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
    }
    .music-studio-inline-host .ms-expose-btn:hover {
      background: rgba(255,255,255,.10) !important;
      border-color: rgba(255,255,255,.45) !important;
      transform: translateY(-1px) !important;
    }
    .music-studio-inline-host .ms-expose-btn svg {
      width: 20px !important;
      height: 20px !important;
    }

    /* ─── full-screen gallery overlay ─── */
    /* Default state has ZERO backdrop-filter, transparent bg, no
       paint. Safari was caching a GPU compositing layer when the
       hidden element kept backdrop-filter set, causing a persistent
       dark tint after entering MS. Only apply the heavy filters
       when the overlay is actually shown. */
    .music-studio-inline-host .music-expose {
      position: fixed !important;
      inset: 0 !important;
      z-index: 200 !important;
      display: none !important;
      visibility: hidden !important;
      padding: 56px clamp(20px, 4vw, 60px) 80px !important;
      overflow-y: auto !important;
      background: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    body.music-expose-active .music-studio-inline-host .music-expose {
      /* b.922 — Layered on top of the bg-stage like Visual Studio.
         No tint, no backdrop blur — the music studio's animated
         theme video shows through cleanly. */
      display: block !important;
      visibility: visible !important;
      background: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    .music-studio-inline-host .music-expose-close {
      position: fixed !important;
      top: 22px !important;
      right: 22px !important;
      width: 44px !important;
      height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 14px !important;
      background: rgba(255,255,255,.06) !important;
      border: 1.5px solid rgba(255,255,255,.28) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.30) !important;
      backdrop-filter: blur(22px) saturate(1.30) !important;
      color: rgba(255,255,255,.95) !important;
      cursor: pointer !important;
      z-index: 210 !important;
    }
    .music-studio-inline-host .music-expose-close:hover {
      background: rgba(255,255,255,.12) !important;
    }
    .music-studio-inline-host .music-expose-close svg {
      width: 20px !important; height: 20px !important;
    }

    .music-studio-inline-host .music-expose-tabs {
      display: flex !important;
      gap: 8px !important;
      justify-content: center !important;
      margin: 0 auto 32px !important;
      max-width: 360px !important;
      padding: 4px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.04) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      backdrop-filter: blur(14px) !important;
    }
    .music-studio-inline-host .music-expose-tab {
      flex: 1 1 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      padding: 8px 18px !important;
      border-radius: 999px !important;
      background: transparent !important;
      border: 0 !important;
      color: rgba(255,255,255,.62) !important;
      font-family: var(--font-display) !important;
      font-weight: 700 !important;
      font-size: 12.5px !important;
      letter-spacing: .04em !important;
      text-transform: uppercase !important;
      cursor: pointer !important;
      transition: background .2s ease, color .2s ease !important;
    }
    .music-studio-inline-host .music-expose-tab.on {
      background: rgba(255,255,255,.10) !important;
      color: rgba(255,255,255,.98) !important;
    }
    .music-studio-inline-host .music-expose-tab-count {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 22px !important;
      padding: 0 6px !important;
      height: 18px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.10) !important;
      font-size: 10.5px !important;
      letter-spacing: .02em !important;
    }
    .music-studio-inline-host .music-expose-tab.on .music-expose-tab-count {
      background: rgba(255,255,255,.20) !important;
    }

    .music-studio-inline-host .music-expose-grid {
      display: grid !important;
      /* Match result card max-width 340px → cards in gallery also cap
         around 280-300 so they read as the same object, just smaller. */
      grid-template-columns: repeat(auto-fill, minmax(260px, 300px)) !important;
      justify-content: center !important;
      gap: 28px !important;
      max-width: 1280px !important;
      margin: 0 auto !important;
    }

    /* Each card = visual replica of the result card.
       Same glass shell, same cover, same title/meta, same scrubber
       and same action buttons. Sized down to fit the gallery grid. */
    .music-studio-inline-host .music-expose-card {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
      padding: 14px 14px 16px !important;
      border-radius: 22px !important;
      background: rgba(255,255,255,.05) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
      backdrop-filter: blur(18px) saturate(1.2) !important;
      box-shadow:
        0 30px 60px -28px rgba(0,0,0,.55),
        0 1px 0 rgba(255,255,255,.16) inset,
        0 -1px 0 rgba(255,255,255,.05) inset !important;
      cursor: pointer !important;
      transition: transform .25s ease, background .25s ease, border-color .25s ease !important;
    }
    .music-studio-inline-host .music-expose-card:hover {
      transform: translateY(-3px) !important;
      background: rgba(255,255,255,.08) !important;
      border-color: rgba(255,255,255,.24) !important;
    }
    .music-studio-inline-host .music-expose-cover {
      position: relative !important;
      width: 100% !important;
      aspect-ratio: 1 / 1 !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      margin-bottom: 8px !important;
      background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow:
        0 20px 36px -18px rgba(0,0,0,.55),
        0 8px 18px -10px rgba(0,0,0,.35) !important;
    }
    .music-studio-inline-host .music-expose-cover img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }
    .music-studio-inline-host .music-expose-cover-default {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 800 !important;
      font-size: 72px !important;
      color: rgba(255,255,255,.88) !important;
      letter-spacing: -.02em !important;
      text-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
    }
    .music-studio-inline-host .music-expose-title {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 800 !important;
      font-size: 19px !important;
      line-height: 1.15 !important;
      letter-spacing: -.02em !important;
      color: rgba(255,255,255,.96) !important;
      text-align: center !important;
      margin: 0 !important;
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      text-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
    }
    .music-studio-inline-host .music-expose-meta {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 0 !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      color: rgba(255,255,255,.62) !important;
      letter-spacing: .01em !important;
    }
    .music-studio-inline-host .music-expose-meta span {
      padding: 0 8px !important;
      position: relative !important;
    }
    .music-studio-inline-host .music-expose-meta span + span::before {
      content: '·' !important;
      position: absolute !important;
      left: -2px !important;
      color: rgba(255,255,255,.35) !important;
    }

    /* Scrubber + play button — same anatomy as the result card. */
    .music-studio-inline-host .music-expose-scrubber {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-top: 6px !important;
    }
    .music-studio-inline-host .music-expose-play {
      flex: 0 0 22px !important;
      width: 22px !important;
      height: 22px !important;
      border-radius: 50% !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      background: rgba(255,255,255,.92) !important;
      border: 1px solid rgba(255,255,255,.55) !important;
      color: rgba(8,6,15,1) !important;
      cursor: pointer !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 4px 10px -3px rgba(0,0,0,.45) !important;
    }
    .music-studio-inline-host .music-expose-play svg {
      width: 10px !important;
      height: 10px !important;
    }
    .music-studio-inline-host .music-expose-bar {
      flex: 1 1 auto !important;
      height: 4px !important;
      border-radius: 2px !important;
      background: rgba(255,255,255,.10) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .music-studio-inline-host .music-expose-fill {
      position: absolute !important;
      inset: 0 !important;
      width: 0% !important;
      background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 100%) !important;
      border-radius: 2px !important;
    }
    .music-studio-inline-host .music-expose-time {
      display: flex !important;
      justify-content: space-between !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 10px !important;
      color: rgba(255,255,255,.55) !important;
      letter-spacing: .01em !important;
      margin-top: 2px !important;
    }

    /* Action buttons — match result card's pill row, three in line. */
    .music-studio-inline-host .music-expose-actions {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 4px !important;
      margin-top: 6px !important;
      width: 100% !important;
    }
    .music-studio-inline-host .music-expose-action {
      flex: 1 1 0 !important;
      min-width: 0 !important;
      padding: 6px 4px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.04) !important;
      border: 1px solid rgba(255,255,255,.18) !important;
      color: rgba(255,255,255,.92) !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-weight: 600 !important;
      font-size: 9.5px !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .music-studio-inline-host .music-expose-action:hover {
      background: rgba(255,255,255,.10) !important;
      border-color: rgba(255,255,255,.30) !important;
    }
    .music-studio-inline-host .music-expose-action svg {
      width: 10px !important;
      height: 10px !important;
      flex: 0 0 10px !important;
    }

    .music-studio-inline-host .music-expose-empty {
      max-width: 480px !important;
      margin: 80px auto !important;
      text-align: center !important;
      color: rgba(255,255,255,.55) !important;
    }
    .music-studio-inline-host .music-expose-empty h3 {
      font-family: 'Cormorant Garamond', Georgia, serif !important;
      font-weight: 600 !important;
      font-size: 28px !important;
      color: rgba(255,255,255,.88) !important;
      margin: 0 0 8px !important;
    }
    .music-studio-inline-host .music-expose-empty p {
      font-size: 14px !important;
      margin: 0 !important;
    }
    /* ===== end music-expose block ===== */

    /* ============================================================
       b.922 — NUCLEAR TINT DEFENSE
       The "dark tint persists after entering MS" bug: something
       inside the music-studio-inline-host or its overlays was
       keeping a paint surface alive after MS hid. This block force-
       neutralises EVERY rendering hook on every MS element when
       the user isn't actively in the Music tab. Belt-and-braces:
       hits backdrop-filter, filter, background, opacity, AND
       pointer-events together. Source-order last — wins on tie.
       ============================================================ */
    body:not(.music-studio-active) section.music-studio-inline-host,
    body:not(.music-studio-active) section.music-studio-inline-host * {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      filter: none !important;
    }
    body:not(.music-studio-active) section.music-studio-inline-host {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
    }
    /* When MS is active but the expose gallery is NOT open, the
       overlay itself must paint NOTHING. */
    body:not(.music-expose-active) section.music-studio-inline-host .music-expose,
    body:not(.music-expose-active) section.music-studio-inline-host .music-expose * {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      filter: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
    }
    body:not(.music-expose-active) section.music-studio-inline-host .music-expose {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    /* ===== end nuclear tint defense ===== */

    /* ============================================================
       b.922 — EXPOSE: hide every MS surface except the gallery,
       matching the Visual Studio canvas-expose pattern. When
       body.music-expose-active is on, hide all direct children of
       the music studio inline host EXCEPT the bg-stage (background
       video) and the gallery itself.
       ============================================================ */
    body.music-expose-active .music-studio-inline-host > *:not(.bg-stage):not(.music-expose) {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    /* The expose button itself disappears too — close button inside
       the overlay is the way out. */
    body.music-expose-active .music-studio-inline-host .ms-expose-btn {
      display: none !important;
    }

    /* ============================================================
       b.922 — EXPOSE CARDS use the new result-card aesthetic
       (cover → bold title → meta line). Already in place but
       tightened here. ============================================*/
    .music-studio-inline-host .music-expose-title {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 800 !important;
      font-size: 18px !important;
      letter-spacing: -.01em !important;
    }
    .music-studio-inline-host .music-expose-cover-default {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 800 !important;
      font-size: clamp(64px, 16vw, 96px) !important;
      letter-spacing: -.02em !important;
    }
    /* ===== end b.922 card polish ===== */

    /* ============================================================
       b.922 — Card polish:
       (1) Hide X close button — click-outside dismisses now.
       (2) Play thumb anchored to fill's right edge but with LEFT
           edge of the button at the playhead (no X translate), so
           at fill=0% it sits flush against the bar's left edge
           instead of poking past it into the card padding.
       (3) Scrubber + play moved up 5px for tighter composition.
       ============================================================ */
    .music-studio-inline-host .ms-sw-result .ms-sw-result-close {
      display: none !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-play {
      /* b.922 — shifted 8px left of the bar's start. */
      transform: translate(-8px, -50%) !important;
      width: 26px !important;
      height: 26px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-play:hover {
      transform: translate(-8px, -50%) scale(1.08) !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-play svg {
      width: 12px !important;
      height: 12px !important;
    }

    .music-studio-inline-host .ms-sw-result-ready .ms-sw-scrubber {
      margin-top: -2px !important;
      margin-bottom: 18px !important; /* room for play button + time row */
    }
    /* Push time row down so it clears the 26px play thumb. */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-scrubber-time {
      top: 18px !important;
      font-size: 10.5px !important;
      color: rgba(255,255,255,.55) !important;
    }
    /* ===== end b.922 card polish ===== */

    /* ============================================================
       b.922 — Typography pass: more pronounced title + buttons.
       ============================================================ */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, "Helvetica Neue", sans-serif !important;
      font-weight: 800 !important;
      font-size: 22px !important;
      letter-spacing: -.02em !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-action {
      font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
      font-weight: 600 !important;
      font-size: 10.5px !important;
      letter-spacing: 0 !important;
    }
    /* ===== end typography pass ===== */

    /* ============================================================
       b.922 — ALBUM ARTWORK MODAL · de-green pass
       Strip every theme-accent tint from the modal so it reads as
       pure liquid glass. Also center the X icon properly.
       ============================================================ */
    .music-studio-inline-host .ms-art-preview {
      background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      backdrop-filter: blur(18px) saturate(1.2) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    }
    .music-studio-inline-host .ms-art-quality-opt.on {
      background: rgba(255,255,255,.10) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
      border-color: rgba(255,255,255,.35) !important;
    }
    /* Replace the OS-tinted radio bullet with a clean glass disc. */
    .music-studio-inline-host .ms-art-quality-opt input[type="radio"] {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: 14px !important;
      height: 14px !important;
      border-radius: 50% !important;
      border: 1.5px solid rgba(255,255,255,.40) !important;
      background: transparent !important;
      accent-color: rgba(255,255,255,.85) !important;
      position: relative !important;
      cursor: pointer !important;
    }
    .music-studio-inline-host .ms-art-quality-opt input[type="radio"]:checked {
      border-color: rgba(255,255,255,.85) !important;
      background: rgba(255,255,255,.10) !important;
    }
    .music-studio-inline-host .ms-art-quality-opt input[type="radio"]:checked::after {
      content: '' !important;
      position: absolute !important;
      inset: 3px !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,.95) !important;
    }
    /* Loading overlay aura — strip green */
    .music-studio-inline-host .ms-art-preview-loading-aura span {
      background: rgba(255,255,255,.40) !important;
    }
    .music-studio-inline-host .ms-art-preview-loading-aura span:nth-child(2) {
      background: rgba(255,255,255,.30) !important;
    }
    /* Close button — perfectly center the SVG X. */
    .music-studio-inline-host .ms-art-close {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
    }
    .music-studio-inline-host .ms-art-close svg {
      width: 14px !important;
      height: 14px !important;
      display: block !important;
    }
    /* ===== end album-modal de-green ===== */

    /* ============================================================
       b.922 — EXPOSE · IDENTICAL-TO-RESULT-CARD + 20% smaller +
       left-justified grid that fills the screen edge to edge.
       ============================================================ */
    .music-studio-inline-host .music-expose {
      padding: 56px 40px 80px !important;
    }
    .music-studio-inline-host .music-expose-grid {
      /* Stretch full width, left-aligned. Cards 20% smaller (260 → 208,
         300 → 240). As many per row as fit, then wrap. align-items:
         start so each card keeps its OWN height — hover on one card
         doesn't stretch sibling cards in the same row. Tighter row
         gap so the second row sits compact under the first; when a
         card expands, the row's own height grows and the row below
         shifts down automatically. */
      grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)) !important;
      grid-auto-rows: min-content !important;
      align-items: start !important;
      justify-content: start !important;
      column-gap: 22px !important;
      row-gap: 14px !important;
      max-width: none !important;
      margin: 0 !important;
    }
    .music-studio-inline-host .music-expose-card {
      /* Same anatomy as the result card — proportionally shrunk 20%. */
      padding: 11px 11px 13px !important;
      gap: 6px !important;
      border-radius: 18px !important;
    }
    .music-studio-inline-host .music-expose-cover {
      border-radius: 10px !important;
      margin-bottom: 6px !important;
    }
    .music-studio-inline-host .music-expose-cover-default {
      font-size: 56px !important;
    }
    .music-studio-inline-host .music-expose-title {
      font-size: 15px !important;
    }
    .music-studio-inline-host .music-expose-meta {
      font-size: 9.5px !important;
    }
    .music-studio-inline-host .music-expose-scrubber {
      margin-top: 4px !important;
      gap: 6px !important;
    }
    .music-studio-inline-host .music-expose-play {
      flex: 0 0 18px !important;
      width: 18px !important;
      height: 18px !important;
    }
    .music-studio-inline-host .music-expose-play svg {
      width: 8px !important;
      height: 8px !important;
    }
    .music-studio-inline-host .music-expose-bar {
      height: 3px !important;
    }
    .music-studio-inline-host .music-expose-time {
      font-size: 9px !important;
      margin-top: 1px !important;
    }
    .music-studio-inline-host .music-expose-actions {
      gap: 3px !important;
      margin-top: 4px !important;
    }
    /* Icon-only round pills — label shows as native tooltip on hover. */
    .music-studio-inline-host .music-expose-action {
      flex: 0 0 32px !important;
      width: 32px !important;
      height: 32px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(255,255,255,.06) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
      border: 1px solid rgba(255,255,255,.30) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
      backdrop-filter: blur(18px) saturate(1.3) !important;
      color: rgba(255,255,255,.95) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 -1px 0 rgba(0,0,0,.16) inset,
        0 4px 10px -3px rgba(0,0,0,.40) !important;
      transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
    }
    .music-studio-inline-host .music-expose-action:hover {
      background: rgba(255,255,255,.16) !important;
      border-color: rgba(255,255,255,.55) !important;
      transform: translateY(-1px) !important;
    }
    .music-studio-inline-host .music-expose-action svg {
      width: 13px !important;
      height: 13px !important;
      flex: 0 0 13px !important;
    }
    .music-studio-inline-host .music-expose-actions {
      gap: 8px !important;
      justify-content: center !important;
    }
    /* ===== end expose shrink + stretch ===== */

    /* ============================================================
       b.922 — EXPOSE · liquid-glass play button (was opaque white)
       ============================================================ */
    .music-studio-inline-host .music-expose-play {
      background: rgba(255,255,255,.08) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%) !important;
      border: 1px solid rgba(255,255,255,.35) !important;
      backdrop-filter: blur(18px) saturate(1.3) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
      color: rgba(255,255,255,.95) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 -1px 0 rgba(0,0,0,.18) inset,
        0 4px 10px -3px rgba(0,0,0,.45) !important;
    }
    .music-studio-inline-host .music-expose-play:hover {
      background: rgba(255,255,255,.18) !important;
      border-color: rgba(255,255,255,.55) !important;
    }
    /* ===== end expose play-button glass ===== */

    /* ============================================================
       b.922 — EXPOSE · DYNAMIC CARD
       Default state: only the cover + title + meta (genre) show.
       Hidden controls use display:none so they reserve ZERO space —
       no dead pad below the meta. On hover, they appear.
       ============================================================ */
    .music-studio-inline-host .music-expose-card .music-expose-scrubber,
    .music-studio-inline-host .music-expose-card .music-expose-time,
    .music-studio-inline-host .music-expose-card .music-expose-actions {
      display: none !important;
    }
    .music-studio-inline-host .music-expose-card:hover .music-expose-scrubber {
      display: flex !important;
    }
    .music-studio-inline-host .music-expose-card:hover .music-expose-time {
      display: flex !important;
    }
    .music-studio-inline-host .music-expose-card:hover .music-expose-actions {
      display: flex !important;
    }
    /* ===== end expose dynamic card ===== */

    /* ============================================================
       b.922 — COMPOSING VINYL · wild diffused dancing orbs
       Replaces the boring grey disc. No background — just five soft
       blobs of complementary colour drifting in a roughly circular
       arrangement, blurred to a watercolour-like diffusion. Each
       orb is a radial gradient with white-yellow inner highlight
       that complements the liquid-glass aesthetic.
       ============================================================ */
    .music-studio-inline-host .ms-sw-vinyl {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      overflow: visible !important;
      position: relative !important;
    }
    .music-studio-inline-host .ms-sw-vinyl::before,
    .music-studio-inline-host .ms-sw-vinyl::after {
      display: none !important;
    }
    .music-studio-inline-host .ms-sw-vinyl-orb {
      position: absolute !important;
      border-radius: 50% !important;
      filter: blur(14px) saturate(1.15) !important;
      mix-blend-mode: screen !important;
      will-change: transform, opacity !important;
      pointer-events: none !important;
    }
    /* Five orbs, each a soft radial gradient with a white-yellow core
       fading into a vivid hue. Different sizes, positions, and
       animation paths so the swirl never reads as repetitive. */
    .music-studio-inline-host .ms-sw-vinyl-orb-1 {
      width: 55%; height: 55%;
      top: 10%; left: 5%;
      background: radial-gradient(circle at 35% 30%,
        rgba(255, 250, 220, .85) 0%,
        rgba(255, 130, 180, .80) 35%,
        rgba(255, 130, 180, 0) 75%);
      animation: msi-vinyl-drift1 4.8s ease-in-out infinite !important;
    }
    .music-studio-inline-host .ms-sw-vinyl-orb-2 {
      width: 48%; height: 48%;
      top: 35%; left: 45%;
      background: radial-gradient(circle at 40% 35%,
        rgba(255, 255, 240, .85) 0%,
        rgba(120, 200, 255, .85) 35%,
        rgba(120, 200, 255, 0) 75%);
      animation: msi-vinyl-drift2 5.6s ease-in-out infinite !important;
    }
    .music-studio-inline-host .ms-sw-vinyl-orb-3 {
      width: 42%; height: 42%;
      top: 50%; left: 8%;
      background: radial-gradient(circle at 50% 30%,
        rgba(255, 245, 200, .80) 0%,
        rgba(190, 130, 255, .80) 40%,
        rgba(190, 130, 255, 0) 78%);
      animation: msi-vinyl-drift3 4.2s ease-in-out infinite !important;
    }
    .music-studio-inline-host .ms-sw-vinyl-orb-4 {
      width: 38%; height: 38%;
      top: 8%; left: 50%;
      background: radial-gradient(circle at 40% 40%,
        rgba(255, 255, 230, .85) 0%,
        rgba(140, 255, 200, .75) 40%,
        rgba(140, 255, 200, 0) 78%);
      animation: msi-vinyl-drift4 6.2s ease-in-out infinite !important;
    }
    .music-studio-inline-host .ms-sw-vinyl-orb-5 {
      width: 35%; height: 35%;
      top: 55%; left: 55%;
      background: radial-gradient(circle at 45% 30%,
        rgba(255, 250, 215, .85) 0%,
        rgba(255, 195, 110, .80) 40%,
        rgba(255, 195, 110, 0) 78%);
      animation: msi-vinyl-drift5 5.0s ease-in-out infinite !important;
    }

    @keyframes msi-vinyl-drift1 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .92; }
      33%      { transform: translate(18%, 14%) scale(1.08); opacity: 1; }
      66%      { transform: translate(8%, -10%) scale(.95); opacity: .85; }
    }
    @keyframes msi-vinyl-drift2 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
      35%      { transform: translate(-22%, 10%) scale(1.10); opacity: .95; }
      70%      { transform: translate(-8%, -18%) scale(.92); opacity: .88; }
    }
    @keyframes msi-vinyl-drift3 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .88; }
      40%      { transform: translate(20%, -16%) scale(1.12); opacity: 1; }
      75%      { transform: translate(6%, 12%) scale(.96); opacity: .82; }
    }
    @keyframes msi-vinyl-drift4 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
      30%      { transform: translate(-14%, 22%) scale(1.05); opacity: .95; }
      65%      { transform: translate(10%, 14%) scale(.94); opacity: .80; }
    }
    @keyframes msi-vinyl-drift5 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .90; }
      33%      { transform: translate(-18%, -14%) scale(1.10); opacity: 1; }
      66%      { transform: translate(-6%, 16%) scale(.95); opacity: .85; }
    }
    /* ===== end vinyl dancing orbs ===== */

    /* ============================================================
       b.922 — EXPOSE · ACTIONS OVERLAY ON COVER
       Pull the three action buttons OUT of the card's vertical
       flow and dock them at the bottom of the album cover. Kills
       the dead space below the time row and gives the cards a
       tight Spotify-style album-cover-with-controls feel.
       ============================================================ */
    .music-studio-inline-host .music-expose-cover {
      position: relative !important;
      overflow: hidden !important;
    }
    /* Soft bottom-of-cover gradient so the floating glass pills
       always read clearly, regardless of the album-art content
       behind them. Revealed on card hover only — base state stays
       clean. */
    .music-studio-inline-host .music-expose-cover::after {
      content: '' !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: 46% !important;
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.42) 100%) !important;
      pointer-events: none !important;
      opacity: 0 !important;
      transition: opacity .22s ease !important;
      z-index: 2 !important;
      border-radius: 0 0 10px 10px !important;
    }
    .music-studio-inline-host .music-expose-card:hover .music-expose-cover::after {
      opacity: 1 !important;
    }

    /* Position the actions group as an absolute overlay just inside
       the cover's bottom edge. Override the default "in normal flow"
       layout from earlier rules. */
    .music-studio-inline-host .music-expose-cover .music-expose-actions {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 8px !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      display: none !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      z-index: 3 !important;
    }
    .music-studio-inline-host .music-expose-card:hover .music-expose-cover .music-expose-actions {
      display: flex !important;
    }

    /* Round 30px liquid-glass icon pills, brighter so they pop
       against the cover. */
    .music-studio-inline-host .music-expose-cover .music-expose-action {
      flex: 0 0 30px !important;
      width: 30px !important;
      height: 30px !important;
      min-width: 0 !important;
      padding: 0 !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(255,255,255,.12) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 100%) !important;
      border: 1px solid rgba(255,255,255,.45) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
      backdrop-filter: blur(22px) saturate(1.4) !important;
      color: rgba(255,255,255,.98) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 -1px 0 rgba(0,0,0,.22) inset,
        0 6px 14px -4px rgba(0,0,0,.55) !important;
      overflow: visible !important;
      transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
    }
    .music-studio-inline-host .music-expose-cover .music-expose-action:hover {
      background: rgba(255,255,255,.26) !important;
      border-color: rgba(255,255,255,.70) !important;
      transform: translateY(-1px) !important;
    }
    .music-studio-inline-host .music-expose-cover .music-expose-action svg {
      width: 13px !important;
      height: 13px !important;
      flex: 0 0 13px !important;
    }
    /* ===== end actions-on-cover overlay ===== */

    /* ============================================================
       b.922 — EXPOSE · COMPACT (no scrubber, no time row)
       Card = cover (with 4 overlay buttons on hover) + title + meta.
       That's it. Card height ≈ cover height + ~50px for text.
       ============================================================ */
    .music-studio-inline-host .music-expose-card .music-expose-scrubber,
    .music-studio-inline-host .music-expose-card .music-expose-time,
    .music-studio-inline-host .music-expose-card:hover .music-expose-scrubber,
    .music-studio-inline-host .music-expose-card:hover .music-expose-time {
      display: none !important;
    }
    /* Tighter card padding now that there's less below the cover. */
    .music-studio-inline-host .music-expose-card {
      padding: 10px 10px 12px !important;
      gap: 4px !important;
    }
    .music-studio-inline-host .music-expose-cover {
      margin-bottom: 4px !important;
    }
    /* Four buttons fit perfectly in the overlay row. */
    .music-studio-inline-host .music-expose-cover .music-expose-actions {
      gap: 7px !important;
    }
    .music-studio-inline-host .music-expose-action-play {
      background: rgba(255,255,255,.20) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.12) 100%) !important;
      border-color: rgba(255,255,255,.60) !important;
    }
    .music-studio-inline-host .music-expose-action-play:hover {
      background: rgba(255,255,255,.34) !important;
      border-color: rgba(255,255,255,.80) !important;
    }
    .music-studio-inline-host .music-expose-action-play svg {
      width: 12px !important;
      height: 12px !important;
      flex: 0 0 12px !important;
      margin-left: 1px !important; /* optical centering for play triangle */
    }
    /* ===== end expose compact ===== */

    /* ── Production cards — open-production affordance ───────────
       Clean card, no overlay buttons. Full card is the click target.
       A subtle arrow-right indicator replaces the play overlay.
       ============================================================ */
    .music-studio-inline-host .music-expose-card--prod {
      cursor: pointer !important;
    }
    .music-studio-inline-host .music-expose-card--prod:hover {
      transform: translateY(-3px) scale(1.01) !important;
      background: rgba(255,255,255,.10) !important;
      border-color: rgba(255,255,255,.28) !important;
    }
    .music-studio-inline-host .music-expose-card--prod:active {
      transform: translateY(-1px) scale(1.00) !important;
      background: rgba(255,255,255,.07) !important;
    }
    /* No overlay on production cards — cover is clean */
    .music-studio-inline-host .music-expose-card--prod .music-expose-cover::after,
    .music-studio-inline-host .music-expose-card--prod .music-expose-cover::before {
      display: none !important;
    }
    /* Suppress any action buttons that may leak in */
    .music-studio-inline-host .music-expose-card--prod .music-expose-actions,
    .music-studio-inline-host .music-expose-card--prod .music-expose-more-wrap,
    .music-studio-inline-host .music-expose-card--prod .music-expose-more-menu,
    .music-studio-inline-host .music-expose-card--prod .music-expose-scrubber,
    .music-studio-inline-host .music-expose-card--prod .music-expose-time {
      display: none !important;
    }
    /* ===== end production card ===== */

    /* ============================================================
       b.923 FIX — CIRCLE PLAYER RING
       b.923 added .ms-sw-circle-player + .ms-sw-ring SVG to the
       result card but never wrote CSS for them. The SVG circles
       defaulted to fill:black → 100px black blob → clipped to a
       semicircle by the height:6px scrubber override. Fix: size
       the container, position the SVG absolutely inside it, and
       style the stroke-only rings correctly.
       ============================================================ */

    /* Lift the height:6px override for the circle scrubber variant */
    .music-studio-inline-host .ms-sw-scrubber.ms-sw-scrubber-circle {
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 10px !important;
      position: relative !important;
    }

    .music-studio-inline-host .ms-sw-circle-player {
      position: relative !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 66px !important;
      height: 66px !important;
      flex: 0 0 66px !important;
    }

    /* The SVG ring fills the container, rotated so fill starts from 12 o'clock */
    .music-studio-inline-host .ms-sw-ring {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      transform: rotate(-90deg) !important;
      pointer-events: none !important;
      overflow: visible !important;
    }

    /* Track ring — subtle glass-white */
    .music-studio-inline-host .ms-sw-ring-track {
      fill: none !important;
      stroke: rgba(255,255,255,.18) !important;
      stroke-width: 4 !important;
    }

    /* Fill ring — bright white, caps rounded, animates via dashoffset */
    .music-studio-inline-host .ms-sw-ring-fill {
      fill: none !important;
      stroke: rgba(255,255,255,.92) !important;
      stroke-width: 4 !important;
      stroke-linecap: round !important;
      filter: drop-shadow(0 0 4px rgba(255,255,255,.55)) !important;
      transition: stroke-dashoffset .12s linear !important;
    }

    /* Play button sits on top of the ring, centered */
    .music-studio-inline-host .ms-sw-circle-player .ms-sw-play {
      position: relative !important;
      z-index: 1 !important;
      /* Shrink slightly so it sits inside the ring track */
      width: 44px !important;
      height: 44px !important;
    }

    /* Hide the legacy sentinel bar — it's aria-hidden and zero-size
       but still adds a gap; kill it for the circle layout */
    .music-studio-inline-host .ms-sw-scrubber.ms-sw-scrubber-circle .ms-sw-scrubber-bar {
      display: none !important;
    }

    /* Time row stays below the ring */
    .music-studio-inline-host .ms-sw-scrubber.ms-sw-scrubber-circle .ms-sw-scrubber-time {
      position: static !important;
      margin-top: 0 !important;
    }
    /* ===== end circle player ring ===== */

    /* ============================================================
       EXPOSE CARD — play-button revolving white halo (playing state)
       A conic-gradient arc spins around the button via ::after so
       it reads as a soft white light circling the play icon.
       ============================================================ */
    .music-studio-inline-host .music-expose-action-play {
      position: relative !important;
    }
    .music-studio-inline-host .music-expose-action-play.expose-playing {
      border-color: rgba(255,255,255,.85) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 -1px 0 rgba(0,0,0,.22) inset,
        0 0 14px rgba(255,255,255,.35) !important;
    }
    .music-studio-inline-host .music-expose-action-play.expose-playing::after {
      content: '' !important;
      position: absolute !important;
      inset: -3px !important;
      border-radius: 50% !important;
      background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255,255,255,.80) 28%,
        transparent 56%
      ) !important;
      animation: expose-play-spin 1.6s linear infinite !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }
    @keyframes expose-play-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* ===== end expose play halo ===== */

    /* ============================================================
       RESULT CARD — compressed 4-button redesign
       Layout: cover (with progress bar at its bottom edge, only
       visible while playing) → title → meta → 4 glass icon buttons.
       No time display. Compact spacing throughout.
       ============================================================ */

    /* Strip old text-label action row */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-actions {
      display: none !important;
    }

    /* Ready body = tight vertical flex column */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-body {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      min-width: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
    }

    /* Head: title + meta, tighter */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-head {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 3px !important;
      margin-top: 14px !important;
      margin-bottom: 0 !important;
    }

    /* Title — slightly smaller for compactness */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title {
      font-size: 20px !important;
      font-weight: 800 !important;
      letter-spacing: -.02em !important;
      text-align: center !important;
    }

    /* Meta — genre etc */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta {
      text-align: center !important;
    }

    /* ── Cover progress bar ──────────────────────────────────────
       Sits at the very bottom edge of the album art, inside the
       cover's overflow:hidden clip. Invisible by default; appears
       only when #msSwResult[data-playing="true"] is set. */
    .music-studio-inline-host .ms-sw-cover-progress {
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 3px !important;
      background: rgba(255,255,255,.20) !important;
      cursor: pointer !important;
      opacity: 0 !important;
      transition: opacity .35s ease !important;
      z-index: 5 !important;
    }
    /* Show the bar while the song is playing */
    .music-studio-inline-host #msSwResult[data-playing="true"] .ms-sw-cover-progress {
      opacity: 1 !important;
    }

    .music-studio-inline-host .ms-sw-cover-progress-fill {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 0% !important;
      background: rgba(255,255,255,.95) !important;
      box-shadow: 0 0 6px 1px rgba(255,255,255,.70) !important;
      border-radius: 0 2px 2px 0 !important;
      transition: width .12s linear !important;
    }

    /* ── 4-button row — overlaid at bottom of cover ─────────────
       Absolutely positioned inside .ms-sw-cover so buttons float
       over the album art. Hidden by default; .ctrl-visible on the
       cover fades them in. */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover .ms-sw-act-row {
      position: absolute !important;
      bottom: 13px !important;
      left: 0 !important;
      right: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-evenly !important;
      gap: 0 !important;
      padding: 0 12px !important;
      margin: 0 !important;
      z-index: 11 !important;
      /* Hidden by default */
      opacity: 0 !important;
      transform: translateY(6px) !important;
      pointer-events: none !important;
      transition: opacity 0.45s ease, transform 0.45s ease !important;
    }

    /* Gradient scrim so buttons are legible over any artwork */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover::after {
      content: '' !important;
      position: absolute !important;
      left: 0 !important; right: 0 !important; bottom: 0 !important;
      height: 130px !important;
      background: linear-gradient(to top,
        rgba(0,0,0,.60) 0%,
        rgba(0,0,0,.30) 40%,
        transparent 100%) !important;
      pointer-events: none !important;
      z-index: 10 !important;
      opacity: 0 !important;
      transition: opacity 0.45s ease !important;
      border-radius: 0 0 var(--r-lg, 14px) var(--r-lg, 14px) !important;
    }

    /* Reveal buttons + gradient when cover has .ctrl-visible */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover.ctrl-visible .ms-sw-act-row {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover.ctrl-visible::after {
      opacity: 1 !important;
    }

    /* Base glass pill — all 4 buttons */
    .music-studio-inline-host .ms-sw-act-btn {
      position: relative !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(255,255,255,.09) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.03) 100%) !important;
      border: 1px solid rgba(255,255,255,.28) !important;
      -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
      backdrop-filter: blur(24px) saturate(1.5) !important;
      color: rgba(255,255,255,.92) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 -1px 0 rgba(0,0,0,.16) inset,
        0 5px 14px -4px rgba(0,0,0,.45) !important;
      cursor: pointer !important;
      transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    /* Icons inside buttons — bigger */
    .music-studio-inline-host .ms-sw-act-btn svg {
      width: 20px !important;
      height: 20px !important;
      display: block !important;
      flex-shrink: 0 !important;
    }

    /* Play button — slightly brighter, it's the primary CTA */
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play {
      background: rgba(255,255,255,.15) !important;
      background-image: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.07) 100%) !important;
      border-color: rgba(255,255,255,.50) !important;
    }

    /* Optically centre the play triangle */
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play .ms-icon-play svg {
      margin-left: 2px !important;
    }

    /* Icon swap — pause hidden by default, play hidden when .playing */
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play .ms-icon-pause {
      display: none !important;
    }
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play.playing .ms-icon-play {
      display: none !important;
    }
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play.playing .ms-icon-pause {
      display: inline-flex !important;
    }

    .music-studio-inline-host .ms-sw-act-btn:hover {
      background: rgba(255,255,255,.22) !important;
      border-color: rgba(255,255,255,.60) !important;
      transform: translateY(-1px) scale(1.07) !important;
    }
    .music-studio-inline-host .ms-sw-act-btn:active {
      transform: scale(.94) !important;
    }

    /* Revolving white halo while playing ─────────────────────────────────────
       A narrow conic arc (≈ 12° comet tail) orbits the outer ring of the
       button.  A radial-gradient mask cuts out the button interior so only
       the ring track itself lights up — no ghostly fill over the pause icon.
       Pseudo-element is 48×48 px (inset -2px around the 44×44 button).
       Ring visible from 87% outward → ~3 px glowing track at the circle edge. */
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play.playing {
      border-color: rgba(255,255,255,.45) !important;
    }
    .music-studio-inline-host .ms-sw-act-btn.ms-sw-act-play.playing::after {
      content: '' !important;
      position: absolute !important;
      inset: -2px !important;
      border-radius: 50% !important;
      background: conic-gradient(
        from 0deg,
        transparent    0%,
        rgba(255,255,255,.18)  4%,
        rgba(255,255,255,.92) 10%,
        rgba(255,255,255,.18) 16%,
        transparent   22%
      ) !important;
      -webkit-mask: radial-gradient(circle at center, transparent 87%, black 88%) !important;
              mask: radial-gradient(circle at center, transparent 87%, black 88%) !important;
      animation: expose-play-spin 1.6s linear infinite !important;
      pointer-events: none !important;
      z-index: 2 !important;
    }

    /* Instant tooltip — liquid glass pill */
    .music-studio-inline-host .ms-sw-act-btn[data-tooltip]::before {
      content: attr(data-tooltip) !important;
      position: absolute !important;
      bottom: calc(100% + 6px) !important;
      left: 50% !important;
      transform: translateX(-50%) translateY(4px) !important;
      /* Liquid glass: frosted fill + hairline border */
      background: rgba(255,255,255,.12) !important;
      background-image: linear-gradient(180deg,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,.06) 100%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
      backdrop-filter: blur(20px) saturate(1.6) !important;
      border: 1px solid rgba(255,255,255,.38) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.28) inset,
        0 4px 12px -4px rgba(0,0,0,.45) !important;
      color: rgba(255,255,255,.96) !important;
      font-family: var(--font-ui) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: .01em !important;
      padding: 4px 10px !important;
      border-radius: 999px !important;
      white-space: nowrap !important;
      pointer-events: none !important;
      opacity: 0 !important;
      transition: opacity .10s ease, transform .10s ease !important;
      z-index: 20 !important;
    }
    .music-studio-inline-host .ms-sw-act-btn[data-tooltip]:hover::before {
      opacity: 1 !important;
      transform: translateX(-50%) translateY(0) !important;
    }

    /* Hide time row (removed from HTML) */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-scrubber-time {
      display: none !important;
    }

    /* Cover: position:relative + overflow:hidden for progress bar clipping */
    /* Cover: zero margin so it sits edge-to-edge inside the card padding */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-cover {
      position: relative !important;
      overflow: hidden !important;
      margin: 0 !important;
    }

    /* Card outer: 6px on L/T/R, 0px on B (−5px from prior 1px + extra margin) */
    .music-studio-inline-host .ms-sw-result-ready {
      padding: 6px 6px 0 !important;
      gap: 0 !important;
    }

    /* Body: zero padding/margin — just title + genre */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-body {
      padding: 0 !important;
      margin: 0 !important;
      gap: 0 !important;
    }

    /* Head: 10px below cover, 5px between title and genre */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-head {
      gap: 5px !important;
      margin-top: 10px !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
    }

    /* Title: strip vertical padding that adds dead space */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-title {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: 1.1 !important;
    }

    /* Genre/meta: tight line-height, pull up 5px via negative margin */
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta {
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
      margin-bottom: -10px !important;
    }
    .music-studio-inline-host .ms-sw-result-ready .ms-sw-ready-meta span {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      line-height: 1.2 !important;
    }
    /* ===== end result card 4-button row ===== */

    /* ── Nuclear play-button fix ─────────────────────────────────
       ID-targeted override; wins every specificity war. Forces
       #msSwPlay to have layout + dimensions regardless of any
       inherited rule. Also resets any legacy positional override
       (e.g. left:100%, position:absolute) that a prior build may
       have left behind. */
    .music-studio-inline-host #msSwPlay {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      flex: 0 0 44px !important;
      margin: 0 !important;
      align-items: center !important;
      justify-content: center !important;
      clip: auto !important;
      clip-path: none !important;
      overflow: visible !important;
      transform: none !important;
      z-index: 1 !important;
    }
    /* Force the play triangle SVG to be visible */
    .music-studio-inline-host #msSwPlay svg.ms-icon-play {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 20px !important;
      height: 20px !important;
      fill: rgba(255,255,255,.95) !important;
      flex-shrink: 0 !important;
    }
    /* Pause SVG: hidden unless .playing */
    .music-studio-inline-host #msSwPlay svg.ms-icon-pause {
      display: none !important;
    }
    .music-studio-inline-host #msSwPlay.playing svg.ms-icon-play {
      display: none !important;
    }
    .music-studio-inline-host #msSwPlay.playing svg.ms-icon-pause {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 20px !important;
      height: 20px !important;
      fill: rgba(255,255,255,.95) !important;
    }

    /* ============================================================
       STEM MODAL — liquid glass redesign
       Kill every --theme-accent (green) tint. Replace with pure
       white-glass so the modal feels like the rest of the app.
       ============================================================ */

    /* Modal sits above the expose overlay (both were z:101) */
    .music-studio-inline-host .ms-stem-modal[data-open="true"] {
      z-index: 400 !important;
    }

    /* Backdrop — neutral dark instead of accent-tinted */
    .music-studio-inline-host .ms-stem-modal {
      background: rgba(8,6,15,.72) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
      backdrop-filter: blur(22px) saturate(1.3) !important;
    }

    /* Panel shell — pure glass, no green tint */
    .music-studio-inline-host .ms-stem-shell {
      background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
      border: 1px solid rgba(255,255,255,.16) !important;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.06) inset,
        0 40px 100px -20px rgba(0,0,0,.75) !important;
    }

    /* Confirm-card icon bg — white glass instead of accent */
    .music-studio-inline-host .ms-stem-confirm-ico {
      background: rgba(255,255,255,.08) !important;
      background-image: linear-gradient(160deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 100%) !important;
      border: 1px solid rgba(255,255,255,.22) !important;
      color: rgba(255,255,255,.90) !important;
    }

    /* Variant rows — selected state: white glass, no green */
    .music-studio-inline-host .ms-stem-variant.on {
      background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
      border-color: rgba(255,255,255,.45) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset !important;
    }

    /* Radio button — white accent */
    .music-studio-inline-host .ms-stem-variant input[type="radio"] {
      accent-color: rgba(255,255,255,.95) !important;
    }

    /* "Split now" button — liquid glass white pill, not green */
    .music-studio-inline-host .ms-stem-go,
    .music-studio-inline-host .ms-stem-action {
      background: linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 100%) !important;
      border: 1px solid rgba(255,255,255,.45) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.30) inset,
        0 -1px 0 rgba(0,0,0,.18) inset,
        0 8px 20px -6px rgba(0,0,0,.55) !important;
      color: rgba(255,255,255,.98) !important;
    }

    .music-studio-inline-host .ms-stem-go:hover,
    .music-studio-inline-host .ms-stem-action:hover {
      background: linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.14) 100%) !important;
      border-color: rgba(255,255,255,.70) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 -1px 0 rgba(0,0,0,.20) inset,
        0 0 20px rgba(255,255,255,.22),
        0 10px 26px -8px rgba(0,0,0,.60) !important;
    }

    /* Divider line inside the modal */
    .music-studio-inline-host .ms-stem-divider {
      background: rgba(255,255,255,.10) !important;
    }

    /* Footer baseline */
    .music-studio-inline-host .ms-stem-foot {
      border-top: 1px solid rgba(255,255,255,.10) !important;
    }

    /* Splitting state — spinner/progress tint */
    .music-studio-inline-host .ms-stem-split-prog-fill {
      background: rgba(255,255,255,.75) !important;
    }

    /* Picker stems list — selected checkboxes */
    .music-studio-inline-host .ms-stem-pick-item.on {
      border-color: rgba(255,255,255,.42) !important;
      background: rgba(255,255,255,.10) !important;
    }

    .music-studio-inline-host .ms-stem-pick-item input[type="checkbox"] {
      accent-color: rgba(255,255,255,.95) !important;
    }
    /* Splitting aura orbs — neutral glass white, no theme-accent green */
    .music-studio-inline-host .ms-stem-splitting-aura span {
      background: rgba(255,255,255,.30) !important;
    }
    .music-studio-inline-host .ms-stem-splitting-aura span:nth-child(2) {
      background: rgba(255,255,255,.22) !important;
    }
    .music-studio-inline-host .ms-stem-splitting-aura span:nth-child(3) {
      background: rgba(255,255,255,.18) !important;
    }

    /* Confirm card wrapper — no accent radial tint */
    .music-studio-inline-host .ms-stem-confirm-card {
      background: rgba(255,255,255,.06) !important;
      border-color: rgba(255,255,255,.14) !important;
    }

    /* Picker — stem row selected state */
    .music-studio-inline-host .ms-stem-row.on {
      background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
      border-color: rgba(255,255,255,.42) !important;
    }
    .music-studio-inline-host .ms-stem-row.on:hover {
      background: linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
    }

    /* Checkbox in selected row — white fill */
    .music-studio-inline-host .ms-stem-row.on .ms-stem-checkbox {
      background: rgba(255,255,255,.90) !important;
      border-color: rgba(255,255,255,.90) !important;
    }

    /* Preview play button — playing state */
    .music-studio-inline-host .ms-stem-preview.playing {
      background: rgba(255,255,255,.15) !important;
      border-color: rgba(255,255,255,.55) !important;
      color: rgba(255,255,255,.95) !important;
    }

    /* Format toggle — selected option */
    .music-studio-inline-host .ms-stem-format-opt.on {
      background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;
      color: rgba(255,255,255,.98) !important;
    }
    /* ===== end stem modal liquid glass ===== */
