:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.4 system-ui, sans-serif; background: #111; color: #ddd; }
header { padding: 8px 12px; background: #1b1b1b; border-bottom: 1px solid #333;
  display: flex; gap: 12px; align-items: baseline; }
header h1 { font-size: 15px; margin: 0; }
header span { color: #888; }
#center { position: relative; background: #0b0b0b; min-height: 60vh; }
#view { width: 100%; height: 100%; min-height: 60vh; display: block; }
.panel h2 { font-size: 12px; text-transform: uppercase; color: #999; margin: 12px 0 6px; }
.panel h2:first-child { margin-top: 0; }
#toolbar { position: absolute; top: 8px; left: 8px; background: #000a;
  padding: 6px 8px; border-radius: 6px; display: flex; gap: 10px; align-items: center; }
#banner { position: absolute; bottom: 8px; left: 8px; right: 8px; padding: 6px 8px;
  border-radius: 6px; background: #062; display: none; }
#banner.bad { background: #622; display: block; }
#banner.ok { display: block; }
label { display: block; margin: 4px 0; }
input[type=number], input[type=text], select, textarea {
  width: 100%; background: #222; color: #ddd; border: 1px solid #444;
  border-radius: 4px; padding: 3px 6px; }
textarea { font-family: monospace; font-size: 11px; }
.row { display: flex; gap: 6px; }
.row > * { flex: 1; }
button { background: #2a5; color: #fff; border: 0; border-radius: 4px;
  padding: 5px 10px; cursor: pointer; margin: 2px 0; }
#preview { width: 100%; max-width: 100%; height: auto; background: #fff; border-radius: 4px; min-height: 120px; }
button:active { transform: translateY(1px); }
#msg { color: #f88; min-height: 1.2em; }
table.thetas { width: 100%; border-collapse: collapse; }
table.thetas input { width: 100%; }
table.thetas td, table.thetas th { padding: 1px 2px; font-size: 11px; }
.chk { display: inline-block; margin-right: 8px; }
.chk input { width: auto; }