:root{--color-bg:#0a0a0a;--color-text:beige;--color-text-muted:#f5f5dcad;--color-text-faint:#f5f5dc61;--font-serif:"Cormorant Garamond", "Times New Roman", "Noto Serif SC", serif;--font-sans:"Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;--duration-slow:1.2s;--duration-cinema:1.8s;--duration-long:2.6s;--ease-cinema:cubic-bezier(.65, 0, .35, 1)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{color:var(--color-text);background:var(--color-bg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0}button,input,textarea{font:inherit;-webkit-user-select:auto;user-select:auto}.cinematic-copy{color:var(--color-text);letter-spacing:.16em;text-shadow:0 0 24px #f5f5dc2e;font-size:clamp(1.05rem,1vw + .75rem,1.65rem);font-weight:300;line-height:1.9}.scene-kicker{color:var(--color-text-muted);font-family:var(--font-serif);letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.8rem,.8vw + .5rem,1.2rem)}.app-root{background:radial-gradient(circle at 50% 20%,#f5f5dc0e,#0000 32%),linear-gradient(#0b0b0b 0%,#050505 100%);width:100vw;height:100vh;position:relative;overflow:hidden}.firefly-canvas{pointer-events:none;z-index:2;opacity:.55;width:100%;height:100%;position:absolute;inset:0}.app-root:after{pointer-events:none;content:"";opacity:.34;background-image:linear-gradient(#f5f5dc06 1px,#0000 1px);background-size:100% 4px;position:absolute;inset:0}.scene-shell{isolation:isolate;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.scene-shell:before{pointer-events:none;z-index:3;content:"";background:radial-gradient(circle at 50% 45%,#0000 0 46%,#0000008f 100%);position:absolute;inset:0}.scene-content{z-index:5;text-align:center;width:min(88vw,980px);position:relative}.scene-fade-in{animation:sceneFadeIn var(--duration-cinema) var(--ease-cinema) both}.app-root[data-phase=exiting] .scene-shell{animation:sceneFadeOut .9s var(--ease-cinema) both}.app-root[data-phase=entering] .scene-shell{animation:sceneFadeIn var(--duration-cinema) var(--ease-cinema) both}.scene-transition-overlay{pointer-events:none;z-index:999;background:#0a0a0a;position:absolute;inset:0}.scene-transition-overlay[data-phase=exiting]{animation:overlayFadeIn .9s var(--ease-cinema) both}.scene-transition-overlay[data-phase=entering]{animation:overlayFadeOut .9s var(--ease-cinema) both}.cinematic-text{animation:textDriftIn var(--duration-cinema) var(--ease-cinema) both}.soft-button{min-height:44px;color:var(--color-text);letter-spacing:.18em;transition:border-color var(--duration-slow) ease-in-out, background var(--duration-slow) ease-in-out, transform var(--duration-slow) ease-in-out;background:#f5f5dc0b;border:1px solid #f5f5dc38;border-radius:999px;padding:.8rem 1.5rem}.soft-button:hover,.soft-button:focus-visible{background:#f5f5dc17;border-color:#f5f5dc85;outline:none;transform:translateY(-1px)}@keyframes sceneFadeIn{0%{opacity:0;filter:blur(18px)}to{opacity:1;filter:blur()}}@keyframes sceneFadeOut{0%{opacity:1;filter:blur()}to{opacity:0;filter:blur(18px)}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes overlayFadeOut{0%{opacity:1}to{opacity:0}}.frame-transition{transition:none}.frame-transition[data-frame-phase=exiting]{animation:frameFadeOut .6s var(--ease-cinema) both}.frame-transition[data-frame-phase=entering]{animation:frameFadeIn .6s var(--ease-cinema) both}@keyframes frameFadeOut{0%{opacity:1;filter:blur();transform:translateY(0)}to{opacity:0;filter:blur(12px);transform:translateY(-8px)}}@keyframes frameFadeIn{0%{opacity:0;filter:blur(12px);transform:translateY(8px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes textDriftIn{0%{opacity:0;filter:blur(18px);transform:translateY(18px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes slowPulse{0%,to{opacity:.68}50%{opacity:1}}.ripple-layer{pointer-events:none;z-index:998;position:absolute;inset:0;overflow:hidden}.click-ripple{background:radial-gradient(circle,#f5f5dc40 0%,#f5f5dc00 70%);border:1px solid #f5f5dc2e;border-radius:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;animation:.8s cubic-bezier(.25,.46,.45,.94) forwards rippleExpand;position:absolute;transform:scale(0)}@keyframes rippleExpand{0%{opacity:.6;transform:translate(-50%,-50%)scale(.6)}to{opacity:0;transform:translate(-50%,-50%)scale(3.5)}}.archive-scene{cursor:pointer}.archive-scene:after{pointer-events:none;z-index:0;content:"";background:radial-gradient(50% 50% at 50% 48%,#dcd2be0f,#0000 58%),radial-gradient(70% 35% at 20% 80%,#c8b4a00a,#0000 65%);position:absolute;inset:0}.archive-content{justify-items:center;gap:2.4rem;display:grid}.archive-card{border-top:1px solid #f5f5dc2e;border-bottom:1px solid #f5f5dc2e;width:min(720px,86vw);padding:clamp(2rem,5vw,4.2rem) 1rem}.archive-label{color:var(--color-text-faint);letter-spacing:.35em}.archive-value{font-family:var(--font-serif);margin:1rem 0;font-size:clamp(3rem,9vw,8rem);font-weight:300;line-height:1}.archive-note{color:var(--color-text-muted);letter-spacing:.14em;line-height:2}.countdown-scene:after{pointer-events:none;z-index:0;content:"";background:radial-gradient(55% 45% at 50% 40%,#f5dcb412,#0000 65%),radial-gradient(80% 60% at 50% 90%,#c8a0780d,#0000 70%);position:absolute;inset:0}.countdown-card{justify-items:center;gap:clamp(1.4rem,2vw,2.3rem);display:grid}.countdown-title{color:var(--color-text-muted);letter-spacing:.38em;font-size:clamp(.85rem,1vw,1.1rem)}.countdown-grid{grid-template-columns:repeat(4,minmax(90px,1fr));gap:clamp(.8rem,2vw,1.8rem);width:min(760px,88vw);display:grid}.countdown-unit{background:linear-gradient(#f5f5dc0e,#f5f5dc04);border:1px solid #f5f5dc24;padding:clamp(1rem,2vw,1.8rem) .5rem}.countdown-number{font-family:var(--font-serif);font-size:clamp(2.8rem,7vw,6.8rem);line-height:.9;display:block}.countdown-label,.countdown-hint{color:var(--color-text-faint);letter-spacing:.28em}@media (width<=720px){.countdown-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}}.debug-hotspot{z-index:30;background:0 0;border:0;width:96px;height:96px;padding:0;position:fixed;bottom:0;right:0}.debug-backdrop{z-index:31;background:0 0;position:fixed;inset:0}.debug-panel{z-index:32;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-sizing:border-box;background:#0a0a0aeb;border:1px solid #f5f5dc2e;gap:.7rem;width:min(320px,90vw);max-height:85vh;padding:1rem;display:grid;position:fixed;bottom:.5rem;right:.5rem;overflow-y:auto}.debug-close{color:var(--color-text-faint);cursor:pointer;background:0 0;border:0;padding:.2rem .5rem;font-size:1.2rem;line-height:1;position:absolute;top:.4rem;right:.6rem}.debug-close:hover{color:var(--color-text)}.debug-panel button{width:100%}.debug-field{gap:.4rem;display:grid}.debug-label{color:var(--color-text-faint);letter-spacing:.2em;font-size:.72rem}.debug-date-input{color:var(--color-text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;box-sizing:border-box;background:#0000004d;border:1px solid #f5f5dc2e;outline:none;max-width:100%;padding:.4rem .6rem;font-size:.85rem}.debug-time-row{align-items:center;gap:.4rem;display:flex;overflow:hidden}.debug-time-row .debug-date-input{flex:1;min-width:0}.debug-confirm{white-space:nowrap;flex-shrink:0;padding:.35rem .6rem;font-size:.75rem;width:auto!important}.fullscreen-btn{z-index:30;width:40px;height:40px;color:var(--color-text-faint,#f5f5dc80);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a0a80;border:1px solid #f5f5dc2e;border-radius:8px;place-items:center;padding:0;transition:color .3s,border-color .3s;display:grid;position:fixed;top:.8rem;right:.8rem}.fullscreen-btn:hover{color:var(--color-text,#f5f5dce6);border-color:#f5f5dc59}.fullscreen-btn svg{width:20px;height:20px}:fullscreen .fullscreen-btn{top:1.2rem;right:1.2rem}.gate-scene:after{pointer-events:none;z-index:0;content:"";background:radial-gradient(40% 55%,#a08cdc0f,#0000 60%),radial-gradient(70% 40% at 50% 100%,#6478c80d,#0000 70%);position:absolute;inset:0}.gate-form{justify-items:center;gap:2rem;display:grid}.gate-input{width:min(520px,82vw);color:var(--color-text);text-align:center;font-family:var(--font-serif);letter-spacing:.12em;transition:border-color var(--duration-slow) ease-in-out, filter var(--duration-slow) ease-in-out;background:0 0;border:0;border-bottom:1px solid #f5f5dc5c;outline:none;padding:1rem .4rem;font-size:clamp(1.5rem,4vw,3.2rem)}.gate-input::placeholder{color:#f5f5dc52;font-family:var(--font-sans);letter-spacing:.2em;font-size:clamp(1rem,2vw,1.2rem)}.gate-error{color:#f5f5dc94;letter-spacing:.18em;min-height:1.4rem;font-size:.82rem}.gate-opening{pointer-events:none;z-index:8;animation:openingBlackout 4.2s var(--ease-cinema) both;background:#000;position:absolute;inset:0}@keyframes openingBlackout{0%{opacity:0}25%{opacity:1}78%{opacity:1}to{opacity:0}}.letter-scene{cursor:pointer}.letter-scene:after{pointer-events:none;z-index:0;content:"";background:radial-gradient(50% 55% at 50% 55%,#e6be780f,#0000 60%),radial-gradient(65% 40% at 50% 15%,#d2aa6e0a,#0000 65%);position:absolute;inset:0}.letter-content{justify-items:center;gap:1.8rem;display:grid}.letter-paper{text-align:left;background:linear-gradient(#f5f5dc12,#f5f5dc06);border:1px solid #f5f5dc1f;width:min(760px,88vw);min-height:min(54vh,520px);max-height:72vh;padding:clamp(1.4rem,4vw,3rem);overflow:hidden;box-shadow:0 30px 120px #0000006b}.typewriter-letter{white-space:pre-wrap;color:var(--color-text);font-family:var(--font-serif);letter-spacing:.08em;font-size:clamp(1.05rem,1.3vw,1.45rem);line-height:2.1}.letter-cursor{width:.5em;animation:1.2s ease-in-out infinite slowPulse;display:inline-block}.letter-hint{color:var(--color-text-faint);letter-spacing:.2em}.stargaze-scene{cursor:crosshair}.star-canvas{z-index:1;width:100%;height:100%;position:absolute;inset:0}.stargaze-copy{pointer-events:none;z-index:6;text-align:center;width:min(86vw,760px);position:absolute;top:clamp(2rem,6vh,5rem);left:50%;transform:translate(-50%)}.wish-panel{z-index:9;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);width:min(620px,88vw);animation:wishPanelIn var(--duration-cinema) var(--ease-cinema) both;background:#0a0a0aa3;border:1px solid #f5f5dc29;gap:1rem;padding:clamp(1.2rem,3vw,2rem);display:grid;position:absolute;bottom:clamp(2rem,7vh,5rem);left:50%;transform:translate(-50%)}.wish-panel textarea{resize:none;min-height:110px;color:var(--color-text);background:#f5f5dc09;border:1px solid #f5f5dc24;outline:none;padding:1rem;line-height:1.8}.wish-panel textarea::placeholder{color:var(--color-text-faint)}.wish-count{color:var(--color-text-faint);letter-spacing:.16em;text-align:right;font-size:.75rem}.meteor-finale{pointer-events:none;z-index:12;animation:finaleFadeIn 1.6s var(--ease-cinema) both;background:0 0;place-items:center;display:grid;position:absolute;inset:0;overflow:hidden}.meteor-canvas{z-index:1;width:100%;height:100%;position:absolute;inset:0}.finale-text{z-index:2;text-align:center;width:min(84vw,780px);animation:textReveal 2.4s var(--ease-cinema) both;animation-delay:.3s;position:relative}.finale-title{font-family:var(--font-serif);margin:0;font-size:clamp(2.6rem,8vw,8rem);font-weight:300;line-height:1}.finale-note{color:var(--color-text-muted);letter-spacing:.18em;margin-top:1.5rem}@keyframes wishPanelIn{0%{opacity:0;filter:blur(18px);transform:translate(-50%,18px)}to{opacity:1;filter:blur();transform:translate(-50%)}}@keyframes finaleFadeIn{0%{opacity:0}to{opacity:1}}@keyframes textReveal{0%{opacity:0;filter:blur(20px);transform:translateY(24px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes meteorTravel{0%{opacity:0;transform:translate(0,0)rotate(-18deg)scaleX(.1)}20%{opacity:1}to{opacity:0;transform:translate(120vw,48vh)rotate(-18deg)scaleX(1)}}.timeline-scene{cursor:pointer}.timeline-scene:after{pointer-events:none;z-index:0;content:"";background:radial-gradient(60% 50% at 30% 20%,#a0bee60d,#0000 65%),radial-gradient(45% 55% at 75% 70%,#8caad20a,#0000 60%);position:absolute;inset:0}.timeline-stage{text-align:left;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:center;gap:clamp(1.2rem,4vw,4rem);width:min(86vw,1080px);height:min(72vh,660px);display:grid}.timeline-image-wrap{background:#f5f5dc09;border:1px solid #f5f5dc1f;height:100%;min-height:300px;position:relative;overflow:hidden;box-shadow:0 30px 120px #00000073}.timeline-image{object-fit:cover;opacity:.78;filter:grayscale(.18)contrast(.92)brightness(.76);width:100%;height:100%;animation:1.5s ease-in-out both imageBreath}.timeline-fallback{color:var(--color-text-faint);font-family:var(--font-serif);letter-spacing:.08em;background:radial-gradient(circle at 50% 30%,#f5f5dc14,#0000001f 50%,#0009);place-items:center;font-size:clamp(2rem,7vw,6rem);display:grid;position:absolute;inset:0}.timeline-copy{gap:1.2rem;display:grid}.timeline-date{color:var(--color-text-faint);letter-spacing:.28em}.timeline-title{font-family:var(--font-serif);margin:0;font-size:clamp(2rem,4vw,5rem);font-weight:300;line-height:1}.timeline-narration{max-width:32rem;color:var(--color-text-muted);letter-spacing:.12em;line-height:2}.mirror-stage{justify-items:center;gap:1.8rem;display:grid}.mirror-frame{background:#f5f5dc0a;border:1px solid #f5f5dc2e;width:min(72vw,680px);height:min(48vh,440px);position:relative;overflow:hidden}.mirror-video{object-fit:cover;opacity:.62;filter:grayscale(.25)brightness(.7);width:100%;height:100%;transform:scaleX(-1)}.mirror-fallback{color:var(--color-text-muted);text-align:center;background:#0a0a0a9e;place-items:center;padding:2rem;line-height:2;display:grid;position:absolute;inset:0}.mirror-fallback-visual{text-align:center;background:radial-gradient(50% 50%,#c8d2e60f,#0000 70%),#08080cd9;place-items:center;gap:.6rem;padding:2rem;display:grid;position:absolute;inset:0;overflow:hidden}.mirror-ripple{pointer-events:none;border:1px solid #c8d2e638;border-radius:50%;width:120px;height:120px;animation:4.2s ease-in-out infinite rippleExpand;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.6)}.mirror-ripple--delay{animation-delay:2.1s}.mirror-fallback-text{color:var(--color-text-muted);font-family:var(--font-serif);letter-spacing:.14em;margin:0;font-size:clamp(.95rem,1.2vw,1.3rem);line-height:1.8}.mirror-fallback-hint{color:var(--color-text-faint);letter-spacing:.22em;margin:.8rem 0 0;font-size:.82rem}@keyframes imageBreath{0%{opacity:0;filter:blur(14px)grayscale(.3)brightness(.62);transform:scale(1.035)}to{opacity:.78;filter:blur()grayscale(.18)brightness(.76);transform:scale(1)}}@media (orientation:portrait),(width<=760px){.timeline-stage{text-align:center;grid-template-rows:minmax(280px,1fr) auto;grid-template-columns:1fr;height:78vh}.timeline-copy{justify-items:center}}