@import "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Noto+Serif+TC:wght@400;500;600&display=swap";:root{--color-background:#121317;--color-surface-lowest:#0d0e12;--color-paper:#f5f4ef;--color-paper-system:#e4e2dd;--color-ink:#30312e;--color-text:#e3e2e7;--color-text-muted:#90918a;--color-brass:#a68b67;--color-outline:#8e8e9333;--page-margin:32px;--element-gap:24px;--safe-bottom:max(40px, env(safe-area-inset-bottom));--motion-ease:cubic-bezier(.25, 1, .5, 1)}.ca01-app{width:min(100%,430px);min-height:100dvh;color:var(--color-text);background:var(--color-background);margin:0 auto;position:relative;overflow:hidden;box-shadow:0 0 80px #00000059}.ca01-app:after{z-index:20;pointer-events:none;content:"";opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");width:min(100%,430px);margin:0 auto;position:fixed;inset:0}.ca01-screen{z-index:1;min-height:100dvh;position:relative}.minimal-header{width:100%;height:80px;padding:0 var(--page-margin);grid-template-columns:44px 1fr 44px;align-items:center;display:grid}.minimal-header h1{letter-spacing:.08em;text-align:center;margin:0;font-family:Noto Serif TC,serif;font-size:24px;font-weight:600;line-height:36px}.icon-action,.text-action,.arrival-action,.envelope{color:inherit;cursor:pointer;background:0 0;border:0}.icon-action{width:44px;height:44px;color:var(--color-text-muted);place-items:center;padding:0;font-size:25px;display:grid}.header-spacer{width:44px;height:44px;display:block}.text-action{min-height:44px;color:var(--color-text-muted);letter-spacing:.18em;padding:12px 20px;font-size:14px;font-weight:400;line-height:20px;transition:color .25s,opacity .25s}.text-action:hover,.text-action:focus-visible{color:var(--color-text)}.brass-divider{background:linear-gradient(90deg, transparent, var(--color-brass), transparent);opacity:.55;width:100%;height:1px;display:block}.arrival-action{width:100%;min-height:100dvh;padding:var(--page-margin);place-items:center;display:grid;position:relative}.arrival-message{height:300px;color:var(--color-text);letter-spacing:.14em;writing-mode:vertical-rl;text-orientation:upright;opacity:0;filter:blur(4px);font-family:Noto Serif TC,serif;font-size:24px;font-weight:600;line-height:36px;animation:2.4s ease-in-out .6s forwards arrival-in;display:block;transform:translateY(8px)}.arrival-hint{bottom:var(--safe-bottom);color:var(--color-text-muted);letter-spacing:.18em;opacity:0;font-size:11px;transition:opacity .8s;position:absolute;left:50%;transform:translate(-50%)}.arrival-hint.is-visible{opacity:.35}.unopened-content{min-height:calc(100dvh - 80px);padding:20px var(--page-margin) var(--safe-bottom);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.unopened-content:before{pointer-events:none;content:"";opacity:.055;background:var(--color-text);filter:blur(100px);border-radius:50%;width:360px;height:360px;position:absolute}.envelope{aspect-ratio:3/4;width:min(100%,352px);color:var(--color-ink);border:1px solid var(--color-outline);background:var(--color-paper);transition:transform .35s var(--motion-ease), box-shadow .35s var(--motion-ease);border-radius:2px;flex-direction:column;justify-content:center;align-items:center;padding:32px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 45px #00000038}.envelope:after,.letter-paper:after{pointer-events:none;content:"";opacity:.02;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.envelope:hover{transform:translateY(-4px);box-shadow:0 26px 52px #00000047}.envelope:active{transform:scale(.995)}.envelope-flap{z-index:1;background:var(--color-paper);clip-path:polygon(0 0,50% 85%,100% 0);filter:drop-shadow(0 1px #8e8e9326);border-top:1px solid #ffffffb3;height:35%;position:absolute;top:0;left:0;right:0}.envelope-sender{z-index:2;letter-spacing:.16em;opacity:.82;margin-top:24px;font-family:Noto Serif TC,serif;font-size:24px;font-weight:500}.envelope-mark{z-index:2;width:48px;height:48px;color:var(--color-text-muted);border:1px solid var(--color-outline);opacity:.38;border-radius:50%;place-items:center;margin-top:30px;display:grid}.open-action-group{z-index:1;width:min(70%,246px);margin-top:var(--element-gap);flex-direction:column;align-items:center;display:flex}.opening-screen{place-items:center;display:grid}.opening-object{perspective:900px;width:min(100% - 64px,352px)}.opening-envelope{aspect-ratio:3/4;background:var(--color-paper);width:100%;animation:envelope-lift 1.8s var(--motion-ease) forwards;position:relative;box-shadow:0 14px 30px #0000002e}.opening-flap{z-index:3;background:var(--color-paper);clip-path:polygon(0 0,50% 85%,100% 0);transform-origin:top;height:35%;animation:flap-open .65s var(--motion-ease) .25s forwards;position:absolute;inset:0 0 auto}.opening-letter{z-index:2;height:84%;color:var(--color-ink);background:var(--color-paper-system);animation:letter-rise 1.15s var(--motion-ease) .65s forwards;padding:28px;font-family:Noto Serif TC,serif;display:block;position:absolute;bottom:6%;left:8%;right:8%;box-shadow:0 12px 30px #0000001f}.reading-screen{overflow-y:auto}.reading-header{z-index:5;background:linear-gradient(var(--color-background) 75%, transparent);grid-template-columns:44px 1fr auto;position:sticky;top:0}.source-label{color:var(--color-text-muted);letter-spacing:.08em;opacity:.55;white-space:nowrap;font-size:11px;line-height:14px}.reading-content{width:100%;max-width:640px;min-height:calc(100dvh - 80px);padding:28px var(--page-margin) var(--safe-bottom);flex-direction:column;align-items:center;display:flex}.letter-paper{width:100%;color:var(--color-ink);border:1px solid var(--color-outline);background:var(--color-paper-system);animation:paper-arrival .6s var(--motion-ease) forwards;border-radius:2px;padding:32px;position:relative;box-shadow:inset 0 1px #ffffff73,0 30px 60px -15px #0006}.letter-copy{z-index:1;letter-spacing:.02em;font-family:Noto Serif TC,serif;font-size:18px;font-weight:400;line-height:32px;position:relative}.letter-copy p{margin:0 0 12px}.letter-copy p:last-child{margin-bottom:0}.rain-mark{z-index:1;opacity:.16;font-size:28px;position:absolute;bottom:22px;right:28px}.reply-boundary{width:min(100%,320px);padding-bottom:var(--safe-bottom);flex-direction:column;align-items:center;margin-top:24px;display:flex}.reply-action:disabled{color:var(--color-text-muted);cursor:not-allowed;opacity:.28}.reply-choice-screen{flex-direction:column;display:flex}.reply-choice-content{min-height:calc(100dvh - 80px);padding:16px var(--page-margin) var(--safe-bottom);flex-direction:column;display:flex}.reply-letter-context{opacity:.3;width:100%;height:96px;margin-bottom:clamp(36px,8vh,72px);position:relative;overflow:hidden}.reply-letter-context:before,.reply-letter-context span{border:1px solid var(--color-outline);background:var(--color-paper-system);content:"";height:70px;position:absolute;left:8%;right:8%;box-shadow:0 12px 30px #00000038}.reply-letter-context:before{top:6px;transform:rotate(-1.5deg)}.reply-letter-context span{top:18px;transform:rotate(1deg)}.reply-options{border:0;margin:0;padding:0}.reply-options legend{width:100%;color:var(--color-text);letter-spacing:.05em;margin-bottom:28px;font-family:Noto Serif TC,serif;font-size:24px;font-weight:500;line-height:36px}.reply-option-list{flex-direction:column;display:flex}.reply-option{min-height:58px;color:var(--color-text-muted);letter-spacing:.04em;text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #a68b6780;grid-template-columns:20px 1fr;align-items:center;padding:10px 0;font-family:Noto Serif TC,serif;font-size:18px;line-height:32px;transition:color .2s;display:grid;position:relative}.reply-option:first-child{border-top:1px solid #a68b6780}.reply-option:hover,.reply-option:focus-visible,.reply-option.is-selected{color:var(--color-text)}.reply-selection-mark{background:var(--color-brass);width:0;height:1px;transition:width .2s var(--motion-ease);display:block}.reply-option.is-selected .reply-selection-mark{width:12px}.send-choice{opacity:0;pointer-events:none;flex-direction:column;align-items:center;width:min(100%,260px);margin:auto auto 0;transition:opacity .2s;display:flex}.send-choice.is-visible{opacity:1;pointer-events:auto}.send-action{color:var(--color-brass)}.send-action:disabled,.response-boundary .text-action:disabled{cursor:not-allowed;opacity:.28}.sending-screen{overflow:hidden}.sending-note{z-index:2;width:min(100% - 96px,300px);min-height:92px;color:var(--color-ink);border:1px solid var(--color-outline);background:var(--color-paper-system);letter-spacing:.04em;text-align:center;animation:send-note 2.4s var(--motion-ease) forwards;place-items:center;padding:20px 24px;font-family:Noto Serif TC,serif;font-size:18px;line-height:32px;display:grid;position:absolute;top:34%;left:50%;transform:translate(-50%);box-shadow:0 16px 36px #00000038}.delivery-slot{border:1px solid var(--color-brass);opacity:0;border-radius:50%;width:72px;height:72px;animation:2.4s forwards delivery-slot-in;position:absolute;top:68%;left:50%;transform:translate(-50%,-50%)scale(.92);box-shadow:inset 0 0 22px #a68b671f,0 0 28px #a68b6714}.sent-confirmation{width:100%;color:var(--color-text-muted);letter-spacing:.14em;text-align:center;opacity:0;margin:0;font-family:Noto Serif TC,serif;font-size:14px;animation:2.4s forwards sent-confirmation;position:absolute;top:calc(68% + 72px)}.waiting-screen{padding:var(--page-margin);flex-direction:column;justify-content:center;align-items:center;animation:8s ease-in-out infinite alternate waiting-breathe;display:flex}.waiting-message{color:var(--color-text);letter-spacing:.06em;text-align:center;flex-direction:column;margin:0;font-family:Noto Serif TC,serif;font-size:24px;line-height:38px;display:flex}.waiting-leave-hint{bottom:var(--safe-bottom);color:var(--color-text-muted);letter-spacing:.1em;opacity:.55;margin:0;font-size:12px;position:absolute}.response-arrival-action{width:100%;min-height:100dvh;padding:var(--page-margin);color:var(--color-text);cursor:pointer;background:0 0;border:0;place-items:center;display:grid;position:relative;overflow:hidden}.response-arrival-highlight{background:var(--color-paper);filter:blur(110px);opacity:0;border-radius:50%;width:220px;height:300px;animation:1.4s .4s forwards response-highlight;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.response-arrival-message{letter-spacing:.08em;opacity:0;font-family:Noto Serif TC,serif;font-size:24px;line-height:38px;animation:1s .7s forwards response-message-in;position:relative}.response-arrival-hint{bottom:var(--safe-bottom);color:var(--color-text-muted);letter-spacing:.16em;opacity:0;font-size:11px;animation:.8s 1.5s forwards response-message-in;position:absolute}.response-header{grid-template-columns:44px 1fr auto}.response-sender{letter-spacing:.14em;justify-self:center;font-family:Noto Serif TC,serif;font-size:18px}.response-paper{animation:response-paper-arrival .6s var(--motion-ease) forwards}.response-boundary{margin-top:24px}.completed-screen{padding:var(--page-margin);color:var(--color-text-muted);letter-spacing:.06em;flex-direction:column;justify-content:center;align-items:center;font-family:Noto Serif TC,serif;display:flex}.completed-folded-letter{border:1px solid var(--color-outline);background:var(--color-paper-system);width:min(72%,260px);height:74px;animation:completed-letter-fold .6s var(--motion-ease) both;margin-bottom:30px;position:relative;box-shadow:0 16px 36px #0000003d}.completed-folded-letter:after{content:"";clip-path:polygon(0 0,50% 70%,100% 0);background:#ffffff0a;border-top:1px solid #ffffff59;position:absolute;inset:0}.folded-screen{padding:var(--page-margin);color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;font-family:Noto Serif TC,serif;display:flex}.folded-letter{border:1px solid var(--color-outline);background:var(--color-paper-system);width:min(70%,260px);height:72px;margin-bottom:24px;box-shadow:0 12px 30px #0003}.development-reset{z-index:30;right:max(12px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));min-height:32px;color:var(--color-text-muted);border:1px solid var(--color-outline);letter-spacing:.05em;opacity:.45;background:#0d0e12d1;border-radius:3px;padding:6px 10px;font-size:10px;position:fixed}@keyframes arrival-in{to{opacity:.82;filter:blur();transform:translateY(0)}}@keyframes envelope-lift{0%{transform:translateY(0)scale(1)}25%{transform:translateY(-6px)scale(1.01)}72%{opacity:1}to{opacity:0;transform:translateY(16px)scale(1.04)}}@keyframes flap-open{to{filter:drop-shadow(0 -1px #a68b6773);transform:rotateX(178deg)}}@keyframes letter-rise{0%{transform:translateY(0)scale(.92)}58%{transform:translateY(-42%)scale(.98)}to{transform:translateY(-30%)scale(1.08)}}@keyframes paper-arrival{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes send-note{0%,20%{opacity:1;transform:translate(-50%)translateY(0)scale(1)}46%{opacity:1;height:52px;min-height:52px;transform:translate(-50%)translateY(0)scaleY(.55)}62%{opacity:1}86%,to{opacity:0;height:38px;min-height:38px;transform:translate(-50%)translateY(38vh)scale(.16)}}@keyframes delivery-slot-in{0%,42%{opacity:0}72%{opacity:.8;transform:translate(-50%,-50%)scale(1)}to{opacity:.25}}@keyframes sent-confirmation{0%,82%{opacity:0}90%{opacity:.75}to{opacity:0}}@keyframes waiting-breathe{0%{background:#fff0}to{background:#ffffff0a}}@keyframes response-highlight{0%{opacity:0}45%{opacity:.06}to{opacity:.025}}@keyframes response-message-in{to{opacity:.9}}@keyframes response-paper-arrival{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes completed-letter-fold{0%{opacity:.9;height:220px}to{opacity:.65;height:74px}}@media (width<=374px){:root{--page-margin:24px}.letter-paper{padding:24px}.letter-copy{font-size:17px;line-height:30px}}@media (width>=700px){.ca01-app{min-height:min(100dvh,932px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.15s!important;animation-duration:.2s!important;animation-delay:0s!important}.opening-flap{animation:none}}:root{color:#e3e2e7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#0d0e12;font-family:Hanken Grotesk,Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}html{background:#0d0e12;min-width:320px;min-height:100%}body{background:#0d0e12;min-width:320px;min-height:100%;margin:0}button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:4px;outline:2px solid #a68b67}::selection{color:#30312e;background:#feddb4}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}