@media (max-width: 860px) {  .pricing-grid,.auth-plan-grid { grid-template-columns: 1fr; } .membership-nudge, .cookie-banner { align-items: stretch; flex-direction: column; } }@media (max-width: 600px) {
      .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }
      .cookie-banner p { font-size: 0.78rem; line-height: 1.35; }
      .cookie-banner .primary-button { min-height: 40px; padding: 8px 12px; }
    }@media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }@media (max-width: 900px) {.card-head, .section-head {
        align-items: flex-start;
        flex-direction: column;
      }.beat-panel {
        grid-template-columns: 1fr;
      }

      /* Two columns to 700px, slim rail. */
      .hero-grid {
        grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
      }
      /* Compact chord chips in this window so four jazzy symbols still fit one line. */
      .chords { font-size: 1.12rem; gap: 8px; }
      .chord { min-height: 42px; padding: 6px 9px; }

      .meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }}@media (max-width: 680px) {
      .shell {
        width: min(100% - 24px, 1180px);
        padding-top: 14px;
      }

      h1 {
        font-size: 2.05rem;
      }

      .brand {
        align-items: center;
      }

      .brand-mark {
        width: 40px;
        height: 40px;
      }

      .panel,
      .groove-card,
      .daily-panel,
      .guide-panel,
      .recent-panel {
        padding: 14px;
      } .quick-fields  {
        grid-template-columns: 1fr;
      }.meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .chord-strip {
        padding: 12px;
      }

      .chord {
        min-height: 44px;
        padding: 7px 10px;
      }.hero-grid, .main-column {
        gap: 12px;
      }

      .groove-title {
        font-size: clamp(2.05rem, 12vw, 3.1rem);
      }

      .chords {
        font-size: clamp(1.55rem, 10vw, 2.35rem);
      }

      .pulse-stage {
        min-height: 132px;
        padding: 16px;
      }.card-actions {
        width: 100%;
      }.card-actions button {
        flex: 1 1 auto;
      }
    }@media (max-width: 390px) {
      .meta-grid {
        grid-template-columns: 1fr;
      }

      .chord {
        width: 100%;
        justify-content: center;
      }

      .slash {
        display: none;
      }
    }

    /* ===== GROOVE DECK 2.0 components (token-driven, both themes) ===== */

    /* focus-visible everywhere */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid var(--teal);
      outline-offset: 2px;
      border-radius: 8px;
    }
    .visually-hidden {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0;
    }

    /* ----- HOME: hero ----- */
    .hero {
      text-align: center;
      position: relative;
      overflow: hidden;
      padding: clamp(30px, 5vw, 60px) clamp(18px, 4vw, 48px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 18% 0%, rgba(176, 112, 31, 0.12), transparent 42%),
        radial-gradient(circle at 86% 12%, rgba(176, 112, 31, 0.12), transparent 40%),
        var(--panel);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
      animation: riseIn 320ms ease;
    }
    .hero-kicker {
      color: var(--teal-text);
      font-weight: 800;
      letter-spacing: 0.04em;
      font-size: 0.95rem;
    }
    .hero-title {
      font-size: clamp(2.1rem, 5.6vw, 3.6rem);
      line-height: 1.04;
      letter-spacing: -0.015em;
      margin-top: 10px;
    }/* One focal action. */
    .hero-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-top: 26px;
    }.hero-cta .ghost-button { min-height: var(--control-min); font-size: 0.9rem; padding: 0 18px; }/* ----- HOME: how-it-works steps ----- */
    .steps { margin-top: 28px; }
    /* Keep scrolled-to sections clear of the sticky nav (title/paragraph not clipped). */
    #how-it-works { scroll-margin-top: 84px; }

    /* ----- HOME: daily groove + bonus tools ----- */
    .home-daily {
      margin-top: 28px;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 16px;
    }.home-daily-card {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .home-daily-card { display: flex; flex-direction: column; }.plan-note { color: var(--muted); font-size: 0.8rem; }/* teaching lines */
    .groove-why { margin-top: 6px; color: var(--soft); font-size: 0.88rem; line-height: 1.45; max-width: 62ch; }
    .level-hint { margin: -4px 0 6px; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
    .voicing-why { margin: 8px 2px 0; color: var(--soft); font-size: 0.84rem; line-height: 1.45; }
    /* trial trust line + back-to-groove pathway + footer support block */
    .trial-trust { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.01em; }
    /* "Back to this Groove" — a warm gold thread back to the deck, in both themes. */
    .back-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(176, 112, 31, 0.4); border-left: 3px solid var(--gold, #b0701f); border-radius: 12px; background: linear-gradient(135deg, rgba(176, 112, 31, 0.1), rgba(176, 112, 31, 0.03) 65%); }
    .back-context-label { color: var(--soft); font-size: 0.88rem; }
    .back-context-label strong { color: var(--ink); }
    .back-context .mini-button { border-color: rgba(176, 112, 31, 0.55); color: #8a6a10; font-weight: 850; background: rgba(255, 255, 255, 0.65); }
    .back-context .mini-button:hover { border-color: var(--gold, #b0701f); background: rgba(176, 112, 31, 0.16); }
    .back-context .mini-button svg { color: var(--gold, #b0701f); }
    .back-context.is-quiet { border: 0; background: transparent; padding: 0; margin: 0 0 10px; }
    body[data-theme="dark"] .back-context { background: linear-gradient(135deg, rgba(176, 112, 31, 0.14), rgba(176, 112, 31, 0.04) 65%); border-color: rgba(176, 112, 31, 0.35); }
    body[data-theme="dark"] .back-context .mini-button { background: rgba(0, 0, 0, 0.25); color: #ecc95e; border-color: rgba(176, 112, 31, 0.45); }
    .footer-support { margin: 14px 0 10px; display: grid; gap: 6px; justify-items: center; }
    .footer-support strong { font-size: 0.9rem; color: var(--soft); font-weight: 700; }
    .footer-support a { display: inline-flex; align-items: center; min-height: var(--control-min); }
    .footer-support-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; }
    .home-daily-name { display: block; font-size: 1.4rem; font-weight: 800; margin-top: 6px; color: var(--ink); }
    .home-daily-meta { color: var(--muted); font-size: 0.92rem; }
    .home-daily-chords { display: block; margin-top: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
    .home-daily-feel { color: var(--soft); margin: 8px 0 0; line-height: 1.45; }
    .home-daily-goal { display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 0.9rem; margin: 10px 0 16px; line-height: 1.4; }
    .home-daily-goal svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--teal); }
    .home-daily-goal { margin-bottom: 6px; }
    .home-daily-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .home-daily-top .kicker { margin: 0; }
    .home-daily-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
    .home-daily-status svg { width: 14px; height: 14px; }
    .home-daily-status.is-done { color: var(--teal-deep); border-color: rgba(176, 112, 31, 0.4); background: rgba(176, 112, 31, 0.1); }
    .hd-flame { display: inline-flex; }
    .hd-shield { display: inline-flex; vertical-align: -3px; color: var(--teal-deep); }
    .hd-shield svg { width: 14px; height: 14px; }
    .hd-flame svg { color: #e8923b; }
    .home-daily-streakline { color: var(--soft); font-size: 0.82rem; margin: 2px 0 14px; }
    body[data-theme="dark"] .home-daily-status.is-done { color: #e7c266; }
    /* Streak rescue: warm amber framing — lapsed-but-savable reads urgent, not lost. */
    .home-daily-status.is-restore { color: #9a6510; border-color: rgba(232, 146, 59, 0.5); background: rgba(232, 146, 59, 0.12); }
    body[data-theme="dark"] .home-daily-status.is-restore { color: #f0b873; border-color: rgba(232, 146, 59, 0.45); background: rgba(232, 146, 59, 0.16); }
    .home-daily.is-restore .home-daily-card { border-color: rgba(232, 146, 59, 0.55); box-shadow: 0 0 0 1px rgba(232, 146, 59, 0.25), var(--shadow); }
    .home-daily-cta.is-restore { background: linear-gradient(135deg, #ef9a45, #e07f2c); color: #fff; border-color: transparent; font-weight: 800; }
    .home-daily-cta.is-restore svg { color: #fff; }
    .home-daily-cta.is-restore:hover { background: linear-gradient(135deg, #f0a253, #e8862f); }
    .home-daily-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }   /* anchored to the card bottom — no dead space */
    .home-daily-actions .ghost-button { flex: 1 1 160px; }
    /* ----- HOME: weekly recap ("Your week in review") ----- */
    .home-recap { position: relative; margin-top: 28px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(138, 86, 19, 0.10), rgba(176, 112, 31, 0.04) 60%, var(--panel)); box-shadow: var(--shadow); overflow: hidden; }
    .home-recap::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); }
    .home-recap-top .kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
    .home-recap-top .kicker svg { width: 14px; height: 14px; color: var(--teal); }
    .home-recap-headline { font-size: 1.5rem; font-weight: 850; color: var(--ink); margin: 6px 0 16px; line-height: 1.2; }
    .home-recap-close { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .16s, color .16s; }
    .home-recap-close:hover { background: rgba(120,130,140,0.14); color: var(--ink); }
    .home-recap-close svg { width: 16px; height: 16px; }
    .home-recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
    .recap-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
    .recap-stat strong { font-size: 1.7rem; font-weight: 850; color: var(--teal-deep); line-height: 1; font-variant-numeric: tabular-nums; }
    .recap-stat span { font-size: 0.74rem; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }
    .home-recap-note { color: var(--soft); font-size: 0.9rem; line-height: 1.5; margin: 0 0 16px; }
    .home-recap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .home-recap-actions .primary-button, .home-recap-actions .ghost-button { flex: 1 1 180px; }
    body[data-theme="dark"] .home-recap { background: linear-gradient(150deg, rgba(217, 169, 90, 0.14), rgba(217, 169, 90, 0.04) 60%, var(--panel-strong)); }
    body[data-theme="dark"] .recap-stat { background: var(--panel-strong); }
    body[data-theme="dark"] .recap-stat strong { color: #e7c266; }@media (max-width: 560px) { .home-recap-stats { grid-template-columns: repeat(2, 1fr); } .home-recap-headline { font-size: 1.3rem; } }
    .tool-row {
      display: flex;
      gap: 12px;
      align-items: center;
      text-align: left;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-strong);
      cursor: pointer;
      transition: transform 160ms ease, border-color 160ms ease;
    }
    .tool-row:hover { transform: translateY(-1px); border-color: var(--teal); }

    /* ----- HOME: subtle stats strip ----- */
    .home-stats {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);   /* duty split 2026-07-12: Today · Streak · Shelf */
      gap: 12px;
    }
    .home-goal-bar { height: 4px; margin: 8px auto 0; max-width: 130px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
    .home-goal-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--teal); transition: width .5s var(--ease-ui); }
    .home-goal-bar.is-met i { background: var(--gold); }
    .home-stat {
      text-align: center;
      padding: 14px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-strong);
    }
    .home-stat span {
      display: block;
      color: var(--muted);
      font-size: 0.74rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .home-stat strong { font-size: 1.4rem; }

    /* ----- GROOVE CARD: new beginner-friendly pieces ----- */
    .difficulty-note {
      color: var(--soft);
      font-size: 0.98rem;
      line-height: 1.5;
      background: var(--bg-soft);
      border-left: 3px solid var(--teal);
      padding: 11px 14px;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .groove-summary {
      color: var(--soft);
      font-size: 0.9rem;
      line-height: 1.45;
      margin-top: 4px;
    }
    .meta-hint {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.3;
      margin-top: 3px;
    }
    .goal-eyebrow {
      font-weight: 800;
      color: var(--teal);
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .chord-strip-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
    }
    .chord-scale { color: var(--soft); font-size: 0.85rem; }
    .chord-scale .meta-hint { display: inline; margin-left: 4px; }
    .hands-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin: 16px 0;
    }
    .hands-grid.is-duo { grid-template-columns: repeat(2, 1fr); }
    .idea-tag { display: inline-block; min-width: 38px; color: var(--teal-deep); font-weight: 850; }
    body[data-theme="dark"] .idea-tag { color: #e7c266; }
    .hand-block {
      padding: 14px;
      border: 1px solid var(--line);
      border-top-width: 3px;
      border-radius: var(--radius);
      background: var(--panel-strong);
    }
    .hand-left { border-top-color: var(--blue); }
    .hand-right { border-top-color: var(--teal); }
    .hand-rhythm { border-top-color: var(--gold); }
    .hand-block h3 {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--ink);
    }
    .hand-hint {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0;
    }
    .hand-block p { margin-top: 8px; color: var(--soft); font-size: 0.92rem; line-height: 1.45; }
    .coaching-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
      margin: 16px 0;
    }
    .coach-trains { background: rgba(176, 112, 31, 0.06); border-color: rgba(176, 112, 31, 0.25); }
    .coach-block {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-soft);
    }
    .coach-block h3 {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .coach-block p { margin-top: 6px; color: var(--soft); font-size: 0.95rem; line-height: 1.5; }.start-here {
      margin-top: 14px;
      padding: 13px 15px;
      border: 1px solid rgba(176, 112, 31, 0.32);
      border-left: 4px solid var(--teal);
      border-radius: var(--radius);
      background: rgba(176, 112, 31, 0.08);
    }
    .start-here strong { display: block; color: var(--ink); font-size: 0.98rem; }
    .start-here p { margin-top: 4px; color: var(--soft); font-size: 0.9rem; line-height: 1.45; }/* Chord Diagrams: docked under the chord strip on wide screens (full rationale in git). */
    .advanced-group .meta-grid { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
    .advanced-group .meta-value { overflow-wrap: break-word; }
    .completion-card {
      margin: 16px 0;
      padding: 18px;
      border: 1px solid rgba(176, 112, 31, 0.38);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(176, 112, 31, 0.13), rgba(176, 112, 31, 0.08));
      display: grid;
      gap: 10px;
    }
    .completion-card h3 { color: var(--ink); font-size: 1.25rem; }
    .completion-card p { color: var(--soft); line-height: 1.45; }.completion-skills { display: flex; flex-wrap: wrap; gap: 7px; }
    .skill-chip {
      padding: 5px 9px;
      border: 1px solid rgba(176, 112, 31, 0.28);
      border-radius: 999px;
      background: rgba(176, 112, 31, 0.09);
      color: var(--teal-deep);
      font-size: 0.76rem;
      font-weight: 800;
    }
    body[data-theme="dark"] .skill-chip { color: #e7c266; background: rgba(176, 112, 31, 0.18); }
    /* The ending card's one-time Follow-me offer (art168). The slot stays in the DOM so the mic
       resolving repaints it alone; :empty stops it spending a grid gap on nothing. Grid, not flex —
       art151's coach-mark scrambled this by becoming a flex child. */
    .fm-offer-slot:empty { display: none; }
    .fm-offer { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid rgba(176, 112, 31, 0.34); border-radius: var(--radius); background: rgba(176, 112, 31, 0.10); }
    .fm-offer-ask { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 800; }
    .fm-offer-ask svg { width: 15px; height: 15px; color: var(--teal-deep); flex: none; }
    .fm-offer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .fm-offer-yes { padding: 9px 15px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, #e7c266, #b0701f); color: #24170a; font-weight: 800; font-size: 0.86rem; cursor: pointer; transition: transform 0.1s ease, filter 0.14s ease; }
    .fm-offer-yes:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .fm-offer-no { padding: 9px 11px; border: 0; background: none; color: var(--soft); font-weight: 700; font-size: 0.82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
    .fm-offer-no:hover { color: var(--ink); }
    .fm-note { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 0.88rem; }
    .fm-note svg { width: 15px; height: 15px; flex: none; }
    .fm-note.is-on { color: var(--teal-deep); font-weight: 750; }
    /* MEASURED: var(--rose) (#b85c50) is 4.16:1 on this card — its brass wash is darker than paper, so
       a token that passes on paper fails here. Light-only darken → 5.2:1; dark's --rose clears at 6.29. */
    .fm-note.is-off { color: #a44e42; }
    body[data-theme="dark"] .fm-note.is-off { color: var(--rose); }
    body[data-theme="dark"] .fm-offer-ask svg, body[data-theme="dark"] .fm-note.is-on { color: #e7c266; }
    @media (prefers-reduced-motion: reduce) { .fm-offer-yes:hover { transform: none; } }
    .journey-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .journey-step { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-weight: 750; font-size: 0.86rem; cursor: pointer; transition: border-color 0.14s ease, transform 0.1s ease; }
    .journey-step:hover { border-color: var(--teal-deep); transform: translateY(-1px); }
    .journey-step svg { width: 14px; height: 14px; color: var(--teal-deep); flex: none; }
    .journey-step.is-done { color: var(--muted); cursor: default; }
    .journey-step.is-done svg { color: var(--muted); }
    .controls-simple { display: grid; gap: 10px; }
    .controls-advanced {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }
    .controls-advanced-body { display: grid; gap: 14px; margin-top: 14px; }
    .mixer-disclosure { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
    .mixer-disclosure .band-mixer { margin-top: 14px; }
    body.modal-open { overflow: hidden; }
    .empty-state-action { display: grid; gap: 10px; justify-items: start; }@media (max-width: 680px) { .completion-card  { padding: 14px; }
      .advanced-group { padding: 12px; }
    }
    .favorite-toggle.is-saved {
      background: var(--teal);
      color: #fff;
      border-color: var(--teal);
    }

    /* ----- CONTROLS panel additions ----- */
    .panel-sub { color: var(--muted); font-size: 0.9rem; margin-top: 6px; line-height: 1.4; }
    .generate-button { font-size: 1.05rem; min-height: 56px; }
    .control-hint { color: var(--muted); font-size: 0.82rem; text-align: center; line-height: 1.4; }

    /* ----- SUPPORT BANNERS (Sheet / Ear) ----- */
    .support-banner {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px 18px;
      margin-bottom: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    /* Per-section colored side accents — a consistent edge color per section. */
    .support-banner--groove { border-left: 4px solid var(--teal); }
    .support-banner--account { border-left: 4px solid var(--rose); }
    .support-icon { font-size: 1.8rem; line-height: 1; flex: 0 0 auto; }
    .support-title { font-weight: 800; font-size: 1.05rem; }
    .support-text { color: var(--soft); font-size: 0.92rem; margin-top: 4px; line-height: 1.5; max-width: 72ch; }
    .support-badge {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--bg-soft);
      color: var(--muted);
      margin-left: 6px;
      vertical-align: middle;
    }

    /* ----- FOOTER ----- */
    .site-footer {
      margin-top: 34px;
      padding: 26px clamp(16px, 4vw, 30px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: var(--shadow);
      display: grid;
      gap: 12px;
    }
    .footer-cols { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(110px, 1fr)); gap: 18px 22px; text-align: left; }
    .footer-col .footer-link { justify-content: flex-start; text-align: left; min-height: 36px; padding: 4px 0; }
    /* art244: four link groups hold ONE row down to 560px (the 2x2 ate the half-screen page);
       phones pair 2x2 — the 430px one-column tower is retired */
    @media (max-width: 980px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; } .footer-col.footer-brand { grid-column: 1 / -1; } }
    @media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 10px 16px; } .site-footer { padding: 20px 16px; margin-top: 24px; } .footer-col .footer-link { min-height: 32px; padding: 2px 0; } }
    .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .footer-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 4px; }
    .footer-brand strong { font-size: 1.15rem; }
    .footer-brand span { color: var(--teal); font-weight: 600; }
    .footer-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 6px 0 2px; }
    .footer-mail { font-weight: 650; }
    .footer-link {
      min-height: var(--control-min);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      color: var(--soft);
      text-decoration: underline;
      cursor: pointer;
      font-size: 0.88rem;
      padding: 10px 6px;
    }
    .footer-link:hover { color: var(--teal); }

    /* ----- Responsive: stack the new grids on small screens ----- */
    @media (max-width: 820px) {.home-daily, .hands-grid, .coaching-grid { grid-template-columns: 1fr; }
      .first-chord-help,
      .first-chord-help.is-compact,
      .account-boundary {
        grid-template-columns: 1fr;
      }
      .first-chord-help .first-chord-visual { grid-column: 1; grid-row: auto; }
      .account-boundary-actions {
        justify-content: flex-start;
      }
      .home-loop-steps { grid-template-columns: 1fr 1fr; }
      .home-loop-steps li:nth-child(3) { border-left: 0; }
      .home-loop-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
      .home-ecosystem { grid-template-columns: 1fr; }
    }@media (max-width: 960px) {
      /* Phones (incl. LANDSCAPE iPhones, ~660–930px wide): one column. The two-column deck
         left half-empty space beside the card and crammed the piano chord diagrams. */
      .hero-grid { grid-template-columns: 1fr; }
    }@media (max-width: 560px) {.home-stage .instrument-bar {
        padding: 8px;
      }
      .home-stage .instrument-seg {
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        overflow: visible;
        border: 0;
        background: transparent;
        gap: 6px;
      }
      .home-stage .instrument-seg .seg {
        flex: 1 1 28%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 6px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .home-stage .instrument-seg .seg.is-active { border-color: var(--ink); }.first-chord-visual .pkbd {
        height: 58px;
      }
      .home-stats { grid-template-columns: repeat(2, 1fr); }
      .hero-cta .primary-button,
      .hero-cta .ghost-button { width: 100%; }
      .support-banner { flex-direction: column; }
      .home-loop-steps { grid-template-columns: 1fr; }
      .home-loop-steps li, .home-loop-steps li + li { padding: 14px 0; border-left: 0; }
      .home-loop-steps li + li { border-top: 1px solid var(--line); }
      .home-path-row { grid-template-columns: 38px minmax(0, 1fr); }
      .home-path-cta { grid-column: 2; white-space: normal; }
      .learn-full-library > summary { align-items: flex-start; }
      .learn-full-library > summary > span:last-child { display: none; }
    }@media (max-width: 900px) {
      /* Stacked nav: primary destinations full-width (Groove Deck's tools indent under it),
         then a tidy 2×2 utility grid — four cells, no orphan holes, nothing hidden. */
      .app-nav {
        position: static;
        gap: 6px;
      }
      .nav-caret { width: 100%; min-height: 42px; }
      /* inline indented list between Groove Deck and My Practice (auto-open shows here) */
      .nav-tools, .nav-tools.is-auto {
        position: static; display: flex; flex-direction: column; align-items: stretch;
        min-width: 0; box-shadow: none; border: 0; border-left: 2px solid rgba(176, 112, 31, 0.35);
        border-radius: 0; background: transparent; margin: 2px 0 2px 10px; padding: 2px 0 2px 10px;
      }

      .section-layout {
        grid-template-columns: minmax(0, 1fr);
      }.sheet-reader {
        min-width: 0;
      }
    }@media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }
    }@media (max-width: 720px) {
      body.active-practice .shell { width: min(100% - 18px, 1160px); padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
      body.active-practice.has-compact-transport .shell { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
      body.active-practice .groove-card { padding: 14px; }
      body.active-practice .card-head { gap: 10px; margin-bottom: 10px; }
      body.active-practice .mission-chip { display: none; }
      body.active-practice .groove-title { font-size: clamp(1.55rem, 8vw, 2.25rem); }
      body.active-practice .groove-summary, body.active-practice .groove-why { font-size: 0.86rem; line-height: 1.35; }
      body.active-practice .chord-strip { margin: 10px 0; padding: 12px; }
      body.active-practice .chords { font-size: clamp(1.18rem, 6vw, 1.72rem); gap: 7px; }
      body.active-practice .chord { min-height: 42px; padding: 7px 9px; }
      body.active-practice .start-here p { display: none; }
      body.active-practice .tempo-quick, body.active-practice .accomp-quick, body.active-practice .density-quick { margin-top: 8px; padding: 8px 9px; }
      body.active-practice .chord-quick-actions .quick-play, body.active-practice .chord-quick-actions .quick-new { flex: 1 1 150px; min-height: 48px; } body.active-practice .beat-panel { display: none; }
    }

    /* The landscape-only chord-shape panel is hidden everywhere except phone-landscape (below). */
    .deck-landscape-shape { display: none; }@media (orientation: landscape) and (max-height: 560px) {
      body.active-practice .app-header { position: static; }
      body.active-practice .support-banner, body.active-practice .guide-panel, body.active-practice .groove-mode-tabs, body.active-practice .hero-grid > .panel { display: none !important; }
      /* Band survives rotation (owner 2026-07-14): .studio-hud was in the hide-list above, which
         reclaimed height but took the BAND CHIPS — function, not decoration. Keep card, drop ornament. */
      body.active-practice .studio-hud { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; }
      body.active-practice .studio-hud .studio-hud-head,
      body.active-practice .studio-hud .studio-playbar,
      body.active-practice .studio-hud .studio-first-line { display: none; }
      body.active-practice .studio-hud .studio-band { margin: 0; }
      /* Keep the instrument switcher reachable in landscape — just as a slim strip. */
      body.active-practice .instrument-bar { margin: 0 0 7px; padding: 4px 8px; gap: 8px; }
      body.active-practice .instrument-bar .instrument-bar-label { display: none; }
      /* Fill the bar (owner: "extends too far... empty space"): base caps the seg at 440px in an
         ~828px bar. ONE row — not portrait's wrapping chips: landscape is height-constrained. */
      body.active-practice .instrument-bar .instrument-seg { min-width: 0; width: 100%; max-width: none; flex: 1 1 auto; }
      body.active-practice .instrument-bar .instrument-seg .seg { flex: 1 1 0; }
      body.active-practice .instrument-bar .instrument-seg button { min-height: 34px; padding: 4px 10px; }
      body.active-practice .shell { width: min(var(--content-max), calc(100% - 16px)); padding-top: 8px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
      body.active-practice.has-compact-transport .shell { padding-bottom: calc(138px + env(safe-area-inset-bottom)); }
      body.active-practice .hero-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
      body.active-practice .main-column { gap: 8px; }
      /* Landscape phones: the chord strip (the actual practice content) takes the wide column and
         the chords sit four-across; the title is a slim left rail with the tool buttons pulled UP
         beside it, so the reclaimed width is used instead of a tall empty gap on the side. */
      body.active-practice .groove-card { display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr); gap: 12px; align-items: start; }
      body.active-practice .groove-card .card-head { grid-column: 1; grid-row: 1; margin: 0; }
      body.active-practice .groove-card .chord-strip { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
      /* Left rail under the title: the live chord SHAPE first (it follows each chord without
         scrolling), then the tool buttons below it — most-useful content gets the prime slot. */
      body.active-practice .groove-card .deck-landscape-shape { display: block; grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
      /* Narrow left rail: one shrink-to-fit column for the chord help. */
      body.active-practice .groove-card .deck-landscape-shape .first-chord-help,
      body.active-practice .groove-card .deck-landscape-shape .first-chord-help.is-compact { grid-template-columns: minmax(0, 1fr); gap: 7px; }
      /* Single column: undo the desktop two-column star placement (copy/nav left, visual right). */
      body.active-practice .groove-card .deck-landscape-shape .first-chord-copy,
      body.active-practice .groove-card .deck-landscape-shape .first-chord-visual,
      body.active-practice .groove-card .deck-landscape-shape .first-chord-nav { grid-column: 1; grid-row: auto; }
      /* Pager label on its own centred row (2026-07-09). */
      body.active-practice .groove-card .deck-landscape-shape .first-chord-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }
      body.active-practice .groove-card .deck-landscape-shape .first-chord-pos { grid-column: 1 / -1; grid-row: 1; font-size: 0.78rem; }
      body.active-practice .groove-card .deck-landscape-shape .first-chord-nav .chord-nav-btn { padding: 7px 9px; gap: 3px; justify-content: center; }
      body.active-practice .groove-card .deck-landscape-shape .first-chord-visual .pkbd { height: 58px; }
      body.active-practice .groove-card .chord-strip .first-chord-help { display: none; }
      body.active-practice .groove-card .groove-rail { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0; grid-template-columns: 1fr 1fr; grid-auto-flow: row; }body.active-practice .groove-card .completion-card { grid-column: 1 / -1; }
      body.active-practice .groove-card .card-head { display: grid; }
      body.active-practice .eyebrow { margin-bottom: 4px; font-size: 0.66rem; }
      body.active-practice .groove-title { font-size: clamp(1.35rem, 4vw, 2rem); }
      body.active-practice .groove-summary { font-size: 0.78rem; }
      body.active-practice .groove-why { display: none; }
      body.active-practice .compact-transport { grid-template-columns: minmax(0, 1fr) auto; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 8px; }
      body.active-practice .compact-transport [data-action="compact-expand"] { display: none; }
    }

    /* The persistent transport bar duplicates the deck's own Play/Pause (right there on screen) and
       covered too much of a phone, so it's hidden on phones — portrait AND landscape — and the space
       it reserved is reclaimed. Tablets and desktop keep it, where it's useful and unobtrusive. */
    @media (max-width: 720px) {
      .compact-transport { display: none; }
      body.has-compact-transport .shell,
      body.active-practice.has-compact-transport .shell { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    }@media (orientation: landscape) and (max-height: 560px) {
      .compact-transport { display: none; }
      body.has-compact-transport .shell,
      body.active-practice.has-compact-transport .shell { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    }@media (max-width: 620px) {.compact-transport { grid-template-columns: minmax(0, 1fr) auto; }
      .compact-transport [data-action="compact-expand"] { display: none; }
    }@media print {
      body {
        background: #ffffff;
      }.app-nav,.hero-grid > .panel,.beat-panel,.favorite-toggle,.site-footer,.support-banner,.hero-cta {
        display: none !important;
      }

      .shell {
        width: 100%;
        padding: 0;
      }

      .hero-grid {
        display: block;
      }

      .groove-card {
        box-shadow: none;
        border: 0;
      }
    }

    /* Print: when printing a sheet, show only the notation, clean on white paper */
    @media print {
      body { background: #fff; }
      
      body.printing-sheet .topbar,body.printing-sheet .app-nav,body.printing-sheet .app-header,body.printing-sheet .bottom-nav,body.printing-sheet .site-footer,body.printing-sheet .support-banner,body.printing-sheet .section-panel,body.printing-sheet .membership-nudge,body.printing-sheet .path-panel,body.printing-sheet .reader-actions,body.printing-sheet .sheet-tool-row,body.printing-sheet .reader-note,body.printing-sheet .header-actions,body.printing-sheet .sheet-focus-overlay,body.printing-sheet .sheet-caption,body.printing-sheet .instrument-bar,body.printing-sheet .transpose-row,body.printing-sheet .sheet-extra-toggles,body.printing-sheet .notation-ref,body.printing-sheet .sheet-theory,body.printing-sheet .note-guide,body.printing-sheet .preview-banner,body.printing-sheet .trial-banner,body.printing-sheet .trial-ribbon,body.printing-sheet .back-context,body.printing-sheet .fingering-panel { display: none !important; }
      body.printing-sheet .section-layout { display: block; }
      body.printing-sheet .sheet-reader { border: 0; box-shadow: none; background: #fff; padding: 0; }
      body.printing-sheet .sheet-scroll { max-height: none; overflow: visible; border: 0; background: #fff; padding: 0; }
      body.printing-sheet .sheet-notation svg { max-width: 100%; }
      /* Paper is WHITE regardless of the on-screen theme: dark mode's off-white ink printed
         invisible (owner 2026-07-17). Force dark ink on everything that reaches the page. */
      body.printing-sheet, body.printing-sheet .sheet-reader, body.printing-sheet .sheet-scroll { color: #111 !important; }
    }

    /* ---- Clean print surface (#print-root): the ONLY thing shown when printing a groove/chart ---- */
    .print-root { display: none; }@media print {
      body.printing-doc { background: #fff; }
      body.printing-doc > * { display: none !important; }
      body.printing-doc > #print-root { display: block !important; }
      /* Belt-and-suspenders for the Jam room: it is a position:fixed full-screen overlay, and the
         drawers/pickers live in #overlay-root. iOS Safari would otherwise capture that fixed layer
         instead of the print sheet, so hide every app surface explicitly and release the scroll lock. */
      body.printing-doc.jam-immersive { overflow: visible !important; }
      body.printing-doc .jam-room-v2, body.printing-doc #overlay-root, body.printing-doc #app-header, body.printing-doc #bottom-nav, body.printing-doc #toast-root { display: none !important; }
      /* Transcribe print: clean notation only — drop the per-note edit controls + experimental notice. */
      body.printing-doc .ear-chip-edit, body.printing-doc .ear-view-controls, body.printing-doc .ear-honesty { display: none !important; }
      #print-root, #print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
      /* THE DARK-MODE PRINT FIX (owner 2026-07-17): the transcription print body ships as
         .print-sheet/.print-ear-body — classes NO print rule ever inked, so dark mode's
         off-white body color survived onto white paper (invisible text in every transcription
         view's print). Ink them like .pr-sheet; chips/cells keep their own darks below. */
      .print-sheet, .print-sheet *, .print-ear-body, .print-ear-body * { color: #111 !important; background: transparent !important; border-color: #999 !important; }
      .print-sheet .chord-sym, .print-ear-body .chord-sym, .print-sheet .coach-k, .print-ear-body .coach-k { color: #000 !important; }
      .pr-sheet { color: #111; font-family: "Inter", system-ui, -apple-system, sans-serif; padding: 4px; }
      .pr-head { border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 16px; }
      .pr-title { font-size: 30px; font-weight: 800; margin: 0; line-height: 1.04; }
      .pr-filters { font-size: 11.5px; color: #444; margin: 4px 0 0; }
      .pr-chords { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
      /* piano keyboards need real width to read — two per row, never crammed */
      .pr-chords.pr-two { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; }
      .pr-chords.pr-two .pr-chord-visual .pkbd { height: 84px; }
      .pr-chord { break-inside: avoid; text-align: center; }
      .pr-chord-name { font-size: 17px; font-weight: 800; margin-bottom: 6px; color: #111; }
      .pr-chord-visual { display: flex; justify-content: center; align-items: center; min-height: 66px; }
      .pr-chord-visual .pkbd { width: 100%; height: 60px; margin: 0; }
      .pr-chord-visual .fretboard { max-width: 100%; height: auto; }
      .pr-chord-notes { font-size: 10px; color: #444; margin-top: 6px; line-height: 1.25; }
      .pr-foot { margin-top: 22px; font-size: 11.5px; color: #222; line-height: 1.5; border-top: 1px solid #ccc; padding-top: 10px; }
      .pr-foot p { margin: 0 0 4px; }
      .pr-brand { margin-top: 16px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #999; }
      .pr-ear-notation { margin: 6px 0 14px; }
      .pr-ear-notation svg { max-width: 100%; height: auto; }
      .pr-section-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #444; margin: 18px 0 8px; }
      /* ---- Jam session sheet (print/share) ---- */
      .jam-print-sheet { color: #2b2114; font-family: "Inter", system-ui, -apple-system, sans-serif; }
      .jam-print-sheet .jp-head { border-bottom: 2px solid #2b2114; padding-bottom: 10px; margin-bottom: 18px; }
      .jam-print-sheet .jp-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a5613; }
      .jam-print-sheet h1 { margin: 0; font-size: 28px; font-weight: 850; line-height: 1.05; }
      .jam-print-sheet .jp-meta { margin: 8px 0 0; font-size: 15px; }
      .jam-print-sheet .jp-meta strong { font-family: "JetBrains Mono", ui-monospace, monospace; }
      .jam-print-sheet .jp-sub { font-size: 12.5px; color: #506072; }
      .jam-print-sheet .jp-h2 { font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; color: #506072; margin: 20px 0 9px; }
      .jam-print-sheet .jp-form { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
      .jam-print-sheet .jp-form li { display: flex; align-items: baseline; gap: 7px; padding: 6px 12px; border: 1px solid #d9d0bd; border-radius: 8px; }
      .jam-print-sheet .jp-form strong { font-weight: 800; }
      .jam-print-sheet .jp-form span { font-size: 11.5px; color: #607082; }
      .jam-print-sheet .jp-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .jam-print-sheet .jp-role { break-inside: avoid; border: 1px solid #d3dce4; border-radius: 8px; padding: 12px 14px; }
      .jam-print-sheet .jp-role h3 { margin: 0 0 5px; font-size: 15px; font-weight: 850; }
      .jam-print-sheet .jp-role h3 span { font-weight: 650; color: #607082; }
      .jam-print-sheet .jp-role-sum { margin: 0 0 7px; font-size: 13px; line-height: 1.4; }
      .jam-print-sheet .jp-role ul { margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.5; color: #3a2d1c; }
      .jam-print-sheet .jp-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid #d9d0bd; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8a97a5; }
      @page { margin: 14mm; }
    }
    /* ^ @media print closer — was stranded atop 60-studio-mode.css (css-parse-integrity.test.js). */

    /* art237: the support links live in a COLUMN now — the old inline "·" separators rendered as orphaned dashes (owner screenshot). */
    /* Phones (owner 2026-07-12): support links become compact chips. LANDSCAPE (2026-07-14): a
       rotated iPhone is 667-932px WIDE, so a max-width:640px block silently switched off on
       rotation and the pills vanished. A phone is still a phone sideways — match short too. */
    @media (max-width: 640px), (orientation: landscape) and (max-height: 560px) {
      .footer-support-links { gap: 8px; }
      .footer-links { gap: 10px 14px; }
      .footer-links .footer-link { font-size: 0.78rem; }
    }