#codingSpace{min-width:0;letter-spacing:0}.code-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.code-heading h1{font-size:28px;margin:0;color:#234c58}.code-owner{color:#69808a;font-size:14px}.code-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid #d9e5e9}.code-modes{display:flex;gap:4px;background:#e5edf0;padding:4px;border-radius:6px}.code-modes button{border:0;padding:10px 18px;background:transparent;border-radius:4px;color:#556d79;font-size:14px;font-weight:700;white-space:nowrap}.code-modes button.selected{background:#fff;color:#156573;box-shadow:0 1px 4px #29475713}.code-commands,.code-file-tools{display:flex;align-items:center;gap:8px}.code-run{display:flex;align-items:center;gap:8px;min-height:40px}.code-icon{width:36px;height:36px;display:inline-grid;place-items:center;flex-shrink:0;background:#fff;border:1px solid #cfdee4;border-radius:4px;color:#4b6674;padding:8px}.code-icon:hover{background:#e9f4f6;border-color:#7aacb6}.code-icon svg,.code-run svg{width:18px;height:18px;flex:none}.code-icon:focus-visible,.code-modes button:focus-visible{outline:2px solid #1b8294;outline-offset:2px}.code-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0}.code-example{display:flex;align-items:center;gap:10px;font-size:13px;color:#536a77}.code-example select{padding:8px 10px;background:#fff;border:1px solid #cfdfe6;border-radius:4px;max-width:200px;color:#294f60}.code-tools [data-code-saved]{font-size:12px;color:#3e8163;margin-left:auto}.code-tools .save-error{color:#b54454}.code-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}.code-editor-area,.code-result-area{min-width:0;background:#fff;border:1px solid #d6e2e8;border-radius:6px;overflow:hidden}.code-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:45px;padding:0 16px;background:#ebf2f6;border-bottom:1px solid #d9e5eb;font-size:13px;color:#35566a}.code-pane-head>span{font-size:12px;color:#6a7c85}.code-editor-area .ace_editor{height:650px;width:100%;font-family:Menlo,Consolas,monospace;line-height:1.6}.code-editor-area .ace_gutter{background:#f5f8fa;color:#8b9aa5}.code-preview{height:420px;position:relative;background:#fff;overflow:hidden}.code-preview iframe{width:100%;height:100%;border:0;display:block;background:#fff}.code-preview-empty{height:100%;display:grid;place-items:center;background:#fafcfd}.code-preview-empty svg{width:56px;height:56px;stroke-width:1;color:#b7cdd6}.code-console{border-top:1px solid #dce6ea;background:#f9fbfc}.code-console>header{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#5a727f;font-size:12px}.code-console .code-icon{width:28px;height:28px;background:transparent;border:0;padding:6px}.code-console pre{height:140px;min-width:0;margin:0;padding:8px 16px 16px;color:#24465a;font:13px/1.7 Menlo,Consolas,monospace;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere}.console-error{color:#b53349}.console-mode .code-preview{height:0;overflow:hidden}.console-mode .code-console{border:0}.console-mode .code-console pre{height:605px}.code-input{margin-top:18px;border-top:1px solid #d9e5e9;padding-top:15px;font-size:13px;color:#526e7a}.code-input summary{cursor:pointer;min-height:32px}.code-input textarea{width:100%;height:100px;margin-top:8px;resize:vertical;font:14px/1.7 Menlo,Consolas,monospace;padding:12px;border:1px solid #ccdde4;border-radius:4px;background:#fff}.code-heading .eyebrow{font-size:11px;color:#548592}@media(max-width:900px){.code-modes button{padding:10px 12px}.code-workbench{grid-template-columns:1fr}.code-editor-area .ace_editor{height:450px}.console-mode .code-console pre{height:240px}.code-preview{height:420px}}@media(max-width:560px){.code-heading{margin-bottom:18px;align-items:flex-end}.code-heading h1{font-size:24px}.code-owner{font-size:12px}.code-toolbar{flex-wrap:wrap;gap:10px}.code-modes{width:100%}.code-modes button{flex:1;font-size:12px;padding:10px 5px}.code-commands{margin-left:auto}.code-tools{gap:10px}.code-tools [data-code-saved]{margin-left:0;flex-basis:100%}.code-file-tools{gap:5px}.code-workbench{gap:14px}.code-preview{height:300px}.code-editor-area .ace_editor{height:400px}.code-pane-head{padding:0 12px}.code-example select{max-width:150px}.code-example{gap:6px}.code-console pre{font-size:12px}}
#codingSpace .code-live{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;color:#496a77;margin-left:auto}#codingSpace .code-live input{width:16px;height:16px;accent-color:#167582;margin:0}@media(max-width:560px){#codingSpace .code-live{margin-left:0}.code-live+.code-commands{margin-left:auto}}
.course-coding-space{min-width:0;letter-spacing:0}.course-coding-space .code-heading{gap:12px;margin-bottom:14px}.course-coding-space .code-heading h2{margin:0;font-size:22px;color:#234c58}.course-coding-space .code-heading .eyebrow{margin:0 0 5px}.course-coding-space .code-owner{font-size:12px}.course-coding-space .code-toolbar{gap:12px;flex-wrap:wrap;padding-bottom:12px}.course-code-context{font-size:12px;color:#657d89}.course-coding-space .code-live{display:flex;align-items:center;gap:7px;margin-left:auto;white-space:nowrap;font-size:12px;color:#496a77}.course-coding-space .code-live input{width:16px;height:16px;margin:0;accent-color:#167582}.course-coding-space .code-tools{padding:10px 0}.course-coding-space .code-workbench{gap:12px}.course-coding-space .code-pane-head{padding:0 12px}.course-coding-space .code-pane-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.course-coding-space .code-pane-head>span{flex-shrink:0}.course-coding-space .code-editor-area .ace_editor{height:600px}.course-coding-space .code-preview{height:370px}.course-coding-space .code-console pre{height:139px}.course-code-note{margin:12px 0 0;font-size:12px;line-height:1.7;color:#6d818c}@media(max-width:1150px){.course-coding-space .code-workbench{grid-template-columns:1fr}.course-coding-space .code-editor-area .ace_editor{height:420px}.course-coding-space .code-preview{height:400px}.course-coding-space .code-console pre{height:120px}.course-coding-space .code-owner{max-width:42%;text-align:right}.course-code-context{flex-basis:100%}}@media(max-width:560px){.course-coding-space .code-owner{font-size:11px}.course-coding-space .code-heading h2{font-size:20px}.course-coding-space .code-live{margin-left:0}.course-coding-space .code-preview{height:300px}.course-coding-space .code-editor-area .ace_editor{height:370px}.course-coding-space .code-tools [data-code-saved]{flex-basis:auto;margin-left:auto}.course-coding-space .code-console pre{font-size:12px}.course-code-context{line-height:1.6}}
.course-coding-space .html-preview-dialog{position:static;inset:auto;box-sizing:border-box;width:100%;min-width:0;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#35566a;overflow:visible}
.html-preview-content{min-width:0}
.html-preview-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-sizing:border-box;padding:10px 12px;border-bottom:1px solid #d9e5eb;background:#f5f9fb;font-size:12px}
.html-preview-device{display:flex;align-items:center;gap:6px;min-width:0;color:#536f7c}
.html-preview-device select{min-width:0;max-width:180px;padding:6px 8px;border:1px solid #cadce4;border-radius:4px;background:#fff;color:#35566a;font:inherit}
.html-preview-controls button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:6px 9px;border:1px solid #cadce4;border-radius:4px;background:#fff;color:#466977;font:inherit;white-space:nowrap;cursor:pointer}
.html-preview-controls button:hover{background:#eaf3f6;border-color:#7aacb6}
.html-preview-controls button:focus-visible,.html-preview-device select:focus-visible{outline:2px solid #1b8294;outline-offset:2px}
.html-preview-zoom{display:flex;gap:4px}
.html-preview-zoom button[aria-pressed=true]{border-color:#167582;background:#e3f3f4;color:#126875}
.html-preview-scale{font-variant-numeric:tabular-nums;white-space:nowrap;color:#617a86}
.html-preview-controls svg{width:15px;height:15px;flex-shrink:0}
.html-preview-controls .html-preview-expand{margin-left:auto}
.html-preview-controls .html-preview-close{display:none}
.course-coding-space .html-preview-stage{box-sizing:border-box;min-width:0;padding:12px;overflow:auto;background:#eaf0f3;overscroll-behavior:contain}
.html-preview-canvas{position:relative;min-width:0;overflow:hidden;background:#fff;box-shadow:0 1px 7px #29475725}
.course-coding-space .html-preview-canvas iframe{position:absolute;inset:0 auto auto 0;max-width:none;max-height:none;margin:0;border:0;transform-origin:top left;background:#fff}
.course-coding-space .html-preview-dialog.is-expanded{position:fixed;inset:16px;width:calc(var(--course-dialog-width,100vw) - 32px);height:calc(var(--course-dialog-height,100dvh) - 32px);max-width:1600px;max-height:none;margin:auto;border:1px solid #cadce4;border-radius:8px;overflow:hidden;box-shadow:0 12px 64px #122b3f40}
.html-preview-dialog.is-expanded::backdrop{background:#122b3fb8}
.html-preview-dialog.is-expanded .html-preview-content{display:flex;flex-direction:column;height:100%;min-height:0}
.html-preview-dialog.is-expanded .html-preview-controls{flex-shrink:0}
.course-coding-space .html-preview-dialog.is-expanded .html-preview-stage{flex:1;height:auto;min-height:0}
.html-preview-dialog.is-expanded .html-preview-expand{display:none}
.html-preview-dialog.is-expanded .html-preview-close{display:inline-flex;margin-left:auto}
@media(max-width:560px){.html-preview-controls{gap:7px;padding:9px 10px}.html-preview-device{flex-basis:100%}.html-preview-scale{font-size:11px}.html-preview-controls button{padding:6px 8px}.course-coding-space .html-preview-stage{padding:8px}.course-coding-space .html-preview-dialog.is-expanded{inset:8px;width:calc(var(--course-dialog-width,100vw) - 16px);height:calc(var(--course-dialog-height,100dvh) - 16px)}}
.code-editor-area .ace_editor{font-kerning:none;font-variant-ligatures:none;letter-spacing:0}
.course-coding-space{container-name:code-workspace;container-type:inline-size}
@container code-workspace (max-width:780px){.code-workbench{grid-template-columns:1fr}}
.course-coding-space .code-editor-dialog{position:static;inset:auto;box-sizing:border-box;width:100%;min-width:0;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#35566a;overflow:visible}
.code-editor-content{min-width:0}
.course-coding-space .code-editor-pane-head{height:auto;min-height:45px;padding:8px 12px;flex-wrap:wrap;gap:8px}
.code-editor-pane-head>[data-code-filename]{min-width:0;max-width:100%;flex:1 1 100px}
.code-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto;min-width:0;font-size:12px;color:#587480}
.code-wrap{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.code-wrap input{width:16px;height:16px;margin:0;accent-color:#167582}
.code-editor-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 8px;border:1px solid #cadce4;border-radius:4px;background:#fff;color:#466977;font:inherit;white-space:nowrap;cursor:pointer}
.code-editor-actions button:hover{background:#eaf3f6;border-color:#7aacb6}
.code-editor-actions button:focus-visible,.code-wrap input:focus-visible{outline:2px solid #1b8294;outline-offset:2px}
.code-editor-actions svg{width:15px;height:15px;flex-shrink:0}
.code-editor-area .code-editor-pane-head{height:auto;min-height:45px;flex-wrap:wrap;padding:8px 12px}
.code-font-size{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.code-font-size select{width:70px;min-height:30px;padding:4px 6px;border:1px solid #cadce4;border-radius:4px;background:#fff;color:#35566a;font:inherit;cursor:pointer}
.code-font-size select:focus-visible{outline:2px solid #1b8294;outline-offset:2px}
.code-editor-actions button:disabled{opacity:.5;cursor:default}
.code-editor-actions [data-code-editor-close]{display:none}
.course-coding-space .code-editor-dialog.is-expanded{position:fixed;inset:16px;width:calc(var(--course-dialog-width,100vw) - 32px);height:calc(var(--course-dialog-height,100dvh) - 32px);max-width:1600px;max-height:none;margin:auto;border:1px solid #cadce4;border-radius:8px;overflow:hidden;box-shadow:0 12px 64px #122b3f40}
.code-editor-dialog.is-expanded::backdrop{background:#122b3fb8}
.code-editor-dialog.is-expanded .code-editor-content{display:flex;flex-direction:column;height:100%;min-height:0}
.code-editor-dialog.is-expanded .code-editor-pane-head{flex-shrink:0}
.course-coding-space .code-editor-dialog.is-expanded .ace_editor{flex:1;height:auto;min-height:0}
.code-editor-dialog.is-expanded [data-code-editor-expand]{display:none}
.code-editor-dialog.is-expanded [data-code-editor-close]{display:inline-flex}
@media(max-width:560px){.course-coding-space .code-editor-dialog.is-expanded{inset:8px;width:calc(var(--course-dialog-width,100vw) - 16px);height:calc(var(--course-dialog-height,100dvh) - 16px)}.code-editor-actions{gap:6px}.code-editor-actions [data-code-language]{display:none}}
.course-python-file{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;font-size:13px;color:#536a77}
.course-python-file select{min-width:0;max-width:280px;padding:8px;border:1px solid #cadce4;border-radius:4px;background:#fff;color:#35566a;font:inherit}
.course-python-space .code-preview{height:auto;aspect-ratio:640/420}
.course-python-space .console-mode .code-preview{height:0;aspect-ratio:auto}
.course-python-space .console-mode .code-console pre{height:500px}
.course-python-space .code-pane-head>[data-code-status]{min-width:0;white-space:normal;text-align:right}
.course-python-space .code-input textarea{box-sizing:border-box;min-width:0}
@media(max-width:560px){.course-python-file{width:100%}.course-python-file select{flex:1;max-width:100%}.course-python-space .console-mode .code-console pre{height:240px}.course-python-space .code-editor-actions{justify-content:flex-start}}
.code-editor-only .code-workbench{grid-template-columns:minmax(0,1fr)}
.code-editor-only .code-result-area{display:none}
.code-editor-only .code-toolbar{min-width:0;flex-wrap:wrap}
.code-editor-only .code-modes{box-sizing:border-box;min-width:0;max-width:100%;flex-wrap:wrap}
.code-editor-only .code-commands,.code-editor-only .code-file-tools{min-width:0;max-width:100%;flex-wrap:wrap}
.code-editor-only .code-commands>[data-code-status]{display:inline-block;box-sizing:border-box;flex:0 0 120px;width:120px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:12px;line-height:1.5;color:#6a7c85}
@media(max-width:560px){.code-editor-only .code-commands{width:100%;margin-left:0;justify-content:flex-end}}
@container code-workspace (max-width:560px){.code-editor-only .code-commands{width:100%;margin-left:0;justify-content:flex-end}}