/* Easter egg: Lumpy Space Princess (Adventure Time pack, static/js/eggs/lsp.js). Pure CSS LSP from the second pen
   Dimitry pasted (2026-10-30), classes namespaced .clsp-*. The pen's page background and ground shadow are left
   out (she floats across the app, not over a floor); the pen's name label is left out too
   (Dimitry, 2026-10-30). She floats from below the page to above it, swaying, bobbing as in the
   pen; pointer-events: none so she never blocks work. */
.clsp-wrap { position: fixed; bottom: 0; z-index: 9000; pointer-events: none; font-size: clamp(8px, 1.5vh, 14px);
  transform: translate(-50%, 100%); animation: clsp-float 7s cubic-bezier(.45, .05, .55, .95) forwards; }
.clsp-sway { animation: clsp-sway 2.2s ease-in-out infinite alternate; transform-origin: 50% 30%; }

.clsp { position: relative; }
.clsp-body { animation: clsp-bob 1s infinite ease-in-out alternate; }

.clsp-lump div { background-color: #cd93f9; border: 1px solid black; box-sizing: border-box; }
.clsp-lump .clsp-upper, .clsp-lump .clsp-middle { position: relative; left: 50%; transform: translateX(-50%); }
.clsp-lump .clsp-upper { width: 8em; height: 9em; border-radius: 50% / 45%; }
.clsp-lump .clsp-middle { width: 16em; height: 9em; margin-top: -4.5em; border-radius: 30% / 45% 40% 60% 55%; border: none; z-index: 2; }
.clsp-lump .clsp-bottom { position: relative; width: 19em; height: 10em; margin-top: -5.5em;
  border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; border-width: 1px 1px 0 1px; transform: rotate(-2deg); z-index: 1; }
.clsp-lump .clsp-foot { background-color: transparent; border: none; display: flex; justify-content: center; margin-left: .7em; }
.clsp-lump .clsp-foot .clsp-f1 { width: 5em; height: 5.7em; margin-top: -1.7em; border-radius: 70% 30% 57% 43% / 62% 35% 65% 38%; }
.clsp-lump .clsp-foot .clsp-f2 { width: 4em; height: 7.3em; margin-top: -.7em; margin-left: -1.8em;
  border-radius: 35% 0% 55% 45% / 65% 50% 50% 35%; border-left: none; border-top: none; }
.clsp-lump .clsp-foot .clsp-f3 { width: 3.2em; height: 7.3em; margin-top: -.9em; margin-left: -.5em;
  border-radius: 0% 0% 58% 42% / 65% 40% 60% 35%; border-left: none; }
.clsp-lump .clsp-foot .clsp-f4 { width: 2.3em; height: 6.7em; margin-top: -.7em; margin-left: -.2em;
  border-radius: 0% 30% 48% 52% / 65% 65% 35% 30%; border-width: 0 0 1px 0; z-index: 1; }
.clsp-lump .clsp-foot .clsp-f5 { width: 4.4em; height: 4.4em; margin-top: -1.1em; margin-left: -1.7em;
  border-radius: 0% 40% 48% 52% / 30% 50% 50% 70%; }

.clsp-face div { position: absolute; z-index: 2; }
.clsp-face .clsp-star { left: 50%; top: 2em; width: 0; height: 0; border-bottom: 1.4em solid #fff05b; border-left: 2em solid transparent;
  border-right: 2em solid transparent; border-radius: 20%; transform: translateX(-50%) rotate(-35deg); margin: 2em 0; }
.clsp-face .clsp-star::before, .clsp-face .clsp-star::after { content: ''; display: block; width: 0; height: 0; position: absolute; }
.clsp-face .clsp-star::before { top: -1em; left: .2em; transform: rotate(35deg); border-bottom: 1.6em solid #fff05b;
  border-left: .6em solid transparent; border-right: .6em solid transparent; }
.clsp-face .clsp-star::after { top: .15em; left: -1.8em; transform: rotate(70deg); border-bottom: 1.4em solid #fff05b;
  border-left: 2em solid transparent; border-right: 2em solid transparent; border-radius: 20%; }
.clsp-face .clsp-eyes { position: absolute; top: 8.5em; left: 50%; transform: translateX(-50%); width: 5.5em; display: flex; justify-content: space-between; }
.clsp-face .clsp-eye { position: relative; background-color: black; width: .5em; height: .5em; border-radius: 50%; }
.clsp-face .clsp-eyebrow { position: absolute; background-color: black; width: 1.2em; height: .23em; top: -.4em; }
.clsp-face .clsp-left .clsp-eyebrow { left: -.4em; border-radius: 50% 50% 20% 80% / 20% 50% 50% 80%; }
.clsp-face .clsp-right .clsp-eyebrow { left: -.2em; border-radius: 40% / 50%; }
.clsp-face .clsp-mouth { background-color: #4b3869; border: 1px solid black; position: absolute; left: 50%; transform: translateX(-50%) rotate(-2deg);
  top: 9.5em; width: 2em; height: 1em; border-radius: 50% / 45% 45% 55% 55%; }
.clsp-face .clsp-mouth::after { content: ''; display: block; position: absolute; background-color: #cd93f9; width: 1.5em; height: 1.5em;
  border-left: 1px solid black; border-radius: 50%; top: -.5em; right: -1.4em; transform: rotate(-20deg); }


/* From fully below the page to fully above it. */
@keyframes clsp-float { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, calc(-100vh - 10%)); } }
@keyframes clsp-sway { from { transform: translateX(-2.5em) rotate(-5deg); } to { transform: translateX(2.5em) rotate(5deg); } }
@keyframes clsp-bob { from { transform: translateY(1em); } to { transform: translateY(-1em); } }
@media (prefers-reduced-motion: reduce) { .clsp-sway, .clsp-body { animation: none; } }
