@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
  --sky:#91c9ed; --sky-light:#d8f0fb; --ink:#24372e; --muted:#62776a;
  --grass:#76b94f; --grass-dark:#4e8c3c; --dirt:#9b6948; --dirt-dark:#704b37;
  --cream:#fff8e8; --paper:#fffdf5; --yellow:#f6d66b; --line:#e8e0c9;
  --pixel-shadow: 0 7px 0 rgba(49,73,52,.16);
  --font:'Nunito','Microsoft YaHei','PingFang SC',sans-serif;
  --mono:'DM Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);line-height:1.7;background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.topbar{height:74px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,245,.94);border-bottom:2px solid #e9e3d2;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:11px}
.brand-cube,.footer-cube{width:27px;height:27px;display:inline-block;background:linear-gradient(135deg,#9ad46c 0 48%,#70b64b 49%);border:2px solid #416f3b;box-shadow:3px 3px 0 #d5c9a7;position:relative}
.brand-cube:after{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:#c3e99a;opacity:.9}
.brand-name{font-weight:900;letter-spacing:.12em;font-size:20px}
.brand-year{font:10px var(--mono);letter-spacing:.12em;color:#879387;border-left:1px solid #d9d5c6;padding-left:12px;margin-left:2px}
.top-status{font:11px var(--mono);letter-spacing:.08em;color:#58754e;background:#edf5df;border:1px solid #d4e5c3;padding:7px 12px}
.status-dot,.loading-tag span,.label-dot{display:inline-block;width:7px;height:7px;background:#83bf54;margin-right:7px;box-shadow:0 0 0 3px #dceccf}
.hero{min-height:650px;position:relative;overflow:hidden;background:linear-gradient(180deg,#8fc9ed 0%,#c4e5f5 63%,#e5f2d8 100%);display:grid;grid-template-columns:minmax(300px, .9fr) minmax(380px,1.1fr);align-items:center;padding:70px clamp(28px,8vw,120px) 112px;gap:30px}
.hero:after{content:"";position:absolute;bottom:0;left:0;right:0;height:85px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.15));pointer-events:none}
.hero-copy{position:relative;z-index:2;max-width:520px;padding-bottom:28px}
.eyebrow,.section-kicker{font:11px var(--mono);letter-spacing:.15em;color:#557a5b}
.eyebrow{display:flex;align-items:center;margin-bottom:20px}
.tiny-cube{width:12px;height:12px;background:#f6d66b;border:2px solid #927c38;margin-right:10px;box-shadow:2px 2px 0 rgba(50,70,45,.18)}
h1{font-size:clamp(40px,5.6vw,72px);line-height:1.13;letter-spacing:-.045em;margin:0 0 22px;font-weight:900;color:#203b32}
h1 span{color:#fffdf3;text-shadow:3px 4px 0 #6c9e67}
.intro{font-size:16px;color:#426356;line-height:1.95;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.pixel-btn{border:0;cursor:pointer;padding:13px 19px;font-size:14px;font-weight:900;display:inline-flex;align-items:center;gap:9px;transition:transform .16s,box-shadow .16s;box-shadow:0 5px 0 rgba(40,65,47,.2);border-radius:2px}
.pixel-btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(40,65,47,.17)}
.pixel-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(40,65,47,.2)}
.primary{background:#f7d86e;color:#4d4a2d;border:2px solid #ad913d}
.secondary{background:#fffdf2;color:#526c56;border:2px solid #9dbb91}
.btn-icon{font-size:17px}
.click-note{font:14px var(--mono);font-weight:500;color:#64816f;margin:19px 0 0;letter-spacing:.03em}
.world{height:430px;max-width:650px;width:100%;position:relative;align-self:end;margin:0 auto 0;isolation:isolate;filter:drop-shadow(0 15px 0 rgba(61,103,70,.09))}
.world-label{position:absolute;top:0;right:0;font:10px var(--mono);letter-spacing:.12em;color:#557b6a;background:rgba(255,255,255,.48);padding:7px 10px;border:1px solid rgba(255,255,255,.7);z-index:4}
.label-dot{width:6px;height:6px}
.sun{position:absolute;width:66px;height:66px;right:20%;top:13%;background:#ffe68a;box-shadow:0 0 0 9px rgba(255,235,155,.25),0 0 0 20px rgba(255,235,155,.13)}
.cloud{position:absolute;height:18px;width:80px;background:rgba(255,255,255,.62);box-shadow:18px -12px 0 2px rgba(255,255,255,.62),40px 0 0 rgba(255,255,255,.62),57px -7px 0 -1px rgba(255,255,255,.62)}
.cloud-a{top:16%;left:9%;transform:scale(.8)}.cloud-b{top:36%;right:4%;transform:scale(.55)}
.mountain{position:absolute;bottom:93px;clip-path:polygon(0 100%,50% 0,100% 100%);background:#8bbd9d}
.mountain-back{width:60%;height:230px;left:18%;background:#8eb6a0;opacity:.72}
.mountain-front{width:49%;height:175px;left:42%;background:#6f9f83;opacity:.9}
.mountain:after{content:"";position:absolute;top:0;left:35%;width:30%;height:40%;background:#f4f5e6;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ground{position:absolute;left:0;right:0}
.ground-top{height:80px;bottom:65px;background:linear-gradient(#79bd50 0 18px,#8bcb5c 18px 100%);border-top:5px solid #a2d66a}
.ground-mid{height:72px;bottom:0;background:repeating-linear-gradient(90deg,#9b704e 0 48px,#8e6447 48px 96px);border-top:4px solid #704c37}
.ground-deep{height:24px;bottom:-18px;background:#684934}
.tree{position:absolute;bottom:132px;z-index:2}
.tree-left{left:11%;transform:scale(.83)}
.tree-right{right:12%;transform:scale(1.05)}
.trunk{position:absolute;left:29px;top:62px;width:24px;height:82px;background:#93613d;border:4px solid #694b35;box-shadow:inset 6px 0 #ad794b}
.leaves{position:absolute;left:0;top:0;width:84px;height:82px;background:#579b46;border:5px solid #3d773d;box-shadow:inset 10px 0 #75b952,inset -10px -10px #477f3d}
.leaves:before,.leaves:after{content:"";position:absolute;background:#75b952;width:35px;height:30px;border:4px solid #3d773d}
.leaves:before{top:-23px;left:20px}.leaves:after{bottom:-12px;right:-16px}
.little-house{position:absolute;z-index:3;bottom:139px;left:42%;width:116px;height:108px}
.roof{position:absolute;top:0;left:-9px;width:134px;height:47px;background:#9d6344;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 4px 0 #694a38)}
.house-wall{position:absolute;bottom:0;left:8px;width:100px;height:67px;background:#e6c994;border:5px solid #986c4a;box-shadow:inset 9px 0 #f5dfb1}
.window{position:absolute;left:12px;top:13px;width:22px;height:22px;background:#83c6d9;border:4px solid #79583d;box-shadow:inset 0 0 0 2px #c8e9e7}
.door{position:absolute;right:11px;bottom:0;width:25px;height:43px;background:#9c6b43;border:4px solid #684b36;border-bottom:0}
.flower{position:absolute;bottom:140px;color:#f7d66e;text-shadow:2px 2px #fff;font-size:19px;z-index:4}
.flower-a{left:32%}.flower-b{right:29%;color:#f2a6a1}
.pixel-spark{position:absolute;color:#fff7ce;font-size:24px;z-index:3;animation:twinkle 2.5s infinite}
.spark-a{top:27%;left:38%}.spark-b{top:44%;right:18%;animation-delay:1s}
.grass{position:absolute;bottom:139px;width:5px;height:15px;background:#4f963f;z-index:3;box-shadow:8px 5px #69ad49}
.grass-a{left:22%}.grass-b{right:38%}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:.17em;color:#668a7a;white-space:nowrap}
.scroll-cue span{font-size:15px;margin-left:8px}
.section-wrap{width:min(1080px,100%);margin:0 auto;padding:100px 32px}
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;margin-top:24px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.25;letter-spacing:-.035em;margin:0 0 22px;font-weight:900}
.section-text{max-width:440px;color:#52665a;font-size:15px;margin:0 0 14px}
.section-text strong{color:#477e43;font-size:18px}
.muted{color:#879187}
.number-card{background:#f5efd9;border:3px solid #d4c8a5;padding:27px 30px;box-shadow:8px 8px 0 #e7dec4;position:relative}
.number-card:before{content:"";position:absolute;inset:7px;border:1px dashed #d0c29a;pointer-events:none}
.number-top{display:flex;justify-content:space-between;color:#8a896d;font:10px var(--mono);letter-spacing:.12em;position:relative}
.number-big{text-align:center;font-size:clamp(46px,7vw,68px);font-weight:900;letter-spacing:.09em;color:#547d4a;line-height:1.2;margin-top:20px}
.number-equals{text-align:center;color:#a28a54;font:12px var(--mono);letter-spacing:.18em}
.number-pieces{display:flex;justify-content:center;gap:12px;margin:26px 0 17px;position:relative}
.number-pieces div{background:#fffaf0;border:2px solid #d7c99f;min-width:78px;text-align:center;padding:9px 12px;box-shadow:3px 3px 0 #dfd4b8}
.number-pieces b,.number-pieces span{display:block}
.number-pieces b{font-size:19px;color:#587c4c}.number-pieces span{font:10px var(--mono);color:#958b6e}
.number-foot{text-align:center;color:#8b846b;font:10px var(--mono);letter-spacing:.08em}
.construction{background:#eaf2df;border-top:2px solid #dce8cf;border-bottom:2px solid #dce8cf}
.construction-inner{padding-top:82px;padding-bottom:76px}
.construction-card{margin-top:25px;background:#fffdf5;border:2px solid #d7dfc9;box-shadow:8px 8px 0 #d5e2c9;padding:38px 6%;display:flex;align-items:center;gap:55px}
.workbench{width:150px;height:120px;flex:none;position:relative}
.bench-top{position:absolute;left:9px;top:25px;width:130px;height:39px;background:#bd8c58;border:4px solid #79583a;box-shadow:inset 0 8px #d9ac72}
.bench-front{position:absolute;left:9px;top:64px;width:130px;height:27px;background:#936b47;border:4px solid #79583a}
.bench-leg{position:absolute;top:91px;width:15px;height:22px;background:#805b3d;border:3px solid #684a34}
.leg-one{left:20px}.leg-two{right:20px}
.tool-pick{position:absolute;right:3px;top:0;color:#7c9e70;font-size:46px;transform:rotate(-35deg);font-weight:900}
.construction-copy{flex:1}
.loading-tag{font:10px var(--mono);color:#75906c;letter-spacing:.14em;margin-bottom:10px}
.loading-tag span{width:6px;height:6px}
.construction-copy h2{font-size:clamp(24px,3vw,34px);margin-bottom:9px}
.construction-copy p{font-size:14px;color:#718071;margin:0 0 22px}
.loading-line{height:9px;background:#e8eddf;border:1px solid #d7e0cb;overflow:hidden}
.loading-line span{display:block;width:35%;height:100%;background:repeating-linear-gradient(90deg,#79b85b 0 12px,#9bce75 12px 24px);animation:loading 3.8s ease-in-out infinite}
@keyframes loading{0%{transform:translateX(-105%)}100%{transform:translateX(290%)}}
.loading-caption{display:flex;justify-content:space-between;color:#9aa391;font:9px var(--mono);letter-spacing:.08em;margin-top:8px}
.signoff{text-align:center;color:#91a08c;font:9px var(--mono);letter-spacing:.2em;margin-top:30px}
.footer{background:#283d32;color:#dbe7d3;padding:25px 32px}
.footer-inner{max-width:1080px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.12em}
.footer-cube{width:17px;height:17px;box-shadow:2px 2px 0 #17271f}
.footer-brand small{font:10px var(--mono);color:#9eaf9b;letter-spacing:0}
.heart{color:#f1c96a;margin-left:4px}
.copyright{font:9px var(--mono);letter-spacing:.08em;color:#9eaf9b}
@media(max-width:900px){
 .hero{grid-template-columns:1fr;gap:25px;padding-top:70px;padding-bottom:90px}
 .hero-copy{max-width:650px;margin:auto;text-align:center;padding-bottom:0}
 .eyebrow,.hero-actions{justify-content:center}
 .world{height:390px;max-width:620px}
 .about-grid{gap:35px}
}
@media(max-width:620px){
 .topbar{height:62px;padding:0 18px}.brand-name{font-size:18px}.brand-year{font-size:8px;padding-left:8px}.top-status{font-size:9px;padding:5px 8px}
 .hero{padding:55px 20px 76px;min-height:auto;display:block}
 h1{font-size:clamp(39px,11vw,56px);margin-bottom:16px}
 .intro{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch;max-width:290px;margin:auto}
 .pixel-btn{justify-content:center}.click-note{font-size:14px}
 .world{height:285px;margin-top:30px;transform:scale(.98);transform-origin:top center}
 .world-label{font-size:8px}.sun{width:43px;height:43px}
 .mountain{bottom:70px}.mountain-back{height:155px}.mountain-front{height:120px}
 .ground-top{height:60px;bottom:47px}.ground-mid{height:55px}.ground-deep{height:20px}
 .tree{bottom:100px;transform:scale(.65);transform-origin:bottom center}.tree-left{left:5%}.tree-right{right:4%;transform:scale(.72)}
 .little-house{bottom:100px;transform:scale(.72);transform-origin:bottom center;left:39%}
 .flower{bottom:98px}.grass{bottom:98px}
 .section-wrap{padding:70px 22px}
 .about-grid{grid-template-columns:1fr;gap:28px}
 .number-card{padding:23px 18px}
 .number-pieces{gap:8px}.number-pieces div{min-width:0;flex:1;padding:8px 5px}
 .construction-inner{padding-top:65px;padding-bottom:58px}
 .construction-card{padding:26px 20px;display:block;text-align:center}
 .workbench{margin:0 auto 18px;transform:scale(.8);height:100px}
 .loading-caption{font-size:8px}
 .footer-inner{flex-direction:column;text-align:center;gap:8px}
 .desktop-only{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}