:root {
  color-scheme: dark;
  --ink: #f7f0e5;
  --muted: rgba(247,240,229,.64);
  --glass: rgba(25,22,18,.88);
  --line: rgba(255,255,255,.16);
  --aqua: #e3c493;
  --gold: #eeb65e;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.marker.visible { pointer-events: auto; cursor: pointer; }
.marker:focus-visible { outline: 2px solid #fff; }
#compass { display:block; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(24,22,19,.88); width:44px;height:44px; cursor:pointer; transform-origin:center; }
#compass i {left:17px;top:16px;} #compass span {position:absolute;top:3px;left:17px;}
@media(max-width:780px){#compass{display:block;right:16px;bottom:82px;}}
@media(max-width:780px){.detail-panel { bottom:84px!important; }.marker-label{display:none!important}.credits{display:none}}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #1b1916; }
body { color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
#experience { position: relative; width: 100%; height: 100%; min-height: 560px; overflow: hidden; isolation: isolate; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; background:linear-gradient(180deg,#727272 0%,#8a8a8a 100%); }
.atmosphere { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 72% 19%, rgba(255,198,110,.13), transparent 29%), linear-gradient(180deg, rgba(1,9,10,.22), transparent 30%, transparent 73%, rgba(3,12,12,.46)); mix-blend-mode: screen; }
.topbar { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 34px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(24,22,19,.94), rgba(24,22,19,.80)); backdrop-filter: blur(12px); }
.brand { justify-self: start; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.07em; font-size: 24px; }
.brand-mark { letter-spacing: -.085em; }
.brand-dot { color: var(--aqua); padding: 0 1px; }
.title-block { text-align: center; }
.title-block p, .eyebrow { margin: 0 0 5px; color: var(--aqua); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .2em; }
.title-block h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.top-actions { justify-self: end; display: flex; gap: 8px; }
.icon-button, .close-button, .play-button { display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); background: rgba(28,25,21,.82); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; }
.icon-button:hover, .close-button:hover, .play-button:hover { background: rgba(227,196,147,.14); border-color: rgba(227,196,147,.55); }
.icon-button.is-active { color:#fff; border-color:#ff5960; background:rgba(184,20,29,.72); box-shadow:0 0 0 3px rgba(255,52,60,.14); }
.icon-button.is-locating { animation:location-pulse 1s ease-in-out infinite; }
.icon-button:active, .play-button:active { transform: scale(.95); }
.icon-button svg, .play-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.places { position: absolute; z-index: 8; left: 34px; top: 132px; width: 255px; max-height:calc(100vh - 210px); padding: 18px 0; overflow-y:auto; scrollbar-width:thin; }
.place-list { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.place-button { position: relative; border: 0; padding: 9px 16px 9px 20px; color: rgba(255,255,255,.67); background: transparent; text-align: left; font-size: 14px; cursor: pointer; transition: color .2s, transform .2s; }
.place-button::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; transition: width .2s, background .2s; }
.place-button:hover, .place-button.active { color: #fff; transform: translateX(4px); }
.place-button.active::before { width: 13px; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
.detail-panel { position: absolute; z-index: 12; right: 34px; top: 130px; width: min(340px, calc(100vw - 48px)); padding: 27px 30px 28px; border: 1px solid var(--line); background: var(--glass); box-shadow: 0 24px 70px rgba(0,0,0,.28); backdrop-filter: blur(20px) saturate(130%); transform: translateX(calc(100% + 60px)); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.detail-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.detail-panel::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 2px; background: var(--aqua); }
.detail-panel h2 { margin: 9px 0 13px; font: 500 28px/1.04 Georgia, serif; letter-spacing: -.03em; }
.detail-panel p:not(.eyebrow) { margin: 0 0 21px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.58; }
.detail-panel a { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.detail-panel a span { color: var(--aqua); margin-left: 8px; transition: margin .2s; }
.detail-panel a:hover span { margin-left: 13px; }
.close-button { position: absolute; right: 13px; top: 13px; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; }
.time-control { position: absolute; z-index: 9; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; width: min(560px, calc(100vw - 48px)); padding: 14px 20px; border: 1px solid var(--line); background: rgba(8,21,21,.72); backdrop-filter: blur(18px); box-shadow: 0 18px 55px rgba(0,0,0,.26); }
.play-button { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: var(--aqua); }
.play-icon { display: none; }
.play-button:not(.is-playing) .pause-icon { display: none; }
.play-button:not(.is-playing) .play-icon { display: block; }
.time-main { min-width: 0; flex: 1; }
.time-labels { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.time-labels span { color: rgba(255,255,255,.65); font-size: 13px; }
.time-labels strong { font: 500 19px/1 Georgia, serif; }
#timeSlider { width: 100%; height: 3px; margin: 0; appearance: none; border: 0; border-radius: 5px; background: linear-gradient(90deg, #243f58, #f0a55a 25%, #fff1c7 50%, #e6895c 75%, #24304b); outline: none; cursor: pointer; }
#timeSlider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(238,182,94,.22); }
#timeSlider::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(238,182,94,.22); }
.time-scale { display: flex; justify-content: space-between; padding-top: 6px; color: rgba(255,255,255,.35); font-size: 10px; }
.hints { position: absolute; z-index: 6; left: 34px; bottom: 40px; display: flex; gap: 20px; color: rgba(255,255,255,.5); font-size: 11px; }
.hints span { display: flex; align-items: center; gap: 7px; }
.mouse, .scroll { width: 14px; height: 19px; border: 1px solid currentColor; border-radius: 8px; display: inline-block; position: relative; }
.mouse::after { content: ""; position: absolute; width: 2px; height: 4px; top: 3px; left: 5px; border-radius: 2px; background: currentColor; }
.scroll::after { content: "↕"; position: absolute; left: 16px; top: 0; }
.compass { position: absolute; z-index: 6; right: 38px; bottom: 42px; width: 35px; height: 35px; color: rgba(255,255,255,.58); font-size: 9px; text-align: center; }
.compass span { position: relative; z-index: 1; }
.compass i { position: absolute; left: 13px; top: 9px; width: 9px; height: 20px; background: linear-gradient(180deg, var(--aqua) 0 50%, rgba(255,255,255,.25) 50%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.credits { position: absolute; z-index: 6; right: 32px; bottom: 15px; margin: 0; color: rgba(255,255,255,.33); font-size: 9px; }
.markers { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.marker { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .25s; }
.marker.visible { opacity: 1; }
.marker-label { padding: 6px 9px; color: #fff; background: rgba(25,22,18,.9); border: 1px solid rgba(255,255,255,.18); border-radius: 2px; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(8px); opacity:0; transform:translateY(4px); transition:opacity .18s,transform .18s; }
.marker:hover .marker-label,.marker:focus-visible .marker-label,.marker.active .marker-label { opacity:1; transform:none; }
.marker-line { width: 1px; height: 18px; background: linear-gradient(var(--aqua), transparent); }
.marker-dot { width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 14px var(--aqua); }
.loading { position: absolute; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; background: #1b1916; transition: opacity .7s, visibility .7s; }
.loading.done { opacity: 0; visibility: hidden; }
.loading-mark { color: #fff; font-size: 31px; font-weight: 800; letter-spacing: -.08em; }
.loading-mark b { color: var(--aqua); }
.loading-line { width: 180px; height: 1px; margin-top: 24px; overflow: hidden; background: rgba(255,255,255,.15); }
.loading-line i { display: block; width: 12%; height: 100%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); transition: width .3s; }
.loading p { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .08em; }
.location-status { position:absolute; z-index:30; left:50%; top:112px; transform:translateX(-50%); max-width:calc(100% - 32px); padding:9px 13px; border:1px solid rgba(255,255,255,.25); border-radius:4px; color:#fff; background:rgba(25,22,18,.94); box-shadow:0 8px 30px rgba(0,0,0,.25); font-size:12px; text-align:center; }
.location-status.error { border-color:rgba(255,89,96,.7); }
.location-status[hidden] { display:none; }
@keyframes location-pulse { 50% { border-color:#ff5960; box-shadow:0 0 0 5px rgba(255,52,60,.13); } }
.no-js { position: absolute; z-index: 110; inset: auto 24px 24px; padding: 15px; color: #fff; background: #6d2f26; text-align: center; }

@media (max-width: 760px) {
  #experience { min-height: 480px; }
  .topbar { height: 70px; padding: 0 15px; grid-template-columns: auto 1fr auto; gap: 10px; }
  .brand { font-size: 19px; }
  .title-block p { display: none; }
  .title-block h1 { font-size: 17px; white-space: nowrap; }
  .top-actions { gap: 5px; }
  .icon-button { width: 36px; height: 36px; }
  .top-actions .icon-button:first-child { display: none; }
  .top-actions #topView { display:grid; }
  .places { top: 78px; left: 0; width: 100%; padding: 0 12px; overflow: hidden; }
  .places > .eyebrow { display: none; }
  .place-list { flex-direction: row; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .place-list::-webkit-scrollbar { display: none; }
  .place-button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); background: rgba(28,25,21,.78); backdrop-filter: blur(12px); font-size: 12px; }
  .place-button::before { display: none; }
  .place-button:hover, .place-button.active { transform: none; border-color: var(--aqua); background: rgba(44,37,29,.84); }
  .detail-panel { top: auto; right: 12px; bottom: 99px; width: calc(100vw - 24px); padding: 22px 24px 23px; transform: translateY(calc(100% + 130px)); }
  .detail-panel h2 { font-size: 23px; }
  .detail-panel p:not(.eyebrow) { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
  .time-control { bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); padding: 11px 13px; gap: 11px; }
  .play-button { flex-basis: 37px; width: 37px; height: 37px; }
  .time-labels { margin-bottom: 6px; }
  .time-labels span { font-size: 11px; }
  .time-labels strong { font-size: 16px; }
  .time-scale { display: none; }
  .hints, .compass, .credits { display: none; }
  .marker-label { display: none; }
  .marker-line { height: 10px; }
}

@media (max-height: 620px) and (min-width: 761px) {
  .topbar { height: 72px; }
  .places { top: 92px; }
  .place-button { padding-top: 6px; padding-bottom: 6px; }
  .detail-panel { top: 90px; }
  .time-control { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-panel, .loading, .marker { transition-duration: .01ms; }
}
.no-js { position: absolute; z-index: 200; inset: 50% auto auto 50%; transform: translate(-50%,-50%); }
@media (max-width: 780px) {
  .atmosphere { opacity:.32; }
  #experience { min-height: 480px; }
  .topbar { height: 74px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .title-block { display: none; }
  .brand { font-size: 21px; }
  .icon-button { width: 38px; height: 38px; }
  .places { left: 14px; top: 91px; width: calc(100vw - 28px); padding: 0; overflow-x: auto; scrollbar-width: none; }
  .places > .eyebrow { display: none; }
  .place-list { flex-direction: row; gap: 7px; }
  .place-button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(28,25,21,.82); font-size: 12px; backdrop-filter: blur(10px); }
  .place-button::before { display: none; }
  .place-button:hover, .place-button.active { transform: none; border-color: var(--aqua); }
  .detail-panel { right: 12px; left: 12px; top: auto; bottom: 132px; width: auto; padding: 22px 24px; transform: translateY(calc(100% + 170px)); }
  .detail-panel.open { transform: translateY(0); }
  .detail-panel h2 { font-size: 23px; }
  .detail-panel p:not(.eyebrow) { font-size: 14px; line-height: 1.45; margin-bottom: 15px; }
  .time-control { bottom: 18px; width: calc(100vw - 24px); padding: 11px 14px; gap: 12px; }
  .time-labels span { font-size: 12px; }
  .hints, .compass, .credits { display: none; }
  .marker-label { display: none; }
  .marker-line { height: 12px; }
  .location-status { top:126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}