*{box-sizing:border-box}html{background:#2f2219}body{margin:0;color:#312317;font-family:Georgia,'Times New Roman',serif}.map-page{background:radial-gradient(ellipse at center,#d6b590 0,#7b5840 80%,#2f2219 100%)}.map-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-color:#9f7651 #ddc3a5}.map-stage{position:relative;width:min(100%,1100px);margin:0 auto;line-height:0;transition:filter .36s,opacity .36s}.map-stage.is-entering{filter:sepia(.4) blur(3px);opacity:.5}.map-art{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border:1px solid transparent;cursor:pointer;line-height:1;display:grid;place-items:center;text-decoration:none;color:#ead5b8;transition:background .25s,border-color .25s,box-shadow .25s}.hotspot:hover{background:#dfbb7e24;border-color:#f3d6a27d;box-shadow:0 0 18px #ffdeac65}.hotspot:focus-visible{outline:3px solid #ffe4a4;outline-offset:2px;background:#44271488;z-index:5}.hotspot:hover::after,.hotspot:focus-visible::after{content:attr(data-label);position:absolute;bottom:calc(100% + 5px);left:0;white-space:nowrap;padding:7px 10px;background:#38251de8;color:#fff0d4;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.1em;z-index:4;box-shadow:0 5px 15px #38251d44}.hotspot--named{background:#2f2018a9;border:1px solid #efc99b99;font:700 clamp(7px,.78vw,11px)/1 system-ui,sans-serif;letter-spacing:.13em;box-shadow:0 3px 15px #2c180c77;transform:rotate(-2deg)}.hotspot--dream{background:transparent;align-items:end;justify-items:center;color:#f8deb0;text-shadow:0 2px 9px #2a1b0d;font-size:clamp(14px,2vw,26px)}.hotspot--dream:hover{background:#f2d9a31c}.map-tools{max-width:1100px;margin:0 auto;padding:15px 18px 22px;background:#2f2219;color:#ead6bf;display:flex;align-items:flex-start;gap:14px;font:13px/1.4 system-ui,sans-serif}.map-tools button,.map-tools summary{cursor:pointer;background:none;border:1px solid #d8b99083;padding:9px 13px;color:inherit;font:inherit;min-height:38px}.map-tools button:hover,.map-tools summary:hover{background:#ead6bf19}.map-tools details{position:relative}.map-tools nav{position:absolute;bottom:calc(100% + 4px);left:0;z-index:10;background:#3c2a20;box-shadow:0 10px 24px #0006;display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));width:max-content;max-width:calc(100vw - 24px);padding:10px;max-height:62vh;overflow-y:auto}.map-tools nav a{color:#f7e5cb;text-decoration:none;padding:9px 10px}.map-tools nav a:hover,.map-tools nav a:focus-visible{background:#d2a67533}.map-viewport.is-zoomed .map-stage{width:1024px;max-width:none;margin:0}.map-viewport.is-zoomed{overscroll-behavior-x:contain}@media(max-width:650px){.map-tools{position:sticky;bottom:0;z-index:8;padding:9px 12px;gap:8px;box-shadow:0 -7px 22px #2f221951}.map-tools button,.map-tools summary{font-size:13px;padding:8px 10px}.hotspot--named{font-size:6px}.hotspot--dream{font-size:12px}.map-tools nav{left:auto;right:-90px;grid-template-columns:repeat(2,minmax(120px,1fr))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.hotspot--dream{background:transparent;border-color:transparent;box-shadow:none}
.hotspot--dream:hover{background:#f2d9a326;border-color:#f3d6a27d;border-radius:45%;box-shadow:0 0 18px #ffe1a56e}