/* lyrics-follow.css — how the lyrics follow the song, shared by BOTH desktop layouts
   (index.html two-column stage and index-three-columns.html) AND the phone home, where
   js/mobile.js adopts the same #hero window (placement in css/mobile.css).
   Loaded last. Behaviour lives in js/lyrics-follow.js. */
/* ══ FOLLOWING THE SONG ═════════════════════════════════════════════════════════
   before play: the first line and a quiet "Press play to follow along"
   intro: the first line stays readable, "Lyrics begin shortly" — no countdown, no spinner
   singing: the whole current line leads; nearby lines stay readable, only quieter
   the visitor scrolls: auto-scroll stops; Resume following waits until they choose it
   ended: the last lines stay; Replay and Next song follow them */

/* ══ THE HERO LYRICS WINDOW — one copy for the desktop stage and the phone home.
   body:where(.stage,.mos) keeps specificity low and excludes only the three-column
   desktop, which sizes its small panel in css/site.css (tail block at the bottom). ══ */
html body:where(.stage,.mos) #hero{overflow:hidden;justify-content:flex-start;
  background:rgba(250,252,254,.92)!important;border:1px solid rgba(16,48,79,.12);box-shadow:0 22px 48px -30px rgba(16,40,72,.45)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;text-shadow:none;color:#0b2742}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero{background:rgba(12,15,20,.92)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 22px 48px -26px rgba(0,0,0,.7)!important;color:#eef2f6}
html body:where(.stage,.mos) #hero .hero-lyrhead{flex:0 0 auto}
/* phone: the window follows the phone THEME (mos-dark), not the song's sky — day-sky ink rules in site.css must not leak onto the dark window, nor night ink onto the light one */
html body.mos.mos-dark #hero :is(.hlh-title,.hlh-k,.hlt-seg,.hq-text,.hq-cl-o,.hq-al-o){color:#eef2f6}
html body.mos.mos-dark #hero .cl-lang:not([aria-pressed="true"]):not([aria-checked="true"]){background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(238,242,246,.9)}
html body.mos.mos-dark #hero .hlt-seg:not([aria-pressed="true"])::after{background-color:rgba(255,255,255,.22)}
html body.mos.mos-dark #hero.hl-settings .hlh-ctrls{border-top-color:rgba(255,255,255,.1)}
html body.mos:not(.mos-dark):not(.sky-day) #hero{color:#10304f}
html body.mos:not(.mos-dark):not(.sky-day) #hero :is(.hlh-title,.hlh-k,.hlh-langs,.hlt-seg,.hq-text,.hq-cl-o,.hq-al-o,.lm-seg:not([aria-pressed="true"])){color:#0d2b47}
html body.mos:not(.mos-dark):not(.sky-day) #hero .cl-lang:not([aria-pressed="true"]):not([aria-checked="true"]){background-color:rgba(255,255,255,.72);border-color:rgba(24,74,128,.16);color:rgba(13,43,71,.88)}
html body.mos:not(.mos-dark):not(.sky-day) #hero .hlt-seg:not([aria-pressed="true"])::after{background-color:rgba(16,48,79,.22)}
html body.mos:not(.mos-dark):not(.sky-day) #hero.hl-settings .hlh-ctrls{border-top-color:rgba(16,48,79,.12)}

html body:where(.stage,.mos) #hero .hq-text{font-family:var(--k-disp);font-size:clamp(26px,2.1vw,36px);line-height:1.25;text-shadow:none}
html body:where(.stage,.mos) #hero :is(.hq-ph,#heroQuotePh){font-size:15px;opacity:.7}
html body:where(.stage,.mos) #hero .hq-tr{font-family:var(--ui);font-size:15px;line-height:1.45;opacity:1;color:#3b5874;text-shadow:none}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-tr{color:rgba(232,238,245,.78)!important}
html body:where(.stage,.mos) #hero .hero-quote.hq-live{background:none!important}
html body:where(.stage,.mos) #hero .hero-quote.hq-live .hq-text{text-shadow:none!important}
html body:is(.stage.sky-day,.mos:not(.mos-dark)) #hero .hero-quote.hq-live .hq-text{color:#1e5a96}
/* the window: header pinned top, the lead line centred; short windows drop context lines */
html body:where(.stage,.mos) #hero .hero-quote{flex:1 1 auto;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 22px),transparent);container-type:size;justify-content:safe center;padding:14px 10px}
@container (max-height:170px){ html body:where(.stage,.mos) #hero .hero-quote:not(.hq-wait) :is(.hq-before,.hq-after){display:none!important} }
@container (min-height:170px) and (max-height:260px){ html body:where(.stage,.mos) #hero .hq-before{display:none!important} html body:where(.stage,.mos) #hero .hq-after .hq-cl+.hq-cl{display:none} }
/* two-line window: the upcoming line (quiet) above, the sung line beneath */
html body:where(.stage,.mos) #hero .hq-before{display:none!important}
html body:where(.stage,.mos) #hero .hq-after{order:-1}
html body:where(.stage,.mos) #hero .hq-after .hq-cl+.hq-cl{display:none}
html body.lv-tr:where(.stage,.mos) #hero .hq-cl:has(.hq-cl-tr) .hq-cl-o{display:none}
html body:not(.lv-tr):where(.stage,.mos) #hero .hq-cl-tr{display:none}
html body:where(.stage,.mos) #hero .hq-cl-tr{display:block;font-family:var(--ui);font-size:clamp(14px,1.05vw,17px);line-height:1.4}
html body:where(.stage,.mos) #hero .hero-quote.hq-live .hq-after{display:none!important}
html body:where(.stage,.mos) #hero .hero-quote:is(.hq-live,.hq-wait){-webkit-mask-image:none;mask-image:none}
html body:where(.stage,.mos) #hero .hero-quote:is(.hq-live,.hq-wait) .hq-after:not(:empty)::before{content:attr(data-hdr);display:block;
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1e5a96;opacity:.8;margin:0 0 4px}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hero-quote:is(.hq-live,.hq-wait) .hq-after:not(:empty)::before{color:#9cc3ea}
/* song stopped / Lyrics mode: the whole lyric reads at once in the window */
html body:where(.stage,.mos) #hero .hq-all{display:none;text-align:start}
/* the full lyric only in Lyrics mode (body.hero-all); Current line at rest shows the first line + translation */
html body.hero-all:where(.stage,.mos) #hero .hero-quote.hq-idle:not(.hq-wait) .hq-all{display:block;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;padding:4px 4px 10px}
html body:where(.stage,.mos) #hero .hero-quote.hq-idle:not(.hq-wait) :is(.hq-before,.hq-after){display:none!important}
html body.hero-all:where(.stage,.mos) #hero .hero-quote.hq-idle:not(.hq-wait):has(.hq-all:not(:empty)) :is(.hq-text,.hq-ph,.hq-tr){display:none}
html body:where(.stage,.mos) #hero .hero-quote.hq-wait .hq-all{display:none!important}
html body:where(.stage,.mos) #hero .hq-all:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:10px}
/* lyric rows as columns: original | pronunciation | translation; follow highlight */
html body:where(.stage,.mos) #hero .hq-al{position:relative;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(12px,1.4vw,24px);align-items:baseline;border-radius:8px;padding:calc(3px * var(--hqfit,1)) 8px;margin:0 0 calc(3px * var(--hqfit,1))}
html body.lv-ph:not(.lv-tr):where(.stage,.mos) #hero .hq-al,
html body.lv-tr:not(.lv-ph):where(.stage,.mos) #hero .hq-al{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
html body.lv-ph.lv-tr:where(.stage,.mos) #hero .hq-al{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr)}
html body:where(.stage,.mos) #hero .hq-al.hq-al-on{background:color-mix(in srgb,var(--theme) 9%,transparent)}
html body:where(.stage,.mos) #hero .hq-al.hq-al-on::before{content:'';position:absolute;inset-inline-start:0;top:16%;bottom:16%;width:2.5px;border-radius:2px;background:var(--theme)}
html body:is(.stage.sky-day,.mos:not(.mos-dark)) #hero .hq-al.hq-al-on .hq-al-o{color:#06283f}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-al.hq-al-on .hq-al-o{color:#fff}
html body:where(.stage,.mos) #hero .hq-al-o{font-family:var(--k-disp);font-size:calc(clamp(15px,1.15vw,19px) * var(--hqfit,1));line-height:1.42}
html body:where(.stage,.mos) #hero .hq-al-ph{font-family:var(--ui);font-style:italic;font-size:calc(clamp(11px,.82vw,13.5px) * var(--hqfit,1));line-height:1.3;color:#4c6a87}
html body:where(.stage,.mos) #hero .hq-al-tr{font-family:var(--ui);font-size:calc(clamp(12px,.92vw,15px) * var(--hqfit,1));line-height:1.3;color:#26486b}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-al-ph{color:rgba(232,238,245,.6)}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-al-tr{color:rgba(232,238,245,.78)}
html body:not(.lv-ph):where(.stage,.mos) #hero .hq-al-ph{display:none}
html body:not(.lv-tr):where(.stage,.mos) #hero .hq-al-tr{display:none}
html body:where(.stage,.mos) #hero .hq-sec{margin:0 0 calc(14px * var(--hqfit,1))}
html body:where(.stage,.mos) #hero .hq-sec:last-child{margin-bottom:0}
html body:where(.stage,.mos) #hero .hq-sec-t{padding-inline:8px;font-family:var(--ui);font-size:calc(10px * var(--hqfit,1));font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#1e5a96;opacity:.85;margin:0 0 calc(3px * var(--hqfit,1))}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-sec-t{color:#9cc3ea}
html body:where(.stage,.mos) #hero .hq-cl-o{font-family:var(--k-disp);font-size:clamp(17px,1.3vw,22px);line-height:1.3}
html body:where(.stage,.mos) #hero.k-playing :is(.hq-idle-hint,.hq-off){display:none!important}
html body:where(.stage,.mos) #hero .hero-quote.hq-wait :is(.hq-text,.hq-ph,.hq-tr){display:none!important}
html body:where(.stage,.mos) #hero.k-intro .hero-quote.hq-idle{display:flex!important}
/* instrumental intro: a quiet note; Skip to vocals fades in only on long intros */
html body:where(.stage,.mos) #hero .hq-cl.hq-cl-intro{opacity:1;margin:0;text-align:center}
html body:where(.stage,.mos) #hero .hq-cl-intro .hq-cl-o{display:block;font-size:clamp(19px,1.5vw,25px);opacity:.85}
html body:where(.stage,.mos) #hero .hq-intro-skip{display:block;margin:16px auto 0;padding:6px 14px;border:0;border-radius:999px;background:transparent;
  font:600 13.5px/1.2 var(--ui);letter-spacing:.02em;color:#1e5a96;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .8s ease .9s,transform .8s ease .9s,visibility 0s linear 1.7s,background-color .25s ease}
html body:where(.stage,.mos) #hero .hq-intro-skip::after{content:'\2192';margin-inline-start:.4em}
html[dir="rtl"] body:where(.stage,.mos) #hero .hq-intro-skip::after{content:'\2190'}
html body:where(.stage,.mos) #hero .hq-intro-skip.on{opacity:.85;visibility:visible;transform:none}
html body:where(.stage,.mos) #hero .hq-intro-skip:hover{opacity:1;background:rgba(30,90,150,.1)}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-intro-skip{color:#9cc3ea}
html body:is(.stage:not(.sky-day),.mos.mos-dark) #hero .hq-intro-skip:hover{background:rgba(156,195,234,.14)}
html body:where(.stage,.mos) #hero .hq-intro-skip:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:2px}
html.rm body:where(.stage,.mos) #hero .hq-intro-skip{transition:none;transform:none}
@media (prefers-reduced-motion:reduce){ html body:where(.stage,.mos) #hero .hq-intro-skip{transition:none;transform:none} }
/* full lyrics: the same Skip to vocals, under the words while the intro plays */
html body:where(.stage,.mos) #hero .hq-all-skip{flex:0 0 auto;margin:6px auto 0}
html body:where(.stage,.mos) #hero:not(.k-intro) .hq-all-skip,
html body:where(.stage,.mos) #hero .hero-quote:is(.hq-wait,:not(.hq-idle)) .hq-all-skip{display:none}
/* vocals arrive: the first sung line fades up in the same spot the countdown held */
html body:where(.stage,.mos) #hero .hero-quote.hq-live .hq-text{animation:hqLiveIn .6s ease}
@keyframes hqLiveIn{from{opacity:0}to{opacity:1}}
html.rm body:where(.stage,.mos) #hero .hero-quote.hq-live .hq-text{animation:none}
@media (prefers-reduced-motion:reduce){ html body:where(.stage,.mos) #hero .hero-quote.hq-live .hq-text{animation:none} }

/* the idle hint + context window — EVERY layout with the small panel (stage, phone, three-column) */
html body #hero:not(.k-playing):not(.k-intro) .hq-idle-hint{display:block!important;margin:14px 0 0;font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.02em;text-align:center;color:#3b5874;opacity:1}
html body:is(:not(.sky-day):not(.mos),.mos.mos-dark) #hero:not(.k-playing):not(.k-intro) .hq-idle-hint{color:rgba(232,238,245,.72)}
/* phone: the hint is a footer outside the lyrics viewport — divider above, and the scroll ends with room to spare */
html body.mos #mHome #hero:not(.k-playing):not(.k-intro) .hq-idle-hint{flex:0 0 auto;margin:6px 0 0;padding-top:10px;border-top:1px solid rgba(16,48,79,.12)}
html body.mos.mos-dark #mHome #hero:not(.k-playing):not(.k-intro) .hq-idle-hint{border-top-color:rgba(255,255,255,.1)}
html body.mos #mHome #hero .hero-quote.hq-idle:not(.hq-wait) .hq-all{padding-bottom:28px}
/* phone: "Swipe for more" stays in the footer while the song plays (full lyrics only) */
html body.mos #mHome #hero .hq-sw::before{content:' · '}
html body.mos:not(.hero-all) #mHome #hero .hq-sw{display:none}
html body.mos.hero-all #mHome #hero:is(.k-playing,.k-intro) .hq-idle-hint:has(.hq-sw){display:block!important;flex:0 0 auto;margin:6px 0 0;padding-top:10px;border-top:1px solid rgba(16,48,79,.12);
  font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.02em;text-align:center;color:#3b5874}
html body.mos.mos-dark.hero-all #mHome #hero:is(.k-playing,.k-intro) .hq-idle-hint:has(.hq-sw){border-top-color:rgba(255,255,255,.1);color:rgba(232,238,245,.72)}
html body.mos #mHome #hero:is(.k-playing,.k-intro) .hq-idle-hint .hq-pp{display:none}
html body.mos #mHome #hero:is(.k-playing,.k-intro) .hq-sw::before{content:none}
/* phone: the full lyric as swipe pages — one section per page, dots beneath */
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait) .hq-all{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 0 12px}
html body.mos #mHome #hero .hq-all .hq-sec{flex:0 0 100%;min-width:0;margin:0;padding:0 4px 16px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;scroll-snap-align:start;scroll-snap-stop:always}
/* a page always has room for its heading + one lyric line wrapped to two lines (+ pronunciation/translation) — never clipped */
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait) .hq-all{min-height:0}
html body.mos #mHome #hero .hq-all .hq-sec::-webkit-scrollbar,html body.mos #mHome #hero .hq-all::-webkit-scrollbar{display:none}
html body.mos #mHome #hero .hq-all .hq-sec-t{margin-bottom:8px}
/* whatever space a line wrap leaves goes to the page's middle, not its bottom */
html body.mos #mHome #hero .hq-all .hq-sec{display:flex;flex-direction:column;justify-content:safe center}
html body.mos #mHome #hero .hq-al-o{font-size:calc(19px * var(--hqfit,1))}
html body.mos #mHome #hero .hq-al-tr{font-size:calc(15.5px * var(--hqfit,1))}
/* a section taller than the window scrolls rather than shrinking past the readable floor (see fitHeroLyrics) */
html body.mos #mHome #hero .hq-all .hq-sec{overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
html body.mos #mHome #hero .hq-all .hq-sec::-webkit-scrollbar{display:none}
html body.mos #mHome #hero .hq-al-ph{display:none}
html body.mos #mHome #hero .hq-al{grid-template-columns:minmax(0,1fr)}
html body.mos.lv-tr #mHome #hero .hq-al{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
html body.mos #mHome #hero .hq-dots{display:none}
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait):has(.hq-all:not(:empty)) .hq-dots:has(i+i){display:flex;flex:0 0 auto;justify-content:center;gap:2px;margin-top:2px}
html body.mos #mHome #hero .hq-dots i{width:20px;height:20px;display:grid;place-items:center;cursor:pointer}
html body.mos #mHome #hero .hq-dots i::after{content:'';width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.25;transition:width .25s ease,opacity .25s ease}
html body.mos #mHome #hero .hq-dots i.on::after{width:16px;opacity:.8}
html.rm body.mos #mHome #hero .hq-dots i::after{transition:none}
.hq-ctx{display:none}
html body #hero .hq-ctx{display:flex;flex-direction:column;gap:12px}
html body #hero .hq-before:not(:empty){margin-bottom:20px}
html body #hero .hq-after:not(:empty){margin-top:20px}
html body #hero .hq-cl{margin:0;display:flex;flex-direction:column;gap:3px;opacity:.6;transition:opacity .3s ease}
html body #hero .hq-after .hq-cl+.hq-cl{opacity:.42}
html body #hero .hq-cl-o{font-family:var(--k-disp);font-size:clamp(18px,1.35vw,22px);line-height:1.25;text-wrap:balance}
html body #hero .hq-cl-tr{font-family:var(--ui);font-size:13px;line-height:1.4;color:#3b5874}
html body:is(:not(.sky-day):not(.mos),.mos.mos-dark) #hero .hq-cl-tr{color:rgba(232,238,245,.78)}
html body:not(.lv-o) #hero .hq-cl-o,html body:not(.lv-tr) #hero .hq-cl-tr{display:none}
:is(.lp-wait,.lo-wait) .lw-cd{display:none!important}
:is(.lp-wait,.lo-wait) .lw-k{letter-spacing:.08em;text-transform:none;font-size:13px;opacity:.8}
:is(.lp-wait,.lo-wait) .lw-pv{opacity:.85;font-family:var(--k-disp)}
/* nearby lines readable; no pointer where a tap does nothing */
#lyricsPanel.k-on .lp-line{opacity:.8;cursor:default}
#lyricsPanel.k-on .lp-line.ll-past{opacity:.68}
#lyricsOverlay.k-on .lo-line{opacity:.8;cursor:default}
#lyricsOverlay.k-on .lo-line.ll-past{opacity:.68}
body.mos #lyricsOverlay.k-on .lo-line{opacity:.8}
body.mos #lyricsOverlay.k-on .lo-line.ll-past{opacity:.68}
:is(#lyricsPanel .lp-line,#lyricsOverlay .lo-line).ll-active{opacity:1!important}
/* Resume following (desktop full lyrics) */
#lyricsPanel{position:relative}
.lx-resume{display:none;position:absolute;left:50%;bottom:16px;z-index:8;transform:translateX(-50%);align-items:center;gap:6px;min-height:40px;padding:0 16px 0 12px;
  border:0;border-radius:999px;background:var(--theme,#1e5a96);color:var(--themeInk,#fff);font-family:var(--ui);font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
.lx-resume.on{display:inline-flex}
.lx-resume svg{width:16px;height:16px;fill:currentColor}
.lx-resume:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* the end of the song, under the last line */
.lx-end{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:28px auto 8px;padding:0 12px}
body.lx-ended .lx-end{display:flex}
body.lx-ended :is(#lyricsPanel,#lyricsOverlay) :is(.lp-line,.lo-line){opacity:1}
.lx-b{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(16,48,79,.2);
  background:#fff;color:#0b2742;font-family:var(--ui);font-size:14px;font-weight:600;cursor:pointer;text-align:start}
.lx-b[hidden]{display:none}
.lx-b svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.lx-next{padding:4px 18px 4px 4px;max-width:100%}
.lx-cov{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.lx-tx{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.lx-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3b5874}
.lx-t{font-family:var(--k-disp);font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
body:not(.sky-day):not(.mos) .lx-b{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#f2f5f8}
body:not(.sky-day):not(.mos) .lx-k{color:rgba(238,242,246,.72)}
body.mos .lx-b{background:var(--m-tile);border-color:transparent;color:var(--m-ink)}
body.mos .lx-k{color:var(--m-mute)}
.lx-b:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* three-column layout: the small panel has no fixed height, so it shows the sung line and the next one */
@media (min-width:960px){
html body:not(.stage):not(.mos) #hero .hq-before{display:none}
html body:not(.stage):not(.mos) #hero .hq-after .hq-cl+.hq-cl{display:none}
html body:not(.stage):not(.mos) #hero .hq-after:not(:empty){margin-top:14px}
}

/* phone home: the lyrics window matches the white, square panels */
html body.mos #mHome #hero{border-radius:0!important}
html body.mos:not(.mos-dark) #mHome #hero{background:#fff!important}
html body.mos:not(.mos-dark) #mHome #hero{border-color:rgba(11,39,66,.06)!important;box-shadow:0 1px 2px rgba(11,39,66,.06),0 8px 24px -10px rgba(11,39,66,.18),0 24px 48px -28px rgba(11,39,66,.22)!important}
/* phone, song playing: only the line being sung, centred in the window */
html body.mos #mHome #hero.k-playing .hero-quote:not(.hq-wait) :is(.hq-before,.hq-after){display:none!important}
html body.mos #mHome #hero.k-playing .hero-quote.hq-wait .hq-before{display:none!important}
html body.mos #mHome #hero.k-playing .hero-quote{justify-content:center}

/* phone home: the lyrics header is one tidy row — the mode switch fills it (equal halves), gear at the end; the "Lyrics" title it repeated is dropped */
body.mos #mHome #hero .hlh-row{display:flex;align-items:center;gap:8px}
body.mos #mHome #hero .hlh-row::after{content:none}
body.mos #mHome #hero .lyr-mode{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:rgba(11,39,66,.07)}
body.mos #mHome #hero .lyr-mode .lm-seg{min-height:34px;padding:0 10px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mos #mHome #hero .hl-gear{flex:0 0 auto;width:40px;height:40px}
/* phone home: bigger lyric type — the window has room for it (scrolls in Lyrics mode) */
body.mos #mHome #hero .hq-cl-o{font-size:20px;line-height:1.35}
body.mos #mHome #hero .hq-cl-tr{font-size:17px;line-height:1.4}
body.mos #mHome #hero .hq-text{font-size:29px}
body.mos #mHome #hero .hq-tr{font-size:18px}
/* phone: no mode switch — playing shows the sung line, otherwise the full lyrics (js/mobile.js gateLyr) */
body.mos #mHome #hero .lyr-mode{display:none!important}
body.mos #mHome #hero .hlh-row{display:none!important}
/* playing: the sung line grows to fill the window (sized from the window itself) */
html body.mos #mHome #hero.k-playing .hero-quote:not(.hq-wait){container-type:size}
html body.mos #mHome #hero.k-playing .hero-quote:not(.hq-wait) .hq-text{font-size:clamp(26px,min(8.5cqw,20cqh),46px);line-height:1.22;text-wrap:balance}
html body.mos #mHome #hero.k-playing .hero-quote:not(.hq-wait) .hq-ph{font-size:clamp(14px,min(4.2cqw,9cqh),22px)}
html body.mos #mHome #hero.k-playing .hero-quote:not(.hq-wait) .hq-tr{font-size:clamp(17px,min(5.2cqw,12cqh),28px);line-height:1.35;text-wrap:balance}
/* phone pager: ‹ dots › under the lyric pages (replaces the "Swipe for more" hint) */
#hero .hq-pg,html body.mos #mHome #hero .hq-pg{display:none}
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait):has(.hq-all:not(:empty)) .hq-pg:has(.hq-dots i+i){display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;margin-top:2px}
html body.mos.hero-all #mHome #hero .hq-pg .hq-dots{margin:0}
html body.mos #mHome #hero .hq-pg-b{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(11,39,66,.07);color:#0b2742;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body.mos #mHome #hero .hq-pg-b svg{width:20px;height:20px;fill:currentColor}
/* the pager sits in the window's flex column, never clipped: it keeps its row, the pages shrink */
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait) .hq-pg{flex-shrink:0}
html body.mos.hero-all #mHome #hero .hero-quote.hq-idle:not(.hq-wait) .hq-all{flex:1 1 0}
html body.mos #mHome #hero .hq-pg-next svg{transform:scaleX(-1)}
html[dir="rtl"] body.mos #mHome #hero .hq-pg-prev svg{transform:scaleX(-1)}
html[dir="rtl"] body.mos #mHome #hero .hq-pg-next svg{transform:none}
html body.mos #mHome #hero .hq-pg-b:active{background:rgba(11,39,66,.14)}
html body.mos #mHome #hero .hq-pg-b:disabled{opacity:.3;cursor:default}
html body.mos.mos-dark #mHome #hero .hq-pg-b{background:rgba(255,255,255,.1);color:#fff}
html body.mos #mHome #hero .hq-sw{display:none!important}
html body.mos.hero-all #mHome #hero:is(.k-playing,.k-intro) .hq-idle-hint:has(.hq-sw){display:none!important}
/* phone: lyrics settings are their own bottom sheet (moved to <body> by js/mobile.js); the song pauses while it's open */
body.mos > #heroLyrCtrls{display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;position:fixed;z-index:170;left:50%;bottom:0;width:min(520px,100vw);box-sizing:border-box;margin:0;
  max-height:calc(100dvh - 24px - var(--sat,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:14px 16px calc(20px + var(--sab,0px));border-radius:22px 22px 0 0;background:#fff;color:#0b2742;box-shadow:0 -18px 50px -20px rgba(10,30,56,.45);
  transform:translate(-50%,105%);visibility:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s}
body.mos.mos-lyrset > #heroLyrCtrls{transform:translate(-50%,0);visibility:visible}
body.mos > .mos-ls-scrim{position:fixed;inset:0;z-index:169;background:rgba(6,20,36,.4);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
body.mos.mos-lyrset > .mos-ls-scrim{opacity:1;visibility:visible}
html.rm body.mos > :is(#heroLyrCtrls,.mos-ls-scrim){transition:none}
body.mos.mos-dark > #heroLyrCtrls{background:#141a22;color:#fff}
/* the sample line at the top of the sheet — rows follow the same lv-* switches as the lyrics */
body.mos > #heroLyrCtrls > *{flex-shrink:0}
body.mos #heroLyrCtrls .mos-ls-prev{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:14px;background:rgba(11,39,66,.05);text-align:center}
body.mos #heroLyrCtrls .mos-ls-prev[hidden]{display:none}
body.mos #heroLyrCtrls .mos-ls-pk{font:700 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#3b5874;margin-bottom:4px}
body.mos #heroLyrCtrls .mos-ls-prev p{margin:0;unicode-bidi:plaintext;text-wrap:balance}
body.mos #heroLyrCtrls .mos-ls-o{font-family:var(--k-disp);font-size:22px;line-height:1.25;color:#0b2742}
body.mos #heroLyrCtrls .mos-ls-ph{font-family:var(--ui);font-style:italic;font-size:14px;color:#4c6a87}
body.mos #heroLyrCtrls .mos-ls-tr{font-family:var(--ui);font-size:16px;line-height:1.35;color:#26486b}
body.mos:not(.lv-o) #heroLyrCtrls .mos-ls-o,body.mos:not(.lv-ph) #heroLyrCtrls .mos-ls-ph,body.mos:not(.lv-tr) #heroLyrCtrls .mos-ls-tr{display:none}
body.mos #heroLyrCtrls .mos-ls-prev p:empty{display:none}
body.mos.mos-dark #heroLyrCtrls .mos-ls-prev{background:rgba(255,255,255,.06)}
body.mos.mos-dark #heroLyrCtrls .mos-ls-o{color:#fff}
body.mos.mos-dark #heroLyrCtrls :is(.mos-ls-ph,.mos-ls-tr,.mos-ls-pk){color:rgba(232,238,245,.78)}
body.mos #heroLyrCtrls .mos-ls-head{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px 2px}
body.mos #heroLyrCtrls .mos-ls-t{margin:0;font:600 17px/1.2 var(--ui);color:#0b2742}
body.mos #heroLyrCtrls .mos-ls-done{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:#0b2742;color:#fff;font:600 14px/1 var(--ui);cursor:pointer}
body.mos #heroLyrCtrls .hero-lyrtools{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:76px;width:auto;padding:10px 4px;border:1px solid rgba(11,39,66,.14);border-radius:14px;background:#fff;color:#3b5874;font:600 14px/1.15 var(--ui);text-align:center;white-space:normal;overflow:visible;cursor:pointer}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg::before{flex:0 0 auto;content:'';width:20px;height:20px;border-radius:6px;border:2px solid rgba(11,39,66,.3);box-sizing:border-box;background:#fff center/15px no-repeat}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg[aria-pressed="true"]{border-color:#0b2742;color:#0b2742;background:rgba(11,39,66,.04)}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg[aria-pressed="true"]::before{border-color:#0b2742;background-color:#0b2742;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
body.mos #heroLyrCtrls .hlh-lang{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:0 6px 0 14px;border:1px solid rgba(11,39,66,.14);border-radius:14px;box-sizing:border-box}
body.mos #heroLyrCtrls .hlh-k{font:600 15px/1 var(--ui);color:#0b2742;letter-spacing:0;text-transform:none}
html body.mos #heroLyrCtrls .hlh-lang select{text-transform:none;letter-spacing:0;min-height:44px;font:600 15px/1 var(--ui);color:#1e5a96;background:none;border:0}
body.mos.mos-dark > #heroLyrCtrls{background:#141a22;color:#fff}
body.mos.mos-dark #heroLyrCtrls :is(.mos-ls-t,.hlh-k){color:#fff}
body.mos.mos-dark #heroLyrCtrls .mos-ls-done{background:#fff;color:#0b2742}
html body.mos.mos-dark #heroLyrCtrls .hero-lyrtools .hlt-seg{background:rgba(255,255,255,.06);color:rgba(232,238,245,.8);border-color:rgba(255,255,255,.16)}
html body.mos.mos-dark #heroLyrCtrls .hero-lyrtools .hlt-seg[aria-pressed="true"]{color:#fff;border-color:#fff}
body.mos.mos-dark #heroLyrCtrls .hlh-lang{border-color:rgba(255,255,255,.16)}
/* outlines drawn as inset shadows: a site-wide rule forces border-color:transparent !important on .hlt-seg */
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg{box-shadow:inset 0 0 0 1px rgba(11,39,66,.16)}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #0b2742}
html body.mos.mos-dark #heroLyrCtrls .hero-lyrtools .hlt-seg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html body.mos.mos-dark #heroLyrCtrls .hero-lyrtools .hlt-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff}
html body.mos #heroLyrCtrls .hero-lyrtools .hlt-seg::after{content:none!important}
/* lyrics sheet: related site settings (language, theme) under a hairline */
body.mos #heroLyrCtrls .mos-ls-site{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(11,39,66,.1)}
body.mos #heroLyrCtrls .mos-ls-sk{font:700 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#3b5874;padding:0 2px 2px}
body.mos #heroLyrCtrls .mos-ls-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 6px 0 14px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(11,39,66,.14);box-sizing:border-box}
body.mos #heroLyrCtrls .mos-ls-rk{font:600 15px/1 var(--ui);color:#0b2742}
body.mos #heroLyrCtrls .mos-ls-lang{min-height:44px;max-width:60%;border:0;background:none;color:#1e5a96;font:600 15px/1 var(--ui);text-transform:none;letter-spacing:0;text-align:end;cursor:pointer}
body.mos #heroLyrCtrls .mos-ls-theme{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(11,39,66,.07)}
body.mos #heroLyrCtrls .mos-ls-theme button{min-height:38px;padding:0 12px;border:0;border-radius:999px;background:none;color:#3b5874;font:600 13px/1 var(--ui);cursor:pointer}
body.mos #heroLyrCtrls .mos-ls-theme button[aria-checked="true"]{background:#0b2742;color:#fff}
body.mos.mos-dark #heroLyrCtrls .mos-ls-site{border-top-color:rgba(255,255,255,.12)}
body.mos.mos-dark #heroLyrCtrls :is(.mos-ls-rk){color:#fff}
body.mos.mos-dark #heroLyrCtrls .mos-ls-sk{color:rgba(232,238,245,.7)}
body.mos.mos-dark #heroLyrCtrls .mos-ls-row{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
body.mos.mos-dark #heroLyrCtrls .mos-ls-lang{color:#9cc3ea}
body.mos.mos-dark #heroLyrCtrls .mos-ls-theme{background:rgba(255,255,255,.1)}
body.mos.mos-dark #heroLyrCtrls .mos-ls-theme button{color:rgba(232,238,245,.8)}
body.mos.mos-dark #heroLyrCtrls .mos-ls-theme button[aria-checked="true"]{background:#fff;color:#0b2742}
/* Hebrew: the handwritten lines ("נשארים בקשר", the slogans) in Gveret Levin — Caveat has no Hebrew letters */
html[lang="he"] :is(.mos-script,.mos-menu-foot,.ed-script,.sa-script,.mos-about-script,.mos-sign){font-family:'Gveret Levin','Caveat',cursive;font-weight:400}