:root {
  --ink: #17110a;
  --cream: #fff4dc;
  --sand: #d7ab67;
  --line: rgba(255, 244, 220, 0.5);
  --app-height: 100dvh;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--cream);
  font-family: Baskerville, "Songti SC", STSong, serif;
}

button {
  font: inherit;
}

#experience {
  height: var(--app-height);
  isolation: isolate;
  min-height: var(--app-height);
  overflow: hidden;
  position: relative;
  touch-action: manipulation;
}

.scene {
  background: #21170e;
  inset: 0;
  position: absolute;
}

.scene-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: scale(1.035);
  transition: opacity 760ms ease, transform 3s ease;
  width: 100%;
}

.scene-image.is-changing {
  opacity: 0;
  transform: scale(1.09);
}

.scene-wash {
  background:
    linear-gradient(90deg, rgba(18, 12, 7, 0.75) 0%, rgba(18, 12, 7, 0.22) 43%, rgba(18, 12, 7, 0.02) 70%),
    linear-gradient(0deg, rgba(18, 12, 7, 0.56) 0%, transparent 42%);
  inset: 0;
  position: absolute;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: 0.18;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.masthead {
  align-items: center;
  color: var(--cream);
  display: flex;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  justify-content: space-between;
  left: clamp(22px, 4vw, 68px);
  letter-spacing: 0.15em;
  position: absolute;
  right: clamp(22px, 4vw, 68px);
  text-transform: uppercase;
  top: clamp(20px, 4vh, 42px);
  z-index: 6;
}

.passport {
  position: absolute;
  right: clamp(22px, 4vw, 68px);
  top: clamp(54px, 8vh, 82px);
  z-index: 9;
}

.passport-trigger {
  align-items: center;
  background: rgba(23, 17, 10, 0.2);
  border: 1px solid rgba(255, 244, 220, 0.34);
  border-radius: 999px;
  color: rgba(255, 244, 220, 0.86);
  cursor: pointer;
  display: inline-flex;
  font-family: "Courier New", monospace;
  font-size: 9px;
  gap: 8px;
  letter-spacing: 0.12em;
  padding: 8px 11px 8px 8px;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.passport-trigger:hover,
.passport-trigger:focus-visible,
.passport-trigger[aria-expanded="true"] {
  background: rgba(23, 17, 10, 0.58);
  border-color: rgba(244, 205, 138, 0.62);
  outline: none;
  transform: translateY(-2px);
}

.passport-seal {
  align-items: center;
  border: 1px solid rgba(244, 205, 138, 0.72);
  border-radius: 50%;
  color: #f4cd8a;
  display: inline-flex;
  font-size: 11px;
  height: 19px;
  justify-content: center;
  line-height: 1;
  width: 19px;
}

.passport-panel {
  backdrop-filter: blur(16px) saturate(0.76);
  background: linear-gradient(145deg, rgba(35, 25, 15, 0.78), rgba(120, 82, 38, 0.38));
  border: 1px solid rgba(244, 205, 138, 0.38);
  box-shadow: 0 18px 44px rgba(5, 3, 1, 0.24);
  margin-top: 10px;
  padding: 17px 17px 15px;
  width: min(314px, calc(100vw - 44px));
}

.passport-panel[hidden] {
  display: none;
}

.passport-heading {
  color: #f4cd8a;
  display: flex;
  font: 10px/1.2 "Courier New", monospace;
  justify-content: space-between;
  letter-spacing: 0.14em;
}

.passport-caption {
  color: rgba(255, 244, 220, 0.72);
  font-size: 13px;
  line-height: 1.55;
  margin: 11px 0 14px;
}

.passport-stamp-list {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, 1fr);
}

.passport-stamp {
  border: 1px dashed rgba(255, 244, 220, 0.24);
  border-radius: 5px;
  color: rgba(255, 244, 220, 0.35);
  font: 10px/1.2 "Courier New", monospace;
  min-height: 34px;
  padding: 7px 5px;
  text-align: center;
  transform: rotate(-1deg);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.passport-stamp:nth-child(3n + 2) {
  transform: rotate(1.5deg);
}

.passport-stamp.is-visited {
  background: rgba(244, 205, 138, 0.12);
  border-color: rgba(244, 205, 138, 0.56);
  color: rgba(255, 244, 220, 0.9);
}

.passport-stamp.is-special {
  border-radius: 50%;
  color: rgba(244, 205, 138, 0.78);
}

.passport-stamp.is-special.is-visited {
  background: rgba(244, 205, 138, 0.2);
  border-style: solid;
  color: #f4cd8a;
  transform: rotate(-4deg) scale(1.02);
}

.map-route {
  --map-accent: #f4cd8a;
  background: rgba(22, 15, 8, 0.24);
  border: 1px solid rgba(255, 244, 220, 0.2);
  border-radius: 12px;
  bottom: 17px;
  color: var(--cream);
  cursor: pointer;
  height: 78px;
  left: clamp(24px, 8vw, 135px);
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: clamp(134px, 17vw, 242px);
  text-align: left;
  z-index: 6;
}

.map-route:hover,
.map-route:focus-visible {
  border-color: rgba(244, 205, 138, 0.55);
  box-shadow: 0 8px 28px rgba(5, 3, 1, 0.16);
  outline: none;
}

.map-route-art {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.map-land {
  fill: url(#map-land-fill);
  filter: url(#map-land-shadow);
  opacity: 0.92;
  stroke: #76566b;
  stroke-linejoin: round;
  stroke-width: 0.44;
}

.map-route-history,
.map-route-flight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-route-history {
  stroke: rgba(226, 130, 159, 0.9);
  stroke-dasharray: 1.8 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  transition: d 300ms ease;
}

.map-route-flight {
  opacity: 0;
  stroke: #e9a1b8;
  stroke-dasharray: 1 0;
  stroke-dashoffset: 1;
  stroke-width: 1.55;
}

.map-route-flight.is-flying {
  opacity: 1;
}

.map-travel-plane {
  fill: #f29aa8;
  filter: drop-shadow(0 0 5px rgba(242, 154, 168, 0.72));
  opacity: 0;
  pointer-events: none;
  stroke: #fff0cd;
  stroke-linejoin: round;
  stroke-width: 0.55;
  transform-box: fill-box;
  transform-origin: center;
}

.map-travel-plane.is-traveling {
  animation: travel-arrow-pulse 2s ease-in-out forwards;
  opacity: 1;
}

.map-route-label {
  color: rgba(255, 244, 220, 0.72);
  font: 8px "Courier New", monospace;
  left: 12px;
  letter-spacing: 0.14em;
  position: absolute;
  text-transform: uppercase;
  top: 9px;
  z-index: 2;
}

.map-route-caption {
  bottom: 8px;
  color: rgba(255, 244, 220, 0.68);
  font: 8px "Courier New", monospace;
  left: 12px;
  letter-spacing: 0.12em;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}

.map-point {
  fill: rgba(118, 86, 107, 0.88);
  cursor: pointer;
  stroke: rgba(255, 239, 201, 0.86);
  stroke-width: 0.8;
  transition: fill 220ms ease, r 220ms ease, stroke 220ms ease;
}

.map-point:hover,
.map-point:focus-visible {
  fill: #f29aa8;
  outline: none;
  stroke: #fff4dc;
}

.map-point.is-visited {
  fill: #ce87a1;
}

.map-point.is-active {
  fill: #f29aa8;
  filter: drop-shadow(0 0 5px rgba(242, 154, 168, 0.8));
  stroke: #fff0cd;
}

.map-point-label {
  fill: #76566b;
  font: 4px "Songti SC", serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 246, 239, 0.94);
  stroke-width: 1px;
}

.world-map {
  align-items: stretch;
  display: flex;
  inset: 0;
  justify-content: stretch;
  position: fixed;
  background:
    radial-gradient(circle at 54% 36%, rgba(255, 213, 224, 0.3), transparent 48%),
    #fff4e8;
  pointer-events: auto;
  z-index: 20;
}

.world-map[hidden] {
  display: none;
}

.world-map-backdrop {
  background:
    linear-gradient(90deg, rgba(255, 244, 232, 0.25), transparent 35%, rgba(235, 208, 225, 0.22)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='map-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23map-noise)' opacity='.08'/%3E%3C/svg%3E");
  inset: 0;
  position: absolute;
}

.world-map-dialog {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  height: 100%;
  max-width: none;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.world-map-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  left: clamp(24px, 5vw, 86px);
  position: absolute;
  top: max(4px, env(safe-area-inset-top));
  text-shadow: 0 1px 0 rgba(255, 244, 232, 0.92), 0 2px 8px rgba(118, 86, 107, 0.2);
  z-index: 4;
}

.world-map-heading > div {
  padding: 8px 12px 10px;
}

.world-map-kicker {
  color: rgba(118, 86, 107, 0.68);
  font: 10px "Courier New", monospace;
  letter-spacing: 0.16em;
}

.world-map-heading h2 {
  color: #76566b;
  font-size: clamp(16px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 5px 0 0;
  -webkit-text-stroke: 0.45px rgba(255, 244, 232, 0.86);
}

.world-map-close {
  background: rgba(219, 187, 111, 0.08);
  border: 1px solid rgba(243, 236, 213, 0.34);
  border-radius: 50%;
  color: #f3ecd5;
  cursor: pointer;
  font-size: 20px;
  height: 32px;
  line-height: 1;
  width: 32px;
}

.world-map-canvas {
  background-color: #fff4e8;
  background-image:
    radial-gradient(circle at 52% 35%, rgba(255, 217, 226, 0.44), transparent 48%),
    linear-gradient(145deg, #fff4e8 0%, #f3e1ec 48%, #e4eff0 100%);
  border: 0;
  inset: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  transition: background 500ms ease;
}

.world-map-canvas::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.5), transparent 24%),
    radial-gradient(ellipse at 78% 70%, rgba(185, 220, 214, 0.22), transparent 28%);
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.68;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.world-map-canvas::after {
  background:
    radial-gradient(circle at 13% 20%, #f29aa8 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 22%, #c99db7 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 80%, #f29aa8 0 1.4px, transparent 2px),
    linear-gradient(24deg, transparent 49.6%, rgba(201, 157, 183, 0.12) 50%, transparent 50.4%);
  content: "";
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

#world-map-svg {
  display: block;
  height: 100%;
  min-height: 0;
  position: relative;
  transition: viewBox 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 100%;
  z-index: 2;
}

.world-map-hint {
  color: rgba(118, 86, 107, 0.68);
  font: 10px "Courier New", monospace;
  letter-spacing: 0.1em;
  bottom: clamp(20px, 3vw, 42px);
  left: clamp(24px, 5vw, 86px);
  margin: 0;
  position: absolute;
  text-shadow: 0 1px 0 rgba(235, 224, 181, 0.5);
  z-index: 4;
}

#experience.is-revealed .passport,
#experience.is-revealed .map-route {
  opacity: 0;
  pointer-events: none;
}

.scene-copy {
  bottom: clamp(104px, 15vh, 154px);
  left: clamp(24px, 8vw, 135px);
  max-width: min(620px, calc(100vw - 48px));
  position: absolute;
  transition: opacity 340ms ease, transform 340ms ease;
  z-index: 3;
}

.scene-copy.is-changing {
  opacity: 0;
  transform: translateY(18px);
}

.scene-copy[data-position="center"] {
  bottom: clamp(138px, 20vh, 210px);
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

.scene-copy[data-position="center"] h1,
.scene-copy[data-position="center"] .scene-body {
  margin-left: auto;
  margin-right: auto;
}

.scene-copy[data-position="left-top"] {
  bottom: auto;
  top: clamp(120px, 19vh, 220px);
}

.scene-copy[data-position="left-top-high"] {
  bottom: auto;
  left: clamp(18px, 4vw, 72px);
  top: clamp(88px, 13vh, 150px);
}

.scene-copy[data-position="left-top-edge"] {
  bottom: auto;
  left: clamp(18px, 3vw, 48px);
  top: clamp(86px, 12vh, 140px);
}

.scene-copy[data-position="right-bottom"],
.scene-copy[data-position="right-top"] {
  left: auto;
  right: clamp(24px, 8vw, 135px);
  text-align: right;
}

.scene-copy[data-tone="dark"] {
  color: #172331;
  text-shadow: 0 1px 18px rgba(242, 249, 255, 0.38);
}

.scene-copy[data-tone="dark"] .scene-count,
.scene-copy[data-tone="dark"] .scene-body {
  color: rgba(23, 35, 49, 0.88);
}

.scene-copy[data-position="right-bottom"] .scene-body,
.scene-copy[data-position="right-top"] .scene-body {
  margin-left: auto;
}

.scene-copy[data-position="right-top"] {
  bottom: auto;
  top: clamp(120px, 19vh, 220px);
}

.scene-count,
.reveal-kicker {
  color: #f4cd8a;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 17px;
}

.scene-copy h1 {
  font-size: clamp(32px, 4.5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
  margin: 0 0 20px;
  max-width: 8em;
  text-wrap: balance;
}

.scene-body {
  color: rgba(255, 244, 220, 0.9);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.7;
  margin: 0;
  max-width: 26em;
  text-wrap: pretty;
}

.keepsake {
  --keepsake-bg-start: rgba(67, 45, 22, 0.72);
  --keepsake-bg-end: rgba(159, 114, 57, 0.4);
  --keepsake-border: rgba(244, 205, 138, 0.35);
  --keepsake-ink: #fff4dc;
  --keepsake-accent: #f4cd8a;
  --keepsake-trigger: rgba(28, 19, 10, 0.42);
  --keepsake-trigger-hover: rgba(28, 19, 10, 0.68);
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  top: 48%;
  z-index: 8;
}

.keepsake[data-theme="airport"] {
  --keepsake-bg-start: rgba(114, 78, 38, 0.58);
  --keepsake-bg-end: rgba(238, 190, 112, 0.3);
  --keepsake-border: rgba(255, 234, 188, 0.46);
  --keepsake-accent: #ffe0a1;
  --keepsake-trigger: rgba(91, 60, 27, 0.34);
  --keepsake-trigger-hover: rgba(91, 60, 27, 0.58);
}

.keepsake[data-theme="campus"] {
  --keepsake-bg-start: rgba(56, 65, 53, 0.7);
  --keepsake-bg-end: rgba(166, 137, 84, 0.34);
  --keepsake-border: rgba(229, 211, 169, 0.42);
  --keepsake-accent: #ead9af;
  --keepsake-trigger: rgba(38, 45, 38, 0.4);
  --keepsake-trigger-hover: rgba(38, 45, 38, 0.7);
}

.keepsake[data-theme="highlands"] {
  --keepsake-bg-start: rgba(41, 58, 39, 0.72);
  --keepsake-bg-end: rgba(112, 124, 76, 0.35);
  --keepsake-border: rgba(202, 213, 171, 0.4);
  --keepsake-accent: #d9d5a3;
  --keepsake-trigger: rgba(27, 42, 29, 0.42);
  --keepsake-trigger-hover: rgba(27, 42, 29, 0.68);
}

.keepsake[data-theme="loch"] {
  --keepsake-bg-start: rgba(46, 70, 88, 0.68);
  --keepsake-bg-end: rgba(188, 159, 99, 0.32);
  --keepsake-border: rgba(224, 213, 177, 0.46);
  --keepsake-accent: #f0d7a0;
  --keepsake-trigger: rgba(35, 58, 76, 0.46);
  --keepsake-trigger-hover: rgba(35, 58, 76, 0.7);
}

.keepsake[data-theme="train"] {
  --keepsake-bg-start: rgba(61, 76, 57, 0.68);
  --keepsake-bg-end: rgba(143, 139, 105, 0.32);
  --keepsake-border: rgba(219, 215, 183, 0.44);
  --keepsake-accent: #e5d7a7;
  --keepsake-trigger: rgba(51, 66, 48, 0.44);
  --keepsake-trigger-hover: rgba(51, 66, 48, 0.7);
}

.keepsake[data-theme="harbour"] {
  --keepsake-bg-start: rgba(17, 37, 62, 0.74);
  --keepsake-bg-end: rgba(41, 104, 142, 0.38);
  --keepsake-border: rgba(164, 214, 233, 0.42);
  --keepsake-accent: #bce7ee;
  --keepsake-trigger: rgba(11, 30, 52, 0.42);
  --keepsake-trigger-hover: rgba(11, 30, 52, 0.7);
}

.keepsake[data-theme="savanna"] {
  --keepsake-bg-start: rgba(83, 54, 20, 0.7);
  --keepsake-bg-end: rgba(189, 128, 43, 0.36);
  --keepsake-border: rgba(246, 204, 125, 0.42);
  --keepsake-accent: #f4cd8a;
  --keepsake-trigger: rgba(72, 44, 14, 0.42);
  --keepsake-trigger-hover: rgba(72, 44, 14, 0.68);
}

.keepsake[hidden] {
  display: none;
}

.keepsake[data-position="campus"] {
  bottom: clamp(114px, 17vh, 180px);
  left: clamp(24px, 5vw, 88px);
  right: auto;
  top: auto;
}

.keepsake[data-position="airport"] {
  bottom: clamp(122px, 18vh, 190px);
  left: auto;
  right: clamp(24px, 6vw, 104px);
  top: auto;
}

.keepsake[data-position="loch"] {
  left: auto;
  right: clamp(250px, 27vw, 380px);
  top: clamp(300px, 50vh, 430px);
}

.keepsake[data-position="train"] {
  left: auto;
  right: clamp(70px, 12vw, 180px);
  top: clamp(330px, 48vh, 430px);
}

.keepsake[data-position="harbour"] {
  bottom: clamp(122px, 18vh, 190px);
  left: auto;
  right: clamp(24px, 7vw, 120px);
  top: auto;
}

.keepsake[data-position="savanna"] {
  bottom: clamp(118px, 16vh, 175px);
  left: auto;
  right: clamp(24px, 5vw, 88px);
  top: auto;
}

.keepsake-trigger {
  align-items: center;
  backdrop-filter: blur(8px) saturate(0.8);
  background: var(--keepsake-trigger);
  border: 1px solid var(--keepsake-border);
  border-radius: 999px;
  color: var(--keepsake-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: "Courier New", monospace;
  font-size: 10px;
  gap: 8px;
  letter-spacing: 0.14em;
  padding: 10px 13px 10px 10px;
  transition: background 220ms ease, transform 220ms ease;
}

.keepsake-trigger:hover,
.keepsake-trigger:focus-visible {
  background: var(--keepsake-trigger-hover);
  outline: none;
  transform: translateY(-2px);
}

.keepsake-mark {
  align-items: center;
  border: 1px solid var(--keepsake-accent);
  border-radius: 50%;
  color: var(--keepsake-accent);
  display: inline-flex;
  font-size: 14px;
  height: 22px;
  justify-content: center;
  line-height: 1;
  width: 22px;
}

.keepsake-note {
  backdrop-filter: blur(14px) saturate(0.78);
  background:
    linear-gradient(135deg, var(--keepsake-bg-start), var(--keepsake-bg-end)),
    rgba(28, 19, 10, 0.52);
  border: 1px solid var(--keepsake-border);
  box-shadow: 0 16px 38px rgba(5, 3, 1, 0.2);
  color: var(--keepsake-ink);
  margin-top: 10px;
  max-width: 268px;
  padding: 22px 22px 20px;
  position: relative;
}

.keepsake[data-position="loch"] .keepsake-note,
.keepsake[data-position="train"] .keepsake-note {
  max-width: 250px;
  padding: 19px 19px 17px;
}

.keepsake[data-position="loch"] .keepsake-note {
  left: calc(100% + 12px);
  margin-top: 0;
  position: absolute;
  top: 0;
  width: 250px;
}

.keepsake-note[hidden] {
  display: none;
}

.keepsake-close {
  background: transparent;
  border: 0;
  color: var(--keepsake-ink);
  cursor: pointer;
  font: 16px/1 "Courier New", monospace;
  padding: 4px;
  position: absolute;
  right: 9px;
  top: 7px;
}

.keepsake-kicker {
  color: var(--keepsake-accent);
  font: 10px/1.4 "Courier New", monospace;
  letter-spacing: 0.14em;
  margin: 0 28px 12px 0;
}

.keepsake-message {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}

.hold-progress {
  display: none;
}

.next-control {
  align-items: center;
  background: transparent;
  border: 0;
  bottom: 26px;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  gap: 14px;
  letter-spacing: 0.14em;
  padding: 10px 0;
  position: absolute;
  right: clamp(24px, 4vw, 68px);
  text-transform: uppercase;
  z-index: 7;
}

.next-control.is-final {
  bottom: 30px;
  isolation: isolate;
  min-width: 126px;
  right: clamp(24px, 4vw, 68px);
  touch-action: none;
  transform: none;
}

.next-control.is-final::before {
  background: conic-gradient(#f4cd8a var(--hold-angle, 0deg), rgba(255, 244, 220, 0.2) 0);
  border-radius: 999px;
  content: "";
  inset: -4px;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
  z-index: -2;
}

.next-control.is-final::after {
  background: rgba(23, 17, 10, 0.82);
  border-radius: 999px;
  content: "";
  inset: -2px;
  position: absolute;
  z-index: -1;
}

.next-control.is-final .next-arrow {
  color: #f4cd8a;
}

.next-control.is-final .hold-progress {
  display: none;
}

.next-control.is-holding::before {
  opacity: 1;
}

.next-control.is-holding {
  transform: translateY(-2px);
}

.previous-control {
  align-items: center;
  background: transparent;
  border: 0;
  bottom: 26px;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  gap: 14px;
  left: clamp(24px, 4vw, 68px);
  letter-spacing: 0.14em;
  padding: 10px 0;
  position: absolute;
  text-transform: uppercase;
  z-index: 7;
}

.previous-control[hidden] {
  display: none;
}

.previous-arrow {
  animation: lift 1.8s ease-in-out infinite;
  font-size: 17px;
}

.next-arrow {
  animation: drift 1.8s ease-in-out infinite;
  font-size: 17px;
}

.reveal {
  align-items: center;
  background: linear-gradient(180deg, rgba(14, 12, 8, 0.12), rgba(14, 12, 8, 0.72));
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  position: absolute;
  text-align: center;
  z-index: 10;
}

.reveal[hidden] {
  display: none;
}

.proposal-ring {
  filter: grayscale(0.55) sepia(0.45) saturate(0.8) hue-rotate(342deg) brightness(1.15) drop-shadow(0 10px 12px rgba(7, 4, 1, 0.18));
  height: auto;
  left: 50%;
  max-width: 150px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 72%;
  transform: translateX(-50%) rotate(0deg) scale(0.82);
  width: min(11vw, 150px);
}

.reveal:not([hidden]) .proposal-ring {
  animation: ring-arrival 1.1s 280ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

#experience.is-revealed .scene-copy,
#experience.is-revealed .masthead,
#experience.is-revealed .map-route {
  opacity: 0;
  pointer-events: none;
}

#experience.is-map-open .scene-copy,
#experience.is-map-open .masthead,
#experience.is-map-open .passport,
#experience.is-map-open .keepsake,
#experience.is-map-open .previous-control,
#experience.is-map-open .next-control,
#experience.is-map-open .scene-image,
#experience.is-map-open .scene-wash {
  opacity: 0;
  pointer-events: none;
}

#experience.is-map-open .scene {
  pointer-events: none;
}

#experience.is-map-open .world-map {
  pointer-events: auto;
}

#experience.is-map-transition .world-map {
  pointer-events: none;
}

#experience.is-map-transition .world-map-hint {
  opacity: 0;
}

#experience.is-map-transition .world-map-dialog {
  transform: scale(1.015);
}

#experience.is-map-open .map-route,
#experience.is-map-open .passport,
#experience.is-map-open .keepsake,
#experience.is-map-open .previous-control,
#experience.is-map-open .next-control {
  pointer-events: none;
}

#experience.is-revealed .keepsake {
  opacity: 0;
  pointer-events: none;
}

#experience.is-revealed .previous-control {
  opacity: 1;
  pointer-events: auto;
  z-index: 11;
}

.reveal h2 {
  font-size: clamp(56px, 9vw, 152px);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.88;
  margin: 0;
}

.reveal-look-up {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-top: 42px;
}

@keyframes drift {
  50% {
    transform: translateY(5px);
  }
}

@keyframes lift {
  50% {
    transform: translateY(-5px);
  }
}

@keyframes ring-arrival {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) scale(0.6);
  }

  70% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
}

@keyframes route-flight {
  0% {
    stroke-dashoffset: 1;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes travel-arrow-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  18%,
  82% {
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .scene-wash {
    background:
      linear-gradient(0deg, rgba(18, 12, 7, 0.74) 0%, rgba(18, 12, 7, 0.08) 65%),
      linear-gradient(90deg, rgba(18, 12, 7, 0.12), transparent);
  }

  .scene-image {
    object-position: center;
  }

  .scene-copy {
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 18px;
    max-width: calc(100vw - 36px);
    right: 18px;
  }

  .scene-copy[data-position="center"] {
    bottom: calc(94px + env(safe-area-inset-bottom));
    width: calc(100vw - 36px);
  }

  .scene-copy[data-position="left-top"],
  .scene-copy[data-position="right-top"],
  .scene-copy[data-position="left-top-edge"],
  .scene-copy[data-position="left-top-high"] {
    top: calc(72px + env(safe-area-inset-top));
  }

  .scene-copy[data-position="right-bottom"] {
    left: 18px;
    right: 18px;
  }

  .scene-copy h1 {
    font-size: clamp(28px, 8vw, 46px);
    max-width: calc(100vw - 36px);
  }

  .proposal-ring {
    top: 76%;
    width: min(22vw, 120px);
  }

  .scene-body {
    font-size: 14px;
    line-height: 1.55;
  }

  .next-control {
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
  }

  .previous-control {
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left));
  }

  .next-control.is-final {
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: max(18px, env(safe-area-inset-right));
  }

  .keepsake {
    max-width: calc(100vw - 36px);
    right: 18px;
    top: 46%;
  }

  .keepsake[data-position="airport"] {
    bottom: calc(98px + env(safe-area-inset-bottom));
    left: auto;
    right: 18px;
    top: auto;
  }

  .keepsake[data-position="campus"] {
    bottom: calc(94px + env(safe-area-inset-bottom));
    left: 18px;
    right: auto;
    top: auto;
  }

  .keepsake[data-position="loch"] {
    left: auto;
    right: 18px;
    top: 34%;
  }

  .keepsake[data-position="train"] {
    left: auto;
    right: 18px;
    top: 40%;
  }

  .keepsake[data-position="harbour"] {
    bottom: calc(98px + env(safe-area-inset-bottom));
    left: auto;
    right: 18px;
    top: auto;
  }

  .keepsake[data-position="savanna"] {
    bottom: calc(94px + env(safe-area-inset-bottom));
    left: auto;
    right: 18px;
    top: auto;
  }

  .keepsake-note {
    max-width: min(280px, calc(100vw - 36px));
    width: min(280px, calc(100vw - 36px));
  }

  .keepsake[data-position="loch"] .keepsake-note {
    left: auto;
    margin-top: 10px;
    position: relative;
    top: auto;
    width: auto;
  }

  .masthead {
    font-size: 9px;
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    top: max(18px, env(safe-area-inset-top));
  }

  .passport {
    right: max(18px, env(safe-area-inset-right));
    top: calc(54px + env(safe-area-inset-top));
  }

  .passport-panel {
    width: min(300px, calc(100vw - 48px));
  }

  .map-route {
    bottom: 36px;
    height: 58px;
    left: 24px;
    right: 130px;
  }

  .world-map-dialog {
    padding: 0;
  }

  #world-map-svg {
    min-height: 0;
  }

  .world-map-heading h2 {
    font-size: clamp(16px, 5vw, 24px);
    max-width: 8em;
  }

  .world-map-heading {
    left: max(18px, env(safe-area-inset-left));
    top: max(4px, env(safe-area-inset-top));
  }

  .world-map-heading > div {
    padding: 7px 9px 9px;
  }

  .world-map-hint {
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left));
  }
}

@media (max-width: 380px) {
  .scene-copy h1 {
    font-size: clamp(26px, 7.6vw, 40px);
  }

  .scene-body {
    font-size: 13px;
  }

  .keepsake-trigger {
    font-size: 9px;
    padding: 8px 10px 8px 8px;
  }

  .keepsake-note {
    padding: 17px 16px 15px;
  }
}