.lab-example-panel{
  border-bottom:1px solid var(--line,#d9e6e7);
  background:color-mix(in srgb,var(--course-accent,#0c8f96) 3%,var(--paper,#fff));
}
.lab-example-head{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--line,#d9e6e7) 80%,transparent)
}
.lab-example-head>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0;margin-right:auto}
.lab-example-title{font:850 .83rem/1.2 ui-sans-serif,system-ui,sans-serif;color:var(--ink,var(--text,#18333a))}
.lab-example-help{color:var(--muted,#627b80);font:600 .72rem/1.3 ui-sans-serif,system-ui,sans-serif}
.lab-example-progress{flex:none;border-radius:999px;padding:4px 9px;background:var(--soft,#edf4f5);color:var(--muted,#627b80);font:750 .7rem/1 ui-monospace,monospace}
.lab-example-actions{display:flex;gap:7px;flex:none}
.lab-example-actions button{
  min-height:32px;border:1px solid var(--line,#d9e6e7);border-radius:9px;padding:5px 11px;
  background:var(--paper,#fff);color:var(--ink,var(--text,#18333a));font:750 .75rem/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer
}
.lab-example-actions button:hover:not(:disabled){border-color:var(--course-accent,#0c8f96);color:var(--course-accent,#0c8f96)}
.lab-example-actions button:disabled{opacity:.45;cursor:default}
.lab-example-code{
  box-sizing:border-box;min-height:92px;max-height:300px;overflow:auto;margin:0;padding:14px 18px;
  white-space:pre;tab-size:4;background:var(--code,#0a171b);color:#e7f6f5;
  font:650 .88rem/1.65 ui-monospace,Consolas,monospace
}
.lab-example-code.is-empty{display:flex;align-items:center;justify-content:center;white-space:normal}
.lab-example-placeholder{color:#8fa9aa;font:600 .78rem/1.5 ui-sans-serif,system-ui,sans-serif}
.lab-example-code .tok-key{color:#78b7ff;font-weight:800}
.lab-example-code .tok-fn{color:#d9a0f4}
.lab-example-code .tok-str{color:#ff9b93}
.lab-example-code .tok-num{color:#66d2a3}
.lab-example-code .tok-comment{color:#72c883}
:root:not([data-theme="dark"]) .lab-example-code{background:#f8fbfb;color:#18333a}
:root:not([data-theme="dark"]) .lab-example-code .tok-key{color:#2874c6}
:root:not([data-theme="dark"]) .lab-example-code .tok-fn{color:#985db6}
:root:not([data-theme="dark"]) .lab-example-code .tok-str{color:#c3423f}
:root:not([data-theme="dark"]) .lab-example-code .tok-num{color:#178c63}
:root:not([data-theme="dark"]) .lab-example-code .tok-comment{color:#3e9a53}
@media(max-width:760px){
  .lab-example-head{align-items:flex-start;flex-wrap:wrap;padding:10px 14px}
  .lab-example-head>div:first-child{width:100%;display:grid;gap:3px}
  .lab-example-progress{margin-right:auto}
  .lab-example-code{max-height:250px;padding:13px 15px;font-size:.8rem}
}
