:root { color-scheme: dark; --bg: #0b0d12; --pill: rgba(14, 18, 26, .62); --edge: rgba(255, 255, 255, .22); --ink: #f3f6fb; --accent: #7fd4ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
#stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.layer { position: absolute; inset: 0; will-change: transform, opacity; }
.scroller { position: absolute; inset: 0; overflow: hidden; }
.scroller.pan { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.scroller.pan::-webkit-scrollbar { display: none; }
.world { position: relative; overflow: hidden; background: #000; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; display: block; }
.ov { position: absolute; inset: 0; }

/* advertising surfaces */
.surf { position: absolute; overflow: visible; background: #000; cursor: pointer; outline-offset: 2px; }
.surf-mesh { background: transparent; }
.surf-mesh canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.surf .m { position: absolute; inset: 0; overflow: hidden; background: #000; }
.srcbox { position: absolute; width: 2px; height: 2px; overflow: hidden; opacity: .01; pointer-events: none; }
.surf:focus-visible { outline: 2px solid var(--accent); }

/* route pills */
.cut { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.surf.ambient, .surf.ambient .m { background: transparent; }      /* no black patch while the loop is still loading */
.amb { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.cut.mk { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.route { position: absolute; z-index: 100000; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1.05em; color: var(--ink); background: var(--pill); border: 1px solid var(--edge); border-radius: 999px;
  font: 600 clamp(11px, 1.15vw, 15px)/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; transition: background .25s, border-color .25s; }
.route i { font-style: normal; color: var(--accent); }
.route:hover, .route:focus-visible { background: rgba(30, 40, 58, .8); border-color: var(--accent); outline: none; }
@media (max-width: 700px) { .route { font-size: 11px; padding: .6em .9em; } }

/* mobile billboard focus */
#hud { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 100; display: none; justify-content: center; gap: 12px; padding: 0 16px; }
#hud.show { display: flex; }
.hud-btn { appearance: none; border: 1px solid var(--edge); background: var(--pill); color: var(--ink); padding: .9em 1.3em; border-radius: 999px;
  font: 600 13px/1 system-ui, sans-serif; letter-spacing: .1em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.hud-btn.primary { background: rgba(127, 212, 255, .22); border-color: var(--accent); }

#veil { position: fixed; inset: 0; background: var(--bg); z-index: 200; pointer-events: none; opacity: 1; transition: opacity .5s ease; }
#veil.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #veil, .route { transition: none; } }

/* ---- Living City: ambient thoughts + weather overlay ------------------------------------------------------------- */
.tp { position: absolute; z-index: 90000; max-width: min(260px, 70vw); padding: 8px 12px; font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #eef3fa; background: rgba(14, 18, 26, .66); border: 1px solid rgba(255, 255, 255, .20); border-radius: 10px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.tp.show { opacity: 1; }
.tp.rm { transition: none; }                          /* reduced motion: no fade, no movement */
.tp-ptr { position: absolute; width: 8px; height: 8px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.tp-ptr.down { bottom: -5px; }
.tp-ptr.up { top: -5px; transform: translateX(-50%) rotate(225deg); }
.tp-minimal { background: transparent; border-color: transparent; box-shadow: none; text-shadow: 0 1px 6px #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tp-minimal .tp-ptr { display: none; }
.tp-dark { background: rgba(8, 10, 14, .9); }
.tp-light { background: rgba(250, 252, 255, .88); color: #151a22; border-color: rgba(0, 0, 0, .15); }
.wx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* opt-in sound button: small, translucent, quiet until needed */
.snd { position: absolute; z-index: 80000; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; transform: translate(-100%, -100%);
  color: #fff; background: rgba(8, 10, 14, .66); border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; cursor: pointer; opacity: .88;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .55);              /* a dark halo keeps it readable on bright AND dark scenes */
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: opacity .25s, background .25s; }
.snd svg { width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.snd:hover, .snd:focus-visible, .snd.on { opacity: 1; outline: none; background: rgba(8, 10, 14, .8); }
.snd:focus-visible { box-shadow: 0 0 0 2px rgba(127, 212, 255, .9), 0 2px 10px rgba(0, 0, 0, .55); }
.snd.on { border-color: rgba(127, 212, 255, .95); color: #bfeaff; }
@media (pointer: coarse) { .snd { width: 38px; height: 38px; } .snd svg { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) { .snd { transition: none; } }

/* ---- interactive hotspots: the environment is the interface ---- */
.hs-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 70000; overflow: visible; pointer-events: none; }
.hs { fill: transparent; stroke: transparent; stroke-width: var(--hs-w, 2); stroke-linejoin: round; cursor: pointer; outline: none; pointer-events: all;
  transition: fill .3s ease, stroke .3s ease, filter .3s ease; -webkit-tap-highlight-color: transparent; }
.hs-layer.rm .hs, .hs-layer.rm .hs-label { transition: none; }
.hs-bb { cursor: pointer; }
/* hover / focus / armed (first tap) feedback: restrained, never a flash */
.hs-v-hover_reveal.on, .hs-v-always_subtle.on, .hs-v-discover_only.on { fill: rgba(255, 255, 255, var(--hs-op, .22)); stroke: rgba(255, 255, 255, .72); filter: drop-shadow(0 0 var(--hs-glow, 8px) rgba(127, 212, 255, .55)); }
.hs-v-hover_reveal.on.hs-d-outline, .hs-v-always_subtle.on.hs-d-outline { fill: transparent; }
.hs-v-hover_reveal.on.hs-d-label_only, .hs-v-always_subtle.on.hs-d-label_only { fill: transparent; stroke: transparent; filter: none; }
.hs-v-invisible.on { fill: transparent; stroke: transparent; }
.hs:focus-visible { stroke: rgba(127, 212, 255, .95); stroke-width: 2; }
/* always subtle: a permanent, extremely quiet clue (no animation) */
.hs-v-always_subtle { stroke: rgba(255, 255, 255, .16); fill: rgba(255, 255, 255, .02); filter: drop-shadow(0 0 3px rgba(127, 212, 255, .25)); }
/* Discover: slow fade in, stays a few seconds, slow fade out. Never pulses. */
.hs-layer.hs-discovering .hs.dv { fill: rgba(255, 255, 255, calc(var(--hs-op, .22) * .8)); stroke: rgba(255, 255, 255, .6); filter: drop-shadow(0 0 var(--hs-glow, 8px) rgba(127, 212, 255, .45)); transition-duration: .9s; }
.hs.dv { transition-duration: 1.2s; }
.hs-label { position: absolute; z-index: 75000; max-width: min(240px, 60vw); padding: 5px 11px; border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: 0;
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .04em; color: #eef3fa; transition: opacity .35s ease; }
.hs-label.show { opacity: 1; }
.hs-ls-glass { background: rgba(14, 18, 26, calc(var(--hs-lbl-bg, .66))); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hs-ls-minimal { background: transparent; text-shadow: 0 1px 6px #000, 0 0 2px #000; }
.hs-ls-dark { background: rgba(8, 10, 14, .92); border: 1px solid rgba(255, 255, 255, .15); }
.hs-ls-light { background: rgba(250, 252, 255, .92); color: #151a22; border: 1px solid rgba(0, 0, 0, .15); }
/* the small DISCOVER control */
.hs-discover { position: fixed; z-index: 150; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: rgba(238, 243, 250, .9);
  background: rgba(14, 18, 26, .42); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; cursor: pointer; opacity: .78; transition: opacity .25s, background .25s; }
.hs-discover:hover, .hs-discover:focus-visible, .hs-discover[aria-pressed="true"] { opacity: 1; background: rgba(30, 40, 58, .7); outline: none; }
.hs-discover:focus-visible { box-shadow: 0 0 0 2px rgba(127, 212, 255, .8); }
.hs-discover svg { width: 14px; height: 14px; }
.hs-discover[hidden] { display: none; }
.hs-discover.pos-bottom-right { right: max(14px, env(safe-area-inset-right)); bottom: max(70px, calc(env(safe-area-inset-bottom) + 56px)); }
.hs-discover.pos-bottom-left { left: max(14px, env(safe-area-inset-left)); bottom: max(70px, calc(env(safe-area-inset-bottom) + 56px)); }
.hs-discover.pos-top-right { right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); }
.hs-discover.pos-top-left { left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); }
.hs-intro { position: fixed; left: 50%; top: 18px; z-index: 160; transform: translate(-50%, -8px); max-width: min(440px, 88vw); padding: 10px 16px; border-radius: 12px; text-align: center;
  color: #eef3fa; background: rgba(14, 18, 26, .72); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; opacity: 0; transition: opacity .6s ease, transform .6s ease; cursor: pointer; }
.hs-intro.show { opacity: 1; transform: translate(-50%, 0); }
.hs-intro.rm { transition: none; transform: translate(-50%, 0); }
/* quick links: the accessible fallback; visually hidden unless the creator shows it or the keyboard reaches it */
.hs-quick { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(70px, calc(env(safe-area-inset-bottom) + 56px)); z-index: 150; font: 600 11px/1 system-ui, sans-serif; }
.hs-quick.sr:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hs-quick-btn, .hs-quick-item { font: inherit; letter-spacing: .12em; color: #eef3fa; background: rgba(14, 18, 26, .62); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 7px 12px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs-quick-btn:focus-visible, .hs-quick-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(127, 212, 255, .85); }
.hs-quick-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hs-quick-list[hidden] { display: none; }
.hs-quick-item { letter-spacing: .04em; font-weight: 500; font-size: 13px; text-align: left; }
/* information overlay / internal page */
.hs-ov { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 10, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease; }
.hs-ov.open { opacity: 1; }
.hs-ov.rm { transition: none; }
.hs-card { position: relative; width: min(520px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 22px 24px 20px; border-radius: 16px; color: #eef3fa;
  background: rgba(16, 20, 28, .94); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 60px rgba(0, 0, 0, .55); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.hs-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 0; background: transparent; color: #eef3fa; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px; }
.hs-x:hover, .hs-x:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.hs-img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin: 0 0 14px; }
.hs-title { margin: 0 34px 4px 0; font-size: 20px; letter-spacing: .02em; }
.hs-sub { margin: 0 0 10px; color: #aeb8c8; font-size: 14px; }
.hs-body { margin: 0 0 10px; }
.hs-media { width: 100%; max-height: 52vh; border-radius: 10px; background: #000; margin: 6px 0 10px; }
.hs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hs-btn { font: 600 13px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #eef3fa; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.hs-btn:hover, .hs-btn:focus-visible { background: rgba(255, 255, 255, .16); outline: none; }
.hs-btn:focus-visible { box-shadow: 0 0 0 2px rgba(127, 212, 255, .85); }
.hs-primary { background: #2b6a93; border-color: #3d86b3; }
@media (max-width: 700px) { .hs-label { font-size: 12px; } }