:root{--ink:#143b24;--sky:#92e7ff;--soil:#8b4c22;--grass:#3ca83f;--cream:#fff9d9;--orange:#ff7900;--yellow:#ffe44b}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:"Trebuchet MS",Arial,sans-serif;background:var(--sky);color:var(--ink)}
.scene{position:relative;width:100vw;height:100svh;min-height:430px;overflow:hidden;isolation:isolate;background:linear-gradient(#6cdcff 0%,#bff3ff 65%,#86d85d 65%,#43ad3f 77%,#965426 77%,#6c361d 100%)}
.sky-noise{position:absolute;inset:0 0 23%;z-index:-2;opacity:.18;background-image:radial-gradient(white 1px,transparent 1px);background-size:19px 19px}
.sun{position:absolute;top:5%;right:7%;width:clamp(70px,9vw,130px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:4px solid #df9d00;box-shadow:0 0 0 12px rgba(255,228,75,.3),0 0 0 24px rgba(255,228,75,.12);font-size:clamp(2rem,4vw,4rem);transform:rotate(8deg)}
.cloud{position:absolute;filter:drop-shadow(3px 5px 0 rgba(20,59,36,.16));opacity:.95;font-size:clamp(3.4rem,8vw,8rem)}.cloud-one{left:4%;top:7%;transform:rotate(-4deg)}.cloud-two{right:23%;top:17%;font-size:clamp(2.4rem,5vw,5rem);transform:scaleX(-1)}.cloud-three{left:22%;top:26%;font-size:clamp(2rem,4vw,4rem);opacity:.7}
.satellite{position:absolute;left:6%;top:34%;display:flex;align-items:center;gap:.4rem;font-size:clamp(2.2rem,4.5vw,5rem);transform:rotate(-9deg);filter:drop-shadow(3px 4px 0 rgba(20,59,36,.2))}.signal{font:900 clamp(.7rem,1.3vw,1.3rem)/1 monospace;letter-spacing:-.35em;color:#d02e2e;transform:rotate(-30deg)}
.logo-stage{position:absolute;left:50%;top:46%;width:min(58vmin,520px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:5;display:grid;place-items:center}.halo{position:absolute;width:102%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff9ba 0 49%,#ffd22e 49.5% 53%,transparent 53.5%);filter:drop-shadow(0 10px 0 rgba(20,59,36,.18));animation:breathe 5s ease-in-out infinite}.halo:after{content:"";position:absolute;inset:-7%;border:4px dashed rgba(255,121,0,.72);border-radius:48%;transform:rotate(8deg)}.logo{position:relative;z-index:2;width:93%;height:93%;object-fit:contain;filter:drop-shadow(7px 10px 0 rgba(20,59,36,.2))}.status-light{position:absolute;z-index:4;width:clamp(8px,1.1vw,14px);aspect-ratio:1;border-radius:50%;background:#39f05e;border:2px solid var(--ink);box-shadow:0 0 13px #39f05e}.status-one{left:5%;top:38%}.status-two{right:2%;top:53%;background:#ffdf30;box-shadow:0 0 13px #ffdf30}.status-three{left:20%;bottom:4%;background:#f44336;box-shadow:0 0 13px #f44336;animation:blink 1.4s steps(2) infinite}
.wire{position:absolute;z-index:1;width:26vw;height:16vh;border:6px solid #1f4a31;border-color:#1f4a31 transparent transparent;border-radius:50%;bottom:20%}.wire-left{left:18%;transform:rotate(12deg)}.wire-right{right:16%;transform:scaleX(-1) rotate(7deg)}
.left-table{position:absolute;z-index:3;left:1.5%;bottom:18%;width:22vw;height:27vh;min-width:140px;transform:rotate(-2deg)}.clipboard{position:absolute;left:8%;bottom:13%;width:55%;height:90%;display:grid;place-items:center;background:#f4e0ac;border:4px solid #563319;border-radius:7px;box-shadow:7px 8px 0 rgba(39,25,14,.25);font-size:clamp(3.5rem,7vw,7rem);overflow:hidden}.check{position:absolute;font:900 clamp(1rem,2vw,2rem)/1 Arial;color:#13812d}.check-a{right:8%;bottom:16%;transform:rotate(-15deg)}.check-b{left:8%;top:25%;color:#d32222;transform:rotate(11deg)}.rubber-stamp{position:absolute;z-index:2;right:10%;bottom:6%;font-size:clamp(2rem,4vw,4rem);transform:rotate(23deg)}.coffee{position:absolute;right:0;top:3%;font-size:clamp(2rem,4vw,4rem)}.table-edge{position:absolute;left:-10%;right:-4%;bottom:0;height:14%;background:#ba682a;border:4px solid #5f3215;border-radius:5px;box-shadow:0 10px 0 rgba(75,39,17,.28)}
.right-rack{position:absolute;z-index:3;right:2%;bottom:17%;width:19vw;min-width:135px;height:38vh;background:#4b5c5f;border:5px solid #213538;border-radius:8px;box-shadow:9px 10px 0 rgba(20,34,36,.25);padding:6vh 7% 3%;transform:rotate(1deg)}.rack-top{position:absolute;left:50%;top:-11%;transform:translateX(-50%) rotate(9deg);font-size:clamp(2rem,4vw,4rem);filter:drop-shadow(3px 3px 0 white)}.server{position:relative;height:24%;margin-bottom:5%;background:#c8d5d2;border:3px solid #203a3c;box-shadow:inset 0 -5px #8da29e;display:flex;align-items:center;gap:5%;padding:8%}.server i{width:10%;aspect-ratio:1;border-radius:50%;background:#31e450;border:2px solid #1c5226;box-shadow:0 0 7px #31e450}.server i.amber{background:#ffd52c;box-shadow:0 0 7px #ffd52c}.server b{margin-left:auto;font:900 clamp(.45rem,.8vw,.8rem)/1 monospace;letter-spacing:.08em}.server.suspicious{transform:translateX(-5%) rotate(-2deg);background:#eed15b}.padlock{position:absolute;right:-9%;bottom:-8%;font-size:clamp(2.2rem,5vw,5rem);filter:drop-shadow(4px 4px 0 #213538)}
.buried{position:absolute;z-index:2;left:21%;right:21%;bottom:1%;height:19%;border-top:4px dashed rgba(66,29,14,.5)}.case{position:absolute;left:8%;top:17%;font-size:clamp(2.4rem,5vw,5rem);transform:rotate(-8deg);filter:sepia(.4)}.key{position:absolute;right:11%;bottom:4%;font-size:clamp(2rem,4vw,4rem);transform:rotate(42deg)}.floppy{position:absolute;left:48%;bottom:2%;font-size:clamp(1.7rem,3.5vw,3.5rem);transform:rotate(-13deg)}.cable{position:absolute;left:22%;right:21%;top:35%;height:42%;border:5px solid #17251b;border-color:transparent transparent #17251b;border-radius:50%;transform:rotate(-4deg)}
.foreground-grass{position:absolute;z-index:6;bottom:18%;font-size:clamp(2rem,5vw,5rem);filter:drop-shadow(2px 3px 0 rgba(20,59,36,.25))}.grass-a{left:16%;transform:rotate(-12deg)}.grass-b{right:18%;transform:rotate(8deg)}.grass-c{left:53%;bottom:17%;font-size:clamp(1.5rem,3vw,3rem)}
footer{position:absolute;z-index:10;left:0;right:0;bottom:0;min-height:28px;padding:.45rem 1rem;display:flex;justify-content:center;align-items:center;gap:.7rem;background:rgba(38,20,10,.88);border-top:2px solid #c17b43;color:#ffe9cc;font:600 clamp(.52rem,.8vw,.72rem)/1.2 Arial;letter-spacing:.04em;text-align:center}.legal-dot{color:var(--orange)}
@keyframes blink{50%{opacity:.18}}@keyframes breathe{50%{transform:scale(1.025) rotate(-1deg)}}
@media(max-width:700px){.scene{background:linear-gradient(#6cdcff 0%,#bff3ff 63%,#75d451 63%,#43ad3f 74%,#965426 74%,#6c361d 100%)}.logo-stage{top:43%;width:min(78vw,52vh)}.left-table{left:-5%;bottom:20%;width:34vw;height:20vh}.right-rack{right:-4%;bottom:19%;width:29vw;height:28vh;padding-top:4vh}.server b{display:none}.satellite{left:2%;top:25%}.cloud-two{right:4%;top:16%}.cloud-three{display:none}.sun{right:3%;top:4%}.buried{left:7%;right:7%;height:21%;bottom:0}.foreground-grass{bottom:23%}.grass-a{left:8%}.grass-b{right:8%}.grass-c{display:none}.wire-left{left:5%}.wire-right{right:4%}footer{gap:.35rem;flex-wrap:wrap;padding:.35rem .5rem}.legal-dot{display:none}}
@media(max-height:620px) and (min-width:701px){.logo-stage{width:min(52vh,430px);top:44%}.left-table{height:25vh}.right-rack{height:34vh}.cloud-three{display:none}}
@media(max-width:390px){.logo-stage{width:min(82vw,48vh);top:40%}.left-table{bottom:19%;height:18vh}.right-rack{bottom:18%;height:24vh}.satellite{display:none}.cloud-one{left:-4%;top:9%}.foreground-grass{bottom:21%}}
@media(prefers-reduced-motion:reduce){.halo,.status-three{animation:none}}