.modern .hero.hanging-scene{
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr;
  align-items: stretch; gap: 0; isolation: isolate; width: 100%; min-height: 740px;
  height: auto; margin: 0; padding: 0; overflow: visible;
}
.modern .hanging-backdrop{ position: relative; display: grid; align-items: center; min-width: 0; padding: 90px 1% 64px; z-index: 0; }
.modern .hanging-description{
  width: 100%; max-width: 100%; margin: 0 auto; color: var(--cream, #fff0b7);
  font-family: var(--font-display, 'Patrick Hand', cursive); font-size: clamp(3.25rem, 6.8vw, 7rem); line-height: 1.13;
  letter-spacing: -.035em; text-align: center; text-wrap: balance; overflow-wrap: anywhere;
}
.modern .hanging-word{ display: inline-block; }
.modern .hanging-word:nth-child(4n + 2){ color: #ffd09e; }
.modern .hanging-motion .hanging-word{
  --word-reveal: clamp(0, calc(var(--hanging-reveal, 1) * 2 - min(var(--hanging-word), 24) * .04), 1);
  opacity: var(--word-reveal); transform: translateY(calc((1 - var(--word-reveal)) * 28px));
  filter: blur(calc((1 - var(--word-reveal)) * 4px)); transition: none;
}
.modern .hanging-motion:not(.hanging-entered) :is(.hanging-mascot, .hanging-rope){ visibility: hidden; }
.modern .hanging-scene:has(:focus-visible) .hanging-word{ opacity: 1; transform: none; filter: none; }
.modern .hanging-rope{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.modern .hanging-rope path{ fill: none; stroke: #f1e4c5; stroke-width: 1.35; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.modern .hanging-mascot{
  position: absolute; z-index: 2; left: 50%; top: 24%; display: block; width: clamp(180px, 21vw, 260px);
  aspect-ratio: 300 / 418; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 46%;
  background: transparent; box-shadow: none; cursor: grab; touch-action: none; user-select: none;
  transform: translate3d(calc(-50% + var(--hanging-x, 0px)), var(--hanging-y, 0px), 0) rotate(var(--hanging-angle, 0deg));
  transform-origin: 50% 0; transition: none; -webkit-tap-highlight-color: transparent;
}
.modern .hanging-mascot img{ display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 18px 18px #07060535); }
.modern .hanging-mascot:focus-visible{ outline: 2px dashed #ffdd98; outline-offset: 12px; }
.modern .hanging-dragging .hanging-mascot{ cursor: grabbing; }
.modern .hanging-reaction{
  position: absolute; left: 81%; top: 3%; z-index: 3; width: max-content; min-width: 0;
  max-width: min(14rem, calc(50vw - 2rem)); padding: 15px 18px;
  color: #14120e; background: #fff0b7; border: 2px solid #fff9d8; border-radius: 23px 23px 23px 4px;
  font-family: var(--font-display, 'Patrick Hand', cursive); font-size: 1.35rem; font-weight: 400;
  font-synthesis: none; line-height: 1.2; letter-spacing: 0; white-space: pre-line; overflow-wrap: anywhere;
  box-shadow: 0 5px 0 #b5916c, 0 12px 30px #08070530; transform: rotate(8deg);
}
.modern .hanging-reaction[hidden]{ display: none; }
.modern .hanging-motion.hanging-reacting .hanging-reaction{ animation: hanging-hello 440ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes hanging-hello{ 0% { opacity: 0; transform: translate(-10px, 10px) rotate(-8deg) scale(.75); } 65% { opacity: 1; transform: translate(0, -3px) rotate(10deg) scale(1.04); } 100% { opacity: 1; transform: rotate(8deg); } }
.modern .hanging-help{ position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; padding: 0 16px 30px; text-align: center; }
.modern .hanging-drag-hint{ color: #d6cbb0; font-size: .71rem; letter-spacing: .03em; }
.modern .hanging-aside{ min-height: 44px; padding: 8px 18px; color: #fbeed0; background: #14120e; border: 1px solid #736449; border-radius: 100px; font: inherit; font-size: .7rem; box-shadow: inset 0 1px #fff4da12; transition: background 180ms, color 180ms; }
.modern .hanging-aside:hover, .modern .hanging-aside[aria-pressed=true]{ color: #fff0b7; background: #3f3626; }
.modern .hanging-aside:focus-visible{ outline: 2px solid #ffdd98; outline-offset: 4px; }
.modern .hanging-sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modern:is(.motion-paused, .document-hidden) .hanging-word{ opacity: 1; transform: none; filter: none; transition: none; }
.modern:is(.motion-paused, .document-hidden) .hanging-reaction{ animation: none; }
@media (max-width: 600px){.modern .hero.hanging-scene{ min-height: 740px; height: auto; }
.modern .hanging-backdrop{ padding: 110px 0 66px; }
.modern .hanging-description{ max-width: 100%; font-size: clamp(2.3rem, 10vw, 3.8rem); line-height: 1.17; }
.modern .hanging-mascot{ width: clamp(132px, 34vw, 180px); top: 30%; }
.modern .hanging-reaction{ left: 60%; padding: 12px 14px; font-size: 1.1rem; }

}
@media (prefers-reduced-motion: reduce){.modern .hanging-motion .hanging-word{ opacity: 1; transform: none; filter: none; transition: none; }
.modern .hanging-motion.hanging-reacting .hanging-reaction{ animation: none; }

}
body.modern:not(.enhanced) .hero.hanging-scene{ height: auto; min-height: 0; padding-block: 60px 40px; }
body.modern:not(.enhanced) .hanging-backdrop{ position: static; display: block; padding: 0; }
body.modern:not(.enhanced) .hanging-word{ opacity: 1; transform: none; filter: none; }
body.modern:not(.enhanced) .hanging-mascot{ position: relative; left: auto; top: auto; margin: 36px auto 0; transform: none; cursor: default; pointer-events: none; visibility: visible; }
body.modern:not(.enhanced) :is(.hanging-rope, .hanging-help, .hanging-reaction){ display: none; }