/* The Lyrics tab in Better Lyrics' look (P810, D826; sheet/lyric-view.ts, plain-view.ts, lyrics-bar.ts). Better
   Lyrics is GPL-3.0: these rules are our own, written to its values. The panel stays dark in the light theme. */

/* Satoshi (Indian Type Foundry, ITF Free Font License 2.0, fonts/FFL-Satoshi.txt): Fontshare's own variable woff2,
   served unmodified, for the Lyrics tab's text only. */
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

.sheet[data-words] .sheet__body { background: #050506; color-scheme: dark; }
.sheet[data-words] .sheet__scroll { overscroll-behavior: contain; }

.lyr-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Past the edges by more than the blur: WebKit fades a blurred image's edges (P771). */
.lyr-backdrop__image {
  position: absolute;
  inset: -25%;
  width: 150%;
  height: 150%;
  object-fit: cover;
  transform: scale(1.2);
  filter: saturate(2) brightness(25%) blur(100px);
}

.lyr {
  --lyr-size: 48px;
  --lyr-dim: rgb(255 255 255 / 0.3);
  --lyr-lift: -3px;
  position: relative;
  /* The last line can still rise to 30% of the view. */
  padding: 24px 40px 70cqh;
  color: var(--lyr-dim);
  font-family: "Satoshi", var(--st-font), sans-serif;
  font-size: calc(var(--lyr-size) * var(--sheet-scale, 1));
  font-weight: 700;
  line-height: 1.333;
  text-align: left;
  overflow-wrap: anywhere;
}
@container sheet (max-width: 640px) { .lyr { --lyr-size: 28px; --lyr-lift: -2px; padding-inline: 16px; } }

/* 2rem around 3rem type: the same ratio at every size. Unlit lines: 30% white at 0.95 from their left edge. */
.lyr__line {
  padding: 0.667em 0.25em;
  transform: scale(0.95);
  transform-origin: left center;
  transition: transform 0.166s ease, color 0.5s ease;
}
.lyr__line[data-on] { color: #fff; transform: none; transition: transform 0.166s ease, color 0.33s ease; }
/* Singers (D834, Better Lyrics' alignment): other singers right, everyone together centred; the ♪ row follows. */
.lyr__line[data-side='right'] { text-align: right; transform-origin: right center; }
.lyr__line[data-side='centre'] { text-align: center; transform-origin: center center; }
.lyr-gap[data-side='right'] .lyr-gap__icon { margin-left: 0; margin-right: -0.333em; }
.lyr-gap[data-side='centre'] .lyr-gap__icon { margin-left: 0; }
/* Background vocals under their line: 0.75em, weight 500, the unlit colour at 78% (Better Lyrics'). */
.lyr__bg { display: block; margin-top: 0.1em; font-size: 0.75em; font-weight: 500; color: color-mix(in srgb, var(--lyr-dim) 78%, transparent); }
.lyr__line[data-on] .lyr__bg .lyr__unit[data-w='next'] { color: color-mix(in srgb, var(--lyr-dim) 78%, transparent); }

/* Better Lyrics' credits after the last line: max(0.4em, 12px), 0.2 while the song plays, 0.85 once it has ended,
   on hover, and from the start for plain words. */
.lyr-credits { margin: 0; padding: 0.667em 0.25em; cursor: default; opacity: 0.2; transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.lyr-credits__text { display: block; color: #fff; font-size: max(0.4em, 12px); }
.lyr[data-credits-focused] > .lyr-credits, .lyr-credits:hover { opacity: 0.85; }

/* A timed row plays from where it shows (D835): the pointer says so, save on the row being sung (Better Lyrics'). */
.lyr__line[role='button'] { cursor: pointer; }
.lyr__line[role='button'][data-on] { cursor: default; }
.lyr__line[role='button']:focus-visible { outline: 1px solid #fff; outline-offset: 2px; border-radius: 4px; }
.lyr__gap { min-height: 1.333em; }

.lyr__word, .lyr__unit { display: inline-block; }
/* A line leaving the highlight fades its words with it (Better Lyrics' highlight fade-out, 0.5 s). */
.lyr__line:not([data-on]) .lyr__unit { transition: color 0.5s ease; }
.lyr__line[data-on] .lyr__unit[data-w='next'] { color: var(--lyr-dim); }
.lyr__line[data-on] .lyr__unit[data-w='sung'] { color: #fff; }
/* The swipe: white up to --edge (−20% → 140% of the unit over its time), softening to 30% over the next 10%. */
.lyr__line[data-on] .lyr__unit[data-w='singing'] {
  background: linear-gradient(90deg, #fff var(--edge, -20%), var(--lyr-dim) calc(var(--edge, -20%) + 10%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The glow, 0.8rem → 0 (set per frame), white at 50%. Only where set: a 0 drop shadow would brighten the text. */
.lyr__line[data-on] .lyr__unit[style*='--glow'] { filter: drop-shadow(0 0 var(--glow) rgb(255 255 255 / 0.5)); }

@keyframes lyr-wobble {
  0% { transform: none; }
  12.5% { transform: translateX(0.05em) scaleX(1.025); animation-timing-function: ease-in-out; }
  75% { transform: none; animation-timing-function: ease-out; }
  100% { transform: none; }
}
@keyframes lyr-rise {
  0% { transform: none; }
  45% { transform: translateY(-0.05em) scale(1.11); }
  100% { transform: translateY(-0.02em); }
}

/* Line lyrics: as the line lights, every word glows (white 50%, 0.8rem → 0 over 1.2 s) — Better Lyrics' line mode. */
@keyframes lyr-lglow {
  from { filter: drop-shadow(0 0 0.8rem rgb(255 255 255 / 0.5)); }
  to { filter: drop-shadow(0 0 0 rgb(255 255 255 / 0)); }
}
/* Line lyrics light word by word, left to right: each word 50 ms after the one before (Better Lyrics' line-synced
   animation delay), fading in over 0.33 s; unlit, they dim over 0.5 s all together. */
.lyr[data-type='line'] .lyr__lword { color: var(--lyr-dim); transition: color 0.5s ease; }
.lyr[data-type='line'] .lyr__line[data-on] .lyr__lword {
  color: #fff;
  transition: color 0.33s ease calc(var(--i, 0) * 50ms);
  animation: lyr-lglow 1.2s ease calc(var(--i, 0) * 50ms);
}
/* The ♪ row in an instrumental gap over 5 s (Better Lyrics' look): one line tall, the dim note under a white one that
   fills from the bottom while the gap plays, its wavy top flattening; the fill fades in 150 ms and out in 0.5 s. */
.lyr-gap__icon { width: 1.333em; height: 1em; margin-left: -0.333em; overflow: visible; vertical-align: middle; }
.lyr-gap__bg { fill: var(--lyr-dim); }
.lyr-gap__fill { fill: #fff; opacity: 0; transition: opacity 0.5s ease; }
.lyr-gap[data-on] .lyr-gap__fill { opacity: 1; transition: opacity 150ms ease; }
.lyr-gap__rise { transform: translateY(78%); }
.lyr-gap__wave { transform-box: fill-box; transform-origin: bottom; transform: scaleY(1.2); }
@keyframes lyr-wave {
  from { d: path('M -4 3 Q 1 2 5 3 Q 10 4 14 3 Q 18 2 22 3 Q 26 4 30 3 L 30 4 L -4 4 Z'); }
  to { d: path('M -4 3 Q 1 4 5 3 Q 10 2 14 3 Q 18 4 22 3 Q 26 2 30 3 L 30 4 L -4 4 Z'); }
}

@media (prefers-reduced-motion: no-preference) {
  .lyr[data-type='line'] .lyr__line[data-on] .lyr__lword {
    animation: lyr-lglow 1.2s ease calc(var(--i, 0) * 50ms), lyr-wobble 1s ease calc(var(--i, 0) * 50ms);
  }
  .lyr-gap[data-on] .lyr-gap__wave { animation: lyr-wave 1.25s ease-in-out infinite alternate; }
  .lyr[data-type='word'] .lyr__line[data-on] .lyr__word:is([data-w='singing'], [data-w='sung']) { animation: lyr-wobble 1s ease; }
  .lyr[data-type='word'] .lyr__line[data-on] .lyr__ch:is([data-w='singing'], [data-w='sung']) { animation: lyr-rise 0.9s ease-in-out forwards; }
  /* TTML: the word lifts as its first syllable starts and settles after its last (P738's lift). */
  .lyr[data-type='ttml'] .lyr__line[data-on] .lyr__word { transition: transform 0.3s ease; }
  .lyr[data-type='ttml'] .lyr__line[data-on] .lyr__word[data-w='singing'] { transform: translateY(var(--lyr-lift)); }
}
/* Reduced motion (as Better Lyrics): no scale, wobble, lift or wave; the fades and the glow stay. */
@media (prefers-reduced-motion: reduce) {
  .lyr__line, .lyr__line[data-on] { transform: none; }
}

/* ---- Over the panel (P810): Resume autoscroll at the top, the lyrics bar bottom right ----------------------- */
/* Better Lyrics' values (its dock and resume button), written here: a glass pill sized to its content. */
.lyr-overlay { position: absolute; inset: 0; pointer-events: none; }
.lyr-overlay > * { pointer-events: auto; }
.lyr-resume {
  position: absolute;
  top: 12px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #fff;
  font: 600 var(--lyr-resume-size, 28px)/1.1 "Satoshi", var(--st-font), sans-serif;
  cursor: pointer;
  transform: translate(-50%, 0);
  transition: opacity 0.15s linear 0.05s, transform 0.2s cubic-bezier(0.5, 1, 0.89, 1), text-shadow 0.25s ease;
}
.lyr-resume:hover { text-shadow: 0 0 1.5rem rgb(255 255 255 / 0.5); }
.lyr-resume[hidden] { display: inline-flex; opacity: 0; pointer-events: none; transform: translate(-50%, -3em); transition: opacity 0.1s linear, transform 0.15s ease-in; }
.lyr-resume .st-icon { width: 0.7em; height: 0.7em; }
.lyr-resume:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
@container sheet (max-width: 640px) { .lyr-resume { --lyr-resume-size: 16px; } }

.lyr-bar {
  /* The bar's ink: white over the Lyrics panel; the theme's text where it docks in the sheet's footer. */
  --lyr-ink: #fff;
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px;
  border-radius: 14px;
  color: color-mix(in srgb, var(--lyr-ink) 60%, transparent);
  font: 500 12px/1 "Satoshi", var(--st-font), sans-serif;
  white-space: nowrap;
  isolation: isolate;
}
/* The bar's glass sits on a layer behind it, not on the bar: a backdrop filter on the bar would stop the clock menu
   inside it from blurring what's behind (a nested backdrop only sees its parent's). */
.lyr-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.04);
  box-shadow: rgb(0 0 0 / 0.2) 0 6px 18px -8px, inset rgb(255 255 255 / 0.1) 0 1px 0 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@container sheet (max-width: 640px) { .lyr-bar { right: 12px; bottom: 12px; max-width: calc(100% - 24px); } }
.lyr-bar__provider, .lyr-bar__sync { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.lyr-bar__provider { color: color-mix(in srgb, var(--lyr-ink) 82%, transparent); }
.lyr-bar__sync { color: color-mix(in srgb, var(--lyr-ink) 70%, transparent); }
.lyr-bar__label { display: inline-flex; align-items: center; gap: 2px; min-width: 0; margin: 0 2px; }
.lyr-bar__kind { display: inline-flex; padding: 0 2px; color: var(--lyr-kind, color-mix(in srgb, var(--lyr-ink) 70%, transparent)); }
.lyr-bar__kind[data-type='ttml'] { --lyr-kind: #fde69b; }
.lyr-bar__kind[data-type='word'] { --lyr-kind: #aad1ff; }
.lyr-bar__kind[data-type='line'] { --lyr-kind: #c9f8da; }
.lyr-bar__source { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; }
.lyr-bar__count { margin-left: 6px; color: color-mix(in srgb, var(--lyr-ink) 45%, transparent); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.lyr-bar__divider { align-self: stretch; width: 1px; margin: 3px 2px; background: color-mix(in srgb, var(--lyr-ink) 12%, transparent); }
.lyr-bar__btn, .lyr-bar__timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--lyr-ink) 60%, transparent);
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lyr-bar__timer { color: inherit; opacity: 0.82; }
.lyr-bar__timer:hover, .lyr-bar__timer[data-on] { opacity: 1; background: color-mix(in srgb, var(--lyr-ink) 16%, transparent); }

/* The source name opens the list of sources (Better Lyrics' picker, P810). */
.lyr-bar__pick { padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.lyr-bar__pick:hover, .lyr-bar__pick[data-on] { background: color-mix(in srgb, var(--lyr-ink) 12%, transparent); color: var(--lyr-ink); }
.lyr-bar__pick:focus-visible { outline: 1px solid var(--lyr-ink); outline-offset: 1px; }
.lyr-list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: min(60vh, 340px);
  overflow-y: auto;
  padding: 5px;
  border-radius: 11px;
  background: rgb(20 20 20 / 0.55);
  box-shadow: rgb(0 0 0 / 0.28) 0 10px 28px -10px, inset rgb(255 255 255 / 0.1) 0 1px 0 0;
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}
.lyr-list[hidden] { display: none; }
.lyr-list__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgb(255 255 255 / 0.82);
  font: 500 13px/1.2 "Satoshi", var(--st-font), sans-serif;
  text-align: left;
  cursor: pointer;
}
.lyr-list__finding { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: color-mix(in srgb, var(--lyr-ink) 50%, transparent); font-size: 11px; font-weight: 500; }
.lyr-list__finding > .lyr-spin { position: relative; flex: none; margin: 0; }
.lyr-list__row:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.lyr-list__row:focus-visible { outline: 1px solid #fff; outline-offset: -1px; }
.lyr-list__row[aria-selected='true'] { background: rgb(253 230 155 / 0.14); color: #fde69b; }
.lyr-list__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-list__type { flex: 0 0 auto; color: rgb(255 255 255 / 0.4); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.lyr-list__row[aria-selected='true'] .lyr-list__type { color: rgb(253 230 155 / 0.6); }

/* Better Lyrics' clock menu, above the bar: Global, Richsync, Linesync and Reset. */
.lyr-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border-radius: 11px;
  background: rgb(255 255 255 / 0.07);
  box-shadow: rgb(0 0 0 / 0.28) 0 10px 28px -10px, inset rgb(255 255 255 / 0.1) 0 1px 0 0;
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lyr-menu[hidden] { display: none; }
.lyr-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 2px 8px; border-radius: 7px; }
.lyr-menu__label { color: rgb(255 255 255 / 0.82); font-size: 12px; font-weight: 500; white-space: nowrap; user-select: none; }
.lyr-menu__controls { display: inline-flex; align-items: center; gap: 2px; }
.lyr-menu .lyr-bar__btn { width: 24px; height: 24px; }
.lyr-menu__value { min-width: 34px; color: rgb(255 255 255 / 0.85); font-variant-numeric: tabular-nums; text-align: center; }
.lyr-menu__value[data-on] { color: #fff; font-weight: 600; }
.lyr-menu__reset { margin-top: 4px; padding: 7px 8px; border: 0; border-radius: 7px; background: rgb(255 255 255 / 0.08); color: rgb(255 255 255 / 0.72); font: inherit; font-weight: 600; cursor: pointer; }
.lyr-menu__reset:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.lyr-bar__btn:hover, .lyr-bar__offset:hover { background: color-mix(in srgb, var(--lyr-ink) 16%, transparent); color: var(--lyr-ink); }
.lyr-bar__btn:focus-visible, .lyr-bar__offset:focus-visible { outline: 1px solid var(--lyr-ink); outline-offset: 1px; }
.lyr-bar .st-icon { width: 14px; height: 14px; }
.lyr-bar__offset {
  min-width: 40px;
  height: 28px;
  padding: 0 2px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: color-mix(in srgb, var(--lyr-ink) 85%, transparent);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}
.lyr-bar__offset[data-on] { color: var(--lyr-ink); font-weight: 600; }

/* The phone layout (phone-layout.ts's query): a compact bar in the corner just above the player bar, 24px buttons
   with a 44px tall hit area, and no 1/1 count (the name stays: it's the credit). */
@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  .lyr-bar { right: 6px; bottom: 6px; height: 32px; gap: 2px; max-width: calc(100% - 12px); padding: 4px; border-radius: 10px; font-size: 11px; }
  .lyr-bar .st-icon { width: 12px; height: 12px; }
  .lyr-bar__source { font-size: 11px; }
  .lyr-bar__label { margin: 0 1px; }
  .lyr-bar__btn, .lyr-bar__timer, .lyr-bar__offset { position: relative; height: 24px; border-radius: 7px; }
  .lyr-bar__btn, .lyr-bar__timer { width: 24px; }
  .lyr-bar__offset { min-width: 34px; }
  .lyr-bar__btn::before, .lyr-bar__timer::before, .lyr-bar__offset::before { content: ''; position: absolute; inset: -10px -1px; }
  .lyr-bar__count { margin-left: 4px; }
  .lyr-bar__count[data-single] { display: none; }
  .lyr-bar__divider { margin: 2px 1px; }
}

/* The phone's fold (P935): folded, the bar is its chip alone, on the bar's own glass (its ::before); open, the bar as
   before with ˅ at its end. Docked in the laptop footer it always shows open: no chip, no ˅. No transition. */
/* Folded is the bar's data-folded, never [hidden] on the content: .sheet [hidden] is display: none !important, which
   would empty the docked laptop bar. */
.lyr-bar__content { display: contents; }
.lyr-bar[data-folded]:not(.lyr-bar--docked) > .lyr-bar__content, .lyr-bar:not([data-folded]) > .lyr-bar__chip, .lyr-bar--docked > .lyr-bar__chip, .lyr-bar--docked :is(.lyr-bar__fold, .lyr-bar__fold-divider) { display: none; }
.lyr-bar[data-folded]:not(.lyr-bar--docked) { padding: 0; }
.lyr-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-width: 0;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: color-mix(in srgb, var(--lyr-ink) 82%, transparent);
  font: 500 11px/1 "Satoshi", var(--st-font), sans-serif;
  cursor: pointer;
}
.lyr-bar__chip .lyr-bar__kind { padding: 0; }
.lyr-bar__chip .lyr-bar__source { font-size: 11px; }
.lyr-bar__chip > .st-icon { flex: none; color: color-mix(in srgb, var(--lyr-ink) 60%, transparent); }
.lyr-bar__chip:focus-visible { outline: 1px solid var(--lyr-ink); outline-offset: 1px; }
.lyr-bar__fold { background: color-mix(in srgb, var(--lyr-ink) 8%, transparent); }

/* P810: the getter still finding more versions, what it found, and the lyrics fading in. */
.lyr-bar__kind[data-finding] { position: relative; }
.lyr-bar__kind[data-finding] > .st-icon { visibility: hidden; }
/* A true circle in the icon's box: a 270° tail fading in (conic gradient), cut to a 1.75 px ring (radial mask). */
.lyr-spin {
  position: absolute;
  inset: 0;
  width: 14px;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  background: conic-gradient(from 90deg, transparent 0 25%, color-mix(in srgb, var(--lyr-ink) 70%, transparent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.75px), #000 calc(100% - 1.5px));
  animation: lyr-spin 0.9s linear infinite;
}
@keyframes lyr-spin { to { transform: rotate(360deg); } }
@keyframes lyr-breathe { 50% { opacity: 0.35; } }
.lyr-bar__finding { margin-left: 6px; color: color-mix(in srgb, var(--lyr-ink) 50%, transparent); font-size: 11px; font-weight: 500; }
@container sheet (max-width: 640px) { .lyr-bar__finding { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.lyr-bar__count[data-pulse] { animation: lyr-pulse 1.2s ease-out 2; }
@keyframes lyr-pulse { 0%, 100% { color: color-mix(in srgb, var(--lyr-ink) 45%, transparent); } 40% { color: #fde69b; } }
.lyr-found {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  border-radius: 11px;
  background: rgb(20 20 20 / 0.55);
  box-shadow: rgb(0 0 0 / 0.28) 0 10px 28px -10px, inset rgb(255 255 255 / 0.1) 0 1px 0 0;
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  color: #fde69b;
  font: 500 12px/1.2 "Satoshi", var(--st-font), sans-serif;
  white-space: nowrap;
  animation: lyr-found-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lyr-found__keep { padding: 4px 8px; border: 0; border-radius: 7px; background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.85); font: inherit; font-weight: 600; cursor: pointer; }
.lyr-found__keep:hover { background: rgb(255 255 255 / 0.18); color: #fff; }
.lyr-found__keep:focus-visible { outline: 1px solid #fff; outline-offset: 1px; }
@keyframes lyr-found-in { from { opacity: 0; transform: translateY(4px); } }
.lyr[data-arrived] { animation: lyr-arrive 0.45s ease-out; }
@keyframes lyr-arrive { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lyr-spin { animation: lyr-breathe 1.6s ease-in-out infinite; background: rgb(255 255 255 / 0.55); }
  .lyr-bar__count[data-pulse], .lyr-found, .lyr[data-arrived] { animation: none; }
}
/* P810 (D843): the admin song offset's note wraps; a style attribute is refused by the Studio's CSP. */
/* The admin clock menu: a stepper you can hold, Save as the one clear action, a quiet note (P810, D864; hold-repeat.ts). */
.lyr-menu:has(.lyr-menu__panel) { width: min(264px, calc(100vw - 24px)); padding: 12px; border-radius: 16px; background: rgb(28 24 26 / 0.82); }
.lyr-menu__panel { display: flex; flex-direction: column; gap: 12px; }
.lyr-menu__panel .lyr-menu__row { padding: 0; gap: 10px; }
.lyr-menu__label { display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 600; white-space: normal; }
.lyr-menu__label small { color: rgb(255 255 255 / 0.5); font-size: 11px; font-weight: 500; }
.lyr-menu__panel .lyr-menu__controls { gap: 4px; }
.lyr-menu__panel .lyr-bar__btn { width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / 0.1); color: #fff; }
.lyr-menu__panel .lyr-bar__btn:active { background: rgb(255 255 255 / 0.2); }
.lyr-menu__panel .lyr-menu__value { min-width: 58px; font-size: 17px; font-weight: 650; }
.lyr-menu__actions { display: flex; gap: 8px; }
.lyr-menu__actions .lyr-menu__reset { flex: 1 1 0; margin: 0; padding: 9px 8px; font-size: 13px; }
.lyr-menu__actions .lyr-menu__reset:first-child { background: #fde69b; color: #1b1608; }
.lyr-menu__actions .lyr-menu__reset:first-child:hover { background: #ffeeb4; }
.lyr-menu__actions .lyr-menu__reset:disabled { opacity: 0.45; cursor: default; }
.lyr-menu__note { display: block; min-height: 1.3em; margin: 0; color: rgb(255 255 255 / 0.55); font-size: 11.5px; line-height: 1.35; white-space: normal; }
/* A hold must not select text or open iOS's callout on the − / + buttons. */
.lyr-bar__btn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* Laptop: the bar docked at the right of the sheet panel's footer strip (sheet/index.ts). Its menus still open upward. */
/* Docked, the bar sits on the footer, light in the light theme: the theme's ink and darker type colours. Its menus
   open over the dark panel and keep white. */
.sheet__foot .lyr-bar--docked { --lyr-ink: var(--st-text); }
.sheet__foot .lyr-bar--docked .lyr-bar__kind[data-type='ttml'] { --lyr-kind: light-dark(#a16207, #fde69b); }
.sheet__foot .lyr-bar--docked .lyr-bar__kind[data-type='word'] { --lyr-kind: light-dark(#1d4ed8, #aad1ff); }
.sheet__foot .lyr-bar--docked .lyr-bar__kind[data-type='line'] { --lyr-kind: light-dark(#15803d, #c9f8da); }
.sheet__foot .lyr-bar--docked :is(.lyr-list, .lyr-menu, .lyr-found) { --lyr-ink: #fff; }
.sheet__foot .lyr-bar--docked { position: relative; right: auto; bottom: auto; z-index: 3; flex: 0 1 auto; min-width: 0; margin-left: auto; max-width: 100%; padding: 4px 6px; }
/* The follow switch keeps its size; the bar gives way (its source name ellipsizes). */
.sheet__foot:has(.lyr-bar--docked) > .sheet__follow { flex: none; }
.sheet__foot .lyr-bar--docked .lyr-bar__provider { min-width: 0; flex: 0 1 auto; }
/* Docked, the pill stays its own content size: a slimmer sync group (24 px controls, tighter gaps) lets the whole source
   name fit a 379 px panel with the usual 16 px inset. */
.sheet__foot .lyr-bar--docked :is(.lyr-bar__btn, .lyr-bar__timer) { width: 24px; height: 24px; }
.sheet__foot .lyr-bar--docked .lyr-bar__sync { gap: 2px; }
.sheet__foot .lyr-bar--docked .lyr-bar__offset { min-width: 36px; }
.sheet__foot:has(.lyr-bar--docked) { overflow: visible; }
.sheet__foot:has(.lyr-bar--docked) > .sheet__spacer { display: none; }
@container sheet (max-width: 520px) { .sheet__foot:has(.lyr-bar--docked) .sheet__follow > span { display: none; } }