:root{
  color-scheme: dark;
  --bg:#000;
  --fg:#ddd;
  --muted:#8a8a8a;
  --line:#2c2c2c;
  --surface:#111;
  --accent:#ff9800;
  --page:1000px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding:16px;
  background:var(--bg);
  color:var(--fg);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:var(--page);
  margin:0 auto 28px;
}
.nav a{
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  color:var(--fg);
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
}
.nav a:hover{ background:#1c1c1c; border-color:#555; }
.nav a[aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:#000; }
.nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

main{ max-width:var(--page); margin:0 auto; }

h1{ font-size:22px; font-weight:600; margin:0 0 4px; }
h2{ font-size:17px; font-weight:600; margin:32px 0 12px; color:var(--fg); }
.subtitle{ color:var(--muted); font-size:14px; margin:0 0 24px; }

.chart{ margin:0 0 28px; }
.chart__widget{ width:100%; height:500px; }
.chart__caption{ padding-top:6px; font-size:13px; color:var(--muted); }

.links{ list-style:none; padding:0; margin:0 0 28px; }
.links li{ margin:0 0 12px; }
.links a{ color:var(--accent); }
.links code{ color:var(--muted); font-size:13px; display:block; word-break:break-all; }

.note{
  border-left:3px solid var(--accent);
  background:var(--surface);
  padding:12px 16px;
  margin:0 0 24px;
  font-size:14px;
  color:var(--muted);
}

@media (max-width:600px){
  body{ padding:12px; }
  .chart__widget{ height:340px; }
  .nav a{ font-size:13px; padding:5px 10px; }
}