@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#eef1eb;--ink:#172d2a;--muted:#65736b;--accent:#d9f675;--line:#d6ddd3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}header{padding:25px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.brand{letter-spacing:2px}.brand span,.tag{font-size:11px;letter-spacing:1.5px;color:var(--muted)}main{max-width:1440px;padding:40px 5%;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted)}h1{font:500 clamp(36px,4.5vw,60px)/1.05 'Space Grotesk',Arial;margin:18px 0;letter-spacing:-2.5px}p{line-height:1.6;color:var(--muted);font-size:14px}.badge{display:flex;gap:16px;align-items:center;font:400 90px 'Space Grotesk',Arial}.badge span{font:11px/1.6 Arial;letter-spacing:2px}nav{display:flex;border-bottom:1px solid var(--line);gap:8px;margin-bottom:24px}button,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:11px 13px;color:var(--ink);background:#fff;font-size:12px;font-weight:600}button:hover{background:#e6eddf}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #80a52d;outline-offset:2px}nav button{border:0;background:none;border-radius:0;padding:16px 20px}nav .selected{border-bottom:3px solid var(--ink)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.mapcard{background:#142e2d;border-radius:12px;overflow:hidden;align-self:start;color:#c1d1c9;position:sticky;top:16px}.maphead{display:flex;justify-content:space-between;padding:22px 24px;font-size:10px;letter-spacing:1.5px}#status{color:var(--accent)}canvas{width:100%;display:block;aspect-ratio:900/650}.telemetry{display:grid;grid-template-columns:repeat(4,1fr);margin:0 22px;padding:21px 0;border-top:1px solid #35504b;font-size:9px;letter-spacing:1px}.telemetry strong{display:block;font:500 21px 'Space Grotesk',monospace;color:#f2f5ea;margin-top:9px}.mapfoot{display:flex;gap:20px;padding:0 22px 22px;font-size:10px;line-height:1.6}.mapfoot i{display:inline-block;background:var(--accent);width:6px;height:6px;border-radius:50%;margin-right:5px}.card{padding:22px;background:#fafbf6;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}h2{font:500 22px/1.3 'Space Grotesk',Arial;margin:14px 0}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}label{display:block;color:var(--muted);font-size:10px}select{display:block;width:100%;margin-top:6px;padding:9px 3px;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:12px}.small{font-size:11px;margin-bottom:0}.heading{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12px}.heading strong{font:500 34px 'Space Grotesk',monospace}.buttons{display:flex;gap:8px;margin-top:12px}.buttons button{flex:1}input[type=range]{width:100%;accent-color:#355c46;margin:17px 0}.primary{background:var(--ink);color:white;border-color:var(--ink)}.primary:hover{background:#36554d}.coach{background:var(--accent);padding:20px;border-radius:8px;font-size:13px;line-height:1.6}.choices{display:grid;gap:8px}.lesson{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:40px 0}.lesson article>span{font-size:10px;letter-spacing:2px;color:var(--muted)}h3{font:500 20px 'Space Grotesk',Arial}details{border-top:1px solid var(--line);padding:20px 0;font-size:13px}summary{cursor:pointer}a{color:inherit}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;font-size:10px;letter-spacing:1px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:900px){.layout{grid-template-columns:1fr}.mapcard{position:static}.badge,.tag{display:none}.lesson{grid-template-columns:1fr;gap:10px}main{padding:25px 5%}.telemetry strong{font-size:17px}.brand span{font-size:9px}footer span{max-width:50%}}
