:root{--ink: #303155;--blue: #3e7fff;--pink: #ff75a9;--hot-pink: #ff4f96;--cream: #fff6dd;--paper: #fff9e9;--mint: #91e8cf;--sun: #ffd86f;--shadow: 0 18px 50px rgba(68, 45, 84, .2)}*{box-sizing:border-box}html,body,#root,#app{width:100%;height:100%;min-height:100dvh;margin:0;overflow-x:hidden}body{overflow:hidden;color:var(--ink);font-family:Trebuchet MS,Comic Sans MS,system-ui,sans-serif;background:#fff6f9}button{border:0;font:inherit;color:inherit;cursor:pointer}.screen{position:fixed;inset:0;min-height:100dvh;display:grid;place-items:center;opacity:0;pointer-events:none;transform:scale(1.015);transition:opacity .52s ease,transform .52s ease}.screen.is-active{opacity:1;pointer-events:auto;transform:scale(1)}.screen-home{overflow:hidden;background:#aeeefa}.home-frame{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#aeeefa}.full-video{width:100%;height:100%;min-height:100dvh;object-fit:cover;object-position:center center}.home-frame .full-video{position:absolute;inset:0;min-height:0;object-fit:fill}.full-video.contain{object-fit:contain;background:radial-gradient(circle at center,#fff4fa,#f2e8ff 55%,#d9f7ff)}.full-video.fill{object-fit:fill;background:#fff4fa}.home-copy{position:absolute;top:clamp(112px,18vh,190px);left:50%;display:grid;justify-items:center;gap:clamp(8px,1.2vw,16px);width:min(560px,54vw);transform:translate(-50%);text-align:center;color:#fff;text-shadow:2px 2px 0 #ffffff,-2px 2px 0 #ffffff,2px -2px 0 #ffffff,-2px -2px 0 #ffffff,0 6px 0 rgba(255,95,160,.58),0 14px 20px rgba(38,19,55,.38);animation:titleFloat 4.8s ease-in-out infinite}.home-copy h1,h2,h3{margin:0;line-height:.95;letter-spacing:0}.home-copy h1{display:inline-block;margin-top:2px;padding:0 18px 8px;border-radius:999px;font-family:Trebuchet MS,Comic Sans MS,system-ui,sans-serif;font-size:clamp(24px,2.5vw,42px);font-weight:1000;line-height:1.08;text-wrap:balance;transform:rotate(-1.2deg);color:#51317f;-webkit-text-stroke:1.5px rgba(255,255,255,.92);filter:drop-shadow(0 7px 0 rgba(255,128,182,.5));animation:memoryWiggle 3.2s ease-in-out infinite}.welcome-line,.name-line{margin:0;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-weight:1000;line-height:1.08}.welcome-line{color:#2f7aa7;font-size:clamp(24px,2.5vw,42px);transform:rotate(-2deg);-webkit-text-stroke:1.2px #ffffff}.name-line{color:#e83f91;font-size:clamp(52px,6vw,96px);line-height:1.02;transform:rotate(1.5deg);-webkit-text-stroke:2px #ffffff;text-shadow:3px 3px 0 #fff2a7,-2px 2px 0 #ffffff,2px -2px 0 #ffffff,-2px -2px 0 #ffffff,0 8px 0 #54c9d6,0 18px 22px rgba(38,19,55,.36);animation:nameBounce 3.6s ease-in-out infinite}.home-copy:before,.home-copy:after{position:absolute;content:"";width:clamp(24px,3vw,44px);height:clamp(24px,3vw,44px);background:radial-gradient(circle,#fff 0 27%,transparent 29%),radial-gradient(circle at 50% 50%,#ff70aa 0 58%,transparent 60%);filter:drop-shadow(0 5px 6px rgba(52,35,80,.18))}.home-copy:before{left:clamp(4px,3vw,40px);top:26%;transform:rotate(-18deg);animation:sparkleSpin 3.8s ease-in-out infinite}.home-copy:after{right:clamp(4px,3vw,40px);top:50%;transform:rotate(16deg);animation:sparkleSpin 4.3s ease-in-out infinite reverse}@keyframes titleFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-8px)}}@keyframes nameBounce{0%,to{transform:rotate(1.5deg) scale(1)}45%{transform:rotate(-1deg) scale(1.045)}70%{transform:rotate(1deg) scale(.99)}}@keyframes memoryWiggle{0%,to{transform:rotate(-1.2deg) translate(0)}50%{transform:rotate(1.6deg) translate(4px)}}@keyframes sparkleSpin{0%,to{transform:rotate(-18deg) scale(1)}50%{transform:rotate(12deg) scale(1.18)}}@keyframes startBounce{0%,to{transform:translate(-50%,-50%) rotate(0)}45%{transform:translate(-50%,calc(-50% - 7px)) rotate(-1.5deg)}70%{transform:translate(-50%,calc(-50% - 2px)) rotate(1deg)}}h2{font-size:clamp(46px,6vw,86px)}h3{font-size:40px}.kicker{margin:0 0 10px;font-size:clamp(18px,1.6vw,24px);font-weight:800;letter-spacing:0}.kicker.blue{color:var(--blue)}.kicker.pink{color:var(--hot-pink)}.primary-btn,.soft-btn,.icon-btn,.choice-btn,.logout-btn{border:2px solid rgba(255,255,255,.8);border-radius:999px;background:linear-gradient(135deg,#fff,#ffe3f0);box-shadow:var(--shadow);color:#412a5e;font-weight:900;transition:transform .18s ease,box-shadow .18s ease}.primary-btn:hover,.soft-btn:hover,.icon-btn:hover,.choice-btn:hover,.logout-btn:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 24px 60px #442d5442}.soft-btn{position:relative;min-width:116px;padding:14px 24px 14px 38px;border:3px solid white;background:linear-gradient(135deg,#fff7c3,#ffdeef 58%,#dffdf4);box-shadow:0 7px #ff75a985,0 16px 28px #371d5233;color:#4a235f;transform:rotate(-2deg)}.soft-btn:before{position:absolute;left:16px;top:50%;content:"";width:12px;height:12px;border-left:4px solid currentColor;border-bottom:4px solid currentColor;transform:translateY(-50%) rotate(45deg)}.soft-btn:after{position:absolute;right:-9px;top:-9px;content:"";width:26px;height:26px;border:3px solid white;border-radius:50%;background:#ff75a9;box-shadow:0 4px #371d521f}.soft-btn:hover{transform:translateY(-5px) rotate(2deg) scale(1.04)}.sound-permission{position:fixed;z-index:60;right:clamp(18px,4vw,44px);bottom:clamp(18px,4vw,44px);pointer-events:none}.sound-permission-btn{pointer-events:auto;padding:14px 22px;border:3px solid white;border-radius:999px;background:linear-gradient(135deg,#fff7c3,#ffdeef 58%,#dffdf4);box-shadow:0 7px #ff75a985,0 16px 28px #371d5233;color:#4a235f;font-weight:1000;animation:logoutWiggle 2.4s ease-in-out infinite}.envelope-card:hover{filter:drop-shadow(0 24px 28px rgba(65,42,94,.28))}.envelope-card.is-opening{z-index:7;animation:envelopeWiggle 2s ease-in-out forwards,envelopeZoom .76s ease-in 2s forwards;pointer-events:none}.start-btn{position:absolute;left:49%;top:75%;min-width:178px;padding:14px 42px;border:3px solid #ffffff;border-radius:999px;background:linear-gradient(135deg,#fff7fc,#ffdceb 58%,#fff3b8);box-shadow:0 6px #ff86ba,0 12px 20px #371d5238;color:#4a235f;transform:translate(-50%,-50%);font-size:clamp(19px,1.55vw,24px);text-shadow:1px 1px 0 rgba(255,255,255,.65);animation:startBounce 2.4s ease-in-out infinite}.start-btn:hover{transform:translate(-50%,calc(-50% - 6px)) scale(1.04);box-shadow:0 8px #f6a,0 18px 28px #371d5242}.paper-grid{position:absolute;inset:0;background-color:var(--paper);background-image:linear-gradient(rgba(71,103,157,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(71,103,157,.12) 1px,transparent 1px);background-size:24px 24px}.timeline-shell{position:relative;z-index:1;width:min(760px,78vw);min-height:480px;padding:48px 52px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center}.timeline-shell .kicker,.timeline-shell h2{display:none}.timeline-stage{display:grid;place-items:center;min-height:430px;margin:0}.timeline-window{position:relative;width:100%;height:260px;overflow:hidden;border:2px solid var(--blue);border-radius:0;background:linear-gradient(rgba(71,103,157,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(71,103,157,.08) 1px,transparent 1px),#fffcee57;background-size:22px 22px}.timeline-track{position:absolute;top:50%;left:0;display:flex;align-items:center;width:max-content;height:8px;border-radius:999px;background:transparent;transition:transform .76s cubic-bezier(.22,1,.36,1)}.year-node{position:relative;flex:0 0 50%;height:112px;padding:0;background:transparent;transform:translateY(-50%)}.year-arrow{position:absolute;left:50%;top:50%;width:calc(100% - 40px);height:3px;border-radius:999px;background:var(--blue);transform:translateY(-50%);pointer-events:none}.year-arrow:after{position:absolute;right:-4px;top:50%;content:"";width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid var(--blue);transform:translateY(-50%)}.dot-core{position:absolute;left:50%;top:50%;width:34px;height:34px;border:4px solid var(--blue);border-radius:4px;background:#fff9e9;box-shadow:none;transform:translate(-50%,-50%);transition:transform .22s ease,background .22s ease}.dot-core:after{position:absolute;inset:7px;content:"";border-radius:50%;background:var(--blue)}.year-node:hover .dot-core,.year-node.is-active .dot-core{background:#fff3b8;transform:translate(-50%,-50%) scale(1.12)}.click-word,.year-label{position:absolute;left:50%;display:block;padding:7px 14px;border-radius:999px;background:transparent;box-shadow:none;font-weight:900;transform:translate(-50%)}.click-word{top:-40px;color:var(--hot-pink);font-size:18px}.year-label{bottom:-40px;color:var(--blue);font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:24px;transform:translate(-50%) rotate(-4deg)}.timeline-controls,.wish-carousel{display:flex;align-items:center;justify-content:center;gap:28px}.timeline-controls{margin-top:-22px}.year-picker-card{display:grid;justify-items:center;justify-content:center;gap:30px;width:min(620px,88%);padding:0;border:0;border-radius:0;background:transparent}.year-picker-label{color:var(--blue);font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(36px,4.5vw,58px);font-weight:1000;text-shadow:2px 2px 0 white,0 6px 0 rgba(255,117,169,.24)}.year-wheel{position:relative;width:min(460px,100%);height:300px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-snap-type:y mandatory;padding:102px 0;border:0;border-radius:0;background:transparent;box-shadow:none;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}.year-wheel::-webkit-scrollbar{display:none}.year-wheel:before,.year-wheel:after{position:sticky;z-index:2;display:block;content:"";width:100%;height:4px;background:linear-gradient(90deg,transparent,rgba(255,79,150,.65),transparent);pointer-events:none}.year-wheel:before{top:104px}.year-wheel:after{bottom:104px}.year-wheel-item{display:block;width:100%;max-width:100%;height:78px;padding:0;scroll-snap-align:center;background:transparent;color:#30315547;font:inherit;font-size:clamp(44px,5vw,72px);font-weight:900;text-align:center;transform:scale(.84);transition:color .16s ease,opacity .16s ease,transform .16s ease}.year-wheel-item.is-near{color:#3031559e;transform:scale(.94)}.year-wheel-item.is-selected{color:var(--hot-pink);transform:scale(1.25);text-shadow:1px 1px 0 white,0 5px 0 rgba(62,127,255,.22)}.memory-btn{position:relative;justify-self:center;display:block;min-width:178px;margin-inline:auto;padding:16px 34px;border:3px solid white;border-radius:999px;background:linear-gradient(135deg,#ffdeef,#fff7c3);box-shadow:0 7px #ff86ba,0 14px 26px #371d5233;color:#4a235f;animation:memoryButtonBounce 2.4s ease-in-out infinite}.memory-btn:hover{transform:translateY(-4px) scale(1.03)}.logout-btn{justify-self:center;min-width:146px;margin-top:-12px;padding:12px 26px;border:3px solid white;background:linear-gradient(135deg,#dffdf4,#fff7fc 55%,#fff3b8);box-shadow:0 6px #54c9d68c,0 14px 24px #371d5229;color:#2f5f74;font-size:18px;animation:logoutWiggle 3.1s ease-in-out infinite}.logout-btn:hover{transform:translateY(-5px) rotate(2deg) scale(1.03)}@keyframes memoryButtonBounce{0%,to{transform:translateY(0) rotate(0)}45%{transform:translateY(-7px) rotate(-1.5deg)}70%{transform:translateY(-2px) rotate(1deg)}}@keyframes logoutWiggle{0%,to{transform:rotate(0)}42%{transform:rotate(2deg) translateY(-3px)}70%{transform:rotate(-1deg) translateY(0)}}.year-decor{position:absolute;z-index:0;pointer-events:none}.year-rainbow{top:11vh;right:13vw;width:220px;height:112px;border-radius:220px 220px 0 0;background:radial-gradient(ellipse at 50% 100%,transparent 0 34%,#fff9e9 35% 40%,transparent 41%),conic-gradient(from 270deg at 50% 100%,#ff5b8a 0 12%,#ffcf48 12% 24%,#64dc68 24% 36%,#3fc9ff 36% 48%,#9b70ff 48% 60%,transparent 60%);filter:drop-shadow(0 12px 0 rgba(62,127,255,.12));animation:decorFloat 5s ease-in-out infinite}.flower-one,.flower-two,.flower-three{width:86px;height:86px;background:radial-gradient(circle,#ffd84d 0 16%,transparent 17%),radial-gradient(circle at 50% 12%,#ff7eb6 0 20%,transparent 21%),radial-gradient(circle at 88% 50%,#ff7eb6 0 20%,transparent 21%),radial-gradient(circle at 50% 88%,#ff7eb6 0 20%,transparent 21%),radial-gradient(circle at 12% 50%,#ff7eb6 0 20%,transparent 21%);filter:drop-shadow(0 8px 0 rgba(62,127,255,.14));animation:flowerBob 4.2s ease-in-out infinite}.flower-one{left:16vw;top:20vh}.flower-two{right:18vw;bottom:16vh;width:72px;height:72px;animation-delay:-1.4s}.flower-three{left:24vw;bottom:14vh;width:64px;height:64px;animation-delay:-2.1s}.sparkle-one,.sparkle-two{width:48px;height:48px;background:#ffcf48;clip-path:polygon(50% 0,62% 34%,100% 50%,62% 66%,50% 100%,38% 66%,0 50%,38% 34%);filter:drop-shadow(0 6px 0 rgba(255,117,169,.2));animation:sparklePulse 2.8s ease-in-out infinite}.sparkle-one{left:18vw;bottom:31vh}.sparkle-two{right:28vw;top:26vh;width:36px;height:36px;background:#ff7eb6;animation-delay:-1s}@keyframes decorFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(2deg)}}@keyframes flowerBob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(8deg)}}@keyframes sparklePulse{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.22) rotate(18deg)}}.icon-btn{min-width:110px;padding:13px 22px}.year-readout{display:grid;min-width:180px;padding:14px 24px;border:2px dashed var(--pink);border-radius:8px;background:#fff;font-weight:900}.year-readout span{font-size:34px}.year-readout small{color:#8d7a91}.choice-modal,.no-memory-modal{position:absolute;z-index:20;inset:0;display:grid;place-items:center;visibility:hidden;background:#ffecf8ad;opacity:0;transition:opacity .22s ease,visibility .22s ease}.quiz-modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;visibility:hidden;background:#ffecf8b3;opacity:0;transition:opacity .22s ease,visibility .22s ease}.quiz-modal.is-open{visibility:visible;opacity:1}.quiz-card{position:relative;width:min(560px,82vw);padding:38px;border:3px solid var(--hot-pink);border-radius:8px;background:#fffefa;box-shadow:var(--shadow);text-align:center}.quiz-card h3{color:var(--ink);line-height:1.05}.quiz-options{display:grid;gap:14px;margin-top:26px}.quiz-option{padding:16px 18px;border:2px solid white;border-radius:999px;background:linear-gradient(135deg,#fff,#ffe0ef);box-shadow:0 7px #ff75a93d;color:#4a235f;font-weight:900;transition:transform .16s ease,box-shadow .16s ease}.quiz-option:hover{transform:translateY(-3px);box-shadow:0 10px #ff75a947}.wrong-card h3{color:var(--hot-pink);font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;text-shadow:2px 2px 0 white,0 6px 0 rgba(62,127,255,.18)}.wrong-card p{margin:14px 0 20px;color:#8d7a91;font-size:16px;font-weight:900}.choice-modal.is-open,.no-memory-modal.is-open{visibility:visible;opacity:1}.screen-timeline:has(.choice-modal.is-open) .timeline-shell,.screen-timeline:has(.choice-modal.is-open) .year-decor,.screen-timeline:has(.no-memory-modal.is-open) .timeline-shell,.screen-timeline:has(.no-memory-modal.is-open) .year-decor,.screen-timeline.has-modal .timeline-shell,.screen-timeline.has-modal .year-decor{opacity:0}.modal-card,.no-memory-card{position:relative;width:min(480px,76vw);padding:38px;border:3px solid var(--hot-pink);border-radius:8px;background:#fffefa;box-shadow:var(--shadow);text-align:center}.no-memory-card h3{color:var(--hot-pink);font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;line-height:1;text-shadow:2px 2px 0 white,0 6px 0 rgba(62,127,255,.18)}.no-memory-card p{margin:14px 0 0;color:var(--blue);font-size:26px;font-weight:900}.close-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#ffe3f0;font-weight:900}.choice-btn{display:block;width:100%;margin-top:18px;padding:17px 20px;font-size:20px}.choice-btn.muted{cursor:not-allowed;opacity:.55}.choice-btn span{margin-left:8px;color:var(--hot-pink)}.screen-mail{overflow:hidden}.board-deco{position:absolute;z-index:1;pointer-events:none}.memo-one,.memo-two{display:grid;place-items:center;width:118px;height:92px;border:2px solid rgba(255,255,255,.82);border-radius:8px;background:#fff7c3;box-shadow:0 10px 18px #492b4929;color:#4a235f;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:26px;font-weight:1000}.memo-one{left:8vw;top:24vh;transform:rotate(-8deg)}.memo-two{right:8vw;top:56vh;width:104px;height:82px;background:#dffdf4;transform:rotate(9deg)}.tape-one,.tape-two{width:92px;height:28px;border-radius:4px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 8px,transparent 8px 16px),#ff7eb6b8;box-shadow:0 5px 10px #492b491f}.tape-one{left:12vw;top:21vh;transform:rotate(13deg)}.tape-two{right:9vw;top:53vh;background:repeating-linear-gradient(45deg,rgba(255,255,255,.45) 0 8px,transparent 8px 16px),#54c9d6b8;transform:rotate(-12deg)}.heart-one,.heart-two{width:54px;height:54px;background:#ff5f9d;transform:rotate(-45deg);filter:drop-shadow(0 7px 0 rgba(62,127,255,.14));animation:sparklePulse 3.3s ease-in-out infinite}.heart-one:before,.heart-one:after,.heart-two:before,.heart-two:after{position:absolute;content:"";width:100%;height:100%;border-radius:50%;background:inherit}.heart-one:before,.heart-two:before{top:-50%;left:0}.heart-one:after,.heart-two:after{top:0;right:-50%}.heart-one{left:18vw;bottom:12vh}.heart-two{right:24vw;top:22vh;width:42px;height:42px;background:#ffcf48;animation-delay:-1s}.board-sparkle{right:15vw;bottom:20vh;width:52px;height:52px;background:#ff7eb6;clip-path:polygon(50% 0,62% 34%,100% 50%,62% 66%,50% 100%,38% 66%,0 50%,38% 34%);animation:sparklePulse 2.8s ease-in-out infinite}.mail-bg,.wishes-bg,.quotes-bg{position:absolute;inset:0;background:url(/bg_birthday_wish_mail.png) center / cover no-repeat}.quotes-bg{background-image:url(/quotes_bg.png);filter:saturate(1.04) brightness(1.02)}.mail-flash{position:absolute;z-index:8;inset:0;background:#fff;opacity:0;pointer-events:none}.screen-mail.is-flashing .mail-flash{animation:mailFlash .52s ease-out forwards}.mail-header,.wishes-topbar,.quotes-topbar{position:absolute;z-index:2;top:42px;left:50%;display:flex;align-items:center;gap:26px;width:min(1040px,86vw);transform:translate(-50%)}.mail-header{align-items:flex-start}.mail-header .kicker,.quotes-topbar .kicker{color:#2f7aa7;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(26px,2.6vw,40px);font-weight:1000;line-height:1;text-shadow:2px 2px 0 white,0 6px 0 rgba(255,117,169,.24);transform:rotate(-2deg)}.mail-header h2,.quotes-topbar h2{color:#e83f91;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(48px,5.7vw,92px);line-height:.88;text-shadow:3px 3px 0 #fff2a7,-2px 2px 0 #ffffff,2px -2px 0 #ffffff,-2px -2px 0 #ffffff,0 8px 0 #54c9d6,0 18px 22px rgba(38,19,55,.24);transform:rotate(1.4deg);animation:nameBounce 3.8s ease-in-out infinite}.wishes-topbar h2{color:#e83f91;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(44px,5.3vw,82px);line-height:.9;text-shadow:3px 3px 0 #fff2a7,-2px 2px 0 #ffffff,2px -2px 0 #ffffff,-2px -2px 0 #ffffff,0 8px 0 #54c9d6,0 18px 22px rgba(38,19,55,.24);transform:rotate(1.4deg)}.wishes-topbar .kicker{color:#2f7aa7;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(25px,2.5vw,38px);font-weight:1000;line-height:1;text-shadow:2px 2px 0 white,0 6px 0 rgba(255,117,169,.24);transform:rotate(-2deg)}.screen-quotes{overflow:hidden;background:#d7b481}.quotes-topbar{align-items:flex-start}.quotes-table{position:relative;z-index:1;width:min(1180px,92vw);height:min(720px,78vh);margin-top:clamp(70px,10vh,118px)}.quote-card{position:absolute;left:var(--quote-x);top:var(--quote-y);display:grid;place-items:center;width:clamp(150px,15vw,218px);min-height:clamp(104px,11vw,146px);padding:24px 18px 18px;border:3px solid rgba(255,255,255,.92);border-radius:8px;background:linear-gradient(135deg,#fffffff5,#fff1c7fa),repeating-linear-gradient(0deg,transparent 0 21px,rgba(62,127,255,.1) 22px 23px);box-shadow:0 8px #7a4c2442,0 18px 30px #4c2a1538;color:#4c2a27;transform:rotate(var(--quote-tilt)) translateZ(0);transform-origin:50% 18%;transition:transform .18s ease,box-shadow .18s ease;animation:quoteCardDrop .7s cubic-bezier(.22,1,.36,1) both}.quote-card:nth-child(2){animation-delay:80ms}.quote-card:nth-child(3){animation-delay:.15s}.quote-card:nth-child(4){animation-delay:.22s}.quote-card:nth-child(5){animation-delay:.29s}.quote-card:nth-child(6){animation-delay:.36s}.quote-card:nth-child(7){animation-delay:.43s}.quote-card:hover{box-shadow:0 11px #7a4c2447,0 26px 42px #4c2a1547;transform:rotate(calc(var(--quote-tilt) + 2deg)) translateY(-8px) scale(1.04)}.quote-card strong{position:relative;z-index:1;font-size:clamp(17px,1.45vw,23px);line-height:1.05;text-align:center;text-wrap:balance}.quote-card-pin{position:absolute;top:10px;left:50%;width:24px;height:24px;border:3px solid white;border-radius:50%;background:linear-gradient(135deg,#ff75a9,#ffd86f);box-shadow:0 4px #4c2a1529;transform:translate(-50%)}.quote-video-modal{position:absolute;z-index:24;inset:0;display:grid;place-items:center;visibility:hidden;background:#4d271461;opacity:0;transition:opacity .22s ease,visibility .22s ease}.quote-video-modal.is-open{visibility:visible;opacity:1}.quote-video-card{position:relative;display:grid;justify-items:center;gap:12px;width:min(760px,86vw);padding:28px;border:4px solid white;border-radius:8px;background:linear-gradient(135deg,#fffefa,#ffe3f0 58%,#e3fff8);box-shadow:0 10px #ff75a957,0 30px 80px #2d142757;text-align:center;animation:quotePopupIn .3s cubic-bezier(.22,1,.36,1) both}.quote-video-card:before,.quote-video-card:after{position:absolute;content:"";width:48px;height:48px;background:#ffd86f;clip-path:polygon(50% 0,62% 34%,100% 50%,62% 66%,50% 100%,38% 66%,0 50%,38% 34%)}.quote-video-card:before{left:-22px;top:22px;transform:rotate(-12deg)}.quote-video-card:after{right:-18px;bottom:78px;width:38px;height:38px;background:#91e8cf;transform:rotate(18deg)}.quote-close{z-index:2}.quote-from{margin:0;color:#2f7aa7;font-size:clamp(18px,1.7vw,24px);font-weight:1000}.quote-video-card h3{max-width:90%;color:#e83f91;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(28px,3.3vw,46px);line-height:1;text-shadow:2px 2px 0 white,0 5px 0 rgba(84,201,214,.22)}.quote-video-player{width:100%;max-height:min(430px,52vh);aspect-ratio:16 / 9;border:4px solid white;border-radius:8px;background:radial-gradient(circle at 50% 42%,rgba(255,117,169,.28),transparent 24%),#211527;box-shadow:inset 0 0 0 2px #ff75a92e;object-fit:contain}@keyframes quoteCardDrop{0%{opacity:0;transform:translateY(-80px) rotate(calc(var(--quote-tilt) - 12deg)) scale(.78)}72%{opacity:1;transform:translateY(8px) rotate(calc(var(--quote-tilt) + 3deg)) scale(1.03)}to{opacity:1;transform:translateY(0) rotate(var(--quote-tilt)) scale(1)}}@keyframes quotePopupIn{0%{opacity:0;transform:translateY(20px) scale(.92) rotate(-1deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}.envelope-board{position:relative;z-index:1;width:min(1120px,88vw);height:min(680px,72vh);margin-top:120px}.envelope-card{position:absolute;width:340px;min-height:250px;padding:0;border:0;border-radius:0;background:transparent;filter:drop-shadow(0 18px 22px rgba(65,42,94,.22));transition:transform .18s ease,filter .18s ease}.screen-mail.is-active .envelope-card:not(.is-opening){animation:envelopeEntry .9s cubic-bezier(.22,1,.36,1) both}.screen-mail.is-active .matriks:not(.is-opening){animation-delay:.14s}.screen-mail.is-active .upsi:not(.is-opening){animation-delay:.28s}.screen-mail.is-active .ipg:not(.is-opening){animation-delay:.42s}.envelope-card img{display:block;width:100%;height:205px;border-radius:0;object-fit:cover;object-position:center 45%;clip-path:inset(5% 8% 13% 8%)}.envelope-card strong{display:inline-block;margin-top:-18px;padding:8px 18px;border:2px solid white;border-radius:999px;background:#fff7fceb;box-shadow:0 8px #ff75a92e;color:#4a235f;font-size:26px}.phase-logo{position:absolute;z-index:2;top:-20px;left:50%;display:grid;place-items:center;width:54px;height:54px;border:4px solid white;border-radius:50%;background:var(--hot-pink);color:#fff;box-shadow:0 10px 22px #50214638;font-size:26px;font-weight:900;transform:translate(-50%);overflow:hidden}.phase-logo img{width:100%;height:100%;object-fit:contain;padding:7px;border-radius:50%;background:#fff}.childhood{top:10%;left:2%;--tilt: -8deg;transform:rotate(-8deg)}.matriks{top:4%;right:3%;--tilt: 7deg;transform:rotate(7deg)}.upsi{bottom:6%;left:20%;--tilt: 5deg;transform:rotate(5deg)}.ipg{right:14%;bottom:12%;--tilt: -6deg;transform:rotate(-6deg)}@keyframes envelopeWiggle{0%,to{transform:rotate(var(--tilt, 0deg)) scale(1)}12%{transform:rotate(calc(var(--tilt, 0deg) - 5deg)) scale(1.03)}24%{transform:rotate(calc(var(--tilt, 0deg) + 5deg)) scale(1.03)}36%{transform:rotate(calc(var(--tilt, 0deg) - 4deg)) scale(1.04)}48%{transform:rotate(calc(var(--tilt, 0deg) + 4deg)) scale(1.04)}65%{transform:rotate(calc(var(--tilt, 0deg) - 2deg)) scale(1.02)}82%{transform:rotate(calc(var(--tilt, 0deg) + 2deg)) scale(1.02)}}@keyframes envelopeEntry{0%{opacity:0;transform:translateY(-120px) rotate(calc(var(--tilt, 0deg) - 12deg)) scale(.72);filter:drop-shadow(0 2px 0 rgba(65,42,94,0))}58%{opacity:1;transform:translateY(10px) rotate(calc(var(--tilt, 0deg) + 4deg)) scale(1.08)}76%{transform:translateY(-6px) rotate(calc(var(--tilt, 0deg) - 2deg)) scale(.98)}to{opacity:1;transform:translateY(0) rotate(var(--tilt, 0deg)) scale(1);filter:drop-shadow(0 18px 22px rgba(65,42,94,.22))}}@keyframes envelopeZoom{0%{transform:rotate(var(--tilt, 0deg)) scale(1);filter:drop-shadow(0 18px 22px rgba(65,42,94,.22))}to{transform:rotate(0) scale(3.2);filter:drop-shadow(0 34px 45px rgba(65,42,94,.34))}}@keyframes mailFlash{0%{opacity:0}24%{opacity:.95}to{opacity:0}}.screen-wishes{background:radial-gradient(circle at 18% 18%,rgba(255,216,111,.42),transparent 30%),radial-gradient(circle at 82% 22%,rgba(145,232,207,.45),transparent 28%),#fff6fb}.wishes-bg{filter:saturate(1.15) brightness(1.08);opacity:.55}.wishes-layout{position:relative;z-index:1;display:grid;align-content:center;gap:28px;width:min(1040px,86vw);min-height:100vh;padding-top:110px}.sender-line{margin:0 auto -12px;color:#4a235f;font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;font-size:clamp(22px,2.2vw,34px);font-weight:1000;text-align:center;text-shadow:2px 2px 0 white,0 6px 0 rgba(255,117,169,.2)}.carousel-stage{position:relative;width:min(880px,78vw);height:min(380px,42vh);margin:8px auto 0}.wish-slide{position:absolute;top:50%;left:50%;display:grid;place-items:center;gap:14px;width:min(620px,58vw);aspect-ratio:16 / 9;border:3px solid rgba(255,255,255,.86);border-radius:28px;background:linear-gradient(45deg,rgba(255,117,169,.15) 25%,transparent 25% 50%,rgba(62,127,255,.14) 50% 75%,transparent 75%),linear-gradient(135deg,#fff7fc,#e3fff8);background-size:34px 34px,auto;box-shadow:0 24px 54px #371d523d;color:#4a235f;overflow:hidden;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .32s ease,filter .32s ease}.wish-slide[data-pos="-2"]{opacity:.32;filter:saturate(.75);transform:translate(-105%,-50%) scale(.62)}.wish-slide[data-pos="-1"]{opacity:.78;filter:saturate(.9);transform:translate(-78%,-50%) scale(.8)}.wish-slide[data-pos="0"]{z-index:4;opacity:1;transform:translate(-50%,-50%) scale(1)}.wish-slide[data-pos="1"]{opacity:.78;filter:saturate(.9);transform:translate(-22%,-50%) scale(.8)}.wish-slide[data-pos="2"]{opacity:.32;filter:saturate(.75);transform:translate(5%,-50%) scale(.62)}.wish-slide.is-exit-left{opacity:0;transform:translate(-135%,-50%) scale(.5)}.wish-slide.is-exit-right{opacity:0;transform:translate(35%,-50%) scale(.5)}.wish-video{position:absolute;inset:0;display:none;width:100%;height:100%;background:#181421;object-fit:contain}.wish-slide.has-video{background:#181421}.wish-slide.has-video .wish-video{display:block}.wish-slide.has-video .play-mark,.wish-slide.has-video p{display:none}.play-mark{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:var(--hot-pink);color:#fff;font-weight:900}.video-placeholder p{margin:0;text-align:center;font-size:24px;font-weight:900}.wish-slide p{max-width:72%;margin:0;text-align:center;font-size:clamp(22px,2.4vw,34px);font-weight:900}.player-controls{display:flex;justify-content:center;align-items:center;gap:14px}.player-btn{display:grid;place-items:center;width:54px;height:54px;border:2px solid white;border-radius:50%;background:linear-gradient(135deg,#fff,#ffe0ef);box-shadow:0 7px #ff75a947;color:#4a235f;font-weight:1000;transition:transform .16s ease,box-shadow .16s ease}.player-btn:hover{transform:translateY(-3px);box-shadow:0 10px #ff75a94d}.wish-nav-btn{color:#e83f91;font-size:30px;line-height:1}.play-toggle{width:64px;height:64px;background:linear-gradient(135deg,#ff75a9,#ffd86f)}.play-icon{width:0;height:0;margin-left:4px;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:19px solid white}.play-toggle.is-playing .play-icon{width:20px;height:26px;margin-left:0;border:0;background:linear-gradient(90deg,white 0 35%,transparent 35% 65%,white 65% 100%)}.carousel-arrow{width:40px;height:40px;border-radius:50%;background:transparent;color:#8f8f98;font-size:34px;font-weight:900}.carousel-dots{display:flex;align-items:center;gap:10px}.carousel-dot{width:12px;height:12px;border-radius:50%;background:#d4d4d8}.carousel-dot.is-active{width:16px;height:16px;background:#7c65ff}@media(max-width:900px){.timeline-shell,.wishes-layout,.mail-header,.wishes-topbar,.quotes-topbar{width:90vw}.timeline-shell{padding:42px}.envelope-card{width:210px}.quotes-table{height:min(720px,76vh);margin-top:120px}.quote-card{width:clamp(118px,29vw,168px);min-height:98px;padding:22px 12px 14px}.quote-card strong{font-size:clamp(14px,3.5vw,18px)}.quote-video-card{padding:24px 18px 18px}}@media(max-width:700px){body{overflow:hidden}.screen{min-height:100dvh;overflow:hidden}.home-frame .full-video,.full-video{object-fit:cover}.home-copy{top:clamp(78px,14dvh,118px);gap:clamp(10px,2.3dvh,18px);width:min(88vw,420px)}.welcome-line{font-size:clamp(22px,7vw,34px)}.name-line{font-size:clamp(44px,14vw,70px)}.home-copy h1{font-size:clamp(22px,7vw,34px)}.start-btn{left:50%;top:79%;min-width:150px;padding:12px 30px}.timeline-shell{width:94vw;min-height:auto;padding:24px 12px;overflow-x:hidden}.timeline-stage{min-height:min(500px,74dvh)}.year-picker-card{width:100%;gap:20px;overflow-x:hidden}.year-picker-label{margin:0;font-size:clamp(38px,13vw,58px)}.year-wheel{width:min(360px,88vw);height:min(290px,40dvh);max-width:88vw;overflow-x:hidden;padding:100px 0;touch-action:pan-y}.year-wheel-item{height:74px;font-size:clamp(40px,14vw,60px)}.year-rainbow{top:18dvh;right:8vw;width:clamp(112px,34vw,158px);height:clamp(58px,17vw,82px);border-radius:158px 158px 0 0;opacity:.72}.flower-one,.flower-two,.flower-three{width:48px;height:48px;opacity:.72}.flower-one{left:10vw;top:30dvh}.flower-two{right:7vw;bottom:21dvh;width:44px;height:44px}.flower-three{left:11vw;bottom:18dvh;width:40px;height:40px}.sparkle-one,.sparkle-two{width:30px;height:30px;opacity:.78}.sparkle-one{left:15vw;bottom:34dvh}.sparkle-two{right:13vw;top:35dvh;width:24px;height:24px}.memory-btn{padding:14px 28px}.mail-bg,.wishes-bg{background-image:url(/bg_birthday_wish_mobile.png)}.quotes-bg{background-image:url(/quotes_bg_mobile.png)}.mail-header,.wishes-topbar,.quotes-topbar{top:18px;width:92vw;gap:14px}.mail-header h2,.quotes-topbar h2,.wishes-topbar h2{font-size:clamp(30px,10vw,44px);line-height:.95}.mail-header .kicker,.quotes-topbar .kicker,.wishes-topbar .kicker{margin-bottom:4px;font-size:clamp(17px,5vw,24px)}.soft-btn{min-width:88px;padding:11px 16px 11px 30px;font-size:15px}.soft-btn:before{left:12px;width:10px;height:10px;border-width:3px}.soft-btn:after{width:20px;height:20px}.board-deco{display:none}.envelope-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:18px 10px;width:min(92vw,430px);height:auto;max-height:72dvh;margin-top:102px}.envelope-card,.childhood,.matriks,.upsi,.ipg{position:relative;inset:auto;width:100%;min-height:144px;transform:rotate(var(--tilt, 0deg))}.childhood{--tilt: -5deg}.matriks{--tilt: 4deg}.upsi{--tilt: 3deg}.ipg{--tilt: -4deg}.envelope-card img{height:auto;max-height:118px;object-fit:contain;clip-path:none}.envelope-card strong{margin-top:-10px;padding:6px 12px;font-size:clamp(16px,4.7vw,21px)}.phase-logo{top:-12px;width:40px;height:40px;border-width:3px}.screen-wishes{overflow:hidden}.wishes-bg{opacity:.68}.wishes-layout{align-content:start;gap:12px;width:94vw;min-height:100dvh;padding-top:100px;padding-bottom:14px}.sender-line{max-width:92vw;margin:0 auto;font-size:clamp(18px,5.4vw,25px)}.carousel-stage{width:94vw;height:clamp(220px,42dvh,360px);margin-top:0;overflow:hidden}.wish-slide{width:min(88vw,390px);border-radius:18px}.wish-slide[data-pos="-2"],.wish-slide[data-pos="2"]{opacity:0;pointer-events:none}.wish-slide[data-pos="-1"]{opacity:.34;transform:translate(-86%,-50%) scale(.74)}.wish-slide[data-pos="1"]{opacity:.34;transform:translate(-14%,-50%) scale(.74)}.wish-slide p{max-width:82%;font-size:clamp(18px,5.6vw,26px)}.play-mark{width:68px;height:68px}.player-controls{gap:16px}.player-btn{width:50px;height:50px}.play-toggle{width:62px;height:62px}.wish-carousel{gap:0}.carousel-dots{max-width:82vw;flex-wrap:wrap;justify-content:center}.quotes-topbar{align-items:flex-start}.quotes-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:12px;width:min(92vw,430px);height:auto;max-height:76dvh;margin-top:102px}.quote-card{position:relative;left:auto;top:auto;width:100%;min-height:104px;padding:22px 10px 12px}.quote-card strong{font-size:clamp(13px,3.9vw,17px)}.quote-card:hover{transform:rotate(calc(var(--quote-tilt) + 1deg)) translateY(-4px) scale(1.02)}.quote-video-card{width:90vw;max-height:84dvh;padding:22px 14px 16px}.quote-video-card h3{font-size:clamp(24px,7vw,34px)}.quote-video-player{max-height:48dvh}.modal-card,.no-memory-card,.quiz-card{width:min(88vw,440px);padding:32px 22px 24px}.modal-card h3,.no-memory-card h3,.quiz-card h3{font-size:clamp(28px,8vw,38px)}}@media(max-height:760px){.home-copy{top:clamp(78px,14vh,112px);width:min(500px,54vw)}.home-copy h1{font-size:clamp(22px,2.35vw,36px)}.name-line{font-size:clamp(46px,5.2vw,76px)}.start-btn{top:66.5%;padding:12px 32px}}@media(max-width:700px)and (max-height:760px){.home-copy{top:clamp(54px,9dvh,86px);gap:9px}.start-btn{top:78%}}