:root {
  color-scheme: light;
  font-family: "DM Sans", sans-serif;
  color: #f7f4e8;
  background: #d7d4be;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

button { font: inherit; }

.experience {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: #a6b397;
}

#scene { position: absolute; inset: 0; }
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.scene-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(35, 51, 40, .55), rgba(38, 51, 41, .2) 32%, transparent 62%),
    linear-gradient(180deg, rgba(34, 48, 39, .24), transparent 25%, transparent 75%, rgba(32, 45, 37, .22));
}

.topbar {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 88px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.brand {
  display: flex;
  align-items: center;
  color: #fffdf2;
  text-decoration: none;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1.6px;
}

.brand-mark { margin-right: 8px; color: #e2e8c1; font-size: 22px; }
.brand-dot { color: #dce5b5; }
.day-mark, .soundless, .eyebrow, .scene-caption, .card-overline, .journey-state, .progress-labels, .card-foot, .drag-hint, .scene-credit { font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.day-mark { color: rgba(255,255,255,.8); }
.day-mark b { padding: 0 7px; color: #d9e3b2; }

.soundless {
  padding: 12px 0;
  border: 0;
  background: none;
  color: #fffdf2;
  cursor: pointer;
}

.soundless span { margin-left: 9px; font-size: 15px; }

.intro {
  position: absolute;
  z-index: 1;
  top: 21%;
  left: 8%;
  width: min(390px, 38vw);
  pointer-events: none;
}

.eyebrow { display: flex; align-items: center; gap: 12px; color: #edf0d9; font-size: 8px; }
.eyebrow-line { width: 26px; height: 1px; background: #dfe9c4; }
.intro h1 { margin: 24px 0 16px; font: 400 clamp(50px, 5.7vw, 78px)/.99 "DM Serif Display", Georgia, serif; letter-spacing: -2px; }
.intro h1 em { color: #e0e8c1; font-weight: 400; }
.intro p { max-width: 285px; color: #eff0df; font-size: 13px; line-height: 1.8; }

.scene-caption {
  position: absolute;
  z-index: 1;
  top: 116px;
  right: 6%;
  color: #f3f2e3;
  font-size: 8px;
}

.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #e0e9b5; box-shadow: 0 0 10px #e0e9b5; }
.caption-divider { display: inline-block; width: 17px; height: 1px; margin: 0 9px; vertical-align: middle; background: #e2e7d2; }

.journey-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 6%;
  width: 286px;
  padding: 22px 24px 16px;
  transform: translateY(-39%);
  background: #f5f2e7;
  color: #354a3c;
  box-shadow: 0 14px 40px rgba(32, 46, 36, .16);
}

.card-overline { display: flex; justify-content: space-between; color: #899385; font-size: 8px; }
.card-overline i { color: #afb6a5; font-style: normal; }
.card-rule { height: 1px; margin: 13px 0 21px; background: #dfe2d5; }
.journey-state { color: #a1815e; font-size: 8px; }
.journey-card h2 { margin: 9px 0 8px; color: #304337; font: 400 30px/1.05 "DM Serif Display", Georgia, serif; letter-spacing: -.3px; }
.journey-card p { margin: 0 0 20px; color: #748071; font-size: 11px; line-height: 1.7; }
.progress-track { height: 3px; overflow: hidden; background: #dfe4d5; }
.progress-track span { display: block; width: 0; height: 100%; background: #819871; transition: width .2s linear; }
.progress-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #9da694; font-size: 7px; letter-spacing: 1px; }
.card-actions { display: flex; gap: 7px; margin-top: 18px; }
.walk-button { display: flex; flex: 1; align-items: center; gap: 12px; min-height: 47px; padding: 6px 12px 6px 6px; border: 0; border-radius: 3px; background: #354e3e; color: #fffdf2; cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-align: left; }
.walk-button:hover { background: #46634d; }
.walk-button:focus-visible, .soundless:focus-visible { outline: 2px solid #b5c694; outline-offset: 3px; }
.walk-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 2px; background: #637b5d; font-size: 16px; }
.card-foot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid #dfe2d5; color: #9ca696; font-size: 7px; letter-spacing: 1px; }
.foot-star { color: #b1bd91; font-size: 12px; }

.drag-hint, .scene-credit { position: absolute; z-index: 1; bottom: 30px; color: rgba(248,246,231,.84); font-size: 8px; }
.drag-hint { left: 6%; display: flex; align-items: center; gap: 9px; }
.drag-hint span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 14px; }
.scene-credit { right: 6%; letter-spacing: 1.2px; }
.scene-credit span { margin-left: 8px; color: #e0e8bd; }

@media (max-width: 760px) {
  .topbar { height: 70px; padding: 0 5%; }
  .brand { font-size: 23px; }
  .day-mark, .soundless { font-size: 7px; }
  .intro { top: 16%; left: 6%; width: 46%; }
  .intro h1 { margin: 20px 0 12px; font-size: clamp(42px, 8vw, 62px); }
  .intro p { max-width: 250px; font-size: 11px; }
  .scene-caption { top: 92px; right: 5%; font-size: 7px; }
  .journey-card { top: auto; right: 5%; bottom: 72px; width: 255px; padding: 17px 19px 13px; transform: none; }
  .journey-card h2 { font-size: 26px; }
  .journey-card p { margin-bottom: 13px; font-size: 10px; }
  .card-rule { margin: 10px 0 15px; }
  .card-actions { margin-top: 13px; }
  .card-foot { margin-top: 12px; padding-top: 10px; }
  .drag-hint, .scene-credit { bottom: 25px; font-size: 7px; }
}

@media (max-width: 480px) {
  .experience { min-height: 680px; }
  .topbar { height: 64px; }
  .day-mark { letter-spacing: 1px; }
  .soundless { letter-spacing: .8px; }
  .intro { top: 13%; left: 6%; width: 80%; }
  .intro h1 { margin: 16px 0 9px; font-size: 48px; }
  .intro p { max-width: 240px; line-height: 1.6; }
  .scene-caption { top: 80px; left: 6%; right: auto; }
  .journey-card { right: 5%; bottom: 64px; width: 235px; padding: 15px 16px 12px; }
  .journey-card h2 { font-size: 24px; }
  .journey-card p { max-width: 205px; font-size: 9px; line-height: 1.5; }
  .walk-button { min-height: 42px; }
  .walk-icon { width: 30px; height: 30px; }
  .drag-hint { left: 5%; }
  .scene-credit { right: 5%; }
  .scene-credit span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}