html, body { margin: 0; height: 100%; background: #0d1117; }
#terminal { position: absolute; inset: 8px 8px var(--toolbar, 8px) 8px; }
#toolbar { display: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; gap: 6px; flex-wrap: wrap; background: #161b22; border-top: 1px solid #30363d; }
#toolbar button { font: 14px monospace; color: #c9d1d9; background: #21262d; border: 1px solid #30363d; border-radius: 14px; padding: 6px 12px; }
#toolbar button.stop { color: #ff7b72; }
@media (pointer: coarse), (max-width: 700px) {
  #toolbar { display: flex; }
}
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8b949e; font: 14px monospace; }
#loading::before { content: ""; width: 14px; height: 14px; margin-right: 10px; border: 2px solid #30363d; border-top-color: #50fa7b; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }