:root{--ink:#10211b;--paper:#f3f0e7;--lime:#c9f65b;--orange:#ff5c35;--cream:#fffdf6;--muted:#647069;--line:#cdd2c8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-size:22px;font-weight:900;letter-spacing:-1px}.brand span{color:#678900}.status{display:flex;align-items:center;gap:9px;font-size:11px}.status i{width:8px;height:8px;background:#f2a71b;border-radius:50%;box-shadow:0 0 0 4px #f2a71b22}.status strong{letter-spacing:.08em}.status span{color:var(--muted)}main{max-width:1400px;margin:auto;padding:0 4vw 80px}.intro{display:grid;grid-template-columns:1.4fr .8fr;gap:8vw;align-items:end;padding:65px 0 40px}.eyebrow,.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:#5d6c64}.intro h1{font-size:clamp(48px,7vw,92px);line-height:.87;letter-spacing:-.07em;margin:12px 0 22px}.intro h1 em{font-style:normal;color:#6c8f00}.lede{font-size:18px;line-height:1.5;max-width:560px;color:#46534d}.controls{background:var(--ink);color:white;padding:24px;border-radius:4px;box-shadow:8px 8px 0 var(--lime)}label{display:block;font-size:12px;color:#aeb9b2;margin-bottom:18px}select{width:100%;margin-top:8px;padding:12px;background:#20342c;color:white;border:1px solid #496057;border-radius:2px}.range-row{display:flex;align-items:center;gap:15px;margin-top:10px}input[type=range]{width:100%;accent-color:var(--lime)}output{color:var(--lime);font-weight:800}button{cursor:pointer;font:inherit}#optimize{border:0;background:var(--lime);color:var(--ink);font-weight:800;width:100%;padding:15px;text-align:left;display:flex;justify-content:space-between}.workspace{display:grid;grid-template-columns:1.7fr .8fr;gap:18px}.map-card,.decision-card,.metrics,.how{background:var(--cream);border:1px solid var(--line)}.map-card{padding:22px}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.card-head h2{margin:6px 0 0;font-size:20px}.legend{display:flex;gap:6px;align-items:center;font-size:10px}.legend b{display:block;width:70px;height:7px;background:linear-gradient(90deg,#ddf279,#ffbf48,#ff503a)}.map{height:480px;position:relative;overflow:hidden;background:#dfe6d5}.grid{position:absolute;inset:0;background-image:linear-gradient(#82917a22 1px,transparent 1px),linear-gradient(90deg,#82917a22 1px,transparent 1px);background-size:46px 46px}.heat{position:absolute;border-radius:50%;filter:blur(40px);opacity:.7}.h1{width:360px;height:360px;background:#ff4d2e;right:-40px;top:-55px}.h2{width:300px;height:260px;background:#ffbe3d;left:30%;bottom:-70px}.h3{width:240px;height:240px;background:#cfef66;left:-70px;top:10px}.road{position:absolute;background:#f9f7e9cc;box-shadow:0 0 0 1px #8e998744}.r1{width:130%;height:24px;top:38%;left:-15%;transform:rotate(-14deg)}.r2{width:120%;height:20px;top:67%;left:-10%;transform:rotate(9deg)}.r3{height:130%;width:22px;top:-15%;left:35%;transform:rotate(8deg)}.r4{height:130%;width:18px;top:-15%;right:24%;transform:rotate(-11deg)}.route{position:absolute;width:48%;height:45%;border:4px solid;border-color:transparent transparent var(--ink) var(--ink);left:27%;top:30%;transform:rotate(-8deg)}.route-old{border-style:dashed;opacity:.25}.route-new{border-color:transparent transparent #5f7f00 #5f7f00;transform:rotate(18deg);top:19%}.pin{position:absolute;width:34px;height:34px;border:3px solid white;border-radius:50%;background:var(--ink);color:white;font-weight:bold;box-shadow:0 2px 8px #0004}.p1{right:22%;top:23%}.p2{left:42%;top:54%}.p3{left:23%;bottom:17%;background:#6c8f00}.map-note{position:absolute;left:20px;bottom:20px;background:var(--ink);color:white;padding:13px 16px;display:flex;gap:12px;align-items:center}.map-note strong{color:var(--lime);font-size:20px}.map-note span{font-size:12px}.demo-watermark{position:absolute;right:14px;bottom:12px;font-size:10px;font-weight:900;letter-spacing:.16em;color:#20342c99}.decision-card{padding:26px;display:flex;flex-direction:column}.score{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.score strong{font-size:64px;letter-spacing:-5px}.score span{color:var(--muted)}.score p{font-size:12px;line-height:1.6}.score b{color:var(--orange)}.delta{margin:16px 0;padding:10px;background:#edf6d3;font-size:12px}.delta span{font-weight:900;color:#547000}.decision-card h3{font-size:14px;margin:8px 0}.decision-card ul{list-style:none;padding:0;margin:0}.decision-card li{padding:13px 0;border-bottom:1px solid var(--line)}.decision-card li b,.decision-card li span{display:block}.decision-card li b{font-size:13px}.decision-card li span{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}.secondary{margin-top:auto;background:transparent;border:1px solid var(--ink);padding:12px;font-weight:bold}.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}.metrics div{padding:22px;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics span,.metrics strong,.metrics small{display:block}.metrics span{font-size:11px;color:var(--muted)}.metrics strong{font-size:28px;margin:8px 0}.metrics small{font-size:10px;color:#6b8500}.how{margin-top:70px;padding:50px}.how h2{font-size:42px;letter-spacing:-.04em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:45px}.steps div{border-top:2px solid var(--ink);padding-top:15px}.steps b{color:#7a990d}.steps h3{font-size:25px;margin:24px 0 8px}.steps p{color:var(--muted);line-height:1.5}dialog{max-width:520px;border:0;padding:35px;box-shadow:0 20px 70px #0005;background:var(--cream)}dialog::backdrop{background:#10211bcc}.close{float:right;border:0;background:none;font-size:24px}.formula{padding:15px;background:#e9eddf;font-family:monospace;margin:20px 0}.fine{font-size:11px;color:var(--muted)}@media(max-width:850px){.intro,.workspace{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.map{height:390px}.how{padding:30px}.steps{grid-template-columns:1fr}.status span{display:none}}@media(max-width:480px){header,main{padding-left:18px;padding-right:18px}.intro{padding-top:40px}.metrics{grid-template-columns:1fr}.metrics div{border-right:0;border-bottom:1px solid var(--line)}.map-card{padding:12px}.card-head{align-items:flex-start}.legend{display:none}.map{height:350px}}
