:root,[data-theme=dark],.codelab-workbench--dark,.codelab[data-theme=dark]{--cl-bg:var(--bg,#000);--cl-bg-elevated:var(--surface,#0a0a0a);--cl-bg-panel:var(--surface-hover,#171717);--cl-bg-hover:var(--surface-hover,#171717);--cl-bg-active:var(--surface-active,#262626);--cl-surface:var(--cl-bg-elevated);--cl-surface-2:var(--cl-bg-panel);--cl-panel:var(--cl-bg-panel);--cl-hover:var(--cl-bg-hover);--cl-active:var(--cl-bg-active);--cl-border-subtle:var(--border-subtle,#171717);--cl-border:var(--border,#262626);--cl-border-strong:var(--border-strong,#404040);--cl-fg:var(--fg,#fff);--cl-fg-muted:var(--fg-muted,#a1a1a1);--cl-fg-faint:var(--fg-faint,#8f8f8f);--cl-fg-subtle:var(--cl-fg-faint);--cl-accent:var(--accent,#fff);--cl-accent-fg:var(--accent-fg,#000);--cl-blue:var(--info,#54a2ff);--cl-blue-muted:#54a2ff1f;--cl-green:var(--success,#05df72);--cl-green-bright:var(--success,#05df72);--cl-green-muted:#05df721f;--cl-amber:var(--warning,#ffd236);--cl-amber-muted:#ffd2361f;--cl-red:var(--error,#fb2c36);--cl-red-muted:#fb2c361f;--cl-purple:#a1a1a1;--cl-purple-muted:#ffffff14;--cl-radius-sm:4px;--cl-radius-md:6px;--cl-radius-lg:8px;--cl-font-sans:var(--font-sans,"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);--cl-font-mono:var(--font-mono,"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace)}code-lab,.codelab,.codelab *,.codelab :before,.codelab :after,.codelab-workbench,.codelab-workbench *,.codelab-workbench :before,.codelab-workbench :after{box-sizing:border-box}[data-theme=light],[data-theme=light] .codelab,.codelab[data-theme=light],.codelab-workbench--light{--cl-bg:var(--bg,#fff);--cl-bg-elevated:var(--bg-alt,#fafafa);--cl-bg-panel:var(--surface-hover,#f5f5f5);--cl-bg-hover:var(--surface-hover,#f5f5f5);--cl-bg-active:var(--surface-active,#e5e5e5);--cl-surface:var(--cl-bg-elevated);--cl-surface-2:var(--cl-bg-panel);--cl-panel:var(--cl-bg-panel);--cl-hover:var(--cl-bg-hover);--cl-active:var(--cl-bg-active);--cl-border-subtle:var(--border-subtle,#f5f5f5);--cl-border:var(--border,#e5e5e5);--cl-border-strong:var(--border-strong,#d4d4d4);--cl-fg:var(--fg,#0a0a0a);--cl-fg-muted:var(--fg-muted,#525252);--cl-fg-faint:var(--fg-faint,#666);--cl-fg-subtle:var(--cl-fg-faint);--cl-accent:var(--accent,#000);--cl-accent-fg:var(--accent-fg,#fff);--cl-blue:var(--info,#1447e6);--cl-blue-muted:#1447e614;--cl-green:var(--success,#008138);--cl-green-bright:var(--success,#008138);--cl-green-muted:#00813814;--cl-amber:var(--warning,#b75000);--cl-amber-muted:#b7500014;--cl-red:var(--error,#e40014);--cl-red-muted:#e4001414;--cl-purple:#525252;--cl-purple-muted:#0000000f}body.codelab-fullscreen-lock{overflow:hidden!important}.codelab-btn--back{background:var(--cl-bg);border-color:var(--cl-border-strong);color:var(--cl-fg);padding:5px 11px;font-weight:500}.codelab-btn--back:hover{background:var(--cl-bg-hover);border-color:var(--cl-fg-muted)}code-lab,.codelab-root{width:100%;font-family:var(--cl-font-sans);color:var(--cl-fg);display:block}.codelab,.codelab-workbench{--cl-guide-width:380px;--cl-drawer-height:240px;background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:8px;flex-direction:column;width:100%;height:calc(100vh - 150px);min-height:640px;max-height:940px;display:flex;position:relative;overflow:hidden}.codelab.is-resizing,.codelab-workbench.is-resizing{cursor:col-resize;user-select:none!important}.codelab.is-resizing-row,.codelab-workbench.is-resizing-row{cursor:row-resize;user-select:none!important}.codelab.is-fullscreen,.codelab-workbench.is-fullscreen{z-index:9999!important;border:none!important;border-radius:0!important;width:100vw!important;height:100vh!important;max-height:none!important;position:fixed!important;inset:0!important}.codelab-topbar,.codelab-toolbar{background:var(--cl-bg-elevated);border-bottom:1px solid var(--cl-border);user-select:none;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;height:44px;padding:0 14px;display:flex}.codelab-topbar__left{align-items:center;gap:10px;min-width:0;display:flex}.codelab-toolbar__sep{background:var(--cl-border);flex-shrink:0;width:1px;height:18px;margin:0 2px}.codelab-brand{font-family:var(--cl-font-mono);background:var(--cl-bg);border:1px solid var(--cl-border);color:var(--cl-fg);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;border-radius:5px;align-items:center;gap:7px;max-width:220px;padding:4px 10px;font-size:11.5px;font-weight:600;display:inline-flex;overflow:hidden}.codelab-brand__dot{background:var(--cl-fg);border-radius:50%;flex-shrink:0;width:6px;height:6px}.codelab-mode-switch{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:6px;align-items:center;gap:2px;padding:2px;display:inline-flex}.codelab-mode-btn{color:var(--cl-fg-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:4px;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;font-weight:500;transition:color .12s,background-color .12s;display:inline-flex}.codelab-mode-btn:hover{color:var(--cl-fg)}.codelab-mode-btn.active{background:var(--cl-bg-active);color:var(--cl-fg);font-weight:600}.codelab-lang-switch{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:6px;align-items:center;gap:2px;padding:2px;display:inline-flex}.codelab-lang-btn{font-family:var(--cl-font-mono);color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:3px 9px;font-size:11px;font-weight:600;transition:all .12s}.codelab-lang-btn:hover{color:var(--cl-fg)}.codelab-lang-btn.active[data-lang=js],.codelab-lang-btn.active[data-lang=ts]{background:var(--cl-bg-active);color:var(--cl-fg)}.codelab-topbar__center{scrollbar-width:none;align-items:center;gap:6px;display:flex;overflow-x:auto}.codelab-topbar__center::-webkit-scrollbar{display:none}.codelab-step-pills{align-items:center;gap:5px;display:flex}.codelab-step-pill{font-family:var(--cl-font-mono);font-variant-numeric:tabular-nums;background:var(--cl-bg);border:1px solid var(--cl-border);color:var(--cl-fg-muted);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:500;transition:all .12s;display:inline-flex}.codelab-step-pill:hover{border-color:var(--cl-border-strong);color:var(--cl-fg);background:var(--cl-bg-hover)}.codelab-step-pill.active{border-color:var(--cl-fg);color:var(--cl-accent-fg);background:var(--cl-accent);font-weight:600}.codelab-step-pill.passed{border-color:var(--cl-green);background:var(--cl-green-muted);color:var(--cl-green)}.codelab-step-pill.active.passed{border-color:var(--cl-green);background:var(--cl-green-muted);color:var(--cl-green);box-shadow:inset 0 0 0 1px var(--cl-green);font-weight:600}.codelab-topbar__right{align-items:center;gap:6px;display:flex}.codelab-btn{border:1px solid var(--cl-border);background:var(--cl-bg);height:28px;color:var(--cl-fg);cursor:pointer;white-space:nowrap;border-radius:5px;align-items:center;gap:6px;padding:0 11px;font-size:12px;font-weight:500;transition:all .12s;display:inline-flex}.codelab-btn:hover{background:var(--cl-bg-hover);border-color:var(--cl-border-strong)}.codelab-btn:disabled{opacity:.45;cursor:not-allowed}.codelab-btn--run{background:var(--cl-bg-panel);border-color:var(--cl-border-strong);color:var(--cl-fg)}.codelab-btn--run:hover{background:var(--cl-bg-active);border-color:var(--cl-fg-muted)}.codelab-btn--stop{background:var(--cl-red-muted);border-color:var(--cl-red);color:var(--cl-red);font-weight:600}.codelab-btn--stop:hover{background:var(--cl-red);color:#fff}.codelab-btn--test{background:var(--cl-accent);border-color:var(--cl-accent);color:var(--cl-accent-fg);font-weight:600}.codelab-btn--test:hover{opacity:.9;background:var(--cl-accent);border-color:var(--cl-accent)}.codelab-btn--icon{color:var(--cl-fg-muted);padding:0 7px}.codelab-btn--icon:hover{color:var(--cl-fg)}.codelab-btn--subtle{border:1px solid var(--cl-border);height:24px;color:var(--cl-fg-muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:4px;align-items:center;gap:5px;padding:0 8px;font-size:11px;font-weight:500;transition:all .12s;display:inline-flex}.codelab-btn--subtle:hover{background:var(--cl-bg-hover);color:var(--cl-fg);border-color:var(--cl-border-strong)}.codelab-btn__kbd{font-family:var(--cl-font-mono);opacity:.75;letter-spacing:-.02em;background:#8080802e;border-radius:3px;padding:1px 4px;font-size:10px}.codelab-body{grid-template-columns:var(--cl-guide-width,380px) 5px 1fr;flex:1;min-height:0;display:grid;overflow:hidden}.codelab.guide-collapsed .codelab-body{grid-template-columns:0 0 1fr}.codelab.guide-collapsed .codelab-splitter-v,.codelab.guide-collapsed .codelab-guide,.codelab-guide.collapsed{display:none!important}.codelab-splitter-v{background:var(--cl-bg-elevated);border-right:1px solid var(--cl-border);cursor:col-resize;z-index:10;width:5px;transition:background .12s;position:relative}.codelab-splitter-v:hover,.codelab-splitter-v.is-dragging{background:var(--cl-border-strong)}.codelab-splitter-h{background:var(--cl-bg-elevated);border-top:1px solid var(--cl-border);cursor:row-resize;z-index:10;flex-shrink:0;height:5px;transition:background .12s;position:relative}.codelab-splitter-h:hover,.codelab-splitter-h.is-dragging{background:var(--cl-border-strong)}.codelab-guide,.codelab-pane-left{background:var(--cl-bg-elevated);border-right:1px solid var(--cl-border);flex-direction:column;min-height:0;display:flex;overflow:hidden}.codelab-guide__tabs{border-bottom:1px solid var(--cl-border);background:var(--cl-bg);flex-shrink:0;align-items:center;gap:6px;height:36px;padding:0 12px;display:flex}.codelab-guide__tab{height:100%;color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:500;transition:all .12s;display:inline-flex}.codelab-guide__tab:hover{color:var(--cl-fg)}.codelab-guide__tab.active{color:var(--cl-fg);box-shadow:inset 0 -2px 0 var(--cl-fg);font-weight:600}.codelab-guide__stepper{border-bottom:1px solid var(--cl-border);background:var(--cl-bg-elevated);white-space:nowrap;-webkit-overflow-scrolling:touch;flex-shrink:0;align-items:center;padding:8px 12px;display:flex;overflow-x:auto}.codelab-guide__stepper::-webkit-scrollbar{display:none}.codelab-guide__stepper .codelab-step-pills{flex-wrap:nowrap;align-items:center;gap:6px;display:flex}.codelab-guide__content{flex:1;padding:20px 22px;font-size:13.5px;line-height:1.65;overflow-y:auto}.codelab-step-header{border-bottom:1px solid var(--cl-border);margin-bottom:16px;padding-bottom:14px}.codelab-step-progress-bar{background:var(--cl-bg);border-radius:999px;width:100%;height:3px;margin-bottom:10px;overflow:hidden}.codelab-step-progress-bar__fill{background:var(--cl-fg);border-radius:999px;height:100%;transition:width .22s}.codelab-step-eyebrow{font-family:var(--cl-font-mono);color:var(--cl-fg-faint);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;display:flex}.codelab-step-status{background:var(--cl-bg-hover);color:var(--cl-fg-muted);text-transform:none;letter-spacing:0;border-radius:999px;align-items:center;gap:4px;padding:2px 8px;font-size:10.5px;font-weight:600;display:inline-flex}.codelab-step-status.passed{background:var(--cl-green-muted);color:var(--cl-green);border:1px solid var(--cl-green)}.codelab-step-title{color:var(--cl-fg);letter-spacing:-.02em;font-size:16px;font-weight:600;line-height:1.35}.codelab-step-targets{flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;display:flex}.codelab-step-target{background:var(--cl-bg);border:1px solid var(--cl-border);font-family:var(--cl-font-mono);color:var(--cl-fg);cursor:pointer;border-radius:5px;align-items:center;gap:6px;padding:4px 10px;font-size:11.5px;transition:border-color .12s,background-color .12s;display:inline-flex}.codelab-step-target:hover{border-color:var(--cl-border-strong);background:var(--cl-bg-hover)}.codelab-step-target__sym{color:var(--cl-fg-muted);border-left:1px solid var(--cl-border);padding-left:6px}.codelab-guide-prose{max-width:65ch}.codelab-guide-prose h2,.codelab-guide-prose h3,.codelab-guide-prose h4{color:var(--cl-fg);letter-spacing:-.01em;margin:16px 0 8px;font-size:14px;font-weight:600}.codelab-guide-prose p{color:var(--cl-fg-muted);margin-bottom:12px;line-height:1.65}.codelab-guide-prose ul,.codelab-guide-prose ol{color:var(--cl-fg-muted);margin:8px 0 14px 18px}.codelab-guide-prose ul{list-style:outside}.codelab-guide-prose ol{list-style:decimal}.codelab-guide-prose li{margin-bottom:6px;line-height:1.6}.codelab-guide-prose code{font-family:var(--cl-font-mono);background:var(--cl-bg);border:1px solid var(--cl-border);color:var(--cl-fg);border-radius:4px;padding:1.5px 5px;font-size:12px}.codelab-guide-prose pre{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:6px;margin:12px 0;padding:12px 14px;line-height:1.55;overflow-x:auto}.codelab-guide-prose pre code{background:0 0;border:none;padding:0;font-size:12px}.codelab-step-checks{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:6px;margin-top:18px;padding:12px 14px}.codelab-step-checks__title{font-family:var(--cl-font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--cl-fg-faint);margin-bottom:8px;font-size:11px;font-weight:600}.codelab-check-item{color:var(--cl-fg-muted);align-items:flex-start;gap:8px;padding:5px 0;font-size:12.5px;display:flex}.codelab-check-item.pass{color:var(--cl-green)}.codelab-check-item.fail{color:var(--cl-red)}.codelab-check-icon{font-family:var(--cl-font-mono);flex-shrink:0;font-weight:600}.codelab-step-concept{background:var(--cl-bg);border:1px solid var(--cl-border);color:var(--cl-fg-muted);border-radius:6px;margin-bottom:16px;padding:12px 14px;font-size:12.5px;line-height:1.6}.codelab-step-concept__label{font-family:var(--cl-font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cl-fg);margin-bottom:4px;font-size:10px;font-weight:600;display:inline-block}.codelab-hint-box{border:1px solid var(--cl-border);background:var(--cl-bg);border-radius:6px;margin-top:16px;overflow:hidden}.codelab-hint-toggle{width:100%;color:var(--cl-fg);background:var(--cl-bg-hover);cursor:pointer;border:none;justify-content:space-between;align-items:center;padding:10px 14px;font-size:12px;font-weight:500;display:flex}.codelab-hint-body{color:var(--cl-fg-muted);border-top:1px solid var(--cl-border);padding:12px 14px;font-size:12.5px;display:none}.codelab-hint-box.open .codelab-hint-body{display:block}.codelab-guide__footer{border-top:1px solid var(--cl-border);background:var(--cl-bg);flex-direction:column;flex-shrink:0;gap:8px;padding:10px 14px;display:flex}.codelab-guide__footer-row{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.codelab-guide__footer-row--secondary{justify-content:flex-start;gap:6px}.codelab-main{background:var(--cl-bg);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.codelab-workspace{flex:1;grid-template-columns:196px 1fr;min-height:160px;display:grid;overflow:hidden}.codelab.files-collapsed .codelab-workspace{grid-template-columns:0 1fr}.codelab-explorer{background:var(--cl-bg-elevated);border-right:1px solid var(--cl-border);user-select:none;flex-direction:column;display:flex;overflow-y:auto}.codelab-explorer__header{height:36px;font-family:var(--cl-font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cl-fg-faint);border-bottom:1px solid var(--cl-border);flex-shrink:0;justify-content:space-between;align-items:center;padding:0 12px;font-size:10.5px;font-weight:600;display:flex}.codelab-explorer__list{flex-direction:column;gap:2px;padding:8px 6px;display:flex}.codelab-file-item{width:100%;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;align-items:center;gap:7px;padding:6px 9px;font-size:12px;transition:background .1s,color .1s,border-color .1s;display:flex}.codelab-file-item:hover{background:var(--cl-bg-hover);color:var(--cl-fg)}.codelab-file-item.active{background:var(--cl-bg-hover);border-color:var(--cl-border-strong);color:var(--cl-fg);font-weight:600}.codelab-file-badge{background:var(--cl-bg-panel);color:var(--cl-fg-muted);border:1px solid var(--cl-border-subtle);border-radius:3px;margin-left:auto;padding:1px 5px;font-size:9.5px}.codelab-explorer__actions{align-items:center;gap:3px;margin-left:auto;margin-right:8px;display:inline-flex}.codelab-explorer__btn{width:20px;height:20px;color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:all .12s;display:inline-flex}.codelab-explorer__btn:hover{background:var(--cl-bg-hover);color:var(--cl-fg);border-color:var(--cl-border)}.codelab-folder-item{width:100%;font-family:var(--cl-font-mono);color:var(--cl-fg);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;align-items:center;gap:6px;padding:5px 8px;font-size:12px;transition:background .1s,border-color .1s;display:flex;position:relative}.codelab-folder-item:hover{background:var(--cl-bg-hover)}.codelab-folder-item.drag-over{background:var(--cl-bg-hover);border-color:var(--cl-accent);outline:1px dashed var(--cl-accent)}.codelab-chevron{width:16px;height:16px;color:var(--cl-fg-faint);cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.codelab-chevron:hover{color:var(--cl-fg);background:var(--cl-bg-panel)}.codelab-folder-icon{color:var(--cl-fg-muted);flex-shrink:0;align-items:center;display:inline-flex}.codelab-folder-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500;overflow:hidden}.codelab-node-actions{align-items:center;gap:2px;margin-left:auto;display:none}.codelab-folder-item:hover .codelab-node-actions{display:inline-flex}.codelab-node-action{width:18px;height:18px;color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;justify-content:center;align-items:center;padding:0;display:inline-flex}.codelab-node-action:hover{background:var(--cl-bg-panel);color:var(--cl-fg);border-color:var(--cl-border)}.codelab-file-icon{color:var(--cl-fg-faint);flex-shrink:0;align-items:center;display:inline-flex}.codelab-file-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.codelab-tree-create-row{align-items:center;gap:6px;padding:3px 8px;display:flex}.codelab-tree-create-icon{color:var(--cl-fg-muted);flex-shrink:0;align-items:center;display:inline-flex}.codelab-tree-input{border-radius:var(--cl-radius-sm);border:1px solid var(--cl-border-strong);background:var(--cl-bg);height:24px;color:var(--cl-fg);font-family:var(--cl-font-mono);outline:none;flex:1;padding:0 6px;font-size:11.5px}.codelab-tree-input:focus{border-color:var(--cl-accent)}.codelab-editor-col{background:var(--cl-bg);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.codelab-tabs,.codelab-file-tabs{background:var(--cl-bg-elevated);border-bottom:1px solid var(--cl-border);scrollbar-width:none;flex-shrink:0;align-items:center;height:36px;display:flex;overflow-x:auto}.codelab-tabs::-webkit-scrollbar,.codelab-file-tabs::-webkit-scrollbar{display:none}.codelab-tab{height:100%;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);border:none;border-right:1px solid var(--cl-border);background:var(--cl-bg-elevated);cursor:pointer;white-space:nowrap;align-items:center;gap:7px;padding:0 13px;font-size:12px;transition:all .1s;display:inline-flex}.codelab-tab:hover{color:var(--cl-fg);background:var(--cl-bg-hover)}.codelab-tab.active{color:var(--cl-fg);background:var(--cl-bg);box-shadow:inset 0 -2px 0 var(--cl-fg);font-weight:600}.codelab-tab__ext{font-family:var(--cl-font-mono);letter-spacing:-.02em;border-radius:3px;justify-content:center;align-items:center;padding:1px 4px;font-size:9.5px;font-weight:700;display:inline-flex}.codelab-tab__ext--js{background:var(--cl-amber-muted);color:var(--cl-amber)}.codelab-tab__ext--ts{background:var(--cl-blue-muted);color:var(--cl-blue)}.codelab-tab__ext--json{background:var(--cl-purple-muted);color:var(--cl-purple)}.codelab-tab__ext--md{background:var(--cl-bg-panel);color:var(--cl-fg-muted)}.codelab-tab__dot{background:var(--cl-blue);border-radius:50%;width:6px;height:6px}.codelab-tab__close{border-radius:var(--cl-radius-sm);width:18px;height:18px;color:var(--cl-fg-faint);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-left:4px;font-size:13px;line-height:1;transition:all .12s;display:inline-flex}.codelab-tab__close:hover{background:var(--cl-bg-hover);color:var(--cl-fg)}.codelab-tab-add{height:24px;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;gap:4px;margin-left:6px;padding:0 8px;font-size:11.5px;transition:all .1s;display:inline-flex}.codelab-tab-add:hover{color:var(--cl-fg);background:var(--cl-bg-hover);border-color:var(--cl-border)}.codelab-new-file-form{align-items:center;gap:4px;height:100%;padding:0 8px;display:inline-flex}.codelab-new-file-input{border:1px solid var(--cl-border-strong);background:var(--cl-bg);width:145px;height:24px;color:var(--cl-fg);font-family:var(--cl-font-mono);border-radius:4px;outline:none;padding:0 8px;font-size:11.5px}.codelab-new-file-input:focus{border-color:var(--cl-blue)}.codelab-tabs__right{flex-shrink:0;align-items:center;gap:6px;margin-left:auto;padding:0 10px;display:flex}.codelab-pkg-btn{height:24px;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);background:var(--cl-bg);border:1px solid var(--cl-border);cursor:pointer;white-space:nowrap;border-radius:5px;align-items:center;gap:5px;padding:0 8px;font-size:11px;transition:all .12s;display:inline-flex}.codelab-pkg-btn:hover{color:var(--cl-fg);border-color:var(--cl-border-strong);background:var(--cl-bg-hover)}.codelab-pkg-btn__count{background:var(--cl-blue-muted);color:var(--cl-blue);border-radius:999px;padding:0 5px;font-size:10px;font-weight:600}.codelab-editor-wrap{flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.codelab-monaco-host{width:100%;height:100%;position:absolute;inset:0}.codelab-target-line-highlight{background:#58a6ff24!important}.codelab-fallback-wrap{background:var(--cl-bg);width:100%;height:100%;display:flex;position:absolute;inset:0;overflow:hidden}.codelab-fallback-gutter{background:var(--cl-bg-elevated);border-right:1px solid var(--cl-border);width:48px;color:var(--cl-fg-faint);font-family:var(--cl-font-mono);font-variant-numeric:tabular-nums;text-align:right;user-select:none;white-space:pre;flex-shrink:0;padding:14px 10px 14px 0;font-size:13px;line-height:1.6;overflow:hidden}.codelab-fallback-editor{background:var(--cl-bg);width:100%;height:100%;color:var(--cl-fg);font-family:var(--cl-font-mono);resize:none;tab-size:2;white-space:pre;border:none;outline:none;flex:1;padding:14px 18px;font-size:13px;line-height:1.6;overflow:auto}.codelab-md-preview{background:var(--cl-bg);padding:22px 26px;position:absolute;inset:0;overflow-y:auto}.codelab-empty-editor{background:var(--cl-bg);z-index:2;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;position:absolute;inset:0;overflow:auto}.codelab-empty-editor__inner{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:440px;display:flex}.codelab-empty-editor__icon{border-radius:var(--cl-radius-md);background:var(--cl-bg-elevated);border:1px solid var(--cl-border);width:44px;height:44px;color:var(--cl-fg-muted);justify-content:center;align-items:center;margin-bottom:16px;display:flex}.codelab-empty-editor__title{font-family:var(--cl-font-sans);color:var(--cl-fg);letter-spacing:-.01em;margin:0 0 8px;font-size:15px;font-weight:600}.codelab-empty-editor__subtitle{font-family:var(--cl-font-sans);color:var(--cl-fg-muted);margin:0 0 20px;font-size:12.5px;line-height:1.5}.codelab-empty-editor__files{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin-bottom:24px;display:flex}.codelab-empty-file-btn{border-radius:var(--cl-radius-sm);background:var(--cl-bg-elevated);border:1px solid var(--cl-border);color:var(--cl-fg);font-family:var(--cl-font-mono);cursor:pointer;user-select:none;align-items:center;gap:6px;padding:6px 10px;font-size:12px;transition:all .12s;display:inline-flex}.codelab-empty-file-btn:hover{background:var(--cl-bg-hover);border-color:var(--cl-border-strong);color:var(--cl-fg)}.codelab-empty-file-btn:active{background:var(--cl-bg-active)}.codelab-empty-editor__actions{justify-content:center;align-items:center;gap:10px;display:flex}.codelab-drawer,.codelab-bottom{height:var(--cl-drawer-height,240px);background:var(--cl-bg-elevated);flex-direction:column;flex-shrink:0;min-height:110px;max-height:70%;display:flex}.codelab-drawer.is-minimized,.codelab-bottom.is-minimized{height:36px!important;min-height:36px!important}.codelab-drawer__bar{background:var(--cl-bg);border-bottom:1px solid var(--cl-border);user-select:none;flex-shrink:0;justify-content:space-between;align-items:center;height:36px;padding:0 14px;display:flex}.codelab-drawer__tabs{align-items:center;gap:4px;height:100%;display:flex}.codelab-drawer__tab{height:100%;color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:0 11px;font-size:12px;font-weight:500;transition:all .1s;display:inline-flex}.codelab-drawer__tab:hover{color:var(--cl-fg)}.codelab-drawer__tab.active{color:var(--cl-fg);box-shadow:inset 0 -2px 0 var(--cl-fg);font-weight:600}.codelab-drawer__pill{font-family:var(--cl-font-mono);font-variant-numeric:tabular-nums;background:var(--cl-bg-hover);color:var(--cl-fg-muted);border-radius:999px;padding:1px 7px;font-size:10.5px}.codelab-drawer__pill.pass{background:var(--cl-green-muted);color:var(--cl-green)}.codelab-drawer__pill.fail{background:var(--cl-red-muted);color:var(--cl-red)}.codelab-drawer__body,.codelab-bottom-body{min-height:0;font-family:var(--cl-font-mono);flex:1;padding:14px 18px;font-size:12.5px;overflow-y:auto}.codelab-test-summary{background:var(--cl-bg);border:1px solid var(--cl-border);font-family:var(--cl-font-sans);font-variant-numeric:tabular-nums;border-radius:7px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:9px 14px;font-size:13px;display:flex}.codelab-test-summary.all-pass{background:var(--cl-green-muted);border-color:#10b98166}.codelab-test-summary.has-fail{background:var(--cl-red-muted);border-color:#f43f5e66}.codelab-test-list{flex-direction:column;gap:6px;display:flex}.codelab-test-row{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:6px;flex-direction:column;padding:8px 12px;display:flex}.codelab-test-row.pass{background:#10b9810a;border-color:#10b98159}.codelab-test-row.fail{background:#f43f5e0a;border-color:#f43f5e59}.codelab-test-row__head{justify-content:space-between;align-items:center;gap:8px;display:flex}.codelab-test-row__name{color:var(--cl-fg);align-items:center;gap:8px;font-size:12px;display:flex}.codelab-test-row__time{font-variant-numeric:tabular-nums;color:var(--cl-fg-faint);background:var(--cl-bg-elevated);border-radius:4px;padding:1px 6px;font-size:11px}.codelab-test-row__err{background:var(--cl-red-muted);color:var(--cl-red);white-space:pre-wrap;word-break:break-word;border:1px solid #f43f5e47;border-radius:5px;margin-top:8px;padding:9px 12px;font-size:11.5px}.codelab-test-diff{background:var(--cl-bg);border:1px solid var(--cl-border);font-family:var(--cl-font-mono);border-radius:4px;flex-direction:column;gap:4px;margin:6px 0;padding:6px 9px;font-size:11px;display:flex}.codelab-test-diff__row{align-items:baseline;gap:8px;display:flex}.codelab-test-diff__row.expected{color:var(--cl-green)}.codelab-test-diff__row.actual{color:var(--cl-red)}.codelab-test-diff__label{flex-shrink:0;min-width:72px;font-weight:600}.codelab-test-diff__val{white-space:pre-wrap;word-break:break-all}.codelab-btn--primary{background:var(--cl-accent);border-color:var(--cl-accent);color:var(--cl-accent-fg);font-weight:600}.codelab-btn--primary:hover{opacity:.92;background:var(--cl-accent);border-color:var(--cl-accent)}.codelab-terminal{cursor:text;flex-direction:column;min-height:100%;display:flex}.codelab-terminal__log{white-space:normal;word-break:break-word;color:var(--cl-fg);line-height:1.45}.codelab-log-line{white-space:pre-wrap;margin:0;padding:1px 0}.codelab-log-line.stderr{color:var(--cl-red)}.codelab-log-line.system{color:var(--cl-blue)}.codelab-log-line.success{color:var(--cl-green)}.codelab-repl{align-items:center;gap:8px;margin-top:2px;padding:2px 0;display:flex}.codelab-repl__prompt{color:var(--cl-green);user-select:none;flex-shrink:0;font-weight:600}.codelab-repl__input{color:var(--cl-fg);font-family:var(--cl-font-mono);background:0 0;border:none;outline:none;flex:1;padding:0;font-size:12.5px}.codelab-btn--close-ide:hover{color:var(--cl-red)!important;border-color:var(--cl-red)!important;background:var(--cl-red-muted)!important}.codelab-inspector-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.codelab-inspector-card{background:var(--cl-bg);border:1px solid var(--cl-border);border-radius:7px;padding:12px 14px}.codelab-inspector-card__title{text-transform:uppercase;letter-spacing:.05em;color:var(--cl-fg-muted);justify-content:space-between;align-items:center;margin-bottom:10px;font-size:11px;font-weight:600;display:flex}.codelab-vfs-item{border:1px solid var(--cl-border);font-variant-numeric:tabular-nums;border-radius:5px;flex-direction:column;gap:4px;margin-bottom:6px;padding:7px 10px;font-size:11.5px;display:flex}.codelab-vfs-item__head{color:var(--cl-blue);justify-content:space-between;font-weight:600;display:flex}.codelab-vfs-item__hex{color:var(--cl-fg-faint);white-space:pre;font-size:10.5px;overflow-x:auto}.codelab-statusbar{background:var(--cl-bg);border-top:1px solid var(--cl-border);height:26px;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);user-select:none;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;font-size:11px;display:flex}.codelab-statusbar__left,.codelab-statusbar__right{align-items:center;gap:12px;min-width:0;display:flex}.codelab-statusbar__item{white-space:nowrap;font-variant-numeric:tabular-nums;align-items:center;gap:6px;display:inline-flex}.codelab-statusbar__sep{background:var(--cl-border);width:1px;height:12px}.codelab-statusbar__dot{background:var(--cl-green);border-radius:50%;flex-shrink:0;width:6.5px;height:6.5px}.codelab-statusbar__dot.is-running{background:var(--cl-amber);animation:.9s ease-in-out infinite clStatusPulse}.codelab-statusbar__dot.is-fetching{background:var(--cl-blue);animation:.9s ease-in-out infinite clStatusPulse}.codelab-statusbar__dot.is-error{background:var(--cl-red)}@keyframes clStatusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}.codelab-modal-backdrop{backdrop-filter:blur(4px);z-index:50;background:#080a0fb8;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.codelab-modal{background:var(--cl-bg-elevated);border:1px solid var(--cl-border-strong);border-radius:10px;flex-direction:column;width:100%;max-width:860px;max-height:85%;display:flex;overflow:hidden;box-shadow:0 20px 50px #0000008c}.codelab-modal__header{background:var(--cl-bg);border-bottom:1px solid var(--cl-border);justify-content:space-between;align-items:center;padding:12px 18px;font-size:13.5px;font-weight:600;display:flex}.codelab-modal__body{font-family:var(--cl-font-mono);flex:1;padding:18px;font-size:12px;line-height:1.6;overflow-y:auto}.codelab-pkg-grid{grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:8px;margin-top:12px;display:grid}.codelab-pkg-chip{background:var(--cl-bg);border:1px solid var(--cl-border);color:var(--cl-fg);font-family:var(--cl-font-mono);cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 11px;font-size:11.5px;transition:all .12s;display:flex}.codelab-pkg-chip:hover{border-color:var(--cl-blue);background:var(--cl-blue-muted)}.codelab-breadcrumbs{background:var(--cl-bg-elevated);border-bottom:1px solid var(--cl-border);min-height:26px;font-family:var(--cl-font-mono);color:var(--cl-fg-muted);user-select:none;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;font-size:11.5px;display:flex;overflow-x:auto}.codelab-breadcrumbs__path{white-space:nowrap;align-items:center;gap:4px;min-width:0;display:inline-flex}.codelab-breadcrumbs__item{color:var(--cl-fg-muted);font-family:var(--cl-font-mono);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;gap:4px;padding:2px 5px;font-size:11.5px;transition:background .12s,color .12s;display:inline-flex}.codelab-breadcrumbs__item:hover{background:var(--cl-bg-hover);color:var(--cl-fg)}.codelab-breadcrumbs__item--root{color:var(--cl-fg-subtle);cursor:default}.codelab-breadcrumbs__item--file{color:var(--cl-fg);font-weight:500}.codelab-breadcrumbs__item--symbol{color:var(--cl-fg-muted);background:var(--cl-bg-panel);border:1px solid var(--cl-border);cursor:default}.codelab-breadcrumbs__sep{color:var(--cl-fg-subtle);opacity:.7;align-items:center;display:inline-flex}.codelab-breadcrumbs__actions{flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.codelab-breadcrumbs__btn{border:1px solid var(--cl-border);background:var(--cl-bg);height:20px;color:var(--cl-fg-muted);font-family:var(--cl-font-sans);cursor:pointer;border-radius:4px;align-items:center;gap:5px;padding:0 7px;font-size:11px;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.codelab-breadcrumbs__btn:hover{background:var(--cl-bg-hover);color:var(--cl-fg);border-color:var(--cl-border-strong)}.codelab-palette-backdrop{z-index:95;backdrop-filter:blur(2px);background:#0000008c;justify-content:center;align-items:flex-start;padding-top:48px;display:flex;position:absolute;inset:0}.codelab-palette{background:var(--cl-bg-elevated);border:1px solid var(--cl-border-strong);border-radius:var(--cl-radius-md);flex-direction:column;width:min(560px,92%);max-height:min(400px,78%);display:flex;overflow:hidden;box-shadow:0 20px 50px #0000008c}.codelab-palette__header{border-bottom:1px solid var(--cl-border);background:var(--cl-bg);align-items:center;gap:8px;padding:8px 12px;display:flex}.codelab-palette__icon{color:var(--cl-fg-muted);display:inline-flex}.codelab-palette__input{height:26px;color:var(--cl-fg);font-family:var(--cl-font-mono);background:0 0;border:none;outline:none;flex:1;font-size:12.5px}.codelab-palette__hint{font-family:var(--cl-font-mono);color:var(--cl-fg-subtle);border:1px solid var(--cl-border);border-radius:4px;padding:2px 6px;font-size:10.5px}.codelab-palette__list{flex:1;padding:4px;overflow-y:auto}.codelab-palette__item{border-radius:var(--cl-radius-sm);width:100%;color:var(--cl-fg);font-family:var(--cl-font-sans);text-align:left;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;gap:12px;padding:7px 10px;font-size:12.5px;display:flex}.codelab-palette__item:hover,.codelab-palette__item.is-selected{background:var(--cl-bg-active);color:var(--cl-fg)}.codelab-palette__item-kbd{font-family:var(--cl-font-mono);color:var(--cl-fg-muted);border:1px solid var(--cl-border);background:var(--cl-bg);border-radius:4px;padding:1px 6px;font-size:11px}.codelab-palette__empty{text-align:center;color:var(--cl-fg-muted);padding:16px;font-size:12px}.codelab-context-menu{z-index:100;background:var(--cl-bg-elevated);border:1px solid var(--cl-border-strong);border-radius:var(--cl-radius-sm);flex-direction:column;min-width:195px;padding:4px;display:flex;position:fixed;box-shadow:0 12px 32px #00000073}.codelab-context-menu__item{width:100%;color:var(--cl-fg);font-family:var(--cl-font-sans);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:space-between;align-items:center;gap:14px;padding:6px 10px;font-size:12px;display:flex}.codelab-context-menu__item:hover{background:var(--cl-bg-active)}.codelab-context-menu__item.is-danger{color:var(--cl-red)}.codelab-context-menu__kbd{font-family:var(--cl-font-mono);color:var(--cl-fg-subtle);font-size:10.5px}.codelab-context-menu__divider{background:var(--cl-border);height:1px;margin:4px 2px}.codelab-diff-modal{width:min(940px,95%);max-height:min(680px,88%)}.codelab-diff-body{background:var(--cl-bg);padding:0}.codelab-diff-stats{font-family:var(--cl-font-mono);align-items:center;gap:6px;font-size:11.5px;display:inline-flex}.codelab-diff-stat--add{color:var(--cl-green);font-weight:600}.codelab-diff-stat--del{color:var(--cl-red);font-weight:600}.codelab-diff-unified{font-family:var(--cl-font-mono);flex-direction:column;font-size:12px;line-height:1.55;display:flex}.codelab-diff-split{font-family:var(--cl-font-mono);grid-template-columns:1fr 1fr;font-size:12px;line-height:1.55;display:grid}.codelab-diff-pane{border-right:1px solid var(--cl-border);overflow-x:auto}.codelab-diff-pane:last-child{border-right:none}.codelab-diff-pane__title{background:var(--cl-bg-elevated);border-bottom:1px solid var(--cl-border);color:var(--cl-fg-muted);padding:6px 12px;font-size:11px;font-weight:600}.codelab-diff-line{white-space:pre;align-items:baseline;padding:1px 10px;display:flex}.codelab-diff-line--add{color:var(--cl-fg);background:#22c55e1f}.codelab-diff-line--del{color:var(--cl-fg-muted);background:#ef44441f}.codelab-diff-gutter{width:32px;color:var(--cl-fg-subtle);text-align:right;user-select:none;flex-shrink:0;padding-right:8px;font-size:11px;display:inline-block}.codelab-diff-prefix{user-select:none;flex-shrink:0;width:16px;font-weight:600;display:inline-block}.codelab-diff-code{white-space:pre-wrap;word-break:break-all;flex:1}@media (width<=1360px){.codelab-brand--with-back{display:none}}@media (width<=1024px){.codelab-body{grid-template-columns:1fr}.codelab-splitter-v{display:none}.codelab-guide,.codelab-pane-left{border-right:none;border-bottom:1px solid var(--cl-border);max-height:250px}.codelab-workspace{grid-template-columns:155px 1fr}.codelab-inspector-grid,.codelab-diff-split{grid-template-columns:1fr}}@media (width<=680px){.codelab-workspace{grid-template-columns:1fr}.codelab-explorer,.codelab-topbar__center,.codelab-statusbar__right{display:none}}.codelab-pty__active-line{font-family:var(--cl-font-mono);white-space:pre-wrap;word-break:break-all;align-items:center;margin-top:2px;padding:2px 0;font-size:12.5px;line-height:1.45;display:flex}.codelab-pty__prompt{color:var(--cl-green);user-select:none;flex-shrink:0;margin-right:4px;font-weight:600}.codelab-pty__before,.codelab-pty__after{color:var(--cl-fg);font-family:var(--cl-font-mono)}.codelab-pty__cursor{background-color:var(--cl-fg);min-width:7.5px;height:14px;color:var(--cl-bg);vertical-align:middle;text-align:center;line-height:14px;font-family:var(--cl-font-mono);font-size:12.5px;display:inline-block}.codelab-pty__cursor.blink{animation:1s step-end infinite clPtyCursorBlink}@keyframes clPtyCursorBlink{0%,to{opacity:1}50%{opacity:0}}.cl-ansi-bold{font-weight:700}.cl-ansi-dim{opacity:.65}.cl-ansi-italic{font-style:italic}.cl-ansi-underline{text-decoration:underline}.cl-ansi-black{color:#171717}.cl-ansi-red{color:var(--cl-red,#fb2c36)}.cl-ansi-green{color:var(--cl-green,#05df72)}.cl-ansi-yellow{color:var(--cl-amber,#ffd236)}.cl-ansi-blue{color:var(--cl-blue,#54a2ff)}.cl-ansi-magenta{color:#d946ef}.cl-ansi-cyan{color:#06b6d4}.cl-ansi-white{color:#f5f5f5}.cl-ansi-gray{color:#737373}.cl-ansi-bright-red{color:#ff5252}.cl-ansi-bright-green{color:#69f0ae}.cl-ansi-bright-yellow{color:#ff0}.cl-ansi-bright-blue{color:#40c4ff}.cl-ansi-bright-magenta{color:#ff4081}.cl-ansi-bright-cyan{color:#18ffff}.cl-ansi-bright-white{color:#fff}.cl-ansi-bg-black{background-color:#171717}.cl-ansi-bg-red{background-color:#fb2c3638}.cl-ansi-bg-green{background-color:#05df7238}.cl-ansi-bg-yellow{background-color:#ffd23638}.cl-ansi-bg-blue{background-color:#54a2ff38}.cl-ansi-bg-magenta{background-color:#d946ef38}.cl-ansi-bg-cyan{background-color:#06b6d438}.cl-ansi-bg-white{background-color:#ffffff38}.codelab-ports-panel{flex-direction:column;gap:16px;padding:4px 0 12px;display:flex}.codelab-ports-section{flex-direction:column;gap:8px;display:flex}.codelab-ports-section__head{border-bottom:1px solid var(--cl-border-subtle);justify-content:space-between;align-items:center;padding-bottom:6px;display:flex}.codelab-ports-section__title{color:var(--cl-fg);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:8px;font-size:12px;font-weight:600;display:inline-flex}.codelab-ports-table-wrap{border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);background:var(--cl-bg-elevated);overflow-x:auto}.codelab-ports-table{border-collapse:collapse;text-align:left;width:100%;font-size:12px}.codelab-ports-table th{background:var(--cl-bg-panel);color:var(--cl-fg-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--cl-border);padding:8px 12px;font-size:11px;font-weight:600}.codelab-ports-table td{border-bottom:1px solid var(--cl-border-subtle);color:var(--cl-fg);vertical-align:middle;padding:8px 12px}.codelab-ports-table tr:last-child td{border-bottom:none}.codelab-port-badge{border-radius:var(--cl-radius-sm,4px);background:var(--cl-bg-panel);border:1px solid var(--cl-border);font-family:var(--cl-font-mono);color:var(--cl-blue);padding:2px 6px;font-size:11px;font-weight:600;display:inline-block}.codelab-proto-badge{border-radius:var(--cl-radius-sm,4px);background:var(--cl-bg-panel);font-family:var(--cl-font-mono);color:var(--cl-fg-muted);padding:1px 5px;font-size:10px;display:inline-block}.codelab-port-link{color:var(--cl-fg);font-family:var(--cl-font-mono);text-decoration:none}.codelab-port-link:hover{color:var(--cl-blue);text-decoration:underline}.codelab-status-pill{align-items:center;gap:6px;font-size:11.5px;font-weight:500;display:inline-flex}.codelab-status-pill.online{color:var(--cl-green)}.codelab-dot-pulse{background-color:var(--cl-green);width:6px;height:6px;box-shadow:0 0 6px var(--cl-green);border-radius:50%}.codelab-http-client-section{flex-direction:column;gap:8px;display:flex}.codelab-http-client-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.codelab-http-form{background:var(--cl-bg-elevated);border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);flex-direction:column;gap:8px;padding:10px;display:flex}.codelab-http-input-row{align-items:center;gap:6px;display:flex}.codelab-http-select{background:var(--cl-bg-panel);border:1px solid var(--cl-border);border-radius:var(--cl-radius-sm,4px);color:var(--cl-fg);font-family:var(--cl-font-mono);outline:none;padding:5px 8px;font-size:12px;font-weight:600}.codelab-http-url-input{background:var(--cl-bg-panel);border:1px solid var(--cl-border);border-radius:var(--cl-radius-sm,4px);color:var(--cl-fg);font-family:var(--cl-font-mono);outline:none;flex:1;padding:5px 8px;font-size:12px}.codelab-http-url-input:focus,.codelab-http-select:focus,.codelab-http-textarea:focus{border-color:var(--cl-accent)}.codelab-http-details-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.codelab-http-field{flex-direction:column;gap:4px;display:flex}.codelab-http-label{color:var(--cl-fg-muted);text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:600}.codelab-http-textarea{background:var(--cl-bg-panel);border:1px solid var(--cl-border);border-radius:var(--cl-radius-sm,4px);width:100%;color:var(--cl-fg);font-family:var(--cl-font-mono);resize:vertical;outline:none;padding:6px 8px;font-size:11.5px}.codelab-http-response-panel{background:var(--cl-bg-elevated);border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);flex-direction:column;display:flex;overflow:hidden}.codelab-http-response-tabs{background:var(--cl-bg-panel);border-bottom:1px solid var(--cl-border);align-items:center;gap:4px;padding:6px 8px;display:flex}.codelab-http-tab{border-radius:var(--cl-radius-sm,4px);color:var(--cl-fg-muted);cursor:pointer;background:0 0;border:none;padding:3px 8px;font-size:11.5px;font-weight:500}.codelab-http-tab.active{background:var(--cl-bg-elevated);color:var(--cl-fg);font-weight:600}.codelab-http-response-body{flex:1;max-height:240px;padding:10px;overflow:auto}.codelab-http-preview-frame{border-radius:var(--cl-radius-sm,4px);background:#fff;border:none;width:100%;min-height:180px}.codelab-http-raw-pre{font-family:var(--cl-font-mono);color:var(--cl-fg);white-space:pre-wrap;word-break:break-word;margin:0;font-size:11.5px}.codelab-http-no-response{color:var(--cl-fg-muted);text-align:center;padding:30px 10px;font-size:12px}.codelab-network-panel{flex-direction:column;gap:10px;padding:4px 0 12px;display:flex}.codelab-network-filterbar{background:var(--cl-bg-elevated);border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);align-items:center;gap:8px;padding:6px 10px;display:flex}.codelab-net-filter-search{color:var(--cl-fg-muted);flex:1;align-items:center;gap:6px;display:flex}.codelab-net-search-input{color:var(--cl-fg);font-size:12px;font-family:var(--cl-font-sans);background:0 0;border:none;outline:none;flex:1}.codelab-net-select{background:var(--cl-bg-panel);border:1px solid var(--cl-border);border-radius:var(--cl-radius-sm,4px);color:var(--cl-fg);outline:none;padding:3px 8px;font-size:11.5px}.codelab-network-content{gap:12px;display:flex}.codelab-network-content.has-detail .codelab-network-table-wrap{flex:3}.codelab-network-table-wrap{border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);background:var(--cl-bg-elevated);flex:1;overflow-x:auto}.codelab-network-table{border-collapse:collapse;text-align:left;width:100%;font-size:12px}.codelab-network-table th{background:var(--cl-bg-panel);color:var(--cl-fg-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--cl-border);padding:8px 10px;font-size:11px;font-weight:600}.codelab-network-table td{border-bottom:1px solid var(--cl-border-subtle);color:var(--cl-fg);vertical-align:middle;padding:7px 10px}.codelab-net-row{cursor:pointer;transition:background .12s}.codelab-net-row:hover{background:var(--cl-bg-hover)}.codelab-net-row.selected{background:var(--cl-bg-active)}.codelab-status-badge{border-radius:var(--cl-radius-sm,4px);font-family:var(--cl-font-mono);padding:1px 6px;font-size:11px;font-weight:600;display:inline-block}.codelab-status-badge.status-2xx{background:var(--cl-green-muted);color:var(--cl-green);border:1px solid #05df7240}.codelab-status-badge.status-3xx{background:var(--cl-blue-muted);color:var(--cl-blue);border:1px solid #54a2ff40}.codelab-status-badge.status-4xx{background:var(--cl-amber-muted);color:var(--cl-amber);border:1px solid #ffd23640}.codelab-status-badge.status-5xx,.codelab-status-badge.status-0xx{background:var(--cl-red-muted);color:var(--cl-red);border:1px solid #fb2c3640}.codelab-method-badge{font-family:var(--cl-font-mono);letter-spacing:.02em;font-size:11px;font-weight:700;display:inline-block}.codelab-net-path{font-family:var(--cl-font-mono);text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.codelab-waterfall-track{align-items:center;gap:6px;min-width:110px;display:flex}.codelab-waterfall-bar{background:var(--cl-blue);border-radius:3px;min-width:6px;height:6px}.codelab-waterfall-time{font-family:var(--cl-font-mono);color:var(--cl-fg-muted);font-size:10.5px}.codelab-network-detail{background:var(--cl-bg-elevated);border:1px solid var(--cl-border);border-radius:var(--cl-radius-md,6px);flex-direction:column;flex:2;max-height:280px;padding:10px;display:flex;overflow-y:auto}.codelab-network-detail__head{border-bottom:1px solid var(--cl-border-subtle);justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:6px;display:flex}.codelab-detail-section{margin-bottom:8px;font-size:11.5px}.codelab-detail-label{color:var(--cl-fg-muted);text-transform:uppercase;margin-bottom:3px;font-size:10.5px;font-weight:600}.codelab-detail-pre{background:var(--cl-bg-panel);border-radius:var(--cl-radius-sm,4px);font-family:var(--cl-font-mono);color:var(--cl-fg);white-space:pre-wrap;word-break:break-all;margin:4px 0 0;padding:6px;font-size:11px;overflow-x:auto}.codelab-empty-cell{text-align:center;color:var(--cl-fg-muted);font-style:italic;padding:24px!important}.cl-ansi-bg-gray{background-color:#73737347}.cl-ansi-bg-bright-red{background-color:#ff525247}.cl-ansi-bg-bright-green{background-color:#69f0ae47}.cl-ansi-bg-bright-yellow{background-color:#ffff0047}.cl-ansi-bg-bright-blue{background-color:#40c4ff47}.cl-ansi-bg-bright-magenta{background-color:#ff408147}.cl-ansi-bg-bright-cyan{background-color:#18ffff47}.cl-ansi-bg-bright-white{background-color:#ffffff59}.codelab-step-pill{border:1px solid var(--cl-border);background:var(--cl-bg);color:var(--cl-fg-muted);font-family:var(--cl-font-mono);cursor:pointer;border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:11px;font-weight:500;transition:all .12s;display:inline-flex}.codelab-step-pill:hover{border-color:var(--cl-border-strong);color:var(--cl-fg)}.codelab-step-pill.active{background:var(--cl-bg-active);border-color:var(--cl-border-strong);color:var(--cl-fg);font-weight:600}.codelab-step-pill.done{border-color:var(--cl-green);color:var(--cl-green)}.codelab-step-pill__num{font-weight:700}.codelab-tab__ext--js{color:var(--cl-amber)}.codelab-tab__ext--ts{color:var(--cl-blue)}.codelab-tab__ext--json{color:var(--cl-green)}.codelab-tab__ext--md{color:var(--cl-fg-muted)}:root{--bg:#09090b;--bg-bar:#111114;--bg-input:#18181b;--border:#27272a;--border-focus:#52525b;--fg:#fafafa;--fg-muted:#a1a1aa;--fg-faint:#71717a;--accent:#22c55e;--accent-bg:#22c55e1f}html[data-theme=light]{--bg:#fff;--bg-bar:#f8f9fa;--bg-input:#fff;--border:#e4e4e7;--border-focus:#a1a1aa;--fg:#09090b;--fg-muted:#52525b;--fg-faint:#71717a;--accent:#16a34a;--accent-bg:#16a34a1a}[data-astro-cid-lcdefpme]{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;color:var(--fg);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.studio-shell[data-astro-cid-lcdefpme]{flex-direction:column;width:100vw;height:100vh;display:flex}.studio-header[data-astro-cid-lcdefpme]{background:var(--bg-bar);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:14px;padding:8px 16px;display:flex}.studio-brand[data-astro-cid-lcdefpme]{flex-shrink:0;align-items:center;gap:10px;display:flex}.studio-logo[data-astro-cid-lcdefpme]{background:var(--fg);width:26px;height:26px;color:var(--bg);border-radius:6px;justify-content:center;align-items:center;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700;display:flex}.studio-title[data-astro-cid-lcdefpme]{letter-spacing:-.02em;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.studio-badge[data-astro-cid-lcdefpme]{background:var(--accent-bg);color:var(--accent);border:1px solid #22c55e47;border-radius:4px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:10.5px;font-weight:500}.repo-bar[data-astro-cid-lcdefpme]{flex:1;align-items:center;gap:6px;min-width:280px;max-width:680px;display:flex}.repo-input-wrap[data-astro-cid-lcdefpme]{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;flex:1;align-items:center;height:32px;padding:0 10px;transition:border-color .15s;display:flex}.repo-input-wrap[data-astro-cid-lcdefpme]:focus-within{border-color:var(--border-focus)}.repo-input-prefix[data-astro-cid-lcdefpme]{color:var(--fg-faint);border-right:1px solid var(--border);user-select:none;white-space:nowrap;align-items:center;gap:6px;margin-right:8px;padding-right:8px;font-family:JetBrains Mono,monospace;font-size:11.5px;display:flex}.repo-input[data-astro-cid-lcdefpme]{color:var(--fg);background:0 0;border:none;outline:none;flex:1;width:100%;font-family:JetBrains Mono,monospace;font-size:12px}.repo-input[data-astro-cid-lcdefpme]::placeholder{color:var(--fg-faint)}.btn[data-astro-cid-lcdefpme]{cursor:pointer;border:1px solid var(--border);background:var(--bg-input);height:32px;color:var(--fg);white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:0 12px;font-size:12px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn[data-astro-cid-lcdefpme]:hover{border-color:var(--border-focus);background:#8080801a}.btn-primary[data-astro-cid-lcdefpme]{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}.btn-primary[data-astro-cid-lcdefpme]:hover{opacity:.9;background:var(--fg);color:var(--bg)}.btn-primary[data-astro-cid-lcdefpme]:disabled{opacity:.5;cursor:wait}.studio-subbar[data-astro-cid-lcdefpme]{background:var(--bg);border-bottom:1px solid var(--border);color:var(--fg-muted);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:5px 16px;font-size:11.5px;display:flex;overflow-x:auto}.preset-pills[data-astro-cid-lcdefpme]{align-items:center;gap:6px;display:flex}.preset-label[data-astro-cid-lcdefpme]{color:var(--fg-faint);white-space:nowrap;margin-right:2px;font-weight:500}.preset-pill[data-astro-cid-lcdefpme]{border:1px solid var(--border);background:var(--bg-bar);color:var(--fg-muted);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:11px;transition:all .15s;display:inline-flex}.preset-pill[data-astro-cid-lcdefpme]:hover,.preset-pill[data-astro-cid-lcdefpme].active{color:var(--fg);border-color:var(--border-focus);background:#8080801f}.status-indicator[data-astro-cid-lcdefpme]{color:var(--fg-muted);white-space:nowrap;align-items:center;gap:6px;font-family:JetBrains Mono,monospace;font-size:11px;display:flex}.status-dot[data-astro-cid-lcdefpme]{background:var(--accent);border-radius:50%;width:7px;height:7px}.status-dot[data-astro-cid-lcdefpme].loading{background:#eab308;animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.studio-actions[data-astro-cid-lcdefpme]{align-items:center;gap:6px;display:flex}.studio-workspace[data-astro-cid-lcdefpme]{flex-direction:column;flex:1;width:100%;min-height:0;display:flex;position:relative}#codelab-mount[data-astro-cid-lcdefpme]{flex:1;width:100%;height:100%;min-height:0}#codelab-mount[data-astro-cid-lcdefpme] .cl-workbench[data-astro-cid-lcdefpme]{border:none!important;border-radius:0!important;height:100%!important;max-height:100%!important}