.ls-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.ls-layer * { pointer-events: none; }
.ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.ls-free { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 1;
  transition: left .5s var(--ease, ease), top .5s var(--ease, ease), width .5s var(--ease, ease), height .5s var(--ease, ease), opacity .35s; }
.ls-free.ls-away { opacity: 0; transition: opacity .2s; }
.ls-free .ls-fig { position: absolute; inset: 0; overflow: hidden; }
.ls-free .ls-img { position: absolute; bottom: 0; left: var(--ls-left, 0); height: var(--ls-img-h, 100%); width: auto; max-width: none;
  transform: scaleX(var(--ls-flip, 1)); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }

.ls-free:not(.ls-peek) .ls-fig.ls-close .ls-img { -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 94%, transparent 100%); }

.ls-fig::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -2px; height: 9%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 60%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 55%, transparent 75%); }
.ls-free.ls-peek .ls-fig::after { content: none; }
.ls-fig { isolation: isolate; }

.ls-free.ls-peek .ls-img { bottom: auto; top: 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }

.ls-free::before { content: ''; position: absolute; inset: 8% -18% -6% -18%; background: radial-gradient(48% 52% at 50% 55%, rgba(248, 208, 106, .16), transparent 72%); }
.ls-free.ls-glow::before { background: radial-gradient(48% 52% at 50% 55%, rgba(46, 230, 255, .22), transparent 72%); }
.ls-body { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }


.ls-say { position: absolute; left: 0; top: 0; max-width: 300px; padding: 9px 13px 10px; border-radius: 14px; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98);
  background: linear-gradient(180deg, rgba(44, 48, 53, .97), rgba(27, 30, 33, .97)); box-shadow: inset 0 0 0 1.5px rgba(227, 167, 47, .6), 0 12px 28px rgba(0, 0, 0, .55);
  color: var(--light, #fffbe8); font-family: var(--f-body, system-ui, sans-serif); font-size: 15.5px; line-height: 1.3; font-style: italic;
  transition: opacity .3s, transform .3s var(--ease, ease), visibility 0s .3s; }
.ls-say.ls-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease, ease), visibility 0s; }
.ls-say.ls-on.ls-quiet { opacity: 0; visibility: hidden; }
.ls-say.ls-win { box-shadow: inset 0 0 0 1.5px rgba(46, 230, 255, .7), 0 0 18px rgba(46, 230, 255, .22), 0 12px 28px rgba(0, 0, 0, .55); }
.ls-say .ls-t::before { content: '\201C'; } .ls-say .ls-t::after { content: '\201D'; }
@media (min-width: 900px) and (min-height: 600px) { .ls-say { font-size: 17px; } }


.ls-mounted { position: relative; overflow: hidden; }
.ls-mounted .ls-fig { position: absolute; inset: 0; }
.ls-mounted .ls-img { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; left: 50%; transform: translateX(var(--ls-x, -50%)) scaleX(var(--ls-flip, 1));
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.ls-mounted .ls-fig.ls-close .ls-img { -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 94%, transparent 100%); }
.ls-mounted.ls-glow .ls-img { filter: drop-shadow(0 0 10px rgba(46, 230, 255, .35)) drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }


.ls-body.ls-m-enter { animation: ls-enter .8s var(--ease, ease) both; }
.ls-body.ls-m-rise { animation: ls-rise 1.1s cubic-bezier(.2, 1.4, .3, 1) both; }
.ls-body.ls-m-lean { animation: ls-lean .65s var(--ease, ease) both; }
.ls-body.ls-m-tip { animation: ls-tip 1.2s ease-in-out both; }
.ls-body.ls-m-wince { animation: ls-wince .62s ease-in-out both; }
.ls-body.ls-m-sink { animation: ls-sink 1.2s var(--ease, ease) both; }
.ls-body.ls-m-swap { animation: ls-swap .45s var(--ease, ease) both; }
.ls-body.ls-idle { animation: ls-bob 4.2s ease-in-out infinite; }
.ls-body.ls-sunk { transform: translateY(14%); }
.ls-free.ls-left .ls-m-lean { animation-name: ls-lean-l; }
@keyframes ls-enter { from { transform: translateX(var(--ls-in, 40%)) translateY(12%); opacity: 0; } 65% { opacity: 1; transform: translateX(-2%) rotate(-1.5deg); } to { transform: none; } }
@keyframes ls-rise { from { transform: translateY(60%) scale(.96); } 45% { transform: translateY(-6%) scale(1.03); } 65% { transform: translateY(2%) rotate(-2deg); } 82% { transform: translateY(-2%) rotate(1.5deg); } to { transform: none; } }
@keyframes ls-lean { from { transform: translateX(45%) rotate(-7deg); } 70% { transform: translateX(-3%) rotate(-3deg); } to { transform: rotate(-2deg); } }
@keyframes ls-lean-l { from { transform: translateX(-45%) rotate(7deg); } 70% { transform: translateX(3%) rotate(3deg); } to { transform: rotate(2deg); } }
@keyframes ls-tip { 0% { transform: none; } 30% { transform: rotate(-5deg) translateY(3%); } 55% { transform: rotate(-5deg) translateY(3%); } 80% { transform: rotate(1deg) translateY(-2%); } 100% { transform: none; } }
@keyframes ls-wince { 0% { transform: none; } 18% { transform: translateY(5%) rotate(3.5deg); } 40% { transform: translateY(4%) rotate(-3deg); } 62% { transform: translateY(4%) rotate(2.5deg); } 82% { transform: translateY(2%) rotate(-1deg); } 100% { transform: none; } }
@keyframes ls-sink { 0% { transform: none; } 30% { transform: rotate(2.5deg); } 55% { transform: rotate(-2.5deg) translateY(6%); } 100% { transform: translateY(14%); } }
@keyframes ls-swap { from { transform: translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ls-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5%); } }
.ls-free.ls-left { --ls-in: -40%; }


[data-calm=on] .ls-body, [data-calm=on] .ls-body[class*=ls-m-] { animation: none !important; transform: none !important; }
[data-calm=on] .ls-free { transition: opacity .2s; }
[data-calm=on] .ls-say, [data-calm=on] .ls-say.ls-on { transform: none; transition: opacity .2s, visibility 0s; }