:root {
  color-scheme: light;
  --ink: #07323f;
  --ink-soft: #3d5c66;
  --panel: rgba(247, 252, 253, 0.9);
  --edge: rgba(7, 50, 63, 0.16);
  --accent: #0c6c86;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Inter, sans-serif;
}

html, body { margin: 0; height: 100%; background: #0e1418; overflow: hidden; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* An ID rule with `display: grid` beats `.ui[hidden]`, so every panel that
   had one — #intro, #route, #walkpad — ignored its hidden attribute and stayed
   on screen forever. The intro could never be dismissed and the header under
   it was unreachable for the whole session. This has to outrank ID rules. */
[hidden] { display: none !important; }

.ui { position: fixed; z-index: 3; color: var(--ink); }

button {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--edge); border-radius: 999px;
  padding: .55rem 1.05rem; cursor: pointer;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: background .18s, transform .18s, border-color .18s;
}
button:hover { background: #fff; border-color: var(--accent); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.primary:hover { background: #0a5a70; }

header {
  z-index: 4; pointer-events: none;
  top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.3rem; background: linear-gradient(#f4fbfdd9, #f4fbfd00);
}
.brand { font-weight: 700; letter-spacing: .34em; text-decoration: none; color: var(--ink); font-size: 15px; }
.brand span, .location span { display: block; font-size: 9.5px; letter-spacing: .18em; color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.location { margin-left: auto; text-align: right; font-size: 11px; letter-spacing: .18em; }
.quick-xr { display: flex; gap: .4rem; }

/* The bars span the viewport and fade to transparent, so as solid hit targets
   they made the top and bottom of the screen a dead zone for drag-to-look. */
header > *, footer > * { pointer-events: auto; }

/* The intro used to be a full-screen 85%-alpha overlay stacked above the
   header, so the world was invisible behind it and the VR buttons could not
   be clicked. It is a card now: the site is on screen from the first frame. */
#intro {
  left: 1.3rem; bottom: 5.4rem; z-index: 3;
  width: min(34rem, calc(100vw - 2.6rem));
  text-align: left; padding: 1.4rem 1.6rem;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -30px rgba(6, 37, 47, .55);
}
#intro h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.02; margin: .3rem 0 .6rem; font-weight: 650; letter-spacing: -.02em; }
#intro p { max-width: 46ch; margin: 0 0 1.1rem; color: var(--ink-soft); line-height: 1.6; font-size: 15px; }
.eyebrow { font-size: 10.5px; letter-spacing: .3em; color: var(--accent); font-weight: 600; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
#xr-hint, .disclosure { display: block; margin-top: 1rem; font-size: 11px; color: var(--ink-soft); }

#station {
  left: 1.3rem; bottom: 5.4rem; width: min(30rem, calc(100vw - 2.6rem));
  background: var(--panel); border: 1px solid var(--edge); border-radius: 18px;
  padding: 1rem 1.2rem; backdrop-filter: blur(12px);
}
#step { font-size: 10px; letter-spacing: .26em; color: var(--accent); font-weight: 650; }
#station h2 { margin: .35rem 0 .4rem; font-size: 21px; font-weight: 620; }
#station p { margin: 0 0 .8rem; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
#station button { margin-right: .4rem; font-size: 12px; padding: .42rem .85rem; }

#readout {
  right: 1.3rem; top: 5rem; text-align: right;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: .8rem 1rem;
}
#readout span { font-size: 9.5px; letter-spacing: .22em; color: var(--accent); }
#readout strong { display: block; font-size: 27px; font-weight: 620; line-height: 1.1; }
#readout small { font-size: 11px; color: var(--ink-soft); font-weight: 500; }
#readout div { font-size: 11.5px; color: var(--ink-soft); margin-top: .2rem; }

#route { right: 1.3rem; bottom: 5.4rem; display: grid; gap: .3rem; }
#route button { font-size: 11px; text-align: right; padding: .35rem .8rem; }
#route button[aria-current="true"] { background: var(--accent); color: #fff; border-color: transparent; }

footer {
  pointer-events: none;
  left: 0; right: 0; bottom: 0; display: flex; gap: .4rem; align-items: center;
  padding: .8rem 1.3rem; background: linear-gradient(#f4fbfd00, #f4fbfdd9);
}
#status { margin-left: auto; font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); }

#walkpad { left: 50%; transform: translateX(-50%); bottom: 5.6rem; display: grid; justify-items: center; gap: .3rem; }
#walkpad span { font-size: 9.5px; letter-spacing: .16em; color: var(--ink-soft); background: var(--panel); padding: .25rem .7rem; border-radius: 999px; }
#walkpad div { display: flex; gap: .3rem; }
#walkpad button { width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 12px; }

#subtitle {
  position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 10.5rem;
  max-width: min(52ch, 88vw); text-align: center; font-size: 14px; line-height: 1.5;
  color: #06252f; background: rgba(248, 253, 254, .9); border-radius: 12px;
  padding: .5rem .9rem; opacity: 0; transition: opacity .3s;
  pointer-events: none;   /* a faded subtitle still hit-tests, and ate drags */
}
#subtitle.on { opacity: 1; }

#notice {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); top: 4.6rem;
  background: #07323f; color: #eaf6fa; font-size: 12px; padding: .45rem .9rem;
  border-radius: 999px; opacity: 0; transition: opacity .25s; pointer-events: none;
}
#notice.on { opacity: 1; }

dialog {
  border: 1px solid var(--edge); border-radius: 18px; padding: 1.4rem 1.6rem;
  max-width: 44rem; color: var(--ink); background: #f7fcfd;
}
dialog::backdrop { background: rgba(6, 37, 47, .42); }
#close { position: absolute; top: .7rem; right: .7rem; border-radius: 50%; width: 2rem; height: 2rem; padding: 0; }
#dialog-content h3 { margin: 0 0 .5rem; }
#dialog-content p, #dialog-content li { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* The chart engine renders at the size of this container, not at the size
   asked for, so the offscreen lab is square and matches the texture. */
#chart-lab { position: fixed; left: -20000px; top: 0; width: 1536px; height: 1536px; pointer-events: none; }

#loading {
  position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; gap: .6rem;
  background: #eaf6fa; color: var(--ink); text-align: center;
}
#loading b { font: 700 30px/1 inherit; letter-spacing: .38em; }
#loading p { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
#loading[hidden] { display: none; }

@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: .5rem; }
  .location { display: none; }
  #readout { display: none; }
  #station { left: .8rem; right: .8rem; width: auto; bottom: 4.8rem; }
  #route { display: none; }
  footer { overflow-x: auto; }
}