:root {
  --bg: #0d0f12; --panel: #14181e; --panel2: #1b212a; --line: #262e3a;
  --ink: #e7ebf2; --dim: #97a1b2; --fine: #6f7b8d;
  --red: #c72222; --blue: #1f52c2; --yellow: #ebc71f; --green: #21943f; --white: #eceef2;
  --gold: #e8b84b; --ok: #4fbf7a; --bad: #e2604f;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--gold); color: #111; padding: 6px 10px; z-index: 99; }
.is-hidden { display: none !important; }

.top { max-width: 1180px; margin: 0 auto; padding: 22px 18px 6px; }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 34% 32%, #e24b45, var(--red) 62%, #6d0f0f);
  box-shadow: 0 0 0 3px #1b2029, 0 0 0 5px #3a4250; }
h1 { font-size: 30px; letter-spacing: -0.01em; margin: 0; }
.tag { color: var(--dim); max-width: 72ch; margin: 8px 0 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; font-size: 14px; color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 13px; cursor: pointer; }
button:hover { background: #232b36; border-color: #35405020; border-color: #354050; }
button.primary { background: var(--gold); color: #16181c; border-color: #b8902f; font-weight: 600; }
button.primary:hover { background: #f2c65c; }

main { max-width: 1180px; margin: 0 auto; padding: 0 18px 60px; }
.stagearea { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .stagearea { grid-template-columns: minmax(0, 1fr); } }
.stage-wrap { position: relative; background: #0a0c10; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; min-height: 260px; }
/* aspect-ratio plus min-height forced a 462 px minimum width, which widened the whole layout
 * viewport to 480 px on phones; below 520 px the stage takes a fixed height instead */
@media (max-width: 520px) { .stage-wrap { aspect-ratio: auto; height: 250px; min-height: 0; } }
.stage-wrap { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#stage { display: block; width: 100%; height: 100%; }
.nogl { position: absolute; inset: 0; display: flex; align-items: center; padding: 24px;
  color: var(--dim); background: #0a0c10; margin: 0; }
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; gap: 14px;
  padding: 10px 14px; background: linear-gradient(#0009, #0000); font-family: var(--mono);
  font-size: 13px; }
.hud-w { color: var(--gold); font-weight: 700; }
.hud-p { text-transform: uppercase; letter-spacing: 0.08em; }
.hud-p.good { color: var(--ok); } .hud-p.bad { color: var(--bad); }
.hud-b { color: var(--dim); }
.hud-h { color: var(--dim); margin-left: auto; }
.lights { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.light { width: 20px; height: 20px; border-radius: 50%; background: #262b33;
  border: 1px solid #39404c; }
.light-white { background: #f2f4f8; border-color: #fff; }
.light-red { background: var(--red); border-color: #ff6b6b; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel h2 { margin: 0 0 8px; font-size: 18px; }
.panel.wide { margin-top: 18px; }
.muted { color: var(--dim); }
.fine { color: var(--fine); font-size: 13px; }
.why { color: var(--gold); font-size: 14px; }
label { display: block; color: var(--dim); font-size: 13px; margin-bottom: 4px; }
input[type=number] { font: inherit; width: 140px; padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: #0e1116; color: var(--ink); }
.measures { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 10px 0;
  font-size: 13px; }
.measures dt { color: var(--dim); }
.measures dd { margin: 0; font-family: var(--mono); text-align: right; }
#barpath { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line);
  background: #101318; margin: 8px 0; }

.meet { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; align-items: start; }
.meet h2 { grid-column: 1 / -1; margin: 0; font-size: 20px; }
.meet > .muted { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .meet { grid-template-columns: minmax(0, 1fr); } }
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid caption { text-align: left; color: var(--fine); font-size: 12px; padding-bottom: 6px; }
.grid th, .grid td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.grid th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; }
.grid td { font-family: var(--mono); font-size: 13px; }
.grid .you { color: var(--gold); font-weight: 700; }
.grid .tot { font-weight: 700; }
.grid .good { color: var(--ok); } .grid .bad { color: var(--bad); }
.grid.small td, .grid.small th { padding: 4px 7px; font-size: 12px; }
.grid.compare td:first-child { font-family: var(--font); }
.grid.compare .ok { color: var(--ok); } .grid.compare .near { color: var(--gold); }
.grid.compare .bad { color: var(--bad); }
.table-scroll, .prose table { display: block; overflow-x: auto; max-width: 100%; }

.prose { margin-top: 34px; max-width: 78ch; }
.prose h2 { font-size: 22px; margin: 28px 0 8px; }
.prose h3 { font-size: 17px; margin: 22px 0 6px; color: var(--gold); }
.prose p { color: #cdd5e1; }
.prose q { color: var(--ink); font-style: italic; }
.claims { padding-left: 20px; }
.claims li { margin: 8px 0; color: #cdd5e1; }
.src { padding-left: 20px; font-size: 14px; color: #c0c8d6; }
.src li { margin: 5px 0; }
.foot { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--fine); font-size: 13px; max-width: 84ch; }
.foot a { color: var(--dim); }

.modal { position: fixed; inset: 0; background: #05070ad8; display: flex;
  align-items: flex-start; justify-content: center; padding: 24px; overflow: auto; z-index: 40; }
.modal-in { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; max-width: 640px; width: 100%; }
.modal-in.wide { max-width: 1000px; }
.modal-in h2 { margin: 0 0 10px; }
.modal-in ol { padding-left: 20px; }
kbd { font-family: var(--mono); background: #0e1116; border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: 12px; }
/* the provenance tag cell.  NOT .tag - that is the header tagline, and the two collided:
   the whole opening paragraph came out in a monospace font. */
.ptag { font-family: var(--mono); font-size: 11px; }
.tag-documented { color: var(--ok); } .tag-derived { color: #6fb0ff; }
.tag-measured { color: var(--gold); } .tag-calibrated { color: #d58ce0; }
.tag-reconstructed { color: var(--bad); }

/* phones: the standings and the final result are 6 and 7 columns of figures */
@media (max-width: 520px) {
  .grid th, .grid td, .grid.small th, .grid.small td { padding: 5px 4px; }
  .grid th { letter-spacing: 0; font-size: 11px; }
  .grid td { font-size: 12px; }
  .grid td:nth-child(2) { white-space: normal; }
  .panel.wide .grid { display: block; overflow-x: auto; }
}