.word-workshop {
  display: grid;
  justify-items: center;
  gap: clamp(.48rem, 1vw, .8rem);
  width: min(100%, 47rem);
}

.mail-route {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.5vw, 1.15rem);
}

.mail-route-item {
  display: grid;
  place-items: center;
  width: clamp(2.05rem, 4.6vw, 3.2rem);
  aspect-ratio: 1;
  border: 2px solid #8274b3;
  border-radius: 50%;
  color: #d6cafa;
  background: #342453;
  font-size: clamp(.95rem, 2.1vw, 1.5rem);
  font-weight: 900;
}

.mail-route-item.current {
  color: #281744;
  background: #e0efff;
  border-color: #9cdaff;
  outline: 2px solid #9cdaff;
  outline-offset: 3px;
}

.mail-route-item.sent {
  color: #1d4733;
  background: #c1ffd6;
  border-color: #80d5a7;
}

.post-letter {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(4rem, .6fr) minmax(0, 1.65fr);
  gap: clamp(.55rem, 2vw, 1.8rem);
  align-items: center;
  width: min(100%, 40rem);
  min-height: clamp(7rem, 18vw, 12rem);
  padding: clamp(.65rem, 2.4vw, 1.85rem);
  overflow: hidden;
  border: 3px solid #fff1d0;
  border-radius: clamp(.8rem, 2vw, 1.55rem);
  color: #37213f;
  background:
    linear-gradient(35deg, #f5d69855 31%, transparent 31%),
    linear-gradient(-35deg, #f5d69855 31%, transparent 31%),
    #fff7df;
  box-shadow: 0 .45rem 0 #c9a375, 0 .95rem 1.5rem #100c2988;
}

.post-picture {
  display: grid;
  place-items: center;
  font-size: clamp(3.1rem, 9vw, 6.4rem);
  line-height: 1.15;
  padding: .15em;
  border-radius: 26% 34% 29% 33%;
  background: #ffdc9a;
}

.post-address { display: grid; gap: .4rem; justify-items: start; min-width: 0; }
.post-model {
  padding-right: 1rem;
  color: #673964;
  font-size: clamp(1.05rem, 3vw, 2.35rem);
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1;
}

.post-slots { display: flex; flex-wrap: wrap; gap: clamp(.2rem, 1.1vw, .58rem); }
.post-slot {
  display: grid;
  place-items: center;
  width: clamp(1.75rem, 5.55vw, 4.15rem);
  height: clamp(2.35rem, 5.9vw, 4.4rem);
  border: 2px dashed #ad82ac;
  border-radius: .52rem;
  color: #7b5577;
  background: #fffdf8;
  font-size: clamp(.87rem, 2.75vw, 2.18rem);
  font-weight: 950;
}

.post-slot.inked {
  color: #2f214e;
  background: #d6f0ff;
  border: 2px solid #78a9d4;
}

.post-slot.next-slot {
  background: #fff0ba;
  border-color: #af650f;
}

.post-slot.repair {
  box-shadow: 0 0 0 3px #ffcf76;
  animation: post-repair .5s ease-out;
}

.post-stamp {
  position: absolute;
  right: clamp(.4rem, 1.5vw, 1.3rem);
  top: clamp(.4rem, 1.5vw, 1.3rem);
  display: grid;
  place-items: center;
  width: clamp(1.35rem, 3.6vw, 2.8rem);
  aspect-ratio: 1;
  border: 2px dashed #975a7f;
  border-radius: 16%;
  color: #7e416a;
  background: #f5d1e6;
  font-size: clamp(.8rem, 2vw, 1.55rem);
  font-weight: 950;
  transform: rotate(8deg);
}

.post-letter.stamped .post-stamp {
  color: #1c5237;
  border-color: #377a55;
  background: #baf0be;
  animation: post-stamp .47s cubic-bezier(.22, 1.2, .39, 1) both;
}
.post-letter.stamped { animation: letter-ready .55s ease-out; }

.nature-album {
  display: grid;
  grid-template-columns: minmax(8rem, .78fr) minmax(0, 1.22fr);
  width: min(100%, 55rem);
  gap: clamp(.65rem, 1.5vw, 1.15rem);
  align-items: center;
  padding: clamp(.65rem, 1.7vw, 1.22rem);
  border: 2px solid #85cfaa9e;
  border-radius: clamp(.9rem, 2vw, 1.65rem);
  background:
    radial-gradient(ellipse at 14% 110%, #2f765c 0 19%, transparent 47%),
    linear-gradient(145deg, #1b524a, #193941);
  box-shadow: inset 0 0 0 3px #082f3277, 0 .55rem 1.4rem #100c2988;
}

.nature-album figure {
  isolation: isolate;
  position: relative;
  width: 100%;
  max-width: 23rem;
  min-width: 0;
  transform: rotate(-2deg);
  background: #fff5db;
  box-shadow: 0 .32rem .8rem #0e271bc2;
  animation: album-photo-in .32s ease-out;
}

.nature-album figure img {
  height: clamp(7.25rem, 18vw, 12.75rem);
  object-position: center;
}

.nature-album figure figcaption {
  font-size: clamp(.98rem, 1.65vw, 1.35rem);
}

.nature-album.hinted figure { outline: 3px solid #ffe494; outline-offset: 3px; }
.nature-album.filed figure { animation: album-file .62s cubic-bezier(.2, .85, .4, 1.2) both; }
.animal-stamp {
  position: absolute;
  right: .4rem;
  bottom: .45rem;
  display: grid;
  place-items: center;
  width: clamp(1.75rem, 4vw, 2.9rem);
  aspect-ratio: 1;
  border: 2px solid #34825f;
  border-radius: 50%;
  background: #ccffbf;
  color: #173d28;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 950;
  animation: post-stamp .46s cubic-bezier(.22, 1.2, .39, 1) both;
}

.nature-album .album-bins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.3rem, .9vw, .65rem);
  width: 100%;
}

.nature-album .album-bin {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: clamp(3.8rem, 7.1vw, 5.4rem);
  gap: .16rem;
  padding: .35rem .22rem;
  color: #e7fff0;
  border: 2px solid #739e8b;
  border-radius: .7rem;
  background: #1b423d;
  box-shadow: 0 .2rem 0 #102c29;
}

.nature-album .album-bin.chosen {
  color: #173a31;
  border-color: #f4f7c7;
  background: #e1f1a9;
  outline: 0;
}

.nature-album .album-bin:focus-visible {
  outline: 3px solid #ffdf8a;
  outline-offset: 3px;
}

.nature-album .album-bin.filed { animation: letter-ready .55s ease-out; }
.nature-album .album-bin b { line-height: 1.08; overflow-wrap: anywhere; }
.nature-album .album-bin i {
  position: absolute;
  right: .15rem;
  top: .12rem;
  display: grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .16rem;
  border-radius: .5rem;
  color: #244e40;
  background: #c6f0bc;
  font-size: .68rem;
  font-style: normal;
}

.nature-album .album-strip { grid-column: 1 / -1; gap: clamp(.22rem, 1vw, .65rem); }
.album-page {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(1.8rem, 5vw, 3.55rem);
  aspect-ratio: 1.1;
  border: 2px solid #bbd6a7;
  border-radius: .38rem;
  color: #8eb8a3;
  background: #224c41;
}

.album-page.blank { border-style: dashed; }
.nature-album .album-page img { width: 100%; height: 100%; border-radius: .25rem; }
.album-page i { position: absolute; right: -.1rem; bottom: -.25rem; font-size: clamp(.72rem, 1.6vw, 1.05rem); font-style: normal; }
.album-page.new-page { animation: album-sticker .55s cubic-bezier(.2, 1.3, .4, 1) both; }

.season-machine {
  display: grid;
  justify-items: center;
  gap: clamp(.45rem, 1.3vw, .88rem);
  width: min(100%, 54rem);
}

.season-machine-row {
  display: grid;
  grid-template-columns: minmax(7.4rem, .73fr) minmax(0, 1.46fr);
  align-items: center;
  gap: clamp(.55rem, 1.8vw, 1.45rem);
  width: 100%;
  padding: clamp(.5rem, 1.6vw, 1.12rem);
  border: 2px solid #9e83d2;
  border-radius: 1.35rem;
  background: linear-gradient(145deg, #4b3574, #2e2053);
  box-shadow: 0 .5rem 0 #160f31;
}

.season-machine .wheel-face { width: clamp(6.3rem, 18vw, 12.5rem); }
.season-machine .wheel-face span { font-size: clamp(1rem, 3vw, 2rem); }
.season-machine .wheel-current { font-size: clamp(.9rem, 2vw, 1.4rem); }
.season-machine .wheel-pointer { top: -.55rem; }

.season-landscape {
  --sky: #a5dcff;
  --hill-back: #b4dea7;
  --hill-front: #8cce8f;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: clamp(7.3rem, 20vw, 13.2rem);
  border: 3px solid #e7d5fa;
  border-radius: 1rem;
  background:
    radial-gradient(ellipse at 76% 138%, var(--hill-front) 0 54%, transparent 55%),
    radial-gradient(ellipse at 12% 137%, var(--hill-back) 0 58%, transparent 59%),
    var(--sky);
  box-shadow: inset 0 .25rem .45rem #442b653e;
}

.season-landscape.summer { --sky: #84d9ff; --hill-back: #d5e77c; --hill-front: #e6dc83; }
.season-landscape.autumn { --sky: #f4c8af; --hill-back: #d6a365; --hill-front: #e0a76b; }
.season-landscape.winter { --sky: #b2cfee; --hill-back: #dbeefa; --hill-front: #f2f6ff; }
.season-sky, .season-cloud, .season-tree, .season-cottage, .season-ground { position: absolute; line-height: 1; }
.season-sky { right: 11%; top: 10%; font-size: clamp(1.35rem, 4.1vw, 3.45rem); }
.season-cloud { top: 7%; left: 15%; color: #fffdf5; font-size: clamp(1.4rem, 5.5vw, 4.35rem); }
.season-tree { bottom: 14%; left: 12%; font-size: clamp(2.65rem, 8vw, 6.3rem); }
.season-cottage { right: 21%; bottom: 14%; font-size: clamp(2.05rem, 6.4vw, 5.05rem); }
.season-ground { display: flex; gap: clamp(.48rem, 1.7vw, 1.35rem); right: 10%; bottom: 4%; font-size: clamp(.9rem, 2.5vw, 2rem); }
.season-landscape.season-won { outline: 2px solid #ffe58b; outline-offset: 3px; }
.season-won .season-ground span { animation: season-hop .55s ease-out both; }
.season-won .season-ground span:nth-child(2) { animation-delay: .09s; }
.season-won .season-ground span:nth-child(3) { animation-delay: .18s; }

.season-clue {
  padding: .42rem .8rem;
  border: 2px solid #9e83d2;
  border-radius: .6rem;
  color: #fbf5ff;
  background: #342253;
  text-align: center;
}

.season-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(.2rem, 1.1vw, .75rem);
}

.season-step {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(2rem, 6vw, 3.9rem);
  aspect-ratio: 1;
  border: 2px dashed #9e83d2;
  border-radius: .65rem;
  background: #33254e;
  color: #dbc9f6;
  font-size: clamp(1.05rem, 3vw, 2rem);
  font-weight: 850;
}

.season-step.open { border-color: #ffdf8a; }
.season-step.placed { border-style: solid; border-color: #a4d4ae; background: #dbf4c7; }
.season-step.marked { border-style: solid; border-color: #b1caf2; background: #deefff; }
.season-step small { position: absolute; right: .05em; top: -.25em; color: #946309; font-size: .75em; }
.season-arrow { color: #e6d7ff; font-size: clamp(1.1rem, 3vw, 2rem); font-weight: 800; }

@keyframes post-stamp {
  from { transform: rotate(-18deg) scale(1.65); opacity: .35; }
  to { transform: rotate(8deg) scale(1); opacity: 1; }
}

@keyframes letter-ready {
  0%, 100% { transform: translateY(0); }
  48% { transform: translateY(-.4rem); }
}

@keyframes post-repair {
  35% { transform: translateX(-.18rem); }
  70% { transform: translateX(.18rem); }
}

@keyframes album-photo-in {
  from { transform: translateY(.55rem) rotate(-4deg); opacity: .65; }
  to { transform: translateY(0) rotate(-2deg); opacity: 1; }
}

@keyframes album-file {
  0% { transform: rotate(-2deg) scale(1); }
  45% { transform: rotate(3deg) scale(.96); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes album-sticker {
  from { transform: scale(.55) rotate(-12deg); opacity: .4; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes season-hop {
  45% { transform: translateY(-.7em) rotate(8deg); }
}

@media (max-width: 570px) {
  .nature-album { grid-template-columns: 1fr; }
  .nature-album figure { max-width: 16rem; }
  .nature-album figure img { height: clamp(6rem, 30vw, 9rem); }
  .nature-album .album-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nature-album .album-bin b { font-size: .72rem; }
  .season-machine-row { gap: .38rem; }
  .post-model { padding-right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .word-workshop *, .nature-album *, .season-machine * { animation: none !important; }
}

.post-world {
  width: min(100%, 53rem);
  position: relative;
}

.post-scene {
  --mail-travel: clamp(8rem, 33vw, 22rem);
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, .33fr);
  gap: clamp(.55rem, 2vw, 1.6rem);
  align-items: center;
  width: 100%;
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  overflow: hidden;
  border: 2px solid #c2c7ff;
  border-radius: 1.35rem;
  background:
    repeating-linear-gradient(45deg, #5958a114 0 .85rem, transparent .85rem 1.7rem),
    linear-gradient(150deg, #405b9a, #283a78 65%, #342f65);
  box-shadow: inset 0 .15rem #c8deff32, 0 .45rem 0 #141331;
}

.post-world .post-letter { width: 100%; z-index: 1; }
.post-world .post-picture { position: relative; padding: .03em; min-width: 0; }
.post-world .post-sound {
  cursor: pointer;
  color: #32244e;
  background: linear-gradient(#ffe8a8, #ffc86c);
  box-shadow: 0 .2rem 0 #c98b47;
}
.post-sound i {
  position: absolute;
  right: -.18rem;
  bottom: -.22rem;
  display: grid;
  place-items: center;
  width: clamp(1.12rem, 2.8vw, 1.7rem);
  aspect-ratio: 1;
  color: #392951;
  background: #d6eeff;
  border: 2px solid #8ab4de;
  border-radius: 50%;
  font-size: clamp(.66rem, 1.5vw, .95rem);
  font-style: normal;
}
.post-box {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .18rem;
  min-height: clamp(5.2rem, 13vw, 9.6rem);
  padding: .34rem;
  color: #ffecc7;
  border: 2px solid #9bade7;
  border-radius: 1rem;
  background: #263971;
  font-weight: 900;
}
.post-box > span { font-size: clamp(2.4rem, 7vw, 5.3rem); line-height: 1.08; }
.post-box-ready {
  cursor: pointer;
  color: #563511;
  border: 2px solid #fff1b8;
  background: linear-gradient(135deg, #ffe6a1, #f9b958);
  box-shadow: 0 .35rem 0 #8e592d;
}
.post-mailed .post-letter { animation: post-to-box .83s cubic-bezier(.23, .65, .3, 1) both; }
.post-mailed .post-box { animation: post-box-pulse .38s .54s ease-out both; }
.post-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.25rem, 1.15vw, .68rem);
  width: 100%;
  min-height: clamp(3rem, 7vw, 4.95rem);
}
.post-key {
  display: grid;
  place-items: center;
  min-width: clamp(2.85rem, 9vw, 5.25rem);
  min-height: clamp(2.95rem, 7vw, 4.65rem);
  padding: .14rem .34rem;
  color: #192948;
  border: 2px solid #d4eaff;
  border-radius: clamp(.52rem, 1.1vw, .85rem);
  background: linear-gradient(#e5f7ff, #a6d7ff);
  box-shadow: 0 .29rem 0 #4d6cae;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 950;
  cursor: pointer;
}
.post-key:nth-child(even) { background: linear-gradient(#ffeec1, #ffd385); border-color: #fff1c7; box-shadow: 0 .29rem 0 #a6754e; }
.post-key:active, .post-box-ready:active { translate: 0 .18rem; }
.post-key.post-miss { animation: post-repair .44s ease-out; outline: 2px solid #ffe48d; outline-offset: 3px; }
@keyframes post-to-box {
  0% { transform: translate(0) scale(1); opacity: 1; }
  30% { transform: translate(8%, -.65rem) rotate(-5deg) scale(.96); }
  85%, 100% { transform: translate(var(--mail-travel), var(--mail-rise, .55rem)) rotate(17deg) scale(.15); opacity: 0; }
}
@keyframes post-box-pulse { 45% { transform: scale(1.12) rotate(-3deg); background: #ad7a3e; } }

.wildlife-world {
  --forest-edge: #90c8a6;
  position: relative;
  overflow: visible;
  background:
    radial-gradient(ellipse at -10% 105%, #378362 0 18%, transparent 19%),
    radial-gradient(ellipse at 105% -12%, #438a684e 0 32%, transparent 32.2%),
    linear-gradient(145deg, #21564f, #173f45);
}
.wildlife-world figure { z-index: 1; }
.wildlife-world.filed figure { animation: none; transform: rotate(-2deg); }
.wildlife-frame { position: relative; }
.wildlife-world .wildlife-frame img { display: block; }
.wildlife-world .wildlife-frame img { pointer-events: none; }
.wildlife-classify, .wildlife-observe { display: grid; width: 100%; justify-items: center; gap: .62rem; }
.wildlife-world .album-bins:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wildlife-world .wildlife-destination {
  min-height: clamp(4.6rem, 11vw, 6.9rem);
  border-radius: .9rem;
  background: linear-gradient(#205953, #193d42);
  color: #f7ffdd;
  box-shadow: inset 0 -.22rem #142f3b;
  cursor: pointer;
}
.wildlife-world .wildlife-destination span { font-size: clamp(1.55rem, 4.4vw, 2.65rem); }
.wildlife-world .wildlife-destination b { font-size: clamp(.7rem, 1.5vw, 1.01rem); }
.wildlife-world .wildlife-destination.reconsider { outline: 2px dashed #ffda8f; outline-offset: 3px; }
.wildlife-world .wildlife-destination.filed { background: #b9eda2; color: #1a3e33; box-shadow: inset 0 -.22rem #67ae7e; }
.wildlife-world .destination-home-0 { background: linear-gradient(#397f99, #194c69); }
.wildlife-world .destination-home-1 { background: linear-gradient(#427d47, #22543f); }
.wildlife-world .destination-home-2 { background: linear-gradient(#9e6436, #74482e); }
.wildlife-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  max-width: 100%;
  padding: .3rem .75rem;
  border: 2px solid #accb98;
  border-radius: 1rem;
  color: #1c3b32;
  background: #d6e7b8;
  box-shadow: 0 .18rem #163a36;
  cursor: pointer;
}
.wildlife-action span { font-size: 1.35em; line-height: 1; }
.wildlife-next { color: #392812; background: #ffe190; border-color: #fff0ba; }
.wildlife-ticket {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  top: 9%;
  left: 11%;
  width: 78%;
  padding: .24rem;
  border: 2px solid #fff8e7;
  border-radius: .55rem;
  background: #fff7d8;
  box-shadow: 0 .28rem .55rem #182c25bd;
  opacity: 0;
}
.wildlife-world .wildlife-ticket img { width: 100%; height: clamp(5rem, 12vw, 9rem); }
.wildlife-ticket.in-flight { animation: wildlife-flight .72s cubic-bezier(.21, .75, .29, 1.1) both; }
@keyframes wildlife-flight {
  0% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
  35% { opacity: 1; transform: translate(calc(var(--flight-x) * .34), calc(var(--flight-y) * .34 - 1.5rem)) rotate(8deg) scale(.7); }
  83% { opacity: 1; transform: translate(var(--flight-x), var(--flight-y)) rotate(12deg) scale(.18); }
  100% { opacity: 0; transform: translate(var(--flight-x), var(--flight-y)) rotate(12deg) scale(.12); }
}

.wildlife-world.observation-world { grid-template-columns: minmax(12rem, 1.48fr) minmax(5.5rem, .67fr); }
.observation-world figure { transform: none; animation: none; max-width: min(100%, 33rem); }
.wildlife-world.observation-world.filed figure { transform: none; }
.observation-frame { width: fit-content; max-width: 100%; margin-inline: auto; }
.wildlife-world .observation-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(10.5rem, 31vw, 19rem);
  object-fit: contain;
  margin-inline: auto;
}
.observation-position { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); }
.observation-point {
  display: grid;
  place-items: center;
  width: clamp(2.625rem, 4.5vw, 3.2rem);
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #fff0bd;
  border-radius: 50%;
  color: #352c46;
  background: #fff7dcc7;
  font-weight: 950;
  font-size: clamp(.91rem, 2.3vw, 1.44rem);
  box-shadow: 0 .14rem .32rem #16172a99;
  cursor: crosshair;
}
.observation-point:hover, .observation-point:focus-visible { background: #fff6be; outline: 3px solid #552c7c; }
.observation-point.confirmed { color: #1b472c; background: #bdf0ac; border-color: #dffff0; animation: camera-find .52s ease-out both; }
.observation-point.reconsider { border-style: dashed; outline: 2px solid #f1ae6c; }
.wildlife-observe { text-align: center; }
.wildlife-observe > span { font-size: clamp(1.6rem, 5vw, 3rem); }
.wildlife-observe > p { max-width: 17ch; margin: 0; font-size: clamp(.85rem, 2.1vw, 1.38rem); line-height: 1.3; font-weight: 750; }
@keyframes camera-find { 50% { transform: scale(1.18); box-shadow: 0 0 0 .6rem #ecffae77; } }

.season-world .season-machine-row { grid-template-columns: minmax(7rem, .73fr) minmax(0, 1.62fr); }
.season-world .season-wheel { width: 100%; }
.season-world .wheel-face .season-dial-point {
  width: 2em;
  height: 2em;
  font-size: clamp(1rem, 3vw, 2.05rem);
  transform: translate(-50%, -50%) rotate(var(--segment)) translateY(-98%) rotate(calc(-1 * (var(--segment) + var(--turn))));
}
.season-world .season-dial-item {
  position: static;
  display: grid;
  place-items: center;
  width: clamp(1.75rem, 4.5vw, 3.1rem);
  aspect-ratio: 1;
  padding: 0;
  border-radius: .65rem;
  border: 2px solid #67586b;
  background: #fffae8df;
  color: #3f3b59;
  font-size: inherit;
  transform: none;
}
.season-world .season-dial-item > span { position: static; width: auto; height: auto; font-size: .82em; transform: none; }
.season-world .season-dial-item.dial-current { border-color: #67409b; background: #fff6bf; box-shadow: 0 0 0 3px #fff4b6; }
.season-world button.season-dial-item { cursor: pointer; }
.season-spins { display: flex; justify-content: center; gap: .4rem; }
.season-spin, .season-model-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .2rem .62rem;
  border: 2px solid #a8a9e9;
  border-radius: .76rem;
  background: #dedaff;
  color: #30274b;
  box-shadow: 0 .16rem #423666;
  cursor: pointer;
}
.season-spin { font-size: 1.22rem; font-weight: 850; }
.season-model-button { font-weight: 750; }
.season-world .season-clue { cursor: pointer; }
.season-world .season-clue > span { margin-inline-end: .3rem; color: #ffe29b; }

.season-garden {
  --garden-sky: #8ed5f5;
  --garden-horizon: #def8e5;
  --garden-ridge: #91c393;
  --garden-near: #67a976;
  --garden-leaf: #5baa69;
  --garden-leaf-light: #a4d177;
  --garden-orb: #fff2a6;
  --garden-bloom: #ffe2a3;
  --garden-wall: #f8cb94;
  --garden-roof: #946c91;
  --garden-earth: #e7c196;
  display: block;
  min-height: clamp(9.4rem, 25vw, 18rem);
  background:
    radial-gradient(ellipse at 7% 161%, var(--garden-near) 0 48%, transparent 48.3%),
    radial-gradient(ellipse at 95% 140%, var(--garden-near) 0 43%, transparent 43.3%),
    radial-gradient(ellipse at 39% 140%, var(--garden-ridge) 0 59%, transparent 59.4%),
    linear-gradient(180deg, var(--garden-sky), var(--garden-horizon));
}
.season-garden.summer {
  --garden-sky: #70cfff; --garden-horizon: #e9f8c4; --garden-ridge: #aac772; --garden-near: #75ae68;
  --garden-leaf: #3b8f63; --garden-leaf-light: #7eb65a; --garden-orb: #ffe278; --garden-bloom: #f7ba6b;
}
.season-garden.autumn {
  --garden-sky: #ddabc4; --garden-horizon: #ffe4ad; --garden-ridge: #ce995e; --garden-near: #b6794e;
  --garden-leaf: #c4705e; --garden-leaf-light: #efad68; --garden-orb: #ffde9c; --garden-bloom: #df995c;
}
.season-garden.winter {
  --garden-sky: #89addc; --garden-horizon: #e3f1f9; --garden-ridge: #d4e9f8; --garden-near: #ecf3ff;
  --garden-leaf: #547e87; --garden-leaf-light: #a5c4d2; --garden-orb: #f8f6dc; --garden-bloom: #d8ecff;
  --garden-earth: #d1e1f2; --garden-roof: #7694b2;
}
.season-scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.season-orb {
  position: absolute;
  top: 12%;
  right: 17%;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--garden-orb);
  box-shadow: 0 0 1.05rem #ffe8ad95;
}
.garden-cloud { position: absolute; display: block; height: 9%; width: 24%; border-radius: 80% 65% 75% 70%; background: #fffff1bd; }
.garden-cloud::before, .garden-cloud::after { content: ""; position: absolute; bottom: 25%; border-radius: 50%; background: inherit; }
.garden-cloud::before { width: 49%; height: 155%; left: 13%; }
.garden-cloud::after { width: 39%; height: 126%; right: 8%; }
.cloud-a { top: 18%; left: 8%; }
.cloud-b { top: 28%; right: 2%; scale: .63; opacity: .78; }
.garden-tree { position: absolute; z-index: 1; width: 23%; height: 55%; }
.tree-a { left: 24%; bottom: 15%; }
.tree-b { right: 9%; bottom: 12%; scale: .56; transform-origin: bottom center; }
.garden-tree::before {
  content: "";
  position: absolute;
  width: 12%;
  height: 70%;
  left: 43%;
  bottom: 0;
  background: #8a614e;
  border-radius: 55% 45% 27% 32%;
  transform: rotate(-5deg);
}
.garden-tree > i {
  position: absolute;
  width: 100%;
  height: 74%;
  left: 0;
  top: 0;
  border-radius: 58% 46% 49% 54%;
  background:
    radial-gradient(ellipse at 23% 23%, var(--garden-leaf-light) 0 26%, transparent 27%),
    radial-gradient(ellipse at 60% 38%, var(--garden-leaf-light) 0 17%, transparent 18%),
    var(--garden-leaf);
  box-shadow: inset -.25rem -.2rem #40545834;
}
.winter .garden-tree > i {
  clip-path: polygon(50% 0, 68% 32%, 60% 32%, 83% 65%, 72% 65%, 100% 100%, 0 100%, 27% 65%, 18% 65%, 40% 32%, 32% 32%);
  border-radius: 0;
}
.garden-cottage { position: absolute; z-index: 1; right: 25%; bottom: 14%; width: 20%; height: 23%; border-radius: .22rem; background: var(--garden-wall); }
.garden-cottage::before {
  content: "";
  position: absolute;
  left: -9%;
  top: -70%;
  width: 118%;
  height: 82%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: var(--garden-roof);
}
.garden-cottage::after { content: ""; position: absolute; width: 23%; height: 64%; left: 42%; bottom: 0; background: #84655a; border-radius: 43% 42% 0 0; }
.garden-cottage > i { position: absolute; width: 20%; aspect-ratio: 1; left: 12%; top: 27%; background: #fff0b8; border-radius: 18%; }
.garden-path { position: absolute; width: 31%; height: 24%; right: 17%; bottom: -7%; border-radius: 45%; transform: rotate(-26deg); background: var(--garden-earth); }
.garden-blooms { position: absolute; display: flex; gap: .35rem; align-items: end; left: 13%; bottom: 10%; }
.garden-blooms > i { width: clamp(.4rem, 1.7vw, .9rem); aspect-ratio: 1; background: var(--garden-bloom); border-radius: 44%; box-shadow: 0 .21rem #6e9862; }
.garden-blooms > i:nth-child(2) { translate: 0 -.22rem; }
.season-hotspot { position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); z-index: 2; }
.season-gesture {
  display: grid;
  justify-items: center;
  gap: .04rem;
  min-width: clamp(3rem, 11vw, 6.9rem);
  min-height: 44px;
  padding: .18rem .35rem;
  border: 2px solid #fff2c0;
  border-radius: .82rem;
  color: #453257;
  background: #fff7d6ee;
  box-shadow: 0 .18rem .44rem #3d335a85;
  cursor: pointer;
}
.season-gesture > span { font-size: clamp(1.35rem, 3.8vw, 2.58rem); line-height: 1; }
.season-gesture b { font-size: clamp(.54rem, 1.2vw, .86rem); max-width: 13ch; line-height: 1.08; }
.season-parade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.season-parade > span {
  position: absolute;
  left: calc(12% + var(--i) * 17%);
  top: 27%;
  color: #fff6c2;
  font-size: clamp(1.2rem, 4.6vw, 3.2rem);
  text-shadow: 0 1px .15rem #3a4968;
  animation: garden-drift .85s ease-out both;
  animation-delay: calc(var(--i) * .054s);
}
.spring .season-parade > span { top: 62%; animation-name: garden-bloom; }
.summer .season-parade > span { top: 17%; animation-name: garden-spark; }
.summer.season-live .season-orb { animation: garden-sun .65s ease-out both; }
.autumn.season-live .garden-tree > i { animation: garden-sway .5s ease-out both; }
@keyframes garden-drift {
  from { opacity: 0; translate: -.65rem -1.25rem; }
  24%, 68% { opacity: 1; }
  to { opacity: 0; translate: .6rem 2.8rem; rotate: 58deg; }
}
@keyframes garden-bloom {
  from { opacity: 0; scale: .25; translate: 0 1rem; }
  45% { opacity: 1; scale: 1.12; translate: 0 -.32rem; }
  to { opacity: 1; scale: 1; }
}
@keyframes garden-spark {
  from { opacity: 0; scale: .2; }
  45% { opacity: 1; scale: 1.13; }
  to { opacity: 0; scale: .85; translate: 0 1.1rem; }
}
@keyframes garden-sun { 55% { box-shadow: 0 0 2rem 1rem #ffe481aa; scale: 1.14; } }
@keyframes garden-sway { 35% { transform: rotate(-10deg); } 70% { transform: rotate(7deg); } }

@media (max-width: 560px) {
  .post-world .post-letter { grid-template-columns: minmax(2.75rem, .5fr) minmax(0, 1.65fr); padding: .45rem; gap: .28rem; }
  .post-world .post-picture { font-size: clamp(1.6rem, 9vw, 3.05rem); }
  .post-world .post-slot { width: clamp(1.35rem, 5.4vw, 2.1rem); }
  .post-box { font-size: .77rem; }
  .wildlife-world.observation-world { grid-template-columns: 1fr; }
  .wildlife-observe { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
  .wildlife-observe > span { display: none; }
  .wildlife-observe > p { max-width: 26ch; }
  .wildlife-world .observation-frame img { max-height: 12rem; }
  .season-garden { min-height: clamp(8.75rem, 43vw, 11.25rem); }
  .season-world .season-machine-row { grid-template-columns: minmax(6rem, .64fr) minmax(0, 1.3fr); }
  .season-hotspot { left: min(var(--x), 72%); }
}

@media (prefers-reduced-motion: reduce) {
  .post-world *, .wildlife-world *, .season-world * { animation: none !important; }
  .post-mailed .post-letter { visibility: hidden; }
}

.letter-memory, .letter-workshop, .season-assembly, .season-neighbors, .season-journey {
  display: grid;
  justify-items: center;
  gap: clamp(.6rem, 1.5vw, 1rem);
  width: min(100%, 54rem);
}
.letter-memory-cards, .letter-workshop {
  padding: clamp(.65rem, 2vw, 1.35rem);
  border: 2px solid #99c9f6;
  border-radius: 1.2rem;
  background: radial-gradient(ellipse at 40% 120%, #5367ab, #293e76 73%);
  box-shadow: 0 .4rem 0 #172854;
}
.letter-memory-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.42rem, 1.4vw, 1rem);
  width: min(100%, 32rem);
}
.letter-memory-card {
  display: grid;
  place-items: center;
  min-height: clamp(4.15rem, 11vw, 7rem);
  padding: .35rem;
  border: 2px solid #ffc97b;
  border-radius: .84rem;
  color: #734d4c;
  background: linear-gradient(145deg, #fff2c8, #f8bd79);
  box-shadow: inset 0 -.3rem #d9965d, 0 .25rem #263662;
  font-size: clamp(1.65rem, 6vw, 3.6rem);
  font-weight: 950;
  cursor: pointer;
}
.letter-memory-card.is-revealed { background: #d7eaff; border-color: #b4dcf6; box-shadow: inset 0 -.3rem #a0cbe5; color: #3c4374; }
.letter-memory-card.is-revealed:not(.is-matched) span { animation: els-letter-open .25s ease-out; }
.letter-memory-card.is-matched { background: #c9efb3; border-color: #e0ffc6; color: #285243; box-shadow: inset 0 -.3rem #a2d597; cursor: default; }
@keyframes els-letter-open { from { transform: rotateY(72deg) scale(.75); } to { transform: rotateY(0) scale(1); } }

.letter-workshop { width: min(100%, 42rem); }
.work-listen, .letter-work-action, .season-level-action {
  min-height: 44px;
  padding: .42rem .76rem;
  border: 2px solid #b5d9f3;
  border-radius: .72rem;
  background: #deefff;
  color: #2c3c66;
  box-shadow: 0 .24rem #7693bf;
  font-weight: 900;
  cursor: pointer;
}
.work-listen {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #563c55;
  background: #ffe5a1;
  border-color: #fff2bb;
  box-shadow: 0 .22rem #be8e59;
}
.work-listen > span { font-size: clamp(1.85rem, 5vw, 3.35rem); line-height: 1; }
.letter-work-action, .season-level-action { display: flex; align-items: center; gap: .44rem; }
.letter-work-action span, .season-level-action span { font-size: clamp(1.15rem, 2.5vw, 1.65rem); }
.work-model { color: #ffe6ab; letter-spacing: .23em; }
.work-word, .work-tools, .season-level-tools, .season-level-palette {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.36rem, 1.1vw, .65rem);
}
.work-letter {
  display: grid;
  place-items: center;
  min-width: clamp(2.85rem, 8vw, 5.5rem);
  min-height: clamp(3.25rem, 8vw, 5.4rem);
  padding: .25rem;
  border: 2px dashed #b6d5ec;
  border-radius: .72rem;
  color: #b3c9ee;
  background: #344975;
  font-size: clamp(1.25rem, 4.5vw, 2.9rem);
  font-weight: 950;
}
button.work-letter.is-filled { cursor: pointer; }
.work-letter.is-filled { color: #4f3a58; border-style: solid; border-color: #fff0bb; background: #fff0c9; box-shadow: 0 .27rem #a88367; }
.work-letter.is-repair { outline: 3px solid #efcc77; outline-offset: 3px; background: #ffe291; }
.letter-workshop .post-tray:empty, .letter-workshop .work-tools:empty, .season-level-palette:empty, .season-level-tools:empty { display: none; }

.season-calendar, .season-pocket-row, .season-drive {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.32rem, 1vw, .75rem);
  width: min(100%, 44rem);
  padding: clamp(.55rem, 1.6vw, .95rem);
  border: 2px solid #a8cfe9;
  border-radius: 1rem;
  background: linear-gradient(155deg, #426b90, #30335d);
  box-shadow: 0 .36rem #222b4b;
}
.season-calendar-slot, .season-level-card, .season-pocket, .season-anchor, .season-route-stop {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  min-width: 0;
  min-height: clamp(3.3rem, 9vw, 6rem);
  padding: .22rem;
  border: 2px dashed #94b8d6;
  border-radius: .65rem;
  background: #293f65;
  color: #e3f0ff;
  font-size: clamp(.64rem, 1.7vw, 1.15rem);
  font-weight: 900;
}
.season-calendar-slot > span, .season-level-card > span, .season-pocket > span,
.season-anchor > span, .season-route-stop > span { font-size: clamp(1.2rem, 4vw, 2.7rem); line-height: 1.15; }
.season-calendar-slot.has-season, .season-level-card, .season-anchor, .season-route-stop:has(b) {
  border-style: solid;
  border-color: #d5e7c5;
  color: #29425a;
  background: #e5f0d4;
}
.season-calendar-slot small {
  position: absolute;
  top: .08rem;
  right: .15rem;
  color: #7b4a18;
  font-size: clamp(.55rem, 1.6vw, .92rem);
}
.season-calendar-slot.is-next { border-color: #ffdfa2; }
.season-level-card {
  min-width: clamp(4.45rem, 10vw, 7rem);
  box-shadow: 0 .26rem #486983;
}
button.season-level-card, button.season-pocket { cursor: pointer; }
.season-level-card.summer { background: #ffecb0; border-color: #fff3bf; }
.season-level-card.autumn { background: #ffcea9; border-color: #ffe3bf; }
.season-level-card.winter { background: #dbedff; border-color: #e9f4ff; }
.season-travel-card { min-height: clamp(3.4rem, 8.8vw, 6.1rem); display: grid; align-items: center; }
.season-pocket-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
button.season-pocket { color: #304b73; background: #d9edff; border-color: #a8cff1; }
.season-pocket.pocket-arrived { color: #2d543e; background: #ddf4bc; border-color: #f1ffd7; border-style: solid; animation: els-season-pocket .49s ease-out both; }
@keyframes els-season-pocket { from { transform: translateY(-1.5rem) scale(.87); opacity: .6; } to { transform: translateY(0) scale(1); opacity: 1; } }
.season-drive { display: grid; grid-template-columns: 1fr; padding-bottom: .5rem; background: linear-gradient(152deg, #407777, #2a4768 75%); }
.season-route-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.25rem, 1vw, .65rem); }
.season-route-stop.stop-visited { border-color: #ffe29e; }
.season-road {
  position: relative;
  min-height: clamp(2.3rem, 5.4vw, 3.6rem);
  margin: .1rem .35rem 0;
  border: 2px solid #7aa8b4;
  border-radius: .65rem;
  background: linear-gradient(0deg, #293f55 0 43%, #efdb9c 43% 48%, #293f55 48% 100%);
}
.season-road > span {
  position: absolute;
  left: calc(4% + var(--stage) * 22%);
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.45rem, 4.4vw, 2.9rem);
  animation: els-season-drive .38s ease-out both;
}
@keyframes els-season-drive { from { transform: translate(-75%, -50%) rotate(-7deg); } to { transform: translate(-50%, -50%) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .letter-memory-card *, .season-pocket.pocket-arrived, .season-road > span { animation: none !important; }
}