.screen{width:100%;height:100%;display:flex;flex-direction:column}header{background-color:var(--blue-900);color:var(--blue-100);width:100%}header .header-content{margin:auto;max-width:1900px;display:flex;align-items:center}header .header-content #toc{flex-shrink:0;padding:24px 24px}header .header-content .course-title{display:block;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}#nav-dialog{overflow:auto;opacity:0;transition:opacity 300ms ease,display 300ms allow-discrete,overlay 300ms allow-discrete}#nav-dialog[open]{opacity:1}@starting-style{#nav-dialog[open]{opacity:0}}#nav-dialog nav{width:fit-content;background-color:var(--blue-800);padding:12px 32px 12px 64px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;overflow:auto}#nav-dialog nav ol{counter-reset:item}#nav-dialog nav ol li{counter-increment:item;margin-bottom:24px;color:var(--neutral-500)}#nav-dialog nav ol li::before{position:absolute;transform:translateX(calc(-100% - 12px));content:counter(item) ".";flex-shrink:0;color:inherit}#nav-dialog nav ol li:hover{color:var(--gray-300)}#nav-dialog nav ol li a{text-decoration:none;color:var(--gray-500)}#nav-dialog nav ol li a:hover{color:var(--gray-300)}#nav-dialog nav ol li.selected::before{color:var(--gray-300)}#nav-dialog nav ol li.selected a{color:var(--gray-200)}.main-wrapper{width:100%;min-height:0;height:100%}main{max-width:1900px;padding:0 24px;width:100%;height:100%;margin:auto;display:flex;flex-direction:row;gap:12px}main .tech-article{overflow:auto}main .ide{flex-grow:1;width:50ch;margin:24px 24px}@media(width < 1100px){main{flex-direction:column-reverse;justify-content:flex-end;padding:0 8px}main .tech-article{width:100%}main .ide{flex-grow:0;height:50dvh;min-height:50dvh;width:auto;margin:8px 0}}#lab-content{opacity:0;transition:opacity 300ms ease-in}.ide{display:flex;flex-direction:column;border:2px solid var(--neutral-200);border-radius:6px}.ide #toolbar{border-top-right-radius:6px;border-top-left-radius:6px;background-color:var(--neutral-100);color:var(--neutral-900);display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid var(--neutral-200)}.ide #toolbar #exercise-counter{gap:8px;font-size:14px;font-family:var(--mono-font),monospace;display:flex;align-items:center}.ide #toolbar .toolbar-buttons{display:flex;gap:12px;align-items:center}.ide #toolbar .toolbar-buttons .btn{margin:0}.ide #toolbar .toolbar-buttons button{background-color:var(--neutral-300);display:flex;padding:8px;border-radius:3px}.ide #toolbar .toolbar-buttons button:hover{background-color:var(--neutral-400)}.ide #toolbar #next,.ide #toolbar a{font-size:14px;font-family:var(--mono-font),monospace;background-color:var(--green-600);display:none;padding:8px;border-radius:3px;align-items:center;gap:8px;margin-left:12px;color:var(--green-100);cursor:pointer}.ide #toolbar #next:hover,.ide #toolbar a:hover{background-color:var(--green-500)}.ide #toolbar a{text-decoration:none;background-color:var(--blue-500)}.ide #toolbar a:hover{background-color:var(--blue-400)}.ide #monaco{min-height:0;width:100%;flex-grow:1}.ide #monaco-overlay{position:fixed;opacity:0;pointer-events:none;transition:opacity 200ms ease-in,color 200ms ease-in}.ide #console{background-color:var(--neutral-100);height:100px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;overflow:hidden;display:flex;flex-direction:column}.ide #console #console-resize{border-top:1px solid var(--neutral-200);border-bottom:1px solid var(--neutral-200);background-color:var(--neutral-100);height:5px;min-height:5px;cursor:row-resize}.ide #console #console-content{flex-grow:1;margin:4px;margin-top:0;padding:8px;border-radius:3px;font-size:14px;font-family:var(--mono-font),monospace;background-color:var(--bg-color)}