*{box-sizing:border-box}html{background:#fcf1dc;scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}img{max-width:100%}::selection{background:#fbb541;color:#2e1027}:root{--cream: oklch(96% .03 83);--cream-deep: oklch(89% .06 79);--ink: oklch(23% .06 338);--berry: oklch(53% .2 350);--berry-dark: oklch(34% .13 352);--rose: oklch(77% .16 8);--marigold: oklch(82% .15 76);--pistachio: oklch(84% .11 135);--lavender: oklch(79% .13 304);--shadow: oklch(30% .1 350 / .22);font-family:Trebuchet MS,Avenir Next,Avenir,system-ui,sans-serif}#root{min-height:100vh}.birthday-site{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 18% 8%,oklch(86% .13 16 / .8),transparent 28rem),radial-gradient(circle at 85% 18%,oklch(82% .13 304 / .65),transparent 26rem),linear-gradient(155deg,var(--cream) 0%,oklch(92% .08 56) 42%,oklch(86% .09 348) 100%);color:var(--ink)}.secret-gate,.game-section,.letter-section{position:relative;isolation:isolate}.secret-gate{display:grid;min-height:100svh;align-items:center;gap:clamp(1.5rem,6vw,5rem);padding:clamp(1.25rem,5vw,4.5rem)}.secret-gate:before{position:absolute;top:1rem;right:1rem;bottom:1rem;left:1rem;z-index:-1;border:1px solid oklch(36% .08 350 / .14);border-radius:clamp(1.75rem,5vw,4rem);background:#fffbf45c;background:oklch(99% .02 85 / .36);box-shadow:0 2rem 6rem var(--shadow);content:""}.star-field,.star-field:before,.star-field:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-image:radial-gradient(circle,oklch(99% .02 85) 0 .12rem,transparent .14rem),radial-gradient(circle,oklch(72% .2 350) 0 .08rem,transparent .1rem);background-position:0 0,2rem 3rem;background-size:7rem 7rem,9rem 9rem;content:"";-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 82%);mask-image:linear-gradient(to bottom,black 0%,transparent 82%);opacity:.48}.star-field:before{animation:drift-stars 18s linear infinite}.gate-copy{max-width:42rem;padding-top:4rem}.eyebrow{margin:0 0 1rem;color:var(--berry-dark);font-size:clamp(.76rem,2.5vw,.9rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1,h2{max-width:11ch;margin-bottom:1rem;font-family:Georgia,Times New Roman,serif;font-size:clamp(3.4rem,16vw,8rem);font-weight:900;letter-spacing:-.08em;line-height:.86}.gate-copy p:not(.eyebrow),.game-copy p:not(.eyebrow),.letter-hero p:not(.eyebrow){max-width:35rem;font-size:clamp(1.05rem,4vw,1.35rem);line-height:1.55}.phrase-card{display:grid;width:min(100%,28rem);gap:.85rem;padding:clamp(1rem,4vw,1.5rem);border:1px solid oklch(33% .09 350 / .16);border-radius:2rem;background:#fffcf3c2;background:oklch(99% .02 88 / .76);box-shadow:0 1.5rem 4rem var(--shadow)}.phrase-card label{font-weight:800}.phrase-card input{width:100%;box-sizing:border-box;border:1px solid oklch(39% .08 350 / .18);border-radius:1rem;background:var(--cream);color:var(--ink);font:inherit;font-size:1rem;padding:1rem;outline:none;transition:border-color .18s ease-out,box-shadow .18s ease-out}.phrase-card input:focus{border-color:var(--berry);box-shadow:0 0 0 .25rem #ff8ca347;box-shadow:0 0 0 .25rem oklch(77% .16 8 / .28)}button{touch-action:manipulation}.phrase-card button,.creature-stage{border:0;cursor:pointer;font:inherit}.phrase-card button{border-radius:999rem;background:var(--berry-dark);color:var(--cream);font-weight:900;padding:1rem 1.25rem;box-shadow:0 1rem 2.5rem #650b3f47;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease-out}.phrase-card button:hover,.phrase-card button:focus-visible,.creature-stage:hover,.creature-stage:focus-visible{transform:translateY(-.16rem)}.phrase-card button:focus-visible,.creature-stage:focus-visible{outline:.24rem solid oklch(30% .1 350 / .32);outline-offset:.18rem}.hint,.phrase-error,.unlocked-note{font-size:.92rem}.hint{margin-bottom:0;color:#54334bb8}.phrase-error{margin-bottom:0;color:var(--berry-dark);font-weight:800}.unlocked-note{width:fit-content;border-radius:999rem;background:var(--pistachio);font-weight:900;padding:.8rem 1rem}.game-section{display:grid;min-height:100svh;align-items:center;gap:1.5rem;padding:clamp(1.25rem,5vw,4rem);background:radial-gradient(circle at 70% 22%,oklch(86% .16 76 / .88),transparent 18rem),linear-gradient(180deg,transparent,oklch(96% .04 83 / .68))}.game-copy h2,.letter-hero h2{font-size:clamp(2.75rem,12vw,7rem)}.creature-stage{position:relative;display:grid;min-height:min(58svh,34rem);place-items:center;overflow:hidden;border-radius:clamp(2rem,8vw,5rem);background:radial-gradient(circle at 24% 25%,oklch(98% .04 93 / .92),transparent 10rem),linear-gradient(140deg,#a5da78,#ffe3bd 48%,#ffc2e6);background:radial-gradient(circle at 24% 25%,oklch(98% .04 93 / .92),transparent 10rem),linear-gradient(140deg,#a5da78,color(xyz 0.792 0.798 0.462) 48%,color(xyz 0.797 0.646 0.879));box-shadow:inset 0 0 0 .2rem #fffbf461,0 2rem 6rem var(--shadow);box-shadow:inset 0 0 0 .2rem oklch(99% .02 85 / .38),0 2rem 6rem var(--shadow)}.creature-stage:before{position:absolute;inset:auto -12% -16%;height:42%;border-radius:50% 50% 0 0;background:repeating-linear-gradient(96deg,transparent 0 1.5rem,oklch(46% .08 132 / .1) 1.5rem 1.75rem),#78b643;content:""}.creature{position:absolute;font-size:clamp(3.4rem,17vw,8rem);filter:drop-shadow(0 1rem 1rem oklch(32% .1 338 / .2));transform:translate(calc((var(--step) - 3) * clamp(1.05rem,8vw,4.3rem)),var(--float));animation:creature-bob 1.6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--step) * -.18s)}.worm-duo .creature{font-size:clamp(5rem,26vw,11rem);transform:translate(calc((var(--step) - .5) * clamp(5.25rem,28vw,12rem)))}.llama-herd .creature{font-size:clamp(4.8rem,24vw,10rem)}.llamacorn .creature:nth-child(2){font-size:clamp(6.6rem,32vw,13rem);z-index:2}.llamacorn .creature:nth-child(3){font-size:clamp(4rem,18vw,7rem);animation:sparkle-spin 2.2s linear infinite}.game-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:900}.game-footer p{margin-bottom:0}.progress-dots{display:flex;gap:.45rem}.progress-dots span{width:.7rem;height:.7rem;border-radius:999rem;background:#54334b38}.progress-dots span.active{background:var(--berry)}.letter-section{padding:clamp(1.25rem,5vw,5rem) clamp(1.25rem,5vw,6rem) 5rem;background:radial-gradient(circle at 18% 0%,oklch(82% .14 304 / .55),transparent 24rem),linear-gradient(180deg,#ffeccd,#ffcdc4);background:radial-gradient(circle at 18% 0%,oklch(82% .14 304 / .55),transparent 24rem),linear-gradient(180deg,color(xyz 0.823 0.855 0.677),color(xyz 0.756 0.685 0.566))}.music-note{display:inline-flex;margin-bottom:clamp(2rem,8vw,5rem);border-radius:999rem;background:var(--berry-dark);color:var(--cream);font-weight:900;padding:.75rem 1rem}.letter-hero{max-width:58rem;margin-bottom:clamp(2rem,8vw,6rem)}.memory-river{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,3vw,2rem);max-width:72rem;margin:0 auto clamp(3rem,10vw,8rem)}.memory-river-bottom{margin-top:clamp(3rem,10vw,8rem);margin-bottom:clamp(2rem,8vw,5rem)}.memory-photo{margin:0;transform:rotate(var(--tilt));transition:transform .22s cubic-bezier(.22,1,.36,1)}.memory-photo:hover{transform:rotate(0) translateY(-.35rem)}.memory-photo img,.photo-placeholder{display:grid;width:100%;aspect-ratio:4 / 5;place-items:center;box-sizing:border-box;border:.75rem solid oklch(98% .02 84);border-bottom-width:2.4rem;border-radius:.35rem;background:linear-gradient(135deg,var(--lavender),var(--marigold));box-shadow:0 1.5rem 3rem var(--shadow);object-fit:cover}.photo-placeholder{gap:.5rem;padding:1rem;text-align:center}.photo-placeholder span{font-family:Georgia,Times New Roman,serif;font-size:clamp(1.5rem,7vw,3rem);font-weight:900;letter-spacing:-.06em;line-height:.9}.photo-placeholder code,.asset-directions code{border-radius:.45rem;background:#fffbf49e;background:oklch(99% .02 86 / .62);color:var(--berry-dark);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;padding:.18rem .32rem}.memory-photo figcaption{max-width:16rem;margin:.8rem auto 0;font-size:.9rem;font-weight:800;line-height:1.3;text-align:center}.letter-body{max-width:49rem;margin-inline:auto}.letter-line{margin-bottom:clamp(1.5rem,5vw,2.6rem);font-family:Georgia,Times New Roman,serif;font-size:clamp(1.45rem,6vw,2.85rem);font-weight:800;letter-spacing:-.045em;line-height:1.08}@supports (animation-timeline: view()){.letter-line{animation:letter-rise both cubic-bezier(.22,1,.36,1);animation-range:entry 10% cover 44%;animation-timeline:view()}}.signature{margin-top:clamp(2rem,8vw,4rem);color:var(--berry-dark);font-family:Georgia,Times New Roman,serif;font-size:clamp(2.6rem,14vw,6rem);font-weight:900;letter-spacing:-.08em;line-height:.9;text-align:right}.asset-directions{max-width:46rem;margin-inline:auto;border:1px solid oklch(35% .08 350 / .14);border-radius:1.5rem;background:#fffbf494;background:oklch(99% .02 86 / .58);padding:clamp(1rem,4vw,1.5rem)}.asset-directions h3{margin-bottom:.65rem;font-size:1.2rem}.asset-directions p:last-child{margin-bottom:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes drift-stars{to{transform:translate3d(2rem,3rem,0)}}@keyframes creature-bob{0%,to{translate:0 0}50%{translate:0 -1.2rem}}@keyframes sparkle-spin{to{rotate:1turn}}@keyframes letter-rise{0%{opacity:0;transform:translateY(4rem) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(min-width:860px){.secret-gate,.game-section{grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr)}.phrase-card,.unlocked-note{justify-self:end}.creature-stage,.game-footer{grid-column:1 / -1}}@media(max-width:720px){.secret-gate:before{top:.5rem;right:.5rem;bottom:.5rem;left:.5rem}.gate-copy{padding-top:1.5rem}.memory-river{grid-template-columns:1fr;max-width:22rem}.memory-photo:nth-child(2n){justify-self:end;width:88%}.memory-photo:nth-child(odd){justify-self:start;width:88%}.game-footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}