.kb-example-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.kb-example-toolbar .kb-course-live-example-label { margin: 0; }
.kb-try-button, .kb-coding-reset { border: 1px solid #147d55; border-radius: 6px; padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kb-try-button { background: #147d55; color: #fff; }
.kb-try-button:hover { background: #0f6243; }
.kb-coding-dialog { --coding-bg: #fff; --coding-text: #172033; --coding-line: #d6dce3; --coding-surface: #f3f6f8; box-sizing: border-box; width: min(1200px, calc(100% - 32px)); height: min(820px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; margin: auto; border: 1px solid var(--coding-line); border-radius: 8px; color: var(--coding-text); background: var(--coding-bg); overflow: hidden; }
html.dark .kb-coding-dialog { --coding-bg: #151a21; --coding-text: #edf1f5; --coding-line: #3c4652; --coding-surface: #202730; color-scheme: dark; }
.kb-coding-dialog::backdrop { background: rgb(0 0 0 / .65); }
html.kb-coding-open { overflow: hidden; }
.kb-coding-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; min-width: 0; }
.kb-coding-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--coding-line); }
.kb-coding-header h2 { margin: 0; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-coding-icon { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 25px; cursor: pointer; }
.kb-coding-icon:hover { background: var(--coding-surface); }
.kb-coding-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--coding-line); }
.kb-coding-tabs, .kb-coding-commands { display: flex; align-items: center; gap: 4px; }
.kb-coding-tabs button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.kb-coding-tabs button[aria-selected="true"] { border-bottom-color: #16a36c; background: var(--coding-surface); }
.kb-coding-reset { border-color: var(--coding-line); background: var(--coding-bg); color: inherit; }
.kb-coding-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.kb-coding-editors, .kb-coding-panel { height: 100%; min-height: 0; min-width: 0; }
.kb-coding-panel[hidden] { display: none; }
.kb-coding-panel textarea { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 18px; resize: none; border: 0; border-radius: 0; background: var(--coding-bg); color: var(--coding-text); font: 14px/1.65 Consolas, "Courier New", monospace; tab-size: 2; overflow: auto; }
.kb-coding-result { display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid var(--coding-line); min-width: 0; min-height: 0; }
.kb-coding-result h3 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--coding-line); background: var(--coding-surface); font-size: 13px; font-weight: 600; }
.kb-coding-result iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: white; }
.kb-coding-status { margin: 0; min-height: 32px; padding: 6px 14px; border-top: 1px solid var(--coding-line); font-size: 13px; overflow-wrap: anywhere; }
.kb-coding-status[data-error="true"] { color: #b91c1c; }
html.dark .kb-coding-status[data-error="true"] { color: #fca5a5; }
.kb-coding-dialog button:focus-visible, .kb-try-button:focus-visible { outline: 3px solid #2099c7; outline-offset: 2px; }
.kb-coding-panel textarea:focus-visible { outline: 2px solid #2099c7; outline-offset: -2px; }
@media (max-width: 700px) {
  .kb-coding-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .kb-coding-header { padding-inline: 8px; }
  .kb-coding-header h2 { font-size: 16px; }
  .kb-coding-actions { padding-inline: 10px; }
  .kb-coding-tabs button { padding-inline: 9px; }
  .kb-coding-commands button { padding-inline: 12px; }
  .kb-coding-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .kb-coding-result { border-left: 0; border-top: 1px solid var(--coding-line); }
  .kb-coding-panel textarea { font-size: 16px; padding: 12px; }
}