:root{--rose:#ff5c8a;--rose-light:#ff8fb0;--rose-deep:#c2255c;--ink:#6b3b4c;--soft:#8a5a6a;--kb:0px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:manipulation;background:radial-gradient(60% 40% at 20% 18%,#ffffff80,#0000 70%),linear-gradient(#8fd196 0%,#b3e3a9 42%,#d6f0c1 72%,#e6f6d2 100%);font-family:Fredoka,ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}.ui{padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 22px);pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0}.top{text-align:center;position:relative}.intro-block,.caption,.bottom,.welcome,.cafe-bottom{transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}.eyebrow{color:#d6567f;margin:0;font-family:Caveat,cursive;font-size:26px;animation:.9s .2s both rise}h1{color:var(--rose-deep);text-shadow:0 2px #ffffffb3;margin:2px 0 6px;font-size:clamp(28px,8vw,44px);font-weight:600;line-height:1.1;animation:.9s .35s both rise}.sub{color:var(--soft);margin:0;font-size:15px;animation:.9s .5s both rise}.welcome{color:var(--rose-deep);text-shadow:0 2px #fffc;opacity:0;font-family:Caveat,cursive;font-size:clamp(30px,8.5vw,42px);font-weight:700;line-height:1.1;position:absolute;top:0;left:0;right:0;transform:translateY(-12px)}body[data-phase=cafe] .welcome{opacity:1;animation:1s .3s both rise;transform:translateY(0)}.caption{opacity:0;-webkit-backdrop-filter:blur(8px);color:var(--rose-deep);white-space:nowrap;background:#ffffffb3;border-radius:999px;padding:8px 20px;font-size:17px;font-weight:500;position:absolute;top:4px;left:50%;transform:translate(-50%,-10px);box-shadow:0 6px 20px #c2255c1f}.bottom{flex-direction:column;align-items:center;gap:10px;animation:.9s .8s both rise;display:flex}.primary{pointer-events:auto;appearance:none;cursor:pointer;font:inherit;color:#fff;background:linear-gradient(135deg, var(--rose-light), var(--rose));border:0;border-radius:999px;min-width:min(86vw,340px);padding:18px 34px;font-size:clamp(18px,5vw,22px);font-weight:600;transition:transform .15s;animation:2.2s ease-in-out infinite pulse;box-shadow:0 12px 28px #ff5c8a73,inset 0 2px #ffffff73}.primary:active{transform:scale(.95)}.primary:disabled{pointer-events:none}.hint{color:var(--soft);margin:0;font-size:14px}.cafe-bottom{left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);opacity:0;position:absolute;transform:translate(-50%)}body[data-phase=cafe] .cafe-bottom{opacity:1}.bubble{opacity:0;visibility:hidden;pointer-events:none;z-index:5;width:max-content;max-width:min(88vw,340px);transition:opacity .25s,visibility 0s .25s;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.bubble.show{opacity:1;visibility:visible;transition-delay:0s}.bubble-inner{color:var(--rose-deep);text-align:center;background:#fff;border-radius:24px;padding:14px 20px;font-size:clamp(17px,4.6vw,21px);font-weight:600;line-height:1.3;position:relative;box-shadow:0 10px 30px #c2255c38,0 0 0 3px #ff8fb073}.bubble-inner:after{content:"";top:100%;left:clamp(26px, calc(50% + var(--tail,0px)), calc(100% - 26px));border:11px solid #0000;border-top-color:#fff;border-bottom:0;position:absolute;transform:translate(-50%)}.bubble[data-mood=sus] .bubble-inner{color:var(--ink);background:#fff7e6}.bubble.pop .bubble-inner{animation:.45s cubic-bezier(.2,1.4,.4,1) both bubblePop}.ask{left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--kb) + 16px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;z-index:6;background:#ffffffe6;border-radius:26px;width:min(92vw,460px);padding:16px 16px 12px;transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;position:absolute;transform:translate(-50%,24px);box-shadow:0 18px 50px #c2255c40}.ask.show{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;transform:translate(-50%)}.ask label{text-align:center;color:var(--rose-deep);margin:0 4px 10px;font-size:clamp(17px,4.6vw,19px);font-weight:600;display:block}.ask-row{gap:10px;display:flex}.ask input{min-width:0;font:inherit;color:var(--ink);appearance:none;-webkit-user-select:text;user-select:text;background:#fff;border:2px solid #ff8fb099;border-radius:16px;outline:none;flex:1;padding:14px 16px;font-size:18px}.ask input:focus{border-color:var(--rose);box-shadow:0 0 0 4px #ff5c8a2e}.ask button{min-height:52px;font:inherit;color:#fff;cursor:pointer;background:linear-gradient(135deg, var(--rose-light), var(--rose));border:0;border-radius:16px;flex:none;padding:0 20px;font-size:17px;font-weight:600;box-shadow:0 8px 18px #ff5c8a66}.ask button:disabled{opacity:.55}.ask-note{text-align:center;min-height:1.2em;color:var(--soft);margin:8px 4px 0;font-size:14px}.ask.shake{animation:.45s shake}.toast{left:50%;top:calc(env(safe-area-inset-top) + 70px);color:#fff;text-align:center;opacity:0;z-index:20;background:#3c1e28e0;border-radius:14px;max-width:90vw;padding:10px 16px;font-size:14px;transition:opacity .4s;position:absolute;transform:translate(-50%)}.toast.show{opacity:1}.ghost{appearance:none;font:inherit;color:var(--rose-deep);cursor:pointer;background:0 0;border:0;border-radius:999px;min-height:44px;padding:12px 18px;font-size:16px}.ghost:active{background:#ff5c8a1f}.letter-layer{pointer-events:none;z-index:10;position:absolute;inset:0}.letter-layer:before{content:"";-webkit-backdrop-filter:blur(5px);opacity:0;background:radial-gradient(70% 60%,#fff0f58c,#ffd6e4b3);transition:opacity .8s;position:absolute;inset:0}.letter-layer.show{pointer-events:auto}.letter-layer.show:before{opacity:1}.envelope{--ew:min(76vw, 330px);width:var(--ew);height:calc(var(--ew) * .68);opacity:0;filter:drop-shadow(0 16px 24px #c2255c47);transition:transform 1.2s cubic-bezier(.2,.9,.25,1.15),opacity .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,22vh)scale(.3)}.letter-layer.env-in .envelope{opacity:1;animation:3.2s ease-in-out 1.3s infinite floaty;transform:translate(-50%,-50%)scale(1)}.letter-layer.read .envelope{opacity:0;transition:transform .9s,opacity .7s;animation:none;transform:translate(-50%,30vh)scale(.7)}.env-back,.env-peek,.env-front,.env-flap{position:absolute;left:0;right:0}.env-back{z-index:0;background:#f2bccb;border-radius:14px;top:0;bottom:0}.env-peek{z-index:1;background:repeating-linear-gradient(#0000 0 15px,#d6567f2e 15px 16px),#fffaf1;border-radius:10px;height:84%;transition:transform 1s cubic-bezier(.3,.9,.3,1) .35s;top:6%;left:7%;right:7%;box-shadow:0 2px 8px #00000014}.letter-layer.open .env-peek{transform:translateY(-62%)}.env-front{z-index:2;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);background:linear-gradient(#f9d9e2,#f6c9d6);border-radius:14px;top:0;bottom:0}.env-flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;background:linear-gradient(#f0a9bd,#f4bccb);border-radius:14px 14px 0 0;height:56%;transition:transform .7s,z-index 0s .35s;top:0;transform:perspective(700px)rotateX(0)}.letter-layer.open .env-flap{z-index:0;transform:perspective(700px)rotateX(180deg)}.env-seal{aspect-ratio:1;z-index:4;color:#fff;background:radial-gradient(circle at 35% 30%,#ff7f9f,#d6335f);border-radius:50%;place-items:center;width:15%;font-size:clamp(16px,5vw,24px);transition:transform .35s,opacity .35s;display:grid;position:absolute;top:56%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 8px #780a2859}.letter-layer.open .env-seal{opacity:0;transform:translate(-50%,-50%)scale(0)}.card{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;text-align:center;-webkit-user-select:text;user-select:text;opacity:0;pointer-events:none;background:linear-gradient(#fffaf3,#fff2f4);border:2px solid #ffffffe6;border-radius:28px;width:min(92vw,520px);max-height:min(80dvh,680px);padding:26px 24px 14px;transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1);position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-46%)scale(.82);box-shadow:0 18px 50px #c2255c40}.letter-layer.read .card{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.card h2{color:var(--rose-deep);margin:0 0 12px;font-family:Caveat,cursive;font-size:38px;font-weight:700;line-height:1}.card-body p{overflow-wrap:anywhere;margin:0 0 12px;font-size:16px;line-height:1.55}.signature{color:#d6567f;margin:6px 0 8px;font-family:Caveat,cursive;font-size:26px}body:not([data-phase=celebrate]) .intro-block{opacity:0;transform:translateY(-14px)}body:not([data-phase=celebrate]) .bottom{opacity:0;pointer-events:none;animation:none;transform:translateY(24px)}body[data-phase=singing] .caption{opacity:1;transform:translate(-50%)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{box-shadow:0 12px 28px #ff5c8a73,inset 0 2px #ffffff73,0 0 #ff5c8a59}50%{box-shadow:0 12px 28px #ff5c8a73,inset 0 2px #ffffff73,0 0 0 14px #ff5c8a00}}@keyframes bubblePop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(-50%)}20%{transform:translate(calc(-50% - 8px))}40%{transform:translate(calc(8px - 50%))}60%{transform:translate(calc(-50% - 5px))}80%{transform:translate(calc(5px - 50%))}}@keyframes floaty{0%,to{translate:0}50%{translate:0 -8px}}@media (prefers-reduced-motion:reduce){.primary,.letter-layer.env-in .envelope{animation:none}}@media (height<=560px){.sub,.hint{display:none}.card{max-height:86vh}}