.tour-invite { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 15px 17px; margin: 0 0 14px; background: #e5ead8; border: 1px solid #c4ceb6; border-radius: 12px; text-align: left; font-size: 16px; font-weight: 550; }
.tour-invite small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; color: #4f6554; line-height: 1.5; }
.tour-invite > span:last-child { font-size: 23px; }
.tour-invite:hover { background: #dce5cc; }
.chapter-nav { position: sticky; top: 56px; z-index: 2; display: flex; gap: 4px; overflow-x: auto; margin: 20px 0 24px; padding: 0; border-block: 1px solid #234a4920; background: var(--cream); }
.chapter-nav button { flex: 1; min-height: 44px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: none; color: #506754; font-size: 14px; white-space: nowrap; }
.chapter-nav button[aria-current=page] { color: #963f27; border-bottom-color: #ae5336; font-weight: 600; }
.chapter-nav button:hover { background: #eee9d9; }
.chapter-nav button:focus-visible { outline-offset: -3px; }
.is-chapter #dialog-title { scroll-margin-top: 25px; outline: none; }
.catch-heading { display: flex; align-items: center; gap: 15px; }
.catch-heading .dialog-title { margin-bottom: 0; }
.catch-emblem { display: block; flex: 0 0 64px; width: 64px; height: 64px; perspective: 200px; }
.catch-emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.is-catch .catch-emblem { animation: catch-arrival .55s ease-out both; }
.is-catch .catch-lid { transform-origin: 40px 28px; animation: open-briefcase .65s ease-out both; }
.is-catch .catch-screen { transform-origin: 41px 55px; animation: open-screen .6s ease-out both; }
.is-catch .catch-paper { animation: show-letter .6s ease-out both; }
.is-catch .catch-cork, .is-catch .catch-roof { animation: lift-catch .6s ease-out both; }
.is-catch .chapter-story { animation: chapter-arrival .5s .12s ease-out both; }
@keyframes catch-arrival { from { opacity: 0; transform: translateY(18px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes open-briefcase { from { transform: rotateX(0); } to { transform: rotateX(-62deg); } }
@keyframes open-screen { from { transform: rotateX(75deg); } to { transform: rotateX(0); } }
@keyframes show-letter { from { transform: translateY(14px) scaleY(.5); opacity: 0; } to { transform: translateY(-5px); opacity: 1; } }
@keyframes lift-catch { to { transform: translateY(-9px); } }
@keyframes chapter-arrival { from { opacity: .2; transform: translateY(9px); } to { opacity: 1; transform: none; } }
dialog.is-tour { position: fixed; inset: auto auto 28px 28px; margin: 0; width: 388px; max-width: calc(100% - 40px); max-height: calc(100svh - 100px); border-radius: 18px; box-shadow: 0 12px 45px #264b4320; animation: none; }
dialog.is-tour::backdrop { background: transparent; backdrop-filter: none; }
.is-tour #dialog-content { padding: 25px 26px 0; }
.is-tour .close-button { top: 12px; margin: 12px 12px -56px 0; width: 44px; height: 44px; font-size: 24px; }
.tour-progress { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-right: 32px; font-size: 11px; line-height: 1.5; color: #546850; letter-spacing: .6px; margin-bottom: 18px; }
.tour-progress > span:first-child { color: #914b31; font-weight: 600; }
.is-tour .dialog-title { font-size: 31px; line-height: 1.16; letter-spacing: -.8px; margin: 0 0 18px; outline: none; }
.tour-logos { display: flex; align-items: center; gap: 25px; margin: 16px 0; }
.tour-logos img { display: block; width: 128px; height: auto; }
.tour-logos img + img { width: 48px; }
.tour-copy { font-size: 16px; line-height: 1.6; color: #435d50; margin: 14px 0; }
.tour-fact { font-size: 14px; line-height: 1.55; color: #435d50; margin: 16px 0 8px; }
.tour-fact strong, .tour-fact span { display: block; }
.tour-fact strong { font-weight: 600; color: #355340; }
.tour-wordmark { font: 500 35px/1.2 'Playfair Display',serif; color: #456547; margin: 0 0 14px; }
.tour-note { font-size: 12px; color: #795638; line-height: 1.6; }
.tour-detail, .tour-back { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; border: 0; background: none; color: #8d482e; font-size: 14px; text-align: left; }
.tour-detail { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b9b49a; }
.tour-letter { width: 65px; height: 65px; margin: 5px 0 13px; }
.tour-letter svg { width: 100%; height: 100%; }
.tour-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 12px -26px 0; padding: 14px 26px; border-top: 1px solid #234a4920; background: var(--cream); border-radius: 0 0 18px 18px; }
.tour-back { color: #53664f; font-size: 13px; }
.tour-actions .primary-small { font-size: 14px; padding: 12px 18px; }
.is-guided-tour .tour-return, .is-guided-tour .control-hint, .is-guided-tour .lake-toast { display: none; }
.is-guided-tour .topbar { visibility: hidden; }
@media(max-width:700px) {
  .chapter-nav { gap: 2px; top: 54px; }
  .chapter-nav button { font-size: 13px; padding-inline: 3px; }
  .catch-heading { gap: 10px; }
  .catch-emblem { width: 48px; height: 48px; flex-basis: 48px; }
  .catch-heading .dialog-title { font-size: 30px; }
  dialog.is-tour { inset: auto 12px 12px; width: calc(100% - 24px); max-width: none; max-height: 62svh; }
  .is-tour #dialog-content { padding: 23px 22px 0; }
  .is-tour .dialog-title { font-size: 29px; }
  .tour-progress { margin-bottom: 14px; }
  .tour-actions { margin-inline: -22px; padding: 12px 22px; gap: 10px; }
}
@media(max-height:520px) and (min-width:600px) { dialog.is-tour { inset: 12px auto 12px 12px; width: 330px; max-height: calc(100svh - 24px); } }
.gentle-motion .is-catch .catch-emblem, .gentle-motion .is-catch svg *, .gentle-motion .is-catch .chapter-story { animation: none; }
@media(prefers-reduced-motion:reduce) { .is-catch .catch-emblem, .is-catch svg *, .is-catch .chapter-story { animation: none; } }