*{box-sizing:border-box}
:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#237bc1;font-synthesis:none}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
.hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#328fe1}
.landscape,.shade{position:absolute;inset:0;pointer-events:none}
.landscape{z-index:-3;overflow:hidden;container-type:size}
.world{position:absolute;width:max(100cqw,177.7778cqh);height:max(56.25cqw,100cqh);left:50%;top:50%;transform:translate(-50%,-50%);background:url('assets/landscape.png') 0 0/100% 100% no-repeat}
.scenery{display:block;position:absolute;bottom:0;width:100%;height:81%;object-fit:fill;mask-image:linear-gradient(transparent,#000 4%)}
.laptop-code{position:absolute;left:76.7%;top:65.1%;width:6.4%;height:6.1%;margin:0;overflow:hidden;color:#a4bcc7;font:clamp(3px,.31vw,6px)/1.28 ui-monospace,monospace;transform:skewX(-12deg);opacity:.82}
.laptop-code span{color:#94a8e5}.laptop-code i{color:#c3c998;font-style:normal}
.shade{z-index:-1;background:linear-gradient(90deg,rgba(6,31,40,.25),transparent 70%),linear-gradient(0deg,rgba(4,27,27,.33),transparent 34%)}
.header{height:9.1svh;min-height:70px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}
.wordmark{font-size:20px;letter-spacing:-1.1px;text-decoration:none;color:white}
.button{appearance:none;border:1px solid #e1e5cc;border-radius:4px;background:#fcffed;color:#29312c;display:inline-flex;align-items:center;justify-content:space-between;font:14px Arial,Helvetica,sans-serif;box-shadow:0 2px 3px #1526272b;transition:background .18s ease,transform .18s ease}
.button:hover{background:#fff}
.button:focus-visible,.wordmark:focus-visible{outline:3px solid white;outline-offset:5px}
.hello{width:124px;min-height:44px;padding:0 16px}
.intro{position:relative;margin-left:5%;padding-top:10.6svh;width:max-content;max-width:90%}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:2.3px;color:#deebd3;margin:0 0 30px}
h1{font-size:clamp(48px,5.05vw,94px);font-weight:400;letter-spacing:-.071em;line-height:1.1;margin:0}
h1 span{display:block}
h1 span+span{margin-top:.08em}
.description{font-size:clamp(14px,.96vw,16px);line-height:1.6;margin:18px 0 28px;color:#e8eee8}
.explore{width:194px;min-height:50px;padding:0 16px}
.cloud-track{position:absolute;pointer-events:none;will-change:transform}
.cloud-track img{display:block;width:100%;height:100%;object-fit:contain}
.cloud-track-one{width:61%;height:38%;left:3%;top:3%;animation:cloud-drift 420s linear infinite}
.cloud-track-two{width:29%;height:19%;left:55%;top:27%;animation:cloud-drift-small 588s linear infinite}
.canopy{position:absolute;width:49%;height:57%;object-fit:contain;object-position:top right;right:0;top:0;filter:url(#foliage-composite);transform-origin:95% 5%;animation:wind 19s ease-in-out infinite;will-change:transform}
.robot{position:absolute;left:91.5%;top:69.3%;width:8%;aspect-ratio:1;pointer-events:none}
.sprite{position:absolute;background-image:url('assets/robot-parts.png');background-repeat:no-repeat;background-size:200% 200%;width:100%;height:100%}
.robot-base{background-position:0 0;left:-43.38%;top:-51.04%}
.lower-pivot{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;animation:lower-arm 12s ease-in-out infinite}
.robot-lower{background-position:100% 0;left:-44.5%;top:-81.34%}
.upper-pivot{position:absolute;left:0;top:-57.895%;width:100%;height:100%;transform-origin:0 0;animation:upper-arm 12s ease-in-out infinite}
.robot-upper{background-position:0 100%;left:-45.77%;top:-82.46%}
.claw-pivot{position:absolute;left:0;top:-59.17%;width:100%;height:100%;transform-origin:0 0;animation:claw 12s ease-in-out infinite}
.robot-claw{background-position:100% 100%;left:-41.47%;top:-24.08%}
@keyframes cloud-drift{from{transform:translateX(-110%)}to{transform:translateX(170%)}}
@keyframes cloud-drift-small{from{transform:translateX(-290%)}to{transform:translateX(165%)}}
@keyframes wind{0%,32%,62%,100%{transform:rotate(0deg)}36%{transform:rotate(.28deg)}40%{transform:rotate(-.17deg)}44%{transform:rotate(.2deg)}49%{transform:rotate(-.09deg)}54%{transform:rotate(.06deg)}}
@keyframes lower-arm{0%,18%,100%{transform:rotate(22deg)}38%,58%{transform:rotate(-20deg)}76%,84%{transform:rotate(12deg)}}
@keyframes upper-arm{0%,18%,100%{transform:rotate(-102deg)}38%,58%{transform:rotate(-120deg)}76%,84%{transform:rotate(-102deg)}}
@keyframes claw{0%,18%,100%{transform:rotate(80deg) scale(.65)}38%,58%{transform:rotate(140deg) scale(.65)}76%,84%{transform:rotate(90deg) scale(.65)}}
@media(max-aspect-ratio:16/9){.world{left:auto;right:0;transform:translateY(-50%)}}
@media(min-aspect-ratio:2/1){.hero{min-height:650px}.intro{padding-top:70px}}
@media(max-aspect-ratio:4/3) and (min-width:701px){h1{font-size:6vw}.intro{padding-top:9svh}}
@media(max-width:700px){
 .hero{min-height:max(100svh,740px)}
 .header{min-height:74px;height:74px;padding:0 6%}
 .wordmark{font-size:20px}
 .hello{min-height:42px;width:114px;font-size:13px}
 .intro{margin-left:6%;max-width:88%;padding-top:55px}
 .eyebrow{font-size:11px;margin-bottom:25px;letter-spacing:2px}
 h1{font-size:clamp(32px,7.9vw,55px);line-height:1.17;letter-spacing:-.065em}
 h1 span+span{margin-top:0}
 .description{font-size:14px;line-height:1.7;margin:24px 0}
 .explore{font-size:13px;min-height:47px;width:174px}
 .world{left:auto;right:-6%;transform:translateY(-50%)}
 .scenery{height:100%;mask-image:none}
 .canopy{width:31%;height:27%;top:-12%}
 .cloud-track{top:36%;height:15%}
 .robot{top:63.8%}
 .laptop-code{font-size:4.5px;top:56.7%;height:8.1%}
 .shade{background:linear-gradient(180deg,rgba(6,31,40,.3),transparent 65%),linear-gradient(0deg,rgba(4,27,27,.22),transparent 35%)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.cloud-track-one{transform:translateX(0)}.cloud-track-two{transform:translateX(0)}.lower-pivot{transform:rotate(22deg)}.upper-pivot{transform:rotate(-102deg)}.claw-pivot{transform:rotate(80deg) scale(.65)}}
.motion-paused *{animation-play-state:paused!important}