:root{color:#f2e5c7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(#09101a 0%,#101929 40%,#19161d 100%);font-family:Noto Serif TC,PingFang TC,Microsoft JhengHei,serif}*{box-sizing:border-box}body{min-width:320px;margin:0}h1,h2,h3,p{margin:0}button,textarea{font:inherit}button:disabled,textarea:disabled{cursor:not-allowed}#app,.page-shell{min-height:100vh}.page-shell{position:relative;overflow:hidden}.app-notice{z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-radius:18px;min-width:min(28rem,100% - 2rem);max-width:min(32rem,100% - 2rem);padding:.9rem 1.1rem;position:fixed;top:1.25rem;left:50%;transform:translate(-50%);box-shadow:0 22px 50px #00000052}.app-notice-info{color:#f5e7cb;background:#1c181eeb;border:1px solid #ddbf8b29}.app-notice-reply{color:#fff1cf;background:#4a3a1ff0;border:1px solid #dfc28e3d}.app-notice-keeper{color:#e0f0d2;background:#27301ff0;border:1px solid #afcc8f33}.login-backdrop{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#07080c94;place-items:center;padding:1.5rem;display:grid;position:fixed;inset:0}.login-modal{color:#f5e7cb;background:linear-gradient(#1c181cf5,#121218fa);border:1px solid #ddbf8b29;border-radius:22px;width:min(100%,27.5rem);height:33rem;padding:2rem 1.5rem 1.5rem;position:relative;overflow-y:auto;box-shadow:0 24px 60px #00000057}.detail-modal{color:#f5e7cb;background:linear-gradient(#1c181cf7,#121218fc);border:1px solid #ddbf8b29;border-radius:22px;width:min(100%,34rem);max-height:min(80vh,42rem);padding:2rem 1.5rem 1.5rem;position:relative;overflow:auto;box-shadow:0 24px 60px #00000057}.login-close{color:#f5e7cbc2;cursor:pointer;box-shadow:none;background:0 0;border:none;padding:0;font-size:1.6rem;line-height:1;position:absolute;top:.9rem;right:1rem}.login-kicker{color:#d7b57a;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}.login-modal h3{margin-top:.7rem;font-size:1.8rem}.login-copy{color:#f2e5c7b8;margin-top:0;font-size:.92rem;line-height:1.65}.login-copy-block{align-content:start;gap:.45rem;min-height:4.1rem;margin-top:.95rem;display:grid}.login-fields{gap:1.15rem;margin-top:.7rem;display:grid}.login-field{display:grid}.login-label{color:#f2e5c7d6;margin-top:0;margin-bottom:.55rem;font-size:.95rem;display:block}.login-input{color:#f5e7cb;width:100%;min-height:0;font-size:inherit;background:#fff8e814;border:1px solid #d6b17624;border-radius:14px;padding:.9rem 1rem}.login-input:focus{outline:2px solid #d0a66147}.login-submit{color:#2e2625;letter-spacing:.04em;background:linear-gradient(#f6f1ea 0%,#ebe4dc 100%);border:none;border-radius:14px;width:100%;min-height:2.7rem;margin-top:1.2rem;font-size:1.1rem;font-weight:700;box-shadow:0 14px 28px #0003}.login-submit:hover{background:linear-gradient(#fff8f0 0%,#efe7de 100%)}.admin-scene{background:radial-gradient(circle at 50% 16%,#d8b5741f,#0000 18%),linear-gradient(#111722 0%,#1b161c 100%);place-items:center;padding:2rem 1.25rem;display:grid}.admin-shell{width:min(100%,56rem)}.admin-back{color:#f1e4c5c7;box-shadow:none;background:0 0;border:none;margin-bottom:1rem;padding:0}.admin-panel{background:linear-gradient(#1b181cf0,#111016fa);border:1px solid #ddbf8b24;border-radius:28px;padding:2.2rem;box-shadow:0 28px 70px #00000057}.admin-kicker,.admin-welcome-kicker{color:#d7b57a;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}.admin-panel h1{color:#f6ecd6;margin-top:.8rem;font-size:clamp(2rem,4vw,3rem)}.admin-copy{color:#f2e5c7b8;margin-top:1rem;line-height:1.9}.admin-welcome{background:#35462c24;border:1px solid #79986a29;border-radius:20px;margin-top:1.2rem;padding:1.2rem 1.25rem}.admin-welcome h2{color:#f5e9cb;margin-top:.65rem;font-size:2rem}.admin-welcome p{color:#ede4d1c7;margin-top:.8rem;line-height:1.85}.admin-actions{flex-wrap:wrap;gap:.9rem;margin-top:1.5rem;display:flex}.admin-toolbar{grid-template-columns:1.5fr 1fr 1fr;gap:.9rem;margin-top:1.5rem;display:grid}.admin-toolbar-field{color:#f2e5c7d6;gap:.45rem;font-size:.92rem;display:grid}.admin-toolbar-field span{color:#d7b57ac7;letter-spacing:.06em}.admin-toolbar-input,.admin-toolbar-select{min-height:3rem}.admin-toolbar-select{appearance:none;cursor:pointer}.admin-letter-list{gap:1rem;margin-top:1.5rem;display:grid}.admin-letter-card{background:#fff8e80a;border:1px solid #ddbf8b1f;border-radius:22px;padding:1.25rem}.admin-letter-head{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.admin-letter-head h3{color:#f5e9cb;margin-top:.4rem;font-size:1.3rem}.admin-letter-time{color:#ebe1cd94;margin-top:.55rem;font-size:.88rem}.admin-letter-label{color:#d7b57ab8;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem}.admin-letter-block{margin-top:1rem}.admin-letter-content{color:#f1e9d6e0;white-space:pre-wrap;margin-top:.55rem;line-height:1.9}.admin-letter-preview{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.admin-letter-actions{flex-wrap:wrap;gap:.75rem;margin-top:1rem;display:flex}.admin-view-button,.admin-reply-button,.admin-send-button,.admin-cancel-button{margin-top:0}.admin-reply-panel{border-top:1px solid #ddbf8b1a;margin-top:1.1rem;padding-top:1rem}.admin-reply-textarea{color:#f5e9cb;resize:vertical;background:#fff8e814;border:1px solid #dfc28e1f;border-radius:16px;width:100%;min-height:9rem;margin-top:.55rem;padding:1rem;line-height:1.8}.admin-reply-textarea:focus{outline:2px solid #d0a66147}.admin-reply-actions{flex-wrap:wrap;gap:.8rem;margin-top:1rem;display:flex}.admin-letter-empty{color:#ece2cdbd;line-height:1.8}.detail-admin-reply{border-top:1px solid #ddbf8b1f;margin-top:1.1rem;padding-top:1rem}.ghost-button{color:#f1e4c5;box-shadow:none;background:0 0;border:1px solid #ebd8b429;border-radius:999px;margin-top:1.8rem;padding:.95rem 2rem}.ghost-button:hover{background:#fff8e814}.register-link{color:#d9bb87;text-underline-offset:.24rem;width:100%;box-shadow:none;font-size:inherit;background:0 0;border:none;margin-top:1rem;padding:.2rem 0;text-decoration:underline}.register-link:hover{color:#f0d7a7;background:0 0}.auth-error,.auth-success{border-radius:14px;margin-top:1rem;padding:.85rem .95rem;font-size:.95rem;line-height:1.7}.auth-error{color:#efc1b7;background:#67221b2e;border:1px solid #b75d4e38}.auth-success{color:#d7ebc7;background:#30452938;border:1px solid #829c702e}.auth-hint{color:#ddc18bd6;margin-top:0;font-size:.9rem;line-height:1.65}.register-hint{min-height:1.5rem}.register-hint-placeholder{visibility:hidden}.scene{min-height:100vh}.alley-scene{background:linear-gradient(#101722 0%,#16161d 100%)}.alley-frame{--door-left:30%;--door-bottom:1%;--door-width:23%;--door-height:35%;background-image:var(--alley-image);background-position:50% 62%;background-size:cover;min-height:100vh;position:relative;overflow:hidden}.door-echo{background-image:var(--alley-image);clip-path:inset(calc(100% - (var(--door-bottom) + var(--door-height))) calc(100% - (var(--door-left) + var(--door-width))) var(--door-bottom) var(--door-left) round 1.2rem 1.2rem .3rem .3rem);transform-origin:50% 85%;z-index:1;background-position:50% 62%;background-size:cover;animation:1.8s ease-in-out infinite real-door-shiver;position:absolute;inset:0}.alley-overlay{background:linear-gradient(#080c142e,#07080c57),radial-gradient(circle at 50% 18%,#97acc429,#0000 20%);position:absolute;inset:0}.alley-vignette{background:linear-gradient(90deg,#080a0eb3 0%,#080a0e2e 18%,#080a0e29 82%,#080a0eb3 100%),linear-gradient(#0a0c1270 0%,#0000 24%,#0a0a0e5c 100%);position:absolute;inset:0}.scene-copy{text-align:center;z-index:3;width:min(72rem,100% - 3rem);animation:2.2s forwards copy-fade-in;position:absolute;top:17%;left:50%;transform:translate(-50%)}.scene-title{color:#dfbf84;letter-spacing:.14em;text-transform:uppercase;background:#13121761;border:1px solid #f7dfaa2e;border-radius:999px;padding:.45rem .9rem;font-size:.78rem;display:inline-block}.scene-copy h2{color:#f5edd9;text-shadow:0 10px 30px #0000007a;white-space:nowrap;font-size:clamp(1.8rem,3.8vw,2.4rem);font-weight:700;line-height:1.25}.scene-user{color:#f1e4c5cc;letter-spacing:.08em;margin-top:1rem;font-size:1rem}.scene-reply-badge{vertical-align:middle;margin-left:.7rem}.scene-topbar{z-index:5;justify-content:flex-end;width:min(100% - 3rem,1160px);display:flex;position:absolute;top:1.5rem;left:50%;transform:translate(-50%)}.login-trigger{color:#f3e7cd;box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0e0e126b;border:1px solid #f7dfaa2e;border-radius:999px;padding:.7rem 1.2rem;position:static}.login-trigger:hover{background:#1c1713ad}.ready-button,.submit-button{color:#fff7eb;cursor:pointer;letter-spacing:.08em;background:linear-gradient(#9a673c,#6f4324);border:none;border-radius:999px;margin-top:1.8rem;padding:.95rem 2rem;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 14px 28px #361f1238}.ready-button:hover,.submit-button:hover{background:linear-gradient(#a87345,#7c4d2a);transform:translateY(-2px);box-shadow:0 18px 34px #361f1247}.submit-button:disabled{opacity:.9;background:linear-gradient(#85664d,#684c38);transform:none;box-shadow:0 10px 20px #2618102e}.door-hotspot{left:var(--door-left);bottom:var(--door-bottom);width:var(--door-width);height:var(--door-height);cursor:pointer;z-index:4;background:0 0;border:none;border-radius:3rem 3rem .5rem .5rem;position:absolute}.door-hotspot:hover,.door-hotspot:focus-visible{outline:none;box-shadow:0 0 0 1px #ffdfa366,0 0 24px #ffc05e40}.opening-scene{background:#020305;place-items:center;display:grid}.opening-darkness{background:#020305;place-items:center;width:100%;min-height:100vh;display:grid;position:relative;overflow:hidden}.opening-light-core{background:radial-gradient(circle,#ffe7b1f2 0%,#ffce70a6 35%,#ffce7000 72%);border-radius:50%;width:4rem;height:4rem;animation:2.2s forwards light-bloom;position:absolute}.opening-darkness p{z-index:1;color:#ffeccbdb;letter-spacing:.08em;margin-top:18rem;position:relative}.note-scene{background:radial-gradient(circle at 50% 20%,#ffe3ad14,#0000 20%),linear-gradient(#15171d 0%,#201e25 100%);place-items:center;display:grid}.note-wall{place-items:center;width:min(100%,1000px);min-height:100vh;padding:2rem;display:grid;position:relative}.sticky-note{color:#533822;background:linear-gradient(#f6e1a6 0%,#efd085 100%);border-radius:6px 6px 22px;width:min(32rem,100%);padding:3.4rem 2.6rem 2.7rem;position:relative;transform:rotate(-2deg);box-shadow:0 28px 60px #00000052,inset 0 -18px 24px #bc843614}.sticky-note:after{content:"";clip-path:polygon(100% 0,0 100%,100% 100%);background:linear-gradient(135deg,#ac762f1a,#fff9d773);width:3.6rem;height:3.6rem;position:absolute;bottom:0;right:0}.tape{background:#f7f1da8a;width:4.5rem;height:1.4rem;position:absolute;top:-1rem;box-shadow:0 4px 10px #00000014}.tape-left{left:2rem;transform:rotate(-10deg)}.tape-right{right:2rem;transform:rotate(8deg)}.note-kicker{letter-spacing:.14em;text-transform:uppercase;color:#634323c2;font-size:.8rem}.sticky-note h2{margin-top:.9rem;font-size:clamp(2rem,4.8vw,3rem);line-height:1.22}.sticky-note p{margin-top:1.2rem;font-size:1.05rem;line-height:2}.letter-scene{background:radial-gradient(circle at 50% 10%,#ffd3881a,#0000 18%),linear-gradient(#171922 0%,#23202a 100%);place-items:center;padding:3rem 1.25rem;display:grid}.letter-room{gap:1.6rem;width:min(100%,980px);padding:2rem;display:grid}.letter-room-copy{text-align:center}.letter-room-copy h2{color:#f3e8cf;margin-top:1rem;font-size:clamp(2rem,4vw,3.2rem)}.letter-room-copy p:last-child{color:#ece2cdc2;width:min(36rem,100%);margin:1rem auto 0;line-height:1.9}.letter-paper{color:#3b2f2f;background:linear-gradient(#f7eed6fa,#e9d9bbf2);border-radius:22px;width:min(100%,760px);margin:0 auto;padding:2rem;box-shadow:inset 0 0 0 1px #7b4f2c14,0 24px 60px #0000003d}.letter-paper-head{color:#60452dc2;justify-content:space-between;gap:1rem;margin-bottom:1rem;font-size:.95rem;display:flex}textarea{color:#3b2f2f;resize:vertical;background:linear-gradient(#fffdf4fa,#faf5e8f5);border:1px solid #7b4f2c14;border-radius:16px;width:100%;min-height:240px;padding:1.3rem;line-height:1.9;box-shadow:inset 0 0 12px #0000000f}textarea:focus{outline:2px solid #7b4f2c3d}textarea:disabled{opacity:.72}.submit-error{color:#9a4f43;background:#702a1f14;border:1px solid #b55c4a2e;border-radius:16px;margin-top:1rem;padding:.95rem 1rem;line-height:1.75}.reply-card{background:#fffcf2eb;border-left:6px solid #7b4f2c;border-radius:14px;margin-top:1.5rem;padding:1.4rem 1.5rem;box-shadow:0 14px 30px #54382314}.reply-card h3{color:#5f3a1f;margin-bottom:.6rem}.reply-card p{line-height:1.95}.letter-board-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;display:grid}.letter-board{background:linear-gradient(#1f1c23eb,#18161df5);border:1px solid #dfc28e1f;border-radius:24px;padding:1.35rem 1.25rem;box-shadow:0 20px 50px #0003}.letter-board-head{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;display:flex}.letter-board-head h3{color:#f1e5c8;font-size:1.2rem}.letter-board-head span{color:#ddc18bb3;font-size:.88rem}.letter-board-status{align-items:center;display:inline-flex}.reply-badge{color:#f3dcae;background:#d4aa6c29;border-radius:999px;align-items:center;padding:.24rem .7rem;font-size:.8rem;display:inline-flex}.letter-board-empty{color:#ece2cdb3;line-height:1.85}.letter-board-list{gap:.95rem;display:grid}.latest-reply-banner{cursor:pointer;background:linear-gradient(#523c2357,#221d22c7);border:1px solid #e1c28429;border-radius:18px;gap:.65rem;margin-bottom:.95rem;padding:1rem;transition:transform .18s,border-color .18s,background .18s;display:grid}.latest-reply-banner:hover,.latest-reply-banner:focus-visible{border-color:#e1c28447;outline:none;transform:translateY(-2px)}.latest-reply-head{color:#f5e7cb;justify-content:space-between;align-items:center;gap:.8rem;display:flex}.history-card{cursor:pointer;background:#fff8e80f;border:1px solid #e9d7b414;border-radius:18px;flex-direction:column;min-height:12.25rem;padding:1rem;transition:transform .18s,border-color .18s,background .18s;display:flex}.history-card:hover,.history-card:focus-visible{background:#fff8e81a;border-color:#e9d7b42e;outline:none;transform:translateY(-2px)}.reply-history-card{background:#d4aa6c14}.history-row{justify-content:space-between;gap:.8rem;margin-bottom:.7rem;display:flex}.history-meta{color:#dfd0b19e;font-size:.85rem}.history-status{border-radius:999px;align-items:center;padding:.2rem .65rem;font-size:.8rem;display:inline-flex}.history-status-received{color:#dfc089;background:#dab97c1f}.history-status-replied{color:#cbe3c3;background:#78a07129}.history-content{color:#f3ebdb;white-space:pre-wrap;-webkit-line-clamp:3;-webkit-box-orient:vertical;min-height:5.55em;line-height:1.85;display:-webkit-box;overflow:hidden}.history-more{color:#ddc18bc7;margin-top:auto;padding-top:.9rem;font-size:.86rem}.detail-meta{color:#dfd0b1ad;margin-top:.95rem;line-height:1.75}.detail-status-row{margin-top:.9rem}.detail-content{color:#f3ebdb;white-space:pre-wrap;margin-top:1rem;line-height:1.95}.scene-enter-active,.scene-leave-active{transition:opacity .42s,transform .42s}.scene-enter-from,.scene-leave-to{opacity:0;transform:scale(1.02)}.paper-enter-active,.paper-leave-active,.reply-fade-enter-active,.reply-fade-leave-active{transition:opacity .5s,transform .5s}.paper-enter-from,.paper-leave-to,.reply-fade-enter-from,.reply-fade-leave-to{opacity:0;transform:translateY(24px)}.login-fade-enter-active,.login-fade-leave-active{transition:opacity .22s}.login-fade-enter-from,.login-fade-leave-to{opacity:0}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes copy-fade-in{0%,20%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes light-bloom{0%{opacity:.1;transform:scale(.2)}45%{opacity:.75;transform:scale(4)}to{opacity:1;transform:scale(24)}}@keyframes real-door-shiver{0%,to{transform:translate(0)rotate(0)}18%{transform:translate(-.5px)rotate(-.18deg)}36%{transform:translate(.8px)rotate(.22deg)}54%{transform:translate(-.6px)rotate(-.16deg)}72%{transform:translate(.5px)rotate(.14deg)}}@media (width<=900px){.scene-copy{top:14%}}@media (width<=720px){.alley-frame{--door-left:22%;--door-bottom:13.4%;--door-width:30.5%;--door-height:24.6%;background-position:48% 62%}.scene-copy{width:calc(100% - 2rem)}.scene-copy h2{white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.98rem,3.9vw,1.18rem);overflow:hidden}.login-copy-block{gap:.35rem;min-height:auto}.login-copy{white-space:nowrap;text-overflow:ellipsis;font-size:.58rem;line-height:1.15;overflow:hidden}.sticky-note{padding:3rem 1.4rem 2.2rem}.letter-room{padding:1rem .25rem}.letter-paper{padding:1.3rem}.letter-paper-head{font-size:.85rem}.letter-board-grid{grid-template-columns:1fr}.latest-reply-head{flex-direction:column;align-items:flex-start}.admin-toolbar{grid-template-columns:1fr}}