:root {
  --ink: #111111;
  --ink-2: #4f4d48;
  --muted: #8a877f;
  --surface: #ffffff;
  --plane: #fbfaf8;
  --grid: #ecebe5;
  --axis: #cfccc2;
  --hairline: rgba(17, 17, 17, 0.10);
  --shadow: rgba(17, 17, 17, 0.16);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* one sequential ramp for the contribution grid: magnitude is not identity */
  --l0: #f1efe9; --l1: #cde2fb; --l2: #9ec5f4; --l3: #5598e7; --l4: #2a78d6; --l5: #184f95;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
.d-page { max-width: 1120px; margin: 0 auto; padding: 44px 28px 60px; }
@media (max-width: 680px) { .d-page { padding: 26px 16px 40px; } }
.d-scroll { overflow-x: auto; }

/* ---- header ---- */
.d-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
h1 {
  font-size: 40px; font-weight: 600; letter-spacing: -0.028em; margin: 0 0 22px;
  text-wrap: balance; line-height: 1.05;
}
@media (max-width: 680px) { h1 { font-size: 28px; } }
.d-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 30px; padding: 20px 0; border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.d-fig { display: flex; flex-direction: column; gap: 3px; }
.d-fig-v { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.d-fig-l { font-size: 14px; color: var(--ink-2); }
.d-asof { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

/* ---- sections ---- */
.d-sec { margin-top: 52px; }
.d-sec h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.014em; margin: 0 0 6px; }
.d-sub { margin: 0 0 20px; font-size: 15px; color: var(--ink-2); max-width: 78ch; line-height: 1.55; }
.d-sub code {
  font-family: var(--mono); font-size: 13px; background: var(--plane);
  border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 5px;
}
.d-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* ---- composition ribbon ---- */
.d-ribbon { display: flex; height: 54px; border-radius: 8px; overflow: hidden; gap: 2px; }
.d-rib-seg {
  width: var(--w); background: var(--hue); border: 0; padding: 0 12px; cursor: pointer;
  display: flex; align-items: center; min-width: 4px;
  transition: opacity 160ms linear, filter 160ms linear;
}
.d-rib-seg:hover { filter: brightness(1.08); }
.d-rib-label {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.d-rib-label span { font-family: var(--mono); font-weight: 400; font-size: 11.5px; opacity: 0.92; }

/* ---- legend ---- */
.d-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.d-leg {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 5px 13px 5px 9px; font: inherit; font-size: 13px; color: var(--ink-2);
  transition: border-color 140ms linear, color 140ms linear, background 140ms linear;
}
.d-leg:hover { border-color: var(--axis); color: var(--ink); }
.d-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none; }
.d-clear { color: var(--muted); }

/* ---- charts ---- */
.d-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.d-tick {
  fill: var(--muted); font-size: 19px; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.d-seg { transition: opacity 160ms linear; }
.d-slot { cursor: default; }
.d-cross, .d-tip { opacity: 0; pointer-events: none; }
.d-cross { stroke: var(--axis); stroke-width: 1; }
.d-slot:hover .d-cross, .d-slot:hover .d-tip { opacity: 1; }
.d-tip-box {
  fill: var(--surface); stroke: var(--hairline); stroke-width: 1;
  filter: drop-shadow(0 3px 10px var(--shadow));
}
.d-tip-title { fill: var(--ink); font-size: 19px; font-weight: 600; }
.d-tip-label { fill: var(--ink-2); font-size: 17px; }
.d-tip-val {
  fill: var(--ink); font-size: 17px; font-weight: 500; text-anchor: end;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.d-tip-rule { stroke: var(--hairline); stroke-width: 1; }

/* ---- task cards ---- */
.d-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px;
}
.d-card-task-btn {
  position: relative; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color 150ms linear, box-shadow 150ms linear, transform 150ms ease;
}
.d-card-task-btn:hover { border-color: var(--hue); box-shadow: 0 3px 14px var(--shadow); transform: translateY(-2px); }
.d-c-head { display: flex; align-items: center; gap: 8px; }
.d-c-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.d-c-total {
  font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.d-spark { display: block; width: 100%; height: auto; margin: 6px 0 2px; }
.d-c-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-trend { font-size: 12.5px; font-weight: 600; }
.d-up { color: #0a7a0a; } .d-down { color: #c0392b; } .d-flat { color: var(--muted); }
.d-c-12 { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.d-c-link {
  margin-top: 8px; font-size: 12px; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; align-self: flex-start;
}
.d-card-task-btn:hover .d-c-link { color: var(--hue); border-bottom-color: var(--hue); }

/* ---- contribution grid ---- */
.d-grid {
  display: grid; grid-template-columns: 250px 1fr; gap: 3px 12px;
  align-items: center; min-width: 760px;
}
.d-grid-head {
  display: flex; align-items: baseline; gap: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.d-grid-head span:first-child { flex: 1; }
.d-h-likes { width: 44px; text-align: right; }
.d-h-repos { width: 42px; text-align: right; }
.d-grid-axis {
  grid-column: 2; position: relative; height: 16px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.d-grid-axis span {
  position: absolute;
  left: calc(var(--i) / var(--cols) * 100%);
}
.d-row { display: contents; }
.d-lab {
  display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none;
  color: var(--ink); padding: 1px 0;
}
.d-lab img, .d-lab-blank {
  width: 18px; height: 18px; border-radius: 4px; flex: none; object-fit: cover;
  background: var(--grid); border: 1px solid var(--hairline);
}
.d-lab-name {
  font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1;
}
.d-lab:hover .d-lab-name { text-decoration: underline; }
.d-lab-n {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink); flex: none;
  font-variant-numeric: tabular-nums; width: 44px; text-align: right; font-weight: 500;
}
.d-lab-r {
  font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none;
  font-variant-numeric: tabular-nums; width: 42px; text-align: right;
}
.d-cells { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 3px; }
.d-cell {
  display: block; aspect-ratio: 1; border-radius: 2px; background: var(--l0);
  transition: opacity 160ms linear;
}
.d-l1 { background: var(--l1); } .d-l2 { background: var(--l2); }
.d-l3 { background: var(--l3); } .d-l4 { background: var(--l4); }
.d-l5 { background: var(--l5); }
.d-cells .d-cell:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.d-grid-key {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap;
}
.d-scale { display: inline-flex; align-items: center; gap: 4px; }
.d-scale .d-cell { width: 12px; height: 12px; }

/* ---- release river ---- */
.d-river { position: relative; height: 54px; margin-top: 6px; min-width: 620px; }
.d-rel {
  position: absolute; left: var(--x); top: 8px; transform: translateX(-50%);
  width: 32px; height: 32px; text-decoration: none;
  transition: left 240ms cubic-bezier(.2,.8,.3,1), opacity 160ms linear;
}
.d-rel img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--grid); border: 2px solid var(--hue);
  box-shadow: 0 0 0 2px var(--surface);
  transition: transform 180ms cubic-bezier(.2,.8,.3,1);
}
.d-rel:hover { z-index: 30; }
.d-rel:hover img { transform: translateY(-4px) scale(1.5); }
.d-card {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: 0 5px 20px var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity 140ms linear, transform 180ms cubic-bezier(.2,.8,.3,1);
}
.d-card-start .d-card { left: 0; transform: translateX(0) translateY(4px); }
.d-card-end .d-card { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.d-rel:hover .d-card { opacity: 1; transform: translateX(-50%) translateY(0); }
.d-card-start:hover .d-card, .d-card-end:hover .d-card { transform: translateX(0) translateY(0); }
.d-card-task {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hue); font-weight: 500;
}
.d-card-name { font-size: 15px; font-weight: 600; }
.d-card-id { font-family: var(--mono); font-size: 11px; color: var(--ink-2); overflow-wrap: anywhere; }
.d-card-meta {
  display: flex; justify-content: space-between; gap: 14px; margin-top: 5px; padding-top: 6px;
  border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); white-space: nowrap;
}
.d-river-axis {
  position: relative; height: 18px; font-family: var(--mono); font-size: 12px;
  color: var(--muted); min-width: 620px;
}
.d-river-year { position: absolute; left: var(--x); }

/* ---- one selection, five encodings ---- */
body[data-task] .d-seg:not(.d-on),
body[data-task] .d-rel:not(.d-on),
body[data-task] .d-rib-seg:not(.d-on),
body[data-task] .d-row:not(.d-on) .d-cell,
body[data-task] .d-row:not(.d-on) .d-lab { opacity: 0.16; }
body[data-task] .d-card-task-btn:not(.d-on) { opacity: 0.42; }
body[data-task] .d-leg:not(.d-on):not(.d-clear) { opacity: 0.45; }
.d-leg.d-on { border-color: var(--hue); color: var(--ink); background: var(--plane); }
.d-card-task-btn.d-on { border-color: var(--hue); box-shadow: 0 3px 14px var(--shadow); }

/* ---- table & footer ---- */
details { margin-top: 8px; }
summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
.d-table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin-top: 14px; }
.d-table caption { text-align: left; color: var(--muted); font-size: 12.5px; padding-bottom: 8px; }
.d-table th, .d-table td { padding: 7px 16px 7px 0; text-align: right; white-space: nowrap; }
.d-table th:first-child, .d-table td:first-child { text-align: left; }
.d-table td:first-child { display: flex; align-items: center; gap: 8px; }
.d-table thead th {
  font-weight: 500; color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; border-bottom: 1px solid var(--axis);
}
.d-table tbody td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.d-table tbody td:first-child { font-family: var(--sans); }
.d-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--grid); }
.d-foot {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 11px;
}
.d-foot p { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 88ch; line-height: 1.55; }
.d-foot strong { color: var(--ink); font-weight: 600; }
.d-links a { color: var(--ink-2); }
.d-tipbox {
  position: absolute; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--ink); color: #fff; border-radius: 5px; padding: 6px 9px;
  font-size: 12px; white-space: nowrap; transition: opacity 110ms linear;
}
.d-tipbox.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }