:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0b0d12; color: #e6e9ef; }
body { margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 24px; }
header, .heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
section { margin: 24px 0; padding: 20px; border: 1px solid #2b3240; border-radius: 14px; background: #131720; }
label { display: grid; gap: 8px; margin: 14px 0; }
input { padding: 12px; border: 1px solid #3b4558; border-radius: 8px; background: #0b0d12; color: inherit; font: inherit; }
button { padding: 10px 14px; border: 0; border-radius: 8px; background: #3178c6; color: white; font: inherit; cursor: pointer; }
output { display: block; margin-top: 16px; font: 700 1.2rem ui-monospace, monospace; }
article { display: grid; gap: 5px; padding: 14px 0; border-bottom: 1px solid #2b3240; }
small { color: #aab3c2; }
.warning { color: #f3c969; }
#terminalPanel { margin-top: 1rem; }
#terminalOutput {
  box-sizing: border-box;
  min-height: 18rem;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #07090d;
  border: 1px solid #242936;
  border-radius: 8px;
  padding: 0.75rem;
  color: #d9e0ee;
  font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
#error { color: #ff7b86; }
@media (max-width: 560px) { main { padding: 14px; } header { align-items: flex-start; } }