:root {
  --bg: #16171d; --panel: #1f2129; --panel2: #272a34; --line: #343846; --text: #e8e8ea; --dim: #8b8e9a;
  --green: #5fd068; --green-bg: #17331b; --red: #ff6b6b; --red-bg: #3a1c1f; --yellow: #f5c542; --yellow-bg: #3a3214;
  --orange: #ffb86c; --blue: #4fc1ff; --accent: #8b7cf6;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
input, textarea { font: inherit; color: var(--text); }
.hidden { display: none !important; }

/* code */
.code { background: #1b1c22; border: 1px solid var(--line); border-radius: 10px; padding: 10px 0; overflow-x: auto;
  font: 14px/1.55 var(--mono); }
.code .ln { display: flex; white-space: pre; padding-right: 14px; min-width: max-content; }
.code .no { width: 2.6em; flex: none; text-align: right; padding-right: 12px; color: #5a5e6c; user-select: none; }
.code .src { flex: 1; }
.code.pick .ln { cursor: pointer; }
.code.pick .ln:hover { background: #262833; }
.code .ln.sel { background: #4a2328; box-shadow: inset 3px 0 var(--red); }
.code .ln.good { background: #1c3a20; box-shadow: inset 3px 0 var(--green); }
.tk-k { color: #f92672; } .tk-t { color: #66d9ef; } .tk-s { color: #e6db74; } .tk-n { color: #ae81ff; }
.tk-c { color: #75715e; } .tk-pp { color: #f92672; }
.term { background: #111216; border-left: 3px solid var(--blue); border-radius: 6px; padding: 8px 12px;
  font: 14px/1.5 var(--mono); white-space: pre-wrap; }
.term .lbl { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }