*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;background:#f4f6fa;color:#20324b}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid #ccd5e2;background:white;color:#20324b;padding:8px 13px;border-radius:8px}button:hover{background:#eaf0f6}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #14b8a6;outline-offset:2px}aside{position:fixed;width:260px;height:100vh;background:#122b42;color:#d8e5ef;padding:28px 22px;overflow:auto}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;font-size:22px;font-weight:750}.logo{background:#b8f0df;color:#123d39;padding:5px 8px;border-radius:9px}.school{font-size:11px;letter-spacing:2px;margin:18px 0 36px}.course,.eyebrow{font-size:11px;letter-spacing:1.4px;font-weight:750;color:#27756d}aside .course{color:#84c7ba}h2{font-size:16px}nav{display:grid;gap:5px}nav button{text-align:left;background:transparent;border:0;color:#cfdae5;font-size:14px;padding:9px}nav button.active{background:#28465e;color:white}nav button span{display:inline-block;width:28px;color:#8ed5c4}.progress{margin-top:28px;font-size:13px}progress{width:100%;accent-color:#74d3b8}small{display:block;font-size:11px;opacity:.8}main{margin-left:260px;padding:26px 36px;max-width:1550px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;letter-spacing:1.3px;color:#587086}.intro{display:flex;align-items:center;justify-content:space-between;padding:28px 0 20px}h1{font-size:36px;line-height:1.2;margin:8px 0}.intro p:last-child{color:#62748a;margin:10px 0}.pill{border:1px solid #cbd6e2;border-radius:30px;padding:8px 16px;font-size:13px;white-space:nowrap}.learning{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}article,#guide{background:white;border:1px solid #dce3ec;border-radius:12px;padding:18px 22px}article p{margin:6px 0 12px}.challenge{background:#eaf6f1;border-color:#cde6db}.challenge label{font-size:13px;display:flex;gap:7px;align-items:center}.workspace{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid #d7e0ea;border-radius:12px;overflow:hidden;background:white}.panelhead{display:flex;align-items:center;justify-content:space-between;padding:10px 17px;gap:8px}.panelhead h2{margin:0}.panelhead button{font-size:12px}textarea{width:100%;min-height:340px;resize:vertical;border:0;border-top:1px solid #e5eaf1;padding:20px;font:14px/1.7 ui-monospace,monospace;tab-size:2;background:#fff;color:#20324b}.tools{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px}.tools button{font-size:12px}.primary{background:#126c61;color:white;border-color:#126c61}.primary:hover{background:#0e564d}.hint{font-size:11px;margin:0;padding:0 16px 15px;color:#62748a}.terminal{background:#172c42;color:#d7e7f6;min-width:0}.terminal .panelhead{border-bottom:1px solid #31485d}.terminal h2{color:white}#status{font-size:12px;color:#97d5c2}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.7 ui-monospace,monospace;padding:18px;margin:0;max-height:380px;overflow:auto;min-height:230px}.error{color:#ffb7ae}form{padding:16px;border-top:1px solid #31485d}form label{font-size:13px}form div{display:flex;gap:8px;margin-top:8px}form input{width:100%;min-width:0;border-radius:7px;border:0;padding:8px}footer{font-size:11px;color:#677b8d;padding:22px 0}a{color:inherit}#guide{margin-bottom:18px}#guide p{font-size:14px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:1050px){aside{width:220px;padding:22px 15px}main{margin-left:220px;padding:22px}.workspace{grid-template-columns:1fr}.terminal pre{min-height:120px}h1{font-size:30px}}@media(max-width:700px){aside{position:static;width:100%;height:auto}.school{margin:12px 0}.course,aside h2,.progress{display:none}nav{display:flex;overflow:auto;margin-top:15px}nav button{white-space:nowrap}main{margin:0;padding:20px}.learning{grid-template-columns:1fr}header{letter-spacing:0}header>span{display:none}.intro{padding-top:18px}h1{font-size:28px}.pill{font-size:11px;padding:6px 10px}}
.exercisebank{background:white;border:1px solid #dce3ec;border-radius:12px;margin-bottom:22px;padding-bottom:14px}.exercisebank .panelhead>span{font-size:12px;color:#62748a}#exercises{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px}details{border:1px solid #dce3ec;border-radius:8px;padding:10px 12px;font-size:13px}summary{cursor:pointer}summary span{display:block;font-size:10px;color:#27756d;margin:5px 0 0 15px}details p{margin:12px 0 0;color:#52697c}@media(max-width:700px){#exercises{grid-template-columns:1fr}.exercisebank .panelhead{align-items:flex-start;flex-direction:column}}

.inputs{padding:12px 16px;background:#f1f6fb}.inputs label{font-size:12px}.inputs textarea{min-height:70px;height:80px;padding:8px;border:1px solid #ccd5e2;border-radius:7px;margin-top:5px}.logo{background:#ffe29a;color:#34435c}.primary{background:#315d9f;border-color:#315d9f}.primary:hover{background:#23477e}.exercisebank summary span{color:#315d9f}#expected{white-space:pre-wrap;padding:12px;font:12px/1.6 monospace}.terminal details{margin:12px;background:#213c55;border-color:#3e5a70}
#lessonsteps{margin-bottom:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}#lessonsteps>h2{grid-column:1/-1}#lessonsteps h3{font-size:14px;margin:0 0 8px}#lessonsteps p{font-size:13px;margin:0}#output{overflow-x:auto;white-space:pre} @media(max-width:700px){#lessonsteps{grid-template-columns:1fr}}