/* Encore: a concert-stage song page. The song's artwork lights the room, the
   score glows under a spotlight, and karaoke follows a bouncing ball. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');

@property --eq-a { syntax: '<percentage>'; inherits: true; initial-value: 40%; }
@property --eq-b { syntax: '<percentage>'; inherits: true; initial-value: 80%; }
@property --eq-c { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
@property --eq-d { syntax: '<percentage>'; inherits: true; initial-value: 30%; }

body[data-song-style='encore'] {
  --stage: #110e1d;
  --card: #1a1530;
  --card-raised: #231c3d;
  --ink: #f8f1e7;
  --muted: #a8a0c0;
  --faint: #6f6889;
  --line: #ffffff17;
  --paper: #1a1530;
  --green: #ff5a92;
  --pink: #ff5a92;
  --coral: #ff8a5c;
  --amber: #ffba4a;
  --cyan: #45e0cf;
  --hot: linear-gradient(95deg, var(--pink), var(--coral) 55%, var(--amber));
  --display: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--stage);
  color: var(--ink);
  font: 450 15px/1.5 'DM Sans', sans-serif;
  color-scheme: dark;
}
/* The artwork, blown up and blurred, becomes the stage lighting. */
body[data-song-style='encore']::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -120px -10% auto;
  height: 1150px;
  background:
    radial-gradient(60% 50% at 20% 20%, #ff5a9240, transparent 70%),
    radial-gradient(50% 45% at 85% 10%, #45e0cf26, transparent 70%),
    var(--song-art, none) center / cover;
  filter: blur(80px) saturate(1.7);
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, #000 25%, transparent 95%);
  pointer-events: none;
}
/* Film grain keeps the dark stage from looking flat. */
body[data-song-style='encore']::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
body[data-song-style='encore'] ::selection {
  background: #ff5a9266;
}
body[data-song-style='encore'] button:focus-visible,
body[data-song-style='encore'] a:focus-visible {
  outline-color: var(--amber);
}

/* Header */
body[data-song-style='encore'] .site-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
body[data-song-style='encore'] .site-header .brand,
body[data-song-style='encore'] .header-library {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
}
body[data-song-style='encore'] .header-library:hover {
  color: var(--amber);
}
body[data-song-style='encore'] .header-search-field {
  border-color: var(--line);
  background: #ffffff0d;
  backdrop-filter: blur(10px);
}
body[data-song-style='encore'] .header-search-field:focus-within {
  border-color: #ff5a9299;
  box-shadow: 0 0 0 3px #ff5a9226;
}
body[data-song-style='encore'] .header-search-icon,
body[data-song-style='encore'] .header-search #clear-search {
  color: var(--muted);
}
body[data-song-style='encore'] .header-search input::placeholder {
  color: var(--faint);
}
body[data-song-style='encore'] .header-search .header-search-submit {
  background: #ffffff14;
  color: var(--ink);
}
body[data-song-style='encore'] .header-search .header-search-submit:hover,
body[data-song-style='encore'] .header-search #clear-search:hover {
  background: #ffffff24;
}
body[data-song-style='encore'] #header-results {
  background: var(--card-raised);
  box-shadow: 0 20px 50px #0008;
}
body[data-song-style='encore'] #header-results a:hover,
body[data-song-style='encore'] #header-results a:focus {
  background: #ffffff12;
}

/* Breadcrumb and debug pickers */
body[data-song-style='encore'] main {
  padding-top: 26px;
}
body[data-song-style='encore'] .song-breadcrumb {
  color: var(--muted);
  font-size: 13px;
}
body[data-song-style='encore'] .song-breadcrumb a {
  color: var(--muted);
}
body[data-song-style='encore'] .song-breadcrumb a:hover {
  color: var(--ink);
}
body[data-song-style='encore'] .song-style-picker small {
  color: var(--pink);
}
body[data-song-style='encore'] select {
  border: 1px solid var(--line);
  background-color: #ffffff0f;
  color: var(--ink);
}
body[data-song-style='encore'] select option {
  background: var(--card-raised);
  color: var(--ink);
}

/* Hero: the record sleeve with its vinyl sliding out */
body[data-song-style='encore'] .song-overview > .hero {
  position: relative;
  padding: 18px 0 8px;
  background: none;
  border: 0;
  box-shadow: none;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 30px 88px;
  align-items: center;
}
body[data-song-style='encore'] .hero .artwork-cover {
  position: relative;
  z-index: 0;
  width: 168px;
  height: 168px;
  overflow: visible;
  border: 0;
  border-radius: 10px;
  background: var(--card-raised);
  box-shadow:
    0 24px 50px -12px #000c,
    0 0 0 1px #ffffff1a;
  transform: none;
}
body[data-song-style='encore'] .hero .artwork-cover img {
  z-index: 1;
  border-radius: 10px;
}
body[data-song-style='encore'] .hero .artwork-cover > span {
  z-index: 1;
  color: var(--pink);
  font-size: 54px;
}
body[data-song-style='encore'] .hero .artwork-cover::before,
body[data-song-style='encore'] .hero .artwork-cover::after {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  translate: 46% 0;
  pointer-events: none;
}
/* The record: grooves over a two-tone label, so its spin is visible. */
body[data-song-style='encore'] .hero .artwork-cover::before {
  z-index: -1;
  background:
    radial-gradient(circle closest-side, #0b0912 0 5%, transparent 5.5%),
    radial-gradient(
      circle closest-side,
      transparent 0 33%,
      #0b0912 33% 35%,
      #1c1728 35% 45%,
      #0e0b17 45% 46%,
      #201a2e 46% 58%,
      #0e0b17 58% 59%,
      #1c1728 59% 72%,
      #100c1a 72% 73%,
      #1e192b 73% 91%,
      #08070d 91% 100%
    ),
    conic-gradient(var(--pink) 0 25%, var(--amber) 0 50%, var(--pink) 0 75%, var(--amber) 0);
  box-shadow: 0 18px 40px -10px #000;
  transition: translate 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
  animation: encore-spin 1.8s linear infinite paused;
}
/* The stationary sheen that sells the vinyl. */
body[data-song-style='encore'] .hero .artwork-cover::after {
  z-index: -1;
  background: conic-gradient(
    from 20deg,
    transparent 0 8%,
    #ffffff1f 13%,
    transparent 18% 50%,
    #ffffff17 63%,
    transparent 68%
  );
  mask-image: radial-gradient(circle closest-side, transparent 33%, #000 34%);
  transition: translate 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
}
body[data-song-style='encore'].song-playing .hero .artwork-cover::before {
  animation-play-state: running;
}
body[data-song-style='encore'].song-playing .hero .artwork-cover::before,
body[data-song-style='encore'].song-playing .hero .artwork-cover::after {
  translate: 58% 0;
}
@keyframes encore-spin {
  to { rotate: 1turn; }
}

body[data-song-style='encore'] .hero .identity::before {
  content: 'Now playing';
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 22px;
  color: var(--amber);
  font: 700 11px/1.4 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* A four-bar equalizer that dances while the song plays. */
  background:
    linear-gradient(var(--amber), var(--amber)) 0 100% / 3px var(--eq-a) no-repeat,
    linear-gradient(var(--coral), var(--coral)) 4px 100% / 3px var(--eq-b) no-repeat,
    linear-gradient(var(--pink), var(--pink)) 8px 100% / 3px var(--eq-c) no-repeat,
    linear-gradient(var(--amber), var(--amber)) 12px 100% / 3px var(--eq-d) no-repeat;
  animation: encore-eq 0.9s ease-in-out infinite alternate paused;
}
body[data-song-style='encore'].song-playing .hero .identity::before {
  animation-play-state: running;
}
@keyframes encore-eq {
  0% { --eq-a: 30%; --eq-b: 90%; --eq-c: 45%; --eq-d: 70%; }
  33% { --eq-a: 95%; --eq-b: 35%; --eq-c: 80%; --eq-d: 25%; }
  66% { --eq-a: 50%; --eq-b: 70%; --eq-c: 20%; --eq-d: 95%; }
  100% { --eq-a: 80%; --eq-b: 25%; --eq-c: 100%; --eq-d: 50%; }
}
body[data-song-style='encore'] .hero .identity h1 {
  margin: 0;
  color: var(--ink);
  font: 800 clamp(40px, 5.2vw, 72px) / 0.95 var(--display);
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 6px 40px #0008;
}
body[data-song-style='encore'] .identity #artist {
  margin: 10px 0 18px;
  color: var(--muted);
  font: 600 20px/1.3 var(--display);
  letter-spacing: -0.01em;
}
body[data-song-style='encore'] #artist a {
  color: inherit;
  text-decoration-color: #ff5a9266;
  text-underline-offset: 4px;
}
body[data-song-style='encore'] #artist a:hover {
  color: var(--ink);
}
body[data-song-style='encore'] .hero .facts {
  gap: 8px;
}
body[data-song-style='encore'] .song-fact {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff0a;
  backdrop-filter: blur(8px);
}
body[data-song-style='encore'] .fact-label {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-song-style='encore'] .fact-value {
  color: var(--ink);
  font: 700 14px/1.2 var(--display);
}
body[data-song-style='encore'] .song-actions button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff0a;
  color: var(--ink);
  font: 600 13px 'DM Sans', sans-serif;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
body[data-song-style='encore'] .song-actions button:hover {
  border-color: #ff5a9280;
  background: #ff5a921f;
  transform: translateY(-1px);
}
body[data-song-style='encore'] #save[aria-pressed='true'] {
  border-color: transparent;
  background: var(--hot);
  color: #1b0f1c;
}

/* Listen-with panel */
body[data-song-style='encore'] .hero-listen .field {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-song-style='encore'] .hero-listen select {
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
body[data-song-style='encore'] .hero-listen #video-wrap iframe {
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px #000;
}
body[data-song-style='encore'] .hero-listen .hint {
  color: var(--faint);
}

/* The sheet: a spotlit stage */
body[data-song-style='encore'] .sheet {
  --paper: #191430;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(70% 55% at 50% -12%, #ffba4a1c, transparent 70%),
    linear-gradient(#1c1734, #15112a);
  color: var(--ink);
  box-shadow:
    0 40px 90px -30px #000,
    inset 0 1px #ffffff14;
}
body[data-song-style='encore'] .sheet-tools {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
body[data-song-style='encore'] .sheet-tools .tabs {
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #0000004d;
  box-shadow: inset 0 0 0 1px var(--line);
}
body[data-song-style='encore'] .sheet-tools .tabs button {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font: 700 13px var(--display);
  transition: color 0.2s, background 0.2s;
}
body[data-song-style='encore'] .sheet-tools .tabs button:hover {
  color: var(--ink);
}
body[data-song-style='encore'] .sheet-tools .tabs button.active {
  border: 0;
  background: var(--hot);
  color: #1b0f1c;
  box-shadow: 0 4px 18px -4px #ff5a92aa;
}
body[data-song-style='encore'] .sheet-tools .score-navigation button {
  border-radius: 999px;
  color: var(--muted);
}
body[data-song-style='encore'] .sheet-tools .score-navigation button:hover:not(:disabled) {
  background: #ffffff12;
  color: var(--ink);
}
body[data-song-style='encore'] .sheet-tools #measure-position {
  font: 600 12px var(--display);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* Song sections as stage-light chips that fill as the song passes through */
body[data-song-style='encore'] .sheet .sections {
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #0000001f;
  scrollbar-color: #ffffff26 transparent;
}
body[data-song-style='encore'] .sheet .sections button {
  min-height: 34px;
  padding: 7px 14px 7px 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff08;
  color: var(--muted);
  font: 650 12px var(--display);
  box-shadow: none;
  transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.35s, transform 0.25s;
}
body[data-song-style='encore'] .sheet .sections button:hover {
  color: var(--ink);
  filter: none;
  transform: translateY(-1px);
}
body[data-song-style='encore'] .sheet .sections button::after {
  inset: 50% auto auto 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--section-color, #d9c6fa);
  opacity: 0.85;
  translate: 0 -50%;
}
body[data-song-style='encore'] .sheet .sections button::before {
  display: block;
  inset: auto 0 0;
  height: 2px;
  background: var(--section-color, #d9c6fa);
  opacity: 0.9;
}
body[data-song-style='encore'] .sheet .sections button.active {
  border-color: color-mix(in srgb, var(--section-color, #d9c6fa) 70%, transparent);
  background: color-mix(in srgb, var(--section-color, #d9c6fa) 16%, transparent);
  color: var(--ink);
  box-shadow: 0 0 22px -6px var(--section-color, #d9c6fa);
}
body[data-song-style='encore'] .sheet .sections button.active::after {
  box-shadow: 0 0 8px var(--section-color, #d9c6fa);
  animation: encore-pulse 1.4s ease-in-out infinite;
}
@keyframes encore-pulse {
  50% { transform: scale(1.5); opacity: 0.55; }
}
body[data-song-style='encore'] .section-picker select {
  border-radius: 12px;
}

/* Score: cream ink on the dark stage, with light where the music is */
body[data-song-style='encore'] #melody {
  background: transparent;
}
body[data-song-style='encore'] .site-score-stage {
  color: #ece4d8;
}
body[data-song-style='encore'] .site-score-stage .abcjs-staff path {
  fill: #ece4d85c;
}
body[data-song-style='encore'] .site-score-stage .abcjs-bar path {
  fill: #ece4d88c;
}
body[data-song-style='encore'] .site-score-stage .abcjs-lyric,
body[data-song-style='encore'] .site-score-stage .abcjs-annotation {
  fill: #cfc6e0;
}
body[data-song-style='encore'] .site-score-stage .ss2-unattached-syllable {
  fill: var(--cyan);
}
body[data-song-style='encore'] .site-score-stage .abcjs-tempo text,
body[data-song-style='encore'] .site-score-stage .abcjs-tempo path {
  fill: var(--muted);
}
body[data-song-style='encore'] .site-score-stage .abcjs-chord {
  font-family: var(--display);
  font-weight: 750;
  transform-box: fill-box;
  transform-origin: 50% 80%;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.35s;
}
body[data-song-style='encore'] .site-score-stage .site-chord-active {
  transform: scale(1.22) translateY(-1px);
  filter: drop-shadow(0 0 5px currentColor) brightness(1.25);
}
body[data-song-style='encore'] .site-score-stage .site-note-active {
  fill: var(--amber) !important;
  filter: drop-shadow(0 0 3px #ffba4a) drop-shadow(0 0 9px #ff5a92b0);
}
body[data-song-style='encore'] .site-score-stage .site-playhead {
  stroke: #ffd79a;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #ffba4a) drop-shadow(0 0 12px #ff5a92);
}
/* Chord colours by scale degree, brightened for the dark stage. The renderer
   sets its light-theme colour inline, so these must win explicitly. */
body[data-song-style='encore'] { --deg-0: #cfc6e0; --deg-1: #ff6b7f; --deg-2: #ff9a55; --deg-3: #ffd65a; --deg-4: #5fe39d; --deg-5: #56c8ff; --deg-6: #a594ff; --deg-7: #e98bff; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='0'] { fill: var(--deg-0) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='1'] { fill: var(--deg-1) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='2'] { fill: var(--deg-2) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='3'] { fill: var(--deg-3) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='4'] { fill: var(--deg-4) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='5'] { fill: var(--deg-5) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='6'] { fill: var(--deg-6) !important; }
body[data-song-style='encore'] .site-score-stage .abcjs-chord[data-degree='7'] { fill: var(--deg-7) !important; }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='0'] { --neon: var(--deg-0); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='1'] { --neon: var(--deg-1); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='2'] { --neon: var(--deg-2); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='3'] { --neon: var(--deg-3); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='4'] { --neon: var(--deg-4); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='5'] { --neon: var(--deg-5); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='6'] { --neon: var(--deg-6); }
body[data-song-style='encore'] .site-karaoke-chord[data-degree='7'] { --neon: var(--deg-7); }

/* Karaoke: the big stage lyric with a bouncing ball and the chords on either side */
body[data-song-style='encore'] .site-karaoke {
  --karaoke-size: 32px;
  --karaoke-next-size: 17px;
  padding: 22px 118px 0;
  border: 0;
  background:
    linear-gradient(90deg, transparent, #ff5a9266 20%, #ffba4a66 80%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, #ffffff1a 20%, #ffffff1a 80%, transparent) bottom / 100% 1px no-repeat,
    radial-gradient(60% 120% at 50% 50%, #ff5a9214, transparent 70%),
    #0000002e;
  box-shadow: none;
  color: var(--ink);
}
body[data-song-style='encore'] .site-karaoke-current {
  height: 38px;
  color: #f8f1e761;
  font-family: var(--display);
  font-weight: 800;
  line-height: 38px;
  letter-spacing: -0.02em;
  text-shadow: none;
}
body[data-song-style='encore'] .site-karaoke-next {
  height: 22px;
  margin-top: 1px;
  color: #a8a0c0b3;
  font-family: var(--display);
  font-weight: 600;
  text-shadow: none;
}
body[data-song-style='encore'] .site-karaoke-outgoing {
  top: 22px;
  left: 118px;
  right: 118px;
}
body[data-song-style='encore'] .site-karaoke .karaoke-syllable {
  display: inline-block;
  color: #f8f1e761;
  transition:
    transform 0.32s cubic-bezier(0.3, 1.7, 0.5, 1),
    color 0.25s;
}
body[data-song-style='encore'] .site-karaoke .karaoke-syllable.sung {
  color: #fff6ea;
  background-image: none;
  filter: none;
}
body[data-song-style='encore'] .site-karaoke .karaoke-syllable.singing {
  color: transparent;
  background-image:
    linear-gradient(90deg, transparent calc(var(--syllable-progress, 0) * 100%), #f8f1e761 0),
    linear-gradient(90deg, var(--pink), var(--amber));
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 14px #ff5a9280);
  transform: translateY(-3px) scale(1.07);
}
body[data-song-style='encore'] .site-karaoke .karaoke-syllable::after {
  display: none;
}
body[data-song-style='encore'] .site-karaoke-ball {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ffe0a3 30%, var(--amber) 55%, var(--pink));
  box-shadow:
    0 0 10px #ffba4ae6,
    0 0 26px #ff5a9299;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
body[data-song-style='encore'] .site-karaoke-chord {
  --neon: var(--deg-0);
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: opacity 0.3s;
}
body[data-song-style='encore'] .site-karaoke-chord::before {
  position: absolute;
  top: -15px;
  color: var(--faint);
  font: 700 9px 'DM Sans', sans-serif;
  letter-spacing: 0.2em;
}
body[data-song-style='encore'] .site-karaoke-chord-now {
  left: 18px;
  min-width: 84px;
  height: 52px;
  padding: 0 12px;
  border: 1.5px solid var(--neon);
  border-radius: 14px;
  background: color-mix(in srgb, var(--neon) 16%, #0000004d);
  color: color-mix(in srgb, var(--neon) 60%, #fff);
  font-size: 26px;
  box-shadow:
    0 0 24px -6px var(--neon),
    inset 0 0 16px -8px var(--neon);
  text-shadow: 0 0 14px var(--neon);
}
body[data-song-style='encore'] .site-karaoke-chord-now::before {
  content: 'NOW';
}
body[data-song-style='encore'] .site-karaoke-chord-next {
  right: 18px;
  min-width: 84px;
  height: 52px;
  padding: 0 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  /* The border fills like a countdown until the change arrives. */
  background:
    linear-gradient(#1a1530, #1a1530) padding-box,
    conic-gradient(var(--neon) calc(var(--chord-countdown, 0) * 1turn), #ffffff17 0) border-box;
  color: color-mix(in srgb, var(--neon) 45%, #a8a0c0);
  font-size: 20px;
}
body[data-song-style='encore'] .site-karaoke-chord-next::before {
  content: 'NEXT';
}
body[data-song-style='encore'] .site-karaoke-chord-empty {
  opacity: 0;
}

/* Chord chart view */
body[data-song-style='encore'] #lines {
  padding: 18px;
  background: transparent;
  scrollbar-color: #ffffff26 transparent;
}
body[data-song-style='encore'] #lines .lyric {
  margin-bottom: 8px;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #ffffff06;
  color: var(--ink);
  box-shadow: none;
  transition: background 0.3s, border-color 0.3s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
body[data-song-style='encore'] #lines .lyric:hover {
  background: #ffffff0f;
}
body[data-song-style='encore'] #lines .lyric.active {
  border-color: #ff5a9259;
  background:
    linear-gradient(100deg, #ff5a921f, #ffba4a0d 60%, transparent),
    #ffffff08;
  box-shadow: 0 10px 30px -18px #ff5a92;
  transform: scale(1.012);
}
body[data-song-style='encore'] #lines .line-time {
  color: var(--faint);
  font: 600 11px var(--display);
  font-variant-numeric: tabular-nums;
}
body[data-song-style='encore'] #lines .chords {
  gap: 14px;
  color: var(--amber);
  font: 750 19px var(--display);
}
body[data-song-style='encore'] #lines .words {
  color: var(--ink);
  font: 650 22px/1.4 var(--display);
  letter-spacing: -0.01em;
}
body[data-song-style='encore'] #lines .lyric:not(.active) .words {
  color: #f8f1e7a8;
}
body[data-song-style='encore'] .words .chart-syllable.sung {
  color: #fff6ea;
}
body[data-song-style='encore'] .words .chart-syllable.singing {
  background: none;
  color: var(--pink);
  text-decoration: underline 3px var(--amber);
  text-underline-offset: 6px;
}
body[data-song-style='encore'] #empty {
  color: var(--muted);
}

/* Practice settings */
body[data-song-style='encore'] #practice-settings {
  color: var(--ink);
}
body[data-song-style='encore'] #practice-settings .panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #1a1530d9;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px -24px #000;
}
body[data-song-style='encore'] #practice-settings h2 {
  color: var(--ink);
  font: 800 22px/1.2 var(--display);
  letter-spacing: -0.03em;
}
body[data-song-style='encore'] .panel .hint,
body[data-song-style='encore'] .panel .scale,
body[data-song-style='encore'] .panel .key-original,
body[data-song-style='encore'] #practice-settings .accuracy,
body[data-song-style='encore'] #practice-settings .note p {
  color: var(--muted);
}
body[data-song-style='encore'] .panel .divider {
  background: var(--line);
}
body[data-song-style='encore'] .panel input[type='range'],
body[data-song-style='encore'] #seek,
body[data-song-style='encore'] #volume {
  accent-color: var(--pink);
}
body[data-song-style='encore'] .panel input[type='checkbox'] {
  accent-color: var(--pink);
}
body[data-song-style='encore'] .setting button,
body[data-song-style='encore'] output {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff0d;
  color: var(--ink);
  font-weight: 700;
}
body[data-song-style='encore'] .setting button[aria-pressed='true'] {
  border-color: transparent;
  background: var(--hot);
  color: #1b0f1c;
}
body[data-song-style='encore'] .setting button:disabled {
  opacity: 0.45;
}
body[data-song-style='encore'] .segmented {
  background: #0000004d;
  box-shadow: inset 0 0 0 1px var(--line);
}
body[data-song-style='encore'] .segmented button {
  color: var(--muted);
}
body[data-song-style='encore'] .segmented button[aria-pressed='true'] {
  background: #ffffff14;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #ff5a9259;
}
body[data-song-style='encore'] .key-select select {
  border-radius: 12px;
}
body[data-song-style='encore'] #practice-settings .note {
  color: var(--ink);
}
body[data-song-style='encore'] #practice-settings .note > span {
  color: var(--amber);
}
body[data-song-style='encore'] .alignment-debug {
  color: var(--faint);
}

/* Song notes and related songs */
body[data-song-style='encore'] .song-guide .arrangement-card,
body[data-song-style='encore'] .song-guide .related-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #1a1530b3;
  box-shadow: none;
}
body[data-song-style='encore'] .song-guide .guide-eyebrow {
  color: var(--amber);
  letter-spacing: 0.2em;
}
body[data-song-style='encore'] .song-guide h2 {
  color: var(--ink);
  font: 800 26px/1.15 var(--display);
  letter-spacing: -0.035em;
}
body[data-song-style='encore'] .song-guide .qa-intro,
body[data-song-style='encore'] .song-guide .qa-list p,
body[data-song-style='encore'] .song-guide .guide-note,
body[data-song-style='encore'] .song-guide .related-song small {
  color: var(--muted);
}
body[data-song-style='encore'] .song-guide .qa-list details,
body[data-song-style='encore'] .song-guide .related-song {
  border-color: var(--line);
}
body[data-song-style='encore'] .song-guide .qa-list h3,
body[data-song-style='encore'] .song-guide .related-song b {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 650;
}
body[data-song-style='encore'] .song-guide .qa-list summary:hover h3,
body[data-song-style='encore'] .song-guide .related-song:hover b,
body[data-song-style='encore'] .song-guide .artist-browse-link,
body[data-song-style='encore'] .qa-list .qa-timestamp {
  color: var(--amber);
}
body[data-song-style='encore'] .song-guide .related-song {
  color: var(--ink);
  border-radius: 12px;
  transition: background 0.2s;
}
body[data-song-style='encore'] .song-guide .related-song:hover {
  background: #ffffff0a;
}
body[data-song-style='encore'] .song-guide .related-art,
body[data-song-style='encore'] .song-guide .guide-badge {
  background: #ffffff12;
  color: var(--muted);
}
body[data-song-style='encore'] .song-guide .guide-chords > span {
  border-color: var(--line);
  background: #ffffff0d;
  color: var(--amber);
  font-family: var(--display);
}
body[data-song-style='encore'] .song-guide .section-chords summary:hover {
  background: #ffffff0a;
}

/* Transport */
body[data-song-style='encore'] .transport {
  border-top: 1px solid var(--line);
  background: #110e1dd9;
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 -20px 50px -20px #000c;
  color: var(--ink);
}
body[data-song-style='encore'] .transport .play {
  position: relative;
  border: 0;
  background: var(--hot);
  color: #1b0f1c;
  font-size: 17px;
  box-shadow: 0 6px 22px -4px #ff5a92b3;
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body[data-song-style='encore'] .transport .play:hover {
  transform: scale(1.07);
}
body[data-song-style='encore'].song-playing .transport .play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #ff5a9299;
  animation: encore-ring 1.6s ease-out infinite;
}
@keyframes encore-ring {
  to { box-shadow: 0 0 0 16px #ff5a9200; }
}
body[data-song-style='encore'] .transport .now b {
  font: 700 15px var(--display);
}
body[data-song-style='encore'] .transport .now small,
body[data-song-style='encore'] .transport > span {
  color: var(--muted);
}
body[data-song-style='encore'] #mute,
body[data-song-style='encore'] #settings-toggle {
  color: var(--ink);
}
body[data-song-style='encore'] #mute:hover {
  background: #ffffff12;
}
body[data-song-style='encore'] #status {
  border: 1px solid var(--line);
  background: var(--card-raised);
  color: var(--ink);
  box-shadow: 0 16px 40px #0009;
}
body[data-song-style='encore'] #measure-dialog {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card-raised);
  color: var(--ink);
}
body[data-song-style='encore'] #jump-measure {
  border: 1px solid var(--line);
  background: #ffffff0d;
  color: var(--ink);
}

@media (max-width: 1000px) {
  body[data-song-style='encore'] .song-overview > .hero {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 20px 72px;
  }
  body[data-song-style='encore'] .hero .artwork-cover {
    width: 132px;
    height: 132px;
  }
}
@media (max-width: 600px) {
  body[data-song-style='encore'] .song-overview > .hero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px 34px;
    margin: 6px 16px 18px;
    padding: 8px 0;
  }
  body[data-song-style='encore'] .hero .artwork-cover {
    width: 92px;
    height: 92px;
  }
  body[data-song-style='encore'] .hero .artwork-cover::before,
  body[data-song-style='encore'] .hero .artwork-cover::after {
    translate: 30% 0;
  }
  body[data-song-style='encore'].song-playing .hero .artwork-cover::before,
  body[data-song-style='encore'].song-playing .hero .artwork-cover::after {
    translate: 38% 0;
  }
  body[data-song-style='encore'] .hero .identity h1 {
    font-size: 34px;
  }
  body[data-song-style='encore'] .identity #artist {
    margin: 6px 0 12px;
    font-size: 16px;
  }
  body[data-song-style='encore'] .song-fact {
    padding: 6px 10px;
  }
  body[data-song-style='encore'] .workspace > .sheet {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  body[data-song-style='encore'] .site-karaoke {
    --karaoke-size: 24px;
    --karaoke-next-size: 15px;
    padding-right: 10px;
    padding-left: 10px;
  }
  body[data-song-style='encore'] .site-karaoke-outgoing {
    left: 10px;
    right: 10px;
  }
  body[data-song-style='encore'] .site-karaoke-chord {
    display: none;
  }
  body[data-song-style='encore'] #practice-settings .panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-song-style='encore'] .hero .artwork-cover::before,
  body[data-song-style='encore'] .hero .identity::before,
  body[data-song-style='encore'] .sheet .sections button.active::after,
  body[data-song-style='encore'].song-playing .transport .play::after {
    animation: none;
  }
  body[data-song-style='encore'] .site-karaoke .karaoke-syllable.singing {
    color: var(--amber);
    background-image: none;
    transform: none;
  }
}
@media print {
  body[data-song-style='encore'] {
    background: white;
    color: #182c28;
  }
  body[data-song-style='encore']::before,
  body[data-song-style='encore']::after {
    display: none;
  }
}

/* Chart chords share the score's degree colours. */
body[data-song-style='encore'] #lines .chords > [data-degree='1'] { color: var(--deg-1); }
body[data-song-style='encore'] #lines .chords > [data-degree='2'] { color: var(--deg-2); }
body[data-song-style='encore'] #lines .chords > [data-degree='3'] { color: var(--deg-3); }
body[data-song-style='encore'] #lines .chords > [data-degree='4'] { color: var(--deg-4); }
body[data-song-style='encore'] #lines .chords > [data-degree='5'] { color: var(--deg-5); }
body[data-song-style='encore'] #lines .chords > [data-degree='6'] { color: var(--deg-6); }
body[data-song-style='encore'] #lines .chords > [data-degree='7'] { color: var(--deg-7); }
body[data-song-style='encore'] #reset-key {
  color: var(--amber);
}
body[data-song-style='encore'] #reset-key:disabled {
  color: var(--faint);
}