:root{--ink:#17342e;--teal:#1e7668;--mint:#c8e6d2;--cream:#f6f1e8;--paper:#fffdf8;--coral:#ec795d;--gold:#e8b84c;--line:#d9e1dc}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Sans",sans-serif}button,a{font:inherit;color:inherit}header{height:70px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 25px}.brand{text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:bold}.brand span{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 50% 9px;background:var(--ink);color:white}.title{margin:auto;font-weight:bold}.title i{display:inline-block;width:8px;height:8px;background:var(--coral);border-radius:50%}header button{border:1px solid var(--line);background:white;border-radius:25px;padding:7px 14px;cursor:pointer}main{height:calc(100vh - 70px);display:flex}aside{width:245px;background:var(--ink);color:white;padding:24px 17px;display:flex;flex-direction:column}.profile{display:flex;gap:10px;align-items:center;padding-bottom:25px;border-bottom:1px solid #ffffff24}.profile>span{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:var(--coral);font-size:10px;font-weight:bold}.profile div{flex:1}.profile b,.profile em{display:block}.profile small{display:block;height:5px;background:#ffffff26;border-radius:5px;margin:5px 0}.profile small i{display:block;height:100%;width:0;background:var(--gold);transition:.5s}.profile em{font-size:9px;color:#adc2bc;font-style:normal}aside>p,.badges p{font-size:9px;letter-spacing:.16em;color:#a9beb8;margin:27px 10px 12px}nav{display:grid;gap:5px}nav button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#acc0bb;padding:10px;text-align:left;border-radius:8px}nav button.active{background:#ffffff15;color:white}nav button.done{color:var(--mint)}nav button i{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff32;border-radius:50%;font-style:normal}nav button.done i{background:var(--teal);border:0}nav button span{font-size:12px;font-weight:bold}nav button small{font-size:9px;font-weight:normal}.badges{margin-top:auto}.badges span{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:8px;border:1px dashed #ffffff55;border-radius:50%;color:#ffffff66}.badges span.earned{background:var(--gold);color:var(--ink);border:0}.stage{flex:1;overflow:auto;padding:50px;display:grid;place-items:center}.lesson{width:min(900px,100%)}.eyebrow{font-size:10px;color:var(--teal);letter-spacing:.15em;font-weight:bold}h1,h2,h3{font-family:Manrope;margin:0;line-height:1.08}h1{font-size:clamp(50px,6vw,78px);letter-spacing:-.05em}h1 em{font-style:normal;color:var(--coral)}.lead{font-size:18px;max-width:600px;line-height:1.6}.primary{border:0;background:var(--ink);color:white;border-radius:5px;padding:14px 21px;font-weight:bold;cursor:pointer}.welcome-grid{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:50px}.adventure-map{min-height:430px;background:var(--mint);border-radius:50% 50% 15px 15px;position:relative}.route{position:absolute;width:75%;height:60%;left:12%;top:19%;border:3px dashed var(--teal);border-radius:50%;transform:rotate(-12deg)}.map-point{position:absolute;display:grid;place-items:center;width:55px;height:55px;background:white;border:6px solid var(--teal);border-radius:50%;font-weight:bold}.p1{left:12%;bottom:18%}.p2{left:44%;top:18%}.p3{right:10%;bottom:20%}.wave{position:absolute;font-size:60px;left:40%;top:40%;transform:rotate(-12deg)}.crew-intro{text-align:center;margin-bottom:30px}.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.crew-card{border:1px solid var(--line);background:white;border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:.25s}.crew-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #17342e18}.crew-card.selected{border:2px solid var(--teal);background:#eff8f3}.crew-face{width:80px;height:80px;display:grid;place-items:center;border-radius:50%;background:var(--mint);font-size:32px;margin:auto}.crew-card:nth-child(2) .crew-face{background:#ffd6cc}.crew-card:nth-child(3) .crew-face{background:#fae4ad}.crew-card p{font-size:12px}.crew-detail{min-height:75px;background:var(--ink);color:white;border-radius:10px;padding:17px;margin:18px 0}.scenario{max-width:720px;margin:auto}.scenario-art{height:175px;background:var(--gold);border-radius:12px;display:grid;place-items:center;font-size:70px;margin:20px 0}.choices{display:grid;gap:10px}.choices button{border:1px solid var(--line);background:white;padding:16px;border-radius:8px;text-align:left;cursor:pointer}.choices button:hover{border-color:var(--teal);background:#f0f8f4}.feedback{padding:17px;border-left:4px solid var(--teal);background:#e9f5ef;margin:15px 0}.feedback.wrong{border-color:var(--coral);background:#fff0ec}.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:25px 0}.task{background:white;border:1px solid var(--line);padding:16px;border-radius:8px;display:flex;gap:11px;cursor:pointer}.task input{accent-color:var(--teal);width:18px}.celebrate{text-align:center}.trophy{font-size:80px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.summary div{background:white;border:1px solid var(--line);padding:17px;border-radius:8px}.summary strong,.summary span{display:block}.summary strong{font:700 25px Manrope}.summary span{font-size:10px}dialog{border:0;border-radius:12px;padding:30px}dialog::backdrop{background:#102722cc}dialog a,dialog button{display:inline-block;text-decoration:none;border:1px solid var(--line);padding:10px;border-radius:5px;background:white;margin-right:7px}@media(max-width:800px){aside{width:78px;padding:15px 8px}.profile div,aside>p,nav button span,.badges{display:none}.profile{justify-content:center}.stage{padding:30px 20px}.welcome-grid{grid-template-columns:1fr}.adventure-map{min-height:320px}.crew-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}}@media(max-width:500px){.title{font-size:12px}header{padding:0 10px}.stage{padding:25px 14px}.summary{grid-template-columns:1fr}.adventure-map{display:none}aside{display:none}}