@font-face{font-family:CottageSerif;src:local("Noto Serif CJK SC"),local("Source Han Serif SC"),local("Songti SC"),local("SimSun");font-display:swap}:root{font-family:Microsoft YaHei,PingFang SC,sans-serif;color:#eddbc0;background:#211924;font-synthesis:none;--paper: #f2e6d2;--ink: #57443b;--muted: #c1978f;--gold: #d7b48a;--rose: #edabaf;--serif: CottageSerif, "Noto Serif SC", "Songti SC", SimSun, serif}*{box-sizing:border-box}body{margin:0;min-width:320px;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button,a{-webkit-touch-callout:none}button:focus-visible,a:focus-visible{outline:2px solid #ffe2a4;outline-offset:6px}button{touch-action:manipulation}.icon{width:24px;height:24px;flex-shrink:0;vertical-align:middle}button .icon{pointer-events:none}button{border:0;background:none}button:hover{color:#fff2dd}button:active{transform:translateY(1px)}[hidden]{display:none!important}#app{height:100svh;min-height:570px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 68% 52%,#46313b33,#21192400 55%)}.night-sky{position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle at 21% 25%,#ecc698aa 0 .7px,transparent 1.5px),radial-gradient(circle at 80% 33%,#ecc69899 0 .6px,transparent 1.3px),radial-gradient(circle at 45% 65%,#c4a8b688 0 .7px,transparent 1.2px),radial-gradient(circle at 60% 78%,#ecc69877 0 .65px,transparent 1.2px);background-size:339px 293px,263px 379px,431px 231px,577px 349px;opacity:.7}.header{position:absolute;inset:34px 42px auto;z-index:5;display:flex;align-items:center;justify-content:space-between}.brand{font-family:var(--serif);font-size:25px;letter-spacing:4px;color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:14px}.brand .icon{width:33px;height:33px;fill:var(--gold);stroke:none}.header-actions{display:flex;gap:14px}.round-button{border:1px solid #ba937768;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;color:#dfc19b;transition:background .2s,border-color .2s}.round-button:hover{background:#eac79810;border-color:#dfc19b}.round-button .icon{width:23px;height:23px}.introduction{position:absolute;left:4.15%;top:27%;z-index:3;max-width:390px;pointer-events:none}.introduction button{pointer-events:auto}h1{font-family:var(--serif);font-weight:400;letter-spacing:2px;font-size:clamp(32px,3.6vw,59px);line-height:1.6;margin:0 0 29px;white-space:nowrap;color:#f0dcb9}h1:after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);vertical-align:top;box-shadow:13px -9px 0 -1px #d4ae8577;margin:20px 0 0 14px;opacity:.8}.intro-text{font-family:var(--serif);font-size:clamp(14px,1.33vw,20px);line-height:1.9;letter-spacing:.2px;color:#d79e90;margin:0 0 39px}.intro-actions{display:flex;align-items:flex-start;flex-direction:column;gap:18px}.outline-button{position:relative;border:1px solid #c29a6b;border-radius:3px;padding:13px 27px;font-family:var(--serif);font-size:21px;letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:23px;min-height:55px;transition:background .2s,box-shadow .2s;color:#edcfa6;background:#21192444;box-shadow:inset 0 0 0 3px #211924,inset 0 0 0 4px #be936637}.outline-button:hover{background:#b38a5a18;box-shadow:inset 0 0 0 3px #211924,inset 0 0 0 4px #be936670,0 0 28px #eab0700c}.outline-button .icon{width:19px;height:19px}.outline-button .icon:has(path){fill:#d7b48a;stroke-width:.5}.personal-note{font-family:var(--serif);font-size:13px;color:#bb9994;letter-spacing:1px;min-height:22px;max-width:360px;margin:22px 0 0;line-height:1.8}#room{position:absolute;inset:7% 0 4% 26%;touch-action:none;outline:none}#room>canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s}.room-ready #room>canvas{opacity:1}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:4;max-width:400px;margin:auto;text-align:center;font-size:13px;color:var(--gold);line-height:1.8;padding:20px}.loading>.icon{width:35px;height:35px;animation:breathe 2s ease-in-out infinite}.loading>.outline-button{font-size:16px;margin-top:16px}.loading>span{max-width:300px}#markers{position:absolute;inset:0;z-index:2;pointer-events:none}.hotspot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;opacity:0;transition:opacity .35s,filter .2s;border-radius:50%;visibility:hidden}.hotspot-core{width:10px;height:10px;border:1.5px solid #ffdfb0;border-radius:50%;background:#f0b46f66;box-shadow:0 0 0 5px #e2b77d11,0 0 15px #ffd19355}.hotspot:hover,.hotspot:focus-visible,.show-hints .hotspot{opacity:1}.hotspot:active{transform:translate(-50%,-50%)}.hotspot.hinted{opacity:1;filter:drop-shadow(0 0 5px #ffd296);animation:breathe 1.2s infinite}.hotspot.found .hotspot-core{background:#ffce96}.hotspot-label{position:absolute;bottom:41px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:12px;letter-spacing:1px;padding:8px 12px;border:1px solid #ba93775c;border-radius:4px;color:#f5ddbe;background:#2a1f28ed;opacity:0;transition:opacity .2s;pointer-events:none}.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label,.hotspot.hinted .hotspot-label{opacity:1}.discovery{position:absolute;left:4.15%;bottom:47px;z-index:3}.discovery p{font-family:var(--serif);font-size:17px;letter-spacing:1px;margin:0 0 13px;color:#d6b997}.discovery strong{color:#eeaba0;font-weight:400;font-size:23px;margin:0 9px}.divider{padding:0 8px 0 0;color:#ad887b}.discovery-dots{display:flex;gap:9px}.discovery-dot{height:36px;width:31px;display:grid;place-items:center;padding:0;color:#aa83738c}.discovery-dot .icon{width:17px;height:17px;opacity:0;transition:opacity .2s}.discovery-dot:before{content:"";width:11px;height:11px;border-radius:50%;border:1px solid #ac856b;background:#b38c7333;position:absolute;transition:opacity .2s}.discovery-dot.found:before,.discovery-dot:hover:before,.discovery-dot:focus-visible:before{opacity:0}.discovery-dot.found .icon,.discovery-dot:hover .icon,.discovery-dot:focus-visible .icon{opacity:1;color:var(--gold)}.gesture-guide{position:absolute;bottom:39px;left:53%;transform:translate(-50%);display:flex;align-items:center;gap:13px;font-family:var(--serif);font-size:14px;letter-spacing:1px;color:#b8947e;white-space:nowrap;pointer-events:none}.gesture-guide .icon{height:10px;width:10px;fill:#b8947e;stroke:none}.mobile-guide{display:none}.reset-button{position:absolute;bottom:32px;right:42px;width:48px;height:48px;border:1px solid #b7927266;border-radius:6px;color:#dcc3a1;display:grid;place-items:center;z-index:3}.reset-button:hover{background:#c3986915}.reset-button .icon{height:25px;width:25px}.fireworks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}.toast{position:fixed;bottom:106px;left:50%;max-width:min(530px,calc(100% - 42px));width:max-content;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#30232eee;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #af827344;border-radius:8px;color:#eed5b9;font-size:13px;line-height:1.8;padding:13px 23px;letter-spacing:.4px;z-index:12;transition:opacity .3s,transform .3s;text-align:center}.toast.visible{opacity:1;transform:translate(-50%)}.keepsake-dialog{padding:0;overflow:visible;border:1px solid #cbb498;border-radius:8px;background:var(--paper);color:var(--ink);max-width:calc(100vw - 40px);max-height:calc(100svh - 48px);box-shadow:0 35px 120px #09050c77;animation:unfold .45s cubic-bezier(.2,.7,.2,1);outline:0}.keepsake-dialog::backdrop{background:#100b17aa;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#dialog-content{max-height:calc(100svh - 52px);overflow:auto;border-radius:8px}.dialog-close{position:absolute;top:12px;right:12px;z-index:2;border:1px solid #76605144;border-radius:50%;width:38px;height:38px;color:#776052;background:#f2e6d2dd;display:grid;place-items:center}.dialog-close:hover{background:#fdf1dd;color:#30251f}.dialog-close .icon{width:18px;height:18px}.keepsake-dialog button:focus-visible{outline-color:#906643}.book-spread{display:grid;grid-template-columns:.82fr 1fr;width:800px;max-width:calc(100vw - 42px);min-height:515px}.book-cover{background:#626c53;color:#e6d2a6;padding:40px 40px 30px;display:flex;align-items:center;flex-direction:column;text-align:center;border:9px double #bdaf7977;position:relative;box-shadow:inset -12px 0 22px #20241433}.book-small{font-family:var(--serif);font-size:17px;letter-spacing:6px}.book-flower{width:110px;height:130px;stroke-width:.55;margin:38px 0 12px}.book-cover p{font-family:var(--serif);font-size:30px;line-height:1.7;letter-spacing:6px;margin:0}.book-edition{font-family:Georgia,serif;font-size:8px;letter-spacing:2px;margin-top:auto;padding-top:40px}.book-page{padding:47px 36px 24px;background:linear-gradient(90deg,#d0bea050,#f7eddb00 11%),#f3e8d4;box-shadow:inset 5px 0 12px #7c614418}.page-label{display:block;font-size:10px;letter-spacing:3px;color:#987952;margin-bottom:20px}.keepsake-dialog h2{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.6;letter-spacing:1px;margin:0 0 20px}.letter-body{font-family:var(--serif);font-size:15px;line-height:2.1;margin:0 0 22px;color:#6b5445}.letter-note{font-family:var(--serif);font-size:13px;color:#947452;line-height:1.9}.book-pagination{margin-top:28px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#92795b;letter-spacing:2px}.text-button{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:13px;padding:10px 0;color:#976c46;min-height:38px}.text-button .icon{width:15px;height:15px}.text-button:hover{color:#b0825b}.simple-letter{width:480px;max-width:calc(100vw - 42px);padding:58px 42px 38px;text-align:center}.simple-letter>p,.photo-letter p{font-family:var(--serif);font-size:16px;line-height:2;color:#766051;margin:15px 0 22px}.simple-letter .page-label{margin-bottom:12px}.simple-letter .letter-note{font-size:14px;color:#987952;margin:27px 0 10px}.letter-symbol{width:56px;height:56px;stroke-width:.7;color:#b08661;display:block;margin:0 auto 30px}.filled-button{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px 21px;margin:28px auto 16px;border:1px solid #99764e;border-radius:3px;color:#f6e7cd;background:#856a47;font-family:var(--serif);font-size:16px;letter-spacing:1px;min-height:48px;transition:background .2s}.filled-button:hover{background:#71583b}.filled-button .icon{height:19px;width:19px}.wish-letter>small{font-size:11px;color:#9b846a}.photo-letter{display:flex;align-items:center;gap:37px;width:780px;max-width:calc(100vw - 42px);padding:65px 38px 48px}.photo-print{background:#f9f0df;padding:12px 12px 19px;box-shadow:1px 7px 20px #68513b29;transform:rotate(-4deg);width:280px;flex-shrink:0}.photo-print img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.photo-print span{display:block;font-family:var(--serif);font-size:14px;text-align:center;margin-top:16px;letter-spacing:2px;color:#886648}.photo-letter h2{font-size:25px}.photo-letter p{font-size:15px}.help-letter{width:480px;padding-top:49px}.help-letter>p{font-size:14px}.help-items{display:flex;flex-direction:column;margin:25px 0 16px}.help-items>button{display:flex;align-items:center;gap:15px;min-height:49px;border-top:1px solid #bba48a4d;color:#715c48;padding:9px 2px;text-align:left}.help-items>button:hover{color:#b17a50;background:#c2ac7e13}.help-items .icon{width:19px;height:19px}.help-items>button>span{flex:1;font-family:var(--serif);font-size:16px}.help-items small{font-size:10px;color:#9f8868}.simple-letter .help-footnote,.help-footnote{font-size:11px;line-height:1.9;color:#968167;margin-bottom:0}.vinyl{width:128px;height:128px;border-radius:50%;background:repeating-radial-gradient(circle,#322e2a 0 2px,#403a32 3px 4px);display:grid;place-items:center;margin:0 auto 30px;box-shadow:0 8px 15px #34221622;animation:record 14s linear infinite}.vinyl>div{background:#ab7370;border:8px solid #a16b69;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;color:#eedbb5}.vinyl .icon{width:23px;height:23px}.birthday-title{color:#f4d2ba;font-size:clamp(37px,4.2vw,66px);line-height:1.48;margin-bottom:12px}.birthday-english{font-family:Georgia,serif;font-style:italic;font-size:17px;color:#d3ab97;margin:0 0 25px;letter-spacing:.5px}.birthday .intro-text{font-size:clamp(13px,1.14vw,17px);margin-bottom:30px}.birthday .outline-button{font-size:19px;padding:12px 22px}.birthday .small-action{font-size:13px;color:#d0ab94;letter-spacing:1px}.birthday .intro-actions{gap:7px}.music-status{position:absolute;right:108px;bottom:44px;display:flex;gap:8px;align-items:center;font-size:10px;color:#d2b499;z-index:3}.music-status>.icon{width:14px;height:14px}.music-status i{display:block;width:2px;height:11px;background:#d4ac81;animation:equalize 1s ease-in-out infinite alternate}.music-status i:nth-last-child(2){animation-delay:.25s}.music-status i:last-child{animation-delay:.6s}.birthday .gesture-guide{left:48%;font-size:12px}@keyframes breathe{0%,to{opacity:.45}50%{opacity:1}}@keyframes unfold{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes record{to{transform:rotate(360deg)}}@keyframes equalize{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}@media(min-width:1600px){.introduction{left:6%;top:29%}#room{left:28%;right:2%}.header{left:6%;right:4%}.discovery{left:6%}}@media(max-width:1100px)and (min-width:701px){.introduction{left:4%;top:30%;max-width:285px}.intro-text{font-size:13px}h1{font-size:34px}.outline-button{font-size:18px;padding:12px 20px}#room{left:25%;top:13%;bottom:10%}.gesture-guide{left:59%;font-size:11px}.discovery p{font-size:14px}.music-status{right:95px;bottom:102px}.birthday .gesture-guide{left:59%}.header{inset:28px 32px auto}.reset-button{right:32px}.birthday .intro-text{font-size:13px}.birthday-title{font-size:40px}.birthday .outline-button{font-size:17px;gap:12px}}@media(max-width:700px){body{overflow:auto}#app{min-height:730px;height:100svh}.header{inset:24px 25px auto}.brand{font-size:19px;letter-spacing:3px;gap:9px}.brand .icon{width:26px;height:26px}.header-actions{gap:9px}.round-button{width:36px;height:36px}.round-button .icon{height:18px;width:18px}.introduction{left:28px;right:25px;top:105px;max-width:none}h1{font-size:31px;letter-spacing:1px;line-height:1.55;margin-bottom:13px}h1:after{width:3px;height:3px;margin:12px 0 0 10px}.intro-text{font-size:12px;line-height:1.85;letter-spacing:0;margin:0}.intro-actions{position:absolute;top:calc(100svh - 284px);right:0;left:0;display:flex;align-items:center;pointer-events:none}.intro-actions>button{pointer-events:auto}.outline-button{font-size:15px;min-height:44px;padding:10px 23px;gap:17px}.outline-button .icon{width:16px;height:16px}.personal-note{position:absolute;top:calc(100svh - 245px);left:0;right:0;text-align:center;font-size:10px;letter-spacing:.3px;max-width:none;margin-top:15px;pointer-events:none}#room{inset:28% -9% 19%}.discovery{left:26px;bottom:32px}.discovery p{font-size:12px;letter-spacing:.3px;margin-bottom:4px}.discovery strong{font-size:17px;margin:0 5px}.discovery-dots{gap:5px}.discovery-dot{width:22px;height:28px}.discovery-dot:before{width:8px;height:8px}.discovery-dot .icon{width:15px;height:15px}.gesture-guide{font-family:Microsoft YaHei,sans-serif;font-size:9px;left:auto;right:26px;bottom:44px;transform:none;gap:0;letter-spacing:0;white-space:normal;width:126px;text-align:right;line-height:1.8}.gesture-guide>.icon{display:none}.desktop-guide{display:none}.mobile-guide{display:block}.reset-button{right:26px;bottom:83px;width:36px;height:36px}.reset-button .icon{width:20px;height:20px}.toast{bottom:208px;max-width:calc(100vw - 38px);font-size:12px;padding:11px 16px}.hotspot-label{font-size:10px;padding:6px 9px}.book-spread{grid-template-columns:1fr;min-height:0;width:385px}.book-cover{display:none}.book-page{padding:43px 26px 25px}.keepsake-dialog h2{font-size:23px;margin-bottom:17px}.letter-body{font-size:14px;line-height:2}.book-pagination{margin-top:25px}.simple-letter{padding:49px 25px 32px;width:390px}.simple-letter>p{font-size:14px}.simple-letter .letter-note{font-size:13px}.photo-letter{flex-direction:column;gap:26px;padding:46px 27px 27px;text-align:center;width:390px}.photo-print{width:190px;padding:9px 9px 15px}.photo-print span{font-size:12px;margin-top:10px}.photo-letter p{font-size:14px;margin-bottom:13px}.photo-letter .page-label{margin-bottom:12px}.help-letter{padding-left:23px;padding-right:23px}.help-items{margin-top:21px}.letter-symbol{height:43px;width:43px;margin-bottom:24px}.birthday-title{font-size:35px;line-height:1.45;margin-bottom:6px}.birthday-english{font-size:12px;margin:0 0 13px}.birthday .intro-text{font-size:12px;margin:0}.birthday .intro-actions{gap:1px;top:calc(100svh - 294px)}.birthday .outline-button{font-size:15px;padding:10px 20px;min-height:44px}.birthday .small-action{font-size:10px;min-height:26px;padding:6px 0}.birthday .personal-note{top:calc(100svh - 230px)}.birthday #room{top:31%;bottom:21%}.birthday .gesture-guide{left:auto;font-size:9px}.music-status{right:26px;bottom:130px;font-size:9px;gap:5px}.music-status>span{max-width:75px;line-height:1.6}.music-status>i{display:none}.music-status>.icon{height:12px;width:12px}}@media(max-width:700px)and (max-height:729px){.intro-actions{top:446px}.personal-note{top:485px}.birthday .intro-actions{top:436px}.birthday .personal-note{top:500px}}@media(min-width:701px)and (max-height:680px){.header{top:22px}.introduction{top:23%}h1{font-size:36px;margin-bottom:17px}.intro-text{margin-bottom:22px}.discovery{bottom:27px}.gesture-guide{bottom:30px}.reset-button{bottom:22px}#room{top:8%;bottom:4%}.birthday-title{font-size:42px}.birthday .intro-text{margin-bottom:19px}.music-status{bottom:85px}}.outline-button .icon:has(path){fill:none;stroke-width:1.35}.outline-button .icon-star:has(path){fill:var(--gold);stroke-width:.5}@media(max-width:700px){#room{left:-4%;right:-4%}.round-button,.reset-button{width:44px;height:44px}.round-button .icon{width:20px;height:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}