:root {
  --bg: #05070d; --panel: #0d1220; --line: #1f2a44; --text: #dfe6f5; --dim: #8a96b2; --accent: #66d9ff; --warn: #ff7a59;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, sans-serif; display: flex; flex-direction: column; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
footer.bar { border-top: 1px solid var(--line); border-bottom: 0; color: var(--dim); }
h1 { font-size: 16px; margin: 0; letter-spacing: .04em; }
form { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
label { display: flex; gap: 4px; align-items: center; color: var(--dim); }
input, select, button { background: #141b2e; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font: inherit; }
#seed { width: 11em; } #systems { width: 5em; }
button { cursor: pointer; } button[type=submit] { border-color: var(--accent); }
a { color: var(--accent); }
code { background: #141b2e; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
main { flex: 1; display: flex; min-height: 0; }
#stage { flex: 1; position: relative; min-width: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#legend { position: absolute; left: 10px; bottom: 10px; color: var(--dim); font-size: 12px; background: #05070dcc; padding: 6px 8px; border-radius: 4px; max-width: 70%; }
#panel { width: 380px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 12px 16px; }
#panel h2 { font-size: 17px; margin: 0 0 2px; } #panel h3 { font-size: 14px; margin: 14px 0 4px; color: var(--accent); }
#panel p { margin: 4px 0; } .dim { color: var(--dim); } .warn { color: var(--warn); }
.planet { border-top: 1px solid var(--line); padding: 6px 0; }
.planet b { color: #fff; }
ul { margin: 4px 0; padding-left: 18px; }
.small { font-size: 12px; }
@media (max-width: 800px) {
  html, body { height: auto; }
  main { flex-direction: column; }
  #stage { height: 60vh; flex: none; }
  form { width: 100%; }
  form label { flex: 1 1 45%; min-width: 0; }
  form label input, form label select { flex: 1; min-width: 0; width: auto; }
  #panel { width: auto; border-left: 0; border-top: 1px solid var(--line); }
}