:root {
  --shared-ink: #202b23;
  --shared-paper: #fff9e8;
  --shared-red: #b94b3d;
  --shared-green: #315f45;
  --shared-yellow: #f3ca5a;
  --shared-blue: #a9cbd0;
}

.lf-room-handoff[hidden],
.shared-story-chapter[hidden],
.story-map-shared-meeting[hidden],
.shared-room-discovery[hidden],
.shared-room-actions [hidden] {
  display: none !important;
}

.lf-follow-callup,
.lf-shift-callup {
  margin-top: 18px;
}

.lf-follow-callup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  align-items: center;
  border: 2px solid var(--lf-ink, #20201d);
  border-radius: 8px;
  color: var(--shared-ink);
  background: #fff6d8;
  box-shadow: 5px 5px 0 var(--shared-ink);
}

.lf-follow-callup > div {
  display: grid;
  gap: 4px;
}

.lf-follow-callup span,
.lf-follow-callup small {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.lf-follow-callup span {
  color: var(--shared-red);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lf-follow-callup strong {
  font-size: 0.86rem;
  line-height: 1.3;
}

.lf-follow-callup small {
  color: #5c5b52;
  font-size: 0.56rem;
  line-height: 1.45;
}

#lf-follow-to-room {
  min-height: 46px;
  padding: 0 16px;
  border: 2px solid var(--shared-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--shared-red);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--shared-ink);
  cursor: pointer;
}

#lf-follow-to-room:hover { background: #96392f; transform: translate(-1px, -1px); }
#lf-follow-to-room:focus-visible { outline: 4px solid var(--shared-yellow); outline-offset: 3px; }
#lf-follow-to-room:disabled { opacity: 0.65; cursor: wait; }

.lf-room-handoff {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  gap: 8px;
  min-height: 84px;
  margin-top: 18px;
  padding: 17px 14px 26px;
  align-items: center;
  overflow: hidden;
  border: 2px dashed var(--shared-ink);
  color: var(--shared-ink);
  background: repeating-linear-gradient(-12deg, #fff9e8 0 13px, #f7efd9 14px 15px);
  font: 900 0.53rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.lf-room-handoff i { border-top: 2px dashed var(--shared-red); }
.lf-room-handoff strong { padding: 7px; border: 2px solid var(--shared-red); background: #fff; transform: rotate(-2deg); }
.lf-room-handoff b {
  position: absolute;
  bottom: 7px;
  left: 6%;
  width: 18px;
  height: 18px;
  border: 2px solid var(--shared-ink);
  border-radius: 50% 50% 4px 4px;
  background: var(--shared-red);
  animation: shared-handoff-travel 900ms cubic-bezier(0.35, 0.7, 0.25, 1) both;
}

.lf-room-handoff b::after {
  position: absolute;
  top: 15px;
  left: 7px;
  width: 2px;
  height: 18px;
  background: var(--shared-ink);
  content: "";
}

.shared-room-discovery {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
  width: min(calc(100% - 34px), 1240px);
  min-height: 600px;
  margin: 18px auto 36px;
  overflow: hidden;
  border: 2px solid var(--shared-ink);
  border-radius: 22px;
  color: var(--shared-ink);
  background: var(--shared-paper);
  box-shadow: 9px 10px 0 var(--shared-green);
  scroll-margin-block: 24px;
}

.shared-room-scene {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  border-right: 2px solid var(--shared-ink);
  background:
    linear-gradient(155deg, rgb(255 255 255 / 58%) 0 25%, transparent 25.2%),
    linear-gradient(var(--shared-blue) 0 62%, #9a7353 62% 65%, #d4ba86 65% 100%);
}

.shared-room-floor {
  position: absolute;
  right: -5%;
  bottom: 0;
  left: -5%;
  height: 35%;
  border-top: 2px solid var(--shared-ink);
  background: repeating-linear-gradient(90deg, #d1b27b 0 54px, #9d7b51 55px 57px);
  transform: perspective(260px) rotateX(25deg);
  transform-origin: bottom;
}

.shared-room-window {
  position: absolute;
  top: 8%;
  right: 8%;
  width: 38%;
  height: 28%;
  border: 8px solid #f2dfba;
  outline: 2px solid var(--shared-ink);
  background: #84b2ba;
  box-shadow: 7px 8px 0 rgb(31 43 34 / 16%);
}

.shared-room-window::before,
.shared-room-window::after { position: absolute; z-index: 1; background: var(--shared-ink); content: ""; }
.shared-room-window::before { top: 0; bottom: 0; left: 50%; width: 2px; }
.shared-room-window::after { top: 50%; right: 0; left: 0; height: 2px; }
.shared-room-window i { position: absolute; bottom: 8%; width: 25px; height: 42%; border: 2px solid var(--shared-ink); border-radius: 80% 20% 65% 35%; background: #6c925e; }
.shared-room-window i:first-child { left: 14%; transform: rotate(-12deg); }
.shared-room-window i:last-child { right: 13%; transform: scaleX(-1) rotate(-12deg); }

.shared-room-door {
  position: absolute;
  bottom: 20%;
  left: -2px;
  z-index: 2;
  width: 25%;
  height: 44%;
  border: 3px solid var(--shared-ink);
  background: #f2e3c8;
  transform-origin: left center;
  animation: shared-room-door-open 800ms ease-out both;
}

.shared-room-door::after { position: absolute; top: 52%; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--shared-ink); content: ""; }
.shared-room-door i { position: absolute; top: 40px; left: 50%; padding: 6px; border: 1px solid var(--shared-ink); background: #fff; font: 900 0.43rem/1.2 ui-monospace, monospace; white-space: nowrap; transform: translateX(-50%) rotate(-3deg); }

.shared-room-paper-trail { position: absolute; top: 46%; left: 16%; z-index: 5; width: 45%; height: 20%; }
.shared-room-paper-trail i { position: absolute; width: 38px; height: 24px; border: 2px solid var(--shared-ink); background: #fff8dc; box-shadow: 2px 2px 0 var(--shared-red); animation: shared-paper-arrive 700ms ease-out both; }
.shared-room-paper-trail i:nth-child(1) { top: 30%; left: 0; transform: rotate(-8deg); }
.shared-room-paper-trail i:nth-child(2) { top: 4%; left: 38%; animation-delay: 90ms; transform: rotate(7deg); }
.shared-room-paper-trail i:nth-child(3) { right: 0; bottom: 0; animation-delay: 180ms; transform: rotate(-3deg); }

.shared-room-plant {
  position: absolute;
  right: 12%;
  bottom: 13%;
  z-index: 4;
  width: 110px;
  height: 205px;
  transform-origin: bottom;
}

.shared-room-plant i { position: absolute; bottom: 61px; left: 50px; width: 45px; height: 92px; border: 3px solid var(--shared-ink); border-radius: 90% 12% 90% 12%; background: #668d5b; transform: rotate(-34deg); transform-origin: 0 100%; }
.shared-room-plant i:nth-child(2) { width: 39px; height: 110px; transform: rotate(-4deg); }
.shared-room-plant i:nth-child(3) { transform: scaleX(-1) rotate(-36deg); }
.shared-room-plant i:nth-child(4) { width: 34px; height: 76px; transform: scaleX(-1) rotate(-68deg); }
.shared-room-plant b { position: absolute; bottom: 0; left: 21px; width: 76px; height: 67px; border: 3px solid var(--shared-ink); background: #b9703d; clip-path: polygon(7% 0, 93% 0, 79% 100%, 21% 100%); }

.shared-room-clock { position: absolute; top: 13%; left: 29%; z-index: 3; width: 72px; height: 72px; border: 4px solid var(--shared-ink); border-radius: 50%; background: #fff; }
.shared-room-clock::before,
.shared-room-clock::after { position: absolute; top: 50%; left: 50%; width: 3px; height: 20px; background: var(--shared-ink); content: ""; transform-origin: top; }
.shared-room-clock::before { transform: rotate(180deg); }
.shared-room-clock::after { height: 16px; transform: rotate(-55deg); }
.shared-room-clock i { position: absolute; inset: 7px; border: 1px dashed #999186; border-radius: 50%; }

.shared-room-umbrella {
  position: absolute;
  bottom: 12%;
  left: 41%;
  z-index: 7;
  width: 170px;
  height: 300px;
  transform: rotate(-5deg);
  transform-origin: bottom;
  animation: shared-umbrella-arrive 850ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.shared-room-umbrella > i:first-child { position: absolute; top: 0; left: 0; width: 170px; height: 92px; border: 3px solid var(--shared-ink); border-radius: 95px 95px 7px 7px; background: var(--shared-red); clip-path: polygon(50% 0, 100% 87%, 80% 76%, 62% 89%, 50% 75%, 37% 89%, 19% 76%, 0 87%); }
.shared-room-umbrella > i:nth-child(2) { position: absolute; top: 79px; left: 83px; width: 8px; height: 184px; border: 2px solid var(--shared-ink); background: #dfb16e; }
.shared-room-umbrella > i:nth-child(2)::after { position: absolute; right: -2px; bottom: -26px; width: 27px; height: 27px; border: 7px solid var(--shared-ink); border-top: 0; border-left-color: transparent; border-radius: 0 0 24px 24px; content: ""; }

.shared-room-umbrella strong {
  position: absolute;
  top: 112px;
  left: 105px;
  width: 132px;
  padding: 7px 8px;
  border: 2px solid var(--shared-ink);
  color: var(--shared-ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--shared-yellow);
  font: 900 0.52rem/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(4deg);
}

.shared-room-tape {
  position: absolute;
  top: 47%;
  right: 7%;
  z-index: 8;
  display: none;
  width: 43%;
  padding: 7px;
  border: 2px solid var(--shared-ink);
  color: #fff;
  background: var(--shared-red);
  font: 900 0.58rem/1 ui-monospace, monospace;
  letter-spacing: 0.11em;
  text-align: center;
  transform: rotate(-14deg);
}

.shared-room-evidence {
  position: absolute;
  top: 46%;
  right: 6%;
  z-index: 8;
  display: none;
  width: 45%;
  height: 90px;
}

.shared-room-evidence i {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  height: 24px;
  border: 2px solid var(--shared-ink);
  background: repeating-linear-gradient(90deg, var(--shared-red) 0 26px, #fff 27px 39px);
  transform: rotate(14deg);
}

.shared-room-evidence i:last-child { transform: rotate(-14deg); }
.shared-room-discovery[data-job="evidence"] .shared-room-evidence { display: block; animation: shared-tape-file 650ms 240ms ease-out both; }

.shared-room-stamp {
  position: absolute;
  top: 33%;
  right: 7%;
  z-index: 10;
  padding: 10px;
  border: 4px double var(--shared-green);
  border-radius: 50%;
  color: var(--shared-green);
  background: rgb(255 249 232 / 88%);
  font: 950 0.58rem/1.1 ui-monospace, monospace;
  text-align: center;
  transform: rotate(-8deg);
}

.shared-room-scene-note {
  position: absolute;
  right: 17px;
  bottom: 15px;
  left: 17px;
  z-index: 12;
  padding: 10px 12px;
  border: 1px solid var(--shared-ink);
  color: var(--shared-ink);
  background: rgb(255 249 232 / 94%);
  font: 850 0.57rem/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace;
  text-align: center;
  text-transform: uppercase;
}

.shared-room-discovery[data-job="shade"] .shared-room-umbrella { left: 53%; transform: rotate(-12deg); }
.shared-room-discovery[data-job="shade"] .shared-room-plant { animation: shared-plant-thanks 850ms 350ms ease-in-out both; }
.shared-room-discovery[data-job="escort"] .shared-room-umbrella { bottom: 9%; left: 43%; transform: scale(0.82) rotate(3deg); }
.shared-room-discovery[data-job="escort"] .shared-room-clock { top: auto; bottom: 23%; left: 73%; animation: shared-clock-roll 850ms ease-out both; }
.shared-room-discovery[data-job="evidence"] .shared-room-umbrella { bottom: 10%; left: 48%; transform: scale(0.78) rotate(0); }
.shared-room-discovery[data-job="evidence"] .shared-room-tape { display: block; animation: shared-tape-file 650ms 240ms ease-out both; }

.shared-room-copy {
  display: flex;
  min-width: 0;
  padding: clamp(32px, 5vw, 64px);
  flex-direction: column;
  justify-content: center;
}

.shared-room-copy > p:first-child,
.shared-room-link-receipt > span {
  color: var(--shared-red);
  font: 900 0.61rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shared-room-copy > p:first-child { margin: 0 0 15px; }
.shared-room-copy h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5.9vw, 5.7rem);
  letter-spacing: -0.075em;
  line-height: 0.88;
  text-wrap: balance;
}

.shared-room-copy h2:focus { outline: 4px solid var(--shared-yellow); outline-offset: 7px; }
.shared-room-copy > p:not(:first-child) { max-width: 620px; margin: 22px 0 0; color: #4f544f; font-size: 0.94rem; line-height: 1.55; text-wrap: pretty; }

.shared-room-copy dl {
  display: grid;
  gap: 7px;
  margin: 24px 0 0;
}

.shared-room-copy dl div {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #c9c3b3;
}

.shared-room-copy dt { color: var(--shared-green); font: 850 0.57rem/1.4 ui-monospace, monospace; text-transform: uppercase; }
.shared-room-copy dd { margin: 0; font-size: 0.72rem; font-weight: 760; line-height: 1.45; }

.shared-room-link-receipt {
  display: grid;
  gap: 5px;
  margin-top: 25px;
  padding: 16px 17px;
  border: 2px dashed var(--shared-green);
  background: #edf3df;
}

.shared-room-link-receipt strong { color: var(--shared-green); font-size: 1rem; line-height: 1.35; }
.shared-room-link-receipt small { overflow-wrap: anywhere; color: #536052; font: 760 0.56rem/1.4 ui-monospace, monospace; }
.shared-room-status,
.shared-room-save-status { min-height: 1.5em; margin: 16px 0 0; color: var(--shared-green); font-size: 0.72rem; font-weight: 780; line-height: 1.45; }
.shared-room-status.is-warning,
.shared-room-save-status.is-warning { padding: 10px 12px; border-left: 4px solid var(--shared-red); color: #772d28; background: #fff0ed; }

.shared-room-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.shared-room-actions button,
.shared-room-actions a {
  display: inline-flex;
  min-height: 43px;
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--shared-ink);
  border-radius: 999px;
  color: var(--shared-ink);
  background: #fff;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.shared-room-actions button {
  color: #fff;
  background: var(--shared-green);
}

.shared-room-actions :is(button, a):hover { box-shadow: 3px 3px 0 var(--shared-yellow); transform: translate(-1px, -1px); }
.shared-room-actions :is(button, a):focus-visible { outline: 4px solid var(--shared-yellow); outline-offset: 3px; }

.shared-story-chapter {
  width: min(100%, 1240px);
  margin: 0 auto 38px;
  color: var(--shared-ink);
}

.shared-story-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 26px;
  padding: clamp(28px, 5vw, 60px);
  align-items: end;
  border: 2px solid var(--shared-ink);
  border-radius: 24px 24px 0 0;
  color: var(--shared-ink);
  background:
    linear-gradient(90deg, transparent 31px, rgb(185 75 61 / 12%) 32px, transparent 33px),
    repeating-linear-gradient(#fff9e8 0 31px, #e9dfc8 32px);
}

.shared-story-heading > div > p,
.shared-story-mark p,
.shared-map-copy > p,
.shared-story-footer {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.shared-story-heading > div > p {
  display: flex;
  gap: 9px;
  margin: 0 0 14px;
  align-items: center;
  color: var(--shared-red);
  font-size: 0.62rem;
}

.shared-story-heading > div > p span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.shared-story-heading h1 {
  max-width: 7ch;
  margin: 0;
  font-size: clamp(3.5rem, 7.8vw, 7.4rem);
  letter-spacing: -0.088em;
  line-height: 0.8;
  text-wrap: balance;
}

.shared-story-heading h1:focus { outline: 4px solid var(--shared-yellow); outline-offset: 7px; }
.shared-story-heading > p { max-width: 370px; margin: 0; color: #4f544d; font-size: clamp(0.95rem, 1.6vw, 1.15rem); line-height: 1.55; }

.shared-story-mark {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 42px);
  padding: clamp(24px, 4vw, 40px);
  align-items: center;
  border: 2px solid var(--shared-ink);
  border-top: 0;
  background: #eef2dc;
  box-shadow: 9px 10px 0 var(--shared-green);
}

.shared-mark-seal {
  display: grid;
  grid-template-columns: 50px minmax(18px, 1fr) 50px;
  align-items: center;
  transform: rotate(-3deg);
}

.shared-mark-seal span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 4px double var(--shared-green);
  border-radius: 50%;
  color: var(--shared-green);
  background: var(--shared-paper);
  font: 950 0.8rem/1 ui-monospace, monospace;
}

.shared-mark-seal i { border-top: 3px dashed var(--shared-red); }
.shared-mark-copy { min-width: 0; }
.shared-story-mark p { margin: 0 0 8px; color: var(--shared-green); font-size: 0.58rem; }
.shared-story-mark h2 { margin: 0; font-size: clamp(1.8rem, 3.8vw, 3.8rem); letter-spacing: -0.055em; line-height: 0.95; text-wrap: balance; }
.shared-mark-copy > span { display: block; margin-top: 11px; color: #4d554e; font-size: 0.78rem; line-height: 1.45; }
.shared-mark-copy > small { display: block; margin-top: 8px; overflow-wrap: anywhere; color: #687168; font: 700 0.52rem/1.4 ui-monospace, monospace; }

#shared-mark-map-action {
  min-height: 52px;
  padding: 0 19px;
  border: 2px solid var(--shared-ink);
  border-radius: 999px;
  color: #fff;
  background: var(--shared-green);
  box-shadow: 4px 4px 0 var(--shared-ink);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

#shared-mark-map-action:hover { background: #244d36; box-shadow: 6px 6px 0 var(--shared-ink); transform: translate(-1px, -1px); }
#shared-mark-map-action:focus-visible { outline: 4px solid var(--shared-yellow); outline-offset: 4px; }

.story-map-shared-meeting {
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
  min-height: 560px;
  margin-top: 34px;
  overflow: hidden;
  border: 2px solid var(--shared-ink);
  border-radius: 20px;
  background: var(--shared-paper);
  box-shadow: 9px 10px 0 var(--shared-red);
  animation: shared-map-open 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  scroll-margin-block: 24px;
}

.shared-map-paper {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-right: 2px solid var(--shared-ink);
  background:
    radial-gradient(circle at 50% 50%, rgb(243 202 90 / 50%) 0 12%, transparent 12.5%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgb(49 95 69 / 18%) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgb(49 95 69 / 18%) 40px 41px),
    #dfead9;
}

.shared-map-paper::before,
.shared-map-paper::after {
  position: absolute;
  border: 3px dashed var(--shared-red);
  border-radius: 50%;
  content: "";
}

.shared-map-paper::before { top: 15%; right: 15%; width: 155px; height: 110px; transform: rotate(9deg); }
.shared-map-paper::after { bottom: 14%; left: 13%; width: 175px; height: 130px; transform: rotate(-8deg); }

.shared-map-room-slip,
.shared-map-lost-slip,
.shared-map-paper b {
  position: absolute;
  z-index: 3;
  padding: 9px 11px;
  border: 2px solid var(--shared-ink);
  background: var(--shared-paper);
  box-shadow: 4px 4px 0 var(--shared-ink);
  font: 900 0.6rem/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.shared-map-room-slip { top: 13%; left: 10%; transform: rotate(-4deg); }
.shared-map-lost-slip { right: 9%; bottom: 13%; transform: rotate(3deg); }
.shared-map-paper b { top: 53%; left: 50%; max-width: 170px; color: #fff; background: var(--shared-red); transform: translate(-50%, -50%) rotate(-2deg); }
.shared-map-paper strong { position: absolute; top: 48%; left: 50%; z-index: 4; display: grid; width: 66px; height: 66px; place-items: center; border: 4px double var(--shared-green); border-radius: 50%; color: var(--shared-green); background: var(--shared-yellow); font-size: 1.5rem; transform: translate(-50%, -50%) rotate(5deg); }

.shared-map-paper i {
  position: absolute;
  z-index: 2;
  width: 39%;
  border-top: 4px dashed var(--shared-green);
  transform-origin: left;
}

.shared-map-route-one { top: 31%; left: 25%; transform: rotate(34deg); }
.shared-map-route-two { top: 60%; left: 53%; transform: rotate(34deg); }

.shared-map-copy {
  display: flex;
  min-width: 0;
  padding: clamp(32px, 5vw, 64px);
  flex-direction: column;
  justify-content: center;
}

.shared-map-copy > p:first-child { margin: 0 0 13px; color: var(--shared-red); font-size: 0.61rem; }
.shared-map-copy h2 { max-width: 9ch; margin: 0; font-size: clamp(3rem, 6vw, 6rem); letter-spacing: -0.08em; line-height: 0.84; text-wrap: balance; }
.shared-map-copy h2:focus { outline: 4px solid var(--shared-yellow); outline-offset: 7px; }
.shared-map-copy > p:not(:first-child) { max-width: 600px; margin: 21px 0 0; color: #50564f; font-size: 0.92rem; line-height: 1.55; }

.shared-map-source-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 23px;
}

.shared-map-source-pair span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--shared-ink); background: #fff; }
.shared-map-source-pair small { color: var(--shared-green); font: 850 0.52rem/1.35 ui-monospace, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.shared-map-source-pair strong { overflow-wrap: anywhere; font-size: 0.7rem; line-height: 1.4; }

.shared-map-actions {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.shared-map-actions button {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--shared-ink);
  border-radius: 999px;
  color: var(--shared-ink);
  background: #fff;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.shared-map-actions button:hover { background: var(--shared-yellow); }
.shared-map-actions button:focus-visible { outline: 3px solid var(--shared-red); outline-offset: 3px; }

.shared-story-footer {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  padding: 15px 2px;
  justify-content: space-between;
  color: #626861;
  font-size: 0.55rem;
}

.shared-story-footer a { color: inherit; }

@keyframes shared-handoff-travel {
  from { left: 6%; transform: rotate(-8deg); }
  to { left: calc(94% - 18px); transform: rotate(8deg); }
}

@keyframes shared-room-door-open {
  from { transform: perspective(300px) rotateY(0); }
  to { transform: perspective(300px) rotateY(-45deg); }
}

@keyframes shared-paper-arrive {
  from { opacity: 0; translate: -65px 28px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes shared-umbrella-arrive {
  from { opacity: 0; translate: -180px 30px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes shared-plant-thanks {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(4deg); }
}

@keyframes shared-clock-roll {
  from { transform: translate(-190px, -170px) rotate(0); }
  to { transform: translate(0, 0) rotate(350deg); }
}

@keyframes shared-tape-file {
  from { opacity: 0; transform: scaleX(0.15) rotate(-14deg); }
  to { opacity: 1; transform: scaleX(1) rotate(-14deg); }
}

@keyframes shared-map-open {
  from { opacity: 0; transform: translateY(24px) rotate(0.4deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (max-width: 900px) {
  .shared-room-discovery,
  .story-map-shared-meeting {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-room-scene,
  .shared-map-paper {
    min-height: 500px;
    border-right: 0;
    border-bottom: 2px solid var(--shared-ink);
  }

  .shared-story-heading { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .shared-story-heading h1 { max-width: 9ch; }
  .shared-story-mark { grid-template-columns: 130px minmax(0, 1fr); }
  #shared-mark-map-action { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .lf-follow-callup { grid-template-columns: minmax(0, 1fr); }
  #lf-follow-to-room { width: 100%; }
  .lf-room-handoff { grid-template-columns: auto minmax(12px, 1fr) auto; }
  .lf-room-handoff i:nth-of-type(2),
  .lf-room-handoff span:last-of-type { display: none; }

  .shared-room-discovery {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 2px);
    min-height: 0;
    border-radius: 15px;
    box-shadow: 5px 6px 0 var(--shared-green);
  }

  .shared-room-scene { min-height: 430px; }
  .shared-room-copy { padding: 29px 20px 34px; }
  .shared-room-copy h2 { font-size: clamp(3rem, 15vw, 4.6rem); }
  .shared-room-window { right: 4%; width: 43%; }
  .shared-room-door { width: 29%; }
  .shared-room-paper-trail { left: 14%; width: 48%; }
  .shared-room-plant { right: 3%; bottom: 12%; transform: scale(0.8); transform-origin: bottom; }
  .shared-room-umbrella { bottom: 7%; left: 30%; transform: scale(0.72) rotate(-5deg); transform-origin: bottom; }
  .shared-room-discovery[data-job="shade"] .shared-room-umbrella { left: 39%; transform: scale(0.72) rotate(-12deg); }
  .shared-room-discovery[data-job="escort"] .shared-room-umbrella { left: 27%; transform: scale(0.68) rotate(3deg); }
  .shared-room-discovery[data-job="escort"] .shared-room-clock { right: 4%; left: auto; }
  .shared-room-discovery[data-job="evidence"] .shared-room-umbrella { left: 36%; transform: scale(0.64); }
  .shared-room-tape { right: 5%; width: 58%; }

  .shared-story-heading { padding: 29px 20px 34px; border-radius: 15px 15px 0 0; }
  .shared-story-heading h1 { font-size: clamp(3.2rem, 16vw, 4.8rem); }
  .shared-story-mark { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; box-shadow: 5px 6px 0 var(--shared-green); }
  .shared-mark-seal { width: 135px; }
  .shared-story-mark h2 { font-size: clamp(2rem, 10vw, 3.2rem); }

  .story-map-shared-meeting { border-radius: 15px; box-shadow: 5px 6px 0 var(--shared-red); }
  .shared-map-paper { min-height: 390px; }
  .shared-map-copy { padding: 29px 20px 34px; }
  .shared-map-copy h2 { font-size: clamp(3rem, 15vw, 4.7rem); }
  .shared-map-source-pair { grid-template-columns: minmax(0, 1fr); }
  .shared-map-actions { display: grid; }
  .shared-map-actions button { width: 100%; }
  .shared-story-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-room-handoff b,
  .shared-room-door,
  .shared-room-paper-trail i,
  .shared-room-plant,
  .shared-room-clock,
  .shared-room-umbrella,
  .shared-room-tape,
  .shared-room-evidence,
  .story-map-shared-meeting {
    animation: none !important;
    transition: none !important;
  }

  #lf-follow-to-room:hover,
  #shared-mark-map-action:hover,
  .shared-room-actions :is(button, a):hover {
    transform: none;
  }
}