.ae-map {
  --ae-ink: #052857;
  --ae-blue: #07549d;
  --ae-pink: #c0007f;
  color: var(--ae-ink);
  font-family: inherit;
  position: relative;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100svh;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  background: #deedfa;
}
.ae-map *, .ae-map *::before, .ae-map *::after { box-sizing: border-box; }
.ae-map [hidden] { display: none !important; }
.ae-map__heading { position: absolute; z-index: 7; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); pointer-events: none; }
.ae-map .ae-map__intro-line { margin: 0; padding: 11px 20px; border: 1px solid #ffffffb8; border-radius: 6px; background: #f8fcffed; color: var(--ae-ink); font: inherit; font-size: clamp(12px, 1.1vw, 16px); font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 0 3px 12px #07549d0a; }
.ae-map__frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(125deg,#dfedfa,#d9eafa 52%,#e7edf9); }
.ae-map__scroll { width: 100%; height: 100%; overflow: hidden; }
.ae-map__stage, .ae-map__intro-scene { position: absolute; left: 50%; top: 50%; width: min(calc(100% - 48px), calc((100svh - 144px) * 1.5)); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); }
.ae-map__intro-scene { width: min(calc(100% - 48px), calc((100svh - 144px) * 1200 / 760)); aspect-ratio: 1200 / 760; }
.ae-map__stage::before, .ae-map__intro-scene::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 28px; background: linear-gradient(115deg,#07549db3,#5d58a47a 50%,#c0007f94); filter: blur(23px); opacity: .6; pointer-events: none; }
.ae-map__world, .ae-map__camera { position: relative; width: 100%; height: 100%; }
.ae-map__art, .ae-map__intro-art { display: block; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; }
.ae-map__art { pointer-events: none; }
.ae-map__art image, .ae-map__intro-art image { image-rendering: auto; }
.ae-map__art text, .ae-map__intro-art text { font-family: inherit; }
.ae-map a.ae-map__room { position: absolute; z-index: 2; display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; outline: none; text-decoration: none; pointer-events: auto; }
.ae-map__building { transition: filter .24s ease; }
.ae-map__world:has(.ae-map__room[data-room="meeting"]:is(:hover,:focus-visible)) .ae-map__room-wrap[data-room="meeting"] .ae-map__building,
.ae-map__world:has(.ae-map__room[data-room="media"]:is(:hover,:focus-visible)) .ae-map__room-wrap[data-room="media"] .ae-map__building,
.ae-map__world:has(.ae-map__room[data-room="info"]:is(:hover,:focus-visible)) .ae-map__room-wrap[data-room="info"] .ae-map__building { filter: brightness(1.13) drop-shadow(0 0 2px #a661b480); }
.ae-map__world:has(.ae-map__room[data-room="meeting"]:focus-visible) .ae-map__room-wrap[data-room="meeting"] .ae-map__focus,
.ae-map__world:has(.ae-map__room[data-room="media"]:focus-visible) .ae-map__room-wrap[data-room="media"] .ae-map__focus,
.ae-map__world:has(.ae-map__room[data-room="info"]:focus-visible) .ae-map__room-wrap[data-room="info"] .ae-map__focus { opacity: 1; }
.ae-map__focus { opacity: 0; fill: none; stroke: #fffadd; stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ae-map__badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -100%); padding: 5px 9px; border: 1px solid #3977ac; border-radius: 3px; background: #fffff5; color: var(--ae-ink); font: 600 clamp(10px, .9vw, 13px)/1.25 Arial, sans-serif; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 0 #153a5630, inset 0 0 0 2px #fff; }
.ae-map__badge-arrow { color: #3677a8; font-size: .9em; }
.ae-map__npc { position: absolute; z-index: 3; left: var(--npc-x); top: var(--npc-y); width: 3.4%; height: 8.5%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); }
.ae-map .ae-map__npc-button { position: relative; display: block; width: 100%; height: 100%; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 5px; background: transparent; box-shadow: none; cursor: pointer; appearance: none; color: var(--ae-blue); touch-action: manipulation; list-style: none; pointer-events: auto; }
.ae-map__npc-button::-webkit-details-marker { display: none; }
.ae-map__npc-button::marker { content: ""; }
.ae-map__npc-mark { position: absolute; left: calc(50% - 10px); top: -19px; display: grid; place-items: center; width: 20px; height: 22px; border: 1px solid #07549d; border-radius: 3px; background: #fffff5; box-shadow: 0 2px 0 #16395a30; color: var(--ae-blue); font: 800 14px/1 Arial, sans-serif; animation: ae-map-bounce 1.7s ease-in-out infinite; transition: background .2s, box-shadow .2s; }
.ae-map__npc-mark::after { content: ""; position: absolute; bottom: -4px; left: 7px; width: 5px; height: 5px; border-right: 1px solid #07549d; border-bottom: 1px solid #07549d; background: inherit; transform: rotate(45deg); }
.ae-map__npc--courses .ae-map__npc-mark { color: #97408f; animation-delay: -.8s; }
.ae-map__npc-button:hover .ae-map__npc-mark, .ae-map__npc[open] .ae-map__npc-mark { background: #e3f1ff; box-shadow: 0 2px 0 #16395a30, 0 0 12px #07549d35; }
.ae-map__bubble { position: absolute; bottom: calc(100% + 11px); left: 50%; width: min(258px, calc(100vw - 24px)); transform: translate(calc(-50% + var(--bubble-offset, 0px)), var(--bubble-y, 0px)); padding: 0; border: 1px solid #d0dcee; border-radius: 8px; background: #fffffb; box-shadow: 0 12px 28px #07315c26; color: var(--ae-ink); text-align: left; }
.ae-map__npc:not([open]) > .ae-map__bubble { display: none; }
.ae-map__npc[open] { z-index: 6; }
.ae-map__bubble[data-below] { bottom: auto; top: calc(100% + 11px); }
.ae-map__bubble[data-below]::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.ae-map__bubble::after { content: ""; position: absolute; bottom: -7px; left: calc(50% - 7px); width: 13px; height: 13px; transform: rotate(45deg); background: white; border-bottom: 1px solid #d0dcee; border-right: 1px solid #d0dcee; }
.ae-map__bubble[data-clamped]::after { display: none; }
.ae-map .ae-map__bubble-link { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin: 0; padding: 23px 28px 17px 22px; border-radius: inherit; color: var(--ae-ink); font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: none; pointer-events: auto; }
.ae-map__bubble-arrow { align-self: flex-end; color: var(--ae-blue); font-size: 21px; line-height: 1; }
.ae-map__bubble-link:hover { background: #edf5fc; }
.ae-map .ae-map__close { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; padding: 0; background: transparent; color: #486382; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.ae-map :is(button, a, summary, [tabindex]):focus-visible { outline: 3px solid var(--ae-blue); outline-offset: 4px; }
.ae-map .ae-map__room:focus-visible { outline: none; }
.ae-map__toolbar { position: absolute; z-index: 7; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
.ae-map .ae-map__replay, .ae-map .ae-map__skip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid #cbd8e8; border-radius: 999px; background: #fff; color: var(--ae-blue); font: inherit; font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ae-map__replay:hover, .ae-map__skip:hover { box-shadow: 0 3px 12px #07549d18; }
.ae-map__intro { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.ae-map__intro::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 58% 49%,#f8fcff 0%,#badaf744 28%,#c0007f00 65%); opacity: 0; pointer-events: none; }
.ae-map .ae-map__skip { position: absolute; z-index: 6; right: max(16px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); box-shadow: 0 2px 8px #123f7310; }
.ae-map__intro.is-playing { animation: ae-map-reveal 1.9s 6.15s ease-in-out both; }
.ae-map__camera { transform-origin: 63% 46.58%; }
.ae-map__intro.is-playing .ae-map__camera { will-change: transform; animation: ae-map-enter 1.9s 6.15s cubic-bezier(.4,0,.2,1) both; }
.ae-map__intro.is-playing::after { animation: ae-map-threshold 1.9s 6.15s ease both; }
.ae-map__intro.is-playing .ae-map__car { animation: ae-map-park 2.7s linear both; }
.ae-map__intro.is-playing .ae-map__visitor { animation: ae-map-walk 3.3s 2.9s linear both; }
.ae-map__intro.is-playing .ae-map__visitor-body { animation: ae-map-step .22s 2.9s steps(2, jump-none) 15; }
.ae-map__visitor-back { opacity: 0; }
.ae-map__intro.is-playing .ae-map__visitor-back { animation: ae-map-facing 3.3s 2.9s steps(1, end) both; }
.ae-map__intro.is-playing .ae-map__door-light { animation: ae-map-door .9s 5.5s ease both; }
.ae-map.is-travelling .ae-map__world { will-change: transform, opacity; animation: ae-map-inside 1.9s 6.15s cubic-bezier(.22,.61,.36,1) both; }
.ae-map.is-travelling .ae-map__stage::before { opacity: 0; }
.ae-map.is-revealing .ae-map__world { animation: ae-map-skip .45s ease-out both; }
.ae-map__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes ae-map-park {
  0% { transform: translate(940px, 850px) rotate(0deg); }
  26% { transform: translate(940px, 688px) rotate(0deg); }
  39% { transform: translate(918px, 651px) rotate(-60deg); }
  47% { transform: translate(878px, 640px) rotate(-90deg); }
  70% { transform: translate(628px, 640px) rotate(-90deg); }
  82% { transform: translate(582px, 622px) rotate(-45deg); }
  91% { transform: translate(566px, 584px) rotate(0deg); }
  100% { transform: translate(566px, 552px) rotate(0deg); }
}
@keyframes ae-map-walk {
  0% { opacity: 0; transform: translate(592px, 570px); }
  5% { opacity: 1; transform: translate(610px, 578px); }
  41% { opacity: 1; transform: translate(817px, 578px); }
  49% { opacity: 1; transform: translate(857px, 563px); }
  57% { opacity: 1; transform: translate(874px, 524px); }
  82% { opacity: 1; transform: translate(874px, 397px); }
  89% { opacity: 1; transform: translate(855px, 367px); }
  96% { opacity: 1; transform: translate(785px, 360px); }
  100% { opacity: 0; transform: translate(756px, 354px); }
}
@keyframes ae-map-facing { 0%,89%,100% { opacity: 0; } 49% { opacity: 1; } }
@keyframes ae-map-step { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes ae-map-door { 0%,100% { opacity: 0; } 30%,75% { opacity: .75; } }
@keyframes ae-map-reveal { 0%,18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ae-map-enter { from { transform: translate(0,0) scale(1); } to { transform: translate(-13%,3.42%) scale(7); } }
@keyframes ae-map-threshold { 0%,100% { opacity: 0; } 42% { opacity: .42; } }
@keyframes ae-map-inside { 0% { opacity: 0; transform: scale(1.22); } 30% { opacity: .16; } 100% { opacity: 1; transform: scale(1); } }
@keyframes ae-map-skip { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes ae-map-bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-7px); } 65% { transform: translateY(-1px); } 80% { transform: translateY(-3px); } }
@media (max-width: 600px) {
  .ae-map .ae-map__intro-line { padding: 9px 12px; }
  .ae-map__stage { width: min(calc(100% - 24px), calc((100svh - 144px) * 1.5)); }
  .ae-map__intro-scene { width: min(calc(100% - 24px), calc((100svh - 144px) * 1200 / 760)); }
  .ae-map__art, .ae-map__intro-art { border-radius: 10px; }
  .ae-map__badge { padding: 4px 5px; gap: 4px; }
  .ae-map__npc-mark { top: -7px; width: 18px; height: 19px; left: calc(50% - 9px); font-size: 12px; }
  .ae-map__intro.is-playing .ae-map__visitor-body { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-map *, .ae-map *::before, .ae-map *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ae-map__intro, .ae-map .ae-map__replay, .ae-map .ae-map__skip { display: none !important; }
}
@media (max-height: 300px) {
  .ae-map__bubble { max-height: calc(100svh - 94px); overflow: auto; }
}
