*{box-sizing:border-box} :root{font:16px/1.6 system-ui,sans-serif;color:#1d2c3c;background:#f4f6f8}body{margin:0}a{color:inherit}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid #bcc7d1;border-radius:5px;padding:.6em 1em;background:white;color:#14283e}button:hover{background:#e7edf2}button.primary{background:#922941;color:white;border-color:#922941}button:disabled{opacity:.55;cursor:default}:focus-visible{outline:3px solid #b77800;outline-offset:3px}.skip{position:fixed;top:-100px;background:white;z-index:5;padding:1em}.skip:focus{top:0}aside{position:fixed;inset:0 auto 0 0;width:295px;overflow:auto;background:#14283e;color:white;padding:30px 25px}.brand{font-weight:750;text-decoration:none;font-size:1.3rem}.eyebrow{color:#edc77c;letter-spacing:.1em;font-size:.875rem;font-weight:700}h1{font:400 2.3rem/1.12 Georgia,serif}h1 span{color:#edc77c}aside p,aside small{color:#cfdae4}small{font-size:.875rem}progress{width:100%;accent-color:#edc77c}#count{float:right}#steps{display:grid;gap:8px;margin:24px 0}#steps a{padding:8px 10px;text-decoration:none;border-left:3px solid transparent;font-size:.95rem}#steps a[aria-current=step]{background:#294057;border-color:#edc77c}.page{margin-left:295px}header{padding:20px 36px;display:flex;justify-content:space-between;gap:20px;background:white;border-bottom:1px solid #dce2e7}main{max-width:1250px;margin:auto;padding:32px 36px}h2{font:400 clamp(2rem,4vw,3.1rem)/1.15 Georgia,serif;margin:8px 0 18px}h3{font-size:1.2rem}.meta{color:#922941;font-weight:700}.lead{max-width:80ch}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}.panel,.quiz,.note{background:white;border:1px solid #dce2e7;padding:20px;border-radius:6px}.editor{display:block;width:100%;height:220px;resize:vertical;background:#14283e;color:#f4f6f8;border:0;border-radius:4px;font: .9rem/1.6 ui-monospace,monospace;padding:14px;tab-size:2}.editor.css{height:190px}label.editor-label{display:block;font-weight:700;margin:12px 0 6px}iframe{width:100%;height:460px;border:1px solid #c6d0d9;background:white}.actions,.variants,.bottom{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}.variants button[aria-pressed=true]{border:2px solid #922941;background:#f9edf0}.feedback{padding:12px;background:#eef3f7;border-left:4px solid #922941;white-space:pre-line}.feedback:empty{display:none}.quiz label{display:block;padding:10px;border-bottom:1px solid #e4e8ec}.quiz input{margin-right:10px}code{font:.9em ui-monospace,monospace;overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere}.bottom{justify-content:space-between}footer{padding:25px 36px;font-size:.875rem;color:#596775}.status{font-weight:650;color:#922941}select{max-width:100%;padding:8px}details{margin:15px 0}summary{cursor:pointer;font-weight:650}@media(max-width:1050px){aside{width:250px}.page{margin-left:250px}.workspace{grid-template-columns:1fr}main{padding:24px}}@media(max-width:720px){aside{position:static;width:auto}h1{font-size:2rem}#steps{grid-template-columns:1fr 1fr}.page{margin:0}header{padding:18px;flex-wrap:wrap}main{padding:20px}iframe{height:430px}}
.quiz-option{display:flex;align-items:center;border-bottom:1px solid #e4e8ec}.quiz .quiz-option label{border:0;flex:1}.quiz .quiz-option input{flex-shrink:0}

.teaching{margin:24px 0;max-width:90ch}.teaching h3:first-child{margin-top:0}.learning-goal{font-size:1.1rem;font-weight:600}.teaching-code{padding:20px;background:#14283e;color:#f4f6f8;border-radius:4px;line-height:1.7;tab-size:4}.takeaway{border-left:4px solid #922941;padding:12px 16px;background:#f4f6f8}.table-scroll{overflow-x:auto}.teaching table{border-collapse:collapse;width:100%}.teaching th,.teaching td{text-align:left;padding:12px;border-bottom:1px solid #dce2e7;vertical-align:top}.teaching caption{text-align:left;font-weight:700;margin:12px 0}

code,pre,.editor{font-family:"Courier New",Courier,monospace}code{font-size:1em}

.actions[hidden]{display:none}

#selector{display:block;margin-top:1rem} .final-question,.reflection{margin:22px 0} #reflection{display:block;width:100%;margin-top:12px;padding:12px} #final-result{margin-top:22px} [hidden]{display:none!important}