.rabbit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding: 5px 10px;
  min-height: 44px;
  border: 1px solid #e3d7e8;
  border-radius: 9px;
  background: #f3ebf6;
  color: #4d365d;
  font-size: 12px;
  font-weight: 660;
  white-space: nowrap;
}
.rabbit-link:hover { background: #ebdff1; }
.rabbit-link:focus-visible { outline-color: #754a8c; }

.rabbit-card {
  --rabbit-ink: #4d365d;
  --rabbit-muted: #5e5068;
  --rabbit-line: #e3d7e8;
  --rabbit-scale: .9;
  --rabbit-halo: #eae1f0;
  --rabbit-shadow: #d7c6df;
  --rabbit-badge: #e7daec;
  --rabbit-accent: #805799;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--rabbit-line);
  border-radius: 16px;
  background: #f3ebf6;
  color: var(--rabbit-ink);
}
.rabbit-card[data-stage="growing"] {
  --rabbit-scale: .96;
  --rabbit-halo: #e3d6ef;
  --rabbit-shadow: #d0bbe2;
  --rabbit-badge: #e2d3ee;
  --rabbit-accent: #754b96;
}
.rabbit-card[data-stage="grown"] {
  --rabbit-scale: 1;
  --rabbit-halo: #f0e4d1;
  --rabbit-shadow: #d9c3dd;
  --rabbit-badge: #eedcc2;
  --rabbit-accent: #775187;
}
.rabbit-head, .rabbit-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.rabbit-head h2 { font-size: 15px; line-height: 1.35; }
#rabbit-stage {
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--rabbit-badge);
  font-size: 11px;
  font-weight: 690;
  white-space: nowrap;
}
.rabbit-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end center;
  height: 146px;
  margin: 5px 0 7px;
}
.rabbit-scene::before, .rabbit-scene::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.rabbit-scene::before {
  inset: auto 50% 3px auto;
  width: 90%;
  max-width: 172px;
  height: 114px;
  border-radius: 51% 45% 40% 47%;
  background: var(--rabbit-halo);
  transform: translateX(50%) rotate(-4deg);
}
.rabbit-scene::after {
  width: min(65%, 106px);
  height: 14px;
  bottom: 4px;
  border-radius: 50%;
  background: var(--rabbit-shadow);
}
.rabbit-image {
  display: block;
  width: min(100%, 146px);
  height: 142px;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center 94%;
  scale: var(--rabbit-scale);
  transition: scale .3s ease;
}
.rabbit-heart {
  position: absolute;
  z-index: 1;
  left: 67%;
  top: 39%;
  opacity: 0;
  font-size: 19px;
  line-height: 1;
  color: #9c4369;
  pointer-events: none;
}
.rabbit-card.is-feeding .rabbit-image { animation: rabbit-hop .58s ease; }
.rabbit-card.is-feeding .rabbit-heart { animation: rabbit-love .66s ease-out; }
.rabbit-evolution-burst {
  position: absolute;
  z-index: 2;
  inset: 8% 10% 14%;
  opacity: 0;
  pointer-events: none;
  color: #a26420;
}
.rabbit-evolution-burst span {
  position: absolute;
  font-size: 23px;
  line-height: 1;
}
.rabbit-evolution-burst span:nth-child(1) { top: 16%; left: 12%; }
.rabbit-evolution-burst span:nth-child(2) { top: 32%; right: 4%; font-size: 26px; }
.rabbit-evolution-burst span:nth-child(3) { bottom: 12%; left: 2%; font-size: 15px; }
.rabbit-card.is-evolving .rabbit-image { animation: rabbit-evolve .9s ease-out; }
.rabbit-card.is-evolving .rabbit-evolution-burst { animation: rabbit-sparkle .9s ease-out; }
.rabbit-stats {
  color: var(--rabbit-ink);
  font-size: 13px;
  font-weight: 660;
}
#rabbit-food { font-variant-numeric: tabular-nums; }
#rabbit-growth {
  display: block;
  width: 100%;
  height: 7px;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  appearance: none;
  accent-color: var(--rabbit-accent);
  background: #e2d4e9;
}
#rabbit-growth::-webkit-progress-bar { background: #e2d4e9; border-radius: 8px; }
#rabbit-growth::-webkit-progress-value { background: var(--rabbit-accent); border-radius: 8px; }
#rabbit-growth::-moz-progress-bar { background: var(--rabbit-accent); border-radius: 8px; }
.rabbit-milestones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  color: var(--rabbit-muted);
  text-align: center;
  line-height: 1.35;
}
.rabbit-milestones li {
  border-radius: 5px;
  padding: 3px 1px;
}
.rabbit-milestones li[aria-current="step"] {
  background: var(--rabbit-badge);
  color: var(--rabbit-ink);
}
.rabbit-milestones strong, .rabbit-milestones small { display: block; white-space: nowrap; }
.rabbit-milestones strong { font-size: 11px; }
.rabbit-milestones small { font-size: 10px; }
#rabbit-next, .rabbit-tip, #rabbit-message {
  color: var(--rabbit-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#rabbit-next { margin-top: 6px; }
.rabbit-actions {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
}
#rabbit-feed {
  flex: 1;
  padding-inline: 7px;
  background: #624378;
  white-space: nowrap;
}
#rabbit-practice {
  padding-inline: 7px;
  color: var(--rabbit-ink);
  white-space: nowrap;
}
#rabbit-practice:hover { background: #e7daec; }
#rabbit-feed:hover:not(:disabled):not([aria-disabled="true"]) { background: #503365; }
#rabbit-feed:focus-visible, #rabbit-practice:focus-visible, .rabbit-card:focus-visible { outline-color: #754a8c; }
#rabbit-feed:is(:disabled, [aria-disabled="true"]) {
  cursor: default;
  opacity: 1;
  background: #e7daec;
  color: #5e5068;
}
.rabbit-tip { margin-top: 7px; }
#rabbit-message { margin-top: 5px; font-weight: 650; }
#rabbit-message:empty { margin-top: 0; }

@keyframes rabbit-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(1px) scale(1.055, .9); }
  48% { transform: translateY(-11px) scale(.97, 1.04); }
  76% { transform: translateY(0) scale(1.025, .96); }
}
@keyframes rabbit-love {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  22%, 55% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.14); }
}
@keyframes rabbit-evolve {
  0% { opacity: .55; transform: translateY(5px) scale(.94); }
  48% { opacity: 1; transform: translateY(-9px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes rabbit-sparkle {
  0% { opacity: 0; transform: scale(.7); }
  28%, 66% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}
@media (max-width: 760px) {
  .rabbit-card {
    display: grid;
    grid-template-columns: minmax(100px, .82fr) minmax(0, 1.18fr);
    column-gap: 12px;
    align-items: start;
    padding: 12px 13px;
  }
  .rabbit-head, #rabbit-message { grid-column: 1 / -1; }
  .rabbit-head { margin-bottom: 8px; }
  .rabbit-scene {
    align-self: center;
    grid-column: 1;
    grid-row: 2 / 8;
    margin-block: 0;
  }
  .rabbit-stats, #rabbit-growth, .rabbit-milestones, #rabbit-next, .rabbit-actions, .rabbit-tip { grid-column: 2; }
}
@media (max-width: 400px) {
  .section-head:has(.rabbit-link) > p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rabbit-card.is-feeding .rabbit-image, .rabbit-card.is-feeding .rabbit-heart,
  .rabbit-card.is-evolving .rabbit-image, .rabbit-card.is-evolving .rabbit-evolution-burst { animation: none; }
  .rabbit-card.is-feeding .rabbit-heart, .rabbit-card.is-evolving .rabbit-evolution-burst { opacity: 1; }
}