@font-face {
  font-family: World;
  src: local("Avenir Next");
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #102632;
  color: #f3efdf;
  font-family: World, "Helvetica Neue", sans-serif;
  overflow: hidden;
}
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
header {
  position: fixed;
  top: 38px;
  left: 44px;
  right: 44px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.wordmark {
  font-size: 21px;
  letter-spacing: 5px;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  font-weight: 600;
}
.wordmark span {
  font-size: 9px;
  display: block;
  letter-spacing: 7px;
  margin-top: 5px;
}
.edition {
  font-size: 10px;
  letter-spacing: 2px;
  text-align: right;
  line-height: 1.9;
}
.edition span {
  display: block;
  opacity: 0.45;
  font-size: 8px;
}
#story {
  position: fixed;
  left: 44px;
  bottom: 105px;
  max-width: 365px;
  pointer-events: none;
  text-shadow: 0 2px 20px #102632;
}
#chapter {
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #bbceb8;
}
h1 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.14;
  margin: 14px 0;
}
#description {
  font-size: 12px;
  color: #c3d0ce;
  line-height: 1.8;
  max-width: 305px;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: #142e37a8;
  border: 1px solid #d4e1da30;
  border-radius: 30px;
  padding: 12px 19px;
  backdrop-filter: blur(15px);
  font-size: 11px;
  transition: background 0.2s;
}
button:hover,
button:focus-visible {
  background: #3b575d;
  outline: 1px solid #ddd7bb;
}
#action {
  pointer-events: auto;
  margin-top: 6px;
  background: #e0dcc7;
  color: #173038;
}
footer {
  position: fixed;
  bottom: 30px;
  left: 44px;
  right: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.instructions {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #b5c5c8;
}
.instructions i {
  margin: 0 10px;
}
.controls {
  display: flex;
  gap: 8px;
}
#places-toggle span {
  margin-left: 16px;
}
#places {
  position: fixed;
  right: 44px;
  bottom: 85px;
  width: 235px;
  padding: 8px;
  background: #102832ef;
  border: 1px solid #ccddda25;
  border-radius: 18px;
  backdrop-filter: blur(20px);
}
#places button {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  background: none;
  border-radius: 10px;
  padding: 11px 15px;
}
#places button:hover {
  background: #b8c8b81a;
}
#places small {
  display: block;
  opacity: 0.4;
  font-size: 8px;
  letter-spacing: 1px;
  margin-top: 4px;
}
.coordinate {
  position: fixed;
  right: 44px;
  top: 50%;
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: 2px;
  color: #a7bfbb66;
}
#tooltip {
  position: fixed;
  pointer-events: none;
  background: #102a34dc;
  border: 1px solid #f7e4b533;
  border-radius: 7px;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0;
}
#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  background: #102632;
  font: italic 24px Georgia;
  transition: opacity 0.8s;
  z-index: 5;
}
#loading span {
  width: 40px;
  height: 1px;
  background: #ceccb1;
  margin: 24px auto;
  animation: load 1s infinite alternate;
}
@keyframes load {
  to {
    width: 130px;
    opacity: 0.3;
  }
}
@media (max-width: 650px) {
  header {
    top: 24px;
    left: 24px;
    right: 24px;
  }
  .edition {
    font-size: 8px;
    max-width: 130px;
  }
  #story {
    left: 24px;
    bottom: 110px;
    max-width: 280px;
  }
  h1 {
    font-size: 27px;
  }
  #description {
    font-size: 11px;
    max-width: 250px;
  }
  footer {
    left: 20px;
    right: 20px;
    bottom: 23px;
    align-items: end;
  }
  .instructions {
    display: none;
  }
  .controls {
    width: 100%;
    justify-content: space-between;
  }
  .coordinate {
    display: none;
  }
  #places {
    right: 20px;
  }
  #motion {
    padding: 10px 14px;
  }
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    #0b202cea,
    transparent 19%,
    transparent 86%,
    #0b202c80
  );
  z-index: 1;
}
header,
footer,
#story,
#places,
#tooltip,
.coordinate {
  z-index: 2;
}
body[data-focused="true"]:after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0b202ceb, transparent 38%);
  z-index: 1;
}
@media (max-width: 650px) {
  body[data-focused="true"]:after {
    background: linear-gradient(
      0deg,
      #0b202c 4%,
      #0b202cdc 25%,
      transparent 53%
    );
  }
}
#story {
  bottom: 94px;
  max-width: 340px;
}
h1 {
  font-size: 30px;
}
body[data-focused="true"] #story {
  bottom: 94px;
}
body[data-focused="true"] h1 {
  font-family: World, "Helvetica Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.3px;
  margin: 9px 0;
}
body[data-focused="true"] #description {
  display: none;
}
body[data-focused="true"]:after {
  background: linear-gradient(0deg, #0b202cbd, transparent 32%);
}
#action {
  padding: 9px 15px;
  font-size: 10px;
}
#chapter {
  letter-spacing: 1.8px;
  font-size: 9px;
}
.coordinate {
  display: none;
}
@media (max-width: 650px) {
  h1 {
    font-size: 27px;
  }
  #story {
    bottom: 100px;
  }
  body[data-focused="true"] #story {
    bottom: 100px;
  }
  body[data-focused="true"]:after {
    background: linear-gradient(0deg, #0b202ceb, transparent 40%);
  }
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
  align-items: center;
}
#view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: auto;
  margin-top: 10px;
  max-width: 430px;
}
#view-controls button {
  padding: 7px 11px;
  font-size: 10px;
}
#view-controls button[aria-pressed="true"] {
  background: #e0dcc7;
  color: #173038;
}
#browse-records,
#daylight {
  margin-top: 6px;
  padding: 9px 15px;
  font-size: 10px;
}
#story {
  max-width: 440px;
}
dialog {
  color: #23383d;
  background: #f0eadc;
  border: 0;
  border-radius: 20px;
  width: min(650px, calc(100vw - 32px));
  max-height: 82vh;
  padding: 26px;
  box-shadow: 0 25px 100px #031f3960;
}
dialog::backdrop {
  background: #071e36a6;
  backdrop-filter: blur(9px);
}
.collection-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
dialog h2 {
  font: normal 29px Georgia;
  margin: 8px 0 20px;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
}
.close-collection {
  color: #23383d;
  background: #d4d8cc;
  font-size: 20px;
  padding: 4px 12px;
}
.featured-records {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 24px;
}
.featured-records figure {
  margin: 0;
}
.featured-records img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 4px 10px #142b3020;
}
.featured-records figcaption {
  font-size: 10px;
  margin-top: 8px;
}
dialog label {
  display: block;
  font-size: 11px;
  margin-bottom: 8px;
}
dialog input {
  font: inherit;
  width: 100%;
  padding: 12px;
  border: 1px solid #a9b9af;
  border-radius: 8px;
  background: #fffdf5;
  color: #20383a;
}
.record-count {
  font-size: 11px;
  color: #657571;
}
.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 28vh;
  overflow: auto;
}
.record-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 0;
  border-bottom: 1px solid #a7b4a640;
  font-size: 13px;
}
.record-list small {
  color: #69776c;
  font-size: 11px;
}
@media (max-width: 650px) {
  #story {
    max-width: calc(100vw - 48px);
  }
  #view-controls {
    max-width: 330px;
  }
  dialog {
    padding: 20px;
  }
  .featured-records {
    gap: 8px;
  }
  dialog h2 {
    font-size: 24px;
  }
}

.pick-record {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
  transition: transform 0.18s;
}
.pick-record:hover,
.pick-record:focus-visible {
  transform: translateY(-4px);
  background: none;
  outline: 2px solid #6b8b79;
  outline-offset: 4px;
}
.pick-record img {
  display: block;
}

@media (max-width: 480px) {
  .controls {
    gap: 5px;
  }
  .controls button {
    padding: 10px;
    font-size: 11px;
  }
  #places-toggle span {
    margin-left: 7px;
  }
}
#sunset-toggle[aria-pressed="true"] {
  border-color: #efc29b88;
  color: #ffdfb9;
}

/* A small set of actions, with optional viewpoints in one native picker. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#view-select {
  font: inherit;
  font-size: 12px;
  color: #f3efdf;
  color-scheme: dark;
  background: #142e37e8;
  border: 1px solid #d4e1da55;
  border-radius: 22px;
  padding: 10px 32px 10px 14px;
  min-height: 44px;
  max-width: 100%;
  cursor: pointer;
}
#view-select:focus-visible,
.wordmark:focus-visible {
  outline: 2px solid #f3efdf;
  outline-offset: 4px;
}
#view-controls button,
#action,
#browse-records,
.controls button {
  min-height: 44px;
  font-size: 12px;
}
#places button[aria-current="location"] {
  background: #b8c8b826;
}
.home-return {
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  margin-top: 9px;
  font-weight: 400;
  opacity: 0.8;
}
@media (max-width: 650px) {
  header {
    top: max(22px, env(safe-area-inset-top));
  }
  footer {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  #story,
  body[data-focused="true"] #story {
    bottom: 88px;
  }
  #view-controls {
    margin-top: 8px;
  }
  #chapter {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .controls button {
    padding: 10px 12px;
  }
  #places {
    max-height: 60dvh !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* The scenery carries the story; interface appears only where it helps. */
#chapter,
.instructions,
#description,
body:not([data-focused="true"]) #story {
  display: none;
}
.exit-world {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  font-size: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: #10263240;
}
#story h1 {
  font-size: 24px;
  margin-bottom: 12px;
}
#walk-hud {
  position: fixed;
  inset: 24px 24px auto;
  pointer-events: none;
}
#walk-hud button {
  pointer-events: auto;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid #ffffff40;
  border-radius: 28px;
  background: #102632bb;
  color: #fff;
  padding: 10px 18px;
  font: inherit;
}
#walk-status {
  text-align: center;
  text-shadow: 0 2px 8px #000;
}
.walk-help {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  text-shadow: 0 2px 8px #000;
}
.walk-pad {
  position: fixed;
  bottom: 62px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
body[data-walking] #story,
body[data-walking] footer,
body[data-walking] header {
  display: none;
}
body[data-walking] canvas {
  cursor: grab !important;
}
@media (max-width: 650px) {
  header {
    top: 16px;
    left: 16px;
  }
  .walk-help {
    font-size: 10px;
  }
  .controls {
    flex-wrap: wrap;
  }
}
#walk-hud {
  z-index: 3;
}
body[data-walking] #tooltip,
body[data-walking]::after {
  display: none;
}
.walk-help-touch {
  display: none;
}
@media (pointer: coarse), (max-width: 650px) {
  .walk-help-desktop {
    display: none;
  }
  .walk-help-touch {
    display: inline;
  }
}
#walk-hint {
  text-align: center;
  font-size: 12px;
  text-shadow: 0 2px 8px #000;
  margin-top: 6px;
}
.walk-abilities {
  position: fixed;
  bottom: 126px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
#walk-run[aria-pressed="true"] {
  background: #e8dfc7;
  color: #26352e;
}
#walk-hint.sniffing { display:flex; align-items:center; justify-content:center; gap:10px; color:#f5efdc; }


#walk-sound { position:fixed;right:24px;top:24px;font-size:12px!important; }
#walk-continue { position:fixed;bottom:42px;left:50%;transform:translateX(-50%); }
#walk-hud[data-homecoming] .walk-pad,#walk-hud[data-homecoming] .walk-abilities,#walk-hud[data-homecoming] .walk-help { display:none; }
@media (pointer:fine) and (min-width:651px) {
  #walk-hud[data-keyboard] .walk-pad { opacity:0;transition:opacity .5s; }
  #walk-hud[data-keyboard] .walk-pad:hover,#walk-hud[data-keyboard] .walk-pad:focus-within {opacity:1;}
  #walk-hud[data-keyboard] .walk-abilities {bottom:58px;opacity:.55;transition:opacity .3s;}
  #walk-hud[data-keyboard] .walk-abilities:hover,#walk-hud[data-keyboard] .walk-abilities:focus-within {opacity:1;}
}