.nst{display:grid;gap:1rem}

/* the slice ramp: one hue family, because it is all one archive */
.nst__slice[data-i="0"],.nst__leg[data-i="0"]{--sl:#5ad2ff}
.nst__slice[data-i="1"],.nst__leg[data-i="1"]{--sl:#3fa9d8}
.nst__slice[data-i="2"],.nst__leg[data-i="2"]{--sl:#2f83b1}
.nst__slice[data-i="3"],.nst__leg[data-i="3"]{--sl:#27638a}
.nst__slice[data-i="4"],.nst__leg[data-i="4"]{--sl:#274d6b}
.nst__slice[data-i="5"],.nst__leg[data-i="5"]{--sl:#2b4056}

.nst__head{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}

.nst__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;min-width:0}
.nst__crumb{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);padding:.28rem .12rem;border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.nst__crumb:hover{color:var(--text)}
.nst__crumb.is-here{color:var(--yellow);border-bottom-color:var(--yellow);cursor:default}
.nst__sep{color:var(--text-4);font-size:.7rem}

/* ---------------------------------------------------------- the bar */
.nst__bar{
  display:flex;gap:2px;width:100%;
  height:clamp(3.2rem,7vw,5rem);
  border-radius:3px;overflow:hidden;background:var(--surface-2);
}
.nst__slice{
  position:relative;flex-basis:0;min-width:3px;overflow:hidden;
  background:var(--sl);border-radius:2px;padding:0;text-align:left;
  transform-origin:0 50%;
  transition:filter var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),flex-grow var(--dur-3) var(--ease);
}
.nst__bar.is-in .nst__slice{animation:nstIn var(--dur-3) var(--ease) both}
@media (prefers-reduced-motion: reduce){.nst__bar.is-in .nst__slice{animation:none}}
@keyframes nstIn{from{transform:scaleX(.001);opacity:.2}to{transform:scaleX(1);opacity:1}}

.nst__slice:hover,.nst__slice:focus-visible{filter:brightness(1.22)}
.nst__slice:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--yellow)}

.nst__slice-lab{
  position:absolute;inset:0;padding:.55rem .6rem;display:grid;align-content:space-between;
  gap:.2rem;color:#04121b;pointer-events:none;
}
.nst__slice-lab b{
  font-family:var(--mono);font-size:.63rem;font-weight:600;letter-spacing:.03em;
  line-height:1.15;text-transform:uppercase;
}
.nst__slice-lab i{font-style:normal;font-size:.78rem;font-weight:600;letter-spacing:-.02em}
/* below ~9% of the bar there is no room for a label; the legend carries it */
.nst__slice{container-type:inline-size}
@container (max-width: 92px){.nst__slice-lab{display:none}}
@container (max-width: 150px){.nst__slice-lab b{display:none}}

.nst__zoom{position:absolute;right:.45rem;top:.45rem;width:.95rem;height:.95rem;opacity:0;transition:opacity var(--dur-1) var(--ease);pointer-events:none}
.nst__zoom svg{width:100%;height:100%;fill:none;stroke:#04121b;stroke-width:1.5;stroke-linecap:round}
.nst__slice:hover .nst__zoom,.nst__slice:focus-visible .nst__zoom{opacity:.85}
@container (max-width: 92px){.nst__zoom{display:none}}

.nst__scale{font-size:.62rem;color:var(--text-4);letter-spacing:.13em;margin-top:-.4rem}

/* -------------------------------------------------------- the readout */
.nst__read{
  border-left:2px solid var(--yellow);padding:.15rem 0 .15rem 1rem;min-height:3.3rem;
}
.nst__read-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem}
.nst__read-t b{font-size:1rem;color:var(--text);font-weight:600}
.nst__read-t .num{font-size:1.05rem;color:var(--yellow);letter-spacing:-.02em}
.nst__exact{
  font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan-deep);
  padding:.1rem .34rem;border-radius:2px;
}
.nst__read-d{font-size:.85rem;color:var(--text-3);line-height:1.5;margin-top:.25rem;max-width:64ch}

/* --------------------------------------------------------- the legend */
.nst__legend{display:grid;gap:0;border-top:1px solid var(--line)}
.nst__leg{
  display:grid;grid-template-columns:.7rem minmax(0,1fr) auto auto;
  gap:.75rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--line-soft);
}
.nst__swatch{width:.7rem;height:.7rem;border-radius:2px;background:var(--sl);align-self:center}
.nst__leg-n{font-size:.86rem;color:var(--text-2);min-width:0}
.nst__leg-v{font-size:.82rem;color:var(--text);letter-spacing:-.02em}
.nst__leg-p{font-family:var(--mono);font-size:.66rem;color:var(--text-4);letter-spacing:.04em;text-align:right;min-width:8.5rem}

/* ------------------------------------------------------ no-count list */
.nst__nocount{border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.5rem}
.nst__nocount .label{color:var(--text-4)}
.nst__nocount ul{display:flex;flex-wrap:wrap;gap:.4rem}
.nst__nocount li{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;color:var(--text-3);
  border:1px dashed var(--line-2);border-radius:100px;padding:.26rem .6rem;
}

@media (max-width:640px){
  .nst__bar{height:clamp(2.8rem,12vw,3.6rem)}
  .nst__leg{grid-template-columns:.7rem minmax(0,1fr) auto;row-gap:.15rem}
  .nst__leg-p{grid-column:2 / -1;text-align:left;min-width:0}
  .nst__head{gap:.6rem}
  .nst__read-t .num{font-size:.95rem}
}