:root{
  --blue:#0b3d6e;--blue2:#0f6fae;--green:#118149;--red:#d73a31;--cyan:#10a8c7;--bg:#eef8fb;--card:#ffffff;--text:#102033;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#e8f7ff,#f4fbf7)}
.hero{padding:22px 26px 18px;background:linear-gradient(135deg,#082b55,#075b8c 58%,#0a8a78);color:white;text-align:center;border-bottom:6px solid #0bc1d7}
.logos{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.logo-pill{background:white;color:#10255d;border-radius:16px;padding:10px 18px;font-weight:900;box-shadow:0 8px 24px #0003}.science{color:#0057a9}.gov{color:#153d82}.hero h1{font-size:clamp(2rem,4vw,4.2rem);margin:8px 0;text-transform:uppercase;letter-spacing:.5px}.subtitle{max-width:1050px;margin:0 auto;font-size:1.05rem;line-height:1.5}
.layout{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:18px;padding:18px;max-width:1480px;margin:auto}.panel,.sim-card{background:var(--card);border-radius:20px;padding:18px;box-shadow:0 10px 30px #0d3d5a18;border:1px solid #cfe4ef}.info-card h2,.panel h2{margin:0 0 10px;color:var(--blue);font-size:1.25rem}.problem h2{color:var(--red)}.objective h2{color:var(--green)}.sim-card{grid-column:1/3;grid-row:2/5}.sim-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.sim-header h2{margin:0;color:var(--blue)}.sim-header p{margin:4px 0 0}.badges span{display:inline-block;background:#e7f6ff;color:#075b8c;border:1px solid #a5d9ef;border-radius:999px;padding:7px 10px;font-weight:800;margin:2px}canvas{width:100%;height:auto;border-radius:18px;background:#70c8e8;border:4px solid #d7f0fa;display:block}.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-weight:800}.legend i{width:18px;height:18px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px}.legend .oil{background:#111}.legend .powder{background:#b97728}.legend .robot{background:#ff7b2b}.legend .path{background:#f8d34d;border-radius:4px}.controls{grid-column:3;grid-row:2}.btn-row{display:flex;gap:8px;margin-bottom:14px}button{border:0;border-radius:12px;background:var(--green);color:white;font-weight:900;padding:12px 14px;cursor:pointer;box-shadow:0 7px 15px #0002}button.secondary{background:var(--blue2)}button.danger{background:var(--red)}label{display:block;margin-top:12px;font-weight:800}input[type=range]{width:100%;accent-color:var(--blue2)}.switchline{display:flex;gap:8px;align-items:center;margin:14px 0}.switchline label{margin:0}.hint{font-size:.88rem;color:#667}.telemetry{grid-column:3;grid-row:3/5}.phone{background:#0a1625;color:white;border-radius:28px;padding:16px;border:8px solid #222;max-width:330px;margin:auto}.phone-top{text-align:center;font-weight:900;border-bottom:1px solid #ffffff33;padding-bottom:8px}.map{height:160px;border-radius:16px;background:radial-gradient(circle at 20% 35%,#64d7ff 0 6px,transparent 7px),linear-gradient(135deg,#e7f5ee,#bde7fb);margin:12px 0;position:relative;overflow:hidden}.map:before{content:"";position:absolute;left:20px;right:20px;top:80px;border-top:7px dashed #179a61;transform:rotate(-18deg)}.map:after{content:"📍";font-size:30px;position:absolute;right:50px;top:32px}.stat{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff1f;padding:8px 0;font-size:.9rem}.stat b{color:#61ff9d}.metrics{grid-column:1/2}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric-grid div{background:#f0f8ff;border-radius:14px;padding:12px}.metric-grid span{display:block;color:#517085;font-size:.86rem}.metric-grid strong{font-size:1.5rem;color:var(--blue)}.formula{background:#fff7df;padding:10px;border-radius:12px;border-left:5px solid #e6b72e}.bar{height:22px;background:#e6edf2;border-radius:999px;overflow:hidden}.bar span{display:block;width:0%;height:100%;background:linear-gradient(90deg,#21a660,#80d53d);transition:.4s}.arduino{grid-column:2/3}.board{height:210px;background:#0e72b8;border-radius:20px;position:relative;box-shadow:inset 0 0 0 8px #07538e;margin:10px 0;color:white}.chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#17344a;border-radius:10px;padding:18px 26px;font-weight:900}.pins{position:absolute;top:24px;display:flex;flex-direction:column;gap:16px;font-size:.85rem;font-weight:800}.pins span{background:#ffffff24;border-radius:8px;padding:6px 8px}.pins.left{left:16px}.pins.right{right:16px}.process{grid-column:1/3}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.steps div{background:linear-gradient(180deg,#e9f6ff,#fff);border-radius:16px;padding:12px;text-align:center;border:1px solid #d2e8f7}.steps b{display:inline-grid;place-items:center;background:var(--green);color:white;border-radius:50%;width:34px;height:34px;margin-bottom:6px}.steps span{display:block;font-weight:900}.log{grid-column:3;grid-row:5/7}.log #log{height:250px;overflow:auto;background:#071b2c;color:#d6f7ff;padding:12px;border-radius:14px;font-family:Consolas,monospace;font-size:.88rem}.log p{margin:0 0 8px}.info-card{min-height:150px}footer{text-align:center;background:#082b55;color:white;font-weight:900;padding:18px;margin-top:12px}
@media(max-width:1050px){.layout{grid-template-columns:1fr}.sim-card,.controls,.telemetry,.metrics,.arduino,.process,.log{grid-column:1;grid-row:auto}.steps{grid-template-columns:1fr 1fr}.sim-header{display:block}}
.area-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.area-controls label{font-size:.86rem;margin-top:8px}.area-controls input{width:100%;border:1px solid #b8d8ea;border-radius:10px;padding:9px;font-weight:800;color:var(--blue);background:#f6fbff}.area-box{margin-top:10px;background:#eaf8ef;border:1px solid #bde8cf;border-radius:12px;padding:10px;font-weight:900;color:#0b6b3e}.btn-row button{flex:1}.metric-grid{grid-template-columns:1fr 1fr}.metric-grid div:nth-child(n+5){background:#f6fff4}.phone .stat:last-child b{color:#7bdcff}
@media(max-width:650px){.area-controls{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}}