:root {
    color-scheme: dark;
    /* Locked temple-sanctum palette. The three golds all clear 4.5:1 on
       the lightest umber surface (#6c452d): active 6.48:1, standard
       4.76:1, and dimmed 4.81:1. Semantic aliases below keep every screen
       on the same system instead of introducing one-off gold values. */
    --gold-active: #ffe09a;
    --gold-standard: #eabd72;
    --gold-dim: #d4c3a5;
    --gold-active-rgb: 255 224 154;
    --gold-standard-rgb: 234 189 114;
    --gold-dim-rgb: 212 195 165;
    --umber-page: #5a3822;
    --umber-surface: #6c452d;
    --umber-panel: #5d3a25;
    --umber-deep: #442c1a;
    --umber-shadow: #2e1c08;
    --maroon-accent: #a84432;
    --record-active: #ffb7aa;
    --record-active-rgb: 255 183 170;
    --paper: var(--umber-page);
    --card: var(--umber-surface);
    --panel: var(--umber-panel);
    --frame-maroon: var(--maroon-accent);
    --frame-border: var(--gold-standard);
    --gold: var(--gold-standard);
    --gold-bright: var(--gold-active);
    --ink: #f7eeda;
    --maroon: var(--gold-standard);   /* luminous title/shloka text on umber */
    --muted: var(--gold-dim);
    --line-border: rgb(var(--gold-standard-rgb) / 0.55);
    --track-bg: #7a5732;
    /* Lyric text size; the A/A slider scales it via --lyric-scale (0.70–1.60). */
    --lyric-size: 2.55rem;
    --lyric-scale: 1;
    /* Listen's lyric sheet starts 25% larger than its previous resting size;
       --lyric-scale still scales that screen-specific baseline. */
    --lyric-size-home: 2.85rem;
    /* The player bar is anchored to the bottom of its screen as an
       in-flow flex child enclosed by the app frame; --playerH tracks
       its measured height (fitPlayerPadding). */
    --playerH: 168px;
    /* One diameter for every player button, both rows: the transport
       reads as a matched set instead of mixed circles and pills.
       (40px on phones, see the narrow-width rules.) */
    --ctl-size: 46px;
    --active-bg: rgb(var(--gold-standard-rgb) / 0.18);
    --active-ring: rgb(var(--gold-standard-rgb) / 0.70);
    --hover-bg: rgb(var(--gold-standard-rgb) / 0.12);
    --type: "Noto Serif Devanagari", "Noto Serif Tamil", "Noto Serif Telugu", "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Grantha", "Noto Serif", "Kokila", "Mangal", serif;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Never chain an overscroll out to the browser: a pull-down at the
       top of a scroll region must not become pull-to-refresh. */
    overscroll-behavior: none;
  }

  html {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--type);
    -webkit-text-size-adjust: 100%;
  }

  body {
    display: flex;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    padding: 18px 12px 18px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3 L25 14 L14 25 L3 14 Z' fill='none' stroke='%23c9a24b' stroke-opacity='0.07'/%3E%3Ccircle cx='14' cy='14' r='1.3' fill='%23c9a24b' fill-opacity='0.07'/%3E%3C/svg%3E"),
      radial-gradient(1100px 420px at 50% -140px, rgb(var(--gold-standard-rgb) / 0.16), rgb(var(--gold-standard-rgb) / 0) 65%),
      linear-gradient(180deg, var(--umber-surface) 0%, var(--umber-page) 55%, var(--umber-deep) 100%);
    background-attachment: fixed;
  }

  .frame {
    position: relative;
    width: 100%;
    max-width: 680px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
    /* Temple-like double rule: maroon outer line, gold hairline inside. */
    box-shadow:
      inset 0 0 0 3px var(--card),
      inset 0 0 0 4px var(--frame-border),
      0 14px 36px rgba(0, 0, 0, 0.55);
  }
  /* Keep the inner gold rule above every full-width child surface. Player
     wrappers are opaque so a parent inset shadow alone disappears behind
     them, most visibly when the taller Setup face is open. This overlay
     traces the frame itself, so the entire perimeter stays enclosed in
     every player state and on every screen. */
  .frame::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 100;
    border: 1px solid var(--frame-border);
    border-radius: 6px;
    pointer-events: none;
  }

  /* ---------- Banner ---------- */
  /* The framed picture sits inset on the same column as the player panel
     and lyric column below it (28px, 16px on phones), so its left and
     right edges line up exactly with theirs. */
  .banner {
    display: block;
    position: relative;
    width: 100%;
    margin: 4px 0 14px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--frame-maroon);
    border-radius: 8px;
    overflow: hidden;
    background: var(--umber-deep);
    box-sizing: border-box;
  }
  /* Framed-portrait edge: a thin gold hairline tracing the picture's edges —
     the page's maroon-and-gold double rule, with the gold sitting inside
     the maroon bottom rule. */
  .banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.7);
    border-radius: 7px;
    pointer-events: none;
  }
  .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .banner.insight-banner {
    aspect-ratio: 16 / 9 !important;
  }
  .banner.insight-banner img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ---------- Header ---------- */
  header {
    padding: 18px 28px 18px;
    text-align: center;
  }
  h1 {
    margin: 0 0 14px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--maroon);
  }
  /* Song title tooltip: hovering (or focusing/tapping) the title reveals
     song metadata, e.g. "Raga: Lalit". */
  .title-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
  }
  .title-wrap:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .title-meta {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    background: var(--umber-shadow);
    color: var(--gold-bright);
    border: 1px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 5;
  }
  .title-meta::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    transform: rotate(45deg);
    background: var(--umber-shadow);
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
  }
  .title-wrap:hover .title-meta,
  .title-wrap:focus .title-meta {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .title-meta { transition: none; }
  }
  .teacher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .teacher .photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--frame-border);
    flex: none;
  }
  .teacher .photo img {
    display: block;
    width: 160%;
    height: 160%;
    /* Face is left-and-high in the source photo (its center is at ~47%/33%
       of the frame): zoom in and offset the crop so the face is centered in
       the circle. The wrapper stays a fixed 56px circle; all edges covered. */
    margin: -2.8% 0 0 -25.6%;
  }

  /* ---------- Header tools, help & settings ----------
     The tool cluster lives in the lang-bar under the framed picture (copy,
     settings gear, starred-lines star, lyric-size A/A); the gear opens the
     help & settings popover, so the header stays clean. */
  .head-tools {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tool-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.35);
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
  }
  .tool-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .tool-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .tool-btn svg { width: 17px; height: 17px; display: block; }
  .tool-btn .gear-glyph { font-family: system-ui, sans-serif; font-size: 1.05rem; line-height: 1; }
  .tool-btn.top-setup-btn.active {
    color: var(--umber-shadow);
    background: var(--gold);
    border-color: var(--gold);
  }
  .tool-btn .icon-check { display: none; }
  .tool-btn.copied { border-color: var(--gold); color: var(--gold-bright); }
  .tool-btn.copied .icon-copy { display: none; }
  .tool-btn.copied .icon-check { display: block; }
  /* ---------- Popovers (settings & help, lyric size, script) ----------
     One open at a time, each anchored under its invoking icon in the
     lang-bar; a tap anywhere outside dismisses the open one. */
  .pop-anchor {
    position: relative;
    display: inline-flex;
  }
  .popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    width: 280px;
    max-width: calc(100vw - 48px);
    padding: 12px 14px;
    background: var(--umber-shadow);
    border: 1px solid var(--gold);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    text-align: left;
  }
  .popover[hidden] { display: none; }

  /* The top-right chrome is deliberately identical on every screen: search,
     copy, help, gear. The gear owns one shared setup dropdown, so lyric
     display controls never compete for header space. */
  .global-setup-pop {
    width: 310px;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    padding: 12px;
  }
  .setup-menu-section {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-border);
  }
  .setup-menu-section:last-child { border-bottom: 0; }
  .setup-menu-section[hidden] { display: none !important; }
  .setup-menu-section.setup-menu-stack { grid-template-columns: 1fr; }
  .setup-menu-label { color: var(--ink); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
  .setup-label-icon { width: 15px; height: 15px; color: var(--gold-bright); flex: 0 0 auto; }
  .setup-label-icon svg { display: block; width: 100%; height: 100%; }
  .classroom-sub-label { color: var(--ink); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
  .setup-reset-btn {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    justify-content: center;
    justify-self: end;
    border: 1px solid var(--line-border);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-bright);
    font: 600 .78rem/1 "Noto Serif", serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .setup-reset-btn:hover { background: var(--hover-bg); border-color: var(--gold); }
  .setup-reset-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .setup-reset-btn .reset-glyph { font: 700 1rem/1 system-ui, sans-serif; }
  .setup-control-with-reset {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .setup-control-with-reset .font-slider-row { flex: 1 1 auto; }
  .setup-menu-note { color: var(--muted); font-size: .76rem; line-height: 1.35; }
  .setup-about-credit {
    color: var(--muted);
    font: 500 .82rem/1.3 "Noto Serif", serif;
    text-align: right;
  }
  .global-setup-pop .font-slider-row { margin-top: 0; min-width: 176px; }
  /* Script selection is a compact, stacked picker rather than a fixed-width
     symbol strip. New scripts can be added to the list without changing the
     Setup row's layout. */
  .setup-script-picker {
    position: relative;
    width: 100%;
  }
  .setup-script-trigger {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    font-family: var(--type);
    cursor: pointer;
    text-align: left;
  }
  .setup-script-trigger:hover { background: var(--hover-bg); border-color: var(--gold); }
  .setup-script-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .setup-script-trigger-name { font: 600 .88rem/1.2 "Noto Serif", serif; }
  .setup-script-chevron {
    width: 7px;
    height: 7px;
    justify-self: end;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    color: var(--muted);
  }
  .setup-script-trigger[aria-expanded="true"] .setup-script-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
  }
  .setup-script-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    background: rgba(36, 20, 6, 0.72);
  }
  .setup-script-options[hidden] { display: none; }
  .setup-script-options .lang-opt {
    min-height: 36px;
    padding: 5px 9px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    line-height: 1;
  }
  .setup-script-glyph,
  .setup-script-options .lo-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 24px;
    font-size: 1.18rem;
    line-height: 1;
    text-align: center;
  }
  .setup-script-options .lang-opt[data-lang="text"] .lo-glyph,
  .setup-script-glyph[data-lang="text"] {
    font-family: "Noto Serif Devanagari", serif;
    font-size: 1.3rem;
    transform: translateY(1px);
  }
  .setup-script-options .lang-opt[data-lang="ta"] .lo-glyph,
  .setup-script-options .lang-opt[data-lang="ta_plain"] .lo-glyph,
  .setup-script-glyph[data-lang="ta"],
  .setup-script-glyph[data-lang="ta_plain"] { font-family: "Noto Serif Tamil", serif; }
  .setup-script-options .lang-opt[data-lang="te"] .lo-glyph,
  .setup-script-glyph[data-lang="te"],
  .lang-btn[data-lang="te"] { font-family: "Noto Serif Telugu", serif; }
  .setup-script-options .lang-opt[data-lang="kn"] .lo-glyph,
  .setup-script-glyph[data-lang="kn"],
  .lang-btn[data-lang="kn"] { font-family: "Noto Serif Kannada", serif; }
  .setup-script-options .lang-opt[data-lang="ml"] .lo-glyph,
  .setup-script-glyph[data-lang="ml"],
  .lang-btn[data-lang="ml"] { font-family: "Noto Serif Malayalam", serif; }
  .setup-script-options .lang-opt[data-lang="grantha"] .lo-glyph,
  .setup-script-glyph[data-lang="grantha"],
  .lang-btn[data-lang="grantha"] {
    font-family: "Noto Serif Grantha", serif;
    font-size: 1.12rem;
    transform: translateY(1px);
  }
  .setup-script-options .lang-opt[data-lang="en"] .lo-glyph,
  .setup-script-glyph[data-lang="en"] { font-family: "Noto Serif", serif; }
  .setup-script-options .lo-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font: 500 .86rem/1.25 "Noto Serif", serif;
  }
  .pitch-menu-label {
    position: relative;
    width: fit-content;
    cursor: help;
  }
  .pitch-menu-label::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    z-index: 4;
    width: max-content;
    max-width: 190px;
    padding: 5px 7px;
    border: 1px solid var(--line-border);
    border-radius: 6px;
    background: #241406;
    color: var(--ink);
    box-shadow: 0 5px 14px rgba(0,0,0,.35);
    font: 500 .76rem/1.25 "Noto Serif", serif;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
  }
  .pitch-menu-label:hover::after,
  .pitch-menu-label:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
  }
  .pitch-menu-label:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
  .global-setup-pop .pitch-ctl {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: nowrap;
  }
  /* The section heading already says Pitch; do not repeat it inside the
     control. Keep the semitone offset compact and give the resulting note
     its own clearly separated badge. */
  .global-setup-pop .pitch-label,
  .global-setup-pop .pitch-unit { display: none; }
  .global-setup-pop .pitch-count { min-width: 22px; font-size: .9rem; }
  .global-setup-pop .pitch-note {
    min-width: 2.25em;
    padding: 3px 5px;
    border-left: 1px solid var(--line-border);
    text-align: center;
    font-size: 1rem;
    line-height: 1;
  }
  .setup-region-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
  }
  .global-setup-pop .setup-region-btn {
    min-width: 62px;
    width: auto;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
  }
  .global-setup-pop .setup-region-btn:disabled {
    opacity: .4;
    cursor: default;
  }
  .selection-lock-btn svg { width: 16px; height: 16px; }
  .selection-lock-btn[hidden], .practice-guide-play[hidden],
  .classroom-teach-btn[hidden], .record-select-btn[hidden] { display: none !important; }
  .global-setup-pop .classroom-setup-face { gap: 10px; min-width: 0; }
  .global-setup-pop .classroom-setup-head { display: none; }
  .global-setup-pop .classroom-mix-grid { width: 100%; min-width: 0; }
  .global-setup-pop .ts-ctl { width: 100%; justify-content: space-between; gap: 4px; }
  .global-setup-pop .ts-half { gap: 4px; }
  .global-setup-pop .ts-label { font-size: .78rem; }
  .global-setup-pop .ts-ctl .stepper-btn { width: 28px; height: 28px; }
  .global-setup-pop .classroom-menu-section { padding-top: 6px; }
  .classroom-volume-row > label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  .setup-reset-btn.active { background: rgb(var(--gold-standard-rgb) / .18); border-color: var(--gold); }
  .record-volume-btn { width: 38px; height: 38px; }
  .volume-mute-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 1px solid var(--line-border);
    border-radius: 50%;
    background: transparent;
    color: var(--gold-bright);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .volume-mute-btn:hover { background: var(--hover-bg); border-color: var(--gold); }
  .volume-mute-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .volume-mute-btn.muted { color: var(--gold-dim); }
  .volume-mute-btn svg { width: 16px; height: 16px; display: block; }
  .record-teacher-volume-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 9px;
    width: 100%;
    color: var(--muted);
  }
  .record-teacher-volume-row input[type="range"] { min-width: 0; }
  .record-teacher-volume-row output {
    color: var(--gold-bright);
    text-align: right;
    font: 500 .8rem/1 "Noto Serif", serif;
    font-variant-numeric: tabular-nums;
  }
  .home-meanings-head > .head-actions { display: none; }
  #view-classroom.drill-focus .classroom-topbar { justify-content: space-between; }
  @media (max-width: 560px) {
    /* Setup is opened from the rightmost gear. Keep its right edge locked to
       that anchor and cap its width to the actual framed viewport, so it can
       never be clipped off the iPhone's left edge. */
    .setup-anchor .global-setup-pop {
      right: 0;
      left: auto;
      width: min(286px, calc(100vw - 40px));
      max-width: calc(100vw - 40px);
    }
    .setup-menu-section { grid-template-columns: minmax(84px, 1fr) auto; gap: 7px; }
    .global-setup-pop .font-slider-row { min-width: 140px; }
  }
  /* Help popover: a capped width rather than max-content — sized by its
     longest tip, the popover ran left past the frame's edge and the
     frame's overflow clipped the start of every bullet; at this width
     the tips wrap inside the popover instead. */
  .popover.help-pop {
    width: 430px;
    max-height: min(76dvh, 620px);
    overflow-y: auto;
    padding: 14px 16px;
  }
  .pop-help {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
  }
  .pop-help li + li { margin-top: 3px; }
  .pop-help li::marker { color: var(--gold-bright); }
  .pop-help strong { color: var(--ink); font-weight: 600; }
  /* The shared Help surface is the app's complete user guide, not a short
     tooltip dump. Section labels and compact paragraphs make the long guide
     scannable while the existing capped popover remains phone-safe. */
  .user-guide { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }
  .guide-title { margin: 0 0 9px; color: var(--gold-bright); font-size: 1.05rem; line-height: 1.2; }
  .guide-section + .guide-section { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-border); }
  .guide-section h3 { margin: 0 0 5px; color: var(--ink); font-size: 0.9rem; line-height: 1.25; }
  .guide-section p { margin: 0; }
  .guide-section p + p { margin-top: 5px; }
  .guide-section h4 { margin: 8px 0 4px; color: var(--gold-bright); font-size: 0.84rem; line-height: 1.3; }
  .guide-section ul,
  .guide-section ol { margin: 5px 0 0; padding-left: 1.3em; }
  .guide-section li + li { margin-top: 4px; }
  .guide-section li::marker { color: var(--gold-bright); }
  .guide-section kbd {
    padding: 1px 4px; border: 1px solid var(--line-border); border-radius: 4px;
    background: var(--panel); color: var(--ink); font: 600 .76rem/1.2 "Noto Serif", serif;
  }
  /* On narrow screens the help popover's anchor sits mid-bar, so hanging
     it off the icon would push it off the frame's edge: anchor it to the
     lang-bar instead and let it span the bar's width, wrapping inside. */
  .help-pop-backdrop {
    display: none;
  }
  @media (max-width: 560px) {
    .help-pop-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(14, 7, 2, 0.68);
      z-index: 998;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .popover.help-pop {
      position: fixed !important;
      top: 54px !important;
      left: 10px !important;
      right: 10px !important;
      bottom: auto !important;
      width: auto !important;
      max-width: calc(100vw - 20px) !important;
      max-height: calc(100dvh - 68px) !important;
      padding: 14px 14px 18px !important;
      border-radius: 12px !important;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--gold) !important;
      z-index: 1000 !important;
    }
  }
  .pop-label {
    font-size: 0.92rem;
    color: var(--ink);
    font-weight: 600;
  }
  /* The bulb in the tool cluster toggles word-by-word karaoke highlighting:
     lit warm yellow while on (the other tool icons stay muted), an unlit
     outline while off. Its title/aria-label name the current state —
     "Word highlight: on" while on, "Word highlight: off" while off. */
  .tool-btn.bulb-on { color: var(--gold-active); border-color: var(--gold); }
  .tool-btn.bulb-on svg {
    fill: currentColor;
    filter: drop-shadow(0 0 4px rgb(var(--gold-active-rgb) / 0.75));
  }
  .tool-btn.bulb-off { color: var(--gold-dim); }
  .tool-btn.bulb-off:hover { color: var(--muted); border-color: var(--gold); }
  .tool-btn.bulb-off svg { fill: none; }
  .tool-btn.bulb-on:focus-visible, .tool-btn.bulb-off:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* ---------- Touch tooltips ----------
     Touch devices have no hover, so a long-press (~500ms) on a control
     with tooltip text surfaces that text in a floating bubble like this —
     without firing the control. Only built on (hover: none) devices;
     desktop hover tooltips stay browser-native. */
  .touch-tip {
    position: fixed;
    z-index: 200;
    transform: translate(-50%, -100%);
    background: var(--umber-shadow);
    color: var(--gold-bright);
    border: 1px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: calc(100vw - 16px);
    pointer-events: none;
  }
  .touch-tip[hidden] { display: none; }
  /* A held control shows its tooltip; it must not start a text selection
     or the iOS long-press callout. Lyric lines and pills are pressable
     too (a hard press bookmarks the line or sangati, while a held control
     only shows its tooltip), so they get the same suppression: a hard press
     never raises iOS's text selection or copy/cut callout. The copy
     button is unaffected — it copies programmatically, not by selection. */
  /* Universal iOS callout & selection suppression for ALL buttons & UI controls */
  button,
  button *,
  [role="button"],
  [role="button"] *,
  .tool-btn, .lang-btn, .loop-label, .stepper-btn, .all-btn, .loop-count,
  .pitch-count, .pitch-label, .ts-btn, .classroom-teach-btn, .ts-label, .ts-count, .ts-drone-btn, .rec-btn, .rec-pause-btn, .rec-stop-btn, .rec-play-btn, .rec-download-btn, .rec-share-btn, .rec-discard-btn, .rec-label, .rec-status, .ctl-toggle, .setup-toggle-btn, .region-action,
  .play-btn, .loop-btn, .mark-btn, .speed-btn, .volume-btn, .volume-mute-btn, .back-btn, .cta-btn, .ai-btn, .lang-opt,
  .action-item, .home-icon-btn, .home-play-btn, .home-mini-btn, .size-btn,
  .screen-nav-trigger, .screen-nav-item, .sangati-step-btn, .sangati-stepper-btn, .sangati-nav-pill, .swara-pill, .quiz-option-card,
  .line, .line-text .w, .sheet-lyric-row, .sheet-lyric-text, .sangati-pills .pill, input[type="range"],
  [data-tooltip], [data-tooltip] * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Visual Touch Expansion: Control springs up in size with a glowing gold halo */
  .touch-control-expanded {
    transform: scale(1.22) !important;
    box-shadow: 0 0 14px rgba(234, 189, 114, 0.85), 0 4px 14px rgba(0,0,0,0.65) !important;
    z-index: 99999 !important;
    transition: transform 0.16s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.16s ease !important;
  }
  /* Lyric-size glyph: a small A beside a large A (distinct from the
     language button's plain A). Shown on the practice screen's A/A icon
     and in the home screens' Lyrics-row size pills; the name survives
     only as the home buttons' hover text and aria-label — "Size" on the
     landing screen (under its Lyrics heading), "Lyrics size" on the
     meanings screen, which has no Lyrics heading for context. */
  .font-glyph { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; }
  .font-glyph .fg-sm { font-size: 0.6rem; font-weight: 700; }
  .font-glyph .fg-lg { font-size: 1.02rem; font-weight: 700; }
  /* Home screens' Size pill: sits in the Lyrics row beside the language
     switcher, so it reads as a lyric control, not a top-bar tool. */
  .size-btn {
    padding: 5px 14px 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--type); font-size: 0.95rem; font-weight: 600; line-height: 1;
    color: var(--ink); background: transparent;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.45); border-radius: 999px;
    cursor: pointer;
  }
  .size-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .size-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .font-pop { width: 240px; }
  .font-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
  }
  .font-slider-row input[type="range"] { flex: 1; min-width: 0; }
  .font-pct {
    min-width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    color: var(--gold-bright);
  }
  /* The practice volume control reuses the Size control's compact slider
     pattern, but opens upward from the bottom transport so it stays inside
     the framed player instead of being clipped below it. */
  .volume-control { position: relative; display: inline-flex; flex: none; }
  .volume-pop {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    width: 248px;
  }
  .volume-slider-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
  }
  .volume-slider-row input[type="range"] { flex: 1; min-width: 0; }
  .volume-pct {
    min-width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    color: var(--gold-bright);
  }

  /* ---------- Player ----------
     The transport is a bar anchored to the bottom of the practice
     screen, inside the app frame: an in-flow flex child of the
     screen (just above the copyright via flex order), so the frame's border encloses it
     exactly like the reading screens' players — the lyric scroll
     region flexes above it and never slides under it, and
     play/loop stay always within reach. A one-line status slot
     under the transport appears only while a loading/stall
     message is up. The bottom padding clears the iPhone home
     indicator via the safe-area inset. The player sits in its
     own framed panel — maroon border with the gold hairline
     inside, the page's double rule — inset to the same 28px
     column (16px on phones) as the framed picture and the lyric
     lines, so lyrics and player read as one continuous card.
     position: relative anchors the "Your turn" chip to the bar. */
  .player-wrap {
    position: relative;
    flex: none;
    order: 5;
    padding: 8px 28px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
  }
  .player {
    background: var(--panel);
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.55),
      0 8px 22px rgba(0, 0, 0, 0.35);
    padding: 10px 14px 10px;
  }
  .player-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* The player controls share one circular chrome (--ctl-size). Practice
     uses a thin read-only progress line; the reading screens keep their
     transport and time layout, with Lyrics retaining a scrubber and Meanings
     using the same read-only progress treatment as Practice. */
  .player-layout {
    display: flex;
    align-items: stretch;
    gap: 12px;
  }
  .player-left {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .player-row-main { flex-wrap: nowrap; }
  .player-time {
    flex: none;
    align-self: center;
    font-size: 0.86rem;
    color: var(--muted);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .player-row-tools {
    margin-top: 8px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .play-btn {
    flex: none;
    width: var(--ctl-size);
    min-width: var(--ctl-size);
    height: var(--ctl-size);
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: var(--gold);
    color: var(--umber-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .play-btn:hover { background: var(--gold-standard); }
  .play-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  /* Preparing state (until the audio fires 'canplay'): the button pulses to
     show the source is still loading, and stays tappable — the tap is what
     iOS needs to start loading, so preparation can never deadlock behind a
     disabled button. Plus the "Loading audio..." hint below the player. */
  .play-btn.preparing {
    opacity: 0.6;
    animation: preparePulse 1.6s ease-in-out infinite;
  }
  .play-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    animation: preparePulse 1.6s ease-in-out infinite;
  }
  .play-btn:disabled:hover { background: var(--gold); }
  @keyframes preparePulse {
    0%, 100% { opacity: 0.32; }
    50% { opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce) {
    .play-btn:disabled, .play-btn.preparing { animation: none; }
  }
  .loop-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .loop-btn:disabled:hover { background: transparent; }
  .play-btn .icon-stop { display: none; }
  .player.playing .play-btn .icon-play { display: none; }
  .player.playing .play-btn .icon-stop { display: block; }
  /* Explicit icon size: Safari collapses a viewBox-only <svg> inside a flex
     container to 0x0. flex:none stops any flex shrinking. */
  .play-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: none;
  }

  .loop-btn {
    flex: none;
    width: var(--ctl-size);
    height: var(--ctl-size);
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
  }
  .loop-btn:hover { background: var(--hover-bg); }
  .loop-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .loop-btn svg { width: 22px; height: 22px; display: block; }
  .loop-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  /* 3-state loop button: off = dim outline, loop selection = outline + "1" badge, loop all = filled */
  .loop-btn.loop-off { opacity: 0.55; color: var(--muted); }
  .loop-btn.loop-off:hover { opacity: 0.85; }
  .loop-btn.loop-sel { opacity: 1; color: var(--gold-bright); border-color: var(--gold-bright); background: rgb(var(--gold-standard-rgb) / 0.12); }
  .loop-btn.loop-all { background: var(--gold); border-color: var(--gold); color: var(--umber-shadow); box-shadow: 0 0 0 3px var(--active-ring); opacity: 1; }
  .loop-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 999px; background: var(--gold); color: var(--umber-shadow);
    font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
    border: 1px solid var(--umber-shadow); display: none; font-family: "Noto Serif", serif;
  }
  .loop-btn.loop-sel .loop-badge { display: block; }
  .loop-repeat-count {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--frame-border);
    border-radius: 50%;
    color: var(--muted);
    font: 600 0.64rem/16px "Noto Sans", sans-serif;
    text-align: center;
  }
  .loop-repeat-count.bump { animation: loop-count-pulse 180ms ease-out; }
  .loop-repeat-count[hidden] { display: none; }
  @keyframes loop-count-pulse {
    50% { border-color: var(--gold-bright); color: var(--gold-bright); transform: scale(1.12); }
  }
  @media (prefers-reduced-motion: reduce) {
    .loop-repeat-count.bump { animation: none; }
  }
  /* Teacher/student turns button: a classroom board glyph beside the
     loop button, gold-filled while the mode is on. */
  .ts-btn {
    flex: none;
    width: var(--ctl-size);
    height: var(--ctl-size);
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .ts-btn:hover { background: var(--hover-bg); }
  .ts-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .ts-btn svg { width: 22px; height: 22px; display: block; }
  .ts-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  .goto-btn {
    flex: none; width: var(--ctl-size); height: var(--ctl-size); border-radius: 50%;
    border: 1px solid var(--frame-border); background: transparent; color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .goto-btn:hover { background: var(--hover-bg); }
  .goto-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .goto-btn svg { width: 20px; height: 20px; display: block; }
  .goto-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .sangati-nav-btn span {
    display: block;
    font-family: system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1;
  }

  /* Mark-region button: "(...)" in simple mode. Entering mark mode turns
     it into "(🔒)" (gold-tinted); locking the region turns it into a
     yellow-highlighted "(...)", which when tapped clears the region. */
  .mark-btn {
    flex: none; width: var(--ctl-size); height: var(--ctl-size); padding: 0;
    border-radius: 50%; border: 1px solid var(--frame-border);
    background: transparent; color: var(--ink);
    font-family: var(--type); font-size: 0.95rem; font-weight: 600; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 1px;
  }
  .mark-btn:hover { background: var(--hover-bg); }
  .mark-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .mark-btn svg { width: 15px; height: 15px; display: block; flex: none; }
  .mark-btn.is-marking {
    color: var(--gold-bright); border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.12);
  }
  .mark-btn.is-locked {
    background: var(--gold); border-color: var(--gold); color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  /* While the music plays, the (...) button greys out: marking is
     inert during playback (the region never changes then), so the
     control says so instead of silently swallowing taps; it comes
     back the moment the music pauses or stops. */
  .mark-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .mark-btn:disabled:hover { background: transparent; }
  /* On phones the two rows tighten but keep their shape, with the
     time readout holding its place at the right. */
  @media (max-width: 480px) {
    :root { --ctl-size: 40px; }
    /* Six transport controls now occupy row one. Keep the player exactly two
       rows tall by letting the seek and time share row two's unused right
       side; this is a reflow, not a third row or a taller player. */
    .player-layout {
      display: grid;
      grid-template-columns: auto minmax(28px, 1fr) auto;
      grid-template-rows: var(--ctl-size) var(--ctl-size);
      gap: 8px;
      align-items: center;
    }
    .player-left { display: contents; }
    .player-row-main { grid-column: 1 / -1; grid-row: 1; }
    .player-row-tools { grid-column: 1; grid-row: 2; margin-top: 0; }
    .practice-track { grid-column: 2; grid-row: 2; min-width: 0; }
    .player-time { grid-column: 3; grid-row: 2; }
    .player-row { gap: 7px; }
    .player { padding: 8px 10px 8px; }
    .play-btn svg { width: 23px; height: 23px; }
    .loop-btn svg { width: 20px; height: 20px; }
    .player-row-tools .mark-btn { font-size: 0.82rem; }
    .player-row-tools .mark-btn svg { width: 13px; height: 13px; }
    .speed-btn { font-size: 0.82rem; }
    .player-time { font-size: 0.78rem; }
  }
  @media (max-width: 380px) {
    :root { --ctl-size: 38px; }
    .player-row { gap: 5px; }
  }
  @media (max-width: 340px) {
    :root { --ctl-size: 36px; }
    .player-layout {
      grid-template-columns: auto minmax(18px, 1fr) auto;
      gap: 5px;
    }
    .player-time { font-size: 0.7rem; }
  }
  /* The seek track keeps a taller touch target on narrow screens. */
  @media (max-width: 640px) {
    .practice-track input[type="range"], .home-track input[type="range"] { height: 34px; }
    .practice-track input[type="range"]::-webkit-slider-thumb, .home-track input[type="range"]::-webkit-slider-thumb {
      width: 22px; height: 22px; margin-top: -8px;
    }
    .practice-track input[type="range"]::-moz-range-thumb, .home-track input[type="range"]::-moz-range-thumb {
      width: 18px; height: 18px;
    }
  }

  /* ---------- Loop controls ----------
     Hidden until the loop is engaged: with loop off the player looks
     untouched. A stepper chooses how many consecutive sangatis (from the
     current one) form the group ("Loop" is reserved for the repetition
     itself); "All" groups the whole song from sangati 1. */
  .loop-ctl {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .loop-ctl.open { display: flex; }
  /* The "Group" label carries the stepper's tooltip ("Select number of
     sangatis to loop") and All carries "Loop whole song"; the − and +
     steppers themselves carry none. */
  .loop-label {
    position: relative;
    font-size: 0.92rem;
    color: var(--muted);
    cursor: help;
  }
  .loop-label:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .stepper-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .stepper-btn:hover { background: var(--hover-bg); }
  .stepper-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  /* The count doubles as a button: while "All" is active it is tappable
     (underlined as the affordance), and tapping it switches back from the
     whole-song loop to a group of this count. Otherwise it is inert text. */
  .loop-count {
    min-width: 20px;
    text-align: center;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }
  .loop-count:disabled { cursor: default; }
  .loop-count.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
  }
  .loop-count.clickable:hover { color: var(--gold-active); }
  .loop-count:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .loop-div {
    width: 1px;
    height: 22px;
    background: var(--line-border);
  }
  .all-btn {
    padding: 5px 16px 6px;
    border-radius: 999px;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    font-family: var(--type);
    font-size: 0.92rem;
    cursor: pointer;
  }
  .all-btn:hover { background: var(--hover-bg); }
  .all-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .all-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  .stepper-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .stepper-btn:disabled:hover { background: transparent; }

  /* ---------- Collapsible Pitch / You rows ----------
     The Pitch stepper and the You (record) row stay folded behind two
     compact buttons in the tools row (row 2), so the player carries no
     extra chrome at rest; each button expands its full row on tap, and
     only one expanded row shows at a time (accordion). The pitch button
     shows the current note name (G at the recorded pitch), so the key
     stays visible while the stepper is folded. */
  .ctl-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-size);
    height: var(--ctl-size);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1;
    cursor: pointer;
  }
  .ctl-toggle:hover { background: var(--hover-bg); }
  .ctl-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .ctl-toggle svg { width: 17px; height: 17px; display: block; flex: none; }
  .ctl-toggle.open {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.12);
  }
  /* The Pitch button lights the same way while the key sits away
     from the recording's own pitch — a shift is never invisible. */
  .ctl-toggle.shifted {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.12);
  }
  .ctl-note {
    font-weight: 700;
    color: var(--gold-bright);
    min-width: 1.6em;
    text-align: center;
  }
  /* Compact display-only pitch readout shared by every screen's player.
     It stays visually quiet at the recording's natural pitch and turns
     gold whenever the heard pitch is shifted. */
  .pitch-readout {
    flex: none;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--frame-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    background: transparent;
    font: 700 0.78rem/1 "Noto Serif", serif;
    font-variant-numeric: tabular-nums;
  }
  .pitch-readout.shifted {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.12);
  }
  @media (max-width: 380px) {
    .pitch-readout { min-width: 27px; height: 27px; padding: 0 5px; font-size: 0.72rem; }
  }
  .ctl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--record-active);
    flex: none;
  }
  /* A take is rolling behind the folded row: the dot pulses so the
     recording state is never hidden. */
  .ctl-toggle.rec-live .ctl-dot {
    animation: recPulse 1.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .ctl-toggle.rec-live .ctl-dot { animation: none; }
  }
  @media (max-width: 480px) {
    .ctl-toggle { font-size: 0.88rem; }
    .ctl-toggle svg { width: 15px; height: 15px; }
  }

  /* ---------- Player faces ----------
     The normal transport and recording tools are one face; Setup is a
     second face occupying the same player footprint. The gear swaps faces
     rather than adding another permanent row. Its choices return to the
     player's icon-only control language; hover / hard-press tooltips carry
     their names. A small breadcrumb keeps the player context visible while
     the transport face is replaced. */
  /* Face visibility is semantic as well as visual: author-level flex/grid
     rules can override the browser's weak UA [hidden] rule, so make hidden
     authoritative for every part of the play face too. */
  .player-left[hidden],
  .practice-progress-row[hidden],
  .player-setup-face[hidden] { display: none !important; }
  .player-setup-face {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
  }
  .player-layout.setup-open {
    min-height: calc(var(--ctl-size) * 2 + 8px);
  }
  .player-layout.setup-open .player-left,
  .player-layout.setup-open .practice-track,
  .player-layout.setup-open .player-time { display: none; }
  .player-layout.setup-open .player-setup-face { display: flex; }
  .setup-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
    padding-left: 2px;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.025em;
  }
  .setup-breadcrumb .setup-current {
    color: var(--gold-bright);
    font-weight: 600;
  }
  .setup-actions {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .setup-toggle-btn {
    flex: none;
    width: var(--ctl-size); height: var(--ctl-size); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--frame-border); border-radius: 50%;
    background: transparent; color: var(--ink); cursor: pointer;
    font-family: inherit; line-height: 1;
  }
  .setup-toggle-btn:hover { background: var(--hover-bg); }
  .setup-toggle-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .setup-toggle-btn.active { background: var(--gold); color: var(--umber-shadow); border-color: var(--gold); }
  .setup-toggle-btn .gear-glyph { font-family: system-ui, sans-serif; font-size: 1.15rem; line-height: 1; }
  .setup-choice {
    flex: none;
    width: var(--ctl-size);
    height: var(--ctl-size);
    border-radius: 50%;
    padding: 0;
    gap: 0;
    white-space: nowrap;
  }
  .setup-choice.ts-btn svg { width: 22px; height: 22px; flex: none; }
  .setup-choice.mark-btn { font-size: 0.82rem; }
  .setup-choice.mark-btn svg { width: 14px; height: 14px; }
  .setup-choice .ctl-note { min-width: 0; }
  .region-ctl {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .region-ctl.open { display: flex; }
  .region-status { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.35; }
  .region-action {
    flex: none; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--frame-border); background: transparent;
    color: var(--ink); font: 600 0.88rem/1 var(--type); cursor: pointer;
  }
  .region-action:hover { background: var(--hover-bg); }
  .region-action:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .region-action:disabled { opacity: 0.4; cursor: default; }
  @media (max-width: 480px) {
    .player-layout.setup-open {
      display: flex;
      min-height: calc(var(--ctl-size) * 2 + 8px);
    }
    .player-setup-face { width: 100%; gap: 6px; }
    .setup-actions { gap: 7px; }
    .setup-choice { width: var(--ctl-size); padding: 0; gap: 0; }
    .setup-choice.ts-btn svg { width: 20px; height: 20px; }
  }
  @media (max-width: 380px) {
    .player-setup-face { gap: 5px; }
    .setup-actions { gap: 6px; }
  }

  /* ---------- Pitch control ----------
     A stepper row under the transport: shifts the recording up or
     down in semitones (±12, 1 per tap) at unchanged tempo, so a
     student can match the singer's pitch to their own range. The
     count doubles as the reset: tapping it returns to 0 (the
     recorded pitch), underlined while a shift is active, the same
     affordance as the loop count's switch back from "All". */
  .pitch-ctl {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .pitch-ctl.open { display: flex; }
  .pitch-label {
    font-size: 0.92rem;
    color: var(--muted);
    cursor: help;
  }
  .pitch-label:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .pitch-count {
    min-width: 36px;
    text-align: center;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
  }
  .pitch-count.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 4px;
  }
  .pitch-count.clickable:hover { color: var(--gold-active); }
  .pitch-count:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .pitch-unit {
    font-size: 0.85rem;
    color: var(--muted);
  }
  /* The approximate current pitch as a note name, tracking the stepper:
     G at 0 (the recorded pitch), transposed by the shift. A reserved
     min-width keeps the row from jittering as the name changes. */
  .pitch-note {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-bright);
    min-width: 1.9em;
  }

  /* ---------- Teacher / student turns ----------
     The counts row exists only while the mode is on (with it off the
     player carries no extra chrome): the teacher repeats the looped
     range N times at full volume, then the student repeats it M
     times at a fixed quiet level, alternating. The label of the
     turn being sung sits lit; the other rests muted. */
  .ts-ctl {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .ts-ctl.open { display: flex; }
  /* One compact line at every width: the two halves never wrap, and
     the tanpura toggle rides at the row's right end. */
  .ts-half {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
  }
  .ts-label {
    font-size: 0.92rem;
    color: var(--muted);
  }
  .ts-label.on {
    color: var(--gold-bright);
    font-weight: 700;
  }
  .ts-count {
    min-width: 20px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
  }
  /* Tanpura drone toggle: a small tanpura glyph at the row's right
     end, gold-filled while the drone is on (its default). */
  .ts-drone-btn {
    flex: none;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .ts-drone-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .ts-drone-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .ts-drone-btn svg { width: 19px; height: 19px; display: block; }
  .ts-drone-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  /* Phones: the counts row tightens so it stays one line. */
  @media (max-width: 480px) {
    .ts-ctl { gap: 6px; }
    .ts-half { gap: 5px; }
    .ts-ctl .stepper-btn { width: 26px; height: 26px; font-size: 1rem; }
    .ts-label { font-size: 0.84rem; }
    .ts-drone-btn { width: 30px; height: 30px; }
    .ts-drone-btn svg { width: 16px; height: 16px; }
  }

  /* ---------- Student recording ----------
     A single compact row on the practice player: record/stop, play
     back, discard. It lives outside the loop rows so it costs no
     chrome elsewhere; the status text carries the state (ready,
     recording timer, ready to listen). The mic recording is kept
     in memory only — discard or a fresh take replaces it. */
  /* Pick the sangati the next take starts from: a −/+ stepper over
     the whole song, labelled with the sangati's pill number on its
     own lyric line. Same border-top rhythm as the other practice
     rows, so the record area reads as one block. */
  .rec-pick {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .rec-pick.open { display: flex; }
  .rec-pick-label {
    font-size: 0.92rem;
    color: var(--muted);
    flex: none;
  }
  .rec-pick-step { flex: none; }
  .rec-pick-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    color: var(--gold-bright);
    text-align: center;
    line-height: 1.3;
  }
  .rec-ctl {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .rec-ctl.open { display: flex; }
  .rec-label {
    font-size: 0.92rem;
    color: var(--muted);
    flex: none;
  }
  .rec-btn {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--record-active);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .rec-btn:hover { border-color: var(--record-active); background: rgb(var(--record-active-rgb) / 0.10); }
  .rec-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .rec-btn svg { width: 16px; height: 16px; display: block; }
  .rec-btn .icon-pause-record { display: none; }
  .rec-btn.recording {
    background: rgb(var(--record-active-rgb) / 0.18);
    border-color: var(--record-active);
    color: var(--record-active);
    animation: recPulse 1.4s ease-in-out infinite;
  }
  .rec-btn.recording .icon-rec { display: none; }
  .rec-btn.recording .icon-pause-record { display: block; }
  .rec-btn.paused { animation: none; }
  @keyframes recPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--record-active-rgb) / 0.45); }
    50% { box-shadow: 0 0 0 5px rgb(var(--record-active-rgb) / 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .rec-btn.recording { animation: none; }
  }
  .rec-btn:disabled, .rec-play-btn:disabled, .rec-download-btn:disabled,
  .rec-share-btn:disabled, .rec-discard-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .rec-status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.35;
  }
  .rec-status.rec-live { color: var(--record-active); }
  .rec-play-btn, .rec-download-btn, .rec-share-btn, .rec-discard-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .rec-play-btn:hover, .rec-download-btn:hover, .rec-share-btn:hover,
  .rec-discard-btn:hover { background: var(--hover-bg); border-color: var(--gold); color: var(--gold-bright); }
  .rec-play-btn:focus-visible, .rec-download-btn:focus-visible,
  .rec-share-btn:focus-visible, .rec-discard-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .rec-play-btn svg, .rec-download-btn svg, .rec-share-btn svg,
  .rec-discard-btn svg { width: 17px; height: 17px; display: block; }
  .rec-share-btn .share-icon-ios { display: none; }
  .platform-ios .rec-share-btn .share-icon-android { display: none; }
  .platform-ios .rec-share-btn .share-icon-ios { display: block; }
  .rec-play-btn.playing {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  .rec-play-btn.playing .icon-rplay { display: none; }
  .rec-play-btn .icon-rpause { display: none; }
  .rec-play-btn.playing .icon-rpause { display: block; }
  @media (max-width: 480px) {
    .rec-ctl { gap: 8px; }
    .rec-btn { width: 38px; height: 38px; }
    .rec-play-btn, .rec-download-btn, .rec-share-btn, .rec-discard-btn { width: 36px; height: 36px; }
    .rec-status { font-size: 0.82rem; }
  }
  /* "Your turn" chip: a small transient cue at each student turn.
     It appears as the teacher's turn ends and eases out over just
     under a second as the student's first repetition gets going;
     the turn counter beside her photo carries the cue from there. It floats just above the player
     bar, centered, so it reads wherever the lyrics are scrolled;
     pointer-events none so it never blocks a tap, and it lives
     inside the practice view only. */
  .your-turn-chip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 4px 12px 5px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(46, 28, 8, 0.92);
    color: var(--gold-active);
    font-family: var(--type);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, transform 0.9s ease, visibility 0.9s ease;
    pointer-events: none;
    z-index: 5;
  }
  .your-turn-chip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .your-turn-chip { transition: none; }
  }

  .track {
    flex: 1;
    min-width: 0;
  }
  /* In the layout now, right of the control rows: the track
     stretches to the layout's height and centers the slider
     vertically, so it straddles the seam between the two rows. */
  .practice-track { display: flex; align-items: center; }
  .track label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;
    --p: 0%;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--p), var(--track-bg) var(--p), var(--track-bg) 100%);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--gold);
    margin-top: -7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--track-bg);
  }
  input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--gold);
  }
  input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--gold);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  }
  .time {
    font-size: 0.86rem;
    color: var(--muted);
    white-space: nowrap;
    min-width: 108px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Status slot under the player: carries only transient loading/stall
     messages (setHintTemp); empty — and so display:none — at rest. */
  .hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
  }
  .hint:empty { display: none; }

  /* ---------- Metadata ticker ----------
     A slow, continuously scrolling now-playing strip at the top of the
     player (song title • singer • raga, baked from the record's
     MP3 tags). The strip's track holds three identical copies of the
     text; scrolling one copy's width (-33.333%) loops seamlessly. */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ticker {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-border);
    margin-bottom: 10px;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .ticker-track {
    display: inline-block;
    animation: tickerScroll 24s linear infinite;
    will-change: transform;
  }
  .ticker-unit {
    display: inline-block;
    font-size: 0.94rem;
    letter-spacing: 0.02em;
    color: var(--gold-bright);
  }
  @keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-33.333333%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
  }

  /* ---------- Language bar ---------- */
  /* A gold hairline under the framed picture (the frame's maroon-and-gold
     double rule, repeated), with the tool cluster and the script button
     right-aligned just below it. */
  .lang-bar {
    border-top: 1px solid var(--gold);
    padding: 9px 28px 7px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  /* Script button: shows the current script's glyph; its popover lists
     all available lyric scripts vertically. */
  .lang-btn {
    min-width: 46px;
    padding: 5px 10px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--type);
    font-size: 1.02rem;
    line-height: 1;
    color: var(--ink);
    background: rgb(var(--gold-standard-rgb) / 0.22);
    border: 1px solid var(--gold-bright);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.45);
    cursor: pointer;
  }
  .lang-btn::after {
    content: "";
    border: 4px solid transparent;
    border-top-color: var(--muted);
    margin-top: 3px;
  }
  .lang-btn:hover { border-color: var(--gold); }
  .lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .lang-pop { width: 208px; padding: 6px; }
  .lang-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--muted);
    font-family: var(--type);
    cursor: pointer;
    text-align: left;
  }
  .lang-opt:hover { background: var(--hover-bg); color: var(--ink); }
  .lang-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .lang-opt .lo-glyph {
    min-width: 26px;
    font-size: 1.1rem;
    color: var(--ink);
    text-align: center;
  }
  .lang-opt .lo-name { font-size: 0.9rem; }
  .lang-opt.native-script .lo-name::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--gold-bright);
    vertical-align: 0.12em;
  }
  .lang-opt.active .lo-glyph,
  .lang-opt.active .lo-name { color: var(--gold-bright); }

  /* ---------- Lyrics ----------
     The lyrics are their own scroll region below the portrait: it
     starts under the header and scrolls internally, flexing above
     the player bar at the screen's bottom (an in-flow sibling
     inside the frame), so the last lines never slide under the
     bar; the bottom padding and scroll-padding keep the final
     lines clear of it. */
  main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    padding: 14px 28px 24px;
    scroll-padding-top: 10px;
    scroll-padding-bottom: 24px;
  }
  .banner, .lang-bar, header, .copyright-spacer { flex: none; }
  .shloka, .verse {
    margin: 0 0 16px;
  }
  /* Dhyana shloka: quiet, subtle invocation frame distinguishing the opening prayer
     without heavy double borders or loud shadows. */
  .shloka {
    padding: 10px 14px;
    border-left: 3px solid var(--gold);
    border-top: 1px solid rgba(234, 189, 114, 0.22);
    border-right: 1px solid rgba(234, 189, 114, 0.22);
    border-bottom: 1px solid rgba(234, 189, 114, 0.22);
    border-radius: 8px;
    background: rgba(234, 189, 114, 0.05);
    box-shadow: none;
  }
  .shloka + .divider { display: none; }
  .land-section-label {
    margin: 0 0 6px 2px;
    color: var(--gold-standard);
    font: 600 .8rem/1.3 "Noto Serif", serif;
  }
  .line {
    margin: 0;
    padding: 5px 10px;
    position: relative;
    /* Big enough that the longest Devanagari lines nearly fill the lyric
       column (tuned by measurement: ~94% fill on the longest line). The
       A/A slider scales every lyric line through --lyric-scale. */
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1));
    line-height: 1.5;
    border-radius: 6px;
    transform: scale(1);
    transform-origin: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
  }
  .shloka .line {
    padding: 4px 10px;
    color: var(--ink);
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 0.84);
    line-height: 1.48;
    text-align: center;
  }
  .lyrics .line { color: var(--ink); }
  /* Pallavi digressions: the refrain's words recurring mid-song, printed as
     their own line in parentheses, dim and smaller than a normal line.
     While being sung the line lights at full brightness like any other. */
  .line.digression {
    /* Only slightly smaller than a regular line — the refrain's words stay
       comfortably readable — and scaled by the same lyric-size control. */
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 0.88);
    line-height: 1.48;
    color: var(--muted);
    opacity: 0.8;
  }
  .line.digression.active {
    color: var(--ink);
    opacity: 1;
  }
  /* Landing screen: the resting lyric size comes from --lyric-size-home
     (see :root) — a deliberate ~10% step up from the practice size, since
     the lyrics are the whole point of the screen. */
  #view-landing .line { font-size: calc(var(--lyric-size-home) * var(--lyric-scale, 1)); }
  #view-landing .shloka .line { font-size: calc(var(--lyric-size-home) * var(--lyric-scale, 1) * 0.78); }
  #view-landing .line.digression { font-size: calc(var(--lyric-size-home) * var(--lyric-scale, 1) * 0.88); }
  /* Unsung verse (landing only): verse 2 is printed in its place in the
     song but is not in the recording, so the verse sits dimmed and inert
     — it never lights and is never a play target. A light tap (or Enter)
     on it reveals the note under the verse. */
  #view-landing .line.unsung { color: var(--muted); opacity: 0.55; cursor: help; }
  .unsung-note {
    margin: 2px 14px 4px;
    padding: 8px 12px;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .unsung-note[hidden] { display: none; }
  .line.seekable { cursor: pointer; }
  .line.seekable:hover { background: var(--hover-bg); }
  .line.seekable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
  .line.active {
    background: var(--active-bg);
    box-shadow: inset 0 0 0 1px var(--active-ring);
    /* A small transform emphasizes the sounding line without changing
       layout or causing the lyric sheet to reflow. */
    transform: scale(1.015);
  }
  /* Learn focus: turn mode becomes a one-line rehearsal surface rather
     than a scrolling lyric sheet. The current line and its current sangati
     row are the only lyric content left in flow; the roomy status above them
     makes the handoff and repeat count readable from across a room. */
  .classroom-focus-status {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 18px;
    color: var(--gold-bright);
    text-align: center;
  }
  /* In the full-screen Teach drill, the teacher is the visual anchor:
     a generous face-centered portrait, with her name directly beneath it. */
  .drill-teacher {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
  }
  .drill-teacher-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ink);
    font-family: "Noto Serif", serif;
    text-align: center;
  }
  .drill-teacher-copy b {
    font-size: clamp(1.08rem, 3.3vw, 1.36rem);
    line-height: 1.2;
  }
  .focus-turn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  /* The turn cue is one readable pill rather than a loose headline. Its icon
     swaps with the lesson turn: cap for Radhika, reader for the student. */
  .classroom-focus-status .focus-turn-pill {
    min-height: 58px;
    padding: 8px 20px 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid var(--gold-bright);
    border-radius: 999px;
    background: var(--panel);
    color: var(--gold-bright);
    font-family: "Noto Serif", serif;
    font-size: clamp(1.18rem, 4vw, 1.55rem);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / 0.35), 0 0 18px rgb(var(--gold-active-rgb) / 0.25);
    animation: turnPillPulse 2.6s ease-in-out infinite;
  }
  .focus-turn-icon {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: none;
  }
  .focus-turn-icon.student-icon { display: none; }
  .classroom-focus-status.student .focus-turn-pill {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / 0.3), 0 0 18px rgb(var(--gold-active-rgb) / 0.22);
    animation: studentPillPulse 1.8s ease-in-out infinite;
  }
  .classroom-focus-status:not(.student):not(.waiting) .focus-turn-icon.teacher-icon {
    filter: brightness(1.35) drop-shadow(0 0 5px rgb(var(--gold-active-rgb) / 0.72));
    animation: studentIconPulse 1.1s ease-in-out infinite;
  }
  .classroom-focus-status.student .focus-turn-icon.teacher-icon { display: none; }
  .classroom-focus-status.student .focus-turn-icon.student-icon {
    display: block;
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 5px rgb(var(--gold-active-rgb) / 0.72));
    animation: studentIconPulse 1.1s ease-in-out infinite;
  }
  .classroom-focus-status.waiting .focus-turn-pill {
    animation: none;
    border-color: rgb(var(--gold-standard-rgb) / 0.6);
    box-shadow: none;
  }
  @keyframes turnPillPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / 0.36), 0 0 16px rgb(var(--gold-active-rgb) / 0.23); }
    50% { box-shadow: 0 0 0 7px rgb(var(--gold-standard-rgb) / 0.14), 0 0 28px rgb(var(--gold-active-rgb) / 0.4); }
  }
  @keyframes studentPillPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / 0.30), 0 0 16px rgb(var(--gold-active-rgb) / 0.24); }
    50% { box-shadow: 0 0 0 7px rgb(var(--gold-standard-rgb) / 0.13), 0 0 30px rgb(var(--gold-active-rgb) / 0.48); }
  }
  @keyframes studentIconPulse {
    0%, 100% { transform: scale(1); filter: brightness(1.25) drop-shadow(0 0 3px rgb(var(--gold-active-rgb) / 0.55)); }
    50% { transform: scale(1.13); filter: brightness(1.65) drop-shadow(0 0 9px rgb(var(--gold-active-rgb) / 0.95)); }
  }
  .classroom-focus-status .focus-turn-count {
    min-width: 72px;
    padding: 9px 14px;
    border: 1px solid var(--frame-border);
    border-radius: 999px;
    background: var(--panel);
    font-family: "Noto Serif", serif;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .classroom-focus-status .focus-turn-pill,
    .classroom-focus-status:not(.student) .focus-turn-icon.teacher-icon,
    .classroom-focus-status.student .focus-turn-icon.student-icon { animation: none; }
  }
  #view-player.classroom-focus main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  #view-player.classroom-focus .classroom-focus-status { display: flex; }
  #view-player.classroom-focus main .divider,
  #view-player.classroom-focus main .copyright { display: none; }
  #view-player.classroom-focus main .shloka,
  #view-player.classroom-focus main .verse { margin: 0; }
  #view-player.classroom-focus main .line,
  #view-player.classroom-focus main .sangati-pills { display: none; }
  #view-player.classroom-focus main .line.classroom-current {
    display: block;
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 16px;
    color: var(--ink);
    opacity: 1;
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 1.16);
    line-height: 1.75;
  }
  /* The full-screen drill deliberately shows only one lyric line, so it
     keeps that line steady; line-scale emphasis is reserved for lyric
     sheets where several lines are visible together. */
  #view-player.classroom-focus main .line.active { transform: none; }
  #view-player.classroom-focus main .sangati-pills.classroom-current-row {
    display: flex;
    justify-content: center;
    max-width: 760px;
    margin: 8px auto 0;
    padding: 0 14px;
  }
  #view-player.classroom-focus .your-turn-chip { display: none !important; }
  #view-player.classroom-focus main .classroom-swap {
    animation: classroomSwap 220ms ease-out;
  }
  @keyframes classroomSwap {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 480px) {
    .classroom-focus-status { gap: 12px; margin-bottom: 16px; }
    .focus-turn-row { gap: 12px; }
    .classroom-focus-status .focus-turn-count { min-width: 74px; padding: 8px 12px; }
    #view-player.classroom-focus main { padding: 18px 16px; }
    #view-player.classroom-focus main .line.classroom-current {
      padding: 10px 4px;
      font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 1.04);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #view-player.classroom-focus main .classroom-swap { animation: none; }
  }
  /* Word-by-word karaoke must paint on the audio-clock frame. Keep the
     resting font face and weight: asking for 700 only when a word lit forced
     a new complex-script face/reshape in Telugu, Kannada, Malayalam, and
     Grantha. The old 160 ms color/transform transition then made that delay
     visible. An instant color + compositor transform keeps every script on
     the same measured timing index without changing lyric layout. */
  .line-text .w,
  .meaning-original .w,
  .record-lyric .w {
    display: inline-block;
    font-weight: inherit;
    transform: scale(1);
    transform-origin: center 75%;
    transition: none;
  }
  .line-text .w.lit,
  .meaning-original .w.lit {
    color: var(--gold-bright);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.85);
    transform: scale(1.05);
  }
  .meaning-line {
    display: inline-block;
    transform: scale(1);
    transform-origin: center;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  }
  .meaning-line.seekable { cursor: pointer; }
  .meaning-line.seekable:hover { background: var(--hover-bg); }
  .meaning-line.seekable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .meaning-line.active {
    background: var(--active-bg);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--active-ring);
    transform: scale(1.015);
  }
  /* Line bookmarks live in the left gutter on Lyrics and Meanings, where
     sangati bubbles are not shown. They never enter copied lyric text. */
  .line.starred::before,
  .meaning-line.starred::before {
    content: "\2605";
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    line-height: 1;
    color: var(--gold-bright);
    opacity: 0.75;
    pointer-events: none;
  }
  .meaning-line.starred { position: relative; }
  .meaning-line.starred::before { left: -0.9em; }
  /* ---------- Sangati display ----------
     Every sung occurrence of a lyric line counts as a sangati, numbered
     1..N within that occurrence. Lines with several get a subtle
     always-visible count badge showing the current occurrence's count;
     the currently-playing line additionally reveals its pill row (the
     occurrence being sung), with the sounding sangati lit. Pill rows of a
     looped group stay visible with the member pills marked. */
  /* Numeric UI (pill numbers, count badges, steppers, time, percentages)
     always renders Western Arabic numerals in every script tab: the chrome
     keeps a Latin-first numeric stack whatever the lyric script. */
  .sangati-pills .pill, .sangati-count, .loop-count, .font-pct, .time, .pitch-count, .pitch-note, .ts-count {
    font-family: "Noto Serif", serif;
  }
  .sangati-count {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--gold-bright);
    opacity: 0.8;
    margin-left: 0.75em;
    vertical-align: baseline;
    white-space: nowrap;
  }
  .sangati-pills {
    display: none;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 10px;
    margin: 2px 0 6px;
  }
  .sangati-pills.show { display: flex; }
  .sangati-pills .pill {
    position: relative;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.45);
    background: rgba(46, 28, 8, 0.35);
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sangati-pills .pill:hover { border-color: var(--gold-bright); }
  .sangati-pills .pill:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }
  .sangati-pills .pill.current-choice {
    opacity: 1;
    border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.22);
    color: var(--gold-bright);
    box-shadow: 0 0 0 2px rgb(var(--gold-standard-rgb) / 0.20);
    font-weight: 700;
  }
  .sangati-pills .pill.lit:disabled { opacity: 1; }
  /* A sangati bookmark sits just below its bubble, centered on that
     specific take. Give bookmarked rows enough underside room that the
     marker never collides with the following lyric line. */
  .sangati-pills:has(.pill.bookmarked) { margin-bottom: 18px; }
  .sangati-pills .pill.bookmarked::after {
    content: "*";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }
  .sangati-pills .pill.bookmarked.lit::after { color: var(--gold-bright); }
  .sangati-pills .pill:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  .sangati-pills .pill.lit {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    font-weight: 700;
  }
  /* Selection model: selected lines highlighted, unselected dimmed.
     The selection endpoints are bracketed, never filled: the selection
     start carries a gold start-bar on its left edge, the selection end
     the same bar on its right edge. When the music is idle ONLY the
     endpoint pills (.is-anchor/.is-end) light up; every other pill —
     in-range or not, including the rest of the start line — keeps the
     subdued base style, so .is-selected deliberately carries no
     brightening of its own. The
     solid gold fill is reserved for the pill being sung (.lit) — an
     endpoint must never read as "now playing" — and the lit rule below
     outranks every selection style so the sounding sangati always shows.
     On a lit endpoint the bracket bar flips to dark brown so it stays
     visible on the fill. */
  .line.is-selected { opacity: 1; }
  .line.is-unselected { opacity: 0.38; }
  .line.is-unselected.digression { opacity: 0.30; }
  .line.is-selected.active { opacity: 1; }
  .sangati-pills .pill.is-selected { }
  .sangati-pills .pill.is-unselected { opacity: 0.35; }
  .sangati-pills .pill.is-anchor {
    border-color: var(--gold-bright); color: var(--gold-bright);
    background: rgba(46,28,8,0.55);
    box-shadow: inset 4px 0 0 var(--gold-bright);
    font-weight: 700; opacity: 1;
  }
  .sangati-pills .pill.is-end {
    border-color: var(--gold-bright); color: var(--gold-bright);
    background: rgba(46,28,8,0.55);
    box-shadow: inset -4px 0 0 var(--gold-bright);
    font-weight: 700; opacity: 1;
  }
  .sangati-pills .pill.is-anchor.is-end {
    box-shadow: inset 4px 0 0 var(--gold-bright), inset -4px 0 0 var(--gold-bright);
  }
  /* Now playing: the sounding sangati takes the solid gold fill, which
     outranks the selection wash and the endpoint brackets. */
  .sangati-pills .pill.lit.is-selected,
  .sangati-pills .pill.lit.is-unselected {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    opacity: 1;
  }
  .sangati-pills .pill.lit.is-anchor { box-shadow: inset 4px 0 0 var(--umber-shadow); }
  .sangati-pills .pill.lit.is-end { box-shadow: inset -4px 0 0 var(--umber-shadow); }
  .sangati-pills .pill.lit.is-anchor.is-end {
    box-shadow: inset 4px 0 0 var(--umber-shadow), inset -4px 0 0 var(--umber-shadow);
  }
  .sangati-pills .pill.sel-pinned { }
  /* Line-tap grace window: the pills under the tapped line dim while the
     default (first) sangati shows as the one about to play. */
  .sangati-pills.armed .pill { opacity: 0.75; }
  .sangati-pills .pill.pending-sel {
    opacity: 1;
    border-color: var(--gold-bright);
    border-width: 2px;
    color: var(--gold-bright);
    animation: pending-pulse 0.9s ease-in-out infinite;
  }
  @keyframes pending-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--gold-standard-rgb) / 0.55); }
    50%      { box-shadow: 0 0 0 4px rgb(var(--gold-standard-rgb) / 0.0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sangati-pills .pill.pending-sel { animation: none; }
  }
  .line.armed { box-shadow: inset 0 0 0 2px rgb(var(--gold-standard-rgb) / 0.75); }
  /* Loop group marking: while a group of several sangatis loops, the member
     lines are ringed and the member pills bracketed first→last. */
  .line.in-loop-group {
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.65);
    background: rgb(var(--gold-standard-rgb) / 0.07);
  }
  .line.active.in-loop-group {
    background: var(--active-bg);
  }
  .sangati-pills .pill.in-group {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / 0.14);
  }
  .sangati-pills .pill.in-group.g-start {
    border-left: 3px solid var(--gold-bright);
  }
  .sangati-pills .pill.in-group.g-end {
    border-right: 3px solid var(--gold-bright);
  }
  .sangati-pills .pill.lit.in-group {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
  }
  .verse.refrain .line {
    font-weight: 600;
  }
  .divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 28px;
    color: var(--gold-bright);
  }
  .divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
  }
  /* Thin gold hairlines fading out at the far edges. */
  .divider::before { background: linear-gradient(to right, rgb(var(--gold-standard-rgb) / 0), var(--gold-bright)); }
  .divider::after  { background: linear-gradient(to left,  rgb(var(--gold-standard-rgb) / 0), var(--gold-bright)); }
  .divider span { font-size: 1rem; }

  /* Copyright/build stamp: a fixed flex child at the very bottom of every
     screen, outside its scrolling content and below any player surface. */
  .copyright {
    display: none !important;
  }
  .copyright-build {
    color: var(--gold-bright);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Below the capped frame width the lyric columns shrink with the
     viewport, so scale the lyric font down with them proportionally. */
  @media (max-width: 720px) {
    /* The clamp scales --lyric-size itself, so the A/A slider's
       --lyric-scale keeps working on phones too. */
    :root {
      --lyric-size: clamp(1.38rem, 5.75vw, 1.72rem);
      --lyric-size-home: clamp(1.40rem, 5.8vw, 1.75rem);
    }
  }
  @media (max-width: 480px) {
    body { padding: 8px 6px 0; }
    /* The framed picture stays on the same column as the player and
       lyrics below it, edge to edge. */
    .banner { margin: 4px 0 14px; width: 100%; }
    header { padding: 14px 18px 14px; }
    h1 { font-size: 1.6rem; }
    .lang-bar { padding: 8px 16px 6px; }
    .player-wrap { padding: 6px 16px calc(4px + env(safe-area-inset-bottom)); }
    main { padding: 12px 16px 24px; }
    .time { min-width: 96px; }
    /* Mobile photo framing: pin the face point (47%/33% of the source) at
       the circle's center with absolute positioning rather than the
       percentage-margin crop — immune to margin-percentage quirks — and
       object-fit as a backstop so the full face always shows. */
    .teacher .photo { position: relative; }
    .teacher .photo img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 160%;
      height: 160%;
      margin: 0;
      transform: translate(-47%, -33%);
      object-fit: cover;
    }
  }
  /* ---------- Lyric search + playback speed ----------
     Each screen (landing, meanings, practice) carries a magnifier in
     its header cluster; tapping it opens a search strip over that
     screen's lyrics (in flow above the lyric scroll on the practice
     screen, sticky at the top of the scroll on the two home screens).
     Matching is "smart exact": the query is normalized and matched as
     a substring against every lyric line in all three scripts at
     once; a hit in any script highlights the line. The speed pill
     cycles 0.5 → 0.75 → 1 → 1.25 on the practice screen. */
  .head-actions { display: inline-flex; align-items: center; gap: 8px; }
  /* Lyrics and Meanings expose their two question routes as compact icon
     controls in the same top action row as the other utilities. */
  .ask-shortcut-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.35);
    border-radius: 8px;
    background: transparent;
    color: var(--gold-bright);
    cursor: pointer;
  }
  .ask-shortcut-btn.ask-ai-shortcut {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--umber-shadow);
  }
  .ask-shortcut-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--hover-bg); color: var(--gold-active); }
  .ask-shortcut-btn.ask-ai-shortcut:hover:not(:disabled) { background: var(--gold-active); color: var(--umber-shadow); }
  .ask-shortcut-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ask-shortcut-btn:disabled { opacity: .48; cursor: not-allowed; }
  .ask-shortcut-icon { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
  .ask-shortcut-icon svg { width: 17px; height: 17px; display: block; }
  .ask-shortcut-google-g { font: 800 1rem/1 system-ui, sans-serif; }
  .tool-btn.search-open, .home-icon-btn.search-open {
    color: var(--gold-bright); border-color: var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
  }
  /* One top-bar magnifier now routes to the three search modes. The menu is
     deliberately compact, with a clear external treatment for Google and a
     visibly unavailable Ask AI row until its build-time key is present. */
  .search-mode-anchor { position: relative; display: inline-flex; }
  .search-mode-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    width: 244px;
    max-width: calc(100vw - 34px);
    padding: 6px;
    border: 1px solid var(--gold);
    border-radius: 10px;
    background: var(--umber-shadow);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.58);
  }
  .search-mode-menu[hidden] { display: none; }
  .search-mode-item {
    width: 100%;
    min-height: 48px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 17px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: 600 .86rem/1.2 "Noto Serif", serif;
    text-align: left;
    cursor: pointer;
  }
  .search-mode-item + .search-mode-item { margin-top: 2px; }
  .search-mode-item:hover:not(:disabled) { background: var(--hover-bg); color: var(--gold-active); }
  .search-mode-item:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .search-mode-item:disabled {
    color: var(--gold-dim);
    opacity: .48;
    cursor: not-allowed;
  }
  .search-mode-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-bright);
  }
  .search-mode-icon svg { width: 19px; height: 19px; display: block; }
  .search-google-g {
    font: 800 1.18rem/1 system-ui, sans-serif;
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 45%, #fbbc05 0 68%, #ea4335 0 82%, #4285f4 0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .search-mode-copy { min-width: 0; }
  .search-mode-label { display: block; }
  .search-mode-note {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .69rem;
    font-weight: 500;
    line-height: 1.25;
  }
  .search-mode-external { width: 15px; height: 15px; color: var(--gold-bright); }
  .search-bar { flex: none; padding: 8px 28px 4px; }
  .search-bar[hidden] { display: none; }
  .search-bar.sticky {
    position: sticky; top: 0; z-index: 40;
    background: var(--card);
    padding: 8px 2px 6px;
  }
  .search-row { display: flex; align-items: center; gap: 7px; }
  .search-input {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--type); font-size: 1rem; color: var(--ink);
    background: rgba(46, 28, 8, 0.35);
    border: 1px solid var(--frame-border); border-radius: 999px;
    padding: 8px 16px;
  }
  .search-input::placeholder { color: var(--muted); }
  .search-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
  .search-nav {
    flex: none; width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--frame-border); border-radius: 50%;
    background: transparent; color: var(--gold-bright); cursor: pointer;
  }
  .search-nav svg { width: 18px; height: 18px; display: block; }
  .search-nav:hover:not(:disabled) { border-color: var(--gold); background: rgb(var(--gold-standard-rgb) / 0.12); }
  .search-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .search-nav:disabled { color: var(--muted); opacity: 0.38; cursor: default; }
  .search-status {
    margin: 4px 6px 0; min-height: 1.1em;
    font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .line.search-hit {
    background: rgb(var(--gold-standard-rgb) / 0.30);
    box-shadow: inset 0 0 0 1px var(--gold-bright);
  }
  .meaning-line.search-hit {
    background: rgb(var(--gold-standard-rgb) / 0.22);
    box-shadow: inset 0 0 0 1px var(--gold-bright);
    border-radius: 6px;
  }
  .meaning-text.search-hit {
    background: rgb(var(--gold-standard-rgb) / 0.22);
    box-shadow: inset 0 0 0 1px var(--gold-bright);
    border-radius: 6px;
  }
  .search-hit.search-current {
    background: rgb(var(--gold-standard-rgb) / 0.42);
    box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.18);
  }
  .speed-btn, .volume-btn {
    flex: none;
    width: var(--ctl-size); height: var(--ctl-size); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--frame-border); border-radius: 50%;
    background: transparent; color: var(--muted);
    font-family: "Noto Serif", serif; font-size: 0.88rem; font-weight: 600;
    line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer;
  }
  .speed-btn:hover, .volume-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .speed-btn:focus-visible, .volume-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .volume-btn svg { width: 19px; height: 19px; display: block; }
  .volume-btn.muted { color: var(--gold-dim); }
  @media (max-width: 480px) {
    .search-bar { padding: 8px 16px 4px; }
    .search-bar.sticky { padding: 8px 2px 6px; }
  }

  /* ---------- Two views: song home + player ---------- */
  .view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .view[hidden] { display: none; }
  /* Initial view is decided in <head> before first paint (hash/session
     marker) and stamped on <html data-start-view>; these rules make that
     view the one first rendered, with no landing flash before the main
     script syncs the hidden attributes. showView keeps the stamp in
     sync on every navigation, so they never fight the hidden toggles.
     The meanings screen never starts a session, so it needs no rule:
     its hidden attribute keeps it out of the first paint. */
  html[data-start-view="player"] #view-lyrics,
  html[data-start-view="player"] #view-landing { display: none; }
  html[data-start-view="player"] #view-player:not([hidden]) { display: flex; }
  html[data-start-view="lyrics"] #view-player,
  html[data-start-view="lyrics"] #view-landing { display: none; }
  .home-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    padding-bottom: 10px;
  }
  .home-body {
    padding: 4px 14px 0;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  .home-title {
    margin: 16px 0 4px; text-align: center; font-size: 1.9rem; font-weight: 700;
    color: var(--maroon); letter-spacing: 0.01em; line-height: 1.25;
  }
  /* Lyrics keeps the song identity in view while the lyric sheet moves.
     The opaque surface prevents scrolling words from showing through, and
     the restrained lower rule separates the fixed title without turning it
     into another toolbar. */
  .landing-song-head {
    position: sticky;
    top: 0;
    z-index: 35;
    min-height: 82px;
    margin: -4px -28px 0;
    padding: 11px 28px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--card);
    border-bottom: 1px solid rgb(var(--gold-standard-rgb) / 0.46);
    box-shadow: 0 7px 12px rgba(46, 28, 8, 0.14);
  }
  .landing-song-head .home-title {
    min-width: 0;
    margin: 0;
    text-align: left;
  }
  .landing-title-art {
    flex: none;
    width: 62px;
    aspect-ratio: 3 / 2;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--frame-maroon);
    border-radius: 6px;
    background: var(--umber-deep);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.7);
    cursor: zoom-in;
  }
  .landing-title-art:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .landing-title-art img,
  .meanings-title-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Meanings keeps its full-width Krishna artwork; the opening Lyrics sheet
     owns the separate, centered song-identity treatment. */
  .meanings-song-head {
    margin: 14px 0 8px;
  }
  .meanings-song-head .home-title {
    margin: 0;
    text-align: center;
  }
  .meanings-title-art {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 1px solid var(--frame-maroon);
    border-radius: 8px;
    background: var(--umber-deep);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.7);
  }
  .art-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(24, 13, 6, 0.88);
    cursor: zoom-out;
  }
  .art-lightbox[hidden] { display: none; }
  .art-lightbox-close {
    position: absolute;
    z-index: 2;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--gold-standard);
    border-radius: 50%;
    background: var(--umber-shadow);
    color: var(--gold-active);
    font: 700 1.35rem/1 var(--type);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .art-lightbox-close:focus-visible { outline: 3px solid var(--gold-active); outline-offset: 3px; }
  .art-lightbox-figure {
    width: min(960px, 100%);
    margin: 0;
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    overflow: hidden;
    background: var(--umber-deep);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.72), inset 0 0 0 2px rgb(var(--gold-standard-rgb) / 0.72);
    cursor: default;
  }
  .art-lightbox-figure img {
    display: block;
    width: 100%;
    max-height: calc(100dvh - 48px);
    object-fit: contain;
  }
  .home-meta {
    margin: 0 0 18px; text-align: center; color: var(--muted); font-size: 0.98rem;
  }
  .home-meta b { color: var(--ink); font-weight: 600; }
  .listen-meta {
    margin: 8px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
    text-align: center;
  }
  .listen-meta .listen-singer {
    color: var(--gold-bright);
    font-size: 1.05rem;
    font-weight: 700;
  }
  .listen-meta span:not(:first-child)::before {
    content: "•";
    margin-right: 14px;
    color: var(--gold-dim);
  }
  @media (max-width: 480px) {
    .listen-meta {
      gap: 5px 4px;
      font-size: clamp(.62rem, 2.75vw, .72rem);
    }
    .listen-meta .listen-singer { flex-basis: 100%; font-size: .98rem; }
    .listen-meta span:not(:first-child) { white-space: nowrap; }
    .listen-meta span:not(:first-child)::before { margin-right: 4px; }
  }
  .home-section-title {
    margin: 22px 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--gold-bright);
  }
  /* Section heading row on the home screens: the section title with the
     lyric language switcher at its right — the one control that stays
     in the row; every other control lives in the top bar's top-right
     cluster. */
  .home-meanings-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #view-landing .home-meanings-head {
    justify-content: flex-end;
    margin-top: 15px;
  }
  .landing-lyrics-block {
    margin-top: 6px;
    padding: 8px 10px 2px;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.22);
    border-radius: 8px;
    background: rgba(46, 28, 8, 0.05);
  }
  #view-landing .home-body {
    padding: 4px 14px 0;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  .home-about-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ask-ai-inline {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
    border: 0; background: transparent; color: var(--gold-bright);
    font: 600 .82rem/1.2 "Noto Serif", serif; cursor: pointer;
  }
  .ask-ai-inline:hover { color: var(--gold-active); }
  .ask-ai-inline:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 7px; }
  .ask-ai-inline svg { width: 17px; height: 17px; flex: none; }
  .ask-ai-dialog {
    position: fixed; inset: 0; z-index: 240; display: grid; place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: rgba(28, 15, 5, .76);
  }
  .ask-ai-dialog[hidden] { display: none; }
  .record-delete-dialog {
    position: fixed; inset: 0; z-index: 260; display: grid; place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: rgba(28, 15, 5, .78);
  }
  .record-delete-dialog[hidden] { display: none; }
  .record-delete-panel {
    width: min(360px, 100%); padding: 20px; text-align: center;
    border: 1px solid var(--frame-maroon); border-radius: 10px;
    background: var(--umber-panel); color: var(--ink);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / .62), 0 18px 52px rgba(0,0,0,.68);
  }
  .record-delete-panel h2 { margin: 0; color: var(--gold-bright); font-size: 1.08rem; }
  .record-delete-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .record-delete-actions button {
    min-width: 96px; min-height: 40px; padding: 8px 14px;
    border: 1px solid var(--gold); border-radius: 8px;
    font: 700 .88rem/1.2 "Noto Serif", serif; cursor: pointer;
  }
  .record-delete-cancel { background: transparent; color: var(--ink); }
  .record-delete-confirm { background: var(--gold); color: var(--umber-shadow); }
  .record-delete-actions button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ask-ai-panel {
    width: min(560px, 100%); max-height: min(84dvh, 680px); overflow-y: auto;
    padding: 18px; border: 1px solid var(--frame-maroon); border-radius: 10px;
    background: var(--umber-panel); color: var(--ink);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / .62), 0 18px 52px rgba(0,0,0,.68);
  }
  .ask-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ask-ai-head h2 { margin: 0; color: var(--gold-bright); font-size: 1.16rem; }
  .ask-ai-close {
    width: 34px; height: 34px; border: 1px solid var(--line-border); border-radius: 50%;
    background: transparent; color: var(--gold-bright); font: 500 1.35rem/1 system-ui, sans-serif; cursor: pointer;
  }
  .ask-ai-close:hover { background: var(--hover-bg); border-color: var(--gold); }
  .ask-ai-close:focus-visible, .ask-ai-question:focus-visible, .ask-ai-submit:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
  }
  .ask-ai-intro { margin: 10px 0 12px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
  .ask-ai-question {
    width: 100%; min-height: 104px; resize: vertical; padding: 11px 12px;
    border: 1px solid var(--line-border); border-radius: 8px;
    background: var(--umber-deep); color: var(--ink); font: 500 1rem/1.5 "Noto Serif", serif;
  }
  .ask-ai-question::placeholder { color: var(--gold-dim); opacity: .86; }
  .ask-ai-question-meta {
    display: flex; justify-content: flex-end; margin-top: 4px; color: var(--gold-dim);
    font-size: .7rem; line-height: 1.25; font-variant-numeric: tabular-nums;
  }
  .ask-ai-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  .ask-ai-external { max-width: 62%; color: var(--muted); font-size: .74rem; line-height: 1.35; }
  .ask-ai-submit {
    flex: none; min-width: 76px; min-height: 38px; padding: 8px 15px; border: 1px solid var(--gold); border-radius: 8px;
    background: var(--gold); color: var(--umber-shadow); font: 700 .88rem/1.2 "Noto Serif", serif; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  }
  .ask-ai-submit:hover { background: var(--gold-active); }
  .ask-ai-submit.is-thinking { min-width: 108px; }
  .ask-ai-submit.is-thinking::before {
    content: "";
    width: 13px; height: 13px; flex: none;
    border: 2px solid rgb(46 28 8 / .36);
    border-top-color: var(--umber-shadow);
    border-radius: 50%;
    animation: ask-ai-spin .72s linear infinite;
  }
  @keyframes ask-ai-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ask-ai-submit.is-thinking::before { animation: none; border-style: dotted; }
  }
  .ask-ai-result {
    margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--line-border);
  }
  .ask-ai-result[hidden] { display: none; }
  .ask-ai-result-actions { display: flex; justify-content: flex-end; gap: 8px; min-height: 34px; }
  .ask-ai-copy, .ask-ai-share, .ask-ai-clear { width: 34px; height: 34px; }
  .ask-ai-clear svg { width: 17px; height: 17px; }
  .ask-ai-copy:focus-visible, .ask-ai-share:focus-visible, .ask-ai-clear:focus-visible, .ask-ai-google:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .ask-ai-google {
    margin-top: 12px; border: 1px solid var(--line-border); background: rgb(var(--gold-standard-rgb) / 0.08);
  }
  .ask-ai-google:hover { border-color: var(--gold); }
  .ask-ai-google[hidden] { display: none; }
  .ask-ai-share:disabled { opacity: .45; cursor: not-allowed; }
  .ask-ai-share .share-icon-ios { display: none; }
  .platform-ios .ask-ai-share .share-icon-android { display: none; }
  .platform-ios .ask-ai-share .share-icon-ios { display: block; }
  .ask-ai-answer {
    margin: 3px 0 0; color: var(--ink); font-size: .92rem; line-height: 1.62;
  }
  .ask-ai-answer p { margin: .7em 0; }
  .ask-ai-answer p:first-child,
  .ask-ai-answer > :first-child { margin-top: 0; }
  .ask-ai-answer p:last-child,
  .ask-ai-answer > :last-child { margin-bottom: 0; }
  .ask-ai-answer ul,
  .ask-ai-answer ol { margin: .55em 0 .8em; padding-inline-start: 1.6em; }
  .ask-ai-answer li { margin: .25em 0; padding-inline-start: .15em; }
  .ask-ai-answer strong { color: var(--gold-bright); font-weight: 700; }
  .ask-ai-answer em { color: var(--gold-dim); }
  .ask-ai-answer h3,
  .ask-ai-answer h4 {
    margin: .9em 0 .35em; color: var(--gold-bright); font-size: 1em; line-height: 1.4;
  }
  .ask-ai-status { margin: 9px 0 0; min-height: 1.2em; color: var(--muted); font-size: .8rem; line-height: 1.4; }
  .ask-ai-model {
    margin: 12px 0 0; color: var(--gold-dim); font: 500 .67rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: right; letter-spacing: .01em;
  }
  .ask-ai-model[hidden] { display: none; }
  @media (max-width: 480px) {
    .ask-ai-panel { padding: 15px; }
    .ask-ai-actions { align-items: flex-end; }
    .ask-ai-external { max-width: 58%; }
  }
  .home-summary { margin: 0; line-height: 1.65; color: var(--ink); font-size: 1rem; }
  /* Landing screen: no "About" heading there, so the summary breathes
     directly under the action panel (the panel itself carries the top
     margin that separates it from Swamiji). */
  /* Action row (landing + meanings): a single neat line —
     Listen [play] Practice [mic] Meanings/Lyrics [icon] Learn [board] —
     replacing the old "press the button below" guidance paragraph. Each
     label + icon is one tappable unit: tapping (or clicking) anywhere on
     the pair has the button's effect (script forwards label taps to the
     icon button, below). */
  /* The action rows sit in a subtly demarcated panel — a warm contained
     strip that groups the four actions and sets them off from Swamiji
     above and the summary below. */
  .action-row {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; flex-wrap: nowrap; margin: 18px 0 2px;
    background: var(--panel);
    border: 1px solid var(--line-border);
    border-radius: 12px;
    padding: 12px 14px;
  }
  /* On Lyrics the five destinations sit directly on the page beneath the
     song subtitle. Keep the row comfortably spaced without enclosing it in
     a second panel. */
  #view-landing .action-row {
    position: sticky;
    top: 82px;
    z-index: 34;
    margin-top: 0;
    padding: 11px 0 10px;
    gap: 18px;
    background: var(--card);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* One unit: pointer cursor over the whole pair, padding so the tap
     target covers the label fully (negative margins keep the row's
     spacing), and a shared hover tint so label and icon light together
     (mirrors .home-icon-btn's own hover). */
  .action-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 600; color: var(--ink);
    cursor: pointer;
    padding: 4px 6px; margin: -4px -6px;
  }
  .action-item:hover { color: var(--gold-active); }
  .action-item:hover .action-btn {
    border-color: var(--gold); color: var(--gold-active); background: var(--hover-bg);
  }
  .action-item .action-btn { width: 38px; height: 38px; }
  .action-item .action-btn svg { width: 18px; height: 18px; }
  .action-item .action-btn .test-nav-icon { width: 20px; height: 20px; }
  /* The Listen button mirrors the anchored player: while the song plays
     it shows the pause glyph, exactly like the slim play button. */
  .action-btn .icon-pause { display: none; }
  .action-btn.playing .icon-play { display: none; }
  .action-btn.playing .icon-pause { display: block; }
  @media (max-width: 480px) {
    .action-row {
      gap: 2px;
      padding: 8px 4px;
    }
    #view-landing .action-row {
      top: 72px;
      gap: 4px;
      padding: 10px 0 9px;
    }
    .action-item {
      flex: 1 1 20%;
      min-width: 0;
      flex-direction: column;
      gap: 3px;
      padding: 2px 0;
      margin: 0;
      font-size: 0.67rem;
      line-height: 1.05;
      white-space: nowrap;
    }
    .action-item .action-btn { width: 29px; height: 29px; }
    .action-item .action-btn svg { width: 15px; height: 15px; }
  }
  /* Practice and Learn use the same labeled navigation panel as the
     reading screens. On these flex-column views the panel sits directly
     below the song header and above the scrolling lyric sheet; the inset
     keeps its edges aligned with the lyrics and anchored player. */
  .mode-action-nav {
    flex: none;
    margin: 10px 28px 2px;
  }
  @media (max-width: 480px) {
    .mode-action-nav {
      margin: 8px 16px 2px;
      gap: 4px;
      flex-wrap: nowrap;
      padding: 8px 6px;
    }
    .mode-action-nav .action-item {
      gap: 3px;
      padding: 3px 2px;
      margin: -3px -2px;
      font-size: 0.72rem;
      white-space: nowrap;
    }
    .mode-action-nav .action-item .action-btn {
      width: 28px;
      height: 28px;
    }
    .mode-action-nav .action-item .action-btn svg {
      width: 14px;
      height: 14px;
    }
  }
  /* Guidance line: compact explanatory copy used beneath reading content. */
  .home-guide {
    margin: 14px 0 0; line-height: 1.65; color: var(--muted); font-size: 0.95rem;
  }
  .home-guide-foot { margin: 18px 0 0; }
  .home-icon-btn.inline-btn {
    width: 32px; height: 32px; margin-left: 5px; vertical-align: -9px;
  }
  .home-icon-btn.inline-btn svg { width: 16px; height: 16px; }
  .meaning-item { margin: 0 0 16px; }
  /* Meanings carries the same manuscript frame around the dhyana shloka's
     label, originals, and translations, preserving it as one passage. */
  .meaning-item.dhyana-meaning {
    padding: 12px 16px;
    border-left: 3px solid var(--gold);
    border-top: 1px solid rgba(234, 189, 114, 0.22);
    border-right: 1px solid rgba(234, 189, 114, 0.22);
    border-bottom: 1px solid rgba(234, 189, 114, 0.22);
    border-radius: 8px;
    background: rgba(234, 189, 114, 0.05);
    box-shadow: none;
  }
  .dhyana-meaning .meaning-label { text-align: left; color: var(--gold-bright); }
  .meaning-pair + .meaning-pair { margin-top: 9px; }
  @media (max-width: 480px) {
    .shloka { padding: 8px 12px; border-radius: 6px; }
    .shloka .line { padding-left: 6px; padding-right: 6px; }
    .meaning-item.dhyana-meaning {
      padding: 10px 12px;
      border-radius: 6px;
    }
  }
  .meaning-label { margin: 0 0 3px; font-weight: 700; color: var(--ink); font-size: 0.98rem; }
  /* The lyric originals scale with the shared A/A lyric-size control
     (--lyric-scale), so the control works on this screen too; the
     meaning text itself stays fixed. */
  .meaning-original { margin: 0 0 3px; color: var(--maroon); line-height: 1.6; font-size: calc(1.5rem * var(--lyric-scale, 1)); }
  .meaning-text { margin: 0; line-height: 1.6; color: var(--ink); font-size: 0.98rem; }
  #view-meanings .study-sangati-count {
    margin-left: .5em;
    font-size: .68rem;
  }
  #view-meanings .study-sangati-row {
    gap: 5px;
    margin: 2px 0 7px;
    padding: 0;
  }
  #view-meanings .study-sangati-row .pill {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: .7rem;
  }
  .home-note {
    margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line-border);
    border-radius: 10px; background: var(--panel); color: var(--muted);
    line-height: 1.6; font-size: 0.94rem;
  }
  /* Verse 2 note row: the note text with the info icon at its right;
     tapping the icon opens the verse 2 panel below it. */
  .verse2-note { display: flex; align-items: center; gap: 12px; }
  .verse2-note-text { margin: 0; flex: 1 1 auto; }
  .verse2-btn { width: 38px; height: 38px; }
  .verse2-btn svg { width: 19px; height: 19px; }
  .verse2-panel {
    margin: 10px 0 0; padding: 12px 14px;
    border: 1px solid var(--line-border); border-radius: 10px; background: var(--card);
  }
  .verse2-panel .meaning-text { margin-bottom: 2px; }
  .home-actions { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 6px; }
  .cta-btn {
    display: block; width: 100%; padding: 14px 18px; border-radius: 12px;
    border: 1px solid var(--gold); background: var(--gold); color: var(--umber-shadow);
    font-family: var(--type); font-size: 1.12rem; font-weight: 700; cursor: pointer;
    text-align: center;
  }
  .cta-btn:hover { background: var(--gold-standard); }
  .cta-btn:focus-visible, .ai-btn:focus-visible, .back-btn:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 3px;
  }
  .ai-btn {
    display: block; width: 100%; padding: 12px 18px; border-radius: 12px;
    border: 1px solid var(--gold); background: transparent; color: var(--gold-bright);
    font-family: var(--type); font-size: 1rem; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
  }
  .ai-btn:hover { background: var(--hover-bg); }
  /* One title-bar pattern on every screen: navigation and the screen name
     form the left cluster; screen-specific tools stay gathered at right. */
  .screen-topbar {
    position: relative;
    flex: none; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    min-width: 0;
    padding: 12px 28px 8px;
    /* iOS-style half-point separator: visible enough to orient the page,
       but quieter than a full border under the compact title rail. */
    box-shadow: inset 0 -0.5px rgb(var(--gold-standard-rgb) / 0.46);
  }
  .screen-leading { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  /* Classroom and Studio are child workspaces, not numbered destinations.
     Their back arrows replace the numbered screen-menu trigger while the
     child workspace is active. */
  .back-btn.child-view-back {
    width: 32px; height: 32px;
    color: var(--gold-bright);
    border-color: rgb(var(--gold-standard-rgb) / .7);
    border-radius: 50%;
  }
  .back-btn.child-view-back svg { width: 18px; height: 18px; }
  #classroomDrillBackBtn { display: none; }
  #view-classroom.drill-focus #classroomDrillBackBtn { display: inline-flex; }
  #view-classroom.drill-focus .screen-nav-menu-wrap { display: none; }
  /* The page name sits with navigation at the left. This keeps the title
     visually attached to the current-screen dropdown instead of pretending
     to be centered against a much larger right-side tool cluster. */
  .screen-page-name {
    position: static;
    color: var(--ink); font-size: 1rem; font-weight: 700;
    line-height: 1; white-space: nowrap;
    pointer-events: auto;
  }
  .screen-breadcrumb-link {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  button.screen-breadcrumb-link::after {
    display: none !important;
  }
  .screen-breadcrumb-link:hover {
    color: var(--gold-standard) !important;
  }
  .top-nav-shortcuts { display: inline-flex; align-items: center; gap: 8px; flex: none; }
  /* One compact destination menu replaces the five-icon rail. The trigger
     shows the current screen's established icon plus a small chevron; the
     open menu is the single place that pairs all other icons with labels. */
  .screen-nav-menu-wrap { position: relative; display: inline-flex; flex: none; }
  .screen-nav-trigger {
    width: 57px; height: 32px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border: 1px solid rgb(var(--gold-standard-rgb) / .54); border-radius: 999px;
    background: rgb(var(--gold-standard-rgb) / .12); color: var(--gold-bright);
    cursor: pointer;
  }
  .screen-nav-trigger:hover, .screen-nav-trigger[aria-expanded="true"] {
    border-color: var(--gold); background: var(--hover-bg); color: var(--gold-active);
  }
  .screen-nav-trigger:focus-visible, .screen-nav-item:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
  }
  .screen-nav-trigger .nav-current-icon,
  .screen-nav-item .nav-item-icon {
    width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
  }
  .screen-nav-trigger svg, .screen-nav-item svg { width: 100%; height: 100%; display: block; }
  .screen-nav-trigger img, .screen-nav-item img {
    width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 3px;
  }
  .screen-nav-trigger .nav-chevron {
    width: 8px; height: 8px; flex: none; transition: transform .16s ease;
  }
  .screen-nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
  .screen-nav-menu {
    position: absolute; z-index: 90; top: calc(100% + 8px); left: 0;
    min-width: 164px; padding: 6px;
    display: grid; gap: 2px;
    border: 1px solid var(--frame-border); border-radius: 10px;
    background: var(--umber-shadow); box-shadow: 0 12px 28px rgba(0,0,0,.42);
  }
  .screen-nav-menu[hidden] { display: none; }
  .screen-nav-item {
    width: 100%; min-height: 39px; padding: 7px 10px;
    display: flex; align-items: center; gap: 10px;
    border: 0; border-radius: 7px; background: transparent; color: var(--ink);
    font: 600 .9rem/1.2 "Noto Serif", serif; text-align: left; cursor: pointer;
  }
  .screen-nav-item:hover:not(:disabled) { background: var(--hover-bg); color: var(--gold-active); }
  .screen-nav-item:disabled {
    color: var(--gold-dim); opacity: .48; cursor: default;
    background: rgb(var(--gold-standard-rgb) / .06);
  }
  .nav-step,
  .nav-current-step {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    border: 1px solid rgb(var(--gold-standard-rgb) / .42);
    border-radius: 50%;
    color: var(--gold-dim);
    font: 700 .64rem/1 "Noto Serif", serif;
    font-variant-numeric: tabular-nums;
  }
  .nav-current-step {
    width: 14px; height: 14px;
    margin-left: -2px;
    border-color: transparent;
    color: var(--muted);
    font-size: .58rem;
  }
  .learning-next {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0 8px;
    padding-top: 16px;
    border-top: 1px solid rgb(var(--gold-standard-rgb) / .22);
  }
  .learning-next-btn {
    appearance: none;
    padding: 5px 2px;
    border: 0;
    background: transparent;
    color: var(--gold-dim);
    font: 600 .82rem/1.3 "Noto Serif", serif;
    cursor: pointer;
  }
  .learning-next-btn:hover { color: var(--gold-active); }
  .learning-next-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  html.performance-mode #view-lyrics .learning-next,
  #view-classroom.drill-focus .learning-next,
  #view-player.classroom-focus .learning-next { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .screen-nav-trigger .nav-chevron { transition: none; }
  }
  .home-icon-btn.top-shortcut {
    width: 32px; height: 32px;
    background: transparent;
  }
  .home-icon-btn.top-shortcut svg { width: 16px; height: 16px; }
  .home-icon-btn.top-shortcut .test-nav-icon { width: 18px; height: 18px; }
  .home-icon-btn.top-shortcut-current {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
    cursor: default;
    box-shadow: 0 0 0 3px var(--active-ring);
  }
  .home-icon-btn.top-shortcut-current:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--umber-shadow);
  }
  button.home-icon-btn.top-shortcut-current { cursor: pointer; }
  /* The Test glyph is a raster asset, so unlike the currentColor SVGs it
     needs an explicit active-state treatment: dark artwork on the same
     luminous gold disc used by every other current-page icon. */
  .home-icon-btn.top-shortcut-current .test-nav-icon {
    filter: brightness(0) opacity(.82);
  }
  /* A quiet gold rule separates destination navigation from page tools on
     every screen without spending the width of another control. */
  .screen-topbar > .head-actions {
    margin-left: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding-left: 9px;
    border-left: 1px solid rgb(var(--gold-standard-rgb) / 0.38);
  }
  .practice-topbar { position: relative; }
  .practice-head-actions { min-width: 0; }
  /* Action screens use the instruction itself as the visual guide beneath
     the title bar; navigation stays in the standard top-left icon rail. */
  .mode-instruction {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    max-width: calc(100% - 56px);
    min-height: 48px;
    margin: 14px auto 10px;
    padding: 9px 18px;
    color: var(--gold-active);
    background: rgb(var(--gold-standard-rgb) / 0.20);
    border: 1px solid rgb(var(--gold-active-rgb) / 0.72);
    border-radius: 999px;
    box-shadow: 0 0 16px rgb(var(--gold-standard-rgb) / 0.14);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }
  /* A full-width hairline closes each anchored instruction block so the
     fixed guidance reads separately from the lyric sheet moving below it. */
  .mode-instruction::after {
    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: min(100vw, 680px);
    border-bottom: 1px solid rgb(var(--gold-standard-rgb) / 0.46);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .mode-inline-btn {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--frame-border);
    border-radius: 50%;
    background: transparent;
    color: var(--gold-bright);
    cursor: pointer;
  }
  .mode-inline-btn:hover { background: var(--hover-bg); border-color: var(--gold); }
  .mode-inline-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .mode-inline-btn.active { background: var(--gold); border-color: var(--gold); color: var(--umber-shadow); }
  .mode-inline-btn svg { width: 16px; height: 16px; display: block; }
  .mode-inline-btn img { width: 23px; height: 23px; display: block; object-fit: contain; }
  .practice-guide-play .icon-stop { display: none; }
  .practice-guide-play.playing .icon-play { display: none; }
  .practice-guide-play.playing .icon-stop { display: block; }
  .back-btn {
    flex: none; width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.35); border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer;
  }
  .back-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  /* Practice screen's back arrow: kept bright at rest (gold-bright glyph,
     firmer border) so it never reads as greyed out or disabled — the
     shared .back-btn resting style is muted. Its hover state already
     matches this, so hovering simply holds the brightness. */
  .player-head .back-btn {
    color: var(--gold-bright);
    border-color: rgb(var(--gold-standard-rgb) / 0.75);
  }
  .back-btn svg { width: 19px; height: 19px; display: block; }
  .practice-song-strip {
    flex: none; padding: 5px 28px 7px;
    border-top: 1px solid var(--line-border);
    border-bottom: 1px solid var(--gold);
  }
  .player-head-title {
    min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    text-align: center; margin: 0;
    font-size: 1.2rem; font-weight: 700; color: var(--maroon);
    line-height: 1.2;
  }
  .song-strip-title {
    min-width: 0; display: inline-flex; align-items: center; justify-content: center;
    gap: 9px; overflow: hidden;
  }
  #songTitleText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .practice-sub {
    flex: none; margin: 2px 0 0; text-align: center;
    font-size: 0.82rem; font-weight: 500; color: var(--muted);
  }
  .practice-sub b { color: var(--ink); font-weight: 600; }
  .title-note {
    width: 17px; height: 17px; flex: none;
    color: var(--gold-bright); opacity: 0.85;
  }
  .title-note.flip { transform: scaleX(-1); }
  /* Teach drill presence: Radhika's existing portrait is intentionally
     large enough to read as a person in the room rather than a status icon.
     Its resting gold edge stays quiet during the student's turn; while the
     teacher sings, the edge brightens and its outer glow breathes slowly. */
  .teacher-thumb {
    width: clamp(176px, 29vw, 210px);
    height: clamp(176px, 29vw, 210px);
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 50%;
    border: 4px solid rgb(var(--gold-standard-rgb) / 0.68);
    box-shadow: 0 0 0 2px rgba(46, 28, 8, 0.78);
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
  }
  .teacher-thumb.on {
    border-color: var(--gold-active);
    box-shadow:
      0 0 0 6px rgb(var(--gold-standard-rgb) / 0.68),
      0 0 30px rgb(var(--gold-active-rgb) / 0.60);
    animation: turnPulse 1.75s ease-in-out infinite;
  }
  @keyframes turnPulse {
    0%, 100% {
      box-shadow:
        0 0 0 6px rgb(var(--gold-standard-rgb) / 0.68),
        0 0 26px rgb(var(--gold-active-rgb) / 0.52);
    }
    50% {
      box-shadow:
        0 0 0 13px rgb(var(--gold-standard-rgb) / 0.24),
        0 0 46px rgb(var(--gold-active-rgb) / 0.78);
    }
  }
  @media (max-width: 480px) {
    .teacher-thumb {
      width: clamp(148px, 41vw, 170px);
      height: clamp(148px, 41vw, 170px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .teacher-thumb { transition: none; }
    .teacher-thumb.on {
      animation: none;
      box-shadow:
        0 0 0 5px rgb(var(--gold-standard-rgb) / 0.46),
        0 0 22px rgb(var(--gold-active-rgb) / 0.38);
    }
  }
  /* Turn counter disc: the title's other bookend, the same 34px
     circle as the teacher's face, showing the current turn's
     repeat as n/N (hers on her turn, the student's on theirs).
     It exists only while teacher/student turn mode is on. At
     rest it keeps its slot (visibility, not display) so the
     centered title never jumps when the mode switches. */
  .turn-disc {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: var(--panel);
    color: var(--gold-bright);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif", serif;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .turn-disc.show { visibility: visible; opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .turn-disc { transition: none; }
  }
  /* Swamiji portrait standing alone on the home screens. The Practice
     (mic) button rides with the anchored player; search modes live behind
     the single magnifier in each applicable top bar. */
  .home-icon-btn {
    flex: none; width: 46px; height: 46px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.45); border-radius: 50%;
    background: rgba(46, 28, 8, 0.25); color: var(--gold-bright);
    cursor: pointer; text-decoration: none;
  }
  .home-icon-btn:hover { border-color: var(--gold); color: var(--gold-active); background: var(--hover-bg); }
  .home-icon-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .home-icon-btn svg { width: 21px; height: 21px; display: block; }
  .home-icon-btn .test-nav-icon {
    width: 21px;
    height: 21px;
    display: block;
    object-fit: cover;
    border-radius: 3px;
  }
  /* Slim whole-song listening player anchored to the bottom of home:
     the same framed panel as the practice player — maroon border
     with the gold hairline inside, the page's double rule — inset
     to the same 28px column (16px on phones) as the lyrics above,
     so lyrics and player read as one continuous card; the mic
     rides inside the row at its right end instead of narrowing
     the player from outside. */
  .home-player-wrap {
    flex: none; padding: 8px 28px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
    display: flex; align-items: center; gap: 10px;
  }
  .home-player {
    flex: 1 1 auto; min-width: 0;
    background: var(--panel);
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.55),
      0 8px 22px rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
  }
  .home-player-row { display: flex; align-items: center; gap: 10px; }
  /* Lyrics keeps its scrubber compact and inline with the transport controls,
     matching the former compact Practice treatment. Meanings mirrors current
     Practice with a thin read-only progress line below instead. */
  .home-track {
    flex: 1 1 96px;
    min-width: 64px;
    display: flex;
    align-items: center;
    margin: 0;
  }
  .home-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin-top: 5px;
  }
  .home-progress-row .home-progress { flex: 1 1 auto; }
  .home-progress-row .pitch-readout { min-width: 30px; height: 26px; }
  .home-progress {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line-border);
  }
  .home-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width 100ms linear;
  }
  .home-play-btn {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--frame-border); background: var(--gold); color: var(--umber-shadow);
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .home-play-btn:hover { background: var(--gold-standard); }
  .home-play-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .home-play-btn svg { width: 21px; height: 21px; display: block; flex: none; }
  .home-play-btn .icon-pause { display: none; }
  .home-player.playing .home-play-btn .icon-play { display: none; }
  .home-player.playing .home-play-btn .icon-pause { display: block; }
  .home-mini-btn {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--frame-border); background: transparent; color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; position: relative;
  }
  .home-mini-btn:hover { background: var(--hover-bg); }
  .home-mini-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .home-mini-btn svg { width: 18px; height: 18px; display: block; }
  .home-mini-btn.active { background: var(--gold); border-color: var(--gold); color: var(--umber-shadow); box-shadow: 0 0 0 3px var(--active-ring); }
  .home-mini-btn.home-record-btn {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
    transition: all 0.15s ease;
  }
  .home-mini-btn.home-record-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  }
  .home-mini-btn.home-record-btn.join-in-active {
    color: #ef4444;
    border-color: var(--gold-bright);
    background: rgba(234, 189, 114, 0.22);
    box-shadow: 0 0 10px rgba(234, 189, 114, 0.45);
  }

  /* Sangati Step Navigation Buttons */
  .sangati-step-btn,
  .sangati-stepper-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(46, 24, 10, 0.55);
    border: 1px solid rgba(234, 189, 114, 0.32);
    color: var(--gold-bright);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
  }
  .sangati-step-btn:hover:not(:disabled),
  .sangati-stepper-btn:hover:not(:disabled) {
    background: rgba(234, 189, 114, 0.22);
    border-color: var(--gold-bright);
  }
  .sangati-step-btn:active:not(:disabled),
  .sangati-stepper-btn:active:not(:disabled) {
    transform: scale(1.18);
    box-shadow: 0 0 10px rgba(234, 189, 114, 0.55);
  }
  .sangati-step-btn:disabled,
  .sangati-stepper-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
  }
  /* Invisible Hit-Slop Expansion for reliable touch targeting */
  .sangati-step-btn::after,
  .sangati-stepper-btn::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -4px;
    right: -4px;
  }
  @media (max-width: 640px) {
    .sangati-step-btn,
    .sangati-stepper-btn {
      width: 28px !important;
      height: 28px !important;
    }
    .sangati-step-btn svg,
    .sangati-stepper-btn svg {
      width: 14px !important;
      height: 14px !important;
    }
    .sangati-nav-pill {
      min-width: 38px !important;
      height: 24px !important;
      font-size: 0.8rem !important;
    }
  }
  .home-time { font-size: 0.82rem; color: var(--muted); white-space: nowrap; min-width: 92px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; font-family: "Noto Serif", serif; }
  @media (max-width: 480px) {
    .home-player-wrap { padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); }
    .home-player-row { gap: 6px; }
    .home-play-btn { width: 38px; height: 38px; }
    .home-mini-btn { width: 32px; height: 32px; }
    .home-time { min-width: 70px; font-size: 0.75rem; }
  }
  @media (max-width: 380px) {
    .home-player-row { gap: 4px; }
    .home-play-btn { width: 36px; height: 36px; }
    .home-mini-btn { width: 30px; height: 30px; }
    .home-mini-btn svg { width: 16px; height: 16px; }
    .home-time { min-width: 68px; font-size: 0.72rem; }
  }
  @media (max-width: 340px) {
    .home-time { display: none; }
  }
  @media (max-width: 480px) {
    .home-body { padding: 4px 16px 0; }
    .home-title { font-size: 1.55rem; }
    .landing-song-head {
      min-height: 72px;
      margin: -4px -16px 0;
      padding: 9px 16px 8px;
      gap: 10px;
    }
    .landing-title-art { width: 52px; }
    .landing-song-head .home-title { font-size: 1.42rem; }
    .meanings-song-head { margin-top: 10px; }
    .meanings-title-art { margin-bottom: 13px; }
    /* Keep the full destination rail and tools on the first row, with an
       explicit page title directly beneath the rail. The highlighted icon
       is useful orientation, but it does not replace a visible title. */
    .screen-topbar {
      align-items: flex-start;
      padding: 10px 10px 7px;
      gap: 6px;
      flex-wrap: nowrap;
    }
    .screen-leading {
      gap: 5px;
      flex: 1 1 auto;
      min-width: 0;
      flex-direction: row;
      align-items: center;
    }
    .screen-page-name {
      display: block;
      padding-left: 0;
      font-size: 0.88rem;
      line-height: 1.15;
    }
    .top-nav-shortcuts { gap: 3px; }
    .home-icon-btn.top-shortcut,
    .screen-topbar > .head-actions .tool-btn { width: 29px; height: 29px; }
    .home-icon-btn.top-shortcut svg,
    .screen-topbar > .head-actions .tool-btn svg { width: 15px; height: 15px; }
    .screen-topbar > .head-actions {
      flex: none;
      width: auto;
      justify-content: flex-end;
      gap: 3px;
      padding-left: 5px;
    }
    /* The compact question icons stay in the first action row on reading
       screens, matching the size of the other phone controls. */
    .screen-topbar > .head-actions .ask-shortcut-btn { width: 29px; height: 29px; }
    .screen-topbar > .head-actions .ask-shortcut-icon,
    .screen-topbar > .head-actions .ask-shortcut-icon svg { width: 15px; height: 15px; }
    .practice-topbar .lang-btn { min-width: 42px; padding: 5px 7px 6px; }
    .mode-instruction { max-width: calc(100% - 32px); min-height: 44px; margin: 8px auto 6px; padding: 8px 14px; font-size: 0.96rem; }
    .mode-inline-btn { width: 30px; height: 30px; }
    .mode-inline-btn svg { width: 15px; height: 15px; }
    .mode-inline-btn img { width: 21px; height: 21px; }
  }


  /* Shloka formatting: Lyrics and the three action screens use the same
     start-aligned lyric treatment as the rest of their sheets. Compact
     padding and normal line spacing keep the manuscript frame fitted to the
     four padas instead of leaving a tall, double-spaced pocket. */
  #view-landing #landShloka {
    padding: 6px 10px 8px;
    margin-bottom: 6px;
  }
  #view-player #shloka,
  #view-classroom #classroomShloka,
  #view-record-select #recordSelectShloka {
    padding: 10px 14px 12px;
  }
  #view-landing #landShloka .line {
    padding: 2px 8px;
    line-height: 1.5;
    text-align: start;
  }
  #view-player #shloka .line,
  #view-classroom #classroomShloka .line,
  #view-record-select #recordSelectShloka .line {
    padding: 4px 14px;
    line-height: 1.55;
    text-align: start;
  }
  /* Listen is a denser annotated score: lyric and count stay together, the
     compact bubbles tuck directly under their line, and successive phrases
     form one clean vertical rhythm. The global 48px invisible hit planes
     remain unchanged, so the smaller circles are still easy to tap. */
  #view-landing .verse { margin-bottom: 10px; }
  #view-landing .lyrics .line {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.5;
    width: fit-content;
    max-width: 100%;
  }
  #view-landing #landShloka .line {
    padding: 2px 8px;
    line-height: 1.5;
    width: fit-content;
    max-width: 100%;
    text-align: start;
  }
  #view-landing .sangati-pills {
    gap: 4px;
    margin-top: 1px;
    margin-bottom: 2px;
  }
  #view-landing .sangati-pills .pill {
    min-width: 18px;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: .62rem;
  }
  /* Keep adjacent compact bubbles independently tappable: 26px hit plane */
  #view-landing .sangati-pills .pill::after {
    width: 26px;
    height: 26px;
  }
  #view-classroom #classroomShloka .classroom-line-block,
  #view-record-select #recordSelectShloka .classroom-line-block {
    margin-bottom: 0;
  }

  /* ---------- Dedicated Learn screen ----------
     Learn keeps Practice's lyric-sheet language, but its transport is
     deliberately instructional: navigation, loop, speed, and one Teach
     action. The drill state removes every other surface and lets the current
     phrase plus the turn/count read across a room. */
  .classroom-player-wrap {
    flex: none;
    padding: 8px 28px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
  }
  .classroom-player {
    background: var(--panel);
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.55), 0 8px 22px rgba(0,0,0,.35);
    padding: 10px 12px;
  }
  .classroom-player-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
  }
  .classroom-player-row .speed-btn { margin-left: 0; }
  .classroom-player-main[hidden],
  .classroom-setup-face[hidden] { display: none !important; }
  .classroom-player-main { display: block; }
  .classroom-setup-face {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .classroom-setup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .classroom-setup-face .ts-ctl {
    display: flex;
    margin-top: 0;
  }
  .classroom-mix-grid {
    display: grid;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line-border);
  }
  .classroom-volume-row {
    display: grid;
    grid-template-columns: minmax(104px, auto) 30px minmax(56px, 1fr) 42px;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.15;
  }
  .classroom-volume-row input[type="range"] { height: 24px; }
  .classroom-volume-row output {
    color: var(--gold-bright);
    text-align: right;
    font-family: "Noto Serif", serif;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
  }
  @media (max-width: 480px) {
    .classroom-teach-btn { width: var(--ctl-size); height: var(--ctl-size); }
    .classroom-volume-row {
      grid-template-columns: 96px 28px minmax(44px, 1fr) 34px;
      gap: 6px;
      font-size: .72rem;
    }
    .classroom-volume-row .volume-mute-btn { width: 28px; height: 28px; flex-basis: 28px; }
    .record-teacher-volume-row { grid-template-columns: 28px minmax(0, 1fr) 38px; gap: 7px; }
    .record-teacher-volume-row .volume-mute-btn { width: 28px; height: 28px; flex-basis: 28px; }
    .classroom-mix-grid { gap: 4px; }
  }
  .classroom-teach-btn {
    width: var(--ctl-size);
    height: var(--ctl-size);
    padding: 5px;
    border: 2px solid var(--gold-bright);
    border-radius: 50%;
    background: var(--gold);
    color: var(--umber-shadow);
    box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / 0.18);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Approved Teach symbol: retain the artwork's shape, but render its gold
     pixels as a dark glyph when it sits on the gold primary button. */
  .classroom-teach-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: brightness(0) saturate(100%);
    opacity: .86;
  }
  .classroom-instruction[role="button"] { cursor: pointer; }
  .classroom-instruction[role="button"]:hover { background: rgb(var(--gold-standard-rgb) / .28); }
  .classroom-instruction[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .classroom-instruction[role="button"]:hover .classroom-teach-btn { background: var(--gold-active); border-color: var(--gold-active); }
  .classroom-line-block { margin: 0 0 26px; }
  .classroom-line-block[hidden] { display: none; }
  #view-classroom main .line.classroom-sheet-current {
    background: var(--active-bg);
    box-shadow: inset 0 0 0 1px var(--active-ring);
  }
  #view-classroom main .sangati-pills.classroom-sheet-row { display: flex; }
  #view-classroom main .pill[hidden] { display: none; }
  #view-classroom .classroom-focus-status { display: none; }
  #view-classroom.drill-focus .classroom-lang-anchor,
  #view-classroom.drill-focus .classroom-setup-top,
  #view-classroom.drill-focus .classroom-instruction,
  #view-classroom.drill-focus .classroom-action-nav,
  #view-classroom.drill-focus > .classroom-player-wrap { display: none; }
  #view-classroom.drill-focus .classroom-topbar { justify-content: space-between; }
  #view-classroom.drill-focus #classroomDrillBackBtn { cursor: pointer; }
  #view-classroom.drill-focus main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    text-align: center;
    padding: 8px 28px 18px;
  }
  #view-classroom.drill-focus .classroom-focus-status {
    display: flex;
    margin-top: 0;
    margin-bottom: 10px;
  }
  .drill-start-instruction {
    margin: 0 0 6px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgb(var(--gold-active-rgb) / 0.72);
    border-radius: 999px;
    background: rgb(var(--gold-standard-rgb) / 0.20);
    color: var(--gold-active);
    font-family: "Noto Serif", serif;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .drill-start-instruction:hover { background: rgb(var(--gold-standard-rgb) / 0.28); }
  .drill-start-instruction:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .drill-start-instruction .start-play-glyph {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--umber-shadow);
  }
  .drill-start-instruction svg { width: 15px; height: 15px; display: block; }
  .drill-start-instruction .instruction-student-icon { width: 22px; height: 22px; display: block; object-fit: contain; filter: brightness(0) saturate(100%); }
  .drill-start-instruction .instruction-icon-pause { display: none; }
  .drill-start-instruction.playing .instruction-student-icon { display: none; }
  .drill-start-instruction.playing .instruction-icon-play { display: none; }
  .drill-start-instruction.playing .instruction-icon-pause { display: block; }
  #view-classroom.drill-focus main .divider,
  #view-classroom.drill-focus main .copyright { display: none; }
  #view-classroom.drill-focus .classroom-line-block { display: none; margin: 0; }
  #view-classroom.drill-focus .classroom-line-block.classroom-current { display: block; }
  #view-classroom.drill-focus main .shloka {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #view-classroom.drill-focus main .line {
    display: none;
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 16px;
    border: 1px solid rgb(var(--gold-standard-rgb) / 0.55);
    background: var(--panel);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.12);
    color: var(--ink);
    opacity: 1;
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 1.16);
    line-height: 1.75;
  }
  #view-classroom.drill-focus main .line.classroom-current { display: block; }
  #view-classroom.drill-focus main .sangati-pills { display: none; }
  #view-classroom.drill-focus main .sangati-pills.classroom-current-row {
    display: flex;
    justify-content: center;
    max-width: 760px;
    margin: 8px auto 0;
    padding: 0 14px;
  }
  #view-classroom #drillInstructionBtn { display: none; }
  #view-classroom.drill-focus #drillInstructionBtn {
    display: inline-flex;
    align-self: center;
    margin: 14px auto 0;
  }
  #view-classroom.drill-focus .classroom-drill-player-wrap { display: block; }
  #view-classroom.drill-focus .classroom-drill-controls { display: flex; }
  #view-classroom.drill-focus main .classroom-swap { animation: classroomSwap 220ms ease-out; }
  .classroom-drill-player-wrap {
    display: none;
    flex: none;
    padding: 8px 28px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
  }
  .classroom-drill-controls {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / 0.5), 0 8px 22px rgba(0,0,0,.35);
  }
  .classroom-drill-controls .ticker {
    width: 100%;
    margin-bottom: 2px;
  }
  .classroom-drill-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .drill-play-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--gold);
    color: var(--umber-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .drill-play-btn svg { width: 21px; height: 21px; display: block; }
  .drill-play-btn .icon-pause { display: none; }
  .drill-play-btn.playing .icon-play { display: none; }
  .drill-play-btn.playing .icon-pause { display: block; }
  .drill-play-btn:focus-visible,
  .drill-nav-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .drill-nav-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--frame-border);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .drill-nav-btn:hover { color: var(--gold-bright); border-color: var(--gold); background: var(--hover-bg); }
  .drill-nav-btn:disabled { opacity: .35; cursor: default; }
  .drill-nav-btn svg { width: 18px; height: 18px; display: block; }
  .drill-volume-wrap { position: relative; }
  .drill-volume-pop {
    width: min(330px, calc(100vw - 64px));
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 30px minmax(82px, 1fr) 42px;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .8rem;
  }
  .drill-volume-pop[hidden] { display: none; }
  .drill-volume-pop output { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
  @media (max-width: 480px) {
    .classroom-drill-player-wrap { padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); }
    .classroom-drill-controls { padding: 8px; }
    .classroom-drill-controls-row { gap: 6px; }
    .drill-play-btn { width: 40px; height: 40px; }
    .drill-nav-btn { width: 34px; height: 34px; }
  }
  @media (max-width: 480px) {
    .classroom-player-wrap { padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); }
    .classroom-player-row { gap: 7px; }
    #view-classroom.drill-focus main { padding: 18px 16px; }
    #view-classroom.drill-focus main .line.classroom-current {
      padding: 10px 4px;
      font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 1.04);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #view-classroom.drill-focus main .classroom-swap { animation: none; }
  }



  /* Confirmed one-row Practice transport: the range input is gone. */
  #view-player .player-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
  #view-player .player-left { display: block; }
  #view-player .player-row-main { justify-content: center; gap: 8px; }
  #view-player .practice-progress-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 11px;
  }
  #view-player .practice-progress {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line-border);
  }
  #view-player .practice-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width 100ms linear;
  }
  #view-player .player-time { font-size: .74rem; line-height: 1; }
  #view-player .player-layout.setup-open { min-height: var(--ctl-size); }
  #view-player .player-layout.setup-open .practice-progress-row { display: none; }
  @media (max-width: 480px) {
    /* Nine transport controls still fit in one row: the circles tighten
       together instead of growing the slim player or scrolling sideways. */
    #view-player .player { --ctl-size: 32px; padding: 8px 8px 7px; }
    #view-player .player-row-main { gap: 4px; }
    #view-player .play-btn { width: var(--ctl-size); min-width: var(--ctl-size); padding: 0; }
    #view-player .play-btn svg { width: 15px; height: 15px; }
    #view-player .loop-btn svg { width: 17px; height: 17px; }
    #view-player .goto-btn svg { width: 16px; height: 16px; }
    #view-player .volume-btn svg { width: 16px; height: 16px; }
    #view-player .sangati-nav-btn span { font-size: .86rem; }
    #view-player .speed-btn { font-size: .69rem; }
  }
  @media (max-width: 350px) {
    #view-player .player { --ctl-size: 28px; padding-left: 6px; padding-right: 6px; }
    #view-player .player-row-main { gap: 3px; }
    #view-player .play-btn { width: var(--ctl-size); min-width: var(--ctl-size); padding: 0; }
    #view-player .play-btn svg { width: 13px; height: 13px; }
    #view-classroom .classroom-player { --ctl-size: 32px; padding: 8px; }
    #view-classroom .classroom-player-row { gap: 4px; }
  }

  /* ---------- Test selection ----------
     Test opens on the same lyric-first chooser as Learn. A highlighted
     line and numbered sangati pill show where the next take will begin; the
     inline and transport record buttons both advance to the live recorder. */
  .record-select-btn {
    width: var(--ctl-size);
    height: var(--ctl-size);
    border: 2px solid var(--record-active);
    background: rgba(180, 57, 47, .26);
    color: var(--record-active);
    box-shadow: 0 0 0 3px rgb(var(--record-active-rgb) / .13);
  }
  .record-select-btn:hover { background: rgb(var(--record-active-rgb) / .22); border-color: var(--record-active); color: var(--record-active); }
  .record-select-btn svg { width: 18px; height: 18px; }
  /* The instruction's mic-check is the forward-navigation verb, not a
     recorder control on this chooser. Give it the same gold treatment and
     scale as the other primary instruction buttons. */
  .record-select-instruction[role="button"] { cursor: pointer; }
  .record-select-instruction[role="button"]:hover { background: rgb(var(--gold-standard-rgb) / .28); }
  .record-select-instruction[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .record-select-instruction .record-select-btn {
    border-color: var(--gold);
    background: rgb(var(--gold-standard-rgb) / .20);
    color: var(--gold-bright);
    box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / .12);
  }
  .record-select-instruction[role="button"]:hover .record-select-btn {
    border-color: var(--gold-bright);
    background: rgb(var(--gold-standard-rgb) / .28);
  }
  .record-select-instruction .record-select-btn img { width: 25px; height: 25px; display: block; }
  #view-record-select main .line.record-sheet-current {
    background: var(--active-bg);
    box-shadow: inset 0 0 0 1px var(--active-ring);
  }
  #view-record-select main .sangati-pills.record-sheet-row { display: flex; }
  /* Author display rules outrank the browser's default [hidden] rule. Keep
     filtered Test rows and sangatis truly absent when a region is locked. */
  #view-record-select main .sangati-pills.record-sheet-row[hidden],
  #view-record-select main .sangati-pills.record-sheet-row .pill[hidden] { display: none !important; }
  /* Each projected shloka pill row begins at that line's text start.
     flex-start keeps the numbered pills flowing with the same alignment
     on both Learn and Sing. */
  #view-classroom #classroomShloka .sangati-pills.classroom-sheet-row,
  #view-record-select #recordSelectShloka .sangati-pills.record-sheet-row {
    justify-content: flex-start;
  }
  #view-record-select .classroom-line-block { margin-bottom: 26px; }
  #view-record-select #recordSelectShloka .classroom-line-block { margin-bottom: 0; }
  #view-record-select .record-select-status {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .76rem;
    text-align: center;
  }
  #view-record-select .record-select-player-row .record-select-btn { margin: 0 2px; }
  @media (max-width: 480px) {
    .mode-action-nav { flex-wrap: wrap; justify-content: center; }
    .record-select-btn { width: var(--ctl-size); height: var(--ctl-size); }
  }

  /* ---------- Dedicated Test screen ----------
     Recording gets its own quiet stage: the current sangati remains the
     visual focus while the teacher track and mic run together. The controls
     change by state instead of accumulating — Test before a take, Stop +
     disabled review + Discard while live, then Review + Discard + Done. */
  .record-stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 28px 26px;
    text-align: center;
  }
  .song-title-main { display: block; }
  .song-title-english {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .56em;
    font-weight: 500;
    line-height: 1.25;
  }
  .song-title-english[hidden] { display: none; }
  .song-strip-copy { display: inline-flex; flex-direction: column; align-items: center; min-width: 0; }
  .record-title { margin: 0; font-size: 1.35rem; color: var(--gold-bright); line-height: 1.25; }
  #view-record:not(.is-recording):not(.is-playing) .record-stage {
    justify-content: space-evenly;
    gap: clamp(10px, 2.6vh, 26px);
  }
  .record-lyric-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
  }
  .record-waveform {
    display: block;
    width: min(520px, 86%);
    height: 42px;
    flex: 0 0 42px;
    margin: 0;
  }
  .record-instruction {
    margin: 0;
  }
  .record-instruction .record-instruction-icon { display: none; }
  .record-instruction[data-action="record"] .icon-instruction-record,
  .record-instruction[data-action="pause"] .icon-instruction-pause,
  .record-instruction[data-action="play"] .icon-instruction-play { display: block; }
  .record-instruction[data-action="record"] .start-play-glyph { background: var(--record-active); color: var(--ink); }
  .record-teacher-portrait {
    width: 112px;
    height: 112px;
    flex: none;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 50%;
    border: 3px solid rgb(var(--gold-standard-rgb) / .68);
    box-shadow: 0 0 0 2px rgba(46, 28, 8, .78);
  }
  #view-record.is-recording:not(.is-paused) .record-teacher-portrait {
    border-color: var(--gold-active);
    animation: recordPortraitPulse 1.55s ease-in-out infinite;
  }
  @keyframes recordPortraitPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgb(var(--gold-standard-rgb) / .48), 0 0 13px rgb(var(--gold-active-rgb) / .34); }
    50% { box-shadow: 0 0 0 8px rgb(var(--gold-standard-rgb) / .18), 0 0 26px rgb(var(--gold-active-rgb) / .68); }
  }
  .record-kicker { margin: 0 0 12px; color: var(--muted); font-size: .84rem; }
  .record-sangati-name {
    margin: 0 0 18px;
    color: var(--gold-bright);
    font-size: .9rem;
    font-weight: 650;
  }
  .record-lyric {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * 1.14);
    line-height: 1.75;
  }
  .record-lyric .w.lit {
    color: var(--gold-active);
    font-weight: inherit;
    text-shadow: 0 0 12px rgb(var(--gold-active-rgb) / .42);
    transform: scale(1.05);
  }
  .record-sangati-pills {
    min-height: 30px;
    margin: 9px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .record-sangati-pills .pill {
    cursor: default;
    pointer-events: none;
  }
  .record-next-lyric {
    max-width: 720px;
    min-height: 1.55em;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * .72);
    line-height: 1.55;
    opacity: .82;
  }
  .record-next-lyric[hidden] { display: block; visibility: hidden; }
  .record-live-indicator {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    color: var(--record-active);
    font-size: .9rem;
    font-weight: 650;
  }
  .record-live-indicator > span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: var(--record-active);
    box-shadow: 0 0 0 4px rgb(var(--record-active-rgb) / .18), 0 0 18px rgb(var(--record-active-rgb) / .72);
    animation: recordGlow 1.25s ease-in-out infinite;
  }
  .record-live-indicator > span:first-child::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgb(var(--record-active-rgb) / .7);
    border-radius: 50%;
    animation: recordRipple 1.25s ease-out infinite;
  }
  #view-record.is-recording .record-live-indicator { display: inline-flex; }
  #view-record.is-paused .record-live-indicator { color: var(--muted); }
  #view-record.is-paused .record-live-indicator > span:first-child {
    animation: none;
    background: var(--record-active);
    box-shadow: 0 0 0 4px rgb(var(--gold-standard-rgb) / .12);
  }
  #view-record.is-paused .record-live-indicator > span:first-child::after { display: none; }
  @keyframes recordGlow {
    0%, 100% { transform: scale(.86); box-shadow: 0 0 0 3px rgb(var(--record-active-rgb) / .18), 0 0 12px rgb(var(--record-active-rgb) / .5); }
    50% { transform: scale(1); box-shadow: 0 0 0 6px rgb(var(--record-active-rgb) / .12), 0 0 26px rgb(var(--record-active-rgb) / .9); }
  }
  @keyframes recordRipple {
    from { opacity: .8; transform: scale(.72); }
    to { opacity: 0; transform: scale(1.45); }
  }
  .record-controls-wrap {
    flex: none;
    padding: 10px 28px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
  }
  .record-controls {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--frame-maroon);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-standard-rgb) / .55), 0 8px 22px rgba(0,0,0,.35);
  }
  .record-controls .record-ticker {
    margin: 0 2px 10px;
    padding-bottom: 7px;
  }
  .record-controls .record-ticker .ticker-unit { font-size: .86rem; }
  .record-control-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  #view-record .record-control-actions > button,
  #view-record .record-control-actions > .pop-anchor,
  #view-record .record-control-actions > .pitch-readout { flex: 0 0 34px; }
  #view-record .record-control-actions > button,
  #view-record .record-control-actions > .pop-anchor > button {
    width: 34px;
    height: 34px;
  }
  #view-record .record-control-actions > .pitch-readout {
    min-width: 34px;
    text-align: center;
  }
  .rec-pause-btn, .rec-stop-btn {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--frame-border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .rec-pause-btn:hover, .rec-stop-btn:hover {
    background: var(--hover-bg);
    border-color: var(--gold);
    color: var(--gold-bright);
  }
  .rec-pause-btn:focus-visible, .rec-stop-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .rec-pause-btn svg, .rec-stop-btn svg { width: 17px; height: 17px; display: block; }
  .rec-pause-btn .icon-resume { display: none; }
  .rec-pause-btn.paused {
    background: rgb(var(--gold-standard-rgb) / .16);
    border-color: var(--gold);
    color: var(--gold-bright);
  }
  .rec-pause-btn.paused .icon-pause-record { display: none; }
  .rec-pause-btn.paused .icon-resume { display: block; }
  .rec-pause-btn:disabled, .rec-stop-btn:disabled { opacity: .32; cursor: not-allowed; }
  /* The Test player keeps every recording action in one stable control map.
     Unavailable actions stay visible but disabled, so replay, download,
     share, and trash never shift while a take moves through its states. */
  #view-record .rec-btn,
  #view-record .rec-pause-btn,
  #view-record .rec-stop-btn,
  #view-record .rec-play-btn,
  #view-record .rec-download-btn,
  #view-record .rec-share-btn,
  #view-record .rec-discard-btn { display: inline-flex; }
  @media (max-width: 480px) {
    .record-stage { padding: 20px 16px 16px; }
    .record-teacher-portrait { width: 94px; height: 94px; margin-bottom: 8px; }
    .record-waveform { width: min(420px, 92%); height: 34px; flex-basis: 34px; }
    .record-lyric { font-size: calc(var(--lyric-size) * var(--lyric-scale, 1)); }
    .record-next-lyric { margin-top: 14px; font-size: calc(var(--lyric-size) * var(--lyric-scale, 1) * .68); }
    .record-controls-wrap { padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
    .record-controls {
      min-height: 94px;
      padding: 9px 10px;
    }
    .record-control-actions { gap: 6px; flex-wrap: nowrap; }
    #view-record .record-control-actions > button,
    #view-record .record-control-actions > .pop-anchor,
    #view-record .record-control-actions > .pitch-readout { flex-basis: 32px; }
    #view-record .record-control-actions > button,
    #view-record .record-control-actions > .pop-anchor > button {
      width: 32px;
      height: 32px;
    }
    #view-record .record-control-actions > .pitch-readout { min-width: 32px; }
  }
  @media (max-width: 360px) {
    .record-control-actions { gap: 4px; }
    #view-record .record-control-actions > button,
    #view-record .record-control-actions > .pop-anchor,
    #view-record .record-control-actions > .pitch-readout { flex-basis: 29px; }
    #view-record .record-control-actions > button,
    #view-record .record-control-actions > .pop-anchor > button {
      width: 29px;
      height: 29px;
    }
    #view-record .record-control-actions > .pitch-readout {
      min-width: 29px;
      font-size: .85rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .record-live-indicator > span:first-child,
    .record-live-indicator > span:first-child::after,
    #view-record.is-recording:not(.is-paused) .record-teacher-portrait { animation: none; }
    #view-record.is-recording:not(.is-paused) .record-teacher-portrait {
      box-shadow: 0 0 0 5px rgb(var(--gold-standard-rgb) / .36), 0 0 20px rgb(var(--gold-active-rgb) / .42);
    }
  }

  /* ---------- Optional passcode gate ---------- */
  .passcode-active .frame { visibility: hidden; }
  .passcode-gate[hidden] { display: none; }
  .passcode-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    background: var(--umber);
    color: var(--ink);
  }
  .passcode-panel {
    width: min(100%, 390px);
    padding: 28px 24px;
    border-top: 1px solid var(--gold-dim);
    border-bottom: 1px solid var(--gold-dim);
    text-align: center;
  }
  .passcode-panel h1 {
    margin: 0 0 8px;
    color: var(--gold-bright);
    font-size: clamp(1.55rem, 5vw, 2rem);
    line-height: 1.25;
  }
  .passcode-panel p { margin: 0; color: var(--muted); line-height: 1.5; }
  .passcode-form { margin-top: 20px; }
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .passcode-field {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    background: rgba(30, 16, 5, .44);
    color: var(--ink);
    font: 600 1rem/1.2 var(--type);
    text-align: center;
    letter-spacing: .08em;
  }
  .passcode-field:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
  .passcode-submit {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--gold);
    color: var(--umber-shadow);
    font: 700 .92rem/1.2 "Noto Serif", serif;
  }
  .passcode-error { min-height: 1.35em; margin-top: 10px !important; color: var(--gold-bright) !important; font-size: .86rem; }

  /* ---------- Quiz ----------
     A calm, text-first check-in: one question at a time, no timer or public
     score. The transcript stays in memory until this page is closed or a new
     session begins; only an explicit Download or Share leaves the session. */
  .quiz-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  .quiz-main {
    width: min(100%, 610px);
    margin: 0 auto;
    padding: 30px 28px 34px;
  }
  .quiz-panel { min-height: 100%; }
  .quiz-panel[hidden] { display: none; }
  .quiz-kicker {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 20px;
    color: var(--muted);
    font: 600 .82rem/1.35 "Noto Serif", serif;
    font-variant-numeric: tabular-nums;
  }
  .quiz-level { color: var(--gold-bright); text-align: right; }
  .quiz-question {
    margin: 0 0 24px;
    color: var(--ink);
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 650;
    line-height: 1.42;
  }
  /* Lyric fragments in Quiz are canonical song lines, not fixed strings.
     Their script is rendered from the shared lyric language and their size
     follows the same app-wide scale as every other lyric-bearing screen. */
  .quiz-prompt-copy { display: block; }
  .quiz-lyric {
    font-family: var(--type);
    font-size: calc(1.16rem * var(--lyric-scale, 1));
    font-weight: 600;
    line-height: 1.58;
  }
  .quiz-question .quiz-lyric {
    display: block;
    margin-top: 9px;
    color: var(--gold-bright);
    font-size: calc(1.34rem * var(--lyric-scale, 1));
  }
  .quiz-option .quiz-lyric { display: block; }
  .quiz-feedback .quiz-lyric,
  .quiz-transcript-answer .quiz-lyric {
    display: block;
    margin-top: 4px;
  }
  .quiz-sequence { display: block; }
  .quiz-sequence-line { display: inline; }
  .quiz-sequence-arrow { padding: 0 .34em; color: var(--gold-dim); font-family: "Noto Serif", serif; }
  .quiz-options {
    display: grid;
    gap: 10px;
  }
  .quiz-option {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--line-border);
    border-radius: 9px;
    background: rgba(46, 28, 8, .18);
    color: var(--ink);
    font: 600 .94rem/1.45 var(--type);
    text-align: left;
    overflow-wrap: anywhere;
  }
  .quiz-option:hover:not(:disabled) { border-color: var(--gold); background: var(--hover-bg); }
  .quiz-option:focus-visible, .quiz-action:focus-visible, .quiz-icon-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  .quiz-option:disabled { cursor: default; opacity: 1; }
  .quiz-option.is-correct {
    border-color: var(--gold-active);
    background: rgb(var(--gold-standard-rgb) / .22);
    box-shadow: inset 0 0 0 1px rgb(var(--gold-active-rgb) / .42);
  }
  .quiz-option.is-chosen-wrong {
    border-style: dashed;
    border-color: var(--gold-dim);
    color: var(--gold-dim);
  }
  .quiz-feedback {
    min-height: 1.5em;
    margin: 17px 0 0;
    color: var(--gold-bright);
    font-size: .94rem;
    line-height: 1.5;
  }
  .quiz-explain-wrap {
    position: relative;
    display: inline-flex;
  }
  .quiz-explain-note {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 4;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(220px, 72vw);
    padding: 6px 9px;
    border: 1px solid var(--line-border);
    border-radius: 7px;
    background: var(--umber-shadow);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .4);
    color: var(--gold-bright);
    font: 600 .74rem/1.3 "Noto Serif", serif;
    pointer-events: none;
  }
  .quiz-explain-note::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: -4px 0 0 -4px;
    transform: rotate(45deg);
    border-right: 1px solid var(--line-border);
    border-bottom: 1px solid var(--line-border);
    background: var(--umber-shadow);
  }
  .quiz-explain-note[hidden] { display: none; }
  .quiz-explanation {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-top: 1px solid var(--line-border);
    border-bottom: 1px solid var(--line-border);
    color: var(--ink);
    font: 500 .9rem/1.58 "Noto Serif", serif;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .quiz-explanation[hidden] { display: none; }
  .quiz-explanation.is-status { color: var(--muted); }
  .quiz-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .quiz-action {
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: transparent;
    color: var(--gold-bright);
    font: 700 .88rem/1.2 "Noto Serif", serif;
  }
  .quiz-action.primary { background: var(--gold); color: var(--umber-shadow); }
  .quiz-action:hover:not(:disabled):not(.is-unavailable) { background: var(--hover-bg); }
  .quiz-action.primary:hover:not(:disabled):not(.is-unavailable) { background: var(--gold-active); }
  .quiz-action:disabled,
  .quiz-action.is-unavailable { color: var(--gold-dim); border-color: var(--line-border); opacity: .48; cursor: not-allowed; }
  .quiz-action[hidden] { display: none; }
  .quiz-choice-panel {
    padding: 28px 0 10px;
    text-align: center;
  }
  .quiz-choice-panel h1,
  .quiz-transcript-head h1 {
    margin: 0 0 9px;
    color: var(--gold-bright);
    font-size: 1.55rem;
    line-height: 1.3;
  }
  .quiz-choice-panel p,
  .quiz-transcript-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
  }
  .quiz-count-field {
    width: min(100%, 310px);
    margin: 24px auto 0;
    display: grid;
    gap: 8px;
    color: var(--ink);
    font: 650 .9rem/1.35 "Noto Serif", serif;
    text-align: left;
  }
  .quiz-count-control {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .quiz-count-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--umber-shadow);
    color: var(--ink);
    font: 650 1rem/1.2 "Noto Serif", serif;
  }
  .quiz-count-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .global-setup-pop .quiz-count-field {
    width: 100%;
    margin: 0;
  }
  .global-setup-pop .quiz-count-select { min-height: 40px; }
  .quiz-choice-panel .quiz-actions { justify-content: center; }
  .quiz-transcript-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-border);
  }
  .quiz-score { color: var(--ink) !important; font-weight: 650; }
  .quiz-transcript-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
  }
  .quiz-transcript-item {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line-border);
  }
  .quiz-transcript-item:last-child { border-bottom: 0; }
  .quiz-transcript-number {
    margin: 0 0 5px;
    color: var(--gold-bright);
    font: 700 .78rem/1.3 "Noto Serif", serif;
  }
  .quiz-transcript-question { margin: 0 0 8px; color: var(--ink); font-weight: 650; line-height: 1.5; }
  .quiz-transcript-answer { margin: 3px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
  .quiz-transcript-answer strong { color: var(--ink); font-weight: 650; }
  .quiz-transcript-result { color: var(--gold-bright); }
  .quiz-share-status { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
  .quiz-footer {
    flex: none;
    min-height: 54px;
    padding: 7px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line-border);
    background: var(--panel);
  }
  .quiz-footer-note { color: var(--muted); font-size: .75rem; line-height: 1.3; text-align: right; }
  .quiz-title-meaning {
    margin: 7px 0 0;
    color: var(--gold-dim);
    font-size: .93rem;
    line-height: 1.45;
    text-align: center;
  }
  @media (max-width: 480px) {
    .quiz-main { padding: 22px 16px 26px; }
    .quiz-kicker { margin-bottom: 16px; }
    .quiz-question { margin-bottom: 20px; font-size: 1.3rem; }
    .quiz-option { min-height: 50px; padding: 11px 12px; font-size: .9rem; }
    .quiz-footer { padding: 7px 16px; }
    .quiz-footer-note { max-width: 52%; }
  }

  /* Cross-platform interaction and accessibility hardening. Visual control
     geometry stays compact, while an invisible 48px hit plane meets Android
     and iOS guidance. Sangati centers are spaced at least 48px apart so the
     expanded hit planes never overlap. */
  button { position: relative; touch-action: manipulation; }
  button:not(.lang-btn)::after,
  button.lang-btn::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
  }
  .sangati-pills { gap: 18px; }

  /* Safe-area and dynamic-viewport ownership: the title bar clears a notch,
     and the fixed bottom build stamp clears the home indicator/navigation
     bar. svh is the stable fallback while dvh follows browser chrome. */
  body { height: 100svh; height: 100dvh; }
  .screen-topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .copyright { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }

  /* Dimmed states stay distinguishable without lowering text contrast.
     Dashed outlines and endpoint bars carry state in addition to brightness. */
  .line.digression,
  #view-landing .line.unsung,
  .line.is-unselected,
  .line.is-unselected.digression,
  .sangati-pills .pill.is-unselected,
  .sangati-pills.armed .pill,
  .sangati-count,
  .record-live-indicator,
  .loop-btn.loop-off,
  .loop-btn.loop-off:hover { opacity: 1; }
  .line.is-unselected { color: var(--gold-dim); }
  .sangati-pills .pill.is-unselected,
  .sangati-pills.armed .pill,
  .loop-btn.loop-off { border-style: dashed; }
  .line.starred::before { opacity: 1; }
  .top-shortcut-current,
  .tool-btn.bulb-on,
  .loop-btn.loop-sel,
  .ctl-toggle.active,
  .setup-toggle-btn.active {
    outline: 2px solid var(--gold-active);
    outline-offset: 2px;
  }

  /* Long text may grow to 200% without being ellipsized or clipped. Player
     height is measured in JS, so wrapped labels can grow vertically. */
  #songTitleText {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .screen-leading, .head-actions, .mode-instruction, .setup-menu-section,
  .setup-control-with-reset, .record-sangati-name, .rec-status,
  .home-summary, .meaning-text, .pop-help li { min-width: 0; overflow-wrap: anywhere; }
  .mode-instruction { flex-wrap: wrap; }
  .global-setup-pop, .help-pop { max-width: min(92vw, 430px); max-height: min(78dvh, 620px); overflow: auto; }
  .search-input { font-size: max(1rem, 16px); }

  @media (hover: hover) {
    button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
  }

  @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;
    }
    .line-text .w.lit,
    .meaning-original .w.lit,
    .record-lyric .w.lit { text-shadow: none; }
    /* Reduced Motion keeps both the active word and active lyric line at
       their resting scale; color and outline continue to carry state. */
    .line.active,
    .meaning-line.active,
    .line-text .w.lit,
    .meaning-original .w.lit,
    .record-lyric .w.lit { transform: none !important; }
  }

  @media (forced-colors: active) {
    .frame, .frame::after, .screen-topbar { border-color: CanvasText; }
    .screen-topbar { box-shadow: inset 0 -1px CanvasText; }
    button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
    .line.seekable:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
    .top-shortcut-current, .tool-btn.bulb-on, .loop-btn.loop-sel,
    .line.active, .pill.lit { outline: 2px solid Highlight !important; }
    .pill.is-anchor { border-left: 5px solid Highlight !important; }
    .pill.is-end { border-right: 5px solid Highlight !important; }
  }

  /* Temporary iPhone-visible audio trace. This intentionally sits outside
     the app frame so it cannot change player geometry or audio behavior. */
  .audio-diagnostic {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 220;
    width: min(350px, calc(100vw - 24px));
    max-height: min(60dvh, 520px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #79d7df;
    border-radius: 7px;
    background: rgba(13, 24, 27, 0.96);
    color: #e8fdff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    /* The trace is read-only and auto-scrolls. Let taps pass through its body
       so it never blocks the song/player underneath; only Dismiss is active. */
    pointer-events: none;
  }
  .audio-diagnostic[hidden] { display: none; }
  .audio-diagnostic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(121, 215, 223, 0.55);
    color: #aaf7ff;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .audio-diagnostic-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
  }
  .audio-diagnostic-events,
  .audio-diagnostic-test,
  .audio-diagnostic-copy,
  .audio-diagnostic-share,
  .audio-diagnostic-close {
    min-height: 28px;
    flex: none;
    border: 1px solid rgba(170, 247, 255, 0.65);
    border-radius: 4px;
    background: rgba(170, 247, 255, 0.10);
    color: #e8fdff;
    font: inherit;
    pointer-events: auto;
  }
  .audio-diagnostic-events,
  .audio-diagnostic-test,
  .audio-diagnostic-copy,
  .audio-diagnostic-share {
    padding: 2px 7px;
    font-size: 0.61rem;
    font-weight: 800;
  }
  .audio-diagnostic-nav .audio-diagnostic-test {
    display: block;
    margin: 5px 0 2px;
  }
  .audio-diagnostic-close {
    width: 28px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
  }
  .audio-diagnostic-events:focus-visible,
  .audio-diagnostic-test:focus-visible,
  .audio-diagnostic-copy:focus-visible,
  .audio-diagnostic-share:focus-visible,
  .audio-diagnostic-close:focus-visible { outline: 2px solid #aaf7ff; outline-offset: -2px; }
  .audio-diagnostic-nav,
  .audio-diagnostic-gate {
    flex: none;
    padding: 6px 8px 7px;
    border-bottom: 1px solid rgba(121, 215, 223, 0.38);
    background: rgba(24, 49, 53, 0.96);
    color: #e8fdff;
  }
  .audio-diagnostic-gate { background: rgba(18, 39, 43, 0.96); }
  .audio-diagnostic-nav strong,
  .audio-diagnostic-gate strong {
    display: block;
    margin-bottom: 3px;
    color: #aaf7ff;
    font-size: 0.61rem;
    letter-spacing: 0.06em;
  }
  .audio-diagnostic-nav pre,
  .audio-diagnostic-gate pre {
    margin: 0;
    font: inherit;
    font-size: 0.57rem;
    line-height: 1.32;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .audio-diagnostic-log {
    display: none;
    margin: 0;
    padding: 7px 8px 9px;
    overflow: auto;
    overscroll-behavior: contain;
    color: #e8fdff;
    font-size: 0.62rem;
    line-height: 1.38;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
  }
  .audio-diagnostic.is-expanded .audio-diagnostic-log { display: block; }
  @media (max-width: 600px) {
    /* Keep the diagnostic action buttons away from the anchored player
       controls that the reproduction needs. Its body remains tap-through. */
    .audio-diagnostic {
      top: calc(env(safe-area-inset-top) + 70px);
      bottom: auto;
    }
  }

  /* ---------- Performance lyric sheet ----------
     Lyrics is the quiet front door: an unboxed, typeset reference sheet.
     Counts are text at the line edge rather than sangati bubbles, so the
     page reads like music copy instead of a player. */
  #view-lyrics { background: var(--card); }
  .lyric-sheet-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
  .lyric-sheet {
    width: min(100%, 610px);
    margin: 0 auto;
    padding: clamp(20px, 4vh, 40px) 24px 44px;
  }
  .lyric-sheet-head { text-align: center; }
  .lyric-sheet-art {
    width: min(100%, 330px);
    margin: 0 auto clamp(24px, 5vh, 34px);
    border-color: var(--gold-standard);
    border-radius: 8px;
  }
  .lyric-sheet-title {
    max-width: none;
    margin: 0 auto;
    color: var(--gold-active);
    font-size: clamp(1.15rem, 5vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    padding-top: 4px;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .lyric-sheet-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin: 13px 0 0;
    color: var(--gold-dim);
    font: 500 .92rem/1.45 "Noto Serif", serif;
  }
  .lyric-sheet-meta span + span::before {
    content: "·";
    margin-right: 15px;
    color: var(--gold-standard);
  }
  .sheet-listen-action {
    min-height: 42px;
    margin: 24px auto 0;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--gold-standard);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-active);
    font: 700 .9rem/1.2 "Noto Serif", serif;
  }
  .sheet-listen-action:hover { background: var(--hover-bg); }
  .sheet-listen-action:focus-visible { outline: 2px solid var(--gold-active); outline-offset: 3px; }
  .sheet-listen-action svg { width: 19px; height: 19px; }
  .lyric-sheet-body { margin-top: clamp(20px, 4vh, 32px); }
  .sheet-section { padding: 0 0 10px; }
  .sheet-section + .sheet-section {
    padding-top: 10px;
    border-top: 1px solid rgb(var(--gold-standard-rgb) / .32);
  }
  .sheet-section-label {
    margin: 0 0 6px;
    color: var(--gold-standard);
    font: 600 .8rem/1.3 "Noto Serif", serif;
  }
  .sheet-lyric-row {
    display: block;
    margin: 0 0 7px;
  }
  .sheet-lyric-row:last-child { margin-bottom: 0; }
  .sheet-lyric-text {
    min-width: 0;
    color: var(--ink);
    font-family: var(--type);
    font-size: calc(clamp(1.375rem, 5.125vw, 1.85rem) * var(--lyric-scale, 1));
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: color .16s ease, background-color .16s ease;
  }
  .sheet-lyric-row.place-marked .sheet-lyric-text {
    color: var(--gold-active);
    background: rgb(var(--gold-standard-rgb) / .18);
    box-shadow: 0 0 0 .16em rgb(var(--gold-standard-rgb) / .18);
  }
  .sheet-lyric-row.digression .sheet-lyric-text {
    color: var(--gold-active);
    opacity: .78;
    font-size: calc(clamp(1.25rem, 4.75vw, 1.675rem) * var(--lyric-scale, 1));
    font-style: italic;
  }
  .sheet-lyric-row.digression.place-marked .sheet-lyric-text { color: var(--gold-active); opacity: 1; }
  .sheet-unsung-note {
    display: inline-block;
    margin: -7px 0 13px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgb(var(--record-active-rgb) / .10);
    color: var(--record-active);
    font: 600 .76rem/1.35 "Noto Serif", serif;
    font-style: normal;
  }
  .sheet-unsung-section .sheet-lyric-text { color: var(--muted); opacity: .62; }
  .sheet-sangati-count {
    display: inline-block;
    margin-left: .6em;
    color: var(--gold-standard);
    font: 700 .78rem/1 "Noto Serif", serif;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
    white-space: nowrap;
  }
  .performance-exit {
    display: none;
    position: fixed;
    z-index: 120;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgb(46 28 8 / .62);
    color: var(--gold-dim);
  }
  .performance-exit svg { width: 17px; height: 17px; }
  .performance-exit:focus-visible { outline: 2px solid var(--gold-active); outline-offset: 2px; }
  html.performance-mode body { padding: 0; background: var(--card); }
  html.performance-mode .frame {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html.performance-mode .frame::after,
  html.performance-mode #view-lyrics .screen-topbar,
  html.performance-mode #view-lyrics #sheetSearchBar,
  html.performance-mode #view-lyrics .sheet-listen-action,
  html.performance-mode #view-lyrics .copyright { display: none; }
  html.performance-mode #view-lyrics .performance-exit { display: inline-flex; }
  html.performance-mode #view-lyrics .lyric-sheet { padding-top: max(38px, env(safe-area-inset-top)); }
  .performance-mode-btn[aria-pressed="true"] {
    border-color: var(--gold-active);
    background: var(--gold-standard);
    color: var(--umber-shadow);
  }
  @media (max-width: 480px) {
    .lyric-sheet { padding: 18px 14px 36px; }
    .lyric-sheet-meta { gap: 3px 10px; }
    .lyric-sheet-meta span + span::before { margin-right: 10px; }
    .lyric-sheet-body { margin-top: 20px; }
    .sheet-section { padding-bottom: 10px; }
    .sheet-section + .sheet-section { padding-top: 10px; }
    .sheet-lyric-row { margin-bottom: 7px; }
    .home-body { padding: 4px 14px 0; }
  }

  /* ---- Oct 9–10 Additions: Verse Insights, Raga Lab, Concert View & Setup Enhancements ---- */
  :root {
    --cream: var(--ink);
    --cream-dim: var(--muted);
  }
  .study-feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
  }
  .study-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.16), rgb(var(--gold-standard-rgb) / 0.06)),
      var(--panel);
    color: var(--gold-bright);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .study-feature-card:hover, .study-feature-card:focus-visible {
    border-color: var(--gold-bright);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.24), rgb(var(--gold-standard-rgb) / 0.10)),
      var(--panel);
    transform: translateY(-1px);
  }
  .study-feature-card-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-weight: 700;
  }
  .study-feature-card-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ink);
  }
  .study-feature-card-sub {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
  }
  .explore-verse-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-border);
    background: rgb(var(--gold-standard-rgb) / 0.14);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .explore-verse-link:hover, .explore-verse-link:focus-visible {
    background: rgb(var(--gold-standard-rgb) / 0.24);
    border-color: var(--gold-bright);
  }
  /* Verse Insight View (#view-insight) */
  #view-insight, #view-ragalab, #view-concert {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #view-insight[hidden], #view-ragalab[hidden], #view-concert[hidden] {
    display: none !important;
  }
  .insight-scroll, .ragalab-scroll, .concert-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px;
  }
  .insight-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    flex-shrink: 0;
  }
  #view-insight .screen-leading, #view-ragalab .screen-leading, #view-concert .screen-leading {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  #view-insight .screen-page-name, #view-ragalab .screen-page-name, #view-concert .screen-page-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .insight-art-card {
    position: relative;
    margin: 0 auto 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--line-border);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: zoom-in;
  }
  .insight-art-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .insight-header-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    margin-bottom: 14px;
  }
  .insight-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-weight: 700;
    margin: 0 0 4px;
  }
  .insight-verse-lines {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.65;
    margin: 6px 0 8px;
  }
  .insight-lyric-word {
    display: inline-block;
    padding: 1px 4px;
    margin: 0 1px;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
  .insight-lyric-word[data-has-audio="1"] {
    cursor: pointer;
  }
  .insight-lyric-word.lit {
    background: rgb(var(--gold-active-rgb) / 0.28);
    color: var(--gold-bright);
    box-shadow: 0 0 0 1px rgb(var(--gold-active-rgb) / 0.6);
  }
  .insight-verse-translation {
    font-size: 0.92rem;
    color: var(--muted);
    font-style: italic;
    margin: 0 0 10px;
    line-height: 1.45;
  }
  .insight-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .insight-section {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
  }
  .insight-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-bright);
    margin: 0 0 10px;
    font-weight: 700;
  }
  .insight-words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 8px;
  }
  .insight-word-card {
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid var(--line-border);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.12), rgb(var(--gold-standard-rgb) / 0.04)),
      var(--card);
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
  }
  .insight-word-card[data-has-audio="1"] {
    cursor: pointer;
  }
  .insight-word-card.lit {
    border-color: var(--gold-bright);
    background:
      linear-gradient(180deg, rgb(var(--gold-active-rgb) / 0.34), rgb(var(--gold-standard-rgb) / 0.18)),
      var(--card);
    box-shadow: 0 0 0 1.5px var(--gold-bright), 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
  }
  .insight-word-term {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: 3px;
  }
  .insight-word-gloss {
    font-size: 0.8rem;
    color: var(--ink);
    line-height: 1.35;
  }
  .insight-grammar-card {
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 3px solid var(--gold);
    border-top: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    border-right: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    border-bottom: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    background: var(--card);
    margin-bottom: 8px;
  }
  .insight-grammar-card:last-child { margin-bottom: 0; }
  .insight-grammar-head {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: 4px;
  }
  .insight-body-p {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.58;
    margin: 0 0 10px;
  }
  .insight-body-p:last-child { margin-bottom: 0; }
  .insight-nav-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .insight-nav-row > :only-child {
    grid-column: 1 / -1;
  }
  .insight-nav-row .insight-back-btn,
  .insight-nav-row .explore-verse-link {
    width: 100%;
    min-height: 38px;
    height: auto;
    margin-top: 0;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    box-sizing: border-box;
  }
  /* Raga Lab (#view-ragalab) */
  .ragalab-swara-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0 14px;
  }
  .ragalab-swara-pill {
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.84rem;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .ragalab-swara-pill.active, .ragalab-swara-pill:hover {
    background: var(--gold);
    color: #1f0e05;
    border-color: var(--gold-bright);
  }
  .ragalab-piano {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    margin: 10px 0 14px;
    padding: 10px;
    border-radius: 12px;
    background: var(--umber-deep);
    border: 1px solid var(--line-border);
  }
  .ragalab-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 74px;
    padding: 6px 2px;
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(216, 168, 72, 0.35);
    background: rgba(255, 248, 231, 0.92);
    color: #241107;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }
  .ragalab-key.black-key {
    background: #2b1509;
    color: var(--cream);
    min-height: 56px;
  }
  .ragalab-key.in-raga {
    border-bottom: 4px solid var(--gold);
  }
  .ragalab-key.active {
    background: var(--gold-bright) !important;
    color: #1c0d05 !important;
  }
  .ragalab-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
  }
  .ragalab-actions-row .insight-audio-btn {
    width: 100%;
    min-height: 36px;
    height: auto;
    padding: 6px 8px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.78rem;
    box-sizing: border-box;
  }
  .ragalab-guide-btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 8px;
    margin: 8px 0;
  }
  .ragalab-guide-btn-row .insight-audio-btn {
    width: 100%;
    min-height: 38px;
    height: auto;
    padding: 7px 12px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    box-sizing: border-box;
  }
  .ragalab-Download-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .ragalab-Download-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    height: auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: rgb(var(--gold-standard-rgb) / 0.14);
    color: var(--gold-bright);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
  }
  .ragalab-Download-links a:hover {
    border-color: var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.22);
  }
  /* Concert View (#view-concert) */
  .concert-hero-banner {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--line-border);
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  .concert-hero-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .concert-composer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    margin-bottom: 14px;
  }
  .concert-composer-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--gold);
    flex-shrink: 0;
  }
  /* Setup UI Language */
  .setup-ui-lang-row {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(68px, 1fr));
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    overflow: hidden;
    background: var(--panel);
    box-sizing: border-box;
  }
  .setup-ui-lang-btn {
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--cream-dim);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
  }
  .setup-ui-lang-btn + .setup-ui-lang-btn {
    border-left: 1px solid var(--line-border);
  }
  .setup-ui-lang-btn.active {
    background: var(--gold);
    color: #1f0e05;
  }
  /* Page-Specific Help & Full User Guide Link */
  .user-guide[hidden] {
    display: none !important;
  }
  .page-help-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .page-help-seq-badge,
  .page-help-inline-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .page-help-seq-badge {
    background: rgba(255, 240, 210, 0.06);
    border: 1px solid var(--line-border);
    color: var(--ink);
  }
  .page-help-inline-link {
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    cursor: pointer;
  }
  .page-help-inline-link:hover {
    background: rgb(var(--gold-standard-rgb) / 0.26);
    border-color: var(--gold-bright);
  }
  .page-help-trail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 6px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 240, 210, 0.04);
    border: 1px solid var(--line-border);
    box-sizing: border-box;
  }
  .page-help-trail-step {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
    background: rgba(255, 240, 210, 0.04);
    border: 1px solid var(--line-border);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }
  .page-help-trail-step.current {
    background: var(--gold);
    color: #1f0e05;
    font-weight: 700;
    border-color: var(--gold-bright);
  }
  .page-help-trail-step.parent-step {
    background: rgb(var(--gold-standard-rgb) / 0.18);
    border-color: var(--gold);
    color: var(--gold-bright);
    font-weight: 700;
  }
  .page-help-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
  }
  .page-help-cta-btn:hover {
    background: rgb(var(--gold-standard-rgb) / 0.26);
    border-color: var(--gold-bright);
  }
  /* Fix search bar horizontal padding & prevent <input type="search"> overflow on iOS Safari */
  .search-bar,
  .search-bar.sticky,
  #sheetSearchBar {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px 14px 6px !important;
  }
  .home-body > .search-bar.sticky {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .search-input {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 7px 14px;
  }
  .search-nav,
  .search-close {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  html.performance-mode #view-lyrics .learning-next {
    display: none;
  }
  .classroom-teach-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--umber-shadow);
  }
  .drill-start-instruction .instruction-student-icon {
    width: 16px;
    height: 16px;
    filter: none;
    color: var(--umber-shadow);
  }
  .pitch-gender-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    overflow: hidden;
    height: 32px;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .pitch-gender-btn {
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .pitch-gender-btn + .pitch-gender-btn {
    border-left: 1px solid var(--line-border);
  }
  .pitch-gender-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .pitch-gender-btn.active {
    background: var(--gold);
    color: #1f0e05;
  }
  .pitch-gender-btn:hover:not(.active) {
    background: rgba(232, 194, 102, 0.16);
  }
  .global-setup-pop .pitch-control-row-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .global-setup-pop .pitch-control-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .global-setup-pop .pitch-ctl {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 32px;
    padding: 0 3px !important;
    border: 1px solid var(--line-border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-sizing: border-box;
  }
  .global-setup-pop .pitch-ctl .stepper-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 0;
    background: transparent;
    color: var(--gold-bright);
    font-size: 1.05rem;
    box-shadow: none;
  }
  .global-setup-pop .pitch-ctl .pitch-count {
    display: none !important;
  }
  .global-setup-pop .pitch-ctl .pitch-note {
    border-left: 0 !important;
    min-width: 3.2em;
    padding: 0 4px;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
  }
  .pitch-help-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: transparent;
    color: var(--gold-bright);
    font: 700 0.82rem/1 "Noto Serif", serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .pitch-help-btn:hover,
  .pitch-help-btn[aria-expanded="true"] {
    background: rgba(232, 194, 102, 0.22);
    border-color: var(--gold);
  }
  .pitch-register-note {
    margin: 6px 0 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .pitch-register-note[hidden] {
    display: none !important;
  }

  /* ---- Harmonium Accompaniment & Shared Singer/Harmonium Mix Controls ---- */
  .harmonium-setup-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .setup-harmonium-vol-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
  }
  .setup-harmonium-vol-row {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .setup-harmonium-vol-label,
  .setup-harmonium-vol-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
  }
  .setup-vol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--gold-bright);
    flex-shrink: 0;
  }
  .setup-vol-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  .setup-harmonium-vol-row input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--gold);
    cursor: pointer;
  }
  .setup-harmonium-vol-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-bright);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ragalab-mix-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line-border);
  }
  .ragalab-mix-channel {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
  }
  .ragalab-mix-channel label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cream);
    white-space: nowrap;
  }
  .ragalab-mix-channel label svg,
  #ragaLabDuetBtn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--gold-bright);
  }
  .ragalab-mix-channel input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--gold);
    cursor: pointer;
  }
  .ragalab-mix-val {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--gold-bright);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }


  /* ---- Oct 9–10 Additions: Verse Insights, Raga Lab, Concert View & Setup Enhancements ---- */
  :root {
    --cream: var(--ink);
    --cream-dim: var(--muted);
  }
  .study-feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
  }
  .study-feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.16), rgb(var(--gold-standard-rgb) / 0.06)),
      var(--panel);
    color: var(--gold-bright);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .study-feature-card:hover, .study-feature-card:focus-visible {
    border-color: var(--gold-bright);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.24), rgb(var(--gold-standard-rgb) / 0.10)),
      var(--panel);
    transform: translateY(-1px);
  }
  .study-feature-card-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-weight: 700;
  }
  .study-feature-card-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--ink);
  }
  .study-feature-card-sub {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
  }
  .explore-verse-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-border);
    background: rgb(var(--gold-standard-rgb) / 0.14);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .explore-verse-link:hover, .explore-verse-link:focus-visible {
    background: rgb(var(--gold-standard-rgb) / 0.24);
    border-color: var(--gold-bright);
  }
  /* Verse Insight View (#view-insight) */
  #view-insight, #view-ragalab, #view-concert {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #view-insight[hidden], #view-ragalab[hidden], #view-concert[hidden] {
    display: none !important;
  }
  .insight-scroll, .ragalab-scroll, .concert-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px;
  }
  .insight-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    flex-shrink: 0;
  }
  #view-insight .screen-leading, #view-ragalab .screen-leading, #view-concert .screen-leading {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  #view-insight .screen-page-name, #view-ragalab .screen-page-name, #view-concert .screen-page-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .insight-art-card {
    position: relative;
    margin: 0 auto 14px;
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--line-border);
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: zoom-in;
  }
  .insight-art-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .insight-header-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    margin-bottom: 14px;
  }
  .insight-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    font-weight: 700;
    margin: 0 0 4px;
  }
  .insight-verse-lines {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.65;
    margin: 6px 0 8px;
  }
  .insight-lyric-word {
    display: inline-block;
    padding: 1px 4px;
    margin: 0 1px;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
  .insight-lyric-word[data-has-audio="1"] {
    cursor: pointer;
  }
  .insight-lyric-word.lit {
    background: rgb(var(--gold-active-rgb) / 0.28);
    color: var(--gold-bright);
    box-shadow: 0 0 0 1px rgb(var(--gold-active-rgb) / 0.6);
  }
  .insight-verse-translation {
    font-size: 0.92rem;
    color: var(--muted);
    font-style: italic;
    margin: 0 0 10px;
    line-height: 1.45;
  }
  .insight-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
  }
  .insight-section {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
  }
  .insight-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-bright);
    margin: 0 0 10px;
    font-weight: 700;
  }
  .insight-words-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 8px;
  }
  .insight-word-card {
    padding: 10px 11px;
    border-radius: 10px;
    border: 1px solid var(--line-border);
    background:
      linear-gradient(180deg, rgb(var(--gold-standard-rgb) / 0.12), rgb(var(--gold-standard-rgb) / 0.04)),
      var(--card);
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
  }
  .insight-word-card[data-has-audio="1"] {
    cursor: pointer;
  }
  .insight-word-card.lit {
    border-color: var(--gold-bright);
    background:
      linear-gradient(180deg, rgb(var(--gold-active-rgb) / 0.34), rgb(var(--gold-standard-rgb) / 0.18)),
      var(--card);
    box-shadow: 0 0 0 1.5px var(--gold-bright), 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
  }
  .insight-word-term {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: 3px;
  }
  .insight-word-gloss {
    font-size: 0.8rem;
    color: var(--ink);
    line-height: 1.35;
  }
  .insight-grammar-card {
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 3px solid var(--gold);
    border-top: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    border-right: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    border-bottom: 1px solid rgb(var(--gold-standard-rgb) / 0.28);
    background: var(--card);
    margin-bottom: 8px;
  }
  .insight-grammar-card:last-child { margin-bottom: 0; }
  .insight-grammar-head {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-bottom: 4px;
  }
  .insight-body-p {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.58;
    margin: 0 0 10px;
  }
  .insight-body-p:last-child { margin-bottom: 0; }
  .insight-nav-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .insight-nav-row > :only-child {
    grid-column: 1 / -1;
  }
  .insight-nav-row .insight-back-btn,
  .insight-nav-row .explore-verse-link {
    width: 100%;
    min-height: 38px;
    height: auto;
    margin-top: 0;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    box-sizing: border-box;
  }
  /* Raga Lab (#view-ragalab) */
  .ragalab-swara-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0 14px;
  }
  .ragalab-swara-pill {
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.84rem;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  }
  .ragalab-swara-pill.active, .ragalab-swara-pill:hover {
    background: var(--gold);
    color: #1f0e05;
    border-color: var(--gold-bright);
  }
  .ragalab-piano {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    margin: 10px 0 14px;
    padding: 10px;
    border-radius: 12px;
    background: var(--umber-deep);
    border: 1px solid var(--line-border);
  }
  .ragalab-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 74px;
    padding: 6px 2px;
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(216, 168, 72, 0.35);
    background: rgba(255, 248, 231, 0.92);
    color: #241107;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }
  .ragalab-key.black-key {
    background: #2b1509;
    color: var(--cream);
    min-height: 56px;
  }
  .ragalab-key.in-raga {
    border-bottom: 4px solid var(--gold);
  }
  .ragalab-key.active {
    background: var(--gold-bright) !important;
    color: #1c0d05 !important;
  }
  .ragalab-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
  }
  .ragalab-actions-row .insight-audio-btn {
    width: 100%;
    min-height: 36px;
    height: auto;
    padding: 6px 8px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.78rem;
    box-sizing: border-box;
  }
  .ragalab-guide-btn-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 8px;
    margin: 8px 0;
  }
  .ragalab-guide-btn-row .insight-audio-btn {
    width: 100%;
    min-height: 38px;
    height: auto;
    padding: 7px 12px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    box-sizing: border-box;
  }
  .ragalab-Download-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .ragalab-Download-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    height: auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: rgb(var(--gold-standard-rgb) / 0.14);
    color: var(--gold-bright);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
  }
  .ragalab-Download-links a:hover {
    border-color: var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.22);
  }
  /* Concert View (#view-concert) */
  .concert-hero-banner {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid var(--line-border);
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }
  .concert-hero-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .concert-composer-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    margin-bottom: 14px;
  }
  .concert-composer-card img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--gold);
    flex-shrink: 0;
  }
  /* Setup UI Language */
  .setup-ui-lang-row {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(68px, 1fr));
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    overflow: hidden;
    background: var(--panel);
    box-sizing: border-box;
  }
  .setup-ui-lang-btn {
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--cream-dim);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
  }
  .setup-ui-lang-btn + .setup-ui-lang-btn {
    border-left: 1px solid var(--line-border);
  }
  .setup-ui-lang-btn.active {
    background: var(--gold);
    color: #1f0e05;
  }
  /* Page-Specific Help & Full User Guide Link */
  .user-guide[hidden] {
    display: none !important;
  }
  .page-help-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  .page-help-seq-badge,
  .page-help-inline-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .page-help-seq-badge {
    background: rgba(255, 240, 210, 0.06);
    border: 1px solid var(--line-border);
    color: var(--ink);
  }
  .page-help-inline-link {
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    cursor: pointer;
  }
  .page-help-inline-link:hover {
    background: rgb(var(--gold-standard-rgb) / 0.26);
    border-color: var(--gold-bright);
  }
  .page-help-trail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 6px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 240, 210, 0.04);
    border: 1px solid var(--line-border);
    box-sizing: border-box;
  }
  .page-help-trail-step {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
    background: rgba(255, 240, 210, 0.04);
    border: 1px solid var(--line-border);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
  }
  .page-help-trail-step.current {
    background: var(--gold);
    color: #1f0e05;
    font-weight: 700;
    border-color: var(--gold-bright);
  }
  .page-help-trail-step.parent-step {
    background: rgb(var(--gold-standard-rgb) / 0.18);
    border-color: var(--gold);
    color: var(--gold-bright);
    font-weight: 700;
  }
  .page-help-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    background: rgb(var(--gold-standard-rgb) / 0.16);
    color: var(--gold-bright);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
  }
  .page-help-cta-btn:hover {
    background: rgb(var(--gold-standard-rgb) / 0.26);
    border-color: var(--gold-bright);
  }
  /* Fix search bar horizontal padding & prevent <input type="search"> overflow on iOS Safari */
  .search-bar,
  .search-bar.sticky,
  #sheetSearchBar {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px 14px 6px !important;
  }
  .home-body > .search-bar.sticky {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .search-input {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 7px 14px;
  }
  .search-nav,
  .search-close {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  html.performance-mode #view-lyrics .learning-next {
    display: none;
  }
  .classroom-teach-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--umber-shadow);
  }
  .drill-start-instruction .instruction-student-icon {
    width: 16px;
    height: 16px;
    filter: none;
    color: var(--umber-shadow);
  }
  .pitch-gender-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border: 1px solid var(--line-border);
    border-radius: 8px;
    overflow: hidden;
    height: 32px;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .pitch-gender-btn {
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .pitch-gender-btn + .pitch-gender-btn {
    border-left: 1px solid var(--line-border);
  }
  .pitch-gender-btn svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .pitch-gender-btn.active {
    background: var(--gold);
    color: #1f0e05;
  }
  .pitch-gender-btn:hover:not(.active) {
    background: rgba(232, 194, 102, 0.16);
  }
  .global-setup-pop .pitch-control-row-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .global-setup-pop .pitch-control-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .global-setup-pop .pitch-ctl {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 32px;
    padding: 0 3px !important;
    border: 1px solid var(--line-border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-sizing: border-box;
  }
  .global-setup-pop .pitch-ctl .stepper-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 0;
    background: transparent;
    color: var(--gold-bright);
    font-size: 1.05rem;
    box-shadow: none;
  }
  .global-setup-pop .pitch-ctl .pitch-count {
    display: none !important;
  }
  .global-setup-pop .pitch-ctl .pitch-note {
    border-left: 0 !important;
    min-width: 3.2em;
    padding: 0 4px;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
  }
  .pitch-help-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: transparent;
    color: var(--gold-bright);
    font: 700 0.82rem/1 "Noto Serif", serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .pitch-help-btn:hover,
  .pitch-help-btn[aria-expanded="true"] {
    background: rgba(232, 194, 102, 0.22);
    border-color: var(--gold);
  }
  .pitch-register-note {
    margin: 6px 0 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line-border);
    background: var(--panel);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .pitch-register-note[hidden] {
    display: none !important;
  }

  /* ---- Harmonium Accompaniment & Shared Singer/Harmonium Mix Controls ---- */
  .harmonium-setup-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .setup-harmonium-vol-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
  }
  .setup-harmonium-vol-row {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .setup-harmonium-vol-label,
  .setup-harmonium-vol-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
  }
  .setup-vol-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--gold-bright);
    flex-shrink: 0;
  }
  .setup-vol-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  .setup-harmonium-vol-row input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--gold);
    cursor: pointer;
  }
  .setup-harmonium-vol-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-bright);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ragalab-mix-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--line-border);
  }
  .ragalab-mix-channel {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
  }
  .ragalab-mix-channel label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cream);
    white-space: nowrap;
  }
  .ragalab-mix-channel label svg,
  #ragaLabDuetBtn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--gold-bright);
  }
  .ragalab-mix-channel input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--gold);
    cursor: pointer;
  }
  .ragalab-mix-val {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--gold-bright);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }



/* ---- Sangati Boundary Calibrator Toolbar (Option A - Condensed 3-Row HUD) ---- */
.sangati-calibrate-bar {
  margin: 8px auto 6px;
  width: calc(100% - 20px);
  max-width: 740px;
  padding: 8px 12px;
  background: var(--card, #6c452d);
  border: 1px solid var(--gold-standard, #eabd72);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
  color: var(--ink, #f7eeda);
  box-sizing: border-box;
  animation: fadeIn 0.18s ease-out;
  position: relative;
  z-index: 100;
}
.sangati-calibrate-bar[hidden] {
  display: none !important;
}

/* Collapsed Ribbon Mode */
.sangati-calibrate-bar.is-collapsed {
  padding: 6px 12px;
  gap: 0;
}
.sangati-calibrate-bar.is-collapsed .cal-header {
  border-bottom: none;
  padding-bottom: 0;
}
.sangati-calibrate-bar.is-collapsed .cal-controls-row,
.sangati-calibrate-bar.is-collapsed .cal-word-section,
.sangati-calibrate-bar.is-collapsed .cal-parts-row,
.sangati-calibrate-bar.is-collapsed .cal-panel {
  display: none !important;
}
/* ---- Border-Notch Panels (fieldset / legend) ---- */
fieldset.cal-panel {
  position: relative;
  border: 1px solid rgba(234, 189, 114, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
  background: rgba(0, 0, 0, 0.20);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}
legend.cal-panel-legend {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-standard, #eabd72);
  padding: 0 6px;
  margin-left: 6px;
  line-height: 1;
  float: none;
  width: auto;
}
.cal-sangati-bubbles-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Compact Numbered Sangati Bubbles */
.cal-bubble-btn {
  height: 25px;
  min-width: 30px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line-border, rgba(234, 189, 114, 0.35));
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink, #f7eeda);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  user-select: none;
}
.cal-bubble-btn:hover {
  background: rgba(234, 189, 114, 0.22);
  color: var(--gold-bright, #ffe09a);
  border-color: var(--gold-bright, #ffe09a);
  transform: translateY(-1px);
}
.cal-bubble-btn.active, .cal-bubble-btn[aria-pressed="true"] {
  background: var(--gold-standard, #eabd72);
  color: #2e1c08;
  border-color: var(--gold-bright, #ffe09a);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 224, 154, 0.4);
  font-weight: 800;
}
/* Row 1: Header + Audition + Actions */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-border, rgba(234, 189, 114, 0.25));
  padding-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cal-badge {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 224, 154, 0.16);
  color: var(--gold-bright, #ffe09a);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 224, 154, 0.3);
}
.cal-sangati-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--cream, #fff4e0);
}
.cal-profile-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.28);
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid rgba(234, 189, 114, 0.22);
}
.cal-profile-label {
  font-size: 0.70rem;
  color: var(--gold-dim, #d4c3a5);
  font-weight: 600;
  margin-right: 2px;
}
.cal-profile-pill {
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, #d4c3a5);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cal-profile-pill:hover {
  color: var(--gold-bright, #ffe09a);
  background: rgba(255, 224, 154, 0.12);
}
.cal-profile-pill.active, .cal-profile-pill[aria-pressed="true"] {
  background: var(--gold-standard, #eabd72);
  color: #2e1c08;
  border-color: var(--gold-bright, #ffe09a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.cal-actions-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cal-audio-btn {
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--gold-standard, #eabd72);
  background: rgba(234, 189, 114, 0.12);
  color: var(--ink, #f7eeda);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.cal-audio-btn:hover {
  background: rgba(255, 224, 154, 0.25);
  color: var(--gold-bright, #ffe09a);
}
.cal-audio-btn.cal-play-btn {
  background: var(--gold-standard, #eabd72);
  color: #2e1c08;
  border-color: var(--gold-bright, #ffe09a);
  font-weight: 700;
}
.cal-audio-btn.cal-play-btn:hover {
  background: var(--gold-bright, #ffe09a);
}
.cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line-border, rgba(234, 189, 114, 0.35));
  background: rgba(0, 0, 0, 0.25);
  color: var(--gold, #eabd72);
  transition: all 0.12s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.cal-btn:hover {
  background: rgba(255, 224, 154, 0.18);
  color: var(--gold-bright, #ffe09a);
  border-color: var(--gold-bright, #ffe09a);
}
.cal-collapse-btn {
  background: rgba(234, 189, 114, 0.08);
  color: var(--gold-dim, #d4c3a5);
}
.cal-close-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--line-border, rgba(234, 189, 114, 0.35));
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted, #d4c3a5);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.cal-close-btn:hover {
  background: rgba(168, 68, 50, 0.3);
  color: #ffb7aa;
  border-color: rgba(255, 100, 100, 0.5);
}

/* Row 2: Boundaries Side-by-Side */
.cal-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(0, 0, 0, 0.15);
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(234, 189, 114, 0.18);
}
@media (max-width: 640px) {
  .cal-controls-row {
    grid-template-columns: 1fr;
  }
}
.cal-boundary-col {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.cal-boundary-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold-dim, #d4c3a5);
  min-width: 36px;
}
.cal-num-input {
  width: 68px;
  height: 26px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--gold-standard, #eabd72);
  border-radius: 4px;
  color: var(--gold-bright, #ffe09a);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.cal-num-input::-webkit-outer-spin-button,
.cal-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cal-num-input:focus {
  border-color: #fff;
  box-shadow: 0 0 6px rgba(255, 224, 154, 0.5);
}
.cal-unit {
  font-size: 0.72rem;
  color: var(--gold-dim, #d4c3a5);
  font-weight: 600;
}
.cal-range-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(234, 189, 114, 0.25);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  min-width: 50px;
}
.cal-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-bright, #ffe09a);
  border: 2px solid #2e1c08;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(255, 224, 154, 0.8);
}
.cal-range-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-bright, #ffe09a);
  border: 2px solid #2e1c08;
  cursor: pointer;
}

/* Micro-Nudge Capsule Component */
.cal-stepper-capsule {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-border, rgba(234, 189, 114, 0.35));
  border-radius: 5px;
  height: 26px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}
.cal-step-btn {
  width: 24px;
  min-width: 24px !important;
  max-width: 24px;
  height: 100%;
  min-height: 0 !important;
  border: none;
  background: transparent;
  color: var(--gold-bright, #ffe09a);
  font-size: 0.74rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
  padding: 0;
  box-sizing: border-box;
}
.cal-step-btn:hover {
  background: rgba(255, 224, 154, 0.25);
}
.cal-step-btn:active {
  background: rgba(255, 224, 154, 0.4);
}
.cal-step-select {
  border: none;
  border-left: 1px solid rgba(234, 189, 114, 0.25);
  border-right: 1px solid rgba(234, 189, 114, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-bright, #ffe09a);
  font-size: 0.70rem;
  font-weight: 700;
  padding: 0 14px 0 4px;
  height: 100%;
  min-height: 0 !important;
  min-width: 58px !important;
  max-width: 62px;
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  text-align: center;
  text-align-last: center;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228%22%20height%3D%225%22%20viewBox%3D%220%200%208%205%22%3E%3Cpath%20fill%3D%22%23ffe09a%22%20d%3D%22M0%200l4%205%204-5z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.cal-step-select:hover {
  background-color: rgba(255, 224, 154, 0.18);
}
.cal-step-select:focus {
  border-color: var(--gold-bright, #ffe09a);
}
.cal-step-select option {
  background: #2b190a;
  color: #ffe09a;
  font-weight: 600;
  padding: 4px;
}

/* Multi-Sangati Word Rows in Words Panel */
.cal-word-rows-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.cal-sangati-word-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(234, 189, 114, 0.15);
  transition: all 0.14s ease;
  box-sizing: border-box;
  min-height: 32px;
}
.cal-sangati-word-row:hover {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(234, 189, 114, 0.28);
}
.cal-sangati-word-row.active {
  background: rgba(234, 189, 114, 0.12);
  border-color: var(--gold-standard, #eabd72);
  box-shadow: 0 0 8px rgba(234, 189, 114, 0.15);
}
.cal-row-bubble-wrap {
  flex-shrink: 0;
}
.cal-row-chips-wrap, .cal-word-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  flex: 1;
}
.cal-word-chip.cal-word-chip-inactive {
  opacity: 0.72;
}
.cal-word-chip.cal-word-chip-inactive:hover {
  opacity: 1;
  border-color: var(--gold-bright, #ffe09a);
}
.cal-no-words {
  font-size: 0.70rem;
  color: var(--muted, #d4c3a5);
  font-style: italic;
}
.cal-word-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid rgba(234, 189, 114, 0.15);
  padding-top: 5px;
}
.cal-word-info {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-dim, #d4c3a5);
}
.cal-word-actions-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.cal-word-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(234, 189, 114, 0.35);
  color: var(--ink, #f7eeda);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s ease;
  font-family: inherit;
}
.cal-word-chip:hover {
  background: rgba(234, 189, 114, 0.2);
  border-color: var(--gold-bright, #ffe09a);
}
.cal-word-chip.selected {
  background: rgba(234, 189, 114, 0.35);
  border-color: var(--gold-bright, #ffe09a);
  box-shadow: 0 0 6px rgba(255, 224, 154, 0.4);
  font-weight: 700;
}
.cal-word-chip .chip-time {
  font-size: 0.68rem;
  color: var(--gold-dim, #d4c3a5);
  font-variant-numeric: tabular-nums;
}
.cal-tap-btn {
  background: rgba(234, 189, 114, 0.14);
  color: var(--gold-bright, #ffe09a);
  border-color: var(--gold-bright, #ffe09a);
  font-weight: 700;
}
.cal-word-inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid rgba(234, 189, 114, 0.15);
  padding-top: 5px;
}
@media (max-width: 640px) {
  .cal-word-inline-fields {
    grid-template-columns: 1fr;
  }
}

/* Dropdown Menu Component */
.cal-dropdown-wrap {
  position: relative;
  display: inline-flex;
}
.cal-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #2b190a;
  border: 1px solid var(--gold-standard, #eabd72);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
  z-index: 1050;
  min-width: 250px;
  max-width: 320px;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}
.cal-dropdown-menu[hidden] {
  display: none !important;
}
.cal-dropdown-section {
  padding: 4px 10px 2px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dim, #d4c3a5);
  border-top: 1px solid rgba(234, 189, 114, 0.15);
  margin-top: 3px;
}
.cal-dropdown-section:first-child {
  border-top: none;
  margin-top: 0;
}
.cal-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--ink, #f7eeda);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
  font-family: inherit;
  width: 100%;
}
.cal-dropdown-item:hover {
  background: rgba(234, 189, 114, 0.22);
  color: var(--gold-bright, #ffe09a);
}
.cal-dropdown-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 10px 6px 10px;
}
.cal-dropdown-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(234, 189, 114, 0.35);
  border-radius: 4px;
  color: var(--cream, #fff4e0);
  padding: 2px 7px;
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
}
.cal-dropdown-chip:hover {
  background: var(--gold-standard, #eabd72);
  color: #2e1c08;
  font-weight: 700;
}
.cal-btn-danger {
  color: #ff9b9b !important;
}
.cal-btn-danger:hover {
  background: rgba(255, 80, 80, 0.22) !important;
  color: #ffc4c4 !important;
}
.calibrate-setup-pill {
  flex: none;
  height: var(--ctl-size, 40px);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-standard, #eabd72);
  background: rgba(234, 189, 114, 0.18);
  color: var(--gold-bright, #ffe09a);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.calibrate-setup-pill:hover {
  background: rgba(255, 224, 154, 0.28);
  border-color: var(--gold-bright, #ffe09a);
}
/* Setup Popover Sangati Timing button */
#setupCalibrateToggleBtn {
  width: 100%;
  height: 36px;
  background: rgba(234, 189, 114, 0.16);
  border: 1px solid var(--gold-standard, #eabd72);
  color: var(--gold-bright, #ffe09a);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
#setupCalibrateToggleBtn:hover {
  background: rgba(255, 224, 154, 0.28);
  border-color: var(--gold-bright, #ffe09a);
  transform: translateY(-1px);
}
#setupCalibrateToggleBtn.active, #setupCalibrateToggleBtn[aria-pressed="true"] {
  background: var(--gold-standard, #eabd72);
  color: #2e1c08;
  border-color: var(--gold-bright, #ffe09a);
}
.tool-btn.top-calibrate-btn {
  color: var(--gold-bright, #ffe09a);
  transition: transform 0.15s ease;
}
.tool-btn.top-calibrate-btn:hover {
  transform: scale(1.1);
}
.tool-btn.top-calibrate-btn.active, .tool-btn.top-calibrate-btn[aria-pressed="true"] {
  background: rgba(234, 189, 114, 0.28);
  border-color: var(--gold-bright, #ffe09a);
}

/* Interactive Sangati Bubble Life & Tap-to-Switch/Stop */
.sangati-pills .pill {
  cursor: pointer !important;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
}
.sangati-pills .pill:hover {
  border-color: var(--gold-bright, #ffe09a) !important;
  color: var(--gold-bright, #ffe09a) !important;
  background: rgba(234, 189, 114, 0.22) !important;
  transform: translateY(-2px) scale(1.14) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 224, 154, 0.45) !important;
  cursor: pointer !important;
  z-index: 2;
}
.sangati-pills .pill:active {
  transform: scale(0.95) !important;
}
.sangati-pills .pill.lit {
  cursor: pointer !important;
}
.sangati-pills .pill.lit:hover {
  background: var(--gold, #eabd72) !important;
  color: var(--umber-shadow, #1a0f02) !important;
  filter: brightness(1.2) !important;
  transform: translateY(-2px) scale(1.14) !important;
  box-shadow: 0 0 16px var(--gold-bright, #ffe09a), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
}

/* ── Desktop Edge Navigation Chevrons ────────────────────────────────── */
.desktop-nav-shell {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 100%;
  display: flex;
  justify-content: center;
}

.desktop-edge-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(var(--gold-standard-rgb) / 0.55);
  background: rgba(46, 28, 8, 0.85);
  color: var(--gold-bright, #ffe09a);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.40;
  transition: opacity 0.2s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  user-select: none;
  -webkit-user-select: none;
}
.desktop-edge-nav svg {
  width: 22px;
  height: 22px;
  display: block;
}
.desktop-edge-prev {
  left: -58px;
}
.desktop-edge-next {
  right: -58px;
}
.desktop-edge-nav:hover {
  opacity: 1;
  background: rgba(46, 28, 8, 0.98);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7), 0 0 14px rgba(234, 189, 114, 0.4);
}
.desktop-edge-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.desktop-edge-nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  opacity: 1;
}
.desktop-edge-nav:disabled {
  opacity: 0.10 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* When viewport is narrower than 820px, place chevrons comfortably inside the frame edges */
@media (max-width: 820px) {
  .desktop-edge-prev {
    left: 8px;
  }
  .desktop-edge-next {
    right: 8px;
  }
}
@media (hover: none) {
  /* On touch-only mobile devices, hide edge buttons so mobile stays completely clean */
  .desktop-edge-nav {
    display: none !important;
  }
}

/* ── TopBar Center: Eyebrow (Location) + Song Title in UI Language ──── */
.lyrics-topbar.screen-topbar {
  align-items: center !important;
}
.topbar-song-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  overflow: visible;
  text-align: center;
}
.topbar-screen-eyebrow {
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  opacity: 0.90;
  line-height: 1.35;
  padding-top: 2px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-breadcrumb-link {
  background: transparent;
  border: none;
  padding: 0 1px;
  color: var(--gold);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(234, 189, 114, 0.45);
  line-height: inherit;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.topbar-breadcrumb-link:hover {
  color: var(--gold-bright);
  text-decoration-color: var(--gold-bright);
}
.topbar-breadcrumb-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration-color: transparent;
}
.topbar-breadcrumb-link:disabled:hover {
  color: var(--gold);
  text-decoration-color: transparent;
}
.topbar-breadcrumb-sep {
  color: var(--gold-dim);
  opacity: 0.65;
  margin: 0 3px;
  user-select: none;
}
.topbar-breadcrumb-curr {
  color: var(--gold-dim);
  opacity: 0.95;
}
.topbar-song-title {
  font-family: var(--font-title, serif);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.015em;
  line-height: 1.35;
  padding-top: 2px;
  padding-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  max-width: 100%;
}

/* ── Persistent Anchored Heading Bar ─────────────────────────────────── */
.anchored-song-bar {
  position: relative;
  z-index: 35;
  width: 100%;
  min-height: 48px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(93, 58, 37, 0.98) 0%, rgba(68, 44, 26, 0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line-border);
  box-shadow: 0 4px 16px rgba(46, 28, 8, 0.45);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.anchored-song-thumb {
  width: 0;
  height: 35px;
  opacity: 0;
  overflow: hidden;
  transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, margin 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  margin-right: 0;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.anchored-song-thumb.visible {
  width: 62px;
  opacity: 1;
  margin-right: 6px;
  border-color: var(--gold);
  background: var(--umber-deep);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.anchored-song-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anchored-song-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  cursor: pointer;
}
.anchored-song-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0 2px 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anchored-song-title-script {
  color: var(--gold-bright);
  font-size: 0.94rem;
  font-weight: 700;
  font-family: var(--type);
  letter-spacing: 0.015em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anchored-song-meta-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 0;
  line-height: 1.35;
  margin-top: 1px;
}
.anchored-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.anchored-meta-item + .anchored-meta-item::before {
  content: "·";
  margin: 0 6px;
  color: var(--gold);
  opacity: 0.40;
  font-size: 0.70rem;
  font-weight: 400;
}
.anchored-meta-k {
  font-size: 0.61rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dim);
  opacity: 0.72;
}
.anchored-meta-k::after {
  content: ":";
  margin-right: 1px;
}
.anchored-meta-v {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
.anchored-action-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(232, 194, 102, 0.16);
  color: var(--gold-bright);
  font-size: 0.74rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.anchored-action-btn:hover {
  background: rgba(232, 194, 102, 0.28);
  transform: scale(1.03);
}
.anchored-explore-capsule {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-border);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.anchored-explore-step-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--gold-bright);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.anchored-explore-step-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
.anchored-explore-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-bright);
  padding: 0 4px;
  white-space: nowrap;
}




/* ── Unified Cross-View Search Highlighting ────────────────────────── */
.sheet-search-match {
  position: relative;
  background: rgba(245, 158, 11, 0.16) !important;
  border-left: 3.5px solid #f59e0b !important;
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.28);
  transition: all 0.2s ease;
  padding-left: 8px !important;
}
.search-match-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffb066;
  background: rgba(220, 100, 20, 0.32);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.2;
}
.explore-search-match {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.28);
  transition: all 0.2s ease;
}


/* ── Dual-Row Navigation Header & Pill Strip ─────────────────────────── */
.nav-pill-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 10px 7px;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.nav-history-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(234, 189, 114, 0.42);
  background: rgba(234, 189, 114, 0.08);
  color: var(--gold-bright, #ffe09a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.14s ease, opacity 0.16s ease;
}

.nav-history-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nav-history-btn:hover:not(:disabled) {
  background: rgba(234, 189, 114, 0.22);
  border-color: var(--gold);
  transform: scale(1.06);
}

.nav-history-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.nav-history-btn:disabled {
  opacity: 0.22;
  cursor: default;
  border-color: rgba(234, 189, 114, 0.18);
  background: transparent;
}

.nav-pill-strip-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Edge gradient masks for mobile/narrow viewports so partially clipped edge pills remain visibly discoverable */
.nav-pill-strip-wrap.mask-left:not(.mask-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 100%);
}
.nav-pill-strip-wrap.mask-right:not(.mask-left) {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 22px), transparent 100%);
}
.nav-pill-strip-wrap.mask-left.mask-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.nav-pill-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 2px 4px;
  width: 100%;
}

.nav-pill-strip::-webkit-scrollbar {
  display: none;
}

.nav-seq-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(234, 189, 114, 0.28);
  background: rgba(46, 28, 8, 0.55);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.nav-seq-pill-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0.85;
  flex-shrink: 0;
}

.nav-seq-pill-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-seq-pill:hover:not(:disabled) {
  background: rgba(234, 189, 114, 0.16);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.nav-seq-pill.active {
  background: linear-gradient(180deg, rgba(234, 189, 114, 0.28) 0%, rgba(196, 142, 58, 0.24) 100%);
  border-color: var(--gold-bright, #ffe09a);
  color: var(--gold-bright, #ffe09a);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(234, 189, 114, 0.24), inset 0 0 4px rgba(255, 224, 154, 0.18);
}

.nav-seq-pill.active .nav-seq-pill-icon {
  color: var(--gold-bright, #ffe09a);
  opacity: 1;
}

.nav-seq-pill.subpage-return {
  border-style: solid;
  border-color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-seq-pill.coming-soon,
.nav-seq-pill:disabled.coming-soon {
  opacity: 0.36;
  border-style: dashed;
  border-color: rgba(234, 189, 114, 0.30);
  background: rgba(28, 16, 5, 0.35);
  color: var(--gold-dim);
  cursor: not-allowed;
}

.nav-seq-pill:disabled:not(.coming-soon) {
  opacity: 0.42;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .nav-pill-bar {
    padding: 2px 6px 6px;
    gap: 3px;
  }
  .nav-seq-pill {
    height: 25px;
    padding: 0 7.5px;
    font-size: 0.71rem;
    gap: 3.5px;
  }
  .nav-seq-pill-icon {
    width: 12px;
    height: 12px;
  }
  .nav-history-btn {
    width: 26px;
    height: 26px;
  }
}

/* ── Shared page-search highlight (CSS Custom Highlight API) ── */
::highlight(search-hit) { background-color: rgba(234,189,114,.38); color: inherit; }
::highlight(search-hit-active) { background-color: rgba(234,189,114,.85); color: #1a1208; }
/* Hit counter lives inside the search field: [ 2 / 5  ‹ ›  ⌫ ] */
.search-input-tools {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 2px;
}
.search-hit-bar { display: inline-flex; align-items: center; gap: 0; color: var(--gold-bright, #f2d08a); font-size: .74rem; }
.search-hit-count { opacity: .85; margin-right: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.search-clear-btn {
  width: 22px; height: 22px; padding: 0; margin-left: 2px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 0; color: var(--gold-bright, #f2d08a); font-size: .85rem; line-height: 1; opacity: .8;
}
.search-clear-btn:hover { opacity: 1; background: rgba(234,189,114,.15); }
.search-match-badge { display: none !important; }
[data-search-current] { box-shadow: 0 0 0 2px rgba(234,189,114,.85), 0 0 18px rgba(245,158,11,.5) !important; }
.search-hit-btn {
  width: 22px; height: 22px; padding: 0; cursor: pointer; border-radius: 50%;
  background: transparent; border: 0; color: var(--gold-bright, #f2d08a); font-size: .6rem; line-height: 1;
}
.search-hit-btn:hover:not(:disabled) { background: rgba(234,189,114,.15); }
.search-hit-btn:disabled { opacity: .35; cursor: default; }

/* ── Explore verse stepper alignment & footer nav ── */
.anchored-explore-capsule { height: 28px; padding: 0 4px; gap: 6px; box-sizing: border-box; }
.anchored-explore-step-btn { width: 24px; height: 24px; border-radius: 50%; }
.anchored-explore-step-btn:not(:disabled):hover { background: rgba(234,189,114,0.15); }
.anchored-explore-label { line-height: 28px; padding: 0 2px; }
.explore-nav-row { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid rgba(234,189,114,0.18); padding-top: 10px; }
.explore-nav-link { background: none; border: none; color: var(--gold-bright); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; padding: 6px 4px; }
.explore-nav-link:hover { text-decoration: underline; }

/* Unified gold scrubber (matches .home-progress look) */
input[type=range].gold-scrubber{-webkit-appearance:none;appearance:none;height:14px;accent-color:auto;background:transparent!important}
input[type=range].gold-scrubber::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(234,189,114,.25)}
input[type=range].gold-scrubber::-moz-range-track{height:6px;border-radius:3px;background:rgba(234,189,114,.25)}
input[type=range].gold-scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:var(--gold-bright);border:1px solid #1a0e07}
input[type=range].gold-scrubber::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold-bright);border:1px solid #1a0e07}