/* Kwker's runnable examples (assets/repl.js): dark code boxes in every theme (kwker.io's look), a shade deeper under
   prefers-color-scheme dark, data-theme="dark" and MkDocs Material's slate scheme. */
.repl {
  --repl-bg: #0f1513; --repl-panel: #131a17; --repl-ink: #e6eee9; --repl-muted: #8fa198; --repl-line: #22302a;
  --repl-accent: #3ddc97; --repl-accent-ink: #06130d; --repl-out-bg: #0b100e; --repl-out-ink: #d4ddd8;
  --repl-ok: #56d364; --repl-err: #ff7b72; --repl-kw: #d2a8ff; --repl-str: #7ee2a8; --repl-num: #ffb86b;
  --repl-com: #8fa198; --repl-api: #79c0ff; --repl-sel: #24433a;
  margin: 1.4em 0; border: 1px solid var(--line, var(--repl-line)); border-radius: 12px; overflow: hidden; background: var(--repl-panel);
  color: var(--repl-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .repl {
    --repl-bg: #0a0e0c; --repl-panel: #101613; --repl-out-bg: #070a09;
  }
}
:root[data-theme="dark"] .repl, [data-md-color-scheme="slate"] .repl {
  --repl-bg: #0a0e0c; --repl-panel: #101613; --repl-out-bg: #070a09;
}
.repl:not(.repl-ready) pre { margin: 0; }
.repl-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--repl-line);
  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* (one line at every width: the hint gives way - cut with an ellipsis - before the buttons wrap under it) */
.repl-lang { font-weight: 600; flex: none; }
.repl-hint { color: var(--repl-muted); margin-right: auto; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repl-bar > :not(.repl-hint) { flex-shrink: 0; }
.repl-btn {
  font: inherit; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--repl-line); background: var(--repl-panel);
  color: var(--repl-ink); cursor: pointer;
}
.repl-btn:hover { border-color: var(--repl-accent); }
.repl-btn.repl-run { background: var(--repl-accent); border-color: var(--repl-accent); color: var(--repl-accent-ink); font-weight: 600; padding: 4px 14px; }
.repl-btn:disabled { opacity: 0.6; cursor: progress; }
.repl-editor { position: relative; background: var(--repl-bg); }
.repl-editor pre, .repl-editor textarea {
  margin: 0; padding: 12px 14px; border: 0; width: 100%; box-sizing: border-box; white-space: pre; overflow-x: auto;
  font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; tab-size: 4;
}
.repl-editor pre { position: absolute; inset: 0; pointer-events: none; color: var(--repl-ink); background: none; overflow: hidden; }
.repl-editor textarea {
  position: relative; display: block; resize: none; background: transparent; color: transparent; caret-color: var(--repl-ink);
  outline: none; overflow-y: hidden;
}
.repl-editor textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--repl-accent); }
.repl-editor textarea::selection { background: var(--repl-sel); color: transparent; }
.repl .rk { color: var(--repl-kw); } .repl .rs { color: var(--repl-str); } .repl .rn { color: var(--repl-num); }
.repl .rc { color: var(--repl-com); font-style: italic; } .repl .ra { color: var(--repl-api); }
.repl-out { border-top: 1px solid var(--repl-line); background: var(--repl-out-bg); color: var(--repl-out-ink); }
.repl-out-head {
  display: flex; justify-content: space-between; gap: 12px; padding: 5px 14px 0;
  font: 11px/1.4 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--repl-muted);
}
.repl-status { text-transform: none; letter-spacing: 0; }
.repl-status.repl-ok { color: var(--repl-ok); } .repl-status.repl-bad { color: var(--repl-err); }
.repl-text {
  margin: 0; padding: 6px 14px 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; background: none;
}
.repl-text.repl-err { color: var(--repl-err); }
.repl-text.repl-empty { color: var(--repl-muted); }
/* the same box for every code block: where the browser cannot run the code yet, Run stays greyed out */
.repl-static .repl-btn.repl-run:disabled {
  background: transparent; border-color: var(--repl-line); color: var(--repl-muted);
  opacity: .55; cursor: not-allowed; font-weight: 600;
}
.repl-static .repl-btn.repl-run:disabled:hover { border-color: var(--repl-line); }