*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}body{background:#4bbef4}.scene{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background:linear-gradient(#42b8f3 0%,#9ddcf8 66%,#9ad167 66%)}.sun{position:absolute;top:12%;right:17%;width:clamp(60px,8vw,120px);aspect-ratio:1;background:#ffe16e;border-radius:50%}.cloud{position:absolute;width:20vw;min-width:170px;opacity:.95;animation:clouds 42s linear infinite}.cloud.one{top:9%;left:14%}.cloud.two{top:9%;left:75%;animation-delay:-19s}.hills{position:absolute;left:0;top:32%;height:42%;width:100%;background:url('assets/hills.svg') repeat-x 0 100%/100vw 100%;animation:mountains 75s linear infinite}.trees{position:absolute;inset:0;pointer-events:none}.tree{position:absolute;bottom:27%;width:clamp(70px,12vw,170px);height:30%;background:url('assets/tree.svg') no-repeat center bottom/contain;animation:passing 10s linear infinite}.tree:nth-child(2){animation-delay:-5s;transform:scale(.8)}.tree:nth-child(3){animation-delay:-8s}.tree.palm{background-image:url('assets/palm.svg');animation-delay:-3s}.guard{position:absolute;top:70%;width:200%;height:8px;background:#d3e2d9;box-shadow:0 12px 0 #7c97a0;animation:move 13s linear infinite}.road{position:absolute;top:74%;width:100%;height:26%;background:#485263}.road:before{content:'';position:absolute;top:30%;left:0;width:200%;height:8px;background:repeating-linear-gradient(90deg,#f6e9cc 0 70px,transparent 70px 170px);animation:move 2.4s linear infinite}.road:after{content:'';position:absolute;top:78%;left:0;width:200%;height:5px;background:repeating-linear-gradient(90deg,#71818f 0 120px,transparent 120px 210px);animation:move 4s linear infinite}.truck{position:absolute;left:50%;bottom:19%;width:min(78vw,950px);aspect-ratio:1000/360;transform:translateX(-50%);filter:drop-shadow(0 12px 3px #162b3b22)}.truck-body{position:absolute;inset:0;width:100%;height:100%;animation:bounce .55s ease-in-out infinite alternate}.wheel{position:absolute;width:10.4%;aspect-ratio:1;bottom:4.4%;animation:spin .75s linear infinite}.wheel.a{left:16.8%}.wheel.b{left:29.4%}.wheel.c{left:74.6%}.player{position:absolute;z-index:20;left:50%;bottom:16px;transform:translateX(-50%);width:min(92vw,460px);padding:12px 17px;border-radius:16px;background:#15232de8;color:white;box-shadow:0 8px 24px #0003;display:flex;align-items:center;gap:14px}.track{flex:1;min-width:0}.track strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track small{font-size:11px;opacity:.75}.progress{width:100%;accent-color:#55e19c;cursor:pointer}.controls{display:flex;align-items:center;gap:8px}.controls button{background:none;border:0;color:white;cursor:pointer;font-size:21px;padding:6px}.controls button:focus-visible{outline:2px solid white;border-radius:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes move{to{background-position-x:-100%}}@keyframes mountains{to{background-position-x:-100vw}}@keyframes passing{from{left:115%}to{left:-20%}}@keyframes bounce{to{transform:translateY(-3px) rotate(-.18deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes clouds{to{transform:translateX(-35vw)}}@media(max-width:650px){.truck{width:106vw;bottom:22%;left:50%}.tree{bottom:26%}.player{bottom:12px}.scene{background:linear-gradient(#42b8f3 0%,#9ddcf8 68%,#9ad167 68%)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}
.intro{position:absolute;z-index:5;top:22%;left:50%;transform:translateX(-50%);width:min(90%,900px);text-align:center;color:#12384c;pointer-events:none}
.intro h1{margin:0 0 16px;font-size:clamp(26px,3.3vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.intro p{margin:0;font-size:clamp(14px,1.55vw,21px);line-height:1.5}
.progress{touch-action:pan-y;min-height:24px;margin:4px 0 0}
@media(max-width:650px){.intro{top:29%;width:92%}.intro h1{font-size:clamp(24px,6vw,36px);margin-bottom:12px}.intro p{font-size:14px}}
@media(max-height:550px) and (min-width:651px){.intro{top:10%}.intro h1{font-size:30px;margin-bottom:6px}.intro p{font-size:14px}}