@font-face{font-family:BookLettering;src:url('/assets/outfit-v1.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{color-scheme:light;--wall:#fff4c9;--floor:#cfc3ed;--ink:#000}
*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{background:var(--wall);color:var(--ink);font:500 16px BookLettering,'Trebuchet MS',sans-serif}
.room{position:relative;isolation:isolate;height:100vh;height:100svh;overflow:hidden;border:clamp(6px,1.5vw,18px) solid #a7d9cf;background-color:var(--wall);background-image:repeating-linear-gradient(90deg,transparent 0,transparent 78px,#e9ce7830 79px,#e9ce7830 81px);box-shadow:inset 0 0 0 2px #fff9,inset 10px 0 25px #bca8570a}
.room:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:10;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23756161' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.ceiling{position:absolute;inset:0 0 auto;height:10px;background:#fff5;border-bottom:2px solid #e1c98066}
.floor{position:absolute;inset:79% 0 0;z-index:-1;background:var(--floor);background-image:repeating-linear-gradient(0deg,transparent 0,transparent 40px,#ab95cd38 41px,#ab95cd38 43px)}
.baseboard{position:absolute;top:calc(79% - 12px);width:100%;height:14px;background:#fefaf1;border-top:2px solid #e4caa5;border-bottom:3px solid #aa91c3;box-shadow:0 4px 9px #78637c0e}
.brand{position:absolute;top:clamp(12px,4svh,34px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(19px,3svh,25px);font-weight:650;letter-spacing:-.7px}.brand svg{width:12px;height:12px;fill:#E00F28;position:absolute;top:-7px;right:-15px;transform:rotate(12deg)}
.message{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);text-align:center;width:70%;max-width:850px;z-index:4}
.message h1{font-weight:650;font-size:clamp(26px,min(4.6vw,8svh),68px);line-height:1.1;letter-spacing:-1.4px;margin:clamp(8px,2svh,18px) 0 clamp(12px,2.5svh,23px);text-wrap:balance}.message p{font-size:clamp(12px,min(1.4vw,2.5svh),19px);margin:0}
.little-star{color:#efae19;font-size:clamp(18px,3.8svh,30px);transform:rotate(10deg);line-height:1;text-shadow:0 1px 1px #ab870050}
.five-dots{display:flex;gap:9px;justify-content:center;margin-top:clamp(10px,3svh,25px)}.five-dots i{height:7px;width:7px;border-radius:50%;background:#E00F28}.five-dots i:nth-child(2){background:#FD5E19}.five-dots i:nth-child(3){background:#e3ae0a}.five-dots i:nth-child(4){background:#05893B}.five-dots i:nth-child(5){background:#1E68F9}
.window{position:absolute;right:5%;top:11%;width:clamp(75px,13vw,180px);height:clamp(100px,24svh,220px);border:clamp(5px,1vw,9px) solid #fdf8f0;border-bottom-width:12px;border-radius:130px 130px 0 0;background:#9bcfe9;box-shadow:0 0 0 2px #ebc078,4px 4px 0 #d8b65929;overflow:hidden}.window:after{content:"";height:100%;width:5px;background:#fdf8f0;position:absolute;left:50%;top:0}.window i{position:absolute;left:0;top:58%;width:100%;height:5px;background:#fdf8f0}.moon{width:clamp(23px,3vw,35px);height:clamp(23px,3vw,35px);border-radius:50%;background:#fff3a2;position:absolute;left:16%;top:15%;box-shadow:0 0 18px #fff7d84d}
.friends{position:absolute;bottom:11%;left:50%;transform:translateX(-50%);width:min(88vw,112svh,950px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5%;align-items:end;z-index:2;padding:0 5%}
.perch{position:relative;width:100%;z-index:2}.perch img{position:relative;display:block;width:100%;height:100%;object-fit:contain;z-index:2;filter:drop-shadow(2px 4px 2px #674f5a15)}
.ruby{aspect-ratio:349/707;width:87%;justify-self:center;bottom:9%}.clementine{aspect-ratio:401/673}.sunshine{aspect-ratio:399/692}.emerald{aspect-ratio:386/690;width:96%;justify-self:center}.sky{aspect-ratio:414/687;width:103%;bottom:6%}
.paper-star,.paper-heart{position:absolute;filter:drop-shadow(1px 2px 0 #8e686b16);line-height:1}.paper-star{color:#edb016}.paper-heart{color:#E00F28}.star-one{left:15%;top:25%;font-size:31px;transform:rotate(17deg)}.star-two{right:11%;bottom:43%;font-size:24px;transform:rotate(-10deg)}.heart-one{left:8%;top:49%;font-size:23px;transform:rotate(-16deg)}.heart-two{right:31%;top:15%;font-size:18px;transform:rotate(15deg)}
footer{position:absolute;left:50%;bottom:max(12px,3svh);transform:translateX(-50%);white-space:nowrap;font-size:clamp(11px,1.8svh,14px);color:#38294a}
@media(max-width:800px){.message{top:35%;width:92%}.message h1{font-size:clamp(26px,min(8.4vw,7svh),50px);letter-spacing:-.8px}.message p{font-size:clamp(12px,2svh,16px)}.friends{width:min(94vw,112svh);padding:0 4.5%;gap:1.5%;bottom:14%}.window{width:clamp(65px,17vw,105px);height:clamp(90px,16svh,150px);right:5%;top:12%;border-bottom-width:8px}.star-one{left:15%;top:20%;font-size:25px}.heart-two{right:40%;top:17%}.star-two{bottom:37%}.heart-one{left:7%;top:49%;font-size:19px}}
@media(max-height:500px){.brand{top:10px;font-size:19px}.message{top:34%;width:70%}.message h1{font-size:clamp(23px,6.7svh,34px);margin:6px 0 9px}.message p{font-size:12px}.little-star{display:none}.five-dots{margin-top:10px}.five-dots i{width:5px;height:5px}.friends{bottom:11%;width:min(88vw,108svh)}.window{width:65px;height:90px;top:13%}.star-one{font-size:20px}.heart-one{font-size:16px}.star-two{font-size:17px}.heart-two{display:none}footer{font-size:11px;bottom:9px}}
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}
.motion-ready .perch img{transform-origin:50% 78%;animation:princess-settle 850ms var(--ease-out) both;animation-delay:var(--arrival-delay)}
.ruby{--arrival-delay:80ms}.clementine{--arrival-delay:150ms}.sunshine{--arrival-delay:220ms}.emerald{--arrival-delay:290ms}.sky{--arrival-delay:360ms}
.motion-ready .furniture{transform-origin:50% 100%;animation:seat-settle 1000ms var(--ease-out) both;animation-delay:var(--arrival-delay)}
.motion-ready .paper-star,.motion-ready .little-star{animation:paper-twinkle 4800ms var(--ease-in-out) infinite}
.motion-ready .star-one{animation-delay:-1000ms}.motion-ready .star-two{animation-delay:-2900ms}.motion-ready .little-star{animation-delay:-3700ms}
.motion-ready .brand svg{transform-origin:50% 70%;animation:heart-hello 900ms var(--ease-out) 600ms both}
@keyframes princess-settle{0%{transform:translateY(-5%) rotate(-1.5deg)}60%{transform:translateY(1%) rotate(.5deg)}80%{transform:translateY(-.6%) rotate(-.2deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes seat-settle{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.96)}70%{transform:scaleY(1.015)}}
@keyframes paper-twinkle{0%,65%,100%{opacity:1;scale:1}30%{opacity:.55;scale:.88}45%{opacity:1;scale:1.12}}
@keyframes heart-hello{0%,100%{transform:rotate(12deg) scale(1)}40%{transform:rotate(-8deg) scale(1.14)}70%{transform:rotate(17deg) scale(1.04)}}

@media(prefers-reduced-motion:reduce){.motion-ready .perch img,.motion-ready .furniture,.motion-ready .paper-star,.motion-ready .little-star,.motion-ready .brand svg{animation:gentle-appear 180ms ease both}}
@keyframes gentle-appear{from{opacity:.85}to{opacity:1}}

.seating{position:absolute;left:0;right:0;bottom:-3%;height:60%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5%;padding:0 3%;z-index:1}
.furniture{position:relative;min-width:0;width:100%;height:100%}.furniture img{display:block;width:100%;height:100%;object-fit:fill;filter:drop-shadow(1px 3px 1px #6d536212)}
@media(max-width:800px){.seating{gap:1.5%;padding:0 2%}}
.paper-star,.paper-heart{pointer-events:none;z-index:1}
.star-three{left:6%;top:12%;font-size:20px;color:#dc9f35}.star-four{left:27%;top:14%;font-size:16px;color:#8a79bb}.star-five{right:22%;top:9%;font-size:23px;color:#78a78c}.star-six{left:20%;top:49%;font-size:18px;color:#7c9eca}.star-seven{right:27%;top:49%;font-size:24px;color:#e1a53f}.star-eight{left:4%;top:67%;font-size:16px;color:#9d84c0}.star-nine{right:4%;top:64%;font-size:21px;color:#dba048}
.heart-three{left:9%;top:35%;font-size:14px;color:#de8f90}.heart-four{right:25%;top:20%;font-size:15px;color:#df996c}.heart-five{left:30%;top:55%;font-size:17px;color:#cc8ba8}.heart-six{right:8%;top:48%;font-size:20px;color:#bc92c6}.heart-seven{left:17%;top:9%;font-size:13px;color:#79a58b}.heart-eight{right:38%;top:55%;font-size:13px;color:#7f9fcd}
.motion-ready .paper-heart{animation:heart-drift 6400ms var(--ease-in-out) infinite}
.motion-ready .star-three,.motion-ready .heart-five{animation-delay:-2200ms}.motion-ready .star-four,.motion-ready .heart-three{animation-delay:-3900ms}.motion-ready .star-five,.motion-ready .heart-seven{animation-delay:-700ms}.motion-ready .star-six,.motion-ready .heart-four{animation-delay:-3100ms}.motion-ready .star-seven,.motion-ready .heart-six{animation-delay:-4700ms}.motion-ready .star-eight,.motion-ready .heart-eight{animation-delay:-1700ms}.motion-ready .star-nine{animation-delay:-3600ms}.motion-ready .heart-one{animation-delay:-1400ms}.motion-ready .heart-two{animation-delay:-4400ms}
@keyframes heart-drift{0%,100%{translate:0 0;rotate:-7deg;opacity:.8}50%{translate:0 -7px;rotate:7deg;opacity:1}}
@media(max-width:800px){.star-six{left:7%;top:61%}.star-seven{right:16%;top:54%}.heart-three{left:5%;top:31%}.heart-four{right:27%;top:15%}.heart-five{left:27%;top:54%}.heart-eight{right:36%;top:60%}.star-four{left:40%;top:13%}}
@media(max-height:500px){.star-four,.star-five,.heart-four,.heart-seven,.star-six,.heart-eight{display:none}.star-seven{right:17%;top:54%}.heart-five{left:22%;top:53%}.star-three{font-size:15px}.star-nine{top:62%;font-size:16px}}
@media(prefers-reduced-motion:reduce){.motion-ready .paper-heart{animation:gentle-appear 180ms ease both}}

.emerald,.emerald-seat{--arrival-delay:80ms}.clementine,.clementine-seat{--arrival-delay:150ms}.ruby,.ruby-seat{--arrival-delay:220ms}.sunshine,.sunshine-seat{--arrival-delay:290ms}.sky,.sky-seat{--arrival-delay:360ms}
.perch{translate:0 12%}.ruby,.sky{bottom:0}
.emerald img{scale:-1 1}

@media(max-height:500px){footer{bottom:5px}}

.paper-star,.paper-heart{width:1em;height:1em}.paper-star svg,.paper-heart svg,.little-star svg{display:block;width:1em;height:1em}.little-star svg{margin-inline:auto}