:root {
  --bg: #faf8f3;
  --ink: #1f2933;
  --slate: #2e3f52;
  --green: #2e7d4f;
  --green-l: #d9ead9;
  --red: #9b2c2c;
  --red-l: #f2dede;
  --grey: #9aa5b1;
  --amber: #b7791f;
  --amber-l: #faf0d7;
  --blue: #2b5c8a;
  --blue-l: #dbe6f2;
  --purple: #6b3fa0;
  --purple-l: #e8dff4;
  --panel: #ffffff;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

body.crt {
  --bg: #050a05;
  --ink: #9dffa0;
  --slate: #57c95b;
  --green: #d8ffd8;
  --green-l: #1b3b1b;
  --red: #ffe38a;
  --red-l: #3b3410;
  --grey: #3f8a44;
  --panel: #0a140a;
  --blue: #7ad0ff;
  --blue-l: #10262f;
  --purple: #d29bff;
  --purple-l: #23142f;
  --amber: #ffcf5c;
  --amber-l: #2f2610;
}
body.crt { font-family: var(--mono); }
body.crt canvas { filter: drop-shadow(0 0 6px rgba(120, 255, 120, .45)); }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header { padding: 28px 24px 8px; max-width: 1280px; margin: 0 auto; }
h1 { margin: 0; font-size: 34px; letter-spacing: -0.01em; }
.sub { margin: 6px 0 16px; color: var(--grey); max-width: 70ch; }
.controls { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; }
.controls label { display: flex; flex-direction: column; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); gap: 4px; }
.controls label.check { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 8px; }
select, input[type=search] {
  font: inherit; font-size: 16px; padding: 6px 10px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--grey); border-radius: 4px; min-width: 200px;
}

main { display: grid; grid-template-columns: minmax(320px, 720px) minmax(320px, 1fr); gap: 24px; padding: 8px 24px 40px; max-width: 1280px; margin: 0 auto; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.chart-wrap { position: relative; }
canvas { width: 100%; height: auto; display: block; background: var(--panel); border: 1px solid var(--grey); border-radius: 4px; cursor: crosshair; }
.tooltip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); padding: 3px 8px; border-radius: 3px; font-size: 13px; font-family: var(--mono); transform: translate(10px, -50%); }
.planet-list { margin-top: 10px; font-size: 13px; color: var(--grey); }
.planet-list ol { columns: 4; margin: 8px 0 0; padding-left: 3em; }
.planet-list button { all: unset; cursor: pointer; color: var(--ink); }
.planet-list button:hover, .planet-list button:focus { text-decoration: underline; }

.panels { display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--panel); border: 1px solid var(--grey); border-radius: 4px; padding: 16px 18px 18px; }
.micro { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--grey); text-transform: uppercase; }
.panel h2 { margin: 4px 0 10px; font-size: 28px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; }
dt { color: var(--grey); }
dd { margin: 0; }
.desc { margin: 14px 0 6px; font-style: italic; font-size: 17px; }
.note, .hint { font-size: 12.5px; color: var(--grey); margin: 6px 0 0; }
.hint { margin-bottom: 10px; }

#seed-rows { font-family: var(--mono); font-size: 12px; }
.seed-row { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--green-l); }
.seed-row .lbl { color: var(--grey); font-size: 11px; flex-basis: 100%; text-transform: uppercase; letter-spacing: .08em; }
.word { display: inline-flex; gap: 0; }
.word .hex { color: var(--grey); margin-right: 8px; }
.bit { display: inline-block; width: 0.95em; text-align: center; border-radius: 2px; }
.bit.b8 { margin-left: 4px; }
.bit.y, .k.y { background: var(--green-l); color: var(--green); }
.bit.x, .k.x { background: var(--blue-l); color: var(--blue); }
.bit.econ, .k.econ { background: var(--red-l); color: var(--red); }
.bit.gov, .k.gov { background: var(--purple-l); color: var(--purple); }
.bit.pair, .k.pair { background: var(--amber-l); color: var(--amber); font-weight: bold; }
.bit.flag, .k.flag { outline: 1px solid var(--ink); }
.bit.rad, .k.rad { text-decoration: underline; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 4px; font-size: 12px; }
.k { padding: 1px 6px; border-radius: 3px; }
.name-build { font-family: var(--mono); font-size: 14px; margin: 8px 0 0; }
.name-build .unused { color: var(--grey); text-decoration: line-through; }

.slider { display: flex; flex-direction: column; font-size: 13px; color: var(--grey); gap: 4px; margin: 8px 0 12px; }
.slider output { font-family: var(--mono); color: var(--ink); }
input[type=range] { width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--grey); font-weight: normal; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 0 0 6px; }
td { padding: 3px 0; border-top: 1px solid var(--green-l); }
.num { text-align: right; font-family: var(--mono); }
td.zero { color: var(--grey); }

footer { max-width: 1280px; margin: 0 auto; padding: 0 24px 40px; color: var(--grey); font-size: 13px; }
footer a { color: inherit; }