/* Rick — source-faithful CSS (from provided SCSS). Arms pose-driven in AnimLab. */
.animlab-rick-root {
  --floor: #3a0943;
  --floor-accent: #8f29a8;
  --space: #100037;
  --border-color: #666;
  --rick-width: 7rem;
  --rick-head-h: 12rem;
  --rick-eye: 4.8rem;
  --rick-body-h: 4rem;
  --rick-leg-h: 4rem;
  --rick-belt-h: 1rem;
  --rick-coat-len: 6rem;
  --collar-h: 1.2rem;
  --collar-w: 0.4rem;
  --rick-skin: #decdbd;
  --rick-hair: #b1daee;
  --rick-coat: #f5f5f5;
  --rick-shirt: #aae6e2;
  --rick-belt: #352909;
  --rick-pants: #7d6234;
  --ray-green: #7fff50;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-size: 10px;
  overflow: visible;
}
.animlab-rick-root .row { display: flex; }
.animlab-rick-root .column { display: flex; flex-flow: column; }
.animlab-rick-root .stars {
  position: absolute;
  inset: 0 0 18% 0;
  z-index: 2;
  background-color: var(--space);
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 2rem;
  min-height: 0;
}
.animlab-rick-root .ground {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  min-height: 18%;
  z-index: 0;
  background-color: var(--floor);
  border-top: solid 0.2rem var(--floor-accent);
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  pointer-events: none;
}
.animlab-rick-root .rick {
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 3;
  margin-bottom: 0.5rem;
  pointer-events: none;
}
.animlab-rick-root .rick-hair {
  position: absolute;
  bottom: calc(var(--rick-leg-h) + var(--rick-body-h));
  z-index: 1;
  background: var(--rick-hair);
  width: calc(var(--rick-head-h) * 1.1);
  height: calc(var(--rick-head-h) * 1.2);
  transform: rotate(45deg);
}
.animlab-rick-root .rick-hair:before,
.animlab-rick-root .rick-hair:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--rick-hair);
}
.animlab-rick-root .rick-hair:before {
  width: var(--rick-head-h);
  height: calc(var(--rick-head-h) * 1.15);
  transform: rotate(145deg);
}
.animlab-rick-root .rick-hair:after {
  width: calc(var(--rick-head-h) * 1.1);
  height: calc(var(--rick-head-h) * 1.1);
  transform: rotate(-65deg);
}
.animlab-rick-root .rick-head {
  z-index: 3;
  position: relative;
  box-shadow: 0 0 0.8rem #000;
  background-color: var(--rick-skin);
  height: var(--rick-head-h);
  width: var(--rick-head-h);
  border-radius: calc(var(--rick-head-h) / 3);
  align-items: center;
}
.animlab-rick-root .rick-head:before,
.animlab-rick-root .rick-head:after {
  content: "";
  z-index: 0;
  position: absolute;
  bottom: calc(var(--rick-head-h) * 0.2);
  background-color: var(--rick-skin);
  height: calc(var(--rick-head-h) * 0.15);
  width: calc(var(--rick-head-h) * 0.15);
  border-radius: var(--rick-head-h);
}
.animlab-rick-root .rick-head:before { right: 90%; border-left: solid 0.2rem var(--border-color); }
.animlab-rick-root .rick-head:after { left: 90%; border-right: solid 0.2rem var(--border-color); }
.animlab-rick-root .eyebrow {
  background-color: var(--rick-hair);
  width: calc(var(--rick-head-h) / 1.3);
  height: calc(var(--rick-head-h) / 12);
  border-radius: var(--rick-head-h);
  margin-top: calc(var(--rick-head-h) / 5);
  border: solid 0.2rem var(--border-color);
  animation: alRickBrow 5s ease-in-out alternate infinite;
}
.animlab-rick-root .eyes { position: relative; }
.animlab-rick-root .eyes > div:not(.nose) {
  border: solid 0.2rem var(--border-color);
  background-color: #fff;
  width: var(--rick-eye);
  height: var(--rick-eye);
  border-radius: var(--rick-head-h);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animlab-rick-root .eyes > div:not(.nose):before {
  content: "*";
  animation: alRickLook 5s ease-in-out alternate infinite;
  position: absolute;
  top: 20%;
  left: 35%;
  font-size: calc(var(--rick-eye) * 0.5);
  height: 4rem;
  line-height: 6rem;
  text-align: center;
  font-weight: bold;
}
.animlab-rick-root .eyes > div:not(.nose):after {
  content: "";
  position: absolute;
  top: 100%;
  height: calc(var(--rick-eye) / 12);
  width: calc(var(--rick-eye) / 2);
  border-bottom: solid 0.2rem var(--border-color);
  border-radius: 50%;
}
.animlab-rick-root .nose {
  position: absolute;
  bottom: 0;
  right: calc(var(--rick-eye) * 0.9);
  transform: rotate(-20deg);
  width: calc(var(--rick-head-h) * 0.1);
  height: calc(var(--rick-head-h) * 0.3);
  border-bottom: solid 0.3rem var(--border-color);
  border-radius: 60%;
  margin: calc(var(--rick-head-h) * -0.05) 0;
}
.animlab-rick-root .mouth {
  position: relative;
  border-top: solid 0.5rem #4d4d4d;
  width: calc(var(--rick-head-h) / 2);
  height: calc(var(--rick-head-h) / 9);
  border-radius: 40%;
  margin-top: calc(var(--rick-head-h) / 9);
}
.animlab-rick-root .mouth:before,
.animlab-rick-root .mouth:after {
  content: "";
  position: absolute;
  display: block;
  height: calc(var(--rick-head-h) / 15);
  width: calc(var(--rick-head-h) / 15);
  border-radius: 50%;
}
.animlab-rick-root .mouth:before { right: 90%; border-left: solid 0.2rem var(--border-color); }
.animlab-rick-root .mouth:after { left: 90%; border-right: solid 0.2rem var(--border-color); }

.animlab-rick-root .rick-body {
  z-index: 2;
  overflow: visible;
  height: var(--rick-body-h);
}
.animlab-rick-root .arm {
  border: solid 0.2rem var(--border-color);
  border-top: none;
  position: relative;
  width: calc(var(--rick-width) / 6);
  height: calc(var(--rick-body-h) * 1.3);
  margin-top: calc(var(--rick-body-h) * -0.1);
  background-color: var(--rick-coat);
  transform-origin: 50% 8%;
  transition: transform 0.12s ease-out;
  animation: none !important;
  will-change: transform;
  pointer-events: none;
}
/* No lag while dragging — transition made limbs feel inverted/sticky */
.animlab-rick-root.is-dragging .arm,
.animlab-rick-root.is-dragging .rick-head,
.animlab-rick-root.is-dragging .rick {
  transition: none !important;
}
.animlab-rick-root .arm--left,
.animlab-rick-root .arm--right {
  /* JS sets inline transform — keep origin stable */
  transform-box: fill-box;
}
.animlab-rick-root .arm:after {
  content: "";
  border: solid 0.2rem var(--border-color);
  background-color: var(--rick-skin);
  height: 1rem;
  left: -0.3rem;
  right: -0.3rem;
  position: absolute;
  top: 98%;
  border-radius: 1rem;
}
.animlab-rick-root .arm .rayGun {
  border: solid 0.2rem var(--border-color);
  position: absolute;
  top: 100%;
  right: 100%;
  width: 1rem;
  height: 4rem;
  background-color: #ccc;
  border-top-left-radius: 1rem;
  border-top-right-radius: 0.1rem;
}
.animlab-rick-root .arm .rayGun:before {
  content: "";
  z-index: 5;
  width: 0.5rem;
  height: 0.8rem;
  background-color: #000;
  border: solid 0.2rem var(--border-color);
  position: absolute;
  top: -0.5rem;
  right: 70%;
  transform: rotate(45deg);
}
.animlab-rick-root .arm .rayGun:after {
  content: "";
  border: solid 0.2rem var(--border-color);
  z-index: 5;
  width: 2rem;
  height: 1.2rem;
  position: absolute;
  top: 40%;
  right: 100%;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  background-image: radial-gradient(circle closest-side, #e6ffd9, rgba(127, 255, 80, 0.7));
  animation: alRickPulse 0.5s alternate infinite ease;
}
.animlab-rick-root .torso {
  box-shadow: 0 0 0.4rem #000;
  background-color: var(--rick-shirt);
  height: var(--rick-body-h);
  width: var(--rick-width);
  position: relative;
}
.animlab-rick-root .labCoat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.animlab-rick-root .labCoat-side {
  box-shadow: 0 0 1rem #000;
  z-index: 10;
  width: calc(var(--rick-width) * 0.3);
  background-color: var(--rick-coat);
  height: var(--rick-coat-len);
  position: relative;
}
.animlab-rick-root .labCoat-side:before {
  content: "";
  position: absolute;
  background-color: #fff;
  width: var(--collar-w);
  height: var(--collar-h);
}
.animlab-rick-root .labCoat--right {
  border-bottom-right-radius: 100%;
}
.animlab-rick-root .labCoat--right:before {
  border-bottom-left-radius: 100%;
  border-left: 0.2rem solid var(--border-color);
  right: 0;
}
.animlab-rick-root .labCoat--left {
  border-bottom-left-radius: 100%;
}
.animlab-rick-root .labCoat--left:before {
  border-bottom-right-radius: 100%;
  border-right: 0.2rem solid var(--border-color);
  left: 0;
}
.animlab-rick-root .labCoat-opening {
  background-color: var(--rick-shirt);
  flex-grow: 1;
  height: var(--rick-body-h);
}
.animlab-rick-root .rick-belt {
  z-index: 1;
  background-color: var(--rick-belt);
  height: var(--rick-belt-h);
  width: var(--rick-width);
  justify-content: center;
}
.animlab-rick-root .rick-belt:before {
  content: "";
  background-color: gold;
  height: var(--rick-belt-h);
  width: var(--rick-belt-h);
}
.animlab-rick-root .rick-legs {
  z-index: 1;
  height: var(--rick-leg-h);
  width: var(--rick-width);
  justify-content: space-between;
  border-top: solid calc(var(--rick-leg-h) / 8) var(--rick-pants);
  position: relative;
}
.animlab-rick-root .rick-legs:after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--rick-width) * 0.3);
  left: calc(var(--rick-width) * 0.3);
  height: calc(var(--rick-body-h) * 0.265);
  background-color: #ababab;
  box-shadow: inset 0 0.5rem 1.2rem rgba(0, 0, 0, 0.8);
}
.animlab-rick-root .rick-legs > div {
  background-color: var(--rick-pants);
  height: var(--rick-leg-h);
  width: calc(var(--rick-width) * 0.3);
  justify-content: flex-end;
  margin-top: -0.1rem;
}
.animlab-rick-root .sock {
  background-color: #fff;
  height: 1rem;
  width: 100%;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.6);
}
.animlab-rick-root .shoe {
  margin-top: -0.5rem;
  background-color: #444;
  height: 1rem;
  width: calc(var(--rick-width) / 1.8);
  padding: 0.5rem;
  border-top-right-radius: 70%;
  border-bottom: solid 0.2rem tan;
  box-sizing: border-box;
}
.animlab-rick-root .rickLeg--right .shoe {
  transform: rotateY(180deg);
  transform-origin: calc(var(--rick-width) * 0.15);
}

.animlab-rick-root.is-ghost { opacity: 0.28; filter: grayscale(0.2); }
.animlab-rick-root.is-hidden { display: none; }

@keyframes alRickLook {
  0%, 10% { top: 20%; left: 35%; }
  13% { top: 20%; left: 70%; }
  30% { top: 20%; left: 65%; }
  33%, 50% { top: 20%; left: 15%; }
  53% { top: 10%; left: 15%; }
  80% { top: 5%; left: 35%; }
  90% { top: 7%; left: 35%; }
  92%, 100% { top: 20%; left: 35%; }
}
@keyframes alRickBrow {
  0%, 10% { transform: rotate(0deg); }
  13% { transform: rotate(-2deg); }
  30%, 50% { transform: rotate(0deg); }
  33% { transform: rotate(2deg); }
  80% { transform: translateY(-15%); }
  90%, 100% { transform: rotate(0deg); }
}
@keyframes alRickPulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* Viewport hosts canvas + Rick */
.animlab__viewport {
  position: relative !important;
}
.animlab__canvas {
  position: relative;
  z-index: 3;
  background: transparent !important;
}