:root{--gold: #f5c96b;--gold-2: #ffdf9e;--ink: #2b2140;--violet: #7a4fd6}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff;background:radial-gradient(ellipse at 50% 30%,#3a2a78,#1c1745 55%,#0c0a22);-webkit-tap-highlight-color:transparent}canvas#three{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;z-index:0;transition:opacity 1.2s ease;touch-action:none}canvas#three.off{opacity:0;pointer-events:none}canvas#fx{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:22}.dialog,.hint,.toast,.modal,.celebrate,.letter-scene,.letter-card,.thanks,.music,.credits,.end-msg{transition:opacity .8s ease,visibility .8s ease,transform .8s ease}.hidden{opacity:0;visibility:hidden;pointer-events:none}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;padding:12px 24px;border-radius:999px;font:700 1rem/1 inherit;color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 6px 20px #f5c96b59;transition:transform .15s ease,filter .15s ease}.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn.big{padding:16px 30px;font-size:1.1rem}.btn.ghost{background:transparent;color:inherit;box-shadow:none;border:1.5px solid rgba(255,255,255,.5)}.dialog{position:fixed;z-index:5;top:7vh;left:12px;width:min(380px,92vw);background:#fffffff5;color:var(--ink);padding:14px 18px;border-radius:18px 18px 18px 4px;box-shadow:0 10px 30px #0006}.dialog-name{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:4px}.dialog p{font-size:clamp(1rem,2.6vw,1.2rem);line-height:1.5;min-height:3em}.dialog p:after{content:"▍";opacity:.5;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.hint{position:fixed;z-index:5;left:50%;bottom:6vh;transform:translate(-50%);background:#ffffff24;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 20px;border-radius:999px;font-weight:600;white-space:nowrap;max-width:94vw;font-size:clamp(.82rem,3.6vw,1rem);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px #ffffff1a}}.toast{position:fixed;z-index:6;left:50%;bottom:9vh;transform:translate(-50%);background:#0000008c;padding:10px 18px;border-radius:999px;font-weight:600;text-align:center;max-width:90vw}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:#080618b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.calc{width:min(92vw,340px);padding:20px;border-radius:26px;background:linear-gradient(180deg,#221c45,#16122f);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px #0009;user-select:none;-webkit-user-select:none}.calc-title{font-weight:800;font-size:1.15rem;text-align:center}.calc-sub{text-align:center;font-size:.85rem;color:#b9aee0;margin:4px 0 14px}.calc-display{background:#0b0919;border-radius:14px;padding:16px 14px;min-height:3.6rem;text-align:right;white-space:nowrap;overflow:hidden;font:700 1.9rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#c8ffd8;box-shadow:inset 0 2px 8px #0009}.calc-display.empty{color:#4b4670;font-size:1.4rem}.calc-display.ok{color:#ffe08a}.calc-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.calc-keys button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:16px;padding:16px 0;cursor:pointer;font:700 1.5rem/1 inherit;color:#fff;background:#2f2760;box-shadow:0 4px #1a1540;touch-action:manipulation;transition:transform .08s,box-shadow .08s,filter .15s}.calc-keys button:hover{filter:brightness(1.15)}.calc-keys button:active{transform:translateY(3px);box-shadow:0 1px #1a1540}.calc-keys button.fn{background:#4b3a8f}.calc-keys button.enter{grid-column:1 / -1;font-size:1.2rem;letter-spacing:.08em;color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 4px #b88b2c}.calc-cancel{display:block;margin:14px auto 0;background:none;border:0;cursor:pointer;color:#b9aee0;font-size:.9rem;text-decoration:underline}.popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:41;display:flex;align-items:center;justify-content:center;padding:20px;background:#0000008c;transition:opacity .25s ease,visibility .25s ease}.popup-card{width:min(88vw,320px);background:#fff;color:var(--ink);text-align:center;padding:24px 22px;border-radius:20px;box-shadow:0 20px 60px #00000080}.popup:not(.hidden) .popup-card{animation:pop .35s cubic-bezier(.2,1.4,.4,1) both}.popup-card p{font-size:1.08rem;font-weight:600;line-height:1.5;margin-bottom:18px}.celebrate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 6vw max(9vh,env(safe-area-inset-bottom));text-align:center;pointer-events:none}.celebrate .btn{pointer-events:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.celebrate h1.old{font-size:clamp(1.7rem,6.2vw,3.6rem);line-height:1.15;letter-spacing:.02em;background:linear-gradient(180deg,#fff6d6,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));animation:pop .9s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{0%{transform:scale(.4);opacity:0}}.letter-scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#462d828c,#080618e6)}.env-hint{position:absolute;top:14vh;left:0;right:0;text-align:center;font-weight:600;opacity:.9;animation:pulse 1.6s ease-in-out infinite;border-radius:999px;width:fit-content;margin:0 auto;padding:8px 18px;transition:opacity .5s}.env-hint.gone{opacity:0}.envelope{position:relative;width:min(86vw,420px);aspect-ratio:3 / 2;cursor:pointer;transform:translateY(70vh);opacity:0;transition:transform 1.2s cubic-bezier(.2,.9,.3,1),opacity 1s ease;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}.envelope.in{transform:none;opacity:1}.envelope.in.opened{cursor:default}.envelope.in.away{transform:translateY(36vh) scale(.7);opacity:.45;transition-duration:1s}.env-back{position:absolute;top:0;right:0;bottom:0;left:0;background:#e3d2a8;border-radius:6px}.env-front{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#efe3c4;border-radius:6px;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}.env-flap{position:absolute;top:0;left:0;width:100%;height:58%;z-index:3;background:#d8c38d;transform-origin:top center;clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .9s ease,z-index 0s .45s}.env-flap:after{content:"♡";position:absolute;left:50%;bottom:14%;transform:translate(-50%);font-size:1.6rem;color:#b3394a}.envelope.opened .env-flap{transform:rotateX(180deg);z-index:1}.letter-card{position:absolute;z-index:5;top:50%;left:50%;width:min(92vw,560px);max-height:78vh;overflow-y:auto;transform:translate(-50%,-46%) scale(.92);background:#fffaf0;color:#3b2f2f;font-family:Georgia,Times New Roman,serif;padding:24px 24px 28px;border-radius:10px;box-shadow:0 24px 60px #0000008c;line-height:1.75;font-size:clamp(1rem,2.4vw,1.12rem)}.letter-card:not(.hidden){transform:translate(-50%,-50%) scale(1)}.letter-card h2{text-align:center;font-size:1.25rem;margin-bottom:14px;color:#6b3f4f}.letter-card p{margin-bottom:12px}.letter-card .sign{white-space:pre-line;margin-top:18px;text-align:right;font-style:italic;color:#6b3f4f}.photo{width:150px;aspect-ratio:1;margin:0 auto 16px;border:6px solid #fff;box-shadow:0 6px 18px #0000004d;transform:rotate(-2deg);background:#eadfc8;display:flex;align-items:center;justify-content:center;text-align:center;font:.75rem/1.3 system-ui,sans-serif;color:#8a7a5a;padding:8px;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover;display:block}.thanks{position:fixed;z-index:12;left:50%;bottom:4vh;transform:translate(-50%);white-space:nowrap}.thanks.hidden{transform:translate(-50%,16px)}.music{position:fixed;z-index:50;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;font-size:1.1rem;background:#ffffff2e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}.black{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#000;opacity:0;pointer-events:none;transition:opacity 2s ease}.black.on{opacity:1}.credits{position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;overflow:hidden;pointer-events:none}.credits-inner{position:absolute;left:0;right:0;top:100%;padding:0 7vw;text-align:center}.credits-inner.play{animation:roll var(--dur, 40s) linear forwards}@keyframes roll{to{transform:translateY(calc(-100% - 100vh))}}.c-item{margin-bottom:64px}.c-title{font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}.c-name{font-size:clamp(1.3rem,4.4vw,2rem);color:#fff;letter-spacing:.04em}.c-image img{display:block;margin:0 auto;width:min(66vw,320px);aspect-ratio:419 / 351;object-fit:contain;filter:drop-shadow(0 0 16px rgba(255,140,170,.6)) drop-shadow(0 10px 28px rgba(0,0,0,.55))}.c-caption{margin-top:14px;font-size:.95rem;letter-spacing:.06em;color:#f3e6c4}.c-item.big .c-name{font-size:clamp(1.7rem,6vw,3rem);background:linear-gradient(180deg,#fff6d6,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}.end-msg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:0 6vw}.end-msg p{font-size:clamp(1.6rem,6vw,2.8rem);color:var(--gold);font-family:Georgia,serif;font-style:italic}@media (prefers-reduced-motion: reduce){.hint,.env-hint{animation:none}}body:before,body:after{content:"";position:fixed;left:0;right:0;height:0;background:#000;z-index:21;pointer-events:none;transition:height 1.2s cubic-bezier(.3,.8,.3,1)}body:before{top:0}body:after{bottom:0}body.cine:before,body.cine:after{height:6vh}html,body{height:100vh;height:100dvh}.modal{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.gate-head{position:fixed;top:max(2.5vh,env(safe-area-inset-top));left:0;right:0;text-align:center;padding:0 16px;text-shadow:0 2px 10px rgba(0,0,0,.7)}.calc-cancel{position:fixed;left:50%;transform:translate(-50%);bottom:max(2.5vh,env(safe-area-inset-bottom));z-index:41;pointer-events:auto;padding:8px 16px;color:#fff}.popup:not(.hidden){pointer-events:auto}.envelope{display:none}.letter-scene{pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#28195a00,#0806188c)}.letter-scene .letter-card{pointer-events:auto;max-height:78vh;max-height:78dvh}.env-hint{top:max(10vh,env(safe-area-inset-top))}.thanks{bottom:max(4vh,env(safe-area-inset-bottom))}.letter-card{background:#fffaf0 linear-gradient(180deg,#ffffff80,#d6be962e)}@media (max-height: 520px){.letter-scene .letter-card{max-height:86dvh;padding:14px 18px}.photo{width:90px;margin-bottom:8px}.dialog{top:3vh}body.cine:before,body.cine:after{height:4vh}}.dialog:after{content:"";position:absolute;left:36px;bottom:-9px;width:18px;height:18px;background:inherit;transform:rotate(45deg);border-radius:0 0 4px}.dialog.right{border-radius:18px 18px 18px 4px}.dialog.right:after{left:-8px;bottom:auto;top:26px;border-radius:0 0 0 4px}.letter-scene .letter-card{top:45%;max-height:72vh;max-height:72dvh}@media (max-height: 520px){.letter-scene .letter-card{top:46%;max-height:74dvh}}.letter-scene .letter-card{width:min(92vw,540px);padding:44px 38px 34px;border-radius:4px;color:#4b3a36;font-family:Georgia,Times New Roman,serif;line-height:1.85;font-size:clamp(.98rem,2.3vw,1.08rem);background-color:#fbf4e3;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .09 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),radial-gradient(ellipse at 50% 0%,#ffffffbf,#fff0 60%),linear-gradient(180deg,#fffaf0,#f6ead0);box-shadow:inset 0 0 0 9px #fbf4e3,inset 0 0 0 10px #a8763c8c,inset 0 0 0 13px #fbf4e3,inset 0 0 0 14px #a8763c47,0 2px #fff9,0 26px 60px #0000008c;scrollbar-width:thin;scrollbar-color:rgba(168,118,60,.5) transparent}.letter-scene .letter-card h2{font-family:Segoe Script,Snell Roundhand,Apple Chancery,Lucida Handwriting,Brush Script MT,cursive;font-weight:400;font-size:clamp(1.35rem,4.6vw,1.7rem);line-height:1.5;color:#9a3b52;margin:6px 0 4px}.letter-scene .letter-card h2:after{content:"✦ ✦ ✦";display:block;margin-top:6px;font:.7rem/1 system-ui,sans-serif;letter-spacing:.5em;color:#c9a45c}#letter-body{margin-top:18px}.letter-scene .letter-card #letter-body p{margin-bottom:14px;text-align:left}.letter-scene .letter-card #letter-body p:first-child{font-style:italic;font-size:1.14em;color:#9a3b52;text-align:center;margin-bottom:18px}.letter-scene .letter-card .sign{font-family:Segoe Script,Snell Roundhand,Apple Chancery,Lucida Handwriting,Brush Script MT,cursive;font-style:normal;color:#7a2f45;text-align:right;margin-top:22px;line-height:1.7;font-size:1.02em}.paper-end{text-align:center;color:#c9a45c;font-size:1.5rem;margin:18px 0 6px}.letter-scene .photo{position:relative;width:160px;padding:8px 8px 26px;border:0;background:#fff;box-shadow:0 8px 20px #3c1e1447;transform:rotate(-3deg);margin:4px auto 18px}.letter-scene .photo:before{content:"";position:absolute;top:-12px;left:50%;width:70px;height:22px;transform:translate(-50%) rotate(3deg);background:#f4becdbf;box-shadow:0 1px 3px #00000026}.letter-scene .photo img{aspect-ratio:1}.letter-card .thanks{position:static;transform:none;display:block;margin:8px auto 4px;white-space:nowrap;pointer-events:auto;font-family:Georgia,serif;font-weight:700;color:#fff3dc;background:radial-gradient(circle at 35% 30%,#d9506d,#a02a48 70%);box-shadow:0 6px 16px #781e3266,inset 0 1px #ffffff59}.letter-card .thanks.hidden{transform:none}@media (max-width: 480px){.letter-scene .letter-card{padding:34px 24px 26px}.letter-scene .photo{width:130px}}