@property --world-paper { syntax: "<color>"; inherits: true; initial-value: #f8fbf9; }
@property --world-ink { syntax: "<color>"; inherits: true; initial-value: #233e38; }
@property --world-muted { syntax: "<color>"; inherits: true; initial-value: #566c64; }
@property --world-line { syntax: "<color>"; inherits: true; initial-value: rgba(35, 62, 56, .14); }
@property --world-accent { syntax: "<color>"; inherits: true; initial-value: #167d71; }
@property --world-header { syntax: "<color>"; inherits: true; initial-value: rgba(248, 251, 249, .64); }
@property --world-frost { syntax: "<color>"; inherits: true; initial-value: rgba(248, 251, 249, .64); }
.world-experience { display: none; }
.experience-toggle { display: grid; place-items: center; }
.experience-toggle svg { width: 17px; height: 17px; }
[data-experience="world"] { scroll-behavior: auto; --world-paper: #f8fbf9; --world-ink: #233e38; --world-muted: #566c64; --world-line: rgba(35, 62, 56, .14); --world-accent: #167d71; --world-header: rgba(248, 251, 249, .64); --world-frost: rgba(248, 251, 249, .64); }
[data-experience="world"]:has(#worldCanvas[data-ready="true"]) { transition: --world-paper 1100ms ease-in-out, --world-ink 1100ms ease-in-out, --world-muted 1100ms ease-in-out, --world-line 1100ms ease-in-out, --world-accent 1100ms ease-in-out, --world-header 1100ms ease-in-out, --world-frost 1100ms ease-in-out; }
[data-experience="world"]:has(#worldCanvas[data-fading]) :is(.brand, .site-nav a, .icon-button, .world-pin, .world-dock button, .world-tool) { transition: none; }
[data-experience="world"]:has(.is-scoping) .site-header { --world-header: rgba(9, 17, 14, .66); --world-ink: #eff8f1; --world-muted: #afc6ba; --world-line: rgba(219, 242, 226, .16); --world-accent: #80dcc5; }
[data-experience="world"][data-theme="dark"] { --world-paper: #192724; --world-ink: #eff8f1; --world-muted: #afc6ba; --world-line: rgba(219, 242, 226, .16); --world-accent: #80dcc5; --world-header: rgba(9, 17, 14, .66); --world-frost: rgba(9, 17, 14, .6); }
[data-experience="world"] body { height: 100svh; overflow: hidden; overscroll-behavior: none; background: #e6eeeb; }
[data-experience="world"] .world-experience { display: block; position: fixed; inset: 0; overflow: hidden; color: var(--world-ink); }
[data-experience="world"] main#top,
[data-experience="world"] .site-footer,
[data-experience="world"] .ambient-wash,
[data-experience="world"] .cursor-light,
[data-experience="world"] .scroll-top,
[data-experience="world"] .scroll-progress { display: none; }
[data-experience="world"] .site-header { height: 84px; padding: 0 36px; background: var(--world-header); backdrop-filter: blur(18px) saturate(1.2); border: 0; border-bottom: 1px solid var(--world-line); box-shadow: none; color: var(--world-ink); }
[data-experience="world"] .brand { gap: 12px; color: var(--world-ink); }
[data-experience="world"] .brand-mark { width: 36px; height: 36px; }
[data-experience="world"] .brand::after { left: 48px; background: var(--world-accent); }
[data-experience="world"] .brand-name { font-family: var(--font-latin); font-size: 17px; font-weight: 700; }
[data-experience="world"] .site-nav { gap: 28px; }
[data-experience="world"] .site-nav a { color: var(--world-muted); font-size: 13px; font-weight: 500; }
[data-experience="world"] .site-nav a:hover, [data-experience="world"] .site-nav a.is-active { color: var(--world-ink); }
[data-experience="world"] .site-nav a::after { background: currentColor; }
[data-experience="world"] .header-actions { gap: 6px; }
[data-experience="world"] .header-actions .icon-button { border: 0; background: transparent; color: var(--world-ink); width: 38px; height: 38px; box-shadow: none; }
[data-experience="world"] .header-actions .language-toggle { width: 62px; }
[data-experience="world"] .icon-button:hover { background: var(--world-line); }
.world-stage { position: absolute; inset: 0; }
#worldCanvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.world-experience:not(.is-walking) #worldCanvas:focus-visible { outline: 2px solid var(--world-accent); outline-offset: -5px; }
.world-intro { position: absolute; left: 36px; top: max(104px, calc(18% - 27px)); width: 368px; padding: 26px 28px 22px; border: 1px solid var(--world-line); border-radius: 6px; background: var(--world-frost); backdrop-filter: blur(18px) saturate(1.2); pointer-events: none; transition: opacity 350ms, transform 500ms, visibility 350ms; }
.world-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 35px; font: 500 10px/1.3 var(--font-latin); color: var(--world-muted); }
.world-live-dot { width: 5px; height: 5px; background: var(--world-accent); border-radius: 50%; }
.world-intro-separator { opacity: .4; margin: 0 5px; }
.world-overline { margin: 0 0 4px; font: 500 10px/1.5 var(--font-latin); color: var(--world-muted); }
.world-intro h1 { margin: 0; font: 700 68px/1.1 var(--font-latin); letter-spacing: 0; }
.world-intro h1 > span { color: #db775d; }
.world-intro-role { font: 500 11px/1.7 var(--font-latin); margin: 15px 0 0; }
.world-intro-role > span { color: #db775d; margin: 0 6px; }
.world-intro-copy { margin: 22px 0 26px; color: var(--world-muted); font: 500 15px/1.9 var(--font-body); }
.world-enter { pointer-events: auto; display: inline-flex; align-items: center; gap: 28px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--world-line); background: transparent; color: var(--world-ink); cursor: pointer; font: 500 12px/1.5 var(--font-body); }
.world-enter svg { width: 17px; height: 17px; transition: transform 200ms; }
.world-enter:hover svg { transform: translate(3px, -3px); }
.world-experience.has-selection .world-intro { opacity: 0; transform: translateX(-25px); visibility: hidden; }
.world-experience.is-touring .world-intro, .world-experience.is-photo .world-intro, .world-experience.has-picture .world-intro, .world-experience.is-away .world-intro { opacity: 0; visibility: hidden; }
.world-experience.is-walking .world-intro, .world-loading:not([hidden]) ~ .world-intro { opacity: 0; visibility: hidden; }
.world-tool:disabled { opacity: .35; cursor: default; }
.world-pins { position: absolute; inset: 0; pointer-events: none; }
.world-pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border: 1px solid var(--world-line); border-radius: 5px; background: var(--world-paper); box-shadow: 0 3px 12px #162d2310; color: var(--world-ink); font: 500 11px/1.4 var(--font-body); white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background 180ms, box-shadow 180ms, opacity 250ms; }
.world-pin::after { content: ""; position: absolute; top: 100%; left: 50%; height: 18px; width: 1px; background: var(--world-muted); opacity: .5; }
.world-pin[hidden] { display: none; }
.world-fallback-notice { position: absolute; top: 82px; left: 24px; z-index: 3; max-width: min(620px, calc(100% - 48px)); margin: 0; padding: 8px 14px; background: var(--surface); border-radius: 4px; font-size: 12px; line-height: 1.6; }
.world-fallback-notice a { margin-left: 10px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
[data-experience="classic"] main:has(> .world-fallback-notice) .hero { padding-top: calc(var(--header-height) + 128px); }
.world-pin b { width: 21px; height: 21px; display: grid; place-items: center; color: var(--world-accent); background: color-mix(in srgb, var(--world-accent) 9%, transparent); border-radius: 3px; font: 500 10px var(--font-latin); }
.world-pin svg { width: 12px; height: 12px; opacity: .5; }
.world-pin:hover, .world-pin.is-active { background: var(--world-accent); color: var(--world-paper); box-shadow: 0 5px 18px #162d2328; }
.world-pin:hover b, .world-pin.is-active b { color: inherit; background: #ffffff18; }
.world-experience.has-selection .world-pin:not(.is-active) { opacity: .45; }
.world-stats { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); z-index: 7; margin: 0; padding: 6px 11px; border: 1px solid var(--world-line); border-radius: 5px; background: var(--world-paper); color: var(--world-ink); font: 500 11px/1.4 var(--font-latin); white-space: nowrap; pointer-events: none; }
.world-location { position: absolute; top: 100px; right: 36px; display: flex; gap: 10px; align-items: center; padding: 7px 11px; border: 1px solid var(--world-line); border-radius: 5px; background: color-mix(in srgb, var(--world-paper) 85%, transparent); font: 500 11px/1.4 var(--font-body); pointer-events: none; transition: opacity 200ms; }
.world-location-index { font-family: var(--font-latin); color: var(--world-muted); font-size: 10px; }
.world-experience.has-selection .world-location { opacity: 0; }
.world-dock { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 7px; border: 1px solid var(--world-line); border-radius: 8px; background: color-mix(in srgb, var(--world-paper) 92%, transparent); box-shadow: 0 8px 25px #163a2610; backdrop-filter: blur(12px); transition: left 500ms; }
.world-dock button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 74px; height: 42px; padding: 0 13px; border: 0; border-radius: 4px; color: var(--world-muted); background: transparent; cursor: pointer; font: 500 11px/1 var(--font-body); white-space: nowrap; transition: background 180ms, color 180ms; }
.world-dock button svg { width: 16px; height: 16px; stroke-width: 1.7; }
.world-dock button:hover { background: var(--world-line); color: var(--world-ink); }
.world-dock button.is-active { color: var(--world-paper); background: var(--world-ink); }
.world-dock-divider { width: 1px; height: 23px; background: var(--world-line); margin: 0 3px; }
.world-tools { position: absolute; left: 36px; bottom: 110px; display: flex; flex-direction: column; gap: 7px; }
.world-tool { width: 34px; height: 34px; border: 1px solid var(--world-line); border-radius: 4px; background: color-mix(in srgb, var(--world-paper) 85%, transparent); color: var(--world-ink); display: grid; place-items: center; cursor: pointer; transition: background 180ms, color 180ms, border-color 180ms; }
.world-tool:hover { background: var(--world-paper); }
.world-tool svg { width: 15px; height: 15px; stroke-width: 1.6; }
.world-tool[hidden], .world-more-menu[hidden] { display: none; }
.world-experience.has-note #worldPhoto { display: none; }
.world-more { position: relative; display: flex; }
.world-more-menu { position: absolute; left: calc(100% + 7px); top: 0; display: flex; gap: 7px; }
.world-more:has(#worldMotion[aria-pressed="true"]) > .world-tool { color: var(--world-accent); border-color: var(--world-accent); }
.world-walk-exit, .world-crosshair { display: none; }
.world-experience.is-walking .world-intro,
.world-experience.is-walking .world-pins,
.world-experience.is-walking .world-tools,
.world-experience.is-walking .world-dock,
.world-experience.is-walking .world-signature { visibility: hidden; pointer-events: none; }
.world-experience.is-walking .world-location-index { display: none; }
.world-experience.is-walking .world-walk-exit { display: grid; position: absolute; right: 36px; bottom: 32px; }
.world-experience.is-walking .world-crosshair { display: block; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; transform: translate(-50%, -50%); border-radius: 50%; background: #eaf2ecaa; box-shadow: 0 0 0 1px #172c2766; pointer-events: none; }
.world-experience.is-walking { cursor: none; }
.world-walk-hint, .world-photo-hint { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; gap: 16px; margin: 0; padding: 8px 14px; border: 1px solid var(--world-line); border-radius: 8px; background: color-mix(in srgb, var(--world-paper) 85%, transparent); color: var(--world-muted); font: 500 11px/1.5 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
.world-experience:not(.is-walking) .world-walk-hint { transition: none; }
.world-experience.shows-walk-hint .world-walk-hint { opacity: 1; visibility: visible; }
.world-experience.is-photo .world-walk-hint { transition: none; }
.world-walk-hint b, .world-photo-hint b { margin-right: 7px; padding: 1px 6px; border: 1px solid var(--world-line); border-radius: 3px; color: var(--world-ink); font: 500 10px/1.5 var(--font-latin); }
.world-walk-hint-lock { display: none; }
.world-experience:has(#worldCanvas[data-pointer-mode="cursor"]) .world-walk-hint-lock { display: inline; }
.world-tool[aria-pressed="true"] { color: var(--world-accent); border-color: var(--world-accent); }
.world-stick, .world-walk-pad, .world-walk-hint-touch { display: none; }
.world-experience.is-touch-walk { --walk-top: 96px; --walk-side: 36px; cursor: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.world-experience.is-touch-walk .world-walk-exit { top: var(--walk-top); bottom: auto; right: max(var(--walk-side), env(safe-area-inset-right)); width: 44px; height: 44px; }
.world-experience.is-touch-walk .world-walk-exit svg { width: 18px; height: 18px; }
.world-experience.is-walking.is-touch-walk .world-walk-photo { top: var(--walk-top); bottom: auto; right: calc(max(var(--walk-side), env(safe-area-inset-right)) + 52px); width: 44px; height: 44px; }
.world-experience.is-touch-walk .world-walk-photo svg { width: 18px; height: 18px; }
.world-experience.is-touch-walk .world-location { top: calc(var(--walk-top) + 7px); bottom: auto; left: max(var(--walk-side), env(safe-area-inset-left)); right: auto; }
.world-experience.is-touch-walk .world-walk-hint { top: calc(var(--walk-top) + 58px); bottom: auto; flex-wrap: wrap; justify-content: center; gap: 6px 14px; width: max-content; max-width: calc(100% - 28px); }
.world-experience.is-touch-walk .world-walk-hint > span { display: none; }
.world-experience.is-touch-walk .world-walk-hint > .world-walk-hint-touch { display: inline; }
.world-experience.is-touch-walk .world-toast { top: calc(var(--walk-top) + 58px); transition: opacity 240ms, transform 240ms, top 500ms; }
.world-experience.is-touch-walk.shows-walk-hint .world-toast { top: calc(var(--walk-top) + 100px); }
[data-experience="world"]:has(.is-touch-walk) .site-header { visibility: hidden; }
.world-experience.is-touch-walk .world-stick { display: block; position: absolute; left: max(28px, calc(env(safe-area-inset-left) + 16px)); bottom: max(44px, calc(env(safe-area-inset-bottom) + 28px)); width: 112px; height: 112px; border: 1px solid #eaf2ec99; border-radius: 50%; background: #172c2718; box-shadow: 0 0 0 1px #172c2740; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.world-experience.is-touch-walk.shows-walk-hint .world-stick { opacity: .6; }
.world-experience.is-touch-walk .world-stick.is-placed { left: 0; top: 0; bottom: auto; }
.world-experience.is-touch-walk .world-stick.is-held { opacity: 1; transition: none; will-change: transform; }
.world-stick span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #eaf2ecb8; box-shadow: 0 0 0 1px #172c2766; }
:root:not([data-theme="dark"]) .world-experience.is-touch-walk .world-stick { border: 2px solid #f8fbf9e6; background: #f8fbf92e; box-shadow: 0 0 0 1px #172c2759, inset 0 0 0 1px #172c2740; }
:root:not([data-theme="dark"]) .world-experience.is-touch-walk.shows-walk-hint .world-stick { opacity: .9; }
:root:not([data-theme="dark"]) .world-stick span { background: #f8fbf9; box-shadow: 0 0 0 1.5px #172c2780, 0 2px 6px #172c2740; }
:root .world-experience.is-touch-walk .world-stick.is-running { border-color: var(--world-accent); }
:root .world-stick.is-running span { background: var(--world-accent); }
.world-experience.is-touch-walk .world-walk-pad { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; position: absolute; right: max(22px, calc(env(safe-area-inset-right) + 12px)); bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
.world-walk-pad button { width: 64px; height: 64px; padding: 0; border: 1px solid var(--world-line); border-radius: 50%; background: color-mix(in srgb, var(--world-paper) 72%, transparent); color: var(--world-ink); display: grid; place-items: center; cursor: pointer; touch-action: none; }
.world-walk-pad button:active { background: var(--world-paper); }
.world-walk-pad button:focus-visible { outline: 2px solid var(--world-accent); outline-offset: 3px; }
.world-walk-pad svg { width: 22px; height: 22px; stroke-width: 1.6; pointer-events: none; }
.world-experience.is-walking.is-touch-walk .world-scope { cursor: pointer; }
.world-experience.is-walking.is-touch-walk .world-scope-close { display: grid; }
.world-experience.is-walking.is-touch-walk .world-scope-leave { display: none; }
.world-crosshair { transition: width 140ms ease, height 140ms ease; }
.world-experience.is-walking.is-aiming .world-crosshair { width: 14px; height: 14px; background: transparent; box-shadow: inset 0 0 0 1.5px #eaf2ecdd, 0 0 0 1px #172c2766; }
.world-experience.is-aiming:not(.is-walking) #worldCanvas { cursor: pointer; }
.world-act { position: absolute; z-index: 4; left: var(--aim-x, 50%); top: var(--aim-y, 50%); transform: translate(14px, 18px); display: flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid var(--world-line); border-radius: 5px; background: color-mix(in srgb, var(--world-paper) 88%, transparent); color: var(--world-ink); font: 500 11px/1.5 var(--font-body); white-space: nowrap; pointer-events: none; }
.world-act[hidden] { display: none; }
.world-act b { padding: 1px 6px; border: 1px solid var(--world-line); border-radius: 3px; font: 500 10px/1.5 var(--font-latin); }
.world-experience:not(.is-walking) .world-act b { display: none; }
.world-experience.is-walking .world-act { left: 50%; top: 50%; transform: translate(-50%, max(72px, 10vh)); pointer-events: auto; }
.world-experience.is-walking .world-act[data-aim="cat"] { transform: translate(-50%, max(96px, 21vh)); }
@media (pointer: coarse) { .world-act b { display: none; } .world-experience.is-walking .world-act { min-height: 44px; padding: 0 16px; font-size: 12px; transform: translate(-50%, max(64px, 8vh)); } .guestbook .guestbook-field :is(textarea, input) { font-size: 16px; } .guestbook-send { min-height: 44px; } }
.world-look { margin-top: 22px; }
.world-look:hover svg { transform: none; }
.world-project-link { display: inline-block; margin-top: 12px; color: var(--world-accent); font: 500 11px/1.6 var(--font-latin); text-decoration: underline; text-underline-offset: 3px; }
.world-project.is-cued summary strong { animation: world-cue 1.8s ease; }
.world-scope { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 96px 16px 28px; background: #0a1513f5; color: #eff0dc; cursor: pointer; animation: world-scope-in 350ms ease; transition: opacity 250ms ease, display 250ms allow-discrete; }
.world-scope[hidden] { display: none; opacity: 0; }
.world-experience.is-walking .world-scope { cursor: none; }
.world-scope-view { position: relative; width: min(100%, 100svh - 150px, 760px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px #82b3b644, 0 0 0 9px #0a1513, 0 0 0 10px #82b3b622; animation: world-scope-focus 700ms ease; }
.world-scope-view canvas { display: block; width: 100%; height: 100%; }
.world-scope-stars { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.world-scope-stars li { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 30%; display: grid; gap: 2px; justify-items: center; text-align: center; transform: translate(-50%, calc(-100% - 14px)); font: 500 12px/1.5 var(--font-body); }
.world-scope-stars li:nth-child(2) { transform: translate(-50%, 14px); }
.world-scope-stars b { color: #9bc8ed; font: 500 10px/1.4 var(--font-latin); }
.world-scope-caption { position: absolute; left: 50%; bottom: 11%; width: 56%; margin: 0; transform: translateX(-50%); text-align: center; }
.world-scope-caption span { display: block; color: #91b4b3; font: 500 10px/1.5 var(--font-latin); }
.world-scope-caption strong { display: block; margin-top: 4px; font: 700 15px/1.6 var(--font-display); }
.world-scope-close { position: absolute; top: 100px; right: 36px; background: transparent; border-color: #dbf2e229; color: #eff8f1; }
.world-scope-close:hover { background: #dbf2e21f; }
.world-scope-leave { display: none; position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); margin: 0; color: #afc6ba; font: 500 11px/1.5 var(--font-body); }
.world-scope-leave b { margin-right: 7px; padding: 1px 6px; border: 1px solid #dbf2e229; border-radius: 3px; color: #eff8f1; font: 500 10px/1.5 var(--font-latin); }
.world-experience.is-walking .world-scope-close { display: none; }
.world-experience.is-walking .world-scope-leave { display: block; }
.world-experience.is-walking:not(.is-touch-walk) .world-scope { padding-bottom: 72px; }
.world-experience.is-walking:not(.is-touch-walk) .world-scope-view { width: min(100%, 100svh - 196px, 760px); }
.world-picture { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "prev image next" ". count ." ". swipe ." ". title ." ". text ."; align-content: center; justify-items: center; column-gap: 24px; padding: 96px 24px 28px; background: color-mix(in srgb, var(--world-paper) 95%, transparent); color: var(--world-ink); animation: world-scope-in 250ms ease; }
.world-picture[hidden] { display: none; }
.world-picture-figure, .world-picture figcaption { display: contents; }
.world-picture img { grid-area: image; display: block; max-width: 100%; border: 1px solid var(--world-line); box-shadow: 0 18px 48px rgba(32, 45, 42, .18); background: color-mix(in srgb, var(--world-ink) 7%, transparent); object-fit: cover; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; touch-action: pan-y; }
[data-theme="dark"] .world-picture img { box-shadow: 0 18px 48px rgba(0, 0, 0, .5); }
#worldPictureCount { grid-area: count; margin-top: 16px; color: var(--world-accent); font: 500 11px/1.4 var(--font-latin); letter-spacing: .14em; }
.world-picture h2 { grid-area: title; max-width: 56ch; margin: 6px 0 4px; text-align: center; font: 600 20px/1.45 var(--font-body); outline: none; }
.world-picture p { grid-area: text; max-width: 56ch; margin: 0; text-align: center; color: var(--world-muted); font: 400 14px/1.6 var(--font-body); }
.world-picture-swipe { grid-area: swipe; display: none; margin-top: 6px; color: var(--world-muted); font: 500 11px/1.6 var(--font-body); pointer-events: none; }
.world-experience.shows-picture-swipe .world-picture-swipe { display: block; animation: world-swipe-hint 3s ease forwards; }
@keyframes world-swipe-hint { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.world-picture-prev { grid-area: prev; align-self: center; } .world-picture-next { grid-area: next; align-self: center; }
.world-picture .world-picture-prev, .world-picture .world-picture-next { width: 44px; height: 44px; }
.world-picture-close { position: absolute; top: 100px; right: 36px; }
@keyframes world-cue { from { color: var(--world-accent); } }
@keyframes world-scope-in { from { opacity: 0; } }
@keyframes world-scope-focus { from { transform: scale(1.05); filter: blur(7px); } }
.world-signature { position: absolute; bottom: 42px; left: 36px; right: 36px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font: 500 10px/1 var(--font-latin); color: var(--world-muted); }
.world-signature a { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; pointer-events: auto; color: var(--world-ink); font: 500 11px/1 var(--font-body); }
.world-signature svg { width: 14px; height: 14px; }
.world-panel { position: absolute; top: 92px; bottom: 24px; right: 24px; width: 405px; max-width: 40%; display: flex; flex-direction: column; background: color-mix(in srgb, var(--world-paper) 97%, transparent); border: 1px solid var(--world-line); border-radius: 6px; box-shadow: 0 14px 60px #162d2310; animation: world-panel-enter 450ms ease backwards; }
.world-panel[hidden] { display: none; }
.world-panel-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 14px 28px; border-bottom: 1px solid var(--world-line); }
.world-panel-bar > span { color: var(--world-muted); font: 500 10px/1.5 var(--font-latin); text-transform: uppercase; }
.world-panel-bar .world-tool { border: 0; background: transparent; }
.world-panel-scroll { flex: 1; min-height: 0; overflow: auto; padding: 27px 28px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--world-line) transparent; }
#worldPanelTitle, #worldNotesTitle { font: 700 25px/1.45 var(--font-display); margin: 0 0 22px; letter-spacing: 0; overflow-wrap: anywhere; outline: none; }
.world-panel p { font-size: 14px; line-height: 1.85; color: var(--world-muted); }
.world-panel-footer { padding: 6px 28px; border-top: 1px solid var(--world-line); display: flex; align-items: center; justify-content: space-between; }
.world-panel-footer > span { font: 500 10px/1 var(--font-latin); color: var(--world-muted); }
.world-panel-footer button { background: transparent; border: 0; padding: 14px 0; display: flex; align-items: center; gap: 16px; color: var(--world-ink); font: 500 11px var(--font-body); cursor: pointer; }
.world-panel-footer svg { width: 15px; height: 15px; }
.world-portrait { float: left; width: 90px; height: 112px; object-fit: cover; object-position: 50% 24%; border-radius: 3px; margin: 0 17px 10px 0; }
.world-person { min-height: 120px; padding-bottom: 16px; }
.world-person h3 { margin: 8px 0 4px; font: 700 17px/1.4 var(--font-latin); }
.world-person p { font: 500 11px/1.6 var(--font-latin); margin: 0 0 12px; }
.world-person small { font: 500 10px/1.5 var(--font-latin); color: var(--world-accent); }
.world-quote { margin: 24px 0 0; padding: 15px 0 15px 18px; border-left: 2px solid #db775d; color: var(--world-ink); font: 700 16px/1.8 var(--font-display); }
.world-section-label { margin: 27px 0 12px; color: var(--world-muted); font: 500 10px/1.4 var(--font-latin); }
.world-facts { display: flex; gap: 0; margin: 0 0 23px; border-block: 1px solid var(--world-line); }
.world-facts > div { flex: 1; padding: 16px 0; }
.world-facts strong { display: block; font: 700 22px/1.3 var(--font-latin); color: var(--world-accent); }
.world-facts span { font: 500 10px/1.5 var(--font-latin); color: var(--world-muted); }
.world-entry { padding: 16px 0; border-bottom: 1px solid var(--world-line); }
.world-entry:first-child { padding-top: 0; }
.world-entry:last-child { border: 0; }
.world-entry h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.55; font-weight: 700; }
.world-entry p { margin: 0; font-size: 13px; }
.world-entry-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 7px; }
.world-entry-heading > svg { width: 18px; height: 18px; color: var(--world-accent); flex-shrink: 0; }
.world-entry-heading h3 { margin: 0; }
.world-timeline { margin-top: 20px; }
.world-timeline > div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--world-line); }
.world-timeline span { font: 500 10px/1.7 var(--font-latin); color: var(--world-accent); }
.world-timeline strong { font: 500 12px/1.7 var(--font-latin); }
.world-tags { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 16px; color: var(--world-muted); font: 500 10px/1.6 var(--font-latin); }
.world-project { border-bottom: 1px solid var(--world-line); padding: 17px 0; }
.world-project summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.world-project summary::-webkit-details-marker { display: none; }
.world-project summary::after { content: "+"; font: 500 16px var(--font-latin); margin-left: auto; color: var(--world-muted); }
.world-project[open] summary::after { content: "−"; }
.world-project summary strong { font: 700 13px/1.6 var(--font-latin); }
.world-project-index { font: 500 10px var(--font-latin); color: var(--world-muted); }
.world-project-status { display: inline-flex; align-items: center; gap: 5px; color: var(--world-muted); font-size: 11px; margin-top: 12px; }
.world-project-status::before { content: ""; width: 4px; height: 4px; background: #db775d; border-radius: 50%; }
.world-project-status.is-live::before { background: var(--world-accent); }
.world-case dl { margin: 14px 0 0; }
.world-case dl > div { margin-bottom: 10px; }
.world-case dt { font: 500 10px/1.5 var(--font-latin); color: var(--world-accent); }
.world-case dd { margin: 3px 0 0; font-size: 13px; line-height: 1.8; color: var(--world-muted); }
.world-experience.has-selection .world-dock { left: calc((100% - 430px) / 2); }
.world-experience.has-selection .world-signature a { visibility: hidden; pointer-events: none; }
.world-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: var(--world-paper); transition: opacity 450ms ease, display 450ms allow-discrete; }
.world-loading[hidden] { display: none; opacity: 0; pointer-events: none; }
.world-loading img { border-radius: 6px; }
.world-loading p { margin: 0; font-size: 12px; color: var(--world-muted); }
.world-loading a { font-size: 11px; color: var(--world-muted); border-bottom: 1px solid var(--world-line); margin-top: 12px; }
.world-loading-line { width: 92px; height: 2px; background: var(--world-line); position: relative; overflow: hidden; }
.world-loading-line::after { position: absolute; content: ""; width: 35%; height: 100%; background: var(--world-accent); animation: world-loading 1.3s ease-in-out infinite; }
.world-error { position: absolute; top: 94px; left: 50%; transform: translateX(-50%); font-size: 12px; padding: 10px 18px; color: var(--world-ink); background: var(--world-paper); border: 1px solid var(--world-line); border-radius: 4px; z-index: 8; }
.world-error[hidden] { display: none; }
.world-error a { text-decoration: underline; margin-left: 8px; }
.world-toast { position: absolute; top: 96px; left: 50%; z-index: 8; display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(440px, calc(100% - 28px)); margin: 0; padding: 7px 13px 7px 11px; border: 1px solid var(--world-line); border-radius: 5px; background: color-mix(in srgb, var(--world-paper) 92%, transparent); color: var(--world-ink); font: 500 12px/1.5 var(--font-body); pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity 240ms, transform 240ms; }
.world-toast::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--world-accent); }
.world-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.world-error:not([hidden]) ~ .world-toast { top: 142px; }
.world-experience.has-selection .world-toast { left: calc((100% - 430px) / 2); }
.world-experience.has-selection.is-photo .world-toast { left: 50%; }
.world-experience.is-photo .world-toast, .world-experience.is-photo .world-error:not([hidden]) ~ .world-toast, .world-experience.is-touch-walk.shows-walk-hint.is-photo .world-toast { top: auto; bottom: 98px; }
.world-experience.is-photo:has(.world-toast.is-visible) .world-photo-hint { opacity: 0; visibility: hidden; transition: none; }
.guestbook { --note-ink: var(--text); --note-muted: var(--muted); --note-line: var(--line); --note-accent: var(--teal); --note-paper: var(--bg); }
.guestbook > * { max-width: 620px; }
.world-pin b svg { opacity: 1; }
.guestbook-section { background: var(--bg); }
.guestbook-section[hidden] { display: none; }
.world-panel .guestbook { --note-ink: var(--world-ink); --note-muted: var(--world-muted); --note-line: var(--world-line); --note-accent: var(--world-accent); --note-paper: var(--world-paper); }
.guestbook .guestbook-lead { margin: 0 0 20px; color: var(--note-muted); }
.guestbook-form { position: relative; display: grid; gap: 14px; }
.guestbook-form[hidden] { display: none; }
.guestbook-field { display: grid; gap: 6px; color: var(--note-muted); font: 500 11px/1.5 var(--font-body); }
.guestbook-field :is(textarea, input) { width: 100%; padding: 10px 12px; border: 1px solid var(--note-line); border-radius: 4px; background: transparent; color: var(--note-ink); font: 500 14px/1.7 var(--font-body); resize: none; }
.guestbook-field :is(textarea, input):focus-visible { outline: 2px solid var(--note-accent); outline-offset: 2px; }
.guestbook-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guestbook-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guestbook-count { color: var(--note-muted); font: 500 10px/1 var(--font-latin); }
.guestbook-count.is-over { color: var(--note-accent); }
.guestbook-send { padding: 9px 24px; border: 1px solid var(--note-ink); border-radius: 4px; background: var(--note-ink); color: var(--note-paper); font: 500 12px/1.5 var(--font-body); cursor: pointer; }
.guestbook-send:disabled { opacity: .45; cursor: default; }
.guestbook-send:focus-visible { outline: 2px solid var(--note-accent); outline-offset: 3px; }
.guestbook .guestbook-status { margin: 14px 0 0; color: color-mix(in srgb, var(--note-accent) 80%, var(--note-ink)); font-size: 13px; line-height: 1.7; outline: 0; }
.guestbook .guestbook-status.is-refused { color: color-mix(in srgb, #db775d 64%, var(--note-ink)); }
.guestbook .guestbook-status:empty { margin: 0; }
.guestbook-heading { margin: 27px 0 12px; color: var(--note-muted); font: 500 10px/1.4 var(--font-latin); }
.guestbook .guestbook-empty { margin: 0; color: var(--note-muted); font-size: 13px; }
.guestbook-list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
  [data-experience="classic"] .guestbook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  [data-experience="classic"] .guestbook > :not(.guestbook-wall) { grid-column: 1; }
  [data-experience="classic"] .guestbook-wall { grid-column: 2; grid-row: 1 / -1; }
  [data-experience="classic"] .guestbook-wall .guestbook-heading { margin-top: 0; }
}
.guestbook-list li { padding: 13px 0; border-bottom: 1px solid var(--note-line); }
.guestbook-list li:last-child { border: 0; }
.guestbook .guestbook-list p { margin: 0; color: var(--note-ink); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.guestbook-list small { display: block; margin-top: 4px; color: var(--note-muted); font: 500 11px/1.5 var(--font-body); }
.world-tool:focus-visible, .world-pin:focus-visible, .world-enter:focus-visible, .world-dock button:focus-visible, .world-panel button:focus-visible, .world-photo-shutter:focus-visible, .world-photo-actions button:focus-visible { outline: 2px solid var(--world-accent); outline-offset: 3px; }
.world-walk-photo, .world-photo[hidden], .world-photo-result[hidden], .world-photo-actions, .world-photo-actions button[hidden] { display: none; }
.world-experience.is-walking .world-walk-photo { display: grid; position: absolute; right: 78px; bottom: 32px; }
[data-experience="world"]:has(.world-experience.is-photo) .site-header { visibility: hidden; }
.world-experience.is-photo > :not(.world-stage, .world-photo, .world-error, [data-photo-keep]), .world-experience.is-photo .world-pins { visibility: hidden; pointer-events: none; }
.world-photo { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.world-photo-frame { position: absolute; inset: 22px; --mark: #eaf2ecb8; background: linear-gradient(var(--mark), var(--mark)) 0 0 / 20px 1px, linear-gradient(var(--mark), var(--mark)) 0 0 / 1px 20px, linear-gradient(var(--mark), var(--mark)) 100% 0 / 20px 1px, linear-gradient(var(--mark), var(--mark)) 100% 0 / 1px 20px, linear-gradient(var(--mark), var(--mark)) 0 100% / 20px 1px, linear-gradient(var(--mark), var(--mark)) 0 100% / 1px 20px, linear-gradient(var(--mark), var(--mark)) 100% 100% / 20px 1px, linear-gradient(var(--mark), var(--mark)) 100% 100% / 1px 20px; background-repeat: no-repeat; filter: drop-shadow(0 0 1px #172c2799); }
.world-photo-flash { position: absolute; inset: 0; background: #f8fbf9; opacity: 0; }
.world-photo-flash.is-on { animation: world-photo-flash 280ms ease-out; }
.world-walk-hint { flex-wrap: wrap; justify-content: center; row-gap: 5px; width: max-content; max-width: calc(100% - 250px); }
.world-photo-hint { bottom: 98px; }
.world-experience.shows-photo-hint .world-photo-hint { opacity: 1; visibility: visible; }
.world-experience.is-walking .world-photo-hint-drag, .world-photo.is-sheet .world-photo-hint > :not(.world-photo-hint-drag), .world-experience.is-walking .world-photo.is-sheet .world-photo-hint { display: none; }
.world-photo-bar { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); display: grid; grid-template-columns: 34px 48px 34px; align-items: center; gap: 12px; pointer-events: auto; }
.world-photo-shutter { grid-column: 2; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--world-line); border-radius: 50%; background: color-mix(in srgb, var(--world-paper) 85%, transparent); cursor: pointer; }
.world-photo-shutter::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--world-ink); transition: transform 180ms, background 180ms; }
.world-photo-shutter:hover::before { background: var(--world-accent); }
.world-photo-shutter:active::before { transform: scale(.9); }
.world-photo-result { position: absolute; right: 36px; bottom: 32px; width: 240px; }
.world-photo-result img { display: block; max-width: 100%; max-height: 50vh; margin-left: auto; border: 1px solid var(--world-line); border-radius: 3px; box-shadow: 0 14px 40px #162d2324; animation: world-photo-print 420ms ease both; }
.world-photo.is-sheet .world-photo-result { inset: 0; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 24px 84px; background: color-mix(in srgb, var(--world-paper) 82%, transparent); pointer-events: auto; }
.world-photo.is-sheet .world-photo-result[hidden] { display: none; }
.world-photo.is-sheet .world-photo-result img { max-height: 62%; margin: 0; -webkit-touch-callout: default; }
.world-photo.is-sheet .world-photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.world-photo-actions button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--world-line); border-radius: 4px; background: var(--world-paper); color: var(--world-ink); font: 500 12px/1 var(--font-body); cursor: pointer; }
.world-photo-actions svg { width: 15px; height: 15px; }
.world-photo.is-sheet:has(.world-photo-result:not([hidden])) :is(.world-photo-bar, .world-photo-frame, .world-photo-hint) { visibility: hidden; }
.world-photo.is-sheet:has(.world-photo-result:not([hidden])) ~ .world-toast { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); }
@media (pointer: coarse) { .world-photo-bar { grid-template-columns: 44px 48px 44px; } .world-photo-bar .world-tool { width: 44px; height: 44px; } .world-photo-actions button { height: 44px; } }
:root[data-experience="world"][data-ui-hidden] :is(.site-header, .world-pins, .world-experience > :not(.world-stage, .world-loading, .world-error, .world-stats, .world-saver-hint, .world-saver-mark)) { opacity: 0; pointer-events: none; transition: opacity 1200ms ease; }
:root[data-experience="world"][data-ui-hidden] :is(.site-header, .world-pins, .world-experience > :not(.world-stage, .world-loading, .world-error, .world-stats)) * { pointer-events: none; }
:root[data-experience="world"][data-ui-restoring] :is(.site-header, .world-pins, .world-experience > :not(.world-stage, .world-loading, .world-error, .world-stats, .world-saver-hint, .world-saver-mark)) { transition: opacity 450ms ease; }
:root[data-experience="world"][data-ui-hidden="saver"] .world-experience:not(.shows-saver-hint) { cursor: none; }
.world-saver-hint { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border: 1px solid var(--world-line); border-radius: 8px; background: color-mix(in srgb, var(--world-paper) 85%, transparent); color: var(--world-muted); font: 500 11px/1.5 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
.world-experience.shows-saver-hint .world-saver-hint { opacity: 1; visibility: visible; }
.world-saver-mark { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 6px 12px; border: 1px solid var(--world-line); border-radius: 5px; background: color-mix(in srgb, var(--world-paper) 72%, transparent); color: var(--world-ink); font: 500 15px/1.4 var(--font-latin); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.world-saver-mark[hidden] { display: none; }
:root[data-ui-hidden] .world-saver-mark { transition-duration: 1500ms; }
.world-saver-mark.is-shown { opacity: .8; }
.world-saver-mark span { color: var(--world-muted); font-size: 10px; }
@keyframes world-photo-flash { from { opacity: .3; } to { opacity: 0; } }
@keyframes world-photo-print { from { opacity: 0; transform: translateY(10px); } }
@keyframes world-panel-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes world-loading { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
@media (min-width: 1800px) {
  .world-intro { left: max(36px, calc((100% - 1800px) / 2)); top: calc(23% - 27px); }
  [data-experience="world"] .site-header { padding-inline: max(36px, calc((100% - 1800px) / 2)); }
  .world-tools { left: max(36px, calc((100% - 1800px) / 2)); }
  .world-signature { left: max(36px, calc((100% - 1800px) / 2)); right: max(36px, calc((100% - 1800px) / 2)); }
  .world-location { right: max(36px, calc((100% - 1800px) / 2)); }
}
@media (max-width: 1100px) {
  .world-intro { width: 296px; padding: 20px 22px 18px; top: max(100px, calc(17% - 21px)); }
  .world-intro h1 { font-size: 55px; }
  .world-intro-role { font-size: 10px; }
  .world-intro-copy { font-size: 13px; }
  .world-panel { width: 355px; max-width: 43%; right: 15px; }
  .world-panel-scroll { padding: 23px; }
  .world-experience.has-selection .world-dock { left: calc((100% - 365px) / 2); }
  .world-experience.has-selection .world-toast { left: calc((100% - 365px) / 2); }
  .world-dock button { min-width: 60px; padding: 0 10px; gap: 5px; }
  .world-signature > span { display: none; }
}
@media (max-width: 760px) {
  [data-experience="world"] .site-header { height: 68px; padding: 0 18px; }
  [data-experience="world"] .site-nav { display: none; }
  [data-experience="world"] .brand-mark { width: 30px; height: 30px; }
  [data-experience="world"] .brand-name { font-size: 15px; }
  [data-experience="world"] .brand { gap: 8px; }
  [data-experience="world"] .brand::after { left: 38px; }
  [data-experience="world"] .header-actions { gap: 1px; }
  [data-experience="world"] .header-actions .icon-button { width: 32px; height: 34px; }
  [data-experience="world"] .header-actions .language-toggle { width: 51px; font-size: 10px; }
  .world-intro { top: 78px; left: 14px; width: fit-content; max-width: calc(100% - 28px); padding: 14px 18px 10px; background: color-mix(in srgb, var(--world-paper) 82%, transparent); backdrop-filter: none; }
  .world-eyebrow { margin-bottom: 12px; }
  .world-intro h1 { font-size: 43px; }
  .world-intro-role { margin-top: 7px; font-size: 10px; }
  .world-intro-copy { font-size: 12px; line-height: 1.7; margin: 12px 0; max-width: 235px; }
  .world-enter { font-size: 11px; padding: 6px 0; gap: 21px; }
  .world-location { top: auto; bottom: 108px; left: 14px; right: auto; padding: 5px 9px; font-size: 10px; gap: 8px; }
  .world-dock { bottom: max(19px, env(safe-area-inset-bottom)); width: calc(100% - 28px); max-width: 470px; padding: 5px; gap: 0; }
  .world-dock button { flex: 1; flex-direction: column; gap: 6px; min-width: 0; height: 50px; padding: 5px 2px; font-size: 10px; }
  .world-dock button svg { width: 16px; height: 16px; }
  .world-dock-divider { margin: 0 3px; }
  .world-tools { left: auto; right: 14px; bottom: 108px; gap: 6px; }
  .world-tools .world-tool { width: 36px; height: 36px; }
  .world-signature { display: none; }
  .world-pin { padding: 5px 7px 5px 5px; gap: 5px; font-size: 10px; }
  .world-pin b { width: 17px; height: 17px; font-size: 9px; }
  .world-pin > svg { display: none; }
  .world-pin::after { height: 11px; }
  .world-panel { width: auto; max-width: none; top: 44%; bottom: 91px; left: 14px; right: 14px; border-radius: 6px; }
  .world-panel-bar { padding: 5px 12px 5px 19px; }
  .world-panel-scroll { padding: 18px 20px; }
  #worldPanelTitle, #worldNotesTitle { font-size: 21px; margin-bottom: 16px; }
  .guestbook .guestbook-field :is(textarea, input) { font-size: 16px; }
  .world-panel-footer { padding: 0 20px; }
  .world-experience.has-selection .world-dock { left: 50%; }
  .world-experience.has-selection .world-tools { top: 80px; bottom: auto; }
  .world-experience.has-selection :is(#worldTour, #worldGuestbook, #worldReset) { display: none; }
  .world-experience.has-note .world-tools { top: auto; bottom: calc(56% + 8px); flex-direction: row; }
  .world-experience.has-note .world-more { order: -1; }
  .world-experience.has-selection .world-pin:not(.is-active) { opacity: 0; pointer-events: none; }
  .world-experience.has-selection .world-pin.is-active { opacity: 0; pointer-events: none; }
  .world-error { width: calc(100% - 30px); top: 76px; }
  .world-experience.is-touch-walk { --walk-top: 80px; --walk-side: 14px; }
  .world-photo-frame { inset: 14px; }
  .world-photo-bar { bottom: max(24px, env(safe-area-inset-bottom)); }
  .world-photo-hint { bottom: 92px; }
  .world-photo-result { right: 14px; bottom: 140px; }
  .world-scope { padding: 78px 14px 24px; }
  .world-scope-close { top: 80px; right: 14px; }
  .world-scope-stars li { width: 32%; font-size: 11px; }
  .world-scope-caption strong { font-size: 13px; }
  .world-more-menu { left: auto; right: calc(100% + 6px); gap: 6px; }
  .world-experience.shows-more .world-location { opacity: 0; }
  .world-toast { top: 76px; }
  .world-error:not([hidden]) ~ .world-toast { top: 124px; }
  .world-experience.has-selection .world-toast { left: 50%; }
}
@media (max-height: 980px) and (min-width: 761px) {
  .world-tools { flex-direction: row; bottom: 100px; }
}
@media (max-height: 620px) and (min-width: 761px) {
  .world-intro { top: 100px; }
  .world-eyebrow { margin-bottom: 16px; }
  .world-intro h1 { font-size: 48px; }
  .world-intro-copy { margin: 12px 0; }
}
@media (max-height: 480px) and (min-width: 761px) {
  .world-intro { top: 96px; }
  .world-eyebrow, .world-overline, .world-intro-role, .world-intro-copy { display: none; }
  .world-intro h1 { font-size: 36px; }
  .world-enter { margin-top: 12px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .world-eyebrow, .world-intro-copy { display: none; }
  .world-intro h1 { font-size: 36px; }
  .world-enter { margin-top: 12px; }
}
@media (max-width: 760px) and (max-height: 480px) {
  .world-tools { flex-direction: row; }
  .world-more-menu { right: 0; top: auto; bottom: calc(100% + 6px); }
  .world-notes { top: 124px; }
  .world-experience.has-selection .world-more { order: -1; }
  .world-experience.has-selection .world-more-menu { right: calc(100% + 6px); top: 0; bottom: auto; }
}
/* Seven dock buttons once a place is found: on the narrowest phones the dividers lose their margins and the labels a pixel. */
@media (max-width: 380px) { .world-dock-divider { margin: 0; } .world-dock button { padding: 5px 1px; font-size: 9px; letter-spacing: -.01em; } }
@media (max-width: 640px) {
  [data-experience="classic"] .brand { gap: 8px; font-size: 14px; }
  [data-experience="classic"] .brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
  [data-experience="classic"] .header-actions .icon-button { width: 34px; height: 34px; }
  [data-experience="classic"] .header-actions .language-toggle { width: 54px; }
}
@media (max-height: 520px) {
  .world-experience.is-touch-walk { --walk-top: max(12px, env(safe-area-inset-top)); }
  .world-scope-stars li { width: 34%; font-size: 10px; line-height: 1.35; }
  .world-scope-caption { bottom: 7%; }
  .world-scope-caption strong { font-size: 12px; }
  .world-experience.is-touch-walk .world-scope { padding: 14px; }
  .world-experience.is-touch-walk .world-scope-view { width: min(100%, 100svh - 28px); }
  .world-experience.is-touch-walk .world-scope-close { top: var(--walk-top); right: max(var(--walk-side), env(safe-area-inset-right)); }
}
@media (pointer: coarse) {
  .world-tools .world-tool, .world-panel-bar .world-tool, .world-scope-close { width: 44px; height: 44px; }
  .world-tools .world-tool svg { width: 17px; height: 17px; }
}
@media (orientation: landscape) {
  .world-experience.is-walking.is-touch-walk .world-act { left: auto; top: auto; right: max(22px, calc(env(safe-area-inset-right) + 12px)); bottom: calc(max(40px, calc(env(safe-area-inset-bottom) + 24px)) + 78px); transform: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .world-photo.is-sheet .world-photo-result { flex-direction: row; gap: 20px; padding: 16px max(24px, env(safe-area-inset-right)) 60px max(24px, env(safe-area-inset-left)); }
  .world-photo.is-sheet .world-photo-result img { max-width: calc(100% - 176px); max-height: 100%; }
  .world-photo.is-sheet .world-photo-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 156px; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .world-experience.has-note .world-tools { display: none; }
  .world-notes .world-panel-scroll { padding: 16px 22px; }
  .world-notes #worldNotesTitle { font-size: 19px; margin-bottom: 10px; }
  .world-notes .guestbook .guestbook-lead { margin-bottom: 12px; font-size: 12px; line-height: 1.65; }
}
@media (max-width: 760px) {
  .world-picture { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: ". . close" "image image image" "title title title" "text text text" "prev count next" "swipe swipe swipe"; row-gap: 0; padding: 78px 16px 20px; }
  .world-picture-close { position: static; grid-area: close; margin-bottom: 10px; width: 44px; height: 44px; }
  .world-picture h2 { margin-top: 14px; font-size: 17px; }
  .world-picture p { font-size: 13px; }
  .world-picture .world-picture-prev, .world-picture .world-picture-next { margin-top: 14px; }
  #worldPictureCount { margin-top: 14px; align-self: center; }
  .world-picture-swipe { margin-top: 8px; }
}
@media (pointer: coarse) and (max-height: 500px) {
  [data-experience="world"]:has(.world-experience.has-picture) .site-header { visibility: hidden; }
  .world-picture { grid-template-columns: minmax(0, 1fr) 44px 132px 44px; grid-template-rows: auto auto auto auto auto; grid-template-areas: "image . . close" "image title title title" "image text text text" "image prev count next" "image swipe swipe swipe"; align-content: center; column-gap: 12px; row-gap: 0; padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .world-picture img { align-self: center; }
  .world-picture-close { position: static; grid-area: close; width: 44px; height: 44px; }
  .world-picture h2, .world-picture p { justify-self: stretch; text-align: left; }
  .world-picture h2 { margin-top: 10px; font-size: 17px; }
  .world-picture p { font-size: 13px; }
  #worldPictureCount, .world-picture .world-picture-prev, .world-picture .world-picture-next { margin-top: 12px; }
  #worldPictureCount { align-self: center; }
  .world-picture-swipe { justify-self: start; }
}
/* The world map: a dialog over the hall, a bottom sheet on phones. The plan is SVG in world metres with an HTML label layer on top; every colour is a world token, so it follows the theme by itself. */
.world-map { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 96px 36px 24px; background: color-mix(in srgb, var(--world-paper) 42%, transparent); animation: world-scope-in 200ms ease; }
.world-map[hidden] { display: none; }
.world-experience.has-map :is(.world-intro, .world-pins, .world-dock, .world-tools, .world-signature) { opacity: 0; visibility: hidden; }
.world-map-panel { width: fit-content; min-width: min(420px, 100%); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; padding: 14px 16px 12px 22px; border: 1px solid var(--world-line); border-radius: 8px; background: color-mix(in srgb, var(--world-paper) 94%, transparent); box-shadow: 0 18px 60px #162d2318; backdrop-filter: blur(12px); color: var(--world-ink); }
.world-map-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.world-map-bar h2 { margin: 0; font: 700 18px/1.4 var(--font-display); letter-spacing: 0; outline: none; }
#worldMapWhere { margin: 1px 0 0; color: var(--world-muted); font: 500 12px/1.5 var(--font-body); }
.world-map-bar .world-tool { flex: none; border: 0; background: transparent; }
.world-map-plan { position: relative; flex: none; aspect-ratio: var(--map-aspect, 1); width: min(878px, calc(100vw - 112px), calc((100svh - 290px) * var(--map-aspect, 1))); margin: 8px auto 6px; contain: layout; }
.world-map-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.world-map-plan svg * { vector-effect: non-scaling-stroke; }
.world-map-labels { position: absolute; inset: 0; container-type: inline-size; }
.map-floor { fill: color-mix(in srgb, var(--world-ink) 4%, transparent); }
.map-wall { fill: none; stroke: var(--world-ink); stroke-width: 2; stroke-linecap: round; opacity: .62; }
.map-ring { fill: none; stroke: var(--world-muted); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.map-booth { fill: color-mix(in srgb, var(--world-ink) 8%, transparent); stroke: var(--world-line); stroke-width: 1; }
.map-back { stroke: var(--world-ink); stroke-width: 2.5; stroke-linecap: round; opacity: .5; }
.map-back.is-thin { stroke-width: 1.5; opacity: .3; }
.map-alcove { fill: color-mix(in srgb, var(--world-ink) 6%, transparent); }
.map-sculpture { fill: color-mix(in srgb, #db775d 28%, transparent); stroke: #db775d; stroke-width: 1; }
.map-board { stroke: var(--world-muted); stroke-width: 3; stroke-linecap: round; opacity: .6; }
.map-board.is-open { stroke: var(--world-ink); stroke-width: 4; opacity: .8; }
.map-hall-floor, .map-corridor { fill: color-mix(in srgb, var(--world-ink) 6%, transparent); }
.map-corridor { stroke: var(--world-line); stroke-width: 1; }
.map-room.is-lit, .map-door { fill: color-mix(in srgb, var(--world-accent) 14%, transparent); }
.map-room-edge { fill: none; stroke: var(--world-accent); stroke-width: 1.5; }
.map-room-edge.is-fog { stroke: var(--world-muted); stroke-dasharray: 3 3; opacity: .7; }
.map-door-tick { stroke: var(--world-muted); stroke-width: 2.5; opacity: .7; }
.map-hatch-ground { fill: color-mix(in srgb, var(--world-ink) 3%, transparent); }
.map-hatch { stroke: var(--world-muted); stroke-width: .75; opacity: .35; }
.map-passage.is-revealing { animation: world-scope-in 600ms ease both; }
.map-focus { fill: color-mix(in srgb, var(--world-accent) 10%, transparent); stroke: var(--world-accent); stroke-width: 2; }
.map-wedge { fill: color-mix(in srgb, var(--world-accent) 20%, transparent); }
.map-chevron { fill: var(--world-accent); stroke: var(--world-paper); stroke-width: 1.5; stroke-linejoin: round; }
.map-animal { stroke-width: 1.5; }
.map-animal.is-cat { fill: #1f2725; stroke: #f6f8f6; }
.map-animal.is-cat2 { fill: #b4bbb9; stroke: #56625f; }
.map-animal.is-dog { fill: #cf8a4c; stroke: #fff6ec; }
.map-animal.is-resting { opacity: .45; }
.world-map-label { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 44px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--world-ink); font: 500 11px/1.3 var(--font-body); text-align: center; white-space: nowrap; text-shadow: 0 0 2px var(--world-paper), 0 0 6px var(--world-paper); }
button.world-map-label { cursor: pointer; transition: background 180ms, color 180ms; }
button.world-map-label:hover { background: color-mix(in srgb, var(--world-paper) 82%, transparent); }
button.world-map-label:focus-visible { outline: 2px solid var(--world-accent); outline-offset: 0; }
.world-map-label b { display: inline-flex; align-items: center; gap: 5px; color: var(--world-accent); font: 600 10px/1.2 var(--font-latin); letter-spacing: .08em; }
.world-map-label.is-here { color: var(--world-accent); }
.world-map-label.is-here span { font-weight: 700; }
.world-map-label.is-centre span, .world-map-label.is-guestbook span { font-size: 10.5px; }
.world-map-label.is-corridor, .world-map-label.is-soon { color: var(--world-muted); pointer-events: none; }
.world-map-label small { font-size: 9.5px; letter-spacing: .02em; }
.world-map-label.is-soon { --sx: -50%; --sy: 3px; transform: translate(var(--sx), var(--sy)); min-width: 0; min-height: 0; gap: 0; padding: 0 2px; line-height: 1.25; }
.world-map-label.is-soon.is-north { --sy: calc(-100% - 3px); }
.world-map-label.is-soon.is-start { --sx: 0%; align-items: flex-start; text-align: left; }
.world-map-label.is-centre { transition: opacity 240ms; }
.world-map-label.is-centre.is-under { opacity: .25; }
.world-map-lamp { width: 8px; height: 8px; border: 2px solid #e3a857; border-radius: 50%; box-sizing: border-box; }
@container (max-width: 340px) { .world-map-label.is-zone span, .world-map-label.is-corridor { display: none; } }
@container (max-width: 480px) { .world-map-label.is-soon { font-size: 10px; } .world-map-label.is-soon small { font-size: 8.5px; } }
.world-map-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 20px; padding-top: 8px; border-top: 1px solid var(--world-line); }
.world-map-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; color: var(--world-muted); font: 500 11px/1.6 var(--font-body); }
.world-map-legend li { display: flex; align-items: center; gap: 7px; }
.world-map-swatch { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.world-map-swatch.is-you { width: 10px; height: 11px; border-radius: 0; background: var(--world-accent); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
.world-map-swatch.is-animals { margin-right: 16px; background: #cf8a4c; box-shadow: 8px 0 0 #b4bbb9, 16px 0 0 #1f2725, 16px 0 0 1.5px #f6f8f6; }
.world-map-swatch.is-roof { width: 9px; height: 9px; border: 2px solid #e3a857; box-sizing: border-box; }
.world-map-swatch.is-soon { width: 12px; height: 9px; border-radius: 2px; border: 1px dashed var(--world-muted); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--world-muted) 35%, transparent) 0 1px, transparent 1px 4px); }
.world-map-key { display: none; margin: 0; color: var(--world-muted); font: 500 11px/1.5 var(--font-body); }
.world-map-key b { margin-right: 7px; padding: 1px 6px; border: 1px solid var(--world-line); border-radius: 3px; color: var(--world-ink); font: 500 10px/1.5 var(--font-latin); }
@media (pointer: fine) { .world-map-key { display: block; } }
@media (max-width: 760px) {
  .world-map { padding: 0; place-items: end stretch; background: color-mix(in srgb, var(--world-paper) 30%, transparent); animation: world-map-sheet 220ms ease; }
  .world-map-panel { width: auto; min-width: 0; max-height: 82svh; padding: 8px 12px max(12px, env(safe-area-inset-bottom)) 18px; border-bottom: 0; border-radius: 10px 10px 0 0; }
  .world-map-bar { align-items: center; }
  .world-map-bar .world-tool { width: 44px; height: 44px; }
  .world-map-plan { width: min(100%, calc((82svh - 150px) * var(--map-aspect, 1))); margin: 4px auto; }
  .world-map-foot { padding-right: 6px; }
}
@keyframes world-map-sheet { from { opacity: 0; transform: translateY(28px); } }
/* The corner map of a walk: bottom-left with a mouse (it lets clicks through; M opens the map), top-right under the exit row in a touch walk, where a tap opens it. No backdrop blur: it sits over the moving hall. */
.world-map-mini { position: absolute; left: 36px; bottom: 32px; z-index: 3; width: 168px; height: 168px; padding: 0; border: 1px solid var(--world-line); border-radius: 8px; background: color-mix(in srgb, var(--world-paper) 40%, transparent); backdrop-filter: blur(2px); color: var(--world-ink); pointer-events: none; contain: layout paint; transition: background 180ms; }
.world-map-mini[hidden] { display: none; }
.world-map-mini svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); filter: drop-shadow(0 0 .6px var(--world-paper)) drop-shadow(0 0 1.4px var(--world-paper)); }
.world-map-mini svg * { vector-effect: non-scaling-stroke; }
.world-map-mini .map-wall { stroke-width: 1.5; }
.world-map-mini .map-back { stroke-width: 1.5; }
.world-map-mini .map-back.is-thin, .world-map-mini .map-ring { display: none; }
.world-map-mini .map-roof { fill: none; stroke: #e3a857; stroke-width: 1.75; }
.world-map-mini svg:not(.is-passage) .map-passage { display: none; }
.world-map-mini svg.is-passage .map-animals, .world-map-mini svg.is-passage .map-numbers { display: none; }
.map-numbers text { fill: var(--world-muted); font: 600 3.2px/1 var(--font-latin); font-size: 3.2px; letter-spacing: .02em; text-anchor: middle; }
.world-map-mini > b { position: absolute; top: 6px; right: 6px; padding: 0 5px; border: 1px solid var(--world-line); border-radius: 3px; background: color-mix(in srgb, var(--world-paper) 88%, transparent); color: var(--world-ink); font: 500 10px/1.5 var(--font-latin); }
.world-experience:has(.world-map-mini:not([hidden])) .world-walk-hint { max-width: calc(100% - 2 * (36px + 168px + 16px)); }
@media (max-height: 620px) { .world-map-mini { width: 136px; height: 136px; } .world-experience:has(.world-map-mini:not([hidden])) .world-walk-hint { max-width: calc(100% - 2 * (36px + 136px + 16px)); } }
.world-experience.is-touch-walk .world-map-mini { top: calc(var(--walk-top) + 52px); right: max(var(--walk-side), env(safe-area-inset-right)); left: auto; bottom: auto; width: 104px; height: 104px; pointer-events: auto; cursor: pointer; touch-action: none; }
.world-experience.is-touch-walk .world-map-mini svg { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.world-experience.is-touch-walk .world-map-mini > b, .world-experience.is-touch-walk .map-numbers { display: none; }
.world-experience.is-touch-walk .world-map-mini:active { background: var(--world-paper); }
.world-experience.is-touch-walk:has(.world-map-mini:not([hidden])) :is(.world-walk-hint, .world-toast) { max-width: calc(100% - 2 * (max(var(--walk-side), env(safe-area-inset-right)) + 104px + 12px)); }
@media (max-height: 360px) { .world-experience.is-touch-walk .world-map-mini { width: 80px; height: 80px; } .world-experience.is-touch-walk:has(.world-map-mini:not([hidden])) :is(.world-walk-hint, .world-toast) { max-width: calc(100% - 2 * (max(var(--walk-side), env(safe-area-inset-right)) + 80px + 12px)); } }
/* Beside the corner map the hint and the toast share one slot (the hint steps aside while a toast speaks), so a two-line toast never reaches the crosshair on a short landscape phone. */
.world-experience.is-touch-walk:has(.world-map-mini:not([hidden])) .world-toast { top: calc(var(--walk-top) + 58px); }
.world-experience.is-touch-walk:has(.world-map-mini:not([hidden])):has(.world-toast.is-visible) .world-walk-hint { opacity: 0; visibility: hidden; transition: none; }
/* A phone held upright: the centred hint and toast would run under the corner map, so their slot moves below it. */
@media (max-width: 760px) and (min-height: 521px) {
  .world-experience.is-touch-walk:has(.world-map-mini:not([hidden])) :is(.world-walk-hint, .world-toast) { top: calc(var(--walk-top) + 168px); max-width: calc(100% - 28px); }
}
@media (pointer: coarse) and (max-height: 500px) {
  [data-experience="world"]:has(.world-experience.has-map) .site-header { visibility: hidden; }
  .world-map { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); place-items: center; animation: world-scope-in 200ms ease; }
  .world-map-panel { display: grid; grid-template-columns: auto minmax(150px, 190px); grid-template-rows: auto 1fr; grid-template-areas: "plan bar" "plan foot"; column-gap: 16px; width: fit-content; max-height: 100%; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--world-line); border-radius: 8px; }
  .world-map-bar { grid-area: bar; }
  .world-map-bar .world-tool { width: 44px; height: 44px; }
  .world-map-plan { grid-area: plan; width: min(calc(100vw - 280px), calc((100svh - 42px) * var(--map-aspect, 1))); margin: 0; }
  .world-map-foot { grid-area: foot; flex-direction: column; align-items: flex-start; align-self: end; border-top: 0; }
  .world-map-legend { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .world-experience *, .world-experience *::after { animation: none !important; transition: none !important; }
}