:root{--font-serif: "Cormorant Garamond", serif;--font-script: "Great Vibes", cursive;--font-ui: "Outfit", system-ui, sans-serif;--bg: radial-gradient(120% 85% at 50% -8%, #fffaf2 0%, #fdeede 52%, #f6e0c6 100%);--ink: #4a3b2a;--ink-soft: rgba(74, 59, 42, .66);--ink-faint: rgba(74, 59, 42, .42);--title: #c23a56;--accent: #e0567a;--accent-soft: #f2a7b8;--gold: #cf9f3f;--panel: linear-gradient(160deg, #ffffff, #fbeede);--line: rgba(150, 110, 70, .28);--key-bg: linear-gradient(180deg, #ffffff, #fbeede);--btn-ink: #ffffff;--btn-bg: linear-gradient(180deg, #ef6a86, #d8455f);--bear-disc: radial-gradient(circle, #ffffff, #fbeede);--vignette: .1}[data-theme=cream]{--bg: radial-gradient(120% 85% at 50% -8%, #fffaf2 0%, #fdeede 52%, #f6e0c6 100%);--ink: #4a3b2a;--ink-soft: rgba(74,59,42,.66);--ink-faint: rgba(74,59,42,.42);--title: #c23a56;--accent: #e0567a;--accent-soft: #f2a7b8;--gold: #cf9f3f;--panel: linear-gradient(160deg, #ffffff, #fbeede);--line: rgba(150,110,70,.28);--key-bg: linear-gradient(180deg, #ffffff, #fbeede);--btn-ink: #fff;--btn-bg: linear-gradient(180deg, #ef6a86, #d8455f);--bear-disc: radial-gradient(circle, #fff, #fbeede);--vignette: .1}[data-theme=sunset]{--bg: radial-gradient(120% 95% at 50% -5%, #ffe9c9 0%, #ffb691 48%, #f07f97 100%);--ink: #5a2530;--ink-soft: rgba(90,37,48,.72);--ink-faint: rgba(90,37,48,.5);--title: #8a2f42;--accent: #ef5d7a;--accent-soft: #ffd0b0;--gold: #f6c250;--panel: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.32));--line: rgba(122,46,63,.3);--key-bg: rgba(255,255,255,.42);--btn-ink: #fff;--btn-bg: linear-gradient(180deg, #f2718c, #e05070);--bear-disc: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.4));--vignette: .12}[data-theme=sky]{--bg: linear-gradient(180deg, #b9e4ff 0%, #e6f5ff 55%, #fff4ef 100%);--ink: #274a63;--ink-soft: rgba(39,74,99,.66);--ink-faint: rgba(39,74,99,.44);--title: #2f6ea0;--accent: #ff7fa6;--accent-soft: #ffd18a;--gold: #e0a93f;--panel: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.48));--line: rgba(39,74,99,.2);--key-bg: rgba(255,255,255,.55);--btn-ink: #fff;--btn-bg: linear-gradient(180deg, #5bb0e6, #3d8fce);--bear-disc: radial-gradient(circle, #fff, #e6f5ff);--vignette: .06}[data-theme=aqua]{--bg: radial-gradient(120% 90% at 50% -6%, #e8fff8 0%, #b3f0e2 52%, #7fdccb 100%);--ink: #17463f;--ink-soft: rgba(23,70,63,.66);--ink-faint: rgba(23,70,63,.44);--title: #0f7d6e;--accent: #14b39a;--accent-soft: #7fe0cf;--gold: #d8b24a;--panel: linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.42));--line: rgba(23,70,63,.2);--key-bg: rgba(255,255,255,.48);--btn-ink: #0c3a34;--btn-bg: linear-gradient(180deg, #3ccdb3, #12a892);--bear-disc: radial-gradient(circle, #fff, #e8fff8);--vignette: .08}[data-theme=amethyst]{--bg: radial-gradient(120% 85% at 50% -5%, #7b4bc9 0%, #3c1d6e 55%, #190a34 100%);--ink: #efe6ff;--ink-soft: rgba(239,230,255,.72);--ink-faint: rgba(239,230,255,.48);--title: #f4d98a;--accent: #b98cff;--accent-soft: #e0c9ff;--gold: #ffd76a;--panel: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));--line: rgba(185,140,255,.3);--key-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));--btn-ink: #2a1550;--btn-bg: linear-gradient(180deg, #c9a6ff, #a074f0);--bear-disc: transparent;--vignette: .42}[data-theme=love]{--bg: radial-gradient(120% 85% at 50% -8%, #48102e 0%, #240718 55%, #0d020a 100%);--ink: #f9e4ec;--ink-soft: rgba(249,228,236,.72);--ink-faint: rgba(249,228,236,.46);--title: #ff8fb3;--accent: #ff5f8f;--accent-soft: #ffc2d4;--gold: #e9c982;--panel: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));--line: rgba(255,95,143,.32);--key-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));--btn-ink: #fff;--btn-bg: linear-gradient(180deg, #d64f7d, #a12655);--bear-disc: transparent;--vignette: .5}[data-theme=mom]{--bg: radial-gradient(120% 90% at 50% -8%, #fff8f5 0%, #fdeaea 50%, #f3d3cd 100%);--ink: #543b3b;--ink-soft: rgba(84,59,59,.7);--ink-faint: rgba(84,59,59,.46);--title: #b04a6e;--accent: #d96e8f;--accent-soft: #f0b6c5;--gold: #c99a4e;--panel: linear-gradient(160deg, #ffffff, #fdeeee);--line: rgba(176,74,110,.26);--key-bg: linear-gradient(180deg, #ffffff, #fdeeee);--btn-ink: #fff;--btn-bg: linear-gradient(180deg, #d96e8f, #b8506f);--bear-disc: radial-gradient(circle, #fff, #fdeeee);--vignette: .08}[data-theme=dad]{--bg: radial-gradient(120% 85% at 50% -8%, #16294a 0%, #0b1830 55%, #04080f 100%);--ink: #e9eef6;--ink-soft: rgba(233,238,246,.72);--ink-faint: rgba(233,238,246,.46);--title: #e3c47a;--accent: #d4a94f;--accent-soft: #f0dca6;--gold: #d4a94f;--panel: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));--line: rgba(212,169,79,.32);--key-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));--btn-ink: #16233c;--btn-bg: linear-gradient(180deg, #e6c87e, #c4a049);--bear-disc: transparent;--vignette: .5}[data-theme=eid]{--bg: radial-gradient(120% 85% at 50% -8%, #14523f 0%, #0a2e21 55%, #03120b 100%);--ink: #eaf4ec;--ink-soft: rgba(234,244,236,.72);--ink-faint: rgba(234,244,236,.46);--title: #e8cd82;--accent: #d4af5a;--accent-soft: #f3dfa5;--gold: #d4af5a;--panel: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));--line: rgba(212,175,90,.32);--key-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));--btn-ink: #113526;--btn-bg: linear-gradient(180deg, #e6cd82, #c2a24a);--bear-disc: transparent;--vignette: .5}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:var(--bg);background-attachment:fixed;color:var(--ink);font-family:var(--font-ui);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{position:fixed;inset:0}.field-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.scene{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 28px);text-align:center;opacity:0;pointer-events:none;visibility:hidden}.scene.is-active{opacity:1;pointer-events:auto;visibility:visible}.eyebrow{font-family:var(--font-ui);font-weight:500;letter-spacing:.42em;text-transform:uppercase;font-size:.6rem;color:var(--gold);padding-left:.42em}.title{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,8vw,2.9rem);line-height:1.12;color:var(--title)}.title em{font-style:italic;color:var(--accent)}.sub{font-family:var(--font-serif);font-style:italic;font-size:clamp(1rem,4.2vw,1.2rem);color:var(--ink-soft)}.btn{margin-top:.6rem;display:inline-flex;align-items:center;gap:.6em;padding:.85em 2.1em;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:var(--btn-bg);color:var(--btn-ink);font-family:var(--font-ui);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:.66rem;cursor:pointer;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent),0 1px #ffffff40 inset;transition:transform .15s,box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn:hover{box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 80%,transparent)}.btn:active{transform:scale(.96)}.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.btn:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skew(-20deg);animation:sheen 4.2s ease-in-out infinite;pointer-events:none}@keyframes sheen{0%,55%{left:-70%}85%,to{left:140%}}.lock-avatar{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);box-shadow:0 12px 34px -10px color-mix(in srgb,var(--accent) 60%,transparent)}.lock-avatar svg{width:46px;height:46px}.lock-avatar svg path,.lock-avatar svg rect{stroke:var(--accent)}.lock-avatar svg rect{fill:var(--accent)}.lock-avatar svg circle{fill:var(--panel)}.lock-word{font-family:var(--font-serif);font-weight:500;letter-spacing:.5em;text-transform:uppercase;font-size:clamp(1.4rem,6vw,1.9rem);color:var(--title);padding-left:.5em}.lock-hint{font-size:.64rem;letter-spacing:.2em;color:var(--ink-faint)}.lock-error{font-size:.62rem;letter-spacing:.2em;color:var(--accent);min-height:1.1em;opacity:0}.lock-dots{display:flex;gap:14px;margin:.5rem 0}.lock-dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--line);transition:background .15s,box-shadow .15s}.lock-dot.on{background:var(--accent);box-shadow:0 0 12px var(--accent);border-color:var(--accent)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(76vw,280px)}.key{aspect-ratio:1.6;border-radius:14px;border:1px solid var(--line);background:var(--key-bg);color:var(--ink);font-family:var(--font-serif);font-size:1.35rem;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s,transform .08s;-webkit-tap-highlight-color:transparent}.key:hover{border-color:var(--accent)}.key:active{transform:scale(.94)}.key:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.key--ghost{opacity:0;pointer-events:none}.load-bear{width:110px;height:110px;border-radius:50%;background:var(--bear-disc);filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}.load-bar{width:min(64vw,240px);height:3px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden}.load-bar i{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-soft),var(--accent));background-size:200% 100%;box-shadow:0 0 12px var(--accent);animation:barflow 1.3s linear infinite}@keyframes barflow{to{background-position:-200% 0}}.bear{width:128px;height:128px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.2))}.ring{width:168px;height:168px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bear-disc);box-shadow:0 0 40px -12px var(--accent),0 0 0 10px color-mix(in srgb,var(--accent) 6%,transparent);position:relative}.ring:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);animation:spin 28s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.count-row{display:flex;gap:clamp(18px,7vw,44px);align-items:baseline;justify-content:center;margin-top:.4rem}.count-cell{display:grid;gap:6px}.count-num{font-family:var(--font-serif);font-weight:500;font-size:clamp(3.2rem,15vw,5rem);line-height:1;color:var(--title);text-shadow:0 6px 24px color-mix(in srgb,var(--accent) 30%,transparent);font-variant-numeric:tabular-nums}.count-label{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-faint);padding-left:.34em}.mem-track{width:100%;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 12vw 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mem-track::-webkit-scrollbar{display:none}.mem-card{flex:0 0 min(64vw,250px);aspect-ratio:3 / 4;scroll-snap-align:center;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 18px 40px -18px #00000059,0 0 30px -14px var(--accent);display:grid;place-items:center;position:relative}.mem-card:nth-child(odd){transform:rotate(-2deg)}.mem-card:nth-child(2n){transform:rotate(2deg)}.mem-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 9s ease-in-out infinite alternate;will-change:transform}.mem-card:nth-child(2n) img{animation-delay:-4.5s}@keyframes kenburns{0%{transform:scale(1.02)}to{transform:scale(1.1) translate(1.6%,-1.6%)}}.mem-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.22) 46%,transparent 60%);background-size:260% 100%;background-position:130% 0;animation:cardshine 5s ease-in-out infinite}.mem-card:nth-child(2):after{animation-delay:1.2s}.mem-card:nth-child(3):after{animation-delay:2.4s}.mem-card:nth-child(4):after{animation-delay:3.1s}.mem-card:nth-child(5):after{animation-delay:1.8s}.mem-card:nth-child(6):after{animation-delay:2.9s}@keyframes cardshine{0%,55%{background-position:130% 0}90%,to{background-position:-70% 0}}@media (prefers-reduced-motion: reduce){.mem-card img,.mem-card:after{animation:none!important}}.mem-card .ph{display:grid;place-items:center;gap:10px;color:var(--ink-faint);font-family:var(--font-serif);font-style:italic;font-size:.95rem}.mem-card .ph svg{width:44px;height:44px;opacity:.8;color:var(--accent)}.letter-panel{width:min(88vw,420px);border-radius:18px;border:1px solid var(--line);background:var(--panel);box-shadow:0 24px 60px -24px #00000059,0 0 44px -18px var(--accent);padding:clamp(22px,6vw,34px);display:grid;gap:14px;text-align:left;animation:panelglow 4.5s ease-in-out infinite}@keyframes panelglow{0%,to{box-shadow:0 24px 60px -24px #00000059,0 0 44px -18px var(--accent)}50%{box-shadow:0 24px 60px -24px #00000059,0 0 62px -14px var(--accent)}}.letter-body{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(1.06rem,4.6vw,1.28rem);line-height:1.65;color:var(--ink);min-height:7.5em}.letter-body .caret{display:inline-block;width:1px;height:1em;background:var(--accent);vertical-align:-.15em;margin-left:2px;animation:caret .9s steps(1) infinite}@keyframes caret{50%{opacity:0}}.letter-sig{font-family:var(--font-script);font-size:clamp(1.5rem,7vw,2rem);color:var(--accent);text-align:right;opacity:0}.finale-writing{width:min(92vw,520px);overflow:visible}.finale-from{font-family:var(--font-serif);font-style:italic;font-size:clamp(1rem,4.4vw,1.2rem);color:var(--ink-soft);opacity:0}.finale-from b{font-family:var(--font-script);font-weight:400;font-style:normal;font-size:1.5em;color:var(--title)}.replay{position:fixed;z-index:6;bottom:calc(env(safe-area-inset-bottom) + 18px);left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.3em;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel),transparent 30%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink-soft);font-family:var(--font-ui);letter-spacing:.2em;text-transform:uppercase;font-size:.58rem;font-weight:500;cursor:pointer;opacity:0;pointer-events:none;transition:color .2s,border-color .2s}.replay.is-on{pointer-events:auto}.replay:hover{color:var(--title);border-color:var(--accent)}.replay:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.replay svg{width:12px;height:12px}.balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.balloon{position:absolute;top:0;width:46px;height:58px;border-radius:50%/56% 56% 44% 44%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5) 0 18%,transparent 40%),radial-gradient(circle at 50% 45%,var(--accent) 0%,color-mix(in srgb,var(--accent) 60%,#000) 90%);box-shadow:0 0 24px -8px var(--accent)}.balloon:after{content:"";position:absolute;top:100%;left:50%;width:1px;height:44px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 60%,transparent),transparent)}#app:after{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,var(--vignette)) 100%)}.reduced .caret{animation:none}@media (prefers-reduced-motion: reduce){.btn:after,.ring:before,.load-bar i,.letter-panel{animation:none!important}}.count-live{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.22em;color:var(--accent);opacity:0;font-variant-numeric:tabular-nums}.music-btn{position:fixed;z-index:30;top:calc(env(safe-area-inset-top) + 14px);right:14px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#7f7f7f1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--accent);cursor:pointer;transition:color .2s,border-color .2s,transform .15s;-webkit-tap-highlight-color:transparent}.music-btn svg{width:18px;height:18px}.music-btn:active{transform:scale(.92)}.music-btn.is-off{color:var(--ink-faint)}.music-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.btn--reply{text-decoration:none}