.pet-hint-mobile { display: none; }
.hero .hero-hint { font-size: 13px; line-height: 1.6; letter-spacing: .02em; text-transform: none; }
.pet-star-guide { position: absolute; z-index: 9; width: 290px; max-width: calc(100% - 32px); padding: 17px 34px 17px 18px; border: 1px solid #efd8b2; border-radius: 14px; background: #fff9ee; color: #123e4b; box-shadow: 0 8px 28px #00182030; }
.pet-star-guide[hidden] { display: none; }
.pet-star-guide strong { display: block; font-size: 15px; line-height: 1.4; }
.pet-star-guide p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #425b63; }
.pet-star-guide::after { content: ''; position: absolute; left: var(--guide-arrow, 50%); width: 12px; height: 12px; background: #fff9ee; transform: translateX(-50%) rotate(45deg); }
.pet-star-guide[data-side="below"]::after { top: -7px; border-left: 1px solid #efd8b2; border-top: 1px solid #efd8b2; }
.pet-star-guide[data-side="above"]::after { bottom: -7px; border-right: 1px solid #efd8b2; border-bottom: 1px solid #efd8b2; }
.pet-star-guide__close { position: absolute; right: 0; top: 0; width: 36px; height: 36px; border: 0; background: transparent; color: #425b63; font-size: 24px; cursor: pointer; border-radius: 12px; }
.pet-star-guide__close:focus-visible { outline: 2px solid #123e4b; outline-offset: -4px; }
.pet-star--guide { outline: 1px solid #ffd08e88; outline-offset: 2px; }
.pet-star--guide::before { box-shadow: 0 0 10px 4px #ffd28588; }
.pet-sky { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pet-star { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%); border: 0; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; border-radius: 50%; }
.pet-star::before { content: ''; position: absolute; inset: 17px; border-radius: 50%; background: #fff4d8; box-shadow: 0 0 7px 2px #fff8, 0 0 18px 5px #ffd28533; animation: pet-twinkle 4s ease-in-out infinite; animation-delay: var(--delay); }
.pet-star:hover::before, .pet-star:focus-visible::before { animation: none; background: #ffc575; box-shadow: 0 0 10px 4px #ffd28588; }
.pet-star:focus-visible { outline: 1px solid #ffd285; outline-offset: 2px; }
@keyframes pet-twinkle { 0%,100% { opacity: .5; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.pet-star-card { position: absolute; z-index: 10; width: 258px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #eddec8; border-radius: 14px; background: #fffdf9; color: #123e4b; box-shadow: 0 8px 28px #00182040; }
.pet-star-card[hidden], .pet-star[hidden] { display: none; }
.pet-star-card img { width: 62px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: 9px; }
.pet-star-card strong { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 3px; }
.pet-star-card span { display: block; font-size: 10px; line-height: 1.6; color: #52656b; }
.pet-star-card span:first-of-type { font-size: 11px; margin-bottom: 4px; }
@media (max-width: 991px) {
  .pet-star-guide { position: relative; left: auto !important; top: auto !important; width: calc(100% - 40px); max-width: 420px; margin: 0 auto 40px; flex-shrink: 0; }
  .hero { flex-wrap: wrap; }
  .pet-sky { position: relative; inset: auto; width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 0; padding: 0 20px 30px; margin-top: -22px; }
  .pet-star { position: relative; left: auto !important; top: auto !important; transform: none; justify-self: center; width: 44px; height: 44px; }
  .pet-star::before { inset: 19px; }
  .hero-hint { display: flex; font-size: 11px; }
  .pet-hint-desktop { display: none; }
  .pet-hint-mobile { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .pet-star::before { animation: none; } }