* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0f1a;
  --panel: rgba(255,255,255,0.025);
  --line: rgba(255,255,255,0.08);
  --text: #c8d4e8;
  --dim: #7286a5;
  --dimmer: #4a5a76;
  --accent: #4fa1ff;
  --good: #06d6a0;
  --bad: #ff6b6b;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(79,161,255,0.12) 0%, transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: auto, 28px 28px;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 5rem;
  max-width: 1240px;
  margin: 0 auto;
}

a.back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #4a7aaa; text-decoration: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.06em;
  margin-bottom: 3rem; transition: color 0.2s;
}
a.back:hover { color: var(--accent); }

header { text-align: center; margin-bottom: 3rem; }
.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.25em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 0.9rem;
}
h1 {
  font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, #ffffff 0%, #a0c4ff 55%, #7b8fff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tagline { max-width: 60ch; margin: 0 auto; color: var(--dim); line-height: 1.65; font-size: 0.98rem; }
.tagline strong { color: var(--text); font-weight: 500; }

/* ---- status bar ---- */
.statusbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin-bottom: 2.5rem;
}
.stat { background: #12121f; padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.stat .k {
  font-family: 'Space Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer);
}
.stat .v { font-family: 'Space Mono', monospace; font-size: 0.92rem; color: var(--text); }

/* ---- panels ---- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.5rem; margin-bottom: 2rem;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
h2 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.hint, .panel-head .hint {
  font-family: 'Space Mono', monospace; font-size: 0.68rem;
  color: var(--dimmer); letter-spacing: 0.04em;
}
.controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.06em;
  background: transparent; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.32rem 0.75rem; cursor: pointer; transition: all 0.18s;
}
.chip:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.chip.on { background: rgba(79,161,255,0.14); color: var(--accent); border-color: rgba(79,161,255,0.4); }
.sep { width: 1px; height: 18px; background: var(--line); margin: 0 0.35rem; }

/* ---- chart ---- */
.chart-wrap { position: relative; padding-left: 52px; padding-bottom: 26px; }
#chart {
  width: 100%; height: 420px; display: block; overflow: visible;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#chart path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: opacity 0.2s, stroke-width 0.2s; }
#chart path.hidden { display: none; }
#chart path.faded { opacity: 0.18; }
#chart path.hi { stroke-width: 3; opacity: 1; }
#chart .gridline { stroke: rgba(255,255,255,0.055); stroke-width: 1; vector-effect: non-scaling-stroke; }
#chart .baseline { stroke: rgba(255,255,255,0.22); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
#chart .crosshair { stroke: rgba(255,255,255,0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }

.axis-y, .axis-x { position: absolute; font-family: 'Space Mono', monospace; font-size: 0.64rem; color: var(--dimmer); }
.axis-y { left: 0; top: 0; width: 48px; height: 420px; }
.axis-y span { position: absolute; right: 6px; transform: translateY(-50%); white-space: nowrap; }
.axis-x { left: 52px; right: 0; bottom: 0; height: 22px; }
.axis-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(12,12,22,0.97); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 0.6rem 0.7rem; min-width: 168px;
  font-family: 'Space Mono', monospace; font-size: 0.68rem; line-height: 1.5;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.tooltip .tdate { color: var(--dim); margin-bottom: 0.4rem; font-size: 0.64rem; letter-spacing: 0.05em; }
.tooltip .trow { display: flex; align-items: center; gap: 0.45rem; }
.tooltip .trow .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tooltip .trow .nm { flex: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tooltip .trow .vl { color: var(--text); }

/* ---- legend ---- */
.legend { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.lg {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'Space Mono', monospace; font-size: 0.68rem;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer;
  transition: all 0.18s; color: var(--dim); user-select: none;
}
.lg:hover { border-color: rgba(255,255,255,0.22); color: var(--text); }
.lg .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lg.off { opacity: 0.35; }
.lg.off .dot { background: var(--dimmer) !important; }
.lg .amt { color: var(--dimmer); }

/* ---- table ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 900px; }
th {
  font-family: 'Space Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dimmer);
  text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line);
  cursor: pointer; white-space: nowrap; user-select: none;
}
th:hover { color: var(--dim); }
th.num, td.num { text-align: right; }
th.sorted { color: var(--accent); }
tbody tr { border-bottom: 1px solid rgba(255,255,255,0.045); cursor: pointer; transition: background 0.15s; }
tbody tr:hover { background: rgba(79,161,255,0.06); }
td { padding: 0.6rem 0.7rem; font-family: 'Space Mono', monospace; font-size: 0.8rem; white-space: nowrap; }
td.bot { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; color: #fff; }
td.bot .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.55rem; }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.fam {
  font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dimmer);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.5rem;
}
tr.is-bench td.bot { color: #ffd166; }

/* ---- findings ---- */
.findings { display: grid; gap: 0.9rem; }
.finding {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  align-items: start; padding: 0.95rem 1.1rem;
  background: rgba(255,255,255,0.022); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 8px;
}
.finding .n {
  font-family: 'Space Mono', monospace; font-size: 0.68rem;
  color: var(--accent); padding-top: 0.15rem;
}
.finding p { line-height: 1.6; font-size: 0.9rem; color: var(--dim); }
.finding strong { color: var(--text); font-weight: 500; }

/* ---- method ---- */
.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0.9rem; }
.mcard { padding: 1rem 1.1rem; background: rgba(255,255,255,0.022); border: 1px solid var(--line); border-radius: 8px; }
.mcard h3 {
  font-family: 'Space Mono', monospace; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.55rem; font-weight: 400;
}
.mcard p { font-size: 0.85rem; line-height: 1.6; color: var(--dim); }
.mcard code { font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--text); }
.disclaimer {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: 0.78rem; line-height: 1.65; color: var(--dimmer); max-width: 78ch;
}

/* ---- modal ---- */
.modal {
  position: fixed; inset: 0; background: rgba(6,6,12,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; z-index: 50; backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative; background: #12121f; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 1.8rem; max-width: 760px; width: 100%;
  max-height: 86vh; overflow-y: auto;
}
.close {
  position: absolute; top: 0.8rem; right: 1rem; background: none; border: none;
  color: var(--dimmer); font-size: 1.5rem; cursor: pointer; line-height: 1; transition: color 0.2s;
}
.close:hover { color: var(--text); }
.modal-card h3 { font-size: 1.35rem; font-weight: 500; margin-bottom: 0.35rem; }
.modal-card .mparams {
  font-family: 'Space Mono', monospace; font-size: 0.7rem;
  color: var(--dimmer); letter-spacing: 0.05em; margin-bottom: 1rem;
}
.modal-card .mblurb { color: var(--dim); line-height: 1.65; margin-bottom: 1.5rem; font-size: 0.92rem; }
.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 1.5rem; }
.mstat { background: #12121f; padding: 0.7rem 0.85rem; }
.mstat .k { font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dimmer); display: block; margin-bottom: 0.28rem; }
.mstat .v { font-family: 'Space Mono', monospace; font-size: 0.88rem; }
.modal-card h4 {
  font-family: 'Space Mono', monospace; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; font-weight: 400;
}
.trades { width: 100%; border-collapse: collapse; font-family: 'Space Mono', monospace; font-size: 0.72rem; min-width: 0; }
.trades th { font-size: 0.58rem; padding: 0.4rem 0.5rem; cursor: default; }
.trades td { padding: 0.35rem 0.5rem; font-size: 0.72rem; }
.trades tbody tr { cursor: default; }
.trades tbody tr:hover { background: none; }
.side-buy { color: var(--good); }
.side-sell { color: var(--bad); }

@media (max-width: 720px) {
  body { padding: 2rem 1rem 4rem; }
  .panel { padding: 1.1rem; }
  #chart, .axis-y { height: 300px; }
  .chart-wrap { padding-left: 46px; }
  .axis-x { left: 46px; }
}

/* ---- start-date control ----
   The point of the whole page: the leaderboard is a function of the window,
   so the window has to be something a visitor can move. */
.window-ctl {
  padding: 0.85rem 0 1.05rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.wc-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.wc-row label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dimmer); white-space: nowrap;
}
.wc-date {
  font-family: 'Space Mono', monospace; font-size: 0.9rem;
  color: var(--accent); min-width: 6.2em;
}
#startdate {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 220px; min-width: 160px; height: 3px;
  background: var(--line); border-radius: 2px; outline: none;
}
#startdate:disabled { opacity: 0.4; }
#startdate::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  cursor: pointer; box-shadow: 0 0 0 1px var(--accent);
}
#startdate::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  cursor: pointer; box-shadow: 0 0 0 1px var(--accent);
}
#startdate:focus-visible { box-shadow: 0 0 0 3px rgba(79,161,255,0.25); }
.wc-note {
  margin: 0.7rem 0 0; font-size: 0.82rem; line-height: 1.6;
  color: var(--dim); max-width: 78ch;
}
.wc-rank { color: var(--text); }
.wc-rank strong { color: var(--accent); font-weight: 500; }
.window-ctl.busy .wc-date { opacity: 0.45; }

/* ---- rank robustness strip ----
   One row per bot: the range of finishing places it took across every start
   date. The single-window leaderboard cannot show this, and it is the part
   that separates a strategy from a lucky entry date. */
.rk-axis, .rk-row {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr 3.6rem 4.6rem;
  align-items: center; gap: 0.75rem;
}
.rk-axis {
  padding-bottom: 0.5rem; margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dimmer);
}
.rk-axis .rk-stat { text-align: right; }
.rk-row {
  padding: 0.3rem 0; border-radius: 4px; cursor: pointer;
}
.rk-row:hover { background: rgba(255,255,255,0.035); }
.rk-name {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.84rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-name .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rk-track { position: relative; height: 16px; }
.rk-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line);
}
.rk-span {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px; border-radius: 2px; opacity: 0.45;
}
.rk-med {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.rk-cur {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--text); background: transparent;
}
.rk-tick {
  position: absolute; top: 0; font-size: 0.6rem; color: var(--dimmer);
  transform: translateX(-50%);
}
.rk-stat {
  font-family: 'Space Mono', monospace; font-size: 0.8rem;
  color: var(--dim); text-align: right;
}
.rk-stat.strong { color: var(--text); }
.rk-note {
  margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.65;
  color: var(--dim); max-width: 82ch;
}
.rk-note strong { color: var(--text); font-weight: 500; }
@media (max-width: 620px) {
  .rk-axis, .rk-row { grid-template-columns: minmax(6rem, 9rem) 1fr 2.8rem 3.4rem; gap: 0.5rem; }
  .rk-name { font-size: 0.76rem; }
}

/* ---- year-by-year grid ----
   The leaderboard is a single number per bot over the whole window, which is
   exactly where a lucky year hides. One column per calendar year, tinted by the
   size of the move, is the cheapest way to show that most of these bots live
   off one year and lose in the others. */
.yr-grid { min-width: 640px; }
.yr-row {
  display: grid; grid-template-columns: var(--yr-cols);
  align-items: stretch; gap: 4px; margin-bottom: 4px;
}
.yr-row[data-id] { cursor: pointer; border-radius: 6px; transition: background 0.15s; }
.yr-row[data-id]:hover { background: rgba(79,161,255,0.07); }
.yr-name {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text);
  padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yr-name .swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.yr-cell {
  font-family: 'Space Mono', monospace; font-size: 0.74rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.3rem; border-radius: 5px; white-space: nowrap;
}

.yr-head { margin-bottom: 0.5rem; }
.yr-head .yr-name {
  font-family: 'Space Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dimmer);
}
.yr-h {
  flex-direction: column; gap: 0.2rem; cursor: pointer; user-select: none;
  border: 1px solid transparent; transition: all 0.18s;
}
.yr-h:hover { border-color: rgba(255,255,255,0.18); }
.yr-h.on { border-color: rgba(79,161,255,0.45); background: rgba(79,161,255,0.1); }
.yr-h .yr-y { font-size: 0.78rem; color: var(--text); }
.yr-h.on .yr-y { color: var(--accent); }
.yr-h .yr-btc { font-size: 0.58rem; letter-spacing: 0.05em; color: var(--dimmer); }
.yr-part {
  font-family: 'Space Mono', monospace; font-size: 0.52rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dimmer);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 0.25rem; margin-left: 0.35rem; vertical-align: 0.1em;
}
/* The best bot of each year, marked rather than re-sorted: the ring survives
   whichever order the rows are in. */
.yr-cell.best { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42); }

/* the same numbers inside a bot's modal */
.yr-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.yr-chip {
  display: flex; flex-direction: column; gap: 0.2rem; min-width: 5.4rem;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 7px; padding: 0.45rem 0.65rem;
  font-family: 'Space Mono', monospace;
}
.yr-chip .k { font-size: 0.58rem; letter-spacing: 0.12em; color: var(--dimmer); }
.yr-chip .v { font-size: 0.82rem; }

@media (max-width: 720px) {
  .yr-name { font-size: 0.76rem; }
  .yr-cell { font-size: 0.68rem; padding: 0.45rem 0.2rem; }
}