:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box}body{color:#fff;background:#000;margin:0;font-family:Microsoft JhengHei,sans-serif}button{font-family:inherit}.app{background:#000;justify-content:center;align-items:center;width:100vw;min-height:100vh;display:flex}.room{background:#000;width:100vw;max-width:480px;height:100vh;position:relative;overflow:hidden}.room-bg{object-fit:cover;width:100%;height:100%;display:block}.hotspot{cursor:pointer;background:0 0;border:none;padding:0;position:absolute}.mirror{width:28%;height:38%;top:20%;left:5%}.clock-note{width:14%;height:9%;top:10%;left:14%}.book{width:20%;height:10%;top:22%;left:79%}.heart{width:62%;height:31%;top:62%;left:17%}.letter{width:21%;height:6.5%;top:51%;left:72%}.door{width:33%;height:45%;top:5%;left:34%}.modal{z-index:10;background:#000000b8;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.paper{color:#2b1d12;text-align:left;background:#f7ecd2;border-radius:18px;width:min(90vw,420px);max-height:80vh;padding:28px;line-height:1.8;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0009}.paper h2{text-align:center;margin-top:0}.paper p{margin:10px 0}.paper blockquote{background:#7a3e2d1f;border-left:5px solid #7a3e2d;margin:14px 0;padding:12px 16px}.close{color:#2b1d12;cursor:pointer;background:0 0;border:none;font-size:28px;position:absolute;top:8px;right:12px}hr{border:none;border-top:1px solid #c7aa80;margin:18px 0}.code-line{text-align:center;letter-spacing:1px;font-size:20px;font-weight:700}.roman-mark{text-align:right;color:#2b1d128c;letter-spacing:2px;margin-top:18px;font-size:18px}.fragment{color:#ffe7b3;text-align:center;background:#3b2b1d;border-radius:10px;margin-top:20px;padding:12px;font-weight:700}input{border:1px solid #8d7358;border-radius:10px;width:100%;margin:10px 0;padding:14px;font-size:18px}.door-grid{grid-template-columns:1fr;gap:12px;margin:16px 0;display:grid}.door-grid input{text-align:center;letter-spacing:6px;width:100%;font-weight:700}.unlock{color:#fff;cursor:pointer;background:#7a3e2d;border:none;border-radius:10px;width:100%;padding:14px;font-size:18px}.unlock:hover{background:#9a4b36}.door-message{text-align:center;color:#7a3e2d;font-weight:700}.book-modal{color:#2b1d12;background:#5a3825;border-radius:18px;width:min(92vw,420px);padding:24px;position:relative}.book-modal h2{color:#fff0c2;text-align:center}.book-close{color:#fff0c2}.book-page{background:#f7ecd2;border-radius:10px;min-height:360px;padding:30px;position:relative;box-shadow:inset 0 0 20px #0000002e}.page-number{text-align:center;font-weight:700}.book-text{text-align:left;white-space:normal;margin-top:32px;line-height:1.9}.book-roman-mark{color:#2b1d1273;font-size:18px;position:absolute;top:78px;right:18px}.fold-corner{clip-path:polygon(100% 0,0 0,100% 100%);background:linear-gradient(135deg,#d8c29a 0%,#fff1c8 50%,#b89d72 51%);width:70px;height:70px;position:absolute;top:0;right:0}.book-controls{justify-content:space-between;gap:12px;margin-top:18px;display:flex}.book-controls button,.book-choice-area button{color:#3b2416;cursor:pointer;background:#f0c987;border:none;border-radius:10px;flex:1;padding:12px;font-size:16px}.book-controls button:hover,.book-choice-area button:hover{background:#ffd99a}.book-special-button{color:#fff;cursor:pointer;background:#7a3e2d;border:none;border-radius:10px;width:100%;margin-top:24px;padding:12px;font-size:16px;display:block}.book-choice-area{gap:12px;margin-top:24px;display:flex}.intro-page{color:#f7ecd2;background:#050505;justify-content:center;align-items:center;width:100vw;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.intro-bg-flow{pointer-events:none;background:radial-gradient(circle at 25% 20%,#ffd67824,#0000 28%),radial-gradient(circle at 80% 75%,#7a3e2d3d,#0000 34%),linear-gradient(120deg,#0000 0%,#ffffff0a 45%,#0000 55%);animation:8s ease-in-out infinite alternate bgFlow;position:fixed;inset:-30%}.intro-box{z-index:1;background:#140f0aeb;border:1px solid #f7ecd259;border-radius:18px;width:min(92vw,460px);max-height:88vh;padding:26px 22px;overflow-y:auto;box-shadow:0 0 40px #ffd2782e}.intro-version{text-align:center;color:#ffe7b3;letter-spacing:1px;opacity:.9;margin-bottom:22px}.intro-title-row{color:#fff0c2;text-align:center;letter-spacing:2px;min-height:36px;font-size:22px;font-weight:700}.loading-dots{vertical-align:bottom;width:32px;animation:1s steps(4,end) infinite dotsBlink;display:inline-block;overflow:hidden}.scan-bar{background:#f7ecd22e;border-radius:999px;height:8px;margin:18px 0 22px;overflow:hidden}.scan-bar-fill{background:linear-gradient(90deg,#0000,#ffe7b3,#0000);width:100%;height:100%;animation:1.25s linear infinite scanMove}.intro-panel{min-height:260px;padding:8px 4px}.intro-line{opacity:0;margin:13px 0;line-height:1.8;animation:.7s forwards lineIn;transform:translateY(10px)}.intro-scan .intro-line{color:#ffe7b3}.intro-warning .intro-line:nth-child(n+2):nth-child(-n+4){color:#ffd28a}.intro-progress{justify-content:center;gap:9px;margin-top:10px;display:flex}.progress-dot{background:#f7ecd240;border-radius:50%;width:8px;height:8px}.progress-dot.active{background:#ffe7b3;box-shadow:0 0 12px #ffe7b3bf}.open-eye-btn{color:#fff;cursor:pointer;background:#7a3e2d;border:none;border-radius:12px;width:100%;margin-top:24px;padding:14px;font-size:18px;animation:1.5s infinite pulseBtn}.open-eye-btn.secondary{background:#7a3e2d8c;animation:none}.open-eye-btn.secondary:hover{background:#9a4b36cc}.birthday-opening{background:#050505;justify-content:center;align-items:center;width:100vw;min-height:100vh;display:flex;position:relative;overflow:hidden}.birthday-bg-photo{object-fit:cover;object-position:center;opacity:0;z-index:0;width:100%;height:100%;transition:opacity .45s;animation:9.6s forwards birthdayPhotoZoom;position:absolute;inset:0;transform:scale(1)}.birthday-opening.bg-ready .birthday-bg-photo{opacity:1}.birthday-bg-soft-layer{z-index:1;opacity:0;pointer-events:none;background:radial-gradient(circle at 20% 18%,#ffffff47,#0000 24%),radial-gradient(circle at 82% 74%,#ffb7dc3d,#0000 26%),linear-gradient(#ffd6e81a,#bdeeff1a);transition:opacity .45s;position:absolute;inset:0}.birthday-opening.bg-ready .birthday-bg-soft-layer{opacity:1}.birthday-heart-field span{z-index:2;opacity:0;pointer-events:none;animation-name:heartFloatSoft;animation-timing-function:linear;animation-iteration-count:infinite;position:fixed;bottom:-70px}.birthday-heart-field span:first-child{font-size:24px;animation-duration:11s;animation-delay:0s;left:10%}.birthday-heart-field span:nth-child(2){font-size:20px;animation-duration:13s;animation-delay:2.2s;left:30%}.birthday-heart-field span:nth-child(3){font-size:26px;animation-duration:12s;animation-delay:4.1s;left:50%}.birthday-heart-field span:nth-child(4){font-size:21px;animation-duration:14s;animation-delay:1.4s;left:70%}.birthday-heart-field span:nth-child(5){font-size:25px;animation-duration:12.8s;animation-delay:3.2s;left:86%}.birthday-bubble-area{z-index:5;pointer-events:none;position:absolute;inset:0}.birthday-bubble-char{color:#ff4f9c;text-shadow:0 2px 8px #fffffff2;--drift:-50px;opacity:0;background:#ffffffd1;border-radius:999px;justify-content:center;align-items:center;font-weight:900;line-height:1;animation-name:bubblePopAndFade;animation-timing-function:cubic-bezier(.18,1.35,.35,1);animation-fill-mode:forwards;display:inline-flex;position:absolute;transform:translate(-50%,54px)scale(.24);box-shadow:0 14px 34px #ff7ebe61,inset 0 0 18px #fffffffa,inset -8px -10px 18px #80d8ff38}.birthday-bubble-char:after{content:"";background:#ffffffeb;border-radius:50%;width:22%;height:22%;position:absolute;top:9px;left:12px}.photo-page{color:#ff5fa8;background:linear-gradient(155deg,#ffd6e8 0%,#fff0f8 42%,#bdeeff 100%);flex-direction:column;justify-content:center;align-items:center;width:100vw;min-height:100vh;padding:22px;display:flex;position:relative;overflow:hidden}.photo-page:before,.photo-page:after{content:none;display:none}.memory-heart-field{z-index:1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.memory-heart-field span{will-change:transform, opacity;animation-name:memoryHeartFloatRandom;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;bottom:-70px}.memory-title{z-index:2;color:#ff5fa8;text-shadow:0 4px 14px #fffffff2;letter-spacing:2px;text-align:center;margin:0 0 16px;position:relative}.memory-card{z-index:2;color:#5b3750;text-align:center;background:#ffffffe0;border:3px solid #ff96cd7a;border-radius:24px;flex-direction:column;width:min(90vw,430px);height:620px;padding:18px;display:flex;position:relative;box-shadow:0 22px 70px #78b4dc47}.memory-photo{object-fit:contain;background:linear-gradient(135deg,#ffd6e873,#bdeeff73);border:3px solid #bdeeffcc;border-radius:18px;flex:none;width:100%;height:360px;max-height:360px}.memory-text{flex:none;height:74px;margin:16px 0 0;font-size:16px;line-height:1.75;overflow-y:auto}.memory-count{color:#ff5fa8c7;flex:none;margin:8px 0 0;font-weight:700}.memory-controls{flex:none;gap:12px;margin-top:auto;display:flex}.memory-controls button,.package-btn{color:#fff;background:linear-gradient(135deg,#ff7fbd,#80d8ff);box-shadow:0 8px 20px #ff7fbd47}.memory-controls button{cursor:pointer;border:none;border-radius:12px;flex:1;padding:12px;font-size:16px}.package-btn{cursor:pointer;border:none;border-radius:14px;flex:none;width:100%;margin-top:12px;padding:14px;font-size:18px;animation:1.4s infinite packagePulse}.memory-controls button:hover,.package-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.envelope-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:99;background:#ffdceebd;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.envelope{isolation:isolate;width:min(84vw,350px);height:285px;animation:.62s forwards envelopeAppear;position:relative}.envelope-back{z-index:1;background:linear-gradient(135deg,#ffd6e8 0%,#e7f7ff 100%);border-radius:0 0 24px 24px;width:100%;height:166px;position:absolute;bottom:0;left:0;box-shadow:0 24px 70px #60a0c86b}.envelope-card{opacity:0;color:#ff4f9c;text-align:center;cursor:pointer;z-index:3;background:linear-gradient(#fff8fd 0%,#edf9ff 100%);border:2px solid #ff7fbd61;border-radius:20px;justify-content:center;align-items:flex-start;width:76%;height:154px;padding:42px 18px 18px;font-weight:900;animation:1.05s cubic-bezier(.25,1,.5,1) .35s forwards envelopeCardRise;display:flex;position:absolute;bottom:82px;left:50%;transform:translate(-50%)translateY(76px);box-shadow:0 14px 35px #78b4dc47}.envelope-card p{z-index:4;color:#ff4f9c;text-shadow:0 2px 8px #ffffffe6;margin:0;font-size:20px;font-weight:900;line-height:1.4;position:relative}.envelope-card:before{content:"💌";font-size:28px;position:absolute;top:9px;left:50%;transform:translate(-50%)}.envelope-body{z-index:5;pointer-events:none;background:0 0;border-radius:0 0 24px 24px;width:100%;height:166px;position:absolute;bottom:0;left:0;overflow:hidden}.envelope-body:before,.envelope-body:after{content:none;display:none}.envelope-left-fold,.envelope-right-fold,.envelope-bottom-fold,.envelope-opening-line{pointer-events:none;position:absolute}.envelope-left-fold{clip-path:polygon(0 0,100% 50%,0 100%);z-index:2;background:linear-gradient(135deg,#ffd0e4 0%,#f3eaff 100%);width:54%;height:100%;bottom:0;left:0}.envelope-right-fold{clip-path:polygon(100% 0,0 50%,100% 100%);z-index:2;background:linear-gradient(225deg,#c9f0ff 0%,#fff0f8 100%);width:54%;height:100%;bottom:0;right:0}.envelope-bottom-fold{clip-path:polygon(0 100%,50% 0,100% 100%);z-index:3;background:linear-gradient(135deg,#ffb8d8 0%,#c9f0ff 100%);height:120px;bottom:0;left:0;right:0}.envelope-opening-line{z-index:6;background:linear-gradient(90deg,#0000,#ff5fa8bf,#80d8ffbf,#0000);height:2px;top:0;left:5%;right:5%;box-shadow:0 2px 8px #ff7fbd47}.envelope-flap{clip-path:polygon(0 100%,50% 0,100% 100%);transform-origin:bottom;z-index:0;pointer-events:none;opacity:.92;background:linear-gradient(135deg,#ffb8d8 0%,#bdeeff 100%);width:100%;height:120px;position:absolute;bottom:166px;left:0;transform:rotateX(180deg)}.envelope-open-hint{display:none}.card-message-overlay{z-index:120;background:#000000e0;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.card-message-box{color:#5b3750;background:linear-gradient(#fff7fd,#edf9ff);border:3px solid #ff96cd66;border-radius:22px;width:min(90vw,430px);min-height:420px;padding:28px;box-shadow:0 20px 70px #000000a6}.card-message-box h2{text-align:center;color:#ff5fa8;margin-top:0}.typewriter-text{white-space:pre-wrap;font-size:16px;line-height:2}.typing-cursor{color:#ff5fa8;margin-left:2px;font-weight:700;animation:.8s infinite cursorBlink;display:inline-block}@keyframes fadeInText{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseBtn{0%{transform:scale(1);box-shadow:0 0 #ffd6784d}50%{transform:scale(1.03);box-shadow:0 0 20px #ffd67859}to{transform:scale(1);box-shadow:0 0 #ffd6784d}}@keyframes bgFlow{0%{transform:translate(-3%,-2%)rotate(0)}to{transform:translate(3%,2%)rotate(3deg)}}@keyframes scanMove{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dotsBlink{0%{width:0}to{width:32px}}@keyframes lineIn{to{opacity:1;transform:translateY(0)}}@keyframes birthdayPhotoZoom{0%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes birthdayPop{0%{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes bubblePopAndFade{0%{opacity:0;transform:translate(-50%,54px)scale(.24)}24%{opacity:1;transform:translate(-50%, var(--drift)) scale(1.16)}60%{opacity:1;transform:translate(-50%, var(--drift)) scale(1)}to{opacity:0;transform:translate(-50%, calc(var(--drift) - 40px)) scale(.8)}}@keyframes heartFloatSoft{0%{opacity:0;transform:translateY(0)rotate(0)}14%{opacity:.42}72%{opacity:.34}to{opacity:0;transform:translateY(-120vh)rotate(18deg)}}@keyframes packagePulse{0%,to{transform:scale(1);box-shadow:0 8px 20px #ff7fbd47}50%{transform:scale(1.03);box-shadow:0 12px 30px #ff7fbd6b}}@keyframes envelopeAppear{0%{opacity:0;transform:translateY(24px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes envelopeFlapOpen{0%{transform:rotateX(0)}99%{z-index:6}to{z-index:0;transform:rotateX(180deg)}}@keyframes envelopeCardRise{0%{opacity:0;transform:translate(-50%)translateY(76px)}35%{opacity:1}to{opacity:1;transform:translate(-50%)translateY(-94px)}}@keyframes memoryHeartFloatRandom{0%{opacity:0;transform:translate(0,0)rotate(0)scale(.85)}12%{opacity:var(--heart-opacity,.45)}68%{opacity:var(--heart-opacity,.45)}to{opacity:0;transform:translate3d(var(--heart-drift-x), -120vh, 0) rotate(var(--heart-rotate)) scale(1.12)}}@keyframes cursorBlink{0%,45%{opacity:1}46%,to{opacity:0}}.future-question,.future-answer{text-align:center;margin-top:24px;animation:.8s forwards fadeInText}.future-question p{color:#ff4f9c;font-size:18px;font-weight:900}.future-question button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff7fbd,#80d8ff);border:none;border-radius:999px;margin-top:10px;padding:12px 26px;font-size:18px;font-weight:900}.future-answer{color:#ff4f9c;font-size:24px;font-weight:900}.envelope-inner-bg{z-index:1!important;background:linear-gradient(135deg,#ffd6e8 0%,#e8f8ff 100%)!important;border-radius:18px 18px 24px 24px!important;width:100%!important;height:165px!important;position:absolute!important;top:55px!important;left:0!important}
