#sourceState[data-compiler="busy"] { color: var(--accent, #217967); }
#buildOutput { overflow-wrap: anywhere; }
.code-surface {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  background: #101c2c;
}
.code-color-layer {
  display: none;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: pre;
  color: #d0deec;
  user-select: none;
  pointer-events: none;
}
.code-surface.colored .code-color-layer { display: block; }
.code-surface textarea#source { position: absolute; inset: 0; }
.code-surface.colored textarea#source {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
  caret-color: #f4f9fc;
}
.code-surface.colored textarea#source::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #426182aa;
}
.code-color-layer .tok-comment { color: #86a897; }
.code-color-layer .tok-keyword { color: #c0a9ef; }
.code-color-layer .tok-type { color: #84cbd1; }
.code-color-layer .tok-number { color: #eec281; }
.code-color-layer .tok-string { color: #b4d797; }
.code-color-layer .tok-directive { color: #ef9da7; }
.code-color-layer .tok-function { color: #89bcf2; }
.code-color-layer .tok-constant { color: #eeb38f; }
@media (forced-colors: active) {
  .code-surface.colored .code-color-layer { display: none; }
  .code-surface.colored textarea#source { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
#buildOutput .c-diagnostic {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: pre-wrap;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.editor-framework { display:flex; align-items:center; gap:6px; padding:0 10px 8px; font-size:11px; color:var(--ui-muted); }
.editor-framework[hidden] { display:none; }
.editor-framework select { font:600 11px var(--sans,system-ui); color:var(--ui-navy); background:white; padding:3px 6px; border:1px solid var(--ui-line); border-radius:5px; }