:root{--ink:#182c29;--muted:#52655f;--paper:#f5f6ef;--green:#13634b;--lime:#d7f280;--line:#d4ded2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,sans-serif}a{color:var(--green)}button,input,textarea,select{font:inherit}button,.button,.file{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:9px 14px;text-decoration:none;display:inline-block}button:hover,.button:hover{border-color:var(--green);background:#edf5e6}button:disabled{opacity:.55;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #cd7a25;outline-offset:3px}header{display:flex;justify-content:space-between;padding:24px 4vw;border-bottom:1px solid var(--line)}header a{text-decoration:none;font-weight:750}header span{font-weight:400;color:var(--muted)}main{max-width:1480px;margin:auto;padding:0 4vw 60px}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;padding:58px 0}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--green)}h1{font-size:clamp(42px,5vw,76px);line-height:1.05;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:var(--green)}h2{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1px;margin:10px 0 20px}h3{font-size:19px;margin:0 0 16px}h4{margin:24px 0 8px}p{color:var(--muted)}.hero p{font-size:19px;max-width:620px}.hero-map{background:var(--ink);color:white;padding:32px;border-radius:20px;box-shadow:12px 12px 0 #dce6d3;display:grid;gap:16px;transform:rotate(-1deg)}.hero-map span{font:12px monospace;letter-spacing:2px;color:#b5c8bf}.hero-map b{font:clamp(15px,2vw,24px) monospace;padding-bottom:14px;border-bottom:1px solid #4b6057}.hero-map .green{color:var(--lime)}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span,.pill{font-size:12px;border:1px solid var(--line);border-radius:30px;padding:6px 12px}.chips span{background:#e9efdf}nav{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}nav button.active,.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#084c38;color:white}.progress{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:18px;font-size:13px}progress{accent-color:var(--green);height:9px;width:140px}.file input{max-width:150px;font-size:11px}.panel{padding-top:26px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.workspace{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0}.card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.card-head h3{margin:0}label{display:block;font-size:13px;font-weight:700;margin-bottom:14px}input:not([type=range]):not([type=file]),select,textarea{width:100%;border:1px solid #bfcfc2;border-radius:7px;padding:10px;background:#fcfdf9;color:var(--ink);margin-top:5px}textarea,pre,code{font-family:ui-monospace,monospace;font-size:13px}textarea{resize:vertical}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#152c27;color:#d9efce;border-radius:9px;padding:20px;line-height:1.7;max-height:420px;overflow:auto}code{background:#edf3e6;padding:2px 4px}summary{cursor:pointer;font-weight:650}.small{font-size:12px;color:var(--muted)}#missions button,#lessonList button{display:block;width:100%;text-align:left;margin-bottom:7px;font-size:13px}#missions button.active,#lessonList button.active{border-color:var(--green);background:#edf5df}#missionInfo{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}#missionInfo p{font-size:14px}.history{margin-top:18px}#history{display:flex;gap:8px;flex-wrap:wrap}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.learning{display:grid;grid-template-columns:280px 1fr;gap:22px}#lessonList{max-height:650px;overflow:auto;margin-top:18px}#lesson .concept{font-size:20px;color:var(--ink)}.answers{display:grid;gap:9px;margin:16px 0}.answers button{text-align:left}.success{color:#13634b;font-weight:750}.error{color:#a63d22;font-weight:750}.steps li{margin-bottom:16px;padding-left:5px}#timeline div{padding:13px;border-left:3px solid #ccd9c9;margin:10px 0;background:#f1f5ec}#timeline div.done{border-color:#13634b;background:#e2f2cc}input[type=range]{width:100%;accent-color:var(--green)}footer{padding:30px 4vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;background:white;z-index:10}#notice:empty{display:none}[hidden]{display:none!important}@media(max-width:1050px){.workspace{grid-template-columns:1fr 1fr}.workspace aside{grid-column:1/-1}#missions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.hero{gap:25px}}@media(max-width:700px){.hero,.two,.learning,.workspace{grid-template-columns:1fr}.hero{padding:32px 0;gap:28px}.hero-map{transform:none}h1{letter-spacing:-2px}.card{padding:18px}.section-title{display:block}.section-title .pill{display:inline-block}#missions{grid-template-columns:1fr 1fr}nav button{flex:1 1 44%;font-size:12px;padding:10px 6px}header span{display:none}#lessonList{max-height:220px}.card-head{flex-wrap:wrap}footer{display:block}footer span{display:block}.progress{gap:8px}.file{max-width:100%}}
:root{--ink:#282243;--muted:#625d73;--paper:#f5f2ec;--green:#6145a5;--line:#ded6e5}small{color:var(--green);font-size:12px;letter-spacing:2px;font-weight:800}.hero .art{display:grid;grid-template-columns:1fr 1fr;gap:12px;transform:rotate(3deg)}.art b{padding:30px;background:#c9b9ed;border-radius:14px;font-size:36px}.art b:nth-child(2){background:#ffc787}.art b:nth-child(3){background:#e8cfec}.art b:last-child{background:var(--ink);color:white;font-size:23px}.hero em{color:var(--green)}.workspace{grid-template-columns:240px minmax(0,1fr) 280px}.canvasColumn{display:grid;gap:20px;align-content:start}.heading{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:24px 0}.badge{font-size:12px;border-radius:20px;padding:7px 12px;background:#e8def8}.viewport{overflow:auto;background:#eee9f3;padding:14px;border-radius:12px}#canvas{box-sizing:border-box;min-height:310px;background:#fff;border:1px dashed #ac9cc7;align-content:start}.tile{box-sizing:border-box;min-width:0;overflow-wrap:anywhere;border:0!important;background:#d9cbf6!important;color:#38295a;border-radius:9px;padding:16px;text-align:left;font:600 15px/1.45 system-ui}.tile:nth-child(3n+2){background:#ffdab2!important}.tile:nth-child(3n){background:#cde4d6!important}.tile strong{display:block;font-size:23px;margin-bottom:6px}.muted{font-size:12px;color:var(--muted)}.challenge{background:#eee7f8}.code pre{background:#29233f}.progress label{margin:0}.progress input{font-size:11px;max-width:180px}.learning{grid-template-columns:260px 1fr}.answers{display:grid;gap:10px}#lessonList{max-height:650px;overflow:auto}#lessonList button{width:100%;text-align:left;margin-bottom:6px}#lessonList button.active{background:#e9def9}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}section[hidden]{display:none}#inspector{padding:12px;background:#f3eef9;overflow-wrap:anywhere}#feedback{font-weight:700}nav button.active{background:var(--green);color:white}output{float:right;font-weight:400}.primary:hover{background:#49327f}#notice:empty{display:none}@media(max-width:1150px){.workspace{grid-template-columns:240px minmax(0,1fr)}.workspace aside:first-child{grid-column:auto}.code{grid-column:1/-1}}@media(max-width:700px){.workspace,.two,.learning{grid-template-columns:1fr}.code{grid-column:auto}.hero{grid-template-columns:1fr}.hero .art{display:none}.heading{display:block}.badge{display:inline-block}#lessonList{max-height:230px}nav button{flex-basis:100%}}
:root{--green:#216d7a;--ink:#173b46;--paper:#f2f5f3;--muted:#526b70}.art b{background:#b9e2df}.art b:nth-child(3){background:#c7d9ed}.textpreview{white-space:pre-wrap;overflow-wrap:anywhere;min-height:100px;padding:20px;background:#eff5f5;border:1px solid var(--line);border-radius:10px}mark{background:#ffda8d;color:#243a3c;border-bottom:2px solid #b67b18}fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 18px;display:flex;gap:12px;flex-wrap:wrap}fieldset label{margin:0}fieldset input[type=checkbox]{width:auto!important}#tests p{padding:10px;background:#eff5f5;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}#status,#feedback{font-weight:700}pre{background:#173b46}.primary:hover{background:#154c57}