:root {
  --night: #1d171c;
  --night-soft: #292027;
  --paper: #d9c7b2;
  --paper-deep: #b99e84;
  --ink: #6f2938;
  --brass: #b78c63;
  --ember: #d39a6a;
  --memory: #9e8aa8;
  --line: rgba(229, 220, 203, .18);
  --reading-light: rgba(183, 140, 99, .18);
  --world-tint: 183, 140, 99;
  --display: "STKaiti", "KaiTi", "FangSong", serif;
  --body: "Songti SC", "STSong", "SimSun", serif;
  --utility: "Microsoft YaHei", "PingFang SC", sans-serif;
  --ease: cubic-bezier(.22, .78, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--night); color: var(--paper); font-family: var(--body); transition: background 1.2s ease; }
body.menu-open { overflow: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }

#particles, .light-wash { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#particles { z-index: 3; }
.light-wash { z-index: 1; background: radial-gradient(circle at 50% 58%, rgba(var(--world-tint), .13), transparent 32%), radial-gradient(circle at 50% 100%, rgba(216, 160, 105, .08), transparent 48%); transition: background 1.4s ease, opacity .8s ease; }
body.is-quiet .light-wash { opacity: .38; }
body.is-revealing .light-wash { background: radial-gradient(circle at var(--reveal-x, 50%) var(--reveal-y, 50%), rgba(218, 203, 230, .2), transparent 25%), radial-gradient(circle at 50% 100%, rgba(var(--world-tint), .08), transparent 52%); }

main { position: relative; z-index: 2; }
.entry { position: fixed; inset: 0; min-height: 100svh; display: grid; place-items: center; overflow: hidden; transition: opacity .6s ease, visibility .6s; }
.entry__eyebrow { position: absolute; top: 9vh; left: clamp(24px, 7vw, 100px); margin: 0; color: rgba(229,220,203,.5); font: 10px/1 var(--utility); letter-spacing: .18em; }
.entry h1 { position: absolute; left: clamp(24px, 7vw, 100px); bottom: 10vh; z-index: 2; margin: 0; font: 400 clamp(44px, 5.8vw, 88px)/1.05 var(--display); letter-spacing: .03em; }
.entry__hint { position: absolute; right: clamp(24px, 7vw, 100px); bottom: 11vh; margin: 0; color: rgba(229,220,203,.4); font: 11px/1.6 var(--utility); letter-spacing: .08em; transition: opacity .4s ease; }

.mailbox { position: relative; border: 0; background: transparent; cursor: pointer; }
.mailbox--large { width: 260px; height: 330px; transform: translateY(-4vh); }
.mailbox__halo { position: absolute; left: 50%; top: 47%; width: 270px; height: 270px; border-radius: 50%; background: radial-gradient(circle, rgba(211,154,106,.24), rgba(211,154,106,.06) 40%, transparent 72%); transform: translate(-50%, -50%) scale(.7); opacity: .25; transition: transform .9s var(--ease), opacity .7s ease; }
.mailbox__shell { position: absolute; left: 42px; top: 65px; width: 176px; height: 124px; overflow: hidden; border: 1px solid rgba(229,220,203,.34); border-radius: 88px 88px 12px 12px; background: #32262b; box-shadow: inset 0 18px 30px rgba(255,255,255,.025), 0 26px 60px rgba(0,0,0,.25); transition: border-color .6s, box-shadow .7s; }
.mailbox__door { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255,255,255,.04), transparent 44%); transform-origin: 50% 0; transition: transform .8s var(--ease); }
.mailbox__slot { position: absolute; left: 50%; top: 47%; width: 94px; height: 7px; border-radius: 10px; background: #120e11; box-shadow: 0 1px rgba(229,220,203,.15); transform: translate(-50%, -50%); }
.mailbox__post { position: absolute; left: 50%; top: 188px; width: 15px; height: 94px; background: #3a2b2c; transform: translateX(-50%); }
.mailbox__ground { position: absolute; left: 50%; top: 278px; width: 112px; height: 1px; background: rgba(229,220,203,.2); transform: translateX(-50%); }
.mailbox__flag { position: absolute; z-index: 2; left: 211px; top: 94px; width: 2px; height: 70px; background: var(--brass); transform-origin: 50% 100%; transform: rotate(17deg); transition: transform .55s var(--ease); }
.mailbox__flag::before { content: ""; position: absolute; right: 0; top: 0; width: 28px; height: 18px; background: var(--brass); }
.mailbox--large:hover .mailbox__halo, .mailbox--large:focus-visible .mailbox__halo, body.mailbox-near .mailbox__halo { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.mailbox--large:hover .mailbox__shell, .mailbox--large:focus-visible .mailbox__shell, body.mailbox-near .mailbox__shell { border-color: rgba(229,220,203,.62); box-shadow: inset 0 18px 30px rgba(255,255,255,.04), 0 0 70px rgba(211,154,106,.2); }
.mailbox--large:hover .mailbox__flag, .mailbox--large:focus-visible .mailbox__flag { transform: rotate(-4deg); }

.flying-letter { position: fixed; z-index: 8; left: 50%; top: 49%; width: 116px; height: 78px; display: grid; place-items: end start; border: 1px solid rgba(59,52,50,.35); background: var(--paper); color: var(--ink); padding: 10px; opacity: 0; transform: translate(-50%, -20%) scale(.35); transform-origin: center; box-shadow: 0 12px 50px rgba(0,0,0,.28); font: 11px var(--utility); }
body.state-opening .mailbox__door { transform: rotateX(76deg); }
body.state-opening .flying-letter { animation: pullLetter 1.55s var(--ease) forwards; }
body.state-opening .entry h1, body.state-opening .entry__eyebrow, body.state-opening .entry__hint { opacity: 0; transition: opacity .35s; }
body.state-reading .entry { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes pullLetter {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.35); }
  24% { opacity: 1; transform: translate(-50%, -150%) scale(.8) rotate(-3deg); }
  56% { transform: translate(-50%, -50%) scale(1.45) rotate(0); }
  100% { opacity: 1; width: 100vw; height: 100vh; transform: translate(-50%, -50%) scale(1); }
}

.reader { position: relative; min-height: 100vh; opacity: 0; visibility: hidden; transition: opacity .65s ease .08s, visibility .65s; }
body.state-reading .reader { opacity: 1; visibility: visible; }
.reader-bar { position: fixed; z-index: 12; left: 0; right: 0; top: 0; height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(17px, 4vw, 58px); color: rgba(229,220,203,.56); pointer-events: none; }
.reader-bar button { pointer-events: auto; }
.reader-bar > p { margin: 0; font: 9px/1 var(--utility); letter-spacing: .16em; }
.exit-button { justify-self: start; border: 0; background: transparent; padding: 10px 0; color: rgba(229,220,203,.52); font: 10px/1 var(--utility); cursor: pointer; }
.exit-button span { display: inline-block; margin-right: 7px; transition: transform .25s; }
.exit-button:hover span { transform: translateX(-4px); }
.mini-mailbox { position: relative; justify-self: end; width: 58px; height: 42px; border: 0; background: transparent; cursor: pointer; }
.mini-mailbox__body { position: absolute; right: 2px; top: 10px; width: 35px; height: 25px; border: 1px solid rgba(229,220,203,.42); border-radius: 17px 17px 4px 4px; background: rgba(29,23,28,.62); }
.mini-mailbox__lid { position: absolute; z-index: 2; right: 2px; top: 10px; width: 35px; height: 12px; border-top: 1px solid rgba(229,220,203,.55); border-radius: 17px 17px 0 0; transform-origin: right bottom; transition: transform .4s var(--ease); }
.mini-mailbox b { position: absolute; right: 44px; top: 17px; font: 9px/1 var(--utility); font-weight: 400; letter-spacing: .12em; opacity: 0; transform: translateX(6px); transition: .25s; white-space: nowrap; }
.mini-mailbox:hover b, .mini-mailbox:focus-visible b { opacity: 1; transform: none; }
.mini-mailbox[aria-expanded="true"] .mini-mailbox__lid { transform: rotate(-24deg); }

.letter { position: relative; width: min(760px, calc(100% - 36px)); min-height: 110vh; margin: 0 auto; background: var(--paper); color: var(--ink); padding: clamp(84px, 12vw, 150px) clamp(28px, 7vw, 88px) 110px; box-shadow: 0 0 0 1px rgba(229,220,203,.08), 0 40px 110px rgba(0,0,0,.26); transition: background .8s ease, transform .5s var(--ease); }
.letter::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(59,52,50,.055) 32px); }
.letter__head { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 7px; padding-bottom: 38px; border-bottom: 1px solid rgba(59,52,50,.2); }
.letter__head p { grid-column: 1 / -1; margin: 0; color: rgba(59,52,50,.46); font: 10px/1 var(--utility); letter-spacing: .16em; }
.letter__head h2 { margin: 0; font: 400 clamp(37px, 6vw, 62px)/1.08 var(--display); }
.letter__head > span { align-self: end; padding-bottom: 8px; color: rgba(59,52,50,.52); font: 10px/1 var(--utility); letter-spacing: .1em; }
.letter__body { position: relative; padding-top: 50px; font-size: clamp(18px, 2.2vw, 22px); line-height: 2.05; }
.letter__body p { margin: 0 0 1.6em; }
.letter__body strong { font-weight: 600; }
.letter__body .anchor-line { position: relative; display: inline; background: linear-gradient(transparent 72%, rgba(var(--world-tint), .18) 72%); }
.reveal-zone { position: relative; min-height: 160px; display: grid; place-items: center; margin: 72px -20px; border-block: 1px solid rgba(59,52,50,.12); cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reveal-zone__front, .reveal-zone__memory { grid-area: 1 / 1; width: 100%; padding: 28px 20px; text-align: center; transition: opacity .9s ease, filter .9s ease, transform .9s var(--ease); }
.reveal-zone__front { color: rgba(59,52,50,.46); font: 13px/1.8 var(--utility); letter-spacing: .06em; }
.reveal-zone__front::after { content: "停在这里看看"; display: block; margin-top: 9px; font-size: 9px; letter-spacing: .12em; opacity: .55; }
.reveal-zone__memory { opacity: 0; filter: blur(12px); transform: scale(.96); font: 400 clamp(25px, 4vw, 38px)/1.4 var(--display); color: #735f78; }
.reveal-zone.is-revealed .reveal-zone__front { opacity: .08; filter: blur(5px); }
.reveal-zone.is-revealed .reveal-zone__memory { opacity: 1; filter: blur(0); transform: scale(1); }
.letter__body blockquote { margin: 2.4em 0; padding: 0 0 0 22px; border-left: 2px solid rgba(var(--world-tint), .45); font: 400 clamp(24px, 4vw, 36px)/1.65 var(--display); }
.letter__body .final-line { margin-top: 3.2em; font: 600 clamp(27px, 4.3vw, 40px)/1.55 var(--display); }

.letter__end { position: relative; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: 110px; text-align: center; }
.echo-caption { margin: 0 0 34px; color: rgba(59,52,50,.46); font: 10px/1.7 var(--utility); letter-spacing: .08em; transition: opacity .4s; }
.next-letter { border: 0; border-bottom: 1px solid rgba(59,52,50,.38); background: transparent; padding: 10px 0; color: var(--ink); font: 12px/1 var(--utility); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .5s var(--ease); }
.next-letter span { display: inline-block; margin-left: 9px; transition: transform .25s; }
.next-letter:hover span { transform: translateX(4px); }
.letter__end.echo-done .next-letter { opacity: 1; transform: none; pointer-events: auto; }
.letter__end.echo-done .echo-caption { opacity: .45; }

.reply-box { margin-top: 90px; padding-top: 36px; border-top: 1px solid rgba(59,52,50,.2); }
.reply-box h3 { margin: 0 0 24px; font: 400 29px/1.3 var(--display); }
.reply-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.reply-choices button { border: 1px solid rgba(59,52,50,.28); border-radius: 999px; background: transparent; padding: 10px 14px; color: var(--ink); font: 11px var(--utility); cursor: pointer; }
.reply-choices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.reply-box label { display: block; margin: 32px 0 9px; color: rgba(59,52,50,.56); font: 10px var(--utility); }
.reply-box textarea { width: 100%; min-height: 110px; resize: vertical; border: 0; border-bottom: 1px solid rgba(59,52,50,.3); background: transparent; color: var(--ink); padding: 12px 0; outline: 0; font: 17px/1.7 var(--body); }

.mailbox-menu { position: fixed; inset: 0; z-index: 30; visibility: hidden; pointer-events: none; }
.mailbox-menu[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.menu-backdrop { position: absolute; inset: 0; border: 0; background: rgba(12,9,12,.56); opacity: 0; transition: opacity .45s; }
.mailbox-menu__panel { position: absolute; top: 0; right: 0; width: min(540px, 100%); height: 100%; overflow-y: auto; background: #2b2228; padding: clamp(26px, 6vw, 62px); transform: translateX(100%); transition: transform .55s var(--ease); box-shadow: -30px 0 90px rgba(0,0,0,.26); }
.mailbox-menu[aria-hidden="false"] .menu-backdrop { opacity: 1; }
.mailbox-menu[aria-hidden="false"] .mailbox-menu__panel { transform: none; }
.mailbox-menu__panel > header { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 50px; }
.mailbox-menu__panel header p { margin: 0 0 9px; color: rgba(229,220,203,.42); font: 9px var(--utility); letter-spacing: .16em; }
.mailbox-menu__panel header h2 { margin: 0; font: 400 31px/1.2 var(--display); }
.mailbox-menu__panel header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font: 24px/1 var(--utility); cursor: pointer; }
.letter-stack { display: grid; gap: 12px; }
.stack-letter { position: relative; width: 100%; min-height: 88px; display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); background: #33282f; padding: 14px 16px; text-align: left; cursor: pointer; transition: transform .28s var(--ease), border-color .28s, background .28s; }
.stack-letter:hover, .stack-letter:focus-visible { z-index: 2; border-color: rgba(229,220,203,.5); background: #3a2c34; transform: translateX(-10px); }
.stack-letter > b { color: var(--brass); font: 16px var(--utility); }
.stack-letter strong { display: block; font: 400 22px/1.3 var(--display); }
.stack-letter small { color: rgba(229,220,203,.32); font: 9px var(--utility); }
.stack-letter > span:last-child { color: rgba(229,220,203,.34); font: 18px var(--utility); }
.stack-letter.is-empty { min-height: 88px; border-style: dashed; background: transparent; cursor: default; opacity: .58; }
.stack-letter.is-empty:hover { transform: none; }
.stack-letter.is-empty::after { content: "这封正在手里"; position: absolute; right: 16px; bottom: 11px; font: 8px var(--utility); letter-spacing: .1em; color: rgba(229,220,203,.35); }
.mailbox-menu__note { margin: 30px 0 0; color: rgba(229,220,203,.37); font: 10px/1.7 var(--utility); }

/* V2: one romantic world, with a distinct atmosphere for each place. */
body.state-entry,
body.state-opening {
  background:
    radial-gradient(circle at 50% 43%, rgba(55, 82, 125, .24), transparent 27%),
    radial-gradient(circle at 22% 18%, rgba(38, 65, 104, .18), transparent 34%),
    #101722;
}
body.state-reading,
body.state-closing { background: #1d1119; }
body.state-closing .entry { opacity: 0; visibility: visible; pointer-events: none; }
body.state-closing .reader { opacity: 0; visibility: visible; transform: scale(.985); }

/* The entrance is a private Victorian letter cabinet, not a roadside mailbox. */
.mailbox--large { width: 260px; height: 340px; }
.mailbox__halo {
  top: 45%; width: 310px; height: 310px;
  background: radial-gradient(circle, rgba(79,111,157,.28), rgba(70,95,135,.08) 42%, transparent 70%);
}
.mailbox__shell {
  left: 44px; top: 26px; width: 172px; height: 244px;
  overflow: hidden;
  border: 1px solid rgba(206,170,122,.62);
  border-radius: 86px 86px 16px 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 30%),
    linear-gradient(180deg, #442435 0%, #2b1825 62%, #20131d 100%);
  box-shadow:
    inset 0 0 0 5px #261520,
    inset 0 0 0 6px rgba(197,150,101,.42),
    inset 0 -38px 55px rgba(0,0,0,.25),
    0 34px 70px rgba(0,0,0,.42);
}
.mailbox__door {
  inset: 9px;
  border: 1px solid rgba(202,158,109,.36);
  border-radius: 76px 76px 10px 10px;
  background:
    radial-gradient(circle at 50% 23%, rgba(219,171,123,.08), transparent 25%),
    linear-gradient(155deg, rgba(255,255,255,.04), transparent 46%);
}
.mailbox__crest {
  position: absolute; left: 50%; top: 28px; color: #c89a69;
  transform: translateX(-50%); font-size: 18px; text-shadow: 0 0 15px rgba(200,154,105,.4);
}
.mailbox__name {
  position: absolute; left: 50%; top: 63px; width: 130px; text-align: center;
  color: rgba(222,190,153,.68); transform: translateX(-50%);
  font: 8px/1 var(--utility); letter-spacing: .24em;
}
.mailbox__slot {
  top: 102px; width: 110px; height: 11px;
  border: 1px solid rgba(211,169,118,.42);
  background: #100a0f;
  box-shadow: inset 0 2px 4px #000, 0 1px rgba(255,255,255,.05);
}
.mailbox__keyhole {
  position: absolute; left: 50%; bottom: 43px; width: 8px; height: 13px;
  border-radius: 50% 50% 3px 3px; background: #c09262; transform: translateX(-50%);
  box-shadow: 0 0 13px rgba(192,146,98,.28);
}
.mailbox__keyhole::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 9px;
  background: #c09262; transform: translateX(-50%);
}
.mailbox__flag, .mailbox__post { display: none; }
.mailbox__ground {
  top: 285px; width: 184px; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 68%);
}
.mailbox--large:hover .mailbox__shell,
.mailbox--large:focus-visible .mailbox__shell,
body.mailbox-near .mailbox__shell {
  border-color: rgba(230,190,138,.82);
  box-shadow: inset 0 0 0 5px #261520, inset 0 0 0 6px rgba(211,166,114,.58), inset 0 -38px 55px rgba(0,0,0,.2), 0 0 80px rgba(74,108,155,.28);
}

.exit-button {
  border: 1px solid transparent; border-radius: 999px; padding: 9px 11px;
  color: rgba(239,207,218,.68); transition: color .25s, border-color .25s, background .25s;
}
.exit-button:hover, .exit-button:focus-visible {
  color: #f2cfdb; border-color: rgba(222,158,185,.24); background: rgba(79,35,57,.28);
}

/* Aged paper, oxblood type and restrained Victorian framing. */
.letter {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,245,222,.46), transparent 23%),
    radial-gradient(circle at 86% 84%, rgba(115,63,55,.10), transparent 28%),
    repeating-linear-gradient(103deg, rgba(91,51,45,.018) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #ddcdb9 0%, #d4bfa9 48%, #cbb39d 100%);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(239,206,178,.08),
    inset 0 0 0 10px rgba(114,65,62,.055),
    inset 0 0 0 11px rgba(111,41,56,.18),
    inset 0 0 80px rgba(83,45,44,.12),
    0 40px 110px rgba(0,0,0,.34);
}
.letter::before {
  opacity: .62;
  background:
    linear-gradient(90deg, rgba(111,41,56,.18), rgba(111,41,56,.18)) 30px 30px / calc(100% - 60px) 1px no-repeat,
    linear-gradient(90deg, rgba(111,41,56,.18), rgba(111,41,56,.18)) 30px calc(100% - 30px) / calc(100% - 60px) 1px no-repeat,
    linear-gradient(rgba(111,41,56,.18), rgba(111,41,56,.18)) 30px 30px / 1px calc(100% - 60px) no-repeat,
    linear-gradient(rgba(111,41,56,.18), rgba(111,41,56,.18)) calc(100% - 30px) 30px / 1px calc(100% - 60px) no-repeat;
}
.letter::after {
  content: "❦"; position: absolute; left: 50%; top: 43px; pointer-events: none;
  color: rgba(111,41,56,.38); transform: translateX(-50%); font: 20px/1 Georgia, serif;
}
.letter__head { border-bottom-color: rgba(111,41,56,.24); }
.letter__head p, .letter__head > span { color: rgba(111,41,56,.58); }
.letter__body .anchor-line { background: linear-gradient(transparent 72%, rgba(151,69,93,.15) 72%); }
.reveal-zone { border-block-color: rgba(111,41,56,.14); }
.reveal-zone__front { color: rgba(111,41,56,.58); }
.reveal-zone__memory { color: #81405b; }
.letter__body blockquote { border-left-color: rgba(111,41,56,.52); }
.next-letter { color: var(--ink); border-bottom-color: rgba(111,41,56,.42); }
.echo-caption { display: none; }

/* The mailbox directory is the purple-pink inner chamber of the same world. */
.menu-backdrop { background: rgba(12,7,15,.72); backdrop-filter: blur(5px); }
.mailbox-menu__panel {
  background:
    radial-gradient(circle at 80% 9%, rgba(215,131,180,.18), transparent 26%),
    radial-gradient(circle at 18% 72%, rgba(125,82,154,.17), transparent 34%),
    linear-gradient(150deg, #321b35 0%, #241426 58%, #1a101e 100%);
  border-left: 1px solid rgba(224,157,190,.2);
  box-shadow: -30px 0 100px rgba(11,5,14,.52);
}
.mailbox-menu__panel header p { color: rgba(241,186,214,.56); }
.mailbox-menu__panel header h2 { color: #f0c9dc; }
.mailbox-menu__panel header button { border-color: rgba(234,176,205,.28); color: #eec2d7; }
.stack-letter {
  border-color: rgba(222,151,188,.22);
  background: linear-gradient(120deg, rgba(112,56,91,.34), rgba(68,36,73,.38));
}
.stack-letter:hover, .stack-letter:focus-visible {
  border-color: rgba(244,189,216,.58);
  background: linear-gradient(120deg, rgba(135,66,108,.48), rgba(82,42,87,.5));
}
.stack-letter > b { color: #e2a5c2; }
.stack-letter strong { color: #f1ccdd; }
.stack-letter small, .stack-letter > span:last-child { color: rgba(240,191,216,.46); }
.stack-letter.is-empty { border-color: rgba(231,172,202,.3); }
.stack-letter.is-empty::after, .mailbox-menu__note { color: rgba(240,191,216,.48); }
.menu-home {
  margin-top: 34px; border: 0; border-bottom: 1px solid rgba(235,174,205,.3);
  background: transparent; padding: 11px 0; color: rgba(244,201,220,.72);
  font: 10px/1 var(--utility); letter-spacing: .08em; cursor: pointer;
}
.menu-home span { display: inline-block; margin-right: 8px; transition: transform .25s; }
.menu-home:hover span, .menu-home:focus-visible span { transform: translateX(-4px); }

/* V3: a moonlit reliquary containing five visible letters. */
:root { --ink: #4b1226; }
body.state-entry,
body.state-opening {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(79,113,170,.25), transparent 26%),
    radial-gradient(circle at 51% 32%, rgba(126,104,180,.11), transparent 23%),
    radial-gradient(circle at 18% 14%, rgba(48,79,127,.15), transparent 34%),
    linear-gradient(180deg, #0c1625 0%, #101a2a 62%, #111927 100%);
}
body.state-entry #particles,
body.state-opening #particles { z-index: 1; }

.mailbox--large { width: 300px; height: 350px; }
.mailbox__halo {
  top: 44%; width: 390px; height: 390px; opacity: .56;
  background:
    radial-gradient(circle, rgba(123,151,205,.2) 0 25%, rgba(111,93,172,.1) 42%, transparent 68%);
  animation: moonBreath 5.8s ease-in-out infinite;
}
.mailbox__halo::before,
.mailbox__halo::after {
  content: ""; position: absolute; inset: 45px; border: 1px solid rgba(146,177,225,.15);
  border-radius: 50%; transform: rotate(-9deg) scaleY(.72);
}
.mailbox__halo::after { inset: 66px 35px; border-color: rgba(165,131,205,.12); transform: rotate(12deg) scaleY(.78); }

.mailbox__shell {
  left: 34px; top: 12px; width: 232px; height: 286px;
  border: 1px solid rgba(155,187,231,.62);
  border-radius: 116px 116px 28px 28px;
  background:
    radial-gradient(circle at 50% 25%, rgba(203,220,247,.13), transparent 28%),
    linear-gradient(145deg, rgba(164,195,235,.15), rgba(87,74,139,.13) 52%, rgba(22,31,53,.74));
  backdrop-filter: blur(13px) saturate(115%);
  box-shadow:
    inset 0 0 0 5px rgba(12,22,40,.38),
    inset 0 0 0 6px rgba(176,203,238,.2),
    inset 0 -55px 70px rgba(10,17,32,.32),
    0 0 35px rgba(83,119,178,.2),
    0 38px 80px rgba(3,8,18,.48);
}
.mailbox__door {
  inset: 8px;
  border-color: rgba(172,201,239,.3);
  border-radius: 105px 105px 21px 21px;
  background:
    linear-gradient(112deg, transparent 18%, rgba(223,237,255,.07) 30%, transparent 43%),
    linear-gradient(170deg, rgba(152,184,226,.05), rgba(31,39,68,.22));
}
.mailbox__crest {
  top: 25px; color: #b9d0f0; font-size: 16px;
  text-shadow: 0 0 18px rgba(156,191,239,.9), 0 0 36px rgba(142,111,203,.5);
}
.mailbox__name {
  z-index: 4; top: 59px; width: 180px; color: rgba(207,222,246,.65);
  font-size: 7px; letter-spacing: .19em;
}
.mailbox__slot {
  z-index: 5; top: 91px; width: 126px; height: 8px;
  border-color: rgba(178,203,237,.52);
  background: rgba(5,11,22,.86);
  box-shadow: inset 0 1px 4px #030711, 0 0 15px rgba(128,164,216,.18);
}
.mailbox__keyhole { display: none; }
.mailbox__letters {
  position: absolute; z-index: 3; left: 50%; top: 112px; width: 170px; height: 124px;
  transform: translateX(-50%); perspective: 450px;
}
.mailbox__letters i {
  position: absolute; left: 50%; top: 7px; width: 106px; height: 78px;
  border: 1px solid rgba(208,224,247,.34); border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(227,237,250,.34), rgba(159,183,218,.13)),
    rgba(126,148,185,.08);
  box-shadow: 0 8px 20px rgba(5,12,27,.16), inset 0 0 16px rgba(219,230,248,.05);
  transform-origin: 50% 100%; transition: transform .72s var(--ease), opacity .55s ease, border-color .55s;
}
.mailbox__letters i::before,
.mailbox__letters i::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 1px;
  background: rgba(220,232,249,.24);
}
.mailbox__letters i::before { top: 24px; }
.mailbox__letters i::after { top: 34px; right: 34px; }
.mailbox__letters i:nth-child(1) { opacity: .28; transform: translateX(-50%) translate(-27px,10px) rotate(-10deg); }
.mailbox__letters i:nth-child(2) { opacity: .38; transform: translateX(-50%) translate(-14px,6px) rotate(-5deg); }
.mailbox__letters i:nth-child(3) { opacity: .5; transform: translateX(-50%) translate(0,2px); }
.mailbox__letters i:nth-child(4) { opacity: .62; transform: translateX(-50%) translate(14px,6px) rotate(5deg); }
.mailbox__letters i:nth-child(5) { opacity: .76; transform: translateX(-50%) translate(27px,10px) rotate(10deg); }
.mailbox--large:hover .mailbox__letters i:nth-child(1),
.mailbox--large:focus-visible .mailbox__letters i:nth-child(1),
body.mailbox-near .mailbox__letters i:nth-child(1) { transform: translateX(-50%) translate(-39px,12px) rotate(-14deg); }
.mailbox--large:hover .mailbox__letters i:nth-child(2),
.mailbox--large:focus-visible .mailbox__letters i:nth-child(2),
body.mailbox-near .mailbox__letters i:nth-child(2) { transform: translateX(-50%) translate(-20px,3px) rotate(-7deg); }
.mailbox--large:hover .mailbox__letters i:nth-child(4),
.mailbox--large:focus-visible .mailbox__letters i:nth-child(4),
body.mailbox-near .mailbox__letters i:nth-child(4) { transform: translateX(-50%) translate(20px,3px) rotate(7deg); }
.mailbox--large:hover .mailbox__letters i:nth-child(5),
.mailbox--large:focus-visible .mailbox__letters i:nth-child(5),
body.mailbox-near .mailbox__letters i:nth-child(5) { transform: translateX(-50%) translate(39px,12px) rotate(14deg); }
.mailbox__ground {
  top: 308px; width: 220px; height: 28px;
  background: radial-gradient(ellipse, rgba(86,120,173,.27), rgba(3,8,18,.3) 42%, transparent 70%);
  filter: blur(4px);
}
.mailbox--large:hover .mailbox__shell,
.mailbox--large:focus-visible .mailbox__shell,
body.mailbox-near .mailbox__shell {
  border-color: rgba(191,216,248,.82);
  box-shadow:
    inset 0 0 0 5px rgba(12,22,40,.34), inset 0 0 0 6px rgba(197,216,244,.26),
    inset 0 -55px 70px rgba(10,17,32,.28), 0 0 58px rgba(104,145,205,.34), 0 38px 80px rgba(3,8,18,.44);
}
body.state-opening .mailbox__letters i:nth-child(3) { opacity: 0; transform: translateX(-50%) translateY(-95px) scale(1.12); }

.letter,
.letter__head h2,
.letter__body,
.next-letter,
.reply-choices button,
.reply-box textarea { color: #4b1226; }
.letter__body strong { color: #421020; }

@keyframes moonBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .44; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: .68; }
}

/* V4: the CSS reliquary remains as a no-WebGL fallback. */
.mailbox-3d {
  position: absolute; z-index: 6; inset: -18px -18px -2px; width: calc(100% + 36px); height: calc(100% + 20px);
  opacity: 0; transform: scale(.94); filter: saturate(108%);
  transition: opacity .8s ease, transform 1.1s var(--ease); pointer-events: none;
}
body.three-ready .mailbox-3d { opacity: 1; transform: scale(1); }
body.three-ready .mailbox__shell { opacity: 0; transition: opacity .55s ease; }
body.three-ready .mailbox__halo { opacity: .62; }
body.state-opening.three-ready .mailbox-3d { transform: scale(1.06); }

.deepsea-signature {
  position: relative; width: max-content; margin: 34px 6% 42px auto !important;
  color: #4b1226; transform: rotate(-7deg);
  font-family: "STXingkai", "华文行楷", "FZKai-Z03", "KaiTi", cursive;
  font-size: clamp(38px, 6vw, 58px); line-height: 1; letter-spacing: .14em;
  text-shadow: 0 7px 14px rgba(75,18,38,.08);
}
.deepsea-signature::after {
  content: ""; position: absolute; left: -9px; right: -18px; bottom: -11px; height: 13px;
  border-top: 1px solid rgba(75,18,38,.42); border-radius: 50%; transform: rotate(-3deg) skewX(-22deg);
}

.music-control {
  position: fixed; z-index: 22; right: clamp(18px, 3.5vw, 50px); bottom: 24px;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid rgba(201,218,242,.16); border-radius: 999px;
  background: rgba(12,18,31,.54); padding: 9px 13px;
  color: rgba(207,222,243,.58); opacity: .72; cursor: pointer;
  backdrop-filter: blur(14px); transition: color .3s, border-color .3s, background .3s, opacity .3s, transform .3s var(--ease);
  font: 9px/1 var(--utility); letter-spacing: .08em;
}
.music-control:hover, .music-control:focus-visible {
  color: #d8e6f8; border-color: rgba(202,220,246,.38); background: rgba(23,34,55,.72); opacity: 1;
}
.music-control:active { transform: scale(.97); }
.music-control.is-playing { color: #e3abc6; border-color: rgba(226,155,190,.32); background: rgba(53,28,48,.66); }
.music-control__bars { width: 13px; height: 12px; display: flex; align-items: end; justify-content: center; gap: 2px; }
.music-control__bars i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.music-control.is-playing .music-control__bars i { animation: musicBar .86s ease-in-out infinite alternate; }
.music-control.is-playing .music-control__bars i:nth-child(2) { animation-delay: -.33s; }
.music-control.is-playing .music-control__bars i:nth-child(3) { animation-delay: -.57s; }
body.menu-open .music-control { opacity: 0; pointer-events: none; }

@keyframes musicBar {
  from { transform: scaleY(.65); }
  to { transform: scaleY(2.6); }
}

@media (max-width: 700px) {
  .mailbox-3d { inset: -12px -15px 0; width: calc(100% + 30px); height: calc(100% + 12px); }
  .deepsea-signature { margin-right: 10% !important; }
  .music-control { right: 16px; bottom: 18px; padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .music-control.is-playing .music-control__bars i { animation: none; height: 8px; }
}

.hold-guide { position: fixed; z-index: 18; left: 50%; bottom: 24px; display: none; align-items: center; gap: 9px; border: 1px solid rgba(229,220,203,.16); border-radius: 999px; background: rgba(29,23,28,.72); padding: 9px 13px; color: rgba(229,220,203,.6); transform: translateX(-50%); backdrop-filter: blur(12px); font: 9px var(--utility); }
.hold-guide i { width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; }
.screen-reader-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }

@media (hover: none), (pointer: coarse) {
  .hold-guide { display: flex; opacity: 0; pointer-events: none; transition: opacity .35s; }
  body.state-reading .hold-guide.is-visible { opacity: 1; }
  .reveal-zone { cursor: default; }
  .reveal-zone__front::after { content: "按住，让它慢慢显影"; }
}

@media (max-width: 700px) {
  .entry__eyebrow { top: 9vh; }
  .entry h1 { bottom: 12vh; font-size: clamp(42px, 13vw, 60px); }
  .entry__hint { right: auto; left: 24px; bottom: 7vh; }
  .mailbox--large { width: 220px; transform: translateY(-4vh) scale(.88); }
  .reader-bar { height: 56px; grid-template-columns: 1fr 1fr; }
  .reader-bar > p { display: none; }
  .letter { width: calc(100% - 22px); min-height: 105vh; padding: 90px 25px 90px; }
  .letter__head { grid-template-columns: 1fr; }
  .letter__head > span { padding: 0; }
  .letter__body { padding-top: 40px; font-size: 18px; line-height: 1.95; }
  .reveal-zone { margin-inline: -8px; }
  .letter__end { min-height: 220px; }
  .mailbox-menu__panel { padding: 28px 20px 50px; }
  .stack-letter { grid-template-columns: 40px 1fr 18px; }
  .stack-letter strong { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}