:root {
  --visit-ink: #1f2b22;
  --visit-green: #315f45;
  --visit-leaf: #87a462;
  --visit-cream: #fff9e9;
  --visit-yellow: #f2c858;
  --visit-red: #b84b3d;
}

.website-foyer {
  --foyer-ink: #253329;
  --foyer-paper: #f8f0d9;
  --foyer-blue: #a9cbc4;
  --foyer-red: #aa493c;
  --foyer-yellow: #edc85e;

  width: min(100%, 1240px);
  margin: 0 auto 30px;
  overflow: hidden;
  border: 2px solid var(--foyer-ink);
  border-radius: 24px;
  color: var(--foyer-ink);
  background:
    linear-gradient(90deg, transparent 31px, rgb(170 73 60 / 10%) 32px, transparent 33px),
    repeating-linear-gradient(var(--foyer-paper) 0 31px, #dfd4b9 32px);
  box-shadow: 10px 11px 0 var(--foyer-ink);
}

.website-foyer[hidden],
.website-more-rooms-map[hidden],
.first-visit-recap[hidden],
.first-visit-recap-picture[hidden],
.first-visit-recap-controls button[hidden] { display: none !important; }

.website-foyer-heading {
  display: grid;
  max-width: 920px;
  padding: clamp(30px, 5vw, 64px) clamp(22px, 6vw, 78px) 26px;
}

.website-foyer-kicker {
  display: flex;
  gap: 10px 16px;
  margin: 0 0 20px;
  align-items: center;
  flex-wrap: wrap;
  font: 900 0.64rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-foyer-kicker span {
  padding: 6px 9px;
  border: 1px solid currentColor;
  background: #fffaf0;
  transform: rotate(-1deg);
}

.website-foyer-kicker b { color: var(--foyer-red); }

.website-foyer-heading h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3.7rem, 8vw, 7.4rem);
  letter-spacing: -0.085em;
  line-height: 0.84;
  text-wrap: balance;
}

.website-foyer-heading h1:focus { outline: 4px solid var(--foyer-red); outline-offset: 7px; }
.website-foyer-heading > p:last-child { max-width: 620px; margin: 24px 0 0; color: #536057; font-size: clamp(0.95rem, 1.8vw, 1.16rem); line-height: 1.5; }

.website-foyer-doorway {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, 0.7fr);
  gap: clamp(20px, 4vw, 48px);
  padding: 24px clamp(22px, 6vw, 78px) clamp(30px, 5vw, 62px);
  align-items: stretch;
}

.website-current-story-action {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 70px;
  gap: clamp(14px, 3vw, 28px);
  min-width: 0;
  min-height: 230px;
  padding: clamp(22px, 4vw, 42px);
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--foyer-ink);
  border-radius: 7px 7px 2px 2px;
  color: #fffaf0;
  background:
    radial-gradient(circle at 78% 18%, rgb(237 200 94 / 24%) 0 8%, transparent 8.5%),
    #315d45;
  box-shadow: 8px 9px 0 var(--foyer-yellow);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.website-current-story-action::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 13px;
  border-bottom: 2px solid var(--foyer-ink);
  background: repeating-linear-gradient(90deg, #e7d1a5 0 38px, var(--foyer-ink) 39px 41px);
  content: "";
}

.website-current-story-action:hover { box-shadow: 12px 13px 0 var(--foyer-yellow); transform: translate(-3px, -3px); }
.website-current-story-action:focus-visible,
.website-more-rooms-action:focus-visible,
.website-map-door:focus-visible,
.website-foyer-tools a:focus-visible { outline: 4px solid var(--foyer-red); outline-offset: 4px; }

.website-current-story-number {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--foyer-yellow);
  font: 900 1.05rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.website-current-story-copy { display: grid; gap: 8px; min-width: 0; }
.website-current-story-copy small { color: #dce9da; font: 900 0.62rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.1em; }
.website-current-story-copy strong { font-size: clamp(2rem, 4.7vw, 4rem); letter-spacing: -0.06em; line-height: 0.92; text-wrap: balance; }
.website-current-story-copy > span { max-width: 460px; color: #e7eee5; font-size: 0.82rem; font-weight: 650; line-height: 1.45; }
.website-current-story-handle { position: relative; display: block; width: 58px; height: 90px; justify-self: end; border: 2px solid #dfc477; border-radius: 50% 0 0 50%; border-right: 0; }
.website-current-story-handle i { position: absolute; top: calc(50% - 6px); right: 8px; width: 12px; height: 12px; border: 2px solid var(--foyer-ink); border-radius: 50%; background: var(--foyer-yellow); }

.website-foyer-side { display: flex; min-width: 0; padding: 4px 0; flex-direction: column; justify-content: center; }
.website-foyer-side > p:first-child { margin: 0 0 20px; color: #536057; font-size: 0.8rem; line-height: 1.55; }
.website-foyer-side > p strong { color: var(--foyer-ink); }
.first-visit-recap-start {
  display: flex;
  width: 100%;
  min-height: 62px;
  margin: 0 0 14px;
  padding: 0 18px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--foyer-ink);
  border-radius: 8px;
  color: #fffaf0;
  background: var(--foyer-red);
  box-shadow: 5px 5px 0 var(--foyer-ink);
  font: 900 0.76rem/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.first-visit-recap-start:hover { box-shadow: 8px 8px 0 var(--foyer-ink); transform: translate(-2px, -2px); }
.first-visit-recap-start:focus-visible { outline: 4px solid var(--foyer-yellow); outline-offset: 4px; }
.first-visit-recap-start[hidden] { display: none !important; }
.website-more-rooms-action { display: flex; width: 100%; min-height: 54px; padding: 0 18px; align-items: center; justify-content: space-between; border: 2px solid var(--foyer-ink); border-radius: 999px; color: var(--foyer-ink); background: #fffaf0; box-shadow: 4px 4px 0 var(--foyer-ink); font: 900 0.78rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; cursor: pointer; }
.website-more-rooms-action:hover { background: var(--foyer-yellow); }
.website-more-rooms-action b { font-size: 1.25rem; }
.website-foyer-feedback { min-height: 1.5em; margin: 13px 4px 0; color: #6b6f69; font: 750 0.64rem/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.website-more-rooms-map {
  padding: clamp(24px, 4vw, 46px) clamp(22px, 6vw, 78px) clamp(30px, 5vw, 58px);
  border-top: 2px solid var(--foyer-ink);
  background: #a9cbc4;
  animation: website-map-unfold 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  scroll-margin-block: 20px;
}

.website-more-rooms-map > header { display: flex; gap: 20px; margin-bottom: 22px; align-items: end; justify-content: space-between; }
.website-more-rooms-map > header p { margin: 0 0 6px; font: 900 0.62rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.website-more-rooms-map h2 { max-width: 650px; margin: 0; font-size: clamp(1.55rem, 4vw, 2.6rem); letter-spacing: -0.05em; line-height: 1; }
.website-map-key { display: inline-flex; gap: 8px; flex: 0 0 auto; align-items: center; font: 850 0.62rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.website-map-key i { width: 14px; height: 14px; border: 2px solid var(--foyer-ink); background: var(--foyer-yellow); }

.website-floor-plan {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 3px double var(--foyer-ink);
  background:
    linear-gradient(90deg, transparent 49.7%, rgb(37 51 41 / 13%) 49.8% 50.2%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgb(37 51 41 / 13%) 49.8% 50.2%, transparent 50.3%),
    #f6e9c9;
  box-shadow: inset 0 0 0 9px #dfc895;
}

.website-floor-plan::before { position: absolute; inset: 18px; border: 1px dashed rgb(37 51 41 / 45%); content: ""; }
.website-floor-corridor { position: absolute; z-index: 0; background: #d5b986; box-shadow: inset 0 0 0 1px var(--foyer-ink); }
.website-floor-corridor.is-horizontal { top: 43%; right: 8%; left: 8%; height: 14%; }
.website-floor-corridor.is-vertical { top: 8%; bottom: 8%; left: 45%; width: 10%; }

.website-map-door {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 18%;
  min-width: 112px;
  height: 23%;
  min-height: 95px;
  padding: 10px;
  place-content: center;
  border: 2px solid var(--foyer-ink);
  color: #635e52;
  background: #d8cbb0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: center;
  text-decoration: none;
}

.website-map-door::after { position: absolute; right: 8px; bottom: 8px; width: 7px; height: 7px; border: 1px solid var(--foyer-ink); border-radius: 50%; background: #887d68; content: ""; }
.website-map-door > span { color: #807969; font-size: 1rem; font-weight: 900; }
.website-map-door strong { margin-top: 7px; font-size: clamp(0.58rem, 1vw, 0.72rem); line-height: 1.25; }
.website-map-door.is-confirmed { color: var(--foyer-ink); background: var(--foyer-yellow); box-shadow: 4px 4px 0 var(--foyer-ink); cursor: pointer; }
.website-map-door.is-confirmed::after { background: var(--foyer-red); }
.website-map-door.is-confirmed strong { animation: website-label-wake 300ms both; }
.website-map-door.is-room { top: 8%; left: 7%; }
.website-map-door.is-lost-found { top: 8%; left: 29%; }
.website-map-door.is-changed-room { top: 8%; right: 27%; }
.website-map-door.is-story-map { top: 8%; right: 6%; }
.website-map-door.is-courtyard { top: 39%; left: 7%; }
.website-map-door.is-folded-room { top: 39%; right: 6%; }
.website-map-door.is-dispatch { bottom: 7%; left: 17%; }
.website-map-door.is-delivery { bottom: 7%; left: 41%; }
.website-map-door.is-mystery { right: 16%; bottom: 7%; }
.website-map-door.is-lost-found strong { animation-delay: 70ms; }
.website-map-door.is-changed-room strong { animation-delay: 140ms; }
.website-map-door.is-story-map strong { animation-delay: 210ms; }
.website-map-door.is-courtyard strong { animation-delay: 280ms; }
.website-map-door.is-folded-room strong { animation-delay: 350ms; }
.website-map-door.is-dispatch strong { animation-delay: 420ms; }
.website-map-door.is-delivery strong { animation-delay: 490ms; }
.website-map-door.is-mystery strong { animation-delay: 560ms; }
.website-map-empty { position: absolute; top: calc(50% - 28px); left: calc(50% - 115px); z-index: 3; width: 230px; margin: 0; padding: 10px 12px; border: 1px solid var(--foyer-ink); color: var(--foyer-ink); background: #fffaf0; font: 900 0.6rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; transform: rotate(-2deg); }
.website-map-empty[hidden] { display: none; }
.website-map-summary { margin: 14px 0 0; color: #39483e; font: 800 0.66rem/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.website-foyer-tools { display: flex; gap: 9px 20px; padding: 17px clamp(22px, 6vw, 78px); align-items: center; border-top: 2px solid var(--foyer-ink); background: #fffaf0; flex-wrap: wrap; }
.website-foyer-tools a { color: #4d574f; font: 850 0.66rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.website-foyer-tools a:last-child { margin-left: auto; }

@keyframes website-map-unfold { from { opacity: 0; transform: scaleY(0.9); transform-origin: top; } to { opacity: 1; transform: scaleY(1); transform-origin: top; } }
@keyframes website-label-wake { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .website-foyer { border-radius: 17px; box-shadow: 6px 7px 0 var(--foyer-ink); }
  .website-foyer-heading { padding-bottom: 18px; }
  .website-foyer-heading h1 { font-size: clamp(3.35rem, 16vw, 5.6rem); }
  .website-foyer-doorway { grid-template-columns: minmax(0, 1fr); }
  .website-current-story-action { min-height: 210px; }
  .website-foyer-side { padding-top: 8px; }
  .website-more-rooms-map > header { align-items: start; flex-direction: column; }
  .website-floor-plan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    padding: 28px 22px;
  }
  .website-floor-corridor { display: none; }
  .website-map-door {
    position: relative;
    inset: auto !important;
    width: auto;
    min-width: 0;
    min-height: 112px;
  }
  .website-map-door.is-mystery { grid-column: 1 / -1; }
  .website-map-empty { position: relative; top: auto; left: auto; grid-column: 1 / -1; grid-row: 1; width: auto; transform: none; }
  .website-foyer-tools { align-items: start; flex-direction: column; }
  .website-foyer-tools a:last-child { margin-left: 0; }
}

@media (max-width: 470px) {
  .website-current-story-action {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 235px;
    padding: 28px 20px 22px;
  }
  .website-current-story-number { width: 52px; height: 52px; }
  .website-current-story-handle { position: absolute; right: 15px; bottom: 19px; width: 48px; height: 58px; }
  .website-floor-plan { grid-template-columns: minmax(0, 1fr); }
  .website-map-door.is-mystery { grid-column: auto; }
  .website-map-empty { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .website-more-rooms-map,
  .website-map-door.is-confirmed strong { animation: none; }
  .website-current-story-action { transition: none; }
  .first-visit-recap-start { transition: none; }
}

.first-visit-recap {
  --recap-ink: #26342b;
  --recap-paper: #f8efd7;
  --recap-red: #a8473b;
  --recap-blue: #a9cbc4;
  --recap-yellow: #efc85f;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1240px);
  min-height: min(760px, calc(100vh - 130px));
  margin: 0 auto 30px;
  overflow: hidden;
  border: 2px solid var(--recap-ink);
  border-radius: 24px;
  color: var(--recap-ink);
  background: var(--recap-paper);
  box-shadow: 10px 11px 0 var(--recap-ink);
}

.first-visit-recap-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.45fr);
  gap: 8px 28px;
  padding: clamp(24px, 4vw, 46px) clamp(20px, 5vw, 64px) 22px;
  align-items: end;
  border-bottom: 2px solid var(--recap-ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgb(38 52 43 / 7%) 35px 36px),
    #fffaf0;
}

.first-visit-recap-heading > p:first-child,
.first-visit-recap-copy > p,
.first-visit-recap-copy small,
.first-visit-recap-controls {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.first-visit-recap-heading > p:first-child { grid-column: 1 / -1; margin: 0; color: var(--recap-red); font-size: 0.64rem; }
.first-visit-recap-heading h1 { margin: 0; font-size: clamp(2.8rem, 6.5vw, 6rem); letter-spacing: -0.075em; line-height: 0.86; }
.first-visit-recap-heading > p:last-child { max-width: 390px; margin: 0; color: #566158; font-size: 0.85rem; line-height: 1.5; }

.first-visit-recap-pictures { min-height: 0; }
.first-visit-recap-picture {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  min-height: 450px;
  animation: first-visit-recap-arrive 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.first-visit-recap-art {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-right: 2px solid var(--recap-ink);
  background: var(--recap-blue);
}

.first-visit-recap-copy { display: flex; padding: clamp(28px, 5vw, 60px); flex-direction: column; justify-content: center; background: #fffaf0; }
.first-visit-recap-copy > p:first-child { margin: 0 0 18px; color: var(--recap-red); font-size: 0.62rem; }
.first-visit-recap-copy h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 4.5rem); letter-spacing: -0.07em; line-height: 0.92; text-wrap: balance; }
.first-visit-recap-copy h2:focus { outline: 4px solid var(--recap-yellow); outline-offset: 6px; }
.first-visit-recap-copy > p:nth-of-type(2) { margin: 24px 0 0; color: #4b574f; font-size: 0.92rem; line-height: 1.55; }
.first-visit-recap-copy small { width: fit-content; margin-top: 24px; padding: 7px 9px; border: 1px solid var(--recap-ink); background: var(--recap-yellow); font-size: 0.56rem; line-height: 1.35; transform: rotate(-1deg); }

.first-visit-keepsake-picker {
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.first-visit-keepsake-picker legend {
  margin-bottom: 9px;
  padding: 0;
  font: 900 0.64rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.first-visit-keepsake-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.first-visit-keepsake-picker button {
  display: grid;
  min-width: 0;
  min-height: 68px;
  padding: 8px 6px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 2px solid var(--recap-ink);
  border-radius: 7px;
  color: var(--recap-ink);
  background: #fffaf0;
  box-shadow: 3px 3px 0 var(--recap-ink);
  font: 850 0.58rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  cursor: pointer;
}

.first-visit-keepsake-picker button:hover { transform: translateY(-2px); }
.first-visit-keepsake-picker button:focus-visible { outline: 4px solid var(--recap-red); outline-offset: 3px; }
.first-visit-keepsake-picker button[aria-pressed="true"] { color: #fffaf0; background: var(--recap-ink); box-shadow: 3px 3px 0 var(--recap-yellow); }
.first-visit-keepsake-picker button:disabled { cursor: not-allowed; opacity: 0.56; }
.first-visit-keepsake-picker button i { display: block; width: 22px; height: 22px; }
.first-visit-keepsake-picker button[data-keepsake-choice="choice-1"] i { background: #c64c3e; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.first-visit-keepsake-picker button[data-keepsake-choice="choice-2"] i { border: 5px solid #447da5; border-radius: 50%; }
.first-visit-keepsake-picker button[data-keepsake-choice="choice-3"] i { border: 2px solid #9a7121; border-radius: 50%; background: #efc34e; box-shadow: inset 0 0 0 3px #fff1a8; }
.first-visit-keepsake-picker > p { min-height: 2.5em; margin: 9px 0 0; color: #566158; font-size: 0.62rem; line-height: 1.35; }

.first-visit-keepsake-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid var(--recap-ink, #26342b);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 3px 3px 0 var(--recap-ink, #26342b);
}

.first-visit-keepsake-mark[hidden] { display: none !important; }
.first-visit-keepsake-mark i { display: block; width: 23px; height: 23px; }
.first-visit-keepsake-mark[data-keepsake-choice="choice-1"] i { background: #c64c3e; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.first-visit-keepsake-mark[data-keepsake-choice="choice-2"] i { border: 5px solid #447da5; border-radius: 50%; }
.first-visit-keepsake-mark[data-keepsake-choice="choice-3"] i { border: 2px solid #9a7121; border-radius: 50%; background: #efc34e; box-shadow: inset 0 0 0 3px #fff1a8; }

.recap-travelling-keepsake { position: absolute; z-index: 6; animation: first-visit-keepsake-hop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.is-case .recap-travelling-keepsake { right: 10%; bottom: 111px; transform: rotate(8deg); }
.is-return .recap-travelling-keepsake { bottom: 116px; left: 16%; transform: rotate(-7deg); }
.is-pack .recap-travelling-keepsake { top: 48%; right: 16%; transform: rotate(5deg); }

.first-visit-keepsake-at-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 13px;
  margin: 0 0 20px;
  padding: 14px 16px;
  align-items: center;
  border: 2px dashed #315f45;
  border-radius: 12px;
  background: #fff6cf;
  box-shadow: 4px 4px 0 #315f45;
  transform: rotate(-0.45deg);
}

.first-visit-keepsake-at-choice[hidden] { display: none !important; }
.first-visit-keepsake-at-choice .first-visit-keepsake-mark { grid-row: 1 / 3; width: 54px; height: 54px; }
.first-visit-keepsake-at-choice span:nth-child(2) { display: grid; gap: 2px; }
.first-visit-keepsake-at-choice small { color: #65776a; font: 900 0.54rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.first-visit-keepsake-at-choice strong { font-size: 0.92rem; }
.first-visit-keepsake-at-choice > b { grid-column: 1 / -1; color: #526157; font-size: 0.65rem; line-height: 1.35; }

.recap-plant { position: absolute; bottom: 73px; left: 8%; width: 96px; height: 125px; border: 3px solid var(--recap-ink); border-radius: 5px 5px 27px 27px; background: #d77452; }
.recap-plant i { position: absolute; bottom: 100px; left: 41px; width: 72px; height: 38px; border: 3px solid var(--recap-ink); border-radius: 100% 0; background: #5f8857; transform: rotate(-25deg); transform-origin: left bottom; }
.recap-plant i:nth-child(2) { left: -18px; border-radius: 0 100%; transform: rotate(28deg); transform-origin: right bottom; }
.recap-plant i:nth-child(3) { bottom: 132px; left: 20px; transform: rotate(-68deg); }
.recap-plant b { position: absolute; top: 38px; left: 24px; width: 45px; border-top: 3px solid var(--recap-ink); }
.recap-request { position: absolute; bottom: 215px; left: 9%; padding: 12px 14px; border: 2px solid var(--recap-ink); background: #fffaf0; box-shadow: 5px 5px 0 var(--recap-ink); font: 900 0.65rem/1.2 ui-monospace, monospace; transform: rotate(-4deg); }
.recap-choice { position: absolute; top: 20%; left: 39%; display: grid; grid-template-columns: repeat(2, 66px); gap: 13px; }
.recap-choice i { height: 92px; border: 3px solid var(--recap-ink); border-radius: 5px; background: #fffaf0; box-shadow: 4px 4px 0 var(--recap-ink); }
.recap-choice i:nth-child(2) { background: var(--recap-yellow); transform: translateY(16px) rotate(3deg); }
.recap-choice b { grid-column: 1 / -1; justify-self: center; padding: 6px 8px; background: var(--recap-ink); color: #fff; font: 900 0.56rem/1 ui-monospace, monospace; }
.recap-route { position: absolute; top: 47%; left: 66%; font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; }
.recap-case, .recap-return-case { position: absolute; right: 7%; bottom: 68px; width: 150px; height: 105px; border: 3px solid var(--recap-ink); border-radius: 7px; background: var(--recap-yellow); box-shadow: 7px 7px 0 var(--recap-ink); transform: rotate(-2deg); }
.recap-case i, .recap-return-case i, .recap-suitcase i { position: absolute; bottom: 100%; left: 47px; width: 52px; height: 25px; border: 3px solid var(--recap-ink); border-bottom: 0; border-radius: 12px 12px 0 0; }
.recap-case b, .recap-return-case b, .recap-suitcase b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 0.68rem/1.2 ui-monospace, monospace; }

.is-return .first-visit-recap-art { background: #d8c79e; }
.recap-return-case { right: auto; bottom: 94px; left: 8%; width: 130px; height: 92px; background: #fffaf0; transform: rotate(3deg); }
.recap-return-case i { left: 38px; }
.recap-road { position: absolute; top: 41%; right: 28%; left: 27%; height: 35%; border: solid var(--recap-ink); border-width: 3px 0 0; transform: rotate(-10deg); }
.recap-road::after { position: absolute; top: -7px; right: -6px; border: solid transparent; border-width: 7px 0 7px 15px; border-left-color: var(--recap-ink); content: ""; }
.recap-road i { position: absolute; top: -8px; left: 18%; width: 30px; border-top: 3px dashed #fffaf0; }
.recap-road i:nth-child(2) { left: 48%; }
.recap-road i:nth-child(3) { left: 75%; }
.recap-place { position: absolute; right: 8%; bottom: 64px; width: 205px; height: 250px; border: 3px solid var(--recap-ink); border-radius: 48% 48% 9px 9px; background: #69926c; box-shadow: 8px 8px 0 var(--recap-ink); }
.recap-place i { position: absolute; right: 36px; bottom: 0; width: 62px; height: 96px; border: 3px solid var(--recap-ink); border-bottom: 0; background: #fffaf0; }
.recap-place b { position: absolute; right: 20px; left: 20px; bottom: 112px; padding: 8px; border: 2px solid var(--recap-ink); background: var(--recap-yellow); font: 900 0.62rem/1 ui-monospace, monospace; text-align: center; }
.recap-place em { position: absolute; top: 28px; left: 71px; display: grid; width: 58px; height: 58px; place-items: center; border: 3px solid var(--recap-ink); border-radius: 50%; background: #fffaf0; font-size: 1.6rem; font-style: normal; }
.recap-return-stamp { position: absolute; top: 12%; left: 9%; padding: 8px 10px; border: 3px double var(--recap-red); color: var(--recap-red); font: 900 0.7rem/1 ui-monospace, monospace; transform: rotate(-7deg); }

.is-pack .first-visit-recap-art { background: #b7c7dc; }
.recap-tag { position: absolute; left: 8%; width: 150px; height: 80px; border: 3px solid var(--recap-ink); border-radius: 7px 18px 18px 7px; background: #fffaf0; box-shadow: 5px 5px 0 var(--recap-ink); }
.recap-tag.is-a { top: 21%; transform: rotate(-3deg); }
.recap-tag.is-b { bottom: 19%; background: var(--recap-yellow); transform: rotate(2deg); }
.recap-tag i { position: absolute; top: 27px; left: 14px; width: 13px; height: 13px; border: 2px solid var(--recap-ink); border-radius: 50%; }
.recap-tag b { position: absolute; top: 31px; left: 43px; font: 900 0.67rem/1 ui-monospace, monospace; }
.recap-pack-line { position: absolute; left: 34%; width: 34%; height: 25%; border: solid var(--recap-ink); border-width: 3px 3px 0 0; }
.recap-pack-line.is-a { top: 29%; transform: skewY(18deg); }
.recap-pack-line.is-b { bottom: 27%; transform: scaleY(-1) skewY(18deg); }
.recap-suitcase { position: absolute; right: 9%; top: calc(50% - 80px); width: 190px; height: 150px; border: 4px solid var(--recap-ink); border-radius: 10px; background: var(--recap-red); box-shadow: 9px 9px 0 var(--recap-ink); color: #fffaf0; }
.recap-suitcase i { left: 61px; width: 62px; border-width: 4px; }
.recap-suitcase b { padding: 30px; font-size: 0.72rem; text-align: center; }
.recap-customs { position: absolute; right: 3%; bottom: 10%; padding: 8px; border: 3px double var(--recap-ink); background: #fffaf0; font: 900 0.55rem/1.15 ui-monospace, monospace; text-align: center; transform: rotate(-5deg); }

.first-visit-recap-controls { display: flex; gap: 18px; padding: 18px clamp(20px, 5vw, 64px); align-items: center; justify-content: space-between; border-top: 2px solid var(--recap-ink); background: var(--recap-yellow); }
.first-visit-recap-controls p { margin: 0; font-size: 0.64rem; }
.first-visit-recap-controls > div { display: flex; gap: 10px; align-items: center; }
.first-visit-recap-controls button { min-height: 48px; padding: 0 18px; border: 2px solid var(--recap-ink); border-radius: 999px; font: 900 0.7rem/1 ui-monospace, monospace; cursor: pointer; }
.first-visit-recap-skip { color: var(--recap-ink); background: transparent; }
.first-visit-recap-next,
.first-visit-recap-enter { color: #fffaf0; background: var(--recap-ink); box-shadow: 4px 4px 0 var(--recap-red); }
.first-visit-recap-controls button:hover { transform: translateY(-2px); }
.first-visit-recap-controls button:focus-visible { outline: 4px solid var(--recap-red); outline-offset: 3px; }

@keyframes first-visit-recap-arrive {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes first-visit-keepsake-hop {
  from { opacity: 0; translate: -18px -12px; scale: 0.7; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@media (max-width: 840px) {
  .first-visit-recap { min-height: 0; }
  .first-visit-recap-heading { grid-template-columns: minmax(0, 1fr); }
  .first-visit-recap-heading > p:last-child { margin-top: 10px; }
  .first-visit-recap-picture { grid-template-columns: minmax(0, 1fr); }
  .first-visit-recap-art { min-height: 380px; border-right: 0; border-bottom: 2px solid var(--recap-ink); }
  .first-visit-recap-copy { min-height: 310px; }
  .first-visit-keepsake-picker > div { grid-template-columns: repeat(3, minmax(92px, 1fr)); }
}

@media (max-width: 560px) {
  .first-visit-recap { border-radius: 16px; box-shadow: 6px 7px 0 var(--recap-ink); }
  .first-visit-recap-heading { padding: 24px 18px 20px; }
  .first-visit-recap-heading h1 { font-size: clamp(2.8rem, 15vw, 4.3rem); }
  .first-visit-recap-art { min-height: 310px; }
  .first-visit-recap-copy { min-height: 0; padding: 30px 20px 34px; }
  .first-visit-recap-copy h2 { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .first-visit-recap-controls { align-items: stretch; flex-direction: column; }
  .first-visit-recap-controls > div { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .first-visit-recap-controls button { width: 100%; padding: 0 12px; }
  .recap-plant { bottom: 46px; transform: scale(0.74); transform-origin: bottom left; }
  .recap-request { bottom: 165px; left: 5%; }
  .recap-choice { top: 18%; left: 38%; grid-template-columns: repeat(2, 48px); }
  .recap-choice i { height: 72px; }
  .recap-route { left: 64%; }
  .recap-case { right: 5%; bottom: 42px; width: 112px; height: 78px; }
  .recap-case i { left: 32px; width: 42px; }
  .is-case .recap-travelling-keepsake { right: 8%; bottom: 71px; transform: scale(0.78) rotate(8deg); }
  .recap-return-case { bottom: 58px; left: 5%; transform: scale(0.78) rotate(3deg); transform-origin: bottom left; }
  .recap-place { right: 5%; bottom: 34px; width: 150px; height: 205px; }
  .recap-place em { top: 24px; left: 48px; width: 48px; height: 48px; }
  .recap-place b { right: 12px; left: 12px; bottom: 93px; }
  .recap-place i { right: 23px; height: 76px; }
  .is-return .recap-travelling-keepsake { bottom: 71px; left: 16%; transform: scale(0.78) rotate(-7deg); }
  .recap-tag { left: 5%; width: 116px; }
  .recap-pack-line { left: 36%; width: 26%; }
  .recap-suitcase { right: 5%; top: calc(50% - 58px); width: 130px; height: 112px; }
  .recap-suitcase i { left: 40px; width: 43px; }
  .recap-customs { right: 2%; bottom: 5%; }
  .is-pack .recap-travelling-keepsake { top: 49%; right: 15%; transform: scale(0.78) rotate(5deg); }
  .first-visit-keepsake-picker > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .first-visit-keepsake-picker button { min-height: 72px; padding: 7px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .first-visit-recap-picture { animation: none; }
  .recap-travelling-keepsake { animation: none; }
  .first-visit-recap-controls button { transition: none; }
}

.first-visit-shell {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
}

.first-visit-shell[data-visit-stage="checking"] > :not(.first-visit-intro) {
  display: none !important;
}

.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) > :not(.first-visit-intro):not(#saved-office-view):not(#lost-found-view):not(#office-passport-view) {
  display: none !important;
}

.first-visit-shell:is([data-visit-stage="room-earned"], [data-visit-stage="shared-earned"], [data-visit-stage="established"]):not([data-postcard-state="sealed"]) > :not(#story-trail):not(#shared-story-chapter):not(#lost-found-view):not(#office-passport-view):not(#saved-office-view):not(#front-desk-board):not(#daily-desk-call):not(#courtyard-history):not(#courtyard-tree):not(#folded-room):not(#room-mystery) {
  display: none !important;
}

.first-visit-shell:is([data-visit-stage="room-earned"], [data-visit-stage="shared-earned"], [data-visit-stage="established"]) :is(#story-trail, #shared-story-chapter, #lost-found-view, #office-passport-view, #saved-office-view, #front-desk-board, #daily-desk-call, #courtyard-history, #courtyard-tree, #folded-room, #room-mystery)[hidden] {
  display: none !important;
}

.first-visit-shell:is([data-visit-stage="room-earned"], [data-visit-stage="shared-earned"], [data-visit-stage="established"]):not([data-postcard-state="sealed"]) > .first-visit-intro,
.first-visit-shell[data-visit-stage="established"] > :is(.first-return, .first-visit-saved-result, .first-return-roadmap) {
  display: none !important;
}

.first-visit-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  width: min(100%, 1240px);
  min-height: min(680px, calc(100vh - 130px));
  margin: 0 auto 26px;
  overflow: hidden;
  border: 2px solid var(--visit-ink);
  border-radius: 26px;
  color: var(--visit-ink);
  background: var(--visit-cream);
  box-shadow: 10px 11px 0 var(--visit-ink);
}

.first-visit-copy {
  display: flex;
  min-width: 0;
  padding: clamp(34px, 6vw, 78px);
  flex-direction: column;
  justify-content: center;
}

.first-visit-kicker {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
  align-items: center;
  color: var(--visit-green);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.first-visit-kicker span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.first-visit-copy h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(3.8rem, 7.2vw, 7.4rem);
  letter-spacing: -0.085em;
  line-height: 0.82;
  text-wrap: balance;
}

.first-visit-lead {
  max-width: 550px;
  margin: 30px 0 0;
  color: #455047;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.first-visit-promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  max-width: 550px;
  margin-top: 28px;
  padding: 15px 17px;
  align-items: center;
  border: 1px solid var(--visit-ink);
  border-left: 8px solid var(--visit-yellow);
  border-radius: 8px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--visit-ink);
  transform: rotate(-0.35deg);
}

.first-visit-promise-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px dashed var(--visit-green);
  border-radius: 50%;
  color: #fff;
  background: var(--visit-green);
  font-size: 1.05rem;
}

.first-visit-promise p {
  margin: 0;
  color: #39443c;
  font-size: 0.78rem;
  line-height: 1.45;
}

.first-visit-promise strong { color: var(--visit-ink); }

.first-visit-open-story,
.first-visit-result-action {
  display: inline-flex;
  width: fit-content;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--visit-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--visit-ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.first-visit-open-story { gap: 12px; }
.first-visit-open-story:hover,
.first-visit-result-action:hover { box-shadow: 4px 4px 0 var(--visit-yellow); transform: translate(-1px, -1px); }
.first-visit-open-story:focus-visible,
.first-visit-result-action:focus-visible,
.first-visit-contact a:focus-visible { outline: 3px solid var(--visit-red); outline-offset: 4px; }

.first-visit-contact {
  margin: 19px 0 0;
  color: #646a64;
  font-size: 0.68rem;
  line-height: 1.45;
}

.first-visit-contact a { color: inherit; font-weight: 800; }

.first-visit-storage-note,
.first-visit-noscript {
  max-width: 550px;
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--visit-red);
  border-radius: 7px;
  color: #6b241d;
  background: #fff1e9;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.5;
}

.first-visit-storage-note[hidden] { display: none; }
.first-visit-existing-story[hidden] { display: none; }
.first-visit-passport-tool[hidden] { display: none; }
.first-visit-intro[data-storage-state="protected"] .first-visit-open-story { display: none; }
.first-visit-shell[data-visit-stage="protected"] .first-visit-open-story { display: none; }
.first-visit-shell[data-visit-stage="checking"] .first-visit-open-story { visibility: hidden; }

.first-visit-existing-story {
  max-width: 550px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--visit-red);
  color: #5a3732;
  background: #fff1e9;
  font-size: 0.72rem;
  line-height: 1.5;
}

.first-visit-existing-story a {
  margin-left: 5px;
  color: var(--visit-ink);
  font-weight: 850;
}

.first-visit-existing-story a:focus-visible { outline: 3px solid var(--visit-red); outline-offset: 3px; }

.first-visit-passport-tool {
  width: fit-content;
  margin-top: 13px;
  color: var(--visit-green);
  font-size: 0.7rem;
  font-weight: 850;
}

.first-visit-passport-tool:focus-visible { outline: 3px solid var(--visit-red); outline-offset: 3px; }

.first-visit-scene {
  position: relative;
  min-width: 0;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  border-left: 2px solid var(--visit-ink);
  background: linear-gradient(#b9d6d0 0 54%, #d8c8a4 54% 100%);
}

.first-visit-scene figcaption {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  z-index: 7;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--visit-ink);
  color: var(--visit-ink);
  background: rgb(255 249 233 / 92%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.first-visit-sky,
.first-visit-building,
.first-visit-courtyard { position: absolute; inset: 0; }

.first-visit-sun {
  position: absolute;
  top: 62px;
  right: 68px;
  width: 76px;
  height: 76px;
  border: 2px solid var(--visit-ink);
  border-radius: 50%;
  background: var(--visit-yellow);
  box-shadow: 0 0 0 13px rgb(242 200 88 / 24%);
}

.first-visit-cloud {
  position: absolute;
  width: 120px;
  height: 29px;
  border: 2px solid var(--visit-ink);
  border-radius: 999px;
  background: #f7f1df;
}

.first-visit-cloud::before,
.first-visit-cloud::after {
  position: absolute;
  bottom: -2px;
  border: 2px solid var(--visit-ink);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: #f7f1df;
  content: "";
}

.first-visit-cloud::before { left: 24px; width: 42px; height: 42px; }
.first-visit-cloud::after { right: 18px; width: 54px; height: 58px; }
.first-visit-cloud.is-one { top: 112px; left: 48px; transform: scale(0.78); }
.first-visit-cloud.is-two { top: 186px; right: 174px; transform: scale(0.52); }

.first-visit-building {
  top: auto;
  right: 8%;
  bottom: 24%;
  left: 8%;
  height: 52%;
  border: 2px solid var(--visit-ink);
  background:
    repeating-linear-gradient(0deg, rgb(31 43 34 / 5%) 0 1px, transparent 1px 23px),
    #e6d1a5;
  box-shadow: 9px 9px 0 rgb(31 43 34 / 18%);
}

.first-visit-building::before {
  position: absolute;
  top: -38px;
  right: -14px;
  left: -14px;
  height: 38px;
  border: 2px solid var(--visit-ink);
  background: #875b4b;
  content: "";
  transform: skewX(-14deg);
  transform-origin: bottom;
}

.first-visit-window {
  position: absolute;
  top: 21%;
  width: 19%;
  height: 31%;
  border: 2px solid var(--visit-ink);
  background: linear-gradient(90deg, transparent 47%, var(--visit-ink) 48% 52%, transparent 53%), linear-gradient(#8eb8ba 48%, var(--visit-ink) 49% 53%, #8eb8ba 54%);
  box-shadow: inset 0 0 0 7px #f1dfb8;
}

.first-visit-window.is-one { left: 9%; }
.first-visit-window.is-two { right: 9%; }

.first-visit-door {
  position: absolute;
  bottom: 0;
  left: 38%;
  width: 24%;
  height: 64%;
  border: 2px solid var(--visit-ink);
  background: var(--visit-green);
}

.first-visit-door i {
  position: absolute;
  top: 53%;
  right: 12px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--visit-ink);
  border-radius: 50%;
  background: var(--visit-yellow);
}

.first-visit-door b {
  position: absolute;
  top: 18%;
  right: -14px;
  left: -14px;
  padding: 8px 4px;
  border: 2px solid var(--visit-ink);
  color: var(--visit-ink);
  background: var(--visit-cream);
  font: 900 0.55rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-align: center;
}

.first-visit-plant {
  position: absolute;
  bottom: 11%;
  left: 14%;
  width: 54px;
  height: 94px;
}

.first-visit-plant i {
  position: absolute;
  bottom: 37px;
  left: 21px;
  width: 30px;
  height: 42px;
  border: 2px solid var(--visit-ink);
  border-radius: 80% 20% 70% 30%;
  background: var(--visit-leaf);
  transform-origin: bottom left;
}

.first-visit-plant i:nth-child(2) { left: 5px; transform: rotate(-42deg); }
.first-visit-plant i:nth-child(3) { bottom: 55px; left: 17px; transform: rotate(12deg) scale(0.82); }
.first-visit-plant b { position: absolute; right: 4px; bottom: 0; left: 4px; height: 40px; border: 2px solid var(--visit-ink); background: #b75d3d; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }

.first-visit-file {
  position: absolute;
  right: 11%;
  bottom: 10%;
  padding: 8px 10px;
  border: 2px solid var(--visit-ink);
  color: var(--visit-red);
  background: #fff;
  font: 900 0.53rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: center;
  transform: rotate(3deg);
}

.first-visit-courtyard { top: 72%; background: #8fa775; }
.first-visit-courtyard::before { position: absolute; inset: 0; border-top: 2px solid var(--visit-ink); content: ""; }
.first-visit-path { position: absolute; top: 0; left: 42%; width: 21%; height: 100%; background: #cfbd94; clip-path: polygon(26% 0, 72% 0, 100% 100%, 0 100%); }
.first-visit-gate { position: absolute; right: 6%; bottom: 47%; padding: 6px 8px; border: 2px solid var(--visit-ink); color: var(--visit-ink); background: var(--visit-yellow); font: 900 0.48rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.05em; transform: rotate(2deg); }

.first-visit-tree {
  position: absolute;
  bottom: 18%;
  left: 7%;
  width: 100px;
  height: 126px;
  filter: saturate(0.35);
  opacity: 0.68;
}

.first-visit-tree i { position: absolute; top: 0; width: 70px; height: 70px; border: 2px solid var(--visit-ink); border-radius: 50%; background: #5e7e55; }
.first-visit-tree i:nth-child(2) { top: 28px; left: 34px; width: 64px; height: 64px; }
.first-visit-tree b { position: absolute; bottom: 0; left: 44px; width: 19px; height: 70px; border: 2px solid var(--visit-ink); background: #76513d; }

.first-return {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr);
  width: min(100%, 1240px);
  min-height: min(660px, calc(100vh - 130px));
  margin: 0 auto 28px;
  overflow: hidden;
  border: 2px solid var(--visit-ink);
  border-radius: 26px;
  color: var(--visit-ink);
  background: #f7e7ca;
  box-shadow: 10px 11px 0 var(--visit-red);
  animation: first-return-arrive 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  order: 0;
}

.first-return[hidden],
.first-return-roadmap[hidden] { display: none; }

.first-return-copy {
  position: relative;
  z-index: 2;
  display: flex;
  padding: clamp(34px, 5.6vw, 72px);
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(90deg, transparent 31px, rgb(184 75 61 / 12%) 32px, transparent 33px),
    repeating-linear-gradient(#fff9e9 0 31px, #eadfc8 32px);
}

.first-return-kicker {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  align-items: center;
  color: var(--visit-red);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.first-return-kicker span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.first-return-status {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 6px 9px;
  border: 1px solid var(--visit-ink);
  border-radius: 999px;
  color: var(--visit-ink);
  background: var(--visit-yellow);
  font: 900 0.59rem/1.35 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.first-return-copy h1 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(3.8rem, 7.2vw, 7rem);
  letter-spacing: -0.085em;
  line-height: 0.82;
  text-wrap: balance;
}

.first-return-copy h1:focus {
  outline: 4px solid var(--visit-red);
  outline-offset: 7px;
}

.first-return-lead {
  max-width: 560px;
  margin: 28px 0 0;
  color: #4f4a40;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.first-return-action {
  display: flex;
  gap: 18px;
  width: min(100%, 440px);
  min-height: 58px;
  margin-top: 27px;
  padding: 0 22px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--visit-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--visit-red);
  box-shadow: 5px 5px 0 var(--visit-ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.first-return-action b { font-size: 1.35rem; line-height: 1; }
.first-return-action:hover { background: #9f392f; box-shadow: 8px 8px 0 var(--visit-ink); transform: translate(-2px, -2px); }
.first-return-action:focus-visible { outline: 4px solid var(--visit-yellow); outline-offset: 5px; }

.first-return-small {
  max-width: 470px;
  margin: 18px 0 0;
  color: #655f54;
  font: 750 0.67rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.first-return-scene {
  position: relative;
  min-width: 0;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  border-left: 2px solid var(--visit-ink);
  background:
    radial-gradient(circle at 74% 15%, rgb(255 249 233 / 70%) 0 11%, transparent 11.5%),
    linear-gradient(#aecdc8 0 58%, #9b7353 58% 63%, #d3b887 63% 100%);
}

.first-return-scene::after {
  position: absolute;
  right: -8%;
  bottom: 7%;
  left: -8%;
  height: 19%;
  border-top: 2px solid var(--visit-ink);
  background: repeating-linear-gradient(90deg, #c9a976 0 58px, #92734f 59px 61px);
  content: "";
  transform: perspective(180px) rotateX(36deg);
}

.first-return-window {
  position: absolute;
  top: 9%;
  right: 9%;
  width: 38%;
  height: 34%;
  border: 8px solid #e7d0a5;
  outline: 2px solid var(--visit-ink);
  background: #89b7bb;
  box-shadow: 9px 10px 0 rgb(31 43 34 / 17%);
}

.first-return-window::before,
.first-return-window::after {
  position: absolute;
  z-index: 2;
  background: var(--visit-ink);
  content: "";
}

.first-return-window::before { top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; }
.first-return-window::after { top: calc(50% - 1px); right: 0; left: 0; height: 2px; }
.first-return-window i { position: absolute; bottom: 10%; width: 28px; height: 44%; border: 2px solid var(--visit-ink); background: var(--visit-leaf); }
.first-return-window i:first-child { left: 15%; border-radius: 80% 20% 65% 35%; transform: rotate(-12deg); }
.first-return-window i:nth-child(2) { right: 14%; border-radius: 20% 80% 35% 65%; transform: rotate(10deg); }

.first-return-desk {
  position: absolute;
  right: 7%;
  bottom: 16%;
  left: 8%;
  z-index: 3;
  height: 27%;
  border: 2px solid var(--visit-ink);
  background: #e5c071;
  box-shadow: 9px 9px 0 var(--visit-ink);
}

.first-return-desk::before {
  position: absolute;
  top: 45%;
  right: 6%;
  bottom: 8%;
  left: 6%;
  border-top: 2px solid var(--visit-ink);
  border-bottom: 2px solid var(--visit-ink);
  content: "";
}

.first-return-bell {
  position: absolute;
  top: -37px;
  left: 15%;
  width: 48px;
  height: 35px;
  border: 2px solid var(--visit-ink);
  border-radius: 50% 50% 6px 6px;
  background: var(--visit-yellow);
}

.first-return-bell::before { position: absolute; top: -11px; left: 17px; width: 10px; height: 10px; border: 2px solid var(--visit-ink); border-radius: 50%; background: var(--visit-red); content: ""; }
.first-return-bell::after { position: absolute; right: -8px; bottom: -5px; left: -8px; height: 7px; border: 2px solid var(--visit-ink); background: #dcae4b; content: ""; }

.first-return-ticket,
.first-return-folder,
.first-return-queue-sign {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.first-return-ticket {
  position: absolute;
  top: -56px;
  right: 12%;
  padding: 8px 13px;
  border: 2px dashed var(--visit-ink);
  color: var(--visit-ink);
  background: #fff9e9;
  font-size: 0.55rem;
  transform: rotate(3deg);
}

.first-return-ticket strong { display: block; margin-top: 2px; color: var(--visit-red); font-size: 1.2rem; line-height: 1; }
.first-return-folder { position: absolute; right: 8%; bottom: 15%; padding: 8px 20px; border: 2px solid var(--visit-ink); background: #fff1d3; font-size: 0.56rem; transform: rotate(-2deg); }

.first-return-umbrella {
  --return-umbrella-scale: 1;

  position: absolute;
  bottom: 20%;
  left: 23%;
  z-index: 5;
  width: 205px;
  height: 350px;
  transform: scale(var(--return-umbrella-scale)) rotate(-4deg);
  transform-origin: bottom;
  animation: first-return-umbrella 650ms 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.first-return-canopy {
  position: absolute;
  top: 0;
  left: 0;
  width: 205px;
  height: 112px;
  overflow: hidden;
  border: 3px solid var(--visit-ink);
  border-radius: 110px 110px 9px 9px;
  background: var(--visit-red);
  clip-path: polygon(50% 0, 100% 87%, 82% 76%, 64% 88%, 50% 75%, 36% 88%, 18% 76%, 0 87%);
}

.first-return-canopy::before,
.first-return-canopy::after { position: absolute; top: 8px; bottom: 20px; width: 32%; border: 2px solid rgb(31 43 34 / 65%); border-radius: 50%; content: ""; }
.first-return-canopy::before { left: 18%; }
.first-return-canopy::after { right: 18%; }
.first-return-handle { position: absolute; top: 94px; left: 100px; width: 8px; height: 225px; border: 2px solid var(--visit-ink); background: #e0b26d; }
.first-return-handle::after { position: absolute; right: -2px; bottom: -27px; width: 31px; height: 31px; border: 7px solid var(--visit-ink); border-top: 0; border-left-color: transparent; border-radius: 0 0 28px 28px; content: ""; }

.first-return-queue-sign {
  position: absolute;
  top: 17%;
  left: 7%;
  z-index: 2;
  padding: 10px 13px;
  border: 2px solid var(--visit-ink);
  color: var(--visit-ink);
  background: var(--visit-yellow);
  box-shadow: 4px 4px 0 var(--visit-ink);
  font-size: 0.58rem;
  line-height: 1.35;
  transform: rotate(-2deg);
}

.first-return-scene figcaption {
  position: absolute;
  right: 22px;
  bottom: 17px;
  left: 22px;
  z-index: 7;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--visit-ink);
  color: var(--visit-ink);
  background: rgb(255 249 233 / 94%);
  font: 850 0.61rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: center;
  text-transform: uppercase;
}

.first-visit-saved-result {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 50px);
  width: min(100%, 1240px);
  margin: 0 auto 38px;
  padding: clamp(22px, 4vw, 38px);
  align-items: center;
  border: 2px solid var(--visit-ink);
  border-radius: 16px;
  color: var(--visit-ink);
  background: var(--visit-cream);
  box-shadow: 8px 9px 0 var(--visit-green);
  animation: first-visit-open 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  order: 0;
  scroll-margin-block: 24px;
}

.first-visit-saved-result[hidden] { display: none; }

.first-visit-result-stamp {
  display: grid;
  min-height: 132px;
  padding: 16px 10px;
  place-content: center;
  border: 5px double var(--visit-green);
  border-radius: 50%;
  color: var(--visit-green);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.first-visit-result-stamp small,
.first-visit-result-stamp span { font-size: 0.5rem; font-weight: 900; letter-spacing: 0.1em; }
.first-visit-result-stamp strong { max-width: 14ch; margin: 6px auto; overflow-wrap: anywhere; font-size: 0.68rem; line-height: 1.15; }
.first-visit-result-copy { min-width: 0; }
.first-visit-result-copy > p:first-child { margin: 0 0 8px; color: var(--visit-green); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.first-visit-result-copy h2 { margin: 0; font-size: clamp(2rem, 4.6vw, 4.6rem); letter-spacing: -0.065em; line-height: 0.92; text-wrap: balance; }
.first-visit-result-copy > p:not(:first-child) { max-width: 650px; margin: 13px 0 0; color: #535b54; font-size: 0.8rem; line-height: 1.5; }
.first-visit-result-copy .first-visit-result-note { color: var(--visit-green); font-weight: 780; }
.first-visit-result-action { margin-top: 0; white-space: nowrap; }

@keyframes first-visit-open {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes first-return-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes first-return-umbrella {
  from { opacity: 0; transform: translateX(48px) scale(var(--return-umbrella-scale)) rotate(10deg); }
  to { opacity: 1; transform: translateX(0) scale(var(--return-umbrella-scale)) rotate(-4deg); }
}

.first-return-roadmap {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(20px, 4vw, 42px);
  width: min(100%, 1240px);
  margin: 0 auto 40px;
  padding: clamp(22px, 4vw, 38px);
  border: 2px solid var(--visit-ink);
  border-radius: 17px;
  color: var(--visit-ink);
  background: #e8e1d3;
  box-shadow: 7px 8px 0 var(--visit-ink);
  order: 2;
}

.first-return-roadmap > header p,
.first-return-tools > p,
.first-return-lock {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.first-return-roadmap > header p { margin: 0 0 10px; color: var(--visit-green); font-size: 0.62rem; }
.first-return-roadmap > header h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 3.2rem); letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; }
.first-return-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

.first-return-promise-card {
  position: relative;
  min-height: 250px;
  padding: 18px;
  overflow: hidden;
  border: 2px dashed #76736c;
  border-radius: 10px;
  color: #5e5b55;
  background: #f4efe5;
}

.first-return-promise-card::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-18deg, transparent 0 16px, rgb(31 43 34 / 3%) 17px 18px);
  content: "";
  pointer-events: none;
}

.first-return-lock { position: relative; z-index: 2; display: inline-block; padding: 5px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.52rem; }
.first-return-promise-card h3 { position: relative; z-index: 2; margin: 70px 0 0; color: var(--visit-ink); font-size: 1.55rem; letter-spacing: -0.04em; line-height: 1; }
.first-return-promise-card p { position: relative; z-index: 2; margin: 9px 0 0; font-size: 0.72rem; line-height: 1.5; text-wrap: pretty; }
.first-return-map-mark { position: absolute; top: 61px; right: 18px; z-index: 1; display: flex; gap: 5px; align-items: center; opacity: 0.4; transform: rotate(3deg); }
.first-return-map-mark i { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--visit-ink); border-radius: 50%; font: 900 0.7rem/1 ui-monospace, monospace; }
.first-return-map-mark b { width: 38px; border-top: 2px dashed var(--visit-ink); }
.first-return-tree-mark { position: absolute; top: 55px; right: 23px; z-index: 1; width: 92px; height: 94px; opacity: 0.38; }
.first-return-tree-mark i { position: absolute; top: 0; width: 60px; height: 60px; border: 2px solid var(--visit-ink); border-radius: 50%; background: var(--visit-leaf); }
.first-return-tree-mark i:nth-child(2) { top: 22px; left: 32px; }
.first-return-tree-mark b { position: absolute; bottom: 0; left: 40px; width: 16px; height: 54px; border: 2px solid var(--visit-ink); background: #8e6a4a; }

.first-return-tools {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px 24px;
  padding-top: 22px;
  align-items: center;
  border-top: 1px solid #aaa49a;
}

.first-return-tools > p { margin: 0; color: #5c5952; font-size: 0.59rem; letter-spacing: 0.04em; text-transform: none; }
.first-return-tools > p strong { color: var(--visit-ink); }
.first-return-tools > div { display: flex; gap: 8px; flex-wrap: wrap; }
.first-return-tools button,
.first-return-tools > div a {
  display: inline-flex;
  min-height: 43px;
  padding: 0 15px;
  align-items: center;
  border: 1px solid var(--visit-ink);
  border-radius: 999px;
  color: var(--visit-ink);
  background: #fff;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.first-return-tools button:hover,
.first-return-tools > div a:hover { background: var(--visit-yellow); }
.first-return-tools button:focus-visible,
.first-return-tools a:focus-visible { outline: 3px solid var(--visit-red); outline-offset: 3px; }
.first-return-contact { color: #5c5952; font-size: 0.65rem; font-weight: 800; white-space: nowrap; }

.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) #saved-office-view:not([hidden]) {
  display: block !important;
  order: 2;
}

.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) #saved-office-view > .saved-office-heading,
.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) #borrowed-object-change,
.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) .story-progress,
.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) #workflow-archive {
  display: none !important;
}

.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) .site-layout { grid-template-columns: minmax(0, 1fr); }
.first-visit-shell:is([data-visit-stage="fresh"], [data-visit-stage="room-required"], [data-visit-stage="protected"]) .daily-story { width: min(100%, 1240px); margin: 0 auto; }

@media (max-width: 840px) {
  .first-visit-intro { grid-template-columns: minmax(0, 1fr); }
  .first-visit-scene { min-height: 470px; border-top: 2px solid var(--visit-ink); border-left: 0; }
  .first-return { grid-template-columns: minmax(0, 1fr); }
  .first-return-scene { min-height: 520px; border-top: 2px solid var(--visit-ink); border-left: 0; }
  .first-visit-saved-result { grid-template-columns: 112px minmax(0, 1fr); }
  .first-visit-result-stamp { min-height: 102px; }
  .first-visit-result-action { grid-column: 1 / -1; width: 100%; }
  .first-return-roadmap { grid-template-columns: minmax(0, 1fr); }
  .first-return-tools { grid-template-columns: minmax(0, 1fr); }
  .first-return-contact { white-space: normal; }
}

@media (max-width: 560px) {
  .first-visit-intro { min-height: 0; border-radius: 16px; box-shadow: 6px 7px 0 var(--visit-ink); }
  .first-visit-copy { padding: 30px 20px 34px; }
  .first-visit-copy h1 { font-size: clamp(3.35rem, 17vw, 5.2rem); }
  .first-visit-lead { margin-top: 23px; }
  .first-visit-promise { align-items: start; }
  .first-visit-open-story { width: 100%; }
  .first-visit-scene { min-height: 390px; }
  .first-visit-building { right: 4%; left: 4%; }
  .first-visit-cloud.is-two { right: 118px; }
  .first-visit-sun { top: 38px; right: 38px; width: 58px; height: 58px; }
  .first-visit-tree { left: 2%; transform: scale(0.78); transform-origin: bottom left; }
  .first-visit-gate { right: 3%; max-width: 118px; line-height: 1.25; text-align: center; }
  .first-visit-saved-result { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; box-shadow: 5px 6px 0 var(--visit-green); }
  .first-visit-result-stamp { width: 112px; min-height: 112px; }
  .first-visit-result-copy h2 { font-size: clamp(2.4rem, 13vw, 3.8rem); }
  .first-return { min-height: 0; border-radius: 16px; box-shadow: 6px 7px 0 var(--visit-red); }
  .first-return-copy { padding: 29px 20px 34px; }
  .first-return-copy h1 { font-size: clamp(3.35rem, 17vw, 5rem); }
  .first-return-action { width: 100%; }
  .first-return-scene { min-height: 420px; }
  .first-return-window { right: 4%; width: 43%; }
  .first-return-umbrella { --return-umbrella-scale: 0.82; bottom: 8%; left: 12%; transform-origin: bottom left; }
  .first-return-desk { right: 4%; left: 4%; }
  .first-return-queue-sign { top: 12%; left: 5%; }
  .first-return-roadmap { padding: 20px 17px; box-shadow: 5px 6px 0 var(--visit-ink); }
  .first-return-promises { grid-template-columns: minmax(0, 1fr); }
  .first-return-promise-card { min-height: 220px; }
  .first-return-tools > div { display: grid; }
  .first-return-tools button,
  .first-return-tools > div a { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .first-visit-saved-result,
  .first-return,
  .first-return-umbrella { animation: none; }
  .first-visit-open-story,
  .first-visit-result-action,
  .first-return-action { transition: none; }
}