/* Ball-sorter figure in the product section. Kit rules from Anatomy (MIT), tones retuned to the site. */
.sorter {
  --anatomy-paper: #f5f7f8; --anatomy-face: #fff; --anatomy-top: #fff;
  --anatomy-shade-0: #d6dce1; --anatomy-shade-1: #e1e6ea; --anatomy-shade-2: #eaeef1; --anatomy-shade-3: #f2f4f6;
  --anatomy-lit-top: #fff; --anatomy-lit-shade: #f6e9e2;
  --anatomy-hi: #262b31; --anatomy-mid: #858d95; --anatomy-lo: #b1b8bf; --anatomy-faint: #d2d8dd; --anatomy-lit: #ed591f;
  --anatomy-halo: #6f7d89; --anatomy-halo-opacity: .3; --anatomy-dot: #39414a; --anatomy-void: #c3cbd2;
  --sorter-lit-0: #f0b598; --sorter-lit-1: #f6cbb5; --sorter-lit-2: #fadfd1; --sorter-lit-3: #fdf0e9;
  --sorter-ball-0: #d3d9de; --sorter-ball-1: #e0e5e9; --sorter-ball-2: #ebeef1; --sorter-ball-3: #f6f8f9;
  --anatomy-weight: .6px;
}
html[data-theme=dark] .sorter {
  --anatomy-paper: #202328; --anatomy-face: #2b2f35; --anatomy-top: #2e3238;
  --anatomy-shade-0: #1a1d21; --anatomy-shade-1: #1f2226; --anatomy-shade-2: #23272b; --anatomy-shade-3: #282c31;
  --anatomy-lit-top: #3a3330; --anatomy-lit-shade: #2f2a28;
  --anatomy-hi: #dbe0e5; --anatomy-mid: #78808a; --anatomy-lo: #4b5159; --anatomy-faint: #343940; --anatomy-lit: #ff9363;
  --anatomy-halo: #040506; --anatomy-halo-opacity: .85; --anatomy-dot: #e6e9ec; --anatomy-void: #121417;
  --sorter-lit-0: #5c3121; --sorter-lit-1: #74402b; --sorter-lit-2: #8c4f35; --sorter-lit-3: #a65f40;
  --sorter-ball-0: #343941; --sorter-ball-1: #40464e; --sorter-ball-2: #4e555e; --sorter-ball-3: #5f6771;
}
.sorter-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sorter-svg path, .sorter-svg circle { vector-effect: non-scaling-stroke; }
.sorter .iso-fill { fill: var(--anatomy-paper); stroke: none; }
.sorter .iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.sorter .iso-shade, .sorter .iso-top { stroke: none; }
.sorter .iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
.sorter .iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
.sorter .iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
.sorter .iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
.sorter .iso-top { fill: var(--anatomy-top); }
.sorter .iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
.sorter .iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
.sorter .iso-solid[data-seamless] > .iso-shade, .sorter .iso-solid[data-seamless] > .iso-top { stroke-width: .4; stroke-linejoin: round; }
.sorter .iso-solid[data-seamless] > .iso-shade[data-shade="0"] { stroke: var(--anatomy-shade-0); }
.sorter .iso-solid[data-seamless] > .iso-shade[data-shade="1"] { stroke: var(--anatomy-shade-1); }
.sorter .iso-solid[data-seamless] > .iso-shade[data-shade="2"] { stroke: var(--anatomy-shade-2); }
.sorter .iso-solid[data-seamless] > .iso-shade[data-shade="3"] { stroke: var(--anatomy-shade-3); }
.sorter .iso-solid[data-seamless][data-lit] > .iso-shade { stroke: var(--anatomy-lit-shade); }
.sorter .iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); stroke-width: 1.1px; }
.sorter .iso-halo { fill: var(--anatomy-halo); stroke: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.sorter .iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
.sorter .iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
.sorter .iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
.sorter .iso-line[data-tone="lo"] { stroke: var(--anatomy-lo); }
.sorter .iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
.sorter .iso-line[data-tone="lit"] { stroke: var(--anatomy-lit); }
.sorter .iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: .32; }
.sorter .iso-dots[data-tone="hi"] circle { opacity: .85; }
.sorter .iso-dots[data-tone="mid"] circle { opacity: .45; }
.sorter .iso-dots[data-tone="lo"] circle { opacity: .22; }
.sorter .iso-face-text { fill: var(--anatomy-mid); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: .04em; }
.sorter .sorter-void { fill: var(--anatomy-void); stroke: none; }
.sorter .sorter-ball { transition: opacity .5s ease; }
.sorter .sorter-ball .iso-shade[data-shade="0"] { fill: var(--sorter-ball-0); stroke: var(--sorter-ball-0); }
.sorter .sorter-ball .iso-shade[data-shade="1"] { fill: var(--sorter-ball-1); stroke: var(--sorter-ball-1); }
.sorter .sorter-ball .iso-shade[data-shade="2"] { fill: var(--sorter-ball-2); stroke: var(--sorter-ball-2); }
.sorter .sorter-ball .iso-shade[data-shade="3"] { fill: var(--sorter-ball-3); stroke: var(--sorter-ball-3); }
.sorter .sorter-ball .iso-solid[data-lit] > .iso-shade[data-shade="0"] { fill: var(--sorter-lit-0); stroke: var(--sorter-lit-0); }
.sorter .sorter-ball .iso-solid[data-lit] > .iso-shade[data-shade="1"] { fill: var(--sorter-lit-1); stroke: var(--sorter-lit-1); }
.sorter .sorter-ball .iso-solid[data-lit] > .iso-shade[data-shade="2"] { fill: var(--sorter-lit-2); stroke: var(--sorter-lit-2); }
.sorter .sorter-ball .iso-solid[data-lit] > .iso-shade[data-shade="3"] { fill: var(--sorter-lit-3); stroke: var(--sorter-lit-3); }
.sorter .sorter-ball[data-leaving] { opacity: 0; }
.sorter .tb-body { fill: var(--anatomy-shade-2); stroke: none; }
.sorter .tb-shine { fill: var(--anatomy-top); stroke: none; }
.sorter .tb-shade { fill: var(--anatomy-shade-0); stroke: none; }
.routing-map.sorter { padding: 26px 26px 22px; }
.routing-map.sorter .map-caption { margin-bottom: 4px; }
.sorter-stage { margin: 0 -8px; border-radius: 14px; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.sorter-stage:focus-visible { outline: 1px solid var(--muted); outline-offset: 4px; }
.sorter-stage img { display: block; width: 100%; height: auto; }
.sorter-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 6px; font: 12px/1.6 var(--mono); color: var(--muted); }
.sorter-readout { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
html:not(.js) .sorter-foot { display: none; }
.routing-map.sorter figcaption { margin-top: 16px; }
.sorter-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 8px; color: var(--ink); }
.sorter-key { display: inline-flex; align-items: center; gap: 7px; }
.sorter-swatch { width: 16px; height: 10px; flex: none; overflow: visible; fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sorter-swatch[data-mark="ball"] { stroke: var(--accent, #ed591f); }
@media (min-width: 1001px) {
  .routing-map.sorter .sorter-stage { width: 88%; margin-inline: auto; }
}
@media (max-width: 700px) {
  .routing-map.sorter { padding: 20px 16px 18px; }
  .sorter-keys { flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; margin-bottom: 12px; }
  .routing-map.sorter figcaption { text-align: left; }
  .sorter-stage { margin: 0 -6px; }
  .sorter-foot { font-size: 11px; }
}