.ly-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.lyli-stage {
  --z: 1;
  position: relative;
  flex: none;
  width: calc(300px * var(--z));
  height: calc(280px * var(--z));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.lyli {
  position: relative;
  width: 300px;
  height: 280px;
  zoom: var(--z);
}
@media (max-width: 720px), (pointer: coarse) {
  .lyli {
    position: absolute;
    top: 0;
    left: 0;
    zoom: 1;
    transform: scale(var(--z));
    transform-origin: 0 0;
  }
}
.ly-glow,
.ly-l,
.ly-part,
.ly-jelly,
.ly-lean,
.ly-pose,
.ly-face,
.ly-hat,
.ly-hold,
.ly-front,
.ly-fx,
.ly-deck,
.ly-game,
.ly-yarn {
  position: absolute;
  inset: 0;
}
.ly-l {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
:where(.lyli) i {
  position: absolute;
  display: block;
}
:where(.lyli) i > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ly-glow {
  background: radial-gradient(closest-side at 50% 58%, rgba(167, 139, 250, .4), rgba(124, 58, 237, .14) 62%, transparent);
  transform: scale(1.2);
  transition: opacity .6s ease;
}
.ly-shadow { transform-box: fill-box; transform-origin: center; transition: opacity .4s ease; }
.ly-jelly,
.ly-pose { transform-origin: 150px 262px; will-change: transform; }
.ly-lean {
  transform-origin: 150px 262px;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.ly-part {
  will-change: transform;
  transition: transform .5s cubic-bezier(.34, 1.5, .64, 1), opacity .25s ease;
}
.ly-face,
.ly-front,
.ly-hold { will-change: transform; }
.ly-arm-l { transform-origin: 69.3px 224.9px; }
.ly-arm-r { transform-origin: 255.3px 230.3px; }

.ly-ink { fill: none; stroke: #25105b; stroke-width: 6.2; stroke-linecap: round; stroke-linejoin: round; }
.ly-ink ellipse,
.ly-ink circle { fill: #25105b; stroke: none; }
.ly-ink .ly-shine { fill: #fff; stroke: none; }
.ly-ink .ly-dot { opacity: .85; }
.ly-ink .ly-mouth { stroke-width: 4.8; }
.ly-ink .ly-open { fill: #2a1048; }
.ly-ink .ly-tongue { fill: #f472b6; }
.ly-ink .ly-ring { fill: none; stroke: #25105b; stroke-width: 4.6; }
.ly-ink .ly-lid { stroke-width: 4; }
.ly-ink .ly-brow { stroke-width: 4; }
.ly-ink .ly-drop { fill: #c7dcff; stroke: none; }
.ly-ink .ly-heart { fill: #f472b6; stroke: none; }
.ly-ink .ly-eye { fill: #1c0b44; }
.ly-ink .ly-wink { fill: #f5f3ff; stroke: none; transform-box: fill-box; transform-origin: center; }
:is(.lyli, .lyli-mini)[data-face="wink"] .ly-ink .ly-wink { animation: lyTwinkle 1.1s ease-in-out infinite; }
.ly-snot { display: none; transform-origin: 0 60%; }
:is(.lyli, .lyli-mini)[data-face="sleep"] .ly-snot { display: block; animation: lySnot 3.8s ease-in-out infinite alternate; }
.ly-snot circle { fill: url(#ly-bubble); stroke: #fff; stroke-opacity: .7; stroke-width: 1.2; }
.ly-snot circle + circle { fill: #fff; stroke: none; }
.ly-blush { fill: #8753d4; opacity: .92; }
.ly-f { display: none; }
:is(.lyli, .lyli-mini)[data-face="look"] .ly-f[data-f="look"],
:is(.lyli, .lyli-mini)[data-face="happy"] .ly-f[data-f="happy"],
:is(.lyli, .lyli-mini)[data-face="calm"] .ly-f[data-f="calm"],
:is(.lyli, .lyli-mini)[data-face="sleep"] .ly-f[data-f="sleep"],
:is(.lyli, .lyli-mini)[data-face="joy"] .ly-f[data-f="joy"],
:is(.lyli, .lyli-mini)[data-face="focus"] .ly-f[data-f="focus"],
:is(.lyli, .lyli-mini)[data-face="wow"] .ly-f[data-f="wow"],
:is(.lyli, .lyli-mini)[data-face="grump"] .ly-f[data-f="grump"],
:is(.lyli, .lyli-mini)[data-face="sad"] .ly-f[data-f="sad"],
:is(.lyli, .lyli-mini)[data-face="think"] .ly-f[data-f="think"],
:is(.lyli, .lyli-mini)[data-face="love"] .ly-f[data-f="love"],
:is(.lyli, .lyli-mini)[data-face="wink"] .ly-f[data-f="wink"],
:is(.lyli, .lyli-mini)[data-face="yawn"] .ly-f[data-f="yawn"],
:is(.lyli, .lyli-mini)[data-face="lick"] .ly-f[data-f="lick"],
:is(.lyli, .lyli-mini)[data-face="dizzy"] .ly-f[data-f="dizzy"],
:is(.lyli, .lyli-mini)[data-face="play"] .ly-f[data-f="play"] { display: inline; }
.ly-ink .ly-swirl { stroke-width: 2.8; }
.ly-orbit { opacity: 0; transition: opacity .3s ease; }
:is(.lyli, .lyli-mini)[data-face="dizzy"] .ly-orbit { opacity: 1; }
.ly-orbit .ly-spark { fill: #fde68a; }
:is(.lyli, .lyli-mini)[data-face="dizzy"] .ly-orbit-spin { animation: lySpin 1.4s linear infinite; }
.ly-gaze { transition: transform .22s ease-out; }
.ly-blink {
  transform-box: fill-box;
  transform-origin: center;
}
.ly-f.ly-blinking .ly-blink { animation: lyBlinkOnce .22s ease-in-out; }
.ai-overlay:not([hidden]) .ai-lyli-head :is(
  :is(.lyli, .lyli-mini)[data-face="look"] [data-f="look"],
  :is(.lyli, .lyli-mini)[data-face="focus"] [data-f="focus"],
  :is(.lyli, .lyli-mini)[data-face="wow"] [data-f="wow"],
  :is(.lyli, .lyli-mini)[data-face="sad"] [data-f="sad"],
  :is(.lyli, .lyli-mini)[data-face="think"] [data-f="think"],
  :is(.lyli, .lyli-mini)[data-face="wink"] [data-f="wink"],
  :is(.lyli, .lyli-mini)[data-face="play"] [data-f="play"]
) .ly-blink { animation: lyBlink 4.8s ease-in-out infinite; }
.ly-heart {
  transform-box: fill-box;
  transform-origin: center;
}
:is(.lyli, .lyli-mini)[data-face="love"] .ly-heart { animation: lyBeat .7s ease-in-out infinite alternate; }

.ly-phones,
.ly-hat,
.ly-confetti,
.ly-laptop,
.ly-deck,
.ly-pillow,
.ly-notes,
.ly-zzz,
.ly-lines,
.ly-sparks,
.ly-screen {
  opacity: 0;
  transition: opacity .4s ease;
}
.ly-zzz text { fill: url(#ly-note); stroke: #5b21b6; stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 900 15px/1 Inter, system-ui, sans-serif; }
.ly-zzz i:nth-child(2) text { font-size: 19px; }
.ly-zzz i:nth-child(3) text { font-size: 25px; }
.ly-lines path { fill: none; stroke: #ede4ff; stroke-width: 3.4; stroke-linecap: round; }
.ly-spark { fill: url(#ly-star); }

.lyli[data-act="music"] .ly-phones,
.lyli[data-act="music"] .ly-notes,
.lyli[data-act="dj"] .ly-phones,
.lyli[data-act="dj"] .ly-deck,
.lyli[data-act="dj"] .ly-notes,
.lyli[data-act="laptop"] .ly-laptop,
.lyli[data-act="laptop"] .ly-screen,
.lyli[data-act="sleep"] .ly-pillow,
.lyli[data-act="sleep"] .ly-zzz,
.lyli[data-act="wave"] .ly-lines,
.lyli[data-act="cheer"] .ly-sparks { opacity: 1; }
.lyli[data-act="sleep"] .ly-glow { opacity: .5; }
.lyli[data-act="sleep"] .ly-shadow { opacity: 0; }

.lyli[data-act="idle"] .ly-pose { animation: lyBreath 3.4s ease-in-out infinite alternate; }

.lyli[data-act="music"] .ly-pose { animation: lySway 2.8s ease-in-out infinite alternate; }
.lyli[data-act="music"][data-playing] .ly-pose,
.lyli[data-act="dj"] .ly-pose { animation: lyBob 1s linear infinite; }
.lyli[data-act="music"] .ly-arm-r { transform: translate(21px, -72px) rotate(12deg) scale(.66); }
.lyli[data-act="music"] .ly-note,
.lyli[data-act="dj"] .ly-note { animation: lyFloat 3.6s ease-out infinite; }
.lyli[data-act="music"] .ly-note:nth-child(2),
.lyli[data-act="dj"] .ly-note:nth-child(2) { animation-delay: 1.2s; }
.lyli[data-act="music"] .ly-note:nth-child(3),
.lyli[data-act="dj"] .ly-note:nth-child(3) { animation-delay: 2.4s; }
.lyli[data-act="music"]:not([data-playing]) .ly-notes { opacity: .55; }
.lyli[data-playing] .ly-note { animation-duration: 2s !important; }
.ly-led { opacity: .75; }
.lyli[data-playing] .ly-led { animation: lyPulse .5s ease-in-out infinite alternate; }

.lyli[data-act="dj"] .ly-spin { animation: lySpin 1.6s linear infinite; }
.lyli[data-act="dj"] .ly-part:is(.ly-arm-l, .ly-arm-r) { opacity: 0; }
.ly-platter { transform: scaleY(.3); }
.ly-spin { inset: 0; }
.lyli[data-act="dj"] .ly-deck-r { animation: lyScratch .36s ease-in-out .5s infinite alternate; }
.lyli[data-act="dj"] .ly-deck-l { animation: lyKnob 1s ease-in-out infinite alternate; }
.lyli[data-act="dj"] .ly-btn { animation: lyPulse .5s ease-in-out infinite alternate; }
.lyli[data-act="dj"] .ly-btn:nth-of-type(2) { animation-delay: .25s; }
.lyli[data-act="dj"][data-playing] .ly-strip { animation: lyPulse .25s ease-in-out infinite alternate; }

.lyli[data-act="laptop"] .ly-pose { animation: lyBreathLow 3.4s ease-in-out infinite alternate; }
.lyli[data-act="laptop"] .ly-arm-l { transform: translate(44px, 2px) scale(.8); animation: lyTypeL .9s ease-in-out infinite alternate; }
.lyli[data-act="laptop"] .ly-arm-r { transform: translate(-28px, 0) scale(.85); animation: lyTypeR .9s ease-in-out .45s infinite alternate; }
.lyli[data-act="laptop"][data-typing] .ly-arm-l { animation-duration: .17s; }
.lyli[data-act="laptop"][data-typing] .ly-arm-r { animation-duration: .17s; animation-delay: .085s; }
.lyli[data-act="laptop"][data-typing] .ly-pose { animation: lyTypeBob .17s ease-in-out infinite alternate; }
.lyli[data-act="laptop"] .ly-screen { animation: lyScreen 2.2s steps(3) infinite; }

.lyli[data-act="search"] .ly-pose { animation: lyPeer 2.6s ease-in-out infinite alternate; }
.lyli[data-act="search"] .ly-arm-r,
.lyli[data-act="game"] .ly-part:is(.ly-arm-l, .ly-arm-r) { opacity: 0; }
.lyli[data-act="search"][data-typing] .ly-pose { animation-duration: .9s; }

.lyli[data-act="sleep"] .ly-pose { animation: lySleep 3.8s ease-in-out infinite alternate; }
.lyli[data-act="sleep"] .ly-arm-l { transform: rotate(-4deg); }
.lyli[data-act="sleep"] .ly-arm-r { transform: rotate(4deg); }
.lyli[data-act="sleep"] .ly-zzz i { animation: lyFloat 3.9s ease-out infinite; }
.lyli[data-act="sleep"] .ly-zzz i:nth-child(2) { animation-delay: 1.3s; }
.lyli[data-act="sleep"] .ly-zzz i:nth-child(3) { animation-delay: 2.6s; }

.lyli[data-act="wave"] .ly-arm-l { transform: translate(-17px, -77px) rotate(-20deg) scale(.82); animation: lyWave .32s ease-in-out .45s infinite alternate; }
.lyli[data-act="wave"] .ly-pose { animation: lyLean 1.4s ease-in-out infinite alternate; }
.lyli[data-act="wave"] .ly-lines path { animation: lyPulse .64s ease-in-out infinite alternate; }

.lyli[data-act="cheer"] .ly-pose { animation: lyHop .8s cubic-bezier(.3, .7, .4, 1) infinite; }
.lyli[data-act="cheer"] .ly-arm-l { transform: translate(-20px, -80px) rotate(-24deg) scale(.8); animation: lyCheerL .4s ease-in-out .4s infinite alternate; }
.lyli[data-act="cheer"] .ly-arm-r { transform: translate(4px, -82px) rotate(24deg) scale(.82); animation: lyCheerR .4s ease-in-out .4s infinite alternate; }
.lyli[data-act="cheer"] .ly-sparks > i { animation: lyTwinkle 1.2s ease-in-out infinite; }
.lyli[data-act="cheer"] .ly-sparks > i:nth-child(2) { animation-delay: .3s; }
.lyli[data-act="cheer"] .ly-sparks > i:nth-child(3) { animation-delay: .6s; }
.lyli[data-act="cheer"] .ly-sparks > i:nth-child(4) { animation-delay: .9s; }

.lyli[data-face="love"] .ly-pose { animation: lyBreath 1.4s ease-in-out infinite alternate; }

.ly-say {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff;
  color: #1b1124;
  font: 700 14px/1.25 Inter, system-ui, sans-serif;
  text-align: center;
  white-space: normal;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(167, 139, 250, .35);
  opacity: 0;
  transform: translateY(8px) scale(.85);
  transform-origin: 50% 100%;
  transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.ly-say.is-side { transform-origin: 50% 50%; }
.ly-say.is-on { opacity: 1; transform: none; }

.lyli-stage.is-off *,
.hero-visual.is-idle .lyli-stage * { animation-play-state: paused !important; }

.lyli-mini {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.lyli-mini svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes lyBlinkOnce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.1); }
}
@keyframes lyBlink {
  0%, 40%, 44%, 87%, 90.5%, 92%, 95.5%, 100% { transform: scaleY(1); }
  42% { transform: scaleY(.1); }
  88.8% { transform: scaleY(.1); }
  93.8% { transform: scaleY(.1); }
}
@keyframes lyBeat {
  from { transform: scale(.9); }
  to { transform: scale(1.12); }
}
@keyframes lyBreath {
  from { transform: scale(1, 1); }
  to { transform: scale(1.012, 1.028); }
}
@keyframes lyBreathLow {
  from { transform: translateY(4px) scale(1, 1); }
  to { transform: translateY(4px) scale(1.01, 1.02); }
}
@keyframes lySway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}
@keyframes lyBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  25%, 75% { transform: translateY(-7px) rotate(0); }
  50% { transform: translateY(0) rotate(3deg); }
}
@keyframes lyPeer {
  from { transform: translateX(-5px) rotate(-2.5deg); }
  to { transform: translateX(5px) rotate(2.5deg); }
}
@keyframes lySleep {
  from { transform: translateY(-6px) scale(1.05, .93); }
  to { transform: translateY(-6px) scale(1.065, .96); }
}
@keyframes lyFloat {
  0% { transform: translate(0, 12px) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx, 8px), -36px) scale(1); opacity: 0; }
}
@keyframes lyPulse {
  from { opacity: .4; }
  to { opacity: 1; }
}
@keyframes lySpin {
  to { transform: rotate(360deg); }
}
@keyframes lyScratch {
  from { transform: translateX(-7px) rotate(-6deg); }
  to { transform: translateX(7px) rotate(6deg); }
}
@keyframes lyKnob {
  from { transform: translateY(0); }
  to { transform: translate(3px, -2px); }
}
@keyframes lyTypeL {
  from { transform: translate(44px, 2px) scale(.8); }
  to { transform: translate(44px, -1px) scale(.8); }
}
@keyframes lyTypeR {
  from { transform: translate(-28px, 0) scale(.85); }
  to { transform: translate(-28px, -3px) scale(.85); }
}
@keyframes lyTypeBob {
  from { transform: translateY(4px); }
  to { transform: translateY(5.5px) rotate(.4deg); }
}
@keyframes lyScreen {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}
@keyframes lyWave {
  from { transform: translate(-17px, -77px) rotate(-34deg) scale(.82); }
  to { transform: translate(-17px, -77px) rotate(-6deg) scale(.82); }
}
@keyframes lyLean {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(1deg); }
}
@keyframes lyHop {
  0% { transform: translateY(0) scale(1.05, .95); }
  35% { transform: translateY(-20px) scale(.97, 1.04); }
  65% { transform: translateY(0) scale(1.07, .93); }
  80%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes lyCheerL {
  from { transform: translate(-20px, -80px) rotate(-34deg) scale(.8); }
  to { transform: translate(-20px, -85px) rotate(-12deg) scale(.8); }
}
@keyframes lyCheerR {
  from { transform: translate(4px, -82px) rotate(34deg) scale(.82); }
  to { transform: translate(4px, -87px) rotate(12deg) scale(.82); }
}
@keyframes lyTwinkle {
  0%, 100% { transform: scale(.4) rotate(0); opacity: .2; }
  50% { transform: scale(1.1) rotate(20deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-pop { display: none; }
  .lyli *,
  .lyli-mini * { animation: none !important; }
  .ly-part,
  .ly-lean { transition: none; }
  .ly-note,
  .ly-zzz i,
  .ly-sparks i { opacity: 1; }
}

.hero-visual .lyli-stage { --z: 1.12; }
.lyli-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 2px;
}
.lyli-title > .lyli-stage {
  --z: .4;
  grid-row: span 2;
  margin: 0 12px -12px -14px;
}
.lyli-title > h1 { align-self: end; }
.lyli-title > p { grid-column: 2; align-self: start; }

.ai-chat .ai-avatar.ai-lyli {
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ai-chat .ai-avatar.ai-lyli .lyli-mini { filter: drop-shadow(0 4px 10px rgba(124, 58, 237, .45)); }
.ai-chat .ai-avatar.ai-lyli svg { width: 100%; height: 100%; }
.ai-chat .ai-lyli-head { width: 62px; height: 46px; }
.ai-chat .ai-avatar-sm.ai-lyli { width: 44px; height: 32px; }
.ai-lyli-head .lyli-mini[data-face="think"] svg { animation: lyThink 1s ease-in-out infinite alternate; }
.ai-lyli-head .lyli-mini[data-face="joy"] svg { animation: lyHop .8s cubic-bezier(.3, .7, .4, 1) 2; }
.ai-lyli-big { --z: .46; margin: 0 auto 6px; }
.ai-lyli-big .ly-glow { opacity: .8; }

@keyframes lyThink {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-2px) rotate(5deg); }
}

@media (min-width: 1180px) {
  html[data-design="new"] .library-head:has(> .lyli-title) { flex-wrap: nowrap; }
  html[data-design="new"] .library-head > .lyli-title { flex: 0 0 auto; }
}

:is(.lyli-title, .lyli-song, .ai-lyli-big, .lyli-empty) :is(.ly-btn, .ly-bar, .ly-led, .ly-strip, .ly-screen, .ly-logo-glow) { animation: none !important; }

@media (max-width: 720px) {
  .hero-visual :is(.ly-btn, .ly-bar, .ly-led, .ly-strip, .ly-screen, .ly-logo-glow) { animation: none !important; }
  html[data-design="new"] .hero-visual:has(.lyli-stage) {
    display: block;
    position: absolute;
    top: 10px;
    right: 8px;
    z-index: 2;
    min-height: 0;
  }
  .hero-visual .lyli-stage { --z: .36; }
  html[data-design="new"] .hero:has(.lyli-stage) .hero-copy h1 { padding-right: 84px; }
  .lyli-title > .lyli-stage { --z: .3; margin: 0 8px -10px -10px; }
}

.ly-pads { fill: #f0a3d6; opacity: 0; transition: opacity .25s ease; }
.ly-paw-down,
.ly-paw-up { transition: opacity .2s ease; }
.ly-paw-up { opacity: 0; }
.lyli:is([data-act="cheer"], [data-act="stretch"], [data-act="startle"], [data-act="fallen"]) .ly-paw-up,
.lyli[data-act="wave"] .ly-arm-l .ly-paw-up,
.lyli:is([data-act="groom"], [data-act="music"]) .ly-arm-r .ly-paw-up { opacity: 1; }
.lyli:is([data-act="cheer"], [data-act="stretch"], [data-act="startle"], [data-act="fallen"]) .ly-paw-down,
.lyli[data-act="wave"] .ly-arm-l .ly-paw-down,
.lyli:is([data-act="groom"], [data-act="music"]) .ly-arm-r .ly-paw-down { opacity: 0; }
.lyli:is([data-act="cheer"], [data-act="stretch"]) .ly-pads,
.lyli[data-act="wave"] .ly-arm-l .ly-pads,
.lyli[data-act="groom"] .ly-arm-r .ly-pads { opacity: 1; }
.ly-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ly-motes i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(233, 213, 255, .85) 30%, rgba(167, 139, 250, 0) 70%);
  opacity: 0;
  animation: lyMote 6.5s ease-in-out infinite;
}
.ly-motes i:nth-child(2) { animation-delay: -1.1s; animation-duration: 7.4s; }
.ly-motes i:nth-child(3) { animation-delay: -2.3s; animation-duration: 5.8s; }
.ly-motes i:nth-child(4) { animation-delay: -3.6s; animation-duration: 8s; }
.ly-motes i:nth-child(5) { animation-delay: -4.4s; animation-duration: 6.2s; }
.ly-motes i:nth-child(6) { animation-delay: -5.2s; animation-duration: 7s; }
.ly-motes i:nth-child(7) { animation-delay: -.6s; animation-duration: 6.8s; }
.ly-motes i:nth-child(8) { animation-delay: -2.9s; animation-duration: 7.8s; }
.lyli-stage:not([data-lyli="home"]) .ly-motes { display: none; }
.lyli[data-act="sleep"] .ly-motes { opacity: .5; }

.ly-hearts,
.ly-ask { opacity: 0; transition: opacity .3s ease; }
.lyli[data-face="love"] .ly-hearts { opacity: 1; }
.lyli[data-face="love"] .ly-float-heart { animation: lyFloat 1.5s ease-out infinite; }
.lyli[data-face="love"] .ly-float-heart:nth-child(2) { animation-delay: .5s; }
.lyli[data-face="love"] .ly-float-heart:nth-child(3) { animation-delay: 1s; }
.ly-ask text { fill: url(#ly-note); stroke: #4c1d95; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; font: 900 34px/1 Inter, system-ui, sans-serif; }
.ly-ask i { transform-origin: 50% 100%; }
.lyli[data-act="tilt"] .ly-ask { opacity: 1; }
.lyli[data-act="tilt"] .ly-ask i { animation: lyAsk 1.7s cubic-bezier(.34, 1.56, .64, 1) both; }

.ly-phones { transform: translateY(-30px); transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.lyli:is([data-act="music"], [data-act="dj"]) .ly-phones { transform: none; }
.ly-laptop,
.ly-deck { transform: translateY(40px); transition: opacity .3s ease, transform .55s cubic-bezier(.34, 1.4, .64, 1); }
.lyli[data-act="laptop"] .ly-laptop,
.lyli[data-act="dj"] .ly-deck { transform: none; }
.ly-pillow { transform: scale(.5, .3); transform-box: fill-box; transform-origin: 50% 80%; transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.lyli:is([data-act="sleep"], [data-act="startle"], [data-act="fallen"], [data-act="getup"]) .ly-pillow { opacity: 1; transform: none; }
.ly-glass,
.ly-game { opacity: 0; transition: opacity .25s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ly-glass { transform: scale(.3) rotate(-40deg); transform-origin: 214px 214px; }
.ly-game { transform: translateY(34px) scale(.6); transform-origin: 150px 226px; }
.lyli[data-act="search"] .ly-glass,
.lyli[data-act="game"] .ly-game { opacity: 1; transform: none; }

.lyli[data-act="stretch"] .ly-pose { animation: lyStretch 1.8s ease-in-out both; }
.lyli[data-act="stretch"] .ly-arm-l { transform: translate(-5px, -117px) rotate(-8deg) scale(.78); }
.lyli[data-act="stretch"] .ly-arm-r { transform: translate(-7px, -118px) rotate(8deg) scale(.8); }
.lyli[data-act="groom"] .ly-pose { animation: lyBreath 1.4s ease-in-out infinite alternate; }
.lyli[data-act="groom"] .ly-arm-r { transform: translate(-65px, -44px) rotate(-18deg) scale(.7); animation: lyLick .26s ease-in-out .45s infinite alternate; }
.lyli[data-act="tilt"] .ly-pose { animation: lyTilt 1.7s ease-in-out both; }
.lyli[data-act="hop"] .ly-pose { animation: lyHop 0.65s cubic-bezier(.3, .7, .4, 1) 2; }
.lyli[data-act="hop"] .ly-shadow,
.lyli[data-act="cheer"] .ly-shadow { animation: lyShadowHop .8s cubic-bezier(.3, .7, .4, 1) infinite; }
.lyli[data-act="hop"] .ly-shadow { animation-duration: .65s; animation-iteration-count: 2; }
.lyli[data-act="peek"] .ly-pose { animation: lyBreath 3.4s ease-in-out infinite alternate; }
.lyli[data-act="peek"] .ly-peek { animation: lyPeek 2.7s ease-in-out both; }


.lyli.ly-enter .ly-jelly { animation: lyEnter .95s cubic-bezier(.34, 1.4, .64, 1) both; }
.lyli.ly-enter .ly-shadow { animation: lyShadowIn .95s ease-out both; }
.lyli.ly-enter .ly-glow { animation: lyGlowIn 1.2s ease-out both; }

.ly-pop {
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  pointer-events: none;
  background: #f472b6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C5 15.4 2 12.2 2 8.3A5 5 0 0 1 12 6.6 5 5 0 0 1 22 8.3c0 3.9-3 7.1-10 12.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C5 15.4 2 12.2 2 8.3A5 5 0 0 1 12 6.6 5 5 0 0 1 22 8.3c0 3.9-3 7.1-10 12.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lyPop .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.ly-pop.is-star {
  background: #e9e3ff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 6.6 2.4 8 9 9-6.6 1-8 2.4-9 9-1-6.6-2.4-8-9-9 6.6-1 8-2.4 9-9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 6.6 2.4 8 9 9-6.6 1-8 2.4-9 9-1-6.6-2.4-8-9-9 6.6-1 8-2.4 9-9z'/%3E%3C/svg%3E");
}

.ly-pop { transform: scale(var(--s, 1)); }
.ly-pop.is-fluff {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ece4ff 0 36%, rgba(196, 181, 253, .85) 58%, rgba(167, 139, 250, 0) 72%);
  -webkit-mask: none;
  mask: none;
  animation-duration: 1.25s;
}
.ly-puff {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 55%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 18%, rgba(221, 214, 254, .55) 42%, rgba(167, 139, 250, 0) 70%);
  transform: translate(-50%, -50%) scale(.2);
  animation: lyPuff 1.5s ease-out forwards;
}
.lyli[data-squeeze] .ly-jelly {
  transform: scale(1.16, .8) !important;
  transition: transform 2.4s cubic-bezier(.2, .6, .3, 1);
}
.lyli[data-squeeze] .ly-pose { animation: lyShake .1s linear 1.2s infinite; }
.lyli.ly-shake .ly-pose { animation: lyShake .1s linear 5; }
.lyli.ly-boom .ly-jelly { animation: lyBoom .5s ease-in forwards; }
.lyli.ly-boom :is(.ly-glow, .ly-shadow, .ly-front, .ly-motes) { opacity: 0; transition: opacity .3s ease .4s; }

@keyframes lyShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}
@keyframes lyBoom {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22, 1.28) rotate(-3deg); opacity: 1; }
  80% { transform: scale(1.38) rotate(3deg); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes lyPuff {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
@keyframes lyMote {
  0% { opacity: 0; transform: translate(0, 10px) scale(.4); }
  30% { opacity: .9; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: translate(5px, -30px) scale(1); }
}
@keyframes lySnot {
  from { transform: scale(.4); }
  to { transform: scale(1); }
}
@keyframes lyAsk {
  0% { transform: translateY(10px) scale(.2) rotate(-20deg); opacity: 0; }
  30% { transform: none; opacity: 1; }
  85% { transform: none; opacity: 1; }
  100% { transform: translateY(-6px); opacity: 0; }
}
@keyframes lyStretch {
  0%, 100% { transform: scale(1, 1); }
  35%, 70% { transform: translateY(-5px) scale(.94, 1.09); }
}
@keyframes lyLick {
  from { transform: translate(-65px, -44px) rotate(-26deg) scale(.7); }
  to { transform: translate(-63px, -41px) rotate(-8deg) scale(.7); }
}
@keyframes lyTilt {
  0%, 100% { transform: rotate(0); }
  22%, 78% { transform: rotate(9deg); }
}
@keyframes lyPeek {
  0%, 100% { transform: translate(0, 0); }
  18%, 42% { transform: translate(-6px, 0); }
  60%, 84% { transform: translate(6px, -1px); }
}
@keyframes lyShadowHop {
  0%, 65%, 100% { transform: scale(1); opacity: 1; }
  35% { transform: scale(.72); opacity: .6; }
}
@keyframes lyEnter {
  0% { transform: translateY(50px) scale(.3); opacity: 0; }
  45% { opacity: 1; }
  60% { transform: translateY(-12px) scale(1.06, .95); }
  80% { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: none; }
}
@keyframes lyShadowIn {
  from { transform: scale(.2); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes lyGlowIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lyPop {
  0% { transform: translate(0, 0) scale(calc(var(--s, 1) * .3)); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(calc(var(--s, 1) * 1.1)) rotate(25deg); opacity: 0; }
}

.ly-yarn,
.ly-fly,
.ly-alert { opacity: 0; transition: opacity .3s ease; }
.ly-yarn { transform: translateX(46px); transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.lyli[data-act="yarn"] .ly-yarn { opacity: 1; transform: none; }
.lyli[data-act="yarn"] .ly-ball { animation: lyRoll 1.6s ease-in-out infinite; }
.lyli[data-act="yarn"] .ly-arm-r { transform: translate(-12px, 2px) rotate(-4deg); animation: lyBat 1.6s ease-in-out infinite; }
.lyli[data-act="yarn"] .ly-pose { animation: lyCrouch 1.6s ease-in-out infinite; }
.lyli[data-act="yarn"] .ly-peek { transform: translate(3px, 5px); }

.lyli[data-act="game"] .ly-pose { animation: lyBreathLow 2s ease-in-out infinite alternate; }
.lyli[data-act="game"] .ly-game { animation: lySteer 2.4s ease-in-out .5s infinite; }
.ly-btn { transform-box: fill-box; transform-origin: center; }
.lyli[data-act="game"] .ly-thumb-l { animation: lyThumb .22s ease-in-out infinite alternate; }
.lyli[data-act="game"] .ly-thumb-r { animation: lyThumb .22s ease-in-out .11s infinite alternate; }
.lyli[data-act="game"] .ly-btn { animation: lyPulse .3s steps(2) infinite alternate; }
.lyli[data-act="game"] .ly-btn:nth-of-type(2) { animation-delay: .15s; }
.lyli[data-act="game"] .ly-btn:nth-of-type(3) { animation-delay: .07s; }

.lyli[data-act="butterfly"] .ly-fly { opacity: 1; animation: lyFlight 3.7s ease-in-out both; }
.ly-wing { transform-box: fill-box; transform-origin: 100% 50%; }
.lyli[data-act="butterfly"] .ly-wing { animation: lyFlap .14s ease-in-out infinite alternate; }
.ly-wing-r { transform-origin: 0 50%; }
.lyli[data-act="butterfly"] .ly-peek { animation: lyFollow 3.7s ease-in-out both; }
.lyli[data-act="butterfly"] .ly-pose { animation: lyWatch 3.7s ease-in-out both; }
.lyli[data-act="butterfly"] .ly-arm-l { animation: lySwat 3.7s ease-in-out both; }

.lyli[data-act="startle"] .ly-alert { opacity: 1; }
.ly-alert text { fill: #fde68a; stroke: #92400e; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; font: 900 40px/1 Inter, system-ui, sans-serif; }
.ly-alert path { fill: none; stroke: #fde68a; stroke-width: 4; stroke-linecap: round; }
.ly-alert { transform-origin: 50% 100%; }
.lyli[data-act="startle"] .ly-alert { animation: lyAlert .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.lyli[data-act="startle"] .ly-pose { animation: lyStartle .56s cubic-bezier(.3, .7, .4, 1) both; }
.lyli[data-act="startle"] .ly-arm-l { transform: translate(-10px, -60px) rotate(-20deg) scale(.82); }
.lyli[data-act="startle"] .ly-arm-r { transform: translate(-4px, -62px) rotate(20deg) scale(.84); }
.lyli[data-act="fallen"] .ly-pose { transform-origin: 150px 163px; animation: lyFall .75s cubic-bezier(.5, 0, .6, 1) both; }
.lyli[data-act="fallen"] .ly-arm-l { animation: lyFlail .3s ease-in-out 4 alternate; }
.lyli[data-act="fallen"] .ly-arm-r { animation: lyFlail .34s ease-in-out .15s 4 alternate; }
.lyli[data-act="getup"] .ly-pose { transform-origin: 150px 163px; animation: lyGetUp .85s cubic-bezier(.34, 1.4, .64, 1) both; }
.lyli:is([data-act="startle"], [data-act="fallen"], [data-act="getup"]) .ly-shadow { opacity: 0; }

.ly-tuft {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 10px;
  margin: -5px 0 0 -6px;
  border-radius: 60% 40% 55% 45%;
  pointer-events: none;
  background: radial-gradient(circle at 40% 40%, #e6dcff 0 35%, rgba(180, 160, 245, .8) 60%, rgba(167, 139, 250, 0) 75%);
  opacity: 0;
  animation: lyTuft 7s ease-in-out forwards;
}

@keyframes lyRoll {
  0%, 8% { transform: translateX(0) rotate(0); }
  22% { transform: translateX(12px) rotate(70deg); }
  60% { transform: translateX(4px) rotate(30deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes lyBat {
  0%, 100% { transform: translate(-12px, 2px) rotate(-4deg); }
  10% { transform: translate(-36px, 8px) rotate(-18deg); }
  18% { transform: translate(-27px, 6px) rotate(-12deg); }
  40% { transform: translate(-15px, 2px) rotate(-6deg); }
}
@keyframes lyCrouch {
  0%, 100% { transform: translateY(2px) rotate(2deg) scale(1.02, .98); }
  12% { transform: translateY(0) rotate(5deg) scale(1, 1); }
}
@keyframes lySteer {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  60% { transform: rotate(5deg); }
}
@keyframes lyThumb {
  from { transform: translateY(0); }
  to { transform: translateY(-2.5px); }
}
@keyframes lyFlight {
  0% { transform: translate(320px, 50px); }
  22% { transform: translate(226px, 40px); }
  42% { transform: translate(120px, 64px); }
  58% { transform: translate(196px, 132px); }
  66% { transform: translate(168px, 92px); }
  100% { transform: translate(-40px, -10px); }
}
@keyframes lyFlap {
  from { transform: scaleX(1); }
  to { transform: scaleX(.3); }
}
@keyframes lyFollow {
  0% { transform: translate(6px, -4px); }
  22% { transform: translate(4px, -6px); }
  42% { transform: translate(-4px, -5px); }
  58% { transform: translate(3px, 1px); }
  66% { transform: translate(0, -3px); }
  100% { transform: translate(-6px, -5px); }
}
@keyframes lyWatch {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(3deg); }
  42% { transform: rotate(-4deg); }
  62% { transform: translateY(-6px) rotate(0); }
  70% { transform: translateY(0) rotate(0); }
}
@keyframes lySwat {
  0%, 56%, 76%, 100% { transform: none; }
  62% { transform: translate(-12px, -72px) rotate(-22deg) scale(.82); }
  68% { transform: translate(-8px, -56px) rotate(-10deg) scale(.86); }
}
@keyframes lyAlert {
  0% { transform: translateY(12px) scale(.2); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes lyStartle {
  0% { transform: scale(1.05, .93) translateY(-6px); }
  35% { transform: translateY(-34px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes lyFall {
  0% { transform: translateY(-4px) rotate(0); }
  40% { transform: translateY(-34px) rotate(120deg); }
  70% { transform: translateY(0) rotate(192deg); }
  85% { transform: translateY(-4px) rotate(172deg); }
  100% { transform: translateY(0) rotate(180deg); }
}
@keyframes lyFlail {
  from { transform: translate(-6px, -26px) rotate(-30deg) scale(.86); }
  to { transform: translate(-2px, -46px) rotate(20deg) scale(.86); }
}
@keyframes lyGetUp {
  0% { transform: rotate(180deg); }
  60% { transform: translateY(-16px) rotate(372deg); }
  80% { transform: translateY(0) rotate(356deg) scale(1.04, .96); }
  100% { transform: rotate(360deg); }
}
@keyframes lyTuft {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(var(--s, 1)); }
  10% { opacity: 1; }
  50% { transform: translate(var(--drift), calc(var(--fall) * .5)) rotate(140deg) scale(var(--s, 1)); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--drift) * -.5), var(--fall)) rotate(260deg) scale(var(--s, 1)); }
}

.lyli:is([data-act="sleep"], [data-act="startle"]) .ly-hat { opacity: 1; transform: none; }
.ly-hat { transform: translateY(-34px) rotate(-8deg); transform-origin: 150px 96px; transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.lyli[data-act="startle"] .ly-hat { transform: translate(10px, -26px) rotate(14deg); }
.ly-pompom { transform-origin: 20% 0; }
.lyli[data-act="sleep"] .ly-pompom { animation: lyPompom 3.8s ease-in-out infinite alternate; }
.lyli[data-act="cheer"] .ly-confetti { opacity: 1; }
.lyli[data-act="cheer"] .ly-bit { animation: lyConfetti 1.1s cubic-bezier(.2, .7, .3, 1) calc(var(--i) * .07s) infinite; }
.lyli[data-act="laptop"] .ly-logo-glow { animation: lyPulse 1.6s ease-in-out infinite alternate; }
.lyli[data-act="game"] .ly-bar { animation: lyPulse .7s ease-in-out infinite alternate; }
.ly-strands { inset: 0; border-radius: 50%; overflow: hidden; }
.lyli[data-act="yarn"] .ly-strands { animation: lySpinBall 1.6s ease-in-out infinite; }
.ly-glint { opacity: .8; }

@keyframes lyPompom {
  from { transform: rotate(-8deg); }
  to { transform: rotate(10deg); }
}
@keyframes lyConfetti {
  0% { transform: translateY(16px) rotate(0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-22px) rotate(220deg) scale(1); opacity: 0; }
}
@keyframes lySpinBall {
  0%, 8% { transform: rotate(0); }
  22% { transform: rotate(160deg); }
  60% { transform: rotate(70deg); }
  100% { transform: rotate(0); }
}

.ly-witch,
.ly-santa,
.ly-pumpkin,
.ly-gift,
.ly-bats,
.ly-snow { display: none; }
.lyli[data-season="halloween"] :is(.ly-pumpkin, .ly-bats),
.lyli[data-season="newyear"] :is(.ly-gift, .ly-snow) { display: inline; }
.lyli[data-season="halloween"]:not(:is([data-act="music"], [data-act="dj"], [data-act="sleep"], [data-act="startle"], [data-act="fallen"], [data-act="getup"])) .ly-witch,
.lyli[data-season="newyear"]:not(:is([data-act="music"], [data-act="dj"], [data-act="sleep"], [data-act="startle"], [data-act="fallen"], [data-act="getup"])) .ly-santa { display: inline; }
.lyli[data-season="halloween"] .ly-flicker { animation: lyFlicker 1.3s steps(4) infinite; }
.lyli[data-season="halloween"] .ly-bat { animation: lyBatFly 3.2s ease-in-out infinite; }
.lyli[data-season="halloween"] .ly-bat:nth-child(2) { animation-duration: 4.1s; animation-delay: -1.4s; }
.ly-flake { border-radius: 50%; background: #fff; }
@media (min-width: 721px) {
  .lyli-stage[data-lyli="home"] .lyli[data-season="newyear"] .ly-flake { animation: lySnow 6s linear calc(var(--i) * -.63s) infinite; }
  .lyli-stage[data-lyli="home"] .lyli[data-season="newyear"] .ly-flake:nth-child(odd) { animation-duration: 7.4s; }
}
.lyli-stage:not([data-lyli="home"]) .ly-snow { display: none; }

@keyframes lyFlicker {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
  75% { opacity: .7; }
}
@keyframes lyBatFly {
  0%, 100% { transform: translate(0, 0) scaleX(1); }
  25% { transform: translate(8px, -6px) scaleX(.6); }
  50% { transform: translate(16px, 2px) scaleX(1); }
  75% { transform: translate(8px, 6px) scaleX(.6); }
}
@keyframes lySnow {
  from { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  to { transform: translate(14px, 270px); opacity: 0; }
}

.song-card { position: relative; }
.lyli-song { --z: .42; position: absolute; right: 22px; bottom: 12px; z-index: 2; }
.empty-state-row.has-lyli { display: flex; align-items: center; gap: 12px; }
.lyli-empty { --z: .36; margin: -8px 0 -8px -10px; }
@media (min-width: 900px) {
  html[data-design="new"] .song-card:has(.lyli-song) .song-info { padding-right: 118px; }
}
@media (max-width: 899px) {
  .lyli-song { --z: .3; top: 8px; right: 6px; bottom: auto; }
}

@media (max-width: 720px) {
  .ly-motes,
  .ly-snow { display: none !important; }
}