@import url('/type.css');
:root{color-scheme:dark;--night:#182a37;--ink:#343a3d;--muted:#9aa8af;--gold:#c2ab82;--paper:#f5f0e4;--reader-font:18px;--paper-width:min(680px,calc(100vw - 64px));--paper-height:min(820px,calc(100dvh - 208px));font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--night)}body{color:#e9e5dc;min-height:100dvh;overflow-x:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:0}button:active:not(:disabled){filter:brightness(.95)}[hidden]{display:none!important}
.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 49% 29%,#344b57 0,#223744 38%,#182b38 69%,#13232e 100%)}.light{position:absolute;filter:blur(80px);border-radius:50%;opacity:.11}.light-one{background:#c9b697;width:560px;height:430px;left:calc(50% - 280px);top:20%}.light-two{background:#526d85;width:550px;height:650px;right:-260px;bottom:-300px}.grain{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{height:78px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 44px}.brand{display:flex;align-items:center;gap:13px;color:#cfc8b6;font-family:Georgia,serif;font-size:12px;letter-spacing:.21em}.brand i{font-size:13px;font-weight:400;color:#8f9b9f;margin:0 3px}.masthead-note{font-size:9px;letter-spacing:.24em;color:#8c9ca4}.lobby{position:relative;min-height:calc(100dvh - 78px);display:flex;align-items:center;flex-direction:column}.intro{text-align:center;margin-top:clamp(22px,5vh,62px)}.eyebrow{color:#b3a78f;font-size:9px;letter-spacing:.26em}.intro h1{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:.12em;margin:17px 0 0;color:#e9e4d9}.envelope-stage{width:min(610px,calc(100vw - 56px));margin-top:clamp(42px,7vh,80px);margin-bottom:36px;position:relative;perspective:1300px}.envelope{aspect-ratio:1.65;position:relative;transform:rotate(-3deg);transform-style:preserve-3d;isolation:isolate;filter:drop-shadow(0 28px 28px #08172266)}.envelope-back{position:absolute;inset:0;border-radius:4px;background:#d5cdbb;box-shadow:inset 0 0 0 1px #ded6c6}.envelope-front{position:absolute;inset:0;background:linear-gradient(170deg,#f0e9d9,#dfd5bf);clip-path:polygon(0 100%,0 82%,50% 30%,100% 82%,100% 100%);z-index:5;border-radius:0 0 4px 4px}.envelope-fold{position:absolute;inset:0;z-index:4;background:linear-gradient(110deg,#e6decb,#f3ebda)}.envelope-fold.left{clip-path:polygon(0 0,52% 52%,0 100%)}.envelope-fold.right{clip-path:polygon(100% 0,48% 52%,100% 100%);background:linear-gradient(200deg,#dfd6c2,#e9e0cd)}.envelope-flap{position:absolute;inset:0;background:linear-gradient(165deg,#f4eedf 15%,#e5dbc5 85%);clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:50% 0;z-index:7;transition:transform .9s cubic-bezier(.2,.75,.25,1),filter .8s}.envelope-flap:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#786e5103 0 1px,transparent 1px 3px)}.seal{z-index:8;position:absolute;left:calc(50% - 27px);top:calc(57% - 27px);width:54px;height:54px;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#9e7970,#725950);border-radius:50% 46% 49% 45%;box-shadow:0 3px 5px #47362740,inset 0 0 0 4px #b99e7533,inset 0 0 0 5px #57403633;transition:opacity .3s,transform .5s}.envelope-address{z-index:6;position:absolute;left:0;right:0;top:73%;display:flex;align-items:center;flex-direction:column;color:#5d5d56}.envelope-to{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:31px;line-height:1.1}.envelope-from{font-family:Georgia,serif;font-size:11px;font-style:italic;margin-top:10px;color:#8a806b}.envelope-date{position:absolute;z-index:6;bottom:19px;right:24px;color:#99917e;font-size:7px;letter-spacing:.2em}.envelope-letter{position:absolute;left:10%;top:8%;width:80%;height:86%;background:var(--paper);z-index:2;padding:36px;box-shadow:0 2px 12px #0002;transition:transform 1.15s cubic-bezier(.18,.6,.23,1),opacity .8s;opacity:0}.envelope-letter>span{font-family:Georgia,serif;color:#514c43;font-size:28px;font-style:italic}.ghost-line{height:1px;background:#a698782e;margin-top:28px}.ghost-line.short{width:75%}.envelope-shadow{position:absolute;left:6%;right:6%;height:36px;bottom:-60px;background:#05121b;filter:blur(26px);border-radius:50%;opacity:.35;transform:rotate(-3deg)}
.envelope.opening .seal{opacity:0;transform:translateY(-12px) scale(.8)}.envelope.opening .envelope-flap{transform:rotateX(178deg);filter:brightness(.88);z-index:1}.envelope.opening .envelope-letter{opacity:1;transform:translateY(-73%) rotate(3deg);transition-delay:.5s}.lobby.departing{animation:depart .5s ease both}@keyframes depart{to{opacity:0;transform:translateY(35px)}}
.lobby-actions{display:flex;flex-direction:column;align-items:center;position:relative;z-index:9;margin-top:13px}.primary-button{min-height:47px;padding:13px 27px;background:#e7decc;color:#34434a;border:1px solid #efe8d955;border-radius:3px;font-size:13px;letter-spacing:.06em;box-shadow:0 5px 20px #061a201c;display:inline-flex;align-items:center;justify-content:center;gap:35px;transition:background .2s,transform .2s}.primary-button:hover:not(:disabled){background:#f5eddb;transform:translateY(-1px)}.primary-button span{font-size:18px;line-height:1}.quiet-note{font-size:11px;letter-spacing:.045em;color:#a1adb2;margin:17px 0 0;line-height:1.8;text-align:center}.error-text{font-size:12px;color:#e8b1a0;line-height:1.7;min-height:0}.error-text:empty{display:none}.lobby-footer{margin-top:auto;width:100%;padding:38px 44px 24px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.21em;color:#7e919c}
.reader{position:relative;z-index:2;padding:0 0 12px;animation:arrive .7s ease both}.reading-top{width:var(--paper-width);margin:0 auto 12px;display:flex;align-items:center;justify-content:space-between;height:24px;font-size:10px;letter-spacing:.045em;color:#b1babc}.reading-tools{display:flex;align-items:center;gap:15px}.reading-tools button{background:transparent;padding:3px 0;color:#c6cdca;font-size:11px}.tool-divider{height:10px;width:1px;background:#8390915e}.paper-stage{width:var(--paper-width);height:var(--paper-height);margin:auto;position:relative;perspective:1400px}.letter-paper,.sheet-back{position:absolute;inset:0;background:var(--paper);border-radius:2px;box-shadow:0 20px 55px #07151d40,0 2px 5px #07151d20}.letter-paper{z-index:3;color:var(--ink);background-image:linear-gradient(90deg,#ab976806,transparent 8%,transparent 90%,#7b6c5010),repeating-linear-gradient(0deg,#7b6c5003 0 1px,transparent 1px 3px);transform-origin:50% 85%;isolation:isolate;overflow:hidden}.letter-paper:before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 42px #ad956b0a}.back-one{background:#ddd6c6;transform:translate(9px,8px) rotate(1.4deg);z-index:2;animation:drift-one 13s ease-in-out infinite}.back-two{background:#bdbbb0;transform:translate(-8px,13px) rotate(-1.5deg);z-index:1;animation:drift-two 16s ease-in-out infinite}.paper-ground{position:absolute;bottom:-25px;left:15%;right:15%;height:30px;filter:blur(30px);background:#05141a80}.paper-heading{position:absolute;left:48px;right:48px;top:28px;display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #afa08036;font-family:Georgia,serif;font-size:9px;letter-spacing:.18em;color:#8b826f}.paper-heading i{font-size:11px;letter-spacing:0;margin:0 7px}.paper-heading img{opacity:.7}.paper-body{position:absolute;left:48px;right:48px;top:91px;bottom:61px;font-family:var(--serif);font-size:var(--reader-font);line-height:1.88;font-weight:400;letter-spacing:.025em;overflow:hidden;color:#39403e;text-align:justify;overflow-wrap:anywhere}.paper-body p{margin:0 0 .95em;text-indent:2em;white-space:pre-wrap}.paper-body p.continuation{text-indent:0}.paper-body p.salutation{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.3em;text-indent:0;margin-bottom:1em;line-height:1.5;text-align:left}.paper-body p.signature{font-family:Georgia,"Times New Roman",serif;text-indent:0;font-style:italic;text-align:right;line-height:1.8;margin-top:.8em;white-space:pre-line}.paper-footer{position:absolute;bottom:26px;left:48px;right:48px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.17em;color:#9d9481}.paper-footer span:last-child{font-family:Georgia,serif;font-size:12px}.page-nav{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:24px;height:35px}.nav-arrow{width:43px;height:35px;border:1px solid #a5b4b247;border-radius:3px;color:#e5e3d7;background:#283d4755;font-size:20px;transition:background .2s}.nav-arrow:hover:not(:disabled){background:#48606a55}.page-position{width:100px;text-align:center;font-size:10px;color:#c4ccca;letter-spacing:.1em}.progress-track{height:1px;margin-top:8px;background:#97a5a740}.progress-track>div{height:1px;background:var(--gold);width:0;transition:width .3s}.reading-hint{text-align:center;color:#8799a2;font-size:9px;letter-spacing:.06em;margin:11px 0 0}.paper-body.measure{position:fixed;left:-20000px;right:auto;top:0;bottom:auto;height:auto;visibility:hidden;overflow:visible;pointer-events:none;contain:layout style}.reader .letter-paper.turn-out-next{animation:turn-out-next .2s ease-in both}.reader .letter-paper.turn-out-prev{animation:turn-out-prev .2s ease-in both}.reader .letter-paper.turn-in-next{animation:turn-in-next .35s cubic-bezier(.15,.65,.3,1) both}.reader .letter-paper.turn-in-prev{animation:turn-in-prev .35s cubic-bezier(.15,.65,.3,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes drift-one{50%{transform:translate(12px,10px) rotate(1.8deg)}}@keyframes drift-two{50%{transform:translate(-10px,16px) rotate(-1.9deg)}}@keyframes turn-out-next{to{opacity:0;transform:translateX(-70px) rotateY(-10deg) rotate(-2deg)}}@keyframes turn-out-prev{to{opacity:0;transform:translateX(70px) rotateY(10deg) rotate(2deg)}}@keyframes turn-in-next{from{opacity:0;transform:translateX(60px) rotateY(10deg) rotate(1deg)}to{opacity:1;transform:none}}@keyframes turn-in-prev{from{opacity:0;transform:translateX(-60px) rotateY(-10deg) rotate(-1deg)}to{opacity:1;transform:none}}
.letter-dialog{color:#3c423d;background:#f4efe3;padding:43px 38px 30px;border:1px solid #dcd3bf;border-radius:5px;max-width:440px;width:calc(100vw - 38px);box-shadow:0 25px 100px #04121a80}.letter-dialog::backdrop{background:#0e202bc4;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:15px;top:10px;background:none;color:#807c70;font-size:25px}.dialog-kicker{font-family:Georgia,serif;letter-spacing:.2em;font-size:9px;color:#a48a5f}.letter-dialog h2{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:.04em;margin:16px 0 15px}.letter-dialog>p{font-size:13px;color:#777a70;line-height:1.9}.letter-dialog label{font-size:11px;color:#6f776d;display:block;margin:24px 0 9px}.letter-dialog input,.owner-form input{display:block;width:100%;border:1px solid #c9c2b2;background:#fffaf1;color:#303b3d;border-radius:3px;padding:13px 14px;outline:none;font-size:15px}.letter-dialog input:focus,.owner-form input:focus{border-color:#a28c65;box-shadow:0 0 0 3px #b49b6c13}.letter-dialog form>.primary-button{width:100%;margin-top:18px;background:#324b57;color:#efe9da}.letter-dialog .error-text{color:#aa6352}.letter-dialog .dialog-footnote{font-size:10px;color:#9b988a;margin-top:19px}.dialog-actions{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:28px}.dialog-actions>.primary-button{background:#324b57;color:#efe9da;font-size:12px;padding:12px 18px;gap:12px}.text-button{background:none;color:#858879;font-size:12px;padding:10px 0}.toast{position:fixed;z-index:30;left:50%;bottom:26px;transform:translateX(-50%);padding:12px 20px;color:#e7e4d8;background:#142630ef;border:1px solid #a6b0a244;max-width:calc(100vw - 32px);border-radius:4px;font-size:12px;box-shadow:0 10px 30px #0003}
.owner-layout{position:relative;max-width:660px;margin:45px auto;padding:0 24px 70px}.owner-layout h1{font-family:var(--serif);font-weight:400;font-size:29px}.owner-layout p{font-size:13px;line-height:1.9;color:#bac4c5}.owner-card{padding:25px 26px;margin:24px 0;background:#293e4890;border:1px solid #b5b09a30;border-radius:6px}.owner-card label{display:block;margin-bottom:10px;font-size:12px;color:#c4ccca}.owner-form .primary-button{margin-top:18px}.owner-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0}.owner-stat>span{display:block;font-size:10px;color:#9cadaa}.owner-stat>strong{display:block;font-family:Georgia,serif;font-size:28px;font-weight:400;margin-top:10px}.owner-actions{display:flex;flex-wrap:wrap;gap:12px}.owner-actions .primary-button{gap:12px;min-height:43px;font-size:12px;padding:10px 15px}.owner-actions .secondary-button{padding:10px 15px;border:1px solid #b5b6a350;border-radius:3px;background:transparent;color:#dadccf;font-size:12px}.owner-actions .danger-button{border-color:#b7887760;color:#e1bcae}.version-info{font-size:11px;line-height:1.8;color:#a4b1b2;word-break:break-all}.owner-layout a{color:var(--gold);font-size:12px;text-decoration:none}.owner-bottom{display:flex;justify-content:space-between;align-items:center}.owner-bottom button{background:none;color:#a7b3b5;font-size:12px}.owner-card h2{font-size:14px;font-weight:400;letter-spacing:.06em;margin:0 0 18px}.owner-card small{font-size:10px;color:#9bafac;line-height:1.8;display:block;margin-top:20px}
@media(min-height:1000px){.envelope-stage{margin-top:100px;margin-bottom:55px}.intro{margin-top:70px}}
@media(max-width:600px){:root{--paper-width:calc(100vw - 34px);--paper-height:calc(100dvh - 180px);--reader-font:17px}.masthead{height:59px;padding:0 22px}.brand{font-size:10px;gap:9px;letter-spacing:.15em}.brand img{width:24px;height:24px}.masthead-note{font-size:7px;letter-spacing:.12em}.lobby{min-height:calc(100dvh - 59px)}.intro{margin-top:60px}.eyebrow{font-size:8px;letter-spacing:.18em}.intro h1{font-size:23px;letter-spacing:.07em;margin-top:18px}.envelope-stage{margin-top:80px;margin-bottom:55px;width:calc(100vw - 53px)}.envelope-to{font-size:23px}.envelope-from{font-size:9px;margin-top:6px}.envelope-date{font-size:5px;right:15px;bottom:12px}.seal{width:43px;height:43px;left:calc(50% - 21.5px);top:calc(57% - 21.5px)}.seal img{width:29px;height:29px}.envelope-letter{padding:22px}.envelope-letter>span{font-size:21px}.ghost-line{margin-top:18px}.primary-button{min-height:48px;padding:13px 27px}.quiet-note{font-size:10px}.lobby-footer{padding:35px 22px 23px;font-size:7px;letter-spacing:.14em}.reading-top{height:22px;margin-bottom:9px;font-size:9px}.reading-tools{gap:13px}.reading-tools button{font-size:10px}.paper-heading{left:25px;right:25px;top:20px;padding-bottom:8px;font-size:8px}.paper-heading img{width:23px;height:23px}.paper-body{left:25px;right:25px;top:67px;bottom:49px;line-height:1.82;letter-spacing:.01em}.paper-body p{margin-bottom:.82em}.paper-footer{left:25px;right:25px;bottom:20px;font-size:7px}.page-nav{margin-top:18px;gap:29px;height:32px}.nav-arrow{height:32px;width:42px}.reading-hint{margin-top:9px;font-size:8px}.reader{padding-bottom:9px}.sheet-back.back-one{transform:translate(5px,6px) rotate(1deg)}.sheet-back.back-two{transform:translate(-4px,10px) rotate(-1deg)}.back-one,.back-two{animation:none}.letter-dialog{padding:38px 26px 24px}.letter-dialog h2{font-size:23px}.owner-layout{margin-top:25px}.owner-card{padding:21px}.owner-stats{gap:8px}.owner-stat>strong{font-size:23px}}
@media(max-height:690px) and (max-width:600px){.intro{margin-top:25px}.envelope-stage{margin-top:51px;margin-bottom:26px}.lobby-actions{margin-top:3px}.lobby-footer{padding-top:20px}:root{--paper-height:calc(100dvh - 176px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.back-one,.back-two{animation:none}}
@media(min-width:601px) and (max-height:820px){.intro{margin-top:22px}.envelope-stage{width:min(530px,calc(100vw - 64px));margin-top:32px;margin-bottom:26px}.lobby-actions{margin-top:8px}.lobby-footer{padding-top:24px}}
@supports not (height:100dvh){:root{--paper-height:min(820px,calc(100vh - 208px))}body{min-height:100vh}.lobby{min-height:calc(100vh - 78px)}@media(max-width:600px){:root{--paper-height:calc(100vh - 180px)}.lobby{min-height:calc(100vh - 59px)}}@media(max-height:690px) and (max-width:600px){:root{--paper-height:calc(100vh - 176px)}}}
.paper-heading{min-height:42px}@media(max-width:600px){.paper-heading{min-height:32px}}