/* Page-local, editable future-cone diagram. No image, script or shared style changes. */
.hc-futures {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.hc-futures-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.hc-futures-heading h3 { margin: 0; font-size: 23px; font-weight: 500; }
.hc-futures-heading > span { font: 400 13px/1.6 "Bitcount Grid Single", monospace; color: var(--muted); }
.hc-futures-plot { position: relative; width: 100%; aspect-ratio: 800 / 330; margin-top: 24px; color: var(--ink); }
.hc-futures-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hc-cone { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hc-cone-possible { fill: var(--ink); fill-opacity: .025; stroke-dasharray: 5 5; }
.hc-cone-plausible { fill: var(--ink); fill-opacity: .045; }
.hc-cone-probable { fill: var(--ink); fill-opacity: .08; }
.hc-cone-preferable { fill: var(--highlight); fill-opacity: .8; stroke: #668b16; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hc-cone-time { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 5; opacity: .7; vector-effect: non-scaling-stroke; }
.hc-cone-label { position: absolute; left: 87.5%; transform: translate(-50%, -50%); min-width: 28px; height: 28px; display: grid; place-items: center; font: 400 16px/1 "Bitcount Grid Single", monospace; background: var(--paper); color: var(--ink); }
.hc-cone-label-possible { top: 85%; }
.hc-cone-label-plausible { top: 67%; }
.hc-cone-label-probable { top: 50%; }
.hc-cone-label-preferable { top: 33%; background: var(--highlight); color: #242623; }
.hc-futures-axis { display: flex; justify-content: space-between; padding: 10px 10% 18px 5%; border-bottom: 1px solid var(--rule); font: 400 16px/1.5 "Bitcount Grid Single", "PingFang SC", sans-serif; }
.hc-futures-axis small { font-size: 12px; margin-left: 8px; color: var(--muted); }
.hc-futures-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 10px 0 0; }
.hc-futures-key > div { min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.hc-futures-key dt { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.5; }
.hc-futures-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: 1px; font: 400 16px/1 "Bitcount Grid Single", monospace; border: 1px solid var(--muted); }
.hc-futures-key dt small { display: block; margin-top: 3px; font: 400 12px/1.6 "Bitcount Grid Single", monospace; color: var(--muted); }
.hc-futures-key dd { margin: 12px 0 0; font-size: 15px; line-height: 1.75; }
.hc-futures-key .hc-futures-examples { margin-top: 6px; color: var(--muted); font-size: 14px; }
.hc-futures-preferred .hc-futures-number { background: var(--highlight); color: #242623; border-color: var(--highlight); }
.hc-futures-focus { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 22px 0 0; color: var(--ink); font-size: 16px; }
.hc-futures-focus > span { font-size: 14px; font-weight: 500; border-bottom: 3px solid var(--highlight); }
.hc-futures figcaption { display: block; margin-top: 10px; font-size: 12px; }
@media (max-width: 600px) {
  .hc-futures-heading h3 { font-size: 21px; }
  .hc-futures-heading > span { font-size: 12px; }
  .hc-futures-plot { aspect-ratio: 800 / 440; margin-top: 18px; }
  .hc-futures-key { grid-template-columns: minmax(0, 1fr); }
  .hc-futures-key > div { padding: 19px 0; }
  .hc-futures-key dt { align-items: center; }
  .hc-futures-key dt > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .hc-futures-key dd { margin-top: 10px; }
  .hc-futures-axis { padding-bottom: 14px; }
}