/* Hallmark · genre: editorial · macrostructure: inhabited courtyard · design-system: design.md · designed-as-app */
@media (forced-colors: none) {
  #v2CoreRoot .v2-station-live.station-v2-scene { block-size: 100%; min-block-size: 0; --station-scene-height: 100%; }
  #v2CoreRoot .station-v2-camera::after {
    background: linear-gradient(180deg, var(--color-scene-veil), var(--color-scene-fade) 30% 72%, var(--color-scene-veil));
    box-shadow: none;
  }
  #v2CoreRoot .station-v2-camera .station-v2-build-overview {
    inset: calc(var(--v2-safe-top) + 112px) auto auto 24px;
    min-block-size: 44px; padding: 8px 12px;
    border: 1px solid var(--color-scene-rule) !important;
    border-radius: 4px; background: var(--color-scene-label);
    color: var(--color-accent-ink); font: 14px/1.5 var(--font-ui); box-shadow: none;
  }
  #v2CoreRoot .station-v2-camera .station-v2-initial-choice {
    inset: auto 16px 16px 16px; transform: none; inline-size: auto;
    padding: 8px 8px 8px 16px; gap: 8px;
    color: var(--color-accent-ink); background: var(--color-scene-label);
    border: 1px solid var(--color-scene-rule); border-radius: 4px;
    box-shadow: none; font: 14px/1.6 var(--font-ui);
  }
  #v2CoreRoot .station-v2-camera .station-v2-initial-choice-dismiss { color: var(--color-gold-on-ink); background: transparent; font-size: 14px; }
  #v2CoreRoot .station-v2-camera .station-v2-hotspot::after {
    padding: 6px 8px; border: 1px solid var(--color-scene-rule); border-radius: 3px;
    background: var(--color-scene-label); color: var(--color-accent-ink);
    font: 14px/1.4 var(--font-ui); letter-spacing: .04em; box-shadow: none;
  }
  #v2CoreRoot .station-v2-camera .station-v2-hotspot::before {
    inline-size: 8px; block-size: 8px; border: 2px solid var(--color-accent-ink);
    background: var(--color-marker-idle); box-shadow: 0 0 0 4px var(--color-scene-rule);
  }
  #v2CoreRoot .station-v2-camera :is(.station-v2-hotspot--current_letter,.station-v2-hotspot--lamp)::before { background: var(--color-gold-on-ink); }
  #v2CoreRoot .station-v2-camera .station-v2-hotspot:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 4px; }
  #v2CoreRoot .station-v2-sheet.station-v2-sheet { background: var(--color-paper); border: 0; border-radius: 16px 16px 0 0; padding: 24px; }
  #v2CoreRoot .station-v2-sheet .station-v2-sheet-title { font: 30px/1.4 var(--font-display); color: var(--color-ink); }
  #v2CoreRoot .station-v2-sheet p { font: 14px/1.8 var(--font-ui); }
  #v2CoreRoot .station-v2-sheet button { border-radius: 4px; font-size: 14px; }
  #v2CoreRoot .station-v2-theme-panel { background: var(--color-paper); border-radius: 12px; }
  #v2CoreRoot .station-v2-theme-choice { border-radius: 4px; font-size: 14px; }
  #v2CoreRoot .station-v2-theme-viewport { border-radius: 4px; }
}

/* Scene controls stay legible without competing with the courtyard. */
@media (forced-colors: none) {
  #v2CoreRoot .station-v2-build-overview {
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    background: var(--color-surface);
    box-shadow: 0 4px 12px var(--color-shadow-soft);
  }
  #v2CoreRoot .station-v2-initial-choice {
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border-radius: 7px;
    font-size: 14px;
    background: var(--color-surface);
    box-shadow: 0 4px 12px var(--color-shadow-soft);
  }
  #v2CoreRoot .station-v2-initial-choice-dismiss { background: transparent; border-color: transparent !important; color: var(--color-accent); font-size: 14px; }
  #v2CoreRoot .station-v2-hotspot::after {
    border-radius: 4px;
    padding: 5px 8px;
    background: var(--color-surface);
    font-family: var(--v2-font-display);
    font-size: 14px;
    color: var(--color-ink);
    box-shadow: 0 3px 8px var(--color-shadow-soft);
  }
  #v2CoreRoot .station-v2-hotspot::before { border-width: 3px; box-shadow: 0 0 0 1px var(--color-rule-strong), 0 0 0 5px var(--color-paper-wash-on-ink); }
  #v2CoreRoot .station-v2-update-status { inset: auto 14px 18px; max-inline-size: none; transform: none; border-radius: 7px; font-size: 14px; background: var(--color-surface); }
  #v2CoreRoot .station-v2-sheet { border-radius: 18px 18px 4px 4px; background: var(--color-surface); box-shadow: 0 -10px 42px var(--color-shadow-soft); }
  #v2CoreRoot .station-v2-sheet-title { font-family: var(--v2-font-display); font-size: 25px; }
  #v2CoreRoot .station-v2-sheet :is(p, .station-v2-sheet-copy) { font-size: 14px; line-height: 1.8; }
}

.station-v2-scene {
  --station-paper: #f3ead8;
  --station-paper-bright: #fff9ed;
  --station-ink: #24312c;
  --station-ink-soft: #5b655e;
  --station-pine: #465e50;
  --station-pine-deep: #263d34;
  --station-jade: #78948a;
  --station-clay: #a14f43;
  --station-clay-deep: #71352f;
  --station-gold: #c39a55;
  --station-stone: #a59478;
  --station-main-lamp-opacity-low: .08;
  --station-main-lamp-opacity-high: .14;
  --station-writing-desk-opacity: .06;
  --station-scene-height: clamp(520px, calc(100dvh - 132px), 760px);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 920px;
  block-size: var(--station-scene-height);
  min-block-size: 520px;
  margin-inline: auto;
  overflow: clip;
  color: var(--station-ink);
  background: #d7ddd2;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  text-wrap: pretty;
}

.station-v2-scene,
.station-v2-scene * {
  box-sizing: border-box;
}

.station-v2-camera {
  --station-near-shift-x: 0px;
  --station-near-shift-y: 0px;
  --station-mid-shift-x: 0px;
  --station-mid-shift-y: 0px;
  --station-far-shift-x: 0px;
  --station-far-shift-y: 0px;
  --station-courier-anchor-x: 61%;
  --station-courier-anchor-y: 69%;
  --station-courier-hotspot-offset-y: -24px;
  --station-courier-shift-x: 0px;
  --station-courier-shift-y: 0px;
  --station-courier-scale: .9;
  --station-courier-opacity: 1;
  position: relative;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: inherit;
  overflow: hidden;
  perspective: 1050px;
  perspective-origin: 50% 43%;
  background:
    linear-gradient(180deg, rgba(255, 249, 229, .2), transparent 38%),
    #d7ddd2;
  touch-action: pan-y;
}

.station-v2-camera::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1.5%;
  background-image: url("./assets/world/station-isometric-v3.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 103%;
  transform: translate3d(var(--station-far-shift-x), var(--station-far-shift-y), 0) scale(1.015);
  transition: transform 220ms cubic-bezier(.2, .72, .26, 1);
}

.station-v2-camera::after {
  content: "";
  position: absolute;
  z-index: 35;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, .2), transparent 19% 73%, rgba(31, 49, 40, .2)),
    radial-gradient(ellipse at 50% 47%, transparent 36%, rgba(39, 55, 47, .11) 118%);
  box-shadow: inset 0 0 80px rgba(35, 48, 40, .12);
}

.station-v2-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 180ms cubic-bezier(.2, .72, .26, 1);
}

.station-v2-layer--far {
  z-index: 1;
  transform: translate3d(var(--station-far-shift-x), var(--station-far-shift-y), -70px) scale(1.06);
  transform-origin: center;
}

.station-v2-layer--mid {
  z-index: 5;
  transform: translate3d(var(--station-mid-shift-x), var(--station-mid-shift-y), 12px);
  transform-origin: 50% 55%;
}

.station-v2-layer--mid::before {
  content: "";
  position: absolute;
  inset: 46% 17% 16%;
  border-radius: 44% 44% 28% 28% / 28% 28% 18% 18%;
  opacity: .55;
  background:
    linear-gradient(180deg, rgba(255, 248, 228, .28), transparent 18%),
    linear-gradient(180deg, rgba(120, 108, 84, .08), transparent 32%),
    radial-gradient(circle at 50% 38%, rgba(247, 234, 206, .5), transparent 38%),
    linear-gradient(155deg, rgba(180, 159, 125, .58), rgba(108, 90, 62, .16));
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 233, .3),
    0 18px 30px rgba(33, 47, 39, .08);
  clip-path: polygon(14% 6%, 86% 6%, 96% 33%, 100% 74%, 83% 100%, 17% 100%, 0 74%, 4% 33%);
  pointer-events: none;
}

.station-v2-layer--mid::after {
  content: "";
  position: absolute;
  inset: 37% 28% auto;
  block-size: 15%;
  border-radius: 50%;
  opacity: .26;
  background: radial-gradient(ellipse, rgba(62, 84, 70, .22), transparent 70%);
  transform: scale(1.04);
  pointer-events: none;
}

.station-v2-layer--near {
  z-index: 10;
  transform: translate3d(var(--station-near-shift-x), var(--station-near-shift-y), 74px) scale(.985);
  transform-origin: 50% 60%;
}

.station-v2-sun-wash {
  position: absolute;
  inset: 2% 7% auto auto;
  inline-size: clamp(90px, 19vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .36;
  background: radial-gradient(circle, rgba(255, 230, 159, .86), rgba(255, 230, 159, 0) 68%);
  mix-blend-mode: screen;
}

.station-v2-ridge {
  position: absolute;
  inset-inline: -10%;
  transform-origin: center bottom;
}

.station-v2-ridge--back {
  inset-block-end: 55%;
  block-size: 22%;
  opacity: .1;
  background: #596e64;
  clip-path: polygon(0 90%, 12% 45%, 21% 73%, 34% 28%, 48% 75%, 63% 38%, 76% 69%, 90% 20%, 100% 72%, 100% 100%, 0 100%);
}

.station-v2-ridge--front {
  inset-block-end: 47%;
  block-size: 20%;
  opacity: .08;
  background: var(--station-pine-deep);
  clip-path: polygon(0 76%, 13% 42%, 24% 70%, 38% 29%, 51% 68%, 65% 39%, 77% 74%, 89% 36%, 100% 58%, 100% 100%, 0 100%);
}

.station-v2-water-edge {
  position: absolute;
  inset: auto 0 5%;
  block-size: 19%;
  opacity: .2;
  background:
    repeating-radial-gradient(ellipse at 50% 0, transparent 0 25px, rgba(234, 247, 239, .45) 27px 29px, transparent 31px 48px);
  mask-image: linear-gradient(to bottom, transparent, #000 38%, transparent);
}

/* Main house: always present, while the three stageable spaces grow around it. */
.station-v2-main-house {
  position: absolute;
  inset: 28% auto auto 50%;
  inline-size: clamp(188px, 43vw, 332px);
  block-size: clamp(144px, 33vw, 248px);
  transform: translateX(-50%);
  box-shadow: 0 22px 24px rgba(29, 42, 34, .14);
}

.station-v2-main-house::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 9% 2% 10%;
  block-size: 20%;
  border-radius: 50%;
  background: rgba(31, 43, 36, .24);
  transform: skewX(-18deg);
}

.station-v2-main-house::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 24% 7% 23%;
  block-size: 13%;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(90deg, transparent 14%, rgba(92, 67, 47, .24) 15% 18%, transparent 19% 81%, rgba(92, 67, 47, .24) 82% 85%, transparent 86%),
    linear-gradient(180deg, rgba(203, 176, 134, .95), rgba(133, 101, 67, .82));
  box-shadow: 0 7px 8px rgba(47, 41, 31, .16);
}

.station-v2-wall,
.station-v2-roof,
.station-v2-door,
.station-v2-window {
  position: absolute;
  display: block;
}

.station-v2-wall {
  inset: 38% 11% 7% 13%;
  border: 1px solid rgba(69, 54, 39, .38);
  background:
    linear-gradient(90deg, rgba(79, 55, 37, .16) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(166deg, #dfcaa2, #a98c66);
  clip-path: polygon(8% 0, 100% 10%, 90% 100%, 0 86%);
  box-shadow: inset 0 -18px 28px rgba(65, 47, 30, .17);
}

.station-v2-roof {
  background:
    repeating-linear-gradient(172deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 11px),
    linear-gradient(158deg, #607267, #263f36 70%);
}

.station-v2-roof--rear {
  z-index: 1;
  inset: 4% 13% 43% 18%;
  opacity: .72;
  clip-path: polygon(16% 6%, 78% 0, 100% 61%, 56% 100%, 0 64%);
}

.station-v2-roof--front {
  z-index: 3;
  inset: 11% 1% 47% 2%;
  clip-path: polygon(23% 2%, 77% 7%, 100% 60%, 61% 97%, 49% 76%, 36% 97%, 0 59%);
}

.station-v2-door {
  z-index: 2;
  inset: 53% auto 10% 45%;
  inline-size: 20%;
  border: 1px solid rgba(55, 34, 24, .55);
  background:
    linear-gradient(90deg, transparent 47%, rgba(36, 26, 20, .32) 48% 52%, transparent 53%),
    linear-gradient(165deg, #76553c, #4b3529);
  clip-path: polygon(10% 0, 100% 8%, 90% 100%, 0 91%);
}

.station-v2-door::after {
  content: "";
  position: absolute;
  inset: 44% 19% auto auto;
  inline-size: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--station-gold);
}

.station-v2-window {
  z-index: 2;
  inset: 51% 19% auto auto;
  inline-size: 18%;
  aspect-ratio: 1.22;
  border: clamp(3px, .75vw, 6px) solid #64513e;
  background:
    linear-gradient(90deg, transparent 45%, rgba(75, 55, 39, .55) 46% 54%, transparent 55%),
    linear-gradient(rgba(247, 210, 119, .55), rgba(203, 142, 74, .23));
  box-shadow: inset 0 0 16px rgba(255, 220, 132, .32);
  transform: skewY(4deg);
}

.station-v2-tree {
  position: absolute;
  inset-block-end: 17%;
  inline-size: clamp(85px, 22vw, 170px);
  block-size: clamp(150px, 36vw, 268px);
  opacity: .7;
  background:
    radial-gradient(ellipse at 48% 31%, #5b7365 0 17%, transparent 18%),
    radial-gradient(ellipse at 37% 46%, #3b574a 0 22%, transparent 23%),
    radial-gradient(ellipse at 63% 52%, #4b6657 0 24%, transparent 25%),
    linear-gradient(87deg, transparent 46%, #584b38 47% 54%, transparent 55%);
}

.station-v2-tree--left {
  inset-inline-start: -5%;
  transform: rotate(-4deg);
}

.station-v2-tree--right {
  inset-inline-end: -7%;
  opacity: .55;
  transform: scale(.86) rotate(5deg);
}

/* Three semantic station spaces, each with a visible 0 → 3 physical state. */
.station-v2-space {
  --station-space-height: 16%;
  --station-space-opacity: .28;
  --station-space-scale: .88;
  position: absolute;
  inline-size: clamp(92px, 23vw, 176px);
  block-size: clamp(82px, 19vw, 145px);
}

.station-v2-space--keepsake_gallery {
  inset: 39% auto auto 27%;
  transform: translateX(-50%);
}

.station-v2-space--courier_courtyard {
  inset: 39% auto auto 72%;
  transform: translateX(-50%);
}

.station-v2-space--creature_garden {
  inset: 63% auto auto 36%;
  transform: translateX(-50%);
}

.station-v2-space > i {
  position: absolute;
  display: block;
  pointer-events: none;
  transition:
    block-size 360ms cubic-bezier(.2, .74, .22, 1),
    opacity 260ms ease,
    transform 360ms cubic-bezier(.2, .74, .22, 1);
}

.station-v2-space-foundation {
  inset: auto 4% 2%;
  block-size: 28%;
  border: 1px solid rgba(83, 66, 46, .38);
  border-radius: 50%;
  background:
    repeating-linear-gradient(105deg, rgba(71, 58, 42, .13) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #c6b592, #88795e);
  box-shadow: 0 7px 0 rgba(75, 65, 49, .28);
}

.station-v2-space-building {
  inset: auto 15% 18%;
  block-size: var(--station-space-height);
  opacity: var(--station-space-opacity);
  transform: scale(var(--station-space-scale));
  transform-origin: center bottom;
  background: linear-gradient(160deg, #d6c39e, #8d7657);
}

.station-v2-space-building::before,
.station-v2-space-building::after,
.station-v2-space-prop::before,
.station-v2-space-prop::after {
  content: "";
  position: absolute;
  display: block;
}

.station-v2-space-light {
  inset: auto 24% 20%;
  block-size: 42%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 213, 116, .72), transparent 70%);
  mix-blend-mode: screen;
}

.station-v2-space-prop {
  inset: auto 12% 16%;
  block-size: 42%;
  opacity: var(--station-space-opacity);
  transform: scale(var(--station-space-scale));
  transform-origin: center bottom;
}

.station-v2-space--stage-unknown {
  opacity: .55;
}

.station-v2-space--stage-0 {
  --station-space-height: 13%;
  --station-space-opacity: .18;
  --station-space-scale: .74;
}

.station-v2-space--stage-0 .station-v2-space-foundation {
  border-style: dashed;
  background:
    linear-gradient(20deg, transparent 0 37%, rgba(58, 49, 38, .22) 38% 40%, transparent 41%),
    linear-gradient(160deg, #b7a684, #786b56);
  box-shadow: 0 5px 0 rgba(69, 61, 49, .25);
}

.station-v2-space--stage-0 .station-v2-space-building,
.station-v2-space--stage-0 .station-v2-space-prop { opacity: .32; }

.station-v2-space--stage-0 .station-v2-space-light {
  opacity: .08;
}

.station-v2-space--stage-1 {
  --station-space-height: 38%;
  --station-space-opacity: .72;
  --station-space-scale: .92;
}

.station-v2-space--stage-2 {
  --station-space-height: 61%;
  --station-space-opacity: .9;
  --station-space-scale: .97;
}

.station-v2-space--stage-3 {
  --station-space-height: 82%;
  --station-space-opacity: 1;
  --station-space-scale: 1;
}

.station-v2-space--stage-3 .station-v2-space-light {
  opacity: .62;
}

/* Keepsake gallery: open shelf pavilion. */
.station-v2-space--keepsake_gallery .station-v2-space-building {
  border-inline: 5px solid #68533d;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(80, 59, 40, .42) 21% 25%, transparent 26% 47%, rgba(80, 59, 40, .42) 48% 52%, transparent 53% 74%, rgba(80, 59, 40, .42) 75% 79%, transparent 80%),
    linear-gradient(170deg, rgba(225, 207, 173, .94), rgba(164, 137, 96, .88));
  clip-path: polygon(8% 16%, 92% 7%, 100% 100%, 0 91%);
}

.station-v2-space--keepsake_gallery .station-v2-space-building::before {
  inset: -22% -12% auto;
  block-size: 32%;
  background: linear-gradient(160deg, #5c6e63, #2c4339);
  clip-path: polygon(16% 0, 83% 9%, 100% 62%, 52% 100%, 0 63%);
}

.station-v2-space--keepsake_gallery .station-v2-space-building::after {
  inset: 43% 4% auto;
  block-size: 4px;
  background: #755d42;
  box-shadow: 0 16px 0 #755d42;
}

.station-v2-space--keepsake_gallery .station-v2-space-prop::before {
  inset: auto 16% 4%;
  inline-size: 13%;
  aspect-ratio: 1;
  border-radius: 50% 50% 42% 58%;
  background: #c5a85e;
  box-shadow: 25px -5px 0 #89987f, 49px 1px 0 #a66b58;
}

/* Courier courtyard: compact gate and sheltered staging court. */
.station-v2-space--courier_courtyard .station-v2-space-building {
  border: 4px solid #6a5038;
  border-block-start-width: 7px;
  background:
    linear-gradient(90deg, #bca47e 0 28%, transparent 29% 70%, #a98e68 71%),
    linear-gradient(168deg, #d8c29c, #957856);
  clip-path: polygon(6% 9%, 96% 0, 100% 96%, 70% 100%, 70% 40%, 32% 44%, 32% 100%, 0 91%);
}

.station-v2-space--courier_courtyard .station-v2-space-building::before {
  inset: -22% -10% auto;
  block-size: 31%;
  background: linear-gradient(158deg, #66766a, #2e443a);
  clip-path: polygon(15% 5%, 83% 0, 100% 56%, 52% 100%, 0 64%);
}

.station-v2-space--courier_courtyard .station-v2-space-building::after {
  inset: 39% 42% 0;
  background: #493a2d;
}

.station-v2-space--courier_courtyard .station-v2-space-prop::before {
  inset: auto 14% 3%;
  inline-size: 19%;
  block-size: 34%;
  border: 2px solid #70543a;
  border-radius: 3px 3px 8px 8px;
  background: #b17a4f;
  box-shadow: 38px -3px 0 -3px #7e957f;
}

/* Creature garden: low organic enclosure so it never reads as another house. */
.station-v2-space--creature_garden .station-v2-space-foundation {
  border-radius: 48% 52% 42% 58%;
  background:
    radial-gradient(circle at 28% 35%, rgba(112, 142, 102, .62) 0 10%, transparent 11%),
    radial-gradient(circle at 68% 54%, rgba(80, 116, 92, .5) 0 13%, transparent 14%),
    linear-gradient(160deg, #b9b08d, #718272);
}

.station-v2-space--creature_garden .station-v2-space-building {
  border: 3px solid rgba(68, 86, 72, .74);
  border-radius: 50% 50% 12px 12px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(69, 91, 77, .55) 48% 52%, transparent 53%),
    linear-gradient(145deg, rgba(208, 225, 203, .42), rgba(83, 113, 93, .18));
  clip-path: polygon(50% 0, 94% 35%, 100% 100%, 0 100%, 6% 35%);
}

.station-v2-space--creature_garden .station-v2-space-building::before {
  inset: 47% -5% auto;
  block-size: 3px;
  background: rgba(62, 83, 69, .62);
}

.station-v2-space--creature_garden .station-v2-space-prop::before {
  inset: auto 10% 2%;
  inline-size: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #708b69;
  box-shadow:
    18px -8px 0 -2px #9a6b53,
    38px 2px 0 -1px #54745d,
    58px -11px 0 -3px #c19358;
}

.station-v2-space--creature_garden .station-v2-space-prop::after {
  inset: auto 28% 0;
  block-size: 15%;
  border-radius: 50%;
  background: rgba(88, 132, 121, .62);
}

.station-v2-path {
  position: absolute;
  inset: 54% 24% -3%;
  opacity: .44;
  background:
    repeating-linear-gradient(96deg, rgba(91, 73, 48, .18) 0 1px, transparent 1px 22px),
    linear-gradient(to bottom, rgba(226, 208, 170, .84), rgba(145, 115, 76, .48));
  clip-path: polygon(43% 0, 57% 0, 84% 100%, 16% 100%);
  transform: perspective(380px) rotateX(58deg);
}

.station-v2-ambient {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.station-v2-ambient-mist {
  inset: 45% auto auto 50%;
  inline-size: clamp(220px, 44vw, 356px);
  block-size: clamp(54px, 10vw, 92px);
  opacity: .2;
  background: radial-gradient(ellipse at center, rgba(255, 245, 225, .42), transparent 70%);
  transform: translateX(-50%);
  animation: station-v2-mist 11s ease-in-out infinite;
}

.station-v2-ambient-fireflies {
  inset: 31% auto auto 67%;
  inline-size: clamp(72px, 12vw, 110px);
  block-size: clamp(96px, 18vw, 150px);
  opacity: .44;
  background:
    radial-gradient(circle at 24% 30%, rgba(255, 234, 160, .88) 0 4%, transparent 5%),
    radial-gradient(circle at 68% 18%, rgba(255, 236, 180, .62) 0 3%, transparent 4%),
    radial-gradient(circle at 51% 71%, rgba(255, 223, 124, .78) 0 3%, transparent 4%),
    radial-gradient(circle at 79% 55%, rgba(255, 241, 188, .58) 0 2.5%, transparent 3.5%);
  transform: translateX(-50%);
  animation: station-v2-fireflies 9s ease-in-out infinite 1.2s;
}

.station-v2-ambient-paper {
  z-index: 13;
  inset: 56% auto auto 49%;
  inline-size: clamp(14px, 2.4vw, 18px);
  block-size: clamp(18px, 3vw, 24px);
  border-radius: 2px;
  opacity: .42;
  background:
    linear-gradient(160deg, rgba(253, 247, 233, .92), rgba(230, 210, 171, .66));
  transform: translateX(-50%) rotate(-7deg);
  animation: station-v2-paper 7.2s ease-in-out infinite 2.1s;
}

.station-v2-ambient-glow {
  z-index: 12;
  inset: 55% auto auto 55%;
  inline-size: clamp(92px, 13vw, 138px);
  block-size: clamp(92px, 13vw, 138px);
  border-radius: 50%;
  opacity: .16;
  background: radial-gradient(circle, rgba(255, 220, 143, .72), transparent 68%);
  transform: translate(-50%, -50%) scale(.92);
  animation: station-v2-glow 4.8s ease-in-out infinite;
}

.station-v2-main-lamp {
  position: absolute;
  inset: 52% auto auto 55%;
  inline-size: clamp(28px, 6vw, 48px);
  block-size: clamp(64px, 14vw, 105px);
  transform: translateX(-50%);
}

.station-v2-main-lamp::before {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  block-size: 48%;
  border: 3px solid #4d4638;
  border-radius: 45% 45% 16% 16%;
  background: linear-gradient(rgba(245, 205, 113, .44), rgba(153, 91, 55, .18));
  box-shadow: 0 0 0 rgba(231, 181, 81, 0);
  transition: box-shadow 260ms ease, background 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.station-v2-main-lamp::after {
  content: "";
  position: absolute;
  inset: 43% 44% 0;
  background: #514637;
  box-shadow: -9px 0 0 -6px #514637, 9px 0 0 -6px #514637;
}

.station-v2-scene[data-station-v2-main-lamp] .station-v2-main-lamp::before,
.station-v2-scene[data-station-v2-state="arrived"] .station-v2-main-lamp::before {
  background: linear-gradient(rgba(255, 226, 141, .8), rgba(194, 115, 59, .38));
  box-shadow:
    0 0 18px rgba(244, 195, 90, .52),
    0 0 42px rgba(244, 195, 90, .25);
}

.station-v2-main-lamp[data-station-v2-feedback="traveling"]::before,
.station-v2-main-lamp[data-station-v2-feedback="arrived"]::before {
  animation: station-v2-lamp-breathe 5.6s ease-in-out infinite;
}

.station-v2-main-lamp[data-station-v2-feedback="reply_pending"]::before {
  opacity: .92;
  transform: translateY(-1px);
}

.station-v2-writing-desk {
  position: absolute;
  inset: 66% auto auto 47%;
  inline-size: clamp(62px, 13vw, 110px);
  block-size: clamp(40px, 8.5vw, 68px);
  transform: translateX(-50%) skewY(-4deg);
}

.station-v2-writing-desk::before {
  content: "";
  position: absolute;
  inset: 13% 0 37%;
  border: 2px solid #5f4632;
  background:
    linear-gradient(90deg, transparent 47%, rgba(74, 50, 32, .32) 48% 52%, transparent 53%),
    linear-gradient(170deg, #9c754d, #624630);
  box-shadow: 0 7px 8px rgba(42, 38, 30, .2);
}

.station-v2-writing-desk::after {
  content: "";
  position: absolute;
  inset: 24% 17% auto;
  block-size: 22%;
  border-radius: 1px;
  background: #f1e3c7;
  box-shadow: 0 0 0 rgba(255, 228, 154, 0);
  transform: rotate(-3deg);
  transition: box-shadow 200ms ease, opacity 180ms ease, transform 180ms ease;
}

.station-v2-layer--near.is-writing-desk-active .station-v2-writing-desk::after {
  box-shadow: 0 0 22px rgba(255, 219, 130, .7);
}

.station-v2-writing-desk[data-station-v2-feedback="reply_pending"]::after {
  opacity: 1;
  transform: rotate(-3deg) translateY(-1px);
}

.station-v2-layer--near::after {
  content: "";
  position: absolute;
  inset: 52% 29% auto;
  block-size: 28%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(239, 194, 91, .36), transparent 68%);
  transform: scale(.72);
  transition: opacity 260ms ease, transform 420ms ease;
}

.station-v2-scene[data-station-v2-departure-glow] .station-v2-layer--near::after {
  opacity: 1;
  transform: scale(1);
}

.station-v2-courier-hero {
  position: absolute;
  z-index: 14;
  inset: var(--station-courier-anchor-y) auto auto var(--station-courier-anchor-x);
  inline-size: clamp(128px, 31vw, 258px);
  block-size: auto;
  max-block-size: 52%;
  object-fit: contain;
  object-position: center bottom;
  opacity: var(--station-courier-opacity);
  transform:
    translate(-50%, -88%)
    translate3d(var(--station-courier-shift-x), var(--station-courier-shift-y), 0)
    scale(var(--station-courier-scale));
  animation: station-v2-arrive 540ms cubic-bezier(.18, .78, .24, 1) both;
}

.station-v2-courier-hero.is-idle {
  animation:
    station-v2-arrive 540ms cubic-bezier(.18, .78, .24, 1) both,
    station-v2-courier-idle 6.8s ease-in-out infinite 760ms;
}

.station-v2-layer--near.is-asset-unavailable::before {
  content: "信使形影暂隐";
  position: absolute;
  z-index: 14;
  inset: auto auto 24% 50%;
  padding: 8px 12px;
  border: 1px solid rgba(53, 69, 60, .24);
  border-radius: 999px;
  color: var(--station-ink-soft);
  background: rgba(255, 249, 237, .82);
  font-size: .7rem;
  transform: translateX(-50%);
}

/* Hotspots stay object-anchored; labels only bloom when the user intentionally interacts. */
.station-v2-hotspot {
  --station-hotspot-x: 50%;
  --station-hotspot-y: 50%;
  --station-label-shift-x: 0px;
  --station-label-shift-y: 14px;
  position: absolute;
  z-index: 42;
  display: grid;
  inset: var(--station-hotspot-y) auto auto var(--station-hotspot-x);
  inline-size: 52px;
  block-size: 52px;
  min-inline-size: 52px !important;
  min-block-size: 52px !important;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  color: var(--station-ink);
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}

.station-v2-hotspot::before {
  content: "";
  inline-size: 18px;
  aspect-ratio: 1;
  border: 4px solid rgba(255, 250, 237, .9);
  border-radius: 50%;
  background: var(--station-clay);
  opacity: .84;
  box-shadow:
    0 0 0 1px rgba(76, 53, 39, .28),
    0 4px 10px rgba(36, 43, 36, .25),
    0 0 0 8px rgba(255, 250, 237, .36);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, background 160ms ease;
}

.station-v2-hotspot::after {
  content: attr(data-station-v2-label);
  position: absolute;
  inset:
    calc(50% + var(--station-label-shift-y))
    auto auto
    calc(50% + var(--station-label-shift-x));
  min-inline-size: max-content;
  max-inline-size: 105px;
  padding: 4px 8px 5px;
  border: 1px solid rgba(51, 64, 56, .14);
  border-radius: 999px;
  color: var(--station-ink);
  background: rgba(255, 250, 239, .86);
  box-shadow: 0 5px 13px rgba(39, 49, 41, .12);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(.64rem, 2.2vw, .75rem);
  line-height: 1.1;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px) scale(.96);
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.station-v2-hotspot--lamp {
  --station-hotspot-x: 55%;
  --station-hotspot-y: 52%;
}

.station-v2-hotspot--keepsake_gallery {
  --station-hotspot-x: 27%;
  --station-hotspot-y: 39%;
}

.station-v2-hotspot--courier_courtyard {
  --station-hotspot-x: 72%;
  --station-hotspot-y: 39%;
}

.station-v2-hotspot--creature_garden {
  --station-hotspot-x: 36%;
  --station-hotspot-y: 62%;
}

.station-v2-hotspot--courier {
  --station-hotspot-x: 63%;
  --station-hotspot-y: 44%;
}

.station-v2-hotspot--current_letter {
  --station-hotspot-x: 47%;
  --station-hotspot-y: 65%;
}

.station-v2-scene[data-station-v2-state="arrived"] .station-v2-hotspot--courier::after,
.station-v2-scene[data-station-v2-state="reply_pending"] .station-v2-hotspot--current_letter::after {
  color: var(--station-clay-deep);
}

.station-v2-hotspot[data-station-space-stage="0"]::before {
  background: #8d826d;
  opacity: .7;
  box-shadow:
    0 0 0 1px rgba(76, 53, 39, .28),
    0 4px 10px rgba(36, 43, 36, .2),
    0 0 0 8px rgba(255, 250, 237, .3);
}

/*
 * V3 courtyard art is the station itself. Keep the semantic scene objects and
 * generous hit targets, but do not redraw the retired CSS model on top of the
 * painted architecture.
 */

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-ridge,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-water-edge,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-tree,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-house > *,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space > i,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-path {
  display: none;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-layer--mid::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-layer--mid::after,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-house::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-house::after,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-lamp::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-lamp::after,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-writing-desk::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-writing-desk::after,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-layer--near::after {
  content: none;
}


/*
 * The painted courtyard remains the base art. These two pseudo-elements per
 * space are restrained restoration marks: a dark/unfinished veil gives way
 * to shelves, lamps and garden life as that exact space advances from 0 to 3.
 */
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space {
  --station-growth-overlay-opacity: .72;
  --station-growth-props-opacity: .16;
  --station-growth-scale: .86;
  --station-growth-light: rgba(239, 187, 91, .2);
  --station-growth-veil: rgba(52, 57, 49, .34);
  --station-growth-prop-glow: 0 0 8px rgba(218, 164, 70, .08);
  inline-size: clamp(104px, 27vw, 210px);
  block-size: clamp(82px, 20vw, 154px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
  transform-origin: center bottom;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::before {
  z-index: 1;
  inset: 10% 5% 8%;
  border: 1px solid rgba(82, 61, 39, .24);
  border-radius: 48% 52% 36% 40% / 42% 44% 30% 32%;
  opacity: var(--station-growth-overlay-opacity);
  background:
    repeating-linear-gradient(104deg, rgba(49, 45, 36, .16) 0 1px, transparent 1px 14px),
    linear-gradient(var(--station-growth-veil), var(--station-growth-veil)),
    linear-gradient(155deg, rgba(67, 70, 57, .34), rgba(112, 82, 49, .16));
  transform: scale(var(--station-growth-scale));
  animation: station-v2-growth-reveal 520ms cubic-bezier(.2, .74, .22, 1) both;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::after {
  z-index: 2;
  inset: 20% 13% 14%;
  border-radius: 42%;
  opacity: var(--station-growth-props-opacity);
  box-shadow: var(--station-growth-prop-glow);
  transform: translateY(2px) scale(var(--station-growth-scale));
  animation:
    station-v2-growth-reveal 560ms cubic-bezier(.2, .74, .22, 1) both,
    station-v2-growth-breathe 6.4s ease-in-out infinite 700ms;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--keepsake_gallery {
  inset: 43% auto auto 23%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--keepsake_gallery::after {
  background:
    radial-gradient(circle at 24% 30%, var(--station-growth-light) 0 7%, transparent 9%),
    radial-gradient(circle at 72% 62%, rgba(197, 157, 76, .7) 0 5%, transparent 7%),
    linear-gradient(180deg, transparent 25%, rgba(91, 65, 40, .56) 26% 30%, transparent 31% 57%, rgba(91, 65, 40, .5) 58% 62%, transparent 63%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--courier_courtyard {
  inset: 45% auto auto 78%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--courier_courtyard::before {
  border-radius: 16% 24% 38% 32%;
  background:
    linear-gradient(var(--station-growth-veil), var(--station-growth-veil)),
    linear-gradient(90deg, transparent 0 15%, rgba(83, 57, 37, .42) 16% 21%, transparent 22% 78%, rgba(83, 57, 37, .42) 79% 84%, transparent 85%),
    linear-gradient(155deg, rgba(58, 69, 58, .34), rgba(120, 83, 49, .18));
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--courier_courtyard::after {
  background:
    radial-gradient(circle at 18% 30%, var(--station-growth-light) 0 7%, transparent 9%),
    radial-gradient(circle at 82% 28%, var(--station-growth-light) 0 7%, transparent 9%),
    linear-gradient(90deg, transparent 12%, rgba(143, 76, 50, .68) 13% 30%, transparent 31% 55%, rgba(94, 112, 83, .65) 56% 76%, transparent 77%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--creature_garden {
  inset: 61% auto auto 23%;
  inline-size: clamp(112px, 29vw, 222px);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--creature_garden::before {
  border-color: rgba(67, 91, 68, .24);
  border-radius: 52% 48% 44% 56%;
  background:
    linear-gradient(var(--station-growth-veil), var(--station-growth-veil)),
    radial-gradient(circle at 28% 48%, rgba(77, 105, 71, .5) 0 15%, transparent 17%),
    radial-gradient(circle at 70% 58%, rgba(116, 129, 77, .44) 0 18%, transparent 20%),
    linear-gradient(160deg, rgba(64, 77, 60, .3), rgba(127, 99, 57, .14));
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--creature_garden::after {
  background:
    radial-gradient(circle at 18% 42%, var(--station-growth-light) 0 5%, transparent 7%),
    radial-gradient(circle at 48% 28%, rgba(231, 190, 104, .58) 0 4%, transparent 6%),
    radial-gradient(circle at 72% 55%, rgba(190, 117, 71, .64) 0 7%, transparent 9%),
    radial-gradient(ellipse at 50% 80%, rgba(68, 111, 76, .68) 0 30%, transparent 32%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--stage-0 {
  --station-growth-overlay-opacity: .78;
  --station-growth-props-opacity: .1;
  --station-growth-scale: .82;
  --station-growth-light: rgba(142, 121, 86, .12);
  --station-growth-veil: rgba(40, 47, 41, .58);
  --station-growth-prop-glow: none;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--stage-1 {
  --station-growth-overlay-opacity: .52;
  --station-growth-props-opacity: .42;
  --station-growth-scale: .9;
  --station-growth-light: rgba(235, 174, 76, .38);
  --station-growth-veil: rgba(69, 65, 49, .3);
  --station-growth-prop-glow: 0 0 10px rgba(222, 164, 67, .16);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--stage-2 {
  --station-growth-overlay-opacity: .3;
  --station-growth-props-opacity: .72;
  --station-growth-scale: .97;
  --station-growth-light: rgba(247, 192, 85, .62);
  --station-growth-veil: rgba(75, 67, 45, .14);
  --station-growth-prop-glow: 0 0 16px rgba(235, 170, 64, .24);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--stage-3 {
  --station-growth-overlay-opacity: .12;
  --station-growth-props-opacity: 1;
  --station-growth-scale: 1;
  --station-growth-light: rgba(255, 207, 105, .86);
  --station-growth-veil: rgba(89, 68, 34, .04);
  --station-growth-prop-glow: 0 0 24px rgba(246, 180, 66, .34);
}

/* Growth is represented by named courtyard furnishings, not a tint over the art. */
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space::after {
  content: none !important;
}

.station-v2-stage-entity {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: .88;
  transform-origin: center bottom;
  animation: station-v2-entity-arrive 420ms cubic-bezier(.2, .74, .22, 1) both;
}

.station-v2-stage-entity[hidden] { display: none; }

.station-v2-stage-entity--foundation {
  inset: auto 11% 8%;
  block-size: 24%;
  border: 1px dashed rgba(82, 68, 48, .48);
  border-radius: 44% 48% 38% 42%;
  background: repeating-linear-gradient(105deg, rgba(105, 88, 59, .18) 0 2px, transparent 2px 12px);
}

.station-v2-stage-entity--lamp {
  inset: 23% auto auto 18%;
  inline-size: 13px;
  block-size: 20px;
  border: 2px solid rgba(99, 64, 34, .72);
  border-radius: 5px 5px 7px 7px;
  background: radial-gradient(circle at 50% 56%, #ffd477 0 26%, rgba(224, 151, 57, .72) 28% 52%, transparent 55%);
  box-shadow: 0 0 10px rgba(242, 181, 75, .3);
}

.station-v2-stage-entity--desk {
  inset: auto 20% 19% auto;
  inline-size: 43%;
  block-size: 13%;
  border-block-start: 4px solid #76543a;
  border-inline: 3px solid rgba(83, 57, 39, .76);
  transform: skewY(-5deg);
}

.station-v2-stage-entity--material {
  inset: auto auto 17% calc(18% + var(--station-entity-step, 0%));
  inline-size: 18px;
  block-size: 14px;
  border: 1px solid rgba(76, 53, 36, .65);
  background: linear-gradient(150deg, #b99968, #755438);
  box-shadow: inset 0 3px rgba(238, 214, 164, .34), 0 3px 4px rgba(45, 41, 32, .18);
}

.station-v2-stage-entity--material[data-station-v2-entity-index="1"] { --station-entity-step: 22%; bottom: 12%; }
.station-v2-stage-entity--material[data-station-v2-entity-index="2"] { --station-entity-step: 44%; bottom: 20%; }

.station-v2-stage-entity--resident {
  inset: auto auto 18% calc(18% + var(--station-resident-step, 0%));
  inline-size: 22px;
  block-size: 13px;
  border-radius: 55% 48% 45% 52%;
  background: #6f7154;
  box-shadow: 0 3px 3px rgba(39, 48, 39, .2);
}

.station-v2-stage-entity--resident::before {
  content: "";
  position: absolute;
  inset: -7px 1px auto auto;
  inline-size: 10px;
  block-size: 11px;
  border-radius: 55% 55% 44% 44%;
  background: inherit;
  clip-path: polygon(0 28%, 18% 0, 42% 30%, 72% 0, 100% 34%, 91% 100%, 10% 100%);
}

.station-v2-stage-entity--resident::after {
  content: "";
  position: absolute;
  inset: 2px auto auto -8px;
  inline-size: 11px;
  block-size: 6px;
  border: 3px solid #6f7154;
  border-inline-end: 0;
  border-block-end: 0;
  border-radius: 9px 0 0;
}

.station-v2-stage-entity--resident[data-station-v2-entity-index="1"] { --station-resident-step: 30%; bottom: 11%; background: #8b684d; }
.station-v2-stage-entity--resident[data-station-v2-entity-index="2"] { --station-resident-step: 55%; bottom: 23%; background: #536b61; }

.station-v2-stage-entity--flourish {
  inset: 7% auto auto 50%;
  inline-size: 58px;
  block-size: 28px;
  background:
    linear-gradient(100deg, transparent 0 48%, rgba(96, 60, 39, .72) 49% 52%, transparent 53%) 7px 0 / 14px 21px no-repeat,
    linear-gradient(100deg, transparent 0 48%, rgba(96, 60, 39, .72) 49% 52%, transparent 53%) 37px 2px / 14px 20px no-repeat,
    radial-gradient(ellipse at 25% 70%, #bd694f 0 7px, #8d493b 8px 10px, transparent 11px),
    radial-gradient(ellipse at 75% 72%, #d49b50 0 7px, #9b6335 8px 10px, transparent 11px);
  transform: translateX(-50%);
}

.station-v2-space--creature_garden .station-v2-stage-entity--material {
  z-index: 4;
  bottom: 34%;
}

.station-v2-space--creature_garden .station-v2-stage-entity--resident {
  z-index: 5;
  bottom: 12%;
}

.station-v2-scene[data-station-v2-growth-level="0"] {
  --station-main-lamp-opacity-low: .03;
  --station-main-lamp-opacity-high: .07;
  --station-writing-desk-opacity: .03;
}

.station-v2-scene[data-station-v2-growth-level="1"] {
  --station-main-lamp-opacity-low: .14;
  --station-main-lamp-opacity-high: .25;
  --station-writing-desk-opacity: .14;
}

.station-v2-scene[data-station-v2-growth-level="2"] {
  --station-main-lamp-opacity-low: .19;
  --station-main-lamp-opacity-high: .32;
  --station-writing-desk-opacity: .2;
}

.station-v2-scene[data-station-v2-growth-level="3"] {
  --station-main-lamp-opacity-low: .26;
  --station-main-lamp-opacity-high: .42;
  --station-writing-desk-opacity: .28;
}

.station-v2-scene[data-station-v2-growth-level="0"] .station-v2-camera::after {
  background:
    linear-gradient(180deg, rgba(41, 50, 43, .24), transparent 24% 60%, rgba(24, 36, 31, .4)),
    radial-gradient(ellipse at 50% 47%, transparent 24%, rgba(33, 45, 38, .25) 108%);
}

.station-v2-scene[data-station-v2-growth-level="1"] .station-v2-camera::after {
  background:
    linear-gradient(180deg, rgba(255, 244, 213, .08), transparent 24% 72%, rgba(34, 48, 40, .2)),
    radial-gradient(ellipse at 53% 55%, rgba(240, 190, 91, .04), transparent 58%);
}

.station-v2-scene[data-station-v2-growth-level="2"] .station-v2-camera::after {
  background:
    linear-gradient(180deg, rgba(255, 239, 196, .12), transparent 28% 76%, rgba(37, 49, 41, .16)),
    radial-gradient(ellipse at 53% 55%, rgba(241, 180, 72, .07), transparent 62%);
}

.station-v2-scene[data-station-v2-growth-level="3"] .station-v2-camera::after {
  background:
    linear-gradient(180deg, rgba(255, 232, 174, .2), transparent 34% 82%, rgba(55, 49, 35, .1)),
    radial-gradient(ellipse at 53% 55%, rgba(246, 177, 61, .16), transparent 68%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-main-lamp {
  inset: 43% auto auto 55%;
  inline-size: clamp(54px, 14vw, 118px);
  block-size: clamp(54px, 14vw, 118px);
  border-radius: 50%;
  opacity: var(--station-main-lamp-opacity-high);
  background: radial-gradient(circle, rgba(255, 214, 120, .7), transparent 68%);
  transform: translate(-50%, -50%);
  animation: station-v2-glow 5.6s ease-in-out infinite;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-writing-desk {
  inset: 62% auto auto 47%;
  inline-size: clamp(72px, 17vw, 142px);
  block-size: clamp(52px, 12vw, 98px);
  border-radius: 50%;
  opacity: var(--station-writing-desk-opacity);
  background: radial-gradient(ellipse, rgba(255, 221, 145, .72), transparent 70%);
  transform: translate(-50%, -50%);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-courier-hero {
  inset: var(--station-courier-anchor-y) auto auto var(--station-courier-anchor-x);
  inline-size: clamp(82px, 20vw, 168px);
  max-block-size: 30%;
  object-position: center bottom;
  opacity: var(--station-courier-opacity);
  transform:
    translate(-50%, -88%)
    translate3d(var(--station-courier-shift-x), var(--station-courier-shift-y), 0)
    scale(var(--station-courier-scale));
}

.station-v2-scene[data-station-v2-state="awaiting"] .station-v2-camera {
  --station-courier-shift-x: 6px;
  --station-courier-shift-y: -2px;
  --station-courier-scale: .88;
  --station-courier-opacity: .92;
}

.station-v2-scene[data-station-v2-state="traveling"] .station-v2-camera {
  --station-courier-shift-x: -16px;
  --station-courier-shift-y: 11px;
  --station-courier-scale: .7;
  --station-courier-opacity: .22;
}

.station-v2-scene[data-station-v2-state="arrived"] .station-v2-camera {
  --station-courier-shift-x: 0px;
  --station-courier-shift-y: -7px;
  --station-courier-scale: .96;
  --station-courier-opacity: 1;
}

.station-v2-scene[data-station-v2-state="reply_pending"] .station-v2-camera {
  --station-courier-shift-x: -28px;
  --station-courier-shift-y: -8px;
  --station-courier-scale: .9;
  --station-courier-opacity: .9;
}

.station-v2-camera[data-station-v2-layout="courtyard"]
  .station-v2-courier-hero.is-idle[data-station-v2-presence="away"] {
  animation: station-v2-courier-away 620ms cubic-bezier(.2, .72, .24, 1) both;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot::before {
  inline-size: 10px;
  border: 2px solid rgba(255, 250, 237, .94);
  opacity: .72;
  box-shadow:
    0 0 0 1px rgba(76, 53, 39, .24),
    0 3px 8px rgba(36, 43, 36, .24),
    0 0 0 4px rgba(255, 250, 237, .3);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot:hover::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot:focus-visible::before,
.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot[data-station-v2-selected]::before {
  opacity: 1;
  transform: scale(1.35);
  box-shadow:
    0 0 0 1px rgba(76, 53, 39, .3),
    0 5px 12px rgba(36, 43, 36, .28),
    0 0 0 7px rgba(255, 250, 237, .5),
    0 0 0 10px rgba(161, 79, 67, .16);
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--lamp {
  --station-hotspot-x: 55%;
  --station-hotspot-y: 43%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--keepsake_gallery {
  --station-hotspot-x: 23%;
  --station-hotspot-y: 43%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--courier_courtyard {
  --station-hotspot-x: 78%;
  --station-hotspot-y: 45%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--creature_garden {
  --station-hotspot-x: 23%;
  --station-hotspot-y: 59%;
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--courier {
  --station-hotspot-x: var(--station-courier-anchor-x);
  --station-hotspot-y: calc(var(--station-courier-anchor-y) + var(--station-courier-hotspot-offset-y));
  transform:
    translate(-50%, -50%)
    translate(var(--station-courier-shift-x), var(--station-courier-shift-y));
}

.station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot--current_letter {
  --station-hotspot-x: 47%;
  --station-hotspot-y: 62%;
}

.station-v2-hotspot:hover::before,
.station-v2-hotspot:focus-visible::before,
.station-v2-hotspot[data-station-v2-selected]::before {
  transform: scale(1.2);
  box-shadow:
    0 0 0 1px rgba(76, 53, 39, .32),
    0 6px 15px rgba(36, 43, 36, .3),
    0 0 0 10px rgba(255, 250, 237, .56),
    0 0 0 13px rgba(161, 79, 67, .2);
}

.station-v2-hotspot:hover::after,
.station-v2-hotspot:focus-visible::after,
.station-v2-hotspot[data-station-v2-selected]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px) scale(1);
  background: rgba(255, 249, 239, .96);
}

.station-v2-hotspot:active::before {
  transform: scale(.92);
}

.station-v2-hotspot:active::after {
  transform: translateX(-50%) translateY(1px);
}

#v2CoreRoot .station-v2-hotspot:focus-visible {
  outline: 3px solid rgba(255, 250, 237, .95);
  outline-offset: 0;
  box-shadow: 0 0 0 5px rgba(52, 75, 63, .72);
}

.station-v2-update-status {
  position: absolute;
  z-index: 45;
  inset: 14px 50% auto auto;
  max-inline-size: min(calc(100% - 32px), 520px);
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(116, 70, 54, .18);
  border-radius: 999px;
  color: #75483d;
  background: rgba(255, 248, 234, .86);
  box-shadow: 0 8px 20px rgba(43, 53, 45, .12);
  font-size: .7rem;
  line-height: 1.45;
  text-align: center;
  transform: translateX(50%);
}

.station-v2-update-status:empty {
  display: none;
}

/* Construction guidance remains visible without turning the station into a task list. */
.station-v2-hotspot--keepsake_gallery::after,
.station-v2-hotspot--courier_courtyard::after,
.station-v2-hotspot--creature_garden::after {
  opacity: .88;
  transform: translateX(-50%) translateY(0) scale(1);
}

.station-v2-build-overview {
  position: absolute;
  z-index: 46;
  inset: max(14px, env(safe-area-inset-top)) auto auto 14px;
  min-block-size: 44px;
  max-inline-size: min(calc(100% - 28px), 300px);
  padding: 9px 14px;
  border: 1px solid rgba(52, 68, 58, .25) !important;
  border-radius: 999px;
  color: var(--station-ink);
  background: rgba(255, 249, 236, .92);
  box-shadow: 0 8px 20px rgba(38, 50, 42, .14);
  font-size: clamp(.72rem, 2.6vw, .84rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  touch-action: manipulation;
}

.station-v2-build-overview[aria-pressed="true"] {
  border-color: rgba(113, 53, 47, .62) !important;
  color: var(--station-clay-deep);
}

.station-v2-initial-choice {
  position: absolute;
  z-index: 47;
  inset: max(66px, calc(env(safe-area-inset-top) + 58px)) 50% auto auto;
  display: flex;
  align-items: center;
  inline-size: min(calc(100% - 32px), 460px);
  min-block-size: 44px;
  gap: 10px;
  margin: 0;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(113, 76, 55, .25);
  border-radius: 14px;
  color: var(--station-ink);
  background: rgba(255, 247, 229, .94);
  box-shadow: 0 9px 24px rgba(43, 51, 43, .16);
  font-size: clamp(.74rem, 2.8vw, .88rem);
  line-height: 1.5;
  transform: translateX(50%);
}

.station-v2-initial-choice-dismiss {
  flex: 0 0 auto;
  min-inline-size: 44px;
  min-block-size: 44px;
  margin-inline-start: auto;
  padding: 6px 9px;
  border: 1px solid rgba(82, 66, 48, .22) !important;
  border-radius: 10px;
  color: var(--station-ink-soft);
  background: rgba(255, 252, 244, .78);
  touch-action: manipulation;
}

.station-v2-construction {
  animation: station-v2-construction 1.1s cubic-bezier(.2, .74, .22, 1) both;
  animation-delay: var(--station-construction-delay, 0ms);
}

.station-v2-construction-status {
  position: absolute;
  z-index: 45;
  inset: auto 50% 18px auto;
  max-inline-size: calc(100% - 32px);
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(63, 91, 75, .24);
  border-radius: 999px;
  color: var(--station-pine-deep);
  background: rgba(246, 241, 224, .92);
  font-size: .74rem;
  line-height: 1.4;
  text-align: center;
  transform: translateX(50%);
}

.station-v2-build-space-list,
.station-v2-build-resources {
  display: grid;
  gap: 8px;
  margin-block-start: 14px;
}

.station-v2-build-space-row {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(53, 72, 61, .18) !important;
  border-radius: 12px;
  color: var(--station-ink);
  background: rgba(255, 251, 241, .68);
  font-size: .82rem;
  line-height: 1.5;
  text-align: start;
  touch-action: manipulation;
}

.station-v2-build-space-row[aria-current="step"] {
  border-inline-start: 4px solid var(--station-clay) !important;
  background: rgba(250, 240, 218, .86);
}

.station-v2-build-resource-row {
  min-block-size: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(73, 83, 70, .14);
  border-radius: 10px;
  color: var(--station-ink-soft);
  background: rgba(255, 253, 247, .58);
  font-size: .78rem;
  line-height: 1.55;
}

.station-v2-build-return {
  min-block-size: 44px;
  margin-block-start: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(53, 72, 61, .2) !important;
  border-radius: 10px;
  color: var(--station-pine-deep);
  background: rgba(245, 240, 226, .72);
  touch-action: manipulation;
}

#v2CoreRoot .station-v2-build-overview:focus-visible,
#v2CoreRoot .station-v2-initial-choice-dismiss:focus-visible,
#v2CoreRoot .station-v2-build-space-row:focus-visible,
#v2CoreRoot .station-v2-build-return:focus-visible {
  outline: 3px solid rgba(49, 83, 69, .55);
  outline-offset: 3px;
}

/* One sibling narrative sheet. It sits above the persistent app navigation. */
.station-v2-sheet-backdrop {
  position: fixed;
  z-index: 130;
  inset: calc(env(safe-area-inset-top) + 62px) 50% calc(70px + max(16px, env(safe-area-inset-bottom)));
  inline-size: min(100vw, 768px);
  background: linear-gradient(180deg, rgba(24, 34, 29, .08), rgba(24, 34, 29, .48));
  transform: translateX(50%);
  animation: station-v2-backdrop-in 180ms ease both;
}

.station-v2-sheet {
  position: fixed;
  z-index: 131;
  inset: auto 50% calc(70px + max(16px, env(safe-area-inset-bottom)) + 8px) auto;
  display: grid;
  inline-size: min(calc(100vw - 24px), 710px);
  max-block-size: min(58dvh, 520px);
  gap: 0;
  padding: 14px clamp(18px, 5vw, 34px) max(18px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(53, 66, 57, .18);
  border-radius: 24px 24px 7px 7px;
  color: var(--station-ink);
  background:
    linear-gradient(90deg, rgba(49, 68, 57, .025) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(160deg, rgba(255, 252, 244, .98), rgba(239, 231, 214, .98));
  box-shadow: 0 -22px 58px rgba(30, 41, 34, .24);
  transform: translateX(50%);
  animation: station-v2-sheet-in 260ms cubic-bezier(.18, .76, .22, 1) both;
  scrollbar-width: thin;
}

.station-v2-sheet-drag {
  inline-size: 42px;
  block-size: 5px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(52, 66, 57, .25);
}

.station-v2-sheet-close {
  position: absolute;
  inset: 12px 14px auto auto;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px !important;
  min-block-size: 44px !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(52, 66, 57, .12) !important;
  border-radius: 50%;
  color: transparent;
  background: rgba(255, 250, 240, .72);
}

.station-v2-sheet-close::before,
.station-v2-sheet-close::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 17px;
  block-size: 1.5px;
  background: var(--station-ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

.station-v2-sheet-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.station-v2-sheet-eyebrow {
  margin: 0 52px 7px 0;
  color: var(--station-clay);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
}

.station-v2-sheet-title {
  max-inline-size: 17ch;
  margin: 0;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "FangSong", serif;
  font-size: clamp(1.5rem, 5.8vw, 2.25rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: .03em;
}

.station-v2-sheet-detail {
  max-inline-size: 42em;
  margin: 12px 0 0;
  color: var(--station-ink-soft);
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(.9rem, 3.1vw, 1rem);
  line-height: 1.75;
}

.station-v2-sheet-status {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-inline-start: 2px solid rgba(161, 79, 67, .42);
  color: #774b41;
  background: rgba(255, 250, 239, .46);
  font-size: .75rem;
  line-height: 1.55;
}

.station-v2-primary-action {
  inline-size: 100%;
  min-block-size: 50px !important;
  margin-block-start: 16px;
  padding: 12px 20px;
  border: 1px solid rgba(107, 46, 38, .58) !important;
  border-radius: 5px 18px 5px 18px;
  color: #fff9ed;
  background: linear-gradient(138deg, var(--station-clay), var(--station-clay-deep));
  box-shadow: 0 10px 24px rgba(110, 54, 43, .2);
  font-weight: 700;
  letter-spacing: .08em;
  touch-action: manipulation;
}

.station-v2-primary-action:hover {
  opacity: .94;
}

.station-v2-primary-action:active {
  transform: translateY(1px);
}

.station-v2-primary-action[aria-busy="true"] {
  cursor: wait;
  opacity: .72;
}

#v2CoreRoot .station-v2-primary-action:focus-visible,
#v2CoreRoot .station-v2-sheet-close:focus-visible {
  outline: 3px solid rgba(49, 83, 69, .48);
  outline-offset: 3px;
}

/* Account-scoped station themes are a paint layer; semantic scene objects and hotspots stay put. */
.station-v2-theme-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: paint;
}

.station-v2-theme-layer[data-station-v2-theme-layer="active"],
.station-v2-theme-layer[data-station-v2-theme-layer="outgoing"] {
  visibility: visible;
}

.station-v2-theme-layer[data-station-v2-theme-layer="active"] {
  z-index: 3;
}

.station-v2-theme-layer[data-station-v2-theme-layer="outgoing"] {
  z-index: 2;
}

.station-v2-theme-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.station-v2-theme-image--objects[hidden] {
  display: none;
}

.station-v2-theme-structure {
  position: absolute;
  z-index: 4;
  display: block;
  inline-size: clamp(96px, 25%, 190px);
  aspect-ratio: 384 / 341;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position:
    calc(-1 * var(--station-theme-atlas-x))
    calc(-1 * var(--station-theme-atlas-y));
  pointer-events: none;
}

.station-v2-theme-structure[data-station-v2-theme-structure="keepsake_gallery"],
.station-v2-theme-structure[data-station-v2-preview-structure="keepsake_gallery"] {
  inset: 34% auto auto 9%;
}

.station-v2-theme-structure[data-station-v2-theme-structure="courier_courtyard"],
.station-v2-theme-structure[data-station-v2-preview-structure="courier_courtyard"] {
  inset: 34% 8% auto auto;
}

.station-v2-theme-structure[data-station-v2-theme-structure="creature_garden"],
.station-v2-theme-structure[data-station-v2-preview-structure="creature_garden"] {
  inset: auto auto 10% 24%;
}

.station-v2-theme-entry {
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-start: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(53, 72, 61, .24) !important;
  border-radius: 12px;
  color: var(--station-pine-deep);
  background: rgba(255, 251, 240, .76);
  font-weight: 700;
  letter-spacing: .06em;
  touch-action: manipulation;
}

.station-v2-theme-modal {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  min-inline-size: 0;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--station-ink);
  background: rgba(24, 34, 29, .88);
}

.station-v2-theme-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
  align-self: center;
  inline-size: min(100%, 900px);
  min-inline-size: 0;
  margin: auto;
  padding: clamp(16px, 4vw, 32px);
  gap: 12px;
  border: 1px solid rgba(255, 250, 237, .24);
  border-radius: 24px;
  background: linear-gradient(160deg, #fffaf0, #e9deca);
  box-shadow: 0 24px 72px rgba(13, 21, 17, .42);
}

.station-v2-theme-close,
.station-v2-theme-heading,
.station-v2-theme-status,
.station-v2-theme-choices,
.station-v2-theme-current,
.station-v2-theme-full,
.station-v2-theme-readonly,
.station-v2-theme-actions {
  grid-column: 1 / -1;
}

.station-v2-theme-close {
  justify-self: start;
  min-block-size: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(53, 72, 61, .22) !important;
  border-radius: 999px;
  color: var(--station-pine-deep);
  background: rgba(255, 253, 247, .76);
}

.station-v2-theme-heading {
  margin: 0;
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
}

.station-v2-theme-status,
.station-v2-theme-readonly {
  margin: 0;
  color: var(--station-ink-soft);
  line-height: 1.55;
}

.station-v2-theme-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.station-v2-theme-choice {
  min-block-size: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(53, 72, 61, .2) !important;
  border-radius: 12px;
  color: var(--station-ink);
  background: rgba(255, 253, 247, .68);
}

.station-v2-theme-choice[aria-pressed="true"] {
  border-color: var(--station-clay) !important;
  color: var(--station-clay-deep);
  background: #fff9e9;
  box-shadow: inset 0 0 0 1px var(--station-clay);
}

.station-v2-theme-viewport {
  position: relative;
  grid-column: 2;
  min-inline-size: 0;
  min-block-size: clamp(280px, 48dvh, 510px);
  overflow: hidden;
  border: 1px solid rgba(53, 72, 61, .2);
  border-radius: 18px;
  background: #d7ddd2;
  touch-action: pan-y;
}

.station-v2-theme-previous,
.station-v2-theme-next,
.station-v2-theme-current,
.station-v2-theme-full,
.station-v2-theme-actions button {
  min-block-size: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(53, 72, 61, .24) !important;
  border-radius: 12px;
  color: var(--station-pine-deep);
  background: rgba(255, 253, 247, .78);
  touch-action: manipulation;
}

.station-v2-theme-previous,
.station-v2-theme-next {
  align-self: center;
}

.station-v2-theme-current,
.station-v2-theme-full {
  inline-size: calc(50% - 6px);
}

.station-v2-theme-full {
  justify-self: end;
  margin-block-start: -56px;
}

.station-v2-theme-current[aria-pressed="true"],
.station-v2-theme-full[aria-pressed="true"] {
  border-color: var(--station-clay) !important;
  color: #fffaf0;
  background: var(--station-clay-deep);
}

.station-v2-theme-actions {
  display: grid;
  gap: 8px;
}

.station-v2-theme-disabled-copy {
  margin: 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--station-clay);
  background: rgba(255, 250, 239, .74);
}

.station-v2-theme-confirmation {
  position: absolute;
  z-index: 8;
  inset: 50% auto auto 50%;
  display: grid;
  inline-size: min(calc(100% - 32px), 440px);
  max-block-size: calc(100% - 32px);
  padding: clamp(18px, 5vw, 28px);
  gap: 10px;
  overflow-y: auto;
  border: 1px solid rgba(53, 72, 61, .24);
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: 0 18px 52px rgba(20, 31, 25, .34);
  transform: translate(-50%, -50%);
}

.station-v2-theme-confirmation h2,
.station-v2-theme-confirmation p {
  margin: 0;
}

.station-v2-theme-confirmation button {
  min-block-size: 44px;
}

.station-v2-theme-entry:focus-visible,
.station-v2-theme-close:focus-visible,
.station-v2-theme-choice:focus-visible,
.station-v2-theme-viewport:focus-visible,
.station-v2-theme-previous:focus-visible,
.station-v2-theme-next:focus-visible,
.station-v2-theme-current:focus-visible,
.station-v2-theme-full:focus-visible,
.station-v2-theme-actions button:focus-visible,
.station-v2-theme-confirmation button:focus-visible {
  outline: 3px solid rgba(49, 83, 69, .62);
  outline-offset: 3px;
}

@keyframes station-v2-construction {
  0% {
    opacity: .48;
    transform: translateX(-50%) translateY(8px) scale(.96);
  }
  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes station-v2-arrive {
  from {
    opacity: 0;
    transform:
      translate(-50%, -82%)
      translate3d(var(--station-courier-shift-x), calc(var(--station-courier-shift-y) + 12px), 0)
      scale(var(--station-courier-scale));
  }
  to {
    opacity: var(--station-courier-opacity);
    transform:
      translate(-50%, -88%)
      translate3d(var(--station-courier-shift-x), var(--station-courier-shift-y), 0)
      scale(var(--station-courier-scale));
  }
}

@keyframes station-v2-lamp-breathe {
  0%, 100% { opacity: .82; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes station-v2-mist {
  0%, 100% { opacity: .1; transform: translateX(-54%) translateY(0); }
  50% { opacity: .22; transform: translateX(-46%) translateY(-4px); }
}

@keyframes station-v2-fireflies {
  0%, 100% { opacity: .26; transform: translateX(-50%) translateY(0); }
  33% { opacity: .48; transform: translateX(-47%) translateY(-6px); }
  66% { opacity: .34; transform: translateX(-53%) translateY(5px); }
}

@keyframes station-v2-paper {
  0%, 100% { opacity: .18; transform: translateX(-50%) translateY(0) rotate(-7deg); }
  50% { opacity: .42; transform: translateX(-44%) translateY(-8px) rotate(5deg); }
}

@keyframes station-v2-glow {
  0%, 100% { opacity: var(--station-main-lamp-opacity-low); transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: var(--station-main-lamp-opacity-high); transform: translate(-50%, -50%) scale(1); }
}

@keyframes station-v2-courier-idle {
  0%, 100% {
    opacity: var(--station-courier-opacity);
    transform:
      translate(-50%, -88%)
      translate3d(var(--station-courier-shift-x), var(--station-courier-shift-y), 0)
      scale(var(--station-courier-scale));
  }
  50% {
    opacity: var(--station-courier-opacity);
    transform:
      translate(-50%, -88%)
      translate3d(var(--station-courier-shift-x), calc(var(--station-courier-shift-y) - 3px), 0)
      scale(var(--station-courier-scale));
  }
}

@keyframes station-v2-courier-away {
  from {
    opacity: .5;
    transform:
      translate(-50%, -88%)
      translate3d(calc(var(--station-courier-shift-x) + 8px), calc(var(--station-courier-shift-y) - 5px), 0)
      scale(var(--station-courier-scale));
  }
  to {
    opacity: var(--station-courier-opacity);
    transform:
      translate(-50%, -88%)
      translate3d(var(--station-courier-shift-x), var(--station-courier-shift-y), 0)
      scale(var(--station-courier-scale));
  }
}

@keyframes station-v2-growth-reveal {
  from { opacity: 0; transform: translateY(6px) scale(.86); }
}

@keyframes station-v2-entity-arrive {
  from { opacity: 0; transform: translateY(5px) scale(.92); }
}

@keyframes station-v2-growth-breathe {
  0%, 100% { transform: translateY(2px) scale(var(--station-growth-scale)); }
  50% { transform: translateY(-1px) scale(var(--station-growth-scale)); }
}

@keyframes station-v2-sheet-in {
  from { opacity: 0; transform: translate(50%, 28px); }
  to { opacity: 1; transform: translate(50%, 0); }
}

@keyframes station-v2-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 599px) {
  .station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-hotspot::after {
    padding: 3px 6px 4px;
    border-color: rgba(70, 60, 45, .1);
    border-radius: 4px;
    color: rgba(36, 49, 44, .9);
    background: rgba(255, 248, 231, .68);
    box-shadow: 0 2px 7px rgba(42, 46, 37, .08);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    opacity: .8;
    transform: translateX(-50%) translateY(-1px) scale(1);
  }

  .station-v2-camera[data-station-v2-layout="courtyard"]
    .station-v2-hotspot:hover::after,
  .station-v2-camera[data-station-v2-layout="courtyard"]
    .station-v2-hotspot:focus-visible::after,
  .station-v2-camera[data-station-v2-layout="courtyard"]
    .station-v2-hotspot[data-station-v2-selected]::after {
    color: var(--station-clay-deep);
    background: rgba(255, 249, 237, .96);
    box-shadow: 0 4px 12px rgba(48, 45, 34, .16);
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.04);
  }

  .station-v2-hotspot--lamp { --station-label-shift-x: -16px; }
  .station-v2-hotspot--courier_courtyard { --station-label-shift-x: -14px; }
  .station-v2-hotspot--creature_garden { --station-label-shift-x: 8px; }
  .station-v2-hotspot--courier { --station-label-shift-x: 10px; }
  .station-v2-hotspot--current_letter { --station-label-shift-x: -6px; }
}

.station-v2-scene[data-station-v2-touch-labels] .station-v2-hotspot::after {
  opacity: .8;
}

@media (max-width: 480px) {
  .station-v2-scene {
    --station-scene-height: clamp(520px, calc(100dvh - 151px), 760px);
  }

  .station-v2-camera::before {
    background-position: 50% 48%;
    background-size: auto 101%;
  }

  .station-v2-camera {
    --station-courier-anchor-x: 62%;
    --station-courier-anchor-y: 70%;
    --station-courier-hotspot-offset-y: -22px;
  }

  .station-v2-main-house { inset-block-start: 31%; }
  .station-v2-space--keepsake_gallery { inset-inline-start: 24%; }
  .station-v2-space--courier_courtyard { inset-inline-start: 75%; }
  .station-v2-space--creature_garden { inset-inline-start: 34%; }
  .station-v2-hotspot--keepsake_gallery { --station-hotspot-x: 24%; }
  .station-v2-hotspot--courier_courtyard { --station-hotspot-x: 75%; }
  .station-v2-hotspot--creature_garden { --station-hotspot-x: 34%; }
  .station-v2-hotspot--current_letter { --station-hotspot-x: 48%; }
  .station-v2-main-lamp { inset-inline-start: 57%; }
  .station-v2-writing-desk { inset-inline-start: 48%; }

  .station-v2-sheet {
    inline-size: calc(100vw - 16px);
    max-block-size: min(62dvh, 500px);
    padding-inline: 18px;
  }

  .station-v2-theme-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
    padding: 16px;
  }

  .station-v2-theme-choices {
    grid-template-columns: 1fr;
  }

  .station-v2-theme-viewport {
    grid-column: 1 / -1;
    min-block-size: min(54dvh, 420px);
  }

  .station-v2-theme-previous,
  .station-v2-theme-next {
    grid-column: auto;
  }

  .station-v2-theme-current,
  .station-v2-theme-full {
    grid-column: auto;
    inline-size: 100%;
    margin-block-start: 0;
  }
}

@media (max-width: 359px) {
  .station-v2-scene {
    --station-scene-height: max(420px, calc(100dvh - 148px));
    min-block-size: 420px;
  }

  .station-v2-main-house {
    inline-size: 138px;
  }

  .station-v2-camera {
    --station-courier-anchor-x: 60%;
    --station-courier-anchor-y: 71%;
    --station-courier-hotspot-offset-y: -20px;
  }

  .station-v2-space {
    inline-size: 84px;
    block-size: 76px;
  }

  .station-v2-hotspot {
    inline-size: 48px;
    block-size: 48px;
    min-inline-size: 48px !important;
    min-block-size: 48px !important;
  }

  .station-v2-hotspot::after {
    padding-inline: 6px;
    font-size: .62rem;
  }

  .station-v2-hotspot--lamp { --station-hotspot-x: 58%; }
  .station-v2-main-lamp { inset-inline-start: 58%; }
  .station-v2-sheet-title { font-size: 1.42rem; }
  .station-v2-sheet-detail { line-height: 1.64; }
}

@media (min-width: 600px) {
  .station-v2-hotspot::after {
    font-size: .75rem;
  }

  .station-v2-sheet {
    bottom: calc(70px + max(16px, env(safe-area-inset-bottom)) + 14px);
  }
}

@media (min-width: 768px) {
  .station-v2-scene {
    --station-scene-height: clamp(650px, calc(100dvh - 132px), 790px);
  }

  .station-v2-camera::before {
    background-size: auto 101%;
  }

  .station-v2-camera {
    --station-courier-anchor-x: 66%;
    --station-courier-anchor-y: 75%;
    --station-courier-hotspot-offset-y: -28px;
  }

  .station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-courier-hero {
    inset: var(--station-courier-anchor-y) auto auto var(--station-courier-anchor-x);
    inline-size: clamp(74px, 12vw, 108px);
    max-inline-size: 108px;
  }

  .station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--keepsake_gallery {
    inset-inline-start: 29%;
    inline-size: 20vw;
    max-inline-size: 156px;
  }

  .station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--courier_courtyard {
    inset-inline-start: 71%;
    inline-size: 20vw;
    max-inline-size: 156px;
  }

  .station-v2-camera[data-station-v2-layout="courtyard"] .station-v2-space--creature_garden {
    inset-inline-start: 38%;
    inline-size: 20vw;
    max-inline-size: 156px;
  }

  .station-v2-main-house { inset-block-start: 29%; }
  .station-v2-space--keepsake_gallery { inset-inline-start: 29%; }
  .station-v2-space--courier_courtyard { inset-inline-start: 71%; }
  .station-v2-space--creature_garden { inset-inline-start: 38%; }
  .station-v2-hotspot--keepsake_gallery { --station-hotspot-x: 29%; }
  .station-v2-hotspot--courier_courtyard { --station-hotspot-x: 71%; }
  .station-v2-hotspot--creature_garden { --station-hotspot-x: 38%; }
  .station-v2-main-lamp { inset-inline-start: 54%; }
  .station-v2-writing-desk { inset-inline-start: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .station-v2-main-lamp {
    animation: none !important;
  }

  .station-v2-camera::before,
  .station-v2-layer,
  .station-v2-ambient,
  .station-v2-space > i,
  .station-v2-space::before,
  .station-v2-space::after,
  .station-v2-main-lamp::before,
  .station-v2-writing-desk::after,
  .station-v2-layer--near::after,
  .station-v2-hotspot::before,
  .station-v2-courier-hero,
  .station-v2-construction,
  .station-v2-sheet,
  .station-v2-sheet-backdrop,
  .station-v2-theme-layer,
  .station-v2-theme-modal,
  .station-v2-theme-panel,
  .station-v2-theme-structure {
    animation: none !important;
    transition: none !important;
  }

  .station-v2-ambient {
    opacity: .12;
    transform: none !important;
  }
}

.station-v2-scene[data-station-v2-paused] .station-v2-main-lamp {
  animation-play-state: paused;
}

.station-v2-scene[data-station-v2-paused] .station-v2-ambient,
.station-v2-scene[data-station-v2-paused] .station-v2-main-lamp::before,
.station-v2-scene[data-station-v2-paused] .station-v2-courier-hero.is-idle,
.station-v2-scene[data-station-v2-paused] .station-v2-space::before,
.station-v2-scene[data-station-v2-paused] .station-v2-space::after {
  animation-play-state: paused;
}

@media (forced-colors: active) {
  .station-v2-scene {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .station-v2-camera::before {
    opacity: .2;
  }

  .station-v2-hotspot {
    forced-color-adjust: none;
  }

  .station-v2-hotspot::before {
    border-color: ButtonText;
    background: Highlight;
    box-shadow: none;
  }

  .station-v2-hotspot::after,
  .station-v2-update-status,
  .station-v2-sheet,
  .station-v2-theme-modal,
  .station-v2-theme-panel,
  .station-v2-theme-viewport,
  .station-v2-theme-confirmation {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
  }

  .station-v2-sheet-backdrop {
    background: rgba(0, 0, 0, .45);
  }

  .station-v2-build-overview,
  .station-v2-build-space-row,
  .station-v2-build-resource-row,
  .station-v2-build-return,
  .station-v2-initial-choice,
  .station-v2-construction-status,
  .station-v2-theme-entry,
  .station-v2-theme-close,
  .station-v2-theme-choice,
  .station-v2-theme-previous,
  .station-v2-theme-next,
  .station-v2-theme-current,
  .station-v2-theme-full,
  .station-v2-theme-actions button,
  .station-v2-theme-confirmation button {
    border: 1px solid CanvasText !important;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  #v2CoreRoot .station-v2-primary-action {
    border: 2px solid ButtonText !important;
    color: ButtonText;
    background: ButtonFace;
    forced-color-adjust: auto;
  }
}