:root{color-scheme:dark;--bg:#242832;--sidebar:#20242d;--panel:#171b21;--line:#343c4b;--text:#edf1f7;--soft:#a7b7cf;--muted:#7e8ea6;--green:#39d9b2;--blue:#78a9ff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer;background:#2c3543;border:1px solid #435169;border-radius:4px;padding:8px 12px}button:hover{background:#39465a}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}kbd{font:inherit;color:#f4f7ff;background:#334053;border:1px solid #53637c;border-radius:4px;padding:5px 8px;white-space:nowrap}p{line-height:1.75}h1,h2,.logo{font-family:system-ui,sans-serif}h1{font-size:54px;letter-spacing:-1px;margin:12px 0 24px}h2{font-size:30px}.sidebar{position:fixed;inset:0 auto 0 0;width:340px;background:var(--sidebar);display:flex;flex-direction:column;border-right:1px solid var(--line);padding:24px 12px 0}.logo{color:var(--text);font-size:48px;text-decoration:none;font-weight:700;letter-spacing:-1px;padding:0 16px}.logo span{color:var(--green)}.sidebar-caption{font-size:16.5px;color:var(--muted);margin:8px 16px 25px}.search-label{font-size:16.5px;color:var(--soft);margin:0 16px 8px}#lessonSearch{min-width:0;margin:0 16px 18px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--text)}#courseList{flex:1;overflow:auto;min-height:0;padding-bottom:20px}.course-label{color:var(--green);font-size:18px;margin:16px 16px 8px;padding-top:14px;border-top:1px solid var(--line)}.lesson{width:100%;background:transparent;border:0;border-left:3px solid transparent;border-radius:0;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 13px;font-size:18px;color:var(--soft)}.lesson.active{background:#2b323f;border-left-color:var(--blue);color:white}.lesson .keys{font-size:15px;white-space:nowrap;color:var(--muted)}.lesson.completed .keys{color:var(--green)}.sidebar-footer{padding:18px 16px;background:var(--sidebar);border-top:1px solid var(--line);font-size:18px}.sidebar-footer small{display:block;color:var(--muted);font-size:15px;margin-top:10px}progress{display:block;width:100%;height:5px;accent-color:var(--green);margin-top:12px}main{margin-left:340px}.topbar{height:65px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:18px;color:var(--soft)}.free-label{color:var(--green);font-size:15px}#menu{display:none}.lesson-content{max-width:970px;padding:40px 48px 60px;margin:auto}.eyebrow{font-size:16.5px;color:var(--green);letter-spacing:1px;text-transform:uppercase}.intro{color:var(--soft);font-size:22.5px;margin-bottom:30px}#commandExamples{margin-bottom:32px;display:grid;gap:14px}.example-row{display:flex;align-items:center;gap:16px;font-size:19.5px}.example-row>kbd{min-width:42px;min-height:39px;display:grid;place-items:center}.example-row>span{flex:1;line-height:1.6}.show-example{font-size:16.5px;color:var(--green);background:#181f27;border:0;white-space:nowrap}.challenge-panel,.demo-panel{border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden}.challenge-panel:has(.CodeMirror-focused){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.tabs{display:flex;gap:4px;background:#181c23;padding:10px 12px 0;border-bottom:1px solid var(--line)}.tab{border:0;background:transparent;color:var(--muted);padding:12px 15px;border-radius:6px 6px 0 0;font-size:19.5px}.tab.selected{background:#273140;color:white}.task{padding:22px 24px 14px;border-bottom:1px solid #272e39}.task h2{margin:9px 0;font-size:27px}.task p{color:var(--soft);font-size:19.5px;margin:0 0 8px}.task summary{font-size:18px;color:var(--green);cursor:pointer}pre{font:19.5px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#10151b;padding:12px;color:#d8eadf}#editor{padding-top:10px}.CodeMirror{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:24px;line-height:1.8;background:var(--panel);color:#d3e2f5;height:270px}.CodeMirror-gutters{background:var(--panel);border:0}.CodeMirror-linenumber{color:#74839a;min-width:28px}.CodeMirror-lines{padding:8px 0}.CodeMirror pre.CodeMirror-line{padding-left:12px}.CodeMirror-cursor{border-left-color:white}.CodeMirror div.CodeMirror-secondarycursor{border-left-color:#a6c2ff}.CodeMirror.cm-fat-cursor .CodeMirror-cursor{background:#8dabba;opacity:.8}.CodeMirror-selected{background:#3c5167!important}.cm-searching{background:#596c37}.CodeMirror-dialog{background:#283344;color:white;border-color:#475673}.CodeMirror-dialog input{color:white;font:inherit}.target-cursor{background:#234c42;outline:1px solid var(--green);color:var(--green)}.editor-status{display:flex;gap:15px;align-items:center;flex-wrap:wrap;padding:8px 10px 8px 0;font-size:16.5px;color:var(--soft);border-top:1px solid #252d39}.mode{padding:5px 12px;background:var(--blue);color:#111c2e;font-weight:bold}.editor-status button{border:0;background:transparent;padding:4px;color:var(--soft);font-size:16.5px}#focusEditor{margin-left:auto;color:var(--green)}#feedback{font-size:19.5px;color:var(--soft);min-height:24px}#feedback.success{color:var(--green)}.exercise-actions{display:flex;gap:10px;flex-wrap:wrap;font-size:16.5px}#nextExercise{margin-left:auto;color:var(--green)}#hintText{padding:14px;border-left:2px solid var(--green);background:#202831;color:var(--soft);font-size:19.5px}.lesson-notes{margin-top:42px;border-top:1px solid var(--line);padding-top:16px}.lesson-notes p{font-size:21px;color:var(--soft)}.lesson-navigation{display:flex;justify-content:space-between;margin-top:32px;font-size:18px}.footnote{color:var(--muted);font-size:16.5px;margin-top:26px}.demo-panel{margin-bottom:28px;border-color:#3b756b}.demo-heading,.demo-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;font-size:18px;background:#202f31}.demo-heading button,.demo-footer button{font-size:16.5px}.demo-panel>p{padding:0 16px;font-size:18px;color:var(--soft)}.demo-panel .CodeMirror{height:180px}.demo-footer{min-height:52px;color:var(--green)}.panel-body{padding:24px;min-height:300px;color:var(--soft);font-size:19.5px}.panel-body label{display:flex;align-items:center;gap:12px;margin:22px 0}.panel-body dl{display:grid;grid-template-columns:1fr 1fr;gap:15px}.panel-body dd{color:var(--green)}.panel-body select{background:var(--bg);color:white;padding:6px}.storage-warning{color:#f2c782}
#demoEditor iframe{width:100%;height:230px;display:block;border:0}
/* Comfortable reading sizes throughout the course, including example frames. */
.intro,.lesson-notes p{font-size:25.5px}
.example-row,.task p,#feedback,#hintText,.panel-body,.demo-panel>p{font-size:24px}
pre{font-size:24px}
.CodeMirror{font-size:27px}
.lesson{font-size:21px;flex-wrap:wrap;row-gap:8px}
.lesson>span:first-child{min-width:0;overflow-wrap:anywhere}
.lesson .keys{font-size:18px;white-space:normal;overflow-wrap:anywhere}
.course-label,.sidebar-footer,.topbar,.show-example,.task summary,.exercise-actions,.lesson-navigation,.demo-heading,.demo-footer,.demo-heading button,.demo-footer button{font-size:21px}
.tab{font-size:22.5px}
.sidebar-caption,.search-label,.sidebar-footer small,.eyebrow,.free-label,.editor-status,.editor-status button,.footnote{font-size:19.5px}
@media(max-width:1100px){.sidebar{width:280px}main{margin-left:280px}.lesson-content{padding:32px}.example-row{gap:10px;flex-wrap:wrap}.free-label{display:none}}
@media(max-width:760px){.sidebar{z-index:10;width:280px;transform:translateX(-100%);transition:transform .15s}.sidebar.open{transform:none;box-shadow:10px 0 50px #0008}main{margin-left:0}.topbar{padding:0 18px;gap:16px}#menu{display:block;font-size:19.5px;flex-shrink:0}.lesson-content{padding:28px 18px}h1{font-size:43.5px}.example-row{flex-wrap:wrap}.example-row>span{min-width:150px}.example-row .show-example{margin-left:52px}.task{padding:18px}.editor-status{gap:10px}.lesson-navigation{gap:12px;flex-wrap:wrap}.demo-heading,.demo-footer{flex-wrap:wrap}}
/* Reflow the interface for the 1.5× reading size. */
body{font-size:24px}
h1,h2,p,.example-row,.demo-heading,.demo-footer{overflow-wrap:anywhere}
.sidebar{width:420px}main{margin-left:420px}
.lesson-content{max-width:1400px;padding-inline:32px}
.topbar{height:auto;min-height:100px;flex-wrap:wrap;gap:16px;padding-block:18px}
.example-row,.tabs,.demo-heading,.demo-footer{flex-wrap:wrap}
.example-row>span{min-width:180px}.example-row .show-example{margin-left:0}
.CodeMirror{height:420px}#demoEditor iframe{height:360px}
.lesson-navigation,.panel-body label{flex-wrap:wrap}
.lesson-navigation button,.exercise-actions button{max-width:100%;white-space:normal}
.sidebar-caption{margin-bottom:16px}.sidebar-footer{padding-block:12px}
@media(max-width:1100px){.sidebar{width:min(420px,90vw);z-index:10;transform:translateX(-100%);transition:transform .15s}.sidebar.open{transform:none;box-shadow:10px 0 50px #0008}main{margin-left:0}#menu{display:block;font-size:19.5px;flex-shrink:0}.lesson-content{padding-inline:18px}}