@charset "UTF-8";
:root{color-scheme:dark;--ink:#f2e9d9;--muted:#b9bcb0;--gold:#e3c495;--bg:#202a29;--serif:"Noto Serif SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 52% 50%,#42504a 0,#2c3834 44%,#202a29 78%);color:var(--ink);font-family:var(--sans);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{transition:background .2s,transform .2s}button:hover{transform:translateY(-2px)}.masthead{position:absolute;z-index:2;top:0;left:0;width:100%;padding:36px 46px;display:flex;justify-content:space-between;pointer-events:none}.eyebrow{font:11px/1.7 var(--sans);letter-spacing:.24em;color:var(--gold);margin:0 0 12px}h1{font:400 clamp(24px,2.5vw,38px)/1.4 var(--serif);letter-spacing:.08em;margin:0}.title-dot{color:var(--gold)}.dedication{font:14px/1.8 var(--serif);letter-spacing:.12em;margin:10px 0 0;color:var(--muted)}.date-note{text-align:right;padding-top:8px;font:14px/1.8 var(--serif);letter-spacing:.14em;color:var(--muted)}.date-note time{display:block;font:12px/2 var(--sans);letter-spacing:.2em;color:var(--gold);margin-top:6px}#scene{position:absolute;inset:95px 0 115px;touch-action:none}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}.view-tools{position:absolute;right:32px;top:45%;display:grid;gap:8px;z-index:3}.view-tools button{width:42px;height:42px;border:1px solid #d9c49e40;border-radius:50%;background:#25312d88;font-size:23px;color:#e2d4b8;backdrop-filter:blur(10px)}.view-tools button:hover{background:#536153}.bottom-bar{position:absolute;bottom:24px;left:0;width:100%;display:flex;align-items:center;flex-direction:column;z-index:3;pointer-events:none}.bottom-bar>*{pointer-events:auto}.hint{font-size:12px;color:#c7cbbb;letter-spacing:.1em;margin:0 0 18px}.drag-icon{font-size:20px;vertical-align:-2px;margin-right:5px}.actions{display:flex;gap:8px;background:#1b2423b0;border:1px solid #d7c7a627;padding:7px;border-radius:40px;backdrop-filter:blur(12px);box-shadow:0 10px 30px #0e191b38}.actions button{background:transparent;border:0;border-radius:30px;padding:13px 23px;font-size:14px;letter-spacing:.07em}.actions button span{margin-right:8px;font-size:18px;vertical-align:-1px}.actions .primary{background:#e7d4b4;color:#353b31}.actions button:hover{background:#6b76614a}.actions .primary:hover{background:#f6e2bf}.signature{position:fixed;left:45px;bottom:31px;font:12px/1.7 var(--serif);color:#aeb4a6;letter-spacing:.1em;margin:0}.signature span{display:block;font:10px/2 var(--sans);letter-spacing:.18em;color:#939f91}#loading{position:absolute;inset:0;display:flex;gap:16px;justify-content:center;align-items:center;font-size:14px;letter-spacing:.12em;color:var(--gold)}.loading-ring{height:20px;width:20px;border:1px solid #b6a37e50;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#fallback{position:absolute;inset:25% 20px auto;text-align:center;line-height:2}#hover-label{position:fixed;z-index:4;pointer-events:none;background:#fcf4e5;color:#3c453a;padding:9px 15px;border-radius:4px;font-size:13px;opacity:0;transition:opacity .15s;box-shadow:0 4px 15px #18201c40}#toast{position:fixed;bottom:185px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:8;border:1px solid #e7d4b45c;background:#26332ef2;color:#fff2d9;padding:16px 24px;border-radius:8px;font:16px/1.8 var(--serif);text-align:center;min-width:260px;max-width:90vw;transition:opacity .3s,transform .3s}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:0;padding:0;box-shadow:0 30px 120px #0008;max-height:88svh;overscroll-behavior:contain}dialog::backdrop{background:#121b19a8;backdrop-filter:blur(8px)}dialog[open]{animation:appear .35s ease both}@keyframes appear{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}.close{position:absolute;right:15px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;font:28px/1 var(--sans);color:inherit;z-index:2}.close:hover{background:#9f8c6f22}.paper-dialog{width:min(560px,calc(100vw - 36px));background:#f7efdf;color:#3e453a;border-radius:3px}.paper-inner{padding:44px 48px 36px;background:repeating-linear-gradient(0deg,#b8a37905 0px,#b8a37905 1px,transparent 1px,transparent 4px)}.paper-inner .eyebrow{color:#958360;font-size:10px;letter-spacing:.22em}.paper-inner h2{font:400 25px/1.5 var(--serif);margin:26px 0}.letter{font:17px/2.05 var(--serif);letter-spacing:.025em}.letter p{margin:0 0 19px}.birthday-line{font-size:22px;padding-top:5px}.signoff{text-align:right;font:21px/1.8 var(--serif);margin-top:25px}.signoff time{display:block;font:12px/1.8 var(--sans);letter-spacing:.05em;color:#8c8d7d}.gallery-dialog{width:min(1000px,calc(100vw - 32px));background:#24312c;border:1px solid #c5b18c40;border-radius:10px;color:#f2e9d9;overflow:auto}.gallery-top{padding:25px 30px 18px}.gallery-top .eyebrow{font-size:10px;margin-bottom:4px}.gallery-top h2{font:400 22px/1.5 var(--serif);margin:0}.gallery-dialog>img{width:100%;height:55svh;object-fit:contain;display:block;background:#17211e;padding:14px 24px}.gallery-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 30px}.gallery-bottom button{width:45px;height:45px;border:1px solid #c5b18c40;border-radius:50%;background:transparent;font-size:20px}.gallery-bottom p{text-align:center;font:16px/1.5 var(--serif);margin:0}.gallery-bottom small{display:block;font:11px/1.8 var(--sans);letter-spacing:.16em;color:var(--muted);margin-top:4px}.memory-dialog{width:min(510px,calc(100vw - 32px));background:#f4ecdd;color:#414536;border-radius:8px;padding:30px}.memory-dialog>img{width:100%;max-height:45svh;object-fit:contain;margin-bottom:25px;border-radius:4px}.memory-dialog .eyebrow{color:#9b7854;font-size:10px}.memory-dialog h2{font:400 26px/1.5 var(--serif);margin:10px 0}.memory-dialog>p:last-child{font:16px/1.9 var(--serif);margin-bottom:4px}.noscript{position:fixed;top:40%;width:100%;text-align:center}
@media(max-width:700px){.masthead{padding:27px 24px}.eyebrow{font-size:10px;letter-spacing:.19em;margin-bottom:9px}h1{font-size:25px}.dedication{font-size:13px;margin-top:7px}.date-note{display:none}#scene{inset:105px 0 150px}.view-tools{right:14px;top:auto;bottom:190px;gap:7px}.view-tools button{width:36px;height:36px;font-size:20px}.bottom-bar{bottom:max(22px,env(safe-area-inset-bottom))}.hint{font-size:11px;letter-spacing:.02em;margin-bottom:12px}.actions{padding:5px;gap:2px}.actions button{padding:12px 13px;font-size:13px;letter-spacing:0}.actions button span{margin-right:5px;font-size:17px}.signature{position:static;text-align:center;font-size:11px;margin-top:13px}.signature span{display:none}.paper-inner{padding:36px 26px 27px}.paper-inner h2{margin:23px 0 19px}.letter{font-size:16px;line-height:1.95}.letter p{margin-bottom:16px}.signoff{margin-top:18px}.gallery-dialog>img{height:50svh;padding:10px}.gallery-top{padding:25px 21px 18px}.memory-dialog{padding:24px}.memory-dialog>img{margin-top:25px}.gallery-bottom{padding:14px 20px}#toast{bottom:170px;font-size:15px;width:max-content}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-height:560px) and (min-width:701px){.masthead{padding:18px 28px}h1{font-size:24px}.dedication{display:none}#scene{inset:65px 0 80px}.bottom-bar{bottom:12px}.hint{margin-bottom:5px}.signature{display:none}.actions button{padding:9px 20px}}