:root{font-family:"Microsoft YaHei",sans-serif;color:#354f51;background:#f6f4ed;font-synthesis:none;--ink:#354f51;--muted:#728484;--line:#dce3dd;--green:#436f69}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b7774d;outline-offset:6px}header{height:82px;padding:0 5%;display:flex;justify-content:space-between;align-items:center;font-size:14px}header span{color:#87928b;margin-left:12px}.old-link{font-size:12px}main{padding:0 24px}.shore{position:relative;isolation:isolate;overflow:hidden;min-height:700px;height:calc(100svh - 144px);max-height:960px;background:linear-gradient(#dbe9e3,#eef0dc 48%,#accdc8 49%);border-radius:12px}.intro{position:absolute;z-index:3;top:8%;left:7%}.eyebrow{font-size:10px;letter-spacing:3px;color:#718780}h1{font-family:Georgia,"SimSun",serif;font-weight:400;font-size:clamp(30px,3.6vw,52px);letter-spacing:4px;margin:20px 0}.intro>p:last-child{font-size:14px;line-height:2.1;color:#6b807b}.weather{position:absolute;right:6%;top:10%;font-size:12px;z-index:3}.weather small{display:block;font-size:10px;margin-top:10px;color:#7f9289}.weather-dot{display:inline-block;width:7px;height:7px;background:#849d78;border-radius:50%;margin-right:9px}.sun{position:absolute;width:95px;height:95px;border-radius:50%;background:#fcf2d2;top:29%;right:27%;box-shadow:0 0 65px #fcf2d285}.island{position:absolute;top:44%;right:-3%;width:29%;height:60px;background:#99b8ad;clip-path:polygon(0 100%,20% 72%,35% 70%,46% 45%,62% 32%,74% 43%,100% 0,100% 100%);opacity:.6}.sea{position:absolute;inset:48% 0 0;background:linear-gradient(#9fc6c0,#b7d7cf 50%,#d2e0cf);border-top:1px solid #d9e8dc}.sea:before,.sea:after{content:"";position:absolute;width:130%;height:130px;left:-15%;border:2px solid #eff7e28a;border-radius:50%;top:14%;transform:rotate(-5deg)}.sea:after{top:36%;left:-5%;transform:rotate(4deg)}.ripple{position:absolute;width:110px;height:9px;border-top:2px solid #e3efe391;border-radius:50%;animation:wave 6s ease-in-out infinite}.r1{left:18%;top:18%}.r2{left:68%;top:24%;animation-delay:-2s}.r3{left:48%;top:47%;width:200px}.sand{position:absolute;bottom:-160px;left:-10%;width:120%;height:44%;border-radius:50% 48% 0 0;background:#ede7d2;transform:rotate(-6deg);box-shadow:0 -12px 0 #f4f0d97a,0 -17px 0 #f8f7e475}.scene-object{position:absolute;z-index:4;border:0;background:none;color:var(--ink);padding:15px;display:flex;flex-direction:column;align-items:center;gap:20px}.scene-object:hover .object-label{transform:translateY(-4px)}.object-label{font-size:16px;letter-spacing:2px;transition:transform .2s;text-align:left}.object-label b{font-weight:400;margin-left:20px}.object-label small{display:block;font-size:10px;letter-spacing:1px;color:#69837c;margin-top:9px}.drifting{left:43%;top:49%}.bottle-art{position:relative;display:block;width:43px;height:92px;background:linear-gradient(90deg,#70aaa48c,#e0efcdbf 55%,#65a69e9c);border:2px solid #629890;border-radius:15px 15px 12px 12px;transform:rotate(27deg);box-shadow:7px 12px 12px #588f7f28;animation:bob 4s ease-in-out infinite}.bottle-art:before{content:"";position:absolute;top:-20px;left:10px;width:18px;height:24px;background:#a6c4ac;border:2px solid #629890;border-radius:3px}.bottle-art:after{content:"";position:absolute;top:-25px;left:11px;width:16px;height:10px;background:#b28b61;border-radius:2px}.bottle-art i{position:absolute;left:10px;top:26px;width:21px;height:47px;background:#f5eccd;transform:rotate(-8deg);border-radius:3px;border-right:4px solid #d6caab}.desk{left:12%;bottom:10%}.desk-art{position:relative;width:145px;height:75px;background:#b99169;transform:rotate(-9deg) skewX(8deg);border:4px solid #c9ab83;border-radius:4px;box-shadow:0 9px #967856,12px 22px 14px #8b8b7126}.paper{position:absolute;width:66px;height:48px;background:repeating-linear-gradient(#f9f4de 0 10px,#cbd0b9 11px,#f9f4de 12px);left:36px;top:6px;transform:rotate(8deg);border:7px solid #f9f4de}.pen{position:absolute;background:#586e64;height:4px;width:48px;top:33px;left:90px;transform:rotate(-45deg)}.mailbox{right:12%;bottom:14%}.mail-art{position:relative;display:block;width:82px;height:64px;background:#78918a;border:3px solid #617e76;border-radius:35px 35px 5px 5px;box-shadow:14px 5px 0 #566f65}.mail-art:before{content:"";position:absolute;top:24px;left:15px;width:45px;height:6px;background:#3f625a;border-radius:3px}.mail-art:after{content:"";position:absolute;top:61px;left:34px;width:10px;height:46px;background:#987f5f}.mail-art i{position:absolute;right:-16px;top:-10px;width:24px;height:18px;background:#c88e72;border-left:3px solid #987254}.mailbox .object-label{margin-top:35px}.shell{position:absolute;color:#c9b797;font-size:31px;bottom:9%;left:40%;transform:rotate(15deg)}.shell-two{left:64%;bottom:18%;font-size:17px}.shore-caption{position:absolute;bottom:5%;right:5%;font-size:10px;line-height:1.8;color:#9b9e89;letter-spacing:2px}footer{padding:20px 8px;display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;font-size:10px;color:#7d8880}footer button{border:0;background:none;color:inherit;font-size:10px;text-decoration:underline}.mobile-actions{display:none}dialog{width:min(580px,calc(100% - 28px));max-height:85svh;padding:26px 32px;border:1px solid #e0ddcd;border-radius:12px;background:#faf8ef;color:var(--ink);box-shadow:0 30px 100px #28484235}dialog::backdrop{background:#2e50465c;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--muted)}.close{border:0;background:none;font-size:28px;color:var(--muted);padding:0 5px}h2{font-family:Georgia,"SimSun",serif;font-weight:400;font-size:27px;line-height:1.5;margin:22px 0 14px}.meta,.hint{font-size:12px;color:var(--muted);line-height:1.8}.letter-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2.2;font-size:16px;margin:26px 0 30px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.actions button,.submit{border:1px solid #b8c8bc;background:transparent;color:var(--green);border-radius:6px;padding:11px 16px}.actions .primary,.submit{background:var(--green);color:#fff;border-color:var(--green)}textarea,input{display:block;width:100%;border:1px solid #d8ddcf;border-radius:6px;background:#fffdf7;color:var(--ink);padding:12px;margin:8px 0 18px}textarea{resize:vertical;min-height:150px;line-height:1.8}label{display:block;font-size:12px;margin-top:20px}.note{padding:14px 0;border-top:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8}.shelf-item{width:100%;display:block;text-align:left;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);line-height:1.8;overflow-wrap:anywhere}.shelf-item small{display:block;color:var(--muted)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#35594e;color:white;border-radius:8px;padding:13px 22px;font-size:13px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;width:max-content}#toast.show{opacity:1}@keyframes bob{50%{transform:translateY(-7px) rotate(21deg)}}@keyframes wave{50%{transform:translateX(18px);opacity:.4}}@media(max-width:700px){header{height:65px;padding:0 20px;font-size:12px}header span{display:none}.old-link{font-size:10px}main{padding:0 10px}.shore{min-height:740px;height:calc(100svh - 100px)}.intro{left:8%;top:5%}h1{font-size:29px;letter-spacing:1px}.intro>p:last-child{font-size:12px}.eyebrow{font-size:8px;letter-spacing:2px}.weather{left:8%;top:28%}.weather small{font-size:9px}.sun{width:60px;height:60px;top:35%;right:16%}.sea{top:46%}.island{top:42%}.drifting{left:39%;top:46%}.desk{left:3%;bottom:17%}.desk-art{transform:scale(.8) rotate(-9deg);width:130px}.mailbox{right:3%;bottom:18%}.mail-art{transform:scale(.8)}.object-label{font-size:13px;letter-spacing:1px}.object-label small{max-width:125px;font-size:9px;line-height:1.7}.object-label b{margin-left:7px}.mailbox .object-label{margin-top:20px}.sand{height:49%}.shore-caption{bottom:10%;font-size:9px}.shell-one{bottom:22%;left:47%}.mobile-actions{position:absolute;display:flex;bottom:3%;left:8%;right:8%;z-index:5;justify-content:space-around;border-top:1px solid #cccbb755;padding-top:15px}.mobile-actions button{border:0;background:none;color:#61776b;font-size:12px;padding:8px 20px}footer{gap:9px;padding:15px 5px}dialog{padding:20px}.letter-text{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep the scene's three targets separate on narrow screens. */
@media (max-width: 700px) {
  .drifting { top: 38%; gap: 12px; padding: 10px; }
  .desk, .mailbox { bottom: 13%; }
  .desk { left: 2%; width: 44%; }
  .mailbox { right: 2%; width: 44%; }
  .shore-caption { bottom: 8%; }
  .scene-object { min-width: 44px; min-height: 44px; }
  .close { min-width: 44px; min-height: 44px; }
}
.draft-status { padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 360px) {
  .intro { right: 6%; }
  h1 { font-size: 22px; letter-spacing: 0; white-space: nowrap; }
  .intro > p:last-child { font-size: 11px; }
  .object-label small { max-width: 105px; }
}
.dialog-top { position: sticky; top: -26px; background: #faf8ef; z-index: 2; padding: 8px 0; }
#dialog-body h2:focus { outline: none; }
dialog[open] { animation: unfold .24s ease-out; }
@keyframes unfold { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }