@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#070b13;--ink:#f1f1f4;--accent:#b9ddf8;--sans:'Manrope',sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg)}body{font-family:var(--sans);color:var(--ink);overflow:hidden}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #d2edff;outline-offset:6px}button:disabled{opacity:0;pointer-events:none}figure,h1,h2,p{margin:0}img{display:block;width:100%;height:100%;object-fit:cover}button svg{width:24px;height:24px;fill:currentColor}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#universe{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.nebula{position:fixed;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 52% 60%,#18254c45,transparent 42%),radial-gradient(ellipse at 82% 15%,#4e1c4530,transparent 40%);animation:nebula-breathe 18s ease-in-out infinite;transition:filter 1.5s}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 35%,#03070c60);z-index:1}body[data-world=ferrari] .nebula{filter:hue-rotate(115deg)}body[data-world=dota] .nebula{filter:hue-rotate(140deg)}body[data-world=light] .nebula{filter:hue-rotate(295deg)}
.story-progress{position:fixed;z-index:15;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;width:min(410px,60vw);gap:6px}.story-progress button{padding:12px 0;background:transparent;flex:1;position:relative;min-width:0}.story-progress button:after{content:'';height:2px;background:#ffffff16;position:absolute;inset:12px 0 auto;border-radius:3px;transition:background .5s,box-shadow .5s}.story-progress button.visited:after{background:#b9ddf859}.story-progress button[aria-current=true]:after{background:#d3ecff;box-shadow:0 0 11px #b9ddf877}
#story{position:relative;height:100svh;width:100%;z-index:2;perspective:1300px;touch-action:pan-x}.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:clamp(72px,9svh,110px) 7vw calc(112px + var(--safe-bottom));gap:clamp(20px,4svh,42px);visibility:hidden;opacity:0;pointer-events:none;transform:translate3d(0,70px,-130px) rotateX(-6deg);transition:opacity .55s ease,transform .9s cubic-bezier(.22,.78,.18,1),visibility .9s;overflow:hidden}.scene.active{visibility:visible;opacity:1;transform:translate3d(0,0,0) rotateX(0);pointer-events:auto;z-index:2}.scene.departing{transform:translate3d(0,-65px,-180px) rotateX(7deg);opacity:0}.scene h1,.scene h2{font:500 clamp(42px,4.4vw,74px)/1.04 var(--serif);letter-spacing:-1.5px;text-align:center;max-width:960px;text-wrap:balance;position:relative;z-index:4;flex-shrink:0;text-shadow:0 3px 30px #05080cbb}.scene h1{font-size:clamp(58px,6.4vw,106px);max-width:1000px}.scene em{font-weight:500;color:var(--accent)}.scene h1 em{display:block}.scene.active h1,.scene.active h2{animation:phrase-in .95s both}.scene:not(.active) *{animation-play-state:paused!important}
.birthday h1{margin-top:1svh}.birthday-orbit{position:absolute;left:50%;top:54%;width:min(450px,72vw);height:min(400px,40svh);transform:translate(-50%,-35%);background:none;border-radius:50%;isolation:isolate}.birthday-orbit:before,.birthday-orbit:after{content:'';position:absolute;inset:5% -17%;border:1px solid #c7e2ff24;border-radius:50%;transform:rotate(-18deg) scaleY(.6);box-shadow:0 0 30px #b9ddf806}.birthday-orbit:after{inset:10% -10%;transform:rotate(19deg) scaleY(.68);border-color:#c7e2ff13}.date-moon{position:absolute;right:-3%;top:4%;width:93px;height:93px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,#ebf7ff,#a4bfd7 65%,#536c91);box-shadow:0 0 45px #a4ccff22,inset -9px -8px 18px #182f4766;color:#17263c;animation:moon-float 7s ease-in-out infinite;z-index:2}.date-moon b{font:500 43px/.85 var(--serif)}.date-moon>span{font-size:12px;margin-top:5px}.age-fallback{font:600 clamp(150px,19vw,270px)/1 var(--serif);color:#bfdfff;text-shadow:0 0 40px #83bcff44}.canvas-ready .age-fallback{opacity:0}
.memory-photo{position:relative;min-height:0;flex:1;border:1px solid #cbe6ff36;padding:0;overflow:hidden;border-radius:160px 160px 12px 12px;box-shadow:0 20px 100px #0009,0 0 60px #7bafff0c;background:#161d29;transform:rotate(-2deg);animation:photo-drift 10s ease-in-out infinite;max-height:55svh}.memory-photo img{position:relative;z-index:1}.memory-photo.portrait{width:min(340px,60vw);aspect-ratio:3/4}.memory-photo.portrait img{object-position:50% 35%}.memory-photo.landscape{width:min(900px,78vw);aspect-ratio:1.84;border-radius:12px;flex:0 1 auto;max-height:48svh;margin:auto 0}.memory-photo.art{width:min(580px,68vw);aspect-ratio:1.12;flex:0 1 auto;border-radius:48% 48% 8px 8px}.photo-glint{position:absolute;z-index:2;inset:-50%;background:linear-gradient(110deg,transparent 45%,#d5eaff16 50%,transparent 55%);animation:glint 9s ease-in-out infinite;pointer-events:none}.photo-scene:before{content:'';position:absolute;left:50%;top:52%;width:70vw;height:40svh;transform:translate(-50%,-25%);background:radial-gradient(ellipse,#658eb214,transparent 65%);pointer-events:none}.together h2,.best h2{max-width:860px}.kindness h2{font-size:clamp(36px,4vw,64px);max-width:900px}
.dota{gap:8px}.dota h2{font-size:clamp(35px,3.6vw,60px);max-width:920px}.summon{--element:#ff875a;position:relative;flex:1;min-height:0;width:min(1150px,100%);display:flex;flex-direction:column;align-items:center;isolation:isolate}.summon[data-element=ice]{--element:#90d9ff}.summon[data-element=ink]{--element:#ff7298}.summon-halo{position:absolute;left:50%;top:45%;width:350px;height:350px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--element) 20%,transparent),transparent 65%);filter:blur(30px);transition:background .7s;z-index:-1}.summon:after{content:'';position:absolute;bottom:58px;left:50%;width:62%;height:70px;transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--element) 25%,transparent);border-radius:50%;box-shadow:0 0 45px color-mix(in srgb,var(--element) 10%,transparent),inset 0 0 25px color-mix(in srgb,var(--element) 12%,transparent);transition:all .7s}.hero-stage{position:relative;flex:1;width:100%;min-height:0}.dota-hero{position:absolute;left:50%;bottom:-5%;height:110%;width:65%;object-fit:contain;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .8s,filter .8s;filter:drop-shadow(0 0 25px #ffffff12);transform:translateX(-50%);z-index:3;pointer-events:none}.dota-hero.chosen{opacity:1;animation:hero-hover 7s ease-in-out infinite}.dota-hero.aside-left{transform:translateX(-102%) scale(.67);opacity:.19;filter:blur(1px) saturate(.4);z-index:1}.dota-hero.aside-right{transform:translateX(2%) scale(.67);opacity:.19;filter:blur(1px) saturate(.4);z-index:1}.elements{display:flex;gap:18px;position:relative;z-index:5;flex-shrink:0;margin-top:8px}.elements button{width:51px;height:51px;border-radius:50%;background:#0b121ecc;border:1px solid #ffffff26;display:grid;place-items:center;transition:all .3s;color:#7e90a6}.elements button[aria-pressed=true]{color:var(--element);border-color:color-mix(in srgb,var(--element) 65%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--element) 13%,transparent);transform:translateY(-4px)}
.emote h2{max-width:800px}.emote-stage{position:relative;flex:1;min-height:0;width:min(500px,80vw);display:flex;flex-direction:column;align-items:center}.emote-love{background:none;min-height:0;flex:1;width:100%;padding:0;position:relative;z-index:2}.emote-character{object-fit:contain;max-height:44svh;filter:drop-shadow(0 15px 25px #0006);animation:emote-bob 6s ease-in-out infinite}.emote-orbit{position:absolute;left:50%;top:50%;width:85%;aspect-ratio:1;border:1px solid #bbd9ff15;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 90px #77a2dc0a,inset 0 0 90px #77a2dc0a}.emote-strip{display:flex;align-items:center;gap:20px;width:100%;font-size:12px;color:#879cb8;margin-top:20px;padding:13px 0;border-top:1px solid #aaccee18}.keyframes{height:20px;display:flex;align-items:center;justify-content:space-between;flex:1;position:relative}.keyframes:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#8fbbdf24}.keyframes i{width:5px;height:5px;transform:rotate(45deg);background:#8fbbdf88}.keyframes b{height:15px;width:1px;background:#cce8ff;position:absolute;left:0;animation:timeline 6s linear infinite}
.ferrari{gap:4px}.ferrari h2{max-width:840px}.race-stage{position:relative;width:min(1400px,100vw);flex:1;min-height:0;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;--speed:2s}.racing-number{position:absolute;left:50%;top:-6%;transform:translateX(-50%) skew(-9deg);font:700 clamp(190px,30vw,390px)/1 var(--sans);font-style:italic;letter-spacing:-25px;color:#f9656509;-webkit-text-stroke:1px #f9656520;z-index:-1}.starting-lights{display:flex;gap:12px;position:absolute;top:7%;left:50%;transform:translateX(-50%)}.starting-lights i{height:10px;width:10px;background:#7b252a;border-radius:50%;box-shadow:0 0 12px #9c272d33}.ferrari.active .starting-lights i{animation:lights-out 3s both}.ferrari.active .starting-lights i:nth-child(2){animation-delay:.15s}.ferrari.active .starting-lights i:nth-child(3){animation-delay:.3s}.ferrari.active .starting-lights i:nth-child(4){animation-delay:.45s}.ferrari.active .starting-lights i:nth-child(5){animation-delay:.6s}.speed-trails{position:absolute;inset:20% -5% 20%;overflow:hidden;transform:rotate(-8deg);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.speed-trails i{position:absolute;left:0;width:30%;height:1px;background:linear-gradient(90deg,transparent,#ff878744,transparent);animation:streak var(--speed) linear infinite}.speed-trails i:nth-child(1){top:12%;animation-delay:-.1s}.speed-trails i:nth-child(2){top:28%;animation-delay:-1.4s}.speed-trails i:nth-child(3){top:50%;animation-delay:-.6s}.speed-trails i:nth-child(4){top:74%;animation-delay:-1s}.speed-trails i:nth-child(5){top:89%;animation-delay:-.5s}.speed-trails i:nth-child(6){top:96%;animation-delay:-1.7s}.car-travel{position:absolute;left:50%;top:37%;width:min(770px,74vw);aspect-ratio:3;transform:translate(-50%,-32%) rotate(-8deg);z-index:2;will-change:transform}.leclerc-car{object-fit:contain;filter:drop-shadow(0 25px 12px #0008);animation:car-engine .12s linear infinite alternate}.race-signature{display:flex;gap:9px;align-items:center;font-size:12px;color:#c2949b;margin-bottom:16px;letter-spacing:1px}.monaco-flag{width:19px;height:12px;background:linear-gradient(#cb354a 50%,#e6e2de 50%);opacity:.8}.drs{font-size:9px;letter-spacing:1px;border:1px solid #b783852e;border-radius:3px;padding:3px 5px;color:#b7838577;transition:all .3s}.accelerate{height:44px;padding:0 20px;display:flex;align-items:center;gap:12px;background:#ca43511a;border:1px solid #f9818140;border-radius:24px;color:#ffc2c4;font-size:13px;touch-action:none;user-select:none;-webkit-user-select:none}.pedal-icon{font-size:22px;transform:rotate(-90deg)}.boosting .race-stage{--speed:.32s}.boosting .drs{color:#c9ffac;border-color:#c9ffac66;box-shadow:0 0 15px #c9ffac15}.boosting .accelerate{box-shadow:0 0 30px #ff51513d;background:#ca43513b}
.light-stage,.render-stage{position:relative;flex:1;min-height:0;width:min(450px,76vw);display:grid;place-items:center}.light-stage>img{height:100%;width:100%;object-fit:contain;mix-blend-mode:lighten;mask-image:radial-gradient(ellipse at 50% 52%,#000 37%,transparent 73%);position:relative;z-index:2}.spotlight{position:absolute;left:50%;top:-20%;width:85%;height:130%;transform:translateX(-50%) rotate(14deg);background:conic-gradient(from 163deg at 50% 0%,transparent,#b1ffe718 10deg,#b1ffe72e 17deg,transparent 32deg);filter:blur(12px);animation:spotlight-sway 12s ease-in-out infinite}.light h2 em{color:#b9e5d9}.render-stage>img{position:relative;z-index:2;height:100%;width:100%;object-fit:contain;mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 73%);mix-blend-mode:lighten;animation:emote-bob 8s ease-in-out infinite}.render-ring{position:absolute;inset:13% 5%;border:1px solid #cbddff25;border-radius:50%;transform:rotate(-25deg);box-shadow:0 0 60px #aacbff09}.finale h2{margin-top:2svh;font-size:clamp(55px,6vw,96px);max-width:770px}.finale h2 em{display:block}.galaxy-heart{background:none;position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:min(420px,80vw);height:38svh;border-radius:50%}
.story-controls{position:fixed;left:50%;bottom:calc(27px + var(--safe-bottom));transform:translateX(-50%);z-index:15;display:flex;align-items:center;width:min(550px,86vw);height:52px;gap:18px}.back{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:#b3d7ff05;border:1px solid #b3d7ff18;font-size:22px;color:#9cacc2;transition:opacity .4s,background .3s}.back:hover{background:#b3d7ff12}.next-arena{position:relative;flex:1;height:100%;display:flex;align-items:center;justify-content:center}.next{position:relative;min-height:50px;padding:0 9px 0 25px;border-radius:30px;background:#b4d9ff0a;border:1px solid #b4d9ff2d;display:flex;align-items:center;gap:25px;box-shadow:0 4px 20px #0003;transition:transform .27s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s;backdrop-filter:blur(16px);color:#c4d6e8;white-space:nowrap}.next:hover{background:#b4d9ff15;box-shadow:0 0 25px #b4d9ff0b}.next-copy{font-size:13px;letter-spacing:.3px}.next-arrow{display:grid;place-items:center;width:34px;height:34px;background:#cce6fa;border-radius:50%;color:#182432;font-size:22px;box-shadow:0 0 18px #bce0ff14}.next.dodging{background:#cbe7ff1b}.next.caught .next-arrow{animation:arrow-tease .9s ease-in-out infinite}.burst-layer{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}.flying-heart{position:absolute;font:var(--size) var(--serif);color:#c6eaff;animation:heart-fly 1.6s ease-out forwards;pointer-events:none}.pet.loved,.emote-love.loved{animation:pet-bounce .55s ease-out}
@keyframes nebula-breathe{50%{transform:scale(1.12) rotate(5deg);opacity:.65}}@keyframes phrase-in{from{opacity:0;filter:blur(8px);translate:0 20px}to{opacity:1;filter:blur(0);translate:0 0}}@keyframes moon-float{50%{transform:translate(-7px,9px)}}@keyframes photo-drift{50%{transform:translateY(-7px) rotate(1deg)}}@keyframes glint{0%,60%{transform:translateX(-80%)}90%,100%{transform:translateX(80%)}}@keyframes hero-hover{50%{translate:0 -10px}}@keyframes emote-bob{50%{translate:0 -8px}}@keyframes timeline{to{left:100%}}@keyframes streak{from{transform:translateX(450%)}to{transform:translateX(-120%)}}@keyframes lights-out{0%,85%{background:#f3676e;box-shadow:0 0 14px #f3676e66}100%{background:#cbd4df18;box-shadow:none}}@keyframes car-engine{to{translate:0 .6px}}@keyframes spotlight-sway{50%{transform:translateX(-50%) rotate(-14deg)}}@keyframes arrow-tease{50%{translate:3px 0}}@keyframes heart-fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}@keyframes pet-bounce{50%{scale:1.04}}
@media(min-width:1100px) and (min-height:720px){.photo-scene{flex-direction:row;justify-content:center;gap:7vw;padding-left:11vw;padding-right:11vw}.photo-scene h2{max-width:560px;flex:1;text-align:left;font-size:clamp(52px,5.2vw,80px)}.photo-scene .memory-photo{flex:0 1 440px;max-height:65svh;height:65svh;min-width:0}.photo-scene .landscape{flex-basis:620px;height:auto;max-height:52svh}.photo-scene .art{flex-basis:550px;height:58svh}.together h2,.best h2{font-size:clamp(48px,4.6vw,70px)}.kindness h2{font-size:clamp(44px,4.2vw,65px)}}
@media(max-width:600px){.scene{padding:82px 7vw calc(112px + var(--safe-bottom));gap:27px}.scene h1{font-size:clamp(48px,13vw,66px);letter-spacing:-1.2px;line-height:1.03}.scene h2{font-size:clamp(36px,10vw,49px);letter-spacing:-.8px;line-height:1.04}.birthday h1{margin-top:4svh}.birthday-orbit{top:54%;height:32svh;width:66vw}.date-moon{width:72px;height:72px;right:-12%;top:2%}.date-moon b{font-size:35px}.date-moon>span{font-size:10px}.birthday-orbit:before{inset:0 -20%}.birthday-orbit:after{inset:5% -12%}.story-progress{width:68vw;gap:5px;top:max(15px,env(safe-area-inset-top))}.memory-photo.portrait{width:65vw;max-height:51svh;border-radius:130px 130px 10px 10px}.memory-photo.landscape{width:86vw;max-height:40svh;border-radius:8px;margin:3svh 0 auto}.memory-photo.art{width:80vw;flex:1;max-height:52svh;aspect-ratio:auto}.together h2,.best h2{font-size:clamp(36px,10.2vw,47px)}.kindness h2{font-size:clamp(30px,8.8vw,39px)}.dota{gap:12px;padding-left:5vw;padding-right:5vw}.dota h2{font-size:clamp(30px,8.4vw,39px);max-width:90vw}.summon{width:100%}.summon-halo{width:260px;height:300px;top:42%}.dota-hero{width:113%;height:105%;bottom:0}.dota-hero.aside-left{transform:translateX(-82%) scale(.65);opacity:.17}.dota-hero.aside-right{transform:translateX(-18%) scale(.65);opacity:.17}.summon:after{width:83%;bottom:63px;height:45px}.elements{gap:20px;margin-top:10px}.elements button{width:46px;height:46px}.emote h2{font-size:clamp(31px,8.8vw,40px)}.emote-stage{width:78vw}.emote-character{max-height:42svh}.emote-strip{gap:15px;font-size:10px;padding:12px 0;margin-top:15px}.ferrari h2{font-size:clamp(37px,10vw,48px)}.race-stage{width:100vw;padding-bottom:2svh}.racing-number{top:8%;font-size:235px;letter-spacing:-16px}.starting-lights{top:5%}.car-travel{width:94vw;top:43%;aspect-ratio:2.7}.race-signature{font-size:11px;margin-bottom:16px}.speed-trails{inset:25% -40% 29%;transform:rotate(-15deg)}.accelerate{font-size:12px;height:42px}.light-stage,.render-stage{width:87vw}.light h2{font-size:clamp(35px,9.6vw,44px)}.render-stage{max-height:50svh}.story-controls{bottom:calc(25px + var(--safe-bottom));gap:6px;width:88vw}.back{width:38px;height:38px;font-size:19px}.next{min-height:48px;padding-left:19px;gap:17px}.next-copy{font-size:12px}.next-arrow{width:32px;height:32px;font-size:21px}.finale h2{font-size:clamp(51px,13.5vw,65px);margin-top:3svh}}
@media(max-height:700px){.scene{padding-top:60px;padding-bottom:90px;gap:15px}.scene h1{font-size:clamp(40px,10vw,65px)}.scene h2{font-size:clamp(29px,7.6vw,47px)}.birthday h1,.finale h2{margin-top:0}.story-controls{bottom:calc(17px + var(--safe-bottom))}.birthday-orbit{top:56%}.memory-photo.portrait{max-height:46svh}.dota h2,.emote h2,.kindness h2{font-size:clamp(27px,7vw,38px)}.race-stage{padding-bottom:0}.car-travel{top:39%}.race-signature{margin-bottom:8px}.emote-strip{margin-top:5px;padding:8px 0}.emote-character{max-height:35svh}}
@media(max-height:500px) and (orientation:landscape){.scene{padding:53px 13vw 74px;flex-direction:row;align-items:center;gap:25px}.scene h1,.scene h2{font-size:32px;text-align:left;width:45%;max-width:45%}.scene>div,.scene>figure{max-width:48%}.scene .memory-photo{height:65svh;max-height:65svh;flex:1}.birthday h1,.finale h2{align-self:flex-start}.birthday-orbit{top:47%;left:72%;width:31vw;height:43svh}.birthday-orbit .date-moon{width:56px;height:56px}.date-moon b{font-size:27px}.date-moon>span{font-size:8px}.summon,.emote-stage,.light-stage,.render-stage{height:63svh;flex:1}.elements button{width:33px;height:33px}.elements button svg{width:18px;height:18px}.elements{gap:10px}.race-stage{height:63svh;width:48vw}.car-travel{width:46vw}.racing-number{font-size:150px}.race-signature{font-size:9px}.accelerate{height:31px;font-size:10px}.galaxy-heart{left:74%;top:47%;width:35vw;height:55svh}.story-controls{height:42px;bottom:13px}.next{min-height:40px}.story-progress{top:5px}}
.next-copy{font-size:14px}.accelerate{font-size:14px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.car-travel{will-change:auto}}