/* ── base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

.ic { width: 16px; height: 16px; flex: none; display: block; }
.ic.lg { width: 18px; height: 18px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* scrollbars: the reference language’s are thin and only appear on hover of the scroller */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll:hover { scrollbar-color: var(--border-2) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.scroll:hover::-webkit-scrollbar-thumb { background: var(--border-2); background-clip: content-box; }