:root {
  --gasket: #303135;

  --frame: #c6c2ba;
  --frame-hi: #ebe8e1;
  --frame-lo: #8b877f;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.2 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 220px 220px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8e0d4;
}

:root             { --sky: #2b2825; }

html, body {
  background: var(--sky);
}

body {

  --corner-right: calc(max(0px, 50vw - 50vw * var(--diorama)) + 3.5vmin + env(safe-area-inset-right, 0px));
  --corner-bottom: calc(max(0px, 50vh - 50vh * var(--diorama)) + 3.5vmin + env(safe-area-inset-bottom, 0px));

  --above-switches: calc(var(--corner-bottom) + var(--switch-size));
}

@property --diorama {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.78;
}

@property --roll {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --pace {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --aim-x { syntax: "<number>"; inherits: true; initial-value: 0; }

:root { --aim-ease: transform 0.4s ease-out; }

@property --beam-x { syntax: "<length>"; inherits: true; initial-value: -9999px; }
@property --beam-tilt { syntax: "<angle>"; inherits: true; initial-value: 0deg; }

@property --shade-drop { syntax: "<number>"; inherits: true; initial-value: 0; }

@property --rail-h { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root { --rail-h: max(2.2vh, 16px); }

:root {

  --diorama: 0.88;

  --diorama-to: 0.88;

  --switch-size: 2.5rem;

  --diorama-radius: 12px;

  --diorama-frame: 1;

  --beam-dur: 6s;
  --beam-ease: linear;

  --shade-rgb: 56, 68, 98;

  --pan-h: -1.8vmin;

  --seat-lead: 0.37;

  --view-bleed: 3.5vmin;
}

body { transition: --diorama 0.55s ease, --shade-drop 0.5s ease, --glow 1.2s ease, --glow-mid 1.2s ease, --glow-edge 1.2s ease; }

body.blind-held { transition-property: --diorama; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  transform: scale(var(--diorama));
  --roll: 1;
  --pace: 1;
  border-radius: var(--diorama-radius);

  animation: sway 7s ease-in-out infinite;

  box-shadow: 0 0 0 calc(1px * var(--diorama-frame)) rgba(255, 248, 236, 0.10);

  transition:
    box-shadow 0.55s ease,
    border-radius 0.55s ease,

    translate 0.55s ease,
    --roll 12s ease-in,
    --pace 20s ease-in-out;
}

@keyframes sway {
  0%   { transform: scale(var(--diorama)) translate(0, 0) rotate(0deg); }
  18%  { transform: scale(var(--diorama)) translate(calc(0.7px * var(--roll) * var(--pace)), calc(-1.6px * var(--roll) * var(--pace))) rotate(calc(0.05deg * var(--roll) * var(--pace))); }
  37%  { transform: scale(var(--diorama)) translate(calc(-0.9px * var(--roll) * var(--pace)), calc(0.9px * var(--roll) * var(--pace))) rotate(calc(-0.06deg * var(--roll) * var(--pace))); }
  55%  { transform: scale(var(--diorama)) translate(calc(0.5px * var(--roll) * var(--pace)), calc(1.4px * var(--roll) * var(--pace))) rotate(calc(0.04deg * var(--roll) * var(--pace))); }
  74%  { transform: scale(var(--diorama)) translate(calc(-0.6px * var(--roll) * var(--pace)), calc(-1px * var(--roll) * var(--pace))) rotate(calc(-0.04deg * var(--roll) * var(--pace))); }
  100% { transform: scale(var(--diorama)) translate(0, 0) rotate(0deg); }
}

@supports (animation-composition: add) {
  #scene {
    animation:
      sway 7s ease-in-out infinite,
      sway-drift 13.7s ease-in-out infinite,
      sway-ripple 3.1s ease-in-out infinite;
    animation-composition: replace, add, add;
  }
}

@keyframes sway-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  29%  { transform: translate(calc(-0.8px * var(--roll) * var(--pace)), calc(0.5px * var(--roll) * var(--pace))) rotate(calc(-0.035deg * var(--roll) * var(--pace))); }
  61%  { transform: translate(calc(0.6px * var(--roll) * var(--pace)), calc(-0.4px * var(--roll) * var(--pace))) rotate(calc(0.03deg * var(--roll) * var(--pace))); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes sway-ripple {
  0%   { transform: translate(0, 0); }
  23%  { transform: translate(calc(0.15px * var(--roll) * var(--pace)), calc(-0.35px * var(--roll) * var(--pace))); }
  58%  { transform: translate(calc(-0.2px * var(--roll) * var(--pace)), calc(0.3px * var(--roll) * var(--pace))); }
  100% { transform: translate(0, 0); }
}

body.at-stop #scene {
  --roll: 0;
  transition:
    box-shadow 0.55s ease,
    border-radius 0.55s ease,
    translate 0.55s ease,
    --roll 7s ease-out,
    --pace 20s ease-in-out;
}

#carriage {
  position: absolute;
  inset: -2vmin;

  background:
    var(--grain),
    radial-gradient(58% 42% at 50% 45%, rgba(255, 236, 205, 0.14), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 13vw),
    linear-gradient(180deg, #b2aea8 0%, #cbc8c3 24%, #d0cdc8 58%, #a29f97 100%);
  background-size: var(--grain-size), auto, auto, auto;

  transform: translateX(calc(var(--aim-x) * var(--pan-h)));

  transition: filter 0.9s ease, var(--aim-ease);
}

.rack {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  height: 2vh;
  background: linear-gradient(180deg, #cecbc6 0%, #b1ada5 55%, #8d8880 100%);
  box-shadow:
    0 1.6vh 3.4vh rgba(0, 0, 0, 0.55),
    0 -0.5vh 2vh rgba(0, 0, 0, 0.3);
}

.rack::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 100%;
  height: 16vh;
  background: radial-gradient(68% 100% at 50% 0%, rgba(255, 226, 175, 0.13), transparent 72%);
  pointer-events: none;
}

:root {
  --sign-dot: min(0.9vh, 1.2vw);
  --sign-rows: 9;
  --sign-cols: 78;

  --sign-top: 0px;
}

.sign {
  position: absolute;
  left: 50%;
  top: var(--sign-top);

  transform: translateX(calc(-50% + var(--aim-x) * var(--pan-h)));

  z-index: 1;
  padding: calc(var(--sign-dot) * 7 / 9) calc(var(--sign-dot) * 10 / 9);
  border-radius: 0 0 var(--sign-dot) var(--sign-dot);
  background: linear-gradient(180deg, #3a3a3f 0%, #232326 40%, #131315 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 0.9vh 2.2vh rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: var(--aim-ease);
}

.sign::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 3vh rgba(255, 150, 40, 0.16);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.sign.lit::after { opacity: 1; }

#sign-matrix {
  display: block;
  width: min(calc(var(--sign-dot) * var(--sign-cols)), 74vw);
  height: calc(var(--sign-dot) * var(--sign-rows));
  border-radius: 0 0 calc(var(--sign-dot) * 4 / 9) calc(var(--sign-dot) * 4 / 9);
  background: #0a0807;

  box-shadow:
    inset 0 0 1vh rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.seat {
  position: absolute;
  pointer-events: none;

  perspective: 200vmin;
  transition: var(--aim-ease);

  --seat-x: calc(var(--seat-first) + var(--seat-i) * var(--seat-pitch));
  left: var(--seat-x);

  width: calc(var(--seat-h) * 873 / var(--seat-crop));

  aspect-ratio: calc(873 / var(--seat-crop));
  overflow: hidden;

  bottom: var(--seat-bottom);
  --seat-swing: 3deg;

  transform: translateX(calc(var(--aim-x) * var(--pan-h) * var(--seat-lead)));
}

.seat-body,
.seat-beam,
.seat-pax {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% * 915 / var(--seat-crop));
}

.seat-body {
  background: url("../img/seat.webp") no-repeat center / contain;

  transform: rotateY(calc(var(--aim-x) * var(--seat-swing)));
  transition: var(--aim-ease);

  filter:
    brightness(0.97)
    contrast(1.04)
    saturate(0.95);
}

.seat-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 26%, rgba(6, 8, 12, 0.45) 62%, rgba(4, 5, 8, 0.8) 100%);
  -webkit-mask: url("../img/seat.webp") no-repeat center / contain;
  mask: url("../img/seat.webp") no-repeat center / contain;
}

.seat-body,
.seat-beam,
.seat-pax {
  rotate: -1deg;
}

body { --sun: calc(1 - var(--shade-drop)); }

.seat-beam,
.seat-pax {
  pointer-events: none;
  mask: url("../img/seat.webp") no-repeat center / contain;
  mix-blend-mode: multiply;
  opacity: var(--sun);
  transition: opacity 1.2s ease;
}

.seat-beam::before,
.wall-beam::before {
  content: "";
  position: absolute;

  width: 300vmax;
  height: 300vmax;
  transform-origin: 50% 50%;

  background: var(--beam-shape, none);

  transform: translateX(var(--beam-x)) rotate(var(--beam-tilt));

  transition: transform var(--beam-dur) var(--beam-ease);
}

.seat-beam::before {
  left: calc(50vw - var(--seat-x) - 150vmax);
  top: calc(var(--beam-line) - 150vmax);
}

.wall-beam {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--below-glass);
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: calc(0.42 * var(--sun));
  transition: opacity 1.2s ease;
}

.wall-beam::before {
  left: calc(50vw - 150vmax);
  top: calc(100% - 150vmax);
}

:root {
  --pax-w: calc(100vw + 8vmin);
  --pax-h: 52vh;

  --pax-wall: 0.32;
  --pax-seat: 0.91;
}

.pax {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--below-glass);
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: multiply;

  opacity: calc(var(--pax-wall) * var(--sun));
  transition: opacity 1.2s ease;
}

.pax-shade {
  position: absolute;
  display: block;
  width: var(--pax-w);
  height: var(--pax-h);
}

.pax .pax-shade {
  left: calc(50vw - var(--pax-w) / 2);
  top: calc(100% - var(--pax-h));
}

.seat-pax .pax-shade {
  left: calc(50vw - var(--seat-x) - var(--pax-w) / 2);
  top: calc(var(--beam-line) - var(--pax-h));
}

.seat-pax { opacity: calc(var(--pax-seat) * var(--sun)); }

:root {

  --seat-w: max(43vw, 69vh);
  --seat-pitch: max(47vw, 75vh);
  --seat-first: -1vw;
  --seat-bottom: -3.5vh;
  --seat-crop: 650;

  --seat-cap: 52vh;

  --seat-h: min(calc(var(--seat-w) * var(--seat-crop) / 873), var(--seat-cap));

  --beam-line: calc(var(--seat-h) + var(--seat-bottom));
}

.seat-1 { --seat-i: 0; }
.seat-2 { --seat-i: 1; }
.seat-3 { --seat-i: 2; }

:root {
  --main-w: 58vw;
  --pier-w: 4vw;
  --side-w: 20vw;
  --surround-v: 2.6vmin;
  --run-h: 60vh;
  --surround: #cac8c2;

  --run-top: 44%;

  --below-glass: calc(var(--run-top) + var(--run-h) / 2 - var(--surround-v));
  --above-glass: calc(100% - var(--run-top) + var(--run-h) / 2 - var(--surround-v));

  --sill-gap: 2.2vmin;
  --sill-h: 3vh;
}

#glazing {
  position: absolute;
  left: 50%;

  top: var(--run-top);
  width: calc(var(--main-w) + var(--pier-w) * 2 + var(--side-w) * 2);
  height: var(--run-h);
  transform: translate(-50%, -50%);

  container-type: size;
  transition: width 0.5s ease, height 0.5s ease, top 0.5s ease;
}

.opening {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.op-left  { left: 0; width: calc(var(--side-w) + var(--pier-w) / 2); }
.op-main  { left: calc(var(--side-w) + var(--pier-w) / 2);
            width: calc(var(--main-w) + var(--pier-w)); }
.op-right { right: 0; width: calc(var(--side-w) + var(--pier-w) / 2); }

.pane {
  position: absolute;
  top: var(--surround-v);
  bottom: var(--surround-v);

  overflow: hidden;

  border-radius: clamp(10px, 2.3vmin, 28px);

  border: 0.9vmin solid var(--gasket);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1.7vmin var(--frame),
    0 -0.32vmin 0 1.7vmin var(--frame-hi),
    0 0.32vmin 0 1.7vmin var(--frame-lo),
    0 0 0 1.85vmin var(--frame-lo),
    0 0.7vmin 2.6vmin rgba(0, 0, 0, 0.5),
    0 0 0 100vmax var(--surround);
  transition: border-radius 0.5s ease;
}

.op-left  .pane { left: 0; right: calc(var(--pier-w) / 2); }
.op-main  .pane { left: calc(var(--pier-w) / 2); right: calc(var(--pier-w) / 2); }
.op-right .pane { left: calc(var(--pier-w) / 2); right: 0; }

@media (max-width: 640px) {
  :root {
    --main-w: 78vw;
    --side-w: 0vw;
    --pier-w: 6vw;
  }
  .op-left, .op-right { display: none; }
  .op-main { left: 0; width: 100%; }
  .op-main .pane { left: var(--pier-w); right: var(--pier-w); }

  :root {
    --seat-first: -3vw;
    --seat-w: 118vw;
  }
  .seat-2, .seat-3 { display: none; }
}

.shade {
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 100%;
  height: calc(1.7vh - 0.85vh * var(--shade-drop) / 3);
  margin-bottom: 2.2vmin;
  border-radius: 1vh;
  background: linear-gradient(180deg, #c3c0b9 0%, #a4a099 60%, #817c76 100%);
  box-shadow: 0 0.7vh 1.8vh rgba(0, 0, 0, 0.5);
}

.blind,
.op-left .pane::after,
.op-right .pane::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: calc(var(--rail-h) + var(--shade-drop) * (100% - var(--rail-h)));
  pointer-events: none;
  background:

    linear-gradient(to top,
      rgba(112, 104, 92, 0.97) 0 var(--rail-h),
      rgba(0, 0, 0, 0) var(--rail-h)),

    repeating-linear-gradient(90deg,
      rgba(92, 82, 68, 0.05) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px),

    linear-gradient(180deg,
      rgba(216, 207, 190, 0.72) 0%,
      rgba(199, 189, 171, 0.77) 55%,
      rgba(178, 168, 151, 0.82) 100%);

  box-shadow: 0 0.5vh 1.6vh rgba(0, 0, 0, 0.35);
}

.op-left .pane::after,
.op-right .pane::after { content: ""; }

body.blind-drawn .blind { backdrop-filter: blur(18px) saturate(0.72) brightness(1.04); }

.op-left .pane,
.op-right .pane { --shade-drop: 0; }

.depart-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  padding: 10px 18px;
  border-radius: 4px;
  background: rgba(22, 27, 33, 0.55);
  color: #fff;
  font-family: var(--ui-face, "Barlow", sans-serif);
  font-size: 18px;
  white-space: nowrap;
  text-shadow: var(--ui-halo, 0 1px 2px rgba(0, 0, 0, 0.85));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.depart-hint.on { opacity: 1; }

.blind-pull {
  position: absolute;
  left: 0;
  width: 100%;
  height: max(3.2vh, 36px);

  top: calc(var(--shade-drop) * (100% - var(--rail-h)) + var(--rail-h) / 2);
  transform: translateY(-50%);
  cursor: grab;

  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body.blind-held .blind-pull { cursor: grabbing; }

.blind-pull::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(7.5vh, 76px);
  height: calc(var(--rail-h) * 0.3);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #f4f1ea 0%, #cfcbc2 50%, #a19d94 100%);
  box-shadow:
    0 1px 1.5px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(60, 55, 48, 0.35);
}

.sill {
  position: absolute;
  left: -3%;
  right: -3%;
  top: 100%;
  height: var(--sill-h);
  margin-top: var(--sill-gap);
  border-radius: 0 0 1vmin 1vmin;
  background: linear-gradient(180deg, #dad8d4 0%, #bebab4 45%, #928e86 100%);
  box-shadow: 0 1.4vh 3vh rgba(0, 0, 0, 0.5);
}

.sill::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 178, 0.22), transparent);
}

.cabin-light {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38vh;
  pointer-events: none;

  background:

    linear-gradient(180deg,
      rgba(255, 228, 176, 0.075) 0,
      rgba(255, 224, 170, 0.028) 2.4vh,
      transparent 4vh),

    radial-gradient(130% 100% at 50% 0%,
      rgba(255, 219, 165, 0.06), transparent 72%);
}

.cabin-light::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 100%;
  height: 74vh;
  background: radial-gradient(125% 72% at 50% 100%,
    rgba(255, 216, 162, 0.045), transparent 74%);
}

:root {

  --wall-shade: 78, 78, 82;

  --floor-shade: 0.52;
}

.floor-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--below-glass);
  bottom: 0;
  pointer-events: none;

  background:

    linear-gradient(180deg,
      rgba(var(--wall-shade), 0) calc(var(--surround-v) + var(--sill-gap) + var(--sill-h)),
      rgba(var(--wall-shade), 0.34) calc(var(--surround-v) + var(--sill-gap) + var(--sill-h) + 0.4vh),
      rgba(var(--wall-shade), 0.12) calc(var(--surround-v) + var(--sill-gap) + var(--sill-h) + 3.5vh),
      rgba(var(--wall-shade), 0) calc(var(--surround-v) + var(--sill-gap) + var(--sill-h) + 8vh)),

    linear-gradient(180deg,
      rgba(var(--wall-shade), 0) 26%,
      rgba(var(--wall-shade), calc(var(--floor-shade) * 0.16)) 46%,
      rgba(var(--wall-shade), calc(var(--floor-shade) * 0.42)) 68%,
      rgba(var(--wall-shade), calc(var(--floor-shade) * 0.8)) 85%,
      rgba(var(--wall-shade), var(--floor-shade)) 94%,
      rgba(var(--wall-shade), var(--floor-shade)) 100%);
}

:root {
  --spill-reach: 44vh;
  --spill-reach-up: 15vh;
  --spill-sample: 340px;
  --spill-blur: 105px;

  --light-up: 30%;
  --light-up-soft: 8%;
  --light-down: 27%;
  --light-down-soft: 5%;

  --spill-dark: 191, 188, 180;
  --surround-rgb: 202, 200, 194;

  --pier-fade: calc(var(--pier-w) * 0.3);
  --pier-edge: calc(var(--pier-w) / 2);
  --pier-out: calc(var(--pier-edge) + var(--pier-fade));

  --pier-mid: calc(var(--pier-edge) + var(--pier-fade) * 0.42);

  --pier-1: calc(50% - var(--main-w) / 2 - var(--pier-w) / 2);
  --pier-2: calc(50% + var(--main-w) / 2 + var(--pier-w) / 2);
}

.spill {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--spill-reach);
  overflow: hidden;
  pointer-events: none;
}

.spill > .glow {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--spill-reach) + var(--spill-sample));

  backdrop-filter: blur(var(--spill-blur)) saturate(1.3) brightness(1.38);
  -webkit-backdrop-filter: blur(var(--spill-blur)) saturate(1.3) brightness(1.38);
}

.spill-up::after,
.spill-down::after {
  --blind-cover: calc(var(--shade-drop) * 0.9);
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--grain),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 13vw),
    linear-gradient(90deg,
      transparent calc(var(--pier-1) - var(--pier-edge)),
      rgba(var(--spill-dark), var(--blind-cover)) calc(var(--pier-1) + var(--pier-w) * 1.5),
      rgba(var(--spill-dark), var(--blind-cover)) calc(var(--pier-2) - var(--pier-w) * 1.5),
      transparent calc(var(--pier-2) + var(--pier-edge))),
    var(--spill-falloff),
    linear-gradient(90deg,
      transparent calc(var(--pier-1) - var(--pier-out)),
      rgba(var(--surround-rgb), calc(var(--pier-blend) * 0.26)) calc(var(--pier-1) - var(--pier-mid)),
      rgba(var(--surround-rgb), var(--pier-blend)) calc(var(--pier-1) - var(--pier-edge)),
      rgba(var(--surround-rgb), var(--pier-blend)) calc(var(--pier-1) + var(--pier-edge)),
      rgba(var(--surround-rgb), calc(var(--pier-blend) * 0.26)) calc(var(--pier-1) + var(--pier-mid)),
      transparent calc(var(--pier-1) + var(--pier-out)),
      transparent calc(var(--pier-2) - var(--pier-out)),
      rgba(var(--surround-rgb), calc(var(--pier-blend) * 0.26)) calc(var(--pier-2) - var(--pier-mid)),
      rgba(var(--surround-rgb), var(--pier-blend)) calc(var(--pier-2) - var(--pier-edge)),
      rgba(var(--surround-rgb), var(--pier-blend)) calc(var(--pier-2) + var(--pier-edge)),
      rgba(var(--surround-rgb), calc(var(--pier-blend) * 0.26)) calc(var(--pier-2) + var(--pier-mid)),
      transparent calc(var(--pier-2) + var(--pier-out)));
  background-size: var(--grain-size), auto, auto, auto, auto;
}

.spill-up {
  bottom: var(--above-glass);
  height: var(--spill-reach-up);
  --pier-blend: 1;

  --spill-falloff: linear-gradient(180deg,
    rgba(var(--spill-dark), 0.97) 0%,
    rgba(var(--spill-dark), 0.95) calc(100% - var(--light-up) - var(--light-up-soft)),
    rgba(var(--spill-dark), 0.1) calc(100% - var(--light-up) + var(--light-up-soft)),
    rgba(var(--spill-dark), 0) 100%);
}
.spill-up > .glow {
  top: 0;

  height: calc(var(--spill-reach-up) + var(--spill-sample));
}

.spill-down {
  top: var(--below-glass);
  --pier-blend: 1;

  --spill-falloff: linear-gradient(180deg,
    rgba(var(--spill-dark), 0) 0%,
    rgba(var(--spill-dark), 0.1) calc(var(--light-down) - var(--light-down-soft)),
    rgba(var(--spill-dark), 0.95) calc(var(--light-down) + var(--light-down-soft)),
    rgba(var(--spill-dark), 0.97) 100%);
}
.spill-down > .glow { bottom: 0; }

#media {
  position: absolute;
  inset: 0;

  overflow: hidden;
  background: #000;
}

#poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: blur(2.4vmin);
  transform: scale(1.08);

  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#poster.on { opacity: 1; }

.media-slot,
.q-probe {
  --view-w: calc(max(104cqw, 185cqh) + var(--view-bleed) * 32 / 9);
  --view-h: calc(max(58.5cqw, 104cqh) + var(--view-bleed) * 2);
}
.q-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--view-w);
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.media-slot {
  position: absolute;
  inset: 0;
  opacity: 0;

  transition: opacity 0.3s ease, var(--aim-ease);
  transform: translateX(calc(var(--aim-x) * var(--pan-h) * -2.5));
}

.media-slot.visible { opacity: 1; }

.media-slot iframe {

  --q: min(calc(var(--diorama-to) * 1.5), var(--q-cap, 9));

  position: absolute;
  top: 50%;
  left: 50%;

  width: calc(var(--view-w) * var(--q));
  height: calc(var(--view-h) * var(--q));

  transform: translate(-50%, -50%) scale(calc(1 / var(--q)));
  border: 0;
}

body.low-power .media-slot iframe { --q: min(var(--diorama-to), var(--q-cap, 9)); }

body.slow-link .media-slot iframe { --q: min(calc(var(--diorama-to) * 0.67), var(--q-cap, 9)); }

#tunnel {
  --tunnel-dir: 1;
  position: absolute;
  inset: 0 -20%;
  pointer-events: none;
  transform: translateX(calc(var(--aim-x) * var(--pan-h) * -2.5));
  transition: var(--aim-ease);
}

#tunnel > * {
  position: absolute;
  inset: 0;
}

.tunnel-wall {
  transform: translateX(calc(var(--tunnel-dir) * -100%)) scaleX(var(--tunnel-dir));
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, 0.6) 1.4%,
    #000 3.5%,
    #000 95.4%,
    #2a2723 96.1%,
    #8b8578 96.8%,
    #c9c2b4 97.5%,
    #706a61 98.4%,
    rgba(38, 36, 33, 0.65) 99.3%,
    transparent 100%);
}

#tunnel.entering .tunnel-wall,
#tunnel.dark .tunnel-wall {
  transform: translateX(0) scaleX(var(--tunnel-dir));
  transition: transform 0.72s cubic-bezier(0.5, 0, 0.85, 0.55);
}

#tunnel.exiting .tunnel-wall {
  transform: translateX(calc(var(--tunnel-dir) * 100%)) scaleX(var(--tunnel-dir));
  transition: transform 0.85s cubic-bezier(0.3, 0.1, 0.7, 0.9);
}

.tunnel-lamps {
  width: 200%;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-image: linear-gradient(to right,
    transparent 0%,
    transparent 30%,
    rgba(150, 128, 104, 0.2) 42%,
    rgba(255, 196, 128, 0.5) 48.6%,
    rgba(255, 236, 200, 0.95) 50%,
    rgba(255, 196, 128, 0.5) 51.4%,
    rgba(150, 128, 104, 0.2) 58%,
    transparent 70%,
    transparent 100%);
  background-size: 21% 100%;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.12) 70%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.12) 70%, transparent 100%);
}

#tunnel.dark .tunnel-lamps {
  opacity: 1;
  animation: tunnel-lamps 0.55s linear infinite;
}

@keyframes tunnel-lamps {
  from { transform: translateX(calc(var(--tunnel-dir) * -10.5% - 10.5%)); }
  to   { transform: translateX(calc(var(--tunnel-dir) * 10.5% - 10.5%)); }
}

#tunnel.first .tunnel-lamps {
  background-image:
    linear-gradient(to right,
      rgba(150, 132, 112, 0.32) 0%,
      rgba(150, 132, 112, 0.32) 22%,
      rgba(200, 172, 140, 0.5) 36%,
      rgba(255, 210, 150, 0.8) 46%,
      rgba(255, 244, 220, 1) 50%,
      rgba(255, 210, 150, 0.8) 54%,
      rgba(200, 172, 140, 0.5) 64%,
      rgba(150, 132, 112, 0.32) 78%,
      rgba(150, 132, 112, 0.32) 100%),
    repeating-linear-gradient(to right,
      transparent 0%,
      transparent 6.7%,
      rgba(255, 238, 214, 0.28) 6.7%,
      rgba(255, 238, 214, 0.28) 7%),
    linear-gradient(to bottom,
      transparent 11%,
      rgba(255, 238, 214, 0.35) 11.4%,
      rgba(255, 238, 214, 0.35) 12%,
      rgba(90, 82, 72, 0.6) 12.4%,
      transparent 12.9%);
  background-size: 21% 100%, 21% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.12) 100%);
}

body.in-tunnel:has(#tunnel.first) { --tunnel-light: 0.55; }

.tunnel-bloom {
  opacity: 0;
  background: radial-gradient(75% 65% at 50% 42%,
    rgba(255, 250, 238, 0.95), rgba(255, 246, 230, 0.7) 55%, rgba(255, 243, 226, 0.45) 100%);
}

#tunnel.exiting .tunnel-bloom {
  animation: tunnel-bloom 1.4s ease-out forwards;
}

@keyframes tunnel-bloom {
  0%   { opacity: 0; }
  28%  { opacity: 0.8; }
  100% { opacity: 0; }
}

#reflection {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 84% 112%, rgba(255, 236, 200, 0.06), transparent 55%);
}

#interior {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.2;
  filter: blur(3px);
  background:

    radial-gradient(88% 30% at 56% -4%, rgba(255, 228, 194, 0.115), transparent 76%),

    radial-gradient(15% 24% at 47% 60%, rgba(172, 190, 214, 0.07), transparent 74%),
    radial-gradient(12% 19% at 33% 55%, rgba(162, 180, 204, 0.045), transparent 74%),

    radial-gradient(52% 22% at 53% 104%, rgba(255, 226, 190, 0.07), transparent 78%);
  animation: reflection-drift 23s ease-in-out infinite;
}

#interior::before {
  content: "";
  position: absolute;
  right: 9%;
  top: 27%;
  width: 33%;
  height: 33%;
  border-radius: 22% / 34%;
  background: linear-gradient(163deg,
    rgba(192, 210, 234, 0.085), rgba(150, 170, 200, 0.022) 62%, transparent 92%);
  transform: skewY(-1.1deg);
  filter: blur(7px);
}

#interior::after {
  content: "";
  position: absolute;
  right: -5%;
  bottom: -9%;
  width: 29%;
  height: 33%;
  border-radius: 46% 54% 0 0 / 62% 58% 0 0;
  background: linear-gradient(158deg,
    rgba(154, 176, 204, 0.1), rgba(92, 108, 130, 0.035) 54%, transparent 84%);
  transform: rotate(2.2deg);
  filter: blur(9px);
}

@keyframes reflection-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0.7%, -0.45%); }
  100% { transform: translate(0, 0); }
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 4.5vmin 1.2vmin rgba(5, 3, 2, 0.5);
}

.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--grain),
    linear-gradient(rgba(200, 212, 228, 0.06), rgba(200, 212, 228, 0.06));
  background-size: 110px 110px, auto;
  opacity: 0;

  transition: opacity 2.5s ease, -webkit-backdrop-filter 2.5s ease, backdrop-filter 2.5s ease;
}
body.soft-glass .pane::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
}
body.soft-glass.low-power .pane::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
#interior { transition: opacity 2.5s ease; }
body.soft-glass #interior { opacity: 0.32; }

#glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 30% 15%, rgba(190, 205, 225, 0.05), transparent 60%);
}

body.in-tunnel  { --tunnel-light: 0.4; }

body.in-tunnel #carriage { filter: brightness(var(--tunnel-light)); }

body.in-tunnel #carriage { transition-duration: 0.45s; }

#media.sky-tinted { filter: var(--sky-filter); transition: filter 0.6s ease; }
body.in-tunnel #media.sky-tinted,
body.under-cover #media.sky-tinted { filter: var(--sky-filter-tunnel); }
body.under-cover #media.sky-tinted,
body.under-cover .sky-layers,
body.under-cover .weather-layer { transition-duration: 1.5s; }

.sky-layers { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.6s ease; }
.sky-layers > div { position: absolute; inset: 0; }
body.in-tunnel .sky-layers,
body.under-cover .sky-layers { opacity: 0; }

.weather-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.weather-layer.rain { opacity: 0.85; }
body.in-tunnel .weather-layer:not(.rain),
body.under-cover .weather-layer:not(.rain) { opacity: 0; }

.fog-blur {
  -webkit-backdrop-filter: blur(4px) saturate(0.65) contrast(0.8);
  backdrop-filter: blur(4px) saturate(0.65) contrast(0.8);
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, #000 48%);
  mask-image: linear-gradient(180deg, transparent 15%, #000 48%);
}

.fog-veil {
  background: linear-gradient(180deg,
    rgba(210, 216, 222, 0.06) 0%, rgba(210, 216, 222, 0.2) 28%,
    rgba(208, 214, 220, 0.46) 50%, rgba(206, 212, 218, 0.58) 72%,
    rgba(204, 210, 216, 0.56) 100%);
}

.fog-wisps {
  right: auto;
  width: calc(100% + 800px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400'%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.0075' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.83  0 0 0 0 0.86  0 0 0 0 0.88  1.05 0 0 0 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 800px 400px;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 45%);
  animation: fog-drift 18s linear infinite;
}
.fog-wisps.rightward { animation-direction: reverse; }
@keyframes fog-drift { from { transform: translateX(0); } to { transform: translateX(-800px); } }

@media (prefers-reduced-motion: reduce) { .fog-wisps { animation: none; } }
body.low-power .fog-wisps { animation: none; }
body.low-power .fog-blur { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.low-power .fog-veil {
  background: linear-gradient(180deg,
    rgba(210, 216, 222, 0.08) 0%, rgba(210, 216, 222, 0.2) 30%,
    rgba(208, 214, 220, 0.5) 55%, rgba(206, 212, 218, 0.64) 78%,
    rgba(204, 210, 216, 0.58) 100%);
}

#status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 30em;
  padding: 1em 1.4em;
  background: rgba(12, 9, 7, 0.86);
  border: 1px solid rgba(255, 236, 200, 0.15);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  z-index: 5;
}

#switches {
  position: fixed;
  right: var(--corner-right);
  bottom: var(--corner-bottom);
  z-index: 10;
  display: flex;
  gap: 0.4rem;
  transition: opacity 0.6s ease;
}

body.idle #switches { opacity: 0; }

body.idle #attribution { opacity: 0.8; }

body.idle { cursor: none; }

.switch {
  display: grid;
  place-items: center;

  width: var(--switch-size);
  height: var(--switch-size);
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: #e8e0d4;
  background: rgba(14, 11, 9, 0.78);
  border: 1px solid rgba(255, 236, 200, 0.14);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .switch:hover {
    background: rgba(46, 36, 27, 0.85);
    border-color: rgba(255, 236, 200, 0.32);
  }
}

.switch.on {
  color: #ffe9c4;
  background: rgba(255, 216, 150, 0.22);
  border-color: rgba(255, 216, 150, 0.5);
}

.switch .icon,
.volume-glyph .icon {
  display: block;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.switch .icon .solid { fill: currentColor; stroke: none; }

.switch .icon .dot { stroke-width: 2.6; }

.switch .icon .when-on,
.switch .icon .when-off,
.volume-glyph .icon .when-on,
.volume-glyph .icon .when-off { transition: opacity 0.2s ease; }
.switch .icon .when-on,
.volume-glyph .icon .when-on { opacity: 0; }
.switch.on .icon .when-on,
.volume-glyph.on .icon .when-on { opacity: 1; }
.switch.on .icon .when-off,
.volume-glyph.on .icon .when-off { opacity: 0; }

.volume {
  display: flex;
  align-items: center;
  height: var(--switch-size);
  padding-right: 0.8rem;
  color: #e8e0d4;
  background: rgba(14, 11, 9, 0.78);
  border: 1px solid rgba(255, 236, 200, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .volume:hover {
    background: rgba(46, 36, 27, 0.85);
    border-color: rgba(255, 236, 200, 0.32);
  }
}

.volume-glyph {
  display: grid;
  place-items: center;
  width: calc(var(--switch-size) - 0.25rem);
  height: 100%;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.volume-glyph.on { color: #ffe9c4; }

.volume.silenced .volume-glyph.on { color: rgba(255, 233, 196, 0.5); }

.volume-track {
  -webkit-appearance: none;
  appearance: none;
  width: 3.6rem;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

body.volume-off .volume { color: rgba(232, 224, 212, 0.5); }

.volume-track::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right,
    currentColor 0 calc(var(--vol, 0) * 100%),
    rgba(232, 224, 212, 0.22) calc(var(--vol, 0) * 100%) 100%);
}

.volume-track::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right,
    currentColor 0 calc(var(--vol, 0) * 100%),
    rgba(232, 224, 212, 0.22) calc(var(--vol, 0) * 100%) 100%);
}

.volume-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: calc((3px - 0.72rem) / 2);
  border: none;
  border-radius: 50%;
  background: currentColor;
}

.volume-track::-moz-range-thumb {
  width: 0.72rem;
  height: 0.72rem;
  border: none;
  border-radius: 50%;
  background: currentColor;
}

#attribution {
  position: fixed;

  right: calc(2vmin + env(safe-area-inset-right, 0px));
  bottom: calc(1.6vmin + env(safe-area-inset-bottom, 0px));
  z-index: 10;

  font-size: 0.78rem;
  color: rgba(240, 231, 216, 0.92);
  transition: opacity 0.6s ease;
}

#attr-media {
  display: inline-block;
  padding: 0.3em 0.7em;
  background: rgba(14, 11, 9, 0.6);
  border-radius: 999px;
}

#attr-media:empty { display: none; }

#attribution a {
  color: inherit;
  transition: color 0.3s ease;
}

@media (hover: hover) { #attribution a:hover { color: rgba(240, 228, 208, 0.85); } }

@media (min-width: 1500px) { :root { --diorama: 0.9; --diorama-to: 0.9; } }
@media (min-width: 2000px) { :root { --diorama: 0.92; --diorama-to: 0.92; } }

@media (max-height: 560px), (max-width: 560px) and (max-height: 760px) {
  .seat { display: none; }

  :root {
    --run-h: 64vh;
    --run-top: 45%;
  }
}

@media (max-width: 640px) {

  :root { --switch-size: 2.75rem; }
  .switch { font-size: 1.1rem; }

  .volume-glyph { width: calc(var(--switch-size) - 0.75rem); }
  .volume-track { width: 2.9rem; }
}

@media (hover: none) {

  body {
    --label-room: 1rem;
    --above-switches: calc(var(--corner-bottom) + var(--switch-size) + var(--label-room));
  }
  #switches { bottom: calc(var(--corner-bottom) + var(--label-room)); }
  .switch, .volume { position: relative; }
  .switch::after, .volume::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 50%;
    translate: -50%;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    color: #e8e0d4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
}

@media (max-width: 400px) {
  .volume { padding-right: 0; }
  .volume-glyph { width: var(--switch-size); }
  .volume-track { display: none; }
}

body.wide {
  --diorama: var(--zoom, 1);
  --diorama-to: var(--zoom, 1);
  --diorama-radius: 0px;
  --diorama-frame: 0;
}
body.wide #scene { translate: 0 calc((50% - var(--run-top)) * var(--diorama)); }

body.wide #attribution {
  right: var(--corner-right);
  bottom: calc(var(--above-switches) + 0.5rem);
}

:focus-visible {
  outline: 2px solid var(--focus, #ffab38);
  outline-offset: 2px;
}

body.idle #switches:has(:focus-visible) { opacity: 1; }

body.resizing,
body.resizing #scene,
body.resizing #scene *:not(#tunnel):not(.tunnel-wall):not(.tunnel-bloom):not(.tunnel-lamps) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #scene { animation: none; }
  #interior { animation: none; }
  #glazing,
  .media-slot { transition-duration: 0.01ms; }

  body { transition-duration: 0.01ms; }

  .tunnel-wall {
    transform: none !important;
    opacity: 0;
    transition: opacity 0.6s ease !important;
  }
  #tunnel.entering .tunnel-wall,
  #tunnel.dark .tunnel-wall { opacity: 1; }
  #tunnel.dark .tunnel-lamps { opacity: 0; animation: none; }
  #tunnel.exiting .tunnel-bloom { animation: none; }
}

body.low-power #scene { animation: none; }
body.low-power #interior { animation-play-state: paused; }

body.low-power .spill > .glow {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgb(198, 195, 177);
  transition: filter 1.2s ease, opacity 1.2s ease;
}

body.low-power .spill { background: rgb(var(--spill-dark)); }

body.low-power.in-tunnel .spill > .glow { opacity: 0; transition-duration: 1.2s, 0.45s; }

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/barlow-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/barlow-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@property --glow { syntax: "<color>"; inherits: true; initial-value: #3d4a59; }
@property --glow-mid { syntax: "<color>"; inherits: true; initial-value: #2f3843; }
@property --glow-edge { syntax: "<color>"; inherits: true; initial-value: #1f252d; }
html:has(> body.ui-on) { background: #1f252d; }
body.ui-on {
  background: radial-gradient(ellipse 75% 70% at 50% 42%, var(--glow) 0%, var(--glow-mid) 55%, var(--glow-edge) 100%);
}
body[data-sky="sunset"] { --glow: #574a50; --glow-mid: #34333f; --glow-edge: #1f1f28; }
body[data-sky="night"]  { --glow: #29344d; --glow-mid: #1d2435; --glow-edge: #10141c; }
body[data-sky="rain"]   { --glow: #3a444e; --glow-mid: #2b323b; --glow-edge: #1c2026; }
body[data-sky="fog"]    { --glow: #4a5158; --glow-mid: #353a40; --glow-edge: #23272c; }
body[data-sky="snow"]   { --glow: #4a5768; --glow-mid: #333c48; --glow-edge: #20262f; }
body.ui-on {
  --ui-ink: #ffffff;
  --ui-dim: #c3ccd6;
  --ui-now: #ffb54d;
  --ui-face: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ui-halo: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 0, 0, 0.35);
}

body.ui-on #switches > .switch,
body.ui-on #switches > .volume { display: none !important; }
body.ui-on #switches { pointer-events: none; }

.ui { font-family: var(--ui-face); color: var(--ui-ink); }
.ui > * { position: fixed; z-index: 12; }
.ui button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.ui :focus-visible { outline: 2px solid var(--ui-now); outline-offset: 3px; }

.ui-name { display: flex; align-items: baseline; gap: 18px; }
.ui-title { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.ui-country { font-size: 18px; padding: 2px 0; text-underline-offset: 6px; }

@media (hover: hover) { .ui-country:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.ui-country[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: 2px; }

.ui-verbs { display: flex; gap: 14px; }
.ui-verb { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.ui-verb .icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-verb .icon .solid { fill: currentColor; stroke: none; }
.ui-verb .icon .when-on,
.ui-verb .icon .when-off { transition: opacity 0.2s ease; }
.ui-verb .icon .when-on { opacity: 0; }
.ui-verb.on .icon .when-on { opacity: 1; }
.ui-verb.on .icon .when-off { opacity: 0; }
.ui-verb::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 1px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
}
@media (hover: hover) { .ui-verb:hover::after { opacity: 0.5; height: 1px; } }
.ui-verb.on::after { opacity: 1; height: 2px; }

.ui-verb-word { display: none; }
@media (min-width: 641px) {
  .ui-verbs { gap: 22px; }
  .ui-verb { width: auto; padding: 0 2px; font-size: 18px; white-space: nowrap; }
  .ui-verb .icon { display: none; }
  .ui-verb-word { display: inline; }
  .ui-verb::after { left: 2px; right: 2px; bottom: 4px; }
}

.ui-route {
  left: calc(var(--pic-l) + 36px);
  top: calc(var(--pic-t) + var(--pic-h) * 0.2);
  width: 400px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
}
.ui-route line { stroke-linecap: round; }
.ui-r-behind { stroke: var(--ui-dim); stroke-width: 3; }
.ui-r-ahead { stroke: var(--ui-ink); stroke-width: 7; }
.ui-r-stop { fill: #2d3640; stroke: var(--ui-ink); stroke-width: 3; }
.ui-r-passed { fill: var(--ui-dim); }
.ui-r-now { fill: var(--ui-now); }
.ui-r-halo { fill: none; stroke: var(--ui-now); stroke-width: 2; opacity: 0.55; }
.ui-route text {
  font-family: var(--ui-face);
  font-size: 18px;
  paint-order: stroke;
  stroke: rgba(10, 13, 17, 0.4);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ui-r-name { fill: var(--ui-ink); }
.ui-r-gone { fill: var(--ui-dim); }

.ui-r-hit { cursor: pointer; outline: none; }
.ui-r-hit rect { fill: transparent; pointer-events: all; }
@media (hover: hover) { .ui-r-hit:hover rect { fill: rgba(255, 255, 255, 0.1); } }
.ui-r-hit:focus-visible rect { fill: rgba(255, 255, 255, 0.1); stroke: var(--ui-now); stroke-width: 2; }
body.wide.ui-quiet .ui-r-hit rect { pointer-events: none; }

.ui-list {
  width: min(760px, calc(var(--pic-w) - 80px));
  padding: 20px 28px 16px;
  overflow-y: auto;
  columns: 160px 4;
  column-gap: 34px;
  background: rgba(22, 27, 33, 0.42);
  border-radius: 4px;
  text-shadow: var(--ui-halo);
}
.ui-list[hidden] { display: none; }
.ui-list-region { font-size: 16px; font-weight: 500; color: var(--ui-dim); margin: 0 0 4px; break-after: avoid; }
.ui-list-region:not(:first-child) { margin-top: 16px; }
.ui-item { display: block; width: 100%; text-align: left; font-size: 18px; line-height: 1.35; padding: 4px 0; }
body.ui-listing .ui-route { visibility: hidden; }
@media (hover: hover) { .ui-item:hover { text-decoration: underline; text-underline-offset: 4px; } }
.ui-item.here { color: var(--ui-now); font-weight: 500; }

.ui-list::-webkit-scrollbar { width: 6px; }
.ui-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 3px; margin: 12px 0; }
.ui-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.45); border-radius: 3px; }

@supports not selector(::-webkit-scrollbar) {
  .ui-list { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08); }
}

.ui-dial { width: 0; height: 0; z-index: 14; }

.ui-dial::before {
  content: "";
  position: absolute;
  left: -27px;
  width: 54px;
  top: -340px;
  height: 318px;
}

.ui-vol {
  z-index: 14;
  translate: -50% -100%;
  margin-top: -6px;
  padding: 14px 10px;
  background: #2d3640;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.ui-vol[hidden] { display: none; }
.ui-vol::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.ui-vol-slider {
  display: block;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 22px;
  height: 120px;
  margin: 0;
  accent-color: var(--ui-ink);
  cursor: pointer;
}
.ui-dial[hidden] { display: none; }
.ui-dial-item {
  position: absolute;
  left: -23px;
  top: -23px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2d3640 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translate(0, 0) scale(0.6);
  transition: transform 0.15s ease-out, opacity 0.12s ease-out;
  transition-delay: calc(var(--i) * 12ms);
}
.ui-dial.open .ui-dial-item { opacity: 1; transform: translate(var(--x), var(--y)); }
.ui-dial-item .icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-dial-item.here { box-shadow: 0 0 0 2px var(--ui-now), 0 3px 12px rgba(0, 0, 0, 0.4); color: var(--ui-now); }
@media (hover: hover) { .ui-dial-item:hover { background: #3c4753 !important; } }
.ui-dial-name {
  position: absolute;
  left: 32px;
  top: -52px;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  background: #2d3640;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.ui-dial.open .ui-dial-name { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ui-dial-item, .ui-dial-name { transition: none; }
}

.ui-side #scene { translate: 0 calc((1 - var(--diorama)) * -30vh); }
.ui-side .ui-route { height: calc(var(--pic-h) * 0.8 - 70px); }
.ui-side .ui-name { left: var(--pic-l); top: calc(var(--pic-t) + var(--pic-h) + 20px); }
.ui-side .ui-verbs { right: calc(100vw - var(--pic-l) - var(--pic-w)); top: calc(var(--pic-t) + var(--pic-h) + 24px); }
.ui-side .ui-list {
  left: var(--pic-l);
  bottom: calc(100vh - var(--pic-t) - var(--pic-h) + 12px);
  max-height: calc(var(--pic-h) * 0.8 - 24px);
}
body.ui-side #attribution { left: var(--credit-mid, 50%); right: auto; translate: -50% 0; top: calc(var(--pic-t) + var(--pic-h) + 28px); bottom: auto; white-space: nowrap; }

body.ui-side.ui-credit-up #attribution { left: auto; right: calc(100vw - var(--pic-l) - var(--pic-w) + 12px); translate: none; top: calc(var(--pic-t) + var(--pic-h) - 44px); }

.ui-foot .ui-name,
.ui-foot .ui-verbs { text-shadow: var(--ui-halo); }

.ui-foot .ui-verb .icon,
.ui-foot .ui-verb::after { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); }
.ui-foot .ui-route { height: calc(var(--pic-h) * 0.8 - 130px); }
.ui-foot .ui-name { left: calc(var(--pic-l) + 40px); top: calc(var(--pic-t) + var(--pic-h) - 64px); }
.ui-foot .ui-verbs { right: calc(100vw - var(--pic-l) - var(--pic-w) + 40px); top: calc(var(--pic-t) + var(--pic-h) - 58px); }
.ui-foot .ui-list {
  left: calc(var(--pic-l) + 40px);
  bottom: calc(100vh - var(--pic-t) - var(--pic-h) + 80px);
  max-height: calc(var(--pic-h) - 110px);
}
.ui-foot .ui-fade {
  left: var(--pic-l);
  width: var(--pic-w);
  height: 140px;
  top: calc(var(--pic-t) + var(--pic-h) - 140px);
  background: linear-gradient(transparent, rgba(16, 20, 25, 0.45));
  border-radius: 0 0 var(--diorama-radius) var(--diorama-radius);
  pointer-events: none;
}
.ui-side .ui-fade { display: none; }

body.ui-foot #attribution { right: calc(100vw - var(--pic-l) - var(--pic-w)); bottom: auto; top: min(calc(var(--pic-t) + var(--pic-h) + 8px), calc(100vh - 28px)); }
body.wide.ui-foot #attribution { top: 12px; right: 12px; }

@media (max-width: 640px) {
  .ui-foot .ui-route { left: calc(var(--pic-l) + 18px); top: calc(var(--pic-t) + var(--pic-h) * 0.17); height: calc(var(--pic-h) * 0.83 - 160px); }
  .ui-foot .ui-route text { font-size: 15px; }
  .ui-foot .ui-name { left: calc(var(--pic-l) + 24px); top: calc(var(--pic-t) + var(--pic-h) - 128px); display: block; }
  .ui-foot .ui-title { font-size: 24px; }
  .ui-foot .ui-country { display: block; width: fit-content; font-size: 16px; margin-top: 4px; }
  .ui-foot .ui-verbs { left: calc(var(--pic-l) + 16px); right: auto; top: calc(var(--pic-t) + var(--pic-h) - 52px); gap: 10px; }
  .ui-foot .ui-list { left: calc(var(--pic-l) + 16px); width: calc(var(--pic-w) - 32px); bottom: calc(100vh - var(--pic-t) - var(--pic-h) + 140px); }

  .ui-list { columns: auto; }

  .ui-foot .ui-list { max-height: calc(var(--pic-h) - 170px); }
  .ui-foot .ui-fade { height: 200px; top: calc(var(--pic-t) + var(--pic-h) - 200px); }
}

.ui-foot.ui-stack .ui-route { height: calc(var(--pic-h) * 0.8 - 190px); }
.ui-foot.ui-stack .ui-name { top: calc(var(--pic-t) + var(--pic-h) - 118px); }
.ui-foot.ui-stack .ui-verbs { left: calc(var(--pic-l) + 32px); right: auto; top: calc(var(--pic-t) + var(--pic-h) - 58px); }
.ui-foot.ui-stack .ui-list { bottom: calc(100vh - var(--pic-t) - var(--pic-h) + 140px); }
.ui-foot.ui-stack .ui-fade { height: 200px; top: calc(var(--pic-t) + var(--pic-h) - 200px); }

.ui > *,
body.ui-on #attribution { transition: opacity 0.2s ease; }
body.wide.ui-quiet .ui > *,
body.wide.ui-quiet #attribution { opacity: 0; pointer-events: none; }
body.wide:not(.ui-quiet) .ui > *,
body.wide:not(.ui-quiet) #attribution { transition-duration: 0s; }
body.wide.ui-quiet { cursor: none; }