.code-runner {
  min-width: 0;
  margin: 2rem 0;
  padding: clamp(.85rem, 2vw, 1.25rem);
  clear: both;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 1rem);
  background: var(--color-surface-subtle);
}

.code-runner__header { margin-bottom: .8rem; }
.code-runner__header h2 { margin: 0 0 .35rem; }
.code-runner__instruction { margin: 0; color: var(--color-text-muted); }
.code-runner__editor-label,
.code-runner__output-label { display: block; margin: .9rem 0 .35rem; font-weight: 700; }
.code-runner__editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 15rem;
  padding: .9rem;
  resize: vertical;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, .65rem);
  background: var(--color-surface);
  color: var(--color-text);
  font: 500 .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
}
.code-runner__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.code-runner__actions button { min-height: 2.65rem; }
.code-runner__output {
  box-sizing: border-box;
  width: 100%;
  min-height: 6rem;
  max-height: 24rem;
  margin: 0;
  padding: .85rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, .65rem);
  background: var(--color-surface);
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code-runner__output[data-state="error"] { border-color: var(--color-danger, #b42318); color: var(--color-danger, #b42318); }
.code-runner__preview { box-sizing: border-box; width: 100%; min-height: 18rem; margin-top: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md, .65rem); background: #fff; }
.code-runner__cells { display: flex; flex-wrap: wrap; gap: .75rem; margin: .8rem 0; }
.code-runner__cells label { display: grid; gap: .25rem; font-weight: 700; }
.code-runner__cells input { min-height: 2.5rem; width: 9rem; padding: .45rem .6rem; border: 1px solid var(--color-border); border-radius: .45rem; background: var(--color-surface); color: var(--color-text); }
.code-runner__results { max-width: 100%; margin-top: .8rem; }
.code-runner__table-wrap { max-width: 100%; overflow-x: auto; }
.code-runner__table-wrap table { width: max-content; min-width: 100%; border-collapse: collapse; }
.code-runner__table-wrap th,
.code-runner__table-wrap td { padding: .55rem .7rem; border: 1px solid var(--color-border); text-align: left; }
.code-runner :is(button, textarea, input):focus-visible { outline: 3px solid var(--color-focus, #315efb); outline-offset: 2px; }

@media (max-width: 30rem) {
  .code-runner { padding: .75rem; }
  .code-runner__actions button { flex: 1 1 7rem; }
  .code-runner__editor { min-height: 13rem; font-size: .82rem; }
  .code-runner__cells label,
  .code-runner__cells input { width: 100%; }
}