/* THE STORY SO FAR (panels/story.js): a timeline of numbered markers and a list. */
.story-tl{position:relative;margin:4px 0 10px;min-height:96px}
.story-tl svg{display:block;position:absolute;left:0;top:0;width:100%}
.story-axis{stroke:var(--edge);stroke-width:1}
.story-ln{stroke:var(--orange);stroke-width:1.6;stroke-linejoin:round}
.story-mk{position:absolute;transform:translateX(-50%);width:24px;height:24px;padding:0;border:1px solid var(--c,var(--gold));background:#0c0c0c;color:var(--c,var(--gold));
  font:700 12px/22px var(--mono);text-align:center;cursor:pointer;border-radius:50%}
.story-mk:hover,.story-mk:focus-visible{background:var(--c,var(--gold));color:#000}
.story-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.story-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px 124px 112px 1fr;gap:8px;align-items:baseline;width:100%;padding:7px 6px;
  border-bottom:1px solid var(--edge);cursor:pointer;font-size:14px;min-height:44px;align-content:center}
.story-row:hover{background:#141414}
.story-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.story-n{color:var(--c,var(--gold));font:700 13px var(--mono)}
.story-when{color:var(--dim);font:13px var(--mono)}
.story-kind{color:var(--c,var(--gold));font:700 11px var(--mono);letter-spacing:.12em}
.story-lab{color:var(--ink);overflow-wrap:anywhere}
.story-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font:12px var(--mono);color:var(--dim)}
.story-key:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:6px}
.story-hint{flex-basis:100%}
@media (prefers-reduced-motion:no-preference){.story-mk,.story-row{transition:background-color .15s,color .15s}}
@media (max-width:560px){
  .story-row{grid-template-columns:24px 1fr;grid-template-areas:"n when" "n kind" "n lab";gap:2px 8px}
  .story-n{grid-area:n}.story-when{grid-area:when}.story-kind{grid-area:kind}.story-lab{grid-area:lab}
}