@font-face{font-family:Montserrat;src:url('/assets/montserrat-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('/assets/poppins-regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#faf7ee;--ink:#202349;--mint:#86d7cf}
*{box-sizing:border-box}
body{margin:0;min-width:240px;min-height:100vh;min-height:100svh;background:var(--paper);color:var(--ink);display:grid;place-items:center;padding:40px 22px;font-family:Poppins,system-ui,sans-serif}
main{width:min(100%,580px);text-align:center}
h1{font-family:Montserrat,system-ui,sans-serif;font-size:clamp(32px,7.2vw,58px);font-weight:700;line-height:1.14;letter-spacing:-.045em;margin:36px 0 14px}
p{font-size:clamp(17px,3.8vw,20px);line-height:1.5;margin:0;color:#505477}
.little-world{position:relative;width:min(100%,500px);aspect-ratio:2/1;margin-inline:auto;overflow:hidden;border-radius:24px;background:#121c36;box-shadow:0 10px 0 #e7e3d6;isolation:isolate}
.little-world img{position:absolute;image-rendering:pixelated;object-fit:contain}
.workshop{width:31%;height:auto;bottom:17%;z-index:2}
.workshop-left{left:6%}.workshop-right{right:6%}
.ground{position:absolute;bottom:0;left:0;right:0;height:24%;background:#273a49;border-top:4px solid #527b75;z-index:1}
.route{position:absolute;left:30%;right:30%;top:49%;border-top:3px dashed #60858d;transform:rotate(-9deg);z-index:1}
.note{width:13%;height:auto;left:44%;top:33%;z-index:3;transform:rotate(-9deg)}
.moon{position:absolute;width:7%;aspect-ratio:1;top:13%;right:20%;background:#f3d98c;box-shadow:5px 5px 0 #121c36}
.star{position:absolute;background:#b9e8e5;width:4px;height:4px;box-shadow:0 -4px 0 -1px #b9e8e5,0 4px 0 -1px #b9e8e5,4px 0 0 -1px #b9e8e5,-4px 0 0 -1px #b9e8e5}
.star-one{left:18%;top:22%}.star-two{left:48%;top:16%;opacity:.7}.star-three{right:10%;top:42%;opacity:.7}
.person{position:absolute;width:38px;height:42px;bottom:10%;z-index:4;transform-origin:bottom center}
.person-left{left:32%}.person-right{right:32%}
.person:before{content:'';position:absolute;width:20px;height:19px;left:10px;top:6px;background:#ebba9b;box-shadow:0 -5px 0 #474156,0 18px 0 2px var(--mint),-6px 19px 0 -3px #ebba9b,6px 19px 0 -3px #ebba9b,-5px 29px 0 -5px #161c35,5px 29px 0 -5px #161c35}
.person:after{content:'';position:absolute;width:3px;height:4px;left:14px;top:13px;background:#202349;box-shadow:8px 0 0 #202349}
.person-right:before{box-shadow:0 -5px 0 #a98b4a,0 18px 0 2px #d8c68a,-6px 19px 0 -3px #ebba9b,6px 19px 0 -3px #ebba9b,-5px 29px 0 -5px #161c35,5px 29px 0 -5px #161c35}
@media(max-width:420px){body{padding:32px 20px}.little-world{border-radius:18px;box-shadow:0 7px 0 #e7e3d6}.person{transform:scale(.8);bottom:9%}.person-left{left:30%}.person-right{right:30%}h1{margin-top:30px}}
@media(max-width:300px){.person{transform:scale(.62)}.little-world{border-radius:12px}}