/* Play-along classics (stray-} history: css-parse-integrity gate). */
    .studio-playalong { display: grid; gap: 22px; margin-top: var(--section-space); padding-top: 24px; border-top: 1px solid var(--line); }
    .studio-playalong .home-section-head { gap: 12px; }
    .studio-playalong .kicker { display: inline-flex; align-items: center; gap: 7px; }
    .play-along-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .play-along-chip { display: grid; gap: 3px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; }
    .play-along-chip:hover { border-color: var(--teal-deep); transform: translateY(-1px); }
    .play-along-chip strong { font-size: 1.02rem; }
    .play-along-chip span { color: var(--muted); font-size: 0.88rem; }

    /* ===================== STUDIO MODE (immersive practice room) ===================== */
    .support-banner--groove { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .support-banner-copy { flex: 1 1 280px; }
    /* Compact groove header on phones. */
    @media (max-width: 560px) {
      .support-banner--groove { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 9px 12px; gap: 8px 10px; margin-bottom: 12px; }
      .support-banner--groove .support-icon { display: none; }
      .support-banner--groove .support-text { display: none; }
      .support-banner--groove .support-title { font-size: 0.96rem; }
      .support-banner--groove .support-banner-copy { flex: 1 1 auto; }
      .support-banner--groove .studio-switch-wrap { margin-left: auto; }
      .studio-switch .seg { padding: 6px 12px; font-size: 12.5px; }
    }@media (max-width: 560px) { }
    /* Tabs on the dark room: glass surface, light text both themes. */
    .studio-deck .groove-mode-tabs { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 5px; }
    .studio-deck .groove-mode-tabs .seg { color: rgba(233,240,244,0.72); }
    .studio-deck .groove-mode-tabs .seg.is-active { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); box-shadow: 0 2px 8px rgba(14,10,5,0.35); }
    /* Light text on the dark deck surface. */
    .studio-deck .back-context-label { color: rgba(233,240,244,0.82); }
    .studio-deck .back-context-label strong { color: #fff; }
    /* The "Hit Play, catch the pulse…" coach line sits over the dark room — var(--soft) vanished. */
    .studio-deck .studio-first-line { color: rgba(233,240,244,0.85); }

    .clean-deck { display: block; }
    .studio-deck {
      position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
      padding: clamp(14px, 2.2vw, 30px); margin-top: 8px;
      /* base room palette (overridden per scene) */
      --sc-ink: rgba(255,255,255,0.10); --sc-pane: rgba(255,224,176,0.12); --sc-soft: rgba(255,255,255,0.06);
      --sc-screen: rgba(130,200,255,0.55); --sc-keys: rgba(255,255,255,0.24); --sc-bulb: rgba(255,226,170,0.95);
      --sc-light: rgba(255,212,150,0.45); --sc-glow: rgba(255,196,128,0.30); --sc-glowY: 8%;
      background: linear-gradient(180deg, #2a2013 0%, #1c150d 58%, #120e07 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 26px 70px rgba(16,12,6,0.45);
    }
    .studio-deck[data-scene="lofi"]      { background: linear-gradient(180deg,#322338 0%,#241a29 58%,#181019 100%); --sc-screen: rgba(150,205,255,0.6); --sc-glow: rgba(150,170,255,0.26); }
    .studio-deck[data-scene="jazz"]      { background: linear-gradient(180deg,#2e2130 0%,#241a22 58%,#171015 100%); --sc-screen: rgba(255,190,120,0.6); --sc-glow: rgba(255,184,110,0.34); }
    .studio-deck[data-scene="soul"]      { background: linear-gradient(180deg,#33261c 0%,#241a13 58%,#16100b 100%); --sc-screen: rgba(255,205,140,0.55); --sc-glow: rgba(255,196,128,0.36); --sc-glowY: 14%; }
    .studio-deck[data-scene="rock"]      { background: linear-gradient(180deg,#2b211a 0%,#201811 58%,#141009 100%); --sc-screen: rgba(255,120,120,0.55); --sc-glow: rgba(120,170,255,0.24); }
    .studio-deck[data-scene="cinematic"] { background: linear-gradient(180deg,#251a26 0%,#1a1119 58%,#100a0e 100%); --sc-bulb: rgba(240,232,214,0.95); --sc-screen: rgba(180,210,255,0.5); --sc-glow: rgba(150,180,255,0.30); --sc-glowY: 60%; }

    /* translateZ(0): pre-rasterize (iPad first-scroll stutter). */
    .studio-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translateZ(0); }
    .studio-glow, .studio-vignette, .studio-grain { transform: translateZ(0); }
    .studio-scene { position: absolute; left: 0; right: 0; top: 0; height: min(540px, 64%);
      -webkit-mask-image: linear-gradient(180deg,#000 58%, transparent 100%); mask-image: linear-gradient(180deg,#000 58%, transparent 100%); }
    .scene-svg { width: 100%; height: 100%; display: block; fill: var(--sc-ink); stroke: none; }
    .scene-svg .scene-pane { fill: var(--sc-pane); } .scene-svg .scene-soft { fill: var(--sc-soft); }
    .scene-svg .scene-screen { fill: var(--sc-screen); } .scene-svg .scene-keys { fill: var(--sc-keys); }
    .scene-svg .scene-light { fill: var(--sc-light); opacity: .45; } .scene-svg .scene-bulb { fill: var(--sc-bulb); }
    .scene-svg .scene-stars circle { fill: rgba(255,255,255,0.72); }
    .studio-glow { position: absolute; inset: 0; background: radial-gradient(62% 52% at 50% var(--sc-glowY), var(--sc-glow), transparent 72%); mix-blend-mode: screen; }
    .studio-vignette { position: absolute; inset: 0; background: radial-gradient(130% 110% at 50% 26%, transparent 52%, rgba(0,0,0,0.5)); }
    .studio-grain { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

    .studio-content { position: relative; z-index: 1; }/* working cards stay light-glass + readable over the room */
    .studio-content .panel, .studio-content .groove-card, .studio-content .beat-panel, .studio-content .daily-panel, .studio-content .recent-panel, .studio-content .support-banner, .studio-content .guide-panel {
      /* flat 93% opaque — the old blur was imperceptible but cost a per-card backbuffer every frame during playback */
      background: rgba(251,246,235,0.93);
      border: 1px solid rgba(255,255,255,0.55); box-shadow: var(--shadow);
    }body[data-theme="dark"] .studio-content .panel, body[data-theme="dark"] .studio-content .groove-card, body[data-theme="dark"] .studio-content .beat-panel, body[data-theme="dark"] .studio-content .daily-panel, body[data-theme="dark"] .studio-content .recent-panel, body[data-theme="dark"] .studio-content .support-banner, body[data-theme="dark"] .studio-content .guide-panel {
      /* was rgba(20,27,35) cold slate — invisible to ONE LIGHT (it scans only hex). Canon dark panel instead. */
      background: rgba(36,31,23,0.84); border-color: rgba(240,232,214,0.12); box-shadow: 0 18px 48px rgba(0,0,0,0.5);
    }

    /* The HUD — a dark stage header owned by the room (full rationale in git). */
    .studio-hud { margin: 14px 0 16px; padding: 18px 20px; border-radius: 18px; color: #f0e8d6;
      background: linear-gradient(180deg, rgba(58,45,27,0.92), rgba(34,26,15,0.92));
      border: 1px solid rgba(240,232,214,0.22); box-shadow: 0 20px 56px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.10); }
    .studio-hud-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
    .studio-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,219,168,0.95); }
    .studio-eyebrow svg { width: 14px; height: 14px; }
    .studio-room { margin: 4px 0 0; font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
    .studio-intent { margin: 0; font-size: 13.5px; color: rgba(233,240,244,0.82); max-width: 38ch; text-align: right; }
    .studio-band { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .band-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(233,240,244,0.6); transition: color .25s, background .25s, box-shadow .25s, border-color .25s; }
    .band-chip-ic { display: inline-flex; } .band-chip-ic svg { width: 16px; height: 16px; }
    .band-chip.is-off { opacity: 0.42; }
    .band-chip.is-on { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,219,168,0.4); }
    /* The part the player has taken (minus-one): reads as "You" with a warm gold accent, distinct from the band. */
    .band-chip.is-you { color: #ffe6bd; background: rgba(255,201,130,0.16); border-color: rgba(255,201,130,0.7); font-weight: 750; box-shadow: 0 0 12px 0 rgba(255,201,130,0.25); }
    /* Hands-on lineup: × rests/removes a player; a rested chip and ＋ Add are tappable. */
    .band-chip-x { margin: -8px -5px -8px -5px; width: 24px; height: 24px; border: 8px solid transparent; box-sizing: content-box; background-clip: padding-box; border-radius: 50%; background-color: rgba(255,255,255,0.14); color: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }   /* art230: 40px hit area, same 24px glyph */
    .band-chip-x:hover { background: rgba(255,255,255,0.3); }
    button.band-chip { cursor: pointer; font: inherit; }
    .band-chip.band-chip-back:hover { opacity: 0.75; }
    .band-chip-plus { border-style: dashed; background: rgba(255,255,255,0.05); color: rgba(233,240,244,0.85); }
    .band-chip-plus:hover { border-color: rgba(255,219,168,0.6); color: #fff; }
    .band-chip.is-you .band-chip-ic { color: #ffd79a; }
    /* Glow = STATIC blur on ::after, only opacity animates (an animated box-shadow can't GPU-composite —
       five chips repainted every frame during playback). animation-delay: inherit carries the stagger. */
    .studio-band.is-live .band-chip.is-on { position: relative; animation: bandPulse 1.6s ease-in-out infinite; }
    .studio-band.is-live .band-chip.is-on::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
      box-shadow: 0 0 14px 1px rgba(255,201,130,0.35); opacity: 0; animation: bandGlow 1.6s ease-in-out infinite; animation-delay: inherit; }
    .studio-band.is-live .band-chip.is-on:nth-child(2) { animation-delay: .2s; }
    .studio-band.is-live .band-chip.is-on:nth-child(3) { animation-delay: .4s; }
    .studio-band.is-live .band-chip.is-on:nth-child(4) { animation-delay: .6s; }
    .studio-band.is-live .band-chip.is-on:nth-child(5) { animation-delay: .8s; }
    @keyframes bandPulse { 0%,100% { border-color: rgba(255,219,168,0.4); } 50% { border-color: rgba(255,219,168,0.85); } }
    @keyframes bandGlow { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
    /* "Follow me" — opt-in mic-reactive band control (2026-07-14). */
    .follow-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
    .follow-me-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 750; font-size: 0.82rem; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; }
    .follow-me-toggle:hover { border-color: rgba(255,219,168,0.7); }
    /* LITERAL light values on purpose — this control lives on the always-dark HUD, where theme tokens
       betray it: inherited var(--ink) is near-black in LIGHT mode → dark brown text on the dark gold
       fill (owner 2026-07-15: "brown against brown"). Same trap as the instrument toggle. */
    .follow-me-toggle.is-on { background: linear-gradient(135deg, rgba(176,112,31,0.22), rgba(176,112,31,0.08)); border-color: rgba(255,201,130,0.75); box-shadow: 0 0 12px 0 rgba(255,201,130,0.25); color: #f7e3ad; }
    .follow-me-toggle svg { width: 15px; height: 15px; }
    /* …and var(--muted) is far too dim on the dark HUD — literal cream. */
    .follow-me-hint { flex: 1 1 220px; min-width: 0; font-size: 0.74rem; color: #d6cbb2; line-height: 1.4; }
    .follow-me.is-active .follow-me-hint { color: #f0e8d6; }
    .follow-me.is-denied .follow-me-hint { color: var(--rose); }
    .studio-playbar { margin-top: 14px; }
    .studio-track { position: relative; display: flex; gap: 4px; height: 8px; }
    .studio-tick { flex: 1; border-radius: 999px; background: rgba(255,255,255,0.12); }
    .studio-playhead { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #ffe6bf, #ffb863); box-shadow: 0 0 12px rgba(255,184,99,0.8); transform: translate(-50%, -50%); transition: left .12s linear; opacity: 0; }
    .studio-first { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); }

    /* Current chord: gentle breathing pulse while the band plays. */
    .chord.is-now { background: linear-gradient(180deg, #ffd98a, #ffbf5a) !important; color: #2a1c06 !important; box-shadow: 0 0 0 2px rgba(255,191,90,0.5), 0 4px 14px rgba(255,170,60,0.45); transform: translateY(-1px); position: relative; }
    /* the breath is a second, STATIC shadow fading in on a pseudo — not an animated box-shadow */
    .chord.is-now::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      box-shadow: 0 0 0 3px rgba(255,191,90,0.72), 0 6px 20px rgba(255,170,60,0.6); opacity: 0; animation: chordNowGlow 1.6s ease-in-out infinite; }
    .chord.is-now .chord-name { color: #2a1c06 !important; }
    @keyframes chordNowGlow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    .chords .chord { transition: background .12s, color .12s, transform .12s, box-shadow .12s; }

    /* homepage teaser */
    .studio-teaser { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; margin: 18px 0; color: #f0e8d6;
      background: linear-gradient(180deg,#322338 0%,#241a29 60%,#181019 100%); border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow);
      -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
    /* translateZ(0) pre-rasterizes the teaser's blend/mask layers — same first-scroll
       stutter fix as the Studio deck (iPad composited them lazily on first scroll). */
    .studio-teaser .teaser-scene { position: absolute; inset: 0; z-index: 0; opacity: 0.4; transform: translateZ(0); --sc-ink: rgba(255,255,255,0.08); --sc-pane: rgba(255,224,176,0.10); --sc-soft: rgba(255,255,255,0.05); --sc-screen: rgba(150,205,255,0.32); --sc-keys: rgba(255,255,255,0.18); --sc-bulb: rgba(255,226,170,0.8); --sc-light: rgba(255,212,150,0.35); }
    /* Scrim so the room furniture never reads as a stray box behind the copy. */
    .studio-teaser::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,18,28,0.92) 0%, rgba(14,18,28,0.6) 55%, rgba(14,18,28,0.28) 100%); }
    .studio-teaser .teaser-scene .scene-svg { -webkit-mask-image: linear-gradient(180deg,#000 50%, transparent 100%); mask-image: linear-gradient(180deg,#000 50%, transparent 100%); }
    .studio-teaser .teaser-glow { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(255,196,128,0.28), transparent 70%); mix-blend-mode: screen; transform: translateZ(0); }
    .studio-teaser-inner { position: relative; z-index: 2; max-width: 560px; text-align: left; }
    .studio-teaser-inner .hero-cta { justify-content: flex-start; margin-top: 14px; }
    .studio-teaser .teaser-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,219,168,0.95); }
    .studio-teaser .teaser-eyebrow svg { width: 14px; height: 14px; }
    .studio-teaser h3 { margin: 8px 0 6px; font-size: clamp(19px,2.4vw,25px); color: #fff; font-weight: 800; }
    .studio-teaser p { margin: 0 0 14px; font-size: 14px; color: rgba(233,240,244,0.85); line-height: 1.5; }
    .studio-teaser .teaser-cta { display: inline-flex; align-items: center; gap: 7px; }
    /* The teaser is theme-independent DARK, but .primary-button fills with --teal = near-black ink in
       light mode → a 1.15:1 invisible slab. Literal brass pinned in both themes (5th sighting of the
       ink-on-dark-overlay trap — see 30-home-groove-tools.css:121 for the 4th). */
    .studio-teaser .primary-button { background: #d9a95a; color: #20160a; }
    @media (max-width: 720px) {
      .studio-deck { border-radius: 18px; padding: 12px; }
      .studio-hud-head { flex-direction: column; align-items: flex-start; }
      .studio-intent { text-align: left; }
      .studio-scene { height: min(360px, 50%); }
      .studio-teaser { padding: 18px; }
    }@media (prefers-reduced-motion: reduce) {
      .studio-band.is-live .band-chip.is-on, .studio-band.is-live .band-chip.is-on::after { animation: none; }
      .studio-band.is-live .band-chip.is-on::after { opacity: 0; }
      .studio-playhead { transition: none; }
      .chord.is-now, .chord.is-now::after { animation: none; }
      .chord.is-now::after { opacity: 0; }
    }

    /* Comfortable touch targets on phones: fingers get at least ~44px on the controls
       that matter most (playback, navigation, chips, modal close). */
    @media (max-width: 700px) and (pointer: coarse) {
      .mini-button, .play-button, .toggle-button, .auth-button, .account-tab,
      .app-nav-button, .welcome-chip, .studio-switch .seg, .lock-actions button { min-height: 44px; }
      .style-chip, .chord-chip, .add-chip { min-height: 40px; }
      .auth-close, .home-recap-close, .coach-mark-x { min-width: 44px; min-height: 44px; }
      /* secondary deck controls that were under the 44px touch target (WCAG 2.5.5) */
      .chord-nav-btn, .loop-step, .t-step, .step-btn { min-width: 44px; min-height: 44px; }
      .pw-toggle { min-height: 40px; }
    }@media (prefers-reduced-motion: reduce) {
      .welcome-step { animation: none; }
      .section-enter { animation: none; }
      .error-toast { transition: none; }
      .ear-note.is-live { animation: none; opacity: 1; }   /* transcribe live-note pulse was unguarded */
    }

    /* Gentle recover-from-error toast (see the global error handlers). */
    .error-toast {
      position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
      z-index: 400; max-width: min(92vw, 420px);
      padding: 11px 16px; border: 1px solid rgba(43,33,20,.12); border-left: 3px solid #a8503f; border-radius: 10px;
      background: #fbf8f1; color: #2b2114; font-size: 0.86rem; font-weight: 600;
      box-shadow: 0 6px 20px rgba(43,33,20,.16); cursor: pointer;
    }
    body[data-theme="dark"] .error-toast { background: #241f17; color: #f0e8d6; border-color: rgba(240,232,214,.1); border-left-color: #e08a77; }
    /* Neutral confirmation toast (e.g. "Invite link copied"). */
    .app-toast {
      position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
      z-index: 400; max-width: min(92vw, 460px); pointer-events: none;
      /* QUIET NOTICE (art225 card): panel + thin gold left accent, calm weight, themed via the
         dark override below. Literals stay on purpose (the --teal-deep-flips-to-gold trap). */
      padding: 11px 16px; border-radius: 10px; background: #fbf8f1; color: #2b2114;
      border: 1px solid rgba(43,33,20,.12); border-left: 3px solid #a97f38;
      font-size: .86rem; font-weight: 550; box-shadow: 0 6px 20px rgba(43,33,20,.14);
      opacity: 0; transition: opacity var(--motion-ui) var(--ease-ui), transform var(--motion-ui) var(--ease-ui);
    }
    body[data-theme="dark"] .app-toast { background: #241f17; color: #f0e8d6; border-color: rgba(240,232,214,.1); border-left-color: #c39a52; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
    .app-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }@media (prefers-reduced-motion: reduce) { .app-toast { transition: opacity var(--motion-ui) linear; } }
    /* Offline indicator — sits above the bottom nav; practice works offline, network features pause. */
    .offline-bar { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); z-index: 360; max-width: min(94vw, 540px); display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: #7c5210; color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1.35; box-shadow: 0 12px 32px rgba(10,18,26,0.4); opacity: 0; pointer-events: none; transition: opacity var(--motion-ui) var(--ease-ui), transform var(--motion-ui) var(--ease-ui); }
    .offline-bar.is-shown { opacity: 1; transform: translate(-50%, 0); }
    .offline-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffce6e; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(255,206,110,0.25); }@media (min-width: 720px) { .offline-bar { bottom: 24px; } }
    /* Celebratory confetti burst (badge unlocks / milestones) — decorative, pointer-events: none. */
    /* A calm warm-gold glow for a win (replaced the paper confetti, 2026-07-14). GPU-composited
       opacity only; pointer-events off; self-removed by JS after ~1.3s. */
    .celebrate-glow { position: fixed; inset: 0; pointer-events: none; z-index: 600; opacity: 0;
      background: radial-gradient(120% 90% at 50% 46%, rgba(231,194,102,0.30), rgba(176,112,31,0.10) 42%, transparent 72%);
      animation: celebrateGlow 1.3s ease-out forwards; }
    @keyframes celebrateGlow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .celebrate-glow { display: none; } }

    /* ===================== PASS 4: PRACTICE-FIRST STUDIO ===================== */
    .studio-landing-hero { margin-bottom: 14px; }
    .studio-start { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 14px; align-items: stretch; }
    .studio-start-primary { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; padding: clamp(20px, 3vw, 30px); border: 1px solid rgba(176,112,31,.34); border-radius: 18px; background: linear-gradient(145deg, rgba(176,112,31,.13), rgba(86,104,138,.05)), var(--panel-strong); box-shadow: var(--shadow); }
    .studio-start-primary h3 { margin: 4px 0 6px; color: var(--ink); font-size: clamp(1.35rem, 2.5vw, 2rem); }
    .studio-start-primary p { color: var(--muted); line-height: 1.5; }
    .studio-start-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--teal); }
    .studio-start-icon svg { width: 25px; height: 25px; }
    .studio-recommended { position: absolute; right: 16px; top: 14px; padding: 5px 9px; border-radius: 999px; background: rgba(176,112,31,.12); color: var(--teal-deep); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
    .studio-start-actions { grid-column: 1 / -1; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
    .studio-path-list { display: grid; gap: 9px; }.studio-path { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); text-align: left; cursor: pointer; }.studio-path:hover { border-color: rgba(176,112,31,.42); transform: translateY(-1px); }.studio-path-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft, rgba(176,112,31,.12)); color: var(--accent-2, var(--teal-deep)); }.studio-path strong { display: block; color: var(--ink); }.studio-path small { display: block; margin-top: 2px; color: var(--muted); line-height: 1.35; }

    .studio-practice-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); }
    .studio-practice-grid > .controls-panel { position: sticky; top: calc(var(--app-scroll-offset, 76px) + 10px); }
    /* Single-column deck workspace: the progression uses the full width; the secondary tools
       (chords/band/customize/more) live in drawers, not a long stack of cards down the page. */
    .studio-practice-grid.deck-single { grid-template-columns: minmax(0, 1fr); }

    /* Action rail under the progression — the always-visible, one-tap path to every tool. */
    /* Auto-fit so the rail stays one row on wide screens but wraps to 2 rows on a phone instead of
       overflowing — five tabs (Chords/Band/Customize/Details/More) don't fit one row at 375px. */
    .groove-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin-top: 14px; }
    .groove-rail-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); color: var(--ink); font-weight: 800; font-size: 0.82rem; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.08s; }
    .groove-rail-btn span { white-space: nowrap; }
    .groove-rail-btn svg, .groove-rail-btn i { width: 20px; height: 20px; }@media (hover: hover) { .groove-rail-btn:hover { background: rgba(176,112,31,0.08); border-color: var(--teal); } }
    .groove-rail-btn.is-open { background: rgba(176,112,31,0.12); border-color: var(--teal); color: var(--teal-deep); }
    .groove-rail-btn:active { transform: translateY(1px); }

    /* Deck "Advanced voicings" affordance — a visible, gold-accented entry on the chord visuals that
       opens the Chords drawer (Premium) or the upgrade prompt (Free). */
    .deck-voicings-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; min-height: 44px; border: 1px solid rgba(217,169,40,0.4); border-radius: 8px; background: linear-gradient(180deg, rgba(217,169,40,0.10), transparent); color: var(--ink); font-weight: 800; font-size: 0.9rem; text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.08s; }
    .deck-voicings-btn > span:first-of-type { flex: 1; }
    .deck-voicings-btn svg, .deck-voicings-btn i { width: 18px; height: 18px; flex: none; color: var(--gold); }
    .deck-voicings-btn .dv-lock { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 0.74rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-deep); }
    .deck-voicings-btn .dv-lock svg, .deck-voicings-btn .dv-lock i { color: var(--teal-deep); width: 14px; height: 14px; }
    .deck-voicings-btn .dv-go { flex: none; color: var(--teal-deep); font-weight: 900; }@media (hover: hover) { .deck-voicings-btn:hover { background: linear-gradient(180deg, rgba(217,169,40,0.18), transparent); border-color: var(--gold); } }
    .deck-voicings-btn:active { transform: translateY(1px); }
    /* The Advanced-voicings section in the Chords drawer, led by a gold star heading. */
    .voicings-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .voicings-head { display: flex; align-items: center; gap: 6px; color: var(--teal-deep); }
    .voicings-head svg, .voicings-head i { width: 16px; height: 16px; color: var(--gold); }

    /* Groove Deck tool drawer — same side-panel(desktop)/bottom-sheet(mobile) behaviour and a11y
       as the Jam role drawer (it reuses the shared jamDrawer keyframes defined in 20-pillars). */
    .tool-drawer-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; background: rgba(16,12,6,0.55); animation: jamDrawerFade var(--motion-ui) var(--ease-ui); overscroll-behavior: none; }
    /* Overlay re-renders while the drawer is already up must not replay the entrance animation. */
    .tool-drawer-backdrop.no-anim, .tool-drawer-backdrop.no-anim .tool-drawer { animation: none; }
    .tool-drawer { width: min(480px, 94vw); height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--panel-strong); border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(16,12,6,0.3); display: grid; grid-template-rows: auto 1fr; align-content: start; animation: jamDrawerIn var(--motion-ui) var(--ease-ui); }
    .tool-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-strong); }
    .tool-drawer-head strong { color: var(--ink); font-size: 1.05rem; }
    .tool-drawer-body { padding: 16px; display: grid; gap: 14px; align-content: start; }
    .tool-drawer-body .panel, .tool-drawer-body .controls-panel { border: 0; padding: 0; box-shadow: none; background: transparent; }
    .tool-drawer-sub { color: var(--muted); font-size: 0.9rem; margin: 0; }
    .customize-mode { margin-bottom: 12px; }

    /* Lesson-practice mode: one clear task when a learner arrives from a lesson (P9). */
    .lesson-practice { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--teal); border-radius: 12px; background: linear-gradient(135deg, rgba(176,112,31,0.12), rgba(176,112,31,0.04)); }
    .lesson-practice-copy { display: grid; gap: 4px; min-width: min(260px, 100%); flex: 1 1 320px; }
    .lesson-practice-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-deep); font-weight: 850; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; }
    .lesson-practice-copy strong { font-size: 1.15rem; color: var(--ink); }
    .lesson-practice-task { color: var(--ink); font-weight: 650; }
    .lesson-practice-hint { color: var(--muted); font-size: 0.88rem; }
    .lesson-practice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    /* Quiet the chord-workspace tinkering so a beginner sees pulse + progression + Play, not Edit/density. */
    .deck-lesson .chord-edit-label,
    .deck-lesson .density-quick,
    .deck-lesson .chord-affordance { display: none; }@media (prefers-reduced-motion: reduce) {
      .tool-drawer-backdrop, .tool-drawer { animation: none; }
    }@media (max-width: 720px) {
      .tool-drawer-backdrop { justify-content: stretch; align-items: flex-end; }
      .tool-drawer { width: 100%; height: min(86vh, 680px); border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(16,12,6,0.32); animation: jamSheetIn var(--motion-ui) var(--ease-ui); }
      .groove-rail-btn span { font-size: 0.78rem; }
    }
    /* Phone landscape: short height — reclaim vertical chrome, keep the progression dominant. */
    @media (orientation: landscape) and (max-height: 560px) {
      .clean-deck .support-banner--groove { display: none; }
      .clean-deck .card-head { margin-bottom: 6px; }
      .clean-deck .groove-title { font-size: clamp(1.35rem, 5vh, 1.9rem); }
      .clean-deck .chord-strip { margin: 8px 0; padding: 12px; }
      .clean-deck .groove-rail { margin-top: 10px; }
    }
    .groove-sound-row { margin-top: var(--space-5); }.groove-sound-row > .panel { width: 100%; }
    .chord-workbench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 11px; width: 100%; }
    .chord-workbench { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); }
    .chord-workbench.is-selected { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(176,112,31,.14); }
    /* A-B practice loop: the bars being repeated are tinted gold; the endpoints get a stronger edge. */
    .chord-workbench.is-looped { border-color: var(--gold, #b0701f); background: rgba(217,169,40,.10); }
    .chord-workbench.is-loop-a { box-shadow: inset 3px 0 0 var(--gold, #b0701f); }
    .chord-workbench.is-loop-b { box-shadow: inset -3px 0 0 var(--gold, #b0701f); }
    .chord-workbench.is-loop-a.is-loop-b { box-shadow: inset 3px 0 0 var(--gold, #b0701f), inset -3px 0 0 var(--gold, #b0701f); }
    /* "Why these chords work" one-line theory bite (deck + home preview). */
    .theory-bite { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 4px; padding: 9px 12px; border-radius: 8px; background: rgba(176, 112, 31,.07); border: 1px solid rgba(176, 112, 31,.18); color: var(--soft); font-size: 0.85rem; line-height: 1.45; }
    .theory-bite svg { width: 14px; height: 14px; color: var(--teal); flex: 0 0 auto; margin-top: 2px; }
    .theory-bite strong { color: var(--ink); }
    /* "Safe notes for solos" — the quiet, tappable sibling of the theory bite; expands the scale map. */
    .safe-notes-line { display: flex; align-items: center; gap: 7px; width: 100%; margin: 0 0 4px; padding: 9px 12px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--soft); font-size: 0.85rem; cursor: pointer; text-align: left; }
    .safe-notes-line:hover { border-color: var(--teal); }
    .safe-notes-line svg { width: 14px; height: 14px; color: var(--teal); flex: 0 0 auto; }
    .safe-notes-line strong { color: var(--ink); }
    .safe-notes-line .sn-scale { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .safe-notes-line .sn-arrow { margin-left: auto; color: var(--teal-deep); font-weight: 800; }
    .safe-notes-line + .scale-map { margin: 2px 0 6px; }
    .deck-loop-toggle.is-active { border-color: var(--gold, #b0701f); background: rgba(217,169,40,.14); color: var(--ink); }
    .deck-loop-toggle.is-active svg { color: var(--gold, #b0701f); }
    /* One tidy row. */
    .deck-loop-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 9px; padding: 8px 12px; border: 1px solid rgba(217,169,40,.32); border-radius: 12px; background: rgba(217,169,40,.07); }
    .loop-stepper { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); font-size: .82rem; font-weight: 650; }
    .loop-stepper strong { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }
    .loop-step { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); color: var(--ink); font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
    .loop-step:hover { border-color: var(--gold, #b0701f); background: rgba(217,169,40,.12); }
    .deck-loop-range .loop-off { margin-left: auto; }
    /* container-type scales the chord font to the CELL, not the viewport; the bucket --chord-scale
       on .chord-name composes on top for long symbols. */
    .chord-workbench .chord { width: 100%; min-width: 0; min-height: var(--control-min); border: 0; border-radius: 0; background: transparent; color: var(--ink); justify-content: center; container-type: inline-size; font-size: clamp(0.95rem, 17cqi, 1.6rem); padding-inline: 8px; }
    .chord-edit-label { min-height: var(--control-min); }
    .chord-workbench .chord:hover { background: rgba(176,112,31,.08); }
    .chord-edit-label { min-width: 46px; padding: 7px 10px; border-left: 1px solid var(--line); background: var(--bg-soft); color: var(--teal-deep); font-size: .72rem; font-weight: 850; cursor: pointer; }
    .chord-edit-label:hover { background: rgba(176,112,31,.14); }
    .chord-tools { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
    /* Build QA#8: type-or-step values, rest chips, chord nudges, duplicate-as picker. */
    .arr-num-input { width: 56px; min-height: 34px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-strong); color: var(--ink); font-weight: 850; font-size: 0.92rem; font-family: inherit; }
    .arr-num-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
    .arr-chord.arr-chord-rest { color: var(--muted); background: var(--bg-soft); border-style: dashed; font-weight: 750; }
    .arr-chord-cell.is-editing { display: inline-flex; align-items: center; gap: 4px; }
    .arr-chord-nudge, .arr-chord-restbtn { flex: 0 0 auto; }
    /* Slim editor tools. */
    .arr-chord-nudge { min-width: 26px; padding: 4px 6px; }
    /* width:auto escapes .icon-mini's 30px box ("Re|" clip); keep this the ONLY font-size rule for it */
    .arr-chord-restbtn { width: auto; font-size: .72rem; letter-spacing: .03em; padding: 4px 8px; color: var(--muted); }
    /* Drag reorder. */
    .arr-chord-cell[data-arr-drag] { touch-action: pan-y; }
    .arr-chord-cell.is-dragging { opacity: .55; transform: scale(1.04); }
    .arr-chord-cell.is-drop-target { outline: 2px dashed var(--teal-deep); outline-offset: 2px; border-radius: 8px; }
    .arr-dup-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(176,112,31,0.3); border-radius: 8px; background: rgba(176,112,31,0.06); }
    .arr-dup-pick > span { color: var(--soft); font-size: 0.8rem; font-weight: 800; }
    .arr-dup-pick .icon-mini { margin-left: auto; }
    /* Signed-out Record: the quiet "account is for keeping" nudge (try-first model). */
    .rec-keep-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--soft); font-size: 0.86rem; line-height: 1.45; }
    .rec-keep-note svg { width: 14px; height: 14px; color: var(--teal); flex: 0 0 auto; margin-top: 2px; }
    .rec-keep-link { border: 0; padding: 0; background: none; color: var(--teal-deep); font-weight: 800; font-size: inherit; cursor: pointer; text-decoration: underline; }
    /* Bass (root/bassline) practice surface */
    .bass-idea { display: grid; gap: 4px; }
    .bass-idea-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 7px; color: var(--soft); font-size: 0.9rem; line-height: 1.4; }
    .bass-idea-list strong { color: var(--ink); }
    .vc-card.bass-card .vc-diff.is-beg { font-weight: 800; }
    /* Vocals (sing-in-key) surface */
    .vocal-notes { margin: 6px 0; }
    .vocal-scale-label { color: var(--muted); font-size: 0.8rem; font-weight: 700; margin: 0 0 5px; }
    .vocal-scale { display: flex; flex-wrap: wrap; gap: 6px; }
    .vocal-scale-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
    .vocal-note { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-strong); color: var(--ink); font-weight: 800; font-size: 0.85rem; }
    .vocal-note.is-home { border-color: var(--teal); background: rgba(176,112,31,0.14); color: var(--teal-deep); }
    body[data-theme="dark"] .vocal-note.is-home { color: #e7c266; }
    .vocal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
    .vocal-actions .primary-button, .vocal-actions .mini-button { flex: 1 1 auto; }
    .vc-card.vocal-card .vocal-card-tones { padding: 8px 12px; color: var(--soft); font-size: 0.9rem; }
    .vc-card.vocal-card .vocal-card-tones strong { color: var(--ink); }
    .tuner-string.is-offkey { color: #c0392b; }
    .chord-affordance { margin-top: 8px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
    .start-here { display: grid; gap: 5px; margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(176,112,31,.25); border-radius: 12px; background: rgba(176,112,31,.08); }
    .start-here strong { color: var(--ink); line-height: 1.45; }
    /* align-content:start so the card hugs its content at the TOP of the (full-height) drawer body
       instead of stretching — the buttons used to drift to the bottom with a big empty gap above. */
    .groove-develop { display: grid; gap: 12px; align-content: start; margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
    .groove-develop p:last-child { margin-top: 3px; color: var(--muted); font-size: .84rem; line-height: 1.4; }
    .groove-develop-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
    /* Compact, content-width buttons (they were oversized for their short labels); keep a 40px tap target. */
    .groove-develop-actions .ghost-button { flex: 0 1 auto; min-height: 40px; padding: 9px 14px; font-size: 0.9rem; }
    .sound-workspace { box-shadow: none; }
    .sound-workspace-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
    .sound-state { padding: 5px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: .75rem; font-weight: 800; white-space: nowrap; }
    .sound-session-stats { margin-top: 2px; }
    body.has-compact-transport .cookie-banner { bottom: calc(92px + env(safe-area-inset-bottom)); }
    .rec-stage.is-recording { position: sticky; top: calc(var(--app-scroll-offset, 76px) + 8px); z-index: 12; border-color: rgba(216,109,100,.55); box-shadow: var(--shadow); }
    /* Record is the star (owner 2026-07-16): while recording, the control stays TRULY page-centered
       and dominant (with a live level meter); live lyrics are a small quiet aside — absolutely
       positioned right on desktop so they never push the control off-center, below on phones.
       Both themes: everything here rides theme tokens. */
    .rec-center { display: grid; gap: 12px; justify-items: center; min-width: 0; width: 100%; }
    .rec-meter { width: min(320px, 76%); height: 6px; border-radius: 999px; background: rgba(128,128,128,.22); overflow: hidden; }
    .rec-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold, #b0701f), #d86d64); transition: width 90ms linear; }
    .rec-live-lyrics { display: grid; gap: 4px; min-width: 0; opacity: .85; width: 100%; border-top: 1px solid var(--line); padding-top: 8px; justify-items: center; }
    .rec-lyr-k { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .rec-lyr-k svg { width: 12px; height: 12px; }
    .rec-live-lyrics p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; max-height: 4.2em; overflow: hidden; overflow-wrap: break-word; text-align: center; }
    @media (min-width: 900px) {
      .rec-stage.is-recording .rec-live-lyrics { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: min(200px, 20%); border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: 14px; justify-items: start; }
      .rec-stage.is-recording .rec-live-lyrics p { text-align: left; }
    }
    /* Analyze → the breakdown card (owner pick 2026-07-16): key + chords, timing vs the grid,
       strongest/weakest bar, one concrete tip — the Premium teaser reads like a coach. */
    .take-coach { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(176,112,31,.3); border-radius: 12px; background: rgba(176,112,31,.06); text-align: left; }   /* gap 7→8 matches .take-card .lib-actions (owner 2026-07-17: consistent spacing) */
    .take-coach-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }   /* the ladder's in-surface coach invite (art208) */
    .take-coach-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .take-coach-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
    .take-coach-head svg { width: 14px; height: 14px; color: var(--gold, #b0701f); }
    .take-coach p { margin: 0; color: var(--soft); font-size: .88rem; line-height: 1.45; }
    .coach-k { display: inline-block; min-width: 62px; margin-right: 6px; color: var(--muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
    .coach-chord { display: inline-block; margin: 0 3px 2px 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-strong); color: var(--ink); font-weight: 750; font-size: .8rem; }
    .take-coach-tip { padding-top: 6px; border-top: 1px dashed rgba(176,112,31,.35); }
    .take-coach-tip .coach-k { color: var(--teal-deep); }
    .take-coach-foot { color: var(--muted); font-size: .74rem; }
    /* Takes-only: auto-fit collapses empty tracks (auto-fill kept 282px columns on a 1440px desktop);
       the min() guard stops 390px-phone overflow. Other lib-grids stay 240px cards. */
    .take-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
    /* A take card stacks cleanly: name field, then the meta line, then a wrapping row of actions —
       no more 3-column grid squeezing the Play/Analyze/Reflect/Remove buttons into an overlap. */
    .take-main { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
    .take-name { min-width: 0; display: block; }
    .take-name > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .take-main > span { color: var(--muted); font-size: .8rem; }
    .take-card .lib-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; max-width: 100%; }
    .take-card .lib-actions .mini-button { flex: 0 0 auto; }@media (max-width: 960px) {
      .studio-start, .studio-practice-grid { grid-template-columns: 1fr; }
      .studio-practice-grid > .controls-panel { position: static; }
    }@media (max-width: 700px) {body.active-practice .sound-workspace { display: block; }
      .studio-recommended { position: static; grid-column: 1 / -1; justify-self: start; }
      .studio-start-primary { grid-template-columns: 44px minmax(0, 1fr); padding: 17px; }
      .studio-start-icon { width: 44px; height: 44px; }
      .studio-start-actions .primary-button, .studio-start-actions .ghost-button { width: 100%; }
      .tempo-quick { flex-wrap: wrap; }
      .tempo-quick input[type="range"] { flex-basis: calc(100% - 88px); order: 3; }
      .chord-quick-actions .quick-new { flex: 1 1 auto; }
      .sound-workspace-head { flex-direction: column; }
      .mix-ch { min-height: 84px; }
      body.has-compact-transport .cookie-banner { bottom: calc(154px + env(safe-area-inset-bottom)); }
    }
    /* One quiet first-step line (the "What to do first" LIST is retired — owner: too much at the top). */
    .studio-first-line { margin: 8px 0 0; color: var(--soft); font-size: 0.88rem; font-weight: 650; display: flex; align-items: center; gap: 7px; }
    .studio-first-line svg { width: 14px; height: 14px; flex: none; color: var(--teal-text); }
    /* The deck's on-surface paths into Build and Jam. */
    .deck-next-steps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
    /* Compact "back to Studio" chip (replaces the full-width back-context bar). */
    .back-chip { align-self: flex-start; margin: 0 0 10px; padding: 6px 12px; min-height: 34px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel-strong); color: var(--ink); font-weight: 800; font-size: 0.82rem; cursor: pointer; }
    .back-chip:hover { border-color: var(--teal-deep); color: var(--teal-text); }
    .studio-deck .back-chip { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); color: #eef4f6; position: relative; z-index: 3; }

    /* ===== STAGE-LIGHT AT SHOWTIME (design bible W4, 2026-07-12): pressing play dims the room
       around the groove sheet — purely additive, the sheet stays paper (readable). */
    body.on-deck::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s ease; background: radial-gradient(120% 90% at 50% 36%, transparent 40%, rgba(26, 19, 9, 0.34) 76%, rgba(20, 14, 6, 0.52) 100%); }
    body.on-deck.is-grooving::after, body.on-deck.is-counting::after { opacity: 1; }
    body.on-deck.is-grooving .groove-card, body.on-deck.is-counting .groove-card { position: relative; z-index: 2; box-shadow: 0 26px 80px rgba(20, 14, 6, 0.3); }
    body[data-theme="dark"].on-deck::after { background: radial-gradient(120% 90% at 50% 36%, transparent 40%, rgba(0, 0, 0, 0.4) 76%, rgba(0, 0, 0, 0.6) 100%); }



    /* ONE METAL (2026-07-12): in the ink theme the primary action is the gold itself. */
    body[data-theme="dark"] .primary-button { background: var(--teal); color: #20160a; -webkit-text-fill-color: currentColor; }
    body[data-theme="dark"] .primary-button:hover { filter: brightness(1.06); }

    /* honest chord provenance on song sections (capture→song, 2026-07-12) */
    .arr-idea-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(176, 112, 31, 0.45); background: rgba(217, 169, 90, 0.14); color: var(--teal-text); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }