.code-cell{max-width:65ch;flex:1;display:flex;flex-direction:column;width:100%;position:relative;z-index:1;background-color:var(--secondary_background);transition:color 0.3s ease,background-color 0.3s ease,max-width 0.3s ease,height 0.3s ease,left 0.3s ease,right 0.3s ease,top 0.3s ease,bottom 0.3s ease,position 0.3s ease,border-radius 0.3s ease}.code-cell.wide{border-radius:0px;border:none!important;max-width:100%;padding:0px}.code-cell.wide .code-cell-header{border-radius:0px;border:none;border-bottom:1px solid var(--primary-border);border-top:1px solid var(--primary-border)}.code-cell.wide .editor-container,.code-cell.wide .CodeMirror{border:none!important;border-bottom:0.5px solid var(--primary-border)!important}.code-cell:hover,.code-cell:focus-within{z-index:10}.editor-container{font-size:14px!important;line-height:22px!important;position:relative}.code-cell .CodeMirror{color:var(--text-dark);border-bottom-right-radius:var(--primary-border-radius);border-bottom-left-radius:var(--primary-border-radius);border:1px solid var(--primary-border);border-top-width:0px;background:var(--primary-background);font-size:14px;height:fit-content;line-height:22px!important;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.code-cell .CodeMirror .CodeMirror-measure{visibility:visible!important;position:absolute!important;height:auto!important;color:transparent!important;pointer-events:none!important}.code-cell .CodeMirror-linenumber{color:var(--secondary-text);opacity:0.8}.code-cell .CodeMirror-gutters{background-color:var(--primary-background);border:none}.code-cell .CodeMirror-line{padding-left:20px!important}.code-cell .CodeMirror-linenumber{padding-right:5px!important}.code-cell-header{width:100%;display:flex;flex-direction:row;background-color:var(--primary-background);border-top-left-radius:6px;border-top-right-radius:6px;border:1px solid var(--primary-border);color:var(--secondary-text);padding:2px;gap:5px;justify-content:space-between;font-weight:400!important;z-index:100;position:sticky;top:50px}.code-cell-header-right{display:flex;flex-direction:row;gap:5px;align-items:center;gap:10px}.code-cell-header i{padding:5px;opacity:0.8;border-radius:var(--primary-border-radius);cursor:pointer;font-weight:400!important}.code-cell-header i.secondary-control{opacity:0.4}.code-cell-header i:hover,.code-cell-header i.secondary-control:hover{opacity:1.0;background-color:var(--tertiary_background)}.code-cell-type{font-size:0.8rem}.code-cell-language-select{position:relative;display:inline-block;opacity:0.9;font-weight:400;min-width:125px}.code-cell-language-select.disabled{pointer-events:none}.code-cell-language-select:hover{background-color:var(--tertiary_background);border-radius:var(--primary-border-radius)}.code-cell-language-select button{background:transparent;border-radius:var(--primary-border-radius);padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:8px;background-color:transparent;border:none;color:var(--secondary-text);min-width:125px}.code-cell-language-options{position:absolute;top:calc(100% - 1px);left:0;right:0px;background:var(--primary-background);border:1px solid var(--primary-border);border-radius:0 0 var(--primary-border-radius) var(--primary-border-radius);margin-top:0;min-width:120px;z-index:1000;border-top:0px}.code-cell-language-select.open button{border-radius:var(--primary-border-radius) var(--primary-border-radius) 0 0;background:var(--primary-background);border:1px solid var(--primary-border);border-bottom:none}.code-cell-console{font-size:0.6rem;color:var(--secondary-text);opacity:0.8;margin-top:6px;margin-right:5px;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}.code-cell .CodeMirror-cursor{background-color:var(--text-dark)!important;border-color:var(--text-dark)!important}.code-cell .CodeMirror-activeline-background{background:var(--tertiary_background)!important}.code-cell .CodeMirror-activeline-gutter{background:var(--tertiary_background)!important}.code-cell .CodeMirror-line.CodeMirror-activeline-background,.code-cell .CodeMirror-activeline .CodeMirror-line{background-color:rgba(0,0,0,0.05)!important}.code-cell .CodeMirror-activeline .CodeMirror-gutter-wrapper{background-color:rgba(0,0,0,0.05)!important}.code-cell .CodeMirror.CodeMirror-focused .CodeMirror-activeline-background{background-color:rgba(0,0,0,0.05)!important}.code-cell-language-option{padding:6px 12px;cursor:pointer}.code-cell-language-option:hover{background:var(--tertiary_background)}.code-cell .output .CodeMirror{height:fit-content;border:none!important;background-color:var(--primary-background)}.code-cell-output .CodeMirror-scroll{max-height:500px;overflow:auto}.code-cell .output img{max-width:100%;height:auto}.code-cell .error{color:var(--color3)}.code-cell .code-cell-hint{background-color:var(--dark-transparent-color4);padding:5px;font-size:0.8rem;color:var(--secondary-text);opacity:0.8}#lesson-content.split-view .code-cell{max-width:100%}#lesson-content.split-view .code-cell .CodeMirror{max-width:100%;width:100%}.code-cell .CodeMirror pre.CodeMirror-line{padding-left:20px!important}.code-cell-execution-mode{font-size:0.75rem;opacity:0.8;display:flex;flex-direction:row;align-items:center;gap:5px}.execution-mode-indicator{padding:3px 8px;border-radius:var(--primary-border-radius);font-weight:400;transition:all 0.2s ease;opacity:0.8}.execution-mode-indicator.server-mode{color:var(--secondary-text);border:0.5px solid var(--primary-border)}.execution-mode-indicator.browser-mode{color:var(--secondary-text);border:0.5px solid var(--primary-border)}.execution-mode-dropdown{position:relative;display:flex;font-size:0.75rem}.execution-mode-dropdown button{background:transparent;border:1px solid var(--primary-border);border-radius:var(--primary-border-radius);cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--secondary-text);font-size:0.75rem;transition:all 0.2s ease;min-width:100px;justify-content:space-between}.execution-mode-dropdown button:hover{background-color:var(--tertiary_background);opacity:1.0}.execution-mode-dropdown.open button{border-radius:var(--primary-border-radius) var(--primary-border-radius) 0 0;background:var(--primary-background);border-bottom:none}.execution-mode-dropdown .dropdown-arrow{font-size:0.6rem;transition:transform 0.2s ease}.execution-mode-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.execution-mode-options{position:absolute;top:calc(100% - 1px);left:0;background:var(--primary-background);border:1px solid var(--primary-border);border-radius:0 0 var(--primary-border-radius) var(--primary-border-radius);border-top:none;z-index:1000;border-bottom-width:2px}.execution-mode-option{padding:4px 8px;cursor:pointer;display:flex;flex-direction:column;transition:background-color 0.2s ease;border-bottom:1px solid var(--primary-border)}.execution-mode-option-content{display:flex;gap:12px;flex-direction:row;align-items:center;justify-content:space-between}.execution-mode-option:last-child{border-bottom:none}.execution-mode-option:hover{background:var(--tertiary_background)}.execution-mode-option.active{background:var(--tertiary_background);font-weight:500}.execution-mode-option i{width:14px;text-align:center;opacity:0.8}.execution-mode-option span{flex:1;font-size:0.75rem}.execution-mode-option small{font-size:0.65rem;opacity:0.7;line-height:1.4;color:var(--secondary-text)}.output-wrapper,.expanded-output-wrapper{position:relative}.output-copy-button{position:absolute;bottom:1px;right:8px;border-radius:3px;cursor:pointer;z-index:10;font-size:14px;opacity:0.3;transition:opacity 0.2s ease,background-color 0.2s ease}.output-copy-button:hover{opacity:1}.output-copy-button:active{transform:scale(0.95)}.code-cell-output .CodeMirror-scroll{scrollbar-width:thin!important;scrollbar-color:var(--secondary-text) transparent!important;-ms-overflow-style:scrollbar!important}.code-cell-output .CodeMirror-scroll::-webkit-scrollbar{display:block!important;width:8px!important;height:8px!important}.code-cell-output .CodeMirror-scroll::-webkit-scrollbar-track{display:block!important;background:transparent!important;border-radius:4px!important}.code-cell-output .CodeMirror-scroll::-webkit-scrollbar-thumb{display:block!important;background:var(--secondary-text)!important;border-radius:4px!important;opacity:0.7!important}.code-cell-output .CodeMirror-scroll::-webkit-scrollbar-thumb:hover{display:block!important;background:var(--text-dark)!important;opacity:1!important}.code-cell-output .CodeMirror-scroll::-webkit-scrollbar-corner{display:block!important;background:transparent!important}.code-cell-output .CodeMirror-vscrollbar,.code-cell-output .CodeMirror-hscrollbar{display:block!important;opacity:0.7!important}.code-cell-output .CodeMirror-vscrollbar:hover,.code-cell-output .CodeMirror-hscrollbar:hover{opacity:1!important}